/* Parkmed Work OS: styles for the WOS_UI regions inside Universal Theme.
   Salt and pepper (docs/DESIGN.md, DECISIONS D-012): black, white and neutral greys only; no hue anywhere.
   State is carried by fill and line style: inverted = act now, soft fill = in hand, dashed = watch,
   dotted = waiting on others, faded = finished. apex/tests/static.test.js fails on any coloured value.
   Component classes are scoped under .wos and prefixed wos- (CLAUDE.md rule 5).

   1. Tokens: the same names and values as prototype/index.html, under the same three selectors.
      Light, Auto (follows the device) and Dark: data-theme on <html>, set before the first paint by each
      page's head script from localStorage 'wos.theme' (wos.js keeps it in step). */
:root{
  --bg:#F2F2F2; --surface:#FFFFFF; --sunk:#F7F7F7; --line:#DCDCDC; --line2:#EBEBEB;
  --ink:#000000; --ink2:#333333; --muted:#666666;
  --rail:#000000; --rail-ink:#FFFFFF; --rail-dim:#A3A3A3; --rail-hover:#1C1C1C; --rail-line:#2A2A2A;
  --btn:#000000; --btn-ink:#FFFFFF;
  --acc:#000000; --acc-soft:#E6E6E6; --acc-ink:#FFFFFF;
  --ok:#666666; --ok-soft:#EFEFEF; --warn:#333333; --warn-soft:#F2F2F2; --bad:#000000; --bad-soft:#000000; --info:#333333; --info-soft:#F7F7F7;
  --g1:#D4D4D4; --g2:#A3A3A3; --g3:#5E5E5E; --g4:#000000; --dot:rgba(0,0,0,.24);
  --r-lg:14px; --r:8px; --shadow:0 24px 64px rgba(0,0,0,.22);
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --serif:ui-serif,'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#000000; --surface:#141414; --sunk:#1C1C1C; --line:#363636; --line2:#262626; --ink:#FFFFFF; --ink2:#D6D6D6; --muted:#A3A3A3;
  --btn:#FFFFFF; --btn-ink:#000000; --acc:#FFFFFF; --acc-soft:#2A2A2A; --acc-ink:#000000;
  --ok:#8F8F8F; --ok-soft:#1C1C1C; --warn:#D6D6D6; --warn-soft:#1C1C1C; --bad:#FFFFFF; --bad-soft:#FFFFFF; --info:#D6D6D6; --info-soft:#1C1C1C;
  --g1:#3D3D3D; --g2:#6B6B6B; --g3:#A8A8A8; --g4:#FFFFFF; --dot:rgba(255,255,255,.3); --shadow:0 24px 64px rgba(0,0,0,.6); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#000000; --surface:#141414; --sunk:#1C1C1C; --line:#363636; --line2:#262626; --ink:#FFFFFF; --ink2:#D6D6D6; --muted:#A3A3A3;
  --btn:#FFFFFF; --btn-ink:#000000; --acc:#FFFFFF; --acc-soft:#2A2A2A; --acc-ink:#000000;
  --ok:#8F8F8F; --ok-soft:#1C1C1C; --warn:#D6D6D6; --warn-soft:#1C1C1C; --bad:#FFFFFF; --bad-soft:#FFFFFF; --info:#D6D6D6; --info-soft:#1C1C1C;
  --g1:#3D3D3D; --g2:#6B6B6B; --g3:#A8A8A8; --g4:#FFFFFF; --dot:rgba(255,255,255,.3); --shadow:0 24px 64px rgba(0,0,0,.6); color-scheme:dark; }
/* WOS_UI's own names point at the tokens (so the rest of this file and the page HTML did not change) */
:root{
  --wos-bg:var(--bg); --wos-surface:var(--surface); --wos-sunk:var(--sunk); --wos-line:var(--line); --wos-line2:var(--line2);
  --wos-ink:var(--ink); --wos-ink2:var(--ink2); --wos-muted:var(--muted);
  --wos-btn:var(--btn); --wos-btn-ink:var(--btn-ink); --wos-acc:var(--acc); --wos-acc-soft:var(--acc-soft);
  --wos-ok:var(--ok); --wos-warn:var(--warn); --wos-bad:var(--bad); --wos-info:var(--info);
  --wos-r-lg:var(--r-lg); --wos-r:var(--r);
  /* charts differ by lightness and line style, never hue (docs/DESIGN.md, "Charts"):
     stacked bars g1 to do, g2 in progress, g4 blocked, g3 waiting on client; SLA g1 within, g2 at risk, g4 breached */
  --wos-series-1:var(--g1); --wos-series-2:var(--g2); --wos-series-3:var(--g4); --wos-series-4:var(--g3);
  --wos-st-good:var(--g1); --wos-st-warn:var(--g2); --wos-st-crit:var(--g4);
  --wos-grid:var(--line2); --wos-axis:var(--line);
}

/* 2. Universal Theme and APEX chrome on the same tokens, so APEX does not bring back its blue.
      The shell (D-015): the header sits on the page background; the navigation is a light panel in both modes. */
:root{
  --a-base-font-family:var(--sans); --ut-alternate-heading-font-family:var(--serif);
  --ut-body-background-color:var(--bg); --ut-body-text-color:var(--ink);
  --ut-body-title-background-color:var(--bg); --ut-body-title-text-color:var(--ink); --ut-body-title-box-shadow:none;
  --ut-header-background-color:var(--bg); --ut-header-text-color:var(--ink); --ut-header-border-color:var(--bg); --ut-header-box-shadow:none;
  --ut-body-nav-background-color:var(--surface); --ut-body-nav-text-color:var(--ink2); --ut-body-nav-border-color:var(--line);
  --ut-body-nav-scrollbar-thumb-background-color:var(--line); --ut-body-nav-scrollbar-track-background-color:var(--surface);
  --ut-body-actions-background-color:var(--surface); --ut-body-actions-text-color:var(--ink);
  --ut-body-sidebar-background-color:var(--surface); --ut-body-sidebar-text-color:var(--ink);
  --ut-region-background-color:var(--surface); --ut-region-text-color:var(--ink);
  --ut-region-header-background-color:var(--surface); --ut-region-header-text-color:var(--ink); --ut-region-header-border-color:var(--line);
  --ut-component-background-color:var(--surface); --ut-component-border-color:var(--line); --ut-component-inner-border-color:var(--line2);
  --ut-component-text-default-color:var(--ink); --ut-component-text-title-color:var(--ink); --ut-component-text-subtitle-color:var(--ink2);
  --ut-component-text-muted-color:var(--muted); --ut-component-highlight-background-color:var(--sunk);
  --ut-component-toolbar-background-color:var(--sunk); --ut-component-icon-background-color:var(--sunk); --ut-component-icon-color:var(--ink);
  --ut-component-badge-background-color:var(--acc-soft); --ut-component-badge-text-color:var(--ink);
  --ut-link-text-color:var(--ink); --ut-focus-outline-color:var(--ink); --ut-field-label-text-color:var(--ink2);
  --ut-footer-background-color:var(--bg); --ut-footer-border-color:var(--line);
  --ut-login-page-background-color:var(--bg); --ut-login-region-background-color:var(--surface);
  --ut-report-header-background-color:var(--sunk); --ut-report-cell-border-color:var(--line2);
  --ut-report-cell-hover-background-color:var(--sunk); --ut-report-cell-alt-background-color:var(--sunk);
  --ut-treeview-badge-background-color:var(--ink); --ut-treeview-badge-text-color:var(--surface);
  --ut-navbar-button-badge-background-color:var(--ink);
  --ut-palette-primary:var(--btn); --ut-palette-primary-contrast:var(--btn-ink); --ut-palette-primary-shade:var(--acc-soft); --ut-palette-primary-text:var(--ink);
  --ut-palette-primary-alt:var(--btn); --ut-palette-primary-alt-contrast:var(--btn-ink); --ut-palette-primary-alt-shade:var(--acc-soft); --ut-palette-primary-alt-text:var(--ink);
  --ut-palette-generic:var(--sunk); --ut-palette-generic-contrast:var(--ink); --ut-palette-generic-shade:var(--sunk); --ut-palette-generic-text:var(--ink);
  --ut-palette-info:var(--ink2); --ut-palette-info-contrast:var(--surface); --ut-palette-info-shade:var(--sunk); --ut-palette-info-text:var(--ink);
  --ut-palette-success:var(--ink2); --ut-palette-success-contrast:var(--surface); --ut-palette-success-shade:var(--sunk); --ut-palette-success-text:var(--ink);
  --ut-palette-warning:var(--ink2); --ut-palette-warning-contrast:var(--surface); --ut-palette-warning-shade:var(--sunk); --ut-palette-warning-text:var(--ink);
  --ut-palette-danger:var(--ink); --ut-palette-danger-contrast:var(--surface); --ut-palette-danger-shade:var(--sunk); --ut-palette-danger-text:var(--ink);
  --a-field-input-background-color:var(--surface); --a-field-input-border-color:var(--line); --a-field-input-text-color:var(--ink);
  --a-button-background-color:var(--surface); --a-button-text-color:var(--ink); --a-button-border-color:var(--line);
  --a-menu-background-color:var(--surface); --a-menu-border-color:var(--line); --a-menu-default-text-color:var(--ink);
  --a-menu-focused-background-color:var(--btn); --a-menu-focused-text-color:var(--btn-ink);
  --a-checkbox-checked-background-color:var(--ink); --a-checkbox-checked-text-color:var(--surface);
  --a-field-input-focus-border-color:var(--ink); --ut-field-input-focus-icon-color:var(--ink); --ut-field-fl-input-focus-icon-background-color:var(--ink);
  --a-treeview-node-selected-background-color:var(--acc-soft); --a-treeview-node-selected-text-color:var(--ink);
  --a-treeview-node-focused-shadow:inset 0 0 0 2px var(--ink);
}
/* Vita sets these inside component rules, not on :root */
:is(.t-Button,.a-Button,.ui-button,.a-CardView-button):is(.t-Button--hot,.a-Button--hot,.ui-button--hot,.a-CardView-button--hot,.t-Button--primary,.t-Button--danger,.ui-button--danger,.t-Button--success,.t-Button--warning),
.apex-button-group input:checked + label{
  --a-button-background-color:var(--btn); --a-button-text-color:var(--btn-ink); --a-button-border-color:var(--btn);
  --a-button-hover-background-color:var(--ink2); --a-button-hover-text-color:var(--btn-ink); --a-button-active-background-color:var(--btn);
}
:is(.t-Button--hot,.t-Button--primary,.t-Button--danger,.t-Button--success,.t-Button--warning):is(.t-Button--simple,.t-Button--link,.t-Button--noUI){--a-button-text-color:var(--ink);--a-button-border-color:var(--ink);color:var(--ink)}
:is(.t-Button--hot,.t-Button--primary,.t-Button--danger,.t-Button--success,.t-Button--warning) .fa:after{background-color:var(--ink)}
.a-DatePicker--today{--a-button-text-color:var(--ink)}
/* navigation: a light panel; the current page is a soft grey pill with ink text in bold; hover is a lighter grey.
   Universal Theme folds it to icons (the button at the top left) and remembers that for the session. */
@media (min-width:640px){   /* on the page background, as the planning panes: a rounded panel with rounded pills (phones: UT's own drawer) */
  #t_Body_nav{margin:0 0 8px 8px;height:calc(100vh - 58px);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-sizing:border-box}
  .js-navCollapsed.js-navCollapsed--hidden #t_Body_nav{margin:0;border:0}   /* "hidden" collapse mode, folded: no edge left over the page */
  #t_TreeNav{padding:6px 6px 0}
  .t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-row,.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-row{border-radius:8px}
}
#t_TreeNav .a-TreeView-row:is(.is-current,.is-selected,.is-current--top){box-shadow:none}   /* the pill alone marks the page, no edge bar */
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row:is(.is-current,.is-selected,.is-current--top),
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row:is(.is-current,.is-selected,.is-current--top).is-hover{background-color:var(--acc-soft)!important}
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-hover{background-color:var(--sunk)!important}
.t-TreeNav .a-TreeView-node--topLevel.is-collapsible>.a-TreeView-row,.t-TreeNav .a-TreeView-node--topLevel ul{background-color:var(--surface)}
#t_TreeNav .a-TreeView-node--topLevel.is-collapsible,
#t_TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content,
#t_TreeNav .a-TreeView-row.is-hover ~ :is(.a-TreeView-content,.a-TreeView-toggle){color:var(--ink2)}
#t_TreeNav .a-TreeView-row:is(.is-current,.is-selected,.is-current--top) ~ :is(.a-TreeView-content,.a-TreeView-toggle),
#t_TreeNav .a-TreeView-row:is(.is-current,.is-selected,.is-current--top) ~ .a-TreeView-content :is(.fa,.a-Icon){color:var(--ink)!important;font-weight:600}
.t-TreeNav .a-TreeView-content:is(.is-current,.is-current--top),.t-TreeNav .a-TreeView-content:is(.is-current,.is-current--top) :is(.fa,.a-Icon){color:var(--ink)!important}
.t-Header-logo-link{font:600 17px/1 ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;letter-spacing:-.02em;color:var(--ink)}   /* the wordmark, monospaced as on the canvas */
.t-Footer-version{display:none}   /* the version stays in App Builder, not on every page */
body{font-family:var(--sans)}
:focus-visible{outline-color:var(--ink)}
#t_Body_nav :focus-visible{outline-color:var(--ink)}

/* 3. Components */
.wos{color:var(--wos-ink); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums}
:where(.wos) *,:where(.wos) *::before,:where(.wos) *::after{box-sizing:border-box}
:where(.wos) :is(button,input,select,textarea){font:inherit;color:inherit}
:where(.wos) button{background:none;border:0;padding:0;cursor:pointer}
.wos :focus-visible{outline:2px solid var(--wos-ink);outline-offset:2px}
.wos-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wos [hidden]{display:none!important}

/* page */
.wos-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--wos-line2)}
.wos-head h1{margin:0;font:400 28px/1 var(--serif);letter-spacing:-.015em}
.wos-head p{margin:6px 0 0;color:var(--wos-muted);max-width:80ch}
.wos-body{display:flex;flex-direction:column;gap:18px}
.wos-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wos-between{justify-content:space-between}
.wos-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.wos-panel{background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:var(--wos-r-lg);padding:16px 18px;min-width:0}
.wos-panel h2{margin:0 0 12px;font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center}
.wos-panel h3,.wos-sect h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--wos-ink2);display:flex;gap:8px;align-items:center}
.wos-empty{padding:18px;border:1px dashed var(--wos-line);border-radius:var(--wos-r-lg);color:var(--wos-muted);text-align:center}
.wos-banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--wos-r);background:var(--wos-sunk);color:var(--wos-ink2);border:1px dashed var(--g2)}
.wos-bad-banner{background:var(--wos-surface);color:var(--wos-ink);border:0;box-shadow:0 0 0 2px var(--wos-ink);font-weight:600}
.wos-muted{color:var(--wos-muted)} .wos-small{font-size:12.5px}
.wos-bad{color:var(--wos-ink);font-weight:700}   /* late: bold ink words */
.wos-warn{color:var(--wos-ink2);font-weight:600;text-decoration:underline dashed 1px;text-underline-offset:3px}   /* watch */
.wos-ok{color:var(--wos-ok);font-weight:600}
.wos-right{text-align:right;white-space:nowrap}
.wos-push{margin-left:auto}
.wos-meta{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--wos-muted);font-size:12.5px}
.wos-id{font-size:12px;color:var(--wos-muted);white-space:nowrap;font-weight:600}
.wos-note{margin:0;padding:10px 12px;border-radius:var(--wos-r);background:var(--wos-sunk);color:var(--wos-ink2);border-left:3px solid var(--wos-line)}

