/* ==========================================================================
   On the Shortlist with AI · kit tokens.css
   Own visual identity (brief §5). NOT the Cupperlab look: no Cupperlab cyan
   or orange as system colors. The Cupperlab logo is only used as the
   "powered by Cupperlab" seal, in color, never recolored.
   Mobile first. Tested at 390 px and 1440 px. No external fonts, no CDN.
   All classes are prefixed "ots-".
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --ots-bg: #FAFAF7;            /* page: almost white, slightly warm */
  --ots-surface: #FFFFFF;       /* cards */
  --ots-surface-2: #F3F3EE;     /* inset areas, table header */
  --ots-line: #E3E3DC;          /* thin borders */
  --ots-line-strong: #C9C9C0;
  --ots-ink: #15171C;           /* main text, primary button */
  --ots-ink-2: #3A3F4A;         /* secondary text */
  --ots-muted: #646A76;         /* captions, meta (AA on white) */

  --ots-on: #0B7A55;            /* ACCENT: "on the list" / named */
  --ots-on-strong: #075C40;
  --ots-on-soft: #E2F3EA;
  --ots-off: #9B3550;           /* second tone: "not named" (never used for "no data") */
  --ots-off-soft: #F7E7EC;
  --ots-nodata: #7C818C;        /* not measured / no data: neutral grey, dashed */
  --ots-nodata-soft: #EFEFEC;
  --ots-info: #2F4B7C;          /* method boxes, links */
  --ots-info-soft: #E8EDF6;
  --ots-warn: #8A5A00;          /* "taking longer", pending data */
  --ots-warn-soft: #FFF3D6;
  --ots-error: #A12622;
  --ots-error-soft: #FBE9E7;

  --ots-demo: #FFD84D;          /* DEMO ribbon / DEMO tags */
  --ots-demo-ink: #1B1B1B;

  --ots-focus: 0 0 0 3px rgba(11, 122, 85, .35);

  /* ---- Type (system stack only) ---- */
  --ots-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ots-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ots-fs-xs: .75rem;    /* 12 */
  --ots-fs-sm: .875rem;   /* 14 */
  --ots-fs-md: 1rem;      /* 16 */
  --ots-fs-lg: 1.125rem;  /* 18 */
  --ots-fs-xl: 1.375rem;  /* 22 */
  --ots-fs-2xl: 1.75rem;  /* 28 */
  --ots-fs-3xl: 2.25rem;  /* 36 */
  --ots-fs-hero: clamp(2rem, 6vw, 3.5rem);
  --ots-fs-verdict: clamp(3.5rem, 14vw, 6.5rem);
  --ots-lh: 1.5;
  --ots-lh-tight: 1.15;

  /* ---- Space (4 px grid) ---- */
  --ots-s1: 4px; --ots-s2: 8px; --ots-s3: 12px; --ots-s4: 16px;
  --ots-s5: 24px; --ots-s6: 32px; --ots-s7: 48px; --ots-s8: 64px; --ots-s9: 96px;

  /* ---- Radius / shadow ---- */
  --ots-r-sm: 6px; --ots-r-md: 10px; --ots-r-lg: 16px; --ots-r-pill: 999px;
  --ots-shadow-1: 0 1px 2px rgba(21, 23, 28, .06);
  --ots-shadow-2: 0 4px 16px rgba(21, 23, 28, .08);
  --ots-shadow-3: 0 12px 40px rgba(21, 23, 28, .14);

  /* ---- Layout ---- */
  --ots-ribbon-h: 32px;         /* v1.1: 32 so the DEMO tab inside it is a real tap target */
  --ots-demotab-w: 92px;        /* width reserved at the right of the ribbon for the DEMO panel tab */
  --ots-header-h: 60px;
  --ots-max: 1120px;
  --ots-max-narrow: 720px;
  --ots-tap: 44px;              /* minimum tap target */
}

