/* Plain, light and calm, in Escape Velocity's brand (18 October 2026). Body text 17px, nothing
   under 15px. Sentence case, no letter-spacing. Targets at least 44px. One accent element per
   screen. Works on a phone; tables open out on a wide screen.

   Two kinds of variable. The --ev-* ones are the brand's own tokens and never change: they draw
   the "Powered by Escape Velocity" line, the sign-in screen and the app's own pieces. The working
   ones below them (--main, --accent and so on) draw the screens, and a company's own colours
   replace four of them in the head of every page (core/look.js): --main, --main-ink, --main-hover
   and --accent. The money colours (green in, red out, blue result) are working colours and stay. */

:root {
  --ev-ink: #020612;
  --ev-slate: #4B5068;
  --ev-mist: #D5D9E6;
  --ev-haze: #ECEEF6;
  --ev-paper: #F6F7FB;
  --ev-violet: #772DF6;
  --ev-blue: #2C6DFC;
  --ev-silver: #E8E8EA;
  --ev-font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ink: #020612;
  --ink-soft: #4B5068;
  --paper: #F6F7FB;
  --card: #ffffff;
  --wash: #ECEEF6;
  --wash-deep: #E0E3EF;
  --line: #D5D9E6;
  --line-strong: #6F768E;
  --main: #020612;
  --main-ink: #F6F7FB;
  --main-hover: #2A2E38;
  --accent: #772DF6;
  --danger: #a3191c;
  --ok-wash: #e3f2e7;
  --ok-ink: #155c2f;
  --warn-wash: #fff3d6;
  --warn-ink: #6b4a00;
  --warn-line: #e0b24a;
  --alert-wash: #fbe6e6;
  --alert-ink: #7a1113;
  --result: #1b5fae;
  --result-wash: #e8f0fa;
  --focus: var(--accent);
  --target: 44px;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2 { font-family: var(--ev-font-display); font-weight: 600; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; }
.h-big { font-size: 32px; }
p { margin: 0 0 16px; }
a { color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.quiet, .hint { color: var(--ink-soft); font-size: 16px; }
.hint { margin: 0 0 8px; }
.lead { font-size: 19px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.neg { color: var(--danger); }
.muted { color: var(--ink-soft); }

/* ---- The bar at the top and the menu ---- */
.bar { background: var(--ev-ink); color: var(--ev-silver); }
.bar-light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.bar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  min-height: 60px; max-width: 1240px; margin: 0 auto;
  padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
  padding-top: max(6px, env(safe-area-inset-top));
}
.bar-brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); min-width: 0; color: inherit; text-decoration: none; }
a.bar-brand:hover { color: inherit; text-decoration: none; }
a.bar-brand:hover .bar-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bar-name { font-size: 19px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
/* A logo sized by its own shape (core/look.js, LOGO_BOXES): the size comes as width and height on
   the image; the built-in wordmark, which has none, keeps its 36 pixels. */
.bar-logo { display: block; max-width: min(60vw, 280px); object-fit: contain; }
.bar-logo:not([width]) { height: 36px; width: auto; }
.bar-logo[width] { height: auto; }
/* The hover frame: a ring in the highlight colour around the logo, with a little room. */
.bar-brand .bar-logo, .look-logo-box .bar-logo { box-sizing: content-box; padding: 5px; margin: -5px; border-radius: 12px; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
a.bar-brand:hover .bar-logo, a.bar-brand:focus-visible .bar-logo, .look-logo-box:hover .bar-logo { box-shadow: 0 0 0 2px var(--accent); background-color: rgba(255, 255, 255, 0.08); }
.bar-light a.bar-brand:hover .bar-logo, .bar-light a.bar-brand:focus-visible .bar-logo, .look-logo-box.on-light:hover .bar-logo { background-color: var(--wash); }
.bar-who { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
.bar-who form { margin: 0; }
.bar-person { display: inline-flex; align-items: center; min-height: var(--target); font-size: 16px; font-weight: 600; color: inherit; text-decoration: none; }
a.bar-person:hover { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
/* Powered by Escape Velocity: the brand's own mark and colours, whatever the company's scheme. */
/* The words are at the 15px floor, light, and bottom-justified so their baseline rests on the mark's
   bottom edge; the mark, at its own size, sits to the right of them. The words keep their place
   and the mark reaches into the space right of the bar's content, as far as the screen allows:
   where it would not fit, the group moves left by the least that fits it (the min() below). */
.powered { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex: 1 1 100%; min-height: 32px; padding-bottom: 2px; margin-right: calc(-1 * min(42px, 10px + max(0px, (100vw - 1240px) / 2))); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--ev-mist); white-space: nowrap; }
.bar-light .powered { color: var(--ev-slate); }
.powered img { display: block; height: 24px; width: auto; }
.nav { border-bottom: 1px solid var(--line); background: var(--paper); }
.nav-in { display: flex; max-width: 1240px; margin: 0 auto; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; min-height: var(--target); padding: 0 11px; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
/* The bar and the menu stay at the top while the page scrolls (T, 2026-10-18). On a phone, or a
   screen too short to spare the room, only the menu stays; the bar scrolls away with the page.
   --top-h (set by app.js) is how much stays, so a field reached by Tab is never hidden under it. */
.top { position: sticky; top: 0; z-index: 30; box-shadow: 0 8px 14px -12px rgba(2, 6, 18, 0.45); }
html { scroll-padding-top: calc(var(--top-h, 0px) + 12px); }
@media (max-width: 699px), (max-height: 560px) {
  .top { display: contents; }
  .nav { position: sticky; top: 0; z-index: 30; box-shadow: 0 8px 14px -12px rgba(2, 6, 18, 0.45); }
}
.count-pill { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--main); color: var(--main-ink); font-size: 15px; text-align: center; line-height: 1.5; }

/* ---- The page ---- */
.page { max-width: 1240px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.page:not(.page-wide) > * { max-width: 820px; }
.page > .narrow { max-width: 600px; }
.back { margin-bottom: 4px; font-size: 16px; }
.back a, .link-big { display: inline-flex; align-items: center; min-height: var(--target); }
.aside { margin-top: 24px; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.title-row h1 { margin: 0; }
.title-row .actions { margin: 0; }
.block { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--line); }
.block-first { margin-top: 20px; padding-top: 0; border-top: 0; }
.block .title-row { margin-bottom: 8px; }
.block .title-row h2 { margin: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: 6px 16px;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--wash); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-main { background: var(--main); border-color: var(--main); color: var(--main-ink); }
.btn-main:hover { background: var(--main-hover); border-color: var(--main-hover); color: var(--main-ink); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--alert-wash); color: var(--danger); }
.btn-quiet { border-color: var(--line); font-weight: 600; }
.btn-bar { background: transparent; border-color: currentColor; color: inherit; padding: 4px 12px; font-size: 16px; }
.bar .btn-bar:hover { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.bar-light .btn-bar:hover { background: var(--wash); border-color: var(--ink); color: var(--ink); }
.btn-small { padding: 4px 12px; font-size: 16px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.actions form { margin: 0; }
.link-danger { color: var(--danger); }

/* ---- Forms ---- */
.form { display: block; }
.form label, .filter label { display: block; font-weight: 700; margin: 14px 0 5px; }
.form > label:first-of-type, .form > .two > div > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"],
input[type="number"], input[type="date"], input[type="file"], select, textarea {
  display: block; width: 100%; min-height: var(--target); padding: 6px 12px;
  border: 2px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: inherit; font-size: 17px;
}
select { appearance: auto; }
/* Show password: a button at the right end of every password box (app.js). It looks 40 pixels
   tall inside the box's border and answers a touch over the full 44. */
.pw { position: relative; display: block; }
.pw input { padding-right: 86px; }
.pw-toggle { position: absolute; top: 2px; right: 2px; bottom: 2px; min-width: 72px; padding: 0 14px; border: 0; border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; background: linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px 60% no-repeat; background-color: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pw-toggle::after { content: ''; position: absolute; inset: -2px; }
.pw-toggle:hover { background-color: var(--wash); }
.pw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.page-dark .pw-toggle { color: var(--ev-ink); }
.page-dark .pw-toggle:hover { background-color: #EEF0F7; }
textarea { resize: vertical; line-height: 1.4; }
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="file"] { padding: 8px 12px; }
input[type="file"]::file-selector-button { min-height: 32px; margin-right: 12px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
input[type="date"] { -webkit-appearance: none; appearance: none; }
.input-short { max-width: 10em; }
.input-money { max-width: 11em; text-align: right; font-variant-numeric: tabular-nums; }
.input-date { max-width: 14em; }
.input-pct { max-width: 8em; }
.form .btn-main, .form-inline .btn { margin-top: 18px; }
/* Save and Cancel ride along the bottom of the screen on a long form (app.js makes the bar). */
.form-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 12px -8px rgba(2, 6, 18, 0.12); }
.form .form-bar .btn, .form .form-bar .btn-main { margin-top: 0; }
.form-inline .btn { margin-top: 12px; }
.two { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.three { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.choices { margin: 16px 0 4px; }
fieldset.choices legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.choice { display: flex !important; align-items: flex-start; gap: 12px; min-height: var(--target); padding: 10px 12px; margin: 0 0 8px !important; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--card); font-weight: 400 !important; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--wash); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.form label.choice-check { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.chip { display: inline-flex !important; align-items: center; min-height: var(--target); padding: 4px 14px; border: 2px solid var(--line-strong); border-radius: 22px; margin: 0 !important; background: var(--card); font-weight: 600 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip:has(input:checked) { border-color: var(--main); background: var(--main); color: var(--main-ink); }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.filter label { margin: 0 0 4px; font-size: 16px; }
.filter > div { flex: 1 1 160px; }
.filter select, .filter input { width: 100%; }
.filter .btn { flex: none; }
.find-row { display: flex; gap: 8px; }
.find-row input { flex: 1 1 auto; min-width: 0; }
.find-row .btn { flex: none; }
.prose { white-space: pre-line; }

/* Lines on a quote or an invoice: a card per line on a phone, a table on a wide screen. */
.lines { list-style: none; margin: 0 0 12px; padding: 0; }
.lines > li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; margin-bottom: 10px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); }
.lines .l-desc { grid-column: 1 / -1; }
.lines label { font-size: 15px; margin: 0 0 3px; font-weight: 600; color: var(--ink-soft); }
.lines .l-total { grid-column: 1 / -1; text-align: right; font-weight: 700; }
.lines .l-remove { grid-column: 1 / -1; text-align: right; }
.lines-head { display: none; }
.totals { margin: 12px 0 0 auto; max-width: 24em; }
.totals div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.totals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 19px; margin-top: 4px; padding-top: 8px; }
.pick-row { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0 16px; }
.pick-row select { flex: 1 1 auto; }

/* ---- Messages, tags ---- */
.alert, .notice { padding: 12px 16px; border-radius: var(--radius); border-left: 8px solid; font-weight: 600; }
.alert { background: var(--alert-wash); border-color: var(--danger); color: var(--alert-ink); }
.notice { background: var(--ok-wash); border-color: var(--ok-ink); color: var(--ok-ink); }
.notice.notice-warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.tag { display: inline-block; padding: 0 8px; border-radius: 6px; vertical-align: 1px; background: var(--wash); border: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.tag-ok { background: var(--ok-wash); border-color: #7fb98f; color: var(--ok-ink); }
.tag-warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.tag-bad { background: var(--alert-wash); border-color: #d99; color: var(--alert-ink); }
.tag-main { background: var(--wash); border-color: var(--line-strong); color: var(--ink); }

/* ---- Lists, facts, tables, cards ---- */
.rows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 2px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 8px; min-height: 56px; color: var(--ink); text-decoration: none; }
a.row:hover { background: var(--wash); color: var(--ink); }
.row-text { display: block; min-width: 0; flex: 1 1 240px; }
.row-main { display: block; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.row-sub { display: block; color: var(--ink-soft); font-size: 16px; overflow-wrap: anywhere; }
.row-end { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.row-end .row-sub { text-align: right; }
.row-off .row-main { font-weight: 400; color: var(--ink-soft); }
.facts { margin: 0 0 16px; }
.facts div { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 10em; color: var(--ink-soft); }
.facts dd { flex: 1 1 12em; margin: 0; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; margin: 0 0 20px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); max-width: 100%; }
.table { border-collapse: collapse; min-width: 100%; font-size: 16px; background: var(--card); }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { background: var(--wash); font-weight: 700; white-space: nowrap; }
.table th.num, .table td.num { text-align: right; }
.table tr:last-child td { border-bottom: 0; }
.table tr.total td, .table tr.total th { font-weight: 700; background: var(--wash); border-top: 2px solid var(--ink); }
.table tr.sub td { color: var(--ink-soft); }
.table tr.sub td:first-child { padding-left: 24px; }
.table td a { font-weight: 600; }
.table .cell-link { white-space: nowrap; }
.table-tight th, .table-tight td { padding: 5px 8px; white-space: nowrap; }
.table .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; }
.table th.sticky { background: var(--wash); }
.cards { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.card { padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.card h2 { font-size: 18px; margin-bottom: 4px; }
.card .big { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.card .sub { color: var(--ink-soft); font-size: 16px; }
.card p:last-child { margin-bottom: 0; }
.card-warn { border-color: var(--warn-line); background: var(--warn-wash); }
.card-main { border-color: var(--accent); }
/* A block that opens on its details: the whole block is the link. */
.path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; overflow-wrap: anywhere; }
.card-go { padding: 0; }
.card-go > a { display: block; height: 100%; padding: 16px; border-radius: 10px; color: inherit; text-decoration: none; }
.card-go > a:hover, .card-go > a:focus-visible { background: var(--wash); }
.card-go:hover, .card-go:focus-within { border-color: var(--accent); }
.card-go h2::after { content: ' ›'; color: var(--accent); }

/* ---- The pipeline board ---- */
.board { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 20px; }
.stage { padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--wash); min-width: 0; }
.stage h2 { font-size: 17px; display: flex; justify-content: space-between; gap: 8px; }
.stage h2 .count { font-weight: 400; color: var(--ink-soft); }
.stage ul { list-style: none; margin: 0; padding: 0; }
.deal { display: block; padding: 10px 12px; margin: 0 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.deal:hover { border-color: var(--line-strong); color: var(--ink); }
.deal .d-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.deal .d-sub { display: block; color: var(--ink-soft); font-size: 16px; }
.deal .d-due { color: var(--warn-ink); }
.stage-total { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 12px; margin-bottom: -2px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a .count { margin-left: 6px; color: var(--ink-soft); font-weight: 400; }
.tabs a:hover { background: var(--wash); }
.tabs a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }

/* ---- Home ---- */
.home-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 24px; }
.list-compact { list-style: none; margin: 0; padding: 0; }
.list-compact li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.list-compact li:last-child { border-bottom: 0; }
.list-compact a { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ---- Projections: sections that read as sections ---- */
.table-p tbody.p-section tr > * { border-bottom-color: var(--line); }
.table-p tr.p-head th { padding-top: 10px; background: var(--card); border-bottom: 2px solid var(--ink); font-size: 17px; }
.table-p tr.p-head td { background: var(--card); border-bottom: 2px solid var(--ink); }
.table-p .p-in tr.p-head th { color: var(--ok-ink); }
.table-p .p-out tr.p-head th { color: var(--alert-ink); }
.table-p tr.p-line td.sticky { padding-left: 22px; color: var(--ink); font-weight: 400; }
.table-p tr.p-total th, .table-p tr.p-total td { font-weight: 700; background: var(--wash); border-top: 1px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
.table-p tr.p-total th.sticky { background: var(--wash); }
.table-p tr.p-result th, .table-p tr.p-result td { font-weight: 700; font-size: 18px; background: var(--result-wash); border-top: 2px solid var(--result); border-bottom: 2px solid var(--result); }
.table-p tr.p-result th.sticky { background: var(--result-wash); }
.table-p tr.p-gap td { height: 18px; padding: 0; border: 0; background: var(--card); }
.table-p thead th.now { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.table-p td.p-sum { border-left: 1px solid var(--line); }
/* The same column widths in both tables, so the months line up. */
.table-p th.sticky, .table-p td.sticky { min-width: 12.5em; }
.table-p td.num, .table-p th.num { min-width: 5.6em; }

/* ---- Charts and downloads on reports ---- */
.actions-tight { gap: 6px; margin: 0; }
.narrow-form { max-width: 44em; }
.invite-made { margin: 0 0 24px; }
.downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.downloads-label { color: var(--ink-soft); font-size: 16px; font-weight: 600; }
.charts { display: grid; grid-template-columns: 1fr; gap: 16px 28px; margin: 8px 0 24px; }
.chart { margin: 0; }
.chart figcaption { margin: 0 0 6px; font-weight: 700; }
.chart-scroll { overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: inherit; }
@media (min-width: 1000px) { .charts-two { grid-template-columns: 1fr 1fr; } }

/* ---- Projections: figures that open on their records ---- */
.table a.fig { color: inherit; text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; }
.table a.fig:hover, .table a.fig:focus { color: var(--ink); text-decoration-style: solid; text-decoration-color: var(--accent); }
.big-figure { font-size: 28px; font-variant-numeric: tabular-nums; }

/* ---- Inbox ---- */
.drop { padding: 16px; border: 2px dashed var(--line-strong); border-radius: 12px; margin-bottom: 20px; background: var(--card); }
.drop textarea { margin-bottom: 8px; }
.photo { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.photo-small { max-width: 320px; }
.suggestion { padding: 12px 16px; border-radius: var(--radius); background: var(--wash); border-left: 8px solid var(--ink); margin-bottom: 16px; }
.drop.over, .file-drop.over { border-color: var(--accent); background: var(--wash); }
.file-drop { padding: 8px 12px 12px; margin: 0 -12px; border: 2px dashed transparent; border-radius: 12px; }
.file-drop.over { border-color: var(--accent); }
.drop-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 18, 0.55); pointer-events: none; }
.drop-overlay[hidden] { display: none; }
.drop-overlay p { max-width: 28em; padding: 24px 28px; margin: 0; border: 3px dashed var(--accent); border-radius: 16px; background: var(--card); font-size: 20px; font-weight: 700; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 50; width: max-content; max-width: calc(100% - 32px); margin: 0; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(2, 6, 18, 0.18); }
.drop-hint { margin: 0 0 8px; font-weight: 600; }
.card-read { margin-bottom: 20px; }
.reading { border-color: var(--line-strong); background: var(--wash); margin-bottom: 20px; }
.reading strong::after { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 8px; border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.needs-check { border-color: var(--warn-line) !important; background: var(--warn-wash) !important; }
label .tag { margin-left: 8px; }
.doc-frame { display: block; width: 100%; height: 75vh; min-height: 420px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.fold > summary { display: flex; align-items: center; gap: 8px; min-height: var(--target); cursor: pointer; font-weight: 700; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸'; color: var(--ink-soft); }
.fold[open] > summary::before { content: '▾'; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cards-wide { grid-template-columns: 1fr !important; }
.row-reading { color: var(--ink-soft); font-weight: 600; }

/* ---- History ---- */
.log { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.log li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.log-who { display: block; font-weight: 700; }
.log-what { display: block; overflow-wrap: anywhere; }
.log-meta { display: block; color: var(--ink-soft); font-size: 16px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; padding: 12px 14px; margin: 0 0 16px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--wash); overflow-wrap: anywhere; user-select: all; }
pre.code { white-space: pre-wrap; font-size: 15px; }

/* ---- Your company's look (Settings) ---- */
.look-sample { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0 20px; background: var(--card); }
.look-sample .bar { padding: 0; }
.look-sample .bar-in { min-height: 56px; padding: 6px 16px; }
.look-sample-body { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.look-sample-body .btn { margin: 0; }
.look-sample-body .sample-current { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 11px; font-weight: 600; font-size: 16px; border-bottom: 3px solid var(--accent); }
.look-logo-box { display: flex; align-items: center; min-height: 72px; padding: 16px; border-radius: var(--radius); margin: 0 0 8px; }
.look-logo-box.on-dark { background: var(--ev-ink); }
.look-logo-box.on-light { background: var(--paper); border: 1px solid var(--line); }
.look-logo-box img:not(.bar-logo) { display: block; height: 36px; width: auto; max-width: 100%; }
.look-logo-box.on-dark .bar-name { color: var(--ev-silver); }
.look-logo-box.on-light .bar-name { color: var(--ink); }
.bar-brand .bar-logo.bar-logo-round, .look-logo-box .bar-logo.bar-logo-round { border-radius: 50%; }
/* The logo's framing: drag in the frame, zoom with the slider; the frame is the logo's own shape, a square or a circle. */
.logo-framing { margin: 20px 0 8px; }
.logo-framing-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; margin: 0 0 8px; }
.logo-frame { --ratio: 1; position: relative; flex: none; width: min(100%, 360px, calc(220px * var(--ratio))); aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--radius); cursor: grab; touch-action: none; }
.logo-frame:active { cursor: grabbing; }
.logo-frame.on-dark { background: var(--ev-ink); }
.logo-frame.on-light { background: var(--paper); outline: 1px solid var(--line-strong); }
.logo-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.logo-frame[data-shape="circle"] { border-radius: 50%; }
.logo-frame img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.logo-framing-controls { flex: 1; min-width: 240px; }
.logo-framing-controls input[type="range"] { display: block; width: 100%; max-width: 320px; min-height: var(--target); margin: 0 0 12px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
fieldset.choices-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
fieldset.choices-inline .choice { margin: 0 !important; align-items: center; }
.colour-row { display: flex; gap: 10px; align-items: stretch; }
.colour-row input[type="text"] { max-width: 10em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.colour-row input[type="color"] { width: 64px; min-height: var(--target); padding: 4px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.contrast { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.contrast strong { color: var(--ink); }
.contrast-bad, .contrast-bad strong { color: var(--danger); }

/* ---- Dark screens: sign in and an invite link, on Night with the brand's own tokens ---- */
.page-dark { background: var(--ev-ink); color: var(--ev-silver); }
.page-dark .bar { border-bottom: 0; }
.page-dark .page { min-height: calc(100vh - 72px); }
.page-dark .page > .narrow { margin: 20px auto 0; max-width: 460px; }
.page-dark h1, .page-dark h2 { color: var(--ev-paper); }
.page-dark .form label { color: var(--ev-paper); }
.page-dark .quiet, .page-dark .hint { color: var(--ev-mist); }
.page-dark a { color: var(--ev-silver); text-decoration-color: var(--ev-blue); }
.page-dark a:hover { color: var(--ev-paper); text-decoration-color: var(--ev-paper); }
.page-dark input[type="text"], .page-dark input[type="email"], .page-dark input[type="password"] { background: #fff; border-color: var(--ev-mist); color: var(--ev-ink); }
.page-dark :focus-visible { outline-color: var(--ev-blue); }
.page-dark .btn-main { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.page-dark .btn-main:hover { background: #fff; border-color: #fff; color: var(--ev-ink); }
.page-dark .form-bar { background: var(--ev-ink); border-top-color: #1C2238; box-shadow: none; }

/* ---- Wider screens ---- */
@media (min-width: 700px) {
  h1 { font-size: 30px; }
  .page { padding-top: 28px; }
  .two { grid-template-columns: 1fr 1fr; }
  .three { grid-template-columns: 1fr 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .log-wide li { display: grid; grid-template-columns: 11em 1fr; column-gap: 20px; }
  .log-wide .log-who { grid-row: span 2; }
  .board { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .powered { flex: 0 0 auto; margin-left: 20px; margin-right: calc(-1 * min(50px, 10px + max(0px, (100vw - 1240px) / 2))); padding-bottom: 0; }
}
@media (min-width: 1000px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
  .home-grid { grid-template-columns: 1fr 1fr 1fr; }
  .board { grid-template-columns: repeat(5, 1fr); }
  .lines-head, .lines > li { display: grid; grid-template-columns: minmax(12em, 3fr) 6em 7em 8em 7em 8em 3em; gap: 0 8px; align-items: center; }
  .lines-head { padding: 0 12px 6px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
  .lines > li { padding: 8px 12px; margin-bottom: 6px; }
  .lines .l-desc, .lines .l-total, .lines .l-remove { grid-column: auto; }
  .lines label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lines .l-total { text-align: right; }
}
@media (min-width: 1000px) {
  .inbox-two { grid-template-columns: 3fr 2fr; }
  .inbox-one { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bar-logo { transition: none; } .btn:active { transform: none; } .reading strong::after { animation: none; } }
@media print {
  .bar, .nav, .actions, .back, .btn, .filter, .block form { display: none !important; }
  .top { position: static; box-shadow: none; }
  .page { max-width: none; padding: 0; }
  .table-scroll { border: 0; }
  body { font-size: 15px; background: #fff; }
}