/* JEJAKI order app MOCKUP v3 (2026-10-21; from v2) - Option A "Workshop Stage" (BRAND, 2026-10-20); Step 1 changes 2026-10-21. */
@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #12100E;        /* Charcoal Black */
  --card: #1C1A17;      /* derived card tint (approved) */
  --cream: #F4F1EA;     /* Warm Cream */
  --grey: #A9A29B;      /* Warm Grey */
  --red: #B33A2B;       /* Brick Red: the one accent */
  --gold: #D4A24C;      /* Warm Gold: STEP labels only */
  --hair: rgba(169, 162, 155, 0.25);
  --err: #E8A598;       /* error text: light brick tint for contrast on charcoal */
  --cut: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--cream); }
body { font: 400 15px/1.45 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
.sr { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- shell ---------- */
.app {
  height: 100dvh; display: grid; max-width: 1200px; margin: 0 auto;
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "stage" "rail" "foot";
}
.top { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.logo { display: block; height: 20px; width: auto; max-width: 52vw; } /* NEW logo (Zaki 2026-10-21, decision 168): web copy of brand-assets/identity/logo/jejaki-logo-2026-10-21-transparent.png; brand to decide site-wide use */
.mock-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--hair); padding: 3px 6px; }
.demo-banner { position: fixed; top: 48px; left: 0; right: 0; z-index: 5; background: var(--cream); color: var(--bg); font-size: 11px; font-weight: 600; padding: 4px 12px; text-align: center; line-height: 1.3; }
@media (min-width: 1024px) { .demo-banner { top: 56px; } }

/* ---------- stage ---------- */
.stage { grid-area: stage; position: relative; height: clamp(170px, 31dvh, 330px); max-height: 40dvh; border-bottom: 1px solid var(--hair);
  background: radial-gradient(120% 90% at 28% 10%, rgba(244,241,234,0.06), rgba(244,241,234,0) 60%); }
.stage canvas { position: absolute; inset: 0 0 34px 0; width: 100%; height: calc(100% - 34px); touch-action: pan-y; cursor: grab; }
.stage-cap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.stage-name { font-family: Anton, sans-serif; font-size: 16px; letter-spacing: .06em; }
.stage-sub { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.stage-hint { position: absolute; top: 8px; right: 12px; font-size: 11px; color: var(--grey); }
.rm-arrows { display: none; }
html.rm .rm-arrows { display: flex; position: absolute; inset: 0 0 34px 0; justify-content: space-between; align-items: center; padding: 0 6px; pointer-events: none; }
html.rm .stage-hint { display: none; }
.arrow { pointer-events: auto; width: 44px; height: 44px; background: var(--card); border: 1px solid var(--hair); display: grid; place-items: center; cursor: pointer; }
.arrow svg { width: 16px; height: 16px; }

/* ---------- rail (step pages) ---------- */
.rail { grid-area: rail; position: relative; overflow: hidden; }
#pages { position: absolute; inset: 0; }
.foot-inner .badge { grid-column: 1; grid-row: 1; }
.foot-inner .actions { grid-column: 3; grid-row: 1; }
.foot-inner nav { grid-column: 2; grid-row: 1; }
.foot-inner .price-sub { grid-column: 1 / 3; grid-row: 2; }
.t-page { overflow-y: auto; padding: 16px 16px 28px; overscroll-behavior: contain; }
.eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 2px; font-weight: 600; }
.title { font-family: Anton, sans-serif; font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: .02em; margin: 0 0 14px; text-transform: uppercase; }
.group { margin: 0 0 20px; }
.glabel { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.note { font-size: 13px; color: var(--grey); margin: 6px 0 0; }
.row { display: grid; gap: 8px; }
.row.c3 { grid-template-columns: repeat(3, minmax(96px, 1fr)); }
.row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--hair); padding: 8px 10px; margin: 0 0 16px; font-size: 13px; }
.linkbtn { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }

/* ---------- cards: one angled corner, flat fill, 1px hairline ---------- */
.card {
  --edge: var(--hair); --bw: 1px;
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 10px 10px 10px; text-align: left; background: none; border: 0; cursor: pointer;
}
.card::before, .card::after { content: ""; position: absolute; z-index: -1; }
.card::before { inset: 0; background: var(--edge);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.card::after { inset: var(--bw); background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut) + var(--bw) * 0.414) 0, 100% calc(var(--cut) - var(--bw) * 0.414), 100% 100%, 0 100%); }

