/* ==========================================================================
   JAD unified app — components. Layer 3, after tokens.css.
   Everything here composes the three primitives; nothing invents new colour.
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }

/* ---------------------------------------------------------------- shell */
.page{ min-height: 100svh; display:flex; flex-direction:column; }
.page__main{ flex:1; padding-block-end: calc(var(--bar-h) + var(--hem-h) + var(--safe-b) + 24px); }
.wrap{ max-inline-size: var(--maxw); margin-inline:auto; inline-size:100%; }

/* Top of screen: no persistent app bar. A 44px transparent row. */
.topline{
  display:flex; align-items:center; justify-content:space-between;
  min-block-size:44px; padding-block-start: var(--safe-t);
  padding-inline: var(--seam); gap: var(--s3);
}
.topline__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-block-size:44px; }
.topline__brand img{ block-size:26px; inline-size:auto; }
.topline__brand .wm{ font-weight:600; font-size:var(--t-meta); color:var(--ink); }
.ico-back{ inline-size:44px; block-size:44px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color: var(--ink); text-decoration:none; }
[dir="rtl"] .ico-back svg{ transform: scaleX(-1); }

/* Marketing chrome (browser, cold visitor) */
.mhead{ padding-block: var(--s3); border-block-end:1px solid var(--thread-ghost); }
.mfoot{
  background: var(--table); color: rgba(245,241,232,.78);
  margin-block-start: var(--s8); padding-block: var(--s7) var(--s6);
  font-size: var(--t-meta);
}
.mfoot a{ color: rgba(245,241,232,.85); text-decoration:none; }
.mfoot__grid{ display:grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-inline: var(--seam); }
.mfoot__brand img{ block-size:56px; margin-block-end: var(--s3); }
.mfoot__legal{ margin-block-start: var(--s6); padding-block-start: var(--s4); padding-inline: var(--seam);
  border-block-start: 1px solid rgba(198,161,91,.25); font-size: var(--t-cap); color: rgba(245,241,232,.5);
  display:flex; flex-wrap:wrap; gap: var(--s4); }

/* The app furniture is ALWAYS present (owner decision 24-08): the tape bar
   and the assistant pill on every screen, like any familiar app. The
   marketing footer still shows for browser visitors below the content. */
.tapebar{ display:grid; }
.assist-pill{ display:flex; }
.hem{ display:none; }
.hem[data-live]{ display:flex; }
html[data-shell="app"] .mfoot{ display:none; }
/* desktop top navigation links */
.topnav{ display:none; }
@media (min-width: 900px){
  .topnav{ display:flex; gap: var(--s5); font-size: var(--t-meta); }
  .topnav a{ text-decoration:none; color: var(--graphite); font-weight:600; }
  .topnav a:hover{ color: var(--ink); }
}

