/* ============================================================
   /tools/retail-demo — "next-purchase" clienteling demo.
   A bespoke editorial-luxe skin (NOT the site design system):
   hairline rules over boxes, serif display numerals, letterspaced
   labels. Built from the tvyal brand palette + brand fonts.
   Language/theme arrive via the modal bridge (no in-page toggle).
   ============================================================ */

@font-face { font-family:'GHEAMariam'; src:url('/fonts/GHEAMariamReg.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'GHEAMariam'; src:url('/fonts/GHEAMariamBld.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'GHEAGrapalat'; src:url('/fonts/GHEAGrpalatReg.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'GHEAGrapalat'; src:url('/fonts/GHEAGpalatBld.otf') format('opentype'); font-weight:700; font-display:swap; }

:root {
  --rd-navy:#003f5c; --rd-navy-2:#2f4b7c; --rd-purple:#665191; --rd-magenta:#a05195;
  --rd-pink:#d45087; --rd-coral:#f95d6a; --rd-orange:#ff7c43; --rd-gold:#ffa600; --rd-cream:#fffcf5;
  --rd-serif:'GHEAMariam', Georgia, serif;
  --rd-sans:'GHEAGrapalat', system-ui, sans-serif;
}

.rd-dark {
  --rd-bg:#06141d;
  --rd-text:var(--rd-cream);
  --rd-dim:#8aa0b0;          /* muted labels */
  --rd-faint:#4a6072;        /* very quiet */
  --rd-rule:rgba(255,166,0,.22);
  --rd-rule-soft:rgba(255,252,245,.10);
  --rd-accent:var(--rd-gold);
  --rd-field:rgba(255,252,245,.03);
}
.rd-light {
  --rd-bg:#fbf6ec;
  --rd-text:#10222e;
  --rd-dim:#5c7385;
  --rd-faint:#9aa9b4;
  --rd-rule:rgba(178,106,0,.35);
  --rd-rule-soft:rgba(0,63,92,.12);
  --rd-accent:#b26a00;
  --rd-field:rgba(0,63,92,.025);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--rd-sans);
  background:var(--rd-bg); color:var(--rd-text);
  line-height:1.5; -webkit-font-smoothing:antialiased; font-size:16px;
}

/* subtle gold vignette so it doesn't read as a flat app screen */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,166,0,.06), transparent 55%);
}
.rd-light body::before { background:radial-gradient(120% 80% at 100% 0%, rgba(255,124,67,.07), transparent 55%); }

.rd-shell {
  position:relative; z-index:1;
  max-width:880px; margin:0 auto; min-height:100%;
  padding:clamp(28px,5vw,56px) clamp(20px,5vw,52px) 36px;
  display:flex; flex-direction:column;
}

/* ── Close — shares the site .btn-cta fill (orange), matching the
   consultation popup + YouTube modal close controls. Replicated here
   because the iframe doesn't load design-system.css. ── */
.rd-close {
  position:fixed; top:18px; right:20px; z-index:10;
  width:38px; height:38px; border:0; cursor:pointer;
  background:#ff7c43; color:#000;
  font-size:1.3rem; line-height:1; display:grid; place-items:center;
  transition:background .2s, transform .2s;
}
.rd-close:hover { background:#e05a20; transform:translateY(-2px); }
/* inside the /tools/retail-demo page (?embed=page): the site nav is there, so no close button, and the
   page is wide, so the column is too (the modal keeps its 880px) */
html.rd-in-page .rd-close { display:none; }
html.rd-in-page .rd-shell { max-width:1200px; }

/* ── Header ── */
.rd-header { padding-bottom:22px; border-bottom:1px solid var(--rd-rule); margin-bottom:26px; }
.rd-eyebrow {
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  color:var(--rd-accent); margin-bottom:14px;
}
.rd-title {
  font-family:var(--rd-serif); font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.015em;
  color:var(--rd-text);
}
.rd-asof {
  margin-top:12px; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; color:var(--rd-dim);
}
.rd-asof time { color:var(--rd-accent); }

/* ── Controls ── */
.rd-controls {
  display:flex; gap:clamp(24px,5vw,56px); flex-wrap:wrap; align-items:flex-end;
  margin-bottom:34px;
}
.rd-field { display:flex; flex-direction:column; gap:11px; }
.rd-field--customer { flex:1 1 280px; min-width:230px; }
.rd-label {
  font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--rd-faint);
}

