/* reconciliation control panel — design tokens shared by console + (future) report */
/* cross-document page transitions (matches the landing page opt-in) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
:root{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#14171a; --muted:#5b6570; --line:#e4e8ec;
  --accent:#ffd21e; --accent-ink:#4a3b00; --brand:#111418;
  --ok:#1a8f4c; --warn:#c98a00; --bad:#d23b3b; --info:#2b6cb0;
  --run:#2b6cb0; --chip:#eef1f4; --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:8px; --radius-lg:14px; --radius-pill:999px;
}
:root[data-theme=dark],
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0e1113; --panel:#171b1f; --ink:#e7ebee; --muted:#9aa4ad; --line:#262c31;
  --brand:#0b0d0f; --chip:#20262b; --run:#5aa2e6; --info:#5aa2e6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme=dark]{
  --bg:#0e1113; --panel:#171b1f; --ink:#e7ebee; --muted:#9aa4ad; --line:#262c31;
  --brand:#0b0d0f; --chip:#20262b; --run:#5aa2e6; --info:#5aa2e6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 var(--font)}
h2{font-size:15px;margin:0}
a{color:var(--info)}
code{font-family:var(--mono);background:var(--chip);padding:1px 5px;border-radius:5px;font-size:.9em}
.sr,.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px;border-radius:8px;z-index:20}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{border-radius:7px;display:block}
.word strong{font-size:16px;letter-spacing:.2px}
.word .sub{display:block;font-size:12px;color:#aeb6bd}
.top-right{display:flex;align-items:center;gap:10px}
.workpath{font-family:var(--mono);font-size:11px;color:#aeb6bd;max-width:34ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* buttons */
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  padding:6px 12px;border-radius:var(--radius);font-size:13px;cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-quiet{background:transparent;color:#cfd5da;border-color:#39424a}
.btn-run{background:var(--run);color:#fff;border-color:var(--run);padding:5px 14px}
.btn-run[disabled]{background:var(--chip);color:var(--muted);border-color:var(--line)}
.btn-dl{display:inline-block;padding:3px 10px;font-size:12px;font-weight:600;text-decoration:none}

.banner{margin:12px 20px 0;padding:10px 14px;border:1px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:10px;font-size:13px}

/* layout */
.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;padding:18px 20px;align-items:start}
@media(max-width:1080px){.layout{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-head .meta{margin:0;color:var(--muted);font-size:12px}

/* table */
.table-wrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
.grid th,.grid td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.grid th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.grid td.num,.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
.grid tr:last-child td{border-bottom:0}
.grid tr:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pkg-name{font-family:var(--mono);font-size:11.5px;max-width:36ch;display:inline-block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.empty{color:var(--muted);text-align:center;padding:26px}
.disc{font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px}
.disc-ОВ1{background:#e8f0fe;color:#1a4b8f}.disc-ОВ2{background:#fdecef;color:#9f2540}
:root[data-theme=dark] .disc-ОВ1{background:#12314f;color:#9cc4f5}
:root[data-theme=dark] .disc-ОВ2{background:#43212a;color:#f2a9b8}
.report a{margin-right:8px;font-size:12px}
/* file rows: click to open a run, uploaded badge, delete */
.pkg-row.has-run{cursor:pointer}
.pkg-row.has-run:hover td{background:color-mix(in srgb,var(--run) 8%,transparent)}
.pkg-row.active td{background:color-mix(in srgb,var(--run) 14%,transparent)}
.pkg-row.active td:first-child{box-shadow:inset 3px 0 0 var(--run)}
.pkg-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tag-up{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-left:6px;
  padding:1px 6px;border-radius:999px;vertical-align:middle;
  background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}
td.actions{white-space:nowrap}
td.actions .btn{vertical-align:middle}
.btn-del{margin-left:6px;padding:4px 9px;font-size:12px;line-height:1;color:var(--bad);border-color:var(--line)}
.btn-del:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}

/* uploader */
.uploader{padding:14px 16px;border-bottom:1px solid var(--line)}
.drop{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;
  padding:20px 16px;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;text-align:center;
  background:color-mix(in srgb,var(--chip) 35%,transparent);color:var(--ink);
  transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--run)}
.drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drop.dragover{border-color:var(--run);background:color-mix(in srgb,var(--run) 12%,transparent)}
.drop.busy{opacity:.6;pointer-events:none}
.drop .upic{color:var(--run)}
.drop-main{font-weight:700;font-size:13.5px}
.drop-sub{font-size:12px;color:var(--muted)}
.upmsg{margin-top:9px;font-size:12.5px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.upmsg.bad{color:var(--bad)}

/* pills */
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;text-transform:capitalize}
.pill-never,.pill-none{background:var(--chip);color:var(--muted)}
.pill-queued{background:#eef2ff;color:#3949ab}
.pill-running{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-ink)}
.pill-done{background:#e4f6ea;color:var(--ok)}
.pill-incomplete{background:#fdf0d8;color:var(--warn)}
.pill-failed{background:#fbe4e4;color:var(--bad)}
.pill-cancelled{background:var(--chip);color:var(--muted)}
.pill-cached{background:#e7eef7;color:#2f6db0}
:root[data-theme=dark] .pill-cached{background:#16283b;color:#79b0e6}
:root[data-theme=dark] .pill-queued{background:#232a55;color:#aab4ff}
:root[data-theme=dark] .pill-done{background:#123524;color:#7ee0a6}
:root[data-theme=dark] .pill-incomplete{background:#3a2f12;color:#f2c766}
:root[data-theme=dark] .pill-failed{background:#3d1d1d;color:#f2a1a1}

/* run controls */
.job-controls{display:flex;align-items:center;gap:8px}
#job-select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:12px;max-width:30ch}

/* phase strip */
.phases{display:flex;gap:6px;list-style:none;margin:0;padding:14px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.phase{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:var(--chip);color:var(--muted);font-size:12px;font-weight:600}
.phase .dot{width:18px;height:18px;border-radius:50%;background:var(--line);color:var(--muted);
  display:grid;place-items:center;font-size:10px;font-weight:800}
.phase.done{color:var(--ink)}.phase.done .dot{background:var(--ok);color:#fff}
.phase.active{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 30%,transparent)}
.phase.active .dot{background:var(--accent);color:var(--accent-ink);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* evidence cards */
.evidence{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.card{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:color-mix(in srgb,var(--chip) 40%,transparent)}
.card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.kv{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.kv b{font-variant-numeric:tabular-nums}
.mini{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.mini th,.mini td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.mini td.num,.mini th.num{text-align:right;font-variant-numeric:tabular-nums}

/* result summary */
.result{padding:14px 16px;border-top:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:6px 0 14px}
.tile{background:var(--chip);border-radius:11px;padding:10px 12px;text-align:center}
.tile .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.tile .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.tile.good .v{color:var(--ok)}.tile.warn .v{color:var(--warn)}
.findings{width:100%;border-collapse:collapse;font-size:12.5px}
.findings th,.findings td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:left}
.findings td.num,.findings th.num{text-align:right;font-variant-numeric:tabular-nums}
.findings .name{max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px}
.st-exact{background:#e4f6ea;color:var(--ok)}.st-close{background:#eaf2fb;color:var(--info)}
.st-off{background:#fbe4e4;color:var(--bad)}.st-plan-miss{background:#fdf0d8;color:var(--warn)}
.st-no-hits{background:var(--chip);color:var(--muted)}
:root[data-theme=dark] .st-exact{background:#123524;color:#7ee0a6}
:root[data-theme=dark] .st-close{background:#12314f;color:#9cc4f5}
:root[data-theme=dark] .st-off{background:#3d1d1d;color:#f2a1a1}
.shared{color:var(--warn);font-weight:700}
.delta-pos{color:var(--bad)}.delta-neg{color:var(--warn)}.delta-zero{color:var(--ok)}

/* console */
.console-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
  border-top:1px solid var(--line)}
.cmeta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chk{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.console{font-family:var(--mono);font-size:11.5px;line-height:1.55;padding:10px 16px;
  max-height:280px;overflow:auto;background:color-mix(in srgb,var(--brand) 5%,var(--panel));
  border-top:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.console .err{color:var(--bad)}

/* ---- accounts: auth pages, quota, verify banner, toast ---- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:26px;box-shadow:0 12px 44px rgba(0,0,0,.18)}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.auth-brand .word strong{display:block;font-size:15px}
.auth-brand .word .sub{font-size:11px;color:var(--muted)}
.auth-card h1{font-size:19px;margin:0 0 14px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.auth-form input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font-size:14px}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.auth-form .btn-primary{margin-top:4px;padding:10px;font-size:14px;justify-content:center}
.auth-err{background:#fbe4e4;color:var(--bad);border-radius:8px;padding:8px 11px;font-size:13px;margin-bottom:12px}
:root[data-theme=dark] .auth-err{background:#3d1d1d;color:#f2a1a1}
.auth-hint{font-size:12px;color:var(--muted);margin:12px 0 0}
.auth-alt{font-size:13px;margin:15px 0 0;text-align:center}
.quota{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.quota.quota-out{color:var(--bad);border-color:currentColor}
.userchip{font-size:12px;color:#e7eaee;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner-warn{background:#fdf0d8;color:#8a5a00}
:root[data-theme=dark] .banner-warn{background:#2f2512;color:#e8c07a}
.inline-form{display:inline}
.linkbtn{background:none;border:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1f2530;color:#fff;
  padding:11px 16px;border-radius:9px;font-size:13px;box-shadow:0 10px 34px rgba(0,0,0,.32);opacity:0;
  transition:opacity .25s,transform .25s;z-index:100;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- responsive: control panel on tablets & phones ---- */
/* the header never overflows now — it wraps when the buttons don't fit */
.topbar{flex-wrap:wrap}
.top-right{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){
  .topbar{gap:10px;padding:10px 14px}
  .brand .sub{display:none}                 /* drop the tagline on small screens */
  .top-right{width:100%;gap:8px}            /* the controls get their own row, right-aligned */
  .userchip{max-width:40vw}
  .layout{padding:14px;gap:14px}
  .panel-head{flex-wrap:wrap}
  .job-controls{flex-wrap:wrap;justify-content:flex-end}
  #job-select{max-width:100%;flex:1 1 150px}
  .evidence .card{overflow-x:auto}          /* keep mini evidence tables from spilling */
}
@media (max-width:560px){
  /* slim the packages table: hide Section / Revision / Size, keep the essentials */
  .grid th:nth-child(3),.grid td:nth-child(3),
  .grid th:nth-child(4),.grid td:nth-child(4),
  .grid th:nth-child(5),.grid td:nth-child(5){display:none}
  .pkg-name{max-width:44vw}
  .layout{padding:12px}
  .topbar .btn{padding:6px 10px;font-size:12px}
  .console{max-height:220px}
}