/* Cimplifi CLM (CI OnlyOffice). Built on the Stacks design system: warm neutrals, Cimplifi blue (#0069B4) as the one accent, Source Sans 3
   for the interface, a serif voice for document titles. Light by default. The fonts are our own copies (app/web/fonts, SIL
   Open Font License): nothing is loaded from another site. Contract documents keep their own fonts (the editor, Word, PDF).
   Source Sans 3 is drawn smaller than Inter at the same size; size-adjust and the metric overrides on its faces give it
   Inter's cap height and line height (2.3.0, measured), so the sizes below read as before and no line box moved. */

@font-face { font-family: "CW Sans"; font-style: normal; src: url(fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-display: swap; size-adjust: 110%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CW Sans"; font-style: normal; src: url(fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-display: swap; size-adjust: 110%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "CW Sans"; font-style: italic; src: url(fonts/source-sans-3-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-display: swap; size-adjust: 110%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "CW Serif"; src: url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --serif: "CW Serif", "Iowan Old Style", Georgia, Cambria, serif;
  --sans: "CW Sans", "Segoe UI Variable Text", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --sidebar: var(--sb-w, 248px);
  --t: 160ms cubic-bezier(.2, .7, .2, 1);
}
[data-theme="light"] { --on-tone: #ffffff; }
[data-theme="dark"] { --on-tone: #141413; }
[data-theme="light"] {
  --bg0: #ffffff; --bg1: #faf9f5; --bg2: #f5f4ed; --bg3: #f0eee6; --bg4: #e8e6dc;
  --line: rgba(31, 30, 29, .13); --line2: rgba(31, 30, 29, .08);
  --fg1: #141413; --fg2: #3d3d3a; --fg3: #73726c; --fg4: #a3a19a;
  --accent: #0069b4; --accent-h: #00579a; --accent-soft: rgba(0, 105, 180, .09); --on-accent: #ffffff;
  --ok: #2f7a3e; --ok-soft: rgba(47, 122, 62, .12); --bad: #b53333; --bad-soft: rgba(193, 60, 50, .11);
  --warn: #6b4fae; --warn-soft: rgba(107, 79, 174, .12); --info: #3b6fb6; --info-soft: rgba(59, 111, 182, .11);
  --add-bg: rgba(77, 140, 58, .15); --add-fg: #2f6b1e; --del-bg: rgba(193, 60, 50, .12); --del-fg: #9c2b22;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.05);
  --shadow-menu: 0 8px 30px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] {
  --bg0: #30302e; --bg1: #262624; --bg2: #1f1e1d; --bg3: #141413; --bg4: #3a3a37;
  --line: rgba(250, 249, 245, .13); --line2: rgba(250, 249, 245, .07);
  --fg1: #faf9f5; --fg2: #d4d2c8; --fg3: #9c9a92; --fg4: #6f6d66;
  --accent: #5aa9e6; --accent-h: #7bbcee; --accent-soft: rgba(90, 169, 230, .15); --on-accent: #06192a;
  --ok: #8fbf6a; --ok-soft: rgba(120, 190, 90, .15); --bad: #ec8a7c; --bad-soft: rgba(230, 100, 90, .15);
  --warn: #b9a3ef; --warn-soft: rgba(185, 163, 239, .16); --info: #79b8ff; --info-soft: rgba(121, 184, 255, .13);
  --add-bg: rgba(120, 190, 90, .16); --add-fg: #a7d98a; --del-bg: rgba(230, 100, 90, .15); --del-fg: #f0a098;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 18px rgba(0,0,0,.2);
  --shadow-menu: 0 10px 34px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg1); color: var(--fg1); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--fg1); }
/* 2.3.0 (F): the browser's own controls follow the theme (date pickers, lists, scrollbars, the file button), placeholders
   are quieter than typed text, ticks and radios are Cimplifi blue, and the file button looks like our small buttons */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
::placeholder { color: var(--fg4); opacity: 1; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="file"]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 560; color: var(--fg1); background: var(--bg1); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; margin-right: 10px; cursor: pointer; transition: background var(--t); }
input[type="file"]::file-selector-button:hover { background: var(--bg3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--fg3); }
.small { font-size: 12.5px; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* busy bar: shown whenever the app is waiting on the server */
/* one progress bar for everything that takes time */
#busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; opacity: 0; transition: opacity .25s; pointer-events: none; }
#busy.on { opacity: 1; }
#busy > div { height: 100%; background: linear-gradient(90deg, var(--accent), #3d9ad8); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .25s ease; box-shadow: 0 0 10px rgba(0, 105, 180, .4); border-radius: 0 2px 2px 0; }
/* the user guide (js/help.js) */
/* the "?" (2.3.0): at the top right of every page, the same size as the buttons beside it; on a contract the last of the
   header's buttons; on a phone the top bar's (#tb-help). Its name shows as a tooltip on hover and on keyboard focus. */
.help-q { width: 34px; padding: 0; justify-content: center; color: var(--fg3); position: relative; }
.help-q:hover, .help-q:focus-visible { color: var(--accent); text-decoration: none; }
.help-q.corner { position: absolute; top: 0; right: 0; height: 34px; margin: 0; }
.page-head.has-help, .wz-top.has-help { position: relative; padding-right: 50px; }
.hero.has-help { padding-right: 70px; }
.hero > .help-q.corner { top: 16px; right: 16px; }
.help-q[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; white-space: pre; pointer-events: none;
  background: var(--fg1); color: var(--bg1); font-size: 12.5px; font-weight: 500; line-height: 1.2; padding: 5px 9px; border-radius: 7px;
  box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(-2px); transition: opacity var(--t), transform var(--t); }
.help-q[data-tip]:hover::after, .help-q[data-tip]:focus-visible::after { opacity: 1; transform: none; }
/* 2.3.2: hints (UI.hint in core.js). A small "i" after a label or in a legend; its text shows above it on hover, keyboard
   focus or a tap, never over the field it explains. Light and dark follow the tokens; a 40 px target on touch screens. */
.lbl-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.hint-q { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px 0 -4px 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--fg3); cursor: help; position: relative; vertical-align: middle; flex: none;
  font: inherit; line-height: 0; }
.hint-q:hover, .hint-q[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft, rgba(0, 105, 180, .08)); }
.hint-q:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .hint-q::before { content: ""; position: absolute; inset: -9px; } }
#hint-pop { position: fixed; left: 0; top: 0; z-index: 2200; max-width: min(320px, calc(100vw - 20px)); background: var(--fg1); color: var(--bg1);
  font-size: 13px; font-weight: 450; line-height: 1.45; padding: 8px 11px; border-radius: 8px; box-shadow: var(--shadow-menu);
  pointer-events: none; white-space: normal; text-align: left; opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity var(--t), transform var(--t), visibility 0s linear .16s; }
#hint-pop.below { transform: translateY(-3px); }
#hint-pop.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t), transform var(--t); }
[data-motion="reduced"] #hint-pop { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { #hint-pop { transition: none; transform: none; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { .hint-q, #hint-pop { display: none !important; } }
/* 2.3.3: a control that cannot be used yet (UI.why, UI.gate, App.need in core.js and app.js): it stays where it is, looks
   unavailable (dimmed, never red for that reason), stays focusable, and its reason shows in the hint pop on hover, focus or
   a tap; pressed, the reason stays with a link to what unblocks it (#hint-pop.act). Light and dark follow the tokens. */
[aria-disabled="true"][data-why], [aria-disabled="true"][data-need] { opacity: .5; cursor: not-allowed; }
.btn[aria-disabled="true"][data-why]:hover, .btn[aria-disabled="true"][data-why]:active { box-shadow: none; transform: none; filter: none; }
.btn.primary[aria-disabled="true"][data-why]:hover { background: var(--accent); color: var(--on-accent); }
.menu button[aria-disabled="true"][data-why]:hover { background: none; }
[aria-disabled="true"][data-why]:focus-visible { opacity: .72; outline: 2px solid var(--accent); outline-offset: 2px; }
#hint-pop.act { pointer-events: auto; }
#hint-pop .hint-go { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0;
  padding: 0; font: inherit; cursor: pointer; white-space: nowrap; }
#hint-pop .hint-go:focus-visible { outline: 2px solid var(--bg1); outline-offset: 2px; border-radius: 3px; }
@media (pointer: coarse) { #hint-pop .hint-go { display: inline-flex; align-items: center; min-height: 40px; } }
.help-page { max-width: 1240px; margin: 0; padding: 24px 40px 60px; }
.help-head h1 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 560; display: flex; align-items: center; gap: 10px; }
.help-head h1 .ic { width: 24px; height: 24px; color: var(--accent); }
.help-head .sub { color: var(--fg3); margin: 6px 0 16px; font-size: 13px; line-height: 1.4; }
.help-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0 18px; }
.help-tools .btn { flex: none; }
.help-search { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg0); flex: 1 1 auto; min-width: 0; }
.help-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.help-search .ic { color: var(--fg3); }
.help-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 32px; font-size: 14px; }
.help-count { font-size: 12px; color: var(--fg3); white-space: nowrap; }
.help-search [hidden] { display: none; }
.help-search .btn.sm { width: 26px; height: 26px; padding: 0; justify-content: center; }
.help-results { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
.help-results-h { font-size: 12.5px; color: var(--fg3); margin-bottom: 6px; }
.help-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 236px; overflow-y: auto; }
.help-results a { display: block; padding: 7px 9px; border-radius: 8px; color: var(--fg1); }
.help-results a:hover, .help-results a:focus-visible { background: var(--bg2); text-decoration: none; }
.help-results .snip { color: var(--fg2); font-size: 12.5px; margin-top: 2px; }
.help-grid { display: grid; grid-template-columns: 240px minmax(0, 780px); column-gap: 48px; align-items: start; }
.help-side { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 8px 4px 24px 0; }
.help-main { min-width: 0; }
.help-toc { font-size: 13px; }
.help-toc-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg3); font-weight: 600; margin: 4px 0 8px 10px; }
.help-toc ol { list-style: none; margin: 0; padding: 0; }
.help-toc ol ol { margin: 0 0 6px 10px; border-left: 1px solid var(--line2); }
.help-toc a { display: block; padding: 4px 10px; border-radius: 7px; color: var(--fg2); line-height: 1.35; }
.help-toc > ol > li > a { font-weight: 560; color: var(--fg1); }
.help-toc ol ol a { font-size: 12.5px; color: var(--fg3); padding: 3px 10px; }
.help-toc a:hover { background: var(--bg2); text-decoration: none; }
.help-toc a.on { color: var(--accent); background: var(--accent-soft); }
.help-body { max-width: 780px; line-height: 1.6; color: var(--fg2); font-size: 14.5px; }
.help-sec { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line2); scroll-margin-top: 12px; }
.help-body h2 { font-family: var(--serif); font-size: 23px; font-weight: 560; color: var(--fg1); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; scroll-margin-top: 12px; outline: 0; }
.help-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.help-body h3 { font-size: 16px; font-weight: 620; color: var(--fg1); margin: 22px 0 6px; display: flex; align-items: center; gap: 6px; scroll-margin-top: 12px; outline: 0; }
.help-body h2.flash, .help-body h3.flash { animation: helpflash 1.6s ease-out; border-radius: 6px; }
@keyframes helpflash { 0% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.help-anchor { opacity: 0; color: var(--fg4); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.help-body h2:hover .help-anchor, .help-body h3:hover .help-anchor, .help-anchor:focus-visible { opacity: 1; }
.help-anchor:hover { color: var(--accent); background: var(--bg2); }
.help-body p { margin: 0 0 10px; }
.help-body ul, .help-steps { margin: 0 0 12px; padding-left: 22px; }
.help-body li { margin: 3px 0; }
.help-steps { counter-reset: step; list-style: none; padding-left: 0; }
.help-steps > li { counter-increment: step; position: relative; padding-left: 34px; margin: 8px 0; }
.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 650; display: grid; place-items: center; }
.help-body b { color: var(--fg1); font-weight: 600; }
.help-body code { font-size: 12.5px; background: var(--bg3); padding: 1px 5px; border-radius: 5px; }
.help-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); color: var(--fg1); border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px; font-size: 13.5px; }
.help-tip .ic { color: var(--accent); margin-top: 3px; }
.help-tip.warn { background: var(--warn-soft); }
.help-tip.warn .ic { color: var(--warn); }
.help-shot { margin: 12px 0 18px; }
.help-zoom { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg0); cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow var(--t), border-color var(--t); vertical-align: top; }
.help-zoom:hover, .help-zoom:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.help-zoom img { display: block; max-width: 100%; width: auto; height: auto; max-height: 460px; }
.help-zoom::after { content: "Click to enlarge"; position: absolute; right: 8px; bottom: 8px; font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: rgba(20, 20, 19, .72); color: #fff; opacity: 0; transition: opacity var(--t); }
.help-zoom:hover::after, .help-zoom:focus-visible::after { opacity: 1; }
.help-light { position: fixed; inset: 0; z-index: 2100; background: rgba(20, 20, 19, .82); display: grid; place-items: center; padding: 28px; cursor: zoom-out; animation: fade .15s; }
.help-light figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.help-light img { max-width: min(96vw, 1600px); max-height: calc(100vh - 100px); width: auto; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.help-light figcaption { color: #f5f4ed; font-size: 13px; }
.help-light-x { position: fixed; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.help-light-x:hover { background: rgba(255,255,255,.26); }
.help-shot figcaption { font-size: 12.5px; color: var(--fg3); margin-top: 6px; }
.help-big { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; }
.help-qa { border: 1px solid var(--line2); border-radius: 10px; background: var(--bg0); margin: 0 0 8px; }
.help-qa summary { cursor: pointer; padding: 10px 14px; font-weight: 560; color: var(--fg1); list-style-position: inside; }
.help-qa summary:hover { color: var(--accent); }
.help-qa > div { padding: 0 14px 12px; }
mark.hl { background: rgba(0, 105, 180, .16); color: inherit; border-radius: 3px; padding: 0 1px; }
mark.hl.now { background: var(--accent); color: var(--on-accent); }
.help-results mark { background: rgba(0, 105, 180, .16); color: inherit; border-radius: 3px; }
[data-theme="dark"] mark.hl, [data-theme="dark"] .help-results mark { background: rgba(90, 169, 230, .3); }
.help-foot { margin-top: 10px; }
.help-table-wrap { overflow-x: auto; margin: 6px 0 16px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg0); }
.help-roles { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.help-roles th, .help-roles td { padding: 8px 12px; border-top: 1px solid var(--line2); text-align: left; vertical-align: top; }
.help-roles thead th { border-top: 0; background: var(--bg1); font-size: 12px; color: var(--fg3); font-weight: 600; }
.help-roles thead th:not(:first-child), .help-roles td { text-align: center; width: 92px; }
.help-roles tbody th { font-weight: 450; color: var(--fg1); }
.help-roles tfoot th, .help-roles tfoot td { font-size: 12.5px; color: var(--fg2); background: var(--bg1); text-align: left; }
.help-roles .can { display: inline-flex; color: var(--accent); }
.help-roles .can .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.help-roles .can span, .help-roles .cannot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.help-roles .cannot::before { content: ""; display: inline-block; width: 10px; height: 2px; border-radius: 2px; background: var(--fg4); vertical-align: middle; }
.help-body.in-modal { max-width: none; font-size: 14px; }
.help-body.in-modal .help-sec { border: 0; margin: 0; padding: 0; }
.help-body.in-modal h2, .help-body.in-modal .help-anchor { display: none; }
@media (max-width: 900px) {
  .help-page { padding: 18px 16px 40px; }
  .help-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .help-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .help-toc { border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg0); padding: 8px; margin-bottom: 14px; }
  .help-toc ol ol { display: none; }
  .help-tools { flex-wrap: wrap; }
  .help-search { flex: 1 1 100%; }
  .help-zoom img { max-height: none; }
}
@media print {
  #sidebar, #sb-scrim, #toasts, #busy, #net-banner, .help-tools, .help-toc, .help-results, .help-anchor, .help-q, .modal-back, .waking { display: none !important; }
  html, body, #app, #main, #view { height: auto !important; overflow: visible !important; background: #fff !important; display: block !important; }
  body.sb-overlay #main { margin: 0 !important; }
  .help-page { padding: 0; max-width: none; }
  .help-grid { display: block; }
  .help-side .help-toc, .help-light { display: none !important; }
  .help-zoom::after { display: none; }
  .help-body { max-width: none; color: #222; font-size: 11pt; }
  .help-sec { break-before: page; border: 0; }
  .help-sec:first-child { break-before: auto; }
  .help-shot, .help-qa, .help-tip, .help-steps > li { break-inside: avoid; }
  .help-zoom { box-shadow: none; }
  .help-body h2, .help-body h3 { break-after: avoid; }
  mark.hl { background: none; }
}

/* starting up: the database is waking (core.js Waking, and the server's own starting-up page) */
.waking { position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center; padding: 20px; background: rgba(250, 249, 245, .82);
  backdrop-filter: blur(2px); animation: fade .2s; }
[data-theme="dark"] .waking { background: rgba(31, 30, 29, .82); }
.waking.solo { background: var(--bg1); }
.waking-card { width: min(440px, 100%); background: var(--bg0); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-menu);
  padding: 26px 28px 22px; text-align: center; }
.waking-card h1 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.waking-card p { color: var(--fg2); line-height: 1.5; margin: 0; }
.waking-card > .brand { justify-content: center; margin: 0 0 16px; padding: 0; }
.waking-f { display: flex; justify-content: center; margin-top: 16px; }
.waking-f:has(.hidden:only-child) { display: none; }
.waking-card::after { content: ""; display: block; height: 3px; margin-top: 18px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat var(--accent-soft); animation: wake 1.4s ease-in-out infinite; }
.waking-card:has(#wk-again:not(.hidden))::after { display: none; }
@keyframes wake { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* waiting on the server (starting up): a full-width bar with light moving along it, never a bar that stops short */
#busy.waiting > div { transform: none !important; transition: none; box-shadow: none; border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat, color-mix(in srgb, var(--accent) 25%, transparent);
  animation: wake 1.4s ease-in-out infinite; }
.spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: rot .7s linear infinite; vertical-align: -2px; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* shell */
#app { display: flex; height: 100%; }
#sidebar { width: var(--sidebar); flex: none; background: var(--bg2); border-right: 1px solid var(--line2); display: flex; flex-direction: column;
  transition: width .2s ease; position: relative; z-index: 40; }
/* 2.3.3: the corner at the top left, one design wherever it shows (the sidebar's head, the phone's top bar, sign-in):
   the small document mark, the app's name (UI.APP) and, under it in the sidebar, the version, small and quiet. The name
   gives way (it ends in ...) before anything is pushed past the edge of a narrowed sidebar. */
.sb-top { display: flex; align-items: center; gap: 8px; padding: 14px 10px 10px 12px; min-height: 64px; flex: none; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: var(--fg1); text-decoration: none;
  border-radius: 10px; padding: 4px 6px; margin: -4px 0; position: relative; transition: background var(--t); }
a.brand:hover { background: var(--bg3); text-decoration: none; }
a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand-mark { display: block; flex: none; width: auto; height: 26px; }
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.brand-name { font-family: var(--sans); font-size: 15px; font-weight: 650; line-height: 19px; letter-spacing: -.005em; color: var(--fg1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-version { font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: .01em; color: var(--fg3);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-version:empty { display: none; }
/* Cimplifi's official logo (from cimplifi.com), shown as published: the guest pages, for people outside Cimplifi */
.brand-logo { display: block; height: 24px; width: auto; flex: none; }
.sb-nav { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 1px; }
.sb-new { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-radius: 10px; font-weight: 550; margin-bottom: 6px; transition: background var(--t); }
.sb-new:hover { background: var(--bg3); }
.sb-new-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; transition: transform var(--t); }
.sb-new:hover .sb-new-dot { transform: rotate(90deg); }
.sb-new-dot .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.sb-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 9px; color: var(--fg2); transition: background var(--t), color var(--t); width: 100%; text-align: left; }
.sb-item:hover { background: var(--bg3); color: var(--fg1); }
.sb-item.active { background: var(--bg4); color: var(--fg1); font-weight: 550; }
.sb-item .count { margin-left: auto; font-size: 11.5px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 600; }
.sb-section { display: flex; align-items: center; gap: 4px; width: calc(100% - 20px); margin: 10px 10px 2px; padding: 4px 6px; border-radius: 7px;
  font-size: 12px; font-weight: 550; color: var(--fg3); text-align: left; }
.sb-section:hover { background: var(--bg3); color: var(--fg2); }
.tw { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; transition: transform .15s ease; color: var(--fg4); }
.tw .ic { width: 13px; height: 13px; }
.collapsed > .tw, .sb-section.collapsed .tw { transform: rotate(-90deg); }
.sb-scroll { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.sb-folder { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--fg2); font-size: 13.5px; width: 100%; text-align: left; }
.sb-folder:hover { background: var(--bg3); color: var(--fg1); }
.sb-folder.active { background: var(--bg4); color: var(--fg1); }
.sb-folder .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-folder .n { font-size: 11.5px; color: var(--fg4); }
.sb-foot { padding: 8px 10px; border-top: 1px solid var(--line2); }
.sb-profile { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-align: left; }
.sb-profile:hover { background: var(--bg3); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; }
.pname { font-weight: 550; font-size: 13.5px; }
.psub { font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 600; line-height: 16px; vertical-align: 1px; }
.psub .role-tag:first-child { margin-left: 0; }
#pname { display: flex; align-items: center; min-width: 0; }
#pname .pname-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pname .role-tag { flex: none; }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view { flex: 1; min-height: 0; overflow-y: auto; animation: fade .18s; }
.page { max-width: 1400px; margin: 0; padding: 28px 40px 60px; }
.page.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 560; letter-spacing: -.015em; line-height: 1.15; }
.page-head .sub { color: var(--fg3); margin-top: 6px; font-size: 13.5px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
h2.section { font-size: 15px; font-weight: 620; margin: 28px 0 10px; display: flex; align-items: center; gap: 8px; }
h2.section:first-child { margin-top: 0; }

/* controls */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 540; border: 1px solid var(--line); background: var(--bg0); color: var(--fg1); transition: background var(--t), border-color var(--t), transform var(--t); white-space: nowrap; }
.btn:hover { background: var(--bg3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-h); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg3); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.working { pointer-events: none; opacity: .8; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--fg3); transition: background var(--t), color var(--t); }
.icon-btn:hover { background: var(--bg3); color: var(--fg1); }
.input, .select, .textarea { height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg0); outline: none; transition: border-color var(--t), box-shadow var(--t); width: 100%; }
.textarea { height: auto; min-height: 70px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 560; color: var(--fg2); }
.field .hint { font-size: 12px; color: var(--fg3); }
.row { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.45; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.search { position: relative; }
.search .ic { position: absolute; left: 11px; top: 10px; color: var(--fg3); }
.search .input { padding-left: 34px; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 560; background: var(--bg3); color: var(--fg2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* lists and tables */
.panel { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); }
.panel.pad { padding: 18px 20px; }
.list { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line2); transition: background var(--t); }
.list-row:first-child { border-top: 0; }
.list-row.link { cursor: pointer; }
.list-row.link:hover { background: var(--bg1); }
.list-row .main { flex: 1; min-width: 0; }
.list-row .row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { #st-row { flex-wrap: wrap; } #st-row .row-actions { width: 100%; justify-content: flex-start; } }
.list-row .title { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .meta { font-size: 12.5px; color: var(--fg3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 28px 18px; color: var(--fg3); text-align: center; line-height: 1.6; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.empty > .spin { color: var(--accent); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.tbl th { text-align: left; font-size: 12px; font-weight: 560; color: var(--fg3); padding: 10px 14px; background: var(--bg1); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-top: 1px solid var(--line2); vertical-align: middle; }
.tbl tr:first-child td { border-top: 0; }
.tbl tr.link { cursor: pointer; }
.tbl tr.link:hover td { background: var(--bg1); }
.tbl .t { font-weight: 560; }
.tbl .snip { font-size: 12.5px; color: var(--fg3); margin-top: 3px; max-width: 560px; }
.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* home */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; }
.box { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 4px 0; min-height: 120px; }
.box h3 { margin: 0; padding: 12px 16px 8px; font-size: 13.5px; font-weight: 620; display: flex; align-items: center; gap: 8px; }
.box h3 .n { margin-left: auto; color: var(--fg3); font-weight: 500; }
.box .list-row { padding: 9px 16px; }
.stagebar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.stagebar .seg { flex: 1; min-width: 120px; padding: 10px 12px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line2); }
.stagebar .seg .v { font-size: 22px; font-weight: 600; font-family: var(--serif); }
.stagebar .seg .k { font-size: 12px; color: var(--fg3); }

/* document page */
.doc-head { padding: 18px 28px 0; border-bottom: 1px solid var(--line2); background: var(--bg1); }
.doc-head .crumbs { font-size: 12.5px; color: var(--fg3); margin-bottom: 6px; }
.doc-head .crumbs a { color: var(--fg3); }
.doc-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-title h1 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 560; letter-spacing: -.01em; }
.doc-title .actions { margin-left: auto; display: flex; gap: 8px; }
.stages { display: flex; align-items: center; gap: 4px; margin: 12px 0 2px; flex-wrap: wrap; }
.stages .st { font-size: 12px; padding: 4px 10px; border-radius: 12px; color: var(--fg3); border: 1px solid transparent; }
.stages .st.done { color: var(--accent); }
.stages .st.now { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.stages .sep { color: var(--fg4); }
.tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; }
.tab { padding: 9px 14px 10px; font-size: 13.5px; color: var(--fg3); border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--fg1); }
.tab.active { color: var(--fg1); border-bottom-color: var(--accent); font-weight: 560; }
.tab .badge { font-size: 11px; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 1px 6px; font-weight: 600; }
.doc-body { flex: 1; min-height: 0; overflow-y: auto; }
.doc-body.editor-mode { overflow: hidden; display: flex; flex-direction: column; }
.editor-note { padding: 7px 20px; font-size: 12.5px; background: var(--bg2); color: var(--fg2); border-bottom: 1px solid var(--line2); display: flex; gap: 10px; align-items: center; min-height: 42px; }
.editor-note > .ic { color: var(--accent); }
.editor-wrap { flex: 1; min-height: 0; position: relative; }
.editor-wrap > div, .editor-wrap iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.editor-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--fg3); padding: 30px; line-height: 1.6; }

/* key terms, playbook */
.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.term { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 14px 16px; border-left: 3px solid var(--line); }
.term.attention { border-left-color: var(--accent); }
.term.warning { border-left-color: var(--bad); }
.term .k { font-size: 12px; color: var(--fg3); font-weight: 560; }
.term .v { font-size: 16px; font-weight: 600; margin-top: 4px; }
.term .v.blank { color: var(--fg4); font-weight: 450; font-size: 14px; }
.term .d { font-size: 12.5px; color: var(--fg2); margin-top: 4px; }
/* 2.3.1: what a tracked change would make the term, under the agreed value */
.term .kt-prop { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line2); }
.term .kt-pv { font-size: 15px; font-weight: 600; margin-left: 6px; color: var(--wait, #8f76cf); overflow-wrap: anywhere; }
.quote { margin-top: 8px; font-family: var(--serif); font-size: 13.5px; line-height: 1.55; color: var(--fg2); background: var(--bg1); border-radius: 8px; padding: 9px 11px; border: 1px solid var(--line2); }
details > summary { cursor: pointer; font-size: 12.5px; color: var(--fg3); margin-top: 8px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+ "; }
details[open] > summary::before { content: "- "; }
.finding { display: grid; grid-template-columns: 210px 1fr auto; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--line2); align-items: start; }
.finding:first-child { border-top: 0; }
.finding .ft { font-weight: 600; }
.finding .std { font-size: 12.5px; color: var(--fg3); margin-top: 6px; line-height: 1.5; }

/* negotiation */
.banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--radius); background: var(--bg0); border: 1px solid var(--line2); margin-bottom: 18px; flex-wrap: wrap; }
.banner .ic-wrap { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.banner .ic-wrap .ic { width: 20px; height: 20px; }
.banner .txt { flex: 1; min-width: 240px; }
.banner .txt b { font-weight: 620; }
.banner .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.proposal { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; transition: border-color var(--t); }
.proposal.decided { border-color: var(--accent); }
.proposal .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proposal .sec { font-weight: 620; }
.proposal .who { font-size: 12.5px; color: var(--fg3); }
.change { margin: 10px 0; font-family: var(--serif); font-size: 14px; line-height: 1.6; }
ins, .ins { background: var(--add-bg); color: var(--add-fg); text-decoration: none; border-radius: 3px; padding: 0 1px; }
del, .del { background: var(--del-bg); color: var(--del-fg); border-radius: 3px; padding: 0 1px; }
.why { font-size: 13px; color: var(--fg2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.decide { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.decide .btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.decide .btn.on.danger { background: var(--bad); border-color: var(--bad); color: var(--on-tone); }
.counter-box { margin-top: 10px; }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line2); }
.tl { position: relative; padding: 0 0 16px; }
.tl::before { content: ""; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg0); border: 2px solid var(--accent); }
.tl .w { font-size: 12.5px; color: var(--fg3); }
.sticky-bar { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg1) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line2); padding: 12px 0; margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* redline view */
.redline { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 24px 32px; font-family: var(--serif); font-size: 14.5px; line-height: 1.65; max-width: 860px; }
.redline p { margin: 0 0 12px; }
.redline p.same { color: var(--fg3); }

