/* Small additions on top of Pico. No inline styles anywhere (CSP). */
:root { --pico-font-size: 100%; }
body > header.nav { padding-block: .25rem; border-bottom: 1px solid var(--pico-muted-border-color); }
body > header nav ul:first-child strong a { text-decoration: none; }
main.container { padding-top: 1rem; }
h1 { margin-bottom: .75rem; font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 1.5rem; }
table { font-size: .95rem; }
td.num, th.num { text-align: right; white-space: nowrap; }
.muted { color: var(--pico-muted-color); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.inline { display: inline; margin: 0; }
.inline button, .inline input, .inline select, button.small, a.small[role=button] {
  padding: .2rem .55rem; font-size: .85rem; margin: 0; width: auto;
}
.inline input { display: inline-block; width: auto; max-width: 14rem; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
.flash { padding: .6rem .9rem; border-radius: var(--pico-border-radius); margin-bottom: .6rem; }
.flash.ok { background: #e3f6e8; color: #14532d; }
.flash.warn { background: #fff4d6; color: #713f12; }
.flash.error, .error { background: #fde4e4; color: #7f1d1d; }
p.error, div.error { padding: .5rem .8rem; border-radius: var(--pico-border-radius); }
.warn-box { background: #fff4d6; color: #713f12; padding: .5rem .8rem; border-radius: var(--pico-border-radius); }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 1rem; font-size: .8rem;
  background: var(--pico-muted-border-color); white-space: nowrap; }
.badge.needs_review, .badge.pending, .badge.draft { background: #fff1c2; color: #713f12; }
.badge.confirmed, .badge.paid, .badge.published { background: #d4f3dd; color: #14532d; }
.badge.failed, .badge.rejected, .badge.open { background: #fde4e4; color: #7f1d1d; }
.badge.credit, .badge.incomplete { background: #dbeafe; color: #1e3a8a; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.stats article { margin: 0; text-align: center; }
.stats .big { font-size: 1.8rem; font-weight: bold; display: block; }
tr.inactive td { opacity: .55; }
tr.row-ok td { background: #e8f8ec; }
tr.row-warn td { background: #fff6dc; }
tr.row-bad td { background: #fde9e9; }
.checklist { max-height: 20rem; overflow: auto; border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); padding: .5rem .8rem; }
.checklist label { margin-bottom: .2rem; }
code.link { word-break: break-all; }

/* sheet preview */
.block-preview { max-width: 100%; height: auto; background: #fff; border: 1px dashed #bbb; }
.pv-block { fill: #fff; stroke: #333; stroke-width: .4; }
.pv-col { stroke: #333; stroke-width: .2; }
.pv-box { fill: none; stroke: #999; stroke-width: .1; }
.pv-name { font-family: sans-serif; fill: #111; }
.preview-scroll { overflow-x: auto; }

/* review */
.review { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } }
.overlay { width: 100%; height: auto; display: block; border: 1px solid #ccc; }
.overlay .b { fill: transparent; stroke: rgba(120,120,120,.25); cursor: pointer; }
.overlay .b:hover { stroke: #2563eb; }
.overlay .b.checked { fill: rgba(22,163,74,.18); stroke: #16a34a; }
.overlay .b.uncertain { fill: rgba(250,204,21,.35); stroke: #eab308; }
.overlay .b.heavy { fill: rgba(249,115,22,.3); stroke: #ea580c; }
.overlay .rowlabel { fill: #2563eb; font-family: sans-serif; }
.legend span { margin-right: .8rem; white-space: nowrap; }
.legend i { display: inline-block; width: .9rem; height: .9rem; border: 2px solid; vertical-align: middle; margin-right: .2rem; }
.legend .checked { border-color: #16a34a; background: rgba(22,163,74,.18); }
.legend .uncertain { border-color: #eab308; background: rgba(250,204,21,.35); }
.legend .heavy { border-color: #ea580c; background: rgba(249,115,22,.3); }
.legend .empty { border-color: #aaa; }
.crop { max-width: 100%; max-height: 5rem; border: 1px solid #ccc; background: #fff; }
.row-img { max-width: 100%; border: 1px solid #ccc; }
.debug-imgs img { max-width: 100%; border: 1px solid #ccc; margin-bottom: .5rem; }
.sticky { position: sticky; top: .5rem; }
.scan-actions { margin: .4rem 0 1.5rem; }
.suggestions { margin: .3rem 0; }

/* upload */
#upload-results:empty { display: none; }
.upload-item { padding: .4rem .6rem; border-left: 4px solid #999; margin-bottom: .4rem; background: var(--pico-card-background-color); }
.upload-item.ok { border-color: #16a34a; }
.upload-item.dup { border-color: #eab308; }
.upload-item.err { border-color: #dc2626; }
.progress-text { font-weight: bold; }
article.login { max-width: 26rem; margin: 3rem auto; }