/* Patch 314 — native Dashboard Studio interaction with transparent hitbox editing. */
.studio-canvas--native {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.studio-canvas--native .studio-element {
    touch-action: none;
}

.studio-canvas--native .studio-element:hover,
.studio-canvas--native .studio-element.is-selected {
    cursor: move;
}

.studio-canvas--native .studio-resize {
    cursor: nwse-resize !important;
    touch-action: none;
}

/* The editing layer must never tint or obscure the page being arranged. */
.studio-canvas--native .studio-hitbox-layer,
.studio-canvas--native .studio-hitbox-layer.is-editing {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 5000 !important;
}

.studio-canvas--native .studio-hitbox-panel {
    pointer-events: auto !important;
    touch-action: none;
    overflow: visible;
    background: transparent !important;
    border: 1px solid rgba(72, 96, 55, .78) !important;
    box-shadow: 0 0 0 1px rgba(255, 253, 247, .72) !important;
}

.studio-canvas--native .studio-hitbox-panel button {
    pointer-events: auto !important;
    touch-action: none;
}

.studio-canvas--native .studio-hitbox-panel.is-moving,
.studio-canvas--native .studio-hitbox-panel.is-moving .studio-nav-hitbox {
    cursor: grabbing !important;
}

.studio-canvas--native .studio-nav-hitbox {
    cursor: grab;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid rgba(72, 96, 55, .52) !important;
    box-shadow: none !important;
}

.studio-canvas--native .studio-nav-hitbox:last-of-type {
    border-right: 0 !important;
}

.studio-canvas--native .studio-nav-hitbox:hover,
.studio-canvas--native .studio-nav-hitbox:focus-visible {
    background: rgba(113, 151, 83, .10) !important;
    outline: 1px solid rgba(72, 96, 55, .72);
    outline-offset: -1px;
}

.studio-canvas--native .studio-nav-hitbox span {
    background: rgba(255, 253, 247, .90) !important;
    color: #486037 !important;
    border: 1px solid rgba(72, 96, 55, .22);
    box-shadow: 0 1px 3px rgba(45, 52, 36, .08);
}

.studio-canvas--native .studio-hitbox-move {
    cursor: grab !important;
    background: rgba(255, 253, 247, .94) !important;
    color: #486037 !important;
    border: 1px solid rgba(72, 96, 55, .72) !important;
    box-shadow: 0 2px 7px rgba(45, 52, 36, .12) !important;
}

.studio-canvas--native .studio-hitbox-divider {
    width: 14px !important;
    margin-left: -7px;
    cursor: ew-resize !important;
    z-index: 9999 !important;
    background: transparent !important;
}

/* Retire the legacy neon divider drawn by app.css. */
.studio-canvas--native .studio-hitbox-divider::before {
    display: none !important;
}

.studio-canvas--native .studio-hitbox-divider::after {
    content: "";
    position: absolute;
    inset: 0 6px;
    background: rgba(72, 96, 55, .74);
    box-shadow: 0 0 0 1px rgba(255, 253, 247, .82);
}

.studio-canvas--native .studio-hitbox-divider:hover::after,
.studio-canvas--native .studio-hitbox-divider.is-dragging::after {
    inset-inline: 5px;
    background: rgba(55, 91, 60, .96);
}

.studio-hitbox-inspector {
    margin: 0 1rem 1rem;
    padding: .85rem 1rem 1rem;
    border: 1px solid rgba(137, 109, 57, .35);
    border-radius: 14px;
    background: rgba(255, 252, 244, .92);
    box-shadow: 0 8px 24px rgba(58, 43, 20, .08);
    color: #4b3924;
}

.studio-hitbox-inspector > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.studio-hitbox-inspector > header div {
    display: grid;
    gap: .15rem;
}

.studio-hitbox-inspector > header strong {
    font-family: Georgia, serif;
    font-size: 1rem;
}

.studio-hitbox-inspector > header small,
.studio-hitbox-inspector > header output {
    color: #79684d;
    font-size: .78rem;
}

.studio-hitbox-inspector__position,
.studio-hitbox-inspector__dividers {
    display: grid;
    gap: .65rem;
}

.studio-hitbox-inspector__position {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    margin-bottom: .8rem;
}

.studio-hitbox-inspector__dividers {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: 220px;
    overflow: auto;
    padding-right: .25rem;
}

.studio-hitbox-inspector label {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr 76px;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    font-size: .78rem;
}

.studio-hitbox-inspector label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-hitbox-inspector input[type="range"] {
    width: 100%;
    accent-color: #64784f;
    cursor: ew-resize;
}

.studio-hitbox-inspector input[type="number"] {
    width: 76px;
    padding: .35rem .45rem;
    border: 1px solid rgba(137, 109, 57, .4);
    border-radius: 8px;
    background: #fffdf7;
    color: inherit;
}

@media (max-width: 900px) {
    .studio-hitbox-inspector__position {
        grid-template-columns: 1fr;
    }

    .studio-hitbox-inspector label {
        grid-template-columns: 110px 1fr 70px;
    }
}


/* Patch 315 — workspace backgrounds and nav-bounded hitbox editing. */
.studio-background-controls { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem; margin:0 1rem 1rem; padding:.8rem 1rem; border:1px solid rgba(137,109,57,.28); border-radius:14px; background:rgba(255,252,244,.9); color:#4b3924; }
.studio-background-controls > strong { font-family:Georgia,serif; margin-right:.25rem; }
.studio-background-controls label { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; }
.studio-background-controls input[type="color"] { width:42px; height:32px; padding:2px; border:1px solid rgba(137,109,57,.35); border-radius:8px; background:#fffdf7; }
.studio-background-controls input[type="file"] { max-width:250px; font-size:.75rem; }
.studio-background-controls select { min-height:34px; padding:.3rem .55rem; border:1px solid rgba(137,109,57,.35); border-radius:8px; background:#fffdf7; color:inherit; }
.studio-background-file { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6f614d; font-size:.75rem; }
.studio-canvas--native > .studio-hitbox-panel { background:rgba(79,137,70,.13)!important; border:1px solid rgba(61,105,57,.82)!important; box-shadow:0 0 0 1px rgba(255,253,247,.72),0 3px 10px rgba(44,75,40,.10)!important; }
.studio-canvas--native > .studio-hitbox-panel .studio-nav-hitbox { background:rgba(93,151,79,.045)!important; }
.studio-canvas--native > .studio-hitbox-panel .studio-nav-hitbox:hover,.studio-canvas--native > .studio-hitbox-panel .studio-nav-hitbox:focus-visible { background:rgba(93,151,79,.15)!important; }
@media (max-width:900px){.studio-background-controls{align-items:flex-start;flex-direction:column}}

/* Patch 317 — Studio toolbar, close controls, and full-screen arrangement. */
.studio-toolbar--317{display:grid;gap:.8rem;align-items:stretch}
.studio-toolbar__topline{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.studio-toolbar__essentials{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}
.studio-toolbar__essentials .t-button,.studio-toolbar__essentials select{min-height:38px}
.studio-art-rows{display:grid;grid-template-columns:1fr;gap:.55rem;padding-top:.75rem;border-top:1px solid rgba(139,111,59,.22)}
.studio-art-row{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.studio-art-row>strong{min-width:190px;font-family:Georgia,serif;color:#5b4325}
.studio-art-row .t-button{min-width:150px;justify-content:center}
.studio-direct-upload{position:relative;overflow:hidden;cursor:pointer}
.studio-direct-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.studio-direct-upload:has(input:disabled){opacity:.5;pointer-events:none}
.studio-canvas-header__actions{display:flex;align-items:center;gap:.8rem}
.studio-arrange-fullscreen{min-width:210px;min-height:48px;padding:.7rem 1.15rem;border:1px solid #456b3f;border-radius:12px;background:linear-gradient(#709c63,#527d49);color:#fff;font-family:Georgia,serif;font-size:1.05rem;font-weight:700;box-shadow:0 7px 18px rgba(49,84,44,.25);cursor:pointer}
.studio-arrange-fullscreen:hover{background:linear-gradient(#7ba76d,#5a8750)}
.studio-element .studio-remove{opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.studio-element:hover .studio-remove,.studio-element.is-selected .studio-remove,.studio-element .studio-remove--shell{opacity:1;pointer-events:auto}
.studio-element .studio-remove:hover{transform:scale(1.08)}
.studio-page.is-arrange-fullscreen{position:fixed;inset:0;z-index:20000;background:#f3eee1;overflow:hidden;padding:0}
.studio-page.is-arrange-fullscreen>.studio-toolbar,.studio-page.is-arrange-fullscreen>.studio-controls,.studio-page.is-arrange-fullscreen>.studio-background-controls{display:none!important}
.studio-page.is-arrange-fullscreen .studio-workspace{height:100vh;padding:0;overflow:hidden}
.studio-page.is-arrange-fullscreen .studio-canvas-header{position:sticky;top:0;z-index:5;margin:0;padding:.75rem 1rem;background:rgba(250,246,236,.97);border-bottom:1px solid rgba(139,111,59,.28)}
.studio-page.is-arrange-fullscreen .studio-stage-viewport{width:100vw;height:calc(100vh - 78px);max-width:none;overflow:auto;padding:20px;background:#d8d3c7}
.studio-page.is-arrange-fullscreen .studio-stage-scaler{margin:0 auto}
@media(max-width:1100px){.studio-toolbar__topline{flex-direction:column}.studio-toolbar__essentials{justify-content:flex-start}.studio-art-row>strong{width:100%}}
/* Patch 318 — Studio default route, live shell sync, and true fullscreen margins. */
.studio-page.is-arrange-fullscreen .studio-stage-viewport {
    box-sizing: border-box;
    display: block;
    width: 100vw;
    max-width: 100vw;
    background: #d8d3c7;
}
.studio-page.is-arrange-fullscreen .studio-stage-scaler {
    margin: 0;
    max-width: none;
}
.studio-page.is-arrange-fullscreen .studio-canvas {
    box-shadow: none;
}
/* Patch 319 — separate shell slots, square arrangement canvas, and close offsets. */
.studio-stage-viewport,
.studio-stage-scaler,
.studio-canvas,
.studio-page.is-arrange-fullscreen .studio-stage-viewport,
.studio-page.is-arrange-fullscreen .studio-stage-scaler,
.studio-page.is-arrange-fullscreen .studio-canvas {
    border-radius: 0 !important;
}

.studio-canvas .studio-element.is-shell,
.studio-page.is-arrange-fullscreen .studio-element.is-shell {
    border-radius: 0 !important;
}

.studio-canvas .studio-remove,
.studio-page.is-arrange-fullscreen .studio-remove {
    top: 8px !important;
    right: 15px !important;
    translate: none !important;
}

.studio-canvas .studio-remove:hover,
.studio-page.is-arrange-fullscreen .studio-remove:hover {
    transform: scale(1.08);
}
/* Patch 320 — canonical 1440x900 scaling shared by Studio and live pages. */
.t-published-layout-host {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: transparent;
}

.t-published-layout-scaler {
    position: relative;
    margin: 0 auto;
    overflow: visible;
}

.t-published-layout-scaler > .t-published-workspace {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1440px;
    height: 900px;
    transform-origin: top left;
}

.t-published-workspace {
    border-radius: 0 !important;
}
/* Patch 324 — independent navigation hitboxes. The overlay container is never a selectable box. */
.studio-canvas--native .studio-hitbox-layer--editing {
    position: absolute;
    inset: 0;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 5000;
}

.studio-canvas--native .studio-nav-hitbox-editor {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    box-sizing: border-box;
    background: rgba(77, 132, 69, .025);
    border: 1px solid rgba(67, 108, 61, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.studio-canvas--native .studio-nav-hitbox-editor:hover,
.studio-canvas--native .studio-nav-hitbox-editor.is-selected {
    background: rgba(77, 132, 69, .12);
    border-color: rgba(46, 90, 43, .96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 0 0 1px rgba(46, 90, 43, .25);
}

.studio-canvas--native .studio-nav-hitbox-editor > span {
    position: absolute;
    left: 4px;
    top: 4px;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 253, 247, .9);
    border: 1px solid rgba(72, 96, 55, .25);
    color: #405637;
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
}

.studio-canvas--native .studio-hitbox-resize {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #fffdf7;
    border-radius: 2px;
    background: #486b42;
    box-shadow: 0 0 0 1px rgba(44, 76, 40, .85);
    cursor: nwse-resize;
    pointer-events: auto;
}

.studio-canvas--native .studio-hitbox-geometry {
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(37, 52, 34, .94);
    color: #fffdf7;
    font: 600 10px/1.2 system-ui, sans-serif;
    pointer-events: none;
}

/* Patch 3q8 — imported global-shell artwork must fit the canonical 1900px
   live element before the Header Studio surface is preview-scaled to 75%. */
.studio-canvas--native .studio-shell-element {
    background-size: 100% 100% !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
}

/* Patch 325 — Header Studio shell editing controls.
   Full-width shell bars previously placed the bottom-right resize handle beyond
   the clipped canvas edge. Keep shell controls inside their element bounds and
   make the selected shell close control reliably clickable. */
.studio-canvas--native .studio-element.is-shell.is-selected {
    outline: 2px solid rgba(92, 112, 72, .95);
    outline-offset: -2px;
}

.studio-canvas--native .studio-element.is-shell .studio-resize {
    right: 6px !important;
    bottom: 6px !important;
    z-index: 60 !important;
    width: 18px;
    height: 18px;
    pointer-events: auto !important;
}

.studio-canvas--native .studio-element.is-shell .studio-remove {
    top: 8px !important;
    right: 40px !important;
    z-index: 61 !important;
    pointer-events: auto !important;
}

.studio-canvas--native .studio-element.is-shell .studio-remove--shell {
    opacity: 0;
    pointer-events: none !important;
}

.studio-canvas--native .studio-element.is-shell:hover .studio-remove--shell,
.studio-canvas--native .studio-element.is-shell.is-selected .studio-remove--shell,
.studio-canvas--native .studio-element.is-shell .studio-remove--shell.is-visible {
    opacity: 1;
    pointer-events: auto !important;
}


/* Patch 326 — Header Studio shell controls must not depend on selection.
   Header Studio passes AlwaysShowShellControls so each shell region exposes a
   close button and bottom-right resize grip immediately. */
.studio-canvas--native .studio-element.is-shell .studio-remove--shell.is-visible {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.studio-canvas--native .studio-element.is-shell .studio-resize--shell-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: nwse-resize !important;
}

/* Patch 342 — one authoritative Page Studio background workflow. */
.studio-background-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;padding:.4rem .55rem;border-radius:10px;background:rgba(255,255,255,.44)}
.studio-background-actions--authority{border:1px solid rgba(126,90,43,.18)}
.studio-background-emergency{border-color:#8e493f!important;color:#783a32!important}
.studio-background-activity{display:grid;gap:.25rem;min-width:230px;padding:.55rem .7rem;border:1px solid rgba(137,109,57,.24);border-radius:10px;background:#fffaf0;font-size:.75rem}
.studio-background-activity strong{font-family:Georgia,serif;font-size:.8rem}
.studio-background-activity small{color:#756956}
.studio-background-diagnostics{flex:1 1 100%;padding:.65rem .8rem;border:1px solid rgba(137,109,57,.25);border-radius:10px;background:rgba(255,253,247,.82)}
.studio-background-diagnostics summary{cursor:pointer;font-family:Georgia,serif;font-weight:700}
.studio-background-diagnostics>.t-button{margin-top:.6rem}
.studio-background-diagnostics dl{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:.3rem .75rem;margin:.65rem 0;font-size:.75rem}
.studio-background-diagnostics dt{font-weight:700}.studio-background-diagnostics dd{margin:0}
.studio-background-diagnostics .is-clear{color:#315c32}.studio-background-diagnostics .is-warning{color:#8a3e33}
@media (max-width:900px){.studio-background-actions,.studio-background-activity,.studio-background-diagnostics{width:100%}.studio-background-diagnostics dl{grid-template-columns:1fr}}