/* signing */
.sign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; height: calc(100vh - 250px); min-height: 440px; }
.sign-layout > .pdf-pages { overflow-y: auto; padding: 4px 8px 24px; min-height: 0; }
.sign-side { overflow-y: auto; min-height: 0; }
.signer-row .row .input { min-width: 0; }
.pdf-pages { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pdf-page { position: relative; box-shadow: var(--shadow); background: #fff; }
.pdf-page canvas { display: block; }
.sf { position: absolute; border: 1.5px dashed var(--accent); background: var(--accent-soft); border-radius: 4px; font-size: 11px; color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: move; user-select: none; overflow: hidden; }
.sf.s1 { border-color: var(--info); background: var(--info-soft); color: var(--info); }
.sf.s2 { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.sf .x { position: absolute; top: 1px; right: 3px; cursor: pointer; font-weight: 700; }
.sf .grip { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; cursor: nwse-resize; }
.sf.mine { cursor: pointer; border-style: solid; }
.sf.filled { background: transparent; border-color: var(--ok); }
.sf img { max-width: 100%; max-height: 100%; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.signer-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line2); }
.signer-row:first-child { border-top: 0; }
.swatch { width: 14px; height: 14px; border-radius: 4px; margin-top: 10px; }
.sigpad { border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none; width: 100%; height: 160px; cursor: crosshair; }
.sigtabs { display: flex; gap: 4px; margin-bottom: 10px; }

/* menus, modals, toasts */
.menu { position: fixed; z-index: 50; min-width: 200px; max-width: 340px; background: var(--bg0); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-menu); padding: 6px; font-size: 13.5px; animation: pop .12s ease-out; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; }
.menu button:hover { background: var(--bg3); }
.menu button.danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line2); margin: 5px 4px; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 60; display: grid; place-items: safe center; padding: 24px 16px; animation: fade .12s; overflow-y: auto; }
.modal { width: min(560px, calc(100vw - 32px)); background: var(--bg0); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-menu); animation: pop .14s ease-out; }
.modal.wide { width: min(780px, calc(100vw - 40px)); }
.modal-h { padding: 18px 22px 4px; font-size: 17px; font-weight: 620; }
.modal-b { padding: 12px 22px; line-height: 1.5; }
.modal-f { padding: 12px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--fg1); color: var(--bg1); padding: 10px 15px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-menu); animation: pop .15s; pointer-events: auto; max-width: 560px; line-height: 1.45; }
.toast.bad { background: var(--bad); color: var(--on-tone); }

/* sign-in */
.signin { min-height: 100%; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 30px; }
.signin-card { width: min(460px, 100%); }
.signin h1 { font-family: var(--serif); font-weight: 560; font-size: 30px; margin: 18px 0 6px; letter-spacing: -.015em; }
.signin-brand { padding: 0; margin: 0 0 14px; gap: 12px; }
.signin-brand .brand-mark { height: 36px; }
.signin .signin-brand h1 { margin: 0; font-size: 28px; line-height: 36px; white-space: normal; }
.who-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--bg0); margin-top: 8px; text-align: left; transition: border-color var(--t), background var(--t); }
.who-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* guest pages */
.guest-top { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line2); background: var(--bg2); }
/* 2.3.3: Cimplifi's logo, then the document's name after a hairline, quiet; it gives way (ends in ...) before the buttons */
.g-title { flex: 1; min-width: 0; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--line); line-height: 22px; color: var(--fg2);
  font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-title:empty { border-left: 0; }
.guest-body { display: flex; height: calc(100% - 56px); }
.guest-side { width: 320px; flex: none; border-left: 1px solid var(--line2); background: var(--bg1); padding: 18px; overflow-y: auto; }
.guest-main { flex: 1; min-width: 0; position: relative; overflow: auto; }

@media (max-width: 900px) {
  /* small screens use the icon rail (see the sidebar section) */
  .sign-layout, .grid2 { grid-template-columns: 1fr; }
  .finding { grid-template-columns: 1fr; }
  .guest-body { flex-direction: column; height: auto; }
  .guest-side { width: auto; border-left: 0; border-top: 1px solid var(--line2); }
  .page { padding: 20px 16px 40px; }
}

/* new contract chooser */
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin-bottom: 10px; transition: background .12s, border-color .12s; }
.choice:hover { background: var(--bg2); border-color: var(--accent); }
.choice .ic-wrap { color: var(--accent); margin-top: 2px; }

/* ── sidebar: collapsible groups, icon rail, small-screen overlay ─────────── */
.sb-toggle { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--fg3); flex: none; transition: background var(--t), color var(--t); }
.sb-toggle:hover { background: var(--bg3); color: var(--fg1); }
.sb-group > .sb-folder.root .tw { margin-left: -4px; }
.sb-group > .sb-kids { overflow: hidden; }
.sb-group.collapsed > .sb-kids { display: none; }
.sb-folder .tw:hover { color: var(--fg1); }
/* the sidebar's shape (2.0, js/app.js App.sidebar): two sections that fold away, a divider between them, a width handle */
.sb-fixed { padding: 4px 10px 2px; display: flex; flex-direction: column; gap: 1px; flex: none; }
.sb-head { display: flex; align-items: center; flex: none; }
.sb-head .sb-section { flex: 1; width: auto; margin: 8px 6px 2px 10px; }
.sb-head .sb-add { position: static; margin: 6px 12px 0 0; flex: none; }
.sb-nav { flex: none; min-height: 0; }
.sb-nav.sized { overflow-y: auto; scrollbar-width: thin; }
.sb-nav > *, .sb-fixed > * { flex: none; }
.sb-nav.sb-folded, #folders.sb-folded { display: none; }
.sb-split { flex: none; height: 9px; margin: 0 10px; cursor: row-resize; display: grid; place-items: center; border-radius: 6px; touch-action: none; outline-offset: -2px; }
.sb-split[hidden] { display: none; }
.sb-split span { width: 100%; height: 1px; background: var(--line2); transition: background var(--t), height var(--t); }
.sb-split:hover span, .sb-split:focus-visible span, .sb-dragging .sb-split span { height: 3px; border-radius: 2px; background: var(--accent); }
.sb-resize { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.sb-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--t); }
.sb-resize:hover::after, .sb-resize:focus-visible::after { background: var(--accent); }
.sb-resize:focus-visible { outline: none; }
body.sb-dragging, body.sb-dragging * { cursor: inherit; user-select: none !important; }
body.sb-dragging #sidebar { transition: none; }
body.sb-dragging iframe { pointer-events: none; }
body.sb-folders-folded .sb-nav { flex: 1 1 auto; overflow-y: auto; }
body.sb-folders-folded #sb-folders-head { margin-top: auto; }
.sb-rail .sb-head, .sb-rail .sb-split, .sb-rail .sb-resize, .sb-overlay .sb-resize { display: none; }
.sb-rail .sb-fixed { padding: 4px 8px 2px; }
.sb-rail .sb-nav, .sb-rail .sb-nav.sb-folded { display: flex; height: auto !important; overflow: visible; }
@media (pointer: coarse) { .sb-resize, .sb-split { display: none; } }
.sb-item, .sb-new, .sb-profile { position: relative; }

body.sb-rail { --sidebar: 64px; }
.sb-rail .sb-top { flex-direction: column; height: auto; gap: 6px; padding: 14px 0 8px; }
/* the rail: the mark alone, centered over the icons, its name on hover like theirs */
.sb-rail #sidebar .brand { flex: none; width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; }
.sb-rail #sidebar .brand-text { display: none; }
.sb-rail .sb-toggle { margin: 0; }
.sb-rail .sb-nav { padding: 4px 8px; flex: 1; }
.sb-rail .sb-item, .sb-rail .sb-new { justify-content: center; padding: 0; }
.sb-rail .sb-item > span:nth-child(2), .sb-rail .sb-new > span:last-child { display: none; }
.sb-rail .sb-item .count { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
.sb-rail .sb-section, .sb-rail .sb-scroll { display: none; }
.sb-rail .sb-foot { padding: 8px; }
.sb-rail .sb-profile { justify-content: center; padding: 7px 0; }
.sb-rail .sb-profile > span:not(.avatar) { display: none; }
/* names on hover in the rail */
.sb-rail [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--fg1); color: var(--bg1); font-size: 12.5px; font-weight: 500; padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  pointer-events: none; z-index: 60; box-shadow: var(--shadow-menu); animation: fade .12s; }
/* small screens: the rail, and the full sidebar opens over the page */
#sb-scrim { display: none; }
body.sb-overlay #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--sb-w, 248px), 86vw); box-shadow: 0 0 40px rgba(0, 0, 0, .18); z-index: 600; }
body.sb-overlay #sb-scrim { display: block; position: fixed; inset: 0; background: rgba(20, 20, 18, .25); z-index: 590; animation: fade .15s; }
body.sb-overlay #main { margin-left: 64px; }

/* ── page loading, errors, offline ─────────────────────────────────────────── */
#view.is-loading { opacity: .6; transition: opacity .15s ease .12s; }
/* anything shown on its own in the middle of the content area (an error, a link that no longer works) */
.center-stage { min-height: 100%; display: grid; place-items: safe center; padding: 28px 16px; }
.center-stage > .error-card { margin: 0; width: min(460px, 100%); }
.error-card { max-width: 460px; margin: 60px auto; text-align: center; padding: 30px 28px; border: 1px solid var(--line2); border-radius: 14px; background: var(--bg1); animation: pop .18s; }
.error-card h2 { font-size: 19px; margin: 6px 0 6px; font-weight: 600; }
.error-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--bg3); display: grid; place-items: center; margin: 0 auto 8px; color: var(--fg2); }
#net-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--bad); color: var(--on-tone); padding: 9px 14px;
  border-radius: 10px; z-index: 1500; display: flex; gap: 8px; align-items: center; font-size: 13px; box-shadow: var(--shadow-menu); animation: pop .15s; }
button:disabled, .btn.working { cursor: progress; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* going live */
.golive { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.gl-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.avatar.big { width: 40px; height: 40px; font-size: 16px; }
.prefs .pref-row { flex-wrap: wrap; }
.prefs .pref-row .main { min-width: 220px; }
.segctl.pref-choice { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 600px) { .prefs .pref-row > .segctl, .prefs .pref-row > .select { width: 100% !important; } .prefs .pref-row > .segctl button { flex: 1 1 auto; justify-content: center; } }
.pref-choice button { display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.pref-choice button .ic { width: 14px; height: 14px; }
/* Personal settings > Notifications (2.3): two switches per row, side by side; under the words on a phone */
.nt-sw { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; max-width: 100%; }
.nt-sw .segctl { flex: 1 1 auto; }
.nt-foot { margin-top: 10px; }
@media (max-width: 600px) { .nt-list .pref-row > .nt-sw { width: 100%; } .nt-sw .sw-row { flex: 1 1 40%; } }
fieldset.field.plain { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.field.plain legend { padding: 0; font-size: 12.5px; font-weight: 560; color: var(--fg2); margin-bottom: 6px; }
.gl-admins { border-top: 1px solid var(--line2); padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.gl-admins .muted { flex-basis: 100%; }
.gl-admins code { white-space: normal; word-break: break-word; }
.claim-check { text-align: left; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg1); padding: 12px 14px; margin-top: 14px; }
.claim-h { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-bottom: 8px; }
.claim-h .ic { color: var(--accent); }
.claim-check dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.claim-check dt { color: var(--fg3); }
.claim-check dd { margin: 0; word-break: break-word; }
.claim-check code { font-size: 12.5px; background: var(--bg3); padding: 1px 5px; border-radius: 5px; }
.gl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gl-head b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.gl-card .field { margin-bottom: 0; }
.gl-card code.copy { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 7px; background: var(--bg3); color: var(--fg1); cursor: copy; word-break: break-all; font-size: 12px; }
.btn.disabled, .btn:disabled { opacity: .5; }
@media (max-width: 1100px) { .golive { grid-template-columns: minmax(0, 1fr); } }
.gl-card { min-width: 0; }
.gl-card .row { flex-wrap: wrap; }

/* a two-way switch (Simple | Full editor) */
.segctl { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg0); flex: none; }
.segctl button { height: 26px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; color: var(--fg2); transition: background var(--t), color var(--t); }
.segctl button:hover { color: var(--fg1); background: var(--bg2); }
.segctl button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* people */
.tbl.people td.num, .tbl.people th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.people tr.off td.t, .tbl.people tr.off td.muted { opacity: .65; }
.modal .check { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

/* the two choices in New contract are buttons (keyboard and screen readers) */
button.choice { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg0); }
button.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* an empty group says so in one quiet line instead of an empty card */
h2.section.quiet { color: var(--fg3); font-weight: 520; margin: 18px 0 4px; }

/* signer page: your next field blinks once when you jump to it */
.sf.flash { animation: sfflash 1.2s ease 1; }
@keyframes sfflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 6px var(--accent-soft); } }
.ok-text { color: var(--ok); font-weight: 560; }

/* Home cards are narrow: titles and lines wrap to two lines instead of cutting a name in half */
.cards .box .list-row .title, .cards .box .list-row .meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Settings explains each choice in full */
.settings .list-row .meta { white-space: normal; line-height: 1.45; }
.settings .list-row .check { white-space: nowrap; }

/* roles and People (js/people.js) */
.role-locked { display: inline-flex; align-items: center; gap: 5px; }
.role-locked .lock-note { font-weight: 450; opacity: .8; border-left: 1px solid currentColor; padding-left: 6px; margin-left: 1px; }
.roles-key { display: flex; gap: 10px; align-items: flex-start; background: var(--bg0); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 12px; margin: -6px 0 14px; font-size: 13px; color: var(--fg2); line-height: 1.5; }
.roles-key .ic { color: var(--accent); margin-top: 3px; }
.remove-box { border: 1px solid var(--bad-soft); background: color-mix(in srgb, var(--bad-soft) 40%, transparent); border-radius: 10px; padding: 10px 12px; margin-top: 4px; }
.remove-box p { margin: 4px 0 8px; line-height: 1.45; }
/* phones: wide tables scroll inside themselves instead of pushing the page sideways */
@media (max-width: 700px) {
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl .snip { max-width: 260px; }
  h2.section { flex-wrap: wrap; }
  .settings .list-row { flex-wrap: wrap; }
  .settings .list-row .title { white-space: normal; }
  .grid2 { grid-template-columns: minmax(0, 1fr) !important; }
  .gl-card code, .gl-admins code { word-break: break-all; }
}

/* ── Home dashboard (js/home.js) ───────────────────────────────────────── */
.dash { max-width: 1400px; }
.dash > * { animation: rise .42s cubic-bezier(.2, .7, .2, 1) both; }
.dash > :nth-child(2) { animation-delay: .05s; }
.dash > :nth-child(3) { animation-delay: .1s; }
.dash > :nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero { position: relative; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 26px 28px; margin-bottom: 18px; border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 55%),
              linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--bg0)) 0%, var(--bg0) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line2));
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 28px -18px color-mix(in srgb, var(--accent) 60%, transparent); }
.hero-date { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hero h1 { margin: 6px 0 6px; font-family: var(--serif); font-size: 32px; font-weight: 560; letter-spacing: -.015em; line-height: 1.1; }
.hero-text { flex: 1 1 380px; min-width: 0; }
.hero-sum { margin: 0; color: var(--fg2); font-size: 15px; max-width: 640px; text-wrap: pretty; }
.hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l l" "v s" "p s"; align-items: end; gap: 2px 10px; padding: 14px 16px 12px;
  background: var(--bg0); border: 1px solid var(--line2); border-radius: 14px; color: var(--fg1); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
a.kpi:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); box-shadow: 0 8px 22px -14px rgba(0,0,0,.25); }
a.kpi:active { transform: translateY(0); }
.kpi-l { grid-area: l; font-size: 12.5px; color: var(--fg3); font-weight: 520; }
.kpi-v { grid-area: v; font-size: 30px; font-weight: 640; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-p { grid-area: p; font-size: 11px; color: var(--fg4); }
.kpi .spark { grid-area: s; align-self: end; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: draw 1s .15s ease-out both; }
.spark-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.spark-dot { fill: var(--accent); stroke: var(--bg0); stroke-width: 1.5; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.dash-grid .col { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.dash-card { background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px -24px rgba(0,0,0,.25); }
.dash-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-h h2 { margin: 0; font-size: 15px; font-weight: 640; display: flex; align-items: center; gap: 8px; }
.dash-h h2 .ic { color: var(--accent); }
.dash-h .more { margin-left: auto; font-size: 12.5px; display: inline-flex; align-items: center; gap: 2px; }
.dash-h .count { margin-left: auto; font-size: 12px; color: var(--fg3); }
.dash-h { flex-wrap: wrap; }
.segctl.sm button { height: 22px; padding: 0 8px; font-size: 12px; }
.cmt-h time { white-space: nowrap; }
.tabs-mini { margin-left: auto; display: inline-flex; padding: 2px; background: var(--bg2); border-radius: 9px; }
.tabs-mini button { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; color: var(--fg2); display: inline-flex; gap: 6px; align-items: center; }
.tabs-mini button span { font-size: 11px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.tabs-mini button.on { background: var(--bg0); color: var(--fg1); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.need { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -8px; border-radius: 10px; color: var(--fg1); text-decoration: none;
  transition: background var(--t), transform var(--t); }
.need + .need { box-shadow: 0 -1px 0 var(--line2); }
.need:hover { background: var(--bg1); text-decoration: none; }
.need:active { transform: scale(.995); }
.need-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.need.renewal .need-ic { background: var(--warn-soft); color: var(--warn); }
.need.comment .need-ic, .need.playbook .need-ic, .need.update .need-ic { background: var(--bg2); color: var(--fg2); }
.need-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.need-title { font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 2.3.4: Add people */
.ap-body .view-switch { margin-bottom: 14px; flex-wrap: wrap; }
.ap-panel { min-height: 160px; }
.ap-h { font-size: 13.5px; font-weight: 620; margin: 18px 0 8px; }
.ap-row { flex-wrap: wrap; row-gap: 6px; }
.ap-st { flex: none; }
.ap-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ap-go { display: flex; justify-content: flex-end; margin-top: 8px; }
.ap-none { padding: 8px 0; }
.ap-why, .ap-added, .ap-wait { margin-bottom: 12px; }
.ap-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-names { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ap-gone { margin-top: 8px; font-size: 13px; }
@media (max-width: 760px) { .ap-btns { margin-left: 0; width: 100%; } .ap-btns .btn { min-height: 40px; } }
.need-where { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need-sub b { font-weight: 600; color: var(--fg1); }
.need-when { flex: none; font-size: 12px; color: var(--fg3); display: inline-flex; align-items: center; gap: 10px; }
.need-also { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.need-also .also { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; color: var(--fg2); background: var(--bg2); }
.need-also .also.renewal { background: var(--warn-soft); color: var(--warn); }
.need-also .also .ic { width: 11px; height: 11px; }
.age { font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--bg2); color: var(--fg2); }
.chip.ok { background: var(--accent-soft); color: var(--accent); }        /* our move, a highlight */
.chip.done { background: var(--ok-soft); color: var(--ok); }               /* done, within standard, signed */
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--av); background: color-mix(in srgb, var(--av) 16%, var(--bg0)); border: 1px solid color-mix(in srgb, var(--av) 28%, transparent); }
.av.me { box-shadow: 0 0 0 2px var(--bg0), 0 0 0 3.5px var(--accent); }
.av.empty { background: var(--bg2); border: 1px dashed var(--line); }
[data-theme="dark"] .av { color: color-mix(in srgb, var(--av) 55%, #fff); background: color-mix(in srgb, var(--av) 30%, var(--bg0)); }
.pipe { display: flex; gap: 3px; height: 14px; margin: 6px 0 12px; }
.pipe-seg { flex: var(--w) 1 0; min-width: 0; border-radius: 4px; background: var(--c); transform-origin: left;
  animation: grow .6s cubic-bezier(.2, .7, .2, 1) both; transition: filter var(--t), transform var(--t); }
.pipe-seg:hover { filter: brightness(1.08) saturate(1.1); transform: scaleY(1.25); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.st-draft { --c: #b8b5aa; }
.st-internal-review { --c: #8aa9c4; }
.st-negotiation { --c: #8f76cf; }
.st-signature { --c: #0069b4; }
.st-executed { --c: #3f8a4e; }
[data-theme="dark"] .st-draft { --c: #6f6d66; }
[data-theme="dark"] .st-executed { --c: #7dbf86; }
[data-theme="dark"] .st-signature { --c: #5aa9e6; }
[data-theme="dark"] .st-internal-review { --c: #7f9bb5; }
.pipe-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pipe-legend a { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; color: var(--fg1); text-decoration: none; transition: background var(--t); }
.pipe-legend a:hover { background: var(--bg1); text-decoration: none; }
.pipe-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pipe-legend .n { font-size: 20px; font-weight: 640; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pipe-legend .l { font-size: 11.5px; color: var(--fg3); line-height: 1.25; }
.rt { position: relative; height: 46px; margin: 8px 6px 4px; }
.rt-track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 6px; background: var(--bg2); overflow: hidden; }
.rt-past { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--fg4) 25%, transparent); }
.rt-soon { position: absolute; top: 0; bottom: 0; background: var(--warn-soft); }
.rt-dot { position: absolute; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2.5px solid var(--bg0);
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--t); animation: pop .4s .3s both; }
.rt-dot.ok { background: var(--accent); }
.rt-dot.warn { background: var(--warn); }
.rt-dot.bad { background: var(--bad); }
.rt-dot:hover { transform: scale(1.3); }
.rt .tick { position: absolute; top: 26px; transform: translateX(-50%); font-size: 10.5px; color: var(--fg4); white-space: nowrap; }
.rt .tick i { display: block; width: 1px; height: 4px; background: var(--line); margin: 0 auto 2px; }
.rt-list a { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "c t" "c m"; column-gap: 10px; align-items: center; padding: 7px 8px; margin: 0 -8px;
  border-radius: 8px; color: var(--fg1); text-decoration: none; }
.rt-list a:hover { background: var(--bg1); text-decoration: none; }
.rt-list .chip { grid-area: c; justify-self: start; }
.rt-list .t { grid-area: t; font-weight: 560; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-list .muted { grid-area: m; font-size: 12px; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.act { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--fg1); text-decoration: none; min-width: 0; }
a.act[href]:hover { background: var(--bg1); text-decoration: none; }
.act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.act-main > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-main b { font-weight: 600; }
.act-main .t { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-when { flex: none; font-size: 11.5px; color: var(--fg4); }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 12px; color: var(--fg2); }
.empty-state .ic { width: 22px; height: 22px; color: var(--accent); background: var(--accent-soft); border-radius: 50%; padding: 8px; box-sizing: content-box; }
.empty-state.small { padding: 14px 8px; }
.sk { display: block; border-radius: 6px; margin: 6px 0; background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite; }
.sk-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.sk-row .sk:first-child { border-radius: 50%; flex: none; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dash .hero .sk, .dash .kpi .sk { margin: 8px 0; }
@media (max-width: 1150px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero { padding: 18px; }
  .hero h1 { font-size: 26px; }
  .hero-actions { margin-left: 0; }
  .kpis, .acts { grid-template-columns: minmax(0, 1fr); }
  .pipe-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 1.7.0 polish: one depth scale, one chip system, motion, tables, toasts, empty states ─────────────── */
[data-theme="light"] {
  --shadow-card: 0 1px 2px rgba(0,0,0,.035), 0 8px 24px -18px rgba(20, 40, 30, .28);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.04), 0 14px 30px -16px rgba(20, 40, 30, .32);
  --info: #3f6e94; --info-soft: rgba(63, 110, 148, .11);
}
[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.6);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 16px 32px -16px rgba(0,0,0,.7);
  --info: #93b6d4; --info-soft: rgba(147, 182, 212, .14);
}
/* type: a tighter, clearer scale */
.page-head { margin-bottom: 22px; gap: 14px 16px; }
.page-head h1 { font-size: 30px; letter-spacing: -.02em; }
.page-head .sub { font-size: 14px; color: var(--fg3); max-width: 780px; line-height: 1.45; }
h2.section { font-size: 15.5px; letter-spacing: -.005em; margin: 30px 0 12px; }
h2.section .ic { color: var(--accent); }
/* depth: every surface on the same scale */
.list, .panel, table.tbl, .box, .proposal, .term, .banner, .finding-list, .dash-card, .kpi, .error-card, .gl-card, .waking-card {
  box-shadow: var(--shadow-card); }
.list, .panel, table.tbl, .box, .banner { border-color: var(--line2); }
.proposal, .term { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.term:hover { box-shadow: var(--shadow-hover); }
/* hover and press */
.list-row.link:hover, .tbl tr.link:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--bg1)); }
.list-row.link:active, .tbl tr.link:active td { background: color-mix(in srgb, var(--accent) 9%, var(--bg1)); }
.btn { transition: background var(--t), border-color var(--t), transform .08s ease, box-shadow var(--t); }
.btn:hover { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.primary { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.sb-item, .sb-folder { transition: background var(--t), color var(--t); }
.sb-item:active, .sb-folder:active { transform: scale(.99); }
/* smooth page changes */
#view { animation: view-in .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* one chip system: neutral, teal (inside Cimplifi), violet (waiting), green (going out, done), red (problems) */
.pill { height: 22px; padding: 0 9px; border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: .005em; }
.pill.stage::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.info { background: var(--info-soft); color: var(--info); }
/* tables: the column names stay in view, rows answer the pointer */
table.tbl { overflow: visible; border-collapse: separate; }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bg1) 92%, var(--bg0)); backdrop-filter: blur(6px); }
.tbl thead th:first-child { border-top-left-radius: var(--radius); }
.tbl thead th:last-child { border-top-right-radius: var(--radius); }
.tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.tbl tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.tbl tbody tr:hover td { background: var(--bg1); }
.tbl td { transition: background var(--t); }
/* empty states: a small picture, what will show up here, and the next step */
.empty-state { gap: 8px; padding: 30px 16px; }
.empty-state b { font-size: 14.5px; color: var(--fg1); }
.empty-state .muted { max-width: 420px; line-height: 1.5; }
.empty-state .btn { margin-top: 4px; }
.empty-art { position: relative; display: block; width: 88px; height: 64px; margin-bottom: 4px; }
.empty-art .ea-back { fill: var(--bg2); }
.empty-art .ea-front { fill: var(--bg0); stroke: var(--line); }
.empty-art .ea-line { fill: var(--bg3); }
.empty-art .empty-ic { position: absolute; right: 2px; bottom: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
.empty-art .empty-ic .ic { width: 15px; height: 15px; background: none; padding: 0; border-radius: 0; color: inherit; }
.empty-state.small { padding: 18px 12px; }
.empty-state.small .empty-art { transform: scale(.8); margin: -6px 0 -2px; }
/* toasts: friendly, with an icon, sliding in */
.toast { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 12px; font-weight: 520;
  background: var(--bg0); color: var(--fg1); border: 1px solid var(--line2); box-shadow: var(--shadow-menu); animation: toast-in .26s cubic-bezier(.2, .7, .2, 1);
  transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateY(6px); }
.toast-ic { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--on-tone); }
.toast.bad { background: var(--bg0); color: var(--fg1); border-color: color-mix(in srgb, var(--bad) 35%, var(--line2)); }
.toast.bad .toast-ic { background: var(--bad); color: var(--on-tone); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
/* the document header: the stage stepper reads as steps */
.stages .st { padding: 4px 11px; border: 1px solid var(--line2); background: var(--bg0); font-weight: 520; transition: background var(--t), border-color var(--t); }
.stages .st:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line2)); }
.stages .st.done { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.stages .st.now { box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent); border-color: var(--accent); }
.doc-head { background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%); }
/* modals: a touch more depth, a softer backdrop */
.modal-back { background: rgba(20, 20, 19, .32); backdrop-filter: blur(2px); }

/* ── Ctrl+K quick search (js/search.js) ───────────────────────────────────── */
.qs-back { position: fixed; inset: 0; z-index: 1500; background: rgba(20, 20, 19, .32); backdrop-filter: blur(2px); display: grid; place-items: safe center;
  padding: 16px; animation: fade .12s; }
.qs { width: min(640px, calc(100vw - 32px)); background: var(--bg0); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-menu);
  overflow: hidden; animation: pop .14s ease-out; }
.qs-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line2); }
.qs-in .ic { color: var(--fg3); width: 18px; height: 18px; }
.qs-in input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--fg1); }
.qs-in kbd, .sb-search kbd { font: inherit; font-size: 11px; color: var(--fg3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--bg1); }
.qs-list { height: min(56vh, 460px); overflow-y: auto; padding: 6px; }   /* a fixed height: the box stays centered and still as you type */
.qs-group { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg4); padding: 10px 10px 4px; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--fg1); cursor: pointer; }
.qs-item .qs-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); }
.qs-item .qs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qs-item .qs-t b { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item .qs-t span { font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; }
.qs-item.on { background: var(--accent-soft); }
.qs-item.on .qs-ic { background: var(--accent); color: var(--on-accent); }
.qs-empty { padding: 26px 16px; text-align: center; color: var(--fg3); }
.qs-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line2); font-size: 11.5px; color: var(--fg3); background: var(--bg1); }
.sb-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px 8px; height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line2); background: var(--bg0); color: var(--fg3); font-size: 13px; transition: border-color var(--t), box-shadow var(--t); }
.sb-search:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line2)); box-shadow: var(--shadow-card); }
.sb-search kbd { margin-left: auto; }
.sb-rail .sb-search { width: 40px; margin: 0 auto 8px; justify-content: center; padding: 0; }
.sb-rail .sb-search .sb-search-t, .sb-rail .sb-search kbd { display: none; }

