/* Sentinel v2 - shell.css
   The one shell: sidebar, top bar, contract workspace header + tabs, router, run dock slot, avatar menu, phone tab bar.
   Owned by the 'shell' area of the v2 redesign; tokens come from v2/tokens.css (each value here falls back to the build spec's
   number when the token is not there yet). Loaded after styles.css and clm.css, so the shell's rules win over the retired rail /
   library / Docs side nav at equal specificity. */

/* ------------------------------------------------------------
   Shell tokens (local names over the v2 tokens, with the spec's values as fallbacks)
------------------------------------------------------------ */
.app {
  --sh-top-h: 52px;
  --sh-side-w: var(--library-w, 240px);
  --sh-rail-w: 64px;
  --sh-brand: var(--brand, #1a2fe6);
  --sh-brand-hover: var(--brand-hover, #1424b8);
  --sh-on-brand: var(--on-brand, #ffffff);
  --sh-ink-1: var(--ink-1, var(--text-primary));
  --sh-ink-2: var(--ink-2, var(--text-secondary));
  --sh-ink-3: var(--ink-3, #5f6874);
  --sh-line: var(--line-1, var(--border-hairline));
  --sh-line-2: var(--line-2, var(--border-subtle));
  --sh-surface: var(--surface-1, var(--bg-pane));
  --sh-page: var(--surface-0, var(--bg-app));
  --sh-hover: color-mix(in srgb, var(--sh-ink-1) 6%, transparent);
  --sh-active: color-mix(in srgb, var(--sh-brand) 10%, transparent);
  --sh-crit: var(--sev-critical, #9f1239);
  --sh-high: var(--sev-high, #c2410c);
  --sh-med: var(--sev-medium, #a16207);
  --sh-low: var(--sev-low, #5c6571);
  --sh-party-a: var(--party-a, #0f766e);
  --sh-party-b: var(--party-b, #6d28d9);
  --sh-shadow-3: 0 1px 2px color-mix(in srgb, var(--sh-ink-1) 8%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--sh-ink-1) 22%, transparent);
  --sh-ease: cubic-bezier(.22, 1, .36, 1);
  --library-w-default: 240px;
}
.app:is([data-theme="midnight"], [data-theme="eclipse"]) {
  --sh-brand: var(--brand, #8ea0ff);
  --sh-brand-hover: var(--brand-hover, #a9b7ff);
  --sh-on-brand: var(--on-brand, #07080b);
  --sh-ink-3: var(--ink-3, #9aa1ad);
  --sh-crit: var(--sev-critical, #ff5c7a);
  --sh-high: var(--sev-high, #ff9f43);
  --sh-med: var(--sev-medium, #e0b64a);
  --sh-low: var(--sev-low, #9aa1ad);
  --sh-party-a: var(--party-a, #3fd1bb);
  --sh-party-b: var(--party-b, #c4a1ff);
  --sh-shadow-3: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -8px rgba(0, 0, 0, .7);
}
:root { --library-w-default: 240px; }

.v2-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v2i { flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-skip {
  position: fixed; left: 12px; top: -48px; z-index: 200; padding: 8px 14px; border-radius: 8px;
  background: var(--sh-brand); color: var(--sh-on-brand); font: 600 13px var(--font-ui); text-decoration: none;
  transition: top 120ms var(--sh-ease);
}
.v2-skip:focus { top: 10px; outline: 2px solid var(--sh-on-brand); outline-offset: 2px; }

/* ------------------------------------------------------------
   The grid: sidebar | (top bar / page). One for the app's pages and the Docs pages.
------------------------------------------------------------ */
.app.app[data-mode] {
  display: grid;
  grid-template-columns: var(--sh-side-w) minmax(0, 1fr);
  grid-template-rows: var(--sh-top-h) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}
.app.app[data-mode].is-lib-closed { grid-template-columns: var(--sh-rail-w) minmax(0, 1fr); }
.app.app[data-mode="docs"] > .library { display: flex !important; }
.app.app > .library { grid-column: 1; grid-row: 1 / -1; min-width: 0; }
.app.app > .v2-top { grid-column: 2; grid-row: 1; }
.app.app > .main { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; grid-template-rows: auto minmax(0, 1fr); }
.app.app[data-mode="docs"] > .main { display: none !important; }
.app.app:not([data-mode="docs"]) > .dx { display: none !important; }
.app.app[data-mode="docs"] > .dx.dx {
  grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; height: auto;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
/* The Docs pages under the shell: their own side nav and top bar are retired (the shell's are theirs). */
.app.app > .dx.dx > .dx-side,
.app.app > .dx.dx .dx-top:empty { display: none !important; }
/* ONE COLUMN, NEVER WIDER THAN THE PAGE: without a template the column was `auto`, sized to the widest thing in it - the contract
   header's tab strip at 596 px on a 390 px phone pushed the header, the page's actions and the verdict off the screen. */
.app.app > .dx.dx .dx-main { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--sh-page); }
.app.app > .dx.dx .dx-ws { min-width: 0; }
.app.app > .dx.dx .dx-ws[hidden] { display: none; }
/* the contract page's own actions (Side by side, Compare versions, What if, Open report) wrap, never push the page sideways */
.app .dx.dx.has-ws .ph-c .ph-act { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
@container main (max-width: 780px) {
  .app .dx.dx.has-ws .ph-c .ph-act { justify-content: flex-start; }
}
/* the contract's header and tabs carry its title and its tabs, so the Docs contract page does not say them again */
.app .dx.dx.has-ws .ph-c > .ph-t,
.app .dx.dx.has-ws .pg > nav.tabs { display: none; }
.app .dx.dx.has-ws .ph-c { justify-content: flex-end; }
/* the retired library handles */
.app.app > .lib-reopen { display: none !important; }

/* ------------------------------------------------------------
   Sidebar
------------------------------------------------------------ */
.app .v2-side.v2-side {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--sh-surface); border-right: 1px solid var(--sh-line-2);
  opacity: 1; pointer-events: auto;
  font-family: var(--font-ui);
}
.v2s-head {
  flex: none; height: var(--sh-top-h); display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 16px; border-bottom: 1px solid var(--sh-line);
}
.v2s-brand {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--sh-ink-1); text-decoration: none;
  border-radius: 6px; padding: 4px 2px;
}
.v2s-brand .v2-mark { color: var(--sh-ink-1); flex: none; view-transition-name: v2-brand-mark; }
.v2s-word { font: 650 15px/1 var(--font-ui); letter-spacing: -.015em; white-space: nowrap; }
.app #brandBuild { font-size: 11px; color: var(--sh-ink-3); white-space: nowrap; }
.app:not([data-v2-admin]) #brandBuild { display: none; }
.v2s-fold {
  margin-left: auto; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--sh-ink-3); cursor: pointer;
}
.v2s-fold:hover { background: var(--sh-hover); color: var(--sh-ink-1); }
.v2s-search {
  flex: none; display: flex; align-items: center; gap: 8px; height: 34px; margin: 12px 12px 6px; padding: 0 8px 0 10px;
  border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-page);
  color: var(--sh-ink-3); font: 13px var(--font-ui); cursor: pointer; text-align: left; min-width: 0;
  transition: border-color 120ms var(--sh-ease), color 120ms var(--sh-ease);
}
.v2s-search:hover { border-color: color-mix(in srgb, var(--sh-ink-1) 22%, transparent); color: var(--sh-ink-2); }
.v2s-search-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2s-search kbd, .v2-menu kbd {
  font: 500 11px/1 var(--font-ui); color: var(--sh-ink-3); padding: 3px 5px;
  border: 1px solid var(--sh-line-2); border-radius: 4px; background: var(--sh-surface);
}
.v2s-nav { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 4px; }
.v2s-item, .v2s-rc {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 7px;
  color: var(--sh-ink-2); font: 500 13.5px/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background 90ms var(--sh-ease), color 90ms var(--sh-ease);
}
.v2s-item .v2i { color: var(--sh-ink-3); }
.v2s-item:hover, .v2s-rc:hover { background: var(--sh-hover); color: var(--sh-ink-1); }
/* the row just pressed shows no hover until the pointer leaves it (shell.js hoverOff): only the page on screen is marked */
.v2s-item.v2-hover-off:hover:not(.is-active), .v2s-rc.v2-hover-off:hover:not(.is-active) { background: transparent; color: var(--sh-ink-2); }
/* the keyboard's ring, inside the row (the sidebar clips what sits outside it); a click draws none */
.v2s-item:focus-visible, .v2s-rc:focus-visible { outline: 2px solid var(--focus, var(--sh-brand)); outline-offset: -2px; }
.v2s-item:focus:not(:focus-visible), .v2s-rc:focus:not(:focus-visible) { outline: none; }
.v2s-item.is-active { background: var(--sh-active); color: var(--sh-ink-1); font-weight: 600; }
.v2s-item.is-active .v2i { color: var(--sh-brand); }
.v2s-item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sh-brand);
}
.v2s-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2s-n { font: 500 12px/1 var(--font-ui); color: var(--sh-ink-3); font-variant-numeric: tabular-nums; }
.v2s-n.is-alert {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--sh-crit) 12%, transparent); color: var(--sh-crit); font-weight: 600;
}
.v2s-recent { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; scrollbar-width: thin; }
.v2s-sub {
  padding: 14px 10px 6px; font: 600 11px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sh-ink-3);
}
.v2s-rc { min-height: 30px; font-size: 13px; font-weight: 450; }
.v2s-rc.is-active { background: var(--sh-active); color: var(--sh-ink-1); }
.v2s-glyph { flex: none; width: 14px; text-align: center; font-size: 11px; line-height: 1; }
.v2s-glyph.sev-critical { color: var(--sh-crit); }
.v2s-glyph.sev-high { color: var(--sh-high); }
.v2s-glyph.sev-medium { color: var(--sh-med); }
.v2s-glyph.sev-low, .v2s-glyph.is-none { color: var(--sh-ink-3); }
.v2s-rt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2s-recent .lib-empty { padding: 12px 10px; font-size: 12.5px; color: var(--sh-ink-3); }
.v2s-recent .lib-empty-admin { margin-top: 8px; font-size: 11.5px; }
.v2s-foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px solid var(--sh-line); }
.v2-run-dock:empty, .v2s-up:empty { display: none; }
.v2s-me {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--sh-ink-1); cursor: pointer; text-align: left; font-family: var(--font-ui);
}
.v2s-me:hover, .v2s-me[aria-expanded="true"] { background: var(--sh-hover); }
.v2s-av {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--sh-brand); color: var(--sh-on-brand); font: 650 12px/1 var(--font-ui); letter-spacing: .02em;
}
.v2s-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2s-me-t b { font: 600 13px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2s-me-t small { font: 12px/1.2 var(--font-ui); color: var(--sh-ink-3); }
.v2s-me-c { color: var(--sh-ink-3); }

/* the sidebar's edge widens it (app.js wireLibraryResize), from 240 px up to half again as much */
.app.app .lib-resize { left: calc(var(--sh-side-w) - 3px); }
.app.app.is-lib-closed .lib-resize { display: none; }
.app.app .lib-resize:hover::after,
.app.app .lib-resize:focus-visible::after,
.app.app.is-lib-resizing .lib-resize::after { background: var(--sh-brand); }

/* ---- folded: the 64 px icon rail ---- */
@media (min-width: 1024px) {
  .app.is-lib-closed .v2-side.v2-side { opacity: 1; pointer-events: auto; }
  .app.is-lib-closed .v2s-head { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 0; height: auto; min-height: var(--sh-top-h); }
  .app.is-lib-closed .v2s-word,
  .app.is-lib-closed #brandBuild,
  .app.is-lib-closed .v2s-search-t,
  .app.is-lib-closed .v2s-search kbd,
  .app.is-lib-closed .v2s-l,
  .app.is-lib-closed .v2s-me-t,
  .app.is-lib-closed .v2s-me-c,
  .app.is-lib-closed .v2s-recent { display: none; }
  .app.is-lib-closed .v2s-fold { margin: 0; transform: scaleX(-1); }
  .app.is-lib-closed .v2s-search { justify-content: center; margin: 10px 10px 6px; padding: 0; }
  .app.is-lib-closed .v2s-nav { padding: 6px 10px; flex: 1 1 auto; }
  .app.is-lib-closed .v2s-item { justify-content: center; padding: 0; min-height: 40px; }
  .app.is-lib-closed .v2s-item.is-active::before { left: -10px; }
  .app.is-lib-closed .v2s-n {
    position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px;
  }
  .app.is-lib-closed .v2s-n:not(.is-alert) { display: none; }
  .app.is-lib-closed .v2s-me { justify-content: center; padding: 6px 0; }
}

/* ------------------------------------------------------------
   Top bar
------------------------------------------------------------ */
.v2-top {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--sh-line-2); background: var(--sh-page); font-family: var(--font-ui);
}
.v2t-ico {
  flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; position: relative;
  border: 0; border-radius: 8px; background: transparent; color: var(--sh-ink-3); cursor: pointer;
}
.v2t-ico:hover { background: var(--sh-hover); color: var(--sh-ink-1); }
.v2t-menu { display: none; margin-left: -8px; }
.v2t-dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sh-crit); box-shadow: 0 0 0 2px var(--sh-page);
}
.v2t-dot[hidden] { display: none; }
.v2t-crumbs {
  flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  font: 13.5px/1 var(--font-ui); color: var(--sh-ink-3);
}
.v2t-crumbs a, .v2t-crumbs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2t-crumbs a { color: var(--sh-ink-3); text-decoration: none; border-radius: 4px; }
.v2t-crumbs a:hover { color: var(--sh-ink-1); text-decoration: underline; text-underline-offset: 3px; }
.v2t-crumbs .v2t-sep, .v2t-crumbs .cr-sep { flex: none; color: color-mix(in srgb, var(--sh-ink-3) 60%, transparent); display: inline-flex; }
.v2t-crumbs .cr-sep { font-size: 13px; }
.v2t-crumbs .v2t-now, .v2t-crumbs .cr-now { color: var(--sh-ink-1); font-weight: 600; }
.v2t-actions {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.v2t-actions::-webkit-scrollbar { display: none; }
.v2t-actions > * { flex: none; }
/* on a phone, "All changes saved" (125 px) ran past the action strip; the save pill already says it there, so the quiet,
   unpressable button gives its room to the actions (the "Save now" it turns into while something is unsaved stays) */
@media (max-width: 480px) { .v2t-actions [data-act="save-draft"][data-save-state="saved"] { display: none; } }
/* ...and on a phone the actions wrap onto a second line rather than run off the right edge with no sign of more (the Findings
   bar in Russian: the reading-level pill pushed "Open the report" and "Re-run" out of sight) */
@media (max-width: 480px) { .v2t-actions { flex-wrap: wrap; row-gap: 6px; overflow-x: visible; } }
.v2t-actions .run-btn-emphatic,
.v2t-actions .btn-accent { background: var(--sh-brand); border-color: var(--sh-brand); color: var(--sh-on-brand); }
.v2t-actions .run-btn-emphatic:hover:not(:disabled),
.v2t-actions .btn-accent:hover:not(:disabled) { background: var(--sh-brand-hover); border-color: var(--sh-brand-hover); }
.v2t-new {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; margin-left: 4px;
  border: 1px solid var(--sh-brand); border-radius: 8px; background: var(--sh-brand); color: var(--sh-on-brand);
  font: 600 13px/1 var(--font-ui); cursor: pointer; transition: background 120ms var(--sh-ease);
}
.v2t-new:hover { background: var(--sh-brand-hover); border-color: var(--sh-brand-hover); }
.v2t-new:active, .v2t-ico:active, .v2s-item:active, .v2s-rc:active, .ws-tab:active { transform: translateY(.5px); }

/* ------------------------------------------------------------
   Contract workspace: header + tabs (#modeBar on the app's pages, #dxWs on a Docs contract page)
------------------------------------------------------------ */
.app.app > .main > .mode-bar {
  display: block; height: auto; min-height: 0; padding: 0; overflow: visible; gap: 0;
  border-bottom: 1px solid var(--sh-line-2); background: var(--sh-page);
}
.app.app > .main > .mode-bar[data-empty],
.app.app > .main > .mode-bar:empty { display: none; }
.dx-ws { border-bottom: 1px solid var(--sh-line-2); background: var(--sh-page); font-family: var(--font-ui); }
/* one layout for every tab (shell.js workspace): the title row and the progress side by side, the meta row and a page's own
   line under them; on a narrow screen the progress takes a row of its own under the meta and scrolls sideways inside itself */
.ws-head {
  padding: 14px 28px 8px; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
}
.ws-row { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-prog { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-extra { grid-column: 1 / -1; }
/* a header narrower than the title plus the progress (a tablet, a folded window): the progress takes the row under the meta,
   so the title is never cut to "Data Licence Agre…" to make room for the steps */
.app.app > .main > .mode-bar, .dx-ws { container: ws-head / inline-size; }
@container ws-head (max-width: 960px) {
  .ws-head { grid-template-columns: minmax(0, 1fr); }
  .ws-prog { grid-column: 1; grid-row: auto; margin-top: 8px; }
}
.ws-sign {
  flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--sh-line-2); background: transparent; color: var(--sh-ink-1);
  font: 600 12px/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--sh-ease), border-color 120ms var(--sh-ease);
}
.ws-sign:hover { background: var(--sh-hover); border-color: color-mix(in srgb, var(--sh-ink-1) 22%, transparent); }
.ws-sign.is-primary { background: var(--sh-brand); border-color: var(--sh-brand); color: var(--sh-on-brand); }
.ws-sign.is-primary:hover { background: var(--sh-brand-hover); border-color: var(--sh-brand-hover); }
.ws-sign:disabled { opacity: .55; cursor: default; }
/* an approval route still open: Sign says who holds it (its title) and sends nothing */
.ws-sign.is-blocked, .ws-sign.is-blocked:hover { opacity: .55; cursor: not-allowed; background: transparent; border-color: var(--sh-line-2); color: var(--sh-ink-1); }
.ws-sign:focus-visible { outline: 2px solid var(--focus, var(--sh-brand)); outline-offset: 2px; }
.ws-title {
  margin: 0; min-width: 0; font: 600 22px/30px var(--font-doc); letter-spacing: -.01em; color: var(--sh-ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-sk { display: inline-block; width: 280px; max-width: 50vw; height: 20px; border-radius: 6px; vertical-align: middle;
  background: color-mix(in srgb, var(--sh-ink-1) 8%, transparent); }
.ws-pill {
  flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 11.5px/1 var(--font-ui); letter-spacing: .02em; border: 1px dashed color-mix(in srgb, var(--sh-ink-3) 60%, transparent); color: var(--sh-ink-2);
}
.ws-pill.is-signed { border-style: solid; border-color: transparent; background: color-mix(in srgb, var(--sh-party-a) 14%, transparent); color: var(--sh-party-a); }
.ws-sp { flex: 1 1 auto; }
/* the contract's ⋯ (shell.js contractMenuHtml): a quiet icon button at the end of the title row */
.ws-more {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--sh-ink-3); cursor: pointer;
  transition: background 120ms var(--sh-ease), color 120ms var(--sh-ease);
}
.ws-more:hover, .ws-more[aria-expanded="true"] { background: var(--sh-hover); color: var(--sh-ink-1); }
.ws-more:focus-visible { outline: 2px solid var(--focus, var(--sh-brand)); outline-offset: 2px; }
.v2m-item.is-danger, .v2m-item.is-danger .v2i { color: var(--sh-crit); }
.ws-head .mb-meta, .ws-status { flex: 0 1 auto; min-width: 0; font: 12.5px/1.3 var(--font-ui); color: var(--sh-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-head .mb-meta:empty { display: none; }
.ws-steps { flex: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 12px/1 var(--font-ui); color: var(--sh-ink-3); white-space: nowrap; }
.ws-steps li { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px; }
.ws-steps li + li::before { content: ""; width: 14px; height: 1px; background: var(--sh-line-2); margin-right: 4px; }
.ws-steps i {
  width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--sh-ink-3) 55%, transparent); color: var(--sh-on-brand);
}
.ws-steps li.is-done i { background: var(--sh-brand); border-color: var(--sh-brand); }
.ws-steps li.is-done { color: var(--sh-ink-2); }
.ws-steps li.is-now { color: var(--sh-ink-1); font-weight: 600; }
.ws-steps li.is-now i { border-color: var(--sh-brand); box-shadow: inset 0 0 0 2.5px var(--sh-page); background: var(--sh-brand); }
.sev-critical > b { color: var(--sh-crit); background: var(--sh-crit); }
.sev-high > b { color: var(--sh-high); background: var(--sh-high); }
.sev-medium > b { color: var(--sh-med); background: var(--sh-med); }
.sev-low > b { color: var(--sh-low); background: var(--sh-low); }
.ws-tabs {
  display: flex; align-items: stretch; gap: 2px; padding: 0 20px; height: 40px; overflow-x: auto; scrollbar-width: none;
}
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
  color: var(--sh-ink-3); font: 500 13.5px/1 var(--font-ui); text-decoration: none; border-radius: 6px 6px 0 0;
  transition: color 90ms var(--sh-ease);
}
.ws-tab:hover { color: var(--sh-ink-1); }
/* the keyboard's ring inside the tab (the strip scrolls, and would clip one drawn outside); a click draws none */
.ws-tab:focus-visible { outline: 2px solid var(--focus, var(--sh-brand)); outline-offset: -2px; }
.ws-tab:focus:not(:focus-visible) { outline: none; }
.ws-tab.is-active { color: var(--sh-ink-1); font-weight: 600; }
.ws-tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sh-brand); }
.ws-tab.is-active .v2i { color: var(--sh-brand); }
.ws-tab-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center;
  font: 600 11px/1 var(--font-ui); background: color-mix(in srgb, var(--sh-ink-1) 8%, transparent); color: var(--sh-ink-2);
}
.ws-none .ws-title { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.ws-none { padding-bottom: 12px; }

/* ------------------------------------------------------------
   Menus: the avatar menu and + New (opacity only, 120 ms - the productive tier)
------------------------------------------------------------ */
.v2-menu {
  position: fixed; z-index: var(--z-palette, 80); min-width: 240px; max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px;
  background: var(--sh-surface); color: var(--sh-ink-1); border: 1px solid var(--sh-line-2); border-radius: 10px;
  box-shadow: var(--sh-shadow-3); font-family: var(--font-ui);
  opacity: 0; transition: opacity 120ms var(--sh-ease);
}
.v2-menu.is-on { opacity: 1; }
.v2-menu-me { width: 280px; }
.v2m-item {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--sh-ink-1); font: 500 13.5px/1.2 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer;
}
.v2m-item .v2i { color: var(--sh-ink-3); }
.v2m-item span { flex: 1; min-width: 0; }
.v2m-item:hover, .v2m-item:focus-visible { background: var(--sh-hover); outline: none; }
.v2m-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus, var(--sh-brand)); }
.v2m-ext { margin-left: auto; }
.v2m-sep { height: 1px; margin: 6px 4px; background: var(--sh-line); }
.v2m-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.v2m-head > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2m-head b { font-size: 14px; font-weight: 600; }
.v2m-head small { font-size: 12px; color: var(--sh-ink-3); }
.v2m-meter { padding: 4px 10px 8px; }
.v2m-meter-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--sh-ink-3); margin-bottom: 6px; }
.v2m-meter-h b { color: var(--sh-ink-1); font-weight: 600; }
.v2m-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sh-ink-1) 9%, transparent); overflow: hidden; }
.v2m-bar i { display: block; height: 100%; background: var(--sh-brand); border-radius: 3px; }
.v2m-meter small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--sh-ink-3); }
.v2m-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-height: 34px; padding: 2px 10px; }
.v2m-row .v2m-seg { margin-left: auto; }
.v2m-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sh-ink-2); }
.v2m-k .v2i { color: var(--sh-ink-3); }
.v2m-sws { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 2px 10px 8px; }
.v2m-sw {
  height: 28px; border-radius: 7px; border: 1px solid var(--sh-line-2); padding: 0; overflow: hidden; display: flex; cursor: pointer; background: var(--sh-page);
  color: var(--sh-ink-2); align-items: center; justify-content: center;
}
.v2m-sw span { flex: 1; height: 100%; }
.v2m-sw.is-on, .v2m-sw:focus-visible { outline: 2px solid var(--sh-brand); outline-offset: 1px; }
.v2m-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--sh-ink-1) 6%, transparent); gap: 2px; }
.v2m-seg button {
  min-width: 36px; height: 26px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--sh-ink-2);
  font: 550 12px/1 var(--font-ui); cursor: pointer;
}
.v2m-seg button.is-on { background: var(--sh-surface); color: var(--sh-ink-1); box-shadow: 0 1px 2px color-mix(in srgb, var(--sh-ink-1) 15%, transparent); }
.v2m-seg button:focus-visible { outline: 2px solid var(--sh-brand); outline-offset: 1px; }

