/* Afyacall Roadmap Tracker.
   Palette, type and layout carried over unchanged from the reference single-page
   version, so the hosted tracker looks like the one people were already shown.
   Everything after the "added for the hosted version" marker is new: the sign-in
   gate, the My items view, the admin tables and the read-only affordances. */

:root{
  --paper:#F1F4F1; --surface:#FFFFFF; --surface-2:#F7F9F7;
  --ink:#121A17; --ink-2:#3C4A44; --muted:#66746D; --line:#DDE4DE; --line-2:#EAEFEA;
  --accent:#0B6A55; --accent-ink:#FFFFFF; --accent-soft:#E2EFE9;
  --critical:#A32E24; --critical-bg:#F8E7E4;
  --high:#A9680A; --high-bg:#FAEEDC;
  --medium:#3B6A82; --medium-bg:#E4EEF4;
  --low:#4F7548; --low-bg:#E8F0E5;
  --done:#2C7A5A; --done-bg:#E2F0EA;
  --shadow:0 1px 2px rgba(18,26,23,.06), 0 8px 24px rgba(18,26,23,.06);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1412; --surface:#161E1B; --surface-2:#1C2522;
    --ink:#E8EEEA; --ink-2:#BFCCC6; --muted:#8FA099; --line:#2A3531; --line-2:#222C29;
    --accent:#4FC0A2; --accent-ink:#06211B; --accent-soft:#16302A;
    --critical:#F0918A; --critical-bg:#33201E;
    --high:#E5AE5C; --high-bg:#33281A;
    --medium:#8FB9CE; --medium-bg:#1C2B33;
    --low:#9CC08F; --low-bg:#202D1F;
    --done:#6FC69F; --done-bg:#16302A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1412; --surface:#161E1B; --surface-2:#1C2522;
  --ink:#E8EEEA; --ink-2:#BFCCC6; --muted:#8FA099; --line:#2A3531; --line-2:#222C29;
  --accent:#4FC0A2; --accent-ink:#06211B; --accent-soft:#16302A;
  --critical:#F0918A; --critical-bg:#33201E;
  --high:#E5AE5C; --high-bg:#33281A;
  --medium:#8FB9CE; --medium-bg:#1C2B33;
  --low:#9CC08F; --low-bg:#202D1F;
  --done:#6FC69F; --done-bg:#16302A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
/* The user-agent's `[hidden]{display:none}` is a bare attribute selector, so ANY class
   rule here that sets `display` silently outranks it and the element stays on screen.
   That is what put the sign-in and password gates on top of each other, and the search
   filters on the Admin tab. Settle it once, the way normalize.css does, rather than
   remembering to add `.thing[hidden]` beside every new `display:` rule. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif; font-weight:700; letter-spacing:-.015em; text-wrap:balance; margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

.wrap{max-width:1160px; margin:0 auto; padding-inline:16px}

header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--surface); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:12px}
.brand{display:flex; align-items:center; gap:13px; margin-right:auto; min-width:0}
.brand-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.brand h1{font-size:19px}
.brand .sub{font-size:12px; color:var(--muted)}

/* The logo ships in two files rather than one recoloured by a filter: the teal half of
   the wordmark disappears on the dark ground, and a filter that lifts it would also
   blow out the lime. Which file shows is decided by the same three-state rule as the
   colour tokens — system dark, explicit dark, explicit light — because an <img src>
   cannot be swapped by CSS and <picture> only honours prefers-color-scheme, missing
   the in-page theme toggle entirely. */
.logo-wrap{display:block; flex:0 0 auto; line-height:0}
.logo{display:block; width:auto; height:30px}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
.top-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn{border:1px solid var(--line); background:var(--surface); padding:7px 13px; border-radius:8px; cursor:pointer; font-weight:500; transition:background .15s, border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--critical); border-color:var(--critical)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.small{padding:4px 9px; font-size:12.5px}

nav.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{border:0; background:none; padding:10px 12px; cursor:pointer; color:var(--muted); font-weight:600; font-size:13px; white-space:nowrap; border-bottom:2px solid transparent}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

main{padding-block:18px 64px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin-bottom:16px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.kpi .v{font-family:"Bricolage Grotesque",sans-serif; font-size:26px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi .k{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.kpi.alarm .v{color:var(--critical)}

.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.filters input[type=search], .filters select{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px}
.filters input[type=search]{flex:1 1 200px; min-width:140px}
.chip-count{font-size:12px; color:var(--muted); margin-left:auto}

.qgroup{margin-bottom:22px}
.qhead{display:flex; align-items:baseline; gap:10px; margin-bottom:8px}
.qhead h2{font-size:15px}
.qhead .meta{font-size:12px; color:var(--muted)}
.rows{display:flex; flex-direction:column; gap:6px}
.row{display:grid; grid-template-columns:52px minmax(0,1fr) 128px 108px 132px; gap:12px; align-items:center;
     background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line);
     border-radius:var(--radius); padding:10px 12px; text-align:left; cursor:pointer; width:100%; font:inherit; color:inherit}
.row:hover{border-color:var(--accent); background:var(--surface-2)}
.row.b-critical{border-left-color:var(--critical)}
.row.b-high{border-left-color:var(--high)}
.row.b-medium{border-left-color:var(--medium)}
.row.b-low{border-left-color:var(--low)}
.row.is-done{opacity:.72}
.score{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.b-critical .score{color:var(--critical)} .b-high .score{color:var(--high)}
.b-medium .score{color:var(--medium)} .b-low .score{color:var(--low)}
.title{font-weight:500; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical}
.subline{font-size:11.5px; color:var(--muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.owner{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dates{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:999px; white-space:nowrap}
.st-DONE{background:var(--done-bg); color:var(--done)}
.st-INPROGRESS{background:var(--accent-soft); color:var(--accent)}
.st-PENDING{background:var(--high-bg); color:var(--high)}
.st-TBD{background:var(--critical-bg); color:var(--critical)}
.tag{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--muted)}
.tag.rev{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft)}
.tag.par{color:var(--medium); border-color:var(--medium-bg); background:var(--medium-bg)}
.tag.cx{color:var(--low); border-color:var(--low-bg); background:var(--low-bg)}
.tag.prop{color:var(--muted); border-style:dashed}
.tag.mine{color:var(--accent); border-color:var(--accent); background:transparent}
.flagdot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--critical)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px}
.panel h2{font-size:15px; margin-bottom:2px}
.panel .lede{font-size:12.5px; color:var(--muted); margin-bottom:12px; margin-top:0}
.meter-row{display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(0,3fr) 44px 58px; gap:10px; align-items:center; padding:5px 0; border-top:1px solid var(--line-2)}
.meter-row:first-of-type{border-top:0}
.meter-row .lbl{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meter{height:12px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.meter span{display:block; height:100%; background:var(--accent); border-radius:0 4px 4px 0}
.meter span.t-critical{background:var(--critical)}
.meter span.t-high{background:var(--high)}
.meter-row .n{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-variant-numeric:tabular-nums}
.meter-row .hp{text-align:right; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.scroller{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
table.data th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line)}
table.data td{padding:7px 8px; border-bottom:1px solid var(--line-2); vertical-align:top}
table.data td.n, table.data th.n{text-align:right; font-variant-numeric:tabular-nums}
.alert-group{margin-bottom:16px}
.alert-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.alert-head h3{font-size:13.5px; font-family:"Bricolage Grotesque",sans-serif}
.count-badge{font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--critical-bg); color:var(--critical)}
.count-badge.ok{background:var(--done-bg); color:var(--done)}
.empty{color:var(--muted); font-size:13px; padding:12px 0; margin:0}
.empty.lede-tight{padding:0 0 8px}
.empty.lede-tighter{padding:0 0 6px}

.scrim{position:fixed; inset:0; background:rgba(10,18,15,.38); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(460px,100%); background:var(--surface); border-left:1px solid var(--line);
        z-index:50; transform:translateX(102%); transition:transform .2s ease; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; gap:10px; padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top,0px)); border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:15px; margin-right:auto}
.drawer-body{overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; flex:1}
.drawer-foot{display:flex; gap:8px; align-items:center; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line)}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
.field input, .field select, .field textarea{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%}
.field textarea{resize:vertical; min-height:66px}
.field input:disabled, .field select:disabled, .field textarea:disabled{opacity:.72; cursor:not-allowed}
#f_item{min-height:96px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.scorebox{display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px}
.scorebox .big{font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.scorebox .big.c-critical{color:var(--critical)} .scorebox .big.c-high{color:var(--high)}
.scorebox .big.c-medium{color:var(--medium)} .scorebox .big.c-low{color:var(--low)}
.scorebox .expl{font-size:11.5px; color:var(--muted)}
.lenschips{display:flex; gap:8px; flex-wrap:wrap}
.lenschip{border:1px solid var(--line); background:var(--surface-2); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:12.5px; font-weight:500}
.lenschip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600}
.lenschip:disabled{opacity:.6; cursor:not-allowed}
.flaglist{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--critical)}
.notice{background:var(--high-bg); color:var(--high); border-radius:8px; padding:8px 12px; font-size:12.5px; font-weight:500}
.notice.good{background:var(--done-bg); color:var(--done)}
.savestate{font-size:12px; color:var(--muted); margin-left:auto}

