/* The Malphas app window in section two, rebuilt from the new dashboard (windows_agent/ui_host: tokens.css, glass.css,
   shell.css, views.css, 2026-10-02). Same tokens, same frame: caption strip, rail with the nine sections, page head with
   search, Home's status wash, band and score cards, the tables, and the one floating "why?" drawer. It is glass over the
   section's backdrop, the way the app is glass over the desktop. All content is DEMO DATA. */
.appwin.dash {
  /* tokens.css (dark glass) */
  --clarity: .74; --glass-rgb: 10, 11, 14;
  --surface-1: rgba(255,255,255,.045); --surface-1-under: rgba(10,11,14,.08);
  --surface-2: rgba(255,255,255,.075); --surface-2-under: rgba(10,11,14,.14);
  --surface-3: rgba(255,255,255,.11); --surface-3-under: rgba(10,11,14,.21);
  --hairline: rgba(255,255,255,.08); --hairline-top: rgba(255,255,255,.16);
  --float: rgba(16,17,21,.78);
  --text-1: rgba(255,255,255,.94); --text-2: rgba(255,255,255,.64); --text-3: rgba(255,255,255,.42);
  --accent: #9DB5FF; --accent-fill: rgba(157,181,255,.14); --accent-fill-under: rgba(10,11,14,.22);
  --concern: #E0736F; --ok: #5AC8A0; --neutral: #7A8AA0; --attention: #E2B04A;
  --d-ease: cubic-bezier(.16,1,.3,1);
  --d-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --d-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --d-mono: "Cascadia Mono", "Cascadia Code", Consolas, monospace;

  position: relative; margin: 0 auto; max-width: 1120px; width: 100%; height: 668px; box-sizing: border-box;   /* 2026-10-15: was 620; Home overflowed by 44px and showed a scroll */
  display: grid; grid-template-rows: 40px 1fr; grid-template-columns: 216px 1fr; grid-template-areas: "cap cap" "rail main";
  border-radius: 16px; overflow: hidden; isolation: isolate;
  /* 2026-10-15 (owner): the same dark opaque ground on the page as during the dive, so the window's tint never jumps
     from dark to light green when the dive ends (it was see-through glass with blur + saturate once on the page) */
  border: 1px solid rgba(255,255,255,.10); background: #0E0F12;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--text-1); font: 14px/1.55 var(--d-text); text-align: left; -webkit-font-smoothing: antialiased;
}
/* riding on the laptop screen during the dive: no live blur inside the 3D transform, the opaque ground instead */
.screen-page .appwin.dash { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0E0F12; }
.appwin.dash::before { display: none; }
.appwin.dash button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: left; }
.appwin.dash :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* the status wash at the top: green when protecting, amber when only watching */
.appwin.dash::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--wash) 0%, transparent 100%); transition: background .4s var(--d-ease); }
.appwin.dash[data-status="green"] { --wash: color-mix(in srgb, var(--ok) 24%, transparent); --status-c: var(--ok); }
.appwin.dash[data-status="amber"] { --wash: color-mix(in srgb, var(--attention) 24%, transparent); --status-c: var(--attention); }

/* caption */
.d-cap { grid-area: cap; display: flex; align-items: center; gap: 10px; padding-left: 16px; position: relative; font-size: 12px; color: var(--text-2); }
.d-cap img { width: 23px; height: 18px; display: block; }
.d-cap > span { color: var(--text-1); font-weight: 600; font-size: 12.5px; }
.d-glyphs { position: absolute; right: 0; top: 0; height: 40px; display: flex; }
.d-glyphs i { width: 46px; display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--text-3); }

/* rail */
.d-rail { grid-area: rail; display: flex; flex-direction: column; min-height: 0; padding-top: 12px;
  border-right: 1px solid var(--hairline); border-top: 1px solid var(--hairline); border-top-right-radius: 12px;
  background: linear-gradient(var(--surface-1), var(--surface-1)), linear-gradient(var(--surface-1-under), var(--surface-1-under)); }
.d-rail nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; flex: 1; }
.d-sep { height: 1px; background: var(--hairline); margin: 10px 8px; }
.d-item { position: relative; display: flex !important; align-items: center; gap: 12px; height: 36px; padding: 0 12px !important; border-radius: 8px;
  color: var(--text-2) !important; font-size: 13.5px; width: 100%; transition: background-color .12s, color .12s; }
.d-item:hover { color: var(--text-1) !important; background: var(--surface-2) !important; }
.d-item[aria-current="page"] { color: var(--text-1) !important;
  background: linear-gradient(var(--surface-3), var(--surface-3)), linear-gradient(var(--surface-3-under), var(--surface-3-under)) !important; }
