/* ════════════════════════════════════════════════════════════════════
   Phase T.2 — /create-print page-specific Picsin Teal overrides
   ════════════════════════════════════════════════════════════════════
   This file is the page-specific override sheet for the polymorphic
   Canvas / Framed / Photo Print editor. Loaded AFTER picsin-teal.css
   (which is loaded after atelier-print-create.css), so anything here
   wins the cascade.

   Hard rules:
   - DO NOT edit atelier-print-create.css.
   - Cropper visuals are LOCKED — never override .pc-* selectors here.
   - Append-only — future T.2 polish lands at the bottom of this file.
   ──────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────
   T.2.1 — Hide the product description blurb.
   The <p class="atl-blurb" id="atl-lede"> sits between the price and
   the size selector. Naman's locked design templates have no such
   paragraph — price flows straight into Select Size.

   Element stays in the DOM (display:none, not removed) so:
     • atelier-print-create.js's $('atl-lede') reference still resolves
     • any .textContent writes on product switch remain error-free
   Per feedback_hide_not_delete.md.
   ──────────────────────────────────────────────────────────────────── */
.atl-blurb {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.2.2 — Visual audit overrides (2026-04-30)
   ════════════════════════════════════════════════════════════════════
   atelier-print-create.css hard-codes 7 umber/cream values that the
   global :root token override map (picsin-teal.css) cannot reach.
   These overrides force them to Picsin Teal palette.

   !important is required because the source file's selectors have
   equal specificity to ours and no class-namespace prefix to lean on.

   Audit map ↔ source line in atelier-print-create.css:
     T.2.2.1 → line 485 (.atl-cta:hover hard-coded #5e4527)
     T.2.2.2 → lines 203, 212, 222 (cream #efeae0 / #fbfaf6 interiors)
     T.2.2.3 → line 242 (.atl-drop:hover umber tint)
     T.2.2.4 → line 168 (.atl-stage.is-drag umber shadow)
     T.2.2.5 → line 278 (.atl-tick neutral grey rule)
     T.2.2.6 → line 398 + 598 (.atl-seg.is-on slate, want black)
   ──────────────────────────────────────────────────────────────────── */


/* T.2.2.1 — CTA stays teal in every state. */
.atl-cta        { background: var(--pt-teal)     !important; }
.atl-cta:hover  { background: var(--pt-teal-700) !important; }


/* T.2.2.2 — Preview interior: pure white instead of cream.
   Applies to canvas, print, and framed-with-margin mat surfaces.
   No-margin framed mode keeps its transparent inner (driven by the
   parent frame chrome) — left untouched. */
.atl-artframe[data-media="canvas"] .atl-artinner,
.atl-artframe[data-media="print"]  .atl-artinner,
.atl-artframe[data-media="framed"][data-frame-margin="with"] .atl-artinner {
    background: #FFFFFF !important;
}


/* T.2.2.3 — Drop-tile hover: teal tint + teal border. */
.atl-drop:hover {
    background:    rgba(27, 156, 133, 0.04) !important;
    border-color:  var(--pt-teal)           !important;
}


/* T.2.2.4 — Drag-state stage glow: teal instead of umber. */
.atl-stage.is-drag {
    box-shadow:    0 0 0 3px rgba(27, 156, 133, 0.14) !important;
    border-color:  var(--pt-teal)                     !important;
}


/* T.2.2.5 — Size caption hairline ticks: teal instead of neutral grey.
   Matches the teal accent ticks shown on either side of
   "8 X 8 INCHES" in the locked design templates. */
.atl-tick {
    background: var(--pt-teal) !important;
}


/* T.2.2.6 — 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 Product bar (Canvas/Framed/Photo Print), Type pills
   (Rolled/Mounted/Gallery, Natural Oak/Matte Black/Gallery White,
   Matte/Gloss), and Frame Thickness pills. */
.atl-seg.is-on,
#atl-product-bar .atl-seg.is-on {
    background: #333333 !important;
    color:      #FFFFFF !important;
}

/* T.2.2.6.1 — Active-pill note text colour fix.
   The .atl-seg-note spans on canvas-type / canvas-thickness /
   framed-thickness / photo-print-paper pills carry an INLINE
   style="color:var(--text-muted, #8a8a85)" written directly in
   the Blade. Inline styles trump T.2.2.6's class-based color rule,
   so the surcharge note ("+ ₹ 300", "Included") stays grey on the
   active charcoal background — unreadable. !important here is the
   only lever that beats inline. */
.atl-seg.is-on .atl-seg-note,
#atl-product-bar .atl-seg.is-on .atl-seg-note {
    color: #FFFFFF !important;
}

/* T.2.2.6.2 — Surcharge note always on its own line beneath the label.
   The note span is inline by default and the Blade carries an inline
   `margin-left:6px` for inline placement — fine when the pill is wide
   enough, but on tighter pills (e.g. "Gallery Wrap Canvas + ₹ 300")
   the note wraps MID-STRING: "+" stays inline next to the label,
   "₹ 300" drops to a second line alone. Forcing display:block +
   white-space:nowrap puts the whole note on its own line every time,
   regardless of label length. The !important on margin-left defeats
   the inline 6px so the note centres cleanly under the label. */
.atl-seg .atl-seg-note {
    display:     block !important;
    margin-left: 0     !important;
    white-space: nowrap;
}


/* T.2.2.7 — Outer preview "tray": light grey fill (#F2F2F2).
   Templates show a subtle grey container framing the inner drop /
   image box. atelier-print-create.css renders .atl-stage on
   var(--bg-card) which the token map maps to white. Override here. */
.atl-stage {
    background: #F2F2F2 !important;
}


/* T.2.2.8 — Drop tile interior: kill the 45° hairline slant pattern.
   atelier-print-create.css line 236 paints
   `repeating-linear-gradient(45deg, transparent 0 10px,
                              rgba(0,0,0,.02) 10px 11px)`
   on the empty state. Templates show a clean white interior with
   the dashed border only — no diagonal hatching. Solid #FFFFFF
   replaces the gradient entirely. */
.atl-drop {
    background: #FFFFFF !important;
}


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

   Source defaults (atelier-print-create.css lines 502–513):
     pill bg       : var(--bg-card)          → white via token map
     label colour  : var(--ink)              → slate via token map
     icon bg       : var(--bg-sunk)          → light grey
     icon colour   : var(--ink)              → slate via token map
     subtext       : var(--ink-3)            → grey (fine — left alone)

   Templates (canvas-print.jpeg) show: light grey pill, white icon
   circle, solid charcoal "Save Project" label and bookmark stroke,
   medium-grey "Login Required" subtext. */
.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.2.2.10 — Framed swatch chips
   ════════════════════════════════════════════════════════════════════
   Mirrors the /create-photo-collage swatch UI (acl-swatch-seg pattern
   from atelier-create-photo-collage.css lines 399–420). Each framed
   colour pill shows a 24×24 round chip stacked above the name + note.
   Active state inherits T.2.2.6 (.atl-seg.is-on → #333333 bg, white
   text) so the colour chip stays vibrant against the dark active
   background.
   ──────────────────────────────────────────────────────────────────── */
.acl-variant-bar-swatches {
    padding: 4px;
}
.acl-swatch-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
}
.acl-swatch-chip {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.acl-swatch-seg .atl-seg-label {
    font-size: 11px;
    line-height: 1;
}
.acl-swatch-seg .atl-seg-note {
    font-size: 10px;
    line-height: 1;
}