/* ═══════════════════════════════════════════════════════════════════════════
   KF Tools — core stylesheet.

   Type is the same stack kfagency.net runs, so the platform and the marketing
   site are visibly one company: Space Grotesk for display, DM Sans for English
   body, Cairo for Arabic. Monospace is a system stack, used only where figures
   need to line up — it is functional, not part of the brand.

   RTL is handled with logical properties (inline-start/end, margin-inline)
   rather than a mirrored stylesheet, so Arabic needs no second file and no
   rule can drift out of sync with its LTR twin.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --kf-pink:   #e040a0;
  --kf-purple: #8a5cf6;
  --kf-blue:   #38bdf8;
  --grad:      linear-gradient(120deg, #e040a0 0%, #8a5cf6 45%, #38bdf8 100%);
  --grad-warm: linear-gradient(135deg, #ff6b9d 0%, #e040a0 50%, #8a5cf6 100%);
  --grad-cool: linear-gradient(135deg, #8a5cf6 0%, #38bdf8 100%);
  --grad-soft: linear-gradient(135deg, rgba(224,64,160,.12), rgba(138,92,246,.12), rgba(56,189,248,.12));

  /* Surfaces — light */
  --bg:            #faf9ff;
  --bg-alt:        #f3f0ff;
  --card:          #ffffff;
  --surface:       rgba(138,92,246,.04);
  --surface-hover: rgba(138,92,246,.08);
  --border:        rgba(138,92,246,.14);
  --border-strong: rgba(138,92,246,.30);

  /* Ink */
  --heading:    #0f0d24;
  --text:       #1a1430;
  --text-dim:   rgba(26,20,48,.62);
  --text-faint: rgba(26,20,48,.40);

  /* Status */
  --success: #16a34a;
  --warn:    #d97706;
  --danger:  #dc2626;
  --info:    #2563eb;

  /* Type */
  --font-display: 'Space Grotesk', 'Cairo', 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-ar:      'Cairo', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Consolas, monospace;

  --radius:    16px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px rgba(15,13,36,.04), 0 10px 34px rgba(138,92,246,.09);
  --shadow-lg: 0 24px 64px rgba(138,92,246,.18);
  --ring:      0 0 0 3px rgba(138,92,246,.18);
}

/* Dark tokens live in one place and are applied three ways: automatically
   when the OS asks for dark AND the user has not overridden it, and
   explicitly when the toggle sets data-theme. The :not() guard is what lets
   an explicit light choice win on a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #08070e;
    --bg-alt:        #0d0c18;
    --card:          #100e1c;
    --surface:       rgba(255,255,255,.025);
    --surface-hover: rgba(138,92,246,.10);
    --border:        rgba(138,92,246,.20);
    --border-strong: rgba(138,92,246,.42);
    --heading:       #f4f0ff;
    --text:          #e6e1f5;
    --text-dim:      rgba(230,225,245,.62);
    --text-faint:    rgba(230,225,245,.40);
    --success: #22c55e;
    --warn:    #f59e0b;
    --danger:  #ef4444;
    --info:    #60a5fa;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
    --bg:            #08070e;
    --bg-alt:        #0d0c18;
    --card:          #100e1c;
    --surface:       rgba(255,255,255,.025);
    --surface-hover: rgba(138,92,246,.10);
    --border:        rgba(138,92,246,.20);
    --border-strong: rgba(138,92,246,.42);
    --heading:       #f4f0ff;
    --text:          #e6e1f5;
    --text-dim:      rgba(230,225,245,.62);
    --text-faint:    rgba(230,225,245,.40);
    --success: #22c55e;
    --warn:    #f59e0b;
    --danger:  #ef4444;
    --info:    #60a5fa;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic: Cairo throughout, with a looser line height — the script needs
   more room than Latin at the same size. */
html[dir="rtl"] body,
body[dir="rtl"] { font-family: var(--font-ar); line-height: 1.85; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .font-display { font-family: var(--font-ar); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -.025em;
  line-height: 1.18;
}
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; font-weight: 700; }

a { color: var(--kf-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(138,92,246,.22); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.bar { height: 3px; background: var(--grad); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────────────*/

.btn, .btn-ghost, .btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease, opacity .14s ease, border-color .14s ease;
}
html[dir="rtl"] .btn, html[dir="rtl"] .btn-ghost, html[dir="rtl"] .btn-soft { font-family: var(--font-ar); font-weight: 700; }

.btn {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 22px rgba(138,92,246,.32);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(138,92,246,.42); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--heading); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--kf-purple); text-decoration: none; }

