:root{
  --bg:#ffffff; --surface:#f6f7f9; --border:#d6dae0; --text:#14181d; --muted:#5c6672;
  --accent:#0072B2; --accent-2:#D55E00; --focus:#0072B2;
  --radius:10px; --maxw:920px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12161b; --surface:#1b2027; --border:#2f3742; --text:#e8ecf1; --muted:#9aa5b1;
    --accent:#4da3d9; --accent-2:#f08a3c;
  }
}
:root[data-theme="dark"]{
  --bg:#12161b; --surface:#1b2027; --border:#2f3742; --text:#e8ecf1; --muted:#9aa5b1;
  --accent:#4da3d9; --accent-2:#f08a3c;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  line-height:1.75; font-size:16px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:24px 16px 72px}
header h1{font-size:1.5rem; line-height:1.4; margin:0 0 6px}
header p.lead{margin:0 0 4px; color:var(--muted); font-size:.95rem}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:20px 0}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:6px; flex:1 1 220px; min-width:0}
label{font-size:.85rem; color:var(--muted); font-weight:700}
input,select{
  font:inherit; padding:10px 12px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); color:var(--text); width:100%;
}
button{
  font:inherit; font-weight:700; padding:10px 18px; border-radius:8px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
}
button.secondary{background:transparent; color:var(--accent)}
button:disabled{opacity:.55; cursor:not-allowed}
.hint{font-size:.82rem; color:var(--muted); margin:10px 0 0}

.status{margin:24px 0; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
.status h2{margin:0 0 8px; font-size:1.05rem}
.status p{margin:0; color:var(--muted); font-size:.92rem}
.status[data-kind="error"]{border-color:var(--accent-2)}
.status[data-kind="error"] h2{color:var(--accent-2)}

section{margin:32px 0}
section h2{font-size:1.15rem; margin:0 0 4px}
section p.sub{margin:0 0 14px; color:var(--muted); font-size:.86rem}

.chart{overflow-x:auto; padding-bottom:4px}
.bars{display:flex; gap:4px; align-items:flex-end; min-height:170px; min-width:min-content}
.bar{display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; width:44px;
     background:none; border:none; padding:0; color:inherit; cursor:pointer; font:inherit}
.bar .col{width:100%; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; transition:background .12s}
.bar[aria-pressed="true"] .col{background:var(--accent-2)}
.bar:hover .col{background:var(--accent-2)}
.bar .n{font-size:.78rem; font-weight:700}
.bar .y{font-size:.72rem; color:var(--muted); writing-mode:vertical-rl; letter-spacing:.02em}

.ministries{display:flex; flex-direction:column; gap:8px}
.ministry{display:grid; grid-template-columns:9.5rem 1fr auto; gap:10px; align-items:center; font-size:.9rem}
.ministry .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ministry .track{display:block; background:var(--border); border-radius:4px; height:12px; overflow:hidden}
/* span のままだと inline 扱いで width/height が効かず、全省庁が同じ長さに見えてしまう */
.ministry .fill{display:block; background:var(--accent); height:100%; min-width:2px}
.ministry .n{font-variant-numeric:tabular-nums; color:var(--muted)}

.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.chip{font-size:.82rem; padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; color:inherit; font-family:inherit}
.chip[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}

.card{border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; background:var(--surface)}
.card .meta{font-size:.8rem; color:var(--muted); margin-bottom:6px}
.card .who{font-weight:700; font-size:.92rem; margin-bottom:8px}
.card .body{font-size:.93rem; margin:0 0 12px}
.card .acts{display:flex; gap:10px; flex-wrap:wrap}
.card .acts button, .card .acts a{font-size:.82rem; padding:6px 12px; text-decoration:none; display:inline-block}
.card .acts a{border:1px solid var(--accent); border-radius:8px; color:var(--accent); font-weight:700}

.share{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.share a, .share button{font-size:.85rem; padding:8px 14px; text-decoration:none; border-radius:8px;
  border:1px solid var(--accent); color:var(--accent); background:transparent; font-weight:700; display:inline-block}
footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--border); font-size:.82rem; color:var(--muted)}
footer p{margin:0 0 8px}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}