/* Chess.free design tokens and shared components ("Crystal").
   Loaded first. Every screen uses these tokens and classes; other style sheets
   may reference var(--…) but should not introduce their own colours, radii or shadows.
   Board themes (boards.css, style.css board blocks) are data and keep their own colours.

   Components
     .pill            the button. Sizes: .sm .lg (md default). Variants: .primary .secondary .ghost .danger
                      .btn is an alias under the Crystal UI, so btn() callers keep working.
     .glass-card      paper glass panel; .glass-card.night on dark fields
     .chip            small status token (rating, time control, state). .chip.prov .chip.good .chip.bad .chip.on
     .seg             segmented control: <div class="seg"><label><input type=radio><span>…</span></label>…</div>
                      or buttons: <div class="seg" role="group"><button aria-pressed="true">…</button>…</div>
     .stat            big tabular number over a label: <div class="stat"><b>1216</b><span>Rating</span></div>
     .list-row        icon, title, sub line, chevron; 56px minimum
     .avatar-c        a piece inside a crystal circle, optional flag badge (.avatar-c[data-flag])
     .empty-state     illustration, one line, one pill
     .field-*         colour fields (paper, cobalt, amber) for screen and section backgrounds
*/

:root {
  /* ---------- brand ---------- */
  --paper: #f8eee2;
  --paper-hi: #fff9f1;
  --paper-lo: #f0e6d9;
  --ink-deep: #0c1836;
  --ink-soft: #424858;
  --cobalt: #1738bd;
  --cobalt-deep: #0d1b5e;
  --cobalt-ice: #e4e9fc;
  --amber: #f2b33d;
  --amber-deep: #8a5800;
  --glass-hi: #ffffff44;
  --white: #fff;

  /* ---------- semantic (AA on paper; *-on-dark AA on cobalt-deep) ---------- */
  --good-c: #1f6b46;
  --bad-c: #a8382d;
  --warn-c: #8a5800;
  --good-on-dark: #7fe0b0;
  --bad-on-dark: #ffa497;
  --warn-on-dark: #f6c35e;
  --line-c: #ddd2c7;
  --line2-c: #c5bcb3;

  /* ---------- type ---------- */
  --font-sans: Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-brand: "Frank Ruhl Libre", Georgia, serif;
  --display-size: clamp(30px, 3.4vw + 14px, 56px);
  --font-display: 700 var(--display-size)/1 var(--font-sans);
  --display-track: -.04em;
  --title-size: clamp(22px, 1vw + 17px, 26px);
  --font-title: 700 var(--title-size)/1.15 var(--font-sans);
  --font-body: 400 16px/1.5 var(--font-sans);
  --font-body-strong: 500 16px/1.5 var(--font-sans);
  --font-small: 400 14px/1.45 var(--font-sans);
  --font-label: 500 14px/1.3 var(--font-sans);
  --font-num-feat: tabular-nums;

  /* ---------- space (4-pt) ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---------- radius ---------- */
  --r-pill: 999px;
  --r-card: 20px;
  --r-control: 12px;
  --r-chip: 8px;

  /* ---------- elevation and glass ---------- */
  --cast-c: #23346c;
  --shadow-1: 0 2px 6px -3px color-mix(in srgb, var(--cast-c) 45%, transparent);
  --shadow-2: 0 9px 18px -10px color-mix(in srgb, var(--cast-c) 66%, transparent);
  --shadow-3: 0 22px 60px -24px color-mix(in srgb, var(--cobalt-deep) 70%, transparent);
  --glow-cobalt: 0 10px 22px -12px var(--cobalt);
  --glass-surface: color-mix(in srgb, var(--paper-hi) 78%, transparent);
  --glass-blur: blur(14px) saturate(1.2);
  --glass-edge: inset 0 1px 0 var(--glass-hi), 0 0 0 1px color-mix(in srgb, var(--ink-deep) 10%, transparent);
  --night-surface: color-mix(in srgb, var(--cobalt-deep) 84%, transparent);
  --night-edge: inset 0 1px 0 color-mix(in srgb, var(--white) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--white) 12%, transparent);
  --scrim: color-mix(in srgb, var(--ink-deep) 45%, transparent);
  --focus-ring: 2px solid var(--cobalt);

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(.18, .72, .2, 1);
  --ease-settle: cubic-bezier(.2, .75, .25, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 460ms;

  /* ---------- layout ---------- */
  --tabbar-h: 0px;
}