.btn-soft { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-soft:hover { background: var(--surface-hover); border-color: var(--border-strong); text-decoration: none; }

.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
.btn-block { width: 100%; }

/* ── Layout ───────────────────────────────────────────────────────────────*/

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 22px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.card-pad-lg { padding: 30px 32px; }
.card-lift { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kf-purple);
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-family: var(--font-ar); }

.muted { color: var(--text-dim); }
.small { font-size: 13.5px; }
.center { text-align: center; }

/* ── Tags ─────────────────────────────────────────────────────────────────*/

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
html[dir="rtl"] .tag { letter-spacing: 0; text-transform: none; font-family: var(--font-ar); font-size: 11.5px; }

.tag-self  { background: rgba(56,189,248,.14);  color: var(--kf-blue); }
.tag-gpt   { background: rgba(22,163,74,.14);   color: var(--success); }
.tag-chain { background: rgba(224,64,160,.14);  color: var(--kf-pink); }
.tag-lock  { background: rgba(26,20,48,.08);    color: var(--text-dim); }
.tag-live  { background: rgba(22,163,74,.14);   color: var(--success); }
.tag-warn  { background: rgba(217,119,6,.15);   color: var(--warn); }

/* ── Forms ────────────────────────────────────────────────────────────────*/

label.field { display: block; margin-bottom: 18px; }
label.field > span:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600;
  color: var(--text-dim); margin-bottom: 7px;
  letter-spacing: .04em; text-transform: uppercase;
}
html[dir="rtl"] label.field > span:first-child { text-transform: none; letter-spacing: 0; font-family: var(--font-ar); }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=month], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kf-purple); box-shadow: var(--ring);
}
textarea { min-height: 118px; resize: vertical; line-height: 1.66; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

.hint { font-size: 12.8px; color: var(--text-dim); margin-top: 6px; }

/* ── Notices ──────────────────────────────────────────────────────────────*/

.notice {
  border-radius: var(--radius-sm);
  padding: 14px 17px;
  font-size: 14.5px;
  margin-bottom: 18px;
  border: 1px solid;
  border-inline-start-width: 3px;
}
.notice-info  { background: rgba(37,99,235,.07);  border-color: rgba(37,99,235,.3);  }
.notice-warn  { background: rgba(217,119,6,.08);  border-color: rgba(217,119,6,.34); }
.notice-error { background: rgba(220,38,38,.07);  border-color: rgba(220,38,38,.32); }
.notice-ok    { background: rgba(22,163,74,.08);  border-color: rgba(22,163,74,.32); }

/* ── App shell ────────────────────────────────────────────────────────────
   A persistent sidebar and a slim contextual bar. The single top row this
   replaced carried five nav links, the token balance, the theme control, the
   language switch and sign-out; on a laptop it wrapped to three lines, and a
   navigation that reflows as you resize reads as a prototype rather than a
   product.

   Everything positional is written in logical properties, so the drawer slides
   in from the correct edge in Arabic without a second stylesheet. */

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--card); color: var(--heading);
  padding: 12px 18px; border-radius: 0 0 10px 0; border: 1px solid var(--border);
}
.skip:focus { inset-inline-start: 0; }

.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 960px) { .shell { grid-template-columns: minmax(0, 1fr); } }

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-alt);
  border-inline-end: 1px solid var(--border);
  padding: 18px 14px 16px;
  z-index: 70;
}

.side-top { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.brandmark { display: inline-flex; align-items: center; gap: 10px; }
.brandmark img { height: 25px; width: auto; display: block; }
.brandmark span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16.5px; letter-spacing: -.02em;
}
html[dir="rtl"] .brandmark span { font-family: var(--font-ar); letter-spacing: 0; }

.side-close {
  display: none; margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 26px; line-height: 1; padding: 0 6px;
}

.side-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.side-group + .side-group { margin-top: 22px; }

.side-label {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 0 10px 8px;
}
html[dir="rtl"] .side-label {
  font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 12px;
}

