/* Layout: fixed navy header + content column (max 1040px) + fixed navy bottom tabs on phones / tabs in header on desktop. Institutional navy (紺) with white cards; party colors never used (rule D-2). */
:root {
  --bg: #EEF1F6;
  --surface: #FFFFFF;
  --panel: #E3E8F0;
  --line: #D3DAE5;
  --fg: #13213A;
  --muted: #4A5872;
  --accent: #1F3F7A;
  --accent-weak: #DCE4F2;
  --danger: #B42318;
  --danger-weak: #FDECEA;
  --bar: #6D82A8;
  --nav-bg: #14264A;
  --nav-fg: #FFFFFF;
  --nav-muted: #A9B6CF;
  --nav-weak: #26396A;
  --font-ui: 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  --font-head: 'Zen Kaku Gothic New', 'BIZ UDPGothic', 'Hiragino Sans', sans-serif;
  --r: 14px;
  --gap: 16px;
  --header-h: 60px;
  --tabs-h: 64px;
}
:root, :root[data-theme="dark"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nav-bg); }
a { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.4; text-wrap: balance; margin: 0; }
p, ul, ol { margin: 0; }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* header */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nav-bg); }
.top .wrap { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--nav-fg); text-decoration: none; }
.brand svg { width: 28px; height: 28px; }
.nav-desk { display: none; gap: 4px; margin-left: 8px; }
.nav-desk button { padding: 8px 14px; border-radius: 999px; color: var(--nav-muted); font-size: 15px; }
.nav-desk button[aria-current="page"] { color: var(--nav-fg); background: var(--nav-weak); font-weight: 700; }
.top-actions { margin-left: auto; display: flex; gap: 4px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--nav-muted); }
.icon-btn:hover { background: var(--nav-weak); color: var(--nav-fg); }
.sheet .icon-btn { color: var(--muted); }
.sheet .icon-btn:hover { background: var(--panel); color: var(--fg); }
.icon-btn svg { width: 22px; height: 22px; }

/* bottom tabs */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--nav-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
nav.tabs .row { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabs-h); }
nav.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--nav-muted); }
nav.tabs button svg { width: 24px; height: 24px; }
nav.tabs button[aria-current="page"] { color: var(--nav-fg); font-weight: 700; }
main { padding-block: 24px 40px; }
@media (min-width: 900px) {
  .nav-desk { display: flex; }
  nav.tabs { display: none; }
  main { padding-block: 32px 56px; }
  .site-foot { padding-bottom: 48px; }
}

/* common blocks */
.view { display: flex; flex-direction: column; gap: 32px; }
.page-head { display: flex; flex-direction: column; gap: 8px; }
.page-head h1 { font-size: 28px; }
.meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec > h2 { font-size: 20px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel); color: var(--muted); white-space: nowrap; }
.chip.accent { background: var(--accent-weak); color: var(--accent); }
.rule { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rule:hover { border-color: var(--accent); color: var(--accent); }
.term { color: inherit; border-bottom: 1.5px dotted var(--accent); padding: 0; line-height: 1.4; }
.seg { align-self: flex-start; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel); gap: 2px; }
.seg button { padding: 6px 13px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.row-item { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.row-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-item .t { font-weight: 700; }
.row-item .s { color: var(--muted); font-size: 14px; }
.chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sources { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.sources a { text-decoration: none; }
.soon-pill { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; align-self: flex-start; }
.back svg { width: 18px; height: 18px; }

/* feed */
.ask { background: var(--surface); display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.ask svg { width: 20px; height: 20px; flex: none; }
.ask span.grow { flex: 1; }
.cards { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); width: 100%; }
.card:hover { border-color: var(--accent); }
.card h3 { font-size: 20px; }
.card .lead { color: var(--muted); font-size: 15px; }
.card .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* article */
.facts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fact { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fact .foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.fact .note { font-size: 14px; color: var(--muted); }
.votes { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 720px) { .votes, .views { grid-template-columns: 1fr 1fr; } }
.vote-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.vote-col h3 { font-size: 16px; display: flex; justify-content: space-between; }
.vote-col ul { padding-left: 1.2em; color: var(--fg); font-size: 15px; }
.views { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.view-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.view-card h3 { font-size: 17px; }
.view-card .origin { font-size: 13px; color: var(--muted); }
.view-card .origin { display: flex; flex-direction: column; gap: 2px; }
.views-list { display: flex; flex-direction: column; gap: 12px; }
.side { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.side.yes { background: var(--accent-weak); color: var(--accent); }
.side.no { background: var(--panel); color: var(--fg); border: 1px solid var(--line); }
.small-h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.view-card .foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.think { padding: 24px; border-radius: var(--r); background: var(--accent-weak); display: flex; flex-direction: column; gap: 6px; }
.think h2 { font-size: 22px; color: var(--accent); }
.log { font-size: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); padding: 16px 20px; }

/* learn */
.learn-body { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.learn-body ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.learn-body .lt { font-weight: 700; margin-bottom: 6px; }
.table-wrap { background: var(--surface); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th { background: var(--panel); font-weight: 700; }
td.num, th.num { text-align: right; }
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.step .dot { display: flex; flex-direction: column; align-items: center; }
.step .dot b { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--surface); display: grid; place-items: center; font-size: 14px; }
.step .dot i { flex: 1; width: 2px; background: var(--line); margin: 4px 0; }
.step:last-child .dot i { display: none; }
.step .c { padding-bottom: 20px; display: flex; flex-direction: column; gap: 2px; }
.step .c strong { font-size: 16px; }

/* charts */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: minmax(0, 11em) 1fr 8.5em; gap: 12px; align-items: center; font-size: 14px; }
.bar .label { overflow-wrap: anywhere; }
.bar .track { height: 14px; background: var(--panel); border-radius: 999px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--bar); border-radius: 999px; }
.bar .v { min-width: 2.5em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 480px) { .bar { grid-template-columns: minmax(0, 6.5em) 1fr 7em; font-size: 13px; } }
.rej-note { padding: 12px 16px; border-radius: var(--r); background: var(--panel); font-weight: 700; font-size: 15px; }
/* 審議中・採決されなかった法律案 */
.b-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.b-row .t { font-size: 15px; line-height: 1.5; }
.b-row .s { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; }
.b-row a, .b-row button.lk { color: var(--accent); font-size: 13px; }
.b-res { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel); color: var(--fg); white-space: nowrap; }
.b-res.rej { background: var(--accent-weak); color: var(--accent); }
/* 投票記録とくらべる */
.m-intro { display: flex; flex-direction: column; gap: 10px; }
.m-limits { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.m-progress { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-list { display: flex; flex-direction: column; gap: 12px; }
.m-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.m-card.answered { border-color: var(--accent); }
.m-card h3 { font-size: 17px; line-height: 1.5; }
.m-card .lead { color: var(--muted); font-size: 15px; }
.m-card details { font-size: 14px; color: var(--muted); }
.m-card details p { white-space: pre-line; margin-top: 6px; }
.m-ans { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m-ans .seg button { min-width: 4.5em; }
.m-ans .seg button[data-mans$="|y"][aria-pressed="true"], .m-ans .seg button[data-mans$="|n"][aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.m-ans .seg button[data-mans$="|"][aria-pressed="true"] { background: var(--panel); color: var(--muted); border-color: var(--line); box-shadow: none; }
.m-star { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.m-star[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; background: var(--accent-weak); }
.m-star[disabled] { opacity: .45; }
.m-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.m-links button { color: var(--accent); }
.m-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 4px; }
.m-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; height: 56px; padding: 0 24px; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 17px; font-weight: 700; box-shadow: 0 4px 14px rgba(31, 63, 122, .22); transition: transform .12s, box-shadow .12s; }
.m-go:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 63, 122, .28); }
.m-go small { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.m-go .chev { color: inherit; width: 20px; height: 20px; }
.m-go:disabled { background: var(--panel); color: var(--muted); box-shadow: none; transform: none; cursor: default; }
.m-clear-wrap { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.m-clear { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--danger); color: var(--danger); background: var(--surface); font-size: 15px; font-weight: 700; transition: background .12s, color .12s; }
.m-clear svg { width: 18px; height: 18px; }
.m-clear:hover { background: var(--danger-weak); }
.m-clear.armed { background: var(--danger); color: #fff; }
.m-clear-cancel { height: 44px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 15px; }
.m-clear-cancel:hover { background: var(--panel); }
.m-res { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.m-res details { border-bottom: 1px solid var(--line); }
.m-res summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 13em) 1fr 7.5em; gap: 12px; align-items: center; padding: 14px 4px; font-size: 15px; }
.m-res summary::-webkit-details-marker { display: none; }
.m-res .track { height: 12px; background: var(--panel); border-radius: 999px; overflow: hidden; }
.m-res .fill { height: 100%; background: var(--bar); border-radius: 999px; }
.m-res .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-res .v b { font-size: 17px; }
.m-res .sub { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: -6px; }
.m-res ul { list-style: none; margin: 0 0 14px; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.m-res li { display: flex; gap: 8px; }
.m-res li .mk { flex: none; width: 3.6em; font-weight: 700; }
.m-res li .mk.no { color: var(--muted); font-weight: 400; }
@media (max-width: 560px) { .m-res summary { grid-template-columns: minmax(0, 1fr) 6.5em; } .m-res summary .track { grid-column: 1 / -1; grid-row: 2; } .m-res .sub { grid-row: 3; margin-top: -4px; } }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.box h3 { font-size: 18px; }
.gap-viz { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.big { font-family: var(--font-head); font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big small { font-size: 18px; margin-left: 2px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .k { color: var(--muted); font-size: 14px; }
.grid-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 720px) { .grid-fields { grid-template-columns: repeat(3, 1fr); } }
.field { background: var(--surface); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; display: flex; gap: 10px; }
.field b { color: var(--accent); font-variant-numeric: tabular-nums; }
.two { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; } }

/* sheet */
.scrim { position: fixed; inset: 0; background: rgba(10, 14, 16, .45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface); width: 100%; max-width: 560px; max-height: 85%; overflow: auto; border-radius: 20px 20px 0 0;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .scrim { align-items: center; } .sheet { border-radius: 20px; } }
.sheet .sh { display: flex; align-items: flex-start; gap: 12px; }
.sheet .sh h2 { font-size: 20px; flex: 1; }
.opt-group { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; }
.opt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); font-weight: 700; }
.rules-group { display: flex; flex-direction: column; gap: 10px; }
.rules-group h3 { font-size: 17px; }
.rule-row { display: grid; grid-template-columns: 3.6em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rule-row b { font-variant-numeric: tabular-nums; color: var(--accent); }
.rule-row .rt { font-weight: 700; }
.rule-row .rx { color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: up .18s ease-out; } @keyframes up { from { transform: translateY(16px); opacity: .6; } } }

/* v5 additions */
th, td { white-space: normal; min-width: 8.5em; vertical-align: top; }
@media (max-width: 480px) { th, td { padding: 10px 12px; } }
th:first-child { min-width: 9.5em; }
td.num, th.num { white-space: nowrap; min-width: 0; }
.seg { flex-wrap: wrap; }
.muted { color: var(--muted); }
.lead-l { font-size: 17px; }
.learn-body .tb { display: flex; flex-direction: column; gap: 8px; }
.learn-body .pb { display: flex; flex-direction: column; gap: 6px; }
.note-b { font-size: 14px; color: var(--muted); padding: 12px 16px; border-left: 3px solid var(--line); background: var(--surface); border-radius: 0 10px 10px 0; }
.cert { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--panel); color: var(--muted); }
.cert-debated { background: var(--accent-weak); color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.stats .big small.long { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.5; margin: 6px 0 0; color: var(--muted); }
.stats .big { font-size: 30px; overflow-wrap: anywhere; }
.stats .big small { font-size: 14px; }
.stats .box { padding: 16px; gap: 4px; }
.bar .v small { font-weight: 400; color: var(--muted); font-size: 12px; }
.jump { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin: -8px 0; }
.jump::-webkit-scrollbar { display: none; }
.jump button { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--fg); }
.jump button:hover { border-color: var(--accent); color: var(--accent); }
.sec { scroll-margin-top: calc(var(--header-h) + 16px); }
a.row-item { color: inherit; text-decoration: none; }
a.row-item:hover .t, button.row-item:hover .t { color: var(--accent); }
.tlink { font-weight: 700; color: var(--accent); text-align: left; white-space: nowrap; }
.card .lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more { align-self: center; padding: 10px 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; color: var(--accent); }
input.search { width: 100%; height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--fg); }
input.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart text { font-size: 12px; fill: var(--muted); font-family: var(--font-ui); }
a.small { font-size: 13px; }
.table-wrap.tall { max-height: 460px; overflow: auto; }
.table-wrap.tall thead th { position: sticky; top: 0; z-index: 1; }
.table-wrap.tall thead tr:nth-child(2) th { top: 37px; }
th.grp { padding-top: 8px; padding-bottom: 8px; }
th.grp { text-align: center; font-size: 12px; color: var(--muted); }
.mock-chart { border-style: dashed; }
.mock-row { text-align: center; color: var(--muted); white-space: normal; padding: 18px; }
.bars.div .track { position: relative; }
.bars.div .fill { position: absolute; top: 0; bottom: 0; border-radius: 0; }
.bars.div .fill.pos { border-radius: 0 999px 999px 0; }
.bars.div .fill.neg { border-radius: 999px 0 0 999px; opacity: .6; }
.bars.div .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.show { display: flex; flex-direction: column; gap: 14px; }
.show ul { padding-left: 1.3em; display: grid; grid-template-columns: 1fr; gap: 4px 24px; }
@media (min-width: 720px) { .show ul { grid-template-columns: repeat(3, 1fr); } }
.show .lt { font-weight: 700; margin-bottom: 6px; }
.course-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); align-self: center; }
.course-nav button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; color: var(--accent); display: grid; place-items: center; }
.course-nav button:hover { border-color: var(--accent); }
.course .panel-head { flex-wrap: wrap; row-gap: 6px; }
.panel-head .count, .course-nav span { white-space: nowrap; }
.course-nav { flex: none; }
.course-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-count { flex: none; display: inline-flex; align-items: center; font-size: 14px; color: var(--muted); white-space: nowrap; padding-right: 4px; }
.opt { border-radius: 12px; background: var(--surface); font-weight: 700; }
.opt[aria-pressed="true"] { background: var(--nav-bg); color: var(--nav-fg); border-color: var(--nav-bg); }
.opt.lvl[aria-pressed="true"] small { color: var(--nav-muted); }
.opt.lvl { display: flex; align-items: center; justify-content: center; border-radius: 12px; padding: 10px 14px; }
.opt.lvl small { font-size: 11px; color: var(--muted); font-weight: 400; }
.opt-group .opt.lvl { flex: 1 1 calc(25% - 8px); min-width: 0; }
@media (max-width: 520px) { .opt-group .opt.lvl { flex-basis: calc(50% - 8px); } }
.who-btn { font-size: 12px; color: var(--accent); border: 1px solid var(--accent-weak); border-radius: 8px; padding: 1px 8px; font-weight: 700; }
.who-btn:hover { background: var(--accent-weak); }
.term-list { display: flex; flex-wrap: wrap; gap: 8px; }
.term-chip { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.term-chip:hover { border-color: var(--accent); color: var(--accent); }
.quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: -12px; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; color: var(--accent); }
.quick button:hover { border-color: var(--accent); }
.quick small { font-weight: 400; color: var(--muted); font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: -16px; }
.filters:empty { display: none; }
.scope summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.scope .meta { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
.sec > h2 .count { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.sel { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.sel select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; max-width: 100%; }


/* v6 UI: panels + tiles */
.small { font-size: 14px; }
.panels { display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 720px) { .panel { padding: 24px 28px; } }
.panel-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--accent); }
.panel-head h2 { font-size: 21px; }
.panel-head .count, .count { font-size: 13px; color: var(--muted); font-weight: 400; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tiles.party { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 40px 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid transparent; color: inherit; text-decoration: none; width: 100%; min-height: 64px; justify-content: center; }
button.tile:hover, a.tile:hover { border-color: var(--accent); background: var(--accent-weak); }
.tile .tt { font-weight: 700; line-height: 1.5; }
.tile .ts { font-size: 13px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .ts.full { display: block; -webkit-line-clamp: unset; font-size: 14px; color: var(--fg); }
.tile .ti { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--accent); }
.tile .ti .chev { color: var(--accent); }
.tiles.dir .tile { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.tiles.plain .tile { padding-right: 16px; padding-left: 48px; background: var(--surface); border: 1px solid var(--line); justify-content: flex-start; }
.tile .tn { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; display: grid; place-items: center; font-weight: 700; }
.tiles.party .tile { padding: 16px 44px 16px 18px; gap: 6px; background: var(--surface); border: 1px solid var(--line); }
.tiles.party .tt { font-size: 18px; }
.pnums { display: flex; gap: 18px; margin-top: 4px; }
.pnums span { display: flex; flex-direction: column; }
.pnums small { font-size: 11px; color: var(--muted); }
.pnums b { font-size: 18px; font-variant-numeric: tabular-nums; font-family: var(--font-head); }
.panel .more { margin-top: 2px; }
.toolbar-wrap { display: flex; flex-direction: column; gap: 6px; }
.toolbar { display: flex; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.toolbar::-webkit-scrollbar { display: none; }
.toolbar .seg { flex: none; flex-wrap: nowrap; }
.toolbar .seg button { white-space: nowrap; }
.pill-select { flex: none; font: inherit; font-size: 14px; color: var(--fg); background: var(--panel); border: 0; border-radius: 999px; padding: 9px 14px; max-width: 16em; }
.hook { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r); background: var(--accent-weak); }
.hook .q { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.hook p { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--accent); }
.near { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 2px solid var(--accent-weak); display: flex; flex-direction: column; gap: 8px; }
.near .lt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.near .who { font-size: 12px; font-weight: 400; color: var(--muted); }
.timeline { display: flex; flex-direction: column; border-left: 2px solid var(--line); margin-left: 6px; }
.tl { position: relative; padding: 0 0 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.tl::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--accent); }
.tl .tld { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.quote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; font-size: 15px; }
.fold summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; padding: 6px 0; }

/* v10 */
button.ask { width: 100%; text-align: left; }
button.ask:hover { border-color: var(--accent); }
.term { cursor: help; }
.xp { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 2px; line-height: 1; }
.xp:hover { background: var(--accent); color: #fff; }
.pop { position: absolute; z-index: 60; width: min(340px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(19,33,58,.18); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.7; }
.pop .pt { font-weight: 700; font-family: var(--font-head); font-size: 16px; color: var(--accent); }
.pop-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; font-weight: 700; color: var(--accent); font-size: 14px; padding: 8px 10px; border-radius: 8px; background: var(--accent-weak); width: 100%; }
.pop-link .chev { width: 16px; height: 16px; color: var(--accent); }
.sheet .pop-link { font-size: 15px; padding: 12px 14px; }
.today-cards .card.feat { border: 2px solid var(--accent); }
@media (min-width: 900px) { .today-cards .card.feat { grid-column: span 2; } .today-cards .card.feat h3 { font-size: 24px; } .today-cards .card.feat .lead { font-size: 16px; color: var(--fg); } }
.card .cq { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 15px; line-height: 1.6; }
.term-card { background: var(--accent-weak); }
.laws-link { display: flex; align-items: center; gap: 12px; text-align: left; padding: 18px 20px; border-radius: var(--r); background: var(--nav-bg); color: var(--nav-fg); width: 100%; }
.laws-link .grow { display: flex; flex-direction: column; gap: 4px; }
.laws-link .t { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.laws-link .s { color: var(--nav-muted); font-size: 14px; }
.laws-link .chip { align-self: flex-start; background: var(--nav-weak); color: var(--nav-fg); }
.laws-link .chev { color: var(--nav-fg); }
.feed-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.feed-head h2 { font-size: 22px; }
.shuffle { margin-left: auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--accent); font-weight: 700; }
.law-tools { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .law-tools { grid-template-columns: 1fr 1fr; } }
.tool { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; width: 100%; }
.tool:hover { border-color: var(--accent); }
.tool .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; }
.tool .ic svg { width: 24px; height: 24px; }
.tool .grow { flex: 1; min-width: 0; }
@media (max-width: 480px) { .tool { gap: 12px; padding: 14px; } .tool .ic { width: 40px; height: 40px; } .tool .t { font-size: 15px; } }
.tool .t { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; }
.tool .s { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.shortcut { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.today { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; border-radius: var(--r); background: var(--surface); border: 2px solid var(--accent); width: 100%; }
.today .chip { align-self: flex-start; }
.today .tq { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--accent); line-height: 1.6; }
.today .tt2 { color: var(--muted); font-size: 14px; }
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-tabs button { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; display: inline-flex; gap: 8px; align-items: baseline; }
.cat-tabs button small { font-weight: 400; color: var(--muted); font-size: 12px; }
.cat-tabs button[aria-selected="true"] { background: var(--nav-bg); color: var(--nav-fg); border-color: var(--nav-bg); }
.cat-tabs button[aria-selected="true"] small { color: var(--nav-muted); }
@media (max-width: 719px) { .cat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cat-tabs button { flex: none; } }
.sub-h { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.tile.sm { min-height: 48px; padding-top: 10px; padding-bottom: 10px; background: var(--surface); border: 1px solid var(--line); }
.tile.soon { background: var(--surface); border: 1px dashed var(--line); padding-right: 16px; }
.tile.soon .tt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scope-note { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.scope-note b { color: var(--fg); font-size: 12px; background: var(--panel); border-radius: 6px; padding: 1px 8px; }
.table-wrap.mock td { color: var(--muted); }
.tlink.inline { display: inline; white-space: nowrap; border-bottom: 1.5px solid var(--accent); padding: 0 2px; }

/* v13: boxed segments like category tabs */
.seg { background: none; padding: 0; gap: 8px; border-radius: 0; }
.seg button { padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 700; font-size: 15px; box-shadow: none; }
.seg button[aria-pressed="true"] { background: var(--nav-bg); color: var(--nav-fg); border-color: var(--nav-bg); box-shadow: none; }
.seg button:hover { border-color: var(--accent); }
.seg button[aria-pressed="true"]:hover { border-color: var(--nav-bg); }
.toolbar .seg button { font-size: 14px; padding: 8px 14px; }
.pill-select { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; padding: 8px 14px; }
/* courses & progress */
.course { display: flex; flex-direction: column; gap: 12px; }
.course-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.progress { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.steps-list { display: grid; grid-template-columns: 1fr; gap: 8px; counter-reset: st; }
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps-list { grid-template-columns: repeat(4, 1fr); } }
.step-btn { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid transparent; }
.step-btn:hover { border-color: var(--accent); }
.step-btn .no { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent); }
.step-btn.done .no { background: var(--accent); color: #fff; }
.step-btn.next { border-color: var(--accent); background: var(--accent-weak); }
.step-btn .nm { font-weight: 700; font-size: 14px; line-height: 1.5; }
.continue { align-self: flex-start; padding: 10px 18px; border-radius: 12px; background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; }
.tile .done-mark { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--accent); font-weight: 700; }
.tile .stepno { font-size: 11px; color: var(--muted); font-weight: 700; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.pager button:hover { border-color: var(--accent); }
.pager .nx { text-align: right; align-items: flex-end; grid-column: 2; }
.pager small { color: var(--muted); font-size: 12px; }
.pager b { font-size: 15px; line-height: 1.5; }
.course-bar { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.course-bar .meta b { color: var(--accent); }
/* diagrams */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org .root { padding: 12px 28px; border-radius: 12px; background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; font-family: var(--font-head); text-align: center; }
.org .root small { display: block; font-weight: 400; font-size: 12px; color: var(--nav-muted); }
.org .vline { width: 2px; height: 18px; background: var(--accent); }
.org .side { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); }
.org .side span, .org .side button { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--panel); }
.org .side button { background: var(--accent-weak); color: var(--accent); font-weight: 700; }
.org .grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 14px; border-top: 2px solid var(--accent); }
@media (min-width: 600px) { .org .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .org .grid { grid-template-columns: repeat(3, 1fr); } }
.org .unit { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.org button.unit:hover { border-color: var(--accent); }
.org .unit .un { font-weight: 700; color: var(--accent); }
.org .unit .subs { display: flex; flex-wrap: wrap; gap: 4px; }
.org .unit .subs span { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--panel); color: var(--fg); }
.org .unit.wide { grid-column: 1 / -1; }
.diagram-wrap { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.diagram-wrap .lt { margin: 0; }
svg.powers { width: 100%; min-width: 600px; max-width: 720px; height: auto; display: block; margin: 0 auto; }
.svg-scroll { overflow-x: auto; }
.mob-only { display: none; }
@media (max-width: 640px) { .mob-only { display: inline; } }
svg.powers text { font-family: var(--font-ui); fill: var(--fg); }
svg.powers .nb { font-family: var(--font-head); font-weight: 700; font-size: 17px; fill: #fff; }
svg.powers .lb { font-size: 13px; fill: var(--accent); font-weight: 700; }
svg.powers .ns { font-size: 12px; fill: #DCE4F2; }

/* v14 diagrams */
.chain { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
@media (min-width: 900px) { .chain { flex-direction: row; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } }
.fbox { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
@media (min-width: 900px) { .fbox { min-width: 104px; } }
.fbox b { font-size: 15px; color: var(--fg); }
.fbox span { color: var(--muted); }
.fbox.em { background: var(--nav-bg); border-color: var(--nav-bg); }
.fbox.em b { color: var(--nav-fg); } .fbox.em span { color: var(--nav-muted); }
.ftag { align-self: flex-start; font-size: 11px !important; font-weight: 700; color: var(--accent) !important; background: var(--accent-weak); border-radius: 6px; padding: 0 6px; }
.fbox.em .ftag { background: var(--nav-weak); color: var(--nav-fg) !important; }
.farrow { flex: none; align-self: center; width: 2px; height: 20px; background: var(--accent); position: relative; margin: 2px 0 6px; }
.farrow::after { content: ""; position: absolute; left: -4px; bottom: -6px; border: 5px solid transparent; border-top-color: var(--accent); }
@media (min-width: 900px) { .farrow { width: 16px; height: 2px; margin: 0 8px 0 2px; } .farrow::after { left: auto; right: -8px; bottom: -4px; border-top-color: transparent; border-left-color: var(--accent); } }
.fpath { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.fpl { font-weight: 700; font-size: 14px; color: var(--accent); }
.seat-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .seat-grid { grid-template-columns: 1fr 1fr; } }
.house .hn { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 17px; }
.house .hn .big { font-size: 28px; }
.dots { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0; }
.dots i, .lg i { width: 8px; height: 8px; border-radius: 2px; background: var(--bar); display: inline-block; }
.dots i.hl, .lg i.hl { background: var(--nav-bg); }
.dots i:not(.hl) { opacity: .55; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
table.dh td.win { background: var(--accent-weak); color: var(--accent); font-weight: 700; }
table.dh sup { font-size: 10px; margin-left: 2px; }
.courts { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.courts .lvl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.courts .ct { flex: 1 1 140px; max-width: 260px; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--nav-bg); color: var(--nav-fg); text-align: center; }
.courts .ct span { font-size: 12px; color: var(--nav-muted); }
.courts .up { display: flex; justify-content: center; padding: 6px 0; }
.courts .up span { font-size: 12px; font-weight: 700; color: var(--accent); padding-left: 14px; position: relative; }
.courts .up span::before { content: "↑"; position: absolute; left: 0; }
.cal { display: flex; flex-direction: column; gap: 8px; }
.cal-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: center; }
@media (max-width: 520px) { .cal-row { grid-template-columns: 7em 1fr; } }
.cal-name { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; line-height: 1.4; }
.cal-name small { font-weight: 400; color: var(--muted); font-size: 11px; }
.cal-track { position: relative; height: 22px; background: var(--panel); border-radius: 6px; }
.cal-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--nav-bg); }
.cal-track i.ongoing { background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 4px, var(--bar) 4px, var(--bar) 8px); }
.cal-track.months { background: none; height: 18px; }
.cal-track.months span { position: absolute; font-size: 11px; color: var(--muted); transform: translateX(2px); }
@media (max-width: 520px) { .cal-track.months span:nth-child(even) { display: none; } }

.page-head.inline { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.page-head.inline > p.muted, .page-head.inline > .meta { margin: 0; }
.set-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.set-h h3 { font-size: 16px; }
.set-h .meta { gap: 4px 8px; }
.lawhead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

.sub-h2 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.course-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
.course-card { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.course-card:hover { border-color: var(--accent); }
.course-card.cur { border: 2px solid var(--accent); }
.course-card .cn { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--nav-bg); color: var(--nav-fg); display: grid; place-items: center; font-weight: 700; }
.course-card .ct { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.course-card small { color: var(--muted); font-size: 12px; }
.course-card .progress { height: 6px; }

/* v25: control hierarchy */
.tab-lead { font-size: 14px; color: var(--muted); margin-bottom: -12px; }
/* level-2 controls: filters, jump chips, selects, small buttons share one look */
.toolbar .seg { gap: 6px; }
.toolbar .seg button, .jump button, .pill-select, .shuffle, .course-nav button, .more, .who-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; font-weight: 700; color: var(--fg); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.toolbar .seg button[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
.toolbar .seg button:hover, .jump button:hover, .pill-select:hover, .shuffle:hover, .more:hover { border-color: var(--accent); }
.course-nav button { width: 36px; padding: 0; font-size: 18px; color: var(--accent); }
.who-btn { height: 26px; padding: 0 10px; font-size: 12px; color: var(--accent); }
.more { align-self: center; color: var(--accent); }
.shuffle { color: var(--accent); }
.pill-select { padding-right: 10px; }
.toolbar { gap: 12px; }
/* primary action */
.continue { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; display: inline-flex; align-items: center; }

/* v30: three distinct control types */
/* 1) view switch = underline tabs */
.view > .seg { display: flex; flex-wrap: nowrap; gap: 0; background: none; padding: 0; border-radius: 0; border-bottom: 1px solid var(--line); align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.view > .seg::-webkit-scrollbar { display: none; }
.view > .seg button { flex: none; height: auto; padding: 12px 18px 10px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 16px; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; box-shadow: none; }
.view > .seg button:hover { color: var(--fg); border-color: transparent; border-bottom-color: var(--line); }
.view > .seg button[aria-pressed="true"] { background: none; color: var(--accent); border-bottom-color: var(--accent); }
.view > .seg button[aria-pressed="true"]:hover { border-bottom-color: var(--accent); }
@media (max-width: 520px) { .view > .seg button { padding: 10px 12px 8px; font-size: 15px; } }
/* 2) filters & sort = segmented control */
.toolbar .seg { background: var(--panel); padding: 3px; border-radius: 10px; gap: 2px; }
.toolbar .seg button { height: 32px; border: 0; background: none; color: var(--muted); border-radius: 8px; padding: 0 12px; font-size: 13.5px; }
.toolbar .seg button:hover { color: var(--fg); border: 0; }
.toolbar .seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); border: 0; box-shadow: 0 1px 3px rgba(19,33,58,.15); }
.pill-select { height: 38px; background: var(--panel); border: 0; border-radius: 10px; color: var(--fg); font-size: 13.5px; }
/* 3) in-page jumps = plain text links */
.jump { gap: 4px 18px; flex-wrap: wrap; overflow: visible; margin: -6px 0; align-items: baseline; }
.jump .jl { font-size: 12px; color: var(--muted); font-weight: 700; margin-right: -6px; }
.jump button { height: auto; padding: 2px 0; border: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 700; color: var(--accent); }
.jump button::before { content: "↓ "; font-weight: 400; }
.jump button:hover { text-decoration: underline; border: 0; }

/* v31: no inline jump rows; floating table of contents */
.jump { display: none !important; }
.toc-btn { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 25; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(19,33,58,.25); }
.toc-btn svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .toc-btn { bottom: 32px; right: 24px; height: 52px; padding: 0 24px; font-size: 16px; gap: 10px; } .toc-btn svg { width: 20px; height: 20px; } }
/* 横に余白があるパソコンでは、中身の外（右の余白）に置いて、表や文字に重ならないようにする */
@media (min-width: 1340px) { .toc-btn { right: auto; left: calc(50% + 520px + 24px); } }
.toc-list { display: flex; flex-direction: column; }
.toc-list button { text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.toc-list button:hover { color: var(--accent); }

/* v32: equal-width view tabs */
.lab-s { display: none; }
@media (max-width: 420px) { .lab-l { display: none; } .lab-s { display: inline; } }
.view > .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); width: max-content; max-width: 100%; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.view > .seg button { text-align: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
@media (max-width: 720px) { .view > .seg { width: 100%; grid-auto-columns: minmax(0, 1fr); } .view > .seg button { font-size: 14px; padding: 10px 4px 8px; } }

/* v33: header nav as equal-width tabs */
.nav-desk { gap: 0; margin-left: 16px; align-self: stretch; }
.nav-desk button { width: 104px; height: 100%; padding: 0; border-radius: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--nav-muted); background: none; position: relative; }
.nav-desk button:hover { color: var(--nav-fg); }
.nav-desk button[aria-current="page"] { color: var(--nav-fg); background: none; }
.nav-desk button[aria-current="page"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--nav-fg); }
/* tour */
.scrim { z-index: 80; }
.pop { z-index: 85; }
.tour { position: fixed; inset: 0; z-index: 70; background: rgba(10,14,16,.5); display: grid; place-items: center; padding: 16px; }
.tour-card { width: min(520px, 100%); height: min(600px, calc(100vh - 32px)); background: var(--surface); border-radius: 20px; padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.25); }
.tour-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.tour-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; }
.tour-ic svg { width: 30px; height: 30px; }
.tour-card h2 { font-size: 22px; }
.tour-card p { color: var(--fg); line-height: 1.8; }
.tour-card ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.tour-dots { display: flex; gap: 6px; justify-content: center; }
.tour-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); }
.tour-dots i.on { background: var(--accent); width: 20px; }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour-nav .skip { color: var(--muted); font-size: 14px; margin-right: auto; }
.tour-nav button { display: inline-flex; align-items: center; justify-content: center; }
.tour-nav button.pri { height: 42px; width: 112px; padding: 0; border-radius: 10px; background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; }
.tour-nav button.tback { height: 42px; width: 80px; padding: 0; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; }
.tour-demo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* v36: settings spacing */
.sh-sub { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 12px; white-space: nowrap; }
.sheet .sec { gap: 12px; }
.sheet .sec + .sec { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; }
.sheet > p.meta { margin-top: 8px; }

/* v40: tutorial redesign */
.tour-card { position: relative; }
.tour-card .skip { position: absolute; top: 18px; right: 20px; color: var(--muted); font-size: 14px; font-weight: 700; padding: 6px 4px; }
.tour-body { justify-content: flex-start; }
@media (max-width: 720px) { .tour-body { padding-top: 6vh; } }
.tour-ic { width: 72px; height: 72px; border-radius: 20px; }
.tour-ic svg { width: 38px; height: 38px; }
.tour-card h2 { font-size: 24px; }
.tour-pts { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.tour-pts li { display: flex; gap: 10px; align-items: center; font-weight: 700; padding: 10px 14px; border-radius: 12px; background: var(--bg); }
.tour-pts li::before { content: "✓"; color: var(--accent); }
.tour-tabs { display: flex; flex-direction: column; gap: 6px; }
.tt-row { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.tt-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--nav-bg); color: var(--nav-fg); display: grid; place-items: center; }
.tt-ic svg { width: 20px; height: 20px; }
.tt-row span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.tt-row small { color: var(--muted); font-size: 12.5px; }
.tour-demo-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line); }
.tour-demo-box small { color: var(--muted); font-size: 12px; }
.tour-demo-box.col { flex-direction: column; align-items: flex-start; }
.mini-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-opts i { font-style: normal; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.mini-opts i.on { background: var(--nav-bg); color: var(--nav-fg); border-color: var(--nav-bg); }
.tour-nav { justify-content: flex-end; }
@media (max-width: 720px) {
  .tour { padding: 0; place-items: stretch; }
  .tour-card { width: 100%; height: 100%; height: 100dvh; border-radius: 0; padding: calc(56px + env(safe-area-inset-top, 0px)) 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .tour-card .skip { top: calc(14px + env(safe-area-inset-top, 0px)); }
  .tour-card h2 { font-size: 26px; }
  .tour-card p { font-size: 16.5px; }
  .tour-nav { gap: 10px; }
  .tour-nav button.tback { width: 96px; height: 50px; }
  .tour-nav button.pri { flex: 1; width: auto; height: 50px; font-size: 16px; }
}

/* 作成と更新の記録 */
.hist { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 14px; color: var(--muted); }
.hist summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 700; color: var(--fg); }
.hist summary::-webkit-details-marker { display: none; }
.hist summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; }
.hist[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.hist summary .grow { flex: 1; }
.hist summary .n { font-weight: 400; color: var(--muted); }
.hist > p, .hist > ul { margin: 0 18px 12px; }
.hist ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hist li { display: flex; gap: 12px; }
.hist li .d { flex: none; min-width: 7.5em; font-variant-numeric: tabular-nums; }
.hist .rules-line { margin-bottom: 14px; }

/* 議員 */
.big.sm { font-size: 18px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
.vote-tag { flex: none; min-width: 4.5em; text-align: center; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); }
.vote-tag.yes { background: var(--accent-weak); color: var(--accent); }
.vote-tag.no { background: var(--fg); color: var(--surface); }
#mq { margin: 4px 0 2px; }

pre.code { background: var(--panel); border-radius: var(--r); padding: 14px 16px; font-size: 13px; overflow-x: auto; white-space: pre; }

/* 議員の絞り込み */
input.search.sm { height: 44px; font-size: 15px; margin: 4px 0 6px; }
/* フッター（公開APIへの入口など） */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 calc(var(--tabs-h) + 28px + env(safe-area-inset-bottom, 0px)); }
.site-foot .wrap { display: flex; flex-direction: column; gap: 18px; }
.api-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 20px; border-radius: var(--r); background: var(--accent-weak); color: var(--fg); }
.api-card .grow { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.api-card .grow span { font-size: 14px; color: var(--muted); }
.api-card .go { flex: none; background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.foot-links button, .foot-links a { color: var(--fg); text-decoration: none; padding: 4px 0; }
.foot-links button:hover, .foot-links a:hover { color: var(--accent); }
@media (max-width: 560px) { .api-card { flex-direction: column; align-items: flex-start; } }