/* ==========================================================================
   kit.css — the site's one set of components (2026-10-14)

   Why this file exists: 测速, 对战 and 排行榜 each grew their own segmented
   control, chips, option cards, card heads and stat blocks (eleven segmented
   controls, twenty-odd pill/chip variants across app.css and leaderboard.css),
   so pages drifted apart a little more with every redesign. Everything here
   is built only from tokens.css, so dark mode comes for free, and a page uses
   these classes instead of inventing its own. kit.html shows each one.

   Rules the components encode:
   - Choosing is always blue (the structure colour). A page's own colour lives
     in its banner illustration only — never on a selected chip or tab.
   - Gold is the one primary action on a view (.btn-gold). Blue .btn is for
     repeated actions in lists ("开始").
   - Card titles sit on the card itself, no grey strip; one size everywhere.
   - Loaded after base.css and before app.css, so a page's old rules still win
     while it is being moved over; delete them as each page migrates.
   ========================================================================== */

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --ui-gap: 20px;          /* between cards, both directions */
  --ui-aside: 320px;       /* the right column on every two-column page */
  --ui-pad: 22px;          /* inside a card */

  --ui-title: 16px;        /* card title */
  --ui-h2: 19px;           /* section title outside a card */
  --ui-label: 12.5px;      /* field label above a control */
  --ui-meta: 12.5px;       /* secondary line under a title */
}

/* ---------- layout ------------------------------------------------------- */

/* Pages put their content straight into .pg-body, which already matches the
   banner's width at every screen size; these only arrange what goes inside. */
.ui-stack { display: grid; gap: var(--ui-gap); min-width: 0; }
.ui-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ui-aside);
  gap: var(--ui-gap);
  align-items: start;
}
.ui-split > * { min-width: 0; }
@media (max-width: 980px) {
  .ui-split { grid-template-columns: minmax(0, 1fr); }
}

.ui-section + .ui-section { margin-top: var(--sp-10); }
.ui-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.ui-h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--ui-h2);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.ui-section-meta { color: var(--text-dim); font-size: var(--ui-meta); }

/* ---------- card --------------------------------------------------------- */

.ui-card {
  min-width: 0;
  padding: var(--ui-pad);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.ui-card.is-flush { padding: 0; overflow: hidden; }
.ui-card.is-flush > .ui-card-head { padding: var(--ui-pad) var(--ui-pad) 0; }
.ui-card.is-sunken { background: var(--bg-soft); box-shadow: none; }

.ui-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ui-card-title {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--ui-title);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}
.ui-card-sub { margin-top: 2px; color: var(--text-dim); font-size: var(--ui-meta); line-height: 1.45; }
.ui-card-action { flex: 0 0 auto; color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-semibold); text-decoration: none; }
.ui-card-action:hover { text-decoration: underline; }

/* A card split into a main area and a quieter side panel (测速's hero). */
.ui-card.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); padding: 0; overflow: hidden; }
.ui-card.is-split > * { padding: var(--ui-pad); min-width: 0; }
.ui-card.is-split > * + * { border-left: 1px solid var(--line-soft); background: var(--bg-soft); }
@media (max-width: 820px) {
  .ui-card.is-split { grid-template-columns: minmax(0, 1fr); }
  .ui-card.is-split > * + * { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* ---------- field: a label above a control --------------------------------- */

.ui-field + .ui-field { margin-top: var(--sp-4); }
.ui-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--ui-label);
  font-weight: var(--fw-semibold);
}

/* ---------- segmented control: pick one of a few (时长, 赛道, 视图) --------- */

.ui-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bg-sunken);
}
.ui-seg.is-inline { display: inline-flex; }
.ui-seg > button,
.ui-seg > a {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ui-seg.is-inline > button,
.ui-seg.is-inline > a { flex: 0 0 auto; }
.ui-seg > :hover { color: var(--text-strong); }
.ui-seg > [aria-pressed='true'],
.ui-seg > [aria-selected='true'],
.ui-seg > [aria-current='page'],
.ui-seg > .is-on {
  background: var(--bg-elevated);
  color: var(--accent-ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
.ui-seg svg { width: 15px; height: 15px; }
.ui-seg.is-lg > button,
.ui-seg.is-lg > a { padding: 9px 18px; font-size: 14.5px; }

/* ---------- chips: pick from many (文章, 词库, 比什么) ------------------------ */

.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ui-chip:hover { border-color: var(--accent-line); color: var(--text-strong); }
.ui-chip[aria-pressed='true'],
.ui-chip.is-on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
}
.ui-chip small { color: var(--text-dim); font-size: 11.5px; font-weight: var(--fw-medium); }
.ui-chip.is-more { border-style: dashed; color: var(--text-muted); }

/* ---------- option cards: pick a mode (开一局, 榜单, 自由测速 / 打字高考) ---- */

.ui-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ui-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ui-option:hover { border-color: var(--accent-line); }
.ui-option[aria-pressed='true'],
.ui-option[aria-selected='true'],
.ui-option.is-on {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent);
}
.ui-option-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
}
.ui-option.is-on .ui-option-ico,
.ui-option[aria-pressed='true'] .ui-option-ico,
.ui-option[aria-selected='true'] .ui-option-ico { background: var(--accent); color: var(--text-invert); }
.ui-option-ico svg { width: 20px; height: 20px; }
.ui-option-txt { display: grid; gap: 1px; min-width: 0; }
.ui-option-txt b { overflow: hidden; color: var(--text-strong); font-size: 14.5px; font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
.ui-option-txt small { overflow: hidden; color: var(--text-dim); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
/* On a coloured banner: same card, glass background. */
.pg-band .ui-option { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px); }
.pg-band .ui-option.is-on,
.pg-band .ui-option[aria-pressed='true'] { border-color: var(--accent); background: var(--bg-elevated); }

/* ---------- stats: a number that matters ----------------------------------- */

.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ui-stats > .ui-stat { padding: 12px 14px; }
.ui-stats > .ui-stat + .ui-stat { border-left: 1px solid var(--line-soft); }
.ui-stat { display: grid; gap: 2px; min-width: 0; }
.ui-stat-num {
  color: var(--text-strong);
  font-size: 22px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ui-stat-num small { margin-left: 3px; color: var(--text-dim); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0; }
.ui-stat-label { color: var(--text-dim); font-size: 12.5px; }
.ui-stat.is-hero .ui-stat-num { font-size: 44px; letter-spacing: -0.02em; }
.ui-stat.is-hero .ui-stat-num small { font-size: 15px; }
.ui-stat.is-good .ui-stat-num { color: var(--green-ink); }
.ui-stat.is-bad .ui-stat-num { color: var(--red-ink); }

/* ---------- list rows: lead · title/sub · value · action ------------------- */

.ui-list { display: grid; }
.ui-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.ui-list > .ui-row:first-child { border-top: 0; }
.ui-row-lead { flex: 0 0 auto; }
.ui-row-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.ui-row-title { overflow: hidden; color: var(--text-strong); font-size: 14.5px; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.ui-row-sub { overflow: hidden; color: var(--text-dim); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-value { flex: 0 0 auto; color: var(--text-strong); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; text-align: right; }
.ui-row-value small { margin-left: 2px; color: var(--text-dim); font-size: 11.5px; font-weight: var(--fw-medium); }
.ui-row-value.is-stack small { display: block; margin-left: 0; }
.ui-row.is-me { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; background: var(--accent-tint); }

/* A rank number in a list. 1–3 are medals; the rest are quiet. */
.ui-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.ui-rank.is-1 { background: var(--gold-300); color: var(--gold-ink); }
[data-theme='dark'] .ui-rank.is-1 { background: var(--gold-400); }
.ui-rank.is-2 { background: #dfe5ec; color: #45505c; }
.ui-rank.is-3 { background: #f3d2b4; color: #7a4416; }

/* ---------- small tags ------------------------------------------------------ */

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.ui-tag.is-blue { background: var(--accent-tint); color: var(--accent-ink); }
/* gold-soft + gold-soft-ink: the same colours as gold-100 + gold-ink in light;
   in dark gold-ink is the dark text for a gold BUTTON and would vanish here */
.ui-tag.is-gold { background: var(--gold-soft); color: var(--gold-soft-ink); }
.ui-tag.is-green { background: var(--green-soft); color: var(--green-ink); }
.ui-tag.is-red { background: var(--red-soft); color: var(--red-ink); }

/* ---------- empty state ------------------------------------------------------ */

.ui-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}
.ui-empty-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
.ui-empty-ico svg { width: 20px; height: 20px; }
.ui-empty b { color: var(--text-strong); font-size: 14.5px; }
.ui-empty .btn { margin-top: 8px; }

/* ---------- note: a tinted strip with a call to action (生成约战链接) -------- */

.ui-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}
.ui-note-txt { display: grid; gap: 2px; min-width: 0; }
.ui-note-txt b { color: var(--text-strong); font-size: 14.5px; }
.ui-note-txt span { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) { .ui-note { flex-direction: column; align-items: stretch; } }

/* ---------- toolbar: view switch on the left, quiet actions on the right ---- */

.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- 反馈附件（2026-10-16，ui.js attachBox / attachmentsHtml）---------- */
.att-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.att-list { display: contents; }
.att-add { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.att-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.att-add .ic { width: 16px; height: 16px; }
.att-hint { color: var(--text-dim); font-size: 12px; }
.att-box.has-files .att-hint { display: none; }
.att-chip { position: relative; display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 4px 26px 4px 4px; border: 1px solid var(--line-soft, var(--line)); border-radius: 10px; background: var(--bg-elevated); }
.att-chip.is-bad { border-color: var(--red-ink); }
.att-thumb { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 7px; background: var(--bg-soft); color: var(--text-muted); font-size: 10px; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-ring { position: absolute; inset: 0; background: conic-gradient(rgba(255,255,255,.0) calc(var(--p) * 1%), rgba(20,30,50,.45) 0); }
.att-meta { display: grid; min-width: 0; line-height: 1.25; }
.att-meta em { overflow: hidden; color: var(--text-strong); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.att-meta small { color: var(--text-dim); font-size: 11px; }
.att-chip.is-bad small { color: var(--red-ink); }
.att-x { position: absolute; top: 50%; right: 4px; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 15px; line-height: 20px; cursor: pointer; }
.att-x:hover { background: var(--bg-soft); color: var(--text-strong); }
.is-drop { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 14px; }
/* 对话里显示的附件 */
.att-show { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 6px; }
.att-img { display: block; overflow: hidden; width: 140px; height: 104px; border-radius: 12px; background: var(--bg-soft); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.att-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.att-img:hover img { transform: scale(1.04); }
.att-video { width: 280px; max-width: 100%; border-radius: 12px; background: #000; }
.att-doc { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: var(--bg-elevated); color: var(--text-strong); text-decoration: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.att-doc .ic { flex: none; width: 16px; height: 16px; color: var(--accent); }
.att-doc span { display: grid; min-width: 0; line-height: 1.3; text-align: left; }
.att-doc em { overflow: hidden; font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.att-doc small { color: var(--text-dim); font-size: 11.5px; }