/* ------------------------------------------------------------- tape bar */
.tapebar{
  position: fixed; inset-inline:0; inset-block-end:0; z-index: var(--z-bar);
  block-size: calc(var(--bar-h) + var(--safe-b));
  padding-block-end: var(--safe-b);
  grid-template-columns: repeat(5, 1fr);
  background: var(--paper-2);
  background-image: var(--weave);
  border-block-start: 1px solid var(--thread-line);
}
.tapebar::before{ /* the tape edge ticks */
  content:''; position:absolute; inset-inline:0; inset-block-start:0;
  block-size: 6px; background-image: var(--ticks);
  background-size: 40px 6px, 8px 4px;
  opacity:.9; pointer-events:none;
}
.tapebar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color: var(--graphite);
  font-size: var(--t-label); font-weight:600; min-block-size: var(--bar-h);
  position:relative;
}
.tapebar a svg{ inline-size:22px; block-size:22px; stroke-width:1.25; }
.tapebar a[aria-current="page"]{ color: var(--ink); }
.tapebar a[aria-current="page"]::after{ /* the chalk mark */
  content:''; position:absolute; inset-block-start:-2px;
  inline-size:22px; block-size:2px; background: var(--thread);
  transition: all var(--d-state) var(--e-draw);
}
/* the centre is a bolt-end, not a FAB */
.tapebar .bolt-end{
  margin-block-start:-12px;
  background: var(--bolt); color: #F5F1E8;
  clip-path: var(--cut-lead);
  box-shadow: var(--sh-piece);
  font-weight:600;
}
.tapebar .bolt-end svg{ stroke: #F5F1E8; }
.tapebar .bolt-end[aria-current="page"]::after{ display:none; }
.badge-stitch{ position:absolute; inset-block-start:8px; inset-inline-end:calc(50% - 20px);
  inline-size:14px; block-size:3px; background: var(--baste); }

/* ------------------------------------------------------------------ hem */
.hem{
  position: fixed; inset-inline:0; inset-block-end: calc(var(--bar-h) + var(--safe-b));
  z-index: var(--z-hem); block-size: var(--hem-h);
  align-items:center; justify-content:space-between; gap: var(--s3);
  padding-inline: var(--seam);
  background: var(--paper-2);
  border-block-start: 1px solid var(--thread-ghost);
  font-size: var(--t-label); font-weight:600; color: var(--ink);
  text-decoration:none;
}
.hem b{ color: var(--bolt); }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  min-block-size: var(--tap); padding-inline: var(--s5);
  border-radius: var(--r-nick); border:0; cursor:pointer; text-decoration:none;
  font-weight:600; font-size: var(--t-body); transition: transform var(--d-tap) var(--e-pin);
}
.btn:active{ transform: scale(.985); box-shadow: var(--sh-press); }
.btn--primary{ background: var(--bolt); color:#F5F1E8; min-block-size: var(--tap-lg);
  box-shadow: var(--sh-piece); inline-size:100%; }
.btn--thread{ background:transparent; border:1px solid var(--thread); color: var(--ink); }
[data-ground="table"] .btn--thread{ color: var(--thread); }
.btn--quiet{ background:transparent; border:1px solid var(--thread-ghost); color: var(--graphite); }
.btn:focus-visible{ outline: 2px solid var(--thread); outline-offset: 3px; }
.linkish{ background:none;border:0;cursor:pointer;text-decoration:underline;color:var(--graphite);font-size:var(--t-meta); }

/* -------------------------------------------------------------- surfaces */
.rows > *{ padding: var(--s5); padding-inline-start: var(--strip);
  border-block-end: 1px solid var(--thread-ghost); }
.rows > *:nth-child(even){ background: var(--paper-2); }
.piece{ background: var(--paper-2); border-radius: var(--r-nick);
  box-shadow: var(--sh-piece); clip-path: var(--cut-lead);
  padding: var(--s5); padding-inline-start: var(--strip); }
.well{ background: var(--paper-3); border-radius: var(--r-nick);
  padding: var(--s5); padding-inline-start: var(--strip); }

/* ---------------------------------------------------------------- sheets */
.sheet-modal{
  position: fixed; inset-inline:0; inset-block-end:0; z-index: var(--z-sheet);
  background: var(--paper); max-block-size: 88vh; overflow:auto;
  border-start-start-radius: var(--r-fold);
  box-shadow: var(--sh-sheet);
  transform: translateY(100%); transition: transform var(--d-sheet) var(--e-fold);
  padding: var(--s5) var(--seam) calc(var(--s6) + var(--safe-b));
  overscroll-behavior: contain;
}
.sheet-modal::before{ content:''; position:sticky; top:0; display:block;
  inline-size:36px; block-size:2px; background: var(--chalk-hot);
  margin-inline:auto; margin-block-end: var(--s4); background: var(--graphite); }
.sheet-modal[data-open]{ transform: translateY(0); }
.sheet-modal{ border-block-start: 3px solid var(--thread); }
.scrim{ position:fixed; inset:0; z-index: var(--z-scrim); background: rgba(14,14,14,.5);
  opacity:0; pointer-events:none; transition: opacity var(--d-sheet) ease; }
.scrim[data-open]{ opacity:1; pointer-events:auto; }

/* ---------------------------------------------------------------- inputs */
.field{ display:block; margin-block-end: var(--s4); }
.field > span{ display:block; font-size: var(--t-label); font-weight:600;
  color: var(--graphite); margin-block-end: var(--s2); }
