:root { font-family: var(--kaprodi-font); color:var(--kaprodi-text); background:var(--kaprodi-bg); font-synthesis:none; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; height:100vh; height:100dvh; }
button,input,select { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--kaprodi-focus); outline-offset:3px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;top:-60px;left:14px;padding:10px;background:white;color:var(--kaprodi-primary);z-index:5; }
.skip-link:focus { top:8px; }
main { max-width:var(--kaprodi-content-max); height:100%; min-height:0; margin:0 auto; padding:16px var(--kaprodi-gutter) max(8px,env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column; }
.toolbar { flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:40px;margin-bottom:12px; }
.kaprodi-radio { display:flex;gap:2px;margin:0;padding:3px;border:1px solid var(--kaprodi-control-line);border-radius:999px;background:white;box-shadow:var(--kaprodi-control-shadow);min-width:0; }
.kaprodi-radio legend { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.kaprodi-radio label { position:relative;cursor:pointer;display:flex; }
.kaprodi-radio input { position:absolute;opacity:0;width:1px;height:1px; }
.kaprodi-radio span { display:grid;place-items:center;border-radius:999px;padding:8px 13px;min-height:36px;font:600 11px system-ui;color:var(--kaprodi-muted-text);white-space:nowrap; }
.kaprodi-radio input:checked+span { background:var(--kaprodi-primary);color:white; }
.kaprodi-radio input:focus-visible+span { outline:3px solid var(--kaprodi-focus);outline-offset:2px; }
.kaprodi-switch { position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:center;width:62px;min-height:44px;padding:3px;border:1px solid var(--kaprodi-control-line);border-radius:999px;background:white;box-shadow:var(--kaprodi-control-shadow);color:var(--kaprodi-muted-text); }
.kaprodi-switch::before { content:"";position:absolute;z-index:-1;inset:3px auto 3px 3px;width:calc((100% - 8px)/2);border-radius:999px;background:var(--kaprodi-primary);transition:transform .18s ease; }
.kaprodi-switch[aria-checked=true]::before { transform:translateX(calc(100% + 2px)); }
.kaprodi-switch span { font:600 11px system-ui;text-align:center; }
.kaprodi-switch[aria-checked=false] span:first-child,.kaprodi-switch[aria-checked=true] span:last-child { color:white; }
.dashboard-title { flex:none;width:100%;max-width:560px;margin:0 auto 12px;text-align:center;color:var(--kaprodi-primary); }
.dashboard-title span { display:block;font-weight:600;line-height:1.1;font-size:clamp(17px,3.7vw,25px); }
.dashboard-title span+span { margin-top:4px;font-weight:750;font-size:clamp(21px,5vw,36px); }
.preview-notice { flex:none;display:flex;gap:10px;align-items:baseline;margin-bottom:8px;padding:7px 10px;border:1px solid #e2d5ad;border-radius:8px;background:#fbf8ec;color:#705b28;font-size:11px;line-height:1.45; }
.preview-notice strong { flex:none;font-size:10px;letter-spacing:.08em; }
.context-line { flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;line-height:1.4;color:var(--kaprodi-muted-text); }
.context-line p { margin:0; }
.text-button { border:0;background:transparent;padding:4px 0;color:var(--kaprodi-primary);font-size:11px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap; }
.ranking-panel { display:flex;flex-direction:column;flex:1;min-height:0; }
.officer-table { display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b2c3aa transparent; }
.officer-table-head { flex:none;position:sticky;top:0;z-index:1;background:var(--kaprodi-bg);border-bottom:1px solid var(--kaprodi-line);margin-bottom:4px; }
.officer-grid { display:grid;grid-template-columns:clamp(24px,6.6vw,36px) minmax(0,45fr) minmax(0,39fr) clamp(48px,15vw,78px);align-items:center;gap:clamp(3px,.9vw,10px);padding:4px clamp(6px,2vw,12px); }
.officer-header { font-size:11px;font-weight:650;color:var(--kaprodi-muted-text);border:1px solid transparent; }
.officer-progress-heading { text-align:center;white-space:nowrap; }
.ranking-body { display:grid;grid-template-rows:repeat(var(--rows,1),minmax(38px,1fr));gap:4px;flex:1 0 auto;min-height:calc(var(--rows,1)*38px + (var(--rows,1) - 1)*4px);max-height:calc(var(--rows,1)*48px + (var(--rows,1) - 1)*4px); }
.officer-row { position:relative;border:1px solid var(--kaprodi-line);border-radius:8px;background:white;min-height:38px; }
.officer-row::before { content:"";position:absolute;inset:7px auto 7px 0;width:3px;border-radius:3px;background:#c0d1af; }
.officer-row.top-rank { background:var(--kaprodi-top-bg);border-color:var(--kaprodi-top-line); }
.officer-row.top-rank::before { background:#709b53; }
.officer-row.officer-complete { background:var(--kaprodi-complete-bg);border-color:var(--kaprodi-complete-line); }
.rank-cell { text-align:center;min-width:0;font-size:13px;font-weight:650;color:var(--kaprodi-muted-text); }
.officer-name { min-width:0; }
.name-button { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;background:transparent;border:0;padding:0;color:#344c2c;font-size:13px;font-weight:650;line-height:1.15;text-align:left;width:100%; }
.name-button:hover { text-decoration:underline;text-underline-offset:2px; }
.officer-meta { display:block;margin-top:2px;font-size:10px;line-height:1.1;color:var(--kaprodi-muted-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.missing-name .name-button { font-weight:550; }
.metric-strip { min-width:0;width:100%;display:flex;gap:clamp(2px,.9vw,6px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch; }
.metric-strip::-webkit-scrollbar { display:none; }
.strip-cell { flex:0 0 calc((100% - 2*clamp(2px,.9vw,6px))/3);min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;scroll-snap-align:start;font-variant-numeric:tabular-nums;white-space:nowrap; }
.metric-strip-header .strip-cell { padding:5px 0; }
.metric-toggle,.strip-value { border:0;background:transparent;color:inherit;padding:5px 1px;width:100%;font-size:13px;line-height:1.2; }
.metric-toggle:hover { background:#eaf1e1;border-radius:4px; }
.status-open { color:var(--kaprodi-open-text); }
.status-draft { color:var(--kaprodi-draft-text); }
.status-submitted { color:var(--kaprodi-submitted-text); }
.status-rejected { color:var(--kaprodi-rejected-text); }
.status-approved { color:var(--kaprodi-approved-text);font-weight:650; }
.status-remaining,.status-reserve { color:var(--kaprodi-pending-text); }
.officer-progress { min-width:0;text-align:center;white-space:nowrap;font-size:15px;color:#426832;font-variant-numeric:tabular-nums; }
.officer-progress strong { font-weight:700; }
#county-body { flex:none;margin-top:4px; }
.officer-county-total { min-height:44px;background:linear-gradient(180deg,var(--kaprodi-total-bg-start),var(--kaprodi-total-bg-end));border-color:var(--kaprodi-total-line); }
.officer-county-total::before { background:#538347; }
.officer-county-total .rank-cell,.county-name,.officer-county-total .officer-progress { color:var(--kaprodi-total-text);font-weight:750; }
.county-name { font-size:13px; }
.table-hint { flex:none;margin:6px 0 0;font-size:10px;line-height:1.3;color:var(--kaprodi-muted-text); }
.empty-panel,.error-panel { padding:24px 16px;border:1px solid var(--kaprodi-line);border-radius:12px;background:white;text-align:center;font-size:13px; }
.error-panel { color:#9e483c;background:#fff2ee;border-color:#efd8d0; }
dialog { border:1px solid #dce6d3;border-radius:16px;max-width:560px;width:calc(100% - 28px);padding:24px;color:var(--kaprodi-text);background:var(--kaprodi-dialog-bg);max-height:85vh;max-height:85dvh;overflow:auto;box-shadow:var(--kaprodi-dialog-shadow); }
dialog::backdrop { background:#16322160;backdrop-filter:blur(3px); }
.dialog-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px; }
.dialog-heading h2 { margin:0;color:var(--kaprodi-primary);font-size:21px; }
.eyebrow { font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--kaprodi-muted-text); }
.icon-button { flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--kaprodi-line);background:white;color:var(--kaprodi-primary);font-size:24px; }
.dialog-name { font-size:26px;line-height:1.15;overflow-wrap:anywhere;letter-spacing:-.03em;margin:0 0 8px;color:var(--kaprodi-primary); }
.dialog-subtitle,.dialog-copy { font-size:12px;line-height:1.7;color:var(--kaprodi-muted-text);margin:0 0 18px; }
.detail-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.detail-summary>div { padding:13px;background:#eef4e6;border-radius:9px; }
.detail-summary span { display:block;font-size:11px;color:var(--kaprodi-muted-text); }
.detail-summary strong { display:block;font-size:25px;margin-top:6px;color:var(--kaprodi-primary); }
.detail-statuses { margin-top:20px;border-top:1px solid var(--kaprodi-line); }
.detail-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--kaprodi-line);font-size:12px;line-height:1.5; }
.detail-note { font-size:12px;line-height:1.8;color:var(--kaprodi-muted-text);margin:18px 0 0; }
.detail-row strong { text-align:right;font-variant-numeric:tabular-nums; }
.section-heading { margin:24px 0 8px;color:var(--kaprodi-primary);font-size:16px; }
.name-fields { display:flex;flex-direction:column;gap:10px; }
.name-field { display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:10px; }
.name-field span { font-size:11px;color:var(--kaprodi-muted-text);overflow-wrap:anywhere; }
.name-field input { width:100%;min-width:0;min-height:38px;padding:8px;border:1px solid #bdcdb6;border-radius:7px;background:white;color:var(--kaprodi-text);font-size:12px; }
.primary-button { padding:11px 15px;border:1px solid var(--kaprodi-primary);border-radius:8px;background:var(--kaprodi-primary);color:white;font-size:12px; }
.save-status { font-size:12px;line-height:1.5;color:var(--kaprodi-muted-text); }
@media(max-width:560px) {
  main { padding:12px 10px max(8px,env(safe-area-inset-bottom,0px)); }
  .toolbar { gap:5px;margin-bottom:12px; }
  .kaprodi-radio span { padding:7px 9px; }
  .kaprodi-switch { width:55px; }
  .dashboard-title { margin-bottom:10px; }
  .preview-notice { gap:7px;font-size:10px;padding:6px 8px; }
  .context-line { font-size:10px;gap:5px; }
  .context-line .text-button { font-size:10px; }
  .officer-grid { gap:3px;padding-left:6px;padding-right:6px; }
  .officer-header { font-size:10px; }
  .name-button,.county-name,.metric-toggle,.strip-value { font-size:11px; }
  .officer-meta { font-size:9px; }
  .officer-progress { font-size:13px; }
  .rank-cell { font-size:12px; }
  dialog { padding:20px; }
  .detail-summary { gap:6px; }
  .detail-summary>div { padding:10px; }
  .name-field { grid-template-columns:115px minmax(0,1fr); }
}
@media(max-height:520px) {
  .toolbar { margin-bottom:6px; }
  .dashboard-title span { font-size:17px; }
  .dashboard-title span+span { font-size:22px; }
  .dashboard-title { margin-bottom:6px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before { transition:none!important;scroll-behavior:auto!important; } }