/* Typeahead — underline + magnifier so it reads as a search */
.rd-select { position:relative; }
.rd-search-icon {
  position:absolute; left:2px; top:8px; width:21px; height:21px;
  color:var(--rd-accent); pointer-events:none; transition:color .2s;
}
.rd-search {
  width:100%; font-family:var(--rd-serif); font-size:1.4rem; color:var(--rd-text);
  background:transparent; border:0; border-bottom:1px solid var(--rd-rule);
  padding:4px 0 9px 33px; outline:none; transition:border-color .2s;
}
.rd-search:focus { border-bottom-color:var(--rd-accent); }
.rd-select:focus-within .rd-search-icon { color:var(--rd-accent); }
.rd-search::placeholder { color:var(--rd-dim); font-style:italic; }
/* highlighted (select-all) text on focus reads as "ready to type" */
.rd-search::selection { background:rgba(255,166,0,.28); }
.rd-options {
  list-style:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  max-height:300px; overflow-y:auto;
  background:var(--rd-bg); border:1px solid var(--rd-rule);
  box-shadow:0 24px 50px rgba(0,0,0,.45); display:none;
}
.rd-options.is-open { display:block; }
.rd-option {
  padding:11px 16px; cursor:pointer; display:flex; justify-content:space-between; gap:14px;
  align-items:baseline; border-bottom:1px solid var(--rd-rule-soft);
}
.rd-option:last-child { border-bottom:0; }
.rd-option:hover, .rd-option.is-active { background:var(--rd-field); }
.rd-option:hover .rd-oname, .rd-option.is-active .rd-oname { color:var(--rd-accent); }
.rd-oname { font-family:var(--rd-serif); font-size:1.02rem; }
.rd-option .rd-code { color:var(--rd-faint); font-size:.72rem; letter-spacing:.12em; }

/* Season — editorial text tabs, no pills */
.rd-seasons { display:flex; gap:clamp(14px,3vw,26px); align-items:baseline; }
.rd-season-btn {
  font-family:var(--rd-sans); font-size:.74rem; font-weight:700;
  letter-spacing:.04em;
  color:var(--rd-faint); background:transparent; border:0; cursor:pointer;
  padding:0 0 6px; position:relative; transition:color .2s;
}
.rd-season-btn::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--rd-accent); transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.rd-season-btn:hover { color:var(--rd-dim); }
.rd-season-btn.is-active { color:var(--rd-accent); }
.rd-season-btn.is-active::after { transform:scaleX(1); }

/* ── Customer head ── */
.rd-result { flex:1; }
.rd-customer-head { margin-bottom:6px; }
.rd-lead { font-family:var(--rd-serif); font-size:1.7rem; font-weight:700; color:var(--rd-text); line-height:1.2; }
.rd-lead .rd-code { font-family:var(--rd-sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--rd-faint); margin-left:10px; vertical-align:middle; }
.rd-sub { font-size:.82rem; letter-spacing:.04em; color:var(--rd-dim); font-style:italic; margin-top:4px; }

/* ── Ranked rows (no boxes — hairline rhythm) ── */
.rd-rows { margin-top:8px; }
.rd-row {
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,30px);
  align-items:start; padding:22px 0; border-bottom:1px solid var(--rd-rule-soft);
}
.rd-row:first-child { border-top:1px solid var(--rd-rule); }
.rd-rank {
  font-family:var(--rd-serif); font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--rd-accent); min-width:1.6ch; padding-top:2px;
  font-variant-numeric:tabular-nums;
}
.rd-main { min-width:0; }
.rd-cat { font-family:var(--rd-serif); font-size:1.22rem; line-height:1.25; color:var(--rd-text); }
.rd-cat .rd-store { color:var(--rd-accent); }
.rd-egs { font-size:.86rem; font-style:italic; color:var(--rd-dim); margin-top:5px; }
.rd-meta {
  margin-top:11px; font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--rd-faint);
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
}
.rd-meta .sep { color:var(--rd-rule); }
.rd-meta .rd-off { color:var(--rd-coral); }
.rd-meta .rd-price-high { color:var(--rd-accent); }
.rd-swatch { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; box-shadow:0 0 0 1px rgba(255,255,255,.2); }

/* Likelihood — serif figure + thin bar */
.rd-meter { text-align:right; min-width:96px; }
.rd-pct { font-family:var(--rd-serif); font-size:1.7rem; font-weight:700; line-height:1; color:var(--rd-text); font-variant-numeric:tabular-nums; }
.rd-pct sup { font-size:.5em; vertical-align:super; color:var(--rd-dim); }
.rd-meter-label { font-size:.6rem; font-weight:700; letter-spacing:.04em; color:var(--rd-faint); margin-top:5px; }
.rd-bar { height:2px; background:var(--rd-rule-soft); margin-top:9px; overflow:hidden; }
.rd-bar-fill { height:100%; background:linear-gradient(90deg, var(--rd-pink), var(--rd-orange), var(--rd-gold)); }

/* States */
.rd-loading, .rd-empty { color:var(--rd-dim); font-size:.95rem; font-style:italic; padding:30px 0; }

/* ── Footer ── */
.rd-footer { margin-top:34px; padding-top:20px; border-top:1px solid var(--rd-rule); }
.rd-note { font-size:.74rem; line-height:1.6; color:var(--rd-faint); max-width:64ch; }
.rd-foot-row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.rd-badge { font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--rd-faint); }
.rd-badge a { color:var(--rd-accent); text-decoration:none; }
.rd-cta { font-family:var(--rd-serif); font-size:1rem; color:var(--rd-accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.rd-cta:hover { border-color:var(--rd-accent); }

/* ── Responsive ── */
@media (max-width:560px) {
  .rd-row { grid-template-columns:auto 1fr; }
  .rd-meter { grid-column:2; text-align:left; margin-top:4px; }
  .rd-meter-label { display:inline; margin-left:8px; }
  .rd-bar { max-width:180px; }
}