.field > span::before{ content:''; display:inline-block; inline-size:12px; block-size:1px;
  background: var(--thread); vertical-align: middle; margin-inline-end:6px; }
input[type="text"], input[type="tel"], input[type="date"], input[type="email"],
input[type="number"], select, textarea{
  inline-size:100%; min-block-size: var(--tap);
  background: var(--paper-3); color: var(--ink);
  border: 1px solid var(--thread-ghost); border-radius: var(--r-nick);
  box-shadow: var(--sh-press);
  padding: var(--s3); font-family: var(--ff);
  font-size: max(16px, 1rem);          /* iOS zoom guard */
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color: var(--thread); outline: 2px solid var(--thread); outline-offset: 2px;
}
.err{ background: var(--paper-2); border-inline-start: 3px solid var(--st-late);
  color: var(--ink); padding: var(--s3) var(--s4); margin-block: var(--s4);
  font-size: var(--t-meta); }
.okmsg{ background: var(--paper-2); border-inline-start: 3px solid var(--st-done);
  padding: var(--s3) var(--s4); margin-block: var(--s4); font-size: var(--t-meta); }

/* ----------------------------------------------------------------- chips */
.chip{ display:inline-flex; align-items:center; min-block-size:36px;
  padding-inline: var(--s3); border:1px solid var(--thread-ghost);
  border-radius: var(--r-nick); font-size: var(--t-label);
  color: var(--graphite); background:none; cursor:pointer; text-decoration:none; }
.chip[aria-selected="true"], .chip.is-on{ color: var(--ink); font-weight:600; }

/* ------------------------------------------------------------ band joins */
.join{ position:relative; block-size:12px; margin-block: var(--s6);
  background: var(--baste); background-size: 16px 1px;
  background-repeat: repeat-x; background-position: center; }
.join::after{ content:''; position:absolute; inset-inline-start:33%;
  inset-block-start:6px; inline-size:1px; block-size:9px; background: var(--thread); }

/* -------------------------------------------------------------- the seal */
.seal{ display:inline-grid; place-items:center; border-radius: var(--r-seal);
  border: 1px solid var(--thread); background: transparent; }
.seal img{ inline-size:57%; block-size:auto; }
.seal--52{ inline-size:52px; block-size:52px; }
.seal--44{ inline-size:44px; block-size:44px; }
.seal--32{ inline-size:32px; block-size:32px; }
.seal--28{ inline-size:28px; block-size:28px; }

/* ------------------------------------------------------ headings & hero */
h1,h2,h3{ font-weight:600; margin:0 0 var(--s3); text-wrap: balance; line-height:1.4; }
.display{ font-size: var(--t-display); font-weight:300; line-height:1.3; }
.display b{ font-weight:600; }
.screen-title{ font-size: var(--t-screen); font-weight:300; margin-block: var(--s6) var(--s5); }
.screen-title b{ font-weight:600; }
.title{ font-size: var(--t-title); }
.leadp{ font-size: var(--t-lead); font-weight:300; color: var(--graphite); max-inline-size:40ch; }
p{ margin:0 0 var(--s4); max-inline-size:60ch; }
.muted{ color: var(--graphite); font-size: var(--t-meta); }

/* watermark numeral — depth from overlap and paper tone, not shadow */
.wmark{ position:relative; }
.wmark::before{ content: attr(data-n); position:absolute;
  inset-inline-start:-8px; inset-block-start:-30px;
  font-size: var(--t-figure); font-weight:300; color: var(--paper-3);
  z-index:0; pointer-events:none; font-variant-numeric: tabular-nums; }
.wmark > *{ position:relative; z-index:1; }

/* hero band */
.hero{ background: var(--table); color:#F5F1E8; position:relative;
  padding-block: calc(var(--safe-t) + var(--s7)) var(--s7); overflow:hidden; }
