/* ==========================================================================
   dc-ui.css  -  Direct Create UI v3, framework-neutral stylesheet
   Source: design/v2/ui.py (frozen design kit), tokens from design/guidelines/tokens.json.
   Themes: Stone (light, default) and Charcoal (dark option, automatic when the
   device is in dark mode and the user has not chosen).
   Switch: <html data-theme="stone"> or <html data-theme="charcoal">. No attribute
   = follow prefers-color-scheme (light = Stone, dark = Charcoal).
   Rules kept here: raw colour values live ONLY in the token block below; every
   control is 44px or more; focus ring 2px; body 17px phone / 18px desktop;
   nothing under 13px; 1px hairlines; status colours only on icons and 4-8px edges.
   Fonts are NOT loaded here (platform decision, see open-decisions.md):
     sans  = Montserrat (web stand-in for Gotham Bold), serif = Libre Baskerville.
   Breakpoints: phone = base (designed at 390px); desktop = min-width 1024px
   (designed at 1280px). Tablet (768 to 1023) is NOT designed: it gets the phone
   layout. Changing 1024 is a builder decision (UNVERIFIED against a real device).
   ========================================================================== */

/* ---- 1. TOKENS (the only place raw colours appear) ---------------------- */
:root,
[data-theme="stone"] {
  --dc-canvas: #d6d6d6;   /* page background */
  --dc-card: #ffffff;     /* cards, panels, bars, sheets */
  --dc-field: #ffffff;    /* inputs */
  --dc-rule: #b4b4b4;     /* hairline dividers; never the only edge of a control */
  --dc-edge: #5c5c5c;     /* control edges, 3:1 or better */
  --dc-ink: #1a1a1a;      /* primary text */
  --dc-ink-2: #333333;    /* secondary text */
  --dc-btn: #000000;      /* primary button fill */
  --dc-btn-fg: #ffffff;   /* primary button label */
  --dc-focus: #000000;    /* focus ring */
  --dc-scrim: rgba(26, 26, 26, 0.5);
  --dc-ok: #12704a;       /* status-success: icon tint / 4-8px edge only */
  --dc-bad: #b3123a;      /* status-error: icon tint / 4-8px edge only */
  /* PLATFORM PATCH 2 (kit update of 23 Oct, design/v2/states_css.py): state tokens for hover, pressed, lift and card hover */
  --dc-btn-hover: #262626;
  --dc-btn-press: #3a3a3a;
  --dc-tint-hover: rgba(0, 0, 0, 0.06);
  --dc-tint-press: rgba(0, 0, 0, 0.12);
  --dc-lift: 0 1px 2px rgba(0, 0, 0, 0.12);
  --dc-card-hover: #ffffff;
}
[data-theme="charcoal"] {
  --dc-canvas: #1a1a1a;
  --dc-card: #242424;
  --dc-field: #202020;
  --dc-rule: #3a3a3a;
  --dc-edge: #8a8a8a;
  --dc-ink: #ffffff;
  --dc-ink-2: #d0d0d0;
  --dc-btn: #f8f8f8;
  --dc-btn-fg: #1a1a1a;
  --dc-focus: #ffffff;
  --dc-scrim: rgba(0, 0, 0, 0.6);
  --dc-ok: #4fcb93;
  --dc-bad: #ff6f8e;
  --dc-btn-hover: #ffffff;
  --dc-btn-press: #d6d6d6;
  --dc-tint-hover: rgba(255, 255, 255, 0.08);
  --dc-tint-press: rgba(255, 255, 255, 0.16);
  --dc-lift: none;
  --dc-card-hover: #2c2c2c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) {
    --dc-canvas: #1a1a1a;
    --dc-card: #242424;
    --dc-field: #202020;
    --dc-rule: #3a3a3a;
    --dc-edge: #8a8a8a;
    --dc-ink: #ffffff;
    --dc-ink-2: #d0d0d0;
    --dc-btn: #f8f8f8;
    --dc-btn-fg: #1a1a1a;
    --dc-focus: #ffffff;
    --dc-scrim: rgba(0, 0, 0, 0.6);
    --dc-ok: #4fcb93;
    --dc-bad: #ff6f8e;
    --dc-btn-hover: #ffffff;
    --dc-btn-press: #d6d6d6;
    --dc-tint-hover: rgba(255, 255, 255, 0.08);
    --dc-tint-press: rgba(255, 255, 255, 0.16);
    --dc-lift: none;
    --dc-card-hover: #2c2c2c;
  }
}
/* Fixed tokens: the same in both themes (brand black band, footer, photo chrome). */
:root {
  --dc-band-bg: #000000;
  --dc-band-fg: #ffffff;
  --dc-footer-bg: #1a1a1a;
  --dc-footer-black: #000000;   /* Charcoal footers are black, with a top rule (kit update of 23 Oct) */
  --dc-footer-fg: #ffffff;
  --dc-footer-fg-2: #d0d0d0;
  --dc-footer-rule: #333333;
  --dc-photo-bg: #ffffff;                       /* behind catalogue photos */
  --dc-on-photo: #000000;                       /* icon on a photo */
  --dc-on-photo-bg: rgba(255, 255, 255, 0.92);  /* round chip behind that icon */
  --dc-photo-fade: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); /* headline-on-photo only */
  --dc-sans: "Montserrat", Arial, sans-serif;
  --dc-serif: "Libre Baskerville", Georgia, serif;
  --dc-gutter: 16px;
  --dc-bar-h: 72px;
}

