/* ── Statement-editor-only styles (everything else reuses photo_templates.css) ── */

/* The drag-to-pan / no-image-drag rules now live with .pt-preview-stage in
   photo_templates.css so every editor shares them — see GitHub #1. */

/* Upload tiles in a single row — one column per photo (set in JS via
   grid-template-columns + max-width so 4 fit the panel on one line).
   align-items:start stops a filled tile's extra buttons from stretching the
   empty ones. */
.st-upload-grid { display: grid; gap: 8px; align-items: start; }
/* 4 tiles get slightly tighter text so the label still fits each box. */
.st-upload-grid.is-compact { gap: 6px; }
.st-upload-grid.is-compact .st-tile-label { font-size: .62rem; padding: 0 2px; line-height: 1.15; }
.st-upload-grid.is-compact .st-tile-plus { font-size: 1.25rem; }
.st-gap-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.4; }
.st-gap-hint.hidden { display: none; }
/* "How many pets?" count picker — number buttons, active = brand-orange tint. */
.st-count-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.st-count-btn {
    width: 40px; height: 40px; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-bg); color: var(--color-text);
    font-size: .95rem; font-weight: 600; cursor: pointer; line-height: 1;
}
.st-count-btn:hover { border-color: var(--color-primary); }
.st-count-btn.active {
    border-color: var(--color-brand-orange, #E4632B);
    background: var(--color-brand-orange-tint);
    color: var(--color-brand-orange, #E4632B);
}
.st-tile-row { display: flex; flex-direction: column; gap: 6px; }
.st-tile {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    aspect-ratio: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    cursor: pointer;
    overflow: hidden;
    background: var(--color-bg-alt);
    transition: border-color .12s ease;
}
.st-tile:hover { border-color: var(--color-primary); }
.st-tile.has-photo { border-style: solid; }
.st-tile img.st-tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-tile .st-tile-label { font-size: .75rem; color: var(--color-text-muted); text-align: center; padding: 0 6px; position: relative; z-index: 1; }
.st-tile .st-tile-plus { font-size: 1.5rem; color: var(--color-text-muted); position: relative; z-index: 1; }
.st-tile.is-uploading { opacity: .55; pointer-events: none; }
.st-tile .st-tile-spinner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); }
.st-tile .st-tile-spinner.hidden { display: none; }
.st-tile-remove {
    position: absolute; top: 4px; right: 4px; z-index: 3;
    width: 22px; height: 22px; border-radius: 50%; border: 0;
    background: rgba(0,0,0,.55); color: var(--color-primary-light); font-size: .8rem; line-height: 1; cursor: pointer;
}
.st-tile-actions { display: flex; flex-direction: column; gap: 6px; }
.st-tile-action {
    flex: 1; padding: 5px 4px; font-size: .72rem; font-weight: 600;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); cursor: pointer; transition: background .12s ease;
}
.st-tile-action:hover { background: var(--color-bg-alt); }
/* ── Grouped options panel (The Pack) ──────────────────────────────────────
   .options-form already gaps its children generously, so a section is just
   another flex child. What makes the grouping legible is that controls INSIDE
   a section sit tighter than the gap BETWEEN sections, plus a hairline rule on
   every section after the first. Without the explicit body gap the controls in
   a section would collapse onto each other while every test still passed. */
.st-section { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.st-section + .st-section { padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); }
.st-section__body { display: flex; flex-direction: column; gap: var(--spacing-lg); }
/* Smaller but louder than .form-label (1.25rem/700) on purpose: the eye should
   read section heading, then the field labels under it, not the reverse. */
.st-section__title {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 1rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-text);
}
.st-section__num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px;
    background: var(--color-brand-orange, #E4632B); color: var(--color-primary-light);
    font-size: .8rem; font-weight: 800; letter-spacing: 0;
}
/* The photo-effect checkboxes already carry margin-top for the old nested
   layout; inside a section they have the body gap instead. */
.st-section__body .st-fx-toggle:first-of-type { margin-top: 0; }

/* ── Choice cards ──────────────────────────────────────────────────────────
   The Pack's design choices use the same idiom as the watercolor and photo-tee
   editors: a bordered card that SHOWS the option (a glyph in the real font, a
   shirt with the print on it) above its name, rather than a text-only pill that
   just spells it out. Deliberately matched to .pt-font-swatch in
   photo_templates.css, which the font picker here reuses directly, so the two
   controls sitting one above the other read as one family. */