.d-item[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); }
.d-item svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.d-item .key { margin-left: auto; color: var(--text-3); font: 11px var(--d-mono); }
.d-railfoot { display: flex; align-items: center; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 12px; }
.d-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--status-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-c) 22%, transparent); }

/* main */
.d-main { grid-area: main; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.d-head { display: flex; align-items: center; gap: 16px; padding: 18px 28px 8px; }
.d-title { margin: 0; font: 600 26px/1.2 var(--d-display); letter-spacing: -.02em; color: var(--text-1); flex: 1; }
.d-search { width: 260px; height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--hairline); color: var(--text-3); font-size: 12.5px;
  background: linear-gradient(var(--surface-1), var(--surface-1)), linear-gradient(var(--surface-1-under), var(--surface-1-under)); }
.d-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-search kbd { font: 11px var(--d-mono); color: var(--text-3); border: 1px solid var(--hairline); border-radius: 4px; padding: 0 5px; }
.d-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 28px 32px; scrollbar-gutter: stable; }
.d-scroll::-webkit-scrollbar { width: 10px; }
.d-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.d-view { animation: d-route .16s var(--d-ease) both; }
@keyframes d-route { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* depth 1 surfaces */
.d-card { border: 1px solid var(--hairline); border-top-color: var(--hairline-top); border-radius: 12px;
  background: linear-gradient(var(--surface-1), var(--surface-1)), linear-gradient(var(--surface-1-under), var(--surface-1-under)); }

/* Home: band and scores */
.d-band { margin: 4px 0 22px; }
.d-band-head { display: flex; align-items: center; gap: 12px; }
.d-band-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--status-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-c) 22%, transparent); }
.d-band h4 { margin: 0; font: 600 24px/1.25 var(--d-display); color: var(--text-1); }
.d-band-line { margin: 6px 0 0 24px; color: var(--text-2); font-size: 14px; }
.d-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d-score { padding: 16px 18px 14px; display: flex; flex-direction: column; }
.d-score-label { color: var(--text-2); font-size: 12.5px; letter-spacing: .02em; }
.d-score-num { margin-top: 4px; font: 600 34px/1.1 var(--d-display); color: var(--text-1); font-variant-numeric: tabular-nums; }
.d-score-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.d-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 12px; }
.d-bars i { flex: 1; min-height: 3px; height: var(--h, 3px); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--concern) 70%, transparent);
  transform-origin: bottom; transition: transform .9s var(--d-ease); }
