/* 日本の大学経営.com. Colour roles are tokens; dark mode is its own selected steps, not an inversion. */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --link: #1c5cab;
  --good: #006300;
  --bad: #b42323;
  --s0: #a9a8a1;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b;
  --wash: rgba(42, 120, 214, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
    --link: #86b6ef;
    --good: #0ca30c;
    --bad: #e66767;
    --s0: #5c5b56;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --wash: rgba(57, 135, 229, 0.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10); --accent: #3987e5; --link: #86b6ef;
  --good: #0ca30c; --bad: #e66767; --s0: #5c5b56;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --wash: rgba(57, 135, 229, 0.14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.7 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.6rem; line-height: 1.35; margin: 1.2rem 0 .4rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
p { margin: .4rem 0; }
small, .muted { color: var(--ink-2); }

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; padding-top: .6rem; padding-bottom: .6rem; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
nav a { color: var(--ink-2); text-decoration: none; padding: .15rem 0; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--ink); }
nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.site-footer { margin-top: 3rem; padding: 1.2rem 0 2rem; border-top: 1px solid var(--border); color: var(--ink-2); font-size: .85rem; }

.lead { color: var(--ink-2); max-width: 46rem; }
.hero { padding: 2rem 0; }
.crumbs { font-size: .85rem; color: var(--ink-2); margin-top: 1rem; }
.crumbs a { color: var(--ink-2); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin: 16px 0; min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.chart-narrow { max-width: 560px; }
h2.group { font-size: 1.3rem; margin: 2rem 0 .2rem; }
h2.group small { color: var(--ink-2); font-weight: 400; font-size: .9rem; }
.card > p.desc { color: var(--ink-2); font-size: .9rem; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 0 16px; }
.source { color: var(--muted); font-size: .8rem; margin-top: .6rem; }
.source a { color: var(--muted); }
.empty { color: var(--muted); }
.note { font-size: .85rem; color: var(--ink-2); }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 16px 0; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; position: relative; min-width: 0; }
.tile-label { color: var(--ink-2); font-size: .85rem; }
.tile-label a { color: inherit; }
.tile-value { font-size: 1.6rem; font-weight: 650; line-height: 1.3; }
.tile-meta { font-size: .8rem; color: var(--ink-2); }
.tile-note { font-size: .78rem; color: var(--muted); margin: .3rem 0 0; }
.delta { margin-left: .3rem; font-weight: 600; color: var(--ink-2); }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta small { font-weight: 400; color: var(--muted); }
.spark { position: absolute; right: 12px; top: 14px; width: 96px; height: 24px; }
.spark polyline { fill: none; stroke: var(--s0); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--accent); }

/* Charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .endlabel { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: none; }
.chart .dot.ring { stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.chart .hit, .chart .barhit { fill: transparent; }
.chart .barhit:focus { outline: none; }
.chart .bar:hover, .chart .bar.on { opacity: .8; }
.chart .xhair { stroke: var(--axis); stroke-width: 1; }
.chart .hdot { stroke: var(--surface); stroke-width: 2; }
.line.s0 { stroke: var(--s0); } .dot.s0, .bar.s0, .hdot.s0 { fill: var(--s0); }
.line.s1 { stroke: var(--s1); } .dot.s1, .bar.s1, .hdot.s1 { fill: var(--s1); }
.line.s2 { stroke: var(--s2); } .dot.s2, .bar.s2, .hdot.s2 { fill: var(--s2); }
.line.s3 { stroke: var(--s3); } .dot.s3, .bar.s3, .hdot.s3 { fill: var(--s3); }
.line.s4 { stroke: var(--s4); } .dot.s4, .bar.s4, .hdot.s4 { fill: var(--s4); }
.line.s5 { stroke: var(--s5); } .dot.s5, .bar.s5, .hdot.s5 { fill: var(--s5); }
.line.s6 { stroke: var(--s6); } .dot.s6, .bar.s6, .hdot.s6 { fill: var(--s6); }
.line.s7 { stroke: var(--s7); } .dot.s7, .bar.s7, .hdot.s7 { fill: var(--s7); }
.line.s8 { stroke: var(--s8); } .dot.s8, .bar.s8, .hdot.s8 { fill: var(--s8); }
.legend { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: var(--ink-2); }
.legend .key { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: .35rem; border-radius: 1px; }
.key.s0 { background: var(--s0); } .key.s1 { background: var(--s1); } .key.s2 { background: var(--s2); }
.key.s3 { background: var(--s3); } .key.s4 { background: var(--s4); } .key.s5 { background: var(--s5); }
.key.s6 { background: var(--s6); } .key.s7 { background: var(--s7); } .key.s8 { background: var(--s8); }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .82rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); max-width: 280px;
}
.tooltip .tt-title { color: var(--ink-2); margin-bottom: 2px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.tooltip .tt-row b { font-variant-numeric: tabular-nums; }
.tooltip .tt-key { width: 12px; height: 2px; flex: none; }
.tooltip .tt-name { color: var(--ink-2); }

/* Comparison dots: one hue, older years lighter (light mode) / darker (dark mode), newest strongest */
:root { --y1: #86b6ef; --y2: #3987e5; --y3: #104281; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --y1: #184f95; --y2: #2a78d6; --y3: #86b6ef; } }
:root[data-theme="dark"] { --y1: #184f95; --y2: #2a78d6; --y3: #86b6ef; }
.chart .ydot { stroke: var(--surface); stroke-width: 2; }
.chart .ydot.y1, .ykey.y1, .tt-key.y1 { fill: var(--y1); background: var(--y1); }
.chart .ydot.y2, .ykey.y2, .tt-key.y2 { fill: var(--y2); background: var(--y2); }
.chart .ydot.y3, .ykey.y3, .tt-key.y3 { fill: var(--y3); background: var(--y3); }
.chart .span { stroke: var(--axis); stroke-width: 1.5; }
.chart .rowlabel { fill: var(--ink); font-size: 12px; }
.chart a:hover .rowlabel { fill: var(--link); text-decoration: underline; }
.chart .rowhit { fill: transparent; pointer-events: all; }
.chart .rowhit:hover, .chart .rowhit:focus { fill: var(--wash); outline: none; }
.chart.dots a { pointer-events: all; }
.ykey { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: 0; }
.indicator-card[hidden] { display: none; }
/* Many labelled rows stay readable on a phone by scrolling sideways instead of shrinking. */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart.dots { min-width: 620px; max-width: 980px; }
.caution { border-left: 3px solid var(--status-warning); padding: 4px 10px; color: var(--ink-2); font-size: .88rem; background: var(--surface); }

/* Shortening long pages (only when app.js runs: html.js) */
html.js .clamped { display: none; }
.more-btn { font: inherit; font-size: .85rem; color: var(--link); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; margin: 8px 8px 0 0; cursor: pointer; }
.more-btn:hover { background: var(--wash); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 4px 0 2px; }
.chart-controls .more-btn { margin-top: 0; }
.tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0 4px; }
.tab-btn { font: inherit; font-size: .92rem; color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; margin-bottom: -1px; cursor: pointer; }
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabpanel[hidden] { display: none; }
html:not(.js) .tabpanel::before { content: attr(data-tab); display: block; font-weight: 700; font-size: 1.1rem; margin: 1.4rem 0 .2rem; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; padding: 0; list-style: none; font-size: .85rem; }
.toc a { display: inline-block; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); background: var(--wash); }
.toc small { color: var(--muted); }
details.defs { font-size: .85rem; color: var(--ink-2); margin: -4px 0 6px; }
details.defs summary { cursor: pointer; color: var(--muted); }
details.cite > summary { cursor: pointer; font-weight: 700; }
details.cautions summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; }
section[id], details[id] { scroll-margin-top: 12px; }

/* Link lists */
.pref-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 2px 12px; font-size: .9rem; }
.links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2px 16px; font-size: .9rem; }

/* Citation */
.cite .cite-ref { font-size: .9rem; overflow-wrap: anywhere; }
.bibtex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace; background: var(--page); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: .8rem; line-height: 1.5; overflow-x: auto; white-space: pre; margin: .4rem 0; }
.copy-btn { font: inherit; font-size: .8rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; cursor: pointer; margin-right: 6px; }
.copy-btn:hover { color: var(--ink); }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
td.num, th.num, .num-table td:not(:first-child), .num-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: " ↕"; color: var(--muted); font-weight: 400; }
th[aria-sort="ascending"]::after { content: " ↑"; color: var(--ink); }
th[aria-sort="descending"]::after { content: " ↓"; color: var(--ink); }
tbody tr:hover { background: var(--wash); }
details.tv { margin-top: .4rem; }
details.tv summary { cursor: pointer; color: var(--ink-2); font-size: .85rem; }
details.tv table { margin-top: .4rem; }

/* Filters: one row above what they scope */
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 12px 0; }
.filters label { display: flex; flex-direction: column; font-size: .78rem; color: var(--ink-2); gap: 2px; }
.filters input, .filters select {
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; min-width: 0;
}
.filters input[type="search"] { width: 14rem; max-width: 100%; }
.count { color: var(--ink-2); font-size: .85rem; }

/* Badges (status: icon + label, never colour alone) */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; color: var(--ink); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge.critical::before { background: var(--status-critical); }
.badge.serious::before { background: var(--status-serious); }
.badge.warning::before { background: var(--status-warning); }
.badge.good::before { background: var(--status-good); }
.facts { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; color: var(--ink-2); font-size: .9rem; margin: .2rem 0 .6rem; }
.facts b { color: var(--ink); font-weight: 600; }
.events { list-style: none; padding: 0; margin: 0; }
.events li { padding: 6px 0; border-bottom: 1px solid var(--grid); }
.events time { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: .6rem; }

/* Horizontal bars (rankings) */
.hbars { list-style: none; padding: 0; margin: 0; }
.hbars li { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: 10px; align-items: center; padding: 3px 0; font-size: .88rem; }
.hbars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hbars .bar { height: 12px; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; }
.hbars .bar.neg { background: var(--s2); }
.hbars .val { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

@media (max-width: 600px) {
  h1 { font-size: 1.3rem; }
  .card { padding: 12px; }
  .hbars li { grid-template-columns: 1fr; gap: 0; }
  .spark { display: none; }
}
@media print {
  .site-header nav, .filters, .tooltip { display: none; }
  .card { break-inside: avoid; }
}