/* ---------- colour fields ---------- */
.field-paper { --field: var(--paper); --fg: var(--ink-deep); --fg2: var(--ink-soft); background: var(--field); color: var(--fg); }
.field-cobalt { --field: var(--cobalt-deep); --fg: var(--paper); --fg2: color-mix(in srgb, var(--paper) 78%, transparent); background: var(--field); color: var(--fg); }
.field-amber { --field: var(--amber); --fg: var(--ink-deep); --fg2: color-mix(in srgb, var(--ink-deep) 78%, transparent); background: var(--field); color: var(--fg); }

/* ---------- pill (the button) ---------- */
.pill {
  --pill-bg: transparent; --pill-fg: var(--fg, var(--text)); --pill-edge: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer;
  font: 600 16px/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  border: 1.5px solid var(--pill-edge); background: var(--pill-bg); color: var(--pill-fg);
  transition: background-color var(--t-fast) var(--ease-settle), box-shadow var(--t-fast) var(--ease-settle), translate var(--t-fast) var(--ease-settle);
}
.pill .ic { width: 18px; height: 18px; flex: none; }
.pill.sm { min-height: 36px; padding: 6px 14px; font-size: 14px; gap: 6px; }
.pill.sm .ic { width: 16px; height: 16px; }
.pill.lg { min-height: 54px; padding: 14px 28px; font-size: 18px; }
.pill.primary { --pill-bg: var(--cobalt); --pill-fg: var(--white); --pill-edge: transparent; box-shadow: inset 0 1px 0 var(--glass-hi), var(--glow-cobalt); }
.pill.secondary { --pill-bg: var(--glass-surface); --pill-fg: var(--text, var(--ink-deep)); --pill-edge: color-mix(in srgb, currentColor 28%, transparent); }
.pill.ghost { --pill-edge: transparent; }
.pill.danger { --pill-fg: var(--bad-c); --pill-edge: color-mix(in srgb, var(--bad-c) 45%, transparent); }
.pill.danger.solid { --pill-bg: var(--bad-c); --pill-fg: var(--white); --pill-edge: transparent; }
.pill:disabled, .pill[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }
.pill:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
:is(.field-cobalt, [data-field="cobalt"]) .pill.primary { --pill-bg: var(--paper); --pill-fg: var(--cobalt-deep); }
:is(.field-cobalt, [data-field="cobalt"]) .pill.danger { --pill-fg: var(--bad-on-dark); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ---------- glass card ---------- */
.glass-card {
  background: var(--glass-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: var(--r-card); box-shadow: var(--glass-edge), var(--shadow-2); padding: var(--s4); color: var(--ink-deep);
}
.glass-card.night { background: var(--night-surface); box-shadow: var(--night-edge), var(--shadow-3); color: var(--paper); }
.glass-card > h3 { margin: 0 0 var(--s3); font: var(--font-title); letter-spacing: -.01em; }

/* ---------- chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px;
  border-radius: var(--r-chip); border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font: 500 14px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text2, var(--ink-soft));
  background: color-mix(in srgb, var(--paper-hi) 55%, transparent);
}
.chip b { font-weight: 700; color: var(--text, var(--ink-deep)); }
.chip .ic { width: 15px; height: 15px; }
.chip.prov b, .chip .prov { color: var(--text2, var(--ink-soft)); }
.chip.good { color: var(--good-c); border-color: color-mix(in srgb, var(--good-c) 40%, transparent); }
.chip.bad { color: var(--bad-c); border-color: color-mix(in srgb, var(--bad-c) 40%, transparent); }
.chip.on { background: var(--cobalt); color: var(--white); border-color: transparent; }
.chip.on b { color: inherit; }

/* ---------- segmented control ---------- */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg > label, .seg > button { flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label > span, .seg > button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px;
  border: 1.5px solid var(--line, var(--line-c)); border-radius: var(--r-control); background: var(--surface, var(--paper-hi));
  font: 500 15px/1.2 var(--font-sans); color: var(--text, var(--ink-deep)); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.seg > label > span:hover, .seg > button:hover { border-color: var(--line2, var(--line2-c)); }
.seg input:checked + span, .seg > button[aria-pressed="true"] {
  border-color: var(--cobalt); background: var(--cobalt-ice); box-shadow: inset 0 0 0 1px var(--cobalt); color: var(--cobalt-deep);
}
.seg input:focus-visible + span, .seg > button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.seg.pills > label > span, .seg.pills > button { border-radius: var(--r-pill); }

/* ---------- stat ---------- */
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat > b, .stat > dd { margin: 0; font: 700 30px/1.05 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text, var(--ink-deep)); }
.stat > span, .stat > dt { font: var(--font-small); color: var(--text2, var(--ink-soft)); }
.stat .prov { color: var(--text2, var(--ink-soft)); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s4); margin: 0; }

/* ---------- list row ---------- */
.list-row {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3) var(--s2);
  text-align: start; background: transparent; border: 0; border-bottom: 1px solid var(--line, var(--line-c));
  color: var(--text, var(--ink-deep)); font: inherit; cursor: pointer; border-radius: 0;
}
.list-row > span { flex: 1; min-width: 0; }
.list-row strong, .list-row small { display: block; }
.list-row strong { font: 600 17px/1.25 var(--font-sans); }
.list-row small { margin-top: 2px; font: var(--font-small); color: var(--muted, var(--ink-soft)); }
.list-row > .ic:first-child { color: var(--accent, var(--cobalt)); flex: none; }
.list-row > .ic-arrow, .list-row > .chev { flex: none; color: var(--muted, var(--ink-soft)); }
[dir="rtl"] .list-row > .chev { transform: scaleX(-1); }
.list-row:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* ---------- avatar ---------- */
.avatar-c {
  position: relative; flex: none; width: var(--av, 40px); height: var(--av, 40px); border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--white), var(--av-tint, var(--cobalt-ice)) 70%);
  box-shadow: var(--glass-edge), var(--shadow-1);
}
.avatar-c img, .avatar-c svg { width: 78%; height: 78%; }
.avatar-c[data-flag]::after {
  content: attr(data-flag); position: absolute; inset-block-end: -3px; inset-inline-end: -5px;
  font-size: calc(var(--av, 40px) * .38); line-height: 1;
}

/* ---------- empty state ---------- */
.empty-state { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s4); text-align: center; }
.empty-state .es-art { width: min(160px, 40vw); aspect-ratio: 1; display: grid; place-items: center; }
.empty-state .es-art img, .empty-state .es-art canvas { width: 100%; height: 100%; object-fit: contain; }
.empty-state p { margin: 0; font: var(--font-body-strong); color: var(--text, var(--ink-deep)); max-width: 32ch; }

/* ---------- display type ---------- */
.display { margin: 0; font: var(--font-display); letter-spacing: var(--display-track); }
.title { margin: 0; font: var(--font-title); letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- skeleton ---------- */
.skeleton { border-radius: var(--r-chip); background: color-mix(in srgb, var(--ink-deep) 8%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .skeleton { background: linear-gradient(90deg, color-mix(in srgb, var(--ink-deep) 7%, transparent) 30%, color-mix(in srgb, var(--ink-deep) 13%, transparent) 50%, color-mix(in srgb, var(--ink-deep) 7%, transparent) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
}
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- focus ---------- */
:where([data-ui="crystal"]) :where(button, a, summary, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* A <dl> stat keeps dt before dd in the markup; the number reads first. */
.stat > dt { order: 2; }
.stat > dd { order: 1; }

/* ---------- sheet (every dialog) ----------
   Desktop: a centred glass card (sm 420, md 560, lg 760). Phone (<=600px): a bottom
   sheet with a grab handle, max 92dvh, safe-area padding; size-full fills the screen.
   Header, scrolling body, footer pinned inside the sheet. */
.dlg.sheet {
  --sheet-w: 560px;
  border: 0; padding: 0; color: var(--text, var(--ink-deep)); background: var(--surface, var(--paper-hi));
  width: min(var(--sheet-w), calc(100vw - 32px)); max-width: none; max-height: min(88dvh, 880px);
  border-radius: var(--r-card); box-shadow: var(--glass-edge), var(--shadow-3); overflow: hidden;
}
.dlg.sheet[open] { display: flex; flex-direction: column; }
.dlg.sheet.size-sm { --sheet-w: 440px; }
.dlg.sheet:is(.size-lg, .size-full, .wide) { --sheet-w: 760px; }
.dlg.sheet.size-full { height: min(88dvh, 880px); }
.dlg.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg.sheet > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; gap: 0; }
.sheet-grab { display: none; }
.sheet-head { position: relative; flex: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); }
.sheet-head h2 { flex: 1; min-width: 0; margin: 0; font: var(--font-title); letter-spacing: -.01em; }
.sheet-head.bare { padding: 0; min-height: 0; }
.sheet-head.bare .sheet-x { position: absolute; z-index: 3; inset-block-start: var(--s2); inset-inline-end: var(--s2); }
.sheet-tile { flex: none; width: 44px; height: 44px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--cobalt-ice); color: var(--cobalt); box-shadow: var(--glass-edge); }
.sheet-x { flex: none; margin-inline-start: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--text2, var(--ink-soft)); cursor: pointer; }
.sheet-x:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s1) var(--s5) var(--s5); font: var(--font-body); }
.sheet-head.bare + .sheet-body { padding-top: var(--s6); }
.sheet-body > p, .sheet-body .muted { margin: 0; }
.sheet-foot { flex: none; padding: var(--s3) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); background: inherit; }
/* Pills sit on the right in both directions; the primary is the outermost. */
.sheet-foot .dlg-actions { display: flex; flex-wrap: wrap; gap: var(--s2); flex-direction: row-reverse; justify-content: flex-start; }
[dir="rtl"] .sheet-foot .dlg-actions { flex-direction: row; }
.sheet-foot .dlg-actions > * { flex: 0 0 auto; }
.dlg.sheet .muted { color: var(--text2, var(--ink-soft)); }
/* Fields: the sheet takes the colour, the components follow its tokens. */
.dlg.sheet[data-field="cobalt"] {
  background: var(--cobalt-deep); color: var(--paper); --surface: var(--cobalt-deep); --surface2: color-mix(in srgb, var(--paper) 10%, var(--cobalt-deep));
  --text: var(--paper); --text2: color-mix(in srgb, var(--paper) 78%, transparent); --muted: color-mix(in srgb, var(--paper) 70%, transparent);
  --line: color-mix(in srgb, var(--paper) 18%, transparent); --line2: color-mix(in srgb, var(--paper) 30%, transparent);
  --good: var(--good-on-dark); --bad: var(--bad-on-dark); --accent: var(--amber);
}
.dlg.sheet[data-field="amber"] { background: var(--amber); color: var(--ink-deep); --surface: var(--amber); --text: var(--ink-deep); --text2: color-mix(in srgb, var(--ink-deep) 80%, transparent); --muted: color-mix(in srgb, var(--ink-deep) 72%, transparent); --line: color-mix(in srgb, var(--ink-deep) 18%, transparent); }
@media (max-width: 600px) {
  .dlg.sheet { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; }
  .dlg.sheet.size-full { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .sheet-grab { display: block; flex: none; height: 22px; touch-action: none; cursor: grab; }
  .sheet-grab::before { content: ""; display: block; width: 40px; height: 5px; margin: 9px auto 0; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 24%, transparent); }
  .sheet-head { padding: var(--s1) var(--s4) var(--s2); touch-action: none; }
  .sheet-head.bare { padding: 0; }
  .sheet-head.bare + .sheet-body { padding-top: var(--s5); }
  .sheet-body { padding: var(--s1) var(--s4) var(--s4); gap: var(--s3); }
  .sheet-foot { padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .sheet-foot .dlg-actions > * { flex: 1 1 0; min-width: max-content; }
}
.sheet-body:focus { outline: none; }

/* ---------- avatar tiles ---------- */
.tile-cobalt { --av-tint: var(--cobalt-ice); }
.tile-amber { --av-tint: #fbe2a8; }
.tile-rose { --av-tint: #fbd6e4; }
.tile-mint { --av-tint: #cdeedd; }
.tile-night { --av-tint: #9fb0e8; }
.tile-paper { --av-tint: var(--paper-lo); }