@media (hover: hover) {
  .card:not([aria-disabled="true"]):not([aria-checked="true"]):hover { --edge: rgba(244,241,234,0.7); }
  .card:not([aria-disabled="true"]):hover .art { transform: translateY(-2px); }
}
.card[aria-checked="true"] { --edge: var(--red); --bw: 2px; }
.card.txt { padding-top: 26px; }
.card .tick { display: none; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: var(--red); place-items: center; }
.card[aria-checked="true"] .tick { display: grid; }
.card .tick svg { width: 12px; height: 12px; }
.cname { font-family: Anton, sans-serif; font-size: 22px; line-height: 1.05; letter-spacing: .03em; }
.cname.sm { font-size: 17px; }
.csub { font-size: 12px; color: var(--grey); line-height: 1.3; }
.cname-wrap { position: relative; display: inline-block; }
.card[aria-checked="true"] .cname-wrap::before { /* the one allowed flourish: a red slash behind the selected name */
  content: ""; position: absolute; left: -4px; right: -6px; bottom: 3px; height: 6px; background: var(--red); transform: skewX(-24deg); z-index: -1; opacity: .9; }
.art { width: 100%; margin: 0 0 6px; transition: transform 120ms var(--ease-out); }
.art svg { width: 100%; height: 56px; display: block; }
.thumb { width: 100%; aspect-ratio: 360 / 196; object-fit: cover; display: block; margin: 0 0 6px; }
.thumb-blank { width: 100%; aspect-ratio: 360 / 196; margin: 0 0 6px; background: repeating-linear-gradient(135deg, #191714 0 8px, #1f1d1a 8px 16px); }

/* dimmed (unbuilt): decision 126 - visible, hoverable, never selectable, no price, no date */
.card[aria-disabled="true"] { --edge: rgba(169,162,155,0.16); cursor: default; }
.card[aria-disabled="true"] .art, .card[aria-disabled="true"] .thumb, .card[aria-disabled="true"] .thumb-blank, .card[aria-disabled="true"] .face { opacity: .4; }
.card[aria-disabled="true"] .cname { color: var(--grey); }
.coming-tag { position: absolute; top: 6px; right: 14px; font-size: 10px; letter-spacing: .18em; font-weight: 700; background: var(--cream); color: var(--bg); padding: 2px 6px;
  opacity: 0; transition: opacity var(--duration-quick) var(--ease-out); pointer-events: none; }
.card.show-coming .coming-tag { opacity: 1; }
@media (hover: hover) { .card[aria-disabled="true"]:hover .coming-tag { opacity: 1; } }
.card[aria-disabled="true"]:focus-visible .coming-tag { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .coming-tag, .card, .art { transition: none !important; } }

/* character tiles: the only rounded element (faces) */
.card.char { align-items: center; padding: 8px 6px 8px; }
.card.char::before, .card.char::after { clip-path: none; border-radius: 10px; }
.card.char::after { border-radius: 9px; }
.face { width: 100%; max-width: 72px; aspect-ratio: 1; display: block; }
.ph-label { font-size: 9px; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }

/* text inputs */
.field { margin: 0 0 12px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.field .hint { display: block; font-size: 12px; color: var(--grey); margin: 0 0 6px; font-weight: 400; }
.inwrap { display: flex; align-items: center; background: var(--card); border: 1px solid var(--hair); }
.inwrap:focus-within { border-color: var(--cream); }
.inwrap input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; background: transparent; border: 0; outline: none; font-size: 16px; }
.inwrap .unit, .inwrap .count { padding: 0 10px; font-size: 12px; color: var(--grey); white-space: nowrap; }
.field.bad .inwrap { border-color: var(--err); }
.field .msg { display: none; font-size: 12px; color: var(--err); margin: 4px 0 0; }
.field.bad .msg { display: block; }
/* quantity stepper (Step 1): big touch targets, 52 px; no motion */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--hair); background: var(--card); margin: 4px 0 6px; }
.qbtn { width: 56px; height: 52px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.qbtn svg { width: 18px; height: 18px; }
.qbtn:disabled { opacity: .35; cursor: default; }
.qbtn:focus-visible, .qin:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.qin { width: 64px; height: 52px; text-align: center; font-size: 20px; font-weight: 600; background: transparent; border: 0;
  border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); color: var(--cream); outline: none; padding: 0; }