[data-theme="dark"] .pill:not(.ok):not(.bad):not(.warn):not(.info):not(.accent), [data-theme="dark"] .chip:not(.ok):not(.bad):not(.warn) { background: var(--bg4); color: var(--fg2); }
.rt-track { background: color-mix(in srgb, var(--fg1) 9%, transparent); }
@media (max-width: 700px) {               /* phones: wide tables scroll inside themselves (after the sticky-header rule) */
  table.tbl { display: block; overflow-x: auto; }
  .tbl thead th { position: static; backdrop-filter: none; }
}
.kpi-p { white-space: nowrap; }
@media (max-width: 700px) {               /* Home on a phone: the queue header wraps, a row puts its timing under the title */
  .dash-h { flex-wrap: wrap; }
  .dash-h .tabs-mini { margin-left: 0; width: 100%; }
  .dash-h .tabs-mini button { flex: 1; justify-content: center; }
  .need { flex-wrap: wrap; row-gap: 4px; }
  .need-main { flex: 1 1 calc(100% - 50px); }
  .need-when { margin-left: 44px; }
  .need > .av { display: none; }
}
@media (max-width: 700px) { .need-title, .need-sub, .need-where { white-space: normal; } }
/* "waiting" is violet (never amber or orange); it sits clearly apart from the greens and the teal in both themes */
[data-theme="dark"] .st-negotiation { --c: #a58ee6; }

/* ── private links without email (1.7.1): the note where things are sent, link actions, the Outbox ──────── */
.mail-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 0 0 16px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: var(--warn-soft); color: var(--fg1); border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent); }
.mail-note > .ic { color: var(--warn); margin-top: 2px; }
.mail-note b { font-weight: 620; }
.panel .mail-note { margin: 6px 0 0; }
.page-head + .mail-note { margin-top: -6px; }
.banner.sign-me { border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); background: color-mix(in srgb, var(--accent) 6%, var(--bg0)); }
.signer-line { flex-wrap: wrap; }
.link-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.need-go { pointer-events: none; }
.outbox { max-width: 1100px; }
.ob-tools { display: flex; gap: 10px; margin-bottom: 14px; }
.ob-tools .search { flex: 1; }
.ob-item + .ob-item { border-top: 1px solid var(--line2); }
.ob-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; transition: background var(--t); }
button.ob-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg1)); }
.ob-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ob-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-subj { font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-to { font-size: 12.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-when { flex: none; font-size: 12px; color: var(--fg3); }
.ob-row .tw { transition: transform var(--t); transform: rotate(-90deg); }
.ob-item.open .ob-row .tw { transform: none; }
.ob-body { display: none; padding: 0 16px 16px 62px; }
.ob-item.open .ob-body { display: block; animation: rise .22s ease both; }
.ob-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ob-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-link .chip { min-width: 150px; }
.ob-text { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.6; color: var(--fg2); background: var(--bg1);
  border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
.ob-list .sk { margin: 4px 0; }
@media (max-width: 700px) {
  .ob-body { padding-left: 16px; }
  .ob-link .chip { min-width: 0; }
  .ob-subj, .ob-to { white-space: normal; overflow-wrap: anywhere; }
}
.guest-top .btn.sm { flex: none; }

/* ── the contract page (js/doc.js, 1.8.0): a header with the key facts, a stage stepper and the next step ────── */
.cdoc { display: flex; flex-direction: column; height: 100%; }
.doc-head.v2 { position: relative; padding: 16px 28px 0; border-bottom: 1px solid var(--line2);
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 50%),
              linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%); }
.doc-head.v2 .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; color: var(--fg3); margin-bottom: 10px; }
.doc-head.v2 .crumbs a { color: var(--fg3); }
.doc-head.v2 .crumbs a:hover { color: var(--accent); }
.doc-head.v2 .crumbs .sep { color: var(--fg4); }
.dh-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dh-ic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  background: var(--bg0); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line2)); box-shadow: var(--shadow-card); }
.dh-ic .ft { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  padding: 0 4px; border-radius: 4px; background: var(--accent); color: var(--on-accent); line-height: 13px; }
.dh-ic .ft:empty { display: none; }
.dh-ic.tpl { color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, var(--line2)); }
.dh-title { flex: 1 1 360px; min-width: 0; }
.dh-title h1 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 560; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.dh-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dh-chips .kind { font-size: 12.5px; margin-right: 2px; }
.chip .ic { width: 11px; height: 11px; margin-right: 3px; }
.chip.info { background: var(--info-soft); color: var(--info); }
.doc-head.v2 .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.btn.icon-only { width: 34px; padding: 0; justify-content: center; }
.dh-row { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin: 16px 0 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; flex: 1 1 520px; min-width: 0; }
.fact { min-width: 0; padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line2); }
.fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fact dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg3); margin-bottom: 3px; }
.fact dd { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 560; font-size: 13.5px; white-space: nowrap; }
.fact dd .muted { font-weight: 450; }
.fact dd .chip { height: 19px; font-size: 11px; }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.av.me.sm { box-shadow: 0 0 0 2px var(--bg0), 0 0 0 3px var(--accent); }
/* stage stepper: numbered dots joined by a line; done in green, now ringed (violet while with the other side) */
.stepper { list-style: none; display: flex; margin: 0; padding: 0; flex: none; }
.stepper li { position: relative; display: flex; }
.stepper li + li { margin-left: 22px; }
.stepper li + li::before { content: ""; position: absolute; left: -18px; top: 13px; width: 14px; height: 2px; border-radius: 2px; background: var(--line); }
.stepper li.done + li::before { background: var(--ok); }
.stepper button { display: flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border-radius: 999px; font-size: 12.5px; color: var(--fg3); transition: background var(--t), color var(--t); }
.stepper button:hover { background: var(--bg3); color: var(--fg1); }
.stepper .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 650; background: var(--bg0);
  border: 1.5px solid var(--line); color: var(--fg3); transition: background var(--t), border-color var(--t); }
.stepper .dot .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.stepper li.done button { color: var(--fg2); }
.stepper li.done .dot { background: var(--ok); border-color: var(--ok); color: var(--on-tone); }
.stepper li.now button { color: var(--fg1); font-weight: 620; background: var(--accent-soft); }
.stepper li.now .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.stepper li.now.wait button { background: var(--warn-soft); }
.stepper li.now.wait .dot { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.doc-head.v2 .tabs { margin-top: 10px; gap: 0; scrollbar-width: none; }
.doc-head.v2 .tabs::-webkit-scrollbar { display: none; }
.doc-head.v2 .tab { padding: 10px 13px 11px; transition: color var(--t), border-color var(--t); }
.doc-head.v2 .tab .ic { width: 15px; height: 15px; }
/* 2.3.3: a crowded tabs bar goes compact, then scrolls with a fade on the side that has more (doc.js fitTabs) */
.doc-head.v2 .tabs.tight .tab { padding-left: 9px; padding-right: 9px; }
.doc-head.v2 .tabs.tight .tab > .ic, .doc-head.v2 .tabs.tight .tab > svg:first-child { display: none; }
.doc-head.v2 .tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.doc-head.v2 .tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.doc-head.v2 .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tab .tcount { font-size: 11px; color: var(--fg3); background: var(--bg3); border-radius: 999px; padding: 0 6px; line-height: 17px; font-weight: 600; }
.tab.active .tcount { background: var(--accent-soft); color: var(--accent); }
.doc-head.v2 .tabs .sk { margin: 12px 14px 12px 0; display: inline-block; }
.doc-head.v2 .facts .sk { margin: 4px 0; }
/* the Overview tab */
.page.ov { max-width: 1400px; }
.ov > * { animation: rise .38s cubic-bezier(.2, .7, .2, 1) both; }
.ov > :nth-child(2) { animation-delay: .05s; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ov-grid .col { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ov-next { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 18px; border-radius: 16px; background: var(--bg0);
  border: 1px solid var(--line2); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.ov-next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.ov-next.ok::before { background: var(--accent); }
.ov-next.done::before { background: var(--ok); }
.ov-next.done .ov-next-ic, .pk-next.done .ov-next-ic { background: var(--ok-soft); color: var(--ok); }
.ov-next.wait::before { background: var(--warn); }
.ov-next.bad::before { background: var(--bad); }
.ov-next-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); }
.ov-next.ok .ov-next-ic { background: var(--accent-soft); color: var(--accent); }
.ov-next.wait .ov-next-ic { background: var(--warn-soft); color: var(--warn); }
.ov-next.bad .ov-next-ic { background: var(--bad-soft); color: var(--bad); }
.ov-next-main { flex: 1; min-width: 0; }
.ov-next-k { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
/* who acts next (2.3.0): a person, you, a role such as a legal approver, or the other side */
.ov-next-who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 13px; min-width: 0; }
.ov-next-who b { font-weight: 620; overflow-wrap: anywhere; }
.who-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pk-next .who-chip { margin-top: 6px; }
.ov-next h2 { margin: 3px 0 4px; font-size: 18px; font-weight: 640; letter-spacing: -.01em; }
.ov-next p { margin: 0; color: var(--fg2); max-width: 720px; line-height: 1.5; }
.ov-next-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.signers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.signers li { display: flex; align-items: center; gap: 10px; }
.signers .sd { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--fg3); flex: none; }
.signers .sd .ic { width: 12px; height: 12px; }
.signers li.ok .sd { background: var(--accent); color: var(--on-accent); }
.signers li.warn .sd { background: var(--warn-soft); color: var(--warn); }
.signers li.bad .sd { background: var(--bad-soft); color: var(--bad); }
.signers .sn { flex: 1; min-width: 0; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signers .sn .muted { font-weight: 450; font-size: 12px; margin-left: 4px; }
.kt-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.kt-mini > div { padding: 10px 12px 10px 0; border-top: 1px solid var(--line2); min-width: 0; }
.kt-mini > div:nth-child(-n+2) { border-top: 0; }
.kt-mini > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line2); }
.kt-mini dt { font-size: 12px; color: var(--fg3); font-weight: 520; }
.kt-mini dd { margin: 2px 0 0; font-weight: 620; font-size: 14.5px; }
.kt-mini dd.blank { color: var(--fg4); font-weight: 450; font-size: 13.5px; }
.kt-mini .d { display: block; font-size: 12px; color: var(--fg3); margin-top: 1px; }
.kt-mini .attention dd { color: var(--accent); }
.kt-mini .warning dd { color: var(--bad); }
.ov-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg1); font-size: 12.5px; color: var(--fg2); }
.ov-note .ic { color: var(--warn); }
.cmts { display: grid; gap: 4px; }
.cmt { display: flex; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; }
.cmt + .cmt { box-shadow: 0 -1px 0 var(--line2); }
.cmt.theirs { background: color-mix(in srgb, var(--warn) 5%, transparent); }
.cmt-main { flex: 1; min-width: 0; }
.cmt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cmt-h b { font-weight: 620; }
.cmt-h .muted { font-size: 12px; margin-left: auto; }
.cmt-q { margin-top: 5px; font-family: var(--serif); font-size: 13px; color: var(--fg3); border-left: 2px solid var(--line); padding-left: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmt-t { margin-top: 5px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.more-row { display: flex; align-items: center; gap: 4px; padding: 8px 0 0; font-size: 12.5px; }
.pb-sum { display: grid; gap: 8px; margin-bottom: 10px; }
.pb-big { display: flex; align-items: baseline; gap: 8px; }
.pb-big b { font-size: 28px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pb-big span { color: var(--fg3); font-size: 13px; }
.pb-bar { display: flex; gap: 3px; height: 10px; }
.pb-bar span { border-radius: 4px; min-width: 6px; animation: grow .6s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
.pb-bar .within, .pb-legend .within i, .pb-items .within .pd { background: var(--ok); }
.pb-bar .outside, .pb-legend .outside i, .pb-items .outside .pd { background: var(--bad); }
.pb-bar .unknown, .pb-legend .unknown i, .pb-items .unknown .pd { background: var(--warn); }
.pb-bar .missing, .pb-legend .missing i, .pb-items .missing .pd { background: color-mix(in srgb, var(--fg4) 60%, transparent); }
.pb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg2); }
.pb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pb-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pb-items { list-style: none; margin: 0; padding: 0; }
.pb-items li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line2); font-size: 13px; }
.pb-items .pd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pb-items .pt { flex: 1; min-width: 0; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-items .pv { flex: none; max-width: 48%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-items .outside .pv { color: var(--bad); }
.pb-name { margin-top: 8px; }
.vlist { list-style: none; margin: 0; padding: 0; }
.vlist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); }
.vlist li:first-child { border-top: 0; }
.vlist .vn { width: 34px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); font-size: 12px; font-weight: 650; color: var(--fg2); }
.vlist li:first-child .vn { background: var(--accent-soft); color: var(--accent); }
.vlist .vm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.vlist .vm .vt { font-weight: 600; font-size: 13px; color: var(--fg1); display: flex; align-items: center; gap: 6px; }
.vlist .vm .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vlist .vw { flex: none; font-size: 12px; }
.ov-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.ov-tl li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.ov-tl li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 30px; bottom: -6px; width: 1px; background: var(--line); }
.ov-tl li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; }
.ov-tl li > div .muted { font-size: 11.5px; }
.ov-tl b { font-weight: 620; }
@media (max-width: 1150px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .doc-head.v2 { padding: 14px 16px 0; }
  .dh-title h1 { font-size: 21px; }
  .doc-head.v2 .actions { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .vlist .vw { display: none; }
  .vlist .vm .vt { flex-wrap: wrap; }
  .doc-head.v2 .actions .dh-primary { flex: 1; justify-content: center; }
  .doc-head.v2 .actions .lbl { display: none; }
  .fact { padding-right: 14px; margin-right: 14px; }
  .stepper { overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .stepper .l { display: none; }
  .stepper li.now .l { display: inline; }
  .ov-next { flex-direction: column; padding: 16px; }
  .kt-mini { grid-template-columns: minmax(0, 1fr); }
  .kt-mini > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .kt-mini > div:nth-child(2) { border-top: 1px solid var(--line2); }
}

/* ── the document view (2.0): the editor takes every pixel it can. While the document is open the header folds to one
   slim line (remembered per person), the editor's own controls live in it, and Focus mode leaves only a thin bar with
   the save status and the way back. Container queries fold labels into icons as the strip gets narrower. ─────── */
#view:has(.doc-body.editor-mode) { overflow: hidden; }
.doc-head.v2.on-editor { container: dh / inline-size; }
.dh-tabsw, .dh-fold, .dh-focus, .dh-unfocus { display: none; }
.doc-head.on-editor .dh-fold, .doc-head.on-editor .dh-focus { display: inline-flex; }
.dh-edctl { display: flex; align-items: center; gap: 8px; }
.dh-edctl:empty { display: none; }
.dh-edctl .chip { height: 24px; white-space: nowrap; }
.dh-edctl .ed-trk { background: var(--accent-soft); color: var(--accent); }
.dh-edctl .ed-ro { background: var(--bg3); color: var(--fg2); }
.ed-switch button { padding: 0 12px; }
.ed-switch button.on { font-weight: 600; }
.dh-tabsw .badge { margin-left: 2px; }
.dh-unfocus kbd { font: inherit; font-size: 10.5px; color: var(--fg3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 16px; background: var(--bg1); }
.doc-head.folding > * { animation: fade .22s ease-out; }

/* the slim strip: icon, title, stage and save status on the left; where you are and what you can do on the right */
.doc-head.v2.slim { padding: 8px 14px 8px 18px; background: var(--bg1); }
.doc-head.v2.slim .crumbs, .doc-head.v2.slim .dh-row, .doc-head.v2.slim .tabs { display: none; }
.doc-head.v2.slim .dh-top { flex-wrap: nowrap; align-items: center; gap: 12px; }
/* 2.2.1: with the document open, the full header never changes height by itself (an autosave, the save status, a chip,
   the next step coming and going): its rows do not wrap, what does not fit is cut, and the save status keeps its width */
.doc-head.v2.on-editor:not(.slim) .dh-top, .doc-head.v2.on-editor:not(.slim) .actions, .doc-head.v2.on-editor:not(.slim) .dh-chips,
.doc-head.v2.on-editor:not(.slim) .dh-row, .doc-head.v2.on-editor:not(.slim) .facts { flex-wrap: nowrap; }
.doc-head.v2.on-editor:not(.slim) .dh-chips, .doc-head.v2.on-editor:not(.slim) .facts { overflow: hidden; min-width: 0; }
.doc-head.v2.on-editor:not(.slim) .dh-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-head.v2.on-editor:not(.slim) .fact { flex: none; }
.doc-head.v2.on-editor:not(.slim) .save-state { min-width: 13.5em; }
/* 2.3.3: when the header's buttons do not fit (doc.js fitHead measures it), their labels fold into icons: first the
   secondary ones, then all of them; the names stay as tooltips and accessible names */
.doc-head.v2.fit-1 [data-askai] .lbl, .doc-head.v2.fit-1 #dl .lbl, .doc-head.v2.fit-1 .dh-share .lbl, .doc-head.v2.fit-1 .dh-addp .lbl, .doc-head.v2.fit-1 .dh-tabsw .lbl,
.doc-head.v2.fit-1 #save-now .lbl, .doc-head.v2.fit-1 .dh-edctl .ed-trk .lbl { display: none; }
.doc-head.v2.fit-1 [data-askai], .doc-head.v2.fit-1 #dl, .doc-head.v2.fit-1 .dh-share, .doc-head.v2.fit-1 #save-now, .doc-head.v2.fit-1 .dh-addp { width: 36px; padding: 0; justify-content: center; }
.doc-head.v2.fit-1 .dh-edctl .ed-trk .ic { margin-right: 0; }
.doc-head.v2.fit-1 .save-state { min-width: 0; }
.doc-head.v2.fit-2 .dh-primary .pl { display: none; }
.doc-head.v2.fit-2 .dh-primary { width: 36px; padding: 0; justify-content: center; }
.doc-head.v2.fit-2 .actions, .doc-head.v2.fit-2 .dh-edctl { gap: 4px; }
.doc-head.v2.fit-2 .actions .btn.ghost.icon-only { width: 34px; min-width: 34px; padding: 0; justify-content: center; }
/* 2.3.3: Share and the fill guide's switch joined this row; as it narrows, the labels fold into icons (the full name
   stays as each button's tooltip and accessible name) so nothing passes the window's edge at any width or scaling */
@container dh (max-width: 1500px) {
  .doc-head.v2.on-editor:not(.slim) [data-askai] .lbl, .doc-head.v2.on-editor:not(.slim) #dl .lbl, .doc-head.v2.on-editor:not(.slim) .dh-share .lbl, .doc-head.v2.on-editor:not(.slim) .dh-addp .lbl { display: none; }
  .doc-head.v2.on-editor:not(.slim) [data-askai], .doc-head.v2.on-editor:not(.slim) #dl, .doc-head.v2.on-editor:not(.slim) .dh-share, .doc-head.v2.on-editor:not(.slim) .dh-addp { width: 36px; padding: 0; justify-content: center; }
}
@container dh (max-width: 1100px) {
  .doc-head.v2.on-editor:not(.slim) .dh-edctl .ed-trk .lbl, .doc-head.v2.on-editor:not(.slim) .dh-tabsw .lbl, .doc-head.v2.on-editor:not(.slim) #save-now .lbl { display: none; }
  .doc-head.v2.on-editor:not(.slim) .dh-edctl .ed-trk .ic { margin-right: 0; }
  .doc-head.v2.on-editor:not(.slim) .save-state { min-width: 0; }
}
.doc-head.v2.slim .dh-ic { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
.doc-head.v2.slim .dh-ic .ic { width: 16px; height: 16px; }
.doc-head.v2.slim .dh-ic .ft { display: none; }
.doc-head.v2.slim .dh-title { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: min(220px, 30%); }
.doc-head.v2.slim .dh-title h1 { flex: 0 1 auto; min-width: 0; font-size: 17px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.doc-head.v2.slim .dh-chips { margin: 0; flex-wrap: nowrap; flex: none; }
.doc-head.v2.slim .dh-chips > :not(.pill):not(.save-state) { display: none; }
.doc-head.v2.slim .actions { flex-wrap: nowrap; gap: 6px; margin-left: 0; }
.doc-head.v2.slim .btn { height: 32px; }
.doc-head.v2.slim .dh-tabsw { display: inline-flex; }
.doc-head.v2.slim [data-askai] .lbl, .doc-head.v2.slim #dl .lbl { display: none; }
.doc-head.v2.slim [data-askai], .doc-head.v2.slim #dl { width: 32px; padding: 0; justify-content: center; }
.doc-head.v2.slim .segctl button { height: 26px; }
/* in the strip, tracked changes show in the editor's own Reviewing button; the guide's "?" stays at the top right (2.3.0) */
.doc-head.v2.slim .dh-edctl .ed-trk { display: none; }
.doc-head.v2.slim .help-q { width: 32px; }
@container dh (max-width: 1320px) {
  .doc-head.v2.slim #save-now .lbl, .doc-head.v2.slim .dh-tabsw .lbl { display: none; }
  .doc-head.v2.slim #save-now { width: 32px; padding: 0; justify-content: center; }
}
@container dh (max-width: 1060px) {
  .doc-head.v2.on-editor #save-now .lbl, .doc-head.v2.slim .dh-primary .pl, .doc-head.v2.on-editor .dh-edctl .ed-trk .lbl { display: none; }
  .doc-head.v2.on-editor .dh-edctl .ed-trk .ic { margin-right: 0; }
  .doc-head.v2.on-editor #save-now, .doc-head.v2.slim .dh-primary { width: 32px; padding: 0; justify-content: center; }
}
@container dh (max-width: 820px) {
  .doc-head.v2.slim [data-askai] { display: none; }
}
@container dh (max-width: 700px) {
  .doc-head.v2.slim .dh-ic, .doc-head.v2.slim .ed-switch { display: none; }
}

/* Focus mode: no sidebar and no header, only a thin bar with the title, the save status and Exit focus */
body.focus-mode #sidebar, body.focus-mode #sb-scrim { display: none !important; }
body.focus-mode #main { margin-left: 0 !important; }
body.focus-mode .doc-head.v2 { padding: 3px 8px 3px 14px; background: var(--bg1); }
body.focus-mode .doc-head.v2 .crumbs, body.focus-mode .doc-head.v2 .dh-row, body.focus-mode .doc-head.v2 .tabs,
body.focus-mode .doc-head.v2 .dh-ic, body.focus-mode .doc-head.v2 .actions > :not(.dh-unfocus),
body.focus-mode .doc-head.v2 .dh-chips > :not(.save-state) { display: none !important; }
body.focus-mode .doc-head.v2 .dh-top { flex-wrap: nowrap; align-items: center; gap: 12px; }
body.focus-mode .doc-head.v2 .dh-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
body.focus-mode .doc-head.v2 .dh-title h1 { font-family: var(--sans, inherit); font-size: 13px; font-weight: 560; color: var(--fg2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
body.focus-mode .doc-head.v2 .dh-chips { margin: 0; flex: none; }
body.focus-mode .doc-head.v2 .actions { margin-left: auto; flex-wrap: nowrap; }
body.focus-mode .dh-unfocus { display: inline-flex; height: 28px; }
body.focus-mode .editor-note { display: none; }
body.focus-mode #updated { top: 44px; }

/* the editor opening: the shape of a page where the document will be, never a blank box */
.editor-loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--bg2); transition: opacity .35s ease; }
.editor-loading.done { opacity: 0; pointer-events: none; }
.el-bar { height: 42px; flex: none; display: flex; gap: 12px; align-items: center; padding: 0 16px; background: var(--bg1); border-bottom: 1px solid var(--line2); }
.el-bar .sk { height: 12px; display: block; }
.el-desk { flex: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; padding: 26px 16px 0; }
.el-paper { width: min(816px, 100%); background: var(--bg0); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 30px rgba(0, 0, 0, .05); padding: 68px clamp(20px, 9%, 76px);
  display: flex; flex-direction: column; gap: 11px; }
.el-paper .sk { height: 9px; display: block; border-radius: 3px; }
.el-paper .el-gap { height: 12px; }
.el-cap { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 9px; align-items: center; padding: 7px 15px; border-radius: 999px;
  background: var(--bg0); border: 1px solid var(--line2); box-shadow: var(--shadow-card); font-size: 12.5px; color: var(--fg2); white-space: nowrap; }
.editor-wrap.switching #oo-frame, .editor-wrap.switching iframe { opacity: .35; transition: opacity .2s; }
.v-working td, .vlist li.v-working { background: color-mix(in srgb, var(--info) 5%, transparent); }
.vlist li.v-working .vn { color: var(--info); }
.wc-chip { cursor: help; }
.v-live b { font-weight: 620; }
@media (prefers-reduced-motion: reduce) { .doc-head.folding > *, .editor-loading { animation: none; transition: none; } }
[data-motion="reduced"] .doc-head.folding > * { animation: none; }

/* ── the Library (js/library.js, 1.8.0): saved views, stage chips, rows that say where each contract stands ─── */
.page.lib { max-width: 1480px; }
.page.lib > * { animation: rise .36s cubic-bezier(.2, .7, .2, 1) both; }
.crumbs-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; color: var(--fg3); margin-bottom: 4px; }
.crumbs-sm a { color: var(--fg3); }
.crumbs-sm a:hover { color: var(--accent); }
.crumbs-sm .sep { color: var(--fg4); }
.lib-views { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lib-view { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--bg0); border: 1px solid var(--line2);
  box-shadow: var(--shadow-card); font-weight: 560; color: var(--fg2); transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t); }
.lib-view .ic { color: var(--fg3); }
.lib-view .n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--bg2); color: var(--fg2); font-size: 11.5px; font-weight: 650;
  display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.lib-view:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.lib-view.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg0)); color: var(--fg1); }
