/* Athena: the three-screen shell (Home · App · Settings). Layout and the light theme live here; the component
   styles the modules rely on are in legacy.css. Colour law: red = hostile traffic, amber = a decision, green =
   verified, grey = not yet known. Tokens are the mockup's names so every module keeps working. */

/* ---------- light theme: the same tokens, re-valued. System preference by default; the toggle pins one. ---------- */
:root{color-scheme:dark}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#f7f7f5;--raised:#ffffff;--elev:#f1f1ee;--elev-2:#e8e8e4;--line:rgba(20,20,24,.08);--line-2:rgba(20,20,24,.12);--line-strong:rgba(20,20,24,.2);
    --t1:#17181c;--t2:#5f6470;--t3:#8a8f98;--accent:#4f5bc9;--accent-hover:#3f4bb8;--accent-dim:rgba(79,91,201,.12);--success:#1f8f3b;--success-dim:rgba(31,143,59,.12);
    --danger:#d8363a;--danger-dim:rgba(216,54,58,.1);--warn:#b4790f;--warn-dim:rgba(180,121,15,.12);color-scheme:light}
}
:root[data-theme="light"]{--bg:#f7f7f5;--raised:#ffffff;--elev:#f1f1ee;--elev-2:#e8e8e4;--line:rgba(20,20,24,.08);--line-2:rgba(20,20,24,.12);--line-strong:rgba(20,20,24,.2);
  --t1:#17181c;--t2:#5f6470;--t3:#8a8f98;--accent:#4f5bc9;--accent-hover:#3f4bb8;--accent-dim:rgba(79,91,201,.12);--success:#1f8f3b;--success-dim:rgba(31,143,59,.12);
  --danger:#d8363a;--danger-dim:rgba(216,54,58,.1);--warn:#b4790f;--warn-dim:rgba(180,121,15,.12);color-scheme:light}
/* the picture's own tokens follow the theme (picture.css hard-codes the dark hairlines) */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .pc{--ink-2:#3d414a;--line:rgba(20,20,24,.1);--line-2:rgba(20,20,24,.07);--line-strong:rgba(20,20,24,.26);--hair:rgba(20,20,24,.08);--hair-2:rgba(20,20,24,.18);
  --accent:#2f9a73;--good:#1f8f3b;--warn:#b4790f;--person:#3f5fd0;--ctip-mute:rgba(255,255,255,.7);--shadow-pop:0 1px 2px rgba(0,0,0,.08),0 12px 32px -16px rgba(0,0,0,.25)} }
:root[data-theme="light"] .pc{--ink-2:#3d414a;--line:rgba(20,20,24,.1);--line-2:rgba(20,20,24,.07);--line-strong:rgba(20,20,24,.26);--hair:rgba(20,20,24,.08);--hair-2:rgba(20,20,24,.18);
  --accent:#2f9a73;--good:#1f8f3b;--warn:#b4790f;--person:#3f5fd0;--ctip-mute:rgba(255,255,255,.7);--shadow-pop:0 1px 2px rgba(0,0,0,.08),0 12px 32px -16px rgba(0,0,0,.25)}
html,body{background:var(--bg);color:var(--t1)}
body{overflow-x:hidden}
.home-grid>*,.ap-pane,.st-body{min-width:0}

/* ---------- the shell: one bar on top, the screen below. No sidebar, no safety strip, no bell. ---------- */
.app{display:block;min-height:100vh;grid-template-columns:none}
.sh-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:52px;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px)}
.sh-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--t1);text-decoration:none}
.sh-brand .brand-mark{width:24px;height:24px;border-radius:6px}
.sh-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.sh-nav button{font:inherit;font-size:13px;font-weight:500;color:var(--t2);background:none;border:0;padding:7px 11px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.sh-nav button:hover{color:var(--t1);background:var(--elev)}
.sh-nav button[aria-current="page"]{color:var(--t1);background:var(--accent-dim)}
.sh-nav .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-family:var(--mono);font-size:10.5px;line-height:18px;text-align:center;background:var(--warn-dim);color:var(--warn)}
.sh-nav .n:empty{display:none}
.sh-sp{flex:1}
.sh-right{display:flex;align-items:center;gap:6px}
.sh-theme{width:32px;height:32px;border-radius:7px;color:var(--t2);display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;cursor:pointer}
.sh-theme:hover{background:var(--elev);color:var(--t1);border-color:var(--line)}
.sh-theme .sun{display:none} :root[data-theme="dark"] .sh-theme .sun{display:block} :root[data-theme="dark"] .sh-theme .moon{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sh-theme .sun{display:block} :root:not([data-theme="light"]) .sh-theme .moon{display:none} }
.sh-user{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px;border-radius:var(--r-md);font-size:12.5px;color:var(--t2)}
.sh-user .avatar{width:26px;height:26px;border-radius:7px;font-size:11px}
.sh-user .nm{color:var(--t1);font-weight:500}
.sh-out{font:inherit;font-size:12px;color:var(--t3);background:none;border:0;padding:4px 6px;border-radius:var(--r-sm);cursor:pointer}
.sh-out:hover{color:var(--t1);background:var(--elev)}
.content{max-width:var(--maxw);margin:0 auto;padding:22px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
.screen{display:none;animation:fadeUp .35s var(--ease) both}
.screen.on{display:block}
.screen .view{display:block}   /* a legacy module view inside a screen is shown by its screen, not by its own class */
.screen .view[hidden]{display:none}
#view-war,#view-targets{display:none}

/* ---------- Home: the picture's sentence, the picture, the Needs-you column, one line per app ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:0 28px;align-items:start}
.home-pic{min-width:0}
.home-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:66px}
.pc .pc-top{min-height:0;padding-bottom:0}
.pc .pc-head .sentence{font-size:24px;min-height:0;margin-bottom:6px}
.needs{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);overflow:hidden}
.needs.has{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.needs-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:11px 14px 9px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.needs.has .needs-h{color:var(--warn)}
.needs-h .n{font-family:var(--mono);font-weight:500;letter-spacing:0;text-transform:none}
.needs ol{list-style:none;margin:0;padding:0}
.needs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.needs li:first-child{border-top:0}
.needs .t{font-size:13.5px;line-height:1.4;color:var(--t1)}
.needs .s{grid-column:1;font-size:11.5px;color:var(--t3);font-family:var(--mono)}
.needs .why{grid-column:2;grid-row:1/span 2;font-size:11.5px;color:var(--t3);text-align:right;max-width:140px;line-height:1.35}
.needs .why button{font:inherit;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.needs .empty{padding:14px;font-size:13px;color:var(--t2);line-height:1.5}
.btn.decide{grid-column:2;grid-row:1/span 2;padding:6px 12px;font-size:12.5px;color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-dim)}
.btn.decide:hover{color:var(--t1);border-color:var(--warn)}
.btn.decide[disabled]{opacity:.55;cursor:progress}
.btn.undo{grid-column:2;grid-row:1/span 2;padding:6px 12px;font-size:12.5px}
.apps{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);overflow:hidden}
.apps-h{display:flex;align-items:center;gap:8px;padding:11px 14px 9px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.apps-h .sp{flex:1}
.apps-h .add{font:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.apps-h .add:hover{color:var(--accent-hover)}
.apps ol{list-style:none;margin:0;padding:0}
.apps li{border-top:1px solid var(--line)} .apps li:first-child{border-top:0}
.apps button.app-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:3px 10px;align-items:center;width:100%;text-align:left;padding:10px 14px;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.apps button.app-row:hover{background:var(--elev)}
.apps .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);grid-row:1/span 2}
.apps .dot.needs{background:var(--warn)} .apps .dot.attack{background:var(--danger)} .apps .dot.good{background:var(--success)}
.apps .nm{grid-column:2;grid-row:1;font-size:13.5px;font-weight:500;color:var(--t1)}
.apps .ln{grid-column:2;font-size:12px;color:var(--t2)}
.apps .dec{grid-column:3;grid-row:1/span 2;font-family:var(--mono);font-size:11px;color:var(--warn);white-space:nowrap}
.apps .dec:empty{display:none}
.apps .empty{padding:14px;font-size:13px;color:var(--t2);line-height:1.5}
.home-foot{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:12px;color:var(--t3)}
.home-foot .sp{flex:1}
.home-showpic{display:none}
.home-pic .home-showpic{margin-bottom:0}
@media (max-width: 980px){
  .home-grid{grid-template-columns:1fr}
  .home-side{position:static}
  .home-pic{display:flex;flex-direction:column;margin-bottom:18px}
  .home-pic .home-showpic{align-self:flex-start;margin-top:4px}
  .needs li{grid-template-columns:minmax(0,1fr) auto} .needs .why{max-width:120px}
  .home-pic .pc .pc-head .strip{display:none}
  .home-pic .pc .pc-top{min-height:0;padding:0 0 6px;height:auto}   /* the Now · Checkup · Practice run control stays on phones (round 9) */
  .home-tail{grid-column:1/-1}                                   /* the picture and its log, folded under the apps */
  .home-tail .stage,.home-tail .transport{display:none}
  .home-tail.show .stage{display:flex;flex-direction:column;height:auto!important;gap:16px}
  .home-tail.show .transport{display:flex}
  .home-tail .log{border-left:0;padding-left:0}
  .home-tail .log ol{max-height:320px;overflow-y:auto}        /* scrolls, pinned to the latest row (R31) */
  .home-tail .home-showpic{display:inline-flex;margin:4px 0 12px}
  .home-tail .pic{position:relative}
  .home-pic .pc .pc-head{position:static;box-shadow:none}
  .home-pic .pc .sentence{font-size:19px}
  .home-showpic{display:inline-flex}
}

