/* DreamBuilder LIVE — Mini Vision Board
   Session 1: the board screen, empty state, no interaction.
   Every value here traces to docs/design-tokens.md or the two comps in reference/. */

/* ---------- Tokens ---------- */
:root{
  --db-navy:#030648;
  --db-rule:#4775FE;
  --db-gold:#FBBF33;
  --db-panel-1:#8D5826;
  --db-panel-2:#FAC74D;
  --db-panel-3:#8E5B27;
  --db-plate-fill:rgba(255,234,183,.2);
  --db-plate-line:rgba(255,237,159,.6);
  --db-label-ink:#05173A;

  /* Overlay UI — design-tokens.md § Overlay UI. Proposed system, not yet signed off by Judi. */
  --ui-surface:#FFFFFF;
  --ui-surface-2:#F7F8FC;
  --ui-field:#F5F7FB;
  --ui-line:#E1E5EF;
  --ui-ink:#151A26;
  --ui-ink-2:#4A5470;
  --ui-muted:#7C859E;
  --ui-primary:#0B2E7A;
  --ui-primary-hover:#082560;
  --ui-disabled-bg:#D5DAE6;
  --ui-disabled-fg:#98A1B8;
  --ui-danger:#C2321F;
  --ui-limit:#C2321F;     /* the "5 of 5" counter at the limit. Means "you're full", not "error" */

  --font-board:"Roboto Condensed", "Arial Narrow", sans-serif;
  --font-ui:"Roboto", "Helvetica Neue", Arial, sans-serif;

  /* The panel is the only thing that needs a width; everything inside derives from it.
     349px on the phone comp (430 wide), 804px on the desktop comp (1920 wide). */
  --board-w: min(100%, max(420px, min(42vw, 804px)));
  --side-pad: 20px;
}
@media (min-width: 900px){
  :root{ --side-pad: 40px; }
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--db-navy);
  color:#fff;
  font-family:var(--font-board);
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
p{ margin:0; }

