/* ===========================================================================
   Tayfa — styleguide chrome
   Only used by the pages under /design. Never ships with the product.
   =========================================================================== */

.guide-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-5);
  height: var(--topbar-h);
  padding: 0 var(--space-6);
  background: color-mix(in oklab, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.guide-top__nav { display: flex; gap: var(--space-1); }
.guide-top__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-muted);
}
.guide-top__link:hover { background: var(--bg-elevated); color: var(--fg); }
.guide-top__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.guide {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-16);
}

.guide-head { display: flex; flex-direction: column; gap: var(--space-4); }
.guide-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-head h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.guide-lede { font-size: var(--fs-h3); line-height: 1.55; color: var(--fg-muted); max-width: 68ch; }

.guide-sec { display: flex; flex-direction: column; gap: var(--space-6); }
.guide-sec__head { display: flex; flex-direction: column; gap: var(--space-2); }
.guide-sec__head h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -.018em;
}
.guide-sec__head p { color: var(--fg-muted); max-width: 70ch; }
.guide-sub {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.guide-sub h3 { font-size: var(--fs-h3); font-weight: 700; }
.guide-sub code, .guide-sub .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}

/* a demo surface that always paints its own ground */
.demo {
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.demo--flush { padding: 0; overflow: hidden; }
.demo--dark { background: #0f1114; border-color: #24282e; }
.demo--tight { padding: var(--space-4); }
.demo-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.specimens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); }
.specimen { padding: var(--space-8) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.specimen__cap { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; opacity: .65; }

/* fixed-colour grounds: a logo specimen must show its own background */
.gnd-dark   { background: #0f1114; }
.gnd-dark   .brand__word { color: #f5f7f8; } .gnd-dark .brand { color: #ff8a1f; } .gnd-dark .specimen__cap { color: #9aa2ab; }
.gnd-light  { background: #f6f7f9; }
.gnd-light  .brand__word { color: #0d1014; } .gnd-light .brand { color: #140a02; } .gnd-light .specimen__cap { color: #585f67; }
.gnd-orange { background: #ff8a1f; }
.gnd-orange .brand__word { color: #140a02; } .gnd-orange .brand { color: #140a02; } .gnd-orange .specimen__cap { color: #140a02; }

/* token swatch table */
.swatch {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  vertical-align: -7px;
  margin-right: var(--space-3);
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); }
.kv dt { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em; color: var(--fg-subtle); }
.kv dd { color: var(--fg-muted); }

.callout {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.callout strong { color: var(--fg); font-weight: 600; }
.callout--ok { border-left-color: var(--success); background: color-mix(in oklab, var(--success) 8%, var(--bg-surface)); }
.callout--no { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, var(--bg-surface)); }
.callout code {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  background: var(--bg-overlay); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--fg);
}

.do-dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.dd {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.dd__mark { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em; }
.dd--do .dd__mark { color: var(--success); }
.dd--no .dd__mark { color: var(--danger); }
.dd p { font-size: var(--fs-small); color: var(--fg-muted); }

.ratio-ok { color: var(--success); font-weight: 700; font-size: var(--fs-caption); }
.ratio-no { color: var(--danger); font-weight: 700; font-size: var(--fs-caption); }

.clearspace {
  position: relative;
  display: inline-block;
  padding: var(--space-6);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in oklab, var(--accent) 16%, transparent) 6px 7px);
  border: 1px dashed var(--accent-ring);
  border-radius: var(--radius-md);
}
.clearspace__inner { background: #0f1114; padding: 0; border-radius: var(--radius-sm); }

/* ===========================================================================
   OG / share-image specimens
   Visual spec only. Production renders these server-side (SVG → PNG) at
   1200×630 from the same measurements.
   The 45° cut corner is the brand's graphic device, lifted from the mark.
   =========================================================================== */
.og {
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #07090b;
  container-type: inline-size;
  isolation: isolate;
  /* Every text size here is a cqw, so the line-height must be a ratio. */
  line-height: 1.2;
}
/* stream frame */
.og__frame {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 24% 22%, #2b3340 0%, transparent 62%),
    radial-gradient(70% 90% at 88% 78%, #1a2028 0%, transparent 64%),
    linear-gradient(152deg, #1b2027 0%, #05070a 78%);
}
/* mesh of brand light — keeps the frame from reading as flat grey */
.og__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(44% 70% at 92% 6%, color-mix(in oklab, #ff8a1f 26%, transparent) 0%, transparent 62%),
    radial-gradient(38% 60% at 4% 96%, color-mix(in oklab, #e00e40 16%, transparent) 0%, transparent 60%);
}
/* bottom scrim band — the only place copy sits */
.og__band {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7cqw 5cqw 4.4cqw;
  background: linear-gradient(transparent, rgba(3, 5, 7, .72) 34%, rgba(3, 5, 7, .96) 100%);
  display: flex; flex-direction: column; gap: 1.6cqw; align-items: flex-start;
}
/* A short tick above the title, not a rule across the whole frame: a full-width
   line floating over a video still reads as an accident. */
.og__tick {
  width: 6cqw; height: .55cqw;
  background: #ff8a1f;
  border-radius: 99px;
  flex: none;
}
.og__top {
  position: absolute; top: 4cqw; left: 5cqw; right: 5cqw;
  display: flex; align-items: center; gap: 1.4cqw;
}
.og__pill {
  display: inline-flex; align-items: center; gap: .7cqw;
  padding: .85cqw 1.5cqw;
  border-radius: .8cqw;
  background: rgba(3, 5, 7, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 2cqw;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.og__pill--live {
  background: #e00e40;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .08em;
}
.og__pill .pdot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #e00e40; }
.og__spacer { flex: 1; }
.og__brand { display: inline-flex; align-items: center; gap: 1cqw; color: #ff8a1f; }
.og__brand svg { width: 4.2cqw; height: 4.2cqw; }
.og__brand span { font-size: 4.2cqw; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #f5f7f8; }
.og__title {
  font-size: 5cqw; line-height: 1.12;
  font-weight: 800; letter-spacing: -.022em;
  color: #fff;
  max-width: 22ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.og__who { display: flex; align-items: center; gap: 1.5cqw; width: 100%; }
.og__av {
  width: 5.2cqw; height: 5.2cqw; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #3a4452, #1b2027);
  box-shadow: 0 0 0 .35cqw #ff8a1f;
}
.og__chan { font-size: 2.5cqw; line-height: 1.25; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.og__meta { font-size: 2.1cqw; line-height: 1.3; color: #b3bbc3; }
.og__chip {
  display: inline-flex; align-items: center; flex: none;
  padding: .8cqw 1.5cqw; border-radius: .7cqw;
  background: rgba(255, 255, 255, .13);
  color: #fff; font-size: 2cqw; line-height: 1; font-weight: 700;
  letter-spacing: .04em;
}
/* the brand's cut corner, bottom right */
.og__cut {
  position: absolute; right: 0; bottom: 0;
  width: 9cqw; height: 9cqw;
  background: #ff8a1f;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Play affordance for clip shares. Sits clear of the band: the band is about
   46% tall once the title wraps, so anything below 38% would collide. */
.og__play {
  position: absolute; left: 50%; top: 35%;
  translate: -50% -50%;
  width: 12cqw; height: 12cqw;
  border-radius: 50%;
  background: rgba(3, 5, 7, .5);
  border: .55cqw solid #ff8a1f;
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.og__play svg { width: 4.2cqw; height: 4.2cqw; color: #ff8a1f; margin-left: .55cqw; }

/* Channel-card layout for the offline / profile share.
   Type here is sized for the RIGHT PANEL, not the full frame: cqw resolves
   against the whole 1200px container, but the panel is only ~555px wide, so
   the frame-scale sizes used elsewhere overflow it. */
.og--split { display: grid; grid-template-columns: 1fr .86fr; }
.og__left { position: relative; overflow: hidden; }
.og__right {
  position: relative;
  background: #0f1114;
  border-left: .25cqw solid #24282e;
  padding: 4.6cqw 4cqw;
  display: flex; flex-direction: column; gap: 1.7cqw; justify-content: center;
}
.og__kicker {
  font-family: var(--font-mono);
  font-size: 1.65cqw; line-height: 1.4; letter-spacing: .14em;
  color: #ff8a1f;
}
.og__big {
  font-size: 4.4cqw; line-height: 1.05;
  font-weight: 800; letter-spacing: -.028em; color: #fff;
  overflow-wrap: anywhere;
}
.og__stats { display: flex; gap: 2.6cqw; margin-top: .4cqw; }
.og__stat { display: flex; flex-direction: column; gap: .2cqw; }
.og__stat b { font-size: 2.7cqw; line-height: 1.15; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.og__stat span { font-size: 1.6cqw; line-height: 1.3; color: #9aa2ab; }

/* ===========================================================================
   SCREEN PREVIEW
   Full application screens need more width than the 1120px reading column, so
   these break out of the spine. The inner shell keeps a min-width and the
   frame scrolls rather than squashing — a watch screen at 700px would not be
   telling the truth about the layout.
   =========================================================================== */
.screen {
  width: min(1680px, calc(100vw - var(--space-8)));
  margin-left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-base);
  box-shadow: var(--shadow-lg);
}
.screen__scroll { overflow-x: auto; }
.screen__inner { min-width: 1180px; }
.screen__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--fg-subtle);
}
.screen__bar b { color: var(--accent); font-weight: 700; }

/* Centred stage for auth cards, which are modals in the product. */
.stage-center {
  display: grid; place-items: center;
  padding: var(--space-12) var(--space-5);
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--accent) 7%, transparent) 0%, transparent 60%),
    var(--bg-base);
}

/* Rendered share-image previews. The artwork lives in design/og/render.html;
   these are its real output, so the guide cannot drift from what ships. */
.og-shots { display: flex; flex-direction: column; gap: var(--space-6); }
.og-shots figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.og-shots img {
  width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.og-shots figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: .04em;
}

/* ===========================================================================
   EMAIL specimen
   Visual spec. The real template is table-based with inline styles; see the
   constraints note in brand.html.
   =========================================================================== */
.mail {
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  container-type: inline-size;
}
.mail__pre {
  padding: var(--space-2) var(--space-5);
  background: var(--bg-overlay);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--fg-subtle);
  letter-spacing: .04em;
}
.mail__head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: #0f1114;
  border-bottom: 2px solid #ff8a1f;
}
.mail__hero { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mail__heroart {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 26% 24%, #2b3340 0%, transparent 62%),
    radial-gradient(50% 70% at 90% 10%, color-mix(in oklab, #ff8a1f 22%, transparent) 0%, transparent 60%),
    linear-gradient(152deg, #1b2027 0%, #05070a 78%);
}
.mail__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(3, 5, 7, .52);
  border: 3px solid #ff8a1f;
  display: grid; place-items: center;
}
.mail__play svg { width: 20px; height: 20px; color: #ff8a1f; margin-left: 3px; }
.mail__heroTop { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-2); }
.mail__heroBot { position: absolute; bottom: var(--space-3); right: var(--space-3); }
.mail__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.mail__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); letter-spacing: .14em;
  color: var(--accent);
}
.mail__title { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.mail__who { display: flex; align-items: center; gap: var(--space-3); }
.mail__cut {
  height: 0; border-top: 1px solid var(--border);
  position: relative; margin: var(--space-2) 0;
}
.mail__cut::after {
  content: ""; position: absolute; right: 0; top: -5px;
  width: 10px; height: 10px; background: var(--accent);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.mail__also { display: flex; flex-direction: column; gap: var(--space-1); }
.mail__foot {
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mail__social { display: flex; gap: var(--space-2); }
.mail__socialBtn {
  width: 30px; height: 30px; border-radius: var(--radius-md);
  background: var(--bg-overlay);
  display: grid; place-items: center;
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}
.mail__legal { font-size: var(--fs-micro); line-height: 1.6; color: var(--fg-subtle); }
.mail__legal a { color: var(--fg-muted); text-decoration: underline; }

.guide-foot {
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0 var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: .04em;
}

@media (max-width: 700px) {
  .guide { padding: var(--space-8) var(--space-4) var(--space-12); gap: var(--space-12); }
  .guide-top { padding: 0 var(--space-4); gap: var(--space-3); overflow-x: auto; }
}