/* =====================================================================
   Clozr — Industry design system
   White ground, navy-steel accent, Barlow Condensed over Barlow, a modular
   grid, square corners, hairline dividers. No gradients, no rounded corners,
   no emoji used as UI.

   Class names are unchanged from the previous stylesheet on purpose: every
   one of them is written from js/app.js or js/admin.js, and the redesign is
   a restyle, not a rewrite of the application.
   ===================================================================== */

/* The fonts are loaded with <link rel="preconnect"> + <link rel="stylesheet">
   in each page's <head>, not with @import here. An @import inside a
   render-blocking stylesheet is not discovered until this file has downloaded
   and parsed, which serialises two round trips onto the critical path and
   pushes out Largest Contentful Paint. */

:root {
  /* --- Ground and ink ------------------------------------------------ */
  --color-bg:      #ffffff;
  --color-surface: #ffffff;
  --color-text:    #1d1f20;
  --color-divider: #d8dce1;

  --color-neutral-100: #f7f8f9;
  --color-neutral-200: #eceef1;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-900: #2b2b2d;

  --color-accent:     #2c455d;
  --color-accent-100: #eef2f7;
  --color-accent-200: #d7e0ea;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  /* Semantic aliases the components below actually use. */
  --bg:        var(--color-bg);
  --bg-tint:   var(--color-neutral-100);
  --surface:   var(--color-surface);
  --surface-2: var(--color-neutral-100);
  --ink:       var(--color-text);
  --ink-2:     var(--color-neutral-700);
  /* The token sheet suggests neutral-600 for small labels, but on white that
     is 4.3:1 — under the 4.5:1 floor for normal text, and `.muted` is used on
     real content all over the app, not just decoration. One step darker. */
  --muted:     var(--color-neutral-700);
  --line:      var(--color-divider);
  --line-2:    var(--color-divider);

  --brand:     var(--color-accent);
  --brand-ink: var(--color-accent-700);
  --on-brand:  #ffffff;
  --field:     var(--color-accent-900);   /* the dark panel */

  --amber:     #8a5a00;
  --amber-bg:  var(--color-accent-100);
  --green:     #2f6b4f;
  --green-bg:  #eef4f1;
  --red:       #8c3a3a;
  --red-bg:    #f7efef;

  /* --- Type ---------------------------------------------------------- */
  --font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--font-body);

  /* --- Space: a 0.85x density scale ---------------------------------- */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  /* Square corners are the system. These stay for anything genuinely
     circular (avatars, the VS badge) and nothing else. */
  --r-sm: 0;
  --r:    0;
  --r-lg: 0;

  --shadow-1: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-2: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-3: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

* { box-sizing: border-box; }
/* min-height, not height: a body fixed at the viewport's height is the
   containing block of every sticky header, which then scrolled away after
   one screen on any long page. */
html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-underline-offset: 3px; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: 38px; }
h2 { font-size: 32px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }

p { margin: 0 0 var(--space-3); color: var(--ink-2); }

.muted   { color: var(--muted); }
.small   { font-size: .84rem; }
.center  { text-align: center; }
.hidden  { display: none !important; }
[hidden] { display: none !important; }
.nowrap  { white-space: nowrap; }
.grow    { flex: 1; }
.row     { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stack   { display: flex; flex-direction: column; gap: var(--space-6); }
.spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--space-6); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--space-6); }

