/* =============================================================================
   ui.css — the shared components (spec §6.1). Plain CSS: no JavaScript is
   needed to look right. Controls are 44 px tall (touch targets); `.btn--sm`
   (36 px) is for dense desktop rows only. Colours come from tokens.css.
   ============================================================================= */
@layer components {
  /* ---- Layout helpers ---------------------------------------------------- */
  .stack { display: grid; gap: var(--sp-4); align-content: start; }
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

  /* ---- Buttons ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-15);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .btn:hover { background: var(--surface-2); color: var(--text); }
  .btn:active { transform: translateY(1px); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; }
  .btn--primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
  .btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
  .btn--quiet { background: transparent; border-color: transparent; }
  .btn--quiet:hover { background: var(--surface-2); }
  .btn--danger { border-color: var(--bad); color: var(--bad); }
  .btn--danger:hover { background: var(--bad-soft); color: var(--bad); }
  .btn--block { display: flex; width: 100%; }
  @media (min-width: 1100px) {
    .btn--sm { min-height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-13); }
  }

  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .icon-btn[aria-pressed='true'] { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
  .icon-btn .badge { position: absolute; top: 4px; right: 4px; }

  .badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--bad);
    color: var(--on-bad);
    font-size: var(--fs-12);
    font-weight: var(--fw-heavy);
    line-height: 1;
  }

  /* ---- Chips ------------------------------------------------------------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    line-height: 1;
    white-space: nowrap;
  }
  button.chip, a.chip { background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
  button.chip:not([aria-pressed='true']):not(.chip--active):hover, a.chip:not([aria-pressed='true']):not(.chip--active):hover { background: var(--surface-2); }
  .chip--active, .chip[aria-pressed='true'] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
  @media (max-width: 1099.98px) {
    button.chip, a.chip { min-height: var(--control-h); }
  }

  /* ---- Surfaces ---------------------------------------------------------- */
  .card {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .panel__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .panel__head h2, .panel__head h3 { font-size: var(--fs-16); }
  .panel__body { padding: var(--sp-5); }

  /* ---- Forms ------------------------------------------------------------- */
  .field { display: grid; gap: var(--sp-2); }
  .field__label { font-size: var(--fs-13); font-weight: var(--fw-bold); }
  .field__help { color: var(--muted); font-size: var(--fs-13); }
  .field__error { color: var(--bad); font-size: var(--fs-13); font-weight: var(--fw-bold); }
  .input, .select {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
  }
  textarea.input { min-height: 96px; padding: var(--sp-3); }
  .input::placeholder { color: var(--muted); }
  .input[aria-invalid='true'] { border-color: var(--bad); }

  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--control-h);
    cursor: pointer;
  }
  .switch input {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    margin: 0;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    appearance: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .switch input::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    transition: transform var(--dur-fast) var(--ease);
  }
  .switch input:checked { background: var(--primary); }
  .switch input:checked::after { transform: translateX(18px); }

  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
  }
  .seg label { position: relative; display: inline-flex; }
  .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .seg span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 36px;
    padding: 0 var(--sp-3);
    border-radius: 8px;
    color: var(--muted);
    font-weight: var(--fw-bold);
  }
  .seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
  @media (max-width: 1099.98px) {
    .seg span { min-height: var(--control-h); }
  }

  /* ---- Section tabs (the look of <tab-strip>) ---------------------------- */
  .tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 var(--sp-3);
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: var(--fw-bold);
    text-decoration: none;
    white-space: nowrap;
  }
  .tabs a:hover, .tabs button:hover { color: var(--text); }
  .tabs [aria-current='page'], .tabs [aria-selected='true'] { border-bottom-color: var(--primary); color: var(--text); }

  /* ---- Lists ------------------------------------------------------------- */
  /* One column that may shrink: a long title ends in its ellipsis instead of widening the list past its panel. */
  .list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
  }
  .list-row:last-child { border-bottom: 0; }
  a.list-row:hover { background: var(--surface-2); color: var(--text); }
  .list-row__main { flex: 1; min-width: 0; }
  .list-row__title { display: block; overflow: hidden; font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
  .list-row__meta { display: block; color: var(--muted); font-size: var(--fs-13); }
  a.list-row__main { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-height: var(--control-h); color: inherit; text-decoration: none; }
  a.list-row__main:hover .list-row__title { text-decoration: underline; }

  .avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-2);
  }
  .avatar svg { width: 100%; height: 100%; }
  .avatar--24 { width: 24px; height: 24px; }
  .avatar--44 { width: 44px; height: 44px; }
  .avatar--48 { width: 48px; height: 48px; }
  .avatar--72 { width: 72px; height: 72px; }

  /* ---- States ------------------------------------------------------------ */
  .empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-5);
    color: var(--muted);
    text-align: center;
  }
  .empty svg.i { width: 40px; height: 40px; color: var(--line-strong); }
  .empty__title { color: var(--text); font-size: var(--fs-18); font-weight: var(--fw-heavy); }

  .skeleton {
    min-height: 16px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-sweep 1.2s linear infinite;
  }
  @keyframes skeleton-sweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }

  .banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-weight: var(--fw-bold);
  }
  .banner--warn { color: var(--warn); }
  .banner--bad { background: var(--bad-soft); color: var(--bad); }
  /* Green text on a green tint falls short of 4.5:1; the icon carries the colour. */
  .banner--good { background: var(--good-soft); color: var(--text); }
  .banner--good .i { color: var(--good); }

  /* ---- Overlays ---------------------------------------------------------- */
  .sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    max-height: 80dvh;
    overflow: auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }
  .menu {
    position: absolute;
    z-index: 40;
    min-width: 220px;
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }

  .toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    z-index: 100;
    display: grid;
    gap: var(--sp-2);
    width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
  }
  @media (max-width: 699.98px) {
    .toasts { bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--text);
    color: var(--bg);
    box-shadow: var(--shadow-2);
    font-weight: var(--fw-bold);
    pointer-events: auto;
  }
  .toast--good svg.i, .toast--bad svg.i, .toast--warn svg.i { color: var(--electric); }

  .dialog {
    width: min(92vw, 420px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-2);
  }
  .dialog::backdrop { background: var(--scrim); }
  .dialog__body { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
  .dialog__text { font-size: var(--fs-16); }
  .dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

  /* ---- Game parts: player strip, clock, move list ------------------------ */
  player-strip { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; }
  .ps__who { flex: 1; min-width: 0; }
  .ps__name { display: block; overflow: hidden; font-weight: var(--fw-heavy); text-overflow: ellipsis; white-space: nowrap; }
  .ps__meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-13); }
  .ps__turn { color: var(--good); font-weight: var(--fw-bold); }
  .ps__captured { letter-spacing: -2px; }
  .ps__delta { font-weight: var(--fw-bold); }

  chess-clock {
    display: block;
    min-width: 92px;
    margin-left: auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-num);
    font-size: var(--fs-24);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: right;
  }
  chess-clock.is-active { border-color: transparent; background: var(--primary); color: var(--on-primary); }
  chess-clock.is-low { color: var(--bad); }
  chess-clock.is-active.is-low { background: var(--bad); color: var(--on-bad); }
  chess-clock.hidden { visibility: hidden; }
  @media (max-width: 699.98px) {
    chess-clock { min-width: 80px; font-size: var(--fs-20); }
  }

  /* The eval bar (the computer tab, a game's review): Black's share in ink, White's in white, in both colour modes
     (the sidebar's two constants). */
  .eval { display: flex; align-items: center; gap: var(--sp-2); }
  .eval__track { flex: 1; height: 10px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--side-bg); }
  .eval__fill { width: var(--eval, 50%); height: 100%; background: var(--side-active-text); transition: width var(--dur) var(--ease); }
  .eval__label { min-width: 3.5em; color: var(--muted); font-size: var(--fs-13); text-align: end; }

  move-list { display: block; min-width: 0; }   /* on a phone its one row scrolls inside it, never widening the panel */
  .ml__grid { display: grid; grid-template-columns: 2.5rem 1fr 1fr; align-content: start; padding: var(--sp-2); }
  .ml__no { padding: var(--sp-2); color: var(--muted); font-size: var(--fs-13); }
  .ml__move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 36px;
    padding: var(--sp-2);
    border-radius: 8px;
    color: var(--text);
    font-weight: var(--fw-bold);
    text-align: left;
    cursor: pointer;
  }
  .ml__move:hover { background: var(--surface-2); }
  .ml__move[aria-current='true'] { background: var(--primary); color: var(--on-primary); }
  /* A figurine in a move (core/moves.js formatSan): a symbol font that has the glyph, the text's own colour. */
  .san-fig { font-family: var(--font-chess); font-weight: normal; }
  /* A review's mark beside its move (?! ? ??), in text colours — a blunder's in red; the word is in the move's label. */
  .ml__mark { font-size: var(--fs-12); font-weight: var(--fw-heavy); color: var(--muted); }
  .ml__mark--blunder { color: var(--bad); }
  .ml__move[aria-current='true'] .ml__mark { color: inherit; }
  .ml__empty { padding: var(--sp-4); color: var(--muted); }
  @media (max-width: 1099.98px) {
    .ml__move { justify-content: center; min-width: var(--control-h); min-height: var(--control-h); }
  }
  @media (max-width: 699.98px) {
    .ml__grid { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
    .ml__no { padding: var(--sp-2) 0 var(--sp-2) var(--sp-2); }
    .ml__move { flex: none; border: 1px solid var(--line); background: var(--surface); }
  }
}