.hexprev { display: block; width: 100%; max-width: 260px; margin: 4px auto 12px; }

/* step 3 */
.list { margin: 0 0 16px; padding: 0; list-style: none; }
.list li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--hair); position: relative; font-size: 14px; }
.list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; background: var(--grey); }
.panel { background: var(--card); border: 1px solid var(--hair); padding: 12px; margin: 0 0 14px; font-size: 14px; }
.panel strong { font-weight: 600; }
.notsent { font-size: 13px; color: var(--grey); }

/* ---------- footer: price badge + action + step bar ---------- */
.foot { grid-area: foot; border-top: 1px solid var(--hair); background: var(--bg); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.foot-row { display: flex; align-items: center; gap: 10px; }
.badge { position: relative; isolation: isolate; padding: 4px 18px 5px 10px; min-width: 0; flex: 0 1 auto; }
.badge::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.badge-k { font-size: 10px; letter-spacing: .18em; color: var(--grey); font-weight: 600; }
.badge-line { display: flex; align-items: center; gap: 8px; }
.badge-n { font-family: Anton, sans-serif; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.badge-s { font-size: 11px; line-height: 1.2; color: var(--grey); }
.badge-note { font-size: 11px; line-height: 1.2; color: var(--cream); }
.badge-note:empty { display: none; }
.actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.back { min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 1px solid var(--hair); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.back svg { width: 14px; height: 14px; }
.back[hidden] { display: none; }
.back-t { display: none; }
.price-sub { margin: 4px 0 0; font-size: 11px; color: var(--grey); }
#priceNote { color: var(--cream); }
.next { min-height: 48px; padding: 0 16px; white-space: nowrap; background: var(--red); color: var(--cream); border: 0; cursor: pointer; font-weight: 700; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.next .nsub { display: block; font-size: 11px; font-weight: 500; opacity: .92; }
.next:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cream); }
.nextwrap { display: flex; flex-direction: column; align-items: flex-end; }
.blocker { font-size: 12px; color: var(--err); margin: 4px 0 0; text-align: right; min-height: 0; }

.steps { margin: 8px 0 0; padding: 0; list-style: none; display: flex; gap: 4px; }
.steps li { flex: 1; min-width: 0; }
.steps button, .steps span.stp { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; background: none; border: 0; border-bottom: 2px solid var(--hair); color: var(--grey); padding: 0 4px; }
.steps span.stp.cur { background: var(--red); color: var(--cream); border-bottom-color: var(--red); }
.title:focus { outline: none; }
.steps button.done { color: var(--cream); border-bottom-color: var(--red); cursor: pointer; }
.steps .short { display: none; }
@media (max-width: 459px) { .steps .long3 { display: none; } .steps .short { display: inline; } }

.toast { position: fixed; left: 50%; bottom: 140px; translate: -50% 0; background: var(--cream); color: var(--bg); padding: 10px 14px; font-size: 14px; font-weight: 600;
  max-width: calc(100vw - 32px); z-index: 10; pointer-events: none; }

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 56px minmax(0, 1fr) auto;
    grid-template-areas: "top top" "stage rail" "foot foot"; }
  .stage { height: auto; border-bottom: 0; border-right: 1px solid var(--hair); }
  .stage-name { font-size: 28px; }
  .stage-cap { bottom: 18px; }
  .stage canvas { inset: 0 0 70px 0; height: calc(100% - 70px); }
  .t-page { padding: 24px 24px 32px; }
  .foot { padding: 10px 24px 12px; }
  .foot-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
  .foot-row { display: contents; }
  .steps { margin: 0; max-width: 620px; justify-self: center; width: 100%; }
  .toast { bottom: 110px; }
  .back-t { display: inline; }
  .foot-inner { row-gap: 2px; }
}