/* PLATFORM PATCH 1 (foundation PR): color-scheme is set only inside .dc / .dc-root, never on <html>. Left on :root it
   would turn every legacy page dark (default canvas and text colours) when the device is in dark mode. */
.dc, .dc-root { color-scheme: light; }
[data-theme="charcoal"] .dc, [data-theme="charcoal"] .dc-root, [data-theme="charcoal"].dc, [data-theme="charcoal"].dc-root { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) .dc, :root:not([data-theme="stone"]) .dc-root { color-scheme: dark; }
}

/* ---- 2. BASE ------------------------------------------------------------ */
.dc, .dc *, .dc *::before, .dc *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* never set maximum-scale or user-scalable=no */
body.dc, .dc-root {
  margin: 0;
  background: var(--dc-canvas);
  color: var(--dc-ink);
  font: 400 17px/27px var(--dc-serif);
  -webkit-font-smoothing: antialiased;
}
/* the kit resets margins on text blocks (*{margin:0}); the platform does it here at zero specificity so spacing comes only from the scale */
:where(.dc, .dc-root) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.dc) img { display: block; max-width: 100%; }
/* :where() keeps these resets at zero specificity so component classes (.dc-btn on an <a>) win */
:where(.dc) a { color: inherit; text-decoration: none; }
:where(.dc) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dc :focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.dc-sans { font-family: var(--dc-sans); }
.dc-ink-2 { color: var(--dc-ink-2); }
.dc-has-bar { padding-bottom: calc(var(--dc-bar-h) + 24px); }          /* room under content for a fixed bar */
.dc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .dc *, .dc *::before, .dc *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* logos: two artworks, one shown per theme. Always use the supplied files. */
.dc-logo-paper { display: none; }  /* light artwork, for dark canvas */
[data-theme="charcoal"] .dc-logo-ink { display: none; }
[data-theme="charcoal"] .dc-logo-paper { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) .dc-logo-ink { display: none; }
  :root:not([data-theme="stone"]) .dc-logo-paper { display: block; }
}

/* ---- 3. TYPE ------------------------------------------------------------ */
.dc-eyebrow { font: 700 13px/1 var(--dc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-ink-2); }
.dc-h-display { font: 400 32px/40px var(--dc-serif); margin: 0; text-wrap: balance; }
.dc-h-title { font: 400 26px/34px var(--dc-serif); margin: 0; text-wrap: balance; }
.dc-h-sec { font: 400 22px/30px var(--dc-serif); margin: 0; text-wrap: balance; }
.dc-meta { font: 500 14px/18px var(--dc-sans); color: var(--dc-ink-2); }
.dc-label { font: 600 15px/20px var(--dc-sans); }
.dc-price { font: 700 17px/24px var(--dc-sans); font-variant-numeric: tabular-nums; }
.dc-price-l { font: 700 32px/36px var(--dc-sans); font-variant-numeric: tabular-nums; }
.dc-link, .dc-sec-h a {
  font: 600 14px var(--dc-sans); text-decoration: underline; text-underline-offset: 4px;
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
}