/* buttons, tags */
.wos-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--wos-line)!important;background:var(--wos-surface)!important;color:var(--wos-ink);font-weight:600;font-size:13.5px;white-space:nowrap}
.wos-btn:hover{border-color:var(--wos-ink)!important}
.wos-btn.wos-primary{background:var(--wos-btn)!important;border-color:var(--wos-btn)!important;color:var(--wos-btn-ink)}
.wos-btn.wos-ghost{border-color:transparent!important;background:transparent!important}
.wos-btn.wos-ghost:hover{background:var(--wos-sunk)!important}
.wos-btn.wos-danger{color:var(--wos-ink);border-color:transparent!important;background:transparent!important;text-decoration:underline dotted 1px;text-underline-offset:4px}
.wos-btn.wos-small{min-height:28px;padding:0 10px;border-radius:6px;font-size:12.5px;background:transparent!important}
/* as on the canvas: actions (Accept, Add) and plain links (Open) are pills; tools (Today, filters) are 6-8 px boxes (D-020) */
.wos-btn:is(.wos-primary,.wos-ghost){border-radius:999px}
.wos-btn.wos-small.wos-primary{padding:0 14px}
.wos-btn.wos-small.wos-primary{background:var(--wos-btn)!important}
.wos-btn[aria-pressed="true"],.wos-btn[aria-pressed="true"]:hover{background:var(--wos-btn)!important;border-color:var(--wos-btn)!important;color:var(--wos-btn-ink)}
.wos-btn:disabled{opacity:.45;cursor:not-allowed}
/* segmented switches as on the canvas: a grey track, flat 26 px segments, the chosen one a shade lighter (D-020) */
.wos-seg{display:inline-flex;flex-wrap:wrap;gap:0;padding:2px;border-radius:7px;background:var(--wos-sunk);border:1px solid var(--wos-line2)}
.wos-seg>.wos-btn{min-height:26px;height:26px;padding:0 10px;border:0!important;border-radius:5px;background:transparent!important;color:var(--wos-muted);font-size:12.5px;font-weight:600}
.wos-seg>.wos-btn:hover{color:var(--wos-ink);background:transparent!important}
.wos-seg>.wos-btn:is([aria-pressed="true"],[aria-current="page"]),.wos-seg>.wos-btn:is([aria-pressed="true"],[aria-current="page"]):hover{background:var(--wos-acc-soft)!important;color:var(--wos-ink)}
.wos-link{font-weight:600;text-align:left;color:var(--wos-ink);text-decoration:none}
.wos-link:hover{text-decoration:underline}
.wos-tag{display:inline-block;font-size:12px;font-weight:600;padding:1px 9px;border-radius:999px;background:var(--wos-sunk);color:var(--wos-ink2);white-space:nowrap;border:1px solid var(--wos-line2)}
.wos-t-ok{background:transparent;color:var(--wos-muted);border-color:var(--wos-line)}            /* finished: faded, outlined */
.wos-t-warn{background:transparent;color:var(--wos-ink);border:1px dashed var(--wos-ink2)}        /* watch: dashed */
.wos-t-bad{background:var(--wos-ink);color:var(--wos-surface);border-color:var(--wos-ink)}          /* act now: inverted */
.wos-t-info{background:transparent;color:var(--wos-ink);border:1px dotted var(--wos-ink)}           /* waiting on someone else: dotted */
.wos-t-acc{background:var(--wos-acc-soft);color:var(--wos-ink);border-color:transparent}            /* in hand: soft fill */
.wos-t-ink{background:transparent;color:var(--wos-ink);border-color:var(--wos-ink)}
.wos-lbl{display:inline-block;font-weight:600;padding:2px 9px;border-radius:6px;background:var(--wos-acc-soft);color:var(--wos-ink)}

/* forms */
.wos-form{display:flex;flex-direction:column;gap:12px}
.wos-inline{margin-top:12px;padding-top:12px;border-top:1px solid var(--wos-line2)}
.wos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.wos-wide{grid-column:1/-1}
.wos-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.wos-field>label{font-size:12.5px;font-weight:600;color:var(--wos-ink2)}
.wos-hint{font-size:12px;color:var(--wos-muted)}
.wos-input{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--wos-line);border-radius:var(--wos-r);background:var(--wos-surface);color:var(--wos-ink)}
.wos-input:hover{border-color:var(--g2)}
textarea.wos-input{min-height:80px;resize:vertical}
.wos-auto{width:auto}
.wos-checks{display:flex;flex-wrap:wrap;gap:4px 16px}
.wos-check{display:flex;gap:8px;align-items:center;min-height:30px;font-size:13.5px;font-weight:500!important;color:var(--wos-ink)!important}
.wos-check input{width:17px;height:17px;accent-color:var(--wos-ink)}
.wos-tools{gap:8px}
.wos-tools .wos-input{min-height:0}

/* cards (docs/DESIGN.md, "Cards"; D-016): one design on every page. The check circle at the top left (dashed ink =
   high priority, heavy ink = urgent), the title, the due or late mark at the top right; then Blocked, the subtasks as
   square boxes, and a footer with the planned start, carried over, severity, email, #project and the owner. */
.wos-card{display:block;padding:11px 12px 10px;border-radius:10px;border:1px solid var(--wos-line);background:var(--wos-surface);min-width:0;transition:border-color .12s,box-shadow .12s}
.wos-card:hover{border-color:var(--wos-muted);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.wos-card.wos-closed .wos-card-t{text-decoration:line-through;color:var(--wos-muted)}
.wos-card-h{display:flex;align-items:flex-start;gap:10px}
.wos-card-t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:14px;line-height:1.35;text-align:left;overflow-wrap:anywhere}
.wos-card-a{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end;margin-top:6px}
.wos-late{flex:none;display:inline-flex;align-items:center;gap:4px;margin-top:1px;padding:0 6px;border-radius:5px;font-size:12px;line-height:18px;white-space:nowrap;font-weight:700;color:var(--wos-ink);border:1px solid var(--wos-ink)}   /* late: a solid box, bold */
.wos-due{flex:none;display:inline-flex;align-items:center;gap:4px;margin-top:1px;padding:0 6px;border-radius:5px;font-size:12px;line-height:18px;white-space:nowrap;font-weight:600;color:var(--wos-ink2);border:1px dashed var(--wos-muted)}   /* due: a dashed box and a flag */
.wos-due.wos-soon{color:var(--wos-ink);border-color:var(--wos-ink)}
.wos-due .wos-ic{width:11px;height:11px}
.wos-card-x{display:flex;align-items:flex-start;gap:8px;margin:7px 0 0 30px;font-size:12.5px;color:var(--wos-muted);line-height:1.4}
.wos-pill{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;background:var(--wos-ink);color:var(--wos-surface);font-size:11.5px;font-weight:600;line-height:18px}
.wos-pill .wos-ic{width:11px;height:11px}
.wos-subs{list-style:none;margin:8px 0 0 30px;padding:0;display:flex;flex-direction:column;gap:5px}
.wos-subs li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35}
.wos-sub-t{font-weight:400;color:var(--wos-ink2);text-align:left;overflow-wrap:anywhere}
.wos-subs .wos-on+.wos-sub-t{text-decoration:line-through;color:var(--wos-muted)}
.wos-subs-more .wos-link{font-size:12.5px;font-weight:500;color:var(--wos-muted)}
.wos-sq{flex:none;width:15px;height:15px;margin-top:2px;border-radius:3px;border:1.5px solid var(--wos-muted)!important;background:transparent;display:inline-flex;align-items:center;justify-content:center}
.wos-sq:hover{border-color:var(--wos-ink)!important}
.wos-sq.wos-on{background:var(--wos-muted)!important}
.wos-sq.wos-on::after{content:'';width:4px;height:8px;border:solid var(--wos-surface);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.wos-card-f{display:flex;align-items:center;gap:4px 12px;margin:9px 0 0 30px;font-size:12px;color:var(--wos-muted)}
.wos-card-f>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.wos-card-f>.wos-card-p{display:block;flex:0 1 auto;min-width:0;margin-left:auto;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.wos-card-f>.wos-mono{margin-left:auto;width:22px;height:22px;font-size:9px;border-width:1.25px}
.wos-card-f>.wos-card-p+.wos-mono{margin-left:0}
.wos-card-f>.wos-warn{color:var(--wos-ink2)}
.wos-card-f>.wos-tag{font-size:11.5px;padding:0 7px}
.wos-card-p b{margin-right:3px}
/* the details row of risk rows in the command centre: an icon and a word each */
.wos-bits{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--wos-muted);line-height:1.4}
.wos-bits>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wos-bits>.wos-tag{gap:4px;font-size:11.5px;padding:1px 8px}
.wos-bits :is(.wos-bad,.wos-warn){color:var(--wos-ink)}
.wos-ic{width:13px;height:13px;flex:none}
/* the owner: a monogram; a dashed ring until they accept */
.wos-mono{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--wos-ink);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--wos-ink);background:var(--wos-surface)}
.wos-bits .wos-mono{width:22px;height:22px;font-size:9.5px;border-width:1.25px}
.wos-mono.wos-pending{border-style:dashed;border-color:var(--wos-muted);color:var(--wos-muted)}
/* who assigned it (soft) and who is kept informed (small, overlapping) */
.wos-av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--wos-acc-soft);border:1px solid var(--wos-line);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--wos-ink)}
.wos-av-s{width:20px;height:20px;font-size:8.5px;background:var(--wos-surface);border-color:var(--wos-muted);color:var(--wos-ink2);box-shadow:0 0 0 1.5px var(--wos-surface)}
.wos-avs{flex:none;display:inline-flex}
.wos-avs>.wos-av-s+.wos-av-s{margin-left:-5px}
/* the check circle */
.wos-chk{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.5px solid var(--wos-muted)!important;display:inline-flex;align-items:center;justify-content:center}
.wos-chk.wos-hi{border:1.5px dashed var(--wos-ink)!important}
.wos-chk.wos-urg{border:2.5px solid var(--wos-ink)!important}
.wos-chk:hover{background:var(--wos-sunk)!important}
.wos-chk.wos-on{background:var(--wos-ink)!important;border:1.5px solid var(--wos-ink)!important}
.wos-chk.wos-on::after{content:'';width:5px;height:9px;border:solid var(--wos-surface);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
/* the small ring in compact rows and the month: the same priority marks */
.wos-dot{flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--wos-muted)}
.wos-dot.wos-hi{border-style:dashed;border-color:var(--wos-ink)}
.wos-dot.wos-urg{border-width:2.5px;border-color:var(--wos-ink)}
.wos-dot.wos-lo{border-style:dotted}
.wos-dot.wos-on{background:var(--wos-muted);border-color:var(--wos-muted)}
.wos-dot-l{width:13px;height:13px}
.wos-cap{height:6px;border-radius:999px;background:var(--wos-line2);overflow:hidden;margin-top:8px}
.wos-cap i{display:block;height:100%;background:var(--wos-ink)}
.wos-cap i.wos-over{background:repeating-linear-gradient(135deg,var(--wos-ink) 0 4px,var(--g2) 4px 8px)}   /* over capacity: hatched */