/* ---------- App page: the project band, four tabs ---------- */
.ap-band{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px;margin-bottom:14px}
.ap-back{font:inherit;font-size:12.5px;color:var(--t3);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin-bottom:8px}
.ap-back:hover{color:var(--t1)}
.ap-title{font-size:22px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-title .pj-chip{font-weight:500}
.ap-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--t2);margin-top:6px}
.ap-meta .mono{color:var(--t1);font-size:12px}
.ap-rules{font-size:12.5px;color:var(--t3);margin-top:4px}
.ap-acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.ap-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 18px}
.ap-tabs button{font:inherit;font-size:13.5px;font-weight:500;color:var(--t2);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 12px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.ap-tabs button:hover{color:var(--t1)}
.ap-tabs button[aria-selected="true"]{color:var(--t1);border-bottom-color:var(--t1)}
.ap-tabs .n{font-family:var(--mono);font-size:11px;color:var(--t3)}
.ap-tabs button[aria-selected="true"] .n{color:var(--t2)}
.ap-pane{display:none} .ap-pane.on{display:block}
.ap-pane .view-head{display:none}       /* the band already says which app this is */
.ap-pane .df-seg,.ap-pane .as-seg,.ap-pane .st-seg{display:none}   /* project pickers inside a scoped module: the App page is the scope */
.ap-sent{font-size:16px;line-height:1.45;color:var(--t1);margin:0 0 16px;max-width:70ch}
.ap-sent .pc-num{border-bottom:1.5px solid var(--line-strong);cursor:help}
.pl-group{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);overflow:hidden;margin-bottom:16px}
.pl-h{display:flex;align-items:baseline;gap:8px;padding:11px 14px 9px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.pl-h .n{font-family:var(--mono);font-weight:500;letter-spacing:0;text-transform:none}
.pl-h.ready{color:var(--accent)}
.pl-h.person{color:var(--warn)}
.pl-group ol{list-style:none;margin:0;padding:0}
.pl-group li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.pl-group li:first-child{border-top:0}
.pl-group .sd{grid-row:1/span 2}
.pl-group .t{font-size:13.5px;color:var(--t1)}
.pl-group .t button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.pl-group .t button:hover{color:var(--accent-hover)}
.pl-group .s{grid-column:2;font-size:11.5px;color:var(--t3);font-family:var(--mono)}
.pl-group .act{grid-column:3;grid-row:1/span 2;display:flex;gap:6px;align-items:center}
.pl-group .how{font:inherit;font-size:12px;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.pl-group .how:hover{color:var(--t1)}
.pl-group .empty{padding:14px;font-size:13px;color:var(--t2);line-height:1.5}
.pl-run{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);margin-bottom:16px;font-size:13px;color:var(--t2)}
.pl-run .bar{flex:1;height:4px;border-radius:2px;background:var(--elev-2);overflow:hidden}
.pl-run .bar i{display:block;height:100%;background:var(--accent);transition:width .6s var(--ease)}
.pl-run b{color:var(--t1);font-weight:500}
.pl-more{margin:4px 0 16px}
.pl-more summary{cursor:pointer;font-size:12.5px;color:var(--t3);list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.pl-more summary::-webkit-details-marker{display:none}
.pl-more summary:hover{color:var(--t1)}
.pl-more[open] summary{margin-bottom:10px}
.ap-note{font-size:12.5px;color:var(--t3);line-height:1.5;margin:0 0 14px;max-width:70ch}

/* Live tab: the scoped picture above the detections */
.live-pic{margin-bottom:18px}
.live-pic .pc .pc-head .sentence{font-size:20px;min-height:0}
.live-pic:not(:empty) ~ #view-defense .df-sent{display:none}   /* one sentence per screen: the picture's (R4); the module's lead stays when there is no picture */
.live-pic .pc .pc-top{display:none}

/* ---------- Settings: sections with anchors; the modules render inside ---------- */
.st-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 32px;align-items:start}
.st-toc{position:sticky;top:66px;display:flex;flex-direction:column;gap:2px}
.st-toc a{font-size:13px;color:var(--t2);text-decoration:none;padding:6px 8px;border-radius:var(--r-sm)}
.st-toc a:hover{color:var(--t1);background:var(--elev)}
.st-toc a.on{color:var(--t1);background:var(--accent-dim)}
.st-sec{padding:4px 0 26px;scroll-margin-top:70px}
.st-sec h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:center;gap:12px}
.st-sec h2 .sh-out{display:inline-block;margin-left:auto;font-size:12px;font-weight:400}
.st-sec .sub{font-size:13px;color:var(--t2);margin:0 0 14px;line-height:1.5;max-width:70ch}
.st-sec .view-head{display:none}
@media (max-width: 820px){ .st-grid{grid-template-columns:1fr} .st-toc{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:10px} }