/* ---------------- Reset (minimal) ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ots-ribbon-h) + var(--ots-header-h) + 8px); scroll-padding-bottom: 16px; }
body {
  margin: 0; background: var(--ots-bg); color: var(--ots-ink);
  font-family: var(--ots-font); font-size: var(--ots-fs-md); line-height: var(--ots-lh);
  padding-top: var(--ots-ribbon-h); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class] { list-style: none; padding: 0; } /* v1.1: ol keeps its numbers; lists that need none say so (.ots-rail) */
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ots-info); text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--ots-focus); border-radius: var(--ots-r-sm); }
[hidden] { display: none !important; }
.ots-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Typography helpers ---------------- */
.ots-h1 { font-size: var(--ots-fs-hero); line-height: var(--ots-lh-tight); letter-spacing: -.02em; font-weight: 750; }
.ots-h2 { font-size: var(--ots-fs-2xl); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }
.ots-h3 { font-size: var(--ots-fs-lg); line-height: 1.3; font-weight: 650; }
.ots-lead { font-size: var(--ots-fs-lg); color: var(--ots-ink-2); }
.ots-meta { font-size: var(--ots-fs-sm); color: var(--ots-muted); }
.ots-small { font-size: var(--ots-fs-xs); color: var(--ots-muted); }
.ots-mono { font-family: var(--ots-mono); font-size: .9em; }
.ots-num { font-variant-numeric: tabular-nums; }
.ots-pending { /* visible placeholder: [data pending] / [dato pendiente] */
  display: inline-block; padding: 0 .35em; border: 1px dashed var(--ots-warn);
  background: var(--ots-warn-soft); color: var(--ots-warn); border-radius: 4px;
  font-size: .9em; font-family: var(--ots-mono);
}

/* ---------------- Layout ---------------- */
.ots-container { width: 100%; max-width: var(--ots-max); margin: 0 auto; padding: 0 var(--ots-s4); }
.ots-container--narrow { max-width: var(--ots-max-narrow); }
.ots-section { padding: var(--ots-s7) 0; }
.ots-stack > * + * { margin-top: var(--ots-s4); }
.ots-stack-lg > * + * { margin-top: var(--ots-s6); }
.ots-row { display: flex; flex-wrap: wrap; gap: var(--ots-s3); align-items: center; }
.ots-grid { display: grid; gap: var(--ots-s4); grid-template-columns: minmax(0, 1fr); }
.ots-grid > *, .ots-stack > *, .ots-stack-lg > * { min-width: 0; } /* long code/snippets never widen the page */
.ots-divider { border: 0; border-top: 1px solid var(--ots-line); margin: var(--ots-s5) 0; }

/* ---------------- Card ---------------- */
.ots-card {
  background: var(--ots-surface); border: 1px solid var(--ots-line);
  border-radius: var(--ots-r-lg); padding: var(--ots-s5); box-shadow: var(--ots-shadow-1);
}
.ots-card--inset { background: var(--ots-surface-2); box-shadow: none; }
.ots-card--flat { box-shadow: none; }
.ots-card__title { font-size: var(--ots-fs-lg); font-weight: 650; margin-bottom: var(--ots-s2); }