/* planning pages (D-015): a list pane and a calendar pane side by side, each scrolling on its own */
.wos-plan2{display:grid;grid-template-columns:minmax(360px,580px) minmax(0,1fr);gap:8px;height:calc(100vh - 58px);min-height:560px}
.wos-wkv{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}   /* the canvas: 360 px for the week, 380 px for the month */
.wos-mov{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
.wos-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:12px}
.wos-pane-h{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 16px 10px}
.wos-pane-h h1{margin:0;font:400 30px/1 var(--serif);letter-spacing:-.015em}
.wos-lp-s .wos-pane-h h1{font-size:28px}
.wos-pane-s{flex:none;padding:0 16px 12px;font-size:12.5px;color:var(--wos-muted)}
.wos-pane-b{flex:1;min-height:0;overflow:auto;padding:0 8px 12px}
.wos-pane-f{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--wos-line2);font-size:13px}
.wos-foot-l{display:inline-flex;align-items:center;gap:8px}
.wos-pane-note{margin:0 8px 6px;font-size:12px;color:var(--wos-muted)}
.wos-sh{display:flex;align-items:baseline;gap:8px;margin:0;padding:14px 8px 6px;font-size:13px;font-weight:600;color:var(--wos-ink)}
.wos-sh-b{font-weight:700}
.wos-sh>.wos-muted{font-weight:500}
.wos-sh>.wos-push{font-size:12px}
.wos-cards{display:flex;flex-direction:column;gap:8px}
.wos-badge{display:inline-flex;align-items:center;padding:0 6px;border-radius:5px;background:var(--wos-acc-soft);color:var(--wos-ink2);font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.wos-badge-o{background:transparent;border:1px solid var(--wos-line);font-size:11.5px}
/* the add bar at the top of a list: opens quick add */
.wos-qa-bar{flex:none;display:flex;gap:4px;margin:0 12px 4px}
.wos-qa-open{flex:1;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 12px!important;border:1px solid var(--wos-line)!important;border-radius:8px;background:var(--wos-sunk)!important;color:var(--wos-muted);font-size:13.5px;text-align:left}
.wos-qa-open>span{flex:1}
.wos-qa-open>.wos-ic{width:16px;height:16px}
.wos-qa-open:hover{border-color:var(--wos-muted)!important}
/* waiting for you to accept: compact rows with a dashed edge */
.wos-waits{display:flex;flex-direction:column;gap:4px}
.wos-wait{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;border:1px dashed var(--wos-line)}
.wos-wait-b{flex:1;min-width:0}
.wos-wait-t{display:flex;align-items:center;gap:6px}
.wos-wait-t>.wos-link{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.wos-wait-m{margin-top:2px;font-size:12.5px;color:var(--wos-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-wait-f{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12.5px;color:var(--wos-muted);min-width:0}
.wos-wait-f>.wos-btn{min-height:28px}
.wos-ell{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* compact rows: Up next, Not scheduled, a day's No time */
.wos-mini{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;min-width:0;cursor:grab}
.wos-mini:hover{background:var(--wos-sunk)}
.wos-mini>.wos-chk{width:18px;height:18px;margin-top:0}
.wos-mini-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;text-align:left}
.wos-mini-f{flex:none;display:inline-flex;align-items:center;gap:6px}
.wos-mini.wos-closed .wos-mini-t{text-decoration:line-through;color:var(--wos-muted)}
.wos-mini-a{min-height:26px!important;padding:0 10px!important}
.wos-mini-tray{padding:5px 4px;font-size:13px}
.wos-mini-wk{flex-wrap:wrap;gap:2px 5px;padding:4px 5px;font-size:12px}
.wos-mini-wk .wos-mini-t{font-size:12px}
.wos-mini-wk .wos-mini-f{flex-basis:100%;padding-left:17px;font-size:11px;color:var(--wos-muted)}
.wos-mini-wk .wos-badge{padding:0;background:transparent;font-size:11px;font-weight:400}
.wos-mini-wk .wos-pill{font-size:10px;padding:0 5px}
.wos-zone-hint{padding:10px 4px}
/* the calendar pane: a header, the days side by side (hours at the left), due dates on top */
.wos-cp{overflow:auto}
.wos-cal-h{position:sticky;top:0;left:0;z-index:6;flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 12px 10px 14px;background:var(--wos-surface);border-radius:12px 12px 0 0}
.wos-cal-m{font-size:15px;font-weight:600}
.wos-cal-h .wos-seg>.wos-btn{min-height:24px;height:24px;padding:0 8px;font-size:12px}   /* the canvas's compact Days shown switch */
.wos-cal-big{font:400 22px/1 var(--serif)}
.wos-ib{width:28px;min-width:28px;padding:0!important;border-radius:6px!important}
.wos-ib>.wos-ic{width:16px;height:16px}
.wos-capm{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--wos-muted);white-space:nowrap}
.wos-capm>.wos-cap{width:72px;height:5px;margin:0}
.wos-capm.wos-bad{color:var(--wos-ink);font-weight:700}
.wos-pop{position:relative}
.wos-pop>summary{list-style:none}
.wos-pop>summary::-webkit-details-marker{display:none}
.wos-pop-b{position:absolute;right:0;top:36px;z-index:40;width:max-content;max-width:min(440px,90vw);display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.2)}
.wos-pop-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wos-pop-r .wos-input{min-height:32px;padding:4px 8px}
.wos-cg{flex:none;display:grid;grid-template-columns:56px repeat(var(--cols),minmax(0,1fr))}
.wos-cg-wk{grid-template-columns:44px repeat(7,minmax(96px,1fr))}
.wos-dayv[data-days="1"] .wos-cg{--cols:1!important}
.wos-dayv[data-days="1"] .wos-d2{display:none!important}
.wos-gut{font-size:11px;color:var(--wos-muted);text-align:center}
.wos-cg-h{position:sticky;top:var(--wos-calh,0px);z-index:5;padding:8px 0;border-top:1px solid var(--wos-line2);border-bottom:1px solid var(--wos-line2);background:var(--wos-surface)}
.wos-dh{position:sticky;top:var(--wos-calh,0px);z-index:5;min-width:0;padding:6px 7px 7px;border:1px solid var(--wos-line2);border-width:1px 0 1px 1px;background:var(--wos-surface)}
.wos-dh-n{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--wos-ink2)}
.wos-cg-wk .wos-dh-n{justify-content:flex-start;font-size:12.5px}
.wos-dh.wos-today .wos-dh-n{font-weight:600;color:var(--wos-ink)}
.wos-dh.wos-today .wos-dh-n>span{min-width:24px;height:22px;padding:0 5px;border-radius:6px;background:var(--wos-ink);color:var(--wos-surface);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.wos-dh>.wos-capm{display:flex;gap:5px;margin-top:4px;font-size:11px}
.wos-dh>.wos-capm>.wos-cap{flex:1;width:auto;height:4px}
.wos-wkend{background:var(--wos-sunk)}
.wos-cg-f{padding:7px 0;border-bottom:1px solid var(--wos-line)}
.wos-cg-f .wos-ic{width:12px;height:12px}
.wos-flags{min-width:0;min-height:32px;display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-left:1px solid var(--wos-line2);border-bottom:1px solid var(--wos-line)}
.wos-flag{flex:1 1 90px;min-width:0;padding:1px 7px;border:1px solid var(--wos-line)!important;border-radius:5px;font-size:11.5px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--wos-ink)}
.wos-flag.wos-pending{border-style:dashed!important;border-color:var(--wos-muted)!important;color:var(--wos-muted)}
.wos-tl-bare{border-left:1px solid var(--wos-line2)}
.wos-tl-bare .wos-hr>span{display:none}
.wos-tl-bare .wos-blk{left:3px;right:3px}
.wos-tl-bare>.wos-now{left:0}
.wos-tl-gut .wos-hr{gap:0}
.wos-tl-gut .wos-hr>span{width:100%;text-align:center}
.wos-tl-gut .wos-hr>i{visibility:hidden}
.wos-tl-gut>.wos-now-t{left:0;right:0;border-top:0;transform:translateY(-8px);background:var(--wos-surface);color:var(--wos-ink);font-size:11px;font-weight:700;text-align:center}
.wos-tl-gut>.wos-now-t::before{display:none}
.wos-cg-wk .wos-blk{padding:4px 6px 8px}
.wos-cg-wk .wos-blk-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:12px;line-height:1.25}
.wos-cg-wk .wos-blk-m{font-size:11px}
.wos-cg-nt{position:sticky;bottom:0;z-index:5;padding-top:8px;border-top:1px solid var(--wos-line);background:var(--wos-surface);font-size:10px;line-height:1.2}   /* No time stays in view at the bottom */
.wos-nt{position:sticky;bottom:0;z-index:5;min-width:0;min-height:90px;gap:2px;padding:6px 4px;border-top:1px solid var(--wos-line);border-left:1px solid var(--wos-line2);border-radius:0;background:var(--wos-surface)}
.wos-nt.wos-wkend{background:var(--wos-sunk)}
.wos-more{align-self:flex-start;padding:2px 5px;font-size:11.5px;font-weight:600;color:var(--wos-ink2)}
:not(.wos-more-open)>[data-more]{display:none!important}
.wos-tray{position:sticky;bottom:0;z-index:5;flex:none;max-height:36%;overflow:auto;padding:4px 10px 10px;border-top:1px solid var(--wos-line);background:var(--wos-surface);border-radius:0 0 12px 12px}
.wos-tray>.wos-sh{padding:8px 4px 6px;font-size:12.5px}
/* the month */
.wos-mg{flex:1 0 auto;display:grid;grid-template-columns:40px repeat(7,minmax(92px,1fr));grid-template-rows:auto;grid-auto-rows:minmax(112px,1fr);border-top:1px solid var(--wos-line2)}
.wos-mdow{padding:6px 8px;font-size:11.5px;font-weight:600;color:var(--wos-ink2)}
.wos-mdow.wos-wkend{color:var(--wos-muted)}
.wos-mw{padding:6px 0;border-top:1px solid var(--wos-line2);font-size:10.5px;font-weight:600}
.wos-mw.wos-today{color:var(--wos-ink);font-weight:700}
.wos-mc{min-width:0;gap:2px;padding:5px;border-top:1px solid var(--wos-line2);border-left:1px solid var(--wos-line2);border-radius:0;overflow:hidden}
.wos-mc.wos-other .wos-mc-d{color:var(--wos-muted)}
.wos-mc.wos-today{box-shadow:inset 0 0 0 1.5px var(--wos-ink)}
.wos-mc-h{display:flex;align-items:center;gap:6px;padding:0 3px 2px;font-size:11.5px;color:var(--wos-ink2)}
.wos-mc.wos-today .wos-mc-d{min-width:22px;height:18px;padding:0 5px;border-radius:5px;background:var(--wos-ink);color:var(--wos-surface);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.wos-mc-h>.wos-capm{margin-left:auto;gap:4px;font-size:10.5px}
.wos-mc-h>.wos-capm>.wos-cap{width:10px;height:6px;border-radius:1px}
.wos-me{display:flex;align-items:center;gap:5px;min-width:0;min-height:20px;padding:0 4px;border-radius:4px;font-size:11.5px}
.wos-me .wos-link{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:500}
.wos-me>.wos-dot{width:10px;height:10px}
.wos-me-blk{padding:0 5px;background:var(--wos-acc-soft);box-shadow:inset 3px 0 0 var(--wos-ink)}
.wos-me-at{flex:none;font-size:10.5px;color:var(--wos-muted)}
.wos-me-due{padding:0 5px;border:1px dashed var(--wos-muted)}
.wos-me-due>.wos-ic{width:11px;height:11px}
.wos-me-due.wos-pending{color:var(--wos-muted)}
.wos-me-done .wos-link{text-decoration:line-through;color:var(--wos-muted);font-weight:400}
.wos-me-carry .wos-link{font-weight:600;text-decoration:underline dashed 1px;text-underline-offset:3px}
.wos-past .wos-me-blk{background:repeating-linear-gradient(135deg,var(--wos-sunk) 0 4px,var(--wos-surface) 4px 8px);box-shadow:inset 0 0 0 1px var(--wos-line2);color:var(--wos-muted)}
.wos-me-plan{cursor:grab}
.wos-grip{flex:none;width:16px;align-self:stretch;min-height:28px;background-image:radial-gradient(var(--wos-muted) 1.2px,transparent 1.5px);background-size:6px 6px;background-position:center;opacity:.6;touch-action:none;cursor:grab}
.wos-card[data-pd]{cursor:grab;user-select:none;-webkit-user-select:none}
.wos-card.wos-dragsrc,.wos-chip.wos-dragsrc{opacity:.35}
.wos-drag-ghost{position:fixed;z-index:1100;pointer-events:none;padding:9px 14px;border-radius:10px;background:var(--wos-ink);color:var(--wos-surface);font-size:13px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.3);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-tl{position:relative;isolation:isolate;user-select:none;-webkit-user-select:none}
.wos-hr{position:absolute;left:0;right:0;display:flex;gap:12px;align-items:flex-start;pointer-events:none}
.wos-hr span{width:42px;font-size:11px;color:var(--wos-muted);transform:translateY(-8px);text-align:right;flex:none}
.wos-hr i{flex:1;border-top:1px solid var(--wos-line2)}
.wos-hr.wos-half i{border-top-style:dashed;opacity:.6}
.wos-now{position:absolute;left:52px;right:0;border-top:2px solid var(--wos-ink);pointer-events:none;z-index:3}
.wos-now::before{content:'';position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--wos-ink)}
.wos-blk{position:absolute;left:58px;right:6px;border-radius:10px;padding:5px 12px 10px;background:var(--wos-ink);color:var(--wos-surface);cursor:grab;touch-action:none;overflow:hidden;display:flex;flex-direction:column;z-index:1}
.wos-blk:hover{box-shadow:0 0 0 2px var(--wos-surface),0 0 0 4px var(--wos-ink)}
.wos-blk.wos-free{background:var(--wos-sunk) radial-gradient(var(--dot) 1px,transparent 1.4px) 0 0/8px 8px;color:var(--wos-ink);box-shadow:inset 0 0 0 1px var(--wos-line)}   /* pepper: free time */
.wos-blk.wos-done{background:repeating-linear-gradient(135deg,var(--wos-sunk) 0 6px,var(--wos-surface) 6px 12px);color:var(--wos-muted);box-shadow:inset 0 0 0 1px var(--wos-line)}
.wos-blk.wos-done .wos-blk-t{text-decoration:line-through}
.wos-blk.wos-dragging{cursor:grabbing;box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 0 2px var(--wos-surface),0 0 0 4px var(--wos-ink);z-index:4;opacity:.95}
.wos-blk.wos-clash{outline:2px dashed var(--wos-ink);outline-offset:2px;opacity:.6}
.wos-blk.wos-preview{background:var(--wos-sunk);color:var(--wos-ink);border:2px dashed var(--wos-ink);pointer-events:none;z-index:2}
/* Google Calendar meetings (D-029): read-only bands behind the blocks, hatched with a dashed edge; a block over one moves
   aside so the meeting's name stays readable, and says what it clashes with */