/* ---- 4. LAYOUT HELPERS -------------------------------------------------- */
.dc-pad { padding: 0 var(--dc-gutter); }
.dc-stack > * + * { margin-top: 12px; }
.dc-sp-4 { margin-top: 16px; } .dc-sp-5 { margin-top: 24px; } .dc-sp-6 { margin-top: 32px; } .dc-sp-7 { margin-top: 48px; }
.dc-sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 32px var(--dc-gutter) 12px; }
.dc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; padding: 0 var(--dc-gutter); }
.dc-bleed { display: block; width: 100%; border-radius: 0; }   /* full-bleed photo on phone: no gutter, no frame */
.dc-hero { position: relative; }
.dc-hero > img { width: 100%; height: 100%; object-fit: cover; }
.dc-hero__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px var(--dc-gutter) 16px; background: var(--dc-photo-fade); color: var(--dc-band-fg); } /* headline only, never body text */
.dc-weave {
  height: 30px; margin-top: 32px; background: var(--dc-ink);
  -webkit-mask: var(--dc-weave-mask) repeat-x; mask: var(--dc-weave-mask) repeat-x;
  --dc-weave-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cpath%20d%3D%27M0%2014%20L14%200%20L28%2014%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.4%27/%3E%3Cpath%20d%3D%27M0%2028%20L14%2014%20L28%2028%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.4%27/%3E%3C/svg%3E");
}
.dc-band { background: var(--dc-band-bg); color: var(--dc-band-fg); }