.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; margin-bottom: 2px;
  border-radius: 10px;
  font-size: 14.6px; font-weight: 500; color: var(--text-dim);
  transition: background .14s ease, color .14s ease;
}
.side-link:hover { background: var(--surface-hover); color: var(--heading); text-decoration: none; }
.side-link .nav-i { width: 19px; height: 19px; flex: none; opacity: .8; }

/* The active item carries a rail on the inline start rather than a filled
   block: a solid highlight competes with the page's own primary action. */
.side-link.active {
  background: var(--grad-soft); color: var(--kf-purple); font-weight: 600;
  position: relative;
}
.side-link.active::before {
  content: ''; position: absolute; inset-inline-start: -14px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--kf-purple);
}
html[dir="rtl"] .side-link.active::before { border-radius: 3px 0 0 3px; }
.side-link.active .nav-i { opacity: 1; }

.side-foot { padding-top: 16px; border-top: 1px solid var(--border); }

.tokbox {
  display: block; padding: 13px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .16s ease;
}
.tokbox:hover { border-color: var(--border-strong); text-decoration: none; }
.tokbox-top { display: flex; align-items: baseline; gap: 6px; }
.tokbox-top b {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1;
}
.tokbox-top span { font-size: 12px; color: var(--text-dim); }
.tokbox-note { font-size: 11.8px; color: var(--text-faint); margin-top: 8px; line-height: 1.5; }

.planrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px 0; }
.planrow a { color: var(--text-faint); }
.planrow a:hover { color: var(--kf-purple); }

/* Off-canvas below the breakpoint. */
.side-scrim { display: none; }
@media (max-width: 960px) {
  .side {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: 272px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--shadow-lg);
  }
  html[dir="rtl"] .side { transform: translateX(100%); }
  body.side-is-open .side { transform: translateX(0); }
  .side-close { display: block; }
  /* Positioned here, but shown only when the drawer is. A `display` on a
     class beats the UA's `[hidden] { display: none }`, so styling the scrim
     unconditionally left every phone under a fixed blurred sheet that no tap
     could clear: the drawer was shut, its backdrop was not. Gated on the same
     body class as `.side` so the two cannot drift apart, which also means that
     no JS leaves no scrim rather than a permanent one. */
  .side-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(8,7,14,.5); backdrop-filter: blur(2px);
  }
  body.side-is-open .side-scrim { display: block; }
  body.side-is-open { overflow: hidden; }
}

/* ── The bar above the content ────────────────────────────────────────── */

.main { display: flex; flex-direction: column; min-width: 0; }

.bar-top {
  position: sticky; top: 0; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.bar-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--heading); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[dir="rtl"] .bar-title { font-family: var(--font-ar); letter-spacing: 0; }

.bar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.side-open {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: 9px; padding: 7px; cursor: pointer; color: var(--text-dim);
}
.side-open svg { width: 19px; height: 19px; display: block; }
.side-open:hover { border-color: var(--kf-purple); color: var(--kf-purple); }
@media (max-width: 960px) { .side-open { display: inline-flex; } }

.lang-btn {
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); border-radius: 9px;
  padding: 7px 13px; font: 600 13.5px var(--font-display); cursor: pointer;
}
html[dir="rtl"] .lang-btn { font-family: var(--font-ar); }
.lang-btn:hover { border-color: var(--kf-purple); color: var(--kf-purple); text-decoration: none; }

.app-foot { border-top: 1px solid var(--border); padding: 22px 0; margin-top: auto; }

.page { padding: 32px 0 90px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 30px; font-weight: 700; margin: 6px 0 8px; }
.page-head p  { color: var(--text-dim); margin: 0; font-size: 15.5px; }

.brandpick {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: 14px; font-weight: 500;
}
.brandpick select { border: 0; background: transparent; padding: 4px 2px; width: auto; font-weight: 600; }
.brandpick select:focus { box-shadow: none; }

.meter { height: 7px; background: var(--surface); border-radius: 99px; overflow: hidden; margin-top: 9px; }
.meter > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .4s ease; }

/* Stat tiles */
.stat b {
  display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--heading);
}
.stat span { font-size: 13.5px; color: var(--text-dim); }

/* ── Tool cards ───────────────────────────────────────────────────────────*/

.toolcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 11px;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative; overflow: hidden;
}
.toolcard::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0;
  width: 100%; height: 3px; background: var(--grad);
  opacity: 0; transition: opacity .16s ease;
}
.toolcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; }
.toolcard:hover::after { opacity: 1; }
.toolcard .ico { font-size: 28px; line-height: 1; }
.toolcard h3 { font-size: 16.5px; font-weight: 600; margin: 0; }
.toolcard p  { font-size: 14px; color: var(--text-dim); margin: 0; flex: 1; }
.toolcard.locked { opacity: .58; }
.toolcard.locked:hover { transform: none; border-color: var(--border); box-shadow: none; }
.toolcard.locked:hover::after { opacity: 0; }

/* ── Tables ───────────────────────────────────────────────────────────────*/

.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t th, .t td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-dim); }
.t th {
  font-family: var(--font-display);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; background: var(--surface); color: var(--text-dim);
}
html[dir="rtl"] .t th { text-transform: none; letter-spacing: 0; font-family: var(--font-ar); font-size: 12.5px; }
.t td b, .t td strong { color: var(--heading); font-weight: 600; }
.t tbody tr:hover { background: var(--surface); }
.t tr:last-child td { border-bottom: 0; }
/* A cell holding a source URL or a long unbroken word wraps instead of
   stretching the table. Without this the scroller appears on every result that
   cites a source, and on a phone the first column is all you can see.
   `break-word` rather than `anywhere`, so a number column is left alone. */
.t td { overflow-wrap: break-word; }
.scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
}
/* Keyboard users need to be able to reach a scrollable region to scroll it.
   kf_table() and the tool pages mark theirs tabindex="0" for the same reason. */
.scroll:focus-visible { outline: 2px solid var(--accent, #8a5cf6); outline-offset: 2px; }

/* ── Empty state ──────────────────────────────────────────────────────────*/

.empty { text-align: center; padding: 58px 24px; color: var(--text-dim); }
.empty .big { font-size: 44px; margin-bottom: 12px; }
.empty h3 { color: var(--heading); font-size: 18px; margin: 0 0 7px; }

/* ── Denied / auth pages ──────────────────────────────────────────────────*/

.deny-wrap, .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 22px; }
.deny-card {
  max-width: 540px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 38px; box-shadow: var(--shadow);
}
.deny-card h2 { margin: 0 0 12px; font-size: 22px; }
.deny-card p { color: var(--text-dim); margin: 0; }
.deny-back { margin-top: 24px !important; font-size: 14px; }

.auth-card {
  width: 100%; max-width: 448px; background: var(--card);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 36px 32px; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 26px; margin: 12px 0 7px; }
.auth-card > p.sub { color: var(--text-dim); font-size: 14.5px; margin: 0 0 26px; }
.auth-foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-dim); text-align: center;
}
.auth-logo { height: 30px; width: auto; display: block; margin: 0 auto 4px; }

/* ── Print ────────────────────────────────────────────────────────────────*/

@media print {
  .side, .bar-top, .app-foot, .noprint, .btn, .btn-ghost, .btn-soft { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .page-head h1 { font-size: 25px; }
  .card-pad-lg { padding: 22px 20px; }
}

/* ── Theme toggle ─────────────────────────────────────────────────────────*/
/* Three states: auto (follows the OS), light, dark. The label says which,
   because an icon alone cannot distinguish "dark" from "currently dark
   because your OS is". */
.theme-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); border-radius: 9px;
  padding: 7px 12px; cursor: pointer;
  font: 600 12.5px var(--font-display);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
html[dir="rtl"] .theme-btn { font-family: var(--font-ar); }
.theme-btn:hover { border-color: var(--kf-purple); color: var(--kf-purple); background: var(--surface); }
.theme-btn svg { flex: none; }
@media (max-width: 720px) { .theme-btn span { display: none; } }

/* The landing page owns its own palette, so the control has to invert there. */
.lp .theme-btn, .adminbar .theme-btn {
  border-color: rgba(242,239,233,.22); color: rgba(242,239,233,.62);
}
.lp .theme-btn:hover, .adminbar .theme-btn:hover {
  border-color: rgba(242,239,233,.5); color: #fff; background: rgba(242,239,233,.06);
}

/* ── The flagship slot ────────────────────────────────────────────────────
   One tool on this platform is not like the others: it runs a long intake and
   writes a document, and it costs more than several of the rest together.
   Given an identical card in an alphabetical grid it read as one of twelve,
   which is how a product ends up looking like a directory.

   Built from spans rather than block elements because the whole thing is one
   anchor, and a <div> inside an <a> is invalid where a <span> is not. */