.lib-view.on .ic { color: var(--accent); }
.lib-view.on .n { background: var(--accent); color: var(--on-accent); }
.lib-view.v-action .n { background: var(--accent-soft); color: var(--accent); }
.lib-view.v-renewing .n, .lib-view.v-signing .n { background: var(--warn-soft); color: var(--warn); }
.lib-view.on.v-action .n, .lib-view.on.v-renewing .n, .lib-view.on.v-signing .n { background: var(--accent); color: var(--on-accent); }
.lib-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lib-tools .search { flex: 1 1 300px; min-width: 0; }
.lib-tools .select { width: auto; min-width: 160px; }
.lib-stages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.lib-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg0);
  font-size: 12.5px; color: var(--fg2); transition: background var(--t), border-color var(--t), color var(--t); }
.lib-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lib-chip .n { font-size: 11.5px; color: var(--fg3); font-variant-numeric: tabular-nums; font-weight: 600; }
.lib-chip:not([aria-disabled="true"]):hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); color: var(--fg1); }
.lib-chip.on { background: var(--fg1); border-color: var(--fg1); color: var(--bg0); }
.lib-chip.on .n { color: color-mix(in srgb, var(--bg0) 70%, transparent); }
.lib-chip:disabled { opacity: .45; pointer-events: none; }
.lib-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.lib-wrap.peeking { grid-template-columns: minmax(0, 1fr) 380px; }
.lib-list { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.lib-head, .lib-row { display: grid; grid-template-columns: 36px minmax(220px, 2.4fr) 132px minmax(150px, 1.25fr) 110px minmax(150px, 1.35fr) 32px; gap: 14px; align-items: center; padding: 10px 16px; }
.lib-list.tpl .lib-head, .lib-list.tpl .lib-row { grid-template-columns: 36px minmax(220px, 3fr) 110px minmax(150px, 1.4fr) 32px; }
.lib-head { position: sticky; top: 0; z-index: 2; padding-top: 9px; padding-bottom: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--fg3);
  background: color-mix(in srgb, var(--bg1) 92%, var(--bg0)); border-bottom: 1px solid var(--line2); }
.lib-row { border-top: 1px solid var(--line2); cursor: pointer; transition: background var(--t); outline-offset: -2px; }
.lib-head + .lib-row { border-top: 0; }
.lib-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--bg1)); }
.lib-row.on { background: color-mix(in srgb, var(--accent) 9%, var(--bg0)); box-shadow: inset 3px 0 0 var(--accent); }
.lib-row.sk-line { cursor: default; }
.lib-ic { position: relative; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lib-ic .ft { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 700; letter-spacing: .04em; padding: 0 3px;
  border-radius: 3px; background: var(--bg0); color: var(--fg3); border: 1px solid var(--line2); line-height: 11px; }
.lib-ic .ft:empty { display: none; }
.lib-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-title { font-weight: 600; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-title:hover { color: var(--accent); text-decoration: none; }
.lib-sub { font-size: 12.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-sub.snip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-stand { min-width: 0; }
.lib-stand .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lib-owner { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.lib-owner .on { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg2); }
.lib-last { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.lib-last .la { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg2); }
.lib-last .la b { font-weight: 600; color: var(--fg1); }
.lib-last .muted { font-size: 11.5px; }
.lib-list .empty-state { padding: 40px 16px; }
/* the preview */
.lib-peek { position: sticky; top: 12px; background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow-hover); padding: 14px 18px 18px;
  max-height: calc(100vh - 40px); overflow-y: auto; animation: peek-in .24s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes peek-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pk-k { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.lib-peek h2 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 560; line-height: 1.2; letter-spacing: -.01em; }
.lib-peek h2 a { color: var(--fg1); }
.lib-peek h2 a:hover { color: var(--accent); text-decoration: none; }
.lib-peek .dh-chips { margin: 8px 0 12px; }
.pk-body .sk { margin: 10px 0; }
.pk-next { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--bg1); border: 1px solid var(--line2); margin-bottom: 12px; }
.pk-next .ov-next-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg2); color: var(--fg2); display: grid; place-items: center; flex: none; }
.pk-next.ok .ov-next-ic { background: var(--accent-soft); color: var(--accent); }
.pk-next.wait .ov-next-ic { background: var(--warn-soft); color: var(--warn); }
.pk-next.bad .ov-next-ic { background: var(--bad-soft); color: var(--bad); }
.pk-next b { font-weight: 640; }
.pk-next p { margin: 2px 0 0; font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
.pk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 12px; }
.pk-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg3); }
.pk-facts dd { margin: 2px 0 0; font-weight: 560; font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pk-q { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 560; margin-bottom: 8px; }
.pk-q.bad { background: var(--bad-soft); color: var(--bad); }
.pk-sec { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); margin: 14px 0 4px; }
.pk-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); }
@media (max-width: 1500px) {
  .lib-wrap.peeking .lib-head, .lib-wrap.peeking .lib-row { grid-template-columns: 36px minmax(200px, 2.4fr) 124px minmax(140px, 1.3fr) 32px; }
  .lib-wrap.peeking .lib-owner, .lib-wrap.peeking .lib-last { display: none; }
}
@media (max-width: 1250px) {
  .lib-head, .lib-row { grid-template-columns: 36px minmax(200px, 2.4fr) 124px minmax(140px, 1.3fr) 90px 32px; }
  .lib-last { display: none; }
  .lib-wrap.peeking { grid-template-columns: minmax(0, 1fr); }
  .lib-peek { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); max-height: none; border-radius: 0; z-index: 70; }
}
@media (max-width: 900px) {
  .lib-views { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .lib-view { flex: none; }
  .lib-tools .select { flex: 1 1 140px; min-width: 0; }
  .lib-head { display: none; }
  .lib-row, .lib-list.tpl .lib-row, .lib-wrap.peeking .lib-row { grid-template-columns: 36px auto minmax(0, 1fr) 32px;
    grid-template-areas: "ic main main more" ". stage stand stand"; row-gap: 6px; column-gap: 8px; }
  .lib-row .lib-ic { grid-area: ic; } .lib-row .lib-main { grid-area: main; } .lib-row .row-more { grid-area: more; }
  .lib-row .lib-stage { grid-area: stage; } .lib-row .lib-stand { grid-area: stand; display: block; }
  .lib-row .lib-owner { display: none; }
}

@media (max-width: 900px) {
  .lib-title, .lib-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ── page kit (1.8.0): at-a-glance tiles and the view switch, shared by the list pages ──────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--bg0); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: var(--shadow-card); color: var(--fg1); text-decoration: none; animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); min-width: 0; }
a.stat:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); }
.stat-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); }
.stat.ok .stat-ic { background: var(--accent-soft); color: var(--accent); }
.stat.warn .stat-ic { background: var(--warn-soft); color: var(--warn); }
.stat.bad .stat-ic { background: var(--bad-soft); color: var(--bad); }
.stat-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.stat-l { font-size: 12.5px; color: var(--fg3); font-weight: 520; }
.stat-v { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-s { font-size: 11.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sk { margin: 3px 0; }
.view-switch button { display: inline-flex; align-items: center; gap: 6px; height: 28px; }
.view-switch button .ic { width: 14px; height: 14px; }
.page-head .actions .view-switch { height: 34px; align-items: center; }
/* ── Negotiations: a board by whose move it is ─────────────────────────────────────────────────────────── */
.page.negs { max-width: 1480px; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nb-col { background: color-mix(in srgb, var(--bg2) 70%, var(--bg1)); border: 1px solid var(--line2); border-radius: 16px; padding: 12px; min-width: 0;
  animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
.nb-col:nth-child(2) { animation-delay: .05s; } .nb-col:nth-child(3) { animation-delay: .1s; }
.nb-col header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; }
.nb-h { display: inline-flex; align-items: center; gap: 8px; font-weight: 640; font-size: 14px; }
.nb-col.ours .nb-h .ic { color: var(--accent); } .nb-col.theirs .nb-h .ic { color: var(--warn); } .nb-col.agreed .nb-h .ic { color: var(--ok); }
.nb-n { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--bg0); color: var(--fg2); }
.nb-col.ours .nb-n { background: var(--accent); color: var(--on-accent); }
.nb-col.theirs .nb-n { background: var(--warn-soft); color: var(--warn); }
.nb-hint { margin: 4px 4px 10px; font-size: 12px; color: var(--fg3); line-height: 1.4; }
.nb-cards { display: grid; gap: 10px; }
.nb-card { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--bg0); border: 1px solid var(--line2);
  box-shadow: var(--shadow-card); color: var(--fg1); text-decoration: none; border-left: 3px solid var(--line); transition: transform var(--t), box-shadow var(--t); }
.nb-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.nb-card.ours { border-left-color: var(--accent); } .nb-card.theirs { border-left-color: var(--warn); } .nb-card.agreed { border-left-color: var(--ok); }
.nb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-round { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg3); }
.nb-title { font-weight: 620; line-height: 1.3; }
.nb-who { font-size: 12.5px; color: var(--fg3); }
.nb-rounds { display: flex; gap: 4px; margin-top: 2px; }
.nb-rounds i { width: 18px; height: 5px; border-radius: 3px; background: var(--accent); opacity: .55; }
.nb-rounds i.out { background: var(--warn); opacity: 1; }
.nb-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line2); }
.nb-act { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.nb-card.theirs .nb-act { color: var(--fg2); }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px; text-align: center; color: var(--fg3); font-size: 12.5px;
  border: 1.5px dashed var(--line); border-radius: 12px; }
.nb-closed { margin-top: 14px; }
.nl-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); color: var(--fg3); }
.nl-ic.ours { background: var(--accent-soft); color: var(--accent); } .nl-ic.theirs { background: var(--warn-soft); color: var(--warn); }
a.list-row { color: var(--fg1); text-decoration: none; }
.nl-when { white-space: nowrap; }
@media (max-width: 1000px) { .board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; gap: 10px; } .stat-ic { display: none; } .stat-v { font-size: 22px; }
  .stat-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nl-row { flex-wrap: wrap; } .nl-row .main { flex-basis: calc(100% - 50px); } .nl-row .av { margin-left: 44px; }
}

/* ── Signatures: an envelope tracker ───────────────────────────────────────────────────────────────────── */
.page.sigs { max-width: 1240px; }
.env-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.env-card { background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px 18px;
  animation: rise .36s cubic-bezier(.2, .7, .2, 1) both; }
.env-h { display: flex; align-items: center; gap: 12px; }
.env-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); }
.env-card.completed .env-ic { background: var(--accent-soft); color: var(--accent); }
.env-card.draft .env-ic, .env-card.voided .env-ic, .env-card.declined .env-ic { background: var(--bg2); color: var(--fg3); }
.env-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.env-title { font-weight: 620; font-size: 14.5px; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.env-title:hover { color: var(--accent); text-decoration: none; }
.env-prog { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.env-prog .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--bg2); overflow: hidden; }
.env-prog .bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); transform-origin: left; animation: grow .7s cubic-bezier(.2, .7, .2, 1) both; }
.env-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.es { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 11px; background: var(--bg1); border: 1px solid var(--line2); min-width: 0; }
.es-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--fg3); }
.es-dot .ic { width: 12px; height: 12px; }
.es.signed .es-dot { background: var(--ok); color: var(--on-tone); }
.es.sent .es-dot, .es.viewed .es-dot { background: var(--warn); color: var(--on-tone); box-shadow: 0 0 0 3px var(--warn-soft); }
.es.declined .es-dot { background: var(--bad); color: var(--on-tone); }
.es.sent, .es.viewed { border-color: color-mix(in srgb, var(--warn) 30%, var(--line2)); background: color-mix(in srgb, var(--warn) 5%, var(--bg0)); }
.es-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.es-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-name .role-tag { margin-left: 4px; }
.es-st { font-size: 12px; color: var(--fg2); }
.es-st.ok { color: var(--accent); } .es-st.warn { color: var(--warn); } .es-st.bad { color: var(--bad); }
.es-st .muted { color: var(--fg3); }
.env-hold { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 11px; font-size: 13px;
  background: var(--warn-soft); color: var(--fg1); }
.env-hold > .ic { color: var(--warn); flex: none; }
.env-hold > span:not(.env-hold-acts) { flex: 1; min-width: 200px; }
.env-hold.late { background: var(--bad-soft); } .env-hold.late > .ic { color: var(--bad); }
.env-hold.done { background: var(--accent-soft); } .env-hold.done > .ic { color: var(--accent); }
.env-card.draft .env-hold { background: var(--bg1); } .env-card.draft .env-hold > .ic { color: var(--fg3); }
.env-hold-acts { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .env-h { flex-wrap: wrap; } .env-steps { grid-template-columns: minmax(0, 1fr); } }

/* ── Renewals: a timeline of notice deadlines, a calendar, and the list ───────────────────────────────── */
.page.rw { max-width: 1400px; }
.rw-view { margin-bottom: 8px; }
.rw-tl { --lab: 260px; }
.rw-axis, .rw-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 16px; align-items: center; }
.rw-axis { height: 38px; margin-bottom: 2px; }
.rw-track { position: relative; height: 100%; min-height: 24px; }
.rw-m { position: absolute; top: 20px; transform: translateX(-50%); font-size: 11px; color: var(--fg3); font-weight: 600; white-space: nowrap; }
.rw-today { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--accent); }
.rw-today b { font-weight: 650; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }
.rw-row { padding: 6px 0; border-top: 1px solid var(--line2); color: var(--fg1); text-decoration: none; border-radius: 8px; transition: background var(--t); }
.rw-row:hover { background: var(--bg1); text-decoration: none; }
.rw-lab { min-width: 0; display: flex; flex-direction: column; padding-left: 4px; }
.rw-lab .t { font-weight: 580; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-lab .muted { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-row .rw-track { height: 30px; }
.rw-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.rw-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.rw-win { position: absolute; top: 11px; height: 8px; border-radius: 4px; opacity: .35; background: var(--accent); }
.rw-win.warn { background: var(--warn); } .rw-win.bad { background: var(--bad); }
.rw-dot { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2.5px solid var(--bg0); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  background: var(--accent); animation: pop .35s .1s both; }
.rw-dot.warn { background: var(--warn); } .rw-dot.bad { background: var(--bad); }
.rw-when { position: absolute; top: 7px; margin-left: 14px; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; }
.rw-when.left { margin-left: 0; transform: translateX(calc(-100% - 14px)); }
.rw-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line2); }
.rw-key span { display: inline-flex; align-items: center; gap: 6px; }
.rw-key .rw-dot { position: static; margin: 0; width: 11px; height: 11px; border-width: 2px; animation: none; }
.rw-key .rw-win { position: static; display: inline-block; width: 22px; height: 7px; }
.rw-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rc-m h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 640; }
.rc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rc-w { font-size: 10.5px; color: var(--fg3); text-align: center; font-weight: 600; padding-bottom: 2px; }
.rc-d { min-height: 40px; border-radius: 8px; background: var(--bg1); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; }
.rc-d.out { background: transparent; }
.rc-d b { font-weight: 600; color: var(--fg3); font-size: 11px; }
.rc-d.today { box-shadow: inset 0 0 0 1.5px var(--accent); } .rc-d.today b { color: var(--accent); }
.rc-d.has { background: var(--bg0); box-shadow: inset 0 0 0 1px var(--line2); }
.rc-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.rc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.rc-dot.warn { background: var(--warn); } .rc-dot.bad { background: var(--bad); }
.rc-agenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.rc-agenda a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; color: var(--fg1); font-size: 12.5px; }
.rc-agenda a:hover { background: var(--bg1); text-decoration: none; }
.rc-agenda .t { flex: 1; min-width: 0; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-agenda .muted { font-size: 11.5px; }
.rc-day { width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); flex: none; }
.rc-day.warn { background: var(--warn-soft); color: var(--warn); } .rc-day.bad { background: var(--bad-soft); color: var(--bad); }
.rc-ev { display: block; padding: 1px 5px; border-radius: 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--accent-soft); color: var(--accent); }
.rc-ev:hover { text-decoration: none; filter: brightness(.95); }
.rc-ev.warn { background: var(--warn-soft); color: var(--warn); } .rc-ev.bad { background: var(--bad-soft); color: var(--bad); }
.rw-item { gap: 14px; }
.rw-date { width: 44px; height: 46px; flex: none; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: var(--accent-soft); color: var(--accent); }
.rw-date b { font-size: 17px; font-weight: 700; } .rw-date span { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.rw-date.warn { background: var(--warn-soft); color: var(--warn); } .rw-date.bad { background: var(--bad-soft); color: var(--bad); }
.rw-item .meta { white-space: normal; }
@media (max-width: 1100px) { .rw-cal { grid-template-columns: minmax(0, 1fr); } .rc-d { min-height: 44px; } }
@media (max-width: 700px) {
  .rw-tl { --lab: 0px; }
  .rw-axis, .rw-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rw-axis .rw-lab { display: none; }
  .rw-axis .rw-m:nth-child(even) { display: none; }
  .rw-m { font-size: 10px; }
  .rw-item { flex-wrap: wrap; } .rw-item .main { flex-basis: calc(100% - 60px); } .rw-item .chip { margin-left: 58px; }
}

/* ── Templates: a gallery with a picture of each first page ─────────────────────────────────────────── */
.page.tpl-page { max-width: 1480px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.tp-card { display: flex; flex-direction: column; background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow-card);
  overflow: hidden; animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform var(--t), box-shadow var(--t); }
.tp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.tp-card .sk { margin: 8px 14px; }
.tp-card .sk:first-child { margin: 0 0 8px; border-radius: 0; }
.tp-thumb { position: relative; display: block; height: 196px; overflow: hidden; text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--bg2)) 0%, var(--bg2) 70%); border-bottom: 1px solid var(--line2); }
.tp-thumb:hover { text-decoration: none; }
.tp-page { position: absolute; left: 50%; top: 18px; width: 172px; transform: translateX(-50%) rotate(-1.2deg); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.tp-card:hover .tp-page { transform: translateX(-50%) translateY(-4px) rotate(0deg); }
.tp-sheet { height: 222px; padding: 16px 14px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 24px -10px rgba(20, 40, 30, .35);
  overflow: hidden; font-family: var(--serif); color: #2b2b28; }
.tp-sheet::before { content: ""; display: block; width: 34px; height: 5px; border-radius: 3px; background: #0069b4; opacity: .55; margin-bottom: 8px; }
.tp-h { font: 700 7px/1.3 var(--sans); letter-spacing: .06em; text-align: center; margin: 2px 0 7px; color: #141413; }
.tp-s { font: 650 5.4px/1.4 var(--sans); margin: 5px 0 1px; color: #3d3d3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-l { font-size: 4.6px; line-height: 1.55; color: #73726c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-kind { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg0) 92%, transparent); color: var(--accent); border: 1px solid var(--line2); }
.tp-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tp-title { font-weight: 640; font-size: 15px; color: var(--fg1); }
.tp-title:hover { color: var(--accent); text-decoration: none; }
.tp-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--fg2); }
.tp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tp-meta .ic { color: var(--fg3); }
.tp-fields { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tp-fields .chip { font-weight: 500; font-family: var(--serif); font-size: 11px; }
.tp-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

/* ── Clients and Vendors: a directory of companies, and a profile on each company's page ───────────────── */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.co-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: var(--shadow-card); color: var(--fg1); text-decoration: none; animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 25ms);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); min-width: 0; }
.co-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); }
.co-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-mark { --av: var(--accent); width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: var(--av); background: color-mix(in srgb, var(--av) 14%, var(--bg0)); border: 1px solid color-mix(in srgb, var(--av) 25%, transparent); }
.co-mark.big { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
[data-theme="dark"] .co-mark { color: color-mix(in srgb, var(--av) 55%, #fff); background: color-mix(in srgb, var(--av) 28%, var(--bg0)); }
.co-name { min-width: 0; display: flex; flex-direction: column; }
.co-name b { font-weight: 640; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-name .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-bar { display: flex; gap: 2px; height: 8px; border-radius: 5px; overflow: hidden; background: var(--bg2); }
.co-bar span { background: var(--c); min-width: 6px; transform-origin: left; animation: grow .6s cubic-bezier(.2, .7, .2, 1) both; }
.co-counts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg2); }
.co-counts b { font-weight: 650; color: var(--fg1); }
.co-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); }
.co-prof { background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 55%), var(--bg0);
  border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 18px; }