/* ---- 5. HEADER, STUDIO BAR, SEARCH, NAV STRIP --------------------------- */
.dc-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.dc-cnt { /* cart or bell count; render ONLY when count > 0 */
  position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--dc-ink); color: var(--dc-canvas); font: 700 13px/20px var(--dc-sans); text-align: center;
}
.dc-hdr {
  height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px;
  background: var(--dc-canvas); color: var(--dc-ink); border-bottom: 1px solid var(--dc-rule); position: relative;
}
.dc-hdr__logo { position: absolute; left: 50%; transform: translateX(-50%); height: 36px; width: auto; } /* 36px = phone minimum */
.dc-hdr__acts { display: flex; }
/* Studio bar: Maker and Designer. Put data-theme="charcoal" on the element. */
.dc-studio { height: 72px; padding: 0 16px; border-bottom: 0; }   /* 72px approved by Rajeev 23 Oct (supersedes 52px): 28px logo and the 13px role word together */
.dc-studio .dc-ico + .dc-avatar { margin-left: 8px; }   /* 14px clear between the bell badge and the avatar disc */
.dc-studio .dc-hdr__logo { position: static; transform: none; height: 28px; }   /* DIRECT 28px high */
.dc-studio__mark { display: inline-block; text-align: center; line-height: 1; }
.dc-studio__role { /* role word, 13px, under the logo, no wider than the logo rules */
  display: block; margin: 4px 4px 0; padding-bottom: 4px; border-bottom: 1px solid var(--dc-ink);
  font: 400 13px/16px var(--dc-serif); letter-spacing: -.04em;
}
.dc-avatar { width: 44px; height: 44px; border: 2px solid transparent; background-clip: padding-box; /* 40px disc inside a 44px target */ border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-ink); color: var(--dc-canvas); font: 700 14px var(--dc-sans); }
.dc-search {
  margin: 12px var(--dc-gutter); height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border: 1px solid var(--dc-ink); border-radius: 4px; background: var(--dc-field); color: var(--dc-ink-2); font: 500 16px var(--dc-sans);
}
.dc-nav {
  display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--dc-gutter);
  border-bottom: 1px solid var(--dc-rule); font: 700 13px/1 var(--dc-sans); letter-spacing: .05em; text-transform: uppercase;
}
.dc-nav a { height: 46px; min-width: 44px; padding: 0 4px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.dc-nav a[aria-current], .dc-nav a.on { box-shadow: inset 0 -3px 0 var(--dc-ink); }

/* ---- 6. BUTTONS --------------------------------------------------------- */
.dc-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; min-width: 44px;
  border-radius: 4px; background: var(--dc-btn); color: var(--dc-btn-fg);
  font: 700 15px var(--dc-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.dc-btn--sec { background: transparent; color: var(--dc-ink); border: 1px solid var(--dc-ink); }
.dc-btn--inline { width: auto; padding: 0 24px; }
.dc-btn[disabled], .dc-btn[aria-disabled="true"], .dc-btn--dis { opacity: .45; cursor: not-allowed; } /* always show the reason beside it */

/* ---- 7. FORM FIELDS ----------------------------------------------------- */
.dc-field { margin-top: 16px; }
.dc-field label { display: block; margin-bottom: 8px; font: 600 14px var(--dc-sans); } /* visible label above, never a placeholder */
.dc-field__in, .dc-field input, .dc-field select, .dc-field textarea {
  width: 100%; min-height: 52px; display: flex; align-items: center; padding: 4px 12px; margin: 0;
  font: 500 17px var(--dc-sans); color: var(--dc-ink); background: var(--dc-field);
  border: 1px solid var(--dc-edge); border-radius: 4px;
}
.dc-field textarea, .dc-field__in--ta { min-height: 112px; align-items: flex-start; padding-top: 12px; }
.dc-field ::placeholder { color: var(--dc-ink-2); opacity: 1; }
.dc-field small { display: block; margin-top: 8px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
/* error: 6px left edge + icon + bold words under the field */
.dc-field--err .dc-field__in, .dc-field--err input, .dc-field--err select, .dc-field--err textarea {
  border-color: var(--dc-ink); border-left-width: 6px; border-left-color: var(--dc-bad);
}
.dc-field--err small { display: flex; gap: 8px; align-items: center; color: var(--dc-ink); font-weight: 700; }
.dc-field--err small svg { color: var(--dc-bad); flex: none; }
.dc-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 500 16px var(--dc-sans); }
.dc-check__box { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dc-edge); border-radius: 4px; background: var(--dc-field); }
.dc-check.on .dc-check__box, .dc-check input:checked + .dc-check__box { background: var(--dc-ink); border-color: var(--dc-ink); color: var(--dc-canvas); }
.dc-seg { display: flex; border: 1px solid var(--dc-edge); border-radius: 4px; overflow: hidden; background: var(--dc-field); }
.dc-seg a, .dc-seg button { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; font: 600 14px var(--dc-sans); }
.dc-seg .on, .dc-seg [aria-pressed="true"] { background: var(--dc-btn); color: var(--dc-btn-fg); }
.dc-upload { padding: 16px; text-align: center; border: 1px dashed var(--dc-edge); border-radius: 4px; background: var(--dc-field); font: 600 15px var(--dc-sans); }
.dc-upload small { display: block; margin-top: 4px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.dc-stepper { display: inline-flex; border: 1px solid var(--dc-edge); border-radius: 4px; background: var(--dc-field); } /* quantity */
.dc-stepper button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.dc-stepper output, .dc-stepper b { width: 48px; display: flex; align-items: center; justify-content: center; font: 700 16px var(--dc-sans); border-left: 1px solid var(--dc-rule); border-right: 1px solid var(--dc-rule); }

/* ---- 8. CHIPS, STATUS, TAGS, OPTIONS ------------------------------------ */
.dc-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid var(--dc-edge); border-radius: 999px; white-space: nowrap; font: 600 14px var(--dc-sans);
}
.dc-chip.on, .dc-chip[aria-pressed="true"] { background: var(--dc-card); border-color: var(--dc-ink); box-shadow: inset 0 0 0 1px var(--dc-ink); } /* selected = outlined, not filled */
.dc-chip--rm { padding-right: 0; }
.dc-chip__x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ui.py draws this 32px; raised to 44px here so the remove target meets the rule */
.dc-status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--dc-ink); border-radius: 16px; font: 600 13px var(--dc-sans); /* icon + word, always */
}
.dc-status--ok svg { color: var(--dc-ok); }       /* Paid, Checked, GSTIN checked, Verified, Delivered, Payment received */
.dc-status--bad svg { color: var(--dc-bad); }     /* Needs a new photo, Cancelled, Payment failed */
.dc-status--fill { background: var(--dc-ink); color: var(--dc-canvas); border-color: var(--dc-ink); }
.dc-status--fill.dc-status--ok svg, .dc-status--fill.dc-status--bad svg { color: var(--dc-canvas); }
.dc-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border: 1px solid var(--dc-edge); border-radius: 4px; font: 600 13px var(--dc-sans); }
.dc-tag--ok svg, .dc-ok-icon { color: var(--dc-ok); }
.dc-ok-icon { display: inline-flex; }
.dc-ring-ok { border: 2px solid var(--dc-ok); color: var(--dc-ok); background: transparent; } /* order-placed / payment-received ring */
.dc-opt, .dc-tier {
  display: flex; gap: 12px; align-items: center; min-height: 64px; margin-top: 12px; padding: 8px 12px;
  border: 1px solid var(--dc-edge); border-radius: 4px; font: 500 15px/21px var(--dc-sans);
}
.dc-tier { align-items: flex-start; min-height: 72px; padding: 12px; background: var(--dc-card); }
.dc-opt.on, .dc-tier.on { border-color: var(--dc-ink); box-shadow: inset 0 0 0 1px var(--dc-ink); }
.dc-opt__r, .dc-tier__r { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dc-ink); border-radius: 50%; }
.dc-tier__r { margin-top: 4px; }
.dc-opt.on .dc-opt__r::after, .dc-tier.on .dc-tier__r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dc-ink); }
.dc-opt__end, .dc-tier__end { margin-left: auto; font-weight: 700; white-space: nowrap; }
.dc-tier b { display: block; font-weight: 700; }