/* Small uppercase label — the system's workhorse. */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent-700);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* --- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; line-height: 1.2; letter-spacing: .02em;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-divider); background: transparent; color: var(--ink);
  border-radius: 0; cursor: pointer; text-decoration: none;
  white-space: nowrap; flex: none;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover  { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.btn-primary:hover  { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }

.btn-ghost { border-color: transparent; color: var(--color-accent-700); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }

.btn-sm { padding: 5px var(--space-3); font-size: 12px; }
.btn-lg { padding: 12px var(--space-6); font-size: 15px; }
.btn-block { width: 100%; }

.btn-ok { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.btn-ok:hover { background: var(--color-accent-700); }
.btn-no { color: var(--ink); border-color: var(--color-divider); background: transparent; }
.btn-no:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

/* --- Cards / panels ------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.card-pad { padding: var(--space-6); }
.card-hd  { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); }

/* --- Form controls -------------------------------------------------- */
label.field { display: block; margin-bottom: var(--space-4); }
label.field > span {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--color-neutral-700); margin-bottom: 5px;
}

/* Match by exclusion, not by listing types: an <input> with no type attribute
   is still a text box, and input[type="text"] does not match it. Every control
   the app builds in JavaScript relies on this. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select, textarea {
  width: 100%; min-height: 36px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  padding: 6px var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
  caret-color: var(--color-accent);
  transition: border-color .14s;
}
input:hover, select:hover, textarea:hover { border-color: var(--color-neutral-400); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--color-neutral-500); }
textarea { resize: vertical; min-height: 90px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a7a7d' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center;
  padding-right: 32px;
}
.checkline { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); }
.checkline input { width: auto; min-height: 0; accent-color: var(--color-accent); }

/* --- Tags, pills, flags --------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--space-3); border-radius: 0;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.pill-amber { background: var(--color-accent-100); color: var(--color-accent-800); }
.pill-green { background: var(--color-accent);     color: #fff; }
.pill-red   { border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); }
.pill-grad  { background: var(--color-accent);     color: #fff; }

.flag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px;
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
  color: var(--color-accent-700);
  font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: .06em;
}

/* --- Segmented control (was .chips) --------------------------------- */
.chips { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-divider); }
.chip {
  padding: 7px var(--space-4); border: none; background: transparent; color: var(--ink-2);
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; border-radius: 0;
  transition: background .14s, color .14s;
}
.chip + .chip { border-left: 1px solid var(--color-divider); }
.chip:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.chip.on { background: var(--color-accent); color: #fff; }

/* --- App shell ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.topbar-in { display: flex; align-items: center; gap: var(--space-6); min-height: 56px; }

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
/* The mark is a transparent disc, so it takes the ground it is put on —
   no white plate, which would show as a square on any dark header. */
.brand-mark { width: 30px; height: 30px; flex: none; object-fit: contain; }
.brand-name {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
}
.brand-sub {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* One bordered box, options divided by hairlines, active one a solid fill. */
.tabs { display: flex; border: 1px solid var(--color-divider); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-4); border: none; background: transparent;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer; border-radius: 0;
  transition: background .14s, color .14s;
}
.tab + .tab { border-left: 1px solid var(--color-divider); }
.tab:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.tab.on { background: var(--color-accent); color: #fff; }
.tab svg { display: block; width: 15px; height: 15px; }
/* Part of the flex row, not floated over it: absolutely positioning this at
   the tab's top-right printed the count on top of the label's last letter. */
.tab-badge {
  min-width: 16px; height: 16px; margin-left: 2px;
  background: var(--color-accent-700); color: #fff;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  display: grid; place-items: center; padding: 0 4px; flex: none;
}
.tab.on .tab-badge { background: #fff; color: var(--color-accent); }
/* The icon rides along on every size; only the label text swaps. */
.tab-icon { display: block; flex: none; }
.tab-brief { display: none; }

.userpill {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 4px 4px 4px var(--space-3);
  border: 1px solid var(--color-divider); background: transparent;
  cursor: pointer; font: inherit; border-radius: 0;
}
.userpill:hover { background: var(--color-neutral-100); }
.userpill-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.userpill-sub  { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.userpill-pts {
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px var(--space-3);
}

/* --- Language switcher ---------------------------------------------
   A <details>, so the menu opens with no JavaScript and the options stay
   real links — which is what lets a crawler walk the hreflang set. The
   marker is removed and replaced with a chevron drawn in CSS, because the
   native triangle is the one shape in the browser that ignores our type. */
.lang { position: relative; flex: none; }
.lang > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after {
  content: ""; width: 6px; height: 6px; margin-inline-start: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.lang-code { display: none; }
.lang > summary:hover { border-color: var(--ink); }
.lang > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.lang-menu {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 60;
  min-width: 168px;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  box-shadow: 0 8px 24px rgb(0 0 0 / .10);
}
.lang-opt {
  display: flex; align-items: center; min-height: 44px;
  padding: 9px var(--space-4);
  background: var(--surface); color: var(--ink);
  text-decoration: none; font-size: 14px; line-height: 1.2;
}
.lang-opt:hover { background: var(--color-neutral-100); }
.lang-opt.on { background: var(--color-accent); color: #fff; font-weight: 600; }

/* On a phone the header has room for the code but not the name. */
@media (max-width: 760px) {
  .lang > summary { padding: 5px var(--space-2); font-size: 11px; }
  .lang-menu { min-width: 148px; }
  .lang-full { display: none; }
  .lang-code { display: inline; }
}

main { padding: var(--space-6) 0 var(--space-8); }

/* --- Season strip: four cells over a divider grid ------------------- */
.season-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
  margin-bottom: var(--space-6);
}
.season-strip .seg { background: var(--color-bg); padding: var(--space-4) var(--space-6); }
.season-strip b {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.01em;
}
.season-strip .seg span {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: var(--space-1);
}
.season-strip .urgent b { color: var(--color-accent-700); }

/* --- Missions ------------------------------------------------------- */
.missions {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: var(--space-6); margin-bottom: var(--space-6); align-items: start;
}
.missions-side { display: flex; flex-direction: column; gap: var(--space-3); }

.mission {
  position: relative; padding: var(--space-6);
  border: 1px solid var(--color-divider); background: var(--color-bg);
}
.mission.live { background: var(--color-accent-100); border-color: var(--color-accent-200); }
.mission h3 { margin: var(--space-2) 0; font-size: 24px; }
.mission p  { font-size: 14px; margin: 0; max-width: 62ch; color: var(--color-neutral-700); }
.mission.live p { color: var(--color-accent-900); }

.mission-x {
  position: absolute; top: var(--space-6); right: var(--space-6);
  border: 1px solid var(--color-accent); color: var(--color-accent);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; padding: 2px var(--space-3);
}
.mission-cta {
  margin-top: var(--space-4); padding: 0;
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
  background: none; border: none; cursor: pointer;
}
.mission-cta:hover { text-decoration: underline; }

/* The coaching panel. Light, not dark: the Play view already spends its one
   dark field on "one away", and two competing dark blocks side by side read
   as an error state rather than emphasis. */
.coach {
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
}
.coach-line {
  margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.5;
  color: var(--color-text); max-width: 46ch;
}
/* The placeholder while the line is being written — same box, no reflow when
   the real sentence replaces it. */
.coach-line.muted { color: var(--muted); }

/* --- Play layout ---------------------------------------------------- */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }

.legend { display: flex; gap: var(--space-4); font-size: 11px; letter-spacing: .06em;
          text-transform: uppercase; color: var(--color-neutral-600); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.dot { width: 9px; height: 9px; display: inline-block; }
.dot-done { background: var(--color-accent); }
.dot-wait { background: var(--color-accent-200); }
.dot-open { border: 1px solid var(--color-neutral-400); }

/* The 5x5 card: hairline grid, no radius, no per-cell border. */
.grid25 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--color-divider);
  border-top: 1px solid var(--color-divider);
}
.sq {
  position: relative; display: flex; flex-direction: column;
  min-height: 150px; padding: var(--space-4); text-align: left;
  border: none; border-radius: 0; background: var(--color-bg); color: var(--ink);
  font: inherit; cursor: pointer; overflow: hidden;
  transition: background .14s;
}
.sq:hover { background: var(--color-neutral-100); }
.sq:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* The square is the thing people actually read on this page, so its text is
   sized to be read across a desk rather than to fit the most squares on a
   screen. The tick is the answer to "did I do this one" and was smaller than
   the label describing the goal, which had it the wrong way round. */
.sq-tag {
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500);
  padding-right: 30px;
}
.sq-label { margin-top: auto; font-size: 15px; line-height: 1.35; }
.sq-mark {
  position: absolute; top: var(--space-3); right: var(--space-4);
  font-size: 18px; font-weight: 600; color: var(--color-neutral-500);
  line-height: 1;
}

.sq.done { background: var(--color-accent); color: #fff; }
.sq.done:hover { background: var(--color-accent-700); }
.sq.done .sq-tag  { color: var(--color-accent-200); }
.sq.done .sq-mark { color: #fff; }

.sq.wait { background: var(--color-accent-100); }
.sq.wait .sq-tag { color: var(--color-accent-700); }

.sq.open .sq-mark { opacity: 0; transition: opacity .14s; }
.sq.open:hover .sq-mark, .sq.open:focus-visible .sq-mark { opacity: 1; }

/* Sits to the left of the tick, which is now wider — 34px keeps them apart
   even when a repeated square shows "✓ 2" instead of a bare tick. */
.sq.keystone::before {
  content: "♛"; position: absolute; top: var(--space-3); right: 34px;
  font-size: 14px; color: var(--color-accent-700);
}
.sq.done.keystone::before { color: var(--color-accent-200); }

@keyframes ping {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--color-accent); }
  30%      { box-shadow: inset 0 0 0 3px var(--color-accent); }
}
.sq.ping { animation: ping 1s ease-out 2; }

/* --- Score sidebar -------------------------------------------------- */
.score-big {
  font-family: var(--font-heading); font-size: 56px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: var(--color-accent);
}
.bar { height: 6px; background: var(--color-neutral-200); overflow: hidden; margin: var(--space-4) 0 var(--space-2); }
.bar > i { display: block; height: 100%; background: var(--color-accent); transition: width .4s; }

.stat-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
  margin-top: var(--space-4);
}
.stat { padding: var(--space-3); background: var(--color-bg); text-align: center; }
.stat b {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; line-height: 1.05;
}
.stat span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
}