.wos-mtg{position:absolute;left:58px;right:6px;border-radius:10px;padding:4px 10px;background:repeating-linear-gradient(45deg,var(--wos-surface) 0 5px,var(--wos-sunk) 5px 8px);border:1px dashed var(--wos-muted);color:var(--wos-ink);overflow:hidden;z-index:0;cursor:default}
.wos-tl-bare .wos-mtg{left:3px;right:3px}
.wos-mtg-t{font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-mtg-m{font-size:11px;color:var(--wos-muted);white-space:nowrap}
.wos-tl .wos-blk.wos-mtg-clash{left:42%}
/* Personal time (D-032): a hatched band behind the work, with a solid edge (a meeting's is dashed); work over it moves
   aside and says "Overlaps …" */
.wos-blk.wos-pers{background:repeating-linear-gradient(-45deg,var(--wos-surface) 0 4px,var(--wos-sunk) 4px 8px);color:var(--wos-ink);box-shadow:inset 0 0 0 1px var(--wos-muted);z-index:0}
.wos-blk.wos-pers .wos-blk-m{color:var(--wos-muted)}
.wos-tl .wos-blk.wos-pers-over{left:42%}
.wos-pers-h{margin-left:8px;white-space:nowrap}
.wos-card-pers{font-style:italic}
.wos-pers-page .wos-sect{margin:0 0 18px;padding-top:0;border-top:0}
.wos-pers-page .wos-sect+.wos-sect{padding-top:18px;border-top:1px solid var(--wos-line2)}
.wos-rt{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--wos-line2)}
.wos-rt-title{flex:1 1 220px;min-width:160px}
.wos-rt-days{display:inline-flex;gap:3px}
.wos-rt-day{position:relative;display:inline-flex}
.wos-rt-day input{position:absolute;opacity:0;width:1px;height:1px}
.wos-rt-day span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--wos-line);font-size:12px;font-weight:600;color:var(--wos-muted);cursor:pointer}
.wos-rt-day input:checked+span{background:var(--wos-ink);border-color:var(--wos-ink);color:var(--wos-surface)}
.wos-rt-day input:focus-visible+span{outline:2px solid var(--wos-ink);outline-offset:2px}
.wos-pers-add{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 12px}
.wos-pers-add>.wos-input:first-of-type{flex:1 1 240px}
.wos-pers-list{display:flex;flex-direction:column;gap:8px}
.wos-blk-x{flex:none;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-allday{flex:1 1 90px;min-width:0;padding:1px 7px;border:1px dashed var(--wos-muted);border-radius:5px;font-size:11.5px;background:repeating-linear-gradient(45deg,var(--wos-surface) 0 5px,var(--wos-sunk) 5px 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-calst{display:inline-flex;align-items:center;gap:4px;margin-left:8px;white-space:nowrap}
.wos-calst>.wos-ic{width:13px;height:13px}
.wos-blk-t{flex:none;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-blk-m{flex:none;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-rz{position:absolute;left:0;right:0;bottom:0;height:12px;cursor:ns-resize;touch-action:none}
.wos-rz::after{content:'';position:absolute;left:50%;bottom:4px;width:28px;height:3px;margin-left:-14px;border-radius:2px;background:currentColor;opacity:.5}


/* proposals */
.wos-prop{padding:0;overflow:hidden}
.wos-prop-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--wos-line2)}
.wos-prop-h h3{margin:0 0 4px;font-size:16px;color:var(--wos-ink)}
.wos-prop-b{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:18px;padding:14px 18px}
.wos-prop-f{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--wos-sunk);border-top:1px solid var(--wos-line2)}
.wos-hdrs{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:10px 0;font-size:13px}
.wos-hdrs dt{color:var(--wos-muted)} .wos-hdrs dd{margin:0;overflow-wrap:anywhere}
.wos-msg{white-space:pre-wrap;font-size:13.5px;padding:10px 12px;border-radius:var(--wos-r);background:var(--wos-sunk);max-height:340px;overflow:auto}
.wos-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wos-kv span{display:block;font-size:12px;color:var(--wos-muted)}
.wos details summary{cursor:pointer;color:var(--wos-ink);font-weight:600;font-size:12.5px;margin-top:6px;text-decoration:underline dotted 1px;text-underline-offset:3px}

/* tables */
.wos-table{overflow-x:auto;background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:var(--wos-r-lg)}
.wos-table table{width:100%;border-collapse:collapse}
.wos-table th{text-align:left;font-size:12px;font-weight:600;color:var(--wos-muted);padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--wos-line)}
.wos-table td{padding:9px 12px;border-top:1px solid var(--wos-line2);vertical-align:middle}
.wos-table tbody tr:first-child td{border-top:0}
.wos-click{cursor:pointer}
.wos-click:hover td{background:var(--wos-sunk)}
.wos-group td{background:var(--wos-sunk);font-weight:600;font-size:12.5px;color:var(--wos-ink2)}
.wos-c-chk{width:36px}
.wos-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* board, calendar */
.wos-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.wos-tasks>.wos-board{margin:0 -16px;padding:12px;border-top:1px solid var(--wos-line2)}   /* edge to edge under the filters, as on the canvas */
.wos-col{flex:1 1 0;min-width:230px;background:var(--wos-sunk);border-radius:12px;padding:10px 8px 8px;display:flex;flex-direction:column;gap:8px;min-height:220px}
.wos-col-min{flex:0 0 44px;min-width:44px;align-self:stretch;align-items:center;gap:8px;padding:12px 0;background:transparent;border:1px dashed var(--wos-line)}   /* Cancelled: a dashed strip, as on the canvas */
.wos-col-v{writing-mode:vertical-rl;font-size:12.5px;font-weight:600;color:var(--wos-muted)}
.wos-col-n{font-size:12.5px;font-weight:500;color:var(--wos-muted)}
.wos-col-note{font-size:12px;font-weight:500;color:var(--wos-muted)}
.wos-col-add{align-self:flex-start;min-height:30px;padding:0 8px;border-radius:8px!important;color:var(--wos-muted);font-weight:500;font-size:13px}
.wos-col-add:hover{color:var(--wos-ink)}
.wos-col-add>.wos-ic{width:13px;height:13px}
.wos-col h3{margin:0 4px 2px;font-size:13px;font-weight:600;color:var(--wos-ink);display:flex;align-items:center;gap:8px}
.wos-col-fb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:-4px;border-radius:6px;color:var(--wos-muted)}
.wos-col-fb:hover{background:var(--wos-surface);color:var(--wos-ink)}
.wos-col-fb>.wos-ic{width:14px;height:14px}
/* Done folded (0.13.1): the Cancelled strip's look; the zone still takes a drop; the other columns share its room */
.wos-col.wos-folded{flex:0 0 44px;min-width:44px;align-self:stretch;align-items:center;padding:8px 0;background:transparent;border:1px dashed var(--wos-line)}
.wos-folded>h3{flex-direction:column;gap:8px;margin:0}
.wos-folded>h3>.wos-st,.wos-folded>h3>.wos-col-note{display:none}
.wos-folded .wos-col-t{writing-mode:vertical-rl;font-size:12.5px;color:var(--wos-muted)}
.wos-folded>h3>.wos-muted{font-size:12.5px;font-weight:500}
.wos-folded .wos-col-fb{order:-1;margin:0;transform:rotate(180deg)}
.wos-folded>.wos-zone{align-self:stretch;flex:1 1 auto;min-height:64px}
.wos-folded>.wos-zone>*{display:none}
.wos-zone{display:flex;flex-direction:column;gap:8px;min-height:64px;border-radius:12px}
/* 0.12.1: the board fits the window (wos.js fitBoard) and each column scrolls its own cards; headings stay put */
.wos-board.wos-board-fit{overflow-y:hidden}
.wos-board-fit>.wos-col{max-height:100%;min-height:0}
.wos-board-fit>.wos-col>.wos-zone{position:relative;flex:1 1 auto;min-height:64px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px;margin:-2px}   /* relative: the cards' screen-reader labels stay inside the column, not below the page */
.wos-zone.wos-over{background:var(--wos-sunk) radial-gradient(var(--dot) 1px,transparent 1.4px) 0 0/8px 8px;outline:2px dashed var(--wos-ink)}   /* pepper: space you can fill */
.wos-cal{display:grid;grid-template-columns:repeat(7,minmax(100px,1fr));border:1px solid var(--wos-line);border-radius:var(--wos-r-lg);overflow:hidden;background:var(--wos-surface)}
.wos-dow{padding:8px 10px;font-size:12px;font-weight:600;color:var(--wos-muted);border-bottom:1px solid var(--wos-line)}
.wos-cell{min-height:104px;padding:6px;border-top:1px solid var(--wos-line2);border-left:1px solid var(--wos-line2);gap:4px;border-radius:0}
.wos-cell.wos-other{background:var(--wos-sunk)}
.wos-cell.wos-today .wos-dn{background:var(--wos-ink);color:var(--wos-surface)}
.wos-dn{font-size:12px;font-weight:600;align-self:flex-start;padding:1px 7px;border-radius:999px}
.wos-chip{display:block;width:100%;text-align:left;font-size:12px;font-weight:600;padding:3px 7px;border-radius:6px;background:var(--wos-sunk)!important;border:1px solid var(--wos-line)!important;color:var(--wos-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.wos-chip.wos-issue{border-left:3px solid var(--wos-ink)!important}
.wos-chip.wos-done{opacity:.5;text-decoration:line-through}
.wos-chip.wos-late{background:var(--wos-ink)!important;color:var(--wos-surface);border-color:var(--wos-ink)!important}   /* overdue: inverted */

/* command centre */
.wos-filters{gap:8px}
.wos-filters .wos-input{min-height:36px}
/* command centre: one pulse panel, then counts that open the work behind them */
.wos-pulse{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
.wos-kpi{padding:18px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wos-kpi b{font:400 48px/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:normal}
.wos-kpi-l{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--wos-muted)}
.wos-pulse .wos-kpi+.wos-kpi{border-left:1px solid var(--wos-line2)}
.wos-kpi.wos-alert{box-shadow:inset 0 3px 0 var(--wos-ink)}   /* over its threshold: a rule on top */
.wos-kpi.wos-alert .wos-kpi-l{color:var(--wos-ink)}
.wos-needs h2{margin:0 0 10px;font-size:15px;font-weight:600}
.wos-needs-row{display:flex;flex-wrap:wrap;gap:10px}
.wos-needs-b{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid var(--wos-ink);background:var(--wos-surface);color:var(--wos-ink)}
.wos-needs-b b{font:400 26px/1 var(--serif)}
.wos-needs-b span{font-size:13.5px;font-weight:600}
.wos-needs-b:hover{background:var(--wos-ink);color:var(--wos-surface)}
.wos-needs-b.wos-zero{border-color:var(--wos-line);color:var(--wos-muted);cursor:default}
.wos-needs-b.wos-zero:hover{background:var(--wos-surface);color:var(--wos-muted)}
.wos-risk{display:flex;gap:12px;align-items:flex-start;padding:12px 8px;margin:0 -8px;border-radius:10px;border-top:1px solid var(--wos-line2);cursor:pointer}
.wos-risk:first-of-type{border-top:0}
.wos-risk:hover{background:var(--wos-sunk)}
.wos-risk>.wos-mono{margin-top:2px}
.wos-risk-b{flex:1;min-width:0}
.wos-risk-t{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.wos-chg{font-size:12px;font-weight:600}
.wos-chg.wos-up{color:var(--wos-ink2)} .wos-chg.wos-down{color:var(--wos-ink);font-weight:700} .wos-chg.wos-flat{color:var(--wos-muted)}
.wos-ico{flex:none;width:16px;height:16px}
.wos-charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.wos-chart{margin:0}
.wos-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px;font-size:12.5px;color:var(--wos-ink2)}
.wos-key{display:inline-flex;gap:6px;align-items:center}
.wos-key-line{width:16px;height:2px;border-radius:1px;background:var(--c)}
/* line chart keys follow wos.js: Created dashed --g3 with square points, Closed solid ink */
.wos-chart[data-chart="line"] .wos-key:nth-child(1) .wos-key-line{height:0;background:none;border-top:2px dashed var(--g3)}
.wos-chart[data-chart="line"] .wos-key:nth-child(2) .wos-key-line{background:var(--wos-ink)}
.wos-key-box{width:10px;height:10px;border-radius:2px;background:var(--c)}
.wos-plot{position:relative;height:260px}
.wos-plot:focus-visible{outline-offset:4px}
.wos-plot svg{display:block;overflow:visible}
.wos-plot text{font-size:11px;fill:var(--wos-muted);font-variant-numeric:tabular-nums}
.wos-plot .wos-end{fill:var(--wos-ink);font-weight:600}
.wos-tv{margin-top:10px}
.wos-tv .wos-table{margin-top:8px}
.wos-hb{display:flex;flex-direction:column;gap:6px}
.wos-hb-row{display:grid;grid-template-columns:minmax(90px,160px) minmax(0,1fr);gap:12px;align-items:center;min-height:28px;padding:0 4px;border-radius:6px}
.wos-hb-row[data-tip]:hover,.wos-hb-row[data-tip]:focus-visible{background:var(--wos-sunk)}
.wos-hb-l{font-size:12.5px;line-height:1.25;color:var(--wos-ink2);overflow-wrap:anywhere}
.wos-hb-track{position:relative;display:flex;align-items:center;height:28px;background-image:linear-gradient(to right,var(--wos-grid) 1px,transparent 1px);background-size:calc((100% - 40px) / var(--ticks)) 100%;background-repeat:repeat-x}
.wos-hb-bar{display:flex;gap:2px;height:16px;border-radius:0 4px 4px 0;overflow:hidden}
/* chart segments: WOS_UI calls them .wos-seg, which is also the segmented button group, so they are only
   styled inside a bar (the unscoped rule collapsed Previous / Today / Next into a column; static.test.js guards it) */
:is(.wos-hb-bar,.wos-sla-bar)>.wos-seg{display:flex;flex-basis:0;align-items:center;justify-content:center;min-width:2px;padding:0;border:0;border-radius:0;background:var(--c);font-style:normal}
:is(.wos-hb-bar,.wos-sla-bar)>.wos-seg b{padding:0 4px;font-size:11px;font-weight:600;color:var(--wos-ink)}
:is(.wos-hb-bar,.wos-sla-bar)>.wos-seg[data-on="dark"] b{color:var(--rail-ink)}   /* wos.js picks white or black by the fill's lightness */
:is(.wos-hb-bar,.wos-sla-bar)>.wos-seg[data-on="light"] b{color:var(--rail)}
.wos-hb-v{margin-left:6px;font-size:12px;font-weight:600}
.wos-hb-axis{min-height:16px}
.wos-hb-axis .wos-hb-track{height:16px;background:none}
.wos-tick{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--wos-muted);font-variant-numeric:tabular-nums}
.wos-sla-bar{display:flex;gap:2px;height:20px;border-radius:4px;overflow:hidden}
.wos-sla-bar>.wos-seg{min-width:4px}
.wos-st-good{--c:var(--wos-st-good)} .wos-st-warn{--c:var(--wos-st-warn)} .wos-st-crit{--c:var(--wos-st-crit)}
.wos-sla-keys{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.wos-sla-keys li{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;font-size:13px;color:var(--wos-ink2)}
.wos-sla-keys .wos-ico{color:var(--c)}
.wos-sla-keys b{color:var(--wos-ink);font-variant-numeric:tabular-nums}
.wos-meter-row{display:flex;gap:8px;align-items:center}
.wos-meter{display:block;width:80px;height:8px;border-radius:999px;background:var(--wos-line2);overflow:hidden}
.wos-meter i{display:block;height:100%;border-radius:999px;background:var(--wos-ink)}
.wos-meter i.wos-over{background:repeating-linear-gradient(135deg,var(--wos-ink) 0 4px,var(--g2) 4px 8px)}   /* over capacity: hatched */
.wos-table.wos-flat{border:0;border-radius:0}
.wos-sort th button{display:inline-flex;gap:4px;align-items:center;color:inherit;font-weight:600;white-space:nowrap}
.wos-sort th[aria-sort] button{color:var(--wos-ink)}
.wos-tip{position:fixed;z-index:1200;min-width:120px;max-width:260px;padding:8px 10px;border:1px solid var(--wos-line);border-radius:8px;background:var(--wos-surface);color:var(--wos-ink);box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:12.5px;pointer-events:none}
.wos-tip-t{margin-bottom:4px;font-size:12px;color:var(--wos-ink2)}
.wos-tip-r{display:grid;grid-template-columns:12px auto 1fr;gap:6px;align-items:center}
.wos-tip-r i{width:12px;height:2px;border-radius:1px;background:var(--c)}
.wos-tip-r i[data-dash]{height:0;background:none;border-top:2px dashed var(--c)}
.wos-tip-r span{color:var(--wos-ink2)}
.wos-busy{opacity:.6;transition:opacity .15s}

/* the task page (D-017): properties as rows with pickers, then subtasks, the description, the email, the feed */
.wos-itempage{padding:36px 24px 40px}   /* the page panel frames it; the text column is 780 px, as on the canvas */
.wos-crumbs{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px 0 18px;border-bottom:1px solid var(--wos-line2);font-size:13px;color:var(--wos-muted)}
.wos-crumbs>b{color:var(--wos-ink);font-weight:600}
.wos-crumb{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.wos-crumb:hover{color:var(--wos-ink);text-decoration:underline}
.wos-crumbs .wos-btn{min-height:30px;font-size:13px;font-weight:500;color:var(--wos-ink2)}
.wos-crumbs .wos-btn .wos-ic{width:14px;height:14px}
.wos-crumbs .wos-ib{width:30px;min-width:30px}
.wos-itempage .wos-item-pg{display:none}
.wos-item{display:flex;flex-direction:column;max-width:780px;margin:0 auto}
.wos-item-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--wos-muted)}
.wos-item-t{margin:10px 0 22px;font:400 38px/1.12 var(--serif);letter-spacing:-.015em;color:var(--wos-ink);overflow-wrap:anywhere}
textarea.wos-title-in{display:block;width:calc(100% + 8px);margin-left:-4px;padding:2px 4px;border:0;border-radius:6px;background:transparent;resize:none;overflow:hidden}
textarea.wos-title-in:hover{background:var(--wos-sunk)}
.wos-props{display:flex;flex-direction:column;margin:4px 0 6px}
.wos-pr{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;min-height:36px}
.wos-pr-k{display:flex;align-items:center;gap:10px;color:var(--wos-muted);font-size:14px}
.wos-pr-k>.wos-ic{width:16px;height:16px}
.wos-pr-v{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-size:14px}
.wos-pr-v .wos-mono{width:22px;height:22px;font-size:9px;border-width:1.25px}
.wos-pr-note{font-size:13px;color:var(--wos-muted)}
.wos-pv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:30px;margin-left:-8px;padding:0 8px!important;border-radius:6px;text-align:left}
.wos-pv:hover,.wos-pv[aria-expanded="true"]{background:var(--wos-sunk)!important}
.wos-pv-in{width:72px;min-height:30px;margin-left:-8px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:14px}
.wos-pv-in:hover,.wos-pv-in:focus{border-color:var(--wos-line);background:var(--wos-surface)}
.wos-menu{position:absolute;left:-8px;top:calc(100% + 2px);z-index:50;width:310px;max-height:380px;overflow:auto;padding:6px;background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.24)}
.wos-menu-r{left:auto;right:0;width:220px}
.wos-menu-q,.wos-menu-date{min-height:32px;margin-bottom:4px;background:var(--wos-sunk)}
.wos-menu-t{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.wos-menu-t>.wos-menu-time{flex:1;min-height:32px;background:var(--wos-sunk)}
.wos-due-hint{padding:2px 8px 6px;font-weight:600;color:var(--wos-ink)}
.wos-menu-l{padding:8px 8px 4px;font-size:11.5px;font-weight:600;color:var(--wos-muted)}
.wos-mi{width:100%;display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 8px!important;border-radius:6px;font-size:13.5px;font-weight:400!important;text-align:left;color:var(--wos-ink)!important}
.wos-mi:hover,.wos-mi:focus-visible{background:var(--wos-sunk)!important;outline:none}
.wos-mi>span:not([class]){flex:1;min-width:0}
.wos-mi small{font-size:11.5px;color:var(--wos-muted)}
.wos-mi-on{display:inline-flex}
.wos-mi-on>.wos-ic{width:14px;height:14px}
.wos-menu-sep{height:1px;margin:4px 0;background:var(--wos-line2)}
.wos-menu-foot{margin-top:4px;padding:8px 8px 4px;border-top:1px solid var(--wos-line2);font-size:12px;color:var(--wos-muted)}
.wos-menu-list{max-height:220px;overflow:auto}
.wos-pj{flex:none;width:20px;height:20px;border-radius:5px;background:var(--wos-acc-soft);border:1px solid var(--wos-line);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--wos-ink)}
.wos-person{display:inline-flex;align-items:center;gap:6px}
/* workflow states: open ring, half = in progress, filled ink = blocked, dotted = waiting on the client, filled grey = done */
.wos-st{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--wos-muted)}
.wos-st-wip{border-color:var(--wos-ink);background:linear-gradient(90deg,var(--wos-ink) 50%,transparent 50%)}
.wos-st-block{border-color:var(--wos-ink);background:var(--wos-ink)}
.wos-st-wait{border-style:dotted;border-color:var(--wos-ink)}
.wos-st-done{border-color:var(--wos-muted);background:var(--wos-muted)}
.wos-st-off{border-color:var(--wos-line);background:repeating-linear-gradient(135deg,var(--wos-line) 0 2px,transparent 2px 4px)}
.wos-stp{display:inline-flex;align-items:center;gap:7px;padding:1px 10px 1px 8px;border-radius:999px;background:var(--wos-acc-soft);color:var(--wos-ink);font-size:13px;font-weight:600}
.wos-stp-block{background:var(--wos-ink);color:var(--wos-surface)}
.wos-stp-block>.wos-st{border-color:var(--wos-surface);background:var(--wos-surface)}
.wos-stp-done,.wos-stp-off{background:transparent;box-shadow:inset 0 0 0 1px var(--wos-line);color:var(--wos-muted)}
.wos-stp-wait{background:transparent;box-shadow:inset 0 0 0 1px var(--wos-ink)}
.wos-sect{margin-top:22px;padding-top:18px;border-top:1px solid var(--wos-line2)}
.wos-sect-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wos-sect-h>h2{margin:0;font-size:15px;font-weight:600}
.wos-subl{display:flex;flex-direction:column;border-top:1px solid var(--wos-line2)}
.wos-subrow{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--wos-line2)}
.wos-subrow>.wos-sq{width:16px;height:16px;margin-top:0}
.wos-subrow>.wos-sub-t{flex:1;min-width:0;font-size:14px;color:var(--wos-ink)}
.wos-subrow.wos-closed>.wos-sub-t{text-decoration:line-through;color:var(--wos-muted)}
.wos-subrow>.wos-mono{width:22px;height:22px;font-size:9px;border-width:1.25px}
/* 0.12: a subtask sent to a team's queue waits as a dashed square; progress per team in the header (D-031) */
.wos-subrow>.wos-sq-wait{border-style:dashed!important}
.wos-sub-req>.wos-sub-t{color:var(--wos-muted)}
.wos-sub-teams{margin-left:12px}
.wos-sub-add{flex-direction:row;align-items:center;gap:8px;padding:6px 0;color:var(--wos-muted)}
.wos-sub-add>.wos-input{min-height:32px}
.wos-sub-add>#wos-s-title{flex:1;border-color:transparent;background:transparent}
.wos-sub-add:not(:focus-within):has(#wos-s-title:placeholder-shown)>:is(select,input[type="date"],.wos-btn){display:none}   /* "+ Add a subtask" until used */
.wos-sub-add:not(:focus-within):has(#wos-s-title:placeholder-shown){min-height:34px;padding:0}
.wos-sub-add>#wos-s-title::placeholder{color:var(--wos-muted);opacity:1}
/* Markdown (descriptions and comments): drawn by wos.js from an escaped source */
.wos-md{font-size:15px;line-height:1.6;color:var(--wos-ink2);overflow-wrap:anywhere}
.wos-md-out>:first-child{margin-top:0}
.wos-md-out>:last-child{margin-bottom:0}
.wos-md p{margin:0 0 10px}
.wos-md :is(h3,h4,h5){margin:16px 0 6px;font-size:16px;font-weight:600;color:var(--wos-ink)}
.wos-md h3{font-size:18px}
.wos-md strong{color:var(--wos-ink)}
.wos-md a{color:var(--wos-ink);text-decoration:underline;text-underline-offset:3px}
.wos-md code{padding:1px 5px;border-radius:4px;background:var(--wos-sunk);font:13px/1.4 ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.wos-md pre{margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--wos-sunk);overflow:auto}
.wos-md pre code{padding:0;background:none}
.wos-md blockquote{margin:0 0 10px;padding:2px 12px;border-left:3px solid var(--wos-line);color:var(--wos-muted)}
.wos-md :is(ul,ol){margin:0 0 10px;padding-left:22px}
.wos-md .wos-md-cl{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:4px}
.wos-md-cl>li{display:flex;align-items:flex-start;gap:10px}
.wos-md-cl .wos-sq{width:16px;height:16px;margin-top:5px}
.wos-md-cl>li.wos-on>span:last-child{text-decoration:line-through;color:var(--wos-muted)}
.wos-md .wos-md-sub{margin-left:22px}
.wos-md hr{margin:14px 0;border:0;border-top:1px solid var(--wos-line2)}
.wos-md-in{min-height:220px;font:13px/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.wos-md-src>.wos-row{margin-top:8px}
/* the original email: headers, attachments and the text as captured */
.wos-mail{margin-top:22px;border:1px solid var(--wos-line);border-radius:12px;overflow:hidden}
.wos-mail-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;background:var(--wos-sunk);border-bottom:1px solid var(--wos-line2);font-size:14px}
.wos-mail-h>.wos-ic{width:16px;height:16px}
.wos-mail-shut>.wos-mail-h{border-bottom:0}
.wos-mail-shut .wos-seg{display:none}
.wos-mail-shut .wos-seg+.wos-btn{margin-left:auto}
.wos-mail-fold>.wos-ic{transition:transform .15s}
.wos-mail-fold[aria-expanded="true"]>.wos-ic{transform:rotate(180deg)}
.wos-mail-b{padding:14px 16px 16px}
.wos-mail-b>.wos-hdrs{margin:0 0 10px}
.wos-atts{margin:0 0 10px}
.wos-att{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--wos-line);border-radius:7px;font-size:12.5px}
.wos-mail-b .wos-msg{max-height:none;background:var(--wos-surface);border:1px solid var(--wos-line2)}
.wos-att>.wos-muted{margin-left:2px}
/* the formatted email: a sandboxed frame on white paper, in greys like the rest of the app (D-019) */
.wos-mail-frame{display:block;width:100%;height:160px;border:1px solid var(--wos-line2);border-radius:8px;background:#fff;filter:grayscale(1)}
.wos-mail-safe{display:flex;align-items:center;gap:6px;margin-top:8px}
.wos-mail-safe>.wos-ic{width:13px;height:13px}
/* comments and the history */
.wos-feed{display:flex;flex-direction:column;gap:12px;font-size:13px}
.wos-ev{display:flex;align-items:baseline;gap:8px;color:var(--wos-muted)}
.wos-ev-d{flex:none;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--wos-muted);transform:translateY(-1px)}
.wos-ev b{color:var(--wos-ink2);font-weight:600}
.wos-cmt{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--wos-line2);border-radius:10px}
.wos-cmt-b{flex:1;min-width:0}
.wos-cmt .wos-md{margin-top:3px;font-size:14px}
.wos-cbox{gap:6px;padding:10px 12px;border:1px solid var(--wos-line);border-radius:10px}
.wos-cbox>textarea{min-height:54px;padding:0;border:0;background:transparent}
/* Tasks and issues: the heading, the view switch, then a filter box and pickers */
.wos-tasks{gap:12px}
.wos-th{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.wos-th>h1{margin:0;font:400 28px/1 var(--serif);letter-spacing:-.015em}
.wos-search{display:flex;align-items:center;gap:8px;width:220px;height:32px;padding:0 10px;border:1px solid var(--wos-line);border-radius:8px;background:var(--wos-sunk);color:var(--wos-muted)}
.wos-search>.wos-ic{width:14px;height:14px}
.wos-search>.wos-input{flex:1;min-width:0;min-height:0;height:28px;font-size:13px;padding:0;border:0;background:transparent}
.wos-pick{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 10px;border:1px solid var(--wos-line);border-radius:8px;font-size:13px}
.wos-pick>span{color:var(--wos-muted)}
.wos-pick>.wos-input{width:auto;min-height:0;height:28px;font-size:13px;padding:0 4px;border:0;background:transparent;font-weight:600;cursor:pointer}
.wos-pick:hover{border-color:var(--wos-muted)}

/* dialog, toast */
dialog.wos-dlg{width:min(920px,94vw);max-height:90vh;padding:0;border:1px solid var(--wos-line);border-radius:var(--wos-r-lg);background:var(--wos-surface);color:var(--wos-ink);box-shadow:var(--shadow)}
dialog.wos-dlg::backdrop{background:rgba(0,0,0,.4)}
.wos-dlg-h{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;padding:12px 16px;background:var(--wos-surface);border-bottom:1px solid var(--wos-line2)}
.wos-dlg-h h2{margin:0;flex:1;font-size:16px}
.wos-dlg-b{padding:20px 28px 28px;overflow:auto}
.wos-dlg-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--wos-line2)}
.wos-dlg-f:empty{display:none}
.wos-dlg-err{padding:8px 12px;border-radius:var(--wos-r);background:var(--wos-surface);color:var(--wos-ink);box-shadow:0 0 0 2px var(--wos-ink);font-weight:600}
.wos-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:1000;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:600;transition:all .2s;pointer-events:none;max-width:90vw}
.wos-toast.wos-on{opacity:1;transform:translateX(-50%) translateY(0)}
.wos-toast.wos-err{background:var(--surface);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}   /* error: surface with an ink ring */