.co-prof-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.co-prof-t { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.co-prof-t h2 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 560; letter-spacing: -.01em; }
.co-prof-t .muted { font-size: 13px; }
.co-prof-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2); }
.co-prof .pk-sec { margin: 0 0 8px; }
.co-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 12px; color: var(--fg2); }
.co-legend span { display: inline-flex; align-items: center; gap: 5px; }
.co-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.co-legend b { font-weight: 650; color: var(--fg1); }
.co-legend .zero { opacity: .45; }
.co-ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.co-ul a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; color: var(--fg1); font-size: 13px; }
.co-ul a:hover { background: var(--bg1); text-decoration: none; }
.co-ul .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-ul .t b { font-weight: 620; }
.co-none { padding: 4px 0; }
.co-prof-g > div { min-width: 0; }
.co-ul .muted { flex: none; }
@media (max-width: 1000px) { .co-prof-g { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ── Playbooks: a card per playbook, and the two-pane rule editor ─────────────────────────────────────── */
.page.pbs, .page.pbe { max-width: 1400px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 18px; }
.pb-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 18px 20px; animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); min-width: 0; }
.pb-card header { display: flex; align-items: center; gap: 12px; }
.pb-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.pb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb-t h2 { margin: 0; font-size: 16.5px; font-weight: 650; }
.pb-t .muted { font-size: 12.5px; }
.pb-desc { margin: 0; color: var(--fg2); font-size: 13px; line-height: 1.5; }
.pb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.pb-nums div { padding: 10px 12px; display: flex; flex-direction: column; background: var(--bg1); }
.pb-nums div + div { border-left: 1px solid var(--line2); }
.pb-nums b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pb-nums span { font-size: 11.5px; color: var(--fg3); }
.pb-sev { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-card .pk-sec { margin: 6px 0 0; }
.pb-rules, .pb-res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pb-rules li { display: grid; grid-template-columns: 10px minmax(0, auto) minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line2); font-size: 13px; }
.pb-rules li:first-child { border-top: 0; }
.pb-rules li.muted { display: block; }
.pb-rules b { font-weight: 600; white-space: nowrap; }
.pb-rules .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd { width: 8px; height: 8px; border-radius: 50%; background: var(--fg4); display: inline-block; flex: none; }
.sd.bad { background: var(--bad); } .sd.warn { background: var(--warn); }
.pb-res a { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 6px 6px; margin: 0 -6px; border-radius: 8px; color: var(--fg1); font-size: 13px; }
.pb-res a:hover { background: var(--bg1); text-decoration: none; }
.pb-res .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-mini { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg2); }
.pb-mini i { display: block; } .pb-mini .w { background: var(--accent); } .pb-mini .o { background: var(--bad); } .pb-mini .n { background: var(--line); }
.pb-often { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg2); padding: 8px 10px; border-radius: 9px; background: var(--bad-soft); }
.pb-often .ic { color: var(--bad); }
.pb-card footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); display: flex; gap: 8px; }
.pbe-meta { margin-bottom: 18px; }
.pbe-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pbe-list { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
.pbe-list ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; }
.pbe-list li button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; transition: background var(--t); }
.pbe-list li button:hover { background: var(--bg1); }
.pbe-list li button.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pbe-list .sd { margin-top: 6px; }
.pbe-list .rule-t { min-width: 0; display: flex; flex-direction: column; }
.pbe-list .rule-t b { font-weight: 600; font-size: 13px; }
.pbe-list .rule-t span { font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbe-read { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--fg1); line-height: 1.5; margin-bottom: 6px; }
.pbe-read .ic { color: var(--accent); margin-top: 3px; flex: none; }
.pbe-h { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg3); margin: 18px 0 8px; }
.pbe-sev { height: 36px; align-items: center; }
.pbe-sev button { height: 30px; padding: 0 14px; }
@media (max-width: 900px) { .pbe-grid { grid-template-columns: minmax(0, 1fr); } .pbe-list { position: static; max-height: none; } .grid3 { grid-template-columns: minmax(0, 1fr); } }

/* ── settings, People and the Outbox (1.8.0): calm cards, each section with an icon and a line on what it is for ── */
.settings h2.section { gap: 10px; margin-bottom: 4px; }
.settings h2.section > .ic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); box-sizing: border-box; }
.sec-desc { margin: 0 0 12px 40px; color: var(--fg3); font-size: 13px; line-height: 1.45; }
.settings .list { border-radius: 14px; }
.settings .list-row { padding: 14px 18px; }
.av.xl { width: 44px; height: 44px; font-size: 15px; }
.p-name { display: inline-flex; align-items: center; gap: 10px; }
.page .tbl.people td.t { white-space: nowrap; }
.outbox .stat-v { font-size: 22px; }

/* ── Help (1.8.0): the same header as every page, quick topics, then contents and the guide ─────────────── */
.help-top { margin-bottom: 16px; }
.help-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 22px; max-width: 1068px; }
.help-quick .stat { padding: 12px 14px; }
.hq-t { font-weight: 640; font-size: 14px; }
.help-quick .stat-s { white-space: normal; }
@media (max-width: 700px) { .help-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-quick .stat-ic { display: none; } }
@media print { .help-top .actions, .help-quick { display: none !important; } }

/* Home refreshes itself quietly: nothing replays */
.dash.soft > *, .dash.soft .spark-line, .dash.soft .pipe-seg, .dash.soft .rt-dot { animation: none !important; }

/* a part of a page that could not load, shown in place (1.8.2) */
.banner.tab-problem { border-color: color-mix(in srgb, var(--bad) 30%, var(--line2)); background: color-mix(in srgb, var(--bad) 5%, var(--bg0)); }
.banner.tab-problem .ic-wrap { background: var(--bad-soft); color: var(--bad); }

/* every full-screen layer covers the whole window: sized to the window itself (100vw by 100vh, which include a classic
   Windows scrollbar), never to a page container or the space left beside a scrollbar, so what it centers is centered in
   the window at any display scaling or zoom (1.8.2) */
#busy { left: 0; right: auto; width: 100vw; }
.waking, .modal-back, .qs-back, .help-light { position: fixed; inset: 0 auto auto 0;
  width: 100vw; height: 100vh; height: 100dvh; margin: 0; max-width: none; box-sizing: border-box; }

/* ── drag and drop from the computer (js/dropin.js, 1.8.2) ──────────────────────────────────────────────── */
.drop-layer { position: fixed; inset: 0 auto auto 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 1400; pointer-events: none;
  display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: color-mix(in srgb, var(--accent) 10%, rgba(250, 249, 245, .72));
  backdrop-filter: blur(2px); animation: fade .12s; }
[data-theme="dark"] .drop-layer { background: color-mix(in srgb, var(--accent) 14%, rgba(20, 20, 19, .72)); }
.drop-layer::before { content: ""; position: absolute; inset: 12px; border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 18px; }
.drop-layer.over-target { background: color-mix(in srgb, var(--accent) 5%, rgba(250, 249, 245, .35)); backdrop-filter: none; }
[data-theme="dark"] .drop-layer.over-target { background: color-mix(in srgb, var(--accent) 6%, rgba(20, 20, 19, .35)); }
.drop-layer.over-target::before { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.drop-card, .drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 34px; border-radius: 18px;
  background: var(--bg0); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line2)); box-shadow: var(--shadow-menu); animation: pop .16s ease-out; }
.drop-card b, .drop-zone b { font-size: 18px; font-weight: 650; }
.drop-card span:not(.drop-ic), .drop-zone span:not(.drop-ic) { color: var(--fg2); max-width: 420px; }
.drop-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.drop-layer.over-target .drop-card { transform: scale(.94); opacity: .9; }
.drop-layer.two { grid-template-columns: repeat(2, minmax(0, 360px)); gap: 28px; justify-content: center; align-content: center; }
.drop-zone { min-height: 220px; justify-content: center; transition: transform var(--t), border-color var(--t), background var(--t); }
.drop-zone.on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg0)); transform: scale(1.03); }
.drop-zone.on .drop-ic { background: var(--accent); color: var(--on-accent); }
.drop-target { outline: 2px solid var(--accent) !important; outline-offset: 2px; background: var(--accent-soft) !important; border-radius: 10px; position: relative; z-index: 1401; }
.drop-layer[hidden] { display: none; }
/* every file field is a drop box too (2.3.0, js/dropin.js): the picker inside it, a dashed edge that lights up while a
   file is dragged over the box or its dialog, and what was chosen or why a file was refused under it */
.drop-field { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1.5px dashed var(--line); border-radius: 11px; background: var(--bg1);
  transition: border-color var(--t), background var(--t), box-shadow var(--t); min-width: 0; }
.drop-field > input[type="file"] { width: 100%; min-width: 0; background: var(--bg0); }
.df-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--fg3); line-height: 1.35; padding: 0 2px; }
.df-hint .ic { margin-top: 1px; color: var(--fg3); }
.df-types { color: var(--fg3); }
.df-msg { font-size: 12.5px; color: var(--fg2); padding: 0 2px; overflow-wrap: anywhere; }
.df-msg:empty { display: none; }
.df-msg.bad { color: var(--bad); }
.drop-field.drag-over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop-field.drag-over .df-hint, .drop-field.drag-over .df-hint .ic { color: var(--accent); }
.drop-field.dropped { animation: df-pop .35s ease-out; }
@keyframes df-pop { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 40% { box-shadow: 0 0 0 5px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.drop-host.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }
@media (hover: none), (pointer: coarse) { .df-drag { display: none; } .df-hint .ic, .df-hint.only-drag { display: none; }
  .drop-field { border: 0; padding: 0; background: none; } }
.mu-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line2); border-radius: 12px; padding: 6px; }
.mu-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 170px 120px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 9px; }
.mu-row + .mu-row { border-top: 1px solid var(--line2); }
.mu-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); }
.mu-name { min-width: 0; display: flex; flex-direction: column; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-name .muted { font-weight: 450; }
.mu-row .select { height: 32px; }
.mu-st { display: inline-flex; align-items: center; gap: 5px; }
.mu-row.done .mu-st { color: var(--ok); } .mu-row.done .mu-ic { background: var(--ok-soft); color: var(--ok); }
.mu-row.failed .mu-st { color: var(--bad); white-space: normal; } .mu-row.failed .mu-ic { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 700px) { .drop-layer.two { grid-template-columns: minmax(0, 1fr); } .mu-row { grid-template-columns: 28px minmax(0, 1fr); } .mu-row .select, .mu-row .mu-st { grid-column: 2; } }

/* ── the sidebar's folder tree (js/tree.js, 1.8.2): folders and the documents in them ───────────────────── */
.tr-node.collapsed > .tr-kids { display: none; }
.tr-row .tw { transition: transform .15s ease; }
.tr-node.collapsed > .tr-row .tw { transform: rotate(-90deg); }
.tr-row.root { font-weight: 560; color: var(--fg1); }
.tr-doc { display: flex; align-items: center; gap: 7px; height: 28px; padding-right: 10px; border-radius: 8px; color: var(--fg2); font-size: 13px; text-decoration: none; }
.tr-doc:hover { background: var(--bg3); color: var(--fg1); text-decoration: none; }
.tr-doc.active { background: var(--accent-soft); color: var(--accent); font-weight: 560; }
.tr-doc .ic { color: var(--fg3); flex: none; }
.tr-doc.active .ic { color: var(--accent); }
.tr-doc .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-empty { height: 24px; display: flex; align-items: center; font-size: 12px; color: var(--fg4); font-style: italic; }
.tr-row[draggable], .tr-doc[draggable] { cursor: pointer; }
.tree-dragging .tr-row { transition: background var(--t), box-shadow var(--t); }
.tr-row.move-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--fg1); }
.sb-section { position: relative; }
.sb-add { position: absolute; right: 14px; margin-top: -27px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--fg3); }
.sb-add:hover { background: var(--bg3); color: var(--accent); }
.sb-rail .sb-add { display: none; }

/* saving while editing: a small, calm status beside the title */
.save-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg3); white-space: nowrap; }
.save-state[hidden] { display: none; }
.save-state.ok .ic { color: var(--ok); }
.save-state.off .ic { color: var(--fg3); }
.save-state .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: savepulse 1.1s ease-in-out infinite; }
@keyframes savepulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* a required field says so in words, not colour alone */
.req { font-size: 11px; font-weight: 500; color: var(--fg3); margin-left: 6px; letter-spacing: .01em; }
.tbl.people .p-n, .tbl.people .p-e { display: block; }
.tbl.people .p-e { margin-top: 1px; overflow-wrap: anywhere; }

/* an account's details, under its profile */
/* the details across the top (2.3.6: the Opportunities card beside them is gone), the other cards side by side below */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 18px; }
.acct-grid > :first-child, .acct-grid > :last-child:nth-child(2) { grid-column: 1 / -1; }
.acct-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.acct-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 4px 22px; }
.acct-g .pk-sec { margin: 6px 0 4px; }
.acct-f { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 6px; }
.acct-v { font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.acct-upd { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
/* the people and templates lists on an Account page (named acct-opps before 2.3.6, when Opportunities used it too) */
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.acct-list li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; }
.acct-list li:hover { background: var(--bg2); }
.acct-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--fg1); }
.acct-list .t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-fs { border: 0; padding: 0; margin: 0 0 10px; }
.acct-fs legend { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); padding: 0; margin-bottom: 6px; }
.field.span2 { grid-column: 1 / -1; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-card .dash-h > .btn { margin-left: auto; }
/* a field that needs fixing: a red outline plus the message that says what (never colour alone) */
.input.invalid, .textarea.invalid, .select.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
/* a long dialog never runs off the window: the title and buttons stay, only the middle scrolls */
.modal { max-height: calc(100vh - 48px); display: flex; flex-direction: column; }      /* the backdrop pads 24px */
.modal-h, .modal-f { flex: none; }
.modal-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Library filters: the bar, the chips, date columns and groups */
.lib-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: -2px 0 10px; }
.lf-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lf-l { font-size: 12.5px; color: var(--fg3); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lib-filters .select { width: auto; min-width: 120px; max-width: 220px; height: 32px; font-size: 13px; }
.lib-filters .input[type=date] { width: 150px; height: 32px; font-size: 13px; }
.lf-end { margin-left: auto; }
.lf-end .n, .lib-view.saved .n { font-size: 11px; color: var(--accent); font-weight: 650; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lib-chips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 550; }
.fchip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.fchip button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.lib-view.saved { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; }
.lib-view.saved a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.lib-view.saved a:hover { text-decoration: none; }
.sv-x { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--fg3); }
.sv-x:hover { background: var(--bg3); color: var(--bad); }
.lib-list.has-dates .lib-head, .lib-list.has-dates .lib-row { grid-template-columns: 36px minmax(200px, 2.4fr) 124px 100px repeat(var(--date-cols, 1), minmax(96px, 1fr)) 32px; }
.lib-date { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-group { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px 6px; background: var(--bg1); border-top: 1px solid var(--line2);
  font-family: var(--serif); font-size: 16px; font-weight: 560; }
.lib-group .n { font-family: var(--sans); font-size: 12px; color: var(--fg3); font-weight: 600; }
.lib-head + .lib-group { border-top: 0; }
@media (max-width: 900px) {
  .lf-end { margin-left: 0; }
  .lib-list.has-dates .lib-head .lib-date, .lib-list.has-dates .lib-row .lib-date:not(:first-of-type) { display: none; }
}
.lf-toggle { display: none; }
.lf-toggle .n { font-size: 11px; color: var(--accent); font-weight: 650; }
@media (max-width: 700px) {
  .lf-toggle { display: inline-flex; }
  .lib-filters:not(.open) { display: none; }
}
.form-missing { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; margin: 0 0 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13px; line-height: 1.45; }
.form-missing .ic { flex: none; margin-top: 2px; }
.file-drop.invalid, input[type=file].invalid { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: 10px; }
.term .src, .kt-mini .src { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg3); margin-top: 3px; }
.term .src b { color: var(--fg2); font-weight: 600; }
.banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, var(--line2)); }
.banner.warn .ic-wrap { background: var(--bg0); color: var(--warn); }
.ov-note.warn { color: var(--warn); }

/* the Editable Word copy of a PDF: a banner on Overview and the Document tab, a cell on Versions */
.banner.wc.pending .ic-wrap .spin { width: 18px; height: 18px; }
/* the live risk check is a beta (2.2.1): a small label on every part of it */
.beta-tag { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); letter-spacing: .02em; vertical-align: 2px; text-transform: none; }
.beta-dot { font-size: 9px; font-weight: 600; margin-left: 4px; opacity: .8; }
.rk-g { list-style: none; border-top: 1px solid var(--line); padding: 10px 0; }
.rk-g:first-child { border-top: 0; }
.rk-gh { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.rk-items { margin: 6px 0 0; padding: 0 0 0 4px; }
.rk-ga { margin-top: 8px; }
.rk-done { margin-top: 8px; }
.rk-done > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px; color: var(--fg2); font-size: 13px; }
.rk-done ul { margin: 4px 0 0; padding: 0; list-style: none; }
.rk-done li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rk-panel.quiet { padding: 0 16px; background: transparent; border: 0; }
/* the playbook check still running (2.2.1) */
.banner.pb-checking .ic-wrap .spin { width: 18px; height: 18px; color: var(--accent); }
.banner.pb-checking.sm { margin: 0; }
.banner.wc.failed .ic-wrap { background: var(--bad-soft); color: var(--bad); }
.banner.wc.scanned .ic-wrap { background: var(--bg3); color: var(--fg2); }
.wc-ed { padding: 12px 16px 0; }
.wc-ed .banner { margin-bottom: 4px; }
.wc-cell { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wc-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Compare: renumbered clauses are shown quietly, formatting changes underlined */
.redline del.num, .redline ins.num { background: none; color: var(--fg3); text-decoration: none; }
.redline del.num { display: none; }
.redline .fmt { text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }

/* Compare (js/compare.js): number tiles, switches, a jump list of changed sections, changes grouped by section */
.cv .stats { margin: 4px 0 14px; }
.cv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.cv-bar .check { align-items: center; font-size: 13.5px; }
.cv-sel { display: inline-flex; align-items: center; gap: 8px; }
.cv-sel .select { width: auto; min-width: 130px; height: 32px; padding-top: 4px; padding-bottom: 4px; }
.cv-notes { display: grid; gap: 4px; margin: 0 0 14px; font-size: 13px; color: var(--fg3); }
.cv-notes .ic { width: 13px; height: 13px; vertical-align: -2px; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cv-grid:not(:has(.cv-jump)) { grid-template-columns: minmax(0, 1fr); }
.cv-jump { position: sticky; top: 12px; display: grid; gap: 2px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 10px; background: var(--bg0);
  border: 1px solid var(--line2); border-radius: var(--radius); }
.cv-jump-h { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--fg3); padding: 2px 8px 6px; }
.cv-jump a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--fg2); text-decoration: none; font-size: 13.5px; }
.cv-jump a:hover, .cv-jump a:focus-visible { background: var(--bg2); color: var(--fg1); }
.cv-jn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-jc { flex: none; min-width: 22px; text-align: center; font-size: 12px; font-weight: 650; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; }
.cv-body { display: grid; gap: 16px; min-width: 0; }
.cv-sec h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 15px; margin: 0 0 8px; scroll-margin-top: 14px; }
.cv-st { font-weight: 650; }
.cv-sc { font-size: 12.5px; font-weight: 500; color: var(--fg3); display: inline-flex; gap: 8px; }
.cv-add { color: var(--add-fg); font-weight: 650; }
.cv-del { color: var(--del-fg); font-weight: 650; }
.cv-fmt { color: var(--accent); }
.cv-rl { max-width: none; padding: 18px 24px; }
.cv-rl p:last-child { margin-bottom: 0; }
.cv-rl p.h { font-weight: 650; }
.cv-rl p.cell { padding-left: 14px; border-left: 2px solid var(--line2); }
.cv-rl p.renumbered { color: var(--fg3); }
@media (max-width: 900px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
  .cv-jump { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
  .cv-jump-h { grid-column: 1 / -1; }
  .cv-rl { padding: 14px 16px; }
}

/* the Compare page: choose a baseline and documents, then a table of sections by documents */
.cp-setup { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 14px; }
.cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; }
.cp-cols:has(.cp-basebox[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cp-lbl { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--fg3); margin-bottom: 8px; }
.cp-docs { display: grid; gap: 6px; margin-bottom: 8px; }
.cp-docs:empty { display: none; }
.cp-chosen { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg1); min-width: 0; }
.cp-ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cp-ct .ic { flex: none; color: var(--fg3); }
.cp-chosen .select { width: auto; max-width: 150px; height: 30px; padding-top: 3px; padding-bottom: 3px; }
.cp-pick { position: relative; }
.cp-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--bg0); border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: var(--shadow); padding: 4px; display: grid; max-height: 320px; overflow-y: auto; }
.cp-results button { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 8px; background: none; border: 0; cursor: pointer; color: var(--fg1); min-width: 0; }
.cp-results button:hover, .cp-results button:focus-visible { background: var(--bg2); }
.cp-rt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-none { padding: 8px 10px; }
.cp-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-rhead h2 { font-size: 18px; margin: 0 0 2px; }
.cp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-wrap { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg0); max-width: 100%; }
.cp-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.cp-table th, .cp-table td { padding: 8px 12px; border-bottom: 1px solid var(--line1, var(--line2)); text-align: left; vertical-align: middle; }
.cp-table thead th { position: sticky; top: 0; background: var(--bg1); font-weight: 600; min-width: 150px; max-width: 220px; vertical-align: bottom; }
.cp-table thead th a { display: block; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-table thead th > span { display: block; font-weight: 400; }
.cp-sum b { color: var(--accent); }
.cp-table .cp-sh { position: sticky; left: 0; background: var(--bg0); z-index: 1; min-width: 200px; max-width: 280px; font-weight: 550; }
.cp-table thead .cp-sh { background: var(--bg1); z-index: 2; }
.cp-sn { color: var(--fg3); font-variant-numeric: tabular-nums; }
.cp-table tr:last-child > * { border-bottom: 0; }
.cp-extra .cp-sh { font-style: italic; }
.cp-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; border-radius: 999px; padding: 3px 10px; border: 0; background: none; font: inherit; }
.cp-cell span { color: inherit; opacity: .85; }
.cp-cell.same { color: var(--fg3); padding-left: 0; }
.cp-cell.changed, .cp-cell.added { background: var(--accent-soft); color: var(--accent); font-weight: 600; cursor: pointer; }
.cp-cell.added { background: none; box-shadow: inset 0 0 0 1px var(--accent); }
.cp-cell.changed:hover, .cp-cell.added:hover, .cp-cell:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.cp-cell.missing { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.cp-cell[disabled] { cursor: default; box-shadow: none; }
.cp-var { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--bg3); color: var(--fg2); font-size: 12px; }
.cp-cell.changed .cp-var { background: var(--accent); color: var(--on-accent); }
.cp-wait { margin-top: 6px; }
.modal .cp-detail { min-height: 200px; }
.modal .cp-detail .cv-jump { top: 0; }
@media (max-width: 900px) {
  .cp-cols { grid-template-columns: minmax(0, 1fr); }
  .cp-table .cp-sh { min-width: 140px; }
}
.modal.wide:has(.cp-detail) { width: min(1180px, calc(100vw - 40px)); }
.cp-results[hidden] { display: none; }
.cp-setup > .segctl { justify-self: start; }

/* Compare exports: the actions beside the switches, and the changes summary */
.cv-acts { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.cv-summary { font-size: 14.5px; line-height: 1.55; }
.cv-summary .cv-sum-intro { color: var(--fg3); margin: 0 0 10px; }
.cv-summary h4 { font-size: 14.5px; margin: 14px 0 4px; }
.cv-summary ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Background refresh never redraws a page: it says "Updated" here and the person chooses when to refresh */
#updated, #session-ended { position: fixed; top: 14px; left: 50vw; transform: translateX(-50%); z-index: 1900; display: flex; align-items: center;
  gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(15, 30, 50, .14); font-size: 14px; animation: upIn .22s ease-out; }
#updated > svg, #session-ended > svg { color: var(--accent); flex: none; }
#updated span, #session-ended span { min-width: 0; }
#session-ended { border-color: var(--accent); }
@keyframes upIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #updated, #session-ended { animation: none; } }
@media (max-width: 600px) { #updated, #session-ended { border-radius: 14px; top: 8px; } }
@media print { #updated, #session-ended { display: none !important; } }

.cp-stale { opacity: .55; transition: opacity .2s; }

/* Pricing: price books, the engagement type editor and Appendix III as it goes into the draft */
.pr .chip.pr-st { margin-left: 8px; vertical-align: middle; font-size: 12px; }
.pr-books .pr-book { text-decoration: none; color: inherit; }
.pr-bic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg2); color: var(--accent); flex: none; }
.pr-foot { margin-top: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-who { margin-top: 18px; display: grid; gap: 10px; }
.pr-who-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-who-head .pr-h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.pr-who-head .btn { margin-left: auto; }
.pr-who p { margin: 0; }
.pr-mgrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pr-mgrs li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); min-width: 0; }
.pr-mgrs li:first-child { border-top: 0; }
.pr-mgrs .main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pr-last { display: flex; align-items: center; gap: 6px; }
.pr-apr { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line2); }
.pr-apr .main { flex: 1; min-width: 0; }
@media (max-width: 640px) { .pr-who-head .btn, .pr-apr .btn, .pr-mgrs .btn { min-height: 40px; } }
.pr-tabs { margin: 6px 0 16px; border-bottom: 1px solid var(--line); }
.pr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.pr-bar .grow { flex: 1; }
.pr-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 4px 0 8px; }
.pr-f { display: grid; gap: 3px; min-width: 0; max-width: 100%; }
.pr-f .select { min-width: 150px; max-width: 100%; }
.pr-fq { flex: 1 1 200px; }
.pr-fq .search { width: 100%; }
.pr-cellw { display: flex; align-items: center; gap: 3px; }
.pr-sym { color: var(--fg3); font-size: 13px; }
.pr-grid td.num, .pr-grid th.num { text-align: right; }
.pr-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pr-type { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg0);
  color: inherit; text-decoration: none; text-align: left; min-width: 0; transition: border-color .15s, box-shadow .15s; font: inherit; cursor: pointer; }
.pr-type:hover, .pr-type:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 105, 180, .08); }
.pr-type-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pr-type-s { display: flex; gap: 4px; flex-wrap: wrap; }
.pr-add { align-items: center; justify-content: center; border-style: dashed; color: var(--accent); min-height: 120px; }
.pr-grid-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.pr-grid { margin: 0; min-width: 900px; }
.pr-grid th { font-size: 12px; white-space: normal; vertical-align: bottom; min-width: 90px; }
.pr-grid .input, .pr-rates .input, .pr-curs .input { height: 30px; padding: 4px 8px; font-size: 13.5px; min-width: 70px; }
.pr-rates .input.num { text-align: right; max-width: 110px; margin-left: auto; }
.pr-tools .textarea.sm { min-height: 54px; font-size: 13px; }
.pr-tools th.ctr .select { margin-top: 4px; height: 28px; font-size: 12px; }
.pr-tools td.ctr, .pr-tools th.ctr { text-align: center; }
/* 2.3.2: CI XREF marks as the workbook writes them (X, X*, Optional, N/A, TBD ...), one table after another */
.pr-tools td.ctr .select { height: 32px; font-size: 13px; min-width: 96px; }
.pr-tools th.ctr { min-width: 112px; }
.pr-tools th.ctr .select { width: 100%; }
.pr-tools td:first-child .input { min-width: 150px; }
.pr-tools td:nth-child(2) .textarea { min-width: 220px; }
.pr-mark { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.pr-mark.on { color: var(--accent); background: var(--accent-soft); }
.pr-mark.na { color: var(--fg3); font-weight: 400; }
.pr-mark.off { font-weight: 400; }
.pr-xref + .pr-xref { margin-top: 10px; }
.pr-xnotes { margin: 10px 0 6px; padding-left: 18px; }
.pr-xnotes li + li { margin-top: 4px; }
@media (hover: none), (pointer: coarse) { .pr-tools td.ctr .select { min-height: 40px; font-size: 16px; } }
.pr-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 8px; }
.pr-list-h { display: flex; flex-direction: column; margin-bottom: 4px; }
.pr-h3 { font-size: 16px; margin: 18px 0 4px; }
.panel > .pr-h3:first-child { margin-top: 0; }
.pr-curs { max-width: 420px; }
.pr-rules { display: grid; gap: 12px; }
.pr-rule { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg0); display: grid; gap: 10px; }
.pr-rule-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pr-rule-h .select { width: auto; min-width: 160px; }
.pr-when { display: grid; gap: 8px; }
.pr-vals { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.pr-v { display: inline-flex; gap: 5px; align-items: center; font-size: 13.5px; }
.pr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pr-two { grid-template-columns: minmax(0, 1fr); } }
.pr-log { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.pr-log li { border-left: 3px solid var(--line); padding-left: 10px; }
.pr-hist { margin-top: 14px; }
.pr-hist summary { cursor: pointer; color: var(--fg3); }
.pr-diff { display: grid; gap: 12px; }
.pr-dg h5 { margin: 0 0 4px; font-size: 14px; }
.pr-dg ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.pr-ba { margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pr-ba del, .pr-v1 del { color: var(--bad); text-decoration: line-through; }
.pr-ba ins, .pr-v1 ins { color: var(--ok); text-decoration: none; }
.pr-audit td { vertical-align: top; font-size: 13px; }
.pr-where { max-width: 260px; overflow-wrap: anywhere; }
.pr-v1 { max-width: 220px; overflow-wrap: anywhere; }
.pr-warn { margin: 4px 0 10px; padding-left: 18px; }
.pr-imp h4 { margin: 14px 0 6px; }
/* the engagement type editor: lines on the left, the live preview on the right */
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pr-split { grid-template-columns: minmax(0, 1fr); } }
.pr-lines { border: 1px solid var(--line); border-radius: 12px; background: var(--bg0); overflow: hidden; }
.pr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px;
  border-top: 1px solid var(--line); font-size: 13.5px; cursor: default; }