/* ---------- Stage: everything that sits on the photographic background ---------- */
.stage{
  /* The background is a photographic JPG, not a gradient. Anchored to the bottom so the
     stage lights stay just above the blue rule no matter how tall the content is. */
  background:url("/art/DBLV-Background-Image-Mobile.jpg") center bottom / cover no-repeat;
  padding:clamp(22px, 3vw, 44px) var(--side-pad) 0;
}
@media (min-width: 900px){
  .stage{ background-image:url("/art/DBL-Background-Desktop.jpg"); }
}
.stage__inner{
  width:100%;
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Phone order: lockup, board, instructions, wordmark.
   Desktop order: lockup, instructions, board, wordmark. Same markup, CSS order only. */
.lockup{ order:1; }
.panel{ order:2; }
.instructions{ order:3; }
.wordmark{ order:4; }
@media (min-width: 900px){
  .instructions{ order:2; }
  .panel{ order:3; }
}

/* ---------- Headline lockup ---------- */
.lockup{ display:flex; flex-direction:column; align-items:center; }
.lockup__l1{
  font-weight:400;
  font-size:clamp(26px, 2.4vw, 46px);
  line-height:1.05;
}
.lockup__l2{
  margin:0;
  color:var(--db-gold);
  font-weight:800;
  font-size:clamp(29px, 4vw, 77px);
  line-height:1;
  letter-spacing:-.012em;
}
.lockup__l3{
  margin-top:clamp(2px, .4vw, 8px);
  width:min(100%, clamp(320px, 30vw, 585px));
  height:auto;
}

/* ---------- Gold panel + four plates ---------- */
.panel{
  width:var(--board-w);
  aspect-ratio:1;
  margin-top:clamp(26px, 2.2vw, 40px);
  padding:2%;
  gap:3.3%;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:15px;                       /* fixed px, not a percentage — rx="15" in gold-panel.svg */
  background:linear-gradient(135deg, var(--db-panel-1) 0%, var(--db-panel-2) 50%, var(--db-panel-3) 100%);
}
@media (min-width: 900px){
  .panel{ margin-top:clamp(26px, 2.4vw, 46px); }
}

.quadrant{
  container-type:inline-size;               /* lets children size in cqw, i.e. % of the plate */
  aspect-ratio:1;
  margin:0;
  padding:0;
  border-radius:10px;                       /* fixed px — rx="9.9" in TransparencyOverlay.svg */
  background:var(--db-plate-fill);
  border:1px dashed var(--db-plate-line);   /* dashed = empty. Goes solid once it holds an image */
  color:var(--db-label-ink);
  font:inherit;
  text-align:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.quadrant:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* Proportions from design-tokens.md § The empty quadrant, all as % of the plate */
.quadrant__icon{
  margin-top:15cqw;
  height:30.5cqw;
  width:auto;
}
.quadrant__plus{
  margin-top:7.5cqw;
  width:11cqw;
  aspect-ratio:1;
  background:
    linear-gradient(#fff,#fff) center / 100% 25% no-repeat,   /* horizontal arm */
    linear-gradient(#fff,#fff) center / 25% 100% no-repeat;   /* vertical arm   */
}
.quadrant__label{
  margin-top:9cqw;
  font-weight:800;
  font-size:9cqw;
  line-height:.95;
  text-transform:uppercase;
}

/* ---------- Instruction block ---------- */
.instructions{
  margin-top:clamp(22px, 2.2vw, 40px);
  max-width:760px;
  font-style:italic;
  line-height:1.45;
}
@media (min-width: 900px){
  .instructions{ margin-top:clamp(18px, 1.6vw, 30px); }
}
.instructions__l1{
  color:var(--db-gold);
  font-weight:700;
  font-size:clamp(14.5px, 1.05vw, 18px);
}
.instructions__l1 strong{ font-weight:800; }
.instructions__l2{
  margin-top:.35em;
  color:#fff;
  font-weight:700;
  font-size:clamp(13.5px, 1vw, 17px);
  text-transform:uppercase;
}
.instructions__l3{
  margin-top:.35em;
  color:rgba(255,255,255,.85);
  font-weight:400;
  font-size:clamp(13.5px, .95vw, 16px);
}

/* ---------- Wordmark ---------- */
.wordmark{
  margin-top:clamp(28px, 2.4vw, 44px);
  margin-bottom:clamp(40px, 5vw, 96px);    /* room for the stage lights beneath it */
  width:clamp(190px, 19vw, 370px);
  height:auto;
}

/* ---------- Rule + footer ---------- */
.rule{
  height:clamp(14px, 1.2vw, 24px);
  background:var(--db-rule);
}
.footer{
  background:var(--db-navy);
  padding:clamp(30px, 3vw, 52px) var(--side-pad) clamp(36px, 3vw, 56px);
  text-align:center;
  font-family:var(--font-ui);
  color:#B9C3E6;
}
.footer__lockup{
  width:clamp(230px, 17vw, 330px);
  height:auto;
  margin:0 auto;
}
.footer__links{
  margin-top:clamp(22px, 2vw, 34px);
  font-size:clamp(12px, .7vw, 13px);
}
.footer__links a{
  color:#E8C36A;
  text-decoration:none;
}
.footer__links a:hover,
.footer__links a:focus-visible{ text-decoration:underline; }
.footer__sep{ margin:0 .8em; color:#8A95C0; }
.footer__legal{
  margin-top:.6em;
  font-size:clamp(11.5px, .65vw, 13px);
  line-height:1.5;
}
.footer__links + .footer__legal{ margin-top:clamp(18px, 1.6vw, 28px); }
/* Address: two stacked lines on phone (as the phone comp shows), one line with a dot on desktop */
.footer__addr{ display:block; white-space:nowrap; }
.footer__dot{ display:none; }
@media (min-width: 900px){
  .footer__addr{ display:inline; }
  .footer__dot{ display:inline; }
}

/* ---------- Filled quadrant ---------- */
.quadrant.is-filled{ border-style:solid; }        /* dashed = empty, solid = holds an image. One property. */
.quadrant__slides{ position:absolute; inset:0; }
.quadrant__slide{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-color:#1A1F2B;
  opacity:0;
  transition:opacity 800ms ease;               /* design-tokens.md § Motion */
}
.quadrant__slide.is-on{ opacity:1; }
.quadrant__scrim{
  position:absolute; left:0; right:0; bottom:0;
  padding:16cqw 5cqw 7cqw;
  background:linear-gradient(to top, rgba(5,23,58,.88) 0%, rgba(5,23,58,.55) 55%, rgba(5,23,58,0) 100%);
  display:flex; justify-content:center;
}
.quadrant__label--filled{ margin-top:0; color:#fff; font-size:7.5cqw; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.quadrant__badge,
.quadrant__count{
  position:absolute; top:5cqw;
  height:13cqw; min-width:13cqw;
  border-radius:7cqw;
  background:rgba(5,23,58,.62);
  color:#fff;
  display:grid; place-items:center;
  backdrop-filter:blur(4px);
}
.quadrant__badge{ left:5cqw; width:13cqw; }
.quadrant__badge svg{ width:55%; height:55%; }
.quadrant__count{ right:5cqw; padding:0 4.5cqw; font:700 6.5cqw/1 var(--font-ui); font-variant-numeric:tabular-nums; }

/* ---------- Overlay shell ---------- */
body.has-overlay{ overflow:hidden; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.ov{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
}
.ov__scrim{ position:absolute; inset:0; background:rgba(3,6,72,.6); opacity:0; transition:opacity 220ms ease; }
.ov.is-open .ov__scrim{ opacity:1; }
.ov__panel{
  position:relative;
  width:100%;
  height:100vh; height:100dvh;                 /* iOS Safari: dvh so the toolbar never crops it */
  background:var(--ui-surface);
  color:var(--ui-ink);
  font-family:var(--font-ui);
  display:flex; flex-direction:column;
  border-radius:22px 22px 0 0;
  transform:translateY(100%);
  transition:transform 300ms cubic-bezier(.2,.9,.3,1);
  outline:none; overflow:hidden;
}
.ov.is-open .ov__panel{ transform:translateY(0); }
@media (min-width: 900px){
  .ov{ align-items:center; }
  .ov__panel{
    width:660px; height:490px;
    max-width:calc(100vw - 48px); max-height:calc(100dvh - 48px);
    border-radius:16px;
    transform:scale(.96); opacity:0;
    transition:transform 220ms ease, opacity 220ms ease;
    box-shadow:0 24px 64px -16px rgba(0,0,0,.5);
  }
  .ov.is-open .ov__panel{ transform:none; opacity:1; }
}

/* ---------- Shared overlay pieces ---------- */
.iconbtn{
  flex:none; width:44px; height:44px;
  border:0; background:transparent; border-radius:9px;
  display:grid; place-items:center;
  color:var(--ui-ink); cursor:pointer;
}
.iconbtn svg{ width:24px; height:24px; }
.iconbtn:hover{ background:var(--ui-surface-2); }
.btn{
  height:44px; padding:0 18px;
  border-radius:9px; border:0;
  font:700 14px/1 var(--font-ui);
  cursor:pointer; white-space:nowrap;
}
.btn--primary{ background:var(--ui-primary); color:#fff; }
.btn--primary:hover{ background:var(--ui-primary-hover); }
.btn--primary:disabled{ background:var(--ui-disabled-bg); color:var(--ui-disabled-fg); cursor:default; }
.btn--ghost{ background:transparent; color:var(--ui-ink-2); }
.btn--ghost:hover{ background:var(--ui-surface-2); }
:is(.btn,.iconbtn,.chip,.tile):focus-visible{ outline:3px solid var(--ui-primary); outline-offset:2px; }
.spinner{
  width:30px; height:30px;
  border:3px solid var(--ui-line); border-top-color:var(--ui-primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Screen 2: Library ---------- */
.lib__head,
.pos__head{ display:flex; align-items:center; gap:6px; padding:12px 12px 8px; }
.lib__titles{ min-width:0; }
.lib__title{ margin:0; font:700 15.5px/1.2 var(--font-ui); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib__sub{ margin:2px 0 0; font-size:11px; color:var(--ui-muted); font-variant-numeric:tabular-nums; }
.lib__filters{ padding:0 16px 10px; display:flex; flex-direction:column; gap:8px; }
.lib__search{
  width:100%; height:40px;
  border:1px solid var(--ui-line); border-radius:9px;
  background:var(--ui-field); color:var(--ui-ink);
  padding:0 12px; font:400 14px var(--font-ui);
  -webkit-appearance:none; appearance:none;
}
.lib__search:focus{ outline:2px solid var(--ui-primary); outline-offset:0; }
.lib__chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.lib__chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:32px; padding:0 13px;
  border-radius:16px; border:1px solid var(--ui-line);
  background:var(--ui-surface); color:var(--ui-ink-2);
  font:500 13px/1 var(--font-ui); cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--ui-primary); border-color:var(--ui-primary); color:#fff; }
.lib__body{ flex:1; min-height:0; overflow-y:auto; background:var(--ui-surface-2); padding:12px 16px 16px; }
.lib__placed{
  margin-bottom:12px; padding:8px 10px 9px;
  background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:11px;
}
.lib__stripcount{ margin:0 0 8px; font:700 14px/1.3 var(--font-ui); color:var(--ui-primary); font-variant-numeric:tabular-nums; }
.lib__stripcount.is-limit{ color:var(--ui-limit); }
.lib__placedlabel{ display:block; margin-bottom:6px; font:700 10.5px/1 var(--font-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--ui-muted); }
.lib__placedrow{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.lib__placedrow::-webkit-scrollbar{ display:none; }
.pthumb{
  position:relative; flex:none; width:72px; aspect-ratio:1;
  border-radius:8px; overflow:hidden;
  background-color:#1A1F2B; background-repeat:no-repeat;
}
.pthumb__check{
  position:absolute; left:4px; bottom:4px;
  width:20px; height:20px; border-radius:50%;
  background:var(--ui-primary); color:#fff;
  font:700 12px/20px var(--font-ui); text-align:center;
}
.pthumb__x{
  position:absolute; top:0; right:0;
  width:44px; height:44px;                  /* full-size target; the visible circle is smaller */
  border:0; background:transparent; padding:0; cursor:pointer;
  display:grid; place-items:start end; color:#fff;
}
.pthumb__x span{ width:24px; height:24px; margin:3px 3px 0 0; border-radius:50%; background:rgba(5,23,58,.85); display:grid; place-items:center; }
.pthumb__x svg{ width:12px; height:12px; }
.pthumb__x:hover span,
.pthumb__x:focus-visible span{ background:var(--ui-danger); }
.pthumb__x:focus-visible{ outline:none; }
.pthumb--pending{ box-shadow:inset 0 0 0 2px var(--ui-surface), inset 0 0 0 4px var(--ui-primary); opacity:.9; }
.pthumb--pending::before{ content:''; position:absolute; inset:0; border:2px dashed var(--ui-primary); border-radius:8px; }
.pthumb--pending .pthumb__check{ background:var(--ui-surface); color:var(--ui-primary); box-shadow:0 0 0 1.5px var(--ui-primary); }
.tile.is-placed:disabled{ opacity:.75; }
.tile.is-placed .tile__check{ opacity:1; transform:none; background:var(--ui-primary); color:#fff; }
.lib__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 900px){ .lib__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.tile{
  position:relative; display:block; width:100%;
  aspect-ratio:1; border-radius:11px; overflow:hidden;
  border:0; padding:0; margin:0;
  background:#DDE2EE; color:inherit; font:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity 140ms ease, box-shadow 140ms ease;
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 9px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color:#fff; font:600 11px/1.25 var(--font-ui); text-align:left;
}
@media (min-width: 900px){ .tile__cap{ font-size:11px; } }
.tile__check{
  position:absolute; top:7px; right:7px;
  width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--ui-primary);
  display:grid; place-items:center; font:700 15px/1 var(--font-ui);
  opacity:0; transform:scale(.6); transition:opacity 140ms ease, transform 140ms ease;
}
.tile[aria-pressed="true"]{ box-shadow:inset 0 0 0 3px var(--ui-primary); }
.tile[aria-pressed="true"] .tile__check{ opacity:1; transform:none; }
.tile:disabled{ opacity:.35; cursor:default; }
.tile--upload{
  background:var(--ui-surface);
  border:2px dashed var(--ui-primary); color:var(--ui-primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.tile--upload:disabled{ opacity:.45; }
.tile--upload.is-busy{ opacity:1; }
.tile__plus{ font:400 36px/1 var(--font-board); }
.tile__t1{ font:700 13px/1.2 var(--font-ui); }
.tile__t2{ font:400 10.5px/1.2 var(--font-ui); color:var(--ui-muted); }
.tile--skeleton{ animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }
.lib__notice{ text-align:center; padding:28px 12px 8px; color:var(--ui-ink-2); font-size:14px; line-height:1.45; }
.lib__notice p{ margin:0 0 14px; }
.lib__foot{ padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--ui-line); background:var(--ui-surface); }
.lib__error{ margin:0 0 8px; color:var(--ui-danger); font-size:13px; line-height:1.4; }
.lib__footrow{ display:flex; align-items:center; gap:6px; }
.lib__count{ flex:1; min-width:0; font-size:11.5px; line-height:1.3; color:var(--ui-muted); font-variant-numeric:tabular-nums; }

/* ---------- Screen 3: Position ---------- */
.ov--position .ov__panel{ background:var(--ui-surface); }
.pos__stage{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#0D1220; padding:12px;
  --mask-max:62dvh;
}
@media (min-width: 900px){ .pos__stage{ --mask-max:330px; } }
.pos__mask{
  position:relative;
  width:min(100%, var(--mask-max)); aspect-ratio:1;
  overflow:hidden; border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
  outline:none;
}
.pos__mask:focus-visible{ box-shadow:0 0 0 3px #fff; }
.pos__img{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-color:#1A1F2B;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.pos__img:active{ cursor:grabbing; }
.pos__grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) calc(100% / 3) 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) calc(200% / 3) 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) 0 calc(100% / 3) / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) 0 calc(200% / 3) / 100% 1px no-repeat;
}
.pos__ctl{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ui-line);
}
.pos__zoomlabel{ font:700 11px/1 var(--font-ui); letter-spacing:.08em; color:var(--ui-muted); }
.pos__zoom{ flex:1; min-width:0; accent-color:var(--ui-primary); }

/* ---------- Screen 4: Manage ---------- */
.ov--manage .ov__panel{ height:auto; max-height:calc(100dvh - 24px); }
@media (min-width: 900px){
  .ov--manage .ov__panel{ width:660px; height:auto; }
}
.mg__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 20px 8px; }
.mg__title{ margin:0; font:700 15.5px/1.2 var(--font-ui); letter-spacing:-.01em; }
.mg__count{ flex:none; font-size:11.5px; color:var(--ui-muted); font-variant-numeric:tabular-nums; }
.mg__strip{
  display:flex; gap:12px;
  overflow-x:auto; padding:8px 20px 6px;
  scroll-snap-type:x proximity; scroll-padding:20px;
  scrollbar-width:thin;
}
.frame{ flex:none; width:128px; scroll-snap-align:start; }
.frame__img{
  position:relative; width:128px; aspect-ratio:1;
  border-radius:11px; overflow:hidden;
  background-color:#1A1F2B; background-repeat:no-repeat;
}
.frame__num{
  position:absolute; top:6px; left:6px;
  min-width:24px; height:24px; padding:0 7px;
  border-radius:12px; background:rgba(5,23,58,.85); color:#fff;
  font:700 12px/24px var(--font-ui); text-align:center; font-variant-numeric:tabular-nums;
}
.frame__x{
  position:absolute; top:0; right:0;
  width:44px; height:44px;
  border:0; background:transparent; padding:0; cursor:pointer;
  display:grid; place-items:center; color:#fff;
}
.frame__x span{ width:26px; height:26px; border-radius:50%; background:rgba(5,23,58,.85); display:grid; place-items:center; }
.frame__x svg{ width:13px; height:13px; }
.frame__x:hover span,
.frame__x:focus-visible span{ background:var(--ui-danger); }
.frame__x:focus-visible{ outline:none; }
.frame__arrows{ display:flex; justify-content:center; gap:6px; margin-top:6px; }
.frame__arrows button{
  width:44px; height:40px;
  border:1px solid var(--ui-line); border-radius:9px;
  background:var(--ui-surface); color:var(--ui-ink);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.frame__arrows svg{ width:18px; height:18px; }
.frame__arrows button:hover{ background:var(--ui-surface-2); }
.frame__arrows button:disabled{ color:var(--ui-disabled-fg); background:var(--ui-surface-2); cursor:default; }
.frame__arrows button:focus-visible{ outline:3px solid var(--ui-primary); outline-offset:2px; }
.frame--add{
  width:128px; aspect-ratio:1; align-self:flex-start;
  border-radius:11px; border:2px dashed var(--ui-primary);
  background:var(--ui-surface); color:var(--ui-primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font:700 13px/1.2 var(--font-ui); cursor:pointer; padding:0;
}
.frame--add .tile__plus{ font-size:32px; }
.frame--add:disabled{ opacity:.4; cursor:default; }
.frame--add:focus-visible{ outline:3px solid var(--ui-primary); outline-offset:2px; }
.mg__fade{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 20px 4px;
  font:500 13px/1.3 var(--font-ui); color:var(--ui-ink-2);
}
.seg{ display:inline-flex; border:1px solid var(--ui-line); border-radius:9px; overflow:hidden; }
.seg button{
  min-width:56px; height:40px;
  border:0; background:var(--ui-surface); color:var(--ui-ink-2);
  font:600 13px/1 var(--font-ui); cursor:pointer; font-variant-numeric:tabular-nums;
}
.seg button + button{ border-left:1px solid var(--ui-line); }
.seg button[aria-pressed="true"]{ background:var(--ui-primary); color:#fff; }
.seg button:focus-visible{ outline:3px solid var(--ui-primary); outline-offset:-3px; }
.mg__foot{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:10px; padding:12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ui-line);
}

/* ---------- Confirm card ---------- */
.ov--confirm{ align-items:center; padding:20px; }
.ov--confirm .ov__panel{
  width:min(100%, 360px); height:auto;
  border-radius:16px;
  transform:scale(.96); opacity:0;
  transition:transform 220ms ease, opacity 220ms ease;
  box-shadow:0 24px 64px -16px rgba(0,0,0,.5);
}
.ov--confirm.is-open .ov__panel{ transform:none; opacity:1; }
.confirm{ padding:22px 20px 18px; }
.confirm__title{ margin:0 0 8px; font:700 17px/1.25 var(--font-ui); letter-spacing:-.01em; }
.confirm__body{ margin:0 0 18px; font:400 14px/1.45 var(--font-ui); color:var(--ui-ink-2); }
.confirm__row{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- Screen 5: Completion ---------- */
/* The gold sweep: a soft band of light crosses the whole panel once, and each plate glows. */
.panel{ position:relative; }
.panel::after{
  content:''; position:absolute; inset:-25%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,241,190,.9) 50%, transparent 62%);
  transform:translateX(-120%); opacity:0; pointer-events:none;
  border-radius:inherit;
}
.panel.is-celebrating::after{ animation:sweep 1200ms ease-out forwards; }
.panel.is-celebrating .quadrant{ animation:plateglow 1200ms ease-out; }
@keyframes sweep{
  0%{ opacity:1; transform:translateX(-120%); }
  100%{ opacity:0; transform:translateX(120%); }
}
@keyframes plateglow{
  0%{ box-shadow:0 0 0 0 rgba(251,191,51,0); }
  35%{ box-shadow:0 0 0 3px #FBBF33, 0 0 32px 8px rgba(251,191,51,.85); }
  100%{ box-shadow:0 0 0 0 rgba(251,191,51,0); }
}

.ov--complete{ align-items:center; padding:0; }
.ov--complete .ov__scrim{ background:rgba(3,6,72,.94); }
.ov--complete .ov__panel{
  width:100%; max-width:none; height:100vh; height:100dvh; max-height:none;
  border-radius:0; background:transparent; box-shadow:none;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:24px var(--side-pad);
  overflow-y:auto;
  transform:none; opacity:0;
  transition:opacity 420ms ease;
}
.ov--complete.is-open .ov__panel{ transform:none; opacity:1; }
.complete{ max-width:440px; text-align:center; font-family:var(--font-ui); }
.complete__title{
  margin:0 0 18px;
  font:800 clamp(30px, 7vw, 44px)/1.05 var(--font-board);
  color:var(--db-gold); letter-spacing:-.012em;
}
.complete p{ margin:0 0 14px; font:400 16px/1.55 var(--font-ui); color:rgba(255,255,255,.92); }
.complete strong{ font-weight:700; color:#fff; }
.complete__back{
  margin-top:16px; height:48px; padding:0 26px;
  background:var(--db-gold); color:#05173A; font-size:15px;
}
.complete__back:hover{ background:#FAC74D; }
.complete__back:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------- Save banner ---------- */
.banner{
  position:fixed; left:0; right:0; top:0; z-index:150;
  padding:10px var(--side-pad);
  background:#05173A; color:var(--db-gold);
  font:600 13.5px/1.35 var(--font-ui); text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ---------- Toasts ---------- */
#toast-root{
  position:fixed; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; z-index:200;
}
.toast{
  background:rgba(5,23,58,.94); color:#fff;
  font:500 14px/1.3 var(--font-ui);
  padding:10px 16px; border-radius:9px;
  max-width:min(90vw, 420px); text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity 200ms ease, transform 200ms ease;
}
.toast.is-on{ opacity:1; transform:none; }
/* While a sheet is open on phone, lift toasts clear of its footer buttons */
@media (max-width: 899px){
  body.has-overlay #toast-root{ bottom:calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .quadrant__slide{ opacity:0; }
  .quadrant__slide.is-on{ opacity:1; }
}