/* PL-EC platform - house brand (navy #29235C + red #E30613) on the "Dossier" layout:
   soft white surfaces, Barlow Condensed headings over Barlow body. */
:root {
  --color-brand-navy: #29235c;
  --color-brand-red: #e30613;
  --color-accent: #29235c;
  --color-accent-100: #ecebf3;
  --color-accent-200: #d5d3e6;
  --color-accent-300: #b3afd0;
  --color-accent-400: #8b85b3;
  --color-accent-500: #635c93;
  --color-accent-600: #453e75;
  --color-accent-700: #322c5e;
  --color-accent-800: #29235c;
  --color-accent-900: #1b1740;
  --color-accent-2: #e30613;
  --color-accent-2-100: #fdeaec;
  --color-accent-2-200: #fbcdd1;
  --color-accent-2-800: #8e040c;
  --color-text: #1f1c33;
  --color-bg: #f3f2f6;
  --color-surface: #ffffff;
  --color-divider: #e4e2ec;
  --color-neutral-100: #f7f7fa;
  --color-ok: #1f7a4d;
  --color-ok-100: #e3f3ea;
  --color-warn: #9a6400;
  --color-warn-100: #fff3d6;
  --plec-shadow: 0 1px 2px rgba(31,28,51,0.06), 0 10px 30px -18px rgba(31,28,51,0.30);
  --plec-shadow-sm: 0 1px 2px rgba(31,28,51,0.05), 0 6px 18px -14px rgba(31,28,51,0.26);
  --plec-muted: #6b6784;
  --font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.1; margin: 0 0 10px; letter-spacing: 0.005em; }