/* ---------------- Buttons ---------------- */
.ots-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ots-s2);
  min-height: var(--ots-tap); padding: 10px 20px; border-radius: var(--ots-r-md);
  border: 1px solid transparent; font-weight: 600; font-size: var(--ots-fs-md);
  line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ots-btn--primary { background: var(--ots-ink); color: #fff; }
.ots-btn--primary:hover { background: #2A2E37; }
.ots-btn--accent { background: var(--ots-on); color: #fff; }
.ots-btn--accent:hover { background: var(--ots-on-strong); }
.ots-btn--secondary { background: var(--ots-surface); color: var(--ots-ink); border-color: var(--ots-line-strong); }
.ots-btn--secondary:hover { border-color: var(--ots-ink); }
.ots-btn--ghost { background: transparent; color: var(--ots-ink); }
.ots-btn--ghost:hover { background: var(--ots-surface-2); }
.ots-btn--block { display: flex; width: 100%; }
.ots-btn--sm { min-height: 36px; padding: 6px 12px; font-size: var(--ots-fs-sm); }
.ots-btn[disabled], .ots-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------------- Forms ---------------- */
.ots-field { display: flex; flex-direction: column; gap: var(--ots-s1); }
.ots-label { font-size: var(--ots-fs-sm); font-weight: 600; color: var(--ots-ink-2); }
.ots-input, .ots-select, .ots-textarea {
  width: 100%; min-height: var(--ots-tap); padding: 10px 12px;
  background: var(--ots-surface); border: 1px solid var(--ots-line-strong);
  border-radius: var(--ots-r-md); font-size: var(--ots-fs-md);
}
.ots-textarea { min-height: 96px; resize: vertical; }
.ots-input:focus, .ots-select:focus, .ots-textarea:focus { outline: none; border-color: var(--ots-on); box-shadow: var(--ots-focus); }
.ots-input[aria-invalid="true"] { border-color: var(--ots-error); }
.ots-help { font-size: var(--ots-fs-xs); color: var(--ots-muted); }
.ots-error-text { font-size: var(--ots-fs-sm); color: var(--ots-error); }
.ots-check { display: flex; gap: var(--ots-s3); align-items: flex-start; font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }
.ots-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ots-on); }
/* Domain bar: input + button, stacks at 390 */
.ots-domainbar { display: flex; flex-direction: column; gap: var(--ots-s2); }
.ots-domainbar .ots-input { font-size: var(--ots-fs-lg); min-height: 52px; }
.ots-domainbar .ots-btn { min-height: 52px; }

/* ---------------- Chips, tags, badges ---------------- */
.ots-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px;
  border-radius: var(--ots-r-pill); border: 1px solid var(--ots-line-strong);
  background: var(--ots-surface); font-size: var(--ots-fs-sm); color: var(--ots-ink-2);
}
button.ots-chip { min-height: 36px; }
.ots-chip[aria-pressed="true"], .ots-chip.is-selected { background: var(--ots-ink); color: #fff; border-color: var(--ots-ink); }
.ots-chip--on { background: var(--ots-on-soft); border-color: transparent; color: var(--ots-on-strong); }
.ots-chip--off { background: var(--ots-off-soft); border-color: transparent; color: var(--ots-off); }
.ots-chip--nodata { background: var(--ots-nodata-soft); border: 1px dashed var(--ots-nodata); color: var(--ots-ink-2); }
.ots-chip--demo { background: var(--ots-demo); border-color: transparent; color: var(--ots-demo-ink); font-weight: 700; letter-spacing: .02em; }
.ots-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------------- Table ---------------- */
.ots-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); }
.ots-table { width: 100%; border-collapse: collapse; font-size: var(--ots-fs-sm); background: var(--ots-surface); }
.ots-table th, .ots-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ots-line); vertical-align: top; }
.ots-table th { background: var(--ots-surface-2); font-weight: 600; color: var(--ots-ink-2); }
.ots-table tr:last-child td { border-bottom: 0; }
.ots-table td.ots-num, .ots-table th.ots-num { text-align: right; white-space: nowrap; }

/* ---------------- Alerts ---------------- */
.ots-alert { display: flex; gap: var(--ots-s3); padding: var(--ots-s3) var(--ots-s4); border-radius: var(--ots-r-md); border: 1px solid; font-size: var(--ots-fs-sm); }
.ots-alert--info { background: var(--ots-info-soft); border-color: #C9D5EA; color: var(--ots-info); }
.ots-alert--warn { background: var(--ots-warn-soft); border-color: #F0D58C; color: var(--ots-warn); }
.ots-alert--error { background: var(--ots-error-soft); border-color: #F1C2BD; color: var(--ots-error); }
.ots-alert--ok { background: var(--ots-on-soft); border-color: #BFE3D0; color: var(--ots-on-strong); }
.ots-alert--demo { background: #FFF8D6; border-color: var(--ots-demo); color: var(--ots-demo-ink); }
.ots-alert strong { color: inherit; }

/* ---------------- DEMO ribbon (fixed, every screen) ---------------- */
.ots-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--ots-ribbon-h);
  display: flex; align-items: center; justify-content: center; justify-content: safe center; padding: 0 calc(var(--ots-demotab-w) + 6px) 0 8px;
  background: repeating-linear-gradient(-45deg, var(--ots-demo) 0 14px, #F5CC2E 14px 28px);
  color: var(--ots-demo-ink); font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

/* ---------------- Header ---------------- */
.ots-header { position: sticky; top: var(--ots-ribbon-h); z-index: 900; background: rgba(250, 250, 247, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ots-line); }
.ots-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ots-s3); min-height: var(--ots-header-h); }
.ots-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ots-ink); min-width: 0; flex: 1 1 auto; }
.ots-brand__name { font-weight: 800; letter-spacing: -.01em; font-size: 15px; line-height: 1.1; white-space: nowrap; }
.ots-brand__name b { color: var(--ots-on); font-weight: 800; }
.ots-brand__tag { font-size: 11px; line-height: 1.25; color: var(--ots-muted); } /* wraps at 390 so the Spanish line is never cut */
.ots-header__right { display: flex; align-items: center; gap: var(--ots-s2); flex: none; }
.ots-header .ots-logo--sm { width: 60px; height: 12px; } /* 60x12 keeps the 4.98 ratio; back to 80x16 at >= 600 */
.ots-langswitch { display: inline-flex; border: 1px solid var(--ots-line-strong); border-radius: var(--ots-r-pill); overflow: hidden; background: var(--ots-surface); }
.ots-langswitch button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; background: transparent; font-weight: 700; font-size: var(--ots-fs-sm); color: var(--ots-muted); }
.ots-langswitch button[aria-pressed="true"] { background: var(--ots-ink); color: #fff; }

/* ---------------- "powered by Cupperlab" seal ----------------
   Logo in color, never recolored. Always give <img> width+height that keep
   2240x450 (ratio 4.978). Use .ots-logo + one size modifier. */
.ots-seal { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ots-fs-xs); color: var(--ots-muted); text-decoration: none; white-space: nowrap; }
.ots-logo { object-fit: contain; display: inline-block; flex: none; }
.ots-logo--xs { width: 60px; height: 12px; }   /* 60/12 = 5.0 ≈ 4.978 */
.ots-logo--sm { width: 80px; height: 16px; }   /* header, footer */
.ots-logo--md { width: 120px; height: 24px; }  /* card, receipts */
.ots-header .ots-seal__text { display: none; } /* at 390 the header shows only the logo; text back at >= 600 */