/* ---- 9. ALERT, CARDS, ROWS, KV ------------------------------------------ */
.dc-alert {
  display: flex; gap: 12px; margin: 16px; padding: 16px 16px 16px 24px; background: var(--dc-card);
  border: 1px solid var(--dc-ink); border-left-width: 8px; border-radius: 4px; font: 500 15px/22px var(--dc-sans);
}
.dc-alert b { display: block; font-weight: 700; }
.dc-alert--bad { border-left-color: var(--dc-bad); }
.dc-alert--bad > svg { color: var(--dc-bad); flex: none; }
.dc-card { background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; }
.dc-panel { margin: 16px; padding: 16px; background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; }
.dc-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--dc-rule); font: 500 16px var(--dc-sans); }
.dc-row:last-child { border-bottom: 1px solid var(--dc-rule); }
.dc-row__end { margin-left: auto; }
.dc-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font: 500 16px var(--dc-sans); }
.dc-kv b { font-weight: 700; }
.dc-kv--total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--dc-ink); font-size: 18px; }
.dc-ocard { margin: 0 var(--dc-gutter) 12px; padding: 12px; background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; }
.dc-ocard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dc-stat { padding: 16px 12px 12px; } /* "four numbers" tile; put inside .dc-card */
.dc-stat__l { font: 600 14px/18px var(--dc-sans); color: var(--dc-ink-2); }
.dc-stat__v { margin: 4px 0; font: 700 29px/36px var(--dc-sans); font-variant-numeric: tabular-nums; }
.dc-stat__s { font: 500 13px/18px var(--dc-sans); color: var(--dc-ink-2); }
.dc-prod { display: block; }
.dc-prod__ph { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--dc-photo-bg); border: 1px solid var(--dc-rule); border-radius: 4px; }
.dc-prod__ph img { width: 100%; height: 100%; object-fit: cover; }
.dc-prod__save { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--dc-on-photo); }
.dc-prod__save svg { width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: var(--dc-on-photo-bg); }
.dc-prod__m { padding-top: 8px; }
.dc-prod__c { font: 600 14px/18px var(--dc-sans); color: var(--dc-ink-2); }
.dc-prod__n { margin-top: 4px; font: 400 16px/22px var(--dc-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-prod .dc-price { margin-top: 4px; }

/* ---- 10. TIMELINE, PROGRESS, STEP BAR, TABS, ACCORDION ------------------ */
.dc-timeline { list-style: none; margin: 0; padding: 0; }
.dc-timeline li { display: flex; gap: 12px; padding: 8px 0; }
.dc-timeline__dot { width: 18px; height: 18px; flex: none; margin-top: 4px; border: 2px solid var(--dc-edge); border-radius: 50%; }
.dc-timeline .done .dc-timeline__dot { background: var(--dc-ink); border-color: var(--dc-ink); }
.dc-timeline .now .dc-timeline__dot { border: 3px solid var(--dc-ink); background: var(--dc-canvas); box-shadow: 0 0 0 3px var(--dc-rule); }
.dc-timeline b { display: block; font: 700 15px/20px var(--dc-sans); }
.dc-timeline span { font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.dc-progress { display: flex; align-items: center; gap: 12px; font: 600 14px var(--dc-sans); }
.dc-progress i { flex: 1; position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dc-rule); }
.dc-progress i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--dc-ink); } /* set width inline: the only inline style allowed */
.dc-stepbar { display: flex; gap: 8px; padding: 16px var(--dc-gutter) 0; }
.dc-stepbar i { flex: 1; height: 6px; border-radius: 3px; background: var(--dc-rule); }
.dc-stepbar i.on { background: var(--dc-ink); }
.dc-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--dc-gutter); border-bottom: 1px solid var(--dc-rule); }
.dc-tabs a, .dc-tabs button { flex: none; white-space: nowrap; min-height: 48px; min-width: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; font: 700 14px var(--dc-sans); color: var(--dc-ink-2); }
.dc-tabs .on, .dc-tabs [aria-selected="true"] { color: var(--dc-ink); box-shadow: inset 0 -3px 0 var(--dc-ink); }
.dc-tabs small { min-width: 22px; padding: 0 4px; text-align: center; border: 1px solid currentColor; border-radius: 10px; font: 700 13px var(--dc-sans); }
.dc-acc { border-top: 1px solid var(--dc-rule); }
.dc-acc__head { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; font: 600 16px var(--dc-sans); text-align: left; }
.dc-acc__body { padding: 0 0 12px; font: 400 16px/26px var(--dc-serif); color: var(--dc-ink-2); }

