/* ════════════════════════════════════════════════════════════════════
   Phase T.3 — /create-photo-collage page-specific Picsin Teal overrides
   ════════════════════════════════════════════════════════════════════
   Page-specific override sheet for the multi-slot Photo Collage editor.
   Loaded AFTER atelier-create-photo-collage.css (and after picsin-teal.css's
   global token map) so this file wins the cascade.

   Mirrors picsin-teal-print-create.css section-by-section so the editor
   surfaces (Canvas/Framed/Photo Print on /create-print, plus Photo Collage
   here) read identically.

   Hard rules:
   - DO NOT edit atelier-create-photo-collage.css.
   - Cropper visuals are LOCKED — never override .pc-* selectors here.
   - Do NOT touch the multi-slot template engine, tray DnD, or per-slot
     printSize logic. CSS-only overrides.
   - Append-only — future T.3 polish lands at the bottom of this file.
   ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   T.3.1 — Hide the product description blurb
   ════════════════════════════════════════════════════════════════════
   Blade emits <p class="atl-blurb">Pick an orientation...</p> between the
   price row and the orientation segbar. Picsin Teal templates have no
   blurb on the editor — price flows straight into the first selector.

   Element stays in the DOM (display:none, not removed) per
   feedback_hide_not_delete.md so any JS reading or writing it doesn't
   error out.
   ──────────────────────────────────────────────────────────────────── */