.hero .display{ color:#F5F1E8; }
.hero .leadp{ color: rgba(245,241,232,.75); }
.hero__falcon{ position:absolute; inset-inline-end:-40px; inset-block-end:-30px;
  inline-size:min(52vw, 320px); opacity:.14; pointer-events:none; }
.goldline{ block-size:2px; background: var(--baste); background-size:16px 2px; }

/* the stateful slab above the hero (installed-app landing) */
.slab{ background: var(--paper-2); border-block-end: 1px solid var(--thread-ghost); }
.slab a{ text-decoration: none; }

/* ---------------------------------------------------------- model cards */
.model-card{ position:relative; margin-block-end: var(--s6); text-decoration:none; display:block; }
.model-card img{ inline-size:100%; aspect-ratio: 4/3; object-fit:cover; }
.model-card figcaption{ padding: var(--s4) var(--seam); }
.model-card .title{ margin-block-end: var(--s1); }

/* ------------------------------------------------------------ fabric card
   A bolt of cloth as a card: the swatch chip carries the fabric's own colour
   (derived from its name), the body carries three clear facts — name, meter
   price, availability. A real surface in both grounds, no floating text. */
.fcard{ text-decoration:none; display:flex; flex-direction:column;
  background: var(--paper-2); border: 1px solid var(--thread-ghost);
  border-radius: var(--r-piece); overflow:hidden;
  transition: transform var(--d-tap) var(--e-pin); }
.fcard:active{ transform: scale(.985); }
.fcard__chip{ display:block; aspect-ratio: 5/3; position:relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,.16) 0%, transparent 30%),
    repeating-linear-gradient(45deg, rgba(42,39,36,.05) 0 1px, transparent 1px 4px),
    var(--sw, var(--calico));
  border-block-end: 1px solid var(--thread-ghost); }
.fcard__chip::after{  /* the folded selvedge of the bolt */
  content:''; position:absolute; inset-inline:0; inset-block-end:0;
  block-size: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.14), transparent),
              var(--sw, var(--calico)); }