.st-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.st-choice {
    min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    gap: 6px;
    padding: 12px 8px 8px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s ease;
}
.st-choice:hover { border-color: var(--color-text-muted); }
.st-choice.active, .st-choice.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(228, 99, 43, 0.12) inset;
}
/* Fixed height so cards in a row line their labels up regardless of how tall
   each preview happens to be (one shirt vs two, 1.5rem vs 2.1rem of type). */
.st-choice__preview {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; height: 40px; color: var(--color-text);
}
.st-choice__label {
    font-size: .75rem; font-weight: 600; color: var(--color-text-muted);
    letter-spacing: .02em; text-align: center; line-height: 1.3;
}
.st-choice.active .st-choice__label { color: var(--color-text); }

/* Print-side pill badge (the "+50") — same brand tint the size grid uses for
   its XL/2XL upcharge badge, so the two surcharges read as the same idea. */
.st-pill-badge {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; line-height: 1.5;
    background: rgba(228, 99, 43, 0.16); color: var(--color-brand-orange, #E4632B);
}
.st-pill.active .st-pill-badge { background: rgba(255, 255, 255, .28); color: inherit; }
/* Front/Back switch, sharing the one view toolbar with zoom and grid. The
   divider keeps "which side am I looking at" legible as its own idea inside a
   single strip, rather than needing a second row. */
.st-side-switch { display: flex; align-items: center; gap: 4px; }
.st-toolbar-divider {
    width: 1px; height: 20px; flex: none;
    background: var(--color-border);
    margin: 0 2px;
}
/* A disabled side is greyed by .pt-view-btn:disabled (opacity .35). Force the
   active tint off too, or the last-selected side keeps its orange background
   while unclickable, which reads as "selected" rather than "unavailable". */
.pt-view-btn--toggle:disabled,
.pt-view-btn--toggle:disabled.is-active {
    background: transparent;
    border-color: transparent;
    color: var(--color-text);
}
/* Which uploaded photo goes on the chest. Square thumbnails, active = orange
   ring, matching the upload tiles rather than introducing a new control shape. */
.st-front-photo-label { margin: 10px 0 6px; font-size: .8rem; font-weight: 600; color: var(--color-text); }
.st-front-photo-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.st-front-photo-btn {
    width: 56px; height: 56px; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg-alt); position: relative;
}
.st-front-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-front-photo-btn:hover { border-color: var(--color-primary); }
.st-front-photo-btn.active {
    border-color: var(--color-brand-orange, #E4632B);
    box-shadow: 0 0 0 2px rgba(228, 99, 43, 0.25);
}
.st-removebg-row { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--color-text-muted); }
.st-removebg-row input[type="checkbox"] { accent-color: var(--color-primary); }
/* The Pack B&W / outline toggles — larger, bordered option rows. */
.st-small-print-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.st-small-print-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted, #6b6b6b);
}
.st-fx-toggle {
    display: flex; align-items: center; gap: 12px; margin-top: 8px;
    padding: 12px 14px; border: 1px solid var(--color-border);
    border-radius: 10px; cursor: pointer;
    font-size: .95rem; font-weight: 600; color: var(--color-text);
    transition: border-color .12s ease, background .12s ease;
}
.st-fx-toggle:hover { border-color: var(--color-primary); }
.st-fx-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); cursor: pointer; flex: none; }

/* Retro Badge Ink slider + Speckle toggle, shown only while the
   screenprint toggle above is on (JS adds/removes .hidden). Sits between
   the screenprint checkbox and B&W/outline so the slider reads as "more
   about screenprint" rather than a sibling toggle of its own. */