/* ---- 11. FIXED BARS: sticky action bar, tab bar, snackbar, sheet -------- */
/* In the PNG renders these are absolutely placed at y=772; in the product they are fixed to the bottom. */
.dc-sticky, .dc-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--dc-bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--dc-rule);
}
.dc-sticky { display: flex; align-items: center; gap: 16px; padding: 0 var(--dc-gutter); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--dc-card); }
.dc-sticky .dc-btn { flex: 1; width: auto; }
.dc-sticky--two { gap: 12px; }
.dc-sticky--two .dc-btn { letter-spacing: .04em; font-size: 14px; gap: 12px; }   /* two-button bar */
.dc-sticky__price { font: 700 18px/20px var(--dc-sans); }
.dc-sticky__price small { display: block; font: 500 13px var(--dc-sans); color: var(--dc-ink-2); }
.dc-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: var(--dc-canvas); color: var(--dc-ink); } /* Maker and Designer; put data-theme="charcoal" on it */
.dc-tabbar a { height: 64px; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 13px var(--dc-sans); color: var(--dc-ink-2); }
.dc-tabbar a[aria-current], .dc-tabbar a.on { color: var(--dc-ink); font-weight: 700; box-shadow: inset 0 3px 0 var(--dc-ink); }
.dc-above-tabbar { bottom: calc(var(--dc-bar-h) + env(safe-area-inset-bottom, 0px)); } /* sticky bar that sits above a tab bar */
.dc-snack {
  position: fixed; left: var(--dc-gutter); right: var(--dc-gutter); bottom: calc(var(--dc-bar-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  border-radius: 4px; background: var(--dc-btn); color: var(--dc-btn-fg); font: 600 15px var(--dc-sans);
}
.dc-snack a, .dc-snack button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: underline; }
.dc-scrim { position: fixed; inset: 0; z-index: 40; background: var(--dc-scrim); }
.dc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 88vh; overflow-y: auto;
  background: var(--dc-card); border-top: 1px solid var(--dc-rule); border-radius: 16px 16px 0 0;
}  /* role="dialog" aria-modal="true", focus moves in, Esc and scrim close, focus returns to the opener */
.dc-handle { width: 44px; height: 5px; margin: 12px auto; border-radius: 3px; background: var(--dc-edge); }