/* ---------------- Footer ---------------- */
.ots-footer { margin-top: var(--ots-s8); border-top: 1px solid var(--ots-line); padding: var(--ots-s6) 0 var(--ots-s7); background: var(--ots-surface); } /* v1.1: nothing floats at the bottom any more */
.ots-footer__grid { display: grid; gap: var(--ots-s4); }
.ots-footer__method { font-size: var(--ots-fs-sm); color: var(--ots-ink-2); max-width: 60ch; }
.ots-footer__legal { font-size: var(--ots-fs-xs); color: var(--ots-muted); }

/* ---------------- DEMO panel (floating, collapsible) ---------------- */
/* v1.1 (S4): the tab lives at the right end of the fixed DEMO ribbon, so it never covers page content
   (legal footer, checkout consent). The panel drops down from it and closes with one tap. */
.ots-demopanel { position: fixed; top: 0; right: 0; z-index: 1100; max-width: 100vw; font-size: var(--ots-fs-sm); }
.ots-demopanel__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: var(--ots-demotab-w); height: var(--ots-ribbon-h); padding: 0 10px; border: 0; border-left: 1px solid rgba(0,0,0,.25); border-radius: 0 0 0 var(--ots-r-sm); background: var(--ots-ink); color: var(--ots-demo); font-size: var(--ots-fs-xs); font-weight: 800; letter-spacing: .06em; }
.ots-demopanel__toggle[aria-expanded="true"] { background: var(--ots-demo); color: var(--ots-demo-ink); }
.ots-demopanel__speed { font-weight: 700; opacity: .85; }
.ots-demopanel__arrow { display: none; }
.ots-demopanel__body { width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--ots-ribbon-h) - 16px); overflow: auto; margin: 4px 8px 0; background: var(--ots-surface); border: 2px solid var(--ots-demo); border-radius: var(--ots-r-lg); padding: var(--ots-s4); box-shadow: var(--ots-shadow-3); }
.ots-demopanel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ots-s2); }
.ots-demopanel__body h2 { font-size: var(--ots-fs-md); margin: 0; }
.ots-demopanel__group { margin-top: var(--ots-s3); }
.ots-demopanel__group > .ots-label { display: block; margin-bottom: 6px; }
.ots-demopanel .ots-row { gap: 6px; }
.ots-demopanel__wrap { display: flex; flex-direction: column; align-items: flex-end; }
.ots-demopanel__states button { font-family: var(--ots-mono); font-size: var(--ots-fs-xs); }

/* ---------------- Phase rail ----------------
   li.ots-phase + state class: is-pending | is-active | is-done | is-nodata | is-error */