/* ---------- v2 (2026-10-21): Step 1 additions ---------- */
html, body { overflow-x: hidden; }
/* product icon placeholder slot: stand-in drawing, plainly marked until stark3d's real render arrives */
.render-slot { position: relative; display: block; border: 1px dashed rgba(169,162,155,0.35); padding: 2px 0 14px; }
.render-slot svg { height: 48px; }
.render-tag { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.art .render { width: 100%; height: 56px; object-fit: contain; display: block; }
/* colour swatches (dimmed = coming, decision 126 rules) */
.card.swatch { flex-direction: row; align-items: center; gap: 8px; padding: 8px 8px; min-height: 48px; }
.card.swatch .tick { width: 16px; height: 16px; }
.chip { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(244,241,234,0.35); }
.card[aria-disabled="true"] .chip { opacity: .4; }
.swname { font-size: 12px; line-height: 1.15; font-weight: 600; }
.card[aria-disabled="true"] .swname { color: var(--grey); }
.card.swatch .coming-tag { top: auto; bottom: 2px; right: 4px; font-size: 8.5px; padding: 1px 4px; }
/* hexagon text preview */
.hexprev { max-width: 380px; margin: 6px auto 4px; }
.prevcap { font-size: 11px; color: var(--grey); text-align: center; margin: 0 0 6px; line-height: 1.35; }
.prevcap[hidden] { display: none; }
.digit-note { color: var(--cream); }
.fitmsg { font-size: 12px; color: var(--err); margin: 4px 0 0; }
.fitmsg:empty { display: none; }
.field.warn .inwrap { border-color: rgba(232,165,152,0.6); }
@media (max-height: 700px) and (max-width: 600px) { .stage { height: clamp(160px, 28dvh, 260px); } }

/* ---------- v2 cp (2026-10-21 PM): Zaki's Step 1 answers + Step 2 redesign ---------- */
@media (min-width: 1024px) { .stage { max-height: none; } } /* fix: the phone cap (40dvh) squeezed the desktop hero */
/* terrain colour swatches (base finish never changes these) */
.swtxt { display: flex; flex-direction: column; min-width: 0; }
.swsub { font-size: 11px; color: var(--grey); line-height: 1.2; }
.chip-t-olive { background: #5F6E35; } /* v3: swatches = stark3d v3 render estimates [R] */
.chip-t-charcoal { background: #1F1E1D; }
.chip-t-navy { background: #0078BF; } /* 'Navy Blue' (Bambu spool); reads mid blue */
.chip-t-natural { background: linear-gradient(135deg, #5F6E35 0 45%, #9C9387 55% 100%); }
.note.err { color: var(--err); }
.note.err:empty { display: none; }
/* stark3d PNG layers (base + terrain), stacked; shown only when options.js renders.ready is true */
.hero-layers { position: absolute; inset: 0 0 34px 0; }
.hero-layers[hidden], .mem-hero[hidden], .stage canvas[hidden], .stage[hidden] { display: none; }
.hero-layers .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.render-stack { position: relative; display: block; height: 56px; }
.render-stack .render { position: absolute; inset: 0; }
.stage.is-layers .stage-hint, .stage.is-mem .stage-hint, .stage.is-layers .rm-arrows, .stage.is-mem .rm-arrows { display: none !important; }
/* Step 2 hero: Memory Page concept art (theme colours live ONLY inside the art) */
.mem-hero { position: absolute; inset: 0 0 34px 0; overflow: hidden; background: #0B0D10; }
.mem-hero[data-palette="orange"] { background: #0D0805; }
.mem-hero[data-palette="violet"] { background: #0A0612; }
.mem-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* theme cards: concept art + one-line concept */
.theme-art { display: block; width: 100%; aspect-ratio: 360 / 196; overflow: hidden; margin: 0 0 6px; background: #0B0D10; }
.theme-svg { width: 100%; height: 100%; display: block; }
.card[aria-disabled="true"] .theme-art { opacity: .4; }
.csub.concept { margin-top: 2px; }
/* character tiles: neutral full-body placeholder silhouettes */
.figtile { width: 100%; max-width: 72px; aspect-ratio: 72 / 96; display: block; }
.card[aria-disabled="true"] .figtile { opacity: .4; }
.csub.role { font-size: 10.5px; text-align: center; letter-spacing: .04em; } /* Zaki 2026-10-25: "Combat Program" etc. */
@media (min-width: 1024px) {
  .hero-layers, .mem-hero { inset: 0 0 70px 0; }
}
/* demo banner sits in the layout (it used to float over the hero) */
.app.has-banner { grid-template-rows: 48px auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "banner" "stage" "rail" "foot"; }
.app.has-banner .demo-banner { grid-area: banner; position: static; }
@media (min-width: 1024px) { .app.has-banner { grid-template-rows: 56px auto minmax(0, 1fr) auto; grid-template-areas: "top top" "banner banner" "stage rail" "foot foot"; } }
/* phone: the caption under the hero is ~42 px tall */
@media (max-width: 1023px) { .mem-hero, .hero-layers { inset: 0 0 44px 0; } }
/* dimmed swatch: the COMING tag sits over the (dimmed) colour chip, never over the name */
.card.swatch .coming-tag { top: -7px; bottom: auto; left: auto; right: 14px; translate: none; font-size: 8.5px; padding: 1px 4px; }

/* ---------- v3 follow-up 2 (Zaki 2026-10-21, decisions 164-168): character-sheet hero, avatars, descriptions ---------- */
@media (min-width: 1024px) { .logo { height: 24px; } }
.mem-hero[data-palette="orange"] { background: #0A0302; }
.mem-hero[data-palette="violet"] { background: #07040E; }
/* bracket corners: cream L-marks hugging the hero box (cream, never a theme colour in the chrome) */
.mh-br { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(244,241,234,0.85); pointer-events: none; }
.mh-br.tl { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; }
.mh-br.tr { top: 6px; right: 6px; border-top-width: 2px; border-right-width: 2px; }
.mh-br.bl { bottom: 6px; left: 6px; border-bottom-width: 2px; border-left-width: 2px; }
.mh-br.br { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; }
@media (min-width: 1024px) { .mh-br { width: 40px; height: 40px; } .mh-br.tl, .mh-br.tr { top: 16px; } .mh-br.bl, .mh-br.br { bottom: 16px; } .mh-br.tl, .mh-br.bl { left: 16px; } .mh-br.tr, .mh-br.br { right: 16px; } }
/* character cards: avatar, name, colour label, one-sentence description */
.card.char { padding: 8px 8px 10px; }
.avatar { display: block; width: 100%; max-width: 96px; aspect-ratio: 300 / 366; background: #161412; border-radius: 8px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.card.char .figtile { max-width: 96px; }
.csub.cdesc { font-size: 11.5px; text-align: center; color: var(--cream); opacity: .86; margin-top: 2px; }

/* ---------- v3 follow-up 3 (Zaki 2026-10-22, decisions 170-174): route colour, half-body hero, Step 3 top view ---------- */
.chip-r-orange { background: #FC4C02; } /* Strava orange (screen), route default */
.chip-r-yellow { background: #F5C800; } /* SUNLU PLA+ 2.0 yellow, screen ESTIMATE [R]; never printed */
/* (The Step 3 top-view hero was removed 2026-10-25: the details page has no hero; see the Order Summary thumbnails below.) */

/* ---------- v3 follow-up 4 (Zaki 2026-10-22, decisions 175-181): "Your details", delivery, totals, last buttons ---------- */
/* total: a small "BND" in front of the price, e.g. BND $45 */
.cur-pre { font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--grey); margin-right: 4px; vertical-align: 0.9em; }
.cur-pre[hidden] { display: none; }
.badge-n { white-space: nowrap; }
.price-sub s { color: var(--grey); }
#bdTotal { color: var(--cream); font-weight: 600; }
#bdTotal small { font-size: 9px; letter-spacing: .08em; color: var(--grey); }
#bdSave { color: var(--cream); }
#priceSub > span, #priceSub s { white-space: nowrap; } /* never split "BND 4" across lines */
/* details: +673 fixed in front of the 7 digits; textarea and select styled as the other boxes */
.inwrap .prefix { padding: 0 0 0 10px; font-size: 16px; color: var(--grey); white-space: nowrap; user-select: none; }
.inwrap textarea { flex: 1; min-width: 0; min-height: 76px; padding: 10px; background: transparent; border: 0; outline: none; font: inherit; font-size: 16px; color: inherit; resize: vertical; }
.inwrap select { flex: 1; min-width: 0; height: 44px; padding: 0 10px; background: var(--card); border: 0; outline: none; font: inherit; font-size: 16px; color: var(--cream); }
.field .note { margin-top: 6px; }
/* the last button may wrap (long labels); the line under it */
.next[hidden] { display: none; }
.next.is-busy { opacity: .7; pointer-events: none; }
.next-note { font-size: 11px; color: var(--grey); margin: 3px 0 0; text-align: right; }
.next-note:empty { display: none; }
.foot.is-last .actions { flex: 1 1 auto; min-width: 0; }
.foot.is-last .nextwrap { flex: 1 1 auto; min-width: 0; }
.foot.is-last .next { white-space: normal; text-align: left; line-height: 1.2; padding: 6px 14px; width: 100%; font-size: 14px; }
@media (min-width: 1024px) { .foot.is-last .next { max-width: 360px; } .foot.is-last .nextwrap { align-items: flex-end; } }
/* HX confirmation (the only success state, decision 178) */
.panel.confirm p { margin: 0 0 6px; }
.panel.confirm p:last-child { margin: 0; }
#orderId { font-family: Anton, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .04em; }

/* ---------- v3 follow-up 6 (Zaki 2026-10-25, WEB-STATUS 183-185): multi-piece orders, Mode B, no details hero, scrollers ---------- */
/* the details page has NO hero: the stage is hidden and the page takes the whole width */
.app.no-stage { grid-template-rows: 48px 0 minmax(0, 1fr) auto; }
.app.no-stage.has-banner { grid-template-rows: 48px auto 0 minmax(0, 1fr) auto; }
@media (min-width: 1024px) {
  .app.no-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) auto; grid-template-areas: "top" "rail" "foot"; }
  .app.no-stage.has-banner { grid-template-rows: 56px auto minmax(0, 1fr) auto; grid-template-areas: "top" "banner" "rail" "foot"; }
  .app.no-stage .t-page { padding-left: max(24px, calc(50% - 340px)); padding-right: max(24px, calc(50% - 340px)); }
}
/* 2026-10-26 (WEB-STATUS 189) fix: at 375 px the JM Step 2 footer ("Continue to Your details", no wrap) was 390 px at its
   narrowest, which widened the whole single grid column to 390 px: the right 15 px of the hero (its right bracket corners)
   and of every page were cut off. The column may no longer grow past the screen, and on narrow phones the button text may
   wrap onto two lines instead. */
@media (max-width: 1023px) { .app { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .foot-row { gap: 8px; } .next { padding: 0 12px; white-space: normal; line-height: 1.15; min-width: 0; } .actions { min-width: 0; } }
/* (2026-10-26, WEB-STATUS 189: the Step 2 hero is back to the Step 1 size on phones; the 40 dvh rule and the "Who is NOAH"
   block under the hero are gone.) Hero intro = a small paragraph INSIDE the picture, bottom right (Ares-style), placed and
   sized by app.js placeIntro() from the theme's hero template. A faint text shadow keeps it legible over the dark art. */
.mh-intro { position: absolute; margin: 0; overflow: hidden; color: var(--cream); font-weight: 500; letter-spacing: .01em;
  text-shadow: 0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8); pointer-events: none; text-wrap: pretty; }
/* "Piece 2" in the step bar area */
.piece-tag { margin: 6px 0 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.piece-tag[hidden] { display: none; }
@media (min-width: 1024px) { .piece-tag { margin: 0 0 2px; text-align: center; } }
/* Order Summary: one row per piece, small top-view thumbnail, edit / remove */
.pieces { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.pc { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px 0 4px; border-bottom: 1px solid var(--hair); }
.pc-thumb { display: block; width: 84px; aspect-ratio: 142 / 124; background: #0B0D10; border: 1px solid var(--hair); }
.pc-thumb svg { display: block; width: 100%; height: 100%; }
.pc-body { min-width: 0; }
.pc-head { margin: 0; font-size: 14px; line-height: 1.3; }
.pc-head strong { font-family: Anton, sans-serif; font-weight: 400; letter-spacing: .04em; }
.pc-choices, .pc-meta { margin: 2px 0 0; font-size: 12px; color: var(--grey); line-height: 1.35; }
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pc-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.pc-each { font-weight: 400; font-size: 12px; color: var(--grey); }
.pc-acts { display: flex; gap: 2px; }
.pc-acts .linkbtn { padding: 10px 8px; min-width: 44px; }
.ordertotals { margin: 8px 0 0; font-size: 13px; }
.ordertotals p { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0; }
.ordertotals .ot-del { display: block; color: var(--grey); }
.ordertotals .ot-del s { color: var(--grey); }
.ordertotals .ot-total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--hair); padding-top: 4px; }
.ordertotals .ot-total small { font-size: 10px; letter-spacing: .08em; color: var(--grey); }
/* Add another piece: secondary, outlined (the Brick Red fill stays the main button's) */
.addwrap { margin: 14px 0 6px; }
.addpiece { width: 100%; min-height: 48px; background: none; border: 1px solid var(--cream); color: var(--cream); font-weight: 700; font-size: 15px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.addpiece:disabled { opacity: .4; cursor: default; border-color: var(--grey); }
.addpiece:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cream); }
/* confirmation: one Form link per JT / JM piece */
.uplist { list-style: none; margin: 0 0 12px; padding: 0; }
.upl { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.uplink { color: var(--cream); font-weight: 700; text-underline-offset: 3px; display: inline-block; padding: 8px 0; }
/* THEME / CHARACTER / GAME = one row each, scrolling left to right: swipe + scroll-snap, no scrollbar, an edge fade and a peek
   of the next card as the cue; keys (Tab, arrows) and mouse drag on desktop (app.js). No new motion: native scrolling only. */
/* 2026-10-26 (WEB-STATUS 189) edge fix: the LEFT edge fade is gone (it faded and "cut" the first card while scrolling), and
   scroll-padding matches the 2 px side padding, so snap-start rests at scrollLeft 0 with the first card whole. Only the right
   fade remains (the cue that more cards follow); it drops away at the end of the row. */
.row.scroller { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; padding: 4px 2px 6px; margin: -4px -2px 0; scroll-padding-inline: 2px; --fade: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%); }
.row.scroller::-webkit-scrollbar { display: none; }
.row.scroller.at-end { -webkit-mask-image: none; mask-image: none; }
.row.scroller > .card { flex: 0 0 var(--cw, 44%); scroll-snap-align: start; }
/* smaller tiles (2026-10-26): label + one row fit the rail in one view at 375 x 667 with the Step 1-sized hero */
#sc-theme { --cw: 60%; }
#sc-char { --cw: 45%; }
#sc-game { --cw: 52%; }
.card.themecard { padding: 8px 8px 9px; }
.card.themecard .theme-art { aspect-ratio: 360 / 150; margin: 0 0 5px; }
.card.themecard .concept { font-size: 11.5px; line-height: 1.3; }
#sc-game .thumb, #sc-game .thumb-blank { aspect-ratio: 360 / 180; margin: 0 0 5px; }
#sc-game > .card { padding: 8px 8px 9px; }
@media (min-width: 1024px) { #sc-theme { --cw: 66%; } #sc-char { --cw: 40%; } #sc-game { --cw: 56%; } }

/* CHARACTER CARD = trading card (2026-10-26, WEB-STATUS 189): no grey box; the drawn background (art.js cardBackground, the
   character's palette) and the art fill the card; name / role / sentence over the bottom on a dark gradient. Selected = the
   Brick Red frame (3 px) + the tick + the red slash under the name. Unbuilt cards: same template, dimmed. */
.row.scroller > .card.char { display: block; aspect-ratio: 20 / 21; padding: 0; align-self: flex-start; }
.card.char[aria-checked="true"] { --bw: 3px; }
.card.char .tick { z-index: 3; border-radius: 8px 0 6px 0; }
.card.char .coming-tag { z-index: 3; }
.tcard { position: absolute; inset: var(--bw); border-radius: 8px; overflow: hidden; background: #0A0302; }
.card.char[aria-checked="true"] .tcard { border-radius: 7px; }
.tc-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tcard .avatar { position: absolute; left: 4%; right: 4%; top: 5%; bottom: 0; width: auto; max-width: none; aspect-ratio: auto; background: none; border-radius: 0; }
.tcard .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card.char .tcard .figtile { position: absolute; inset: 6% 0 0 0; width: 100%; height: 94%; max-width: none; aspect-ratio: auto; }
.tc-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to bottom, rgba(6,3,2,0) 0, rgba(6,3,2,.72) 38%, rgba(6,3,2,.94) 100%); }
.tc-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 0 9px 9px; text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.tc-text .cname.sm { font-size: 18px; }
.tc-text .csub.role { text-align: left; font-size: 9.5px; letter-spacing: .04em; line-height: 1.2; color: var(--grey); font-weight: 600; }
.tc-text .csub.cdesc { text-align: left; font-size: 10px; line-height: 1.28; opacity: .95; margin-top: 2px; }
.card.char .ph-label { position: absolute; top: 9px; right: 9px; z-index: 2; background: rgba(18,16,14,.8); padding: 2px 5px; color: var(--cream); font-size: 8.5px; }
.card.char[aria-disabled="true"] .tcard { opacity: .45; }
.card.char[aria-disabled="true"] .figtile { opacity: 1; }
.row.scroller.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .row.scroller { cursor: grab; } }