/* ---- 12. NOTIFICATION ROW, EMAIL FRAME ---------------------------------- */
.dc-notif { display: flex; gap: 12px; padding: 12px var(--dc-gutter); border-top: 1px solid var(--dc-rule); font: 500 15px/22px var(--dc-sans); }
.dc-notif__dot { width: 10px; height: 10px; flex: none; margin-top: 8px; border-radius: 50%; background: var(--dc-ink); } /* unread: dot + NEW chip */
.dc-notif.read .dc-notif__dot { background: transparent; border: 2px solid var(--dc-edge); }
.dc-notif b { display: block; font-weight: 700; }
.dc-notif > div > span { font-size: 14px; color: var(--dc-ink-2); } /* the sub-line only; a status pill inside the title keeps its own colours */
.dc-email { margin: 16px; overflow: hidden; background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; } /* design preview only; real emails are 600px, inline styles, plain-text alternative */
.dc-email__subj { padding: 12px 16px; border-bottom: 1px solid var(--dc-rule); font: 700 14px/20px var(--dc-sans); }
.dc-email__body { padding: 16px; }
.dc-email__ft { padding: 4px 16px 16px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.dc-email__ft a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 16px; text-decoration: underline; text-underline-offset: 4px; }

/* ---- 13. FOOTER --------------------------------------------------------- */
.dc-footer { margin-top: 32px; padding: 32px var(--dc-gutter) 48px; background: var(--dc-footer-bg); color: var(--dc-footer-fg); }
.dc-footer img { height: 44px; width: auto; margin-bottom: 12px; }
.dc-footer p { margin: 0 0 16px; font: italic 16px var(--dc-serif); color: var(--dc-footer-fg-2); }
.dc-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font: 500 14px var(--dc-sans); }
.dc-footer__links a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--dc-footer-rule); }

/* ---- 14. DESKTOP (min-width 1024px; designed at 1280) -------------------- */
.dc-dtop, .dc-dnav, .dc-dfooter { display: none; }
@media (min-width: 1024px) {
  body.dc, .dc-root { font-size: 18px; line-height: 29px; }
  :root { --dc-gutter: 40px; }   /* every block that uses the gutter lines up on 40px at desktop width */
  .dc-page { max-width: 1280px; margin: 0 auto; }
  .dc-pad { padding: 0 40px; }
  .dc-h-display { font-size: 58px; line-height: 68px; }
  .dc-h-title { font-size: 38px; line-height: 46px; }
  .dc-h-sec { font-size: 30px; line-height: 38px; }
  .dc-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; padding: 0 40px; }
  .dc-hdr, .dc-nav, .dc-footer, .dc-tabbar { display: none; } /* desktop swaps in .dc-dtop / .dc-dnav / .dc-dfooter; Maker and Designer desktop use .dc-dtop with the studio mark */
  .dc-dtop {
    height: 84px; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 32px; padding: 0 40px;
    background: var(--dc-canvas); border-bottom: 1px solid var(--dc-rule);
  }
  .dc-dtop img { height: 40px; width: auto; }
  .dc-dtop--studio img { height: 26px; }
  .dc-dtop .dc-search { margin: 0; }
  .dc-dacts { display: flex; gap: 8px; }
  .dc-dacts a { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; min-width: 44px; padding: 0 12px; font: 600 15px var(--dc-sans); }
  .dc-dnav { display: flex; align-items: center; gap: 32px; height: 52px; padding: 0 40px; border-bottom: 1px solid var(--dc-rule); font: 700 14px var(--dc-sans); letter-spacing: .1em; text-transform: uppercase; }
  .dc-dnav a { height: 52px; min-width: 44px; display: flex; align-items: center; }
  .dc-dnav a[aria-current], .dc-dnav a.on { box-shadow: inset 0 -3px 0 var(--dc-ink); }
  .dc-dnav .dc-sp { margin-left: auto; }
  .dc-dfooter {
    display: grid; grid-template-columns: 260px 1fr 1fr 1fr; gap: 48px; margin-top: 48px; padding: 48px 40px;
    background: var(--dc-footer-bg); color: var(--dc-footer-fg); font: 500 16px/32px var(--dc-sans);
  }
  .dc-dfooter img { height: 60px; width: auto; }
  .dc-dfooter .dc-tg { margin-top: 12px; font: italic 400 17px/26px var(--dc-serif); color: var(--dc-footer-fg-2); }
  .dc-dfooter b { display: block; margin-bottom: 8px; font: 700 14px var(--dc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-footer-fg-2); }
  .dc-dfooter a { display: block; min-height: 44px; }
}