.hero-tool {
  display: flex; align-items: flex-start; gap: 22px;
  padding: 28px 30px; margin-bottom: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(138,92,246,.10), transparent 58%),
    var(--card);
  color: inherit; position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hero-tool::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--grad);
}
.hero-tool:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--kf-purple); text-decoration: none;
}

.hero-tool-mark {
  font-size: 40px; line-height: 1; flex: none;
  width: 68px; height: 68px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--border);
}

.hero-tool-body { display: block; min-width: 0; }

.hero-tool-h {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2;
  letter-spacing: -.025em; color: var(--heading);
  margin: 7px 0 9px;
}
html[dir="rtl"] .hero-tool-h { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.4; }

.hero-tool-p {
  display: block; color: var(--text-dim);
  font-size: 15px; line-height: 1.66; max-width: 62ch;
}

.hero-tool-meta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px;
}

/* Not enough tokens to run it. Still a link — the billing page is where that
   is fixed, and a dead card explains nothing. */
.hero-tool.is-short { border-color: var(--border); }
.hero-tool.is-short .hero-tool-mark { filter: grayscale(.5); opacity: .8; }

@media (max-width: 560px) {
  .hero-tool { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .hero-tool-mark { width: 54px; height: 54px; font-size: 30px; border-radius: 15px; }
}

/* ── Key/value list ───────────────────────────────────────────────────────
   For the small "what the platform knows about you" panels. A <table> would
   imply rows you can compare across; these are facts about one thing. */
.kv { margin: 0; display: grid; gap: 14px; }
.kv > div { display: grid; gap: 3px; }
.kv dt {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
html[dir="rtl"] .kv dt {
  font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 12px;
}
.kv dd { margin: 0; color: var(--heading); font-size: 15px; font-weight: 500; }

/* ── Missing required answers ─────────────────────────────────────────────
   Paired with assets/js/kf-required.js. Two marks, and they have to be two:
   an outline on the field, so the reader knows where to look, and a banner at
   the top of the form naming the fields, so a form six sections long does not
   need scrolling to find out what it is complaining about.

   Red rather than the platform's purple. This is the one place where the
   colour is the message, and every other accent on these pages is purple —
   a purple "you missed something" is a decoration. */
.kf-missing,
.kf-missing input,
.kf-missing select,
.kf-missing textarea {
  border-color: var(--danger) !important;
}
.kf-missing {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
  border-radius: var(--radius-sm);
}
/* A checkbox group has no border of its own to turn red, so it gets one. */
.kf-checks.kf-missing,
.kft-checks.kf-missing,
.rt-checks.kf-missing {
  border: 1px solid var(--danger);
  padding: 10px;
}

.kf-missing-banner {
  border: 1px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px; line-height: 1.6;
}
.kf-missing-banner strong { display: block; color: var(--danger); margin-bottom: 6px; }
.kf-missing-banner ul { margin: 0; padding-inline-start: 20px; }
.kf-missing-banner li { margin-bottom: 3px; }
.kf-missing-banner .kf-missing-hint {
  display: block; margin-top: 8px; font-size: 13px; color: var(--text-dim);
}

/* The live tools do not have a form to put a banner in — they recompute as you
   type and their message belongs in the results panel. Same colour, so "you
   have not finished" reads the same in both kinds of tool. */
.kt-idle-wait.kt-idle-missing {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}
.kt-idle-wait.kt-idle-missing h3 { color: var(--danger); }

/* ── The storage bar ───────────────────────────────────────────────────────
   Uploading finished posts into the calendar made disk a real cost, so an
   account can see what it is using before it runs out rather than after. The
   bar turns at ninety per cent, which is the point at which the next carousel
   is the one that gets refused. */
.kf-store-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.kf-store-bar > i {
  display: block;
  height: 100%;
  background: var(--kf-purple);
  transition: width .3s ease;
}
.kf-store-bar.is-full > i { background: var(--danger); }

/* ── The finished posts on a day ───────────────────────────────────────────
   Thumbnails rather than a file list: the whole point of putting the artwork
   in the calendar is that somebody can see at a glance whether the day is
   done, and a row of filenames does not answer that. */
.day-uploads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.day-upload { margin: 0; }
.day-upload img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  display: block;
}
.day-upload figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.day-upload figcaption form { margin: 0; }