/* Data Tool page styles (shared theme is /assets/dakota.css) */
.mode{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:4px;background:var(--ghost);color:var(--muted);width:fit-content;max-width:100%}
.mode.shared{background:color-mix(in srgb,var(--up) 12%,transparent);color:var(--up)}
.mode.browser{background:var(--warn-soft);color:var(--warn)}
.jump{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.jump a{text-decoration:none}
h3.h4{font-size:15px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:22px;align-items:start}
.two>div{min-width:0}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{background:var(--down);border-color:var(--down)}
.btn.small{padding:3px 9px;font-size:12px}
details.sub{border-top:1px solid var(--rule);padding-top:12px}
details.sub>summary{cursor:pointer;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:15px}
details.sub[open]>summary{margin-bottom:12px}

.card>*,.wrap>*,details.sub>*{min-width:0}
.tbl{max-width:100%}
/* upload */
.drop{display:grid;gap:4px;place-items:center;text-align:center;padding:30px 16px;border:2px dashed var(--rule);border-radius:8px;cursor:pointer;background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-soft)}
.drop-big{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-ink)}
.row-inputs{display:flex;gap:16px;flex-wrap:wrap}
.row-inputs label{display:flex;gap:8px;align-items:center;font-size:13px}
.row-inputs input{width:140px}
.msg{border-radius:6px;padding:12px 14px;display:grid;gap:6px;font-size:13.5px}
.msg.err{background:color-mix(in srgb,var(--down) 10%,transparent);border-left:4px solid var(--down)}
.msg.warn{background:var(--warn-soft);border-left:4px solid var(--warn)}
.msg.ok{background:color-mix(in srgb,var(--up) 10%,transparent);border-left:4px solid var(--up)}
.msg ul{margin:0;padding-left:18px}
.sumcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sumcard div{background:var(--bg);border-radius:6px;padding:10px 12px}
.sumcard b{display:block;font-family:var(--display);font-size:20px;font-weight:500}
.sumcard span{font-size:12px;color:var(--muted)}
.progress{height:8px;background:var(--ghost);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);width:0;transition:width .2s}
#check{display:grid;gap:12px}

/* period bar */
.period{position:sticky;top:0;z-index:5;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.period label{display:flex;gap:6px;align-items:center;font-size:13px}
.period input[type=date]{font:inherit;padding:5px 8px;border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tile{padding:10px}}
.tile{border:1px solid var(--rule);border-radius:6px;padding:12px 14px;display:grid;gap:4px;align-content:start;min-width:0}
.tile .lbl{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.tile .val{font-family:var(--display);font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .cmp{font-size:12px;color:var(--muted);display:grid;gap:1px}
.tile .chg{font-weight:700}
.tile.pending .val{color:var(--ghost-ink)}
.conf{font-size:10.5px;font-weight:700;padding:0 6px;border-radius:99px;height:fit-content}
.conf.High{background:color-mix(in srgb,var(--up) 15%,transparent);color:var(--up)}
.conf.Check{background:var(--warn-soft);color:var(--warn)}
.conf.Low{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}
.changed{background:var(--blue-soft);border-radius:6px;padding:12px 16px;display:grid;gap:4px}
.changed h3{font-size:14px;color:var(--blue-ink)}
.changed ul{margin:0;padding-left:18px;display:grid;gap:3px}

/* charts */
.chart-box{display:grid;gap:6px;min-width:0}
.chart{position:relative;height:280px}
.chart.sm{height:220px}

/* tables */
.tbl.scroll{max-height:420px;overflow:auto;border:1px solid var(--rule);border-radius:6px}
.tbl.scroll thead th{position:sticky;top:0;background:var(--card);z-index:1}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th[aria-sort=ascending]::after{content:" ▲";font-size:9px}
.tbl th[aria-sort=descending]::after{content:" ▼";font-size:9px}
.tbl td.txt{text-align:left;white-space:normal;min-width:120px}
.tbl tr.flag td{background:var(--warn-soft)}
.tbl tfoot td{font-weight:700}
.tbl-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.tbl-tools input[type=search]{flex:1 1 220px}
.note-in{width:100%;min-width:160px;font-size:12.5px}
.chg.up{color:var(--up)} .chg.down{color:var(--down)}

/* heat grid */
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px}
.heat div{border-radius:4px;padding:6px 4px;text-align:center;font-size:11px;line-height:1.2;color:var(--ink);border:1px solid var(--rule)}
.heat div b{display:block;font-size:12.5px}

/* health */
.health{display:grid;gap:10px}
.health .big{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.health .grade{font-family:var(--display);font-size:28px;padding:2px 14px;border-radius:6px}
.grade.Good{background:color-mix(in srgb,var(--up) 15%,transparent);color:var(--up)}
.grade.Check{background:var(--warn-soft);color:var(--warn)}
.grade.Poor{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}
.health ul{margin:0;padding-left:18px;display:grid;gap:4px}

/* info popover */
a.info{text-decoration:none;font-family:var(--body);font-size:13px;color:var(--blue-ink);text-transform:none}
.info-dlg{border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink);max-width:min(520px,calc(100vw - 32px));padding:18px 20px}
.info-dlg::backdrop{background:rgba(0,0,0,.35)}
.info-dlg h3{margin-bottom:6px}
.info-dlg dl{display:grid;gap:4px;margin:10px 0 0;font-size:13px}
.info-dlg dt{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.info-dlg dd{margin:0 0 6px}
.info-dlg .btn-row{justify-content:space-between}

/* tutorial */
.tut{display:grid;gap:10px}
.tut details{border:1px solid var(--rule);border-radius:6px;padding:10px 14px}
.tut summary{cursor:pointer;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:16px}
.tut details[open] summary{margin-bottom:10px}
.tut ol,.tut ul{margin:0 0 8px;padding-left:22px;display:grid;gap:5px}
.tut .step{display:grid;gap:4px;border-left:3px solid var(--blue);padding:4px 0 4px 12px;margin-bottom:10px}
.tut .step h4{margin:0;font-size:14px}
.tut .fix{font-size:13px;background:var(--bg);border-radius:4px;padding:6px 10px}
.tut p{margin-bottom:6px}
.tut table td,.tut table th{white-space:normal;text-align:left}

[hidden]{display:none!important}
@media (max-width:560px){.tile .val{font-size:22px}.chart{height:240px}}
@media print{.period,.drop,.row-inputs,details.sub:not([open]){display:none!important}}