.d-bars i.zero { background: color-mix(in srgb, var(--text-3) 40%, transparent); }
.d-bar-days { display: flex; gap: 6px; margin-top: 4px; }
.d-bar-days span { flex: 1; text-align: center; color: var(--text-3); font-size: 10.5px; }
.d-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 16px; background: color-mix(in srgb, var(--text-3) 30%, transparent); }
.d-split i { height: 100%; width: var(--w, 0%); transform-origin: left; transition: transform 1.1s var(--d-ease); }
.d-split i.ok { background: color-mix(in srgb, var(--ok) 75%, transparent); }
.d-split i.held { background: color-mix(in srgb, var(--concern) 80%, transparent); }
.d-split i.cn { background: color-mix(in srgb, var(--neutral) 80%, transparent); }
.d-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--text-2); font-size: 12px; }
.d-legend b { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.d-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.d-legend .sw.ok { background: var(--ok); } .d-legend .sw.held { background: var(--concern); } .d-legend .sw.cn { background: var(--neutral); }

.d-section-head { display: flex; align-items: baseline; margin: 30px 0 12px; }
.d-section-head h5 { margin: 0; font: 600 16px/1.3 var(--d-text); letter-spacing: -.01em; flex: 1; }
.d-list { padding: 4px 0; }
.d-row { display: grid; grid-template-columns: 48px 84px 1fr auto; align-items: baseline; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--hairline); }
.d-row:first-child { border-top: 0; }
.d-row .t, .d-tr .t { font: 12.5px var(--d-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.d-row .k { color: var(--text-1); }
.d-row .s { color: var(--text-2); min-width: 0; }
.d-row.concern, .d-tr.concern { box-shadow: inset 2px 0 0 var(--concern); }

/* links, buttons, chips */
.d-link { color: var(--text-1) !important; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; font-size: 13px !important; }
.d-link.quiet { color: var(--text-2) !important; text-decoration-color: var(--hairline-top); }
.d-link:hover { text-decoration-thickness: 2px; color: var(--text-1) !important; }
.d-btn { display: inline-flex !important; align-items: center; height: 32px; padding: 0 14px !important; border-radius: 8px; color: var(--text-2) !important; font-size: 13px !important;
  transition: background-color .12s, color .12s; }
.d-btn:hover { color: var(--text-1) !important; background: var(--surface-2) !important; }
.d-btn.primary { color: var(--text-1) !important; background: linear-gradient(var(--accent-fill), var(--accent-fill)), linear-gradient(var(--accent-fill-under), var(--accent-fill-under)) !important; }
.d-btn[disabled] { color: var(--text-3) !important; background: transparent !important; cursor: default; }
.d-filters { display: flex; gap: 8px; margin: 2px 0 14px; flex-wrap: wrap; }
.d-chip { height: 28px; padding: 0 12px !important; border-radius: 14px; border: 1px solid var(--hairline) !important; color: var(--text-2) !important; font-size: 12.5px !important; }
.d-chip:hover { color: var(--text-1) !important; background: var(--surface-2) !important; }
.d-chip[aria-pressed="true"] { color: var(--text-1) !important; border-color: var(--hairline-top) !important;
  background: linear-gradient(var(--surface-3), var(--surface-3)), linear-gradient(var(--surface-3-under), var(--surface-3-under)) !important; }

/* tables */
.d-thead, .d-tr { display: grid; align-items: center; gap: 0; }
.d-thead { padding-bottom: 10px; }
.d-thead span { overflow: hidden; text-overflow: ellipsis; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.d-tr { min-height: 40px; border-top: 1px solid var(--hairline); font-size: 13px; transition: background-color .1s; }
.d-tr:hover { background: var(--surface-2); }
.d-tr > * { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-tr > button { justify-self: end; }
.d-tr .k { color: var(--text-1); }
.d-tr.concern .k { color: var(--text-1); }
.d-tr[hidden] { display: none; }
.mono { font-family: var(--d-mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.d-thead.act, .d-table.act .d-tr { grid-template-columns: 64px minmax(0, 1.7fr) minmax(0, 1fr) 96px 60px; }
.d-thead.prog, .d-table.prog .d-tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 80px 110px; }
.d-thead.start, .d-table.start .d-tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 120px; }
.d-thead.quar, .d-table.quar .d-tr { grid-template-columns: 120px minmax(0, 1fr) 64px minmax(0, 1.4fr) 128px; }
.d-thead.net, .d-table.net .d-tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px 60px; }
.d-actions { display: flex; gap: 12px; justify-content: flex-end; }
.d-fine { margin: 14px 0 0; color: var(--text-3); font-size: 12.5px; }
.t2 { color: var(--text-2); }

/* scans */
.d-scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d-scan { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.d-scan-line { color: var(--text-1); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.d-progress { height: 1px; background: var(--hairline); position: relative; margin-top: 8px; }
.d-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--text-2); }
.d-scan-foot { margin-top: auto; padding-top: 8px; }

/* quarantine confirm and empty */
.d-confirm { margin-top: 14px; padding: 16px 20px; }
.d-confirm-q { margin: 0; color: var(--text-1); font-weight: 600; }
.d-confirm .d-fine { margin-top: 4px; }
.d-btns { display: flex; gap: 8px; margin-top: 12px; }
.d-empty { color: var(--text-2); padding: 16px 12px; border-top: 1px solid var(--hairline); }
.d-empty p { margin: 0 0 8px; }

/* settings, about */
.d-settings { padding: 4px 0; }
.d-setting { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; padding: 14px 20px; border-top: 1px solid var(--hairline); align-items: center; }
.d-setting:first-child { border-top: 0; }
.d-setting > span:nth-child(2) { color: var(--text-2); }
.d-consequence { grid-column: 2; color: var(--text-2); font-size: 12.5px; }
.d-seg { display: inline-flex; justify-self: start; padding: 3px; gap: 2px; border-radius: 9px; border: 1px solid var(--hairline);
  background: linear-gradient(var(--surface-1), var(--surface-1)), linear-gradient(var(--surface-1-under), var(--surface-1-under)); }
.d-seg button { height: 28px; padding: 0 12px !important; border-radius: 7px; color: var(--text-2) !important; font-size: 13px !important; }
.d-seg button[aria-checked="true"] { color: var(--text-1) !important; background: linear-gradient(var(--accent-fill), var(--accent-fill)), linear-gradient(var(--accent-fill-under), var(--accent-fill-under)) !important; }
.d-about { padding: 18px 20px; }
.d-about p { margin: 0 0 6px; }

/* the "why?" drawer: depth 2, the only blur inside the window */
.d-drawer { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(400px, calc(100% - 16px)); z-index: 20; display: flex; flex-direction: column;
  background: var(--float); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--hairline-top); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.5);
  transform: translateX(24px); opacity: 0; pointer-events: none; transition: transform .14s var(--d-ease), opacity .14s var(--d-ease); }
.d-drawer.open { transform: none; opacity: 1; pointer-events: auto; transition-duration: .22s; }
.d-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--hairline); }
.d-drawer-head h5 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.d-drawer-body { flex: 1; overflow: auto; padding: 16px 20px 22px; color: var(--text-2); font-size: 13.5px; }
.d-drawer-body b { display: block; color: var(--text-1); font-weight: 600; margin-bottom: 8px; }
.d-drawer-body p { margin: 0 0 14px; }
.d-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 13px; }
.d-kv dt { color: var(--text-3); } .d-kv dd { margin: 0; color: var(--text-1); }