/* ------------------------------------------------------------
   Skeletons for a cold deep link (renderStageOpening): the requested page's shape, never Draft's
------------------------------------------------------------ */
.v2-sk { max-width: 980px; }
.v2-sk-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--sh-line); }
.v2-sk-row > i { flex: none; width: 3px; height: 40px; border-radius: 2px; background: color-mix(in srgb, var(--sh-ink-1) 10%, transparent); }
.v2-sk-row > div { flex: 1; }
.v2-sk-hero, .v2-sk-box { padding: 20px; margin-bottom: 20px; border-radius: 14px; border: 1px solid var(--sh-line); }
.v2-settings-fallback h1 { font: 600 28px/36px var(--font-doc); margin: 0 0 8px; }
.v2-settings-fallback p { color: var(--sh-ink-3); margin: 0 0 16px; }
.v2-settings-fallback .btn-accent { background: var(--sh-brand); border-color: var(--sh-brand); color: var(--sh-on-brand); }

/* ------------------------------------------------------------
   Inbox (clm.js pgInbox): late rows marked
------------------------------------------------------------ */
.dx .v2-inbox .row.is-late .row-i { color: var(--sh-crit); }
.dx .v2-inbox .row.is-new { background: color-mix(in srgb, var(--sh-brand) 6%, transparent); }
.dx .v2-inbox .row.is-new .row-main > b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sh-brand); vertical-align: 2px; }