/* ---------- Add an app: the wizard, kept until the two-step rewrite lands ---------- */
#view-onboard .view-head{display:block}

/* ---------- small screens ---------- */
@media (max-width: 720px){
  .sh-bar{gap:6px;min-width:0} .sh-brand .brand-name{display:none} .sh-nav{margin-left:0;min-width:0} .sh-nav button{padding:7px 8px;font-size:12.5px}
  .sh-right{flex-shrink:0;gap:2px} .sh-user{padding:4px} .sh-user .nm,.sh-user .org{display:none} .sh-out{display:none}
  .content{padding-top:14px}
  .pc .pc-head .sentence{font-size:19px}
  .ap-acts{margin-left:0;width:100%}
}
@media (prefers-reduced-motion: reduce){ .screen{animation:none} }

/* a Needs-you row the picture pointed at */
.needs li.flash{animation:needsFlash 1.6s var(--ease) both}
@keyframes needsFlash{0%{background:var(--warn-dim)}100%{background:transparent}}

/* ---------- round 1 of the blind critics (2026-10-29) ---------- */
.ap-title .pj-chip.mode{background:var(--elev);color:var(--t2);border:1px solid var(--line-2)}
.ap-title .pj-chip.mode .pj-dot{display:none}
.sd.high{background:var(--t1)} .sd.med{background:var(--t3)} .sd.low{background:var(--line-strong)}   /* red is hostile traffic only */
.needs.has{border-color:var(--line)}
.needs.has .needs-h{color:var(--t2)}
.needs .needs-h .n{color:var(--warn)}
.needs .needs-h .split{flex-basis:100%;margin-left:0;margin-top:2px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--t3)}
.needs .why{color:var(--t3)}
.needs .why button{border-bottom:0;color:var(--t2)}
.needs .why button:hover{color:var(--t1);text-decoration:underline}
.needs .t button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.needs .t button:hover{text-decoration:underline}
.needs .cons{grid-column:1/-1;grid-row:4;font-size:11.5px;color:var(--t3);text-align:left;line-height:1.4}
.needs li{grid-template-rows:auto auto auto}
.needs li .btn.decide,.needs li .btn.undo,.needs li .why{grid-row:1/span 3}
.toast-wrap{left:auto;right:16px;bottom:16px;transform:none;align-items:flex-end;width:auto;max-width:380px}
.home-pic .pc .log{flex:0 0 380px}
.home-pic .pc .lnk{display:none}                       /* "Open on a TV" lives in the account menu */
.sh-crumb{font-size:13px;color:var(--t2);display:inline-flex;align-items:center;gap:6px}
.sh-crumb:empty{display:none}
.sh-crumb .sep{color:var(--t3)}
.sh-user{cursor:pointer;border:1px solid transparent}
.sh-user:hover{background:var(--elev);border-color:var(--line)}
.sh-menu[hidden]{display:none}
.sh-menu{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:50px;z-index:60;min-width:180px;background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:0 12px 32px -16px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column}
.sh-menu a,.sh-menu button{font:inherit;font-size:13px;color:var(--t1);text-decoration:none;background:none;border:0;text-align:left;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.sh-menu a:hover,.sh-menu button:hover{background:var(--elev)}
.sh-menu .who{font-size:12px;color:var(--t3);padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sh-out{display:none}
@media (max-width: 720px){ .apps .dec{display:none} }

/* ---------- round 2 of the blind critics (2026-10-29) ---------- */
.needs .t,.pl-group .t,.apps .nm{overflow-wrap:break-word;min-width:0}   /* long package names wrap inside the column */
.needs .t button,.pl-group .t button{display:block;width:100%;overflow-wrap:break-word}
.needs .s,.apps .ln,.pl-group .s,.needs .cons{font-family:var(--font);font-size:12px}   /* mono only for addresses, hosts and keys */
.needs .why{border:0;padding:0;background:none}
.needs li.wait .t button,.needs li.attn .t button{color:var(--t1)}
.needs li.wait .why button,.needs li.attn .why span{color:var(--t3)}
.ap-back{display:none}                                                    /* the crumb in the bar is the way back */
.needs,.apps,.pl-group,.pl-run{border-color:var(--line-2)}                /* card edges readable in dark */
.pc .bug b[data-pc="bugnum"],.pc .bug b{font-size:17px}                   /* the sentence leads; the score line follows */
.pc .pc-head .sentence{margin-bottom:2px}
.needs .decide{font-weight:500}
.sh-add{padding:6px 11px;font-size:12.5px;margin-right:4px}
.sh-nav .sh-crumb{margin:0 2px}
.needs .ev{grid-column:1;font-size:12px;color:var(--t2);line-height:1.4}
.needs li{grid-template-rows:auto auto auto auto}
.needs li .btn.decide,.needs li .btn.undo,.needs li .why{grid-row:1/span 3;align-self:center}
.needs .cons{grid-row:4}
.home-side{position:static}                                  /* the column scrolls with the page; nothing is cut off */
@media (max-width: 720px){ .btn.decide,.btn.undo,.needs .why button,.pl-group .act .btn,.pl-group .how,.apps button.app-row,.sh-add{min-height:44px} .sh-add{padding:6px 9px} }
.pl-group li.grp{grid-template-rows:auto auto auto auto}
.pl-group li.grp .act{grid-row:1/span 2}
.pl-group li.grp .cons{grid-column:2;grid-row:3}
.pl-items{grid-column:2;grid-row:4;margin-top:4px}
.pl-items summary{cursor:pointer;font-size:12px;color:var(--t3);list-style:none}
.pl-items summary::-webkit-details-marker{display:none}
.pl-items ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pl-items li button{font:inherit;font-size:12.5px;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.pl-items li button:hover{color:var(--t1);text-decoration:underline}

/* ---------- round 3 of the blind critics (2026-10-29) ---------- */
@media (max-width: 720px){
  .sh-crumb{display:none}                                   /* on a phone the bar is Home · Settings; the screen itself says where you are */
  .sh-add .lbl{display:none} .sh-add{padding:6px 10px;min-width:36px;justify-content:center}   /* a compact + on phones */
  .pl-group li{grid-template-columns:8px minmax(0,1fr)}     /* the decision button sits under the text, full width */
  .pl-group li .act{grid-column:1/-1;grid-row:auto;justify-content:stretch}
  .pl-group li .act .btn{flex:1;justify-content:center}
  .pl-group li .sd{grid-row:1}
  .pl-group li.grp .cons,.pl-items{grid-column:1/-1}
  .pl-group li.grp>*{grid-column:1/-1;grid-row:auto} .pl-group li.grp .sd{grid-column:1;grid-row:1} .pl-group li.grp .t{grid-column:2;grid-row:1} .pl-group li.grp .act{grid-row:auto}
}
.sh-settings{font:inherit;font-size:13px;font-weight:500;color:var(--t2);background:none;border:0;padding:7px 11px;border-radius:var(--r-sm);cursor:pointer}
.sh-settings:hover{color:var(--t1);background:var(--elev)}
.sh-settings[aria-current="page"]{color:var(--t1);background:var(--accent-dim)}
.pl-group .how{border:0;padding:0;background:none}                 /* a link is a link */
.pl-group .act .how{border-bottom:1px solid var(--line-strong)}
@media (max-width: 720px){ .home-foot #homeStamp{display:block;font-size:12px;line-height:1.4;margin-top:6px} }   /* the tonight line and the as-of stamp stay on phones */
#stBack .ap-back{display:inline-flex;margin-bottom:10px}
.needs .cons .lnk{font:inherit;font-size:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.needs .cons .lnk:hover{text-decoration:underline}
.sh-add .plus{display:none;font-size:18px;line-height:1}
@media (max-width: 720px){ .sh-add .plus{display:inline} }
.pl-h.person{color:var(--t2)}                                      /* a problem is not a decision: no amber */
.pl-group .act .how{border:0;background:none;padding:0;display:inline;white-space:nowrap}
.pl-group .act{background:none;border:0}
.needs li.fold{display:block;padding:0}
.needs-fold>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;color:var(--t2)}
.needs-fold>summary::-webkit-details-marker{display:none}
.needs-fold>summary:hover{color:var(--t1)}
.needs-fold[open]>summary{border-bottom:1px solid var(--line)}
.needs-fold ol{list-style:none;margin:0;padding:0}
.needs-fold li{border-top:1px solid var(--line)} .needs-fold li:first-child{border-top:0}
.look-row{grid-column:1/-1;grid-row:5}
.needs li{grid-template-rows:auto auto auto auto auto}
.lnk.look{font:inherit;font-size:12px;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.lnk.look:hover{color:var(--t1)}
.pl-group li.grp .look-row{grid-column:1/-1;grid-row:auto}
.btn.decide.failed{color:var(--danger);border-color:var(--danger)}
/* practice run on a phone: say so where the sentence is, and keep the control to leave it */
.home-pic .pc.drill .pc-head::before{content:"PRACTICE RUN — made-up data on an example app, not yours. Nothing here is real.";display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--t1);background:var(--elev);border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:8px 12px;margin:0 0 10px}
@media (max-width: 980px){ .home-pic .pc.drill .pc-top{display:flex} }

/* ---------- QA round (2026-10-29 late): sign-in form styles (were injected by the retired build), Live instances, drawer ---------- */
.ad-login{display:flex;flex-direction:column}
.ad-l{font-size:12px;color:var(--t2);margin:0 0 6px}
.ad-in{width:100%;margin-bottom:14px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg);color:var(--t1);font:inherit;font-size:13.5px;outline:none;transition:border-color .16s}
.ad-in:focus{border-color:var(--accent)}
.ad-err{min-height:18px;margin:-4px 0 10px;font-size:12px;color:var(--danger)}
.ad-or{text-align:center;font-size:12px;color:var(--t3);margin:12px 0}
.sso-btn[disabled]{opacity:.6;cursor:progress}
.ad-login.secondary .sso-btn{background:var(--elev);color:var(--t1);box-shadow:none;border:1px solid var(--line-2)}
.signin-card{background:var(--raised);border:1px solid var(--line-2)}
.signin-h{color:var(--t1)} .signin-p,.signin-foot{color:var(--t2)}
.ad-wait{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);margin:6px 0 12px}
.ad-wait i{width:8px;height:8px;border-radius:50%;background:var(--warn);animation:adPulse 1.2s ease-in-out infinite}
@keyframes adPulse{0%,100%{opacity:.3}50%{opacity:1}}
.live-pic .pc[hidden]{display:none}                                    /* one picture per app on the Live tab */
.rp-drawer:not(.show){visibility:hidden}                               /* a closed drawer is not on the page */
.needs.practice .needs-h .n,.needs.practice ol{display:none}
.needs.practice::after{content:"Practice run: your real decisions are hidden while the example plays. Switch back to Now to see them.";display:block;padding:14px;font-size:13px;color:var(--t2);line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-nav .n.changed{animation:badgePulse .9s var(--ease) 2}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25);background:var(--warn);color:#fff}}

/* ---------- round 5 of the blind critics (2026-10-30) ---------- */
/* one spine at every width: sentence + score line, then Needs you, Apps, then the picture with its log beside it (D4) */
.home-grid{grid-template-columns:1fr;max-width:1040px}
.home-side{gap:18px}
.home-pic .pc .pc-top{min-height:0}
.home-tail{margin-top:22px}
.home-tail.wide .home-showpic{display:none}
.home-tail.wide .stage{display:flex;flex-direction:row;gap:22px;height:440px;min-height:0;align-items:stretch}   /* a fixed stage height: the canvas sizes to its box, never the other way round */
.home-tail.wide .stage .pic{flex:1 1 auto;min-width:0;height:100%}
.home-tail.wide .stage .log{flex:0 0 300px;font-size:12px;border-left:1px solid var(--line);padding-left:16px}   /* two steps smaller and lighter: the log is a receipt, not a second feed */
.home-tail.wide .stage .log ol{max-height:420px}
.home-tail.wide .stage .log time{font-size:11px}
.home-tail.wide .transport{display:flex}
.home-foot{margin-top:0}
@media (max-width: 980px){ .home-tail{margin-top:0} }
.needs li{grid-template-columns:minmax(0,1fr) auto}
.needs .t{font-size:14px}
.needs .cons .rest[hidden]{display:none}
.needs .cons .lnk.more{color:var(--t3)}
.needs .cons .lnk.more:hover{color:var(--t1)}
/* the Problems sentence carries the same underlined number as every other tab (D10) */
.ap-sent .num{font-weight:500;color:var(--t1);cursor:help;border-bottom:1.5px dotted var(--line-strong)}
/* the only critical reads as critical: a ringed dot (sev_counts) */
.sd.crit{background:var(--t1)}   /* a dot, not a radio; "critical" is in the text */
/* one nav style: text buttons, the current page marked (D24, F12) */
.sh-add.btn{font:inherit;font-size:13px;font-weight:500;color:var(--t2);background:none;border:0;padding:7px 11px;border-radius:var(--r-sm);box-shadow:none}
.sh-add.btn:hover{color:var(--t1);background:var(--elev)}
.sh-add .plus{display:inline;font-size:16px;line-height:1;margin-right:5px;color:var(--t3)}
/* text links get row-height hit areas on a phone (F26) */
@media (max-width: 720px){ .needs .cons .lnk,.lnk.look,.pl-group .act .how,.pl-group .how,.pl-items summary{display:inline-block;padding:11px 0;margin:-6px 0} .needs .cons .lnk.more{padding:11px 4px} }
/* the Needs-you subline is meta, not code (D12) */
.needs .needs-h .split{font-family:var(--font);font-size:12px}
/* phone Problems: How to fix sits on the meta line, no dead space (D8); the two detail links live in one footer (D26) */
@media (max-width: 720px){
  .pl-group li:not(.grp){grid-template-columns:8px minmax(0,1fr);grid-template-rows:auto auto}
  .pl-group li:not(.grp) .t{grid-column:2;grid-row:1}
  .pl-group li:not(.grp) .s{grid-column:2;grid-row:2}
  .pl-group li:not(.grp) .act{grid-column:2;grid-row:2;justify-self:end;align-self:start;grid-template-columns:none}
  .pl-group li:not(.grp) .act .how{margin:0}
  .pl-foot{display:flex;flex-wrap:wrap;gap:4px 18px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--raised)}
  .pl-foot .pl-more{margin:0}
}
.pl-foot{display:flex;flex-wrap:wrap;gap:4px 18px;margin:4px 0 16px}
.pl-foot .pl-more{margin:0}
/* dark: card edges and picture bands lift one step (D25) */
:root[data-theme="dark"] .needs,:root[data-theme="dark"] .apps,:root[data-theme="dark"] .pl-group,:root[data-theme="dark"] .pl-run,:root[data-theme="dark"] .pl-foot{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .pc{--hair:rgba(255,255,255,.14)}
.pl-foot .pl-more[open]{flex-basis:100%}
.home-tail.pc{display:block;min-height:0;height:auto;padding:0;background:none}
.home-tail .home-foot{justify-content:flex-start;margin:0 0 6px}
@media (max-width: 720px){ .pl-group li:not(.grp) .act .how{min-height:0;padding:8px 0;margin:-8px 0} .pl-group li:not(.grp) .act{align-self:center} }
.needs.practice .empty{display:none}                                   /* a practice run shows its note, not an empty box */
.needs .cons.fail{color:var(--t1)}
.pl-run.stale b{color:var(--t2)}
/* round 6: the phone keeps the picture folded (the tail's .pc class must not unfold it); the log never spends amber on a finding */
@media (max-width: 980px){
  .home-tail.pc .stage,.home-tail.pc .transport{display:none}
  .home-tail.pc.show .stage{display:flex;flex-direction:column;height:auto!important;gap:16px}
  .home-tail.pc.show .transport{display:flex}
  .home-tail.pc .home-showpic{display:inline-flex;margin:4px 0 12px}
  .home-tail.pc.show .stage .pic{min-height:360px}
}
/* round 6 */
.apps .dot.none{background:transparent}
.pl-h.ready{color:var(--t2)}                                             /* a card label is grey like every other card label */
.pl-group .s .lnk.look{display:inline;border-bottom:0;color:var(--t2)} .pl-group .s .lnk.look:hover{color:var(--t1);text-decoration:underline}
.pl-group .cons .rest[hidden]{display:none}
.pl-group .cons .lnk{font:inherit;font-size:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer} .pl-group .cons .lnk.more{color:var(--t3)}
.sh-add[aria-current="page"]{color:var(--t1);background:var(--accent-dim)}
.needs li.attn .why span{color:var(--t2)}
@media (max-width: 980px){ .home-tail.pc .transport{position:static} }   /* on Home the scrubber sits under the picture, never pinned over it */
.live-pic .pc .log{flex:0 0 42%}                                 /* on an app's Live tab the one band leaves room: the log gets the width (D13) */
@media (max-width: 980px){ .live-pic .pc .log{flex:none} }
.home-tail.pc .home-showpic{font:inherit;font-size:13px;font-weight:500;color:var(--t1);background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-md);padding:9px 14px;cursor:pointer;min-height:44px}   /* the fold control reads as a button inside the picture's scope too */
/* round 7 */
@media (max-width: 720px){ .needs li .why{grid-column:1;grid-row:auto;text-align:left;max-width:none} .needs li .why button,.needs li .why span{text-align:left} }   /* the reason stacks under the title on a phone */
.needs .why span,.needs .why button{white-space:normal;max-width:200px;display:inline-block;line-height:1.35}   /* short reasons may take two lines; never clipped mid-word */
.df-row>.df-more{color:var(--t2)}                                   /* the one action on a source card is readable */
@media (max-width: 720px){ .sh-add .lbl{display:inline;font-size:12.5px} .sh-add .plus{margin-right:3px} .sh-add{padding:6px 8px} }   /* "+ Add an app" keeps its words on a phone */
.needs li.door .t button{color:var(--danger);font-weight:500}
.needs li.door{border-left:3px solid var(--danger)}
.pl-group .act .how{cursor:pointer}
.apps .dec.mode{color:var(--t3);font-family:var(--font)}
.st-lead{font-size:20px;line-height:1.3;color:var(--t1);margin:4px 0 18px;max-width:60ch}
@media (max-width: 720px){ .st-lead{font-size:17px} }
/* practice run: the whole Home is framed, not just one line */
.home-pic .pc.drill ~ .home-side,.home-pic .pc.drill ~ .home-tail,.app:has(.pc.drill) .home-side,.app:has(.pc.drill) .home-tail{outline:2px dashed var(--line-strong);outline-offset:6px;border-radius:var(--r-lg)}
@media (max-width: 720px){ .apps .dec.mode{display:block;grid-column:2;grid-row:3;font-size:11.5px;color:var(--t3)} .apps button.app-row{grid-template-rows:auto auto auto} }   /* the mode word stays on phones, under the line */
.pl-ruled{margin:4px 0 16px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--raised)}
.pl-ruled>summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.pl-ruled>summary::-webkit-details-marker{display:none}
.pl-ruled ol{list-style:none;margin:0;padding:0}
.pl-ruled li{padding:10px 14px;border-top:1px solid var(--line)}
.pl-ruled li .t button{font:inherit;color:var(--t1);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.pl-ruled li .s{font-size:12px;color:var(--t3);margin-top:2px} .pl-ruled li .s.ruling{color:var(--t2);white-space:normal}
@media (max-width: 720px){ .pl-group li.grp .act{grid-column:2;grid-row:auto;justify-self:start;margin-top:-4px} }   /* a reason link sits under the meta, never floats */
#rpPrintTab{white-space:nowrap}
.df-row .sd{border-radius:2px}                                              /* a source is a square in the list as in the picture */
.needs .why .lnk.remind{font:inherit;font-size:inherit;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
/* round 11 */
#view-reports .rp-diff pre,#view-reports pre.rp-diff,.rp-drawer pre{max-height:320px;overflow:auto}                 /* a long diff scrolls inside its box; the actions stay in reach */
@media (max-width: 720px){ .ap-meta{display:block;font-size:12px;line-height:1.35} .ap-meta>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ap-rules{font-size:12px;line-height:1.35} }   /* the phone band: one short line per fact, each clipped with an ellipsis, never cut at the edge */
.needs li.sub{display:block;padding:8px 14px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);border-top:1px solid var(--line)}
.needs.folded ol,.needs.folded .empty{display:none}                                           /* the Checkup view is about checks; decisions live on Now */
.needs.folded::after{content:"Decisions live on the Now view.";display:block;padding:12px 14px;font-size:13px;color:var(--t3)}
@media (max-width: 720px){
  .pl-group li.grp{display:flex;flex-direction:column;gap:4px}                 /* the fix card on a phone reads top to bottom: title, meta, reason, which problems */
  .pl-group li.grp .sd{display:none}
  .pl-group li.grp .t,.pl-group li.grp .s,.pl-group li.grp .act,.pl-group li.grp .pl-items,.pl-group li.grp .cons{margin:0;justify-content:flex-start;align-self:flex-start;width:100%}
  .pl-group li.grp .act .how{margin:0;padding:8px 0}
  .pl-items{margin-top:0}
}
@media (max-width: 720px){ .pl-group li.grp .act{padding:0;min-height:0} .pl-group li.grp .act .how{min-height:0;padding:6px 0;text-align:left} }   /* the reason link sits flush under the meta, no box around it */
.needs .why .btn.remind{display:inline-block;margin:6px 0 0 auto;padding:5px 12px;font-size:12px;min-height:30px;color:var(--t1);background:var(--raised);border:1px solid var(--line-strong);border-radius:999px;border-bottom:1px solid var(--line-strong)}
.needs .why .btn.remind:hover{border-color:var(--t2);text-decoration:none}
.needs-fold summary .lnk.give{font:inherit;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.needs-fold summary .lnk.give:hover{color:var(--t1)}
.ap-band .lnk.band-wait{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.ap-band .lnk.band-wait:hover{color:var(--t1)}
@media (max-width: 720px){ .needs .why .btn.remind{margin:6px 0 0 0;min-height:44px} }
.needs .why .lnk.remind{display:none}

/* r15: the band's data-watch line */
.ap-band .ap-data{color:var(--t2)}
.ap-band .ap-data[hidden]{display:none}

/* ---------- Routines: its own screen (2026-10-30); the module renders inside, the width reads like Settings' body ---------- */
#screen-routines #view-routines{max-width:820px;min-width:0}
@media (max-width: 720px){ .sh-bar .sh-settings{padding:7px 6px;font-size:12.5px} .sh-bar .sh-add{margin-right:0} }   /* Home · Routines · Settings · + · theme · you fit a 400 px phone without sideways scroll (the .sh-settings rule above would otherwise win by order) */
@media (max-width: 520px){ .sh-add .lbl{display:none} .sh-add{padding:6px 10px;min-width:36px;justify-content:center} }   /* on the narrowest phones the bar is Home · Routines · Settings · + · theme · you; the + alone keeps Home's word visible */
@media (max-width: 380px){ .sh-bar{padding-left:10px;padding-right:10px} .sh-bar .sh-settings,.sh-nav button{padding:7px 4px} .sh-theme{width:28px} .sh-user{padding:2px} }   /* the smallest phones: the same six things, tighter */

/* round 15: the Needs-you card has one title; its group dividers are quiet; a practice target is one grey line */
.needs li.sub{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3);border-top:0;padding:10px 14px 2px}
.needs li.attn.target .t button{color:var(--t2)}
.needs.folded{display:none}                                                   /* the Checkup view is about checks; no empty card */
.sd.crit{background:transparent;box-shadow:inset 0 0 0 2px var(--t1)}        /* a hollow ring survives both themes */
@media (max-width: 720px){
  .needs li{grid-template-columns:minmax(0,1fr)} .needs .why{grid-column:1;grid-row:auto;text-align:left;max-width:none;margin-top:2px}   /* the reason takes the full row: no orphan word */
  .needs .why .btn.remind{margin-left:0}
  .ap-meta:not(.open){display:none} .ap-meta-tg{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;margin-top:6px;font:inherit;font-size:12px;color:var(--t2);background:var(--raised);border:1px solid var(--line-strong);border-radius:999px;cursor:pointer}
}
@media (min-width: 721px){ .ap-meta-tg{display:none} }

/* round 16: group labels are headers (the rule sits above them); phone rows keep the action under the meta line */
.needs li.sub{border-top:1px solid var(--line);padding:12px 14px 2px}
.needs li.sub + li{border-top:0}
@media (max-width: 720px){
  .pl-group li .how{grid-column:2;grid-row:auto;justify-self:start;margin-top:4px;text-align:left}
  .pl-group li .act,.pl-group li .how{min-height:44px;display:inline-flex;align-items:center}
}

/* password sign-in retired: the provider button alone, centred, messages under it */
.ad-sso.only{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.ad-sso.only .ad-err{text-align:center;margin:0}
.ad-sso.only .ad-err:empty{display:none}

.ad-login[hidden]{display:none}

/* round 17: the practice target is one grey line under the Needs-you card */
.needs-foot{margin:6px 0 0}
.needs-foot li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 14px;color:var(--t3);font-size:12.5px}
.needs-foot li .t button{font:inherit;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.needs-foot li .s{font-size:12px;color:var(--t3)}
.needs-foot li .why{font-size:11.5px;color:var(--t3);text-align:right}
@media (max-width: 720px){ .needs-foot li{grid-template-columns:minmax(0,1fr)} .needs-foot li .why{text-align:left} }

.pl-note{margin:-6px 0 12px;font-size:12.5px;color:var(--t3);line-height:1.5}
.pl-group li .s.lead{grid-column:2;color:var(--t3)}

/* round 18: app rows and Needs-you problem rows show they open */
.apps button.app-row::after{content:"\203a";grid-column:4;color:var(--t3);font-size:16px;line-height:1}
.apps button.app-row{grid-template-columns:10px minmax(0,1fr) auto 10px}
/* round 18: on a phone the row's action sits under the meta line, never beside it (an earlier rule kept it in column 2) */
@media (max-width: 720px){ .pl-group li > .act{grid-column:1/-1 !important;grid-row:auto !important;justify-content:flex-start;margin-top:2px} }

/* round 18: the practice target is one grey sentence under the Needs-you card */
.needs-foot-line{margin:6px 14px 0;font-size:12.5px;color:var(--t3);line-height:1.5}
.needs-foot-lnk{font:inherit;color:var(--t3);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.needs-foot-lnk:hover{color:var(--t1)}