.atl-blurb {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.3.2 — Visual audit overrides
   ════════════════════════════════════════════════════════════════════
   atelier-create-photo-collage.css + the shared atelier-print-create.css
   both hard-code umber/cream values that the global :root token map
   cannot reach. These overrides force every visible Atelier hold-out to
   the Picsin Teal palette.

   !important is required because the source files' selectors have equal
   specificity to ours and no class-namespace prefix to lean on.
   ──────────────────────────────────────────────────────────────────── */


/* T.3.2.1 — Add Collage to Cart stays teal in every state.
   Defensive — the source rule already reads `var(--accent)` (auto-teal)
   but other downstream `.atl-root :where(button)` resets neutralise the
   bg. Forcing teal here is belt-and-braces. */
.atl-cta        { background: var(--pt-teal)     !important; }
.atl-cta:hover  { background: var(--pt-teal-700) !important; }


/* T.3.2.2 — Preview interior: pure white inside every finish chrome.
   Source values:
     canvas      .acl-artinner background: #efeae0  (cream)
     photo-print .acl-artinner background: #efeae0  (cream)
     framed      .acl-artinner background: #fbfaf6  (near-cream)
   Naman 2026-04-30: pure white #FFFFFF across all three (parity with
   /create-print T.2.2.2). */
.acl-artframe[data-finish="canvas"]      .acl-artinner,
.acl-artframe[data-finish="photo-print"] .acl-artinner,
.acl-artframe[data-finish="framed"]      .acl-artinner {
    background: #FFFFFF !important;
}


/* T.3.2.3 — Empty slot frame: replace umber rgba tint with neutral.
   atelier-create-photo-collage.css line 129–130 paints
     background:   rgba(20, 14, 6, 0.04)  (warm dark)
     box-shadow:   inset 0 0 0 1px rgba(20, 14, 6, 0.06)
   on every empty slot's ::before. Replace with neutral cool-grey so
   the warm wash disappears from the white preview interior. */
.acl-slot::before {
    background:   rgba(45, 55, 72, 0.04) !important;
    box-shadow:   inset 0 0 0 1px rgba(45, 55, 72, 0.08) !important;
}
.acl-slot.is-filled::before {
    background:   transparent !important;
    box-shadow:   inset 0 0 0 1px rgba(45, 55, 72, 0.06) !important;
}


/* T.3.2.4 — Slot hover state: teal tint instead of umber.
   Source: rgba(122, 90, 52, .06) + var(--accent) (already teal via
   token map but the rgba bg stays warm-brown). */
.acl-slot:hover::before {
    background:   rgba(27, 156, 133, 0.04) !important;
    box-shadow:   inset 0 0 0 1.5px var(--pt-teal) !important;
}


/* T.3.2.5 — Drop-target slot (drag-from-tray landing zone): stronger
   teal tint instead of umber. */
.acl-slot.is-drop-target::before {
    background:   rgba(27, 156, 133, 0.10) !important;
    box-shadow:   inset 0 0 0 2px var(--pt-teal) !important;
}


/* T.3.2.6 — Slot hover overlay (Adjust crop / Replace / Remove): dark
   slate instead of dark umber. Source: rgba(20, 14, 6, 0.55). */
.acl-slot-overlay {
    background: rgba(45, 55, 72, 0.55) !important;
}


/* T.3.2.7 — Tray photo × delete button: dark slate instead of dark umber.
   Source: rgba(20, 14, 6, 0.7). The hover state still hits var(--danger)
   per the source rule, no override needed. */
.acl-photo-tray-remove {
    background: rgba(45, 55, 72, 0.7) !important;
}


/* T.3.2.8 — Stage caption hairline ticks: teal instead of neutral grey.
   Matches the teal accent ticks shown on either side of the size caption
   ("12 × 12" with thin teal lines on either side) in the locked Picsin
   Teal templates. (T.2.2.5 parity.) */
.atl-tick {
    background: var(--pt-teal) !important;
}


/* T.3.2.9 — Active segmented pills: solid near-black charcoal.
   Token default resolves to slate (--pt-slate #415161); templates show
   solid charcoal. Forced to #333333 per Naman 2026-04-30.
   Applies to:
     • Orientation bar (Square / Landscape / Portrait)
     • Finish family bar (Canvas Mounted / Framed / Photo Print)
     • Frame Depth pills (canvas variant: 0.5" / 1" / 1.5")
     • Frame Colour swatch pills (framed variant: oak / walnut / black / white)
     • Paper Quality pills (photo-print variant: matte / gloss / rolled)
   (T.2.2.6 parity.) */
.atl-seg.is-on,
.acl-orientation-bar .atl-seg.is-on,
.acl-finish-bar      .atl-seg.is-on,
.acl-variant-bar     .atl-seg.is-on {
    background: #333333 !important;
    color:      #FFFFFF !important;
}


/* T.3.2.9.1 — Active-pill note text colour fix.
   Variant pills carry a `.atl-seg-note` span ("Slim", "Standard", "+ ₹ 100",
   "Included") under the label. The default rule colours it slate-grey;
   on the active charcoal background it becomes unreadable. Force white.
   (T.2.2.6.1 parity.) */
.atl-seg.is-on .atl-seg-note,
.acl-orientation-bar .atl-seg.is-on .atl-seg-note,
.acl-finish-bar      .atl-seg.is-on .atl-seg-note,
.acl-variant-bar     .atl-seg.is-on .atl-seg-note {
    color: #FFFFFF !important;
}


/* T.3.2.9.2 — Surcharge note always on its own line beneath the label.
   The `.atl-seg-note` span is inline by default — on tighter pills the
   note wraps mid-string instead of dropping cleanly to a new line.
   Forcing display:block + nowrap puts the whole note on its own line.
   (T.2.2.6.2 parity.) */
.atl-seg .atl-seg-note {
    display:     block !important;
    margin-left: 0     !important;
    white-space: nowrap;
}


/* T.3.2.10 — Outer preview "tray" .atl-stage: light grey fill (#F2F2F2).
   Templates show a subtle grey container framing the inner artframe +
   slot area. Override the token-driven white bg. (T.2.2.7 parity.) */
.atl-stage {
    background: #F2F2F2 !important;
}


/* T.3.2.11 — Empty-template state .acl-no-template:
     • Source paints a 45° hatching pattern via repeating-linear-gradient
       on the empty artframe interior — kill it for a clean white inside.
     • Border-color reads var(--line-2) (token-driven slate-grey) —
       leave that alone so the dashed outline stays visible.
     • Title font-family reads var(--serif) → already Noto Sans via the
       token map. No override needed.
   (T.2.2.8 parity.) */
.acl-no-template {
    background: #FFFFFF !important;
}


/* T.3.2.12 — Save Project pill (.atl-cta-secondary): grey pill bg,
   white inner icon circle, near-black label + bookmark.

   Source defaults read --bg-card / --bg-sunk / --ink which auto-reskin
   to white / light-grey / slate via the token map — readable but not
   the locked design. Templates show: light grey #F2F2F2 pill, white
   inner icon circle, solid charcoal "Save Project" label, medium-grey
   "Login Required" subtext. (T.2.2.9 parity.) */
.atl-cta-secondary {
    background: #F2F2F2 !important;
}
.atl-cta-secondary .atl-cta-main > span:first-child {
    color: #333333 !important;
}
.atl-cta-secondary .atl-cta-icon {
    background: #FFFFFF !important;
    color:      #333333 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.3.3 — .pt-select size dropdown polish
   ════════════════════════════════════════════════════════════════════
   The collage size dropdown is dynamic — JS rebuilds the options list
   every time the orientation changes. We use programmatic `.pt-select`
   build mode here (no hidden <select> bridge) so the popup is always
   fresh after each orientation switch.

   The trigger inherits `.pt-select__trigger` from picsin-teal.css (Section
   8); only the right-column placement needs a tweak so the dropdown
   doesn't bunch up against the section label.
   ──────────────────────────────────────────────────────────────────── */
.acl-size-row .pt-select {
    /* Match the inline-flex baseline of the legacy `.acl-size-select` so
       the row's vertical rhythm doesn't shift after the swap. */
    align-items: center;
}
.acl-size-row .pt-select__trigger {
    padding: 6px 8px;
    min-width: 130px;
}


/* ════════════════════════════════════════════════════════════════════
   T.3.4 — Template gallery: compact cards + scrollable container
   ════════════════════════════════════════════════════════════════════
   Reasons (Naman 2026-05-01):
     1. Cards were too big — preview tile + name + slot-count took up
        too much vertical real estate.
     2. As more templates per orientation are seeded (target: many more
        than today's 2 per orientation), the gallery must scroll cleanly
        rather than push the page indefinitely.

   Strategy:
     • Shrink padding + gap inside each card.
     • Smaller name + slot-count font sizes.
     • Cap the gallery at ~360px height (~3 rows of 3-col grid at the
       new compact size) with overflow-y:auto.
     • Thin teal-tinted scrollbar matching the .pt-select popup style
       so the visual language stays consistent.

   Source rules being overridden live in atelier-create-photo-collage.css
   lines 322–375. !important is required because that file's selectors
   sit at equal specificity with no namespace prefix to lean on.
   ──────────────────────────────────────────────────────────────────── */

.acl-template-gallery {
    /* Phase T.3 round 5 (2026-05-01): cards shrunk further per Naman.
       Min column ~75px + max-width cap at 85px below. ~85px = roughly
       1/3 the original repeat(3, 1fr) size. */
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    /* Cards left-align inside the gallery instead of stretching across
       the full 1fr column when there are fewer templates than fit. */
    justify-content: start !important;
    /* Cap height so a tall list scrolls inside the right column instead
       of stretching the page. ~360px = roughly 3 rows of compact cards. */
    max-height: 360px !important;
    overflow-y: auto !important;
    /* Thin scrollbar matching the .pt-select popup. */
    scrollbar-width: thin;
    scrollbar-color: var(--pt-rule-strong) transparent;
    /* Tighter inter-card gap. */
    gap: 6px !important;
    /* A little extra right-padding so the scrollbar gutter doesn't crash
       into the rightmost column of cards. */
    padding-right: 4px;
}
.acl-template-gallery::-webkit-scrollbar {
    width: 6px;
}
.acl-template-gallery::-webkit-scrollbar-thumb {
    background: var(--pt-rule-strong);
    border-radius: 999px;
}
.acl-template-gallery::-webkit-scrollbar-track {
    background: transparent;
}

.acl-template-card {
    /* Phase T.3 round 5 (2026-05-01): tighter padding + hard cap at 85px.
       Was 10px 8px 8px → 6px 5px 5px → now 4px. */
    padding: 4px !important;
    /* Tighter inner stack — was 4px. */
    gap: 3px !important;
    /* Hard cap so the card can't stretch wider than ~85px. Height stays
       auto so the existing aspect-ratio:1/1 preview tile + name + slot-
       count keep their natural proportions. */
    max-width: 85px !important;
}

.acl-template-name {
    /* Phase T.3 round 5: smaller name — was 11px → 10px → now 9px. */
    font-size: 9px !important;
    line-height: 1.15 !important;
}

.acl-template-slots-count {
    /* Phase T.3 round 5: smaller count — was 10px → 9px → now 8px. */
    font-size: 8px !important;
    line-height: 1.1 !important;
}

/* Mobile (≤ 820px) — pin to 2 thumb-friendly columns and tighten the
   max-height so the gallery doesn't take half the screen on a phone.
   We override grid-template-columns explicitly here because the round-3
   desktop rule (auto-fill / minmax(120px, 1fr)) carries !important and
   would otherwise survive the mobile breakpoint, packing too many tiny
   cards on narrow screens. */
@media (max-width: 820px) {
    .acl-template-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 280px !important;
    }
}