/* XCrossing web report — theme, layout and chart styling.
 *
 * Palette: host colours come from the site's traditional-colour set
 * (site/assets/common/css/styles.css --host-N-mark / --host-N-mark-on-ink),
 * not the dataviz skill's default categorical palette — the episode panel
 * links to this app, so the three hosts must read as the same three people
 * on both sides of that click. pipeline/site/test_palette.py checks the two
 * sides stay equal; changing a value on only one side fails it.
 * --host-0/1/2 are the "mark" pair (light) and "mark-on-ink" pair (dark) —
 * the concentrated versions that clear 3:1 as small chart marks, not the
 * lighter "fill" swatches used for chips on the site. All-pairs CVD
 * separation clears ΔE 8.0 in both modes (validated with the dataviz
 * skill's palette validator).
 *
 * Keyword trend lines still take all eight dataviz slots unchanged (line
 * charts are judged on the adjacent pairlist, not all-pairs).
 *
 * Light mode: aqua, yellow and magenta sit below 3:1 against the surface, so
 * the relief rule applies — every chart ships a legend plus direct value
 * labels, and the percentile table view carries the numbers.
 */

:root {
  color-scheme: light;

  --surface: #fcfcfb;
  --surface-raised: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #77756e;
  --grid: #e6e5e1;
  --border: #d9d8d3;

  --host-0: #b28235;
  --host-1: #1490a1;
  --host-2: #80508f;

  /* 常盤色。サイト側の --accent と同じ値で、ロゴの X と注記の縁がこれを使う。
     いままで定義が無く、var(--accent) を書いた2箇所（.xc-note--why）は
     何も塗れていなかった。site/assets/common/css/styles.css の :root と
     一致していることは pipeline/site/test_palette.py が見る。 */
  --accent: #007B43;

  --kw-0: #2a78d6;
  --kw-1: #eb6834;
  --kw-2: #1baf7a;
  --kw-3: #eda100;
  --kw-4: #e87ba4;
  --kw-5: #008300;
  --kw-6: #4a3aa7;
  --kw-7: #e34948;

  --neutral-mark: #8a8880;
  --ok: #008300;
  --ng: #e34948;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #1a1a19;
    --surface-raised: #232322;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #9b9a90;
    --grid: #35352f;
    --border: #43423c;

    --host-0: #ba8a3e;
    --host-1: #2599aa;
    --host-2: #895998;

    /* 暗い面では常盤色そのままでは沈む。サイト側の --accent-on-ink と同じ値。
       この CSS はダークを2回宣言するので（ここと :root[data-theme="dark"]）、
       片方だけに書くと、テーマを明示で切り替えたときだけ色が変わる。 */
    --accent: #258d54;
  
    --kw-0: #3987e5;
    --kw-1: #d95926;
    --kw-2: #199e70;
    --kw-3: #c98500;
    --kw-4: #d55181;
    --kw-5: #008300;
    --kw-6: #9085e9;
    --kw-7: #e66767;

    --neutral-mark: #7d7c74;
    --ok: #4caf50;
    --ng: #e66767;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #1a1a19;
  --surface-raised: #232322;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #9b9a90;
  --grid: #35352f;
  --border: #43423c;

  /* 暗い面では常盤色そのままでは沈む。サイト側の --accent-on-ink と同じ値。 */
  --accent: #258d54;

  --host-0: #ba8a3e;
  --host-1: #2599aa;
  --host-2: #895998;

  --kw-0: #3987e5;
  --kw-1: #d95926;
  --kw-2: #199e70;
  --kw-3: #c98500;
  --kw-4: #d55181;
  --kw-5: #008300;
  --kw-6: #9085e9;
  --kw-7: #e66767;

  --neutral-mark: #7d7c74;
  --ok: #4caf50;
  --ng: #e66767;
}

/* --- base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--surface);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.35; font-weight: 600; }

a { color: var(--host-0); }

code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

pre {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

.xc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* --- header -------------------------------------------------------------- */