/* ---------- added for the hosted version ---------- */

.gate{position:fixed; inset:0; z-index:60; background:var(--paper); display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto}
.gate-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
           padding:26px 24px; width:min(380px,100%); display:flex; flex-direction:column; gap:14px}
.gate-brand h1{font-size:22px; margin-top:12px}
.gate-brand p{font-size:12.5px; color:var(--muted); margin:4px 0 0}
.gate-brand .logo{height:38px}
.gate-msg{background:var(--critical-bg); color:var(--critical); border-radius:8px; padding:8px 12px; font-size:12.5px; font-weight:500; margin:0}
.gate-foot{font-size:11.5px; color:var(--muted); margin:0; text-align:center}
.btn.wide{width:100%; text-align:center; padding-block:9px}

.whoami{font-size:12px; color:var(--muted); white-space:nowrap}
.whoami strong{color:var(--ink-2); font-weight:600}

.mine-head{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:10px}
.readonly-note{font-size:12px; color:var(--muted)}

.userrow-actions{display:flex; gap:6px; flex-wrap:wrap}
.pwout{font-family:"IBM Plex Mono",monospace; background:var(--accent-soft); color:var(--accent); padding:2px 6px; border-radius:4px; user-select:all}
.logfilters{display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:12px}
.logfilters .field{gap:4px}
.logfilters input, .logfilters select{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:6px 9px}
.delta{font-size:12px}
.delta .was{color:var(--muted); text-decoration:line-through}
.delta .now{color:var(--ink)}

@media (max-width:860px){
  .row{grid-template-columns:44px minmax(0,1fr) 96px; row-gap:6px}
  .row .dates{grid-column:2 / -1; order:5}
  .row .owner{grid-column:2 / span 1}
  .meter-row{grid-template-columns:minmax(90px,1fr) minmax(0,2fr) 40px 50px}
  .grid3{grid-template-columns:1fr 1fr}
  .brand{gap:10px}
  .brand h1{font-size:17px}
  .brand .logo{height:25px}
  .whoami{width:100%; order:5}
}
@media (prefers-reduced-motion: reduce){
  .drawer, .scrim{transition:none}
}