/* The design frame (static/js/design/): the editor shared by the merch
   studio, the patch designer and the logo maker's studio. Everything here is
   prefixed df- and leans on no other stylesheet, so a host page's own rules
   (the portal's pp-/ap-, the tools' tl-/lg-, the shop's mc-) cannot reach in
   and the frame reads the same in every tool. docs/design-frame.md */

/* The attribute has to win over any display rule, the host's included: a
   hidden notice is hidden. (The merch studio's draft banner showed to
   everyone for a week because a portal rule beat `hidden`.) */
.df-shell [hidden], .df-notice[hidden] { display: none !important; }

/* --- the sandbox (/dashboard/design-sandbox/) ------------------------------ */

.df-sandbox { max-width: 1100px; margin: 0 auto; padding: 84px 1rem 2rem; }
.df-sandbox h1 { margin: 0 0 .4rem; }
.df-sandbox-lead { opacity: .8; max-width: 60ch; }
.df-sandbox-status { font-size: .9rem; opacity: .85; }

/* --- panels: the layers list and the inspector (static/js/design/panels.js) --- */

.df-empty { font-size: .82rem; opacity: .75; margin: 6px 0; }
.df-layer {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; box-sizing: border-box;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03);
}
.df-layer.is-on { border-color: #fff; background: rgba(255,255,255,.08); }
.df-layer.is-hidden .df-layer-name { opacity: .5; text-decoration: line-through; }
.df-layer-pick {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 2px;
    border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.df-layer-thumb { width: 48px; height: 48px; border-radius: 4px; flex: none; }
.df-layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-layer-tools { display: flex; gap: 2px; flex: none; }
.df-icon {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none;
    color: inherit; cursor: pointer; opacity: .7; font-size: .8rem; padding: 0;
}
.df-icon:hover { opacity: 1; background: rgba(255,255,255,.08); }
.df-icon.is-on { opacity: 1; border-color: rgba(255,255,255,.4); }
.df-icon:disabled { opacity: .25; cursor: default; background: none; }
.df-icon:focus-visible, .df-btn:focus-visible, .df-layer-pick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.df-label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: .9rem; }
.df-label--inks { align-items: start; }
.df-input, .df-select {
    width: 100%; min-width: 0; padding: 6px 8px; box-sizing: border-box; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; font-size: .9rem;
}
.df-input:focus, .df-select:focus { outline: none; border-color: #ff0000; box-shadow: 0 0 0 3px rgba(255,0,0,.22); }
/* Sliders: a thin track and a red thumb (the browser's are grey and blue). */
.df-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.df-range:focus { outline: none; }
.df-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.df-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
    background: #ff0000; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); cursor: grab;
}
.df-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px rgba(255,0,0,.22); }
.df-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.df-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ff0000; border: 2px solid #fff; cursor: grab; }
.df-range:disabled { opacity: .4; cursor: not-allowed; }
/* Size in centimetres, how sharp a picture prints, too small to stitch. */
.df-readouts { margin: 0 0 6px 88px; }
.df-readout { margin: 0 0 4px; font-size: .8rem; opacity: .75; }
.df-readout.is-warn { color: #ffb74d; opacity: 1; }
/* One-ink swatches: "its own colours" is a split dot. */
.df-inks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.df-ink {
    width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--ink, #fff); border: 1px solid rgba(255,255,255,.45);
}
.df-ink--own { background: conic-gradient(#e10600 0 25%, #f2c200 0 50%, #1b2340 0 75%, #f2f2f2 0); }
.df-ink[aria-pressed="true"] { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
.df-ink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.df-ink-custom { width: 30px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: none; cursor: pointer; }
.df-ink-custom.is-on { box-shadow: 0 0 0 2px #fff; }
.df-presets, .df-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.df-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem;
    border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.04);
    color: inherit; font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.df-btn:hover { background: rgba(255,255,255,.1); }
.df-btn.is-on { border-color: #fff; background: rgba(255,255,255,.12); }
.df-btn--danger:hover { border-color: #ff8a65; color: #ff8a65; }
.df-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 500px) {
    .df-readouts { margin-left: 0; }
    .df-label { grid-template-columns: 1fr; }
}

/* --- the sandbox's little editor ------------------------------------------- */

.df-sandbox-row { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 1rem; }
.df-sandbox-layers { display: grid; gap: 6px; margin: 12px 0; }
.df-sandbox-inspector { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
@media (max-width: 900px) { .df-sandbox-row { grid-template-columns: 1fr; } }

/* --- the shell (static/js/design/shell.js) ------------------------------------
   Laptop: rail | stage | inspector, the stage sticky under the site's fixed
   header. Narrower: the rail and the inspector stack beside the stage. Phone:
   the stage sticks at the top, the panels are sheets from a tab bar. The
   header's height is measured into --df-header by the shell. */

.df-shell { --df-header: 60px; --df-tabbar: 58px; position: relative; }
.df-shell-body {
    display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; gap: 18px; align-items: start;
    margin-bottom: 24px;
}
.df-rail, .df-inspector { min-width: 0; }
.df-panel { margin-bottom: 22px; }
.df-panel-title { margin-top: 0; }
.df-sheet-close { display: none; }
.df-stage { position: sticky; top: calc(var(--df-header) + 12px); min-width: 0; }
.df-stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 8px; min-height: 32px; }
.df-stage-box {
    position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: calc(100vh - var(--df-header) - 150px);
    min-height: 320px; background: #1f1f1f; border-radius: 12px; overflow: hidden;
}
.df-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.df-canvas:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.df-stage-foot { margin-top: 8px; }
.df-status { margin: 0 0 6px; font-size: .88rem; opacity: .85; }
.df-status.is-error { color: #ff8a65; opacity: 1; }
.df-status:empty, .df-status[hidden] { display: none; }
.df-notice { margin-bottom: 14px; }
/* The floating toolbar by the selected layer. */
.df-toolbar {
    position: absolute; display: flex; gap: 2px; padding: 4px; border-radius: 10px;
    background: rgba(18,18,18,.96); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 20px rgba(0,0,0,.5);
    z-index: 5;
}
.df-toolbar[hidden] { display: none; }
.df-tool {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: none;
    color: #fff; font-size: .95rem; cursor: pointer; padding: 0;
}
.df-tool:hover { background: rgba(255,255,255,.1); }
.df-tool.is-on { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.df-tool:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.df-tabbar, .df-scrim { display: none; }

@media (max-width: 1199px) {
    .df-shell-body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
    .df-rail { grid-column: 1; grid-row: 1; }
    .df-inspector { grid-column: 1; grid-row: 2; }
    .df-stage { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 899px) {
    .df-shell-body { display: block; padding-bottom: 12px; }
    /* The stage on top, under the fixed header, full-bleed over the portal's
       1rem side padding; the page scrolls under it. */
    .df-stage {
        position: sticky; top: var(--df-header); z-index: 30; margin: 0 -1rem; padding: 6px 1rem 8px;
        background: #0a0a0a; border-bottom: 1px solid #1f1f1f;
    }
    /* What is left above a sheet: the header, the stage bar, the tab bar and
       a 46vh sheet taken off the screen, within 200-340px. */
    .df-stage-box {
        aspect-ratio: auto; min-height: 0; max-height: none;
        height: clamp(200px, calc(100vh - var(--df-header) - var(--df-tabbar) - 46vh - 64px), 340px);
    }
    .df-stage-foot { margin-top: 6px; }
    /* The panels are sheets: hidden until their tab opens them. */
    .df-panel { display: none; margin: 0; }
    .df-panel.is-open {
        display: block; position: fixed; left: 0; right: 0;
        bottom: calc(var(--df-tabbar) + env(safe-area-inset-bottom, 0px));
        max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding: 14px 1rem 18px; background: #121212; border-top: 1px solid #333; border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(0,0,0,.6); z-index: 1002;
    }
    .df-panel.is-open .df-sheet-close {
        display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 10px;
        width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff;
        font-size: 1rem; cursor: pointer;
    }
    .df-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1001; }
    .df-scrim[hidden] { display: none; }
    html.df-sheet-open { overflow: hidden; }
    /* The stage stays above the scrim while a sheet is open: the canvas can
       still be tapped and dragged with a panel showing. */
    html.df-sheet-open .df-stage { z-index: 1002; }
    /* The tab bar, fixed at the bottom while the editor is on screen. */
    .df-tabbar {
        display: none; position: fixed; left: 0; right: 0; bottom: 0; height: var(--df-tabbar);
        padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box;
        background: rgba(10,10,10,.97); border-top: 1px solid #262626; z-index: 1003;
    }
    .df-tabbar.is-live { display: flex; }
    .df-tab {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; background: none; color: #bbb; font: inherit; font-size: .6rem; font-weight: 700;
        letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 0 2px;
    }
    .df-tab i { font-size: 1.05rem; }
    .df-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .df-tab.is-on { color: #fff; }
    .df-tab--primary { color: #fff; background: #ff0000; }
    .df-tab--primary.is-on { background: #c40000; }
    .df-tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
    /* The frame's own panels in a sheet. */
    .df-layer-tools { gap: 6px; }
    .df-icon { width: 34px; height: 34px; }
}

/* --- objects in an inline SVG (static/js/design/svgobjects.js) ------------
   The logo maker's letters: a selection box and corner handles drawn in the
   SVG itself, so they scale with it; the strokes stay one screen pixel. */
.df-object { cursor: grab; touch-action: none; }
.df-object:hover { filter: drop-shadow(0 0 5px rgba(255, 0, 0, .55)); }
.df-object.df-selected { filter: drop-shadow(0 0 2px #ff3b3b) drop-shadow(0 0 9px rgba(255, 0, 0, .65)); }
.df-overlay-box { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.df-overlay-handle { cursor: nwse-resize; touch-action: none; }
.df-overlay-handle[data-handle="ne"], .df-overlay-handle[data-handle="sw"] { cursor: nesw-resize; }
.df-overlay-face { fill: #fff; stroke: rgba(0,0,0,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }