.department-figure { margin:0; --oral:#a7c99c; --written:#f5cf72; }
.chart-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:14px; margin:0 0 24px; }
.chart-key, .chart-key > span { display:flex; align-items:center; gap:8px; }
.chart-key { gap:20px; }
.chart-key i { display:inline-block; width:14px; height:14px; }
.oral-key, .bar-oral { background:var(--oral); }
.written-key, .bar-written { background:var(--written); }
.chart-scroll { overflow-x:auto; padding:64px 0 12px; }
#department-chart { display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:280px 180px; min-width:1050px; padding:0 8px; }
.chart-axis { position:relative; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.axis-tick { position:absolute; right:10px; transform:translateY(50%); }
.chart-grid { position:relative; border-left:1px solid var(--line); }
.grid-line { position:absolute; left:0; right:0; border-top:1px solid var(--line); }
.department-columns, .department-names { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); }
.department-columns { position:absolute; inset:0; align-items:end; }
.department-column { height:100%; display:flex; align-items:flex-end; justify-content:center; }
.department-bar { position:relative; display:flex; flex-direction:column; width:30px; outline-offset:4px; }
.department-bar:focus-visible { outline:2px solid var(--purple); }
.bar-written, .bar-oral { display:block; flex-shrink:0; }
.bar-total { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding-bottom:7px; font-size:14px; font-variant-numeric:tabular-nums; }
.bar-tooltip { display:none; position:absolute; z-index:2; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:28px; padding:7px 10px; background:var(--ink); color:#fff; border-radius:4px; white-space:nowrap; font-size:12px; font-weight:400; }
.department-bar:hover .bar-tooltip, .department-bar:focus .bar-tooltip { display:block; }
.department-column:first-child .bar-tooltip { left:0; transform:none; }
.department-column:last-child .bar-tooltip { left:auto; right:0; transform:none; }
.department-names { grid-column:2; padding-top:16px; }
.department-name { writing-mode:vertical-rl; justify-self:center; font-size:13px; line-height:1.5; }
.department-figure figcaption { margin-top:8px; line-height:1.7; font-size:13px; }
.category-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.category-section h2 { font-size:20px; }
#legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.legend-button { grid-template-columns:14px minmax(0,1fr) auto; gap:10px; padding:12px 0; font-size:14px; text-decoration:none; }
.legend-button strong { font-size:26px; }
.legend-button small { grid-column:2 / -1; font-size:13px; }
.swatch { width:14px; height:14px; }
@media(max-width:760px) {
  .overview h2 { font-size:20px; line-height:1.5; }
  #department-chart { grid-template-rows:240px 180px; }
  #legend { grid-template-columns:minmax(0,1fr); gap:0; }
  .legend-button { grid-template-columns:14px minmax(0,1fr) auto 56px; }
  .legend-button small { grid-column:auto; }
}