.pr-line:first-child { border-top: 0; }
.pr-line[role=button] { cursor: pointer; }
.pr-line[role=button]:hover, .pr-line:focus-visible { background: var(--bg2); outline: none; }
.pr-line.sec { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pr-line.sec[role=button]:hover, .pr-line.sec:focus-visible { background: var(--accent); filter: brightness(1.08); }
.pr-line.grp { background: var(--bg2); font-weight: 600; }
.pr-l { min-width: 0; overflow-wrap: anywhere; }
.pr-vs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46ch; min-width: 0; }
/* a value is shown in full, wrapped (never cut off with "..."), and the sentence under the line says what it does */
.pr-val { font-size: 12.5px; padding: 3px 9px; border-radius: 10px; background: var(--bg2); color: var(--fg1); max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.4; text-align: left; }
.pr-why { grid-column: 1 / -1; font-size: 12.5px; color: var(--fg2); line-height: 1.45; margin-top: -2px; }
.pr-why p { margin: 2px 0 0; }
.pr-line.sec .pr-why { color: rgba(255, 255, 255, .85); }
.pr-edit-btn { white-space: nowrap; }
.pr-line.sec .pr-edit-btn { background: color-mix(in srgb, var(--on-accent) 15%, transparent); color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); }
.pr-line.sec .pr-val { background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: var(--on-accent); }
.pr-val.k-master, .pr-val.k-rate { background: var(--accent-soft); color: var(--accent); }
.pr-val.k-included, .pr-val.k-by_option { background: var(--warn-soft); color: var(--warn); }
.pr-val.k-formula { font-family: ui-monospace, Consolas, monospace; }
.pr-ops { display: inline-flex; gap: 2px; align-items: center; }
.pr-ops .icon-btn { opacity: .55; transition: opacity .15s; }
.pr-line:hover .pr-ops .icon-btn, .pr-line:focus-within .pr-ops .icon-btn { opacity: 1; }
.pr-line.sec .pr-ops .icon-btn { color: var(--on-accent); }
@media (hover: none) { .pr-ops .icon-btn { opacity: 1; } }
.pr-prev { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg0); padding: 12px;
  max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 1100px) { .pr-prev { position: static; max-height: none; } }
.pr-prev-h { display: grid; gap: 8px; margin-bottom: 10px; }
.pr-sels { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-sel { display: grid; gap: 2px; }
.pr-sel .select { min-width: 120px; }
.pr-msg { font-size: 13px; padding: 6px 10px; border-radius: 8px; display: flex; gap: 6px; align-items: flex-start; }
.pr-msg.bad { background: var(--bad-soft); color: var(--bad); }
.pr-msg.wait { background: var(--warn-soft); color: var(--warn); }
#pt-preview.is-loading { opacity: .6; transition: opacity .2s; }
.pr-edit .pr-ec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 2px; margin: 0 0 12px; min-width: 0; }
.pr-edit legend { font-weight: 600; padding: 0 4px; }
.pr-edit .mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.pr-kf[hidden] { display: none !important; }
.pr-msel { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.pr-msel .select { max-width: 220px; }
/* Appendix III: section tables with Cimplifi blue headings, grey groups and definitions, as the workbook lays them out */
.ax { display: grid; gap: 10px; font-size: 13px; color: var(--fg1); }
.ax.compact { font-size: 12px; }
.ax-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ax-t td { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; overflow-wrap: anywhere; }
.ax-t td.b { font-weight: 600; }
.ax-t td.i { font-style: italic; }
.ax-t td.sm { font-size: .92em; }
.ax-t td.al-center { text-align: center; }
.ax-t td.al-right { text-align: right; }
.ax-t td.ax-h { background: var(--accent); color: var(--on-accent); }
.ax-t td.ax-g { background: var(--bg2); }
.ax-t td.ax-acc { color: var(--accent); }
.pr .panel { padding: 16px; }
.stat.done .stat-ic { background: var(--ok-soft); color: var(--ok); }
.banner.ok { border-color: color-mix(in srgb, var(--ok) 28%, var(--line2)); background: color-mix(in srgb, var(--ok) 5%, var(--bg0)); }
.banner.ok .ic-wrap { background: var(--ok-soft); color: var(--ok); }
.banner.bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line2)); background: color-mix(in srgb, var(--bad) 5%, var(--bg0)); }
.banner.bad .ic-wrap { background: var(--bad-soft); color: var(--bad); }
.banner.bad ul, .banner.ok ul { margin: 4px 0 0; padding-left: 18px; }
.pr .banner { margin-bottom: 14px; }
.pr-tabs { scrollbar-width: none; }
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-bar .select { width: auto; min-width: 200px; max-width: 100%; }

/* New contract: the wizard, one centered card per step with a progress bar */
.wz { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.wz-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wz-top h1 { margin: 2px 0 0; }
.wz-steps { list-style: none; padding: 0; margin: 0 0 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.wz-steps li { flex: 1 1 0; min-width: 100px; }
.wz-steps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--fg3); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.wz-steps button:disabled { cursor: default; opacity: .6; }
.wz-steps button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--bg2); }
.wz-steps .now button { color: var(--accent); font-weight: 600; }
.wz-steps .done button { color: var(--fg1); }
.wz-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; background: var(--bg2); color: var(--fg2); }
.wz-steps .now .wz-n { background: var(--accent); color: var(--on-accent, #fff); }
.wz-steps .done .wz-n { background: var(--ok-soft); color: var(--ok); }
.wz-bar { height: 3px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin-bottom: 16px; }
.wz-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .wz-bar span { transition: none; } }
.wz-card { background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-card); min-width: 0; }
.wz-card h2 { margin: 0 0 4px; font-size: 20px; }
.wz-card > p.muted { margin: 0 0 16px; }
.wz-h3 { font-size: 14px; margin: 16px 0 8px; color: var(--fg2); }
.wz-q { margin-bottom: 4px; }
.wz-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.wz-tpl { align-items: center; margin: 0; }
.wz-tpl.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-tpl[hidden] { display: none; }
.wz-num { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.wz-group { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 14px 2px; margin: 0 0 12px; min-width: 0; }
.wz-group legend { font-weight: 600; padding: 0 4px; }
.wz .span2 { grid-column: 1 / -1; }
.wz-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.wz-foot #wz-saved { flex: 1; min-width: 0; }
.wz-foot #wz-back svg { transform: rotate(180deg); }
.wz-prev { margin-top: 12px; max-height: 520px; overflow: auto; border: 1px solid var(--line2); border-radius: 10px; padding: 10px; }
.wz-prev:empty { display: none; }
.wz-prev.is-loading { opacity: .6; transition: opacity .2s; }
#wp-check { display: grid; gap: 6px; margin-top: 4px; }
.wz-review { display: grid; gap: 8px; margin: 0 0 12px; }
.wz-review > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
.wz-review dt { color: var(--fg3); }
.wz-review dd { margin: 0; overflow-wrap: anywhere; }
.wz .mono, .ov-still .mono, .tp-fields .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.wz-fields th { width: 42%; font-weight: 500; }
.wz-br { color: var(--warn); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
@media (max-width: 600px) { .wz-card { padding: 16px; } .wz-steps .wz-l { display: none; } .wz-steps li { min-width: 0; } .wz-review > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Overview: what the wizard left [BRACKETED] */
.ov-still { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.ov-made { margin-top: 10px; }
/* Templates: the library and one template's settings */
.tp-list tr[data-href] { cursor: pointer; }
.tp-list tr[data-href]:hover td { background: var(--bg1); }
.tp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .tp-two { grid-template-columns: minmax(0, 1fr); } }
.tpl-detail .panel { padding: 16px; }
.tp-types { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tp-fields .input, .tp-fields .select { height: 30px; padding: 4px 8px; font-size: 13.5px; }
.tp-fields td.ctr, .tp-fields th.ctr { text-align: center; }
.tp-save { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 0; background: linear-gradient(transparent, var(--bg1) 30%); }
.tp-vers { padding-left: 18px; display: grid; gap: 4px; }

/* Ask AI: the prompt builder (nothing is sent anywhere) */
.ai-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .ai-grid { grid-template-columns: minmax(0, 1fr); } }
.ai-side .check { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.ai-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--fg3); background: var(--bg1); border-radius: 8px; padding: 8px 10px; }
.ai-note svg { flex: none; color: var(--accent); margin-top: 2px; }
.ai-ph { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ai-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 52vh; overflow: auto; background: var(--bg1); border: 1px solid var(--line2);
  border-radius: 10px; padding: 12px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: var(--fg1); }
.ai-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.gl-certd { display: grid; gap: 4px; margin: 8px 0 10px; font-size: 13.5px; }
.gl-certd > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.gl-certd dt { color: var(--fg3); }
.gl-certd dd { margin: 0; overflow-wrap: anywhere; }
.ai [hidden] { display: none !important; }
/* a site admin switched Ask AI off for everyone (Admin settings) */
body.no-askai [data-askai] { display: none !important; }
.pr-line { grid-template-columns: minmax(9rem, 1fr) minmax(0, 1.3fr) auto; }
.pr-vs { max-width: none; }
.pr-val { max-width: 100%; }

/* ── phones and tablets (2.0): every feature by touch. A top bar with the menu, search and New contract; the sidebar as
   a drawer whose folder tree has a "..." on every row; controls big enough for a finger; fields at 16px so a phone
   never zooms; dialogs as sheets that keep the field being typed in above the keyboard; nothing that needs a hover. ── */
#topbar { display: none; }
.tr-more { display: none; margin-left: 2px; width: 26px; height: 26px; border-radius: 7px; place-items: center; color: var(--fg3); flex: none; }
.tr-more:hover { background: var(--bg4); color: var(--fg1); }
.tr-row:hover .tr-more, .tr-doc:hover .tr-more, .tr-row:focus-visible .tr-more, .tr-doc:focus-visible .tr-more { display: inline-grid; }
.tr-row:hover .n, .tr-row:focus-visible .n { display: none; }
.fp-search { margin-bottom: 10px; }
.fp-list { max-height: min(52vh, 420px); overflow-y: auto; border: 1px solid var(--line2); border-radius: 10px; padding: 4px; }
.fp-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 8px; text-align: left; color: var(--fg1); }
.fp-row:hover:not([disabled]), .fp-row:focus-visible { background: var(--accent-soft); }
.fp-row[disabled] { color: var(--fg4); cursor: default; }
.fp-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: none), (pointer: coarse) {
  .tr-more { display: inline-grid; }
  .tr-row .n { display: none; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 40px; }                  /* 2.3.3: every touch target is at least 40 px, small buttons too */
  .btn.icon-only { min-width: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .sb-item, .sb-new, .sb-search { min-height: 44px; }
  .tr-row, .tr-doc { min-height: 40px; }
  .tw { width: 28px; height: 28px; }
  .segctl button { min-height: 40px; }
  .menu button { min-height: 44px; }
  .chip, .pill { min-height: 24px; }
  .help-anchor { opacity: 1; }
  .sb-rail [data-tip]:hover::after { display: none; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  #topbar { display: flex; align-items: center; gap: 4px; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px; flex: none;
    background: var(--bg1); border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 30; }
  .tb-btn { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--fg2); flex: none; }
  .tb-btn:active { background: var(--bg3); }
  .tb-btn .ic { width: 22px; height: 22px; }
  .tb-btn[hidden] { display: none; }
  .tb-new { color: var(--on-accent); background: var(--accent); width: 40px; height: 40px; border-radius: 50%; margin-left: 4px; }
  .tb-new:active { background: var(--accent-h); }
  .tb-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg1); }
  .tb-brand { flex: 0 1 auto; gap: 9px; height: 44px; padding: 0 8px; margin: 0; }
  .tb-brand .brand-mark { height: 24px; }
  .tb-brand .brand-name { font-size: 16px; }
  .tb-gap { flex: 1; }
  /* the sidebar is a drawer: off screen until the menu opens it, then full labels and a scrim behind */
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(340px, 86vw) !important; transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .7, .2, 1);
    z-index: 600; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-shadow: none; }
  body.sb-overlay #sidebar { transform: none; box-shadow: 0 0 48px rgba(0, 0, 0, .22); width: min(340px, 86vw) !important; }
  body.sb-overlay #main, body.sb-rail #main, #main { margin-left: 0 !important; }
  .sb-top .sb-toggle .ic { display: none; }
  .sb-top .sb-toggle::before { content: "\00d7"; font-size: 26px; line-height: 1; color: var(--fg2); }
  .sb-top .sb-toggle { width: 44px; height: 44px; }
  #view { padding-bottom: env(safe-area-inset-bottom); }
  /* pages */
  .page { padding: 18px 16px 48px; }
  .page-head h1 { font-size: 24px; }
  .page-head .actions { flex-wrap: wrap; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  input.input, select.select, textarea.textarea, .input, .select, .textarea { font-size: 16px; }
  .input, .select { min-height: 44px; }
  .help-roles { min-width: 0; font-size: 13px; }
  .help-roles th, .help-roles td { padding: 7px 8px; }
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .chip, .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* dialogs are sheets from the bottom, as tall as they need and never under the keyboard */
  .modal-back { place-items: end center; padding: 0; }
  .modal { width: 100vw !important; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: calc(100dvh - 24px); border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); animation: sheet-up .22s cubic-bezier(.2, .7, .2, 1); }
  .modal-f, .modal .actions { position: sticky; bottom: 0; background: var(--bg0); }
  .menu { max-width: calc(100vw - 16px); }
  #toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; }
  /* the contract page */
  .doc-head.v2 { padding: 12px 16px 0; }
  .doc-head.v2 .crumbs { display: none; }
  /* on a phone the "?" is the top bar's, on every page */
  #view .help-q { display: none !important; }
  .page-head.has-help, .wz-top.has-help { padding-right: 0; }
  .hero.has-help { padding-right: 18px; }
  .dh-ic { width: 36px; height: 36px; border-radius: 10px; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; flex-basis: 100%; }
  .fact, .fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .fact dd { white-space: normal; }
  .doc-head.v2 .tabs { margin: 8px -16px 0; padding: 0 8px; }
  .doc-head.v2.slim { padding: 6px 8px 6px 12px; }
  .doc-head.v2.slim .actions { width: auto; }
  .doc-head.v2.slim .dh-title { min-width: 0; }           /* the title gives way (it ends in ...), never the buttons */
  .doc-head.v2.slim .ed-switch, .doc-head.v2.slim #dl, .doc-head.v2.slim [data-askai] { display: none !important; }
  .doc-head.v2.slim .dh-title h1 { font-size: 15px; }
  .editor-note { padding: 6px 12px; font-size: 12px; }
  .el-paper { padding: 32px 18px; }
}
@media (max-width: 760px) and (orientation: landscape) {
  #topbar { height: 48px; }
  .doc-head.v2.slim { padding-top: 3px; padding-bottom: 3px; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #sidebar, .modal { transition: none; animation: none; } }
[data-motion="reduced"] #sidebar, [data-motion="reduced"] .modal { transition: none; animation: none; }
@media (max-width: 359px) { #topbar .brand-name { display: none; } }   /* the narrowest phones: the mark alone, so nothing is pushed past the edge */
/* ONLYOFFICE's touch editor makes its frame cover the whole window; it stays inside the page, under the header */
.editor-wrap iframe { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }
body.focus-mode #topbar { display: none !important; }
@media (max-width: 760px) {
  /* 2.3.0: the stage chip keeps its words and never runs under the buttons: the file icon goes (the title says what it
     is) and the title gives way to as little as a few letters */
  .doc-head.v2.slim .dh-title h1 { flex: 1 1 auto; min-width: 44px; }
  .doc-head.v2.slim .dh-ic { display: none; }
  .doc-head.v2.slim .save-state span { display: none; }
  .doc-head.v2.slim .actions { gap: 2px; }
  .doc-head.v2.slim .btn.icon-only, .doc-head.v2.slim .dh-tabsw, .doc-head.v2.slim .dh-primary, .doc-head.v2.slim #save-now { min-width: 38px; width: 38px; padding: 0; justify-content: center; }
  .doc-head.v2.slim .dh-primary .pl, .doc-head.v2.slim .dh-tabsw .lbl, .doc-head.v2.slim #save-now .lbl { display: none; }
}

/* the signer and counterparty pages (js/guest.js): a finger-first signature pad, and on a phone a dock at the bottom */
.g-intro { display: none; }
.g-sign { padding: 20px; }
.g-dock-t { display: none; }
.sig-wrap { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.sig-wrap .sigpad { display: block; width: 100%; height: clamp(170px, 34vh, 280px); border: 0; border-radius: 0; background: transparent; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 6%; right: 6%; top: 70%; border-top: 1.5px dashed #b9c2cf; pointer-events: none; }
.sig-line span { position: absolute; left: 0; top: -26px; font-size: 22px; color: #8d99aa; }
.sig-empty { position: absolute; inset: 0 0 34% 0; display: grid; place-items: center; color: #8d99aa; font-size: 14px; pointer-events: none; transition: opacity .2s; }
.sig-wrap.inked .sig-empty, .sig-wrap.typing .sig-empty, .sig-wrap.typing .sig-line span { opacity: 0; }
.sig-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sigtabs.segctl { display: inline-flex; margin-bottom: 10px; }
.sigtabs.segctl button { display: inline-flex; align-items: center; gap: 6px; }
#typed { margin-top: 10px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .guest-top { padding: calc(env(safe-area-inset-top)) 10px 0; gap: 8px; }
  .guest-top .brand-logo { height: 20px; }
  .g-title { margin-left: 2px; padding-left: 10px; }
  .guest-top .help-q { flex: none; width: 40px; height: 40px; }
  .guest-body { display: block; height: auto; min-height: calc(100dvh - 56px); }
  .guest-main { overflow: visible; }
  .guest-main:has(#ed) { height: calc(100dvh - 56px - var(--g-dock, 120px)); }
  .g-sign { padding: 12px 8px calc(var(--g-dock, 200px) + 16px); }
  .g-intro { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 12px; }
  .g-intro .quote { margin-top: 6px; }
  /* the dock: what is left, the consent and Finish (or Send back) always; Details opens the rest */
  .guest-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: auto; max-height: 72dvh; overflow-y: auto; border: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .12); background: var(--bg1); }
  .guest-side:not(.open) > :not(.dock-keep):not(.g-dock-t) { display: none !important; }
  .guest-side > .row.dock-keep { display: flex; }
  .guest-side > .dock-keep { margin-top: 8px !important; }
  .g-dock-t { display: flex; margin: 0 auto 2px; height: 30px; min-height: 30px; }
  .guest-side .check.dock-keep { font-size: 12.5px; }
  .modal .sig-wrap .sigpad { height: clamp(180px, 42dvh, 320px); }
}
.sig-tools .small { flex: 1 1 150px; }

/* the signing page (2.3.2, js/guest.js sign): a start card, the document with the signer's fields flagged in turn, a
   guide bar (Start, Next, Finish, with a count) and a confirmation. Cimplifi blue is the one accent; light only. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guest-body.gs-mode { display: block; overflow-y: auto; }
.gs { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; }
body.gs-barred .gs { padding-bottom: 120px; }
.gs-card { position: relative; background: var(--bg0); border: 1px solid var(--line2); border-radius: 16px; padding: 22px 24px; margin: 0 auto 22px;
  max-width: 860px; box-shadow: var(--shadow); outline: 0; }
.gs-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 16px 0 0 16px; background: var(--accent); }
.gs-card h1 { font-size: 22px; line-height: 1.25; font-weight: 640; margin: 6px 0 6px; overflow-wrap: anywhere; }
.gs-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.gs-from { margin: 0; color: var(--fg2); font-size: 14.5px; line-height: 1.55; }
.gs-msg { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg1); border-radius: 0 10px 10px 0; color: var(--fg1);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.gs-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 14px 0 0; color: var(--fg2); font-size: 13px; }
.gs-facts li { display: inline-flex; align-items: center; gap: 6px; }
.gs-facts .ic { color: var(--fg3); }
.gs-consent { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); }
.gs-consent .check { font-size: 14px; }
.gs-consent .check input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.gs-consent p { margin: 8px 0 0 29px; }
.gs-err { margin: 8px 0 0 29px; color: var(--bad); font-size: 13px; font-weight: 560; }
.gs-agreed { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--ok); font-size: 13.5px; font-weight: 560; }
.gs-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gs-acts .btn { min-height: 40px; }
.gs-status { text-align: center; padding: 30px 24px 26px; }
.gs-status::before { display: none; }
.gs-status .gs-acts { justify-content: center; }
.gs-status .gs-from { max-width: 560px; margin: 0 auto; }
.gs-big-ic { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); }
.gs-status.ok .gs-big-ic { background: var(--ok-soft); color: var(--ok); animation: pop .3s ease-out; }
.gs-doc .pdf-pages { gap: 18px; }
.gs-doc .pdf-page { border-radius: 2px; }
/* the signer's fields: blue, flagged in turn; done ones show what was put there */
.sf.gsf { cursor: pointer; overflow: visible; border: 1.5px solid var(--accent); background: rgba(0, 105, 180, .1); color: var(--accent); border-radius: 4px;
  font-weight: 600; transition: box-shadow .2s, background .2s, border-color .2s; container-type: inline-size; }
@container (max-width: 64px) { .gsf-in .ic { display: none; } }
.sf.gsf.opt { border-style: dashed; }
.sf.gsf::after { content: ""; position: absolute; left: -6px; right: -6px; top: calc(50% - 22px); height: 44px; }   /* a 44 px target, whatever the field's size */
.gsf-in { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; overflow: hidden; white-space: nowrap;
  font-size: clamp(9px, 1.4vw, 12px); padding: 0 3px; }
.gsf-in img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf.gsf.filled { background: transparent; border-color: rgba(47, 122, 62, .55); font-weight: 500;
  color: #16233a; }                                 /* ink on the white page, in both themes */
.sf.gsf.filled.sig { border-style: dashed; }
.sf.gsf:hover:not(.filled) { background: rgba(0, 105, 180, .16); }
.sf.gsf:focus-visible, .sf.gsf:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.sf.gsf.cur { box-shadow: 0 0 0 3px rgba(0, 105, 180, .28); z-index: 2; animation: gs-beat 1.6s ease-in-out 2; }
.sf.gsf.cur:not(.filled)::before { content: attr(data-flag); position: absolute; left: -2px; bottom: calc(100% + 6px); padding: 3px 9px; border-radius: 7px;
  background: var(--accent); color: var(--on-tone); font-size: 11.5px; font-weight: 650; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); pointer-events: none; }
.sf.gsf.fr.cur:not(.filled)::before { left: auto; right: -2px; }
.sf.gsf[aria-hidden="true"] { cursor: default; }
.sf.gsf[aria-hidden="true"]::after { display: none; }
/* what fills itself (the date, the name) and what was typed: read from the left, never cut at the front */
.sf.gsf.filled:not(.sig) .gsf-in { justify-content: flex-start; overflow: visible; }
@keyframes gs-beat { 0%, 100% { box-shadow: 0 0 0 3px rgba(0, 105, 180, .28); } 50% { box-shadow: 0 0 0 7px rgba(0, 105, 180, .12); } }
.gsf-input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 4px; outline: 0; color: #16233a; font-family: inherit; }
.gsf-input::placeholder { color: var(--accent); opacity: .75; }
.sf.gs-other { cursor: default; border: 1px dashed rgba(31, 30, 29, .25); background: rgba(31, 30, 29, .03); color: var(--fg3); font-size: 10px; }
.sf.gs-other.done { border-style: solid; }
/* the guide bar: floats at the bottom on a computer, a dock on a phone */
.gs-bar { position: fixed; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); display: flex; align-items: center;
  gap: 10px; padding: 10px 10px 10px 18px; background: var(--bg0); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .16); }
.gs-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 560; }
.gs-meter { display: block; height: 4px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.gs-meter i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.gs-bar #gs-next { min-width: 112px; height: 42px; justify-content: center; font-size: 14.5px; }
.gs-bar #gs-next.finish { box-shadow: 0 0 0 4px var(--accent-soft); }
.gs-bar #gs-more { width: 42px; height: 42px; }
/* adopting a signature: Type with a choice of styles, or Draw */
.gs-adopt .sigtabs.segctl { margin-bottom: 12px; }
.gs-adopt .field { margin-bottom: 10px; }
.gs-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.gs-style { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; color: #16233a; overflow: hidden; }
.gs-style span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.3; }
.gs-style.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gs-style:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sig-wrap.ini { max-width: 360px; }
.gs-legal { margin: 12px 0 0; line-height: 1.5; }
@media (max-width: 760px) {
  .gs { padding: 12px 8px 24px; }
  body.gs-barred .gs { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .gs-card { padding: 18px 16px; border-radius: 14px; margin-bottom: 14px; }
  .gs-card h1 { font-size: 19px; }
  .gs-consent { padding: 12px; }
  .gs-consent p, .gs-err { margin-left: 0; }
  .gs-acts .btn { flex: 1 1 auto; justify-content: center; }
  .gs-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 16px 16px 0 0; border-width: 1px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px; }
  .gs-bar #gs-next { min-width: 104px; height: 44px; }
  .gs-bar #gs-more { width: 44px; height: 44px; }
  .gs-styles { grid-template-columns: minmax(0, 1fr); }
}
/* a phone turned sideways: the pad takes the height, the tabs and tools sit on one line with it */
@media (pointer: coarse) and (max-height: 520px) {
  .modal-back:has(.sig-wrap) { place-items: end center; padding: 0; }
  .modal-back:has(.sig-wrap) .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 14px 14px 0 0; }
  .modal-back:has(.sig-wrap) .modal-h { padding-top: 8px; padding-bottom: 4px; }
  .modal-back:has(.sig-wrap) .modal-b { padding-top: 4px; padding-bottom: 4px; }
  .modal-back:has(.sig-wrap) .modal-f { padding-top: 6px; padding-bottom: 6px; }
  .modal .sigtabs.segctl { margin-bottom: 6px; }
  .modal .sig-wrap .sigpad { height: calc(100dvh - 205px); min-height: 110px; }
  .modal .sig-tools .small { display: none; }
  .modal .sig-tools { margin-top: 4px; justify-content: flex-end; }
}

/* email: Admin card and Outbox delivery */
.em-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.em-info .gl-certd { margin: 4px 0 0; }
.em-info .gl-certd > div { grid-template-columns: 130px minmax(0, 1fr); }
.em-info code { font-size: 12px; overflow-wrap: anywhere; }
.em-bad { color: var(--bad); }
.em-test { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.em-test .field { margin-bottom: 0; }
.em-result:empty { display: none; }
.em-msg { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: var(--bg2); color: var(--fg1); }
.em-msg > .ic { margin-top: 2px; flex: none; }
.em-msg.ok { background: var(--ok-soft); }
.em-msg.ok > .ic { color: var(--ok); }
.em-msg.bad { background: var(--bad-soft); }
.em-msg.bad > .ic { color: var(--bad); }
.em-msg a { white-space: nowrap; }
.ob-tools { flex-wrap: wrap; align-items: center; }
.em-filter { flex-wrap: wrap; max-width: 100%; }
.em-filter:empty { display: none; }
.em-filter .em-n { margin-left: 4px; font-size: 11px; color: var(--fg3); font-weight: 600; }
.em-filter button.on .em-n { color: inherit; }
.ob-row .em-st { flex: none; }
.chip.em-sent { background: var(--bg3); color: var(--fg2); }
.need.email .need-ic { background: var(--bad-soft); color: var(--bad); }
.need-also .also.email { background: var(--bad-soft); color: var(--bad); }
[data-theme="dark"] .chip.em-st.done:not(.ok):not(.bad):not(.warn) { background: var(--ok-soft); color: var(--ok); }
.em-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg1); border: 1px solid var(--line2); font-size: 13px; line-height: 1.5; }
.em-state > span:not(.chip) { flex: 1; min-width: 12rem; }
.em-state.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 20%, transparent); }
.em-state .btn { margin-left: auto; }
.em-view { margin: 0 0 10px; }
.em-frame iframe { display: block; width: 100%; height: 560px; border: 1px solid var(--line2); border-radius: 10px; background: #f4f5f7; }
@media (max-width: 700px) {
  .em-test { grid-template-columns: minmax(0, 1fr); }
  .ob-row { flex-wrap: wrap; row-gap: 4px; }
  .ob-row .ob-main { flex: 1 1 calc(100% - 60px); }
  .ob-row .em-st { margin-left: 46px; }
  .ob-row .ob-when { margin-left: auto; }
  .em-info .gl-certd > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .em-frame iframe { height: 480px; }
}
/* a page header never pushes the page wider than the screen: long names wrap, the actions wrap under them */
.page-head > div:not(.actions) { min-width: 0; flex: 1 1 260px; }
.page-head h1, .page-head .sub { overflow-wrap: anywhere; }
.page-head .actions { max-width: 100%; }
.tbl-wrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 760px) { .row { flex-wrap: wrap; } .row > .btn, .row > label.btn { max-width: 100%; } }