/* The strongest nudge on the page: a solid accent block. */
.nextmove {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: var(--space-6); border: none; border-radius: 0;
  background: var(--color-accent); color: #fff;
  transition: background .14s;
}
.nextmove:hover { background: var(--color-accent-700); }
.nextmove .eyebrow { color: var(--color-accent-300); }
.nextmove strong {
  display: block; margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.15;
}
.nextmove em { font-style: normal; font-size: 12px; color: var(--color-accent-200); }

.h2h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); text-align: center; }
.h2h-vs {
  width: 34px; height: 34px; border: 1px solid var(--color-divider);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--color-neutral-600);
}
.h2h-score { font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.05; }
.h2h-you   { color: var(--color-accent); }

.note {
  padding: var(--space-3) 0 0; margin-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 13px; color: var(--color-neutral-700);
}

/* Rules panel, collapsed by default. */
.how { padding: 0; }
.how > summary {
  list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
}
.how > summary::-webkit-details-marker { display: none; }
.how > summary::after { content: "+"; color: var(--color-accent); font-size: 16px; }
.how[open] > summary::after { content: "−"; }
.how > summary:hover { background: var(--color-neutral-100); }
.how ul { padding: 0 var(--space-6) var(--space-6) calc(var(--space-6) + 18px); margin: 0; }
.how li { margin-bottom: var(--space-2); font-size: 13px; color: var(--color-neutral-700); }
.how b { color: var(--ink); }