.ots-rail { display: flex; flex-direction: column; gap: 0; counter-reset: ots-phase; list-style: none; padding: 0; }
.ots-phase { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--ots-s3); padding: 10px 0; }
.ots-phase::before { /* connector line */
  content: ""; position: absolute; left: 15px; top: 38px; bottom: -6px; width: 2px; background: var(--ots-line);
}
.ots-phase:last-child::before { display: none; }
.ots-phase__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--ots-fs-sm); font-weight: 700; border: 2px solid var(--ots-line-strong); background: var(--ots-surface); color: var(--ots-muted); z-index: 1; }
.ots-phase__name { font-weight: 600; color: var(--ots-muted); }
.ots-phase__line { font-size: var(--ots-fs-sm); color: var(--ots-muted); min-height: 1.2em; }
.ots-phase__bar { height: 4px; border-radius: 2px; background: var(--ots-line); margin-top: 6px; overflow: hidden; }
.ots-phase__bar > span { display: block; height: 100%; width: 0; background: var(--ots-ink); transition: width .2s linear; }
.ots-phase.is-active .ots-phase__icon { border-color: var(--ots-ink); color: var(--ots-ink); animation: ots-pulse 1.2s ease-in-out infinite; }
.ots-phase.is-active .ots-phase__name { color: var(--ots-ink); }
.ots-phase.is-done .ots-phase__icon { background: var(--ots-on); border-color: var(--ots-on); color: #fff; }
.ots-phase.is-done .ots-phase__name { color: var(--ots-ink); }
.ots-phase.is-done::before { background: var(--ots-on); }
.ots-phase.is-done .ots-phase__bar { display: none; }
.ots-phase.is-nodata .ots-phase__icon { border-style: dashed; border-color: var(--ots-nodata); background: var(--ots-nodata-soft); color: var(--ots-ink-2); }
.ots-phase.is-nodata .ots-phase__name { color: var(--ots-ink-2); }
.ots-phase.is-nodata .ots-phase__bar { display: none; }
.ots-phase.is-error .ots-phase__icon { border-color: var(--ots-error); color: var(--ots-error); }
.ots-phase.is-pending .ots-phase__bar, .ots-phase.is-error .ots-phase__bar { display: none; }
.ots-rail__status { display: flex; flex-wrap: wrap; gap: var(--ots-s2) var(--ots-s4); align-items: center; font-size: var(--ots-fs-sm); color: var(--ots-ink-2); margin-top: var(--ots-s3); }
.ots-speedctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ots-speedctl button.ots-chip { min-width: 48px; justify-content: center; font-weight: 700; }
@keyframes ots-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21,23,28,.18); } 50% { box-shadow: 0 0 0 6px rgba(21,23,28,0); } }
@media (prefers-reduced-motion: reduce) { .ots-phase.is-active .ots-phase__icon { animation: none; } }

