/* Form9 - design tokens from _design/tokens.css (root CLAUDE.md "Documentation": code is truth,
   this file mirrors the token VALUES only; see _design/README.md for the spec they implement).
   Fonts load via a Google Fonts <link> in _Layout.cshtml, not @import (PersonalFinances precedent). */

:root {
  --f9-bg: #F6F7F8;
  --f9-surface: #FFFFFF;
  --f9-sunken: #EFF1F3;
  --f9-row-hover: #F1F6FA;
  --f9-border: #D9DEE3;          /* decorative dividers only */
  --f9-border-strong: #8A949E;   /* inputs, controls: 3.08:1 */
  --f9-ink: #16202A;             /* text 16.48:1; top bar bg */
  --f9-on-ink: #D5DAE0;          /* inactive nav on ink 11.72:1 */
  --f9-on-ink-muted: #C3CAD1;    /* 9.96:1 on ink */
  --f9-text-muted: #4A5561;      /* 7.60:1 */
  --f9-text-subtle: #5E6974;     /* 5.60:1 */
  --f9-accent: #1F5F8B;          /* 6.84:1 */
  --f9-accent-strong: #174A6D;
  --f9-accent-subtle: #E7EFF6;
  --f9-focus-halo: #C9DCEB;
  --f9-success: #1E6B45;  --f9-success-bg: #E5F2EA;
  --f9-neutral: #3E4750;  --f9-neutral-bg: #ECEEF0;
  --f9-danger: #A3262A;   --f9-danger-bg: #FBE9E9;
  --f9-banner-bg: #FCEFC7; --f9-banner-text: #4D3300; --f9-banner-rule: #D9BE6A;
  /* Chart categorical slots (dataviz skill validated pair - blue/orange, CVD Delta E 24.7,
     normal-vision 33.6, both >=3:1 on white - see Form9/CLAUDE.md). Blue is the same hue
     family as --f9-accent so single-series charts read as "on-brand"; orange is reserved for
     the second identity (Mississauga / re-noticed) only - never decoration. */
  --f9-chart-1: #2A78D6;
  --f9-chart-2: #EB6834;
  --f9-radius: 2px;
  --f9-row-h: 40px;
  --f9-serif: "IBM Plex Serif", Georgia, serif;
  --f9-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Bootstrap 5.3 mapping */
  --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
  --bs-font-monospace: var(--f9-mono);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.4286;  /* 20px on 14px */
  --bs-body-color: var(--f9-ink);
  --bs-body-bg: var(--f9-bg);
  --bs-secondary-color: var(--f9-text-muted);
  --bs-tertiary-color: var(--f9-text-subtle);
  --bs-secondary-bg: var(--f9-sunken);
  --bs-border-color: var(--f9-border);
  --bs-border-radius: 0.125rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.125rem;
  --bs-border-radius-pill: 0.125rem;
  --bs-primary: var(--f9-accent);
  --bs-primary-rgb: 31, 95, 139;
  --bs-primary-bg-subtle: var(--f9-accent-subtle);
  --bs-primary-text-emphasis: var(--f9-accent-strong);
  --bs-success: var(--f9-success);
  --bs-success-bg-subtle: var(--f9-success-bg);
  --bs-danger: var(--f9-danger);
  --bs-danger-bg-subtle: var(--f9-danger-bg);
  --bs-warning-bg-subtle: var(--f9-banner-bg);
  --bs-warning-text-emphasis: var(--f9-banner-text);
  --bs-link-color: var(--f9-accent);
  --bs-link-color-rgb: 31, 95, 139;
  --bs-link-hover-color: var(--f9-accent-strong);
  --bs-focus-ring-color: rgba(31, 95, 139, .35);
}

body { background: var(--f9-bg); }
h1, .f9-serif { font-family: var(--f9-serif); font-weight: 600; }
:focus-visible { outline: 2px solid var(--f9-accent); outline-offset: 2px; }

.btn-primary { --bs-btn-bg: var(--f9-accent); --bs-btn-border-color: var(--f9-accent);
  --bs-btn-hover-bg: var(--f9-accent-strong); --bs-btn-hover-border-color: var(--f9-accent-strong);
  --bs-btn-active-bg: var(--f9-accent-strong); }
.btn-outline-secondary { --bs-btn-color: var(--f9-ink); --bs-btn-border-color: var(--f9-border-strong);
  --bs-btn-hover-bg: var(--f9-bg); --bs-btn-hover-color: var(--f9-ink); --bs-btn-hover-border-color: var(--f9-border-strong); }
.form-control, .form-select { border-color: var(--f9-border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--f9-accent); box-shadow: 0 0 0 3px var(--f9-focus-halo); }

.table { --bs-table-hover-bg: var(--f9-row-hover); font-variant-numeric: tabular-nums; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--f9-border); }
.table > thead > tr > th { background: var(--f9-sunken); color: var(--f9-text-muted); font-size: 12px; font-weight: 600; }
.badge, .rounded-pill { border-radius: var(--f9-radius) !important; }
.font-monospace { font-size: 13px; }

/* ---------- Skip link ---------- */
.f9-skip-link {
  position: absolute; top: 0; left: 0; z-index: 10000;
  padding: 10px 16px; background: var(--f9-ink); color: #fff;
}

/* ================= Page shell ================= */
.f9-shell { position: sticky; top: 0; z-index: 50; }

.f9-topbar { height: 56px; background: var(--f9-ink); }
.f9-topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 56px;
  display: flex; align-items: center; gap: 40px;
}
.f9-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.f9-brand-name { font-family: var(--f9-serif); font-weight: 600; font-size: 19px; color: #fff; }
.f9-brand-divider { width: 1px; height: 20px; background: var(--f9-text-muted); }
.f9-brand-sub { font-size: 13px; color: var(--f9-on-ink-muted); }

.f9-nav { display: flex; align-self: stretch; gap: 4px; margin: 0; flex: 1 1 auto; }
.f9-nav-link {
  display: flex; align-items: center; height: 56px; padding: 0 14px;
  font-size: 14px; font-weight: 500; color: var(--f9-on-ink); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.f9-nav-link:hover { color: #fff; border-bottom-color: var(--f9-border-strong); }
.f9-nav-link.active { color: #fff; font-weight: 600; border-bottom-color: #fff; }

.f9-topbar-right { font-size: 13px; color: var(--f9-on-ink-muted); white-space: nowrap; }

/* ================= Shared bits ================= */
.f9-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.f9-section-label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--f9-ink); padding-bottom: 8px; margin-bottom: 16px;
}
.f9-section-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.f9-panel { background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius); max-width: 720px; padding: 40px; }
.f9-panel h1 { font-size: 20px; }
.f9-panel p { color: var(--f9-text-muted); font-size: 14px; }
.f9-panel-link { font-size: 16px; font-weight: 500; }
.f9-panel-caption { font-size: 12px; color: var(--f9-text-subtle); }

.f9-empty-state { background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius); padding: 24px; color: var(--f9-text-muted); }

.f9-status { display: inline-block; padding: 2px 8px; border-radius: var(--f9-radius); font-size: 12px; font-weight: 500; }
.f9-status-scheduled { background: var(--f9-success-bg); color: var(--f9-success); }
.f9-status-reissued { background: var(--f9-accent-subtle); color: var(--f9-accent-strong); }
.f9-status-superseded { background: var(--f9-neutral-bg); color: var(--f9-neutral); }

.f9-row-link { color: inherit; text-decoration: none; }
.f9-row-link::after { content: ""; }

/* Bootstrap's reboot sets kbd's `color` to --bs-body-bg (inverse-badge look) and never gets
   overridden here otherwise - on Form9's light theme that renders near-invisible text-on-bg
   (known defect, fixed 2026-09-26: the "/" hint glyph rendered as an empty box). text-subtle
   matches the sunken-bg pairing in _design/README.md's token table (4.95:1). */
kbd { font-family: var(--f9-mono); font-size: 12px; color: var(--f9-text-subtle); background: var(--f9-sunken); border: 1px solid var(--f9-border-strong); border-radius: var(--f9-radius); padding: 1px 5px; }

/* ================= Home ================= */
.f9-home-header { background: var(--f9-bg); border-bottom: 1px solid var(--f9-border); padding: 64px 0 48px; }
.f9-home-title { font-size: 30px; line-height: 38px; margin-bottom: 24px; }

.f9-home-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1024px) { .f9-home-forms { grid-template-columns: 1fr; } }
.f9-search-form { display: flex; }
.f9-home-date { font-family: var(--bs-font-monospace); }   /* .f9-date-input is the docket header's 40px field */
.f9-search-input {
  flex: 1 1 auto; min-width: 0; height: 56px; font-size: 18px; padding: 0 18px;
  border: 2px solid var(--f9-ink); border-right: 0; border-radius: var(--f9-radius) 0 0 var(--f9-radius);
}
.f9-search-input:focus { box-shadow: 0 0 0 3px var(--f9-focus-halo); outline: none; }
.f9-search-btn {
  height: 56px; padding: 0 28px; font-size: 15px; font-weight: 600;
  background: var(--f9-accent); border: 2px solid var(--f9-accent); color: #fff;
  border-radius: 0 var(--f9-radius) var(--f9-radius) 0;
}
.f9-search-btn:hover { background: var(--f9-accent-strong); border-color: var(--f9-accent-strong); }
.f9-search-hint { margin-top: 12px; font-size: 13px; color: var(--f9-text-muted); }

.f9-tile-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--f9-border);
}
.f9-tile-strip .f9-tile { border-right: 1px solid var(--f9-border); }
.f9-tile-strip .f9-tile:last-child { border-right: 0; }
.f9-tile {
  display: block; padding: 18px 20px 20px; text-decoration: none; color: inherit;
}
.f9-tile:hover, .f9-tile:focus-visible { background: var(--f9-row-hover); }
.f9-tile-label { font-size: 13px; font-weight: 500; color: var(--f9-text-muted); }
.f9-tile-value { display: block; margin-top: 6px; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--f9-ink); }
.f9-tile-hint { margin-top: 4px; font-size: 13px; color: var(--f9-text-subtle); }

.f9-next-sitting-table { max-width: 720px; }
.f9-next-sitting-table th:last-child, .f9-next-sitting-table td:last-child { text-align: right; }

/* ================= Search results ================= */
.f9-search-results-form { display: flex; max-width: 720px; }
.f9-search-results-form .form-control { height: 44px; border-radius: var(--f9-radius) 0 0 var(--f9-radius); }
.f9-search-results-form .btn { height: 44px; border-radius: 0 var(--f9-radius) var(--f9-radius) 0; }

.f9-results-h1 { font-size: 20px; }
.f9-results-meta { font-size: 13px; color: var(--f9-text-subtle); }

.f9-results-table th:first-child, .f9-results-table td:first-child { width: 32px; }
.f9-results-table .f9-rank { font-size: 13px; color: var(--f9-text-subtle); }
.f9-results-table .f9-offence-col { width: 130px; }
.f9-results-table .f9-trial-col { width: 200px; }
.f9-results-table .f9-room-col { width: 160px; }
.f9-results-table tr { position: relative; }
.f9-results-table td { vertical-align: top; }

.f9-identifier { font-family: var(--f9-mono); font-size: 13px; font-weight: 500; color: var(--f9-accent); text-decoration: none; }
.f9-identifier.stretched-link { text-decoration: none; }

.f9-defendant { font-weight: 500; }
.f9-match-reason { display: block; margin-top: 10px; font-size: 12px; color: var(--f9-text-subtle); }

.f9-room-sub { color: var(--f9-text-subtle); }

.f9-charge-count { display: inline-block; min-width: 20px; font-weight: 700; }

.f9-hint-line { margin-top: 12px; font-size: 12px; color: var(--f9-text-subtle); }

/* ================= Record ================= */
.f9-breadcrumb { font-size: 13px; margin-bottom: 16px; }

.f9-record-header { background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius); padding: 28px; display: flex; justify-content: space-between; gap: 24px; }
.f9-record-kicker { font-size: 13px; color: var(--f9-text-muted); }
.f9-record-header h1 { font-size: 28px; letter-spacing: -0.01em; margin: 4px 0; }
.f9-record-sub { font-size: 14px; color: var(--f9-text-muted); }
.f9-record-offence-label { font-size: 12px; font-weight: 500; color: var(--f9-text-muted); text-align: right; display: block; }
.f9-record-offence-no { font-family: var(--f9-mono); font-size: 20px; font-weight: 500; display: block; margin-top: 6px; text-align: right; }

.f9-record-grid { margin-top: 24px; display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid var(--f9-border); border-radius: var(--f9-radius); overflow: hidden; }
.f9-record-trial-cell { background: var(--f9-row-hover); padding: 24px; }
.f9-record-trial-cell .f9-record-label { font-size: 12px; font-weight: 500; color: var(--f9-text-muted); }
.f9-record-trial-when { font-size: 22px; font-weight: 600; margin: 6px 0; }
.f9-record-trial-room { font-size: 15px; margin-bottom: 10px; }
.f9-record-dl-cell { padding: 24px; border-left: 1px solid var(--f9-border); }
.f9-record-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.f9-record-dl dt { font-size: 12px; font-weight: 500; color: var(--f9-text-muted); }
.f9-record-dl dd { font-size: 14px; margin: 2px 0 0; }

.f9-charges-table td.f9-money, .f9-charges-table th.f9-money { text-align: right; }
.f9-charge-desc-sub { display: block; margin-top: 10px; font-size: 12px; color: var(--f9-text-subtle); }
.f9-charges-table tfoot td { border-top: 1px solid var(--f9-border-strong); background: #FBFCFD; font-size: 13px; font-weight: 600; }

.f9-related-cards { display: flex; flex-direction: column; gap: 8px; }
.f9-related-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius);
  padding: 16px 20px; text-decoration: none; color: inherit;
}
.f9-related-card:hover { border-color: var(--f9-accent); }
.f9-related-title { font-size: 15px; font-weight: 500; }
.f9-related-detail { font-size: 13px; color: var(--f9-text-muted); margin-top: 2px; }
.f9-related-open { color: var(--f9-accent); font-weight: 500; white-space: nowrap; }

/* ================= Docket ================= */
.f9-docket-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.f9-docket-nav { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.f9-date-btn { width: 40px; height: 40px; border: 1px solid var(--f9-border-strong); background: var(--f9-surface); border-radius: var(--f9-radius); }
.f9-date-input { width: 150px; height: 40px; font-family: var(--f9-mono); }
/* Same height/border/font as the sibling date-btn and date-input in .f9-docket-nav (owner
   review, 2026-09-26) - Bootstrap's btn-sm shrinks height/padding below both. */
.f9-go-btn { height: 40px; padding: 0 14px; font-size: 14px; }
.f9-docket-heading-date { font-size: 16px; font-weight: 500; }
.f9-docket-meta { font-size: 13px; color: var(--f9-text-subtle); }

.f9-docket-actions { display: flex; align-items: center; gap: 8px; }
.f9-segmented { display: inline-flex; align-items: center; }
/* "Day" is always an <a>; "One room" is an <a> or a disabled <button> depending on room count -
   both tags must render identically (owner review, 2026-09-26). The <a> needs display/box-sizing/
   text-decoration set explicitly, none of which a <button> needs but all of which are harmless on
   one - hence one shared rule instead of per-tag overrides. */
.f9-segmented-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 38px; padding: 0 14px; font-family: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--f9-border-strong); background: var(--f9-surface); color: var(--f9-ink);
  text-decoration: none; margin-left: -1px;
}
.f9-segmented-btn:first-child { margin-left: 0; border-radius: var(--f9-radius) 0 0 var(--f9-radius); }
.f9-segmented-btn:last-child { border-radius: 0 var(--f9-radius) var(--f9-radius) 0; }
.f9-segmented-btn[aria-pressed="true"] { background: var(--f9-ink); color: #fff; border-color: var(--f9-ink); }
.f9-segmented-btn:disabled { color: var(--f9-text-subtle); cursor: not-allowed; }
.f9-print-btn { height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }

.f9-docket-location { margin-bottom: 32px; }
.f9-docket-location h2 { font-size: 18px; margin-bottom: 4px; }
.f9-docket-location-meta { font-size: 13px; color: var(--f9-text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--f9-border-strong); margin-bottom: 16px; }

.f9-courtroom-card { background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius); margin-bottom: 16px; overflow: hidden; }
.f9-courtroom-card-header { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--f9-border); }
.f9-courtroom-card-header h3 { font-size: 15px; font-weight: 600; margin: 0; }
.f9-courtroom-card-count { font-size: 13px; color: var(--f9-text-subtle); }

.f9-docket-table .f9-time-col { width: 80px; font-weight: 500; }
.f9-docket-table .f9-offence-col { width: 130px; }
.f9-docket-table .f9-defendant-col { width: 240px; font-weight: 500; }
.f9-docket-table .f9-agency-col { width: 180px; color: var(--f9-text-muted); }
.f9-docket-table tbody tr { position: relative; }

/* ---------- Docket print sheet (_design/README.md, "06 Docket print") ---------- */
@media print {
  .f9-noprint, .f9-topbar, .page-overlay, button, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; font-family: "IBM Plex Sans", sans-serif; }
  .f9-container { max-width: none; padding: 0; }

  .f9-print-kicker { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.06em; }
  .f9-print-header { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; }
  .f9-print-header h1 { font-family: "IBM Plex Sans", sans-serif; font-size: 17pt; font-weight: 600; margin: 2px 0; }
  .f9-print-count { font-size: 9pt; }

  .f9-docket-location { break-inside: avoid; margin-bottom: 14px; }
  .f9-docket-location h2 { font-size: 12.5pt; font-weight: 600; }
  .f9-docket-location-meta { font-size: 9.5pt; border-bottom: none; }
  .f9-courtroom-card { border: none; break-inside: avoid; margin-bottom: 10px; }
  .f9-courtroom-card-header { border-bottom: none; padding: 0 0 4px; }
  .f9-courtroom-card-header h3 { font-size: 10.5pt; }

  .f9-docket-table, .f9-docket-table th, .f9-docket-table td { font-size: 9.5pt; }
  .f9-docket-table > :not(caption) > * > * { padding: 4px 6px; }
  .f9-docket-table thead th { border-top: 1px solid #000; border-bottom: 1px solid #000; background: transparent; color: #000; }
  .f9-docket-table tbody td { border-bottom: 0.5pt solid #777; }

  .f9-print-footer { border-top: 1px solid #000; margin-top: 16px; padding-top: 6px; font-size: 8pt; display: flex; justify-content: space-between; }
}

/* ================= Docket overview ================= */
.f9-page-sub { font-size: 14px; color: var(--f9-text-muted); margin-bottom: 24px; }
.f9-docket-daterow { display: flex; align-items: center; gap: 16px; max-width: 720px; margin-bottom: 24px; }
.f9-docket-daterow .f9-search-form { flex: 1 1 auto; }
.f9-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.f9-tile-card {
  display: flex; flex-direction: column; min-height: 150px; padding: 22px 24px;
  background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius);
  text-decoration: none; color: inherit;
}
.f9-tile-card:hover, .f9-tile-card:focus-visible { border-color: var(--f9-accent); background: #FBFCFD; }
.f9-tile-card-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--f9-text-muted); }
.f9-tile-card-label .f9-tile-arrow { color: var(--f9-accent); }
.f9-tile-card-value { margin-top: auto; font-size: 40px; font-weight: 600; letter-spacing: -0.01em; color: var(--f9-ink); }
.f9-tile-card-hint { margin-top: 4px; font-size: 13px; color: var(--f9-text-subtle); }

/* ================= Charts (Records + Docket) ================= */
.f9-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.f9-chart-figure {
  margin: 0; background: var(--f9-surface); border: 1px solid var(--f9-border);
  border-radius: var(--f9-radius); padding: 20px;
}
.f9-chart-title { font-size: 15px; font-weight: 600; color: var(--f9-ink); }
.f9-chart-reading { margin-top: 2px; font-size: 13px; color: var(--f9-text-subtle); }
.f9-chart-canvas { width: 100%; height: 260px; margin-top: 12px; }

@media (max-width: 1024px) {
  .f9-chart-grid { grid-template-columns: 1fr; }
}

/* ================= Notices (list) ================= */
.f9-notices-summary { color: var(--f9-text-muted); margin-bottom: 12px; }
.f9-notices-truncated { color: var(--f9-text-subtle); font-size: 13px; margin-bottom: 8px; }
.f9-badge-renoticed { background: var(--f9-accent-subtle); color: var(--f9-accent-strong); font-weight: 500; }

/* ================= Ask AI ================= */
.f9-ask-layout { display: grid; grid-template-columns: minmax(0, 820px) 1fr; gap: 48px; align-items: start; }
.f9-ask-intro { font-size: 14px; color: var(--f9-text-muted); margin-bottom: 20px; }
.f9-ask-textarea { font-size: 16px; line-height: 1.5; border: 1px solid var(--f9-border-strong); }
.f9-ask-form-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.f9-ask-form-hint { font-size: 12px; color: var(--f9-text-subtle); }

.f9-ask-card { background: var(--f9-surface); border: 1px solid var(--f9-border); border-radius: var(--f9-radius); padding: 24px; margin-top: 20px; }
.f9-ask-answer { font-size: 18px; line-height: 1.55; margin: 0; }
.f9-ask-cited-label { font-size: 12px; font-weight: 600; color: var(--f9-text-muted); margin-top: 16px; margin-bottom: 8px; }
.f9-ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.f9-ask-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  font-family: var(--f9-mono); font-size: 13px; font-weight: 500; color: var(--f9-accent);
  border: 1px solid var(--f9-border-strong); border-radius: var(--f9-radius); text-decoration: none;
}
.f9-ask-chip:hover { background: var(--f9-accent-subtle); border-color: var(--f9-accent); }
.f9-ask-divider { border-top: 1px solid var(--f9-border); margin: 16px 0 12px; }
.f9-ask-meta { font-size: 13px; font-weight: 500; color: var(--f9-text-muted); margin: 0; }
.f9-ask-paused { font-size: 16px; color: var(--f9-text-muted); }

.f9-ask-earlier { margin-top: 32px; }
.f9-ask-earlier h2 { font-size: 16px; margin-bottom: 12px; }
.f9-ask-earlier-list { border: 1px solid var(--f9-border); border-radius: var(--f9-radius); overflow: hidden; }
.f9-ask-earlier-item {
  display: block; padding: 12px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--f9-border);
}
.f9-ask-earlier-list a.f9-ask-earlier-item:last-child { border-bottom: 0; }
.f9-ask-earlier-item:hover { background: var(--f9-row-hover); }
.f9-ask-earlier-q { font-size: 14px; font-weight: 500; }
.f9-ask-earlier-a { font-size: 13px; color: var(--f9-text-muted); margin: 4px 0; }
.f9-ask-earlier-meta { font-size: 12px; color: var(--f9-text-subtle); }

.f9-ask-aside-label { font-size: 13px; font-weight: 600; color: var(--f9-text-muted); margin-bottom: 10px; }
.f9-ask-samples { display: flex; flex-direction: column; gap: 8px; }
.f9-ask-sample-btn {
  width: 100%; text-align: left; padding: 10px 12px; font-size: 14px;
  background: var(--f9-surface); border: 1px solid var(--f9-border-strong); border-radius: var(--f9-radius);
}
.f9-ask-sample-btn:hover { background: var(--f9-row-hover); }

@media (max-width: 900px) {
  .f9-ask-layout { grid-template-columns: 1fr; }
  .f9-tile-strip, .f9-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .f9-record-header, .f9-record-grid { grid-template-columns: 1fr; }
}