/* --- Floor summary, above the board --------------------------------- */
.insights {
  border: 1px solid var(--color-divider);
  padding: var(--space-6); margin: var(--space-6) 0;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.insights-line {
  margin: 0; font-family: var(--font-heading); font-weight: 600;
  font-size: 21px; line-height: 1.25; color: var(--ink); max-width: 70ch;
}

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.stat-strip .stat { text-align: left; padding: var(--space-3) var(--space-4); }
.stat-strip .stat.warn b { color: var(--color-accent-700); }

.insight-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
                background: var(--color-divider); border: 1px solid var(--color-divider); }
.insight-sq { background: var(--color-bg); padding: var(--space-4) var(--space-6); }
.insight-sq.hot  { background: var(--color-accent); color: #fff; }
.insight-sq.hot .eyebrow { color: var(--color-accent-300); }
.insight-sq.cold { background: var(--color-accent-100); }
.insight-sq strong {
  display: block; margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.2;
}
.insight-sq em { font-style: normal; font-size: 12px; }
.insight-sq.hot em { color: var(--color-accent-200); }
.insight-sq.cold em { color: var(--color-neutral-700); }

@media (max-width: 720px) {
  .insights { padding: var(--space-4); gap: var(--space-4); }
  .insights-line { font-size: 17px; }
  .insight-pair { grid-template-columns: 1fr; }
}

/* --- CRM connections ------------------------------------------------
   A provider card is mostly prose and one or two settings, so it wants a
   tighter rhythm than .stack's --space-6, which is sized for whole sections.
   The buttons hug their text: in a flex column the default stretch turns a
   "Save" into a full-width bar that reads as a section divider. */
.crm-body   { display: flex; flex-direction: column; gap: var(--space-3); }
.crm-fields { display: flex; flex-direction: column; gap: var(--space-4);
              margin-top: var(--space-4); }
.crm-fields > button,
.crm-body > button { align-self: flex-start; }
.crm-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.crm-danger { color: var(--red); }
.crm-uri {
  font-size: 12px; word-break: break-all;
  background: var(--color-neutral-100); padding: 2px 6px;
}

/* The rep's own pipeline in the Play sidebar. Deliberately quiet: it is a
   reference list beside the card, not a second scoreboard competing with it. */
.opp-list { display: flex; flex-direction: column; }
.opp {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}
.opp:first-child { border-top: none; padding-top: 0; }
.opp-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.opp-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 3px;
  font-size: 11px; letter-spacing: .04em; color: var(--muted);
}
.opp-stage { text-transform: uppercase; }