.st-fx-ink-group {
    display: flex; flex-direction: column; gap: var(--spacing-sm);
    margin-top: var(--spacing-sm); padding: 12px 14px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.st-fx-ink-slider { display: flex; align-items: center; gap: 10px; }
.st-fx-ink-slider input[type="range"] {
    flex: 1; min-width: 0; accent-color: var(--color-primary); cursor: pointer;
}
.st-fx-ink-end {
    flex: none; font-size: .75rem; font-weight: 600; color: var(--color-text-muted);
    white-space: nowrap;
}
.st-fx-ink-group .st-fx-toggle { margin-top: 0; }

/* Headline field — text input with a shuffle button on the right edge. */
.st-headline-field { position: relative; }
.st-headline-input { padding-right: 44px; text-transform: uppercase; }
.st-headline-shuffle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
    background: transparent; color: var(--color-text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.st-headline-shuffle:hover { background: rgba(228, 99, 43, .1); color: var(--color-primary); }
/* Retro Badge: one labelled button under the bottom wording re-rolls both arcs. */
.st-wording-shuffle { display: inline-flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm); font-size: .8rem; min-height: 0; width: auto; }
.st-wording-shuffle svg { width: 14px; height: 14px; }
.st-headline-shuffle:active { transform: translateY(-50%) scale(.92); }

/* Caution when a headline word is too long to print cleanly. Shown/hidden by
   statement_editor.js via the [hidden] attribute. */
.st-headline-caution {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 8px 0 0; font-size: .8rem; font-weight: 600; line-height: 1.4;
    color: #b7791f;
    background: #fdf3e2; border: 1px solid #e7cf9f;
    border-radius: var(--radius-md); padding: 8px 10px;
}
.st-headline-caution[hidden] { display: none; }
.st-headline-caution::before { content: "⚠"; flex: none; }

/* Coming-soon style card in the switcher — dimmed + a badge, not selectable. */
.pt-template-card.is-coming-soon {
    opacity: .55; cursor: not-allowed; filter: grayscale(0.4);
}
.pt-template-card.is-coming-soon:hover { border-color: var(--color-border); }
.pt-template-card__badge {
    display: inline-block; margin-top: 4px;
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-primary-light); background: var(--color-slate-deep); border-radius: 999px; padding: 2px 8px;
}