/* the app's frame never scrolls sideways: every page scrolls inside #view, and the browser smoke fails on anything
   that would stick out past the window (tools/smoke/browser.py, EDGE) */
html:has(#app), body:has(#app) { overflow: hidden; }
.doc-head.on-phone .dh-fold { display: inline-flex; }
/* the divider between the menu and Folders: a visible grab handle */
.sb-split { height: 12px; }
.sb-split::after { content: ""; position: absolute; width: 32px; height: 4px; border-radius: 4px; background: var(--line); transition: background var(--t), width var(--t); }
.sb-split { position: relative; }
.sb-split:hover::after, .sb-split:focus-visible::after, .sb-dragging .sb-split::after { background: var(--accent); width: 44px; }
/* narrow strips: the read-only chip (its reason is in the note under the header) and Simple or Full (in the unfolded
   header and in Personal settings) give way first, so the actions never run past the edge */
@container dh (max-width: 1060px) { .doc-head.v2.slim .dh-edctl .ed-ro { display: none; } }
@container dh (max-width: 900px) { .doc-head.v2.slim .ed-switch { display: none; } }
@media (max-width: 760px) {
  .row > .btn, .row > label.btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; overflow-wrap: anywhere; text-align: left; }
  .pr .list-row .main .title { white-space: normal; overflow: visible; }
}
/* a button that names a file (the parity check) wraps instead of pushing the page wider */
#pp-run { max-width: 100%; white-space: normal; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; overflow-wrap: anywhere; text-align: left; }

/* the phone's drawer scrolls as one, so the folder tree always has room under the menu */
@media (max-width: 760px) {
  body.sb-overlay #sidebar { overflow-y: auto; }
  body.sb-overlay #sidebar .sb-scroll { flex: none; overflow: visible; min-height: 0; }
  body.sb-overlay #sidebar .sb-foot { margin-top: auto; }
  .doc-head.v2.slim .dh-tabsw { width: auto; min-width: 46px; padding: 0 6px; gap: 2px; }
}
/* the Library's columns follow the list's own width (the sidebar can be widened), not the window's: fewer columns before
   anything is squeezed or cut off. Phones keep their card layout. */
.lib-list { container: lib / inline-size; }
@media (min-width: 901px) {
  @container lib (max-width: 1000px) {
    .lib-head, .lib-row { grid-template-columns: 36px minmax(200px, 2.4fr) 124px minmax(140px, 1.3fr) 90px 32px; }
    .lib-last { display: none; }
    .lib-list.has-dates .lib-head, .lib-list.has-dates .lib-row { grid-template-columns: 36px minmax(180px, 2.4fr) 124px 100px minmax(96px, 1fr) 32px; }
    .lib-list.has-dates .lib-head .lib-date:not(:first-of-type), .lib-list.has-dates .lib-row .lib-date:not(:first-of-type) { display: none; }
  }
  @container lib (max-width: 820px) {
    .lib-head, .lib-row { grid-template-columns: 36px minmax(180px, 2.4fr) 124px minmax(120px, 1.3fr) 32px; }
    .lib-owner, .lib-list.has-dates .lib-head > :nth-child(4), .lib-list.has-dates .lib-row .lib-owner { display: none; }
    .lib-list.has-dates .lib-head, .lib-list.has-dates .lib-row { grid-template-columns: 36px minmax(180px, 2.4fr) 124px minmax(96px, 1fr) 32px; }
  }
}
/* a price book's name and its state chip wrap together rather than the chip being cut off (any width, any sidebar) */
.pr .list-row .main .title { white-space: normal; overflow: visible; }

/* the slim header's tabs bar (the default; the tabs button or T switches it, remembered per person): the contract's tabs
   in one tight row under the slim line, with their live counts; the tab menu button goes while the bar is there */
.dh-tabbar { display: none; }
.doc-head.v2.slim.on-editor:not(.on-phone) .dh-tabbar { display: inline-flex; }
.doc-head.v2.slim.tabs-bar .dh-tabbar { color: var(--accent); background: var(--accent-soft); }
.doc-head.v2.slim.tabs-bar .tabs { display: flex; margin: 6px -14px -8px -18px; padding: 0 12px; border-top: 1px solid var(--line2); }
.doc-head.v2.slim.tabs-bar .tab { padding: 5px 11px 6px; font-size: 12.5px; gap: 6px; }
.doc-head.v2.slim.tabs-bar .tab .ic { width: 13px; height: 13px; }
.doc-head.v2.slim.tabs-bar .tab .tcount { font-size: 10.5px; line-height: 15px; padding: 0 5px; }
.doc-head.v2.slim.tabs-bar .dh-tabsw { display: none; }
@media (max-width: 760px) { .doc-head.v2.slim.tabs-bar .tabs { display: none; } .doc-head.v2.slim.tabs-bar .dh-tabsw { display: inline-flex; } }

/* ── the on/off switch (UI.toggle): 44 by 24, inside a 40 px touch target; blue when on ── */
.sw-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; max-width: 100%; }
.sw { position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg4);
  padding: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.sw::before { content: ""; position: absolute; inset: -8px -2px; }
.sw .sw-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.sw[aria-checked=true] { background: var(--accent); border-color: var(--accent); }
.sw[aria-checked=true] .sw-knob { transform: translateX(20px); }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw:disabled { opacity: .5; cursor: not-allowed; }
.sw-text { display: grid; gap: 1px; min-width: 0; }
.sw-label { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sw, .sw .sw-knob { transition: none; } }

/* ── pricing tier tables (Pricing > Pricing tiers, and the New contract preview) ── */
.tt-group { margin: 18px 0 8px; }
.tt-card { padding: 12px; margin-bottom: 12px; display: grid; gap: 10px; min-width: 0; }
.tt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tt-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.tt { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; }
.tt td { border: 1px solid var(--line); padding: 4px 8px; text-align: center; vertical-align: middle; white-space: nowrap; }
.tt td.b { font-weight: 600; }
.tt td.ax-h { background: var(--accent); color: var(--on-accent); }
.tt td.ax-g { background: var(--bg2); }
.tt td.f { font-style: italic; }
.tt td[role=button] { cursor: pointer; }
.tt td[role=button]:hover, .tt td[role=button]:focus-visible { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.tt-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* 2.3.5: one look for every pricing table: the same header band, borders and number alignment */
table.tbl.pr-one, .tt.one { border-collapse: collapse; border-spacing: 0; font-size: 13px; }
table.tbl.pr-one { border: 1px solid var(--line); border-radius: 0; }
.pr-one th, .pr-one td, .tt.one td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: middle; }
.tbl.pr-one thead th, .tt.one td.tt-h { background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 600; backdrop-filter: none; }
.tbl.pr-one thead th:first-child, .tbl.pr-one thead th:last-child, .tbl.pr-one tbody tr:last-child td:first-child, .tbl.pr-one tbody tr:last-child td:last-child { border-radius: 0; }
.pr-one .num, .tt.one td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-one .ctr, .tt.one td.ctr { text-align: center; }
.tt.one td.tt-h.ctr { text-align: center; }
.tt-note { display: flex; gap: 8px; align-items: flex-start; background: var(--bg2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.tt-note svg { flex: none; color: var(--fg3); margin-top: 2px; }
.tt-note p { margin: 4px 0 0; color: var(--fg2); line-height: 1.45; }

/* New contract, Pricing: the parts of Appendix III and the tier table choice */
.wz-parts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 16px; }
.wz-parts-iv { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 16px;
  padding: 6px 0 6px 12px; border-left: 2px solid var(--line); }
.wz-parts-iv > .muted { grid-column: 1 / -1; }
.wz-part { min-height: 40px; align-items: center; }
.wz-part.locked { color: var(--fg2); }
.wz-tt { margin-top: 12px; display: grid; gap: 6px; }
.pr-parts td { vertical-align: middle; }
.pr-parts .sw-text { display: none; }

/* the Playbook tab on our paper: what changed from our template, word by word */
.pbf-ch { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.pbf-ch del { color: var(--bad); background: var(--bad-soft); text-decoration: line-through; padding: 0 3px; border-radius: 4px; }
.pbf-ch ins { color: var(--accent); background: var(--accent-soft); text-decoration: none; padding: 0 3px; border-radius: 4px; }
.pbf-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pbf-same { margin-top: 14px; }
.pbf-same > summary { cursor: pointer; font-weight: 600; padding: 8px 0; min-height: 40px; }
@media (max-width: 760px) { .pbf-act { align-items: stretch; } }

/* the playbook editor for our paper: approved fallbacks of a clause */
.pbe-fb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pbe-fb li { display: grid; gap: 4px; justify-items: start; }
.pbe-fixed { min-height: 36px; display: flex; align-items: center; color: var(--fg2); }

/* what's next (2.1): done and to do under the next step; review and approval on the Overview */
.ov-steps { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.ov-steps li { display: flex; gap: 6px; align-items: flex-start; }
.ov-steps li svg { flex: none; margin-top: 2px; }
.ov-steps li.done { color: var(--fg2); }
.ov-steps li.done svg { color: var(--ok); }
.ov-steps li.todo svg { color: var(--warn); }
.ov-gate { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ov-gate.need { border-color: var(--warn-soft); }
.ov-gate-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-gate-h .btn { margin-left: auto; }
.ov-diffs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.ov-diffs del { color: var(--bad); }
.ov-diffs ins { color: var(--accent); text-decoration: none; }
.ov-reviews { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ov-reviews li { display: flex; gap: 8px; align-items: flex-start; }
.ov-reviews li .main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ov-rv-c { font-size: 13px; background: var(--bg2); border-radius: 8px; padding: 4px 8px; overflow-wrap: anywhere; }
.rv-people { display: grid; gap: 2px; max-height: 40vh; overflow: auto; }
.rv-p { min-height: 40px; align-items: center; }

/* the Negotiation tab: by email first, the app as an option */
.neg-way { margin-bottom: 14px; padding: 16px; }
.neg-steps { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.neg-app > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.neg-app[open] > summary { margin-bottom: 8px; }
.sig-way { padding: 16px; margin-bottom: 14px; display: grid; gap: 8px; justify-items: start; }

/* ── notices, toasts, pop-ups and dialogs: one design (2.2.0) ──────────────────────────────────────────────────────
   Layers, lowest first: the page; the phone drawer; the notice dock; dialogs; menus (they open from dialogs too); the
   picture viewer; drag and drop; Starting up; the progress bar. A dialog always covers notices, never the other way.
   The dock (#dock) holds every notice and toast in one column, bottom right (bottom, full width, on phones); the page
   keeps room for it (--dock-space), so a notice never hides what is on the page. Errors from a dialog show in it. */
:root { --z-drawer: 600; --z-dock: 800; --z-dialog: 1000; --z-menu: 1100; --z-viewer: 1200; --z-drop: 1400; --z-waking: 1900;
  --note-shadow: 0 1px 2px rgba(15, 30, 50, .06), 0 8px 28px rgba(15, 30, 50, .13); --dock-space: 0px; }
[data-theme="dark"] { --note-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5); }
.modal-back, .qs-back { z-index: var(--z-dialog); }
.menu { z-index: var(--z-menu); }
.help-light, .help-light-x { z-index: var(--z-viewer); }
.drop-layer { z-index: var(--z-drop); }
.waking { z-index: var(--z-waking); }
#view { padding-bottom: var(--dock-space); }

#dock { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dock); width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#dock:empty { display: none; }
#dock #toasts { position: static; transform: none; display: contents; }
.note, .toast { pointer-events: auto; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 11px;
  padding: 10px 10px 10px 12px; min-height: 48px; border-radius: 12px; background: var(--bg0); color: var(--fg1); border: 1px solid var(--line);
  box-shadow: var(--note-shadow); font-size: 13.5px; font-weight: 500; line-height: 1.45; max-width: none; text-align: left;
  animation: note-in .24s cubic-bezier(.2, .7, .2, 1); transition: opacity .25s, transform .25s; }
.note.out, .toast.out { opacity: 0; transform: translateY(6px); }
.note-ic, .toast-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg0)); color: var(--accent); }
.note.ok .note-ic, .toast.good .toast-ic { background: color-mix(in srgb, var(--ok) 14%, var(--bg0)); color: var(--ok); }
.note.bad .note-ic, .toast.bad .toast-ic { background: color-mix(in srgb, var(--bad) 13%, var(--bg0)); color: var(--bad); }
.note.bad, .toast.bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: var(--bg0); color: var(--fg1); }
.note-t, .toast-t { min-width: 0; overflow-wrap: anywhere; }
.note-t b { font-weight: 620; }
.note-a, .toast-a { display: flex; align-items: center; gap: 6px; }
.note-x, .toast-x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--fg3); }
.note-x:hover, .toast-x:hover { background: var(--bg3); color: var(--fg1); }
.toast:not(:has(.toast-a)) { grid-template-columns: 28px minmax(0, 1fr); }
@keyframes note-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#updated, #session-ended, #net-banner { position: static; transform: none; left: auto; top: auto; bottom: auto; max-width: none; border-radius: 12px;
  padding: 10px 10px 10px 12px; box-shadow: var(--note-shadow); background: var(--bg0); color: var(--fg1); border: 1px solid var(--line); font-size: 13.5px; animation: note-in .24s cubic-bezier(.2, .7, .2, 1); }
#net-banner { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
body.focus-mode #updated { top: auto; }

/* dialogs: the same card, a close control in the header, errors inside the dialog that caused them */
.modal { border-radius: 16px; box-shadow: var(--note-shadow); border-color: var(--line); }
.modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 4px 22px; }
.modal-h .modal-ht { flex: 1; min-width: 0; padding-top: 4px; overflow-wrap: anywhere; }
.modal-x { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--fg3); margin: -4px 0 0; }
.modal-x:hover { background: var(--bg3); color: var(--fg1); }
.modal-f { flex-wrap: wrap; align-items: center; }
.modal-msg { margin: 0 22px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start;
  background: color-mix(in srgb, var(--bad) 8%, var(--bg0)); border: 1px solid color-mix(in srgb, var(--bad) 28%, var(--line)); color: var(--fg1); }
.modal-msg svg { color: var(--bad); flex: none; margin-top: 2px; }
.modal-msg:empty, .modal-msg[hidden] { display: none; }