/* --- Leaderboards --------------------------------------------------- */
.podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
  margin: var(--space-6) 0;
}
.pod { padding: var(--space-6); background: var(--color-bg); }
.pod.first { background: var(--field); color: #fff; }

/* The place is the whole point of a podium, and at 11px grey beside a
   bordered country chip it read as a stray character rather than a rank.
   Same chip geometry as .flag so the two sit as a pair, but filled — the
   number is the label, the country is the qualifier. */
.pod-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px;
  margin-right: var(--space-2); margin-bottom: var(--space-3);
  vertical-align: middle;
  border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  line-height: 1; letter-spacing: .02em;
}
/* On the dark first-place field a filled accent chip disappears into the
   navy, so first place inverts: the brightest thing on the card. */
.pod.first .pod-rank {
  background: var(--color-accent-300); border-color: var(--color-accent-300);
  color: var(--field);
}
.pod .flag { vertical-align: middle; }
.pod-name { font-family: var(--font-heading); font-size: 26px; font-weight: 600; margin-top: var(--space-2); }
.pod-pts  { font-family: var(--font-heading); font-size: 48px; font-weight: 600; line-height: 1; color: var(--color-accent); }
.pod.first .pod-pts { color: var(--color-accent-300); }
.pod .flag { margin-bottom: var(--space-3); }
.pod.first .flag { background: transparent; border-color: var(--color-accent-600); color: var(--color-accent-300); }

.lb-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.lb-row:first-child { border-top: 1px solid var(--color-divider); }
.lb-row.me { background: var(--color-accent-100); }
.lb-rank { width: 28px; font-family: var(--font-heading); font-weight: 600;
           color: var(--color-neutral-600); text-align: center; }
.lb-name { font-weight: 600; }
.lb-sub  { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lb-pts  { margin-left: auto; text-align: right; }
.lb-pts b { font-family: var(--font-heading); font-size: 21px; font-weight: 600; }

.pips { display: flex; gap: 2px; margin-top: 5px; }
.pip { width: 14px; height: 6px; background: var(--color-neutral-300); }
.pip.on { background: var(--color-accent); }

/* --- Tables --------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600);
  background: var(--color-neutral-200); border-bottom: 1px solid var(--color-divider);
  position: sticky; top: 0;
}
table.data td {
  padding: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.data .num { font-variant-numeric: tabular-nums; }

/* --- Feed ----------------------------------------------------------- */
.feed-item {
  display: flex; gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.feed-item:last-child { border-bottom: none; }
.avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--color-divider); background: var(--color-bg);
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  color: var(--color-accent-700);
}

/* --- Admin square editor -------------------------------------------- */
.form-2      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.season-form { display: grid; grid-template-columns: 2fr 1fr 1fr 90px 90px auto;
               gap: var(--space-3); align-items: end; margin-top: var(--space-6); }
.mission-form{ display: grid; grid-template-columns: 150px 110px 1fr; gap: var(--space-3); }
.plan-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
               background: var(--color-divider); border: 1px solid var(--color-divider); }