/* ------------------------------------------------------------
   Phone tab bar (hidden on a desk)
------------------------------------------------------------ */
.v2-tabbar { display: none; }

/* ------------------------------------------------------------
   Below 1024 px: the sidebar is a drawer, the top bar's menu button opens it
------------------------------------------------------------ */
@media (max-width: 1023px) {
  .app.app[data-mode], .app.app[data-mode].is-lib-closed { grid-template-columns: minmax(0, 1fr); }
  .app.app[data-mode="docs"] > .lib-scrim { display: block !important; }
  .app.app > .v2-top, .app.app > .main, .app.app[data-mode="docs"] > .dx.dx { grid-column: 1; }
  .v2t-menu { display: inline-grid; }
  .app.app .lib-resize { display: none; }
  .v2s-fold { display: none; }
  .app .v2-side.v2-side {
    position: fixed; z-index: var(--z-drawer, 50); top: 0; bottom: 0; left: 0; width: min(300px, 86vw);
    box-shadow: 12px 0 32px rgba(0, 0, 0, .18);
    visibility: hidden; pointer-events: none; transform: translateX(-100%);
    transition: transform .25s var(--sh-ease), visibility 0s linear .25s;
  }
  .app.is-drawer-open .v2-side.v2-side {
    visibility: visible; pointer-events: auto; transform: none; transition: transform .25s var(--sh-ease);
  }
  .app.app .lib-scrim {
    display: block; position: fixed; z-index: calc(var(--z-drawer, 50) - 1); inset: 0;
    background: rgba(15, 18, 22, .32); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--sh-ease), visibility 0s linear .25s;
  }
  .app.app.is-drawer-open .lib-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s var(--sh-ease), visibility 0s linear 0s; }
  .app.is-lib-closed .v2-side.v2-side .v2s-l,
  .app.is-lib-closed .v2-side.v2-side .v2s-word { display: initial; }
  .ws-head { padding: 12px 18px 6px; grid-template-columns: minmax(0, 1fr); }
  .ws-tabs { padding: 0 10px; }
  /* the progress under the meta, in its own sideways scroller - the same steps as on a desk, never off the screen */
  .ws-prog { grid-column: 1; grid-row: auto; margin-top: 8px; gap: 6px 10px; flex-wrap: wrap; }
  /* the steps scroll inside their own strip (the step to do now brought into view, shell.js fitSteps); Sign stays in view
     beside them, or under them when the words are long (Russian) */
  .ws-steps { flex: 1 1 220px; min-width: 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
  /* an edge with more steps behind it fades (shell.js stepsEdge) */
  .ws-steps.ws-steps-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
  .ws-steps.ws-steps-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px); mask-image: linear-gradient(90deg, transparent, #000 20px); }
  .ws-steps.ws-steps-l.ws-steps-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .ws-steps::-webkit-scrollbar { display: none; }
  .ws-steps li { white-space: nowrap; }
  .v2-top { padding: 0 12px 0 16px; }
}