/* Font pickers — pill buttons. */
.st-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-pill {
    padding: 8px 14px; border: 2px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.st-pill.active { border-color: var(--color-primary); background: rgba(228, 99, 43, .08); }
/* The Pack — smaller pet-name input, scoped so no other style's text
   inputs (which share .form-input) are affected. */
.st-pack-name-input { padding: 8px 12px; font-size: 0.9rem; }

/* Persistent background-remover status under the photo tile. */
.st-bg-status { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; margin-top: 8px; }
.st-bg-status::before { content: ""; width: 14px; height: 14px; flex: none; display: inline-block; line-height: 14px; text-align: center; }
.st-bg-status.is-preparing, .st-bg-status.is-removing { color: var(--color-primary); }
.st-bg-status.is-preparing::before, .st-bg-status.is-removing::before {
    border: 2px solid var(--color-primary); border-top-color: transparent; border-radius: 50%; animation: st-spin .7s linear infinite;
}
.st-bg-status.is-ready { color: var(--color-status-success); }
.st-bg-status.is-ready::before { content: "✓"; width: auto; font-weight: 800; font-size: .95rem; }
.st-bg-status.is-failed { color: #b3261e; align-items: flex-start; }
.st-bg-status.is-failed::before { content: "✕"; width: auto; font-weight: 800; font-size: .95rem; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ── Adjust modal (move / resize / rotate the cutout) ────────────────── */
/* Nothing in this modal is text a customer needs to select, and a long press
   that lands on a label rather than the photo would otherwise start a
   selection that survives the drag. Suppressed overlay-wide; the range input
   keeps working because form controls are exempt. */
.st-adjust-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center; padding: 16px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st-adjust-overlay.hidden { display: none; }
.st-adjust-panel { background: var(--color-primary-light); border-radius: var(--radius-lg, 14px); box-shadow: 0 30px 60px rgba(0,0,0,.3); width: min(560px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.st-adjust-stage-wrap { padding: 16px 16px 8px; display: flex; justify-content: center; }
/* iOS note: `user-select: none` alone does NOT stop a long press inside the
   stage raising the Copy / Look Up / Translate bubble, which fires mid-drag
   when a resize is slow or the finger lands twice. `-webkit-touch-callout`
   is the property that suppresses it, and Safari still wants the prefixed
   select, so both are spelled out here rather than left to `user-select`. */
.st-adjust-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4200 / 4800; overflow: hidden; border-radius: var(--radius-md); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st-adjust-stage img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st-adjust-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Print-area frame — matches the preview's white 50% border (design_bounds).
   Positioned in JS from cfg.designBounds. */
.st-adjust-print-border { position: absolute; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; box-sizing: border-box; }
/* Composition guide — static rule-of-thirds lines so the customer has a
   placement reference for their dog cutout. Children of
   .st-adjust-print-border so they inherit its position/size for free —
   positionPrintBorder() in statement_editor.js never needs to know they
   exist. Translucent white + dark hairline shadow reads against any shirt
   color or photo underneath. Not the same feature as the "Grid" toolbar
   button (#st-grid-toggle), which toggles the print-safe-area border on the
   main shirt preview — do not merge or relabel these two. */
.st-adjust-guide { position: absolute; pointer-events: none; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
.st-adjust-guide--v { top: 0; bottom: 0; width: 1px; }
.st-adjust-guide--h { left: 0; right: 0; height: 1px; }
/* Stage-sized wrapper, same coordinate space as .st-adjust-stage (inset: 0
   matches it exactly). Empty for every style except the Retro Badge, where
   adjust-modal.js clips it to the oval and fills it with a mirror copy of the
   photo, so the pet clips the way the print does while the real box's frame
   and handles stay outside the clip. */
.st-adjust-clip { position: absolute; inset: 0; }
.st-adjust-over:not([src]) { display: none; }
.st-adjust-overlay.is-chest .st-adjust-over { display: none; }
.st-adjust-clip .st-adjust-ghost { pointer-events: none; cursor: default; }
/* With a clipped mirror copy showing the photo, the real box keeps only its
   frame and handles visible (it still takes the drag). */
.st-adjust-overlay.has-clip #st-adjust-photo { opacity: 0; }
.st-adjust-photo-box { position: absolute; cursor: grab; will-change: transform; }
.st-adjust-photo-box:active { cursor: grabbing; }
.st-adjust-photo-box img { width: 100%; height: 100%; pointer-events: none; }
.st-adjust-photo-box .st-adjust-frame { position: absolute; inset: 0; border: 2px solid #36c3d4; pointer-events: none; }
.st-adjust-handle { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-light); border: 2px solid #36c3d4; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 2; }
.st-adjust-handle[data-corner="nw"] { top: -9px; left: -9px;  cursor: nwse-resize; }
.st-adjust-handle[data-corner="ne"] { top: -9px; right: -9px; cursor: nesw-resize; }
.st-adjust-handle[data-corner="sw"] { bottom: -9px; left: -9px;  cursor: nesw-resize; }
.st-adjust-handle[data-corner="se"] { bottom: -9px; right: -9px; cursor: nwse-resize; }
.st-adjust-toolbar { display: flex; justify-content: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
.st-adjust-tool { width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-primary-light); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; transition: background .12s ease; }
.st-adjust-tool:hover { background: var(--color-bg-alt); }
.st-adjust-tool.is-active { background: rgba(228, 99, 43, 0.18); border-color: var(--color-brand-orange, #E4632B); }
.st-adjust-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 16px 16px; }
.st-adjust-btn { padding: 10px 22px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-alt); font-weight: 600; cursor: pointer; }
.st-adjust-btn--save { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-light); }
.st-adjust-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); z-index: 3; }
.st-adjust-spinner.hidden { display: none; }

/* ── Chest mode (The Pack front/back): the adjust overlay drags the CHEST BOX
   instead of one pet. The box contents are a client-side approximation of the
   chest art (photo above, word below), laid out by statement_editor.js with
   the same fractions the server composes with; the mockup refresh after Save
   shows the authoritative render. */
.st-adjust-chest { position: absolute; inset: 0; pointer-events: none; }
.st-adjust-chest.hidden { display: none; }
.st-adjust-chest img { position: absolute; object-fit: contain; object-position: bottom center; }
.st-adjust-chest-word {
    position: absolute; left: 0; right: 0; text-align: center;
    transform: translateY(-50%); white-space: nowrap; line-height: 1;
    pointer-events: none;
}
/* Tools with no chest equivalent (the chest box cannot rotate, flip, or change
   layers) are hidden, not disabled — a disabled tool implies it could apply. */
.st-adjust-overlay.is-chest [data-tool="rotate-cw"],
.st-adjust-overlay.is-chest [data-tool="rotate-ccw"],
.st-adjust-overlay.is-chest [data-tool="flip-h"],
.st-adjust-overlay.is-chest [data-tool="layer-front"],
.st-adjust-overlay.is-chest [data-tool="layer-back"] { display: none; }
.st-adjust-overlay.is-chest #st-adjust-photo { display: none; }

/* Retro Badge front section: the name label with a small "See the front"
   button on the same line. */
.st-front-name-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.st-front-name-head .form-label { margin-bottom: 0; }
.st-view-front-btn {
    padding: var(--spacing-xs) var(--spacing-sm); font-size: .8rem; line-height: 1.2;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-text); cursor: pointer;
}
.st-view-front-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }