/* THE SOUND — Courts v1.1 shared parts ("ck-" prefix)
   The six components named in the design brief, built once here and
   consumed by all five courts surfaces (map/rail, court drawer, court
   page, area page, directory) in the phases that retrofit each surface.
   Surface-specific layout keeps its own prefix (ca-/cp-/d-/cd-); only
   these cross-surface pieces get ck-.

   Every color is a tokens.css variable — nothing here hard-codes a hex.
   Read /courts/_kit for the rendered reference, states, and the contrast
   numbers behind the choices below. */

/* ── Type roles (brief's Type scale table) ──────────────────────────── */
.ck-display-xl{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:56px;line-height:1.05;letter-spacing:-0.01em;color:var(--text)}
.ck-display-l{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:40px;line-height:1.08;letter-spacing:-0.01em;color:var(--text)}
.ck-display-m{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:24px;line-height:1.1;letter-spacing:-0.005em;color:var(--text)}
.ck-figure{font-family:var(--font-sans);font-style:normal;font-weight:500;font-variant-numeric:tabular-nums;font-size:32px;line-height:1.1;color:var(--text)}
.ck-body{font-family:var(--font-sans);font-style:normal;font-weight:400;font-size:16px;line-height:1.4;color:var(--text)}
.ck-body-500{font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:16px;line-height:1.4;color:var(--text)}
.ck-meta{font-family:var(--font-sans);font-style:normal;font-weight:400;font-size:14px;line-height:1.4;color:var(--text-muted)}
.ck-label{font-family:var(--font-label);font-style:normal;font-weight:500;font-size:13px;letter-spacing:var(--track-label,.12em);text-transform:uppercase;color:var(--accent)}

/* ── 1. Court row ─────────────────────────────────────────────────────
   Name (Zodiak, roman) over a Meta line, left; status pill over
   distance, right, right-aligned. One row, reused in the rail, the area
   page, and "nearby courts". */
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 4px;text-decoration:none;border-bottom:var(--border-hair);transition:background var(--dur-fast) var(--ease)}
.ck-row:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}
.ck-row:last-child{border-bottom:none}
.ck-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ck-row-name{font-family:var(--font-display);font-style:normal;font-weight:300;font-size:19px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-row-meta{font-family:var(--font-sans);font-style:normal;font-size:14px;color:var(--text-muted)}
.ck-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ck-row-dist{font-family:var(--font-sans);font-style:normal;font-size:14px;color:var(--text-muted)}
.ck-row.is-active{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.ck-row.is-dimmed{opacity:.45}

/* ── 2. Status pill ───────────────────────────────────────────────────
   Dot + one word from a fixed set. Only the dot carries status color
   (Good=forest-soft, Limited=rust, neutral=muted grey) — the word stays
   neutral text. Forest-soft/rust text at 14px on the panel fill only
   reaches ~4.5:1/3.5:1 (see /courts/_kit), short of (or right at) the
   4.5:1 body/meta text needs; a colored dot has no such requirement, so
   the signal lives there instead of forcing a new token into existence. */
.ck-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:14px;color:var(--text)}
.ck-pill-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}
.ck-pill.is-open .ck-pill-dot{background:var(--brand)}
.ck-pill.is-busy .ck-pill-dot{background:var(--rust)}
.ck-pill.is-closed .ck-pill-dot{background:var(--text-muted)}

/* ── 3. Filter chip ───────────────────────────────────────────────────
   Off = outline. On = brass fill, dark (night) text — bone-on-brass only
   reaches 2.4:1, so the on-state is always night-on-brass (8.8:1). This
   is the fix for the brief's own flagged bug: "today the on state isn't
   visible" — the live filter bar still uses a faint text-tint instead of
   this, until the map/rail retrofit phase swaps it over. */
.ck-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-action, var(--radius-md));border:1px solid var(--border);background:transparent;font-family:var(--font-sans);font-style:normal;font-size:14px;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ck-chip:hover{border-color:color-mix(in srgb, var(--text) 40%, transparent)}
.ck-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--night);font-weight:500}
.ck-chip.is-on:hover{background:var(--accent)}

/* ── 4. Buttons ───────────────────────────────────────────────────────
   Primary = brass solid, one per view. Secondary = outline. Tertiary =
   text link with an arrow. Nothing else looks like a button. */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-style:normal;font-weight:500;font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:none;border:none;transition:filter var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ck-btn-primary{background:var(--accent);color:var(--night);padding:13px 22px;border-radius:var(--radius-action, var(--radius-md))}
.ck-btn-primary:hover{filter:brightness(1.06)}
.ck-btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);padding:12px 22px;border-radius:var(--radius-action, var(--radius-md))}
.ck-btn-secondary:hover{background:color-mix(in srgb, var(--text) 6%, transparent);border-color:color-mix(in srgb, var(--text) 40%, transparent)}
.ck-btn-tertiary{background:none;color:var(--accent);padding:0;font-weight:500}
.ck-btn-tertiary:hover{text-decoration:underline}
.ck-btn-tertiary-arrow{font-size:14px;transition:transform var(--dur-fast) var(--ease)}
.ck-btn-tertiary:hover .ck-btn-tertiary-arrow{transform:translateX(2px)}

/* ── 5. Day strip ─────────────────────────────────────────────────────
   One small bar chart of open courts across the day, replacing a list of
   time rows. Bar height = share of courts open in that window; color
   follows the jobs table (Good/Limited), muted when the window is past. */
.ck-daystrip{display:flex;align-items:flex-end;gap:4px;height:48px;padding-top:4px}
.ck-daystrip-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.ck-daystrip-fill{width:100%;border-radius:2px 2px 0 0;background:var(--text-muted);min-height:3px}
.ck-daystrip-bar.is-good .ck-daystrip-fill{background:var(--brand)}
.ck-daystrip-bar.is-limited .ck-daystrip-fill{background:var(--rust)}
.ck-daystrip-bar.is-now .ck-daystrip-fill{outline:1.5px solid var(--accent);outline-offset:1px}
.ck-daystrip-label{font-family:var(--font-label);font-weight:500;font-size:13px;letter-spacing:var(--track-label,.08em);text-transform:uppercase;color:var(--accent)}

/* ── 6. Weather line ──────────────────────────────────────────────────
   One sentence. No wrapping chip row. */
.ck-weather{font-family:var(--font-sans);font-style:normal;font-size:14px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-weather-figure{font-weight:500;color:var(--text)}