.fcard__chip .fcard__tone{ position:absolute; inset-block-start:8px;
  inset-inline-start:8px; font-size: var(--t-tick); font-weight:600;
  padding: 2px 8px; border-radius: 2px;
  background: rgba(14,14,14,.55); color:#F5F1E8; }
.fcard__body{ display:flex; flex-direction:column; gap: 4px;
  padding: var(--s3) var(--s3) var(--s4); }
.fcard__name{ display:block; font-size: var(--t-label); font-weight:600;
  color: var(--ink); line-height:1.5; min-block-size: 2.6em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; }
.fcard__price{ display:flex; align-items:baseline; gap: 6px; }
.fcard__price b{ font-size: var(--t-lead); font-weight:600;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.fcard__price span{ font-size: var(--t-cap); color: var(--graphite); }
.avail{ display:inline-flex; align-items:center; gap:6px;
  font-size: var(--t-cap); font-weight:600; }
.avail::before{ content:''; inline-size:7px; block-size:7px; border-radius:99px; }
.avail--available{ color: var(--st-done); }
.avail--available::before{ background: var(--st-done); }
.avail--limited{ color: var(--st-late); }
.avail--limited::before{ background: var(--st-late); }
.avail--ask{ color: var(--graphite); }
.avail--ask::before{ background: var(--graphite); }
.grid-swatches{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: var(--s4); }
@media (max-width: 420px){
  .grid-swatches{ grid-template-columns: 1fr 1fr; gap: var(--s3); } }

/* --------------------------------------------------------- track timeline */
.stitchline{ list-style:none; margin:0; padding:0; position:relative; }
.stitchline li{ position:relative; padding-inline-start: var(--s6); padding-block: var(--s3); }
.stitchline li::before{ content:''; position:absolute; inset-inline-start:7px;
  inset-block-start:0; inset-block-end:0; inline-size:2px; background: var(--thread-ghost); }
.stitchline li.done::before{ background: var(--thread); }
.stitchline li.now::before{
  background: var(--baste); background-size: 2px 16px;
}
.stitchline li::after{ content:''; position:absolute; inset-inline-start:2px;
  inset-block-start: calc(50% - 6px); inline-size:12px; block-size:12px;
  border-radius:0; border:2px solid var(--thread-ghost); background: var(--paper); }
.stitchline li.done::after{ border-color: var(--thread); background: var(--thread); }
.stitchline li.now::after{ border-color: var(--bolt); background: var(--paper); }
.stitchline .st-name{ font-weight:600; }
.stitchline .muted{ display:block; }

/* ------------------------------------------------------------- assistant */
.assist-pill{
  position: fixed; inset-inline-end: var(--seam);
  inset-block-end: calc(var(--bar-h) + var(--hem-h) + var(--safe-b) + var(--s3));
  z-index: var(--z-pill);
  align-items:center; gap: var(--s2);
  min-block-size: var(--tap); padding-inline: var(--s4);
  background: var(--paper-2); border:1px solid var(--thread);
  border-radius: var(--r-nick); clip-path: var(--cut-lead);
  font-weight:600; font-size: var(--t-label); cursor:pointer;
  box-shadow: var(--sh-piece); color: var(--ink);
}
.chat{ display:flex; flex-direction:column; gap: var(--s3); }
.chat__log{ display:flex; flex-direction:column; gap: var(--s3);
  max-block-size: 52vh; overflow-y:auto; padding-block: var(--s3); }
.msg{ max-inline-size: 85%; padding: var(--s3) var(--s4); font-size: var(--t-meta); }
.msg--user{ align-self: flex-start; background: var(--bolt-tint);
  border-inline-start: 2px solid var(--bolt); }
.msg--bot{ align-self: flex-end; background: var(--paper-2);
  border-inline-end: 2px solid var(--thread); white-space: pre-line; }
.msg--card{ align-self: stretch; }
.chat__chips{ display:flex; flex-wrap:wrap; gap: var(--s2); }
.chat__form{ display:flex; gap: var(--s2); }
.chat__form textarea{ flex:1; min-block-size: var(--tap); max-block-size:120px; resize:none; }
.stage-line{ font-size: var(--t-cap); color: var(--graphite); }

/* --------------------------------------------------------------- staff */
[data-role="staff"] .topline{ background: var(--paper-2); }
.stafftag{ font-size: var(--t-tick); border:1px solid var(--thread);
  color: var(--thread); padding: 1px 8px; letter-spacing:0; }

/* --------------------------------------------------------------- tables */
.tbl{ inline-size:100%; border-collapse:collapse; font-size: var(--t-meta); }
.tbl th{ text-align:start; font-size: var(--t-label); color: var(--graphite);
  border-block-end:1px solid var(--thread-line); padding: var(--s2) var(--s3); }
.tbl td{ padding: var(--s3); border-block-end:1px solid var(--thread-ghost); }

/* ------------------------------------------------------------ utilities */
.stack > * + *{ margin-block-start: var(--s4); }
.cluster{ display:flex; flex-wrap:wrap; gap: var(--s3); align-items:center; }
.between{ display:flex; justify-content:space-between; align-items:center; gap: var(--s3); }
.center{ text-align:center; }
.mt6{ margin-block-start: var(--s6); }
.mb6{ margin-block-end: var(--s6); }
.pad{ padding: var(--s5) var(--seam); }
.hide{ display:none !important; }

/* -------------------------------------------------- responsive & motion */
@media (min-width: 768px){
  :root{ --seam:32px; --gutter:16px; --selvedge:36px; }
  .grid-2up{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s6); }
}
@media (min-width: 1024px){
  :root{ --seam:40px; --gutter:20px; --selvedge:44px; }
}

/* View transitions — direction flips under RTL, guarded for reduced motion */
@media not (prefers-reduced-motion: reduce){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation-duration: var(--d-sheet); }
  ::view-transition-new(root){ animation-duration: var(--d-sheet); }
}

/* the one crawl (active order stage) */
@keyframes crawl{ to{ background-position-x: -32px; } }
.crawl{ animation: crawl 8s linear infinite; }

/* print: the order confirmation should print like a docket */
@media print{
  .tapebar,.hem,.assist-pill,.topline,.mfoot{ display:none !important; }
  body{ background:#fff; }
}