h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 18px; }
p { margin: 0 0 10px; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.kicker { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.muted { color: var(--plec-muted); }
.small { font-size: 12px; }
.num { font-family: var(--font-heading); font-size: 44px; line-height: 1; }
.note { font-size: 12px; color: var(--color-accent-700); }

/* ------------------------------------------------------------------ focus
   One rule for everything that can take focus, and `:focus-visible` rather
   than `:focus` so a mouse click does not leave a ring behind while a Tab
   still does. Two colours, because the same ring has to be seen on white
   surfaces and on the navy sidebar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar :where(a, button, [tabindex]):focus-visible,
.btn-onnavy:focus-visible { outline-color: #fff; outline-offset: 1px; }
.table tr.click:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: -3px; }

/* The first thing a keyboard reaches, and the only way past a sidebar full of
   links without pressing Tab thirty times. Off-screen until it has focus. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: var(--color-text); padding: 10px 16px; border-radius: 0 0 8px 0; box-shadow: var(--plec-shadow); font-size: 14px; }
.skip-link:focus { left: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--color-accent-300); background: #fff; color: var(--color-text); white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--color-accent-100); }
.btn:disabled, .btn.disabled { cursor: not-allowed; opacity: 0.55; border-style: dashed; color: var(--plec-muted); background: #fff; }
.btn-primary { background: var(--color-brand-red); border-color: var(--color-brand-red); color: #fff; }
.btn-primary:hover { background: #c30510; border-color: #c30510; }
.btn-secondary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-secondary:hover { background: var(--color-accent-700); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-sm { padding: 3px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-danger { color: var(--color-accent-2-800); border-color: var(--color-accent-2-200); }
.btn-danger:hover { background: var(--color-accent-2-100); }

/* tags */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; line-height: 1.5; white-space: nowrap; border: 1px solid var(--color-divider); background: #fff; }
.tag-accent { background: var(--color-accent-100); border-color: var(--color-accent-200); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); border-color: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--plec-muted); }
.tag-ok { background: var(--color-ok-100); border-color: #bfe3cf; color: var(--color-ok); }
.tag-warn { background: var(--color-warn-100); border-color: #f2dea0; color: var(--color-warn); }
.tag-outline { background: transparent; }

/* cards & tiles */
.card { background: #fff; border-radius: 12px; box-shadow: var(--plec-shadow); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card.pad0 { padding: 0; overflow: hidden; }
.card-title { font-family: var(--font-heading); font-size: 22px; line-height: 1.1; }
.card-body { font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0; }
.tile { cursor: pointer; border: 1px solid transparent; transition: border-color .12s, background .12s; }
.tile:hover { border-color: var(--color-accent-300); }
.tile.selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tiles-4 { grid-template-columns: repeat(4, 1fr); }
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.stack { display: flex; flex-direction: column; gap: 26px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }
.split { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.split-wide { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
/* A grid item's `min-width` is `auto`, which means *min-content* - so a wide table inside one
   of these columns pushes the track out instead of scrolling in its own `.table-wrap`, and the
   whole page grows sideways. Measured on the expert's workbench at 360 px: 287 px of overflow,
   from a table in the left column of a `.split-wide` that the media query had already collapsed
   to a single `1fr`. Collapsing the columns is not enough on its own; the track still sizes to
   its content. `min-width: 0` is what lets it shrink and hands the scrolling back to the wrap. */
.split > *, .split-2 > *, .split-wide > * { min-width: 0; }
.rail { display: flex; flex-direction: column; gap: 2px; }
.rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-text); }
.rail-item:hover { background: var(--color-accent-100); }
.rail-item.active { background: var(--color-accent-100); border-color: var(--color-accent-200); font-weight: 600; }
.rail-item.done { color: var(--plec-muted); }

/* forms */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .field-label { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.field .hint { font-size: 12px; color: var(--plec-muted); }
.input, textarea.input, select.input { font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); width: 100%; min-width: 0; }
/* The border darkens on focus of any kind; the ring is the shared `:focus-visible`
   rule at the top. This used to carry `outline: 2px solid var(--color-accent-200)`,
   which out-specified that ring (0,2,0 against 0,1,0) - so the one place the ring
   mattered most, a form, was the one place it did not appear. */
.input:focus { border-color: var(--color-accent-400); }
textarea.input { min-height: 90px; resize: vertical; line-height: 1.5; }
.pw-wrap { position: relative; width: 100%; }
.pw-wrap .input { padding-right: 38px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 4px; cursor: pointer; color: var(--color-muted, #6b7280); display: flex; border-radius: 6px; }
.pw-eye:hover { color: var(--color-text); background: rgba(0,0,0,.05); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .span2 { grid-column: span 2; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; min-height: 24px; }
/* 15 px was a decorative square. 18 is hittable with a mouse and 24 with a finger,
   which is what WCAG 2.2 asks of a target that is not a link inside a sentence. */
.check input, input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--color-accent); }
@media (pointer: coarse) { .check input, input[type=checkbox], input[type=radio] { width: 24px; height: 24px; } }
.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-opt { font: inherit; font-size: 13px; padding: 6px 14px; border: none; background: transparent; cursor: pointer; color: var(--color-text); }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt.on { background: var(--color-accent); color: #fff; }

/* tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plec-muted); padding: 10px 12px; background: #faf9fc; border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: var(--color-neutral-100); }
.table tr.open td { background: var(--color-accent-100); }
.table td.actions, .table th.actions { text-align: right; white-space: nowrap; }
.table .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
/* A two-line table cell: a value and a smaller note under it. `align-items: flex-start`
   because the default `stretch` gives every child the full column width - invisible for
   the text spans this was written for, and visibly wrong for the first thing put in it
   that has a shape of its own: a status tag stretched into a bar across the column. */
.cell-2 { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.cell-2 .meta { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plec-muted); margin-top: 2px; }
.detail-row td { background: #faf9fc !important; padding: 18px 20px; }
.empty { padding: 34px 20px; text-align: center; color: var(--plec-muted); font-size: 13px; line-height: 1.6; }
.empty b { display: block; font-family: var(--font-heading); font-size: 20px; color: var(--color-text); margin-bottom: 4px; font-weight: 600; }

/* dialogs & toasts */
.dialog-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-text) 55%, transparent); z-index: 100; display: grid; place-items: center; padding: 24px; }
.dialog { background: #fff; border-radius: 12px; box-shadow: var(--plec-shadow); width: min(640px, 100%); max-height: 92vh; overflow: auto; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.dialog.wide { width: min(900px, 100%); }
.dialog h3 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 40px); }
.toast { background: var(--color-accent-900); color: #fff; padding: 14px 16px; border-radius: 10px; box-shadow: var(--plec-shadow); animation: plecSlideIn .18s ease-out; font-size: 13px; line-height: 1.5; border-left: 4px solid var(--color-brand-red); }
.toast.ok { border-left-color: #4cc38a; }
.toast.err { border-left-color: #ff6b6b; }
.toast b { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.error-box { font-size: 13px; color: var(--color-accent-2-800); border: 1px solid var(--color-accent-2-200); padding: 8px 10px; background: var(--color-accent-2-100); border-radius: 8px; }
.info-box { font-size: 13px; color: var(--color-accent-800); border: 1px solid var(--color-accent-200); padding: 10px 12px; background: var(--color-accent-100); border-radius: 8px; line-height: 1.5; }
/* A month waiting to be sent on for invoicing: the text and the button on one line, wrapping
   to two below the drawer breakpoint rather than pushing the button off the page. */
.gate-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--color-warn); border: 1px solid #f2dea0; padding: 10px 12px; background: var(--color-warn-100); border-radius: 8px; line-height: 1.5; }
.gate-box b { color: var(--color-text); }
.progress { height: 6px; background: var(--color-accent-100); border-radius: 999px; overflow: hidden; min-width: 80px; }
.progress > span { display: block; height: 100%; background: var(--color-accent); }

/* app shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: var(--color-brand-navy); color: #fff; padding: 22px 0; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 0 20px; display: flex; align-items: center; gap: 9px; }
.sidebar .brand img { width: 30px; height: 30px; }
.sidebar .brand .name { font-family: var(--font-heading); font-size: 21px; letter-spacing: 0.05em; }
.sidebar .brand .sub { font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.sidebar .account { padding: 0 20px; }
.sidebar .account .k { font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.sidebar .account .n { font-family: var(--font-heading); font-size: 18px; margin-top: 2px; }
.sidebar .logo-box { width: 48px; height: 48px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.28); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 17px; letter-spacing: 0.04em; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: rgba(255,255,255,0.12); border-radius: 6px; }
.sidebar .group { display: flex; flex-direction: column; gap: 1px; padding: 0 14px; }
.sidebar .group-label { font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; padding: 0 6px 6px; }
.nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 8px; background: transparent; color: #fff; opacity: 0.74; border: none; }
.nav-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.nav-btn.active { opacity: 1; background: rgba(255,255,255,0.16); }
.nav-btn .badge { font-family: ui-monospace, Menlo, monospace; font-size: 9px; opacity: 0.6; }
.sidebar .sep { border-top: 1px solid rgba(255,255,255,0.18); margin: 0 14px; }
.sidebar .user { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.sidebar .user .n { font-size: 13px; line-height: 1.4; }
.sidebar .user .r { font-size: 12px; opacity: 0.6; }
.btn-onnavy { border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; }
.btn-onnavy:hover { background: rgba(255,255,255,0.1); }
.main { min-width: 0; display: flex; flex-direction: column; }
/* The button that opens the drawer. Hidden until the sidebar stops being a column -
   above that width it would be a control for something already on the screen. */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 8px; border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); cursor: pointer; flex: none; }
.nav-toggle:hover { background: var(--color-accent-100); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 20px 32px; background: #fff; box-shadow: var(--plec-shadow-sm); position: sticky; top: 0; z-index: 10; }
.topbar h4 { margin: 0; font-size: 26px; }
.content { padding: 30px 32px 48px; }
.impersonate-bar { background: var(--color-accent-2-100); color: var(--color-accent-2-800); border-bottom: 1px solid var(--color-accent-2-200); padding: 8px 32px; font-size: 13px; display: flex; gap: 12px; align-items: center; }

/* landing & login */
.landing-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-divider); }
.landing-nav .inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 26px; }
.landing-nav a { font-size: 14px; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 92px 0 68px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end; }
.hero h1 { font-size: 74px; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 24px; }
.hero p { font-size: 19px; line-height: 1.5; max-width: 48ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.hero-art { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--color-brand-navy); color: #fff; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-divider); border-radius: 10px; background: #fff; overflow: hidden; }
.specs > div { padding: 28px 24px; border-right: 1px solid var(--color-divider); }
.specs > div:last-child { border-right: none; }
.section { padding: 92px 0; display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 52px; }
.section h2 { font-size: 40px; max-width: 28ch; margin-bottom: 20px; }
.section p { font-size: 17px; line-height: 1.6; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.services-band { border-top: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg)); }
.footer-band { border-top: 1px solid var(--color-divider); background: var(--color-accent-900); color: var(--color-neutral-100); }
.footer-band h2 { color: #fff; font-size: 44px; max-width: 22ch; }
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login .left { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; background: var(--color-accent-900); color: var(--color-neutral-100); }
.login .left h2 { font-size: 42px; max-width: 20ch; color: #fff; }
.login .right { display: grid; place-items: center; padding: 40px; }
.login .box { width: min(400px, 100%); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-divider); background: #fff; cursor: pointer; }
.pill.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* player */
.player { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.slide { background: #fff; border-radius: 12px; box-shadow: var(--plec-shadow); padding: 34px 40px; min-height: 420px; font-size: 15px; line-height: 1.65; }
.slide h1, .slide h2, .slide h3 { margin-top: 18px; }
.slide img { max-width: 100%; }
.slide iframe { width: 100%; height: 560px; border: 1px solid var(--color-divider); border-radius: 8px; }
.a4 { background: #fff; width: 100%; max-width: 760px; margin: 0 auto; box-shadow: var(--plec-shadow); padding: 48px 56px; font-size: 13px; line-height: 1.6; position: relative; }
.a4 .wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.a4 .wm span { transform: rotate(-30deg); font-family: var(--font-heading); font-size: 64px; color: rgba(227,6,19,0.08); letter-spacing: 0.1em; white-space: nowrap; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { border: 1px solid var(--color-divider); border-radius: 10px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.step.active { border-color: var(--color-accent); background: var(--color-accent-100); }
.step.done { border-color: #bfe3cf; background: var(--color-ok-100); }
.step.refused { border-color: var(--color-accent-2-200); background: var(--color-accent-2-100); }
.chat { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.msgs { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; padding: 4px; }
.msg { max-width: 75%; padding: 8px 12px; border-radius: 10px; background: var(--color-neutral-100); font-size: 13px; }
.msg.mine { align-self: flex-end; background: var(--color-accent-100); }
.msg .t { font-size: 10px; color: var(--plec-muted); margin-top: 2px; }
.calendar-day { border: 1px solid var(--color-divider); border-radius: 8px; padding: 10px 12px; background: #fff; }

/* The bell in the top bar: how much of the chat is waiting on you.
   Deliberately not a modal - it opens over the page and the page behind it is still where you
   are, so it has no focus trap and no backdrop. Escape closes it, which the component does. */
.bell-wrap { position: relative; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-divider); border-radius: 10px; background: #fff; color: var(--plec-muted); cursor: pointer; }
.bell:hover { background: var(--color-neutral-100); }
.bell.on { color: var(--color-accent-2); border-color: var(--color-accent-2-200); }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-accent-2); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--color-divider); border-radius: 12px; box-shadow: var(--plec-shadow); }
.bell-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--color-divider); background: none; text-align: left; cursor: pointer; font: inherit; }
.bell-row:last-child { border-bottom: 0; }
.bell-row:hover { background: var(--color-neutral-100); }

@keyframes plecSlideIn { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes plecFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade { animation: plecFadeIn .15s ease-out; }
.spinner { padding: 40px; text-align: center; color: var(--plec-muted); font-size: 13px; }
.spinner::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--color-accent-200); border-top-color: var(--color-accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 200px 1fr; }
  .tiles, .tiles-4 { grid-template-columns: 1fr 1fr; }
  .hero, .section, .login { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
  .split, .split-2, .split-wide, .player, .chat { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
}

/* ---------------------------------------------------------- below a tablet
   The width where a column of navigation stops being possible rather than
   merely tight. Measured: at 360 px the 200 px sidebar left 160 px of content
   and every screen ran 105 px off the side of the page.

   So below this the sidebar leaves the grid and becomes a drawer over the
   content, opened from a button in the top bar. `app.js` owns the open state
   and the keyboard handling; everything here is what it looks like. */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(292px, 86vw);
    height: 100%; z-index: 60; transform: translateX(-100%);
    transition: transform .18s ease-out; box-shadow: 0 0 40px rgba(31,28,51,0.4);
  }
  .shell.nav-open .sidebar { transform: none; }
  .nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(31,28,51,0.45); border: 0; }
  .topbar { padding: 12px 16px; gap: 10px; }
  /* The title gives way, and the bell never does. At 360 px the toggle, the title, the
     environment tag and the bell come to 14 px more than the bar - measured - and the title is
     the only one of the four that can be read from the sidebar as well. */
  .topbar h4 { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bell, .bell-wrap { flex: none; }
  .content { padding: 18px 16px 40px; }
  .impersonate-bar { padding: 8px 16px; flex-wrap: wrap; }
  .tiles, .tiles-4, .tiles-2 { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .dialog-backdrop { padding: 0; place-items: end stretch; }
  .dialog { width: 100%; max-height: 96vh; border-radius: 14px 14px 0 0; padding: 20px 16px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }
  .login .left { display: none; }
  .login .right { padding: 28px 16px; }
  h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
}

/* Touch, not width: a fine pointer hits a 24 px button and a finger does not.
   Kept off the desktop, where the density is the point. */
@media (pointer: coarse) {
  .btn, .nav-btn, .input, select.input { min-height: 40px; }
  .btn-sm { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .table td, .table th { padding-top: 13px; padding-bottom: 13px; }
}

/* Somebody who has asked their system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .sidebar, .topbar, .toasts, .no-print { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
}

/* ================================================================== LMS: editor */
.hint { font-size: 12px; color: var(--plec-muted); line-height: 1.5; }
.pill-sm { font-size: 12px; padding: 4px 10px; }
.pill .muted { color: inherit; opacity: .6; font-size: 11px; }
.lms-head .lms-title-input { font-family: var(--font-heading); font-size: 24px; font-weight: 600; padding: 8px 12px; }
.lms-editor { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .lms-editor { grid-template-columns: 1fr; } }
.lms-screen-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-divider); border-radius: 8px; background: #fff; cursor: pointer; }
.lms-screen-row:hover { background: var(--color-accent-100); }
.lms-screen-row.on { border-color: var(--color-accent); background: var(--color-accent-100); }
.lms-screen-row .btn-sm { padding: 2px 6px; }
.lms-choice { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--color-divider); background: #fff; cursor: pointer; }
.lms-choice.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.media-field { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--color-divider); border-radius: 8px; background: #fafafc; }
.media-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-divider); background: #fff; }
.media-file { font-size: 13px; }
/* rich text */
.rt { border: 1px solid var(--color-divider); border-radius: 8px; background: #fff; overflow: hidden; }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--color-divider); background: #fafafc; }
.rt-btn { font: inherit; font-size: 12px; min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; }
.rt-btn:hover { background: var(--color-accent-100); border-color: var(--color-accent-200); }
.rt-sep { width: 1px; height: 18px; background: var(--color-divider); margin: 0 4px; }
.rt-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; margin: 0 2px; }
.rt-area { padding: 12px 14px; outline: none; font-size: 14px; line-height: 1.6; }
.rt-area:empty:before { content: attr(data-placeholder); color: var(--plec-muted); }
.rt-area:focus { box-shadow: inset 0 0 0 2px var(--color-accent-200); }
.rt-area img { max-width: 100%; border-radius: 8px; }

/* ================================================================== LMS: player */
.rich { font-size: 15px; line-height: 1.65; }
.rich img { max-width: 100%; border-radius: 8px; }
.rich figure { margin: 14px 0; }
.rich figcaption { font-size: 12px; color: var(--plec-muted); margin-top: 4px; }
.rich h2, .rich h3 { margin: 16px 0 6px; }
.rich ul, .rich ol { padding-left: 22px; }
.lms-module-title { font-family: var(--font-heading); font-size: 26px; margin: 0 0 14px; line-height: 1.2; }
.lms-screen-title { font-family: var(--font-heading); font-size: 21px; margin: 0 0 10px; line-height: 1.25; }
.lms-progress { height: 5px; background: var(--color-accent-100); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.lms-progress span { display: block; height: 100%; background: var(--color-accent); transition: width .3s; }
.lms-intro .lms-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: 14px; }
.lms-figure { margin: 0 0 12px; }
.lms-figure img { width: 100%; border-radius: 10px; }
.lms-figure figcaption { font-size: 12px; color: var(--plec-muted); margin-top: 6px; }
.lms-pdf { width: 100%; height: 620px; border: 1px solid var(--color-divider); border-radius: 8px; }
.lms-media { width: 100%; border-radius: 10px; background: #000; }
audio.lms-media { background: transparent; }
.lms-video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.lms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lms-transcript { margin-top: 12px; }
.lms-transcript summary { cursor: pointer; font-size: 13px; color: var(--color-accent); }
/* cards & tabs */
.lms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; }
.lms-card { position: relative; min-height: 190px; cursor: pointer; perspective: 1000px; }
.lms-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--color-divider); background: #fff; backface-visibility: hidden; transition: transform .5s; overflow: auto; font-size: 14px; }
.lms-card-face.back { transform: rotateY(180deg); background: var(--color-accent-100); }
.lms-card.on .front { transform: rotateY(180deg); }
.lms-card.on .back { transform: rotateY(0); }
.lms-card-term { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; }
.lms-card-face img { max-width: 100%; border-radius: 8px; }
.lms-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-divider); margin: 6px 0 16px; }
.lms-tab { font: inherit; font-size: 13px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; margin-bottom: -1px; }
.lms-tab.on { border-bottom-color: var(--color-accent); font-weight: 600; color: var(--color-accent); }
/* questions */
.lms-q-text { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.lms-options { display: flex; flex-direction: column; gap: 6px; }
.lms-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
.lms-option.on { border-color: var(--color-accent); background: var(--color-accent-100); }
.lms-option.right { border-color: var(--color-ok); background: var(--color-ok-100); }
.lms-option.wrong { border-color: #e2001a; background: #fde8ea; }
.lms-pairs { display: flex; flex-direction: column; gap: 8px; }
.lms-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.lms-pair-left { padding: 9px 12px; border: 1px solid var(--color-divider); border-radius: 8px; background: #fafafc; font-size: 14px; }
.lms-blanks { font-size: 15px; line-height: 2.2; }
.lms-blank { display: inline-block; width: 140px; margin: 0 4px; padding: 3px 8px; font-size: 14px; }
.lms-dots { display: flex; gap: 6px; margin-top: 18px; }
.lms-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-accent-200); background: #fff; cursor: pointer; padding: 0; }
.lms-dot.done { background: var(--color-accent-200); }
.lms-dot.on { border-color: var(--color-accent); background: var(--color-accent); }
.lms-feedback { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-divider); font-size: 13px; }
.lms-feedback.ok { border-color: #bfe3cf; background: var(--color-ok-100); }
.lms-feedback.ko { border-color: #f2c2c7; background: #fde8ea; }
.lms-exam-intro { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); }

/* ================================================================== Academy: training screens */
.trn-tile { width: 54px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-divider); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--plec-muted); background: #fafafc; letter-spacing: .08em; }
.trn-tile.big { width: 150px; height: 100px; font-family: ui-monospace, Menlo, monospace; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 6px 0; }
.pkg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 12px; border: 1px solid var(--color-divider); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--color-text); }
.pkg-tile:hover { background: var(--color-accent-100); }
.pkg-tile.on { background: var(--color-accent-100); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.pkg-tile:disabled { cursor: default; opacity: .7; }
.pkg-tile .pkg-icon { font-size: 20px; }
.kv-box { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; padding: 14px 16px; border-radius: 8px; background: #fafafc; border: 1px solid var(--color-divider); font-size: 14px; margin: 8px 0; }
.kv-box .kicker { padding-top: 2px; }
.kv-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.kv-lines > div:last-child { border-bottom: 0; }
.welcome-preview { padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 8px; background: #fafafc; max-height: 200px; overflow: auto; font-size: 14px; }
/* learning portal cards */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.lp-card { background: #fff; border-radius: 12px; box-shadow: var(--plec-shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-card .lp-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--plec-muted); }
.lp-card .lp-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; }
.lp-tile { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.lp-mods { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lp-mod { display: flex; align-items: center; gap: 10px; }
.lp-mod .box { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--color-divider); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.lp-mod.done .box { background: #e2001a; border-color: #e2001a; }
.lp-mod.next .box { border-color: var(--color-accent); color: var(--color-accent); }
.lp-mod.todo { color: var(--plec-muted); }
.lp-bar { height: 4px; background: var(--color-divider); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.lp-bar span { display: block; height: 100%; background: #e2001a; }
.lib-sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--plec-muted); }

/* imported Rakoo content */
.callout { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--color-accent); background: var(--color-accent-100); border-radius: 0 8px 8px 0; font-size: 14px; }
.callout-tip { border-left-color: var(--color-ok); background: var(--color-ok-100); }
.callout-example { border-left-color: #4f7fa6; background: #eef4f8; }
.callout-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--plec-muted); margin-bottom: 2px; }
.callout p:last-child { margin-bottom: 0; }
.pm-img { margin: 12px 0; }
.pm-img.align-left { text-align: left; } .pm-img.align-center { text-align: center; } .pm-img.align-right { text-align: right; }
.pm-img img { max-width: 100%; border-radius: 8px; }
.beacons li { margin-bottom: 8px; }

/* E-QMS chapter content (imported from Word) */
.slide table, .rich table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.slide table td, .slide table th, .rich table td, .rich table th { border: 1px solid var(--color-divider); padding: 6px 8px; vertical-align: top; }
.slide table th, .rich table th, .slide table tr:first-child td strong:only-child { background: var(--color-neutral-100); }
.slide img { max-width: 100%; height: auto; }
.slide figure.doc-shape { margin: 12px 0; text-align: center; }
.slide figure.doc-shape img { max-width: 80%; }
.slide h1 { font-size: 20px; } .slide h2 { font-size: 17px; } .slide h3 { font-size: 15px; } .slide h4 { font-size: 14px; }
.slide p.list-para { margin-left: 18px; }

/* ================================================================== org chart */
.oc-wrap { overflow: hidden; }
.oc-scroll { overflow-x: auto; padding: 8px 4px 16px; }
.oc-tree ul { display: flex; justify-content: center; padding: 26px 0 0; margin: 0; list-style: none; position: relative; }
.oc-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 26px; border-left: 2px solid var(--color-accent-200); }
.oc-tree li { position: relative; padding: 26px 10px 0; display: flex; flex-direction: column; align-items: center; }
.oc-tree li::before, .oc-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 2px solid var(--color-accent-200); }
.oc-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--color-accent-200); }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { display: none; }
.oc-tree li:only-child { padding-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0 none; }
.oc-tree li:last-child::before { border-right: 2px solid var(--color-accent-200); border-radius: 0 6px 0 0; }
.oc-tree li:first-child::after { border-radius: 6px 0 0 0; }
.oc-tree > ul { padding-top: 0; }
.oc-tree > ul > li { padding-top: 0; }
.oc-tree > ul > li::before, .oc-tree > ul > li::after { display: none; }
.oc-tree li > ul { padding-top: 26px; }
/* sites under a region stack vertically along one connector line, so a region with 12 sites stays narrow */
.oc-tree ul.oc-col { flex-direction: column; align-items: stretch; padding: 14px 0 0 24px; }
.oc-tree ul.oc-col::before { left: 24px; top: 0; height: 100%; border-left: 2px solid var(--color-accent-200); }
.oc-tree ul.oc-col > li { padding: 10px 0 0 22px; align-items: stretch; }
.oc-tree ul.oc-col > li::before { display: block; top: 50%; left: 0; right: auto; width: 22px; height: 0; border: 0; border-top: 2px solid var(--color-accent-200); border-radius: 0; }
.oc-tree ul.oc-col > li::after { display: none; }
.oc-tree ul.oc-col > li:last-child { position: relative; }
.oc-tree ul.oc-col > li:last-child::after { display: block; content: ""; position: absolute; left: 0; top: calc(50% + 2px); bottom: 0; width: 2px; height: auto; border: 0; background: #fff; }
.oc-node { background: #fff; border: 1px solid var(--color-divider); border-radius: 10px; padding: 10px 12px; min-width: 200px; max-width: 280px; text-align: left; box-shadow: var(--plec-shadow); font-size: 13px; }
.oc-company { background: var(--color-accent); color: #fff; border-color: var(--color-accent); text-align: center; min-width: 240px; }
.oc-company .kicker { color: rgba(255,255,255,.7); }
.oc-region { background: var(--color-accent-100); border-color: var(--color-accent-200); text-align: center; min-width: 170px; }
.oc-hq { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-100); }
.oc-head { display: flex; align-items: center; gap: 6px; }
.oc-title { font-family: var(--font-heading); font-size: 15px; line-height: 1.2; margin-top: 2px; }
.oc-meta { font-size: 11px; color: var(--plec-muted); margin: 4px 0 8px; line-height: 1.4; }
.oc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--color-divider); padding-top: 8px; }
.oc-lists .kicker { margin-bottom: 3px; }
.oc-item { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 0; }
.oc-x { border: 0; background: transparent; cursor: pointer; color: var(--plec-muted); font-size: 10px; padding: 0 2px; opacity: 0; }
.oc-item:hover .oc-x { opacity: 1; }

/* ================================================================== E-QMS document dossier */
.doc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; margin: 10px 0 8px; font-size: 14px; }
.doc-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.doc-status-tile { border: 1px solid var(--color-accent); border-radius: 4px; padding: 10px 12px; background: #fff; }
.doc-status-tile.here { background: var(--color-accent-100); }
.doc-status-tile.done { border-color: var(--color-accent-200); }
.doc-status-name { font-family: var(--font-heading); font-size: 17px; margin-top: 2px; }
.wf-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; border: 1px solid var(--color-divider); border-radius: 6px; padding: 12px 14px; background: #fff; }
.wf-row.active { border-color: var(--color-accent); background: var(--color-accent-100); }
.wf-row.refused { border-color: #f2c2c7; background: #fde8ea; }
.wf-num { width: 26px; height: 26px; border-radius: 4px; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.wf-row.done .wf-num { background: var(--color-accent-200); color: var(--color-accent); }
.wf-name { font-family: var(--font-heading); font-size: 16px; }
.wf-right { display: flex; align-items: center; gap: 10px; }
.wf-panel { flex-basis: 100%; border-top: 1px solid var(--color-divider); padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.chapters { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.chapter { display: flex; gap: 14px; }
.chapter-no { width: 22px; font-size: 12px; color: var(--plec-muted); padding-top: 4px; flex: none; }
.chapter-title { font-family: var(--font-heading); font-size: 17px; margin-bottom: 6px; }
.chapter-body { min-height: 0; padding: 12px 16px; box-shadow: none; border: 1px solid var(--color-divider); font-size: 14px; }
.scope-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.scope-pick .check { display: block; padding: 2px 0; font-size: 14px; }
.oc-region { cursor: pointer; user-select: none; }
.oc-region:hover { border-color: var(--color-accent); }
.oc-region.closed { border-style: dashed; }
.oc-fold { color: var(--color-accent); font-weight: 600; margin-left: 4px; }
.table.fmea td { padding: 4px 4px; vertical-align: middle; }
.table.fmea .input { padding: 6px 8px; font-size: 13px; min-width: 90px; }
.table.fmea input[type=number].input { min-width: 48px; width: 56px; padding: 6px 4px; text-align: center; }

/* Finance: the performance sheet is a dense grid you type straight into */
.table.sheet td { padding: 3px 5px; }
.table.sheet .input { padding: 5px 7px; font-size: 12.5px; width: 100%; min-width: 0; }
.table.sheet tr.weekend td { background: #fafbfc; }
.table.sheet tr.weekend td:first-child, .table.sheet tr.weekend td:nth-child(2) { color: var(--plec-muted); }
.table.sheet tr:hover td { background: var(--color-neutral-100); }
/* filter bars: selects keep their own width instead of stretching the row */
.row.filters { width: 100%; }
.row.filters > .input, .row.filters > select.input, .row.filters > .pw-wrap { width: auto; min-width: 150px; max-width: 230px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- contracts and offers
   A document on screen: two parties, what is in it, the standard terms, and where it is
   signed. The same shape the PDF prints, so what somebody agrees to is what they read.
   `.public-page` is the one layout used with no session at all - the offer link. */
.doc { display: flex; flex-direction: column; gap: 4px; }
.doc-head { display: flex; align-items: flex-start; gap: 12px; border-bottom: 2px solid var(--color-accent); padding-bottom: 10px; margin-bottom: 6px; }
.doc-head h3 { margin: 0; }
.doc-head .grow, .doc-head > div:first-child { flex: 1; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--color-accent-100); border: 1px solid var(--color-divider); border-radius: 8px; padding: 12px 14px; }
.doc-party-name { font-weight: 600; }
.doc-h { margin: 18px 0 6px; font-size: 14px; color: var(--color-accent); }
.doc-terms { columns: 1; font-size: 12.5px; line-height: 1.5; }
.doc-clause { break-inside: avoid; margin-bottom: 10px; }
.doc-clause b { display: block; margin-bottom: 2px; }
.doc-clause p { margin: 0 0 3px; color: inherit; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; border: 1px solid var(--color-divider); border-radius: 8px; padding: 12px 14px; }
.doc-bullet { padding-left: 12px; position: relative; }
.doc-bullet::before { content: "•"; position: absolute; left: 2px; color: var(--color-muted); }

/* read and sign: the signature block under the agreement */
.btn-lg { padding: 11px 20px; font-size: 15px; }
.sign-box { margin-top: 18px; border: 1px solid var(--color-accent); border-radius: 10px; padding: 16px 18px; background: var(--color-accent-100); display: flex; flex-direction: column; gap: 10px; }
.sign-box p { margin: 0; }
.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.public-page { max-width: 760px; margin: 40px auto; padding: 0 16px; }

/* A to-do item with a date that has passed. The left edge rather than the whole row: the row
   already carries a status tag, and two red things saying the same thing is one too many.
   `--color-accent-2` is the house red; there is no `--color-red`, and an undefined custom
   property makes the whole declaration invalid with nothing said anywhere. */
.todo-urgent { border-left: 3px solid var(--color-accent-2) !important; }