/* Appearance: Light, Auto, Dark at the bottom of the navigation (wos.js adds it; the choice stays in this browser) */
#t_Body_nav{display:flex;flex-direction:column}
#t_Body_nav>.t-TreeNav{flex:0 0 auto;height:auto!important;min-height:0!important}
.wos-theme{flex:none;display:flex;flex-direction:column;gap:6px;margin:0;font-family:var(--sans)}
.wos-theme-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* named for screen readers; the canvas shows the switch alone */
.wos-theme-seg{display:flex;gap:0;padding:3px;border:1px solid var(--line2);border-radius:8px;background:var(--sunk)}
.wos-theme-seg button{flex:1;min-height:26px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 12px/1 var(--sans);cursor:pointer}
.wos-theme-seg button:hover{color:var(--ink);background:var(--acc-soft)}
.wos-theme-seg button[aria-pressed="true"]{background:var(--acc-soft);color:var(--ink)}
.wos-theme :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wos-theme-short{display:none}
.js-navCollapsed .wos-theme{margin:0}
.js-navCollapsed .wos-theme-l{display:none}
.js-navCollapsed .wos-theme-seg{flex-direction:column}
.js-navCollapsed .wos-theme-full{display:none}
.js-navCollapsed .wos-theme-short{display:inline}
@media (max-width:479.98px){.js-navCollapsed .wos-theme{visibility:hidden}}   /* phones: UT hides the collapsed rail's items; the control is in the open menu */