@media (max-width: 600px) {
  #dock { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .note, .toast { font-size: 14px; }
  .note .btn, .toast .btn { min-height: 40px; }
  .note-x, .toast-x, .modal-x { width: 40px; height: 40px; }
  .modal-h { padding: 14px 10px 4px 18px; }
  .modal-msg { margin: 0 18px; }
  .modal-b, .modal-f { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .note, .toast { animation: none; } }
@media print { #dock { display: none !important; } }

/* the managers of playbooks and templates (2.2, js/roles.js) */
.role-card { margin-top: 18px; display: grid; gap: 8px; }
.role-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.role-head .btn { margin-left: auto; }
.role-card p { margin: 0; }
.role-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.role-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line2); }
.role-list li > span { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.role-none, .role-before { display: flex; gap: 6px; align-items: flex-start; }
@media (max-width: 600px) { .role-list .btn, .role-head .btn { min-height: 40px; } }

/* 2.3.0: permissions and app groups (js/people.js), the Trash (js/trash.js), and what a person cannot use: drawn, marked
   unavailable, and a tap says why (App.need, never hover only) */
[aria-disabled="true"][data-need] { opacity: .5; cursor: not-allowed; }
.pp-groups, .pb-trash, .lib-trash-folders { margin-top: 18px; display: grid; gap: 8px; }
.pp-groups p, .pb-trash p, .lib-trash-folders p { margin: 0; }
.pb-trash h3, .lib-trash-folders h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lib-trash-folders { margin: 0 0 14px; }
.pp-perms .pp-area { display: grid; gap: 2px; margin-top: 8px; }
.pp-perms .pp-ah { text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.pp-perm { padding: 4px 0; }
.pp-perm .pill { margin-left: 4px; }
.pp-members { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
/* 2.3.0 (H2): the permissions matrix, areas by actions; on a phone each area is a card of its actions */
/* 2.3.1: the permissions matrix fits its dialog (no sideways scroll at 1280 or any scaling), says what a group gives in words,
   and keeps the approvers and managers in a section of their own */
.modal.wide:has(.pm-matrix) { width: min(980px, calc(100vw - 40px)); }
.pm-field > .hint { margin: 6px 0 10px; }
.pm-sum { display: flex; gap: 8px; align-items: flex-start; background: var(--bg2); border-radius: 10px; padding: 10px 12px; margin: 4px 0 6px; font-size: 13.5px; line-height: 1.45; }
.pm-sum > .ic, .pm-sum > svg { flex: 0 0 auto; margin-top: 2px; }
.pm-wrap { max-width: 100%; }
.pm-matrix { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px; }
.pm-matrix col.pm-area { width: 140px; }
.pm-matrix th, .pm-matrix td { border-bottom: 1px solid var(--line2); padding: 5px 2px; text-align: center; vertical-align: top; overflow-wrap: anywhere; }
.pm-matrix th[scope=row] { text-align: left; font-weight: 600; padding-left: 4px; }
.pm-matrix thead th { font-weight: 500; color: var(--fg2); font-size: 12px; vertical-align: bottom; line-height: 1.2; }
.pm-note { display: block; font-weight: 400; }
.pm-matrix td.pm-only { text-align: left; color: var(--fg2); padding-left: 8px; }
.pm-box { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 32px; min-width: 32px; max-width: 100%; justify-content: flex-start; padding-top: 6px; cursor: pointer; }
.pm-box.pm-got { cursor: default; }
.pm-box input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.pm-from { font-size: 10.5px; line-height: 1.15; color: var(--fg2); max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.pm-roleset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pm-roles { border: 1px solid var(--line2); border-radius: 10px; padding: 6px 12px 8px; margin: 0; min-width: 0; }
.pm-roles legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.pm-role { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; min-width: 0; }
.pm-role .pm-box { flex: 0 0 auto; min-width: 40px; padding-top: 2px; }
.pm-role > div { min-width: 0; overflow-wrap: anywhere; }
.pp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.pp-log li { border-top: 1px solid var(--line2); padding-top: 6px; }
.pp-why { margin-top: 10px; }
.pp-why-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
@media (max-width: 820px) {
  .pm-matrix colgroup, .pm-matrix thead { display: none; }
  .pm-matrix, .pm-matrix tbody, .pm-matrix tr, .pm-matrix th, .pm-matrix td { display: block; width: 100%; }
  .pm-matrix tr { border: 1px solid var(--line2); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
  .pm-matrix th[scope=row] { border: 0; padding: 4px 0; }
  .pm-matrix td { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; padding: 2px 0; min-height: 40px; text-align: left; }
  .pm-matrix td.pm-na { display: none; }
  .pm-matrix td.pm-only { display: block; padding: 4px 0; }
  .pm-matrix td[data-label]::before { content: attr(data-label); color: var(--fg2); }
  .pm-box { flex-direction: row-reverse; min-height: 40px; min-width: 40px; padding-top: 0; align-items: center; }
  .pm-box input { width: 22px; height: 22px; }
  .pm-from { font-size: 12px; text-align: right; }
  .pm-roleset { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pp-perm, .pp-members .check, .modal .check { min-height: 40px; align-items: center; }
  .role-list li { flex-wrap: wrap; }
  .role-list li > .row { width: 100%; justify-content: flex-end; }
}

/* the live risk check (2.2, js/risk.js): the status chip, the findings at the top of a contract, Risks for you */
.chip.wait { background: color-mix(in srgb, var(--wait, #8f76cf) 12%, var(--bg0)); color: var(--wait, #8f76cf); }
.risk-chip svg { vertical-align: -1px; }
.rk-panel { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg0); box-shadow: var(--note-shadow); overflow: hidden; }
.rk-panel.hard { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.rk-panel.hard .rk-top { background: color-mix(in srgb, var(--bad) 7%, var(--bg0)); }
.rk-panel.soft .rk-top { background: color-mix(in srgb, var(--wait, #8f76cf) 6%, var(--bg0)); }
.rk-top { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.rk-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg0); }
.rk-panel.hard .rk-ic { color: var(--bad); } .rk-panel.soft .rk-ic { color: var(--wait, #8f76cf); } .rk-panel.done .rk-ic { color: var(--ok); }
.rk-sum { display: grid; gap: 1px; min-width: 0; flex: 1; }
.rk-list { list-style: none; margin: 0; padding: 0 12px 6px; display: grid; }
.rk-f { padding: 10px 0; border-top: 1px solid var(--line2); display: grid; gap: 6px; }
.rk-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-d summary { cursor: pointer; color: var(--fg1); }
.rk-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 8px 0; font-size: 13px; }
.rk-ba > div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.rk-ba del { color: var(--fg2); } .rk-ba ins { text-decoration: none; background: color-mix(in srgb, var(--bad) 8%, transparent); border-radius: 4px; padding: 0 2px; }
.rk-rec { margin: 4px 0; display: flex; gap: 6px; align-items: flex-start; } .rk-rec svg { color: var(--ok); margin-top: 3px; flex: none; }
.rk-a { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-f.overridden { opacity: .8; }
.rk-home h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.rk-home ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rk-home a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border-radius: 9px; color: inherit; text-decoration: none; }
.rk-home a:hover { background: var(--bg3); }
/* 2.2.1: the findings are on the Playbook tab (#risk-panel), never above the document; the header's chip is one fixed slot
   (an icon and the count), the same size whatever it says, shown in the slim strip too, so the header never changes size */
.risk-chip.slot { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 46px; padding: 0 6px; text-decoration: none; flex: none; }
.risk-chip.slot .rk-n { min-width: 2.2ch; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 650; text-align: left; }
.risk-chip.slot:hover { filter: brightness(.97); }
.risk-chip.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-head.v2.slim .dh-chips > .risk-chip.slot { display: inline-flex; }
@media (max-width: 600px) {
  .rk-panel { margin: 0 0 12px; }
  .rk-ba { grid-template-columns: minmax(0, 1fr); }
  .rk-a .btn, .rk-top .btn { min-height: 40px; }
}
[data-theme="dark"] { --wait: #a58ee6; }
.rk-home { margin-bottom: 16px; }
.lib-row .lib-stage { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lib-risk { font-size: 11px; white-space: nowrap; }
.pb-props { margin-top: 18px; } .pb-props h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; font-size: 15px; }
.pb-props ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; } .pb-props li { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line2); }
.pbe-lvl { flex-wrap: wrap; }
.pr-risk { margin-top: 18px; display: grid; gap: 8px; } .pr-risk p { margin: 0; } .pr-pct { display: flex; gap: 8px; align-items: center; } .pr-pct .input { width: 96px; }
.rk-d summary { list-style: none; display: flex; gap: 6px; align-items: flex-start; }
.rk-d summary::-webkit-details-marker { display: none; }
.rk-d summary::before { content: ""; width: 7px; height: 7px; margin-top: 7px; flex: none; border-right: 1.5px solid var(--fg3); border-bottom: 1.5px solid var(--fg3); transform: rotate(-45deg); transition: transform .15s; }
.rk-d[open] summary::before { transform: rotate(45deg); margin-top: 5px; }
.risk-chip.icon-only { padding: 0 6px; min-width: 22px; justify-content: center; }
.dh-chips .chip.icon-only { padding: 0 6px; min-width: 22px; justify-content: center; }

/* the review view (2.2.1, js/review.js): what needs a decision, by area and item; a tab of its own, never over the document */
.rv-page { max-width: 980px; margin-left: auto; margin-right: auto; }
.rv-area { margin-top: 14px; display: grid; gap: 10px; }
.rv-area.rv-here, .rv-item.rv-here { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.rv-ah { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-ah h2 { margin: 0; font-size: 16px; }
.rv-ah .grow { flex: 1; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-item { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg0); min-width: 0; }
.rv-ih { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.rv-t { overflow-wrap: anywhere; }
.rv-price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 13.5px; }
.rv-price > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rv-price del { color: var(--fg2); }
.rv-price ins, .rv-red ins { text-decoration: none; background: color-mix(in srgb, var(--ok) 14%, transparent); border-radius: 3px; padding: 0 2px; }
.rv-red del { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); border-radius: 3px; padding: 0 2px; }
.rv-red { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.rv-addr { overflow-wrap: anywhere; white-space: pre-line; }
.rv-c { font-size: 13px; display: flex; gap: 6px; align-items: flex-start; color: var(--fg1); }
.rv-a { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-none { margin: 0; color: var(--fg2); display: flex; gap: 6px; align-items: center; }
.rv-nothing { margin-top: 14px; display: grid; gap: 12px; justify-items: start; }
.rv-nothing p { margin: 0; display: flex; gap: 8px; align-items: center; }
.rv-send { margin: 16px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .rv-price { grid-template-columns: minmax(0, 1fr); }
  .rv-a .btn, .rv-ah .btn, .rv-send .btn { min-height: 40px; }
  .rv-ah .grow { flex-basis: 100%; height: 0; }
}
.si-out { margin-top: 14px; color: var(--fg2); font-size: 14px; }

/* ── addresses in parts (2.3, js/address.js): Street, City, State or Region, Postal code, Country ─────────── */
.addr { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.grid2 > .span2 { grid-column: 1 / -1; min-width: 0; }
.addr > legend { font-size: 12.5px; font-weight: 600; color: var(--fg2); padding: 0; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.addr .addr-same { margin: 0 0 8px; min-height: 40px; align-items: center; }
.addr .addr-same-as { margin: 0 0 12px; overflow-wrap: anywhere; }
.addr-cc { position: relative; }
.addr-list { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 248px; overflow-y: auto;
  background: var(--bg0); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-menu); -webkit-overflow-scrolling: touch; }
.addr-list li { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; min-height: 36px; display: flex; align-items: center; }
.addr-list li.on, .addr-list li:hover { background: var(--accent-soft); color: var(--fg1); }
.addr-list li.addr-none { cursor: default; background: none; }
.addr-check { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin: 0 0 12px; border-radius: 9px; background: var(--info-soft); color: var(--fg1);
  font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.addr-check .ic { color: var(--info); margin-top: 2px; flex: none; }
.addr-check.seen { opacity: .8; }
.addr-was { white-space: pre-line; font-style: italic; }
.chip.addr-chip { background: var(--info-soft); color: var(--info); margin-top: 4px; gap: 4px; max-width: 100%; }
.rv-item .addr-check { margin: 0; }
@media (max-width: 700px) {
  .addr-list li { min-height: 44px; font-size: 16px; }
  .addr-list { max-height: 40vh; }
}
/* 2.3: the background reading of Key Terms: a calm line in its slot (never over anything), and a badge in lists */
.kt-reading-slot:empty { display: none; }
.kt-reading { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 12px; border-radius: 9px; background: var(--bg1); color: var(--fg2); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.kt-reading .spin { flex: none; width: 13px; height: 13px; border-width: 1.5px; margin-top: 2px; color: var(--accent); }
.kt-reading .ic { flex: none; margin-top: 2px; }
.kt-reading.warn { color: var(--warn); background: var(--warn-soft); }
.kt-reading.warn .muted { color: var(--fg2); }
.dash-card .kt-reading { margin: 10px 0 0; font-size: 12.5px; }
.lib-reading { font-size: 11px; gap: 4px; }
.lib-reading .spin { width: 9px; height: 9px; border-width: 1.5px; }
.rw-item .title .lib-reading { margin-left: 4px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .kt-reading .spin, .lib-reading .spin { animation: none; } }

/* 2.3.0: an engagement type's DISCO Project Manager setting, under its header */
.pr-dpm { margin: 0 0 14px; }
.pr-dpm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg0); }
.pr-dpm-ic { display: inline-flex; color: var(--fg3); }
.pr-dpm-text { flex: 1 1 260px; min-width: 0; }
.pr-dpm-text .chip { margin-left: 6px; vertical-align: 1px; }
.pr-dpm-row .sw-row { flex: none; }

/* 2.3.1: Show in the document, the note above the editor (the spot is selected in the document itself) */
.editor-note.ed-spot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-note.ed-spot[hidden] { display: none; }
.editor-note.ed-spot .txt { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.editor-note.ed-spot.ok { background: var(--ok-soft, var(--bg2)); }
.editor-note.ed-spot.warn { background: var(--warn-soft); }
@media (max-width: 700px) { .editor-note.ed-spot .btn { min-height: 40px; } }
.rv-price .chip { justify-self: start; }
.rv-why { display: block; }

/* 2.3.2: Ask for changes, one look everywhere an approver decides: its own outline in the problem red (never the primary
   blue, never orange), next to Approve */
.btn.changes { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bg0); }
.btn.changes:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.changes .ic { color: var(--bad); }
.ov-gate-a { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ov-gate-h .ov-gate-a .btn, .ov-reviews .ov-gate-a .btn { margin-left: 0; }
.rv-how { margin: 10px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.rv-nothing .rv-a { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-note.ok { color: var(--ok); }
.ov-note.ok .ic { color: var(--ok); }
.ov-still li { overflow-wrap: anywhere; }

/* 2.3.3: comments and @mentions (js/mentions.js). The one-time tip sits above the editor, drawn before the document opens
   (so it never moves the open document); the share prompt and the mention pop-ups are notes in the dock */
.editor-note.mn-tip { flex: 0 0 auto; gap: 10px; padding: 6px 8px 6px 16px; background: var(--accent-soft); color: var(--fg1); font-size: 13px; }
.mn-tip .mn-tip-ic { color: var(--accent); display: grid; place-items: center; flex: none; }
.mn-tip .txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.mn-tip .btn { flex: 0 0 auto; }
.note .mn-level { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.note .mn-level .select { height: 32px; padding: 0 28px 0 10px; font-size: 13px; width: auto; }
.note .sr, .mn-level .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note.mn-share .note-t { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
@media (max-width: 760px) {
  .editor-note.mn-tip { padding: 6px 4px 6px 10px; font-size: 12.5px; }
  .note .mn-level .select { font-size: 16px; height: 40px; }
}
@media (hover: none), (pointer: coarse) { .mn-tip .btn, .note.mn-share .btn, .note.mn-pop .btn { min-height: 40px; } .mn-tip .mn-tip-x { min-width: 40px; } }

/* 2.3.3: the fill guide beside the open document (js/fillguide.js): a column of one width whatever it says, laid out
   with the editor from the start, so the document never moves when it appears, updates or goes; folding it is the
   person's own choice. On phones and small tablets (where the page uses the touch layout) a bar above the document, in
   the page's flow and of one height, its targets 40 px; Fill in opens the value field under it. */
.ed-row { flex: 1; min-height: 0; min-width: 0; display: flex; }
.ed-row > .editor-wrap { flex: 1 1 auto; min-width: 0; }
.fill-guide { flex: 0 0 300px; width: 300px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  background: var(--bg1); border-left: 1px solid var(--line2); font-size: 13px; color: var(--fg1); }
.fill-guide.folded { flex-basis: 44px; width: 44px; overflow: hidden; }
.fg-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px 16px; }
.fg-ic { color: var(--accent); display: inline-flex; flex: none; }
.fill-guide.done .fg-ic { color: var(--ok); }
.fg-t { flex: 1 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-n { color: var(--fg2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-fold { flex: none; }
.fg-bar { height: 4px; margin: 0 16px 14px; border-radius: 2px; background: var(--bg3); overflow: hidden; flex: none; }
.fg-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.fill-guide.done .fg-bar i { background: var(--ok); }
.fg-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fg-cur { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg0); min-width: 0; }
.fill-guide.busy .fg-cur { opacity: .75; }
.fg-k { font-size: 11.5px; color: var(--fg3); }
.fg-label { align-self: flex-start; max-width: 100%; font: inherit; font-size: 16px; font-weight: 600; text-align: left; color: var(--fg1); background: none;
  border: 0; padding: 0; cursor: pointer; overflow-wrap: anywhere; border-radius: 4px; }
.fg-label:hover { color: var(--accent); text-decoration: underline; }
.fg-where { color: var(--fg2); font-size: 12.5px; overflow-wrap: anywhere; }
.fg-nav { display: flex; gap: 6px; margin-top: 4px; }
.fg-nav .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
.fg-open { display: none !important; }
.fg-entry { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 0; }
.fg-entry label { font-size: 12px; color: var(--fg2); }
.fg-row { display: flex; gap: 6px; min-width: 0; }
.fg-row .input { flex: 1 1 auto; min-width: 0; }
.fg-row .btn { flex: none; }
.fg-hint { font-size: 12px; color: var(--fg3); line-height: 1.45; }
.fg-offer { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; color: var(--fg1); background: var(--accent-soft);
  padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.fg-offer > .ic { color: var(--accent); }
.fg-offer > span { flex: 1 1 140px; min-width: 0; }
.fg-list { display: flex; flex-direction: column; gap: 2px; }
.fg-li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 6px; border: 0; background: none; text-align: left;
  color: var(--fg1); font: inherit; min-width: 0; }
button.fg-li { cursor: pointer; }
button.fg-li:hover { background: var(--bg2); }
.fg-li.on { background: var(--accent-soft); }
.fg-li.ok { color: var(--fg3); }
.fg-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fg3); flex: none; display: grid; place-items: center; }
.fg-li.on .fg-dot { border-color: var(--accent); }
.fg-li.ok .fg-dot { border-color: var(--ok); color: var(--ok); }
.fg-ll { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-c { font-size: 11.5px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.fg-msg { color: var(--fg2); display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.fg-msg:empty { display: none; }
.fg-done { display: flex; gap: 10px; align-items: flex-start; color: var(--ok); padding: 12px; border-radius: 10px; background: var(--ok-soft); }
.fg-done div { display: flex; flex-direction: column; gap: 2px; color: var(--fg1); }
.fg-done span { color: var(--fg2); font-size: 12.5px; }
.fill-guide.folded .fg-head { flex-direction: column; padding: 10px 4px; gap: 10px; }
.fill-guide.folded .fg-t, .fill-guide.folded .fg-bar, .fill-guide.folded .fg-body { display: none; }
.fill-guide.folded .fg-n { writing-mode: vertical-rl; }
.fill-guide.folded .fg-fold { order: -1; }
@media (max-width: 1180px) { .fill-guide { flex-basis: 264px; width: 264px; } }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  .ed-row { flex-direction: column; }
  .fill-guide, .fill-guide.folded { order: -1; flex: 0 0 auto; width: auto; overflow: visible; border-left: 0; border-bottom: 1px solid var(--line2);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; min-height: 52px; }
  .fg-head, .fg-body, .fg-cur, .fg-nav, .fill-guide.folded .fg-head { display: contents; }
  .fg-t, .fg-k, .fg-where, .fg-list, .fg-hint, .fg-bar, .fg-msg, .fg-ic { display: none; }
  .fg-n { order: 1; }
  .fg-label { order: 2; flex: 1 1 0; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 40px; }
  #fg-prev { order: 3; }
  .fg-open { order: 4; display: inline-flex !important; }
  #fg-next { order: 5; }
  .fg-fold { order: 6; }
  .fg-done { order: 2; flex: 1 1 0; min-width: 0; padding: 6px 10px; background: none; align-items: center; }
  .fg-done span { display: none; }
  .fg-nav .btn, .fg-fold, .fg-open { flex: none; min-height: 40px; min-width: 40px; }
  .fg-nav .lbl { display: none; }
  .fg-offer, .fg-entry { order: 8; flex: 1 1 100%; display: none; margin: 2px 6px 4px 0; }
  .fill-guide.entry .fg-entry, .fill-guide.entry .fg-offer { display: flex; }
  .fg-row .input, .fg-row .btn { min-height: 40px; font-size: 16px; }
  .fill-guide.folded .fg-label, .fill-guide.folded .fg-nav, .fill-guide.folded .fg-offer, .fill-guide.folded .fg-entry, .fill-guide.folded .fg-done { display: none; }
  .fill-guide.folded .fg-n { writing-mode: horizontal-tb; flex: 1 1 auto; }
  .fill-guide.folded .fg-fold { order: 6; }
}
@media (hover: none), (pointer: coarse) { .fg-li, .fg-nav .btn, .fg-fold, .fg-row .btn, .fg-row .input { min-height: 40px; } }

/* ── 2.3.3: signing, one guided flow (js/signing.js) ─────────────────────────────────────────────────────────────── */
/* a control that cannot be used yet: it stays where it is, looks unavailable, and says why when pressed */
.btn.is-blocked, .btn.is-blocked:hover { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.primary.is-blocked { background: var(--accent); color: var(--on-accent); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; font: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* nothing prepared yet: the two ways, side by side */
.sg-start { max-width: 880px; }
.sg-ways { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.sg-way { padding: 18px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.sg-way h2 { font-size: 16px; margin: 0; }
.sg-way.main { border-color: color-mix(in srgb, var(--accent) 30%, var(--line2)); }
.sg-way-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sg-way:not(.main) .sg-way-ic { background: var(--bg2); color: var(--fg2); }
.sg-mini { margin: 0; padding-left: 20px; color: var(--fg2); font-size: 13.5px; display: grid; gap: 4px; }
.banner.sg-gate { border-color: color-mix(in srgb, var(--warn) 30%, var(--line2)); background: color-mix(in srgb, var(--warn) 5%, var(--bg0)); }
.banner.sg-gate .ic-wrap { background: var(--warn-soft); color: var(--warn); }
.banner.sg-stale .ic-wrap { background: var(--warn-soft); color: var(--warn); }
.banner .txt { flex: 1 1 260px; min-width: 0; }
.sg-mail { margin: 0 0 14px; }

/* the flow: steps, the current step, and the bar with Send that never leaves the screen */
.sgw { max-width: 1240px; padding-bottom: 0; }
.sgw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sgw-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.sgw-head h1 { font-size: 22px; margin: 0; }
.sgw-head .sub { color: var(--fg3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgw-saved { font-size: 12.5px; color: var(--fg3); display: inline-flex; align-items: center; gap: 5px; min-height: 22px; }
.sgw-saved.saved { color: var(--ok); }
.sgw-saved.error { color: var(--bad); }
.sgw-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.sgw-step { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line2);
  background: var(--bg0); color: var(--fg2); font: inherit; font-weight: 560; cursor: pointer; text-align: left; }
.sgw-step .n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--fg2); font-size: 12px; }
.sgw-step .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgw-step.on { border-color: var(--accent); color: var(--fg1); box-shadow: 0 0 0 3px var(--accent-soft); }
.sgw-step.on .n { background: var(--accent); color: var(--on-accent); }
.sgw-step:not(.todo):not(.on) .n { background: var(--ok-soft); color: var(--ok); }
.sgw-step.todo:not(.on) .n { background: var(--bg2); color: var(--fg3); }
.sgw-step:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sgw-body { min-height: 240px; }
.sgw-bar { position: sticky; bottom: 0; z-index: 6; margin: 16px -4px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; background: color-mix(in srgb, var(--bg1) 94%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line2); border-radius: 12px 12px 0 0; }
.sgw-need { flex: 1 1 280px; min-width: 0; font-size: 13.5px; }
.sgw-ok { color: var(--ok); display: inline-flex; align-items: center; gap: 6px; font-weight: 560; }
.sgw-miss summary { cursor: pointer; color: var(--fg1); display: flex; align-items: center; gap: 6px; min-height: 32px; }
.sgw-miss summary .ic { color: var(--warn); }
.sgw-miss ul { margin: 4px 0 2px; padding-left: 24px; display: grid; gap: 4px; max-height: 30vh; overflow-y: auto; }
.sgw-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Recipients */
.sgw-card { margin-bottom: 14px; }
.sgw-h { font-size: 15px; margin: 0 0 10px; }
.sgw-order { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.sgw-order .check { align-items: flex-start; min-height: 40px; }
.sgw-signers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sgw-signer { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--bg1); }
.sgw-sf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sgw-sf .field { margin: 0; }
.sgw-sa { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
.sgw-sa .role-tag { margin: 0 6px 0 0; }
.sgw-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--on-accent); background: var(--accent); margin-top: 22px; }
.t1 .sgw-num, .sgw-sum .t1 .sgw-num { background: var(--warn); }
.t2 .sgw-num, .sgw-sum .t2 .sgw-num { background: var(--info); }
.sgw-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sgw-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.sgp-list { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.sgp-p { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: var(--fg1); cursor: pointer; }
.sgp-p:hover, .sgp-p:focus-visible { background: var(--bg2); }
.sgp-p > span { display: grid; min-width: 0; }

/* Fields: the tools beside the pages, fields in each signer's colour */
.sgw-fields { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.sgw-tools { padding: 14px; display: grid; gap: 10px; position: sticky; top: 8px; max-height: calc(100vh - 140px); overflow-y: auto; }
.sgw-tools .field { margin: 0; }
.sgw-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sgw-pal .btn { justify-content: flex-start; min-height: 40px; }
.sgw-move { border-top: 1px solid var(--line2); padding-top: 10px; display: grid; gap: 8px; }
.sgw-pad { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.sgw-pad .btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
.sgw-pad2 { display: flex; flex-wrap: wrap; gap: 6px; }
.sgw-pad2 .btn { min-height: 40px; }
.sgw-pages { overflow: visible; padding: 0 0 24px; }
.sgw-f { position: absolute; display: flex; align-items: center; justify-content: flex-start; padding: 0 4px; border: 1.5px solid var(--accent); background: rgba(0, 105, 180, .12);
  color: var(--accent); border-radius: 4px; font-size: 11px; font-weight: 600; cursor: grab; user-select: none; touch-action: none; overflow: visible; }
.sgw-f::after { content: ""; position: absolute; inset: -8px; }               /* a larger target for a finger */
.sgw-f.t1 { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.sgw-f.t2 { border-color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.sgw-f.other { opacity: .55; border-style: dashed; }
.sgw-f.sel { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); z-index: 3; opacity: 1; }
.sgw-f:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sgw-fl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; pointer-events: none; }
.sgw-fn { min-width: 14px; height: 14px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 9px; color: var(--on-accent); background: currentColor; }
.sgw-fn { color: var(--on-accent); background: var(--accent); }
.t1 .sgw-fn { background: var(--warn); } .t2 .sgw-fn { background: var(--info); }
.sgw-f .grip { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 4px; background: currentColor; opacity: .7; cursor: nwse-resize; z-index: 1; }
.sgw-f:not(.sel) .grip { opacity: 0; }

/* Review and send */
.sgw-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sgw-sum { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.sgw-sum li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.sgw-sum li > span:nth-child(2) { display: grid; min-width: 0; }
.sgw-sum .sgw-num { margin: 0; }
.sgw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* the tracker: one obvious action, every other control in its place, the steps as a line */
.sgt { max-width: 980px; }
.sgt-head { padding: 18px; margin-bottom: 14px; display: grid; gap: 6px; }
.sgt-head.sent { border-color: color-mix(in srgb, var(--warn) 25%, var(--line2)); }
.sgt-head.completed { border-color: color-mix(in srgb, var(--ok) 30%, var(--line2)); }
.sgt-head.declined, .sgt-head.expired { border-color: color-mix(in srgb, var(--bad) 30%, var(--line2)); }
.sgt-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sgt-h { font-size: 18px; margin: 2px 0 0; line-height: 1.35; }
.sgt-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.banner.sign-me.later .ic-wrap { background: var(--warn-soft); color: var(--warn); }
.sgt-line { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; }
.sgt-line > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; position: relative; }
.sgt-line > li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line2); z-index: 0; }
.sgt-line > li:first-child::before { top: 18px; } .sgt-line > li:last-child::before { bottom: calc(100% - 18px); }
.sgt-line > li > div { min-width: 0; }
.sgt-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650;
  background: var(--bg2); color: var(--fg3); border: 2px solid var(--bg0); }
.sgt-line .done .sgt-dot, .sgt-line .signed .sgt-dot { background: var(--ok); color: var(--on-tone); }
.sgt-line .now .sgt-dot { background: var(--warn); color: var(--on-tone); box-shadow: 0 0 0 4px var(--warn-soft); }
.sgt-line .bad .sgt-dot, .sgt-line .declined .sgt-dot { background: var(--bad); color: var(--on-tone); }
.sgt-who { display: grid; gap: 1px; }
.sgt-who .role-tag { margin: 0 0 0 4px; }
.sgt-st { font-size: 13px; color: var(--fg2); }
.sgt-st.ok { color: var(--ok); } .sgt-st.now { color: var(--warn); font-weight: 560; } .sgt-st.bad { color: var(--bad); }
.sgt-sa { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
.sgt-sa .btn { min-height: 36px; }
@media (hover: none), (pointer: coarse) { .sgt-sa .btn { min-height: 40px; } }   /* 2.3.3: touch targets 40 px */
.sgt-hist summary { cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 560; color: var(--fg2); }

/* Home: signing under way */
.hs-list { display: grid; gap: 2px; }
.hs-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; color: inherit; text-decoration: none; min-height: 48px; }
.hs-row:hover { background: var(--bg2); }
.hs-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hs-t { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-dots { display: flex; gap: 4px; }
.hs-dot { width: 18px; height: 6px; border-radius: 3px; background: var(--bg4); }
.hs-dot.signed { background: var(--ok); } .hs-dot.sent, .hs-dot.viewed { background: var(--warn); } .hs-dot.declined { background: var(--bad); }
.hs-go { flex: none; }

@media (max-width: 900px) {
  .sgw-fields { grid-template-columns: minmax(0, 1fr); }
  .sgw-tools { position: sticky; top: 0; z-index: 5; max-height: none; grid-template-columns: minmax(0, 1fr); box-shadow: var(--shadow); }
  .sgw-review, .sg-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sgw-steps { gap: 4px; }
  .sgw-step { padding: 6px 8px; gap: 6px; font-size: 13px; }
  .sgw-step .l { white-space: normal; line-height: 1.15; }
  .sgw-signer { grid-template-columns: minmax(0, 1fr); }
  .sgw-num { margin: 0; }
  .sgw-sf { grid-template-columns: minmax(0, 1fr); }
  .sgw-sa { max-width: none; justify-content: flex-start; }
  .sgw-sa .btn.icon-only { width: 44px; height: 44px; }
  .sgw-two { grid-template-columns: minmax(0, 1fr); }
  .sgw-tools { padding: 10px; gap: 8px; position: static; box-shadow: none; }
  .sgw-tray { width: 100%; }
  .sgw-tray:empty { display: none; }
  .sgw-tray .sgw-move { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .sgw-tray #sgw-selname { flex: 1 1 100%; }
  .sgw-tray .sgw-pad { display: flex; gap: 6px; }
  .sgw-tray .sgw-pad .btn { width: 44px; height: 44px; }
  .sgw-tray .sgw-pad2 .btn { min-height: 44px; padding: 0 10px; }
  .sgw-pal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgw-pal .btn { padding: 0 8px; font-size: 13px; }
  .sgw-tools > p.small:last-child { display: none; }
  .sgw-bar { margin: 12px -12px 0; border-radius: 0; }
  .sgw-nav { width: 100%; }
  .sgw-nav .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .sgw-nav #sgw-send { flex-basis: 100%; order: -1; }
  .sgt-line > li { grid-template-columns: 28px minmax(0, 1fr); }
  .sgt-sa { grid-column: 2; justify-content: flex-start; max-width: none; }
  .sgt-sa .btn, .sgt-acts .btn { min-height: 44px; }
  .sgw-sum li { grid-template-columns: 28px minmax(0, 1fr); }
  .sgw-sum li > :nth-child(n+3) { grid-column: 2; }
}
/* 2.3.3 (C): Share, who has access to one contract (js/share.js). Rows stack on a phone; every target is 40 px by touch */
.sh-body { display: grid; gap: 14px; }
.sh-pick { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-pick .input { flex: 1 1 220px; min-width: 0; }
.sh-chosen { display: contents; }
.sh-c { display: inline-flex; align-items: center; gap: 4px; }
.sh-cx { border: 0; background: transparent; color: var(--fg3); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-grid; place-items: center; }
.sh-cx:hover, .sh-cx:focus-visible { color: var(--fg1); background: var(--bg2); }
.sh-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-width: none; list-style: none; margin: 0; max-height: 260px; overflow: auto; }
.sh-results.hidden { display: none; }
.sh-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; background: transparent; color: var(--fg1);
  text-align: left; border-radius: 8px; cursor: pointer; }
.sh-opt:hover, .sh-opt:focus-visible { background: var(--accent-soft); outline: none; }
.sh-opt > span:last-child, .sh-who { display: flex; flex-direction: column; min-width: 0; }
.sh-opt b, .sh-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-addrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.sh-level { width: auto; min-width: 110px; }
.sh-genrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-genrow #sh-vis { flex: 1 1 240px; width: auto; min-width: 0; }
.sh-grp { background: var(--bg2); color: var(--fg2); }
.sh-h { font-weight: 600; margin-bottom: 6px; }
.sh-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line2); border-radius: 10px; max-height: 320px; overflow: auto; }
.sh-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line2); min-height: 48px; }
.sh-row:first-child { border-top: 0; }
.sh-who { flex: 1 1 auto; }
.sh-who .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-act { display: flex; align-items: center; gap: 4px; flex: none; }
.sh-owner summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.sh-owner .field { margin-top: 8px; }
.sh-ro { margin: 0; }
@media (max-width: 700px) {
  .sh-row { flex-wrap: wrap; }
  .sh-who { flex-basis: calc(100% - 40px); }
  .sh-act { margin-left: 32px; }
  .sh-addrow > * { flex: 1 1 0; }
  .doc-head .dh-share .lbl, .doc-head .dh-addp .lbl { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .sh-level, .sh-pick .input, #sh-vis, #sh-newowner { min-height: 40px; font-size: 16px; }
  .sh-cx, .sh-rm { min-width: 40px; min-height: 40px; }
}