/* WO-UI-01: everyone on the web; desk first, readable and navigable on phones.
   A4 and wall keep their fixed canvas. Typography remains a shared contract. */
@import url('/assets/typography.css');
:root{
  color-scheme:light;--ground:#f3f4f6;--surface:#fff;--raise:#f7f8fa;
  --ink:#17202c;--muted:#56616e;--faint:#687482;--line:#dde2e8;--line-2:#bac5d0;
  --brand:#205eb0;--predicted:var(--brand);--measured:#16753d;--assumed:#966000;--unknown:#687482;
  --good:#16753d;--warning:#966000;--serious:#bb4b20;--critical:#c63039;
  --wash-m:#e6f4e9;--wash-p:#e7effb;--wash-a:#fff3d9;--wash-u:#eceff2;
  --radius:10px;--radius-small:6px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --text-small:max(var(--takt-text-min),.78rem);--text-body:max(var(--takt-text-min),.875rem);--text-title:max(var(--takt-text-min),1.5rem);
  --shadow:0 12px 30px #17202c20;
}
:root[data-theme=dark]{color-scheme:dark;--ground:#101722;--surface:#172130;--raise:#202d3e;--ink:#eef2f8;--muted:#b2bfd0;--faint:#9baac0;--line:#334256;--line-2:#53657d;--brand:#8cbaff;--measured:#82d79b;--assumed:#f0c36d;--unknown:#a6b1c1;--good:#82d79b;--warning:#f0c36d;--serious:#ffac82;--critical:#ff9098;--wash-m:#1c392a;--wash-p:#233a58;--wash-a:#41351f;--wash-u:#293443;--shadow:0 12px 30px #0005}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ground:#101722;--surface:#172130;--raise:#202d3e;--ink:#eef2f8;--muted:#b2bfd0;--faint:#9baac0;--line:#334256;--line-2:#53657d;--brand:#8cbaff;--measured:#82d79b;--assumed:#f0c36d;--unknown:#a6b1c1;--good:#82d79b;--warning:#f0c36d;--serious:#ffac82;--critical:#ff9098;--wash-m:#1c392a;--wash-p:#233a58;--wash-a:#41351f;--wash-u:#293443;--shadow:0 12px 30px #0005}}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{min-height:100%;max-width:100%;margin:0}
body{display:block;background:var(--ground);color:var(--ink);font:var(--text-body)/1.55 'IBM Plex Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit} button,a,select{touch-action:manipulation}
a{color:var(--brand)}button{cursor:pointer}svg,img,canvas{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:var(--text-title);line-height:1.2;letter-spacing:-.025em;margin:0}h2{font-size:max(var(--takt-text-min),1.1rem)}h3{font-size:max(var(--takt-text-min),1rem)}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}.muted,.note,.sub{color:var(--muted)}.small,small{font-size:var(--text-small)}
.appframe{min-width:0;width:100%}.wrap,main.wrap{max-width:1600px;width:100%;margin:0 auto;padding:24px 24px 64px;display:flex;flex-direction:column;gap:20px}
.btn,button:not(.unstyled),a.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius-small);padding:8px 12px;min-height:36px;background:var(--surface);color:var(--ink);font-weight:500;text-decoration:none;text-transform:none;letter-spacing:0;box-shadow:none;white-space:normal;cursor:pointer}
.btn:hover,button:hover{background:var(--raise);border-color:var(--line-2)}.btn.primary,button.primary{background:var(--brand);color:var(--surface);border-color:var(--brand)}.btn.small,button.small{padding:5px 9px;font-size:var(--text-small)}.btn.plain{background:transparent}.btn.bulk{background:var(--wash-a);border:1px dashed var(--assumed);color:var(--assumed)}.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-small);padding:8px;max-width:100%;min-width:0}label{font-weight:500}textarea{width:100%;resize:vertical}
.card,.panel,.kpi,.tile,.empty,.error-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-width:0}.kpis,.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.kpi strong,.tile strong{font-size:var(--text-title);line-height:1.2}.empty,.error-state{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:var(--text-small)}th,td{text-align:left;padding:10px 8px;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{font-weight:500;color:var(--muted)}tr:last-child td{border-bottom:0}
.chip,.tag,.badge,.project-chip{display:inline-flex;align-items:center;gap:4px;border-radius:100px;background:var(--wash-u);color:var(--muted);padding:2px 8px;font-size:var(--text-small);font-weight:500}.project-chip{background:var(--wash-p);color:var(--brand);white-space:normal}.good{color:var(--good)}.warning{color:var(--warning)}.serious{color:var(--serious)}.critical{color:var(--critical)}
.banner,.support-banner,.closed-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--warning);border-radius:var(--radius);padding:14px 18px}.closed-banner{border-left-color:var(--unknown);color:var(--muted)}.support-banner{border-left-color:var(--brand);margin:8px 16px}.support-banner>span{overflow-wrap:anywhere}
.view-pills,.seg{display:flex;flex-wrap:wrap;gap:6px}.view-pills button,.seg button{border-radius:100px}.view-pills [aria-pressed=true],.seg [aria-pressed=true]{background:var(--ink);color:var(--surface)}
.takt-icon{width:18px;height:18px;flex:0 0 18px;vertical-align:middle}
/* The same DOM is a top menu at a desk and a drawer below 1180px. */
nav.appnav{display:block;width:100%;min-height:0;padding:0;position:relative;z-index:30;border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.frame-top{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px}.appnav .brand,.brand-only{display:flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;text-decoration:none;letter-spacing:.08em;padding:0;border:0}.brand-mark{display:inline-flex;background:var(--brand);color:var(--surface);border-radius:6px;width:28px;height:28px;align-items:center;justify-content:center;font-size:max(var(--takt-text-min),1.11rem)}.brand-only{padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.frame-menu{display:flex;align-self:stretch;align-items:stretch;gap:2px}.frame-section{position:relative;display:flex}.frame-section>summary{display:flex;align-items:center;gap:7px;cursor:pointer;padding:10px 12px;list-style:none;font-size:var(--text-small);font-weight:600;border-bottom:3px solid transparent}.frame-section>summary::-webkit-details-marker{display:none}.frame-section.current>summary{color:var(--brand);border-bottom-color:var(--brand)}
.frame-panel{transition:none!important;animation:none!important;position:absolute;top:100%;left:0;min-width:400px;max-width:calc(100vw - 32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);z-index:40}.frame-section:not([open]) .frame-panel{display:none}
.appnav a.frame-link{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 10px;color:var(--ink);padding:10px;border:0;border-radius:var(--radius-small);text-decoration:none}.frame-link .takt-icon{grid-row:span 2;color:var(--brand)}.frame-link small{grid-column:2;color:var(--muted);font-weight:400;font-size:var(--text-small)}.appnav a.frame-link:hover{background:var(--raise)}
.frame-tools{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}.frame-project{max-width:240px;color:var(--brand);background:var(--wash-p);font-weight:600}.frame-project optgroup{color:var(--ink);background:var(--surface)}.frame-project .closed-option{color:var(--muted)}.appnav .who{margin:0;padding:0;border:0;position:relative;display:block;min-width:36px}.who summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}.avatar{border-radius:100%;background:var(--brand);color:var(--surface);width:34px;height:34px;display:flex;align-items:center;justify-content:center}.who-label{display:flex;flex-direction:column;font-size:var(--text-small)}.who .wr{color:var(--muted)}.person-panel{position:absolute;right:0;top:100%;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.who:not([open]) .person-panel{display:none}.company-logo{object-fit:contain;width:30px;height:30px}.company-name{max-width:120px;overflow-wrap:anywhere;font-size:var(--text-small)}
.frame-subtabs{display:flex;gap:4px;overflow-x:auto;max-width:100%;padding:0 16px;border-top:1px solid var(--line)}.appnav .frame-subtabs a{display:flex;flex:none;align-items:center;gap:6px;padding:10px 12px;color:var(--muted);text-decoration:none;border:0;border-bottom:3px solid transparent;border-radius:0;white-space:nowrap;font-size:var(--text-small)}.appnav .frame-subtabs a[aria-current=page]{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;background:transparent}
button.frame-drawer,button.drawer-close{display:none}.frame-backdrop{display:none}.frame-status{margin:8px 16px;color:var(--muted)}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border:0;padding:0}.page-heading{min-width:0}.breadcrumb{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--text-small);margin-bottom:10px}.page-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.page-audience{margin:8px 0 0;color:var(--muted)}.page-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Explicitly marked write controls disappear even when their page redraws. */
html:not([data-project-readonly=false]) [data-project-write],html[data-project-closed=true] [data-project-write]{display:none!important}
@media(max-width:1179px){button.frame-drawer,button.drawer-close{display:inline-flex}.frame-menu{display:none;position:fixed;left:0;top:0;bottom:0;width:min(320px,85vw);overflow-y:auto;background:var(--surface);padding:16px 8px;z-index:60;flex-direction:column;align-items:stretch;gap:8px}.appnav[data-drawer=open] .frame-menu{display:flex}.appnav[data-drawer=open] .frame-backdrop{display:block;position:fixed;inset:0;background:#17202c66;z-index:50}.frame-section{display:block}.frame-panel{position:static;min-width:0;max-width:100%;display:flex;flex-direction:column;border:0;box-shadow:none;padding:4px}.frame-section>summary{padding:12px}.frame-section.current>summary{border:0}.frame-section>summary .takt-icon{color:var(--brand)}.frame-tools>.frame-language,.frame-tools>.frame-theme,.company-name,.company-logo,.who-label{display:none}.drawer-preferences{display:flex;flex-wrap:wrap;gap:8px}.frame-top{gap:8px}.frame-project{max-width:220px}}
/* Retain PR #256 Safari compositor fix; menu state is shared in rail.js. */
@media(min-width:1180px){.drawer-preferences{display:none}.frame-panel{transform:translateZ(0)}}
@media(max-width:600px){.wrap,main.wrap{padding:18px 14px 40px;gap:16px}.frame-top{padding:8px 10px}.brand-text{display:none}.frame-project{max-width:165px;font-size:var(--text-small)}.frame-tools{gap:6px}.frame-subtabs{padding:0 8px}.page-header{align-items:flex-start}.page-actions{width:100%}.kpis,.tiles{grid-template-columns:1fr}.card,.panel{padding:14px}.frame-panel{grid-template-columns:1fr}table.responsive-table thead,table.responsive-table [data-table-head]{display:none}table.responsive-table,table.responsive-table tbody,table.responsive-table tr,table.responsive-table td{display:block;width:100%}table.responsive-table tr{border-bottom:1px solid var(--line);padding:8px 0}table.responsive-table td{border:0;padding:5px 0}table.responsive-table td:before{content:attr(data-label);display:block;color:var(--muted);font-size:var(--text-small)}}
@media print{.appnav,.page-actions{display:none!important}}

/* Compatibility names used by existing page widgets, all from shared tokens. */
:root{
 --hard:var(--critical);--warn:var(--warning);--wash-g:var(--wash-m);--wash-h:color-mix(in srgb,var(--critical) 12%,var(--surface));
 --client-ground:var(--ground);--client-ink:var(--ink);--client-line:var(--line);
 --client-link:var(--brand);--client-muted:var(--muted);--client-surface:var(--surface);
 --client-notice:var(--wash-a);--client-warning-ground:var(--wash-a);
 --client-warning-ink:var(--ink);--client-warning-line:var(--warning);--client-warning-text:var(--warning);
 --dim-a:var(--wash-a);--dim-m:var(--wash-m);--dima:var(--wash-a);--dimm:var(--wash-m);--dimp:var(--wash-p);
 --build:var(--line-2);--edge:var(--line-2);--idle:var(--wash-u);
 --banner:var(--wash-a);--bannerink:var(--ink);--onpri:var(--surface);
 --accent:var(--brand);--risk:var(--serious);--go:var(--good);--stop:var(--critical);--wash:var(--raise);
}

/* State colors shared by the real site and its 3D view. */
:root{--degree-none:#ffffff;--degree-one:#b78a20;--degree-two:#167b7e;--degree-three:#65477b;--degree-four:#0c3557;--degree-edge:#526b83;--hatch-low:#ffffff;--hatch-high:#ffffff;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--degree-none:#0e1520;--degree-one:#93620b;--degree-two:#32a0a5;--degree-three:#b8a9d3;--degree-four:#c8e5f8;--degree-edge:#a1b3c5;--hatch-low:#0e1520;--hatch-high:#0e1520;}}
:root[data-theme="dark"]{--degree-none:#0e1520;--degree-one:#93620b;--degree-two:#32a0a5;--degree-three:#b8a9d3;--degree-four:#c8e5f8;--degree-edge:#a1b3c5;--hatch-low:#0e1520;--hatch-high:#0e1520;}

.frame-language,.frame-theme,.frame-section>summary{white-space:nowrap!important}
.who-label{max-width:130px}.who-label>span,.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{flex-shrink:0}.person-panel{max-width:calc(100vw - 28px);overflow-wrap:anywhere}
@media(min-width:1180px) and (max-width:1320px){.frame-top{gap:6px;padding-inline:10px}.frame-section>summary{padding-inline:7px;gap:4px}.frame-section>summary>.takt-icon:last-child{display:none}.frame-project{max-width:170px}.frame-tools{gap:5px}.who-label,.company-name{display:none}}
@media(min-width:601px) and (max-width:1000px){.kpis,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

.link{color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.link:hover{color:var(--ink)}
select.field,input.tick{cursor:pointer}.field{border:1px solid var(--line-2)}.btn.bulk .pre{font-weight:600;color:var(--assumed)}

/* Standalone framed headers use the same page gutters as wrapped pages. */
body>[data-page-header]{margin:24px 32px}
@media(max-width:600px){body>[data-page-header]{margin:18px 14px}}

@media(min-width:1321px) and (max-width:1500px){.who-label{display:none}}