/* ------------------------------------------------------------
   Phones (a coarse pointer or a narrow screen): the bottom tab bar leads, 44 px targets
------------------------------------------------------------ */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1023px) {
  :root { --phone-bar-h: 52px; }
  .app.app[data-mode] {
    grid-template-rows: var(--sh-top-h) minmax(0, 1fr) calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .v2-tabbar {
    grid-column: 1; grid-row: 3; display: flex; align-items: stretch; justify-content: space-around;
    padding: 0 4px env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--sh-line-2); background: var(--sh-surface);
    font-family: var(--font-ui); z-index: 5;
  }
  .v2tb-i {
    flex: 1 1 0; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: var(--sh-ink-3); font: 500 11px/1.1 var(--font-ui); text-decoration: none; cursor: pointer;
  }
  .v2tb-i.is-active { color: var(--sh-brand); font-weight: 600; }
  .v2tb-ic { position: relative; display: inline-flex; }
  .v2tb-n {
    position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--sh-crit); color: #fff; font: 600 10.5px/16px var(--font-ui); font-style: normal; text-align: center;
  }
  .v2t-new span { display: none; }
  .v2t-new { width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: 0; }
  .v2t-ico { width: 44px; height: 44px; }
  .v2s-item, .v2s-rc, .v2m-item { min-height: 44px; }
  .ws-head { padding: 10px 16px 4px; }
  .ws-title { font-size: 18px; line-height: 26px; }
  .ws-tab { padding: 0 9px; }
  .ws-tab .v2i { display: none; }
  .v2t-crumbs > *:not(:last-child) { display: none; }
  /* the page's actions take a row of their own under the bar, scrolling sideways inside it - never off the screen */
  .app.app[data-mode] { grid-template-rows: auto minmax(0, 1fr) calc(56px + env(safe-area-inset-bottom, 0px)); }
  .v2-top { flex-wrap: wrap; min-height: var(--sh-top-h); padding-top: 4px; padding-bottom: 4px; row-gap: 4px; }
  .v2t-crumbs { flex: 1 1 0; }
  .v2t-actions { order: 5; flex: 1 1 100%; justify-content: flex-start; padding-bottom: 2px; }
  .v2t-actions:empty { display: none; }
  /* ...but actions that are only icons (a Docs page's Refresh) stay on the bar's own row, beside the bell: a row of their own held
     one icon under the page's title on every Docs page (the Inbox had moved its Refresh into its own bar for that; this is every
     page's) */
  .v2t-actions:not(:has(> :not(.v2t-ico))) { order: 0; flex: 0 0 auto; padding-bottom: 0; }
  .v2-menu { max-width: calc(100vw - 16px); }
  .app.app[data-mode="docs"] > .dx.dx { grid-row: 2; }
  .app.app > .main { grid-row: 2; }
}

/* ------------------------------------------------------------
   Motion: Back crossfades the page like a click; a theme change from the avatar menu is the theme's crossfade
------------------------------------------------------------ */
html[data-vt="back"] #modeStage { view-transition-name: ml-stage; }
html[data-vt="back"] #modeBar { view-transition-name: ml-bar; }
html[data-vt="page"] #v2Crumbs, html[data-vt="back"] #v2Crumbs { view-transition-name: v2-crumbs; }
::view-transition-old(v2-crumbs) { animation-duration: 90ms; }
::view-transition-new(v2-crumbs) { animation: ml-fade-in 160ms var(--sh-ease) both; }

/* print: no shell */
@media print {
  .v2-side, .v2-top, .v2-tabbar, .lib-scrim, .lib-resize, .v2-skip { display: none !important; }
  .app.app[data-mode] { display: block; height: auto; }
}