/*! AuntGo Adventures — The Paintbox app styles. Enqueued only on the Paintbox page. Ported from The Paintbox.dc.html. */

html,body{ margin:0; padding:0; }

body{ background:#FAF4E6; color:#1C3B37; font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"); }

::selection{ background:#1E8FD5; color:#FAF4E6; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease, background .3s ease, color .3s ease; }

.btn-primary{ background:#D9542B; color:#FAF4E6; border-color:#D9542B; box-shadow:0 12px 22px -12px rgba(217,84,43,.9); }

.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 30px -12px rgba(217,84,43,.95); }

.btn-ghost{ background:transparent; color:#3C8C88; border-color:#3C8C88; }

.btn-ghost:hover{ background:rgba(60,140,136,.1); }

.btn .btn-ico{ transition:transform .35s cubic-bezier(.2,.85,.25,1); flex:none; }

.btn-primary:hover .btn-ico{ transform:translateX(3px); }

.trail{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#3C8C88; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:none; border:none; cursor:pointer; transition:gap .25s ease, color .25s ease; }

.trail:hover{ color:#D9542B; gap:12px; }

.navlink{ text-decoration:none; color:#1C3B37; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding-bottom:3px; border-bottom:2px solid transparent; transition:color .25s ease, border-color .25s ease; }

.navlink:hover{ color:#D9542B; }

.navlink.active{ color:#D9542B; border-color:#D9542B; }

.hassub{ position:relative; display:inline-flex; }

.hassub .submenu{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:8px; box-shadow:0 14px 28px -12px rgba(28,59,55,.4); padding:6px; display:none; flex-direction:column; gap:2px; min-width:150px; z-index:60; }

.hassub:hover .submenu{ display:flex; }

.hassub .submenu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }

.hassub .submenu a{ text-decoration:none; color:#1C3B37; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:9px 12px; border-radius:5px; white-space:nowrap; border-bottom:none; }

.hassub .submenu a:hover{ background:#EFE4C8; color:#D9542B; }

.soc{ color:#3C8C88; display:inline-flex; transition:color .25s ease, transform .25s ease; }

.soc:hover{ color:#D9542B; transform:translateY(-2px); }

.lang-select{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1C3B37; background:transparent; border:1.5px solid rgba(28,59,55,.22); border-radius:99px; padding:5px 9px; cursor:pointer; }

.ptab{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border:1.5px solid rgba(28,59,55,.2); background:transparent; color:#6b7c74; padding:9px 18px; border-radius:99px; transition:.2s; }

.ptab:hover{ border-color:#3C8C88; color:#1C3B37; }

.ptab.on{ background:#1C3B37; border-color:#1C3B37; color:#FAF4E6; }

.fld{ display:block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9a8f76; margin-bottom:6px; }

.inp{ font-family:'Hanken Grotesk',sans-serif; font-size:14.5px; color:#1C3B37; padding:11px 13px; border:1.5px solid rgba(28,59,55,.2); border-radius:8px; background:#FFFDF6; width:100%; outline:none; }

.inp:focus{ border-color:#3C8C88; }

/* Light & Mood / Scene type / Add-a-pan <select>: full vertical room so the value isn't clipped,
 * plus an explicit down-chevron so it reads as an openable dropdown (§D — the flat native arrow
 * looked like a static field). appearance:none strips the OS arrow; the SVG caret replaces it. */
select.inp{ height:auto; min-height:46px; line-height:1.4;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c6f68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:13px 13px; }

.arch{ font-family:'Hanken Grotesk',sans-serif; text-align:left; border:1.5px solid rgba(28,59,55,.18); background:#FFFDF6; border-radius:9px; padding:12px 13px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:2px; }

.arch:hover{ border-color:#D9542B; transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(28,59,55,.3); }

.arch b{ font-size:14px; font-weight:700; color:#1C3B37; }

.arch small{ font-size:11px; color:#9a8f76; }

.chip-ex{ font-family:'Caveat',cursive; font-weight:700; font-size:16px; color:#3C8C88; border:1.5px solid rgba(60,140,136,.45); border-radius:99px; padding:2px 12px; margin:4px 5px 0 0; cursor:pointer; background:none; }

.chip-ex:hover{ background:rgba(60,140,136,.08); }

.zcard{ border:1px solid rgba(28,59,55,.14); border-radius:11px; background:#FFFDF6; padding:16px 17px; margin-bottom:14px; }

.seg{ display:inline-flex; border:1.5px solid rgba(28,59,55,.18); border-radius:99px; overflow:hidden; }

.seg button{ border:none; background:transparent; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 15px; cursor:pointer; color:#9a8f76; }

.seg button.onw{ background:#E2A15C; color:#5a3413; }

.seg button.onc{ background:#7E9BC0; color:#1d3454; }

.ppass{ border:1px solid rgba(28,59,55,.14); border-left:3px solid #3C8C88; border-radius:9px; background:#FBF6EA; padding:11px 13px; margin-top:10px; }

/* Palette selector ("ALL MY PANS"): scoped chevron so it reads as a dropdown, matching the
 * scene-type / light carets (same glyph + #5c6f68 colour). Scoped to .pbx-palsel so the shared
 * header .lang-select (EN pill) is untouched. The eye-preview button to its right is unchanged. */
.pbx-palsel{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235c6f68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px 13px; }

.psel{ font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; font-weight:600; color:#1C3B37; border:1px solid rgba(28,59,55,.2); border-radius:7px; background-color:#FFFDF6; padding:5px 26px 5px 7px; cursor:pointer; max-width:170px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6f68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:11px 11px; }

.pchip{ display:inline-flex; align-items:center; gap:7px; background:#FFFDF6; border:1px solid rgba(28,59,55,.16); border-radius:99px; padding:4px 8px 4px 6px; margin:0 6px 6px 0; }

.pdot{ width:15px; height:15px; border-radius:50%; flex:none; box-shadow:inset -1px -1px 2px rgba(0,0,0,.25); }

.addcol{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.04em; white-space:nowrap; color:#3C8C88; background:#FFFDF6; border:1px dashed #3C8C88; border-radius:99px; padding:4px 11px; cursor:pointer; }
/* §band_reorder: ↑/↓ arrange the band stack — tap targets stay ≥40px on mobile */
.pbx-reorder{ display:inline-flex; gap:4px; flex:none; }
.pbx-reorder__b{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; width:40px; height:40px; border:1.5px solid rgba(28,59,55,.2); background:#FFFDF6; color:#3C8C88; border-radius:10px; font-size:16px; line-height:1; cursor:pointer; }
.pbx-reorder__b:hover{ color:#D9542B; border-color:rgba(217,84,43,.5); background:rgba(217,84,43,.06); }
@media(min-width:560px){ .pbx-reorder__b{ min-width:34px; min-height:34px; width:34px; height:34px; border-radius:8px; } }

.therm{ display:flex; border:2px solid #1C3B37; border-radius:11px; overflow:hidden; box-shadow:2px 2px 0 rgba(28,59,55,.12); }

.tseg{ flex:1; text-align:center; padding:5px 2px; font-size:8.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }

.verdict{ border-radius:11px; padding:15px 17px; border:1px solid; margin-bottom:14px; }

.verdict.good{ background:#EEF6F0; border-color:#BCDCC6; }

.verdict.warn{ background:#FBEEE8; border-color:#EBC8B6; }

.fbi{ display:flex; gap:9px; align-items:flex-start; border-radius:8px; padding:8px 11px; margin-top:7px; border:1px solid; font-size:13px; line-height:1.5; }

.fbi .ic{ flex:none; width:17px; height:17px; border-radius:50%; color:#FFFDF6; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }

@media (max-width:860px){ .topnav{ display:none !important; } .comp-grid{ grid-template-columns:1fr !important; } .map-wrap{ position:static !important; } .start-grid{ grid-template-columns:1fr !important; }
  /* §0.1 (spec_paintbox_v2_beginner): when the grid collapses to one column, `1fr` = minmax(auto,1fr)
   * whose `auto` minimum grows to the column's min-content and blows the track past the viewport
   * (387px inside a 300px container at 360px → content clipped off the right edge). Letting the grid
   * items shrink collapses the track back to the container width, killing the horizontal overflow. */
  .comp-grid > *{ min-width:0; }
}
/* desktop has width to spare — grow the summary squares so the mini-map reads at a glance */
@media (min-width:861px){ .pbx-summary__squares{ gap:18px; } .pbx-read__sw{ width:64px; height:58px; } .pbx-mini{ width:88px; height:58px; } }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

.pan{ position:relative; width:100%; aspect-ratio:1; border-radius:20% 22% 18% 21%/21% 18% 22% 20%; cursor:pointer; border:2px solid rgba(255,255,255,.55); box-shadow:inset -3px -5px 9px rgba(0,0,0,.3), inset 2px 3px 6px rgba(255,255,255,.35), 0 3px 7px rgba(28,59,55,.2); transition:transform .18s ease; }

.pan:hover{ transform:translateY(-3px) rotate(-1deg); }

.pan.inmix{ box-shadow:inset 0 0 0 3px #D9542B, inset -3px -5px 9px rgba(0,0,0,.3), inset 2px 3px 6px rgba(255,255,255,.35); }

.pan .tick{ position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%; background:#D9542B; color:#FAF4E6; font-size:11px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(28,59,55,.35); opacity:0; transform:scale(.6); transition:.2s; }

.pan.inmix .tick{ opacity:1; transform:scale(1); }

.ratio{ -webkit-appearance:none; appearance:none; height:5px; border-radius:99px; background:#E3D4B2; outline:none; cursor:pointer; }

.ratio::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#D9542B; border:2px solid #FFFDF6; box-shadow:0 1px 3px rgba(28,59,55,.4); cursor:pointer; }

.ratio::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#D9542B; border:2px solid #FFFDF6; cursor:pointer; }

.dil{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:99px; background:linear-gradient(90deg,#CDE3EC,#3C8C88); outline:none; cursor:pointer; }

.dil::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#3C8C88; border:2px solid #FFFDF6; box-shadow:0 1px 3px rgba(28,59,55,.4); cursor:pointer; }

.dil::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#3C8C88; border:2px solid #FFFDF6; cursor:pointer; }

.modal-ov{ position:fixed; inset:0; z-index:10000; background:rgba(28,59,55,.55); display:flex; align-items:center; justify-content:center; padding:28px; }

@media print{
    body::before{ display:none !important; }
    body *{ visibility:hidden !important; }
    .printcard, .printcard *{ visibility:visible !important; }
    .printcard{ position:absolute !important; left:0; top:0; width:420px !important; box-shadow:none !important; transform:none !important; }
    .modal-ov{ position:absolute !important; background:none !important; padding:0 !important; display:block !important; }
    .no-print{ display:none !important; }
  }

/* ============================================================
 * COMPACT PAN TRAY — added 2026-06-26 (spec_paintbox_responsive item 3).
 * Replaces the two large always-open WARM/COOL grids. Labelled pan
 * pills wrap (no horizontal scroll); a Warm/Cool toggle shows one
 * group at a time; tap a pan to add, tap a share chip to nudge it.
 * ============================================================ */
.pbx-pick{ display:flex; flex-direction:column; gap:13px; }

/* inline summary window: scrolls with the passage (never floats over the mix) */
.pbx-summary{ display:flex; flex-direction:column; gap:9px; background:#FBF6EA; border:1px solid rgba(28,59,55,.12); border-radius:11px; padding:11px 12px; }
.pbx-summary__squares{ display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap; }
/* labelled squares: "your mix" (swatch) vs "the composition" (mini-map) */
.pbx-sqfig{ flex:none; margin:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.pbx-sqcap{ font-family:'Hanken Grotesk',sans-serif; font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#9a8f76; }
/* predicted-mix swatch (flat true colour, §E representative dilution) + slim water-driven wash chip */
.pbx-read__pair{ display:flex; align-items:stretch; gap:4px; }
.pbx-read__sw{ flex:none; width:54px; height:48px; border-radius:6px; border:1.5px solid rgba(28,59,55,.2); }
.pbx-read__wash{ flex:none; width:16px; align-self:stretch; border-radius:5px; border:1.5px solid rgba(28,59,55,.2); }
/* bigger proportion mini-map (legible bands) */
.pbx-mini{ flex:none; display:flex; flex-direction:column; width:64px; height:48px; padding:0; border:1.5px solid rgba(28,59,55,.28); border-radius:5px; overflow:hidden; background:none; cursor:pointer; }
/* §spec_paintbox_v2_fixes Bug 2: mini map renders per-pass sub-cells (same water-aware path as the
 * large map) so it recolours when the water slider moves, not a single fixed zone fill. */
.pbx-mini__b{ display:flex; flex-direction:column; min-height:0; }
.pbx-mini__sub{ flex:1; min-height:0; }
.pbx-mini__b.on{ box-shadow:inset 0 0 0 2px #D9542B; }

/* §4 → thermometer read-out: warm–cool is OUTPUT only (tracks active.posPct), not a control.
 * Thin warm→cool gauge + downward pointer + small end labels — no round thumb, no grab cursor,
 * flatter/calmer than the Water slider so Water reads as the only handle. */
.pbx-sqfig--pos{ flex:1; min-width:120px; align-self:stretch; justify-content:flex-end; }
.pbx-posbar{ display:flex; align-items:center; gap:5px; width:100%; min-width:110px; cursor:default; }
.pbx-posbar__end{ flex:none; font-size:7.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.pbx-posbar__end--warm{ color:#C77A44; }
.pbx-posbar__end--cool{ color:#6E8FB0; }
.pbx-posbar__track{ position:relative; flex:1; min-width:40px; height:4px; border-radius:99px; border:1px solid rgba(28,59,55,.15); background:linear-gradient(90deg,#E2A15C 0%,#E6C29A 38%,#A9BBCE 62%,#7E9BC0 100%); }
.pbx-posbar__needle{ position:absolute; left:0; bottom:100%; margin-bottom:2px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #1C3B37; transform:translateX(-50%); }
.pbx-sqcap__hint{ display:block; margin-top:1px; font-size:7.5px; font-weight:600; font-style:italic; letter-spacing:0; text-transform:none; color:#b6ab92; }
/* §1.1 (spec_paintbox_v2_beginner) dilution/wash strip — the mix at five water levels */
.pbx-dilstrip{ display:flex; align-items:center; gap:8px; margin-top:1px; }
.pbx-dilstrip__end{ flex:none; font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9a8f76; }
.pbx-dilstrip__bar{ position:relative; flex:1; min-width:0; display:flex; height:18px; border-radius:6px; overflow:hidden; border:1px solid rgba(28,59,55,.2); }
.pbx-dilstrip__cell{ flex:1; min-width:0; }
/* §spec_paintbox_v2_fixes Bug 1: marker showing where the live water slider sits on the wash strip */
.pbx-dilstrip__mark{ position:absolute; top:0; bottom:0; width:3px; transform:translateX(-50%); background:#1C3B37; box-shadow:0 0 0 1px rgba(255,255,255,.8); pointer-events:none; }
/* §1.2 painted-composition ↔ temperature toggle button */
.pbx-maptoggles{ display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.pbx-maptoggle{ display:inline-block; font-family:'Hanken Grotesk',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#3C8C88; background:#FFFDF6; border:1.5px solid rgba(60,140,136,.5); border-radius:99px; padding:6px 14px; cursor:pointer; }
.pbx-maptoggle:hover{ background:rgba(60,140,136,.08); color:#1C3B37; }
/* §1.4 per-zone value tag (light/mid/dark) + squint value-verdict line */
.pbx-valuetag{ flex:none; align-self:flex-start; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:2px 8px; margin-left:6px; }
.pbx-valuetag--light{ color:#5c6f68; background:#FBF6EA; border:1px solid rgba(28,59,55,.18); }
.pbx-valuetag--mid{ color:#5c6f68; background:#E9E2D0; border:1px solid rgba(28,59,55,.2); }
.pbx-valuetag--dark{ color:#FAF4E6; background:#3A3E44; border:1px solid #3A3E44; }
.pbx-valueverdict{ display:flex; gap:8px; align-items:flex-start; margin:9px 0 0; font-size:12.5px; line-height:1.45; color:#42605b; background:#FFFDF6; border:1px dashed rgba(28,59,55,.2); border-radius:8px; padding:7px 10px; }
.pbx-valueverdict__ic{ flex:none; }
/* §1.3 "try another way" + side-by-side compare */
.pbx-tryalt{ display:inline-block; margin-top:1px; font-family:'Hanken Grotesk',sans-serif; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#3C8C88; background:none; border:none; cursor:pointer; padding:2px 0; text-decoration:underline dotted; }
.pbx-tryalt:hover{ color:#D9542B; }
.pbx-compare{ display:flex; gap:10px; }
.pbx-compare__col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:9px; padding:8px 9px; }
.pbx-compare__hd{ margin:0; font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9a8f76; text-align:center; }
.pbx-compare .pbx-read__sw{ width:100%; height:34px; }
.pbx-compare__keep{ font-family:'Hanken Grotesk',sans-serif; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#FAF4E6; background:#3C8C88; border:none; border-radius:99px; padding:6px 8px; cursor:pointer; }
.pbx-compare__keep:hover{ background:#2f736f; }
.pbx-compare__hint{ margin:6px 0 0; font-size:11px; font-style:italic; line-height:1.4; color:#9a8f76; text-align:center; }
/* §fixes §3: both-sides-identical notice + one-tap "find a different combination" / single-road line */
.pbx-compare__same{ margin:8px 0 0; font-size:12px; font-style:italic; line-height:1.4; color:#5c6f68; text-align:center; }
.pbx-compare__diff{ display:block; margin:7px auto 0; font-family:'Hanken Grotesk',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#FAF4E6; background:#3C8C88; border:none; border-radius:99px; padding:8px 16px; cursor:pointer; }
.pbx-compare__diff:hover{ background:#2f736f; }
.pbx-compare__oneroad{ margin:6px 0 0; font-size:11.5px; font-style:italic; line-height:1.4; color:#9a8f76; text-align:center; }
/* §2 technique hint — one voice line per pass, same weight as feedback lines, teal teaching tone */
.pbx-technique{ display:flex; gap:9px; align-items:flex-start; border-radius:8px; padding:8px 11px; border:1px solid #BCDCC6; background:#EEF6F0; color:#2c6e49; font-size:12.5px; line-height:1.45; }
.pbx-technique__ic{ flex:none; font-size:14px; line-height:1.2; }
.pbx-technique__tag{ display:inline-block; margin-right:7px; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#FAF4E6; background:#3C8C88; border-radius:99px; padding:2px 8px; vertical-align:1px; }
/* §5 shadow "why" note — mirrors .pbx-technique in a shadow/violet tone */
.pbx-shadowwhy{ display:flex; gap:9px; align-items:flex-start; border-radius:8px; padding:8px 11px; border:1px solid #C6BEDD; background:#F1EEF7; color:#4b3f6b; font-size:12.5px; line-height:1.45; }
.pbx-shadowwhy__ic{ flex:none; font-size:14px; line-height:1.2; }
/* §3.1 "I'm new — pick my colours for me" entry button + starter intro panel */
.pbx-imnew{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:800; letter-spacing:.02em; color:#3C8C88; background:#FFFDF6; border:1.5px dashed #3C8C88; border-radius:99px; padding:11px 20px; cursor:pointer; }
.pbx-imnew:hover{ background:rgba(60,140,136,.08); color:#1C3B37; }
.pbx-imnew__ic{ font-size:15px; line-height:1; }
/* §3.1a two-door start row: starter (primary) + "I'll pick my own colours" (escape hatch) */
.pbx-doors{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.pbx-doors .btn{ font-size:12.5px; padding:13px 22px; }
.pbx-doors__go{ flex:0 1 auto; }
/* §4 "show it a photo" door — a file input styled as the ghost button; input itself is hidden */
.pbx-doors__photo{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.pbx-photoinput{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
/* §3.1a name the mixed secondary — same weight as a feedback/technique line, warm teaching tone */
.pbx-mixname{ display:flex; gap:9px; align-items:flex-start; border-radius:8px; padding:8px 11px; border:1px solid #E6C79C; background:#FBF3E8; color:#8a5a1f; font-size:12.5px; line-height:1.45; }
.pbx-mixname__ic{ flex:none; font-size:14px; line-height:1.2; }
.pbx-starter{ background:#FBF1DC; border:1.5px solid #E6C79C; border-radius:12px; padding:14px 16px; margin-top:16px; }
.pbx-starter__hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pbx-starter__ttl{ flex:1; font-family:'Newsreader',serif; font-weight:600; font-size:17px; line-height:1.2; color:#1C3B37; }
/* §fixes §1: collapse chevron (matches the passage-collapse chevron; rotates when tucked away) */
.pbx-starter__collapse{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; width:40px; height:40px; border:1.5px solid rgba(28,59,55,.2); background:#FFFDF6; color:#5c6f68; border-radius:10px; font-size:18px; line-height:1; cursor:pointer; transition:transform .2s ease; }
.pbx-starter__collapse:hover{ color:#D9542B; border-color:rgba(217,84,43,.5); background:rgba(217,84,43,.06); }
.pbx-starter.is-collapsed .pbx-starter__hd{ margin-bottom:0; }
.pbx-starter.is-collapsed .pbx-starter__collapse{ transform:rotate(-90deg); }
@media(min-width:560px){ .pbx-starter__collapse{ min-width:34px; min-height:34px; width:34px; height:34px; border-radius:8px; } }
.pbx-starter__row{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.pbx-starter__sw{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(28,59,55,.25); }
.pbx-starter__line{ font-size:12.5px; line-height:1.4; color:#5c6f68; }
/* §4 honest-fallback line + §4a placeholder invite */
.pbx-starter__fallback{ margin:0 0 10px; font-size:13px; line-height:1.5; font-style:italic; color:#8a5a1f; background:#FBF3E8; border:1px solid #E6C79C; border-radius:8px; padding:8px 11px; }
.pbx-starter__hint{ margin:10px 0 0; font-size:11.5px; font-style:italic; color:#9a8f76; }
/* §1 correctable scene/mood chips + inline picker */
.pbx-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.pbx-chip{ display:inline-flex; align-items:center; gap:6px; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.03em; color:#1C3B37; background:#FFFDF6; border:1.5px solid rgba(28,59,55,.22); border-radius:99px; padding:6px 13px; cursor:pointer; }
.pbx-chip:hover{ border-color:#3C8C88; }
.pbx-chip__cx{ font-size:9px; color:#9a8f76; }
.pbx-chippick{ display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 12px; }
.pbx-chippick__b{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; color:#3C8C88; background:#FFFDF6; border:1px solid rgba(60,140,136,.5); border-radius:8px; padding:6px 11px; cursor:pointer; }
.pbx-chippick__b:hover{ background:rgba(60,140,136,.1); color:#1C3B37; }
/* §4a editable band label (composition preview) + §5 contrast; §4a editable accordion zone name */
.pbx-bandname{ position:absolute; left:9px; top:5px; max-width:70%; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.04em; background:transparent; border:none; border-bottom:1px dashed transparent; padding:1px 2px; outline:none; cursor:text; z-index:3; }
.pbx-bandname:hover,.pbx-bandname:focus{ border-bottom-color:currentColor; }
.pbx-focalbadge{ position:absolute; right:9px; top:6px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:99px; padding:1px 7px; pointer-events:none; }
.pbx-zonename{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:14px; color:#1C3B37; background:transparent; border:none; border-bottom:1px dashed transparent; padding:1px 2px; max-width:52vw; outline:none; cursor:text; }
.pbx-zonename:hover,.pbx-zonename:focus{ border-bottom-color:rgba(28,59,55,.3); }
/* §3.2 "how do I mix this?" opener + from-palette recipe panel */
.pbx-solveopen{ display:inline-block; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.04em; color:#3C8C88; background:#FFFDF6; border:1px dashed rgba(60,140,136,.6); border-radius:99px; padding:6px 13px; cursor:pointer; }
.pbx-solveopen:hover{ background:rgba(60,140,136,.08); color:#1C3B37; }
.pbx-solve{ display:flex; flex-direction:column; gap:8px; background:#FFFDF6; border:1px solid rgba(28,59,55,.16); border-radius:10px; padding:10px 12px; }
.pbx-solve__hd{ display:flex; align-items:center; gap:9px; }
.pbx-solve__sw{ flex:none; width:26px; height:26px; border-radius:6px; border:1.5px solid rgba(28,59,55,.2); }
.pbx-solve__lbl{ flex:1; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9a8f76; }
.pbx-solve__x{ flex:none; border:none; background:none; color:#9a8f76; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.pbx-solve__recipe{ margin:0; font-size:13px; font-weight:700; line-height:1.4; color:#1C3B37; }
/* §subject_mix: per-passage "tell me what this is" ask */
.pbx-ask{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(28,59,55,.18); display:flex; flex-direction:column; gap:8px; }
.pbx-ask__lbl{ font-size:11.5px; font-style:italic; color:#5c6f68; }
.pbx-ask__row{ display:flex; gap:7px; align-items:stretch; }
.pbx-ask__in{ flex:1; min-width:0; font-size:13px; padding:8px 11px; }
.pbx-ask__go{ flex:none; width:38px; border:1.5px solid #3C8C88; background:#3C8C88; color:#FAF4E6; border-radius:8px; font-size:16px; font-weight:800; cursor:pointer; }
.pbx-ask__go:hover{ background:#2f736f; }
.pbx-ask__unknown{ margin:0; font-size:12.5px; line-height:1.45; color:#8a5a1f; }
.pbx-subjres{ display:flex; flex-direction:column; gap:8px; background:#FBF6EA; border:1px solid rgba(28,59,55,.16); border-radius:9px; padding:9px 11px; }
/* §suggestion_accept: each suggestion is its own card with its own "Use this mix" */
.pbx-mixcard{ display:flex; flex-direction:column; gap:8px; background:#FBF6EA; border:1px solid rgba(28,59,55,.16); border-radius:9px; padding:9px 11px; }
.pbx-mixcard__lbl{ flex:1; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5c6f68; }
.pbx-subjuse{ font-size:11.5px; padding:9px 16px; align-self:flex-start; }
.pbx-subjadd{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; line-height:1.4; color:#8a5a1f; background:#FBF3E8; border:1px solid #E6C79C; border-radius:8px; padding:8px 10px; }
.pbx-subjrename{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; color:#1C3B37; background:#FFFDF6; border:1px solid rgba(60,140,136,.4); border-radius:8px; padding:8px 10px; }
/* §5 neutralization flag — two tones: caution (muddy: opaque / 4+) vs calm info (clean soft grey) */
.pbx-mud{ display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.45; border-radius:8px; padding:8px 11px; }
.pbx-mud__ic{ flex:none; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#FAF4E6; }
.pbx-mud strong{ font-weight:800; }
.pbx-mud--caution{ background:#FBF1E6; border:1px solid #E6C79C; color:#8a5a1f; }
.pbx-mud--caution .pbx-mud__ic{ background:#D9542B; }
.pbx-mud--caution strong{ color:#7a4d18; }
.pbx-mud--info{ background:#EEF2F5; border:1px solid #C2D2DA; color:#3f5b66; }
.pbx-mud--info .pbx-mud__ic{ background:#5e8a9c; }
.pbx-mud--info strong{ color:#2c5260; }
/* §3 composition-level warm–cool balance spectrum (one dot per passage) */
.pbx-balance{ margin-top:14px; }
.pbx-balance__lbl{ margin:0 0 7px; font-family:'Hanken Grotesk',sans-serif; font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9a8f76; text-align:center; }
.pbx-balance__bar{ position:relative; height:14px; border-radius:99px; border:1px solid rgba(28,59,55,.2); background:linear-gradient(90deg,#E2A15C 0%,#E6C29A 38%,#A9BBCE 62%,#7E9BC0 100%); }
.pbx-balance__dot{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:#FBF6EA; border:2px solid rgba(28,59,55,.5); transform:translate(-50%,-50%); box-shadow:0 1px 2px rgba(28,59,55,.35); }
.pbx-balance__dot.on{ width:17px; height:17px; border-color:#1C3B37; border-width:2.5px; z-index:3; }
.pbx-balance__dot.focal{ border-radius:3px; border-color:#D9542B; background:#FFF; z-index:2; }
.pbx-balance__dot.muddy{ background:#B9B2A4; }
.pbx-balance__ends{ display:flex; justify-content:space-between; margin-top:5px; font-family:'Hanken Grotesk',sans-serif; font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#c3b393; }
/* per-pan / per-slot warm/cool stamp */
.pbx-segico{ margin-right:5px; font-size:12px; }
.pbx-pan__t{ position:absolute; bottom:-5px; left:-5px; width:15px; height:15px; border-radius:50%; background:#FFFDF6; border:1px solid rgba(28,59,55,.2); font-size:9px; line-height:13px; text-align:center; box-shadow:0 1px 2px rgba(28,59,55,.25); }
.pbx-slot__t{ flex:none; font-size:12px; line-height:1; width:16px; text-align:center; }
/* spec_paintbox_undertone_display: per-pigment undertone label (muted caps) replacing the ☀/❄ glyph in the passage rows */
.pbx-slot__u{ flex:none; max-width:46%; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#9a8f76; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:99px; padding:2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* spec_paintbox_keepcard_naming_and_dedup Bug 1: editable card-title input in the compose toolbar (looks like the title, click-to-edit) */
.pbx-titlein{ font-family:'Newsreader',serif; font-size:22px; color:#1C3B37; background:transparent; border:none; border-bottom:1px dashed transparent; padding:2px 3px; max-width:min(46vw,360px); border-radius:4px; }
.pbx-titlein::placeholder{ color:#b3a98f; }
.pbx-titlein:hover{ border-bottom-color:rgba(28,59,55,.3); }
.pbx-titlein:focus{ outline:none; border-bottom-color:#D9542B; background:#FFFDF6; }
/* §1 home: opt-in "Resume your unsaved mix" card */
.pbx-resume{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding:16px 20px; background:#FBF1DC; border:1.5px solid #E6C79C; border-radius:12px; box-shadow:0 10px 24px -18px rgba(28,59,55,.5); }

/* user-selectable focal point (one at a time) */
.pbx-focal{ flex:none; font-family:'Hanken Grotesk',sans-serif; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:3px 9px; line-height:1; }
.pbx-focal--on{ color:#FAF4E6; background:#D9542B; border:1px solid #D9542B; }
.pbx-focal--set{ color:#9a8f76; background:transparent; border:1.5px solid rgba(28,59,55,.2); cursor:pointer; }
.pbx-focal--set:hover{ color:#D9542B; border-color:rgba(217,84,43,.5); background:rgba(217,84,43,.06); }

/* §4 palette eye-preview (expand-in-place) */
.pbx-eye{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; flex:none; color:#3C8C88; background:transparent; border:1.5px solid rgba(60,140,136,.5); border-radius:8px; cursor:pointer; }
.pbx-eye:hover{ background:rgba(60,140,136,.1); }
.pbx-palpanel{ background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:11px; padding:13px 15px; margin-bottom:16px; }
.pbx-palpanel__hd{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.pbx-palpanel__nm{ font-family:'Newsreader',serif; font-size:17px; font-weight:600; color:#1C3B37; }
.pbx-palpanel__nm small{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; color:#9a8f76; }
.pbx-paliconbtn{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:#3C8C88; background:transparent; border:1.5px solid rgba(60,140,136,.5); border-radius:8px; cursor:pointer; }
.pbx-paliconbtn:hover{ background:rgba(60,140,136,.1); }
.pbx-paliconbtn.is-on{ color:#FAF4E6; background:#3C8C88; border-color:#3C8C88; }
.pbx-palpanel__x{ flex:none; border:none; background:none; color:#9a8f76; font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.pbx-palpanel__sw{ display:flex; flex-wrap:wrap; gap:7px; }
.pbx-palsw{ display:inline-flex; align-items:center; gap:6px; background:#FBF6EA; border:1px solid rgba(28,59,55,.14); border-radius:99px; padding:4px 10px 4px 6px; }
.pbx-palsw__dot{ flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(28,59,55,.2); }
.pbx-palsw__nm{ font-size:11.5px; font-weight:700; color:#1C3B37; white-space:nowrap; }
.pbx-palsw__x{ flex:none; border:none; background:none; color:#b6a88c; font-size:15px; line-height:1; cursor:pointer; padding:0 1px; }
.pbx-palpanel__add{ margin-top:12px; }
.pbx-palpanel__saveas{ margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* §7 persistent (sticky) "Keep this card" — reachable at any scroll position */
.pbx-stickysave{ position:fixed; right:18px; bottom:18px; z-index:40; display:inline-flex; align-items:center; gap:8px; font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; font-weight:800; letter-spacing:.02em; color:#FAF4E6; background:#D9542B; border:none; border-radius:99px; padding:13px 20px; cursor:pointer; box-shadow:0 10px 24px -8px rgba(217,84,43,.7); transition:opacity .25s ease, transform .25s ease; }
.pbx-stickysave:hover{ background:#c4471f; }
/* Dock away before the pill can reach the footer / "How the Paintbox works" strip below the
   mixer (paintbox-keepfloat.js toggles the body class from the mixer surface's scroll position). */
body.pbx-hide-keep .pbx-stickysave{ opacity:0; transform:translateY(14px) scale(.97); pointer-events:none; }
@media (max-width:560px){ .pbx-stickysave{ right:12px; bottom:12px; padding:12px 16px; font-size:12px; } }

/* the palette — compact, ~8 across, flat true-colour swatches (no gloss/bevel) */
.pbx-tray__seg{ margin-bottom:2px; }
.pbx-pans{ display:flex; flex-wrap:wrap; gap:8px; }
.pbx-pan{ position:relative; width:36px; height:36px; flex:none; border-radius:9px; cursor:pointer; border:1.5px solid rgba(28,59,55,.2); box-shadow:0 1px 2px rgba(28,59,55,.15); transition:transform .15s ease; }
.pbx-pan:hover{ transform:translateY(-2px); }
.pbx-pan.inmix{ border-color:rgba(217,84,43,.55); box-shadow:0 0 0 1.5px rgba(217,84,43,.55); }
.pbx-pan.preview{ border-color:#D9542B; box-shadow:0 0 0 3px #D9542B; transform:translateY(-2px); }
.pbx-pan--white{ background:repeating-linear-gradient(45deg,#FFFDF6,#FFFDF6 4px,#EFE3C7 4px,#EFE3C7 8px); }
.pbx-pan__ck{ position:absolute; top:-6px; right:-6px; display:none; width:16px; height:16px; border-radius:50%; background:#D9542B; color:#FAF4E6; font-size:9px; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(28,59,55,.4); }
.pbx-pan.inmix .pbx-pan__ck{ display:inline-flex; }
.pbx-pan__rm{ position:absolute; top:-7px; left:-7px; width:18px; height:18px; border-radius:50%; border:none; background:#1C3B37; color:#FAF4E6; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; }
/* §allpans: family-grouped picker + in-tray marker dot */
.pbx-fam{ margin-top:8px; }
.pbx-fam:first-child{ margin-top:2px; }
.pbx-fam__hd{ margin:0 0 5px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9a8f76; }
.pbx-pan__tray{ position:absolute; bottom:-4px; right:-4px; width:11px; height:11px; border-radius:50%; background:#3C8C88; border:1.5px solid #FFFDF6; box-shadow:0 1px 2px rgba(28,59,55,.35); display:none; }
.pbx-pan.intray .pbx-pan__tray{ display:block; }

/* selected-pan detail strip (name + characteristics, switches on tap) */
.pbx-detail{ display:flex; align-items:center; gap:11px; background:#FBF6EA; border:1px solid rgba(28,59,55,.14); border-radius:9px; padding:9px 11px; margin-top:9px; }
.pbx-detail__sw{ flex:none; width:34px; height:34px; border-radius:7px; border:1.5px solid rgba(28,59,55,.2); }
.pbx-detail__txt{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.pbx-detail__nm{ font-size:13.5px; font-weight:700; color:#1C3B37; line-height:1.1; }
.pbx-detail__nm small{ font-size:10px; font-weight:700; color:#9a8f76; letter-spacing:.02em; }
.pbx-detail__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.pbx-chip{ font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#5c6f68; background:#FFFDF6; border:1px solid rgba(28,59,55,.16); border-radius:99px; padding:3px 9px; }
.pbx-chip--ok{ color:#2c6e49; background:#EEF6F0; border-color:#BCDCC6; }
.pbx-chip--mid{ color:#8a5a1f; background:#FBF3E8; border-color:#E6C79C; }
.pbx-chip--bad{ color:#a8461f; background:#FBEEE8; border-color:#EBC8B6; }
/* §mobile_panel_fixes §1: inline pan-detail drawer, rendered under the tapped family row */
.pbx-detail--inline{ position:relative; flex-wrap:wrap; margin-top:8px; border-color:rgba(60,140,136,.5); background:#FFFDF6; box-shadow:0 6px 16px -12px rgba(28,59,55,.5); padding-right:34px; }
.pbx-detail--inline .pbx-detail__txt{ flex:1 1 130px; }
.pbx-detail__x{ position:absolute; top:5px; right:5px; width:28px; height:28px; border:none; background:none; color:#9a8f76; font-size:18px; line-height:1; cursor:pointer; }
.pbx-detail__x:hover{ color:#D9542B; }
.pbx-detail__add{ font-size:11.5px; padding:9px 16px; flex:none; margin-left:auto; }
/* §mobile_panel_fixes §2: collapse chevron on the open passage header (tap target ≥40px on mobile) */
.pbx-collapse{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; width:40px; height:40px; border:1.5px solid rgba(28,59,55,.2); background:#FFFDF6; color:#5c6f68; border-radius:10px; font-size:19px; line-height:1; cursor:pointer; }
.pbx-collapse:hover{ color:#D9542B; border-color:rgba(217,84,43,.5); background:rgba(217,84,43,.06); }
@media(min-width:560px){ .pbx-collapse{ min-width:34px; min-height:34px; width:34px; height:34px; border-radius:8px; } }
/* §0.2 (spec_paintbox_v2_beginner): undertone chip in the tap-revealed pan detail strip */
.pbx-chip--u{ color:#3f5b66; background:#EEF2F5; border-color:#C2D2DA; }

/* + add a colour: collapsed row + expanded preview panel (browse=preview, Add=confirm) */
.pbx-addrow{ display:flex; align-items:center; gap:9px; width:100%; margin-top:2px; padding:9px 11px; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:700; color:#3C8C88; background:#FFFDF6; border:1.5px dashed rgba(60,140,136,.55); border-radius:8px; cursor:pointer; text-align:left; }
.pbx-addrow:hover{ background:rgba(60,140,136,.06); border-color:#3C8C88; }
.pbx-addrow__plus{ flex:none; width:20px; height:20px; border-radius:50%; background:#3C8C88; color:#FAF4E6; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
.pbx-addpanel{ margin-top:4px; background:#FFFDF6; border:1.5px solid rgba(60,140,136,.45); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; gap:10px; }
.pbx-addpanel__hd{ display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9a8f76; }
.pbx-addpanel__x{ border:none; background:none; color:#9a8f76; font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.pbx-addpanel__foot{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.pbx-addpanel__cancel{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.04em; color:#9a8f76; background:none; border:none; cursor:pointer; }
.pbx-addpanel__add{ font-size:12px; padding:11px 20px; }
.pbx-addpanel__add.is-disabled{ opacity:.45; pointer-events:none; }

/* this-passage well */
.pbx-well{ background:#FBF6EA; border:1px solid rgba(28,59,55,.14); border-radius:11px; padding:11px 13px; }
.pbx-well__hd{ margin:0 0 8px; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9a8f76; }
.pbx-slot{ display:flex; align-items:center; gap:10px; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:8px; padding:6px 8px 6px 9px; margin-bottom:7px; }
.pbx-slot__dot{ flex:none; width:21px; height:21px; border-radius:50%; border:1.5px solid rgba(28,59,55,.2); }
.pbx-slot__nm{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:#1C3B37; line-height:1.15; }
.pbx-slot__nm small{ display:block; font-size:9px; font-weight:700; color:#9a8f76; letter-spacing:.02em; }
/* amount stepper: − [value] +  (value in a plain UI font, NOT Caveat; ≥32px hit targets) */
.pbx-step{ flex:none; display:inline-flex; align-items:center; gap:3px; }
.pbx-step__btn{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',sans-serif; font-size:19px; font-weight:700; line-height:1; color:#3C8C88; background:rgba(60,140,136,.1); border:1.5px solid rgba(60,140,136,.4); border-radius:8px; cursor:pointer; transition:background .15s ease; }
.pbx-step__btn:hover{ background:rgba(60,140,136,.22); }
.pbx-step__btn.is-off{ opacity:.35; pointer-events:none; }
.pbx-step__val{ min-width:30px; text-align:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:14px; color:#1C3B37; }
.pbx-slot__x{ flex:none; border:none; background:none; color:#b6a88c; font-size:17px; line-height:1; cursor:pointer; padding:0 2px; }
.pbx-well__empty{ margin:0 0 8px; font-size:12.5px; color:#9a8f76; font-style:italic; }
.pbx-water{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.pbx-water__lbl{ flex:none; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9a8f76; }
.pbx-water .dil{ flex:1; }
.pbx-water__val{ flex:none; min-width:58px; text-align:right; font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:#3C8C88; }
/* §fixes §4: water relocated into the summary, directly beneath the warm–cool bar. On phones the row is
 * a full-width, ≥40px tap target with a larger thumb so the slider is easy to find and drag. */
.pbx-summary__water{ margin-top:2px; }
@media (max-width:640px){
  .pbx-summary__water{ min-height:40px; padding:4px 0; }
  .pbx-summary__water .dil{ height:8px; }
  .pbx-summary__water .dil::-webkit-slider-thumb{ width:26px; height:26px; }
  .pbx-summary__water .dil::-moz-range-thumb{ width:26px; height:26px; }
}
/* §fixes §2: a kept snapshot applied after a palette switch may hold a tube outside the new tray —
 * flag it (a soft amber left accent) beside the "· not in your tray" note in the slot meta. */
.pbx-slot.is-out{ border-color:#E6C79C; border-left-width:3px; }

/* feedback condensed to icons; the full sentence opens on tap */
.pbx-fbrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pbx-fbrow__lbl{ font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9a8f76; }
.pbx-fbi{ width:22px; height:22px; flex:none; border:none; border-radius:50%; color:#FFFDF6; font-size:12px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(28,59,55,.3); transition:transform .15s ease; }
.pbx-fbi:hover{ transform:translateY(-1px); }
.pbx-fbi.on{ box-shadow:0 0 0 2px #FBF6EA, 0 0 0 4px rgba(28,59,55,.5); }
.pbx-fbopen{ margin-top:2px; }

/* §0.1 (spec_paintbox_v2_beginner): once the composition column is correctly sized (no longer blown
 * out to 387px), the passage slot row (dot · name · undertone · stepper · ×) can't fit on one line at
 * phone width and the name collapses to one letter per line. Let it wrap — name on the first line,
 * undertone chip + amount stepper + × flow underneath. Placed at end-of-file so it wins over the
 * base `.pbx-slot__nm{ flex:1 }` (which resets flex-basis to 0) in source order. */
@media (max-width:640px){
  .pbx-slot{ flex-wrap:wrap; row-gap:7px; }
  .pbx-slot__nm{ flex:1 1 62%; }
}

/* §spec_paintbox_v2_fixes Bug 3: compact sticky preview inside the open mixer, so the water slider
 * and the mix preview are visible together on phone widths. Desktop keeps the full inline summary. */
.pbx-stickyprev{ display:none; }
@media (max-width:640px){
  .pbx-stickyprev{ display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:30;
    background:#FBF6EA; border:1px solid rgba(28,59,55,.14); border-radius:9px; padding:7px 9px; margin-bottom:3px;
    box-shadow:0 6px 12px -8px rgba(28,59,55,.5); }
  .pbx-stickyprev__sw{ flex:none; width:44px; height:44px; border-radius:6px; border:1.5px solid rgba(28,59,55,.2); }
  .pbx-stickyprev__strip{ flex:1; height:44px; }
  .pbx-stickyprev__map{ flex:none; width:52px; height:44px; }
  /* let the last passage controls scroll clear of the fixed "Keep this card" button */
  .comp-grid{ padding-bottom:88px; }
}

/* ===================== §4 read-a-photo ===================== */
.pbx-photoprivacy{ margin:10px 2px 0; font-size:11.5px; line-height:1.5; color:#9a8f76; font-style:italic; }
.pbx-photo{ margin-top:18px; max-width:100%; }
.pbx-photo__hd{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pbx-photo__another{ font-size:11.5px !important; padding:9px 15px !important; }
.pbx-photo__busy{ font-size:14px; color:#3C8C88; font-style:italic; padding:8px 0; }
.pbx-photo__err{ font-size:13px; color:#D9542B; padding:8px 0; }
.pbx-photo__grid2{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
@media (min-width:720px){ .pbx-photo__grid2{ grid-template-columns:minmax(0,300px) 1fr; } }
.pbx-photo__imgcol{ min-width:0; position:relative; }
.pbx-photo__imgwrap{ position:relative; width:100%; border-radius:9px; overflow:hidden; border:2px solid #fff;
  box-shadow:0 10px 22px -14px rgba(28,59,55,.5); background-size:cover; background-position:center; background-color:#EFE4C8; }
.pbx-photo__cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
/* §spec_paintbox_easel_true_colour: the only marks on a cell are the inline role-hue ring + neutral
   selection scrim — no hue fill (not even on hover) is ever painted over the photo's pixels. */
.pbx-photo__cell{ border:0; background:transparent; cursor:pointer; padding:0; transition:box-shadow .12s ease; }
.pbx-photo__taphint{ margin:10px 2px 0; font-size:12.5px; line-height:1.5; color:#5c6f68; }
/* §spec_paintbox_photo_seed_fidelity §3: the discoverability flash under the tap-hint */
.pbx-photo__taphint--flash{ margin-top:6px; font-weight:700; color:#B25330; }
/* role chips — the active one is ringed; assigned ones show their sampled colour */
.pbx-roles{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.pbx-role{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid rgba(28,59,55,.16); background:#FBF6EA;
  border-radius:99px; padding:6px 12px 6px 7px; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size:11.5px;
  font-weight:700; color:#5c6f68; }
.pbx-role.on{ border-color:#D9542B; background:rgba(217,84,43,.07); color:#1C3B37; }
.pbx-role.is-set{ color:#1C3B37; }
.pbx-role__sw{ flex:none; width:15px; height:15px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.25); }
/* §1 undo the guess — a quiet text action, only shown once a cell has been changed */
.pbx-photo__reguess{ margin:6px 2px 0; padding:0; border:0; background:none; cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; font-weight:700; color:#B25330;
  text-decoration:underline; text-underline-offset:2px; }
/* §2 one-line tie between the chips and the whole-photo band */
.pbx-photo__chipshint{ margin:9px 2px 0; font-size:12px; line-height:1.5; color:#5c6f68; }
.pbx-photo__readcol{ min-width:0; }
.pbx-photo__cap{ margin:0 0 9px; font-family:'Newsreader',serif; font-weight:600; font-size:19px; color:#1C3B37; }
/* §A proportional palette bar — flex-grow == the colour's true share; min-width is the ~4% sliver floor. */
.pbx-photobar{ display:flex; width:100%; height:36px; border-radius:8px; overflow:hidden;
  border:1px solid rgba(28,59,55,.2); box-shadow:inset 0 1px 3px rgba(28,59,55,.15); }
.pbx-photobar__band{ height:100%; flex-basis:0; min-width:4%; }
.pbx-photocol{ display:flex; align-items:flex-start; gap:11px; margin-top:11px; }
.pbx-photocol__sw{ flex:none; width:34px; height:34px; border-radius:6px; border:2px solid #fff; box-shadow:0 1px 3px rgba(28,59,55,.22); }
.pbx-photocol__txt{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.pbx-photocol__meta{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9a8f76; }
/* §spec_paintbox_photo_seed_fidelity §2: the appended focal accent row's in-voice tag */
.pbx-photocol__eye{ font-family:'Caveat',cursive; font-weight:700; font-size:14px; color:#D9542B; line-height:1.1; }
.pbx-photocol__recipe{ font-size:13px; color:#1C3B37; line-height:1.35; }
.pbx-photocol__strip{ max-width:220px; height:14px; margin-top:2px; }
.pbx-photo__summary{ display:flex; gap:8px; align-items:flex-start; margin:16px 0 0; border-radius:8px;
  padding:9px 12px; border:1px solid #BCDCC6; background:#EEF6F0; color:#2c6e49; font-size:13px; line-height:1.5; }
.pbx-photo__summary-ic{ flex:none; color:#3C8C88; font-size:14px; line-height:1.3; }
.pbx-photo__start{ margin-top:16px; font-size:12.5px; padding:13px 24px; }

/* §spec_paintbox_photo_colour_point: point-at-a-colour entry, loupe, and picked-colour card */
.pbx-pick-surface{ position:absolute; inset:0; z-index:5; cursor:crosshair; touch-action:none; background:transparent; }
.pbx-loupe{ position:absolute; z-index:7; border-radius:50%; border:3px solid #FFFDF6; pointer-events:none;
  background-repeat:no-repeat; box-shadow:0 6px 18px -4px rgba(28,59,55,.7), 0 0 0 1px rgba(28,59,55,.3); }
.pbx-loupe__ring{ position:absolute; left:50%; top:50%; width:14px; height:14px; transform:translate(-50%,-50%);
  border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(28,59,55,.55); }
.pbx-loupe__sw{ position:absolute; right:-5px; bottom:-5px; width:20px; height:20px; border-radius:50%; border:2px solid #FFFDF6; box-shadow:0 1px 3px rgba(28,59,55,.5); }
.pbx-pick-bar{ display:flex; align-items:center; gap:8px; margin-top:11px; }
.pbx-pick-btn{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid rgba(28,59,55,.16); background:#FBF6EA;
  border-radius:99px; padding:7px 14px 7px 11px; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:700; color:#3C8C88; }
.pbx-pick-btn.on{ border-color:#D9542B; background:rgba(217,84,43,.08); color:#1C3B37; }
.pbx-pick-btn__ic{ font-size:15px; line-height:1; }
.pbx-pick-exit{ flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(28,59,55,.2);
  background:#FFFDF6; color:#5c6f68; font-size:17px; line-height:1; cursor:pointer; }
.pbx-pick-hint{ margin:8px 2px 0; font-size:12.5px; line-height:1.5; font-weight:700; color:#B25330; }
.pbx-pickcard{ margin-top:12px; border:1.5px solid rgba(217,84,43,.35); background:#FFFDF6; border-radius:11px;
  padding:11px 12px; box-shadow:0 10px 24px -16px rgba(28,59,55,.6); }
.pbx-pickcard__top{ display:flex; align-items:center; gap:10px; }
.pbx-pickcard__sw{ flex:none; width:30px; height:30px; border-radius:7px; border:2px solid #fff; box-shadow:0 1px 3px rgba(28,59,55,.3); }
.pbx-pickcard__temp{ flex:1; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9a8f76; }
.pbx-pickcard__x{ flex:none; width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:#9a8f76; font-size:18px; line-height:1; cursor:pointer; }
.pbx-pickcard__recipe{ margin:9px 0 0; font-size:13.5px; color:#1C3B37; line-height:1.4; }
.pbx-pickcard__strip{ height:15px; margin-top:7px; }
.pbx-pickcard__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:11px; }
.pbx-pickcard__apply{ font-size:12.5px; padding:10px 18px; }
.pbx-pickcard__alt{ border:0; background:none; padding:0; cursor:pointer; font-family:'Hanken Grotesk',sans-serif;
  font-size:12.5px; font-weight:700; color:#3C8C88; text-decoration:underline; text-underline-offset:2px; }
/* §spec_paintbox_pick_target_role — escape hatch: "somewhere else instead" → the five role chips.
   Small, secondary; the role pills wrap so they never overflow at 360px. */
.pbx-pickcard__elsewhere{ display:inline-block; margin-top:9px; border:0; background:none; padding:2px 0; cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif; font-size:11.5px; font-weight:700; color:#9a8f76; text-decoration:underline dotted; text-underline-offset:2px; }
.pbx-pickcard__elsewhere:hover{ color:#D9542B; }
.pbx-pickcard__roles{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pbx-pickcard__role{ flex:0 1 auto; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em;
  color:#3C8C88; background:#FFFDF6; border:1px solid rgba(60,140,136,.5); border-radius:99px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.pbx-pickcard__role:hover{ background:rgba(60,140,136,.1); color:#1C3B37; }

/* on the dark lightbox the card floats above the foot line */
.pbx-pickcard--onlight{ width:min(92vw,420px); }
.pbx-pickcard--onlight .pbx-pickcard__role{ background:rgba(255,253,246,.14); border-color:rgba(250,244,230,.4); color:#FAD9C8; }
.pbx-pickcard--onlight .pbx-pickcard__role:hover{ background:rgba(255,253,246,.24); color:#fff; }
.pbx-pickcard--onlight .pbx-pickcard__elsewhere{ color:rgba(250,244,230,.82); }

/* §spec_paintbox_mix_nudges — plain-word nudges under a suggested mix (passage mixer + picked colour).
   Small teal pill buttons that wrap so four of them never overflow at 360px; a "before" chip + reset
   appear once nudged. No numbers — words + swatches only. */
.pbx-nudge{ display:flex; flex-direction:column; gap:7px; }
.pbx-nudge--pick{ margin-top:11px; }
.pbx-nudge__row{ display:flex; flex-wrap:wrap; gap:6px; }
.pbx-nudge__b{ flex:0 1 auto; font-family:'Hanken Grotesk',sans-serif; font-size:10.5px; font-weight:800;
  letter-spacing:.03em; color:#3C8C88; background:#FFFDF6; border:1px solid rgba(60,140,136,.5);
  border-radius:99px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.pbx-nudge__b:hover{ background:rgba(60,140,136,.1); color:#1C3B37; }
.pbx-nudge__before{ display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#9a8f76; }
.pbx-nudge__chip{ flex:none; width:16px; height:16px; border-radius:5px; border:1.5px solid rgba(28,59,55,.25); }
.pbx-nudge__reset{ align-self:flex-start; font-family:'Hanken Grotesk',sans-serif; font-size:10.5px; font-weight:700;
  color:#9a8f76; background:none; border:0; padding:2px 0; cursor:pointer; text-decoration:underline dotted; }
.pbx-nudge__reset:hover{ color:#D9542B; }
/* on the dark lightbox pick card, give the buttons a light face + text */
.pbx-pickcard--onlight .pbx-nudge__b{ background:rgba(255,253,246,.14); border-color:rgba(250,244,230,.4); color:#FAD9C8; }
.pbx-pickcard--onlight .pbx-nudge__b:hover{ background:rgba(255,253,246,.24); color:#fff; }
.pbx-pickcard--onlight .pbx-nudge__before,
.pbx-pickcard--onlight .pbx-nudge__reset{ color:rgba(250,244,230,.82); }

/* §C the photo at the easel (compose view left rail) + lightbox */
.pbx-easel{ background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:11px; padding:10px 10px 11px;
  margin-bottom:14px; box-shadow:0 12px 26px -18px rgba(28,59,55,.5); }
.pbx-easel__bar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pbx-easel__cap{ flex:1; font-family:'Caveat',cursive; font-weight:700; font-size:16px; color:#9a8f76; line-height:1; }
.pbx-easel__collapse{ flex:none; width:26px; height:26px; border:1px solid rgba(28,59,55,.16); background:#FBF6EA;
  border-radius:7px; cursor:pointer; color:#5c6f68; font-size:13px; line-height:1; transition:transform .15s ease; }
.pbx-easel.is-collapsed .pbx-easel__collapse{ transform:rotate(-90deg); }
.pbx-easel__photo{ position:relative; display:block; width:100%; border:0; padding:0; cursor:zoom-in;
  border-radius:8px; overflow:hidden; background-size:cover; background-position:center; background-color:#EFE4C8;
  box-shadow:0 2px 8px -4px rgba(28,59,55,.4); }
.pbx-easel__cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.pbx-easel__cell{ display:block; }
.pbx-easel__hint{ position:absolute; left:0; right:0; bottom:0; padding:5px 6px;
  font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#FAF4E6; text-align:center; background:linear-gradient(to top, rgba(28,59,55,.72), rgba(28,59,55,0)); }
/* §spec_paintbox_part_seed_and_pick_scroll Fix 2: the overlay is its own scroll container so a tall
   photo + controls + picked-colour card can be reached at phone width (the page behind is scroll-locked
   in JS). margin:auto on the stage centres it when it fits AND stays scrollable when it overflows —
   `justify-content:center` would clip the top out of reach. */
.pbx-lightbox{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center;
  padding:24px; background:rgba(20,28,26,.9); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.pbx-lightbox__stage{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; margin:auto; }
.pbx-lightbox__img{ position:relative; width:min(92vw,1024px); height:70vh; max-width:100%; background-size:contain; background-position:center;
  background-repeat:no-repeat; border-radius:6px; }
/* §spec_paintbox_photo_colour_point: tools row + pick hint over the enlarged photo */
.pbx-lightbox__tools{ display:flex; align-items:center; gap:10px; }
.pbx-lightbox__close{ flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(250,244,230,.4);
  background:rgba(255,253,246,.12); color:#FAF4E6; font-size:19px; line-height:1; cursor:pointer; }
.pbx-lightbox__pickhint{ margin:0; font-size:12.5px; font-weight:700; color:#FAD9C8; text-align:center; }
.pbx-lightbox__foot{ margin:0; font-size:12.5px; color:rgba(250,244,230,.85); font-style:italic; text-align:center; }
@media (max-width:640px){
  /* §C at narrow widths the easel sits above the composition (single-column grid) and may be collapsed */
  .pbx-easel.is-collapsed .pbx-easel__photo{ display:none; }
  .pbx-easel{ margin-bottom:10px; }
}