/* ---------------- Verdict (big number, never a rank) ---------------- */
.ots-verdict { display: grid; gap: var(--ots-s3); }
.ots-verdict > .ots-chip { justify-self: start; }
.ots-verdict__num { display: flex; align-items: baseline; gap: .25em; font-size: var(--ots-fs-verdict); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ots-verdict__num small { font-size: .38em; font-weight: 600; color: var(--ots-muted); letter-spacing: 0; }
.ots-verdict--on .ots-verdict__num { color: var(--ots-on); }
.ots-verdict--off .ots-verdict__num { color: var(--ots-off); }
.ots-verdict--nodata .ots-verdict__num { color: var(--ots-nodata); }
.ots-verdict__text { font-size: var(--ots-fs-xl); font-weight: 650; line-height: 1.25; }
.ots-verdict__when { font-size: var(--ots-fs-sm); color: var(--ots-muted); }
.ots-verdict__margin { font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }
.ots-engines { display: grid; gap: var(--ots-s2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ots-engine { display: flex; justify-content: space-between; gap: var(--ots-s3); align-items: baseline; padding: 10px 12px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface); font-size: var(--ots-fs-sm); }
.ots-engine__count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ots-engine.is-nodata { border-style: dashed; background: var(--ots-nodata-soft); }
/* Lock block (A: summary wall) */
.ots-locked { position: relative; border: 1px dashed var(--ots-line-strong); border-radius: var(--ots-r-lg); padding: var(--ots-s5); background: repeating-linear-gradient(135deg, var(--ots-surface) 0 10px, var(--ots-surface-2) 10px 20px); text-align: center; color: var(--ots-ink-2); }
/* Quote from a model */
.ots-quote { border-left: 3px solid var(--ots-line-strong); padding: 2px 0 2px var(--ots-s3); color: var(--ots-ink-2); font-size: var(--ots-fs-sm); }
.ots-quote cite { display: block; font-style: normal; font-size: var(--ots-fs-xs); color: var(--ots-muted); margin-top: 4px; }
/* Collapsible (questions, deliverables) */
.ots-details { border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface); }
.ots-details > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 600; min-height: var(--ots-tap); display: flex; align-items: center; justify-content: space-between; gap: var(--ots-s3); }
.ots-details > summary::-webkit-details-marker { display: none; }
.ots-details > summary::after { content: "+"; font-weight: 700; color: var(--ots-muted); }
.ots-details[open] > summary::after { content: "\2212"; }
.ots-details > :not(summary) { padding: 0 16px 16px; }
.ots-method { background: var(--ots-info-soft); border: 1px solid #C9D5EA; border-radius: var(--ots-r-lg); padding: var(--ots-s5); font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }
.ots-method h3 { color: var(--ots-info); }
.ots-demo-foot { font-size: var(--ots-fs-xs); font-weight: 700; color: var(--ots-demo-ink); background: var(--ots-demo); display: inline-block; padding: 2px 8px; border-radius: 4px; }

/* ---------------- Price card ---------------- */
.ots-prices { display: grid; gap: var(--ots-s4); grid-template-columns: 1fr; }
.ots-price { display: flex; flex-direction: column; gap: var(--ots-s3); background: var(--ots-surface); border: 1px solid var(--ots-line); border-radius: var(--ots-r-lg); padding: var(--ots-s5); box-shadow: var(--ots-shadow-1); }
.ots-price--featured { border: 2px solid var(--ots-ink); }
.ots-price__name { font-size: var(--ots-fs-lg); font-weight: 700; }
.ots-price__amount { font-size: var(--ots-fs-3xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ots-price__amount small { font-size: var(--ots-fs-sm); font-weight: 600; color: var(--ots-muted); letter-spacing: 0; }
.ots-price__list { display: grid; gap: 6px; font-size: var(--ots-fs-sm); color: var(--ots-ink-2); padding-left: 0; list-style: none; }
.ots-price__list li { position: relative; padding-left: 22px; }
.ots-price__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--ots-on); border-bottom: 2px solid var(--ots-on); transform: rotate(-45deg); }
.ots-price__actions { margin-top: auto; display: grid; gap: var(--ots-s2); }
.ots-seller { display: flex; gap: var(--ots-s3); align-items: center; }
.ots-seller__photo { width: 48px; height: 48px; border-radius: 50%; border: 1px dashed var(--ots-warn); background: var(--ots-warn-soft); display: grid; place-items: center; font-size: 9px; color: var(--ots-warn); text-align: center; line-height: 1.1; flex: none; }

/* ---------------- Checkout (hosted-checkout look, simulated) ---------------- */
.ots-checkout { display: grid; grid-template-columns: 1fr; background: var(--ots-surface); }
.ots-checkout--full { min-height: calc(100vh - var(--ots-ribbon-h)); } /* when the checkout is its own screen */
.ots-checkout__summary { background: #F6F7F9; padding: var(--ots-s6) var(--ots-s4); border-bottom: 1px solid var(--ots-line); }
.ots-checkout__form { padding: var(--ots-s6) var(--ots-s4); }
.ots-checkout__inner { max-width: 420px; margin: 0 auto; display: grid; gap: var(--ots-s4); }
.ots-checkout__back { justify-self: start; } /* v1.1: the grid no longer stretches the back button */
.ots-checkout__merchant { display: flex; align-items: center; gap: var(--ots-s2); font-weight: 600; color: var(--ots-ink-2); font-size: var(--ots-fs-sm); }
.ots-checkout__total { font-size: var(--ots-fs-3xl); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ots-checkout__line { display: flex; justify-content: space-between; gap: var(--ots-s3); font-size: var(--ots-fs-sm); padding: 8px 0; border-bottom: 1px solid var(--ots-line); }
.ots-checkout__line--total { font-weight: 700; border-bottom: 0; }
.ots-nocard { border: 2px dashed var(--ots-demo); background: #FFFBEA; border-radius: var(--ots-r-md); padding: var(--ots-s4); text-align: center; font-weight: 700; color: var(--ots-demo-ink); font-size: var(--ots-fs-sm); }
.ots-btn--pay { background: #1A1F36; color: #fff; min-height: 48px; width: 100%; }
.ots-btn--pay:hover { background: #2B3150; }
.ots-checkout__foot { font-size: var(--ots-fs-xs); color: var(--ots-muted); text-align: center; }
.ots-success { text-align: center; display: grid; gap: var(--ots-s3); justify-items: center; }
.ots-success__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ots-on); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 800; }

/* ---------------- Inbox (simulated mail) ---------------- */
.ots-inbox { display: grid; grid-template-columns: 1fr; border: 1px solid var(--ots-line); border-radius: var(--ots-r-lg); overflow: hidden; background: var(--ots-surface); }
.ots-inbox__bar { display: flex; flex-wrap: wrap; gap: var(--ots-s2); align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--ots-surface-2); border-bottom: 1px solid var(--ots-line); }
.ots-inbox__list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.ots-inbox__item { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ots-line); background: var(--ots-surface); }
.ots-inbox__item.is-unread .ots-inbox__subject { font-weight: 700; }
.ots-inbox__item.is-selected { background: var(--ots-info-soft); }
.ots-inbox__from { font-size: var(--ots-fs-sm); color: var(--ots-ink-2); display: flex; justify-content: space-between; gap: var(--ots-s2); }
.ots-inbox__subject { font-size: var(--ots-fs-sm); }
.ots-inbox__preview { font-size: var(--ots-fs-xs); color: var(--ots-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ots-mail { padding: var(--ots-s5) var(--ots-s4); display: grid; gap: var(--ots-s3); font-size: var(--ots-fs-md); }
.ots-mail__head { border-bottom: 1px solid var(--ots-line); padding-bottom: var(--ots-s3); display: grid; gap: 2px; }
.ots-mail__subject { font-size: var(--ots-fs-lg); font-weight: 700; }
.ots-mail__body p + p { margin-top: var(--ots-s3); }
.ots-mail__body > * + .ots-row, .ots-mail__body > * + h4, .ots-mail__body > * + ol { margin-top: var(--ots-s3); }
.ots-mail__foot { border-top: 1px solid var(--ots-line); padding-top: var(--ots-s3); font-size: var(--ots-fs-xs); color: var(--ots-muted); display: grid; gap: 4px; }

/* ---------------- Agenda (slots) ---------------- */
.ots-agenda { display: grid; gap: var(--ots-s4); }
.ots-agenda__days { display: flex; gap: var(--ots-s2); overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.ots-agenda__day { flex: none; min-width: 72px; min-height: 56px; padding: 6px 10px; border: 1px solid var(--ots-line-strong); border-radius: var(--ots-r-md); background: var(--ots-surface); display: grid; place-items: center; font-size: var(--ots-fs-sm); line-height: 1.2; }
.ots-agenda__day[aria-pressed="true"] { background: var(--ots-ink); color: #fff; border-color: var(--ots-ink); }
.ots-agenda__slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ots-s2); }
.ots-slot { min-height: var(--ots-tap); border: 1px solid var(--ots-on); color: var(--ots-on-strong); background: var(--ots-surface); border-radius: var(--ots-r-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.ots-slot:hover { background: var(--ots-on-soft); }
.ots-slot[aria-pressed="true"] { background: var(--ots-on); color: #fff; }
.ots-slot[disabled] { border-color: var(--ots-line); color: var(--ots-nodata); text-decoration: line-through; background: var(--ots-surface-2); cursor: not-allowed; }
.ots-agenda__tz { font-size: var(--ots-fs-xs); color: var(--ots-muted); }

/* ---------------- Share card (named only) ---------------- */
.ots-sharecard { width: 100%; max-width: 480px; min-height: 240px; gap: 12px; border-radius: var(--ots-r-lg); background: #0F1A15; color: #fff; padding: 6%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--ots-shadow-2); position: relative; overflow: hidden; }
.ots-sharecard__kicker { font-size: clamp(10px, 2.6vw, 13px); letter-spacing: .08em; text-transform: uppercase; color: #9FE0C3; font-weight: 700; }
.ots-sharecard__name { font-size: clamp(18px, 5vw, 28px); font-weight: 800; line-height: 1.1; }
.ots-sharecard__stat { font-size: clamp(13px, 3.4vw, 17px); color: #D7EFE4; }
.ots-sharecard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; font-size: clamp(9px, 2.2vw, 11px); color: #A8B8B0; }
.ots-sharecard__brand { font-size: clamp(12px, 3vw, 15px); font-weight: 700; color: #fff; margin-bottom: 6px; }
.ots-sharecard__name { margin-top: 8px; }
.ots-sharecard__logo { background: #fff; border-radius: 6px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; color: #333; flex: none; font-size: 10px; white-space: nowrap; }
/* v1.1 (S8): expired never touches the logo. The text dims and a band says what happened. */
.ots-sharecard__band { align-self: flex-start; background: #fff; color: var(--ots-ink); font-weight: 700; font-size: clamp(11px, 2.8vw, 13px); padding: 4px 10px; border-radius: var(--ots-r-pill); }
.ots-sharecard.is-expired .ots-sharecard__text { opacity: .55; }

/* ---------------- Live badge ---------------- */
.ots-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border: 1px solid var(--ots-line-strong); border-radius: var(--ots-r-md); background: var(--ots-surface); font-size: 12px; line-height: 1.25; color: var(--ots-ink); box-shadow: var(--ots-shadow-1); max-width: 100%; }
.ots-badge__mark { width: 28px; height: 28px; border-radius: 50%; background: var(--ots-on); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; font-size: 14px; }
.ots-badge__title { font-weight: 700; }
.ots-badge__meta { color: var(--ots-muted); }
.ots-badge.is-expired { border-style: dashed; }
.ots-badge.is-expired .ots-badge__mark { background: var(--ots-nodata); }
.ots-snippet { max-width: 100%; font-family: var(--ots-mono); font-size: 12px; background: #16181D; color: #E6E6E6; padding: 12px; border-radius: var(--ots-r-md); overflow-x: auto; white-space: pre; }

/* ---------------- Public list (C) ---------------- */
.ots-list-group { display: grid; gap: var(--ots-s2); }
.ots-list-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface); }
.ots-list-item__head { display: flex; justify-content: space-between; gap: var(--ots-s3); align-items: baseline; flex-wrap: wrap; }
.ots-list-item__name { font-weight: 700; }
.ots-list-item__reply { font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }
.ots-seal-date { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface-2); font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }

/* ---------------- Toast ---------------- */
.ots-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 1200; background: var(--ots-ink); color: #fff; padding: 10px 16px; border-radius: var(--ots-r-pill); font-size: var(--ots-fs-sm); box-shadow: var(--ots-shadow-3); max-width: calc(100vw - 32px); }

/* ---------------- Breakpoints ---------------- */
@media (max-width: 599px) {
  :root { --ots-demotab-w: 80px; }
  .ots-demopanel__toggle { gap: 4px; padding: 0 6px; }
}
@media (min-width: 600px) {
  .ots-ribbon { font-size: var(--ots-fs-xs); letter-spacing: .06em; padding-left: var(--ots-s3); }
  .ots-demopanel__arrow { display: inline; }
  .ots-header .ots-seal__text { display: inline; }
  .ots-header .ots-logo--sm { width: 80px; height: 16px; }
  .ots-brand__name { font-size: var(--ots-fs-md); }
  .ots-sharecard { aspect-ratio: 1200 / 630; min-height: 0; }
  .ots-domainbar { flex-direction: row; }
  .ots-domainbar .ots-input { flex: 1; }
  .ots-agenda__slots { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .ots-container { padding: 0 var(--ots-s6); }
  .ots-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ots-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ots-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ots-footer__grid { grid-template-columns: 2fr 1fr; align-items: start; }
  .ots-checkout { grid-template-columns: 1fr 1fr; }
  .ots-checkout--full { min-height: calc(100vh - var(--ots-ribbon-h)); } /* when the checkout is its own screen */
.ots-checkout__summary { border-bottom: 0; border-right: 1px solid var(--ots-line); padding: var(--ots-s8) var(--ots-s6); }
  .ots-checkout__form { padding: var(--ots-s8) var(--ots-s6); }
  .ots-inbox { grid-template-columns: 340px 1fr; }
  .ots-inbox__list { max-height: 560px; border-right: 1px solid var(--ots-line); }
  .ots-inbox__bar { grid-column: 1 / -1; }
  .ots-agenda__slots { grid-template-columns: repeat(4, 1fr); }
  .ots-section { padding: var(--ots-s9) 0; }
}
@media (min-width: 1440px) {
  :root { --ots-max: 1200px; }
}

/* ---------------- Print (PDF of the report) ---------------- */
@media print {
  .ots-demopanel, .ots-header .ots-langswitch, .ots-toast { display: none !important; }
  .ots-ribbon { position: static; }
  body { padding-top: 0; background: #fff; }
}