/* arrival: the band, the numbers and the bars come in once, when the window is first on screen at full size */
html.js .appwin.dash:not(.done) .d-band, html.js .appwin.dash:not(.done) .d-score, html.js .appwin.dash:not(.done) .d-section-head,
html.js .appwin.dash:not(.done) .d-list { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--d-ease), transform 1s var(--d-ease); }
html.js .appwin.dash.play .d-band, html.js .appwin.dash.play .d-score, html.js .appwin.dash.play .d-section-head, html.js .appwin.dash.play .d-list { opacity: 1; transform: none; }
html.js .appwin.dash.play:not(.done) .d-score:nth-child(1) { transition-delay: .25s; }
html.js .appwin.dash.play:not(.done) .d-score:nth-child(2) { transition-delay: .4s; }
html.js .appwin.dash.play:not(.done) .d-section-head, html.js .appwin.dash.play:not(.done) .d-list { transition-delay: .7s; }
html.js .appwin.dash:not(.play) .d-bars i { transform: scaleY(0); }
html.js .appwin.dash:not(.play) .d-split i { transform: scaleX(0); }
html.js .appwin.dash.play:not(.done) .d-bars i { transition-delay: .55s; }
html.js .appwin.dash.play:not(.done) .d-split i { transition-delay: .65s; }

/* narrow screens: the rail collapses to icons, as the app's does under 1040 px */
@media (max-width: 900px) {
  .appwin.dash { grid-template-columns: 56px 1fr; height: 600px; }
  .d-item { justify-content: center; padding: 0 !important; }
  .d-item .txt, .d-item .key, .d-railfoot .txt { display: none; }
  .d-railfoot { justify-content: center; padding: 14px 0 16px; }
  .d-search { display: none; }
  .d-head, .d-scroll { padding-left: 18px; padding-right: 14px; }
  .d-scores, .d-scan-grid { grid-template-columns: 1fr; }
  .d-row { grid-template-columns: 44px 1fr auto; } .d-row .k { display: none; }
  .d-thead.act, .d-table.act .d-tr { grid-template-columns: 52px minmax(0, 1fr) 84px 52px; } .d-thead.act > :nth-child(3), .d-table.act .d-tr > :nth-child(3) { display: none; }
  .d-thead.prog, .d-table.prog .d-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px; } .d-thead.prog > :nth-child(4), .d-table.prog .d-tr > :nth-child(4) { display: none; }
  .d-thead.quar, .d-table.quar .d-tr { grid-template-columns: minmax(0, 1fr) 52px 112px; } .d-thead.quar > :nth-child(2), .d-thead.quar > :nth-child(4), .d-table.quar .d-tr > :nth-child(2), .d-table.quar .d-tr > :nth-child(4) { display: none; }
  .d-thead.net, .d-table.net .d-tr { grid-template-columns: minmax(0, 1fr) 80px 52px; } .d-thead.net > :nth-child(2), .d-table.net .d-tr > :nth-child(2) { display: none; }
  .d-setting { grid-template-columns: 1fr; } .d-consequence { grid-column: 1; }
}

/* phones: cells wrap instead of cutting words off, with tighter padding */
@media (max-width: 600px) {
  .d-tr { padding: 8px 0; min-height: 44px; }
  .d-tr > *, .d-thead span { padding: 0 6px; }
  .d-tr > :not(.t):not(.mono):not(button):not(.d-actions) { white-space: normal; line-height: 1.4; }
  .d-thead.act, .d-table.act .d-tr { grid-template-columns: 52px minmax(0, 1fr) 68px 38px; }
  .d-tr .t, .d-row .t { font-size: 11.5px; }
  .d-thead.quar, .d-table.quar .d-tr { grid-template-columns: minmax(0, 1fr) 46px 104px; }
  .d-row { padding: 10px 14px; }
}

/* an on-screen label: everything in the example window is demo activity (2026-10-12 review) */
.appwin.dash .d-cap .d-demo { margin-left: 14px; padding: 3px 8px; border: 1px solid rgba(245,34,60,.5); border-radius: 4px; font: 500 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; color: #f5223c; }