.xc-header {
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0 1.25rem;
  margin-bottom: 0;
  position: relative;
}

/* 題名の行。ロゴと題名で1つのリンク（この画面のトップへ）、右に番組サイトと
   テーマ切替。行き先の違うリンクは離す。 */
.xc-header-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

/* 見出しの階層は残す。各画面の題名が h2 なので、ここが h1 でないと
   文書が h2 から始まることになる。見た目は題名の行そのままである。 */
.xc-title { margin: 0; font-size: inherit; font-weight: inherit; }

.xc-brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-primary);
}

.xc-brand:hover .xc-brand-name { text-decoration: underline; }

/* サイトのヘッダは 111px を与えている。あちらは墨色の帯の上で、こちらは
   明るい紙面に置くので、同じ大きさだと字面が重い。少し小さくする。 */
.xc-brand svg {
  display: block;
  width: 96px;
  height: auto;
  flex: none;
  /* 字面の下端に合わせる。SVG の viewBox は下に余白を持っているので、
     baseline 揃えだけでは題名が浮いて見える。 */
  transform: translateY(0.12em);
}

.xc-brand-name { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; }

.xc-site-link {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.xc-site-link:hover { color: var(--text-primary); border-bottom-color: currentColor; }

/* 「番組サイト」の後ろに続く外部リンクの印。文字の一部ではないので、
   読み上げには渡らないよう擬似要素で置く。 */
.xc-site-link::after { content: " ↗"; font-size: 0.9em; }

.xc-sub { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }

@media (max-width: 560px) {
  .xc-site-link { margin-left: 0; }
}

button {
  font: inherit;
  font-size: 0.88rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

button:hover { border-color: var(--text-muted); }

button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--host-0);
  outline-offset: 2px;
}

/* --- dashboard shell ----------------------------------------------------- */

/* The sidebar is a list of analyses, and the list grows. A tab row cannot: at
 * ten screens it wraps into an unreadable block. Analyses are grouped, and a
 * new one costs one registration and one line here.
 */
.xc-app {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 0 2rem;
  align-items: start;
}

.xc-side {
  position: sticky;
  top: 0;
  padding: 1rem 0 2rem;
  border-right: 1px solid var(--border);
  max-height: 100vh;
  overflow-y: auto;
}

.xc-side-group {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin: 1.1rem 0 0.3rem;
  padding-right: 1rem;
}

.xc-side-group:first-child { margin-top: 0; }

.xc-side button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  border-left: 3px solid transparent;
  padding: 0.4rem 1rem 0.4rem 0.85rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.xc-side button[aria-current="true"] {
  color: var(--text-primary);
  border-left-color: var(--host-0);
  background: color-mix(in srgb, var(--host-0) 8%, transparent);
  font-weight: 600;
}

.xc-head { padding-top: 1.25rem; }
.xc-head h2 { margin: 0 0 0.2rem; font-size: 1.35rem; }
.xc-lead { margin: 0 0 0.5rem; color: var(--text-secondary); font-size: 0.9rem; }

.xc-error {
  color: var(--text-primary);
  border-left: 2px solid var(--host-2);
  background: color-mix(in srgb, var(--host-2) 6%, transparent);
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
}

/* Narrow screens: the sidebar folds under the heading as a select. A wrapped
 * button list would push the content off the first screenful once there are
 * more than a few analyses.
 */
@media (max-width: 760px) {
  .xc-app { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .xc-side { display: none; }
  .xc-side-select {
    display: block;
    width: 100%;
    font: inherit;
    padding: 0.4rem 0.5rem;
    margin: 0.75rem 0 0;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
}

@media (min-width: 761px) {
  .xc-side-select { display: none; }
}

/* --- overview tiles ------------------------------------------------------ */

.xc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
}

.xc-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--text-primary);
}

button.xc-tile { cursor: pointer; }
button.xc-tile:hover { border-color: var(--host-0); }

.xc-tile-label { color: var(--text-muted); font-size: 0.78rem; }
.xc-tile-value {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.xc-tile-sub { color: var(--text-secondary); font-size: 0.78rem; }

/* Three hosts as one band. A stacked bar rather than three numbers, because
 * the question the card answers is how the time divides, not what each share is.
 */
/* The overview tile's stacked strip. Not .xc-bar: charts.js already uses that
 * class on the bars inside its SVGs, and a CSS width there overrides the
 * width attribute of every <rect> — which stretched each segment to the full
 * viewport. Geometry properties in CSS beat SVG presentation attributes. */
.xc-share-bar {
  display: flex;
  height: 0.85rem;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  margin: 0.35rem 0 0.15rem;
}

.xc-share-bar span { display: block; }

.xc-spark {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 2rem;
  margin-top: 0.4rem;
}

.xc-spark i {
  flex: 1 1 auto;
  min-width: 1px;
  background: var(--grid);
  border-radius: 1px 1px 0 0;
}

/* --- tabs ---------------------------------------------------------------- */

.xc-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding-top: 0.75rem;
  flex-wrap: wrap;
}

.xc-tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.9rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: -1px;
}

.xc-tabs button[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--host-0);
  font-weight: 600;
}

/* --- filter bar ---------------------------------------------------------- */

.xc-filter {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.xc-filter-title { color: var(--text-secondary); }

.xc-filter input[type="number"] {
  width: 4.2rem;
  font: inherit;
  padding: 0.2rem 0.35rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Dual-thumb range: two range inputs stacked on one visual track. The inputs
 * themselves are transparent and pointer-transparent; only their thumbs take
 * pointer events, so both remain grabbable over a single shared track. The
 * selected span is a separate filled bar. */
.xc-dual {
  position: relative;
  width: 15rem;
  height: 28px;
  flex: none;
}

.xc-dual-track,
.xc-dual-fill {
  position: absolute;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}

.xc-dual-track { left: 0; right: 0; background: var(--grid); }

.xc-dual-fill {
  background: var(--host-0);
  /* The band is grabbable; the track behind it is not. The thumbs sit above it
   * so the ends still win where the two overlap. */
  pointer-events: auto;
  cursor: grab;
  z-index: 1;
}

.xc-dual-fill:active { cursor: grabbing; }

.xc-dual-ticks {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1em;
  pointer-events: none;
}

.xc-dual-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.xc-dual { width: auto; flex: 1 1 18rem; min-width: 14rem; height: 40px; }

.xc-presets { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }

.xc-choice { display: inline-flex; gap: 0.25rem; }

.xc-chip {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-radius: 999px;
  cursor: pointer;
}

.xc-chip[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--surface);
  border-color: var(--text-primary);
}

#filter-extra[hidden] { display: none; }

/* A button that opens the episode panel, styled as the link it behaves like. */
.xc-linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--host-1);
  text-decoration: underline;
  cursor: pointer;
}

.xc-flag { color: var(--host-0); cursor: help; }

/* A row whose count is too small to read a difference into. Greyed rather than
 * dropped: hiding it would make the range look tidier than it is. */
.xc-table tbody tr.xc-thin td { color: var(--text-muted); }

/* A sortable heading. The arrow says which way, and that the column is one you
 * can press — without it the only clue is the cursor. */
.xc-table th.xc-sortable { cursor: pointer; user-select: none; }
.xc-table th.xc-sortable:hover { color: var(--text-primary); }
.xc-table th.xc-sort-desc::after { content: " ↓"; }
.xc-table th.xc-sort-asc::after { content: " ↑"; }

/* The highest and lowest value in a ranked column. Weight rather than colour:
 * colour in this app means a host, and these cells are not about identity. */
.xc-table td.xc-high { font-weight: 700; }
.xc-table td.xc-low { font-weight: 700; color: var(--text-secondary); }
.xc-table td.xc-high::after { content: " ▲"; font-size: 0.7em; }
.xc-table td.xc-low::after { content: " ▼"; font-size: 0.7em; }

/* A figure that is also a control. Pressed, it wears the host's colour, the
 * same way the 「誰について」 chip does. */
.xc-kpi-item.xc-pressable { cursor: pointer; border: 1px solid transparent; }
.xc-kpi-item.xc-pressable:hover { border-color: var(--border); }
.xc-kpi-item.xc-pressable[aria-pressed="true"] {
  border-width: 1px;
  border-style: solid;
  background: var(--surface-raised);
}

.xc-table td.xc-quote {
  color: var(--text-secondary);
  white-space: normal;
  min-width: 16rem;
  font-size: 0.85rem;
}

.xc-dual input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.xc-dual input[type="range"]:focus { outline: none; }

.xc-dual input[type="range"]::-webkit-slider-runnable-track {
  height: 28px;
  background: none;
  border: none;
}

.xc-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--host-0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.xc-dual input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }

.xc-dual input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--host-0);
  outline-offset: 2px;
}

/* The start thumb sits above the end thumb so it stays grabbable when the two
 * meet; dragging either one pushes the other rather than being clamped. */
#slider-from { z-index: 3; }
#slider-to { z-index: 2; }

.xc-dual-end {
  position: absolute;
  top: 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.xc-dual-end-min { left: 0; }
.xc-dual-end-max { right: 0; }

#range-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.xc-legend { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.xc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.xc-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.xc-swatch-line { width: 14px; height: 3px; border-radius: 2px; }

/* --- views and cards ----------------------------------------------------- */

.xc-view[hidden] { display: none; }

/* display:flex on these two would otherwise win over the hidden attribute,
   leaving the overview's tab row and range slider on the search screen. */
.xc-tabs[hidden], .xc-filter[hidden] { display: none; }

.xc-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.xc-kpi-item {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}

.xc-kpi-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 0.15rem;
}

.xc-kpi-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.xc-kpi-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
}

.xc-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
  min-width: 0;
}

.xc-card > h3 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: var(--text-primary);
}

.xc-note {
  margin: 0.85rem 0 0;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* The episode's own blurb. Content, not commentary — so it is not muted the
   way .xc-note is, and it holds its space while the body loads (an empty
   paragraph with no min-height would let the map jump up and back down). */
.xc-summary {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 1.7em;
}

.xc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.xc-cols > .xc-card { margin-bottom: 0; }

.xc-scroll { overflow-x: auto; }

.xc-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1.5rem 0;
  text-align: center;
}

.xc-prose h3 { margin: 1.5rem 0 0.5rem; font-size: 0.98rem; }

.xc-prose p { margin: 0 0 0.9rem; color: var(--text-secondary); }

.xc-prose .xc-filtered-warning {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

/* --- svg charts ---------------------------------------------------------- */

.xc-svg { display: block; overflow: visible; }

.xc-axis-line, .xc-grid-line {
  stroke: var(--grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.xc-axis-text {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.xc-axis-title { fill: var(--text-secondary); font-size: 11px; }

.xc-cat-text { fill: var(--text-secondary); font-size: 12px; }

.xc-value-text {
  fill: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.xc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.xc-line-faint { fill: none; stroke-width: 1.5; opacity: 0.35; }

.xc-ref-line {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}

.xc-marker { stroke-width: 1.5; stroke-dasharray: 4 3; }

.xc-dot { stroke: var(--surface-raised); stroke-width: 1.5; }

.xc-clickable { cursor: pointer; }

.xc-hit { fill: transparent; }

/* --- tooltip ------------------------------------------------------------- */

.xc-tip {
  position: fixed;
  z-index: 50;
  max-width: 22rem;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 0.82rem;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.xc-tip[hidden] { display: none; }

.xc-tip-row { display: flex; align-items: center; gap: 0.35rem; }

.xc-tip strong { font-weight: 600; }

/* --- tables -------------------------------------------------------------- */

.xc-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

.xc-table th, .xc-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--grid);
  text-align: left;
  white-space: nowrap;
}

.xc-table thead th {
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.xc-table td.num, .xc-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.xc-table tbody tr.xc-clickable:hover { background: var(--surface); }

.xc-table td.xc-title-cell { white-space: normal; min-width: 18rem; }

/* --- badges -------------------------------------------------------------- */

.xc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.xc-badge-host { border-color: transparent; color: var(--text-primary); }

.xc-order-chain {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.xc-order-sep { color: var(--text-muted); }

/* --- episode panel ------------------------------------------------------- */

.xc-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  overflow-y: auto;
  background: var(--surface-raised);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.16);
  padding: 1.25rem 1.5rem 3rem;
  z-index: 40;
}

.xc-panel[hidden] { display: none; }

.xc-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.xc-panel h2 { margin: 0; font-size: 1.15rem; }

.xc-panel-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.xc-panel-nav button:disabled { opacity: 0.4; cursor: default; }

.xc-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.xc-metric {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}

.xc-metric-label { font-size: 0.75rem; color: var(--text-secondary); display: block; }

.xc-metric-value {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.xc-subtabs { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; flex-wrap: wrap; }

.xc-subtabs button { font-size: 0.82rem; padding: 0.2rem 0.6rem; }

.xc-subtabs button[aria-selected="true"] {
  border-color: var(--host-0);
  color: var(--text-primary);
  font-weight: 600;
}

/* --- footer -------------------------------------------------------------- */

.xc-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 0.9rem;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.xc-ok { color: var(--ok); }
.xc-ng { color: var(--ng); font-weight: 600; }

/* --- fatal --------------------------------------------------------------- */

.xc-fatal {
  margin: 3rem auto;
  max-width: 40rem;
  padding: 1.5rem;
  border: 1px solid var(--ng);
  border-radius: 8px;
  background: var(--surface-raised);
}

.xc-fatal[hidden] { display: none; }

.xc-fatal h2 { margin-top: 0; }

/* --- search -------------------------------------------------------------- */

.xc-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.xc-search input[type="search"], .xc-search input[type="text"] {
  font: inherit;
  padding: 0.35rem 0.6rem;
  min-width: 16rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.xc-search select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.4rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* The search box on the top screen is the one control that is the screen, so it
   is wider and taller than the filter inputs that share .xc-search. */
#view-search .xc-search input[type="search"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 1.05rem;
}

.xc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.xc-chips button {
  font: inherit;
  font-size: 0.84rem;
  padding: 0.2rem 0.65rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.xc-chips button:hover { border-color: var(--host-0); color: var(--host-0); }

.xc-result {
  border-top: 1px solid var(--border);
  padding: 0.85rem 0;
}

.xc-result h3 { margin: 0 0 0.2rem; font-size: 0.98rem; font-weight: 600; }
.xc-result h3 a { color: inherit; text-decoration: none; }
.xc-result h3 a:hover { color: var(--host-0); text-decoration: underline; }
.xc-result .xc-note { margin: 0.2rem 0 0; }

.xc-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.xc-result-meta a { color: var(--text-secondary); }

.xc-hitrow {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.22rem 0;
  font-size: 0.88rem;
}

.xc-hit-time {
  color: var(--host-0);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.xc-hit-time:hover { text-decoration: underline; }

/* The source of a match, or who said it. A label, never a colour alone. */
.xc-src {
  flex: none;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}

#search-results mark {
  background: var(--kw-3);
  color: #0b0b0b;
  border-radius: 2px;
  padding: 0 1px;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .xc-cols { grid-template-columns: minmax(0, 1fr); }
  .xc-panel { width: 100%; }
}

/* キーワード・概要・題名だけで当たった回の注記。ここだけ読ませる側に置く
   ——なぜ一覧に出ているのかを、1行下の行を見に行かせずに答えるためである。
   囲みやアイコンは使わない。押せないカードを警告のように見せてしまう。 */
.xc-note--why {
  color: var(--text);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
}