/* quick add (wos.js): a floating bar over any page; Q, Ctrl/Cmd+K, the Quick add button or the round + button */
dialog.wos-qa-pop{width:min(640px,calc(100vw - 24px));max-height:none;margin:12vh auto auto;padding:0;border:1px solid var(--wos-line);border-radius:16px;background:var(--wos-surface);color:var(--wos-ink);box-shadow:var(--shadow);overflow:visible}
dialog.wos-qa-pop::backdrop{background:rgba(0,0,0,.35)}
dialog.wos-qa-pop[open]{animation:wos-qa-in .14s ease-out}
@keyframes wos-qa-in{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.wos-qa-row{display:flex;align-items:center;gap:8px;padding:12px 16px}
.wos-qa-row>.wos-ic{width:20px;height:20px;color:var(--wos-ink)}
.wos-qa-in{flex:1;min-width:0;min-height:44px;border:0;background:transparent;font-size:18px;color:var(--wos-ink)}
.wos-qa-in:focus-visible{outline:none}
.wos-qa-in::placeholder{color:var(--wos-muted)}
.wos-qa-list{margin:0;padding:6px 8px;list-style:none;border-top:1px solid var(--wos-line2);max-height:260px;overflow-y:auto}
.wos-qa-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.wos-qa-list li b{font-weight:600}
.wos-qa-list li span{color:var(--wos-muted);font-size:12.5px;white-space:nowrap}
.wos-qa-list li[aria-selected="true"],.wos-qa-list li:hover{background:var(--wos-acc-soft)}
.wos-qa-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px;border-top:1px solid var(--wos-line2)}
.wos-qa-chips:empty{display:none}
.wos-qa-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;font-size:12.5px;font-weight:600;padding:0 3px 0 10px;border-radius:999px;background:var(--wos-acc-soft);color:var(--wos-ink)}
.wos-qa-chip small{font-size:11.5px;font-weight:500;color:var(--wos-muted)}
.wos-qa-chip.wos-qa-bad{background:var(--wos-surface);box-shadow:inset 0 0 0 1px var(--wos-ink);text-decoration:underline dashed 1px;text-underline-offset:3px}   /* unknown tag: dashed = watch */
.wos-qa-chip.wos-qa-implied{background:transparent;box-shadow:inset 0 0 0 1px var(--wos-line);color:var(--wos-muted);padding-right:10px}
button.wos-qa-chip.wos-qa-implied[aria-pressed="false"]{text-decoration:line-through}
.wos-qa-chip button{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--wos-muted);font-size:15px;line-height:1}
.wos-qa-chip button:hover{background:var(--wos-line2);color:var(--wos-ink)}
.wos-qa-help{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 16px 10px;border-top:1px solid var(--wos-line2);font-size:12.5px;color:var(--wos-muted);line-height:2}   /* always shown */
.wos-qa-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-top:1px solid var(--wos-line2);background:var(--wos-sunk);border-radius:0 0 16px 16px;font-size:12.5px;color:var(--wos-muted)}
.wos-qa-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin-left:auto}
.wos-qa-last{font-size:13px;color:var(--wos-ink);display:inline-flex;align-items:center;gap:6px}
.wos-qa-last:empty{display:none}
.wos-qa-last.wos-qa-bad{font-weight:600;text-decoration:underline dashed 1px;text-underline-offset:3px}
.wos kbd{font:600 11.5px/1 var(--sans);padding:2px 6px;border:1px solid var(--wos-line);border-bottom-width:2px;border-radius:5px;background:var(--wos-sunk);color:var(--wos-ink2)}
/* the quick add field in the header (Q or Ctrl/Cmd+K open it too) */
.t-Header-navBar--start{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.wos-qa-trigger{flex:0 1 440px;display:flex;align-items:center;gap:10px;height:34px;margin:0 auto;padding:0 8px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font:13px/1 var(--sans);cursor:pointer}
.wos-qa-trigger .wos-ic{width:15px;height:15px}
.wos-qa-trigger span{flex:1;text-align:left}
.wos-qa-trigger kbd{font:700 11px/1.5 var(--sans);padding:0 6px;border:1px solid var(--line);border-radius:5px;color:var(--ink2);background:transparent}
.wos-qa-trigger kbd+kbd{margin-left:-6px}                        /* the canvas: / and Q four pixels apart */
.wos-qa-trigger:hover{border-color:var(--muted)}
.wos-qa-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wos-qa-fab{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;width:56px;height:56px;border:0;border-radius:50%;background:var(--btn);color:var(--btn-ink);align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer}
.wos-qa-fab .wos-ic{width:24px;height:24px}
.wos-qa-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* touch: the drag grip only where there is no fine pointer; 40 px targets and a 42 px hit area on check circles */
@media (hover:hover) and (pointer:fine){.wos-card .wos-grip{display:none}.wos-card .wos-card-a,.wos-mini .wos-mini-a{opacity:0}.wos-card:hover .wos-card-a,.wos-card:focus-within .wos-card-a,.wos-mini:hover .wos-mini-a,.wos-mini:focus-within .wos-mini-a{opacity:1}}
@media (pointer:coarse){.wos-btn,.wos-btn.wos-small{min-height:40px}.wos-chk{position:relative}.wos-chk::before{content:'';position:absolute;inset:-11px}}
@media (prefers-reduced-motion: reduce){.wos *,.wos-toast{transition:none!important}}

@media (max-width:1100px){.wos-charts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1040px){.wos-qa-trigger{display:none}.wos-qa-fab{display:inline-flex}.wos-qa-keys{display:none}dialog.wos-qa-pop{margin-top:10vh}.wos-qa-list li{flex-direction:column;align-items:flex-start;gap:1px}}
@media (max-width:760px){.wos-pulse{grid-template-columns:repeat(2,minmax(0,1fr))}.wos-pulse .wos-kpi:nth-child(3){border-left:0}.wos-pulse .wos-kpi:nth-child(n+3){border-top:1px solid var(--wos-line2)}}
@media print{.wos-filters,.wos-tv summary,.wos-qa-fab{display:none}.wos-panel{break-inside:avoid}}
@media (max-width:1100px){
  .wos-plan2{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .wos-pane-b,.wos-cp{overflow:visible}
  .wos-cal-h{position:static}
  .wos-cg-h,.wos-dh{position:static}
}
@media (max-width:900px){
  .wos-prop-b{grid-template-columns:1fr}
  .wos-cp{overflow-x:auto}
  .wos-cg-wk,.wos-mg{min-width:760px}
}
@media (max-width:640px){
  .wos-pr{grid-template-columns:120px minmax(0,1fr)}
  .wos-item-t{font-size:28px}
  .wos-dlg-b{padding:16px}
}

/* 5. The shell as on the canvas (D-020): Universal Theme draws it, wos.js adds the canvas's parts */
.t-Footer{display:none}                                          /* its version line and back-to-top button: nothing Work OS uses */
#t_Button_navControl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:30px;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--muted)}
:root{--ut-nav-width:224px}   /* the canvas's 224 px panel. The collapsed width is Universal Theme's own: set on the page it is also
   the grid column of the open menu whenever the page is not in "icons" collapse mode, and the menu then covers the page (0.11.3) */
#t_Button_navControl .t-Header-controlsIcon{display:none}
#t_Button_navControl .wos-ic{width:18px;height:18px}
#t_Button_navControl:hover{background:var(--acc-soft);color:var(--ink)}
#t_Button_navControl:focus:not(:focus-visible){outline:none}   /* a click leaves no ring; the keyboard still gets one */
.t-Header-navBar--center{display:flex;align-items:center}
.wos-saved{display:inline-flex;align-items:center;gap:5px;margin-right:14px;font:12px/1 var(--sans);color:var(--muted);white-space:nowrap}
.wos-saved .wos-ic{width:14px;height:14px}
.wos-saved[data-s="error"]{color:var(--ink);font-weight:600}
.wos-saved-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);border-top-color:transparent;animation:wos-spin .8s linear infinite}
@keyframes wos-spin{to{transform:rotate(360deg)}}
.t-NavigationBar-item .t-Button[data-initials]{width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;box-shadow:none;display:inline-flex;align-items:center;justify-content:center}
.t-NavigationBar-item .t-Button[data-initials]>*{display:none}
.t-NavigationBar-item .t-Button[data-initials]::before{content:attr(data-initials);font:700 11px/1 var(--sans);color:var(--ink)}
.t-NavigationBar-item .t-Button[data-initials]:hover{background:var(--acc-soft)}
/* the menu: no separator lines in any browser; the canvas's icons; counts plain when open, a badge when folded */
#t_TreeNav :is(.a-TreeView-node,.a-TreeView-row,.a-TreeView-content,.a-TreeView-label){border:0!important}
#t_TreeNav .a-TreeView-node{box-shadow:none!important}
#t_TreeNav .a-TreeView-content:has(>.wos-ic) .fa{display:none}
#t_TreeNav{--a-treeview-node-padding-y:5px;--a-treeview-node-padding-x:6px;--a-treeview-node-font-weight:400}   /* 34px rows, 2px apart, as on the canvas */
#t_TreeNav .a-TreeView-node--topLevel+.a-TreeView-node--topLevel{margin-top:2px}
#t_TreeNav .a-TreeView-node--topLevel>.a-TreeView-content{grid-template-columns:var(--ut-treeview-icon-container-width,1.5rem) minmax(0,1fr) auto;align-items:center;padding-inline-end:10px}
#t_TreeNav .a-TreeView-content>.wos-ic{width:16px;height:16px;justify-self:center}
.wos-nav-n{padding-left:8px;font:500 12px/1 var(--sans);color:var(--muted);pointer-events:none}
.js-navCollapsed #t_TreeNav .a-TreeView-content{position:relative}
.js-navCollapsed #t_TreeNav .wos-nav-n{position:absolute;top:1px;right:0;min-width:16px;height:16px;margin:0;padding:0 4px;border-radius:999px;background:var(--ink);color:var(--surface);font:700 10px/16px var(--sans);text-align:center}
.wos-nav-pj{flex:0 1 auto;min-height:0;overflow-y:auto;padding:0 8px;font-family:var(--sans)}
.wos-nav-pj::before{content:'';display:block;height:1px;margin:10px 4px;background:var(--line2)}
.wos-nav-h{padding:2px 10px 6px;font-size:12px;font-weight:600;color:var(--muted)}
.wos-nav-c{padding:8px 10px 2px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* a client above its projects (0.12) */
.wos-nav-row{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;color:var(--ink2);font:14px/1 var(--sans);text-decoration:none}
.wos-nav-row:hover{background:var(--sunk);color:var(--ink);text-decoration:none}
.wos-nav-row[aria-current]{background:var(--acc-soft);color:var(--ink);font-weight:600}
.wos-nav-row .wos-ic{flex:none;width:16px;height:16px}
.wos-nav-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wos-nav-pj .wos-pj{flex:none;width:20px;height:20px;border-radius:5px;background:var(--sunk);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font:700 10.5px/1 var(--sans);color:var(--ink)}
.wos-nav-foot{flex:none;margin-top:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.wos-nav-setup{height:34px}
.js-navCollapsed .wos-nav-pj{display:none}
.js-navCollapsed .wos-nav-foot{padding:8px 4px;align-items:center}
.js-navCollapsed .wos-nav-setup{width:40px;height:38px;padding:0;justify-content:center}
.js-navCollapsed .wos-nav-setup .wos-nav-t{display:none}
/* the page area: the canvas's 8 px gutter under the header and beside the menu; every page but the planning
   views (their own panes) is one rounded panel filling it */
@media (min-width:640px){
  .t-Body-contentInner{padding:0 8px 8px}
  .wos:is([data-page="proposals"],[data-page="tasks"],[data-page="setup"],[data-page="command"],[data-page="updates"],[data-page="item"]){min-height:calc(100vh - 58px);padding:16px;box-sizing:border-box;background:var(--wos-surface);border:1px solid var(--wos-line);border-radius:12px}
  .wos[data-page="item"]{padding:0}
}
/* Updates (page 4): new ones in ink with a dot, the rest quieter */
.wos-upd-list{margin:0 -8px}
/* Watching (D-026): cards with their status; requests waiting for a team */
.wos-watch{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:22px}
.wos-reqs{display:flex;flex-direction:column;margin-bottom:22px}
.wos-req{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--wos-line2)}
.wos-req-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wos-upd-intro{margin:8px 8px 2px}
.wos-upd-day{margin:14px 8px 4px;font-size:12px;font-weight:600;color:var(--wos-muted)}
.wos-upd{width:100%;display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;text-align:left;color:var(--wos-ink2)}
.wos-upd:hover{background:var(--wos-sunk)}
.wos-upd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.wos-upd-t b{font-weight:600;color:var(--wos-ink)}
.wos-upd-i{font-size:12.5px;color:var(--wos-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wos-upd-new{color:var(--wos-ink)}
.wos-upd-new .wos-upd-i{color:var(--wos-ink2)}
.wos-upd-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wos-ink)}
/* "Search, or add a task": existing work to open, under the new task's chips */
/* the results: Add first, then pages, projects and existing work (D-027); the marked one runs on Enter */
.wos-qa-res{margin:0;padding:6px 8px 8px;list-style:none;border-top:1px solid var(--wos-line2);max-height:320px;overflow-y:auto}
.wos-qa-r{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.wos-qa-r[aria-selected="true"],.wos-qa-r:hover{background:var(--wos-acc-soft)}
.wos-qa-r-no{flex:none;font-size:12.5px;font-weight:600;color:var(--wos-muted)}
.wos-qa-r-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wos-qa-r-add .wos-qa-r-t{font-weight:600}
.wos-qa-r-s{flex:none;font-size:12.5px;color:var(--wos-muted)}
.wos-setup-tabs{margin:0 0 14px}
/* 4. One height for text boxes and lists; dates in the app's own calendar (wos.js, "dates")
      Every single-line box is 38px (the same as a text field); the smaller places keep their own sizes. */
:where(.wos-input):is(input:not([type="checkbox"],[type="radio"]),select){height:38px}
.wos-pop-r .wos-input:is(input:not([type="checkbox"],[type="radio"]),select){height:32px}
select.wos-input:not(.wos-pick>select){-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px}
select.wos-input:not(.wos-pick>select)::-ms-expand{display:none}
/* the date field: the browser's own calendar is hidden, the Font APEX calendar sits at the right */
.wos-dp{position:relative;display:flex;align-items:center;min-width:0}
.wos-dp>input[type="date"]{flex:1 1 auto;width:auto;max-width:none;min-width:0;margin:0;padding-right:36px;-webkit-appearance:none;appearance:none;text-align:left;color:var(--ink);cursor:pointer}
.wos-dp>input[type="date"]::-webkit-datetime-edit,
.wos-dp>input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.wos-dp>input[type="date"]::-webkit-datetime-edit-text,
.wos-dp>input[type="date"]::-webkit-datetime-edit-month-field,
.wos-dp>input[type="date"]::-webkit-datetime-edit-day-field,
.wos-dp>input[type="date"]::-webkit-datetime-edit-year-field{padding:0;color:var(--ink);background:transparent}   /* read-only dates are not greyed */
.wos-dp>input[type="date"]::-webkit-datetime-edit{display:flex;align-items:center;height:100%}
.wos-dp>input[type="date"]::-webkit-calendar-picker-indicator,
.wos-dp>input[type="date"]::-webkit-inner-spin-button,
.wos-dp>input[type="date"]::-webkit-clear-button{display:none;-webkit-appearance:none}
.wos-dp>input[type="date"]::-webkit-date-and-time-value{margin:0;text-align:left}
.wos-dp>.wos-dp-ic{position:absolute;inset:50% 10px auto auto;width:16px;height:16px;margin:-8px 0 0;padding:0;transform:none;display:block;font-size:16px;line-height:16px;text-align:center;pointer-events:none;color:var(--muted)}
.wos-dp:hover>.wos-input{border-color:var(--g2)}
.wos-dp.wos-dp-on>input[type="date"]{border-color:var(--ink)}
.wos-dp.wos-dp-on>.wos-dp-ic,.wos-dp:hover>.wos-dp-ic{color:var(--ink)}
/* the rules that pointed at the field directly also hold with its wrapper */
.wos-sub-add:not(:focus-within):has(#wos-s-title:placeholder-shown)>.wos-dp{display:none}
.wos-pick>.wos-dp>.wos-input{width:auto;min-height:0;height:28px;font-size:13px;padding:0 26px 0 4px;border:0;background:transparent;font-weight:600}
.wos-pick>.wos-dp>.wos-dp-ic{right:4px}
.wos-pop-r .wos-dp>.wos-dp-ic{right:8px}
/* the calendar */
.wos-dp-pop{position:fixed;z-index:1300;width:272px;padding:10px;box-sizing:border-box;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.24);font:14px/1.5 var(--sans);font-variant-numeric:tabular-nums;text-align:left}
.wos-dp-pop *{box-sizing:border-box}
.wos-dp-pop button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.wos-dp-pop .wos-dp-h{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.wos-dp-pop .wos-dp-t{flex:1;text-align:center;font-weight:600}
.wos-dp-pop .wos-dp-nav{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink2)}
.wos-dp-pop .wos-dp-nav:hover{background:var(--sunk);color:var(--ink)}
.wos-dp-pop .wos-dp-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.wos-dp-pop .wos-dp-w{height:26px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:var(--muted)}
.wos-dp-pop .wos-dp-d{height:34px;border-radius:6px;font-size:13.5px}
.wos-dp-pop .wos-dp-d:hover{background:var(--sunk)}
.wos-dp-pop .wos-dp-out{color:var(--muted)}
.wos-dp-pop .wos-dp-now{box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.wos-dp-pop.wos-dp-kb .wos-dp-foc{outline:2px solid var(--ink);outline-offset:-2px}
.wos-dp-pop .wos-dp-sel,.wos-dp-pop .wos-dp-sel:hover{background:var(--ink);color:var(--surface);font-weight:600}
.wos-dp-pop .wos-dp-sel.wos-dp-now{box-shadow:none}
.wos-dp-pop button:disabled{opacity:.3;cursor:not-allowed;background:none}
.wos-dp-pop .wos-dp-f{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line2)}
.wos-dp-pop .wos-dp-b{min-height:28px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:600}
.wos-dp-pop .wos-dp-b:hover{background:var(--sunk)}
@media (pointer:coarse){.wos-dp-pop{width:300px}.wos-dp-pop .wos-dp-d{height:40px}}
/* 0.11: quick extend on overdue work, and Show done (one switch per person) */
.wos-exts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.wos-exts>.wos-small{margin-right:2px}
.wos-ext{min-width:0;padding-inline:8px!important;font-variant-numeric:tabular-nums}
.wos-card .wos-card-a:has(.wos-exts){opacity:1}
.wos-donet{margin-left:8px;white-space:nowrap}
.wos-donet[aria-pressed="true"],.wos-donet[aria-pressed="true"]:hover{background:var(--wos-acc-soft)!important;border-color:var(--wos-line)!important;color:var(--wos-ink)}
.wos-donet[aria-pressed="false"]{border-style:dashed!important}

/* ---------- Home (page 7, D-033): what needs you, your day, what changed, the team or the company, this week ---------- */
.wos-home{gap:14px}
.wos-home .wos-panel h2 .wos-muted{font-weight:500}
.wos-hn-0{margin:0}
.wos-hn-gs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px 28px}
.wos-hn-g{min-width:0}
.wos-hn-g>.wos-sh,.wos-hd>.wos-sh,.wos-hb>.wos-sh{padding:10px 0 4px}
.wos-hrow{display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 0;border-top:1px solid var(--wos-line2)}
.wos-hrow-b{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}   /* the facts wrap under the title in a narrow column */
.wos-hrow-t{flex:1 1 160px;min-width:0;text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-hrow-f{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wos-hrow-r{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-hrow-i{flex:none;display:inline-flex;color:var(--wos-muted)}
.wos-hrow-i>.wos-ic{width:16px;height:16px}
.wos-home-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.wos-ags{display:flex;flex-direction:column}
.wos-ag{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:38px;padding:4px 0 4px 10px;border-left:3px solid transparent;border-top:1px solid var(--wos-line2)}
.wos-ag time{font-size:12.5px;color:var(--wos-muted);font-variant-numeric:tabular-nums}
.wos-ag-t{min-width:0;text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wos-ag-k{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--wos-muted)}
.wos-ag-k b{padding:0 7px;border-radius:999px;border:1px solid var(--wos-ink);color:var(--wos-ink);font-size:11.5px;line-height:18px}
.wos-ag-now{border-left-color:var(--wos-ink)}
.wos-ag-now .wos-ag-k b{background:var(--wos-ink);color:var(--wos-surface)}
.wos-ag-mtg .wos-ag-t{font-weight:500}
.wos-ag-pers{background:repeating-linear-gradient(-45deg,transparent 0 4px,var(--wos-sunk) 4px 8px)}
.wos-hd-next{display:flex;flex-direction:column;gap:2px}
.wos-hd-f{display:flex;justify-content:flex-end;margin-top:10px}
.wos-hu .wos-upd{margin:0 -8px;width:calc(100% + 16px)}
.wos-hb .wos-pulse{border:1px solid var(--wos-line2);border-radius:10px;margin-bottom:6px}
.wos-hb .wos-kpi b{font-size:36px}
.wos-hb-people{margin-top:12px}
.wos-hw-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wos-hw-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:10px;border:1px solid var(--wos-line2);border-radius:10px;background:var(--wos-surface);text-align:left;color:var(--wos-ink)}
.wos-hw-c:hover{border-color:var(--wos-ink)}
.wos-hw-c.wos-today{border-color:var(--wos-ink);box-shadow:inset 0 3px 0 var(--wos-ink)}
.wos-hw-c.wos-past{color:var(--wos-muted)}
.wos-hw-n{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--wos-muted)}
.wos-hw-n b{font:400 22px/1 var(--serif);color:var(--wos-ink)}
.wos-hw-c .wos-capm{width:100%}
@media (max-width:1100px){.wos-home-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.wos-hn-gs{grid-template-columns:minmax(0,1fr)}.wos-hb .wos-pulse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wos-hw-d{grid-template-columns:repeat(4,minmax(0,1fr))}.wos-ag{grid-template-columns:88px minmax(0,1fr)}.wos-ag-k{grid-column:2}}