.sq-edit {
  border: 1px solid var(--color-divider); background: var(--color-bg);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.sq-edit-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sq-num {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
  color: var(--color-accent-700);
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.sq-edit-grid { display: grid; grid-template-columns: 170px 150px 1fr; gap: var(--space-3); }
.disclose {
  margin-top: var(--space-3); padding: 0;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
  background: none; border: none; cursor: pointer;
}
.disclose:hover { text-decoration: underline; }

/* --- Modal ---------------------------------------------------------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
  display: grid; place-items: center; padding: var(--space-6);
}
.modal {
  width: 100%; max-width: 460px; background: var(--color-bg);
  border: 1px solid var(--color-divider); box-shadow: var(--shadow-3);
  max-height: 90vh; overflow: auto;
}
.modal-hd { padding: var(--space-6) var(--space-6) 0; }
.modal-bd { padding: var(--space-4) var(--space-6); }
.modal-ft { padding: 0 var(--space-6) var(--space-6); display: flex; gap: var(--space-2); justify-content: flex-end; }

/* --- Toast ---------------------------------------------------------- */
#toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 200;
          display: flex; flex-direction: column; gap: var(--space-3); }
.toast {
  padding: var(--space-3) var(--space-6); background: var(--field); color: #fff;
  font-size: 14px; box-shadow: var(--shadow-2); max-width: 360px;
  animation: rise .18s ease-out;
}
.toast.ok  { background: var(--color-accent); }
.toast.err { background: #7a2f2f; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* --- Empty / loading ------------------------------------------------ */
.empty { padding: var(--space-8) var(--space-6); text-align: center; color: var(--muted); }
.empty-icon { display: flex; justify-content: center; margin-bottom: var(--space-3); color: var(--color-neutral-400); }

.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1000px) {
  .play { grid-template-columns: 1fr; }
  .missions { grid-template-columns: 1fr; }
  .missions-side { flex-direction: row; }
  .missions-side > * { flex: 1; }
  .sq-edit-grid { grid-template-columns: 1fr; }
  .season-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .form-2, .season-form, .mission-form, .plan-grid { grid-template-columns: 1fr; }
  .season-form { align-items: stretch; }
  .podium { grid-template-columns: 1fr; }
}

/* --- Phone ----------------------------------------------------------
   The nav becomes a fixed bottom bar. The card stays five wide: a bingo
   card that is not a square grid cannot show you a line, and the line is
   the game. */
@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 var(--space-4); }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }

  /* backdrop-filter or transform here would make the header a containing
     block for its position:fixed descendants and pin the bottom bar to it. */
  .topbar { background: var(--color-bg); }
  /* The header is one row on a 390px screen and it was carrying six things:
     mark, wordmark, org name, language menu, full name, points. Almost all of
     it is identity a reader already knows. What is left is the mark (home),
     and the points (the number they came to see). The rest moves into the
     profile sheet behind the pill, which is one tap away and has room. */
  .topbar-in { min-height: 52px; gap: var(--space-3); }
  .brand-sub { display: none; }
  .brand { flex: none; min-height: 44px; align-items: center; }
  .brand-name { font-size: 15px; white-space: nowrap; }
  .lang-shell { display: none; }
  .userpill { padding: 3px 3px 3px var(--space-2); gap: var(--space-2); min-width: 0; flex: none;
              min-height: 44px; }
  .userpill-name { max-width: 82px; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; display: block; }
  .userpill-sub { display: none; }
  .userpill-pts { white-space: nowrap; padding: 4px var(--space-2); font-size: 11px; }

  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; border: none; border-top: 1px solid var(--color-divider);
    background: var(--color-bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    padding: var(--space-2) var(--space-1); min-height: 50px;
    font-size: 10px; letter-spacing: .04em;
  }
  .tab + .tab { border-left: 1px solid var(--color-divider); }
  .tab-brief { display: block; }
  .tab-long { display: none; }
  .tab svg { width: 18px; height: 18px; margin: 0 auto; }
  /* On the bottom bar there is no room beside the label, so it rides the icon. */
  .tab-badge { position: absolute; top: 3px; right: 50%; margin: 0 -18px 0 0; }
  main { padding-bottom: 84px; }

  .grid25 { grid-template-columns: repeat(5, 1fr); }
  .sq { min-height: 0; aspect-ratio: 1; padding: var(--space-2);
        justify-content: center; align-items: center; text-align: center; }
  .sq:hover { background: var(--color-bg); }
  .sq.done:hover { background: var(--color-accent); }
  .sq-label { display: none; }
  .sq-tag { font-size: 9px; letter-spacing: .02em; line-height: 1.15; padding: 0;
            overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;
            -webkit-box-orient: vertical; }
  .sq-mark { position: static; margin-top: 2px; font-size: 12px; }
  .sq.open .sq-mark { opacity: .45; }
  .sq.keystone::before { top: 2px; right: 3px; font-size: 10px; }

  /* Everything you tap is at least a fingertip — including the bare <button>s
     the auth pages use as links, and every select. */
  .btn, .chip, select { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .mission-cta, .disclose, .auth-links button {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .season-strip { grid-template-columns: repeat(2, 1fr); }
  .season-strip .seg { padding: var(--space-3) var(--space-4); }
  .season-strip b { font-size: 21px; }
  .stat b { font-size: 19px; }
  .legend { font-size: 10px; gap: var(--space-3); flex-wrap: wrap; }
  .sq-edit-top { flex-wrap: wrap; }
  .missions-side { flex-direction: column; }

  /* On a desktop the missions sit beside the card and cost nothing. Stacked on
     a phone they push the card itself past 1400px of scroll — the reader opens
     the app to look at their grid and meets three paragraphs first. Card
     first, missions after. */
  #view-play { display: flex; flex-direction: column; }
  #view-play > .season-strip { order: 1; }
  #view-play > .play         { order: 2; }
  #view-play > .missions     { order: 3; margin: var(--space-6) 0 0; }

  /* The name and the season are already in the header and the strip above. */
  .card-hd #cardOwner, .card-hd #cardSub, .card-hd .flag { display: none; }
  .card-hd { padding: var(--space-3) var(--space-4); }

  /* The coaching line keeps its words on a phone — it is two sentences, and
     shortening it is what the model was asked to do already. Only the box
     tightens. */
  .missions-side .coach { padding: var(--space-3) var(--space-4); }
  .coach-line { font-size: 14px; max-width: none; }

  /* A dialog on a phone belongs at the bottom, thumb-height. */
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { max-width: none; max-height: 92vh; border: none; border-top: 1px solid var(--color-divider); }
  .modal-ft { position: sticky; bottom: 0; background: var(--color-bg);
              padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }

  .table-scroll { position: relative; }
  .table-scroll::after {
    content: "swipe →"; position: sticky; left: 100%; bottom: 0;
    display: block; width: max-content; padding: 3px var(--space-2); margin: var(--space-1);
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); background: var(--color-neutral-100);
  }
}

/* --- Phone, every page --------------------------------------------------
   Shared by the three apps and the public pages. */
@media (max-width: 720px) {
  /* iOS zooms the page into any field set under 16px and leaves it there. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }

  /* Nothing under 11px on a phone. */
  .tab-brief, .legend, .table-scroll::after, .userpill-sub { font-size: 11px; }
  .sq-tag { font-size: 10px; }

  /* The small controls a thumb has to hit: ticks, sliders, and the names
     that act as links inside a sentence. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  input[type="range"] { height: 36px; }
  .linkbtn { padding-block: 6px; }

  /* Toasts sit above the bottom tab bar and use the width they have. */
  #toasts { left: var(--space-3); right: var(--space-3); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .toast { max-width: none; }
  main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* A table with five or more columns is a stack of cards: one card per
     row, two values a line, each value under its column heading. api.js
     copies the headings into data-label and adds `many`; a table with fewer
     columns stays a table and still scrolls sideways if it has to. */
  table.data.many { display: block; }
  table.data.many thead { display: none; }
  table.data.many tbody { display: block; }
  table.data.many tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
  }
  table.data.many tr:last-child { border-bottom: none; }
  table.data.many td {
    display: block; padding: 0; border: none; text-align: start; min-width: 0; overflow-wrap: anywhere;
  }
  table.data.many td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-heading); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  /* The first column names the row (a reference, a person, a material) and
     reads as the card's title, full width and without a heading over it. */
  table.data.many td:first-child { grid-column: 1 / -1; font-weight: 600; }
  table.data.many td:first-child::before,
  table.data.many td[data-label=""]::before,
  table.data.many td:not([data-label])::before { display: none; }
  table.data.many td:empty { display: none; }
  table.data.many td[colspan] { grid-column: 1 / -1; }
  table.data.many td input, table.data.many td select { width: 100%; max-width: none; }
  .table-scroll:has(table.data.many) { overflow-x: visible; }
  .table-scroll:has(table.data.many)::after { display: none; }
}

/* --- Narrow phones ---------------------------------------------------
   Under 430px the header cannot hold a wordmark as well as a name and a
   score, and German or Portuguese labels are a third longer than the English
   ones they were spaced for. Drop to the essentials rather than shrinking
   type until it stops being readable. */
@media (max-width: 430px) {
  .brand-name { display: none; }
  .userpill-name { display: none; }
  .userpill { padding: 3px; }
  /* Two segments a row, and the label gets the width it needs for a long
     word like "gesicherte Felder" instead of breaking mid-word. */
  .season-strip .seg { padding: var(--space-3); }
  .season-strip b { font-size: 19px; }
  .season-strip .seg span { font-size: 10px; letter-spacing: .04em; }
  .legend { gap: var(--space-2) var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   Right-to-left (Arabic)

   Most of the layout is flex and grid, which mirror themselves when `dir`
   flips — those need nothing. What does not mirror automatically is anything
   pinned with left/right, anything with a directional border, and text that
   was aligned explicitly. Those are listed here.

   The bingo card is deliberately NOT mirrored beyond what dir does on its
   own: a 5x5 grid reads as a grid in either direction, and flipping the fill
   order would make a screenshot of an Arabic card disagree with an English
   one about which line is complete.
   ===================================================================== */

[dir="rtl"] {
  /* Barlow has no Arabic coverage; fall through to the platform's own face
     rather than rendering boxes. Barlow stays first for Latin text mixed in
     (client names, deal codes, "Q4"). */
  --font-heading: "Barlow Condensed", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Barlow", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] .sq { text-align: right; }
[dir="rtl"] .sq-tag { padding-right: 0; padding-left: 30px; }
[dir="rtl"] .sq-mark { right: auto; left: var(--space-4); }
[dir="rtl"] .sq.keystone::before { right: auto; left: 34px; }

[dir="rtl"] .mission-x { right: auto; left: var(--space-6); }
[dir="rtl"] .nextmove { text-align: right; }
[dir="rtl"] .stat-strip .stat { text-align: right; }

[dir="rtl"] .tab + .tab { border-left: none; border-right: 1px solid var(--color-divider); }
[dir="rtl"] .chip + .chip { border-left: none; border-right: 1px solid var(--color-divider); }
[dir="rtl"] .season-strip .seg + .seg { border-left: none; border-right: 1px solid var(--color-divider); }
[dir="rtl"] .season-strip .seg:first-child { padding-left: var(--space-6); padding-right: 0; }

[dir="rtl"] .lb-pts { margin-left: 0; margin-right: auto; text-align: left; }
[dir="rtl"] .pod-rank { margin-right: 0; margin-left: var(--space-2); }
[dir="rtl"] .userpill { padding: 4px var(--space-3) 4px 4px; }
[dir="rtl"] table.data th, [dir="rtl"] table.data td { text-align: right; }
[dir="rtl"] .modal-ft { justify-content: flex-start; }
[dir="rtl"] .legal-prose li::before,
[dir="rtl"] .drift li::before,
[dir="rtl"] .price li::before { transform: scaleX(-1); }

/* Numbers, codes and dates stay left-to-right inside right-to-left prose. */
[dir="rtl"] .score-big, [dir="rtl"] .stat b, [dir="rtl"] .season-strip b,
[dir="rtl"] .h2h-score, [dir="rtl"] .pod-pts, [dir="rtl"] .lb-pts b,
[dir="rtl"] .price-amt, [dir="rtl"] .userpill-pts, [dir="rtl"] .calc-line b {
  direction: ltr; unicode-bidi: isolate;
}

[dir="rtl"] .table-scroll::after { content: "← اسحب"; left: 0; right: 100%; }

@media (max-width: 720px) {
  [dir="rtl"] .tab-badge { right: auto; left: 50%; margin: 0 0 0 -18px; }
  [dir="rtl"] .sq-tag { padding: 0; }
}


/* --- Profile: connect your AI ------------------------------------------- */
.ai-connect { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.ai-keys { display: grid; gap: 6px; margin-bottom: 10px; }
.ai-key { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; background: var(--color-neutral-100, #f4f6f8); }
.ai-key .btn { margin-inline-start: auto; }