/* The brand this deployment carries (BRAND_* settings, portal/brand.py): organization tokens, rewritten. */
:root { --bg:#FFFFFF; --ink:#1A1A1A; --card:#ffffff; --field:#ffffff; --muted:#C42A2A; --faint:#C42A2A; --fainter:#C42A2A; --line:#C42A2A; --rule:#C42A2A; --fill:#FFFFFF; --hover:#FFFFFF; --row-hover:#FFFFFF; --accent:#9E2222; --accent-ink:#ffffff; --link:#C42A2A; --verto:#C42A2A; --tint:#FFFFFF; --tint-ink:#1A1A1A; --on-fill:#ffffff; --rail-lift:rgba(26,26,26,.12); --shadow:0 16px 48px rgba(26,26,26,.24); --scrim:rgba(0,0,0,.62); --art-from:#C42A2A; --art-to:#9E2222; --art-glow:transparent; --art-0:#ffffff; --art-1:#C42A2A; --art-2:#9E2222; --art-3:#1A1A1A; --art-4:#9E2222; --art-5:#9E2222; --paper:#ffffff; --paper-ink:#1A1A1A; --paper-muted:#C42A2A; --paper-rule:#C42A2A; --paper-margin:#C42A2A; --paper-fleck:transparent; --paper-edge:#C42A2A; --paper-field:#ffffff; --paper-line:#C42A2A; --paper-shadow-1:rgba(26,26,26,.12); --paper-shadow-2:rgba(26,26,26,.16); --paper-shadow-3:rgba(26,26,26,.24); --envelope:#ffffff; --envelope-flap:#FFFFFF; --envelope-line:#C42A2A; --stamp:#ffffff; --chart-bg:#FFFFFF; --ok:#15803d; --ok-bg:#ffffff; --warn:#b45309; --warn-bg:#ffffff; --err:#b91c1c; --err-bg:#ffffff; --bad:#b91c1c; --paper-err:#b91c1c; --attention:#b45309; --attention-ring:#C42A2A; --chart-1:#9E2222; --chart-2:#C42A2A; --chart-3:#1A1A1A; --chart-4:#9E2222; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1A1A1A; --ink:#ffffff; --card:#C42A2A; --field:#1A1A1A; --muted:#ffffff; --faint:#ffffff; --fainter:#ffffff; --line:#ffffff; --rule:#ffffff; --fill:#C42A2A; --hover:#C42A2A; --row-hover:#C42A2A; --accent:#9E2222; --accent-ink:#ffffff; --link:#ffffff; --verto:#ffffff; --tint:#C42A2A; --tint-ink:#ffffff; --on-fill:#1A1A1A; --rail-lift:rgba(26,26,26,.12); --shadow:0 16px 48px rgba(26,26,26,.24); --scrim:rgba(0,0,0,.62); --art-from:#C42A2A; --art-to:#9E2222; --art-glow:transparent; --art-0:#C42A2A; --art-1:#C42A2A; --art-2:#9E2222; --art-3:#1A1A1A; --art-4:#9E2222; --art-5:#9E2222; --paper:#C42A2A; --paper-ink:#ffffff; --paper-muted:#ffffff; --paper-rule:#ffffff; --paper-margin:#ffffff; --paper-fleck:transparent; --paper-edge:#ffffff; --paper-field:#1A1A1A; --paper-line:#ffffff; --paper-shadow-1:rgba(26,26,26,.12); --paper-shadow-2:rgba(26,26,26,.16); --paper-shadow-3:rgba(26,26,26,.24); --envelope:#C42A2A; --envelope-flap:#1A1A1A; --envelope-line:#ffffff; --stamp:#C42A2A; --chart-bg:#1A1A1A; --ok:#ffffff; --ok-bg:#C42A2A; --warn:#ffffff; --warn-bg:#C42A2A; --err:#ffffff; --err-bg:#C42A2A; --bad:#ffffff; --paper-err:#ffffff; --attention:#ffffff; --attention-ring:#ffffff; --chart-1:#ffffff; --chart-2:#C42A2A; --chart-3:#ffffff; --chart-4:#ffffff; } }
:root[data-theme="dark"] { --bg:#1A1A1A; --ink:#ffffff; --card:#C42A2A; --field:#1A1A1A; --muted:#ffffff; --faint:#ffffff; --fainter:#ffffff; --line:#ffffff; --rule:#ffffff; --fill:#C42A2A; --hover:#C42A2A; --row-hover:#C42A2A; --accent:#9E2222; --accent-ink:#ffffff; --link:#ffffff; --verto:#ffffff; --tint:#C42A2A; --tint-ink:#ffffff; --on-fill:#1A1A1A; --rail-lift:rgba(26,26,26,.12); --shadow:0 16px 48px rgba(26,26,26,.24); --scrim:rgba(0,0,0,.62); --art-from:#C42A2A; --art-to:#9E2222; --art-glow:transparent; --art-0:#C42A2A; --art-1:#C42A2A; --art-2:#9E2222; --art-3:#1A1A1A; --art-4:#9E2222; --art-5:#9E2222; --paper:#C42A2A; --paper-ink:#ffffff; --paper-muted:#ffffff; --paper-rule:#ffffff; --paper-margin:#ffffff; --paper-fleck:transparent; --paper-edge:#ffffff; --paper-field:#1A1A1A; --paper-line:#ffffff; --paper-shadow-1:rgba(26,26,26,.12); --paper-shadow-2:rgba(26,26,26,.16); --paper-shadow-3:rgba(26,26,26,.24); --envelope:#C42A2A; --envelope-flap:#1A1A1A; --envelope-line:#ffffff; --stamp:#C42A2A; --chart-bg:#1A1A1A; --ok:#ffffff; --ok-bg:#C42A2A; --warn:#ffffff; --warn-bg:#C42A2A; --err:#ffffff; --err-bg:#C42A2A; --bad:#ffffff; --paper-err:#ffffff; --attention:#ffffff; --attention-ring:#ffffff; --chart-1:#ffffff; --chart-2:#C42A2A; --chart-3:#ffffff; --chart-4:#ffffff; }
:root {--sans:"Source Sans 3",system-ui,sans-serif;--heading:"Lora",Georgia,serif;}
h1,h2,h3,h4,h5,h6 {font-family:var(--heading); }
:root { --nav:#C42A2A; --nav-ink:#ffffff; --nav-hover:#1A1A1A; }
* { box-sizing:border-box; } html, body { margin:0; min-height:100%; }
body { font:16px/1.55 var(--sans, 'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif); color:var(--ink); background:var(--bg); }
/* LINKS ARE NEVER UNDERLINED (owner, 2026-09-26: "a link in 2026 shouldnt be underlined, it should be
   obvious"; BRAND.md §6). A link is the brand blue and weighted so it reads as one at rest; on hover it
   changes colour, it never grows a line. */
a { color:var(--link,var(--accent)); font-weight:500; transition:color .3s cubic-bezier(.16,1,.3,1); }
a:hover { color:var(--ink); }
a, a:link, a:visited, a:hover, a:focus, a:active, a * { text-decoration:none !important; }

/* THE SHELL (owner, 2026-09-23): wordmark far left, the day and time DEAD CENTRE, the three icons
   as a group just right of the clock, the cog far right.

   Three columns, and the centre one is centred against the PAGE, not against whatever is left over
   after the wordmark — which is what a flex row would give, and would put the clock off-centre by
   half the width of the wordmark. The outer columns are `1fr` each so they balance, and the icons
   ride at the left edge of the right-hand column so they sit beside the clock rather than drifting
   out to the cog. */
header.top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
             height:60px; padding:0 24px; background:transparent; column-gap:18px; }
header.top .clock { grid-column:2; margin:0; font:500 14px/1 var(--sans, 'IBM Plex Sans',system-ui,sans-serif); color:var(--muted);
                    white-space:nowrap; letter-spacing:.2px; }
/* The icons and the gear share ONE cell. They were two items placed in the same grid column, and
   a grid gives a second item in an occupied cell a new row — so on a desktop the gear sat on a
   line of its own beneath the icons. One tray, spread: icons at its left edge beside the clock,
   the gear at its right edge. */
header.top .tray { grid-column:3; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
header.top .quick { display:flex; align-items:center; gap:4px; }
/* Narrow: the clock is the first thing to go. A phone has one in its own status bar two
   centimetres above this one, and the icons are what the person came here to press. */
@media (max-width:560px) {
  header.top { grid-template-columns:auto 1fr auto; column-gap:8px; padding:0 14px; }
  header.top .clock { display:none; }
  header.top .tray { grid-column:2 / span 2; justify-content:flex-end; gap:4px; }
}
/* THE WORDMARK, AS NEXVERTO.COM SETS IT (owner, 2026-09-23). Not a logo, not a square, not a
   drawing of the name: `Nex` in the ink colour and `Verto` in the brand blue, 700, -.02em. The
   portal's own ink and accent tokens already hold those exact values on both surfaces, so this is
   the same mark, not a second one.

   IT IS ONE WORD (owner, 2026-09-23). This was `display:inline-flex` with `gap:6px`, left over
   from when a product name sat beside the name and wanted air between the two. With the product
   word gone, `Nex` and `<b>Verto</b>` became the only two flex items — and the gap put six pixels
   between them, so the header read "Nex Verto" on every page of the portal. A wordmark is text:
   it is set inline, and nothing that spaces children out is allowed near it. */
header.top .brand { display:inline; font:700 20px/1 var(--sans, 'IBM Plex Sans',system-ui,sans-serif);
                    letter-spacing:-.02em; color:var(--ink); }
/* NO LINE UNDER THE WORDMARK (owner, 2026-09-26). Since 2026-10-06 it is a link to Home, drawn as the plain wordmark: no line, no border. */
header.top .brand, header.top .brand b { text-decoration:none; border:0; }
/* THE WORDMARK'S COLOURS ARE NEXVERTO.COM'S (owner, 2026-09-26: "colors are off"). `Verto` is
   nexverto.com's `--primary-strong` on BOTH surfaces (site.css `.mark b`, BRAND.md §2), held here as
   `--verto`, the same on every surface. It used the portal's accent, which lifts on dark, so the dark
   header carried a second, lighter blue. */
header.top .brand b { color:var(--verto); font-weight:700; }
/* The light/dark toggle (templates/base.html): the button that switches AWAY from the surface on screen. */
header.top form.theme { margin:0 0 0 auto; display:flex; }
header.top form.theme button { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px;
                               background:none; color:var(--muted); cursor:pointer; padding:0; }
header.top form.theme button:hover { color:var(--ink); background:var(--hover); }
header.top form.theme .to-light { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.top form.theme .to-dark { display:none; }
  :root:not([data-theme="light"]) header.top form.theme .to-light { display:grid; }
}
:root[data-theme="dark"] header.top form.theme .to-dark { display:none; }
:root[data-theme="dark"] header.top form.theme .to-light { display:grid; }
header.top details { position:relative; }
header.top details summary { list-style:none; cursor:pointer; color:var(--muted); width:40px; height:40px; display:grid; place-items:center; border-radius:10px; }
header.top details summary::-webkit-details-marker { display:none; }
header.top details summary:hover, header.top details[open] summary { color:var(--ink); background:var(--hover); }
header.top details .menu { position:absolute; right:0; top:46px; min-width:260px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; z-index:20; }
header.top details .menu .who { padding:10px 12px 8px; font-size:13px; color:var(--ink); border-bottom:1px solid var(--line); margin-bottom:6px; word-break:break-all; }
header.top details .menu .who span { display:block; color:var(--muted); font-size:12px; }
header.top details .menu .group { padding:10px 12px 4px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
header.top details .menu a, header.top details .menu button.link { display:block; width:100%; text-align:left; padding:8px 12px; border-radius:8px; color:var(--ink); font:inherit; background:none; border:0; cursor:pointer; }
header.top details .menu a:hover, header.top details .menu button.link:hover { background:var(--fill); text-decoration:none; }
header.top details .menu a.active { color:var(--link,var(--accent)); font-weight:600; }
/* THE WAY OUT IS AT THE TOP OF THE COG (owner, 2026-09-23), so the rule sits under it rather than
   over it: it separates leaving from the four things you came in to do. */
header.top details .menu form { margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--line); }
header.top details .menu button.link.out { color:var(--muted); }
header.top details .menu button.link.out:hover { color:var(--ink); }
/* Not built yet: shown so a person can see the shape of what is coming, inert so it promises
   nothing (standing owner rule: if it does not work, it is not shown as though it does). */
header.top details .menu .soon { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; color:var(--faint); cursor:default; user-select:none; }
header.top details .menu .soon em { font-style:normal; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); background:var(--fill); border-radius:999px; padding:2px 7px; }


/* Settings is one screen (owner, 2026-09-23): a few fields on one card, one Save. The segmented
   control is three radios that read as one control, so a choice of three does not need three rows. */
form.set label { margin-top:18px; } form.set label:first-of-type { margin-top:0; }
.seg { display:flex; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg label { flex:1 1 0; margin:0; padding:10px 8px; text-align:center; font-size:14px; color:var(--muted);
  background:var(--card); cursor:pointer; border-left:1px solid var(--line); }
.seg label:first-child { border-left:0; }
.seg label.on { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.seg input { position:absolute; opacity:0; width:0; height:0; }
@media (max-width:600px) { .seg label { padding:12px 6px; font-size:13px; } }

/* the page: information, generous space */
main { max-width:880px; margin:8vh auto 48px; padding:0 24px; }
h1 { font-size:28px; font-weight:600; margin:0 0 8px; letter-spacing:-.2px; } h2 { font-size:15px; margin:28px 0 10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.eyebrow { margin:0 0 6px; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.welcome { margin-top:4vh; } .welcome .hint { margin-top:32px; }
/* HOME IS CENTRED ON THE WIDTH (owner, 2026-09-26): the greeting, the filters and the cards sit in the
   middle of the page, not against its left edge. What is inside a card or the message still reads left. */
.welcome { text-align:center; }
.welcome .motd, .welcome .door { text-align:left; }
.welcome .filters { justify-content:center; }
.welcome .doors { grid-template-columns:repeat(auto-fit, minmax(240px, 300px)); justify-content:center; }
.motd { margin-top:36px; padding:18px 22px; border-left:3px solid var(--accent); background:var(--card); border-radius:0 12px 12px 0; }
.motd p { margin:4px 0 0; font-size:17px; }
/* ----- THE TOOL CARDS (home) -----------------------------------------------------------------
   Built to docs/platform/BRAND.md §5: an 18px card, a lift on hover with the brand's easing, a
   visible focus ring, and a single entrance as the page arrives. Every colour is a token, so the
   card is correct in both themes without a second rule.

   The whole card is the target, not a word inside it: a person aims at a box, and a small "Go"
   link inside a large card makes most of the card a dead zone. The arrow moves on hover so the
   card says it is going somewhere without a sentence saying so. */
.doors { margin-top:36px; gap:16px; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); }
.door {
  position:relative; display:flex; flex-direction:column; margin:0; padding:0; overflow:hidden; border-radius:18px;
  color:var(--ink); background:var(--card); border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1),
             border-color .3s cubic-bezier(.16,1,.3,1);
}
/* THE ART (owner, 2026-09-26: "make the cards better ... we have the ability to make images"): a picture of
   the kind of work behind the card (portal/icons.py ART), on the brand's two surfaces with a soft light,
   the tool's icon set into its corner. Every fill is a token, so it is right in both themes. */
.door .door-art { position:relative; display:block; height:124px; overflow:hidden;
  background:radial-gradient(120% 90% at 85% 10%, var(--art-glow), transparent 60%),
             linear-gradient(160deg, var(--art-from), var(--art-to)); border-bottom:1px solid var(--line); }
.door .door-art svg { position:absolute; inset:0; width:100%; height:100%;
  transition:transform .6s cubic-bezier(.16,1,.3,1); }
.door .door-art .a0 { fill:var(--art-0); } .door .door-art .a1 { fill:var(--art-1); } .door .door-art .a2 { fill:var(--art-2); }
.door .door-art .a3 { fill:var(--art-3); } .door .door-art .a4 { fill:var(--art-4); }
.door .door-art .a5 { fill:none; stroke:var(--art-5); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.door .door-art path.a1[fill="none"] { fill:none; stroke:var(--art-0); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
a.door:hover .door-art svg { transform:scale(1.04) translateY(-2px); }
.door .door-art .door-icon { position:absolute; left:16px; bottom:14px; }
.door .door-art .door-icon { border:1px solid var(--line); }
.door .door-art.compact { height:84px; }
.door .door-body { display:flex; flex-direction:column; gap:6px; padding:16px 20px 18px; flex:1 1 auto; }
.door .door-desc { color:var(--muted); font-size:14px; line-height:1.45; }
.door .door-body .door-go { margin-top:auto; padding-top:8px; }
.door.soon .door-art { filter:grayscale(1); opacity:.55; }
.door .door-name { font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.3; }
/* The tool's icon, on a quiet tile in the brand blue. The tile colours with the card on hover, so
   the icon is the first thing that answers the pointer. */
.door .door-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  color:var(--link,var(--accent)); background:var(--card); box-shadow:var(--shadow);
  transition:background-color .35s cubic-bezier(.16,1,.3,1), color .35s cubic-bezier(.16,1,.3,1); }
a.door:hover .door-icon { background:var(--accent); color:var(--accent-ink); }
.door.soon .door-icon { color:var(--faint); background:var(--fill); }
.door .door-go { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--link,var(--accent)); }
.door .door-go .arrow { display:inline-block; transition:transform .35s cubic-bezier(.16,1,.3,1); }
a.door:hover { text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--link,var(--accent)); }
a.door:hover .door-go .arrow { transform:translateX(4px); }
a.door:active { transform:translateY(-1px); }
a.door:focus-visible { outline:2px solid var(--line); outline-offset:3px; }
/* A tool with nothing signed off: shown so the shape of the product is honest, inert so it
   promises nothing (standing owner rule). It does not lift: movement is a promise it can't keep. */
.door.soon { color:var(--faint); cursor:default; user-select:none; border-style:dashed; background:transparent; }
.door.soon .door-name { color:var(--faint); }
.door.soon.maintenance { border-style:solid; background:var(--fill); }
.door.soon.maintenance .maintenance-message { color:var(--muted); user-select:text; }
.door .tag { align-self:flex-start; font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); background:var(--fill); border-radius:999px; padding:3px 9px; font-weight:600; }

/* The filter chips. Pills, per BRAND.md §5; the chosen one fills in the brand blue. The radio
   itself is hidden from sight but not from the keyboard or a screen reader: the label is what is
   seen and clicked, the input is what is focused and announced. */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:32px 0 -12px; }
.filters input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.filters label { display:inline-flex; align-items:center; gap:8px; margin:0; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); font:500 14px/1 inherit; cursor:pointer;
  transition:color .3s cubic-bezier(.16,1,.3,1), background-color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1); }
.filters label:hover { color:var(--ink); border-color:var(--link,var(--accent)); }
.filters .n { font-size:12px; font-weight:600; color:var(--muted); background:var(--fill); border-radius:999px; padding:2px 7px; }
.filters input:checked + label { background:var(--accent); border-color:var(--link,var(--accent)); color:var(--accent-ink); }
.filters input:checked + label .n { background:var(--card); color:var(--ink); }
.filters input:focus-visible + label { outline:2px solid var(--line); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .filters label { transition:none; } }

/* One entrance, as the page arrives: each card rises into place a beat after the one before, so
   the grid reads as a set rather than appearing all at once. Capped at eight steps so a long list
   does not make the last card wait. Nothing moves for a person who has asked for less motion. */
@keyframes nv-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.doors .door { animation:nv-rise .5s cubic-bezier(.16,1,.3,1) both; }
.doors .door:nth-child(2) { animation-delay:.04s; } .doors .door:nth-child(3) { animation-delay:.08s; }
.doors .door:nth-child(4) { animation-delay:.12s; } .doors .door:nth-child(5) { animation-delay:.16s; }
.doors .door:nth-child(6) { animation-delay:.20s; } .doors .door:nth-child(7) { animation-delay:.24s; }
.doors .door:nth-child(n+8) { animation-delay:.28s; }
@media (prefers-reduced-motion: reduce) {
  .doors .door, a.door, a.door .door-go .arrow { animation:none; transition:none; }
  a.door:hover, a.door:active { transform:none; }
}
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
dl.facts { display:grid; grid-template-columns:minmax(140px, 200px) 1fr; gap:8px 20px; margin:0; }
dl.facts dt { color:var(--muted); font-size:13px; padding-top:2px; } dl.facts dd { margin:0; word-break:break-word; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top; font-size:15px; }
th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input:not([type]), input[type=search], input[type=tel], input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], input[type=datetime-local], input[type=date], input[type=file], select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--field); color:var(--ink); }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row > * { flex:1; } .row > .fixed { flex:0 0 auto; }
button, .btn { display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--link,var(--accent)); color:var(--accent-ink); font-weight:600; }
button.small, .btn.small { padding:4px 9px; font-size:13px; } button.link { border:0; background:none; color:var(--link,var(--accent)); padding:0; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; background:var(--tint); color:var(--tint-ink); } .badge.ok { background:var(--ok-bg); color:var(--ok); } .badge.off { background:var(--fill); color:var(--muted); } .badge.bad { background:var(--err-bg); color:var(--err); }
.flash { padding:10px 14px; border-radius:9px; margin-bottom:12px; background:var(--ok-bg); color:var(--ok); word-break:break-all; } .flash.err { background:var(--err-bg); color:var(--err); }
.note { white-space:pre-wrap; overflow-wrap:anywhere; }
.muted { color:var(--muted); font-size:14px; } pre { background:var(--fill); padding:12px; border-radius:9px; overflow:auto; font-size:13px; }


/* A tool served inside the portal. The rail is the tool's own sections; the frame is the tool. */
.tool { margin-top:0; }
.tool .rail { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 22px; padding:6px; background:var(--fill); border:1px solid var(--line); border-radius:12px; }
.tool .rail a, .tool .rail .soon, .tool .rail .off { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; font-size:14px; font-weight:600; border-radius:8px; text-decoration:none; }
.tool .rail a { color:var(--muted); }
.tool .rail a:hover { color:var(--ink); background:var(--card); text-decoration:none; }
.tool .rail a.active { color:var(--ink); background:var(--card); box-shadow:0 1px 2px var(--rail-lift), 0 0 0 1px var(--line); }
.tool .rail .hidden-tag { font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--fill); border-radius:999px; padding:1px 7px; }
/* Not ready: present so the shape of the product is honest, inert so it promises nothing. */
.tool .rail .soon { color:var(--faint); cursor:default; user-select:none; }
.tool .rail .soon em { font-style:normal; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); background:var(--fill); border-radius:999px; padding:2px 7px; }
@media (max-width:600px) {
  .tool .rail { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tool .rail a, .tool .rail .soon, .tool .rail .off { white-space:nowrap; }
}
}

/* A phone is the common case, not the exception. Everything below keeps the page to one
   column, keeps every target thumb-sized, and never lets the body scroll sideways. */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:600px) {
  html, body { overflow-x:hidden; }
  header.top { padding:0 16px; height:56px; }
  main { padding:0 16px; margin:24px auto 40px; }
  .welcome { margin-top:0; }
  h1 { font-size:23px; line-height:1.25; }
  .muted, .door p { font-size:15px; }

  /* the gear menu is a sheet, not a dropdown hanging off the edge */
  header.top details .menu { position:fixed; left:12px; right:12px; top:60px; min-width:0; width:auto;
                       max-height:calc(100vh - 76px); overflow-y:auto; }
  header.top details summary { width:44px; height:44px; }
  header.top details .menu a, header.top details .menu button.link { padding:12px; }

  /* one column, and cards that do not crowd the edge */
  .grid { grid-template-columns:1fr; gap:12px; }
  .card { padding:16px; }
  .motd { margin-top:24px; padding:14px 16px; }
  .motd p { font-size:16px; }
  .doors { margin-top:24px; } .welcome .hint { margin-top:24px; }

  /* stacked fields, and inputs at 16px so iOS does not zoom the page on focus */
  dl.facts { grid-template-columns:1fr; gap:2px 0; }
  dl.facts dd { margin-bottom:10px; }
  .row { flex-direction:column; } .row > * { flex:1 1 auto; width:100%; }
  input:not([type]), input[type=search], input[type=tel], input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], input[type=datetime-local], select, textarea { font-size:16px; padding:11px 12px; }
  button, .btn { padding:12px 16px; min-height:44px; }
  button.small, .btn.small { padding:7px 12px; min-height:0; }

  /* a wide table scrolls in its own box; the page never does */
  table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  th, td { padding:10px 8px; }
  pre { font-size:12px; }
  .flash { word-break:break-word; }
}

/* Quick reference (owner direction 2026-09-22): an icon and a number. It is the size of the gear
   beside it and never grows into the page; the screen it opens carries the detail. A badge with no
   working source is greyed and inert, so nothing non-functional reads as functional. */
header.top .quick .badge { position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:var(--muted);
  padding:0; background:transparent; transition:color .3s cubic-bezier(.16,1,.3,1), background-color .3s cubic-bezier(.16,1,.3,1); }
header.top .quick a.badge.active { color:var(--link,var(--accent)); }
header.top .quick a.badge:focus-visible { outline:2px solid var(--line); outline-offset:2px; }
header.top .quick a.badge:hover { color:var(--ink); background:var(--hover); text-decoration:none; }
header.top .quick a.badge.has { color:var(--ink); }
header.top .quick .badge .count { position:absolute; top:4px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:600; line-height:16px; text-align:center; box-sizing:border-box; }
header.top .quick .badge.soon { color:var(--faint); cursor:default; }
@media (max-width:600px) { header.top .quick .badge { width:44px; height:44px; } }

/* ONE PAGE, ONE JOB (owner direction 2026-09-22). A collection is a list, never a wide table:
   what it is, the rest quiet underneath, the action at the end. Reads the same on a phone as on
   a desktop because nothing has to fit side by side. */
ul.rows { list-style:none; margin:0 0 16px; padding:0; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
ul.rows > li { display:flex; align-items:center; gap:14px; padding:13px 18px; border-top:1px solid var(--line); }
ul.rows > li:first-child { border-top:0; }
ul.rows .what { flex:1 1 auto; min-width:0; }
ul.rows .what b { display:block; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
ul.rows .what .sub { display:block; margin-top:2px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
ul.rows .act { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
ul.rows .act form { display:flex; align-items:center; gap:8px; margin:0; }
ul.rows > li.empty { color:var(--muted); font-size:14px; }

/* The chooser: the list of jobs a section can do. Each row is a page. */
ul.rows > li.pick { padding:0; }
ul.rows > li.pick > a { display:flex; align-items:center; gap:14px; width:100%; padding:14px 18px; color:var(--ink); }
ul.rows > li.pick > a:hover { background:var(--row-hover); text-decoration:none; }
ul.rows > li.pick > a .what b { color:var(--ink); }
ul.rows > li.pick > a .go { flex:0 0 auto; color:var(--link,var(--accent)); font-weight:600; }
/* Not ready: shown so the shape of the product is honest, inert so it promises nothing. */
ul.rows > li.pick.soon { padding:14px 18px; color:var(--faint); cursor:default; user-select:none; }
ul.rows > li.pick.soon .what b { color:var(--faint); } ul.rows > li.pick.soon .what .sub { color:var(--fainter); }

/* Back to the section a page belongs to. One line, above the title, never a breadcrumb trail. */
.back { margin:0 0 14px; font-size:14px; }

/* A choice between a few named options. `label` on its own is the small grey caption above a
   field, so a radio row states its own shape: the whole row is the target, which is the only way
   a radio is usable with a thumb. The form's one button sits under it. */
label.choice { display:flex; align-items:center; gap:12px; margin:0; padding:12px 2px; font-size:16px; color:var(--ink); cursor:pointer; border-top:1px solid var(--line); }
label.choice:first-of-type { border-top:0; }
label.choice input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--link,var(--accent)); }
form p.act { margin:18px 0 0; }
@media (max-width:600px) { label.choice { padding:14px 2px; } form p.act button { width:100%; } }
@media (max-width:600px) {
  ul.rows > li { flex-wrap:wrap; padding:12px 14px; }
  ul.rows > li.pick > a { padding:14px; }
  ul.rows .act { width:100%; }
  ul.rows .act form { width:100%; } ul.rows .act button { flex:1 1 auto; }
}

/* The content editor's screens (templates/cms.html): the forms the CMS's writes need, drawn by the
   portal. A label sits on its own line over its field; a checkbox sits beside its words. */
.editor form.set label { display:block; margin:14px 0 4px; font-size:14px; color:var(--muted); }
.editor form.set label.check { display:flex; gap:8px; align-items:center; color:var(--ink); }
.editor form.set label.check input { width:auto; }
.editor .acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:14px 0 0; }
.editor .acts form { display:inline; margin:0; }
@media (min-width:601px) { .editor ul.rows .act form { display:inline; margin:0; } }
.editor ul.rows div.what { flex:1 1 auto; min-width:0; }
.editor details > summary { cursor:pointer; color:var(--link,var(--accent)); margin-top:6px; }
.editor details.card > summary { margin:0; }
.editor ul.rows .what details { margin-top:6px; }
.editor h2 { margin-top:28px; }

/* PROFILE (owner, 2026-09-26): three fields, each a value with its edit pencil (a <details>, no script),
   then Access: a card per domain, the suites held there, and each suite's tools. */
.card.profile { padding:6px 20px; }
.pfield { display:grid; grid-template-columns:minmax(110px, 160px) 1fr; align-items:start; gap:12px; padding:10px 0; }
.pfield .plabel { color:var(--muted); font-size:13px; padding-top:3px; }
.pedit summary { list-style:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer; color:var(--ink); }
.pedit summary::-webkit-details-marker { display:none; }
.pedit summary svg { color:var(--muted); }
.pedit summary:hover svg, .pedit[open] summary svg { color:var(--link,var(--accent)); }
.pedit .pvalue.unset { color:var(--muted); }
.pedit form { display:flex; gap:8px; margin-top:10px; }
.pedit form input { flex:1 1 auto; min-width:0; }
@media (max-width:600px) { .pfield { grid-template-columns:1fr; gap:4px; } }
.card.access { margin-bottom:12px; }
.access .domain { margin:0 0 6px; font-weight:600; }
.access .suites { margin:0; padding-left:20px; }
.access .suites > li { margin:4px 0; }
.access .stools { margin:4px 0 0; padding-left:20px; color:var(--muted); }
.access .none { margin:0; color:var(--muted); }

/* THE CMS SUITE (owner, 2026-09-26, direction 83): where you are, the domains or tools as cards, the suite's
   own screens as quiet links under the tools, and the Calendar tool's month. */
.editor .crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); margin:0 0 14px; }
.editor .crumbs .sep { color:var(--faint); }
.editor .doors.picks { margin-top:20px; }
.editor .door .door-desc { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.editor .suite-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:28px; font-size:14px; }
.editor .suite-links a { color:var(--muted); }
.editor .calhead { display:flex; align-items:center; gap:12px; margin:8px 0 12px; }
.editor .calhead h2 { margin:0; }
.editor .calhead .btn.primary { margin-left:auto; }
table.cal { table-layout:fixed; }
table.cal th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
table.cal td { height:92px; vertical-align:top; border:1px solid var(--line); padding:6px; font-size:13px; }
table.cal td.blank { background:var(--fill); }
table.cal td.today .n { color:var(--link,var(--accent)); font-weight:700; }
table.cal .n { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
table.cal a.ev { display:block; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:600px) { table.cal td { height:64px; padding:3px; font-size:11px; } }

/* THE NEW CMS PREVIEW: a post as the site shows it. The placement classes are the site contract
   (tools/cms/docs/SITE_INTEGRATION.md), so an image sits and scales here exactly as it will there. */
.preview h1{margin:0 0 8px}
.preview .cover{display:block;width:100%;height:auto;border-radius:8px;margin:12px 0}
.preview .lede{font-size:1.1em}
.preview .content-body img{max-width:100%;height:auto}
.content-body img.content-w25{width:25%}.content-body img.content-w50{width:50%}.content-body img.content-w75{width:75%}.content-body img.content-w100{width:100%}
.content-body img.content-left{float:left;margin:0 16px 12px 0}.content-body img.content-right{float:right;margin:0 0 12px 16px}.content-body img.content-center{display:block;margin:12px auto}
.content-body::after{content:"";display:block;clear:both}

/* Unsaved work offered back in the new CMS (static/cms-session.js keeps it while the person types). */
.card.unsaved{border-left:3px solid var(--accent)}
.card.unsaved .act{display:flex;gap:8px;align-items:center}
.kept-note{margin:8px 0 0;font-size:.9em}
/* The new CMS's pictures in a list: the gallery and the posters show what they are. */
ul.rows li.with-thumb{display:flex;gap:12px;align-items:flex-start}
ul.rows li.with-thumb .thumb{width:72px;height:72px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:var(--art-from)}
ul.rows li.with-thumb .what{flex:1 1 auto;min-width:0}

/* THE TESTING NOTICE (owner, 2026-09-28, issue #55; templates/base.html, portal/notice.py). A suite still in
   testing opens under this until "I understand". No script: a scrim over the page, the dialog drawn open on it,
   and the page behind held still. Tokens only, so it is right on both surfaces. */
body:has(.notice-scrim) { overflow:hidden; }
.notice-scrim { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px;
                background:var(--scrim); overflow:auto; }
dialog.notice { position:static; margin:0; max-width:560px; width:100%; max-height:calc(100vh - 32px); overflow:auto;
                padding:26px 28px 24px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink);
                box-shadow:var(--shadow); }
dialog.notice h2 { margin:0 0 8px; font-size:20px; line-height:1.3; color:var(--ink); text-transform:none; letter-spacing:-.1px; font-weight:600; }
dialog.notice > p { margin:0 0 12px; color:var(--muted); font-size:15px; }
dialog.notice h3 { margin:16px 0 6px; font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:600; }
dialog.notice ul { margin:0; padding-left:20px; } dialog.notice li { margin:0 0 6px; font-size:15px; }
dialog.notice > p:last-of-type { margin-top:16px; }
dialog.notice form { margin:18px 0 0; display:flex; justify-content:flex-end; }
@media (max-width:600px) { dialog.notice { padding:20px 18px; } dialog.notice form button { width:100%; } }
dialog.notice button:focus-visible { outline:2px solid var(--line); outline-offset:3px; }
/* THE GUIDED TOUR (static/tour.js; owner, 2026-09-28, issue #57). The spotlight is a clear box over the element
   with the page dimmed around it (its shadow is the scrim); the caption is a card beside it, docked along the
   bottom on a phone. Nothing here takes a click from the page: only the card does. Tokens only, so it is right
   on both surfaces; nothing moves for a person who asked for less motion. */
.nv-tour { position:fixed; inset:0; z-index:60; pointer-events:none; }
.nv-tour-hole { position:fixed; border-radius:12px; box-shadow:0 0 0 200vmax var(--scrim); outline:2px solid var(--line); outline-offset:2px;
                transition:top .35s cubic-bezier(.16,1,.3,1), left .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1); }
.nv-tour-card { position:fixed; width:min(360px, calc(100vw - 32px)); background:var(--card); color:var(--ink); border:1px solid var(--line);
                border-radius:14px; box-shadow:var(--shadow); padding:18px 20px 14px; pointer-events:auto; }
.nv-tour-count { margin:0 0 8px; font:600 12px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--link,var(--accent)); }
.nv-tour-card h2 { margin:0 0 6px; font:600 18px/1.3 var(--sans, 'IBM Plex Sans',system-ui,sans-serif); color:var(--ink); text-transform:none; letter-spacing:-.012em; }
.nv-tour-card #nv-tour-text { margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--ink); }
.nv-tour-acts { display:flex; gap:8px; align-items:center; }
.nv-tour-acts button[disabled] { opacity:.45; cursor:default; }
.nv-tour-acts .nv-tour-close { margin-left:auto; border:0; background:none; color:var(--muted); padding:9px 4px; }
.nv-tour-acts .nv-tour-close:hover { color:var(--ink); }
.nv-tour-card button:focus-visible { outline:2px solid var(--line); outline-offset:3px; }
.nv-tour-keys { margin:10px 0 0; font-size:12px; color:var(--muted); }
@media (max-width:560px) { .nv-tour-card { width:auto; } .nv-tour-keys { display:none; } }
.nv-tour-still .nv-tour-hole { transition:none; }
@media (prefers-reduced-motion: reduce) { .nv-tour-hole { transition:none; } }
/* The tours a person may start, on the tour page: drawn hidden, shown by the script that runs them. */
.tour-offer[hidden] { display:none; }
.tour-offer { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
/* ----- MESSAGES (portal/messages.py, templates/message.html; owner, 2026-09-28) ---------------------------------
   The list of messages: an unread message carries a dot in the brand blue and a heavier title; a read one is quiet.
   One message is a letter: a header on the brand's two surfaces with a soft light (the same art ground as the tool
   cards), then the body at a reading width, pictures framed as the cards are, and the address for feedback at the
   foot. Every colour is a token, so the letter is right in both themes. */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
ul.rows.letters { margin-bottom:28px; }
ul.rows.letters > li.pick > a { align-items:flex-start; }
ul.rows.letters .dot { flex:0 0 auto; width:9px; height:9px; margin-top:7px; border-radius:50%; background:transparent; }
ul.rows.letters li.unread .dot { background:var(--accent); box-shadow:0 0 0 4px var(--tint); }
ul.rows.letters .kicker { display:block; margin-bottom:3px; font:600 11px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--link,var(--accent)); }
ul.rows.letters li:not(.unread) .what b { font-weight:500; }
ul.rows.letters li:not(.unread) .kicker { color:var(--muted); }
ul.rows.letters .go { font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; }

.letter { max-width:760px; margin:0; background:var(--card); border:1px solid var(--line); border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow); animation:nv-rise .5s cubic-bezier(.16,1,.3,1) both; }
.letter-head { padding:clamp(26px,5vw,48px) clamp(22px,5vw,52px) clamp(22px,4vw,36px);
  background:radial-gradient(110% 120% at 92% 0%, var(--art-glow), transparent 58%),
             linear-gradient(165deg, var(--art-from), var(--art-to));
  border-bottom:1px solid var(--line); }
.letter-head .kicker { margin:0 0 14px; font:600 12px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--link,var(--accent)); }
.letter-head h1 { margin:0; font-size:clamp(30px,4.6vw,44px); line-height:1.08; letter-spacing:-.03em; font-weight:600; }
.letter-head .lede { margin:14px 0 0; font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--muted); max-width:36em; }
.letter-head .dated { margin:18px 0 0; font-size:13px; color:var(--muted); }
.letter-body { padding:clamp(20px,4vw,36px) clamp(22px,5vw,52px) 8px; font-size:17px; line-height:1.65; }
.letter-body > p { margin:0 0 16px; }
.letter-body h2 { margin:34px 0 10px; font-size:20px; line-height:1.3; letter-spacing:-.012em; text-transform:none;
  color:var(--ink); font-weight:600; }
.letter-body h2:first-child { margin-top:8px; }
.letter-body .callout { margin:6px 0 20px; padding:16px 20px; border-radius:0 14px 14px 0; border-left:3px solid var(--accent);
  background:var(--tint); color:var(--ink); }
.letter-body figure.shot { margin:22px 0 26px; }
.letter-body figure.shot img { display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--fill); }
.letter-body figure.shot figcaption { margin-top:10px; font-size:14px; color:var(--muted); text-align:center; }
.letter-body ul.bullets { margin:0 0 18px; padding-left:22px; }
.letter-body ul.bullets li { margin:6px 0; }
.letter-body ol.steps { list-style:none; counter-reset:step; margin:4px 0 20px; padding:0; }
.letter-body ol.steps li { counter-increment:step; position:relative; padding:0 0 14px 46px; }
.letter-body ol.steps li::before { content:counter(step); position:absolute; left:0; top:1px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%; font:600 14px/1 var(--sans, 'IBM Plex Sans',system-ui,sans-serif);
  color:var(--accent-ink); background:var(--accent); }
.letter-body ol.steps li b, .letter-body .feature b, .letter-body .menu-text b { display:block; font-weight:600; color:var(--ink); }
.letter-body ol.steps li span { display:block; color:var(--muted); font-size:16px; }
.letter-body .features { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin:8px 0 22px; }
.letter-body .feature { padding:16px 18px; border-radius:16px; background:var(--fill); border:1px solid var(--line); }
.letter-body .feature span { display:block; margin-top:4px; font-size:15px; line-height:1.5; color:var(--muted); }
.letter-body .menu-board { display:grid; gap:18px; margin:6px 0 24px; }
.letter-body .table-wrap { overflow-x:auto; margin:8px 0 22px; border:1px solid var(--line); border-radius:16px; }
.letter-body .copy-block { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:8px 0 22px; }
.letter-body .copy-done { font-size:14px; color:var(--muted); }
.letter-body .copy-source { width:100%; min-height:160px; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.letter-body table.sheet { width:100%; border-collapse:collapse; font-size:15px; }
.letter-body table.sheet th, .letter-body table.sheet td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.letter-body table.sheet th { font-weight:600; color:var(--ink); background:var(--fill); }
.letter-body table.sheet tr:last-child td { border-bottom:0; }
.letter-body table.sheet td { color:var(--ink); }
.letter-body .menu-part { padding:22px 22px 8px; border-radius:18px; border:1px solid var(--line); background:var(--fill); }
.letter-body .menu-part.now { background:radial-gradient(120% 140% at 100% 0%, var(--art-glow), transparent 60%), var(--card);
  border-color:var(--link,var(--accent)); }
.letter-body .menu-part.soon { border-style:dashed; }
.letter-body .menu-head { margin:0 0 14px; }
.letter-body .pill { display:inline-block; padding:7px 14px; border-radius:999px; font:600 12px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.14em; text-transform:uppercase; }
.letter-body .pill.now { background:var(--accent); color:var(--accent-ink); }
.letter-body .pill.soon { background:var(--card); color:var(--muted); border:1px dashed var(--line); }
.letter-body .menu-part ul { list-style:none; margin:0; padding:0; }
.letter-body .menu-part li { display:flex; gap:14px; align-items:flex-start; padding:12px 0 14px; border-top:1px solid var(--line); }
.letter-body .menu-part li:first-child { border-top:0; padding-top:2px; }
.letter-body .menu-icon { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  color:var(--link,var(--accent)); background:var(--card); border:1px solid var(--line); }
.letter-body .menu-part.now .menu-icon { color:var(--accent-ink); background:var(--accent); border-color:var(--link,var(--accent)); }
.letter-body .menu-part.soon .menu-icon { color:var(--muted); }
.letter-body .menu-text span { display:block; margin-top:2px; font-size:15px; line-height:1.5; color:var(--muted); }
.letter-foot { margin:12px clamp(22px,5vw,52px) 0; padding:18px 0 26px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); }
.letter-foot p { margin:0; }
.letter-mark { max-width:760px; margin:14px 0 0; text-align:right; }
.letter-mark button.link { font-size:14px; color:var(--muted); }
.letter-mark button.link:hover { color:var(--ink); }
@media (max-width:600px) {
  .letter { border-radius:16px; }
  .letter-body { font-size:16px; }
  .letter-body .features { grid-template-columns:1fr; }
  .letter-body .menu-part { padding:18px 16px 4px; }
  ul.rows.letters .go { display:none; }
}
@media (prefers-reduced-motion: reduce) { .letter { animation:none; } }
/* Billing: the balance due on one bill, and its Pay button (templates/receipts.html). */
.due-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:18px 0; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--fill); }
.due-card .sub { display:block; color:var(--muted); font-size:14px; }
/* Billing (portal/tools_builtin/receipts.py): Pay with no link yet is drawn and goes nowhere (owner, 2026-09-28). */
.btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.figures { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:0 0 18px; }
.figures .figure { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--fill); }
.figures .figure b { display:block; font-size:22px; }
.figures .figure span { color:var(--muted); font-size:13px; }
.lines-form { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); gap:8px; }

/* NEEDS (owner, 2026-10-01): what NexVerto is waiting on from this person, in three bands, each need a card with its
   checklist folded and one Copy button; the done ones muted at the bottom. */
.need h3 { margin:0 0 4px; font-size:17px; font-weight:600; letter-spacing:-.1px; }
.need .sub { margin:0 0 10px; font-size:13px; color:var(--muted); }
.need .summary { margin:0 0 10px; line-height:1.55; overflow-wrap:anywhere; }
.need details.checklist > summary { cursor:pointer; color:var(--link,var(--accent)); font-size:14px; list-style:none; }
.need details.checklist > summary::-webkit-details-marker { display:none; }
.need details.checklist > summary::before { content:"\25B8"; display:inline-block; width:14px; }
.need details.checklist[open] > summary::before { content:"\25BE"; }
.need details.checklist ul { margin:8px 0 4px; padding-left:22px; }
.need details.checklist li { margin:4px 0; overflow-wrap:anywhere; }
.need .copy-block { display:flex; align-items:center; gap:12px; margin:12px 0 0; }
.need .copy-done { font-size:13px; color:var(--muted); }
.need .copy-source { margin:10px 0 0; white-space:pre-wrap; }
.need.done h3, .need.done .summary { color:var(--muted); }
.band .empty { margin:0 0 8px; }
.also-due { margin-bottom:8px; }
.nothing { margin:18px 0; }

/* A described tool (portal/described.py, templates/described.html): one look for every tool's lists, forms and records. */
.described .head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 12px; } .described .head h2 { margin:0; flex:1; }
.pay-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .pay-head h1 { flex:1; }
.described form.scope { display:flex; gap:8px; align-items:center; margin:0 0 14px; } .described form.scope label { margin:0; } .described form.scope select { width:auto; }
.described p.scope { margin:0 0 14px; }
.described .filters { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; } .described .filters .filter { flex:1 1 180px; } .described .filters label { margin-top:0; }
.visuallyhidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.described .list-search { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:0 0 14px; }
.described .list-search .filter { flex:1 1 220px; }
.described .list-search label { margin-top:0; }
.described .list-search input[type=search] { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--field); color:var(--ink); }
.described .list-filter { flex:1 1 100%; min-width:0; }
.described .list-status { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
.described .list-status a, .described .list-status .disabled-nav { display:inline-flex; align-items:center; min-height:44px; padding:0 1px; color:var(--muted); border-bottom:2px solid transparent; }
.described .list-status a:hover { color:var(--ink); }
.described .list-status a[aria-current=page] { color:var(--ink); border-bottom-color:var(--link,var(--accent)); font-weight:600; }
.described .list-status a:focus-visible, .described .list-search input[type=search]:focus-visible { outline:2px solid var(--line); outline-offset:3px; }
.described [data-live-list][aria-busy=true] [data-list-results] { opacity:.65; }
.described td.acts form { display:inline-block; margin:0 4px 4px 0; }
.described .pager { display:flex; gap:14px; align-items:center; margin:12px 0 0; }
.described form.set label.check { display:flex; gap:8px; align-items:center; color:var(--ink); }
.described .field-err { color:var(--err); font-size:13px; margin:4px 0 0; } .described .help { margin:4px 0 0; } .described .req { color:var(--err); }
.described .maintenance-notice { border-left:6px solid var(--warn); color:var(--muted); }
.described .maintenance-notice p { margin:0; }
.described .maintenance-inline, .described .maintenance-note { color:var(--muted); font-size:13px; line-height:1.4; }
.described .maintenance-inline { display:block; margin-top:4px; }
.described .maintenance-note { margin:4px 0 0; }
.described .disabled-link, .described .disabled-nav, .described .disabled-control { color:var(--muted); opacity:.65; cursor:not-allowed; text-decoration:none; }
.described button:disabled, .described input:disabled, .described select:disabled, .described textarea:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:600px) { .described table { display:block; overflow-x:auto; } }
@media (max-width:390px) { .described .list-search { align-items:stretch; } .described .list-search .filter, .described .list-filter { flex-basis:100%; } .described .list-status { gap:4px 12px; } }
/* The generic views a tool may describe beyond lists, forms and records (docs/CONNECTIONS.md): a section's steps, a
   record's own buttons, a questionnaire (choices), an approve list and a gallery. Nothing here knows any tool. */
.described ol.steps { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 18px; padding:0; counter-reset:none; }
.described ol.steps li a, .described ol.steps li > .disabled-nav { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:999px; font-size:14px; color:var(--muted); background:var(--card); }
.described ol.steps li a .n, .described ol.steps li > .disabled-nav .n { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--fill); color:var(--muted); font-size:12px; font-weight:600; }
.described ol.steps .disabled-nav { flex-wrap:wrap; }
.described ol.steps .disabled-nav small { flex-basis:100%; max-width:240px; margin-left:30px; white-space:normal; }
.described ol.steps li.on a { color:var(--link,var(--accent)); border-color:var(--link,var(--accent)); }
.described ol.steps li.on a .n { background:var(--accent); color:var(--accent-ink); }
.described .acts.record { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin:0 0 14px; }
.described .acts.record form.act-one { display:flex; gap:8px; align-items:flex-end; margin:0; }
.described .acts.record form.act-one label { margin:0 0 4px; } .described .acts.record form.act-one select { width:auto; }
.described .acts.record form.act-one .keyuse { display:none; }
.described p.intro { margin:0 0 14px; }
.described .keyless { border-color:var(--link,var(--accent)); } .described .keyless p { margin:0 0 6px; } .described .keyless p:last-child { margin:0; }
.described form.choices fieldset { border:1px solid var(--line); min-width:0; }
.described form.choices legend { padding:0 6px; font-weight:600; color:var(--ink); }
.described form.choices .question { padding:12px 0; border-top:1px solid var(--line); } .described form.choices .question:first-of-type { border-top:0; padding-top:4px; }
.described form.choices p.q { margin:0 0 8px; font-weight:500; color:var(--ink); }
.described form.choices .opts { display:flex; flex-direction:column; gap:2px; }
.described form.choices label.opt { display:flex; gap:10px; align-items:flex-start; margin:0; padding:6px 2px; font-size:15px; color:var(--ink); cursor:pointer; }
.described form.choices label.opt.disabled-control { flex-wrap:wrap; }
.described form.choices label.opt.disabled-control .maintenance-inline { flex-basis:100%; margin:0 0 0 24px; }
.described form.choices label.opt input { margin-top:4px; accent-color:var(--link,var(--accent)); }
.described form.choices label.sub { margin-top:10px; }
.described form.approve .item label:first-child { margin-top:0; font-weight:600; color:var(--ink); font-size:14px; }
.described form.approve .seg.decide { margin-top:10px; max-width:260px; }
.described form.approve .seg.decide label { margin:0; position:relative; }
.described .seg label:has(input:checked) { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.described .gallery { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.described .gallery figure { margin:0; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.described .gallery img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--fill); }
.described .gallery figcaption { padding:10px 12px; font-size:14px; color:var(--muted); }

/* ----- 2026-10-01 owner fixes ----------------------------------------------------------------------------------
   A card or a row that is a link reads as a card or a row: no underline, no link-blue text inside it. */
a.door, a.door *, ul.rows > li.pick > a, ul.rows > li.pick > a * { text-decoration:none !important; border-bottom:0; }
a.door .door-name, ul.rows > li.pick > a .what b { color:var(--ink); font-weight:600; }
a.door .door-desc, ul.rows > li.pick > a .what .sub, ul.rows > li.pick > a .kicker { color:var(--muted); font-weight:400; }
ul.rows > li.pick > a .go { color:var(--muted); font-weight:400; font-size:14px; }
.door .door-art.compact { height:76px; }

/* A described tool's one picker, above its sections. */
.tool .site-bar { --site-hue: 210; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 16px; padding:16px 20px; border-radius:12px; border-left:8px solid var(--accent); background:var(--tint); color:var(--line); }
.tool .site-now { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tool .site-kicker { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--tint-ink); }
.tool .site-name { font-size:26px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
.tool .site-bar .scope-pick { margin:0; }
.tool .site-bar .scope-pick label { color:var(--tint-ink); }
.tool .site-switched { margin:-6px 0 16px; padding:10px 14px; border-radius:10px; font-weight:600; background:var(--accent); color:var(--accent-ink); animation:site-in .35s ease-out; }
@keyframes site-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool .site-bar { background:var(--tint); color:var(--tint); } :root:not([data-theme="light"]) .tool .site-kicker, :root:not([data-theme="light"]) .tool .site-bar .scope-pick label { color:var(--tint-ink); } }
:root[data-theme="dark"] .tool .site-bar { background:var(--tint); color:var(--tint); }
:root[data-theme="dark"] .tool .site-kicker, :root[data-theme="dark"] .tool .site-bar .scope-pick label { color:var(--tint-ink); }
.tool .scope-pick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.tool .scope-pick label, .tool .scope-pick .muted { font-size:14px; color:var(--muted); margin:0; }
.tool .scope-pick select { width:auto; min-width:200px; }
.tool .scope-pick b { font-weight:600; }

/* Tabs that are links (Connections). */
nav.tabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid var(--line); }
nav.tabs a, nav.tabs .disabled-nav { padding:9px 13px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
nav.tabs a:hover { color:var(--ink); }
nav.tabs[aria-label="Message folders"] { overflow-y:hidden; }
nav.tabs a.active { color:var(--link,var(--accent)); border-bottom-color:var(--link,var(--accent)); }
nav.tabs .disabled-nav small, .tool .rail .off small, .described .list-status .disabled-nav small { display:block; max-width:240px; margin-top:2px; font-size:11px; font-weight:400; line-height:1.25; white-space:normal; }
@media (max-width:600px) { nav.tabs { flex-wrap:nowrap; overflow-x:auto; } nav.tabs a, nav.tabs .disabled-nav { white-space:nowrap; } }

/* Sign in with ...: one wide button per service, the way a sign-in page draws them. */
.signin-with form { margin:0 0 12px; }
.signin-with button.oauth { display:flex; align-items:center; gap:12px; width:100%; max-width:420px; padding:11px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; text-align:left; }
.signin-with button.oauth:hover { border-color:var(--link,var(--accent)); background:var(--hover); }
.signin-with .mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:14px; }
.signin-with .purposes { margin:4px 0 0; font-size:13px; }

/* Invoices: due on top, a rule, then paid folded by year and month. */
hr.rule { border:0; border-top:1px solid var(--line); margin:28px 0 20px; }
details.paid { margin:0 0 14px; }
details.paid > summary { cursor:pointer; font-size:20px; font-weight:600; padding:6px 0; }
details.paid > summary .muted, details.year > summary .muted, details.month > summary .muted { font-size:14px; font-weight:400; margin-left:8px; }
details.year { margin:6px 0 6px 14px; } details.year > summary { cursor:pointer; font-weight:600; padding:4px 0; }
details.month { margin:4px 0 4px 14px; } details.month > summary { cursor:pointer; padding:4px 0; }
details.month ul.rows { margin-top:8px; }

/* Profile: contact details, the consent pop-out, the tenants. */
.profile.contact .pfield form.primary-pick, .profile.contact .pfield form.texts { display:flex; align-items:center; gap:12px; margin:0; }
.profile.contact label.inline { display:inline-flex; align-items:center; gap:6px; margin:0; color:var(--ink); }
.profile.contact .texts { display:inline-flex; align-items:center; gap:10px; }
.profile.contact .note { margin:10px 0 0; font-size:14px; }
dialog.consent-pop { max-width:560px; width:calc(100% - 32px); border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); padding:22px 24px; box-shadow:var(--shadow); }
dialog.consent-pop::backdrop { background:var(--scrim); }
dialog.consent-pop h2 { margin-top:0; }
.consent-text p, .consent-text li { font-size:15px; line-height:1.55; }
.consent-pop form.set label, .card.set label.check { display:flex; gap:8px; align-items:flex-start; }
.consent-pop form.set label[for="pop-name"] { display:block; margin:14px 0 4px; font-size:14px; color:var(--muted); }
details.tenant { padding:6px 0; border-top:1px solid var(--line); } details.tenant:first-child { border-top:0; }
details.tenant > summary { cursor:pointer; padding:4px 0; } details.tenant > summary .muted { font-size:13px; margin-left:6px; }

/* A tool's section that is not live on the chosen site: greyed out with its state (owner, 2026-10-02). */
.tool .rail .off { color:var(--muted); opacity:.55; cursor:not-allowed; flex-wrap:wrap; }
.tool .rail .off small { flex-basis:100%; }
.tool .rail .off em { font-style:normal; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:999px; border:1px solid currentColor; }
.tool .rail .off.state-maintenance em { color:var(--warn); border-color:var(--warn); }
.tool .card.maint { border-left:6px solid var(--warn); }
.tool .card.maint.state-setup { border-left-color:var(--muted); }

/* Image fields: Upload and the AI emblem beside the address, a preview, and the AI pop-out (static/images.js). */
.img-field { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 4px; }
.img-field .img-preview { width:96px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--fill); }
.img-field .img-ways { display:inline-flex; gap:8px; }
.img-field .img-status { margin:0; flex-basis:100%; min-height:1em; }
.img-field .image-maintenance { flex-basis:100%; margin:0; }
.img-field label.upload { cursor:pointer; }
/* DRAFT AUTOSAVE (templates/described.html, static/autosave.js; owner, 2026-10-05): the line saying when the draft copy
 * was last kept and the note on it, shown by the script only (nothing is kept without it), and the note when a form
 * opens on a copy that was not saved. */
.autosave-state { margin:10px 0 0; min-height:1.4em; font-size:14px; color:var(--muted); }
.autosave-state.err { color:var(--err); }
.autosave-help { margin:4px 0 10px; font-size:13px; }
.autosave-state[hidden], .autosave-help[hidden] { display:none; }
.autosave-restored { border-left:3px solid var(--accent); }
.autosave-restored p { margin:0 0 10px; }
.autosave-restored form { margin:0; }
.ai-emblem svg { vertical-align:-3px; color:var(--link,var(--accent)); }
.ai-pop { max-height:calc(100vh - 32px); overflow:auto; width:min(560px, calc(100vw - 32px)); border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); padding:20px; }
.ai-pop::backdrop { background:var(--scrim); }
.ai-pop .ai-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ai-pop h3 { margin:0; }
.ai-pop .ai-status { margin:12px 0 4px; font-weight:600; }
.ai-pop .ai-estimate, .ai-pop .ai-key { margin:4px 0; }
.ai-pop label { display:block; margin:12px 0 4px; }
.ai-pop textarea, .ai-pop select { width:100%; box-sizing:border-box; }
.ai-pop .ai-result img { width:100%; max-height:50vh; object-fit:contain; border-radius:10px; border:1px solid var(--line); margin-top:12px; }
.ai-pop .ai-cost { margin:8px 0 0; }
.ai-pop .act { margin:12px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.usage .note { margin:0 0 8px; }
.usage .rows .act { white-space:nowrap; }
.scopes-pop { width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); padding:20px; }
.scopes-pop::backdrop { background:var(--scrim); }
.scopes-pop .scopes-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.scopes-pop h3 { margin:0; }
.scopes-pop details { border-top:1px solid var(--line); padding:10px 0; }
.scopes-pop summary { cursor:pointer; font-weight:600; }
.scopes-pop ul { margin:6px 0 0 18px; padding:0; } .scopes-pop li { margin:4px 0; }
.use-for { border:0; padding:0; margin:12px 0 4px; } .use-for legend { font-weight:600; margin-bottom:6px; }
.use-for .check { display:block; margin:4px 0; } .use-for .check.sub { margin-left:24px; }
.key-edit { margin-top:6px; } .key-edit summary { cursor:pointer; color:var(--link,var(--accent)); font-size:.9em; }

/* THE CMS IN THE PORTAL (owner, 2026-10-03): one trail at the top; the home is the status, then the tenants as cards;
   inside a tenant, its name large and its tools as cards, each one on the site or hidden, switched on the card. */
.tool .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; font-size:13px; color:var(--muted); }
.tool .crumbs a { color:var(--muted); font-weight:500; text-decoration:none; }
.tool .crumbs a:hover { color:var(--ink); }
.tool .crumbs [aria-current] { color:var(--ink); font-weight:600; }
.tool .crumbs span[aria-hidden] { color:var(--fainter); }
.tool h1.tool-title { font-size:30px; margin:0 0 22px; letter-spacing:-.4px; }

.tool .tool-status { position:relative; margin:0 0 30px; padding:18px 22px 18px 24px; border-radius:14px; background:var(--card); border:1px solid var(--line); overflow:hidden; }
.tool .tool-status::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--attention); }
.tool .tool-status.quiet::before { background:var(--ok); }
.tool .tool-status h2 { margin:0 0 4px; font-size:12px; letter-spacing:.08em; }
.tool .tool-status .status-intro { margin:0; font-size:13px; }
.tool .tool-status .status-now { display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; font-weight:600; line-height:1.45; }
.tool .tool-status .dot { width:9px; height:9px; margin-top:6px; border-radius:50%; background:var(--attention); flex:0 0 auto; box-shadow:0 0 0 4px var(--attention-ring); }

.tool .tenant-pick, .tool .tenant-tools { margin:0 0 30px; }
.tool .tenant-pick h2, .tool .tenant-tools h2 { margin:0 0 12px; font-size:12px; letter-spacing:.08em; }
.tool .tenant-grid, .tool .tool-grid { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.tool .tenant-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tool .tenant-grid > li, .tool .tool-grid > li { margin:0; padding:0; border:0; }
.tool .tenant-mark, .tool .tool-mark { --site-hue: 210; flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-weight:700; font-size:16px;
  color:var(--tint-ink); background:var(--tint); }
.tool a.tenant-card { --site-hue: 210; display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink);
  text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
.tool a.tenant-card .tenant-mark { --site-hue: inherit; }
.tool a.tenant-card:hover { border-color:var(--link,var(--accent)); box-shadow:var(--shadow); transform:translateY(-1px); }
.tool a.tenant-card:focus-visible { outline:2px solid var(--line); outline-offset:2px; }
.tool .tenant-label { flex:1 1 auto; min-width:0; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tool a.tenant-card .go { color:var(--faint); flex:0 0 auto; }
.tool a.tenant-card:hover .go { color:var(--link,var(--accent)); }

.tool .tenant-head { --site-hue: 210; display:flex; align-items:center; gap:16px; margin:0 0 24px; padding:20px 22px; border-radius:16px;
  background:linear-gradient(120deg, var(--tint), var(--card) 70%); border:1px solid var(--tint); }
.tool .tenant-head .tenant-mark { --site-hue: inherit; width:52px; height:52px; border-radius:14px; font-size:22px; color:var(--accent-ink); background:var(--accent); }
.tool .tenant-id { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tool .tenant-kicker { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--tint-ink); }
.tool h1.tenant-name { margin:0; font-size:26px; line-height:1.15; letter-spacing:-.3px; overflow-wrap:anywhere; }
.tool .btn.ghost { background:transparent; }

.tool .tool-grid > li.tool-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
@media (hover:hover) { .tool .tool-card:not(.off):hover { box-shadow:var(--shadow); border-color:var(--fainter); } }
.tool .tool-card .tool-open { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:6px; align-items:center; padding:16px 16px 14px; color:var(--ink); text-decoration:none; flex:1 1 auto; }
.tool .tool-card .tool-mark { grid-row:1 / 3; color:var(--link,var(--accent)); background:var(--tint); }
.tool .tool-card .tool-name { font-weight:700; font-size:16px; color:var(--ink); }
.tool .tool-card .tool-note { margin:0; padding:10px 16px 14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.tool .tool-card .tool-state { grid-column:2; }
.tool .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); background:var(--fill); border-radius:999px; padding:3px 9px; }
.tool .pill i { width:7px; height:7px; border-radius:50%; background:var(--faint); }
.tool .pill.on { color:var(--ok); background:var(--ok-bg); } .tool .pill.on i { background:var(--ok); }
.tool .pill.quiet { background:transparent; padding-left:0; font-weight:500; }
.tool .tool-card .tool-switch { margin:0; padding:10px 16px 14px; border-top:1px solid var(--line); background:var(--fill); }
.tool .tool-card .tool-switch button { width:100%; }
.tool .tool-card.off { opacity:.6; } .tool .tool-card.off .tool-mark { color:var(--muted); background:var(--fill); }
.tool .tool-card.off .tool-open { cursor:not-allowed; }
.tool .tool-card.state-maintenance .pill { color:var(--warn); background:var(--warn-bg); }
.tool .tools-help { margin:12px 0 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool .tenant-mark, :root:not([data-theme="light"]) .tool a.tenant-card .tenant-mark { color:var(--tint-ink); background:var(--line); }
  :root:not([data-theme="light"]) .tool .tenant-head { background:linear-gradient(120deg, var(--tint), var(--card) 70%); border-color:var(--line); }
  :root:not([data-theme="light"]) .tool .tenant-head .tenant-mark { color:var(--accent-ink); background:var(--accent); }
  :root:not([data-theme="light"]) .tool .tenant-kicker { color:var(--tint-ink); }
}
:root[data-theme="dark"] .tool .tenant-mark, :root[data-theme="dark"] .tool a.tenant-card .tenant-mark { color:var(--tint-ink); background:var(--line); }
:root[data-theme="dark"] .tool .tenant-head { background:linear-gradient(120deg, var(--tint), var(--card) 70%); border-color:var(--line); }
:root[data-theme="dark"] .tool .tenant-head .tenant-mark { color:var(--accent-ink); background:var(--accent); }
:root[data-theme="dark"] .tool .tenant-kicker { color:var(--tint-ink); }
@media (max-width:600px) {
  .tool .tenant-head { padding:16px; gap:12px; } .tool .tenant-head .tenant-mark { width:44px; height:44px; font-size:19px; }
  .tool h1.tenant-name { font-size:21px; } .tool .tenant-head .btn { display:none; }
}

/* ----- FIND AND GUIDE (owner, 2026-10-04; portal/guide.py, static/guide.js) -----------------------------------
   The search box sits first in the tray; the ? beside it starts the guide. On a phone the box is a magnifier that
   opens across the header while it has focus. */
header.top { position:relative; }
header.top form.find { position:relative; display:flex; align-items:center; margin:0; }
header.top form.find .find-icon { position:absolute; left:10px; color:var(--muted); pointer-events:none; }
header.top form.find input { width:190px; height:38px; padding:0 12px 0 34px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; font-size:14px; }
header.top form.find input:focus { outline:2px solid var(--line); outline-offset:1px; border-color:transparent; }
header.top form.find input::-webkit-search-cancel-button { -webkit-appearance:none; }
.find-list { position:absolute; top:44px; left:0; width:max(100%, 300px); margin:0; padding:6px; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); z-index:40; }
.find-list li a { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:8px; color:var(--ink); }
.find-list li a .kicker { font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.find-list li[aria-selected="true"] a, .find-list li a:hover { background:var(--fill); }
header.top a.guide-start { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:var(--muted); }
header.top a.guide-start:hover { color:var(--ink); background:var(--hover); }
@media (max-width:560px) {
  header.top form.find input { width:40px; padding:0; color:transparent; border-color:transparent; background:transparent; cursor:pointer; }
  header.top form.find input::placeholder { color:transparent; }
  header.top form.find .find-icon { left:11px; }
  header.top form.find:focus-within { position:absolute; left:14px; right:14px; top:11px; z-index:30; }
  header.top form.find:focus-within input { width:100%; padding:0 12px 0 34px; color:var(--ink); border-color:var(--line); background:var(--card); cursor:text; }
  header.top form.find:focus-within input::placeholder { color:var(--muted); }
  .find-list { width:100%; }
}
form.find-page { display:flex; gap:8px; margin:0 0 18px; max-width:560px; }
form.find-page input { flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; }
ul.found .kicker { font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.guide-about ol.guide-list { margin:0 0 12px; padding-left:20px; }
.guide-about ol.guide-list li { margin:0 0 6px; color:var(--muted); }
.guide-about ol.guide-list li b { color:var(--ink); margin-right:4px; }
.guide-shade { position:fixed; inset:0; z-index:90; background:transparent; }
.guide-ring { position:fixed; z-index:91; border-radius:12px; pointer-events:none; box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px var(--scrim);
              transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.guide-card { position:fixed; z-index:92; width:min(340px, calc(100vw - 24px)); padding:16px 16px 12px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.guide-card .guide-title { margin:0 0 6px; font-weight:600; font-size:16px; padding-right:24px; }
.guide-card .guide-text { margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.5; }
.guide-card .guide-foot { display:flex; align-items:center; gap:8px; }
.guide-card .guide-count { margin-right:auto; font-size:12px; color:var(--muted); }
.guide-card .guide-x { position:absolute; top:8px; right:8px; width:30px; height:30px; padding:0; border:0; background:none; color:var(--muted); font-size:20px; line-height:1; }
.guide-card .guide-x:hover { color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .guide-ring { transition:none; } }
/* A phone carries seven controls in the header now (find, guide, three icons, the toggle, the menu): each is a little
   narrower there so the wordmark keeps its room. */
@media (max-width:560px) {
  header.top .tray { gap:0; }
  header.top .quick { gap:0; }
  header.top .quick a.badge, header.top a.guide-start, header.top form.theme button, header.top details summary { width:36px; }
  header.top form.find input { width:36px; }
  header.top form.find .find-icon { left:9px; }
}
.guide-card button:disabled { opacity:.4; cursor:default; }
/* A client's wordmark longer than NexVerto's (portal/brand.py `wide`): on a phone its second part goes under its
   first, so the seven controls beside it keep their room. NexVerto's one word is never `wide` and never breaks. */
@media (max-width:560px) {
  header.top .brand.wide { display:inline-block; font-size:17px; line-height:1.05; }
  header.top .brand.wide b { display:block; }
}

/* ----- THE WELCOME LETTER (owner, 2026-10-05; WELCOME_LETTER, templates/home.html) --------------------------------
   The letter at the top of home, above the cards and the tools: its paragraphs as written, a single line break kept.
   Tokens only, so it is right on both surfaces. */
.welcome-letter { max-width:680px; margin:28px auto 0; padding:22px 26px 8px; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 0 var(--line); }
.welcome-letter p { margin:0 0 14px; font-size:17px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
/* Under the letter, one plain line: how many postcards are not opened yet, a link to the Inbox where they are. */
.welcome .unopened { margin:18px 0 0; font-size:16px; }

/* ----- THE POSTCARDS (owner, 2026-10-05; plain index cards since 2026-10-06; templates/_cards.html, portal/cards.py) -----
   The Inbox is one plain list of ruled index cards: a postcard or a message, the topic on the top line. A postcard has its
   category and priority beside the topic and, down its left edge, its priority's colour. A card not read yet wears the
   word "Unread" and a dot; a button marks it read or unread. No picture and no style attribute: every colour is a token,
   and inside a card the page's own tokens are pointed at the paper's, so a button, a field or a link reads on paper on
   both surfaces. */
.cards { max-width:600px; margin:36px auto 0; text-align:left; }
.cards .cards-head { margin:0 0 6px; text-align:center; }
.postcard-kinds { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin:0 0 10px; font-size:14px; }
.postcard-kinds a { color:var(--muted); font-weight:500; }
.postcard-kinds a:hover { color:var(--ink); }
.postcard-kinds a[aria-current] { color:var(--link,var(--accent)); font-weight:600; }
/* The priority (migration 0063): the page's status tokens as the paper points them (.index-card below: --err is
   --paper-err, --accent is --verto, --muted is --paper-muted): high the error red, normal the brand accent, low the
   muted ink. No colour of its own, and always with its word beside it. */
.postcard[data-priority="high"] { --priority:var(--paper-err); }
.postcard[data-priority="normal"] { --priority:var(--verto); }
.postcard[data-priority="low"] { --priority:var(--paper-muted); }
.index-card {
  --ink:var(--paper-ink); --muted:var(--paper-muted); --line:var(--paper-line); --field:var(--paper-field);
  --card:var(--paper); --fill:var(--paper-field); --hover:var(--paper-field); --err:var(--paper-err);
  --accent:var(--verto); --accent-ink:var(--on-fill);
  position:relative; display:flex; flex-direction:column; margin:0; overflow:hidden;
  border-radius:3px; color:var(--paper-ink); background-color:var(--paper);
  background-image:
    radial-gradient(circle at 30% 40%, var(--paper-fleck) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 70% 65%, var(--paper-fleck) 0 .5px, transparent 1px),
    linear-gradient(97deg, transparent 0 40%, var(--paper-fleck) 50%, transparent 60%),
    radial-gradient(140% 110% at 50% 0%, transparent 58%, var(--paper-edge) 100%);
  background-size:7px 7px, 11px 13px, 100% 100%, 100% 100%;
  background-position:0 0, 3px 5px, 0 0, 0 0;
  box-shadow:0 1px 1px var(--paper-shadow-1), 0 3px 7px var(--paper-shadow-2), 0 14px 30px var(--paper-shadow-3);
}
.postcard > .index-card { border-left:6px solid var(--priority); }
.index-card .ic-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; padding:18px 24px 10px;
  border-bottom:2px solid var(--paper-margin); }
.index-card .ic-title { margin:0; font:600 19px/1.3 var(--sans, 'IBM Plex Sans',system-ui,sans-serif); letter-spacing:-.01em; color:var(--paper-ink); }
.index-card .ic-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto; }
.index-card .ic-kind, .index-card .ic-priority { flex:0 0 auto; padding:3px 7px; border:1px solid var(--paper-line); border-radius:3px;
  color:var(--paper-muted); font:600 11px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.index-card .ic-priority { padding-left:12px; border-color:var(--priority); box-shadow:inset 4px 0 0 var(--priority); color:var(--paper-ink); }
.index-card .ic-lines { flex:1 1 auto; padding:0 24px 22px; font-size:16.5px; line-height:28px;
  background-image:linear-gradient(to bottom, transparent 27px, var(--paper-rule) 27px);
  background-size:100% 28px; background-repeat:repeat-y; }
.index-card .ic-lines p { margin:0; }
.index-card .ic-body { overflow-wrap:anywhere; }
.index-card .ic-lines .ic-requested { margin-top:28px; font-weight:600; color:var(--verto); }
.index-card form { margin:0; }
.index-card form.ic-pick, .index-card .ic-chat, .index-card .ic-thread { margin-top:28px; }
.index-card .ic-said { margin-top:14px; padding:4px 10px; border-left:3px solid var(--paper-err); color:var(--paper-err); line-height:1.5; }
.index-card .ic-said.ok { border-left-color:var(--verto); color:var(--paper-ink); }
.index-card ol.ic-notes { list-style:none; margin:0; padding:0; }
.index-card ol.ic-notes > li { margin:0 0 6px; }
.index-card .ic-who { display:block; font-size:13px; color:var(--paper-muted); }
.index-card .ic-text { display:block; white-space:pre-line; overflow-wrap:anywhere; }
.index-card form.ic-note, .index-card form.ic-say { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.index-card form.ic-note label, .index-card form.ic-say label { margin:0; line-height:1.4; }
.index-card textarea { min-height:84px; resize:vertical; line-height:1.5; }
.index-card form.ic-note button, .index-card form.ic-say button, .index-card form.ic-pick button { align-self:flex-start; }
.index-card ol.ic-chat-lines { list-style:none; margin:0; padding:0; }
.index-card ol.ic-chat-lines > li { margin:0 0 6px; white-space:pre-line; overflow-wrap:anywhere; }
.index-card ol.ic-chat-lines > li.you { padding-left:12px; border-left:2px solid var(--verto); font-weight:500; }
.index-card .ic-consent b { font-weight:700; }
.index-card .ic-draft { margin-top:10px; padding:4px 12px; border:1px dashed var(--paper-line); border-radius:6px;
  background:var(--paper-field); white-space:pre-line; overflow-wrap:anywhere; }
.index-card .ic-acts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
.index-card .ic-acts form { display:inline-flex; }
.index-card a.ic-link { display:inline-grid; place-items:center; vertical-align:-3px; color:var(--verto); }
/* On the Inbox the postcards are the page; the messages follow them, the second list. */
/* One plain list of cards: the unread mark and the read button (owner, 2026-10-06). */
.card-list { max-width:600px; margin:20px auto 0; text-align:left; }
/* The postcard stack (owner, 2026-10-06): with script one card shows at a time; without, every card is listed. */
.card-stack { max-width:600px; margin:20px auto 0; text-align:left; }
.card-stack > article { margin:0 0 18px; }
.card-stack.is-stack > article { display:none; }
.card-stack.is-stack > article.current { display:block; }
.stack-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.stack-nav .stack-count { font-size:14px; color:var(--muted); }
.stack-nav button { padding:6px 12px; font-size:14px; }
.index-card .ic-acts a.btn.primary { text-decoration:none; }
.index-card .ic-lines p.ic-acts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.index-card .ic-lines p.ic-acts form.ic-read { display:inline-flex; margin:0; }
.card-page { max-width:720px; margin:12px auto 0; }
.card-page h1.ic-title { margin:0; font:600 24px/1.25 var(--sans, 'IBM Plex Sans',system-ui,sans-serif); color:var(--paper-ink); }
.card-page .ic-full { white-space:pre-line; }
.card-page .ic-h2 { margin:0 0 10px; font:600 15px/1.3 'IBM Plex Mono',ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-muted); }
.card-page .ic-chat-wrap { margin-top:28px; }
.index-card .ic-chat-wrap .ic-chat { margin-top:0; }
.card-list > article { margin:0 0 18px; }
.index-card .ic-unread { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 'IBM Plex Mono',ui-monospace,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--verto); }
.index-card .ic-unread::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--verto); }
.postcard.read .ic-title, .message-card.read .ic-title { font-weight:500; }
.index-card form.ic-read { margin-top:18px; }
.index-card form.ic-read button { padding:4px 10px; font-size:14px; }
.index-card a.ic-open { font-weight:600; text-decoration:none; }
h2.inbox-messages { margin-top:44px; }
@media (max-width:600px) {
  .welcome-letter { margin-top:20px; padding:18px 18px 4px; } .welcome-letter p { font-size:16px; }
  .cards { margin-top:24px; }
  .index-card .ic-top { padding:14px 18px 8px; }
  .index-card .ic-title { font-size:18px; }
  .index-card .ic-lines { padding:0 18px 18px; font-size:16px; }
}

/* ----- POINT AT IT AND ASK (owner, 2026-10-05; templates/base.html, static/ask.js, portal/main.py ask_send) ----------
   The button rides the foot of every signed-in page; in its pick mode the part under the pointer (or the focus) is
   ringed, a bar says what to do, and a small panel takes the comment. Tokens only, so it is right on both surfaces. */
body:has(footer.ask) main { margin-bottom:96px; }
footer.ask { position:fixed; right:18px; bottom:18px; z-index:40; }
footer.ask a.ask-start { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow); font-size:14px; font-weight:600; }
footer.ask a.ask-start:hover { border-color:var(--link,var(--accent)); color:var(--link,var(--accent)); }
footer.ask a.ask-start:focus-visible { outline:2px solid var(--line); outline-offset:3px; }
body.asking, body.asking * { cursor:crosshair; }
body.asking .ask-bar, body.asking .ask-bar * { cursor:auto; }
.ask-ring { position:fixed; z-index:95; pointer-events:none; border-radius:6px; box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--tint);
  transition:top .12s, left .12s, width .12s, height .12s; }
.ask-ring[hidden] { display:none; }
.ask-bar { position:fixed; z-index:96; top:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  width:max-content; max-width:calc(100vw - 24px); padding:9px 10px 9px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow); font-size:14px; }
.ask-panel { position:fixed; z-index:97; right:18px; bottom:18px; width:min(380px, calc(100vw - 24px)); margin:0; padding:16px;
  border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.ask-panel .ask-what { margin:0 0 4px; font-weight:600; overflow-wrap:anywhere; }
.ask-panel .ask-where { margin:0 0 10px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.ask-panel label { margin:0 0 4px; }
.ask-panel textarea { min-height:96px; resize:vertical; }
.ask-panel .ask-acts { display:flex; justify-content:flex-end; gap:8px; margin:10px 0 0; }
@media (prefers-reduced-motion: reduce) { .ask-ring { transition:none; } }
@media (max-width:560px) {
  footer.ask { right:12px; bottom:12px; }
  .ask-bar { top:8px; font-size:13px; }
  .ask-panel { left:12px; right:12px; bottom:12px; width:auto; }
}

/* THE AGREEMENT (templates/agreement.html; owner, 2026-10-05). The text reads as a document, with its own headings
 * rather than the portal's small section labels; the short list of changes under it; the assistant last. One column
 * at every width, so a phone reads it the same way. */
.agreement-meta { color:var(--muted); font-size:14px; margin:0 0 14px; }
.agreement-archived { margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--accent); background:var(--card); border-radius:0 9px 9px 0; }
.agreement-text { padding:22px 26px; line-height:1.6; overflow-wrap:anywhere; }
.agreement-text h2 { margin:0 0 14px; font-size:22px; color:var(--ink); text-transform:none; letter-spacing:-.1px; }
.agreement-text h3 { margin:26px 0 8px; font-size:18px; font-weight:600; }
.agreement-text h4 { margin:20px 0 6px; font-size:16px; font-weight:600; }
.agreement-text p { margin:0 0 10px; }
.agreement-text ul, .agreement-text ol { margin:0 0 12px; padding-left:22px; } .agreement-text li { margin:2px 0; }
.agreement-text .agreement-flow { line-height:1.8; }
/* The branded agreement (a client file; Joe, 2026-10-07): hero, section cards, flows as chips. */
.ag-hero { margin:-22px -26px 22px; padding:26px 26px 18px; background:linear-gradient(135deg,var(--art-from),var(--art-to)); border-bottom:1px solid var(--line); border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.ag-kicker { margin:0 0 4px; color:var(--link,var(--accent)); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.agreement-text .ag-hero h2 { font-size:26px; margin:0 0 6px; }
.ag-lede { font-size:17px; color:var(--muted); margin:0 0 14px; }
.ag-toc { display:flex; flex-wrap:wrap; gap:6px; } .ag-toc a { padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--tint-ink); font-size:13px; text-decoration:none; }
.ag-section { padding:4px 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px; } .ag-section:last-child { border-bottom:0; }
.agreement-text .ag-section > h3 { margin-top:6px; font-size:20px; }
.ag-stages { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; counter-reset:st; }
.agreement-text .ag-stages li { counter-increment:st; padding:6px 12px; border:1px solid var(--line); border-radius:9px; font-weight:600; }
.ag-stages li::before { content:counter(st); margin-right:6px; color:var(--link,var(--accent)); }
.ag-stage { margin:16px 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--fill); }
.agreement-text .ag-stage h4 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:0; font-size:18px; }
.ag-num { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:14px; }
.ag-owner { margin-left:auto; padding:3px 10px; border-radius:999px; background:var(--tint); color:var(--tint-ink); font-size:12px; font-weight:600; }
.agreement-text h5 { margin:16px 0 6px; font-size:15px; }
.ag-key { font-weight:600; }
.agreement-text .ag-chips { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; }
.agreement-text .ag-chips li { margin:0; padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:14px; }
.agreement-text .ag-flow { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; list-style:none; padding:0; }
.agreement-text .ag-flow li { margin:0; padding:5px 10px; border-radius:8px; background:var(--tint); color:var(--tint-ink); font-weight:600; font-size:14px; }
.agreement-text .ag-flow li + li::before { content:"→"; margin:0 8px 0 -2px; color:var(--muted); font-weight:400; }
.ag-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:8px 0 12px; }
.ag-compare > div { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); } .ag-compare p { margin:4px 0 0; }
.ag-compare .ag-no { border-left:4px solid var(--err); } .ag-compare .ag-yes { border-left:4px solid var(--ok); }
.ag-callout { padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; background:var(--tint); }
.ag-rule { font-weight:600; }
.ag-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:10px 0 14px; }
.ag-tile { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--fill); } .agreement-text .ag-tile h4 { margin-top:0; }
.ag-levels .ag-tile { border-top:4px solid var(--accent); }
.ag-grid.ag-levels { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px) { .ag-grid.ag-levels { grid-template-columns:1fr; } }
.agreement-text .ag-steps { list-style:none; padding:0; counter-reset:sp; }
.agreement-text .ag-steps li { counter-increment:sp; position:relative; margin:0 0 10px; padding:10px 14px 10px 50px; border:1px solid var(--line); border-radius:10px; }
.ag-steps li::before { content:counter(sp); position:absolute; left:14px; top:10px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px; }
.agreement-text .ag-steps h4 { margin:2px 0 4px; } .ag-steps p { margin:0; }
.agreement-text .ag-wheel { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; list-style:none; padding:0; counter-reset:wh; }
.agreement-text .ag-wheel li { counter-increment:wh; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--fill); font-weight:600; font-size:14px; }
.ag-wheel li::before { content:counter(wh) " "; color:var(--link,var(--accent)); }
.agreement-text .ag-wheel .ag-repeat { background:var(--accent); color:var(--accent-ink); border-color:var(--link,var(--accent)); } .ag-wheel .ag-repeat::before { content:"↻ "; color:inherit; }
@media (max-width:640px) { .ag-hero { margin:-16px -14px 18px; padding:20px 14px 14px; } .ag-owner { margin-left:0; } }
.agreement-changes ul { list-style:none; margin:0; padding:0; }
.agreement-changes li { padding:8px 0; border-top:1px solid var(--line); } .agreement-changes li:first-child { border-top:0; }
.agreement-changes time { margin-right:6px; font-weight:600; }
.agreement-ask { margin-top:24px; } .agreement-ask h2 { margin-top:0; }
.agreement-lines { list-style:none; margin:0 0 12px; padding:0; }
.agreement-lines > li { margin:0 0 10px; white-space:pre-line; overflow-wrap:anywhere; }
.agreement-lines > li.you { padding-left:12px; border-left:2px solid var(--verto); font-weight:500; }
.agreement-lines > li.err { color:var(--err); }
.agreement-lines > li.waiting { color:var(--muted); font-style:italic; }
.agreement-ask .advisory { margin:12px 0 0; color:var(--muted); font-size:13px; }
@media (max-width:600px) {
  .agreement-text { padding:16px 14px; }
  .agreement-question p.act button { width:100%; }
}
/* Paused labels stay muted; the explanation remains readable on a phone. */
.described .disabled-nav, .described .disabled-control { opacity:1; }
.described .disabled-control { background:var(--fill); border-color:var(--line); }
.described nav.tabs .disabled-nav { white-space:normal; }
@media (max-width:600px) {
  .described nav.tabs { flex-wrap:wrap; overflow:visible; }
  .described nav.tabs .disabled-nav { flex:1 1 120px; }
}

.edit-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.edit-fields:disabled input, .edit-fields:disabled textarea, .edit-fields:disabled select {
  opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); background: var(--hover);
}

/* A described form's canvas: the tool's page in a frame above the form (static/canvas.js). */
.canvas .canvas-frame { width: 100%; height: 70vh; border: 1px solid var(--line, #d0d5dd); border-radius: 8px; background: #fff; }
.canvas-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:.75rem; }
.canvas-tools p { flex:1 1 16rem; margin:0; }
.canvas-tools .btn { flex:0 0 auto; }
.canvas { min-width:0; }

/* Tool pages on a phone (Joe, 2026-10-07): every list and button fits the screen; titles wrap, nothing is cut off. */
@media (max-width:600px) {
  /* lists become one card per entry on a phone: no sideways scrolling */
  .described table, .described tbody, .described tr, .described td { display:block; width:100%; white-space:normal; overflow:visible; }
  .described thead { display:none; }
  .described tr { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 10px; background:var(--card); }
  .described td { border:0; padding:3px 0; word-break:break-word; }
  .described td:first-child { font-weight:600; font-size:16px; }
  .described .head { gap:8px; }
  .described .head .btn, .described .head > a, .described .head > span.btn { flex:1 1 100%; text-align:center; }
  .described form input, .described form select, .described form textarea { width:100%; box-sizing:border-box; }
}

/* Joe, 2026-10-08: agreement copy and four Messages folders. */
.agreement-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; }
.agreement-copy { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:.55rem; }
#agreement-copy-status { font-size:.85rem; }
.message-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.25rem; }
.message-tabs a { text-align:center; white-space:normal; }
@media(max-width:480px) { .message-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Roadmap stays beside the wordmark, in the header's center-left cell. */
header.top .header-start { grid-column:1; grid-row:1; display:flex; align-items:center; gap:12px; min-width:0; }
header.top .header-start .brand { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.top .roadmap-link { display:inline-grid; place-items:center; flex:0 0 auto; width:40px; height:44px; padding:0; border:0; border-radius:10px; color:var(--muted); }
header.top .roadmap-link:hover, header.top .roadmap-link.active { color:var(--ink); background:var(--hover); text-decoration:none; }
header.top .roadmap-link:focus-visible { outline:2px solid var(--line); outline-offset:2px; }
@media(max-width:600px) { header.top .header-start { gap:6px; } header.top .roadmap-link { width:clamp(28px,9vw,36px); } }

/* Default text fields and hidden controls follow the same selected theme. */
[hidden] { display:none!important; }
input[type=color] { background:var(--field); border:1px solid var(--line); border-radius:8px; }

/* Readable full-strength states, including disabled controls (Joe's stricter requirement). */
body :is(button,input,select,textarea):disabled,
body :is(.disabled-link,.disabled-nav,.disabled-control,.tool-card.off,.wi-unavailable),
body .ms .tabs span,body .expert-chat .wi-chat-preview,body .expert-chat--pending .wi-chat-fields,
body .tool .rail .off { opacity:1!important; }
body :is(button,input,select,textarea):disabled { color:var(--ink); -webkit-text-fill-color:currentColor; background:var(--field); border-color:var(--line); }
body :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
input[type=checkbox],input[type=radio] { accent-color:var(--link); }
body .wi-chat-launch,body .expert-chat .wi-expert-mark { color:var(--link); }
body .wi-chart>div,body .usage-chart>div { background:var(--chart-bg,var(--bg)); }
body .review button.primary:hover:not(:disabled) { filter:none; }
body .review #review-aspects button[aria-pressed=true] { color:var(--link); background:var(--fill); border-color:var(--line); }

input[type=range] { accent-color:var(--link); color:var(--ink); background:var(--field); }
input[type=file]::file-selector-button { color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:6px; font:inherit; }

/* Deployment-branded shell: confident navigation, warm content, clear actions. */
header.top { height:76px; padding:0 clamp(20px,4vw,64px); background:var(--nav,var(--art-1)); color:var(--nav-ink,var(--ink)); border-bottom:4px solid var(--accent); }
header.top .brand, header.top .brand b, header.top .clock, header.top .quick a,
header.top details summary, header.top form.theme button { color:var(--nav-ink,var(--ink)); }
header.top .brand { font-size:22px; letter-spacing:-.03em; }
header.top .quick a:hover, header.top details summary:hover,
header.top details[open] summary, header.top form.theme button:hover { background:var(--nav-hover,var(--hover)); color:var(--nav-ink,var(--ink)); }
header.top .quick a.active, header.top .roadmap-link.active { background:var(--accent); color:var(--accent-ink); }
header.top details .menu { top:50px; padding:10px; border-radius:16px; }
main { max-width:1080px; margin:48px auto 64px; padding:0 32px; }
h1 { font-size:clamp(30px,3vw,42px); line-height:1.16; font-weight:600; letter-spacing:-.025em; margin-bottom:24px; }
h2 { font-size:15px; letter-spacing:.08em; margin-top:32px; }
.welcome { margin-top:0; }
.welcome .tour-offer { max-width:680px; margin:0 0 32px; font-size:17px; }
.grid.doors { gap:20px; margin-top:32px; }
.grid.doors .door { border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:0 8px 24px var(--paper-shadow-1); }
.grid.doors .door .door-art.compact { height:76px; background:var(--nav); border-bottom:4px solid var(--accent); }
.grid.doors .door .door-icon { background:var(--accent); color:var(--accent-ink); border:0; bottom:16px; left:20px; width:44px; height:44px; border-radius:12px; }
.grid.doors .door .door-body { padding:22px; }
.grid.doors .door .door-name { font-size:19px; font-weight:600; }
.grid.doors .door .door-desc { margin-top:6px; font-size:15px; line-height:1.55; }
.card { border-radius:18px; padding:26px 28px; margin-bottom:24px; box-shadow:0 6px 20px var(--paper-shadow-1); }
input:not([type]), input[type=text], input[type=email], input[type=url], input[type=search], input[type=number], input[type=tel], input[type=password], input[type=date], input[type=datetime-local], select, textarea { border-radius:10px; padding:12px 14px; min-height:48px; }
select { cursor:pointer; }
button, .btn { border-radius:11px; min-height:44px; padding:11px 18px; font-weight:600; }
button.primary, .btn.primary { box-shadow:0 3px 0 var(--nav); }
button.primary:hover, .btn.primary:hover { transform:translateY(-1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
header.top a:focus-visible, header.top button:focus-visible, header.top summary:focus-visible { outline-color:var(--nav-ink); }
@media(max-width:600px) {
 header.top { height:68px; padding:0 16px; column-gap:10px; border-bottom-width:3px; }
 header.top .brand { font-size:19px; }
 main { margin:28px auto 40px; padding:0 18px; }
 h1 { font-size:32px; margin-bottom:20px; }
 .grid.doors { gap:16px; margin-top:24px; }
 .card { padding:22px 20px; border-radius:16px; }
 .grid.doors .door .door-body { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { button.primary:hover, .btn.primary:hover { transform:none; } }
.welcome { text-align:left; }
.welcome .tour-offer { display:block; line-height:1.65; }
.welcome .doors { grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:stretch; }
header.top .roadmap-link { color:var(--nav-ink,var(--ink)); }
header.top .menu summary { color:var(--ink); }
header.top .menu summary:hover { color:var(--ink); background:var(--fill); }
h2,h3,h4 { font-family:var(--sans); }
.card > h2:first-child { margin-top:0; }
nav.tabs { gap:6px; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--card); width:fit-content; max-width:100%; }
nav.tabs a, nav.tabs .disabled-nav { margin:0; border:0; border-radius:9px; padding:10px 16px; }
nav.tabs a.active { background:var(--accent); color:var(--accent-ink); }
nav.tabs a:not(.active):hover { background:var(--fill); }
.organization-brand-form { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-top:20px; }
.organization-brand-form > fieldset > legend { font-family:var(--sans); font-weight:600; }
@media(max-width:600px) {
 .welcome .doors { grid-template-columns:1fr; }
 .organization-brand-form { padding:22px 18px; }
 nav.tabs { flex-wrap:wrap; overflow:visible; }
 nav.tabs a { padding:10px 12px; }
 nav.tabs.message-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
}
header.top .quick a.badge, header.top .quick a.badge.has { color:var(--nav-ink,var(--ink)); }
header.top .quick a.badge.active { color:var(--accent-ink); }
header.top .quick a.badge:hover { color:var(--nav-ink,var(--ink)); background:var(--nav-hover,var(--hover)); }
.empty { padding:24px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; background:var(--card); }

/* ===== merged from fonts/organization-fonts.css ===== */
/* Tenant font families; self-hosted SIL OFL assets. Fonts are fetched only when selected. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/lora-latin.woff2) format('woff2');
  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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-latin.woff2) format('woff2');
  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;
}

/* ===== merged from guide-v2.css ===== */
/* The tour isolates the subject with four blurred panels; no filter touches the subject itself. */
.guide-v2-shade { z-index:1000; background:transparent; }
.guide-blur { position:fixed; background:rgb(5 12 22 / 56%); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:none; transition:left 280ms cubic-bezier(.22,1,.36,1),top 280ms cubic-bezier(.22,1,.36,1),width 280ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1); }
.guide-v2-ring { z-index:1001; border-radius:10px; box-shadow:0 0 0 3px var(--line), var(--shadow); transition:left 280ms cubic-bezier(.22,1,.36,1),top 280ms cubic-bezier(.22,1,.36,1),width 280ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1); }
.guide-v2-card { transition:left 280ms cubic-bezier(.22,1,.36,1),top 280ms cubic-bezier(.22,1,.36,1); z-index:1002; box-sizing:border-box; width:min(360px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:22px 18px 16px; border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 48px rgb(0 0 0 / 35%); }
.guide-v2-card .guide-count { margin:0 36px 8px 0; font-size:12px; letter-spacing:.04em; }
.guide-v2-card .guide-title { font-size:19px; line-height:1.3; }
.guide-v2-card .guide-text { font-size:15px; line-height:1.55; color:var(--ink); }
.guide-v2-card .guide-audio { margin:0 0 12px; font-size:12px; line-height:1.45; color:var(--muted); }
.guide-v2-card .guide-foot { flex-wrap:wrap; }
.guide-v2-card .guide-mute { margin-right:auto; }
.guide-v2-card .guide-foot button { min-height:44px; }
.guide-v2-card .guide-x { top:5px; right:5px; width:44px; height:44px; font-size:26px; }
.guide-v2-card button:focus-visible { outline:3px solid var(--line); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .guide-v2-ring,.guide-v2-card,.guide-blur { animation:none; transition:none; } }

/* ===== merged from support.css ===== */
/* Support uses the same button, dialog and menu tokens as the portal. */
body.support-widget-present > main { padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
.support-bar { position:fixed; z-index:120; right:12px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:4px; width:max-content; max-width:calc(100vw - 24px); padding:6px; border:0; border-radius:12px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.support-bar button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:40px; min-height:40px; margin:0; padding:8px 14px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:600 14px/1.25 var(--sans,system-ui); cursor:pointer; transition:background 140ms ease, color 140ms ease; }
.support-bar .support-position { width:40px; padding:0; color:var(--muted); }
.support-bar svg { flex:none; width:18px; height:18px; }
.support-bar button:hover { background:var(--hover); color:var(--ink); }
.support-bar .support-switch { min-width:132px; background:var(--fill); }
.support-bar .support-switch[aria-checked="true"] { background:var(--accent); color:var(--accent-ink); }
.support-bar .support-switch[aria-checked="true"]:hover { filter:brightness(1.08); }
.support-bar button:focus-visible, .support-help button:focus-visible, .support-panel :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.support-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
body.support-picking, body.support-picking * { cursor:crosshair; }
body.support-picking .support-bar, body.support-picking .support-bar *, body.support-picking .help-menu, body.support-picking .help-menu * { cursor:pointer; }
.support-picked { outline:3px solid var(--err)!important; outline-offset:3px; }
body.support-picking [data-support-disabled] { opacity:.55; }
.support-indicator { display:none; }
.support-panel { position:fixed; inset:0; width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; margin:auto; padding:24px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.support-panel::backdrop { background:var(--scrim); }
.support-panel h2 { margin:0 0 6px; color:var(--ink); font-size:21px; line-height:1.3; font-weight:650; text-transform:none; letter-spacing:-.02em; }
.support-panel .support-where { margin:0 0 16px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.support-panel label { display:block; margin:14px 0 6px; font-size:14px; color:var(--ink); font-weight:500; }
.support-panel select, .support-panel textarea { display:block; width:100%; box-sizing:border-box; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--field); color:var(--ink); font:inherit; }
.support-panel textarea { min-height:112px; resize:vertical; }
.support-evidence, .support-result { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.support-evidence { color:var(--muted); }
.support-result:empty { display:none; }
.support-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.support-actions button { min-height:40px; }
.support-actions button.primary { background:var(--accent); color:var(--accent-ink); }
.support-actions button:disabled { opacity:.65; cursor:wait; }
/* All three Help rows use the same surface, type scale and hit area. */
header.top .help-menu { position:relative; }
header.top .help-menu > summary { position:relative; }
header.top .help-menu .menu { right:0; top:calc(100% + 8px); width:300px; min-width:0; max-width:calc(100vw - 24px); padding:6px; z-index:130; }
header.top .help-menu .menu > a, header.top .help-menu .menu > button, header.top .help-menu .find-menu > summary { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; width:100%; height:auto; min-height:64px; box-sizing:border-box; margin:0; padding:12px 14px; border:0; border-radius:8px; color:var(--ink); background:transparent; font:inherit; font-size:14px; text-align:left; text-decoration:none; cursor:pointer; list-style:none; }
header.top .help-menu .find-menu > summary::-webkit-details-marker { display:none; }
header.top .help-menu .menu > a:hover, header.top .help-menu .menu > button:hover, header.top .help-menu .find-menu > summary:hover { background:var(--hover); }
header.top .help-menu .menu > a:focus-visible, header.top .help-menu .menu > button:focus-visible, header.top .help-menu .find-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
header.top .help-menu .help-name { color:var(--ink); font-size:14px; font-weight:600; line-height:1.35; }
header.top .help-menu .help-what { display:block; margin:0; color:var(--muted); font-size:12px; font-weight:400; line-height:1.45; white-space:normal; }
header.top .help-menu .find-box { overflow:hidden; padding:0 8px 8px; }
header.top .help-menu form.find, header.top .help-menu form.find:focus-within { position:relative; display:block; inset:auto; margin:0; padding:0; }
header.top .help-menu form.find input, header.top .help-menu form.find:focus-within input { width:100%; height:44px; padding:0 12px 0 34px; color:var(--ink); border:1px solid var(--line); background:var(--field); cursor:text; }
header.top .help-menu form.find input::placeholder { color:var(--muted); }
header.top .help-menu form.find .find-icon { top:14px; left:11px; }
header.top .help-menu .find-list { position:relative; inset:auto; width:100%; max-height:35vh; overflow:auto; margin:4px 0 0; box-shadow:none; }
header.top .help-menu .find-list li a { display:flex; flex-direction:column; gap:1px; }
@media(max-width:520px) { .support-panel { padding:20px; } .support-bar { bottom:calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media(prefers-reduced-motion:reduce) { .support-bar button { transition:none; } }

/* One row and one spacing rhythm, including the boundary after Quick reference. */
header.top .tray { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:4px; }
header.top .quick { gap:4px; flex-shrink:0; }
header.top form.theme { margin:0; flex-shrink:0; }
header.top .tray > details { flex-shrink:0; }
header.top .quick a.badge, header.top form.theme button,
header.top .tray > details > summary { width:40px; height:44px; }
@media (max-width:600px) {
  header.top { height:60px; min-height:60px; padding:8px 12px; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; }
  header.top .clock { display:none; }
  header.top .brand, header.top .brand.wide { grid-column:1; grid-row:1; min-width:0; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  header.top .brand.wide b { display:inline; }
  header.top .tray { grid-column:2; grid-row:1; }
  header.top .quick a.badge, header.top form.theme button,
  header.top .tray > details > summary { width:clamp(28px,9vw,36px); }
}

/* ===== merged from floating.css ===== */
/* The top control belongs to the page footer, separate from the Support toolbar. */
.portal-top-row { display:flex; justify-content:flex-end; margin-top:24px; width:100%; }
body > .portal-top-row { position:fixed; bottom:16px; left:24px; right:24px; width:auto; }
.portal-top { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; min-height:40px; margin:0; padding:8px 14px; border:1px solid var(--line,var(--rule,var(--line))); border-radius:9px; background:var(--card,var(--card)); color:var(--ink,var(--white,var(--ink))); font:500 14px/1.25 var(--sans,system-ui); cursor:pointer; touch-action:none; }
.portal-top svg { width:18px; height:18px; flex:none; }
.portal-top:hover { background:var(--hover,var(--fill,var(--fill))); }
.portal-top:focus-visible { outline:2px solid var(--accent,var(--accent)); outline-offset:2px; }
dialog.support-help[open] { position:fixed; left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); margin:0; width:min(680px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.support-help::backdrop { background:var(--scrim); }
.support-help-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.support-help-head h2 { margin:0; color:var(--ink); font:650 22px/1.3 var(--sans,system-ui); text-transform:none; letter-spacing:-.02em; }
.support-help .support-help-close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:36px; height:36px; min-height:36px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.support-help-close svg { width:18px; height:18px; }
.support-help .support-help-close:hover { background:var(--hover); color:var(--ink); }
.support-help-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.support-help-steps li { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; padding:16px; border-radius:12px; background:var(--fill); }
.support-step-number { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:8px; background:var(--card); color:var(--accent); font:600 14px/1 var(--sans,system-ui); }
.support-help-steps h3 { min-height:40px; margin:0 0 6px; color:var(--ink); font:600 15px/1.35 var(--sans,system-ui); text-transform:none; letter-spacing:0; }
.support-help-steps p { margin:0; color:var(--muted); font:400 14px/1.5 var(--sans,system-ui); }
.support-help .support-help-note { margin:20px 0 0; color:var(--muted); font:400 14px/1.5 var(--sans,system-ui); }
@media(max-width:520px) {
 dialog.support-help[open] { padding:20px; }
 .support-help-head { gap:12px; margin-bottom:20px; }
 .support-help-head h2 { font-size:20px; }
 .support-help-steps { grid-template-columns:1fr; gap:10px; }
 .support-help-steps li { flex-direction:row; gap:12px; padding:14px; }
 .support-help-steps h3 { min-height:0; }
 .support-help .support-help-note { margin-top:16px; }
}

/* ===== merged from organization-branding.css ===== */
.organization-brand-form fieldset { border:0; padding:0; min-width:0; }
.organization-brand-form input,.organization-brand-form select,.organization-brand-form textarea { max-width:100%; box-sizing:border-box; }
.brand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.brand-color-input { display:flex; gap:8px; align-items:center; }
.brand-color-input input[type=color] { flex:0 0 48px; width:48px; height:42px; padding:4px; }
.brand-color-input input:last-child { min-width:0; }
.brand-color-preview { padding:16px; border:2px solid var(--accent); border-radius:8px; overflow-wrap:anywhere; }
.brand-found-color { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0; }
.brand-found-color input[type=color] { width:48px; padding:4px; }
.brand-found-color input:not([type=color]),.brand-found-color select { width:120px; }
.brand-logo-preview { display:block; object-fit:contain; max-width:100%; max-height:120px; margin:10px 0; }
.brand-logo-preview[hidden],[data-brand-findings][hidden],[data-brand-progress-bar][hidden] { display:none; }
.brand-grid figure { margin:10px 0; min-width:0; }
.brand-grid figure img { max-width:100%; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.brand-font-preview { overflow-wrap:anywhere; }
.wi-branding progress { width:100%; accent-color:var(--accent); }
.organization-logo { object-fit:contain; max-width:180px; width:auto; max-height:38px; }
.organization-logo-dark { display:none; }
:root[data-theme=dark] .organization-logo-dark { display:block; }
:root[data-theme=dark] .brand:has(.organization-logo-dark) .organization-logo-light { display:none; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) .organization-logo-dark { display:block; } :root:not([data-theme=light]) .brand:has(.organization-logo-dark) .organization-logo-light { display:none; } }
.marketing-field { margin:20px 0; min-width:0; }
.marketing-label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.marketing-label > label { margin:0; }
.marketing-info { position:relative; }
.marketing-info > summary { display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; width:26px; height:26px; font-size:14px; color:var(--ink); cursor:pointer; list-style:none; }
.marketing-info > summary::-webkit-details-marker { display:none; }
.marketing-info > div { position:absolute; z-index:1200; top:32px; left:0; box-sizing:border-box; max-height:calc(100vh - 24px); overflow:auto; width:min(300px,calc(100vw - 48px)); padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); overflow-wrap:anywhere; }
.marketing-info p { margin:4px 0 8px; font-size:14px; }
.marketing-suggestion { color:var(--muted); font-size:12px; }
.marketing-suggestion[hidden] { display:none; }
.marketing-five,.marketing-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:10px; }
.marketing-pair { grid-template-columns:1fr 2fr; margin-bottom:10px; }
.marketing-slider { display:flex; justify-content:space-between; gap:16px; }
.marketing-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.marketing-chip { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px; padding:4px 10px; background:var(--fill); max-width:100%; }
.marketing-chip input { margin:0; width:140px; min-width:0; border:0; background:transparent; padding:4px; }
.marketing-chip button { padding:2px 6px; margin:0; min-width:24px; border:0; background:transparent; }
.marketing-chip-entry { flex:1 1 160px; width:160px; min-width:0; margin:0; }
@media(max-width:520px) { .marketing-pair { grid-template-columns:1fr; } }

/* ===== merged from polaroids.css ===== */
.my-polaroid-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;margin:24px 0}
.my-polaroid {min-width:0;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.my-polaroid figure {padding:10px 10px 28px;margin:0 0 16px;background:#fff;color:#292929;box-shadow:0 5px 16px #0002}
.my-polaroid img {display:block;width:100%;height:auto;max-height:300px;object-fit:contain}
.my-polaroid figcaption,.polaroid-edge figcaption {font-family:'Bradley Hand','Comic Sans MS',cursive;text-align:center;overflow-wrap:anywhere}
.polaroid-actions {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.polaroid-edge {position:fixed;top:80px;bottom:0;width:var(--polaroid-gutter,0px);overflow:hidden;pointer-events:none;z-index:0;opacity:.7}
.polaroid-edge.left {left:0}.polaroid-edge.right {right:0}
.polaroid-edge figure {position:absolute;box-sizing:border-box;width:clamp(110px,12vw,170px);padding:9px 9px 27px;margin:0;background:#fff;color:#292929;box-shadow:0 6px 18px #0002;opacity:0;transform:translateX(var(--polaroid-enter)) rotate(var(--polaroid-tilt));transition:transform 500ms ease,opacity 500ms ease;transition-delay:var(--polaroid-delay)}
.polaroid-edge.left figure {left:6px;--polaroid-enter:-35px}.polaroid-edge.right figure {right:6px;--polaroid-enter:35px}
.polaroid-edge figure.visible {opacity:1;transform:translateX(0) rotate(var(--polaroid-tilt))}
.polaroid-edge img {width:100%;height:auto;display:block;max-height:190px;object-fit:cover}
.polaroid-edge figcaption {font-size:13px;line-height:1.3;padding-top:7px}
@media(max-width:800px){.polaroid-edge{opacity:.3}}
@media(max-width:479px){.polaroid-edge{display:none}}
@media(prefers-reduced-motion:reduce){.polaroid-edge figure{transition:none;opacity:1;transform:rotate(var(--polaroid-tilt))}}
@media print{.polaroid-edge{display:none}}

/* One transparent frame template: every photo occupies its square window. */
.my-polaroid figure,.polaroid-edge figure {position:relative;aspect-ratio:440/540;padding:0;background:transparent url('polaroid-frame.svg') center/100% 100% no-repeat;box-shadow:none}
.polaroid-edge figure {position:absolute}
.polaroid-window {position:absolute;left:6.364%;top:5.185%;width:87.273%;height:71.111%;overflow:hidden}
.my-polaroid .polaroid-window img,.polaroid-edge .polaroid-window img {width:100%;height:100%;max-height:none;object-fit:cover}
.my-polaroid figcaption,.polaroid-edge figcaption {position:absolute;left:6.364%;top:79%;width:87.273%;padding:0;max-height:16%;overflow:hidden;color:#292929}

[data-polaroid-file-preview]{max-width:160px;max-height:160px;object-fit:contain} .my-polaroid.photo-added{outline:2px solid var(--accent)}

/* ===== merged from copy.css ===== */
.nv-copy-button{display:inline-flex;align-items:center;gap:6px;transition:background-color 150ms,color 150ms,border-color 150ms}
.nv-copy-icon{flex:none;vertical-align:middle;overflow:visible}
.nv-copy-icon path{transform-origin:50% 50%;transition:opacity 150ms,transform 150ms}
.nv-copy-check{opacity:0;transform:scale(.65)}
.nv-copy-success .nv-copy-paper{opacity:0;transform:scale(.65)}
.nv-copy-success .nv-copy-check{opacity:1;transform:scale(1)}
button.nv-copy-success{background:var(--accent);color:var(--accent-ink);border-color:var(--line)}
.nv-copy-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1500;max-width:calc(100vw - 32px);width:max-content;box-sizing:border-box;padding:9px 14px;border-radius:9px;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);font-size:.9rem;pointer-events:none;overflow-wrap:anywhere}
.nv-copy-toast.error{background:var(--err-bg);color:var(--err);border:1px solid var(--err)}
.nv-copy-toast[hidden]{display:none}
.nv-copy-fallback{display:block;width:100%;box-sizing:border-box;margin-top:10px}
@media(prefers-reduced-motion:reduce){.nv-copy-button,.nv-copy-icon path{transition:none}}

/* ===== merged from expert-chat.css ===== */
/* Shared Experts chat presentation; existing IDs and behavior stay unchanged. */
.expert-chat.wi-expert-panel { padding:clamp(1rem,3vw,1.7rem); border:1px solid var(--line); border-radius:20px; background:var(--card); margin:1.25rem 0 2rem; }
.expert-chat.wi-expert-panel[hidden] { display:none; }
.expert-chat .wi-expert-heading { display:flex; gap:.85rem; align-items:flex-start; }
.expert-chat .wi-expert-heading > div { flex:1; min-width:0; }
.expert-chat .wi-expert-heading h2 { font-size:1.25rem; margin:0 0 .35rem; }
.expert-chat .wi-expert-heading p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.expert-chat .wi-expert-mark { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:14px; background:var(--fill); color:var(--accent); font-size:1.4rem; }
.expert-chat .wi-chat-close { border:0; background:transparent; padding:0 .3rem; min-height:32px; font-size:1.6rem; color:var(--muted); }
.expert-chat .wi-chat-fields { display:grid; gap:.55rem; margin:1.5rem 0; }
.expert-chat .wi-chat-fields label, .expert-chat .wi-chat-preview label { font-size:.85rem; font-weight:600; color:var(--ink); }
.expert-chat .wi-chat-fields label:not(:first-child) { margin-top:.65rem; }
.expert-chat .wi-select-wrap { position:relative; min-width:0; }
.expert-chat .wi-select-wrap select { appearance:none; padding: .85rem 2.4rem .85rem 1rem; border-radius:12px; width:100%; min-width:0; max-width:100%; }
.expert-chat .wi-select-wrap > span { position:absolute; right:1rem; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }
.expert-chat .wi-chat-preview { opacity:.55; }
.expert-chat .wi-chat-preview textarea { margin:.55rem 0 .8rem; resize:vertical; border-radius:12px; }
.expert-chat .wi-chat-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; }
.expert-chat .wi-coming { font-size:.8rem; color:var(--muted); background:var(--fill); padding:.3rem .7rem; border-radius:2rem; }
.expert-chat.wi-expert-panel :disabled { cursor:not-allowed; }
.expert-chat .wi-chat-note { margin:1rem 0 0; font-size:.8rem; color:var(--muted); }

.expert-chat--pending .wi-expert-mark { color:var(--muted); }
.expert-chat--pending .wi-chat-fields { opacity:.55; }

/* ===== merged from web-intelligence.css ===== */
/* The existing Reports page inherits the portal's type and both theme palettes. */
.web-intelligence .crumbs { display:flex; flex-wrap:wrap; gap:.4rem; }
.web-intelligence .wi-tenants { display:grid; gap:.5rem; margin:1.25rem 0; max-width:36rem; }
.web-intelligence .wi-tenants label { color:var(--muted); font-size:.85rem; }
.web-intelligence .wi-tenants select { min-width:0; width:100%; max-width:100%; }
.web-intelligence .wi-period { border-bottom:1px solid var(--line); margin:0; }
.web-intelligence .wi-period > summary { cursor:pointer; padding:1.15rem 0; font-weight:600; font-size:1.05rem; }
.web-intelligence .wi-report-list { list-style:none; margin:0; padding:0 0 .8rem; }
.web-intelligence .wi-report-list > li { padding:.65rem 0; line-height:1.6; }
.web-intelligence .wi-week { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.web-intelligence .wi-date { font-variant-numeric:tabular-nums; }
.web-intelligence .wi-year { color:var(--muted); font-size:.8em; }
.web-intelligence .wi-family-links { display:inline-flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.web-intelligence .wi-separator, .web-intelligence .wi-unavailable, .web-intelligence .wi-empty { color:var(--muted); }
.web-intelligence .wi-unavailable { opacity:.65; }
.web-intelligence .wi-empty { font-size:.9rem; padding-bottom:.8rem; }
.web-intelligence .wi-back { margin:1.5rem 0; }
.web-intelligence { width:100%; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.web-intelligence .wi-document { width:100%; min-width:0; max-width:100%; line-height:1.8; overflow-wrap:anywhere; color:var(--ink); }
.web-intelligence .wi-document * { max-width:100%; box-sizing:border-box; }
.web-intelligence .wi-document h1 { font-size:1.6rem; }
.web-intelligence .wi-document h2 { font-size:1.3rem; border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2rem; }
.web-intelligence .wi-document h3 { font-size:1.1rem; margin-top:1.5rem; }
.web-intelligence .wi-document p { margin:.85rem 0; }
.web-intelligence .wi-document li { margin:.45rem 0; }
.web-intelligence .wi-document table { width:100%; table-layout:fixed; border-collapse:collapse; margin:1rem 0; font-size:.85rem; line-height:1.55; }
.web-intelligence .wi-document th, .web-intelligence .wi-document td { border-bottom:1px solid var(--line); padding:.65rem .75rem; text-align:left; vertical-align:top; min-width:0; overflow-wrap:anywhere; }
.web-intelligence .wi-document th { background:var(--fill); font-weight:600; }
.web-intelligence .wi-document blockquote { margin:1rem 0; border-left:2px solid var(--accent); padding:.25rem 1rem; }
.web-intelligence .wi-document pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.web-intelligence .wi-document iframe, .web-intelligence .wi-document object, .web-intelligence .wi-document embed { width:100%; max-width:100%; }
.web-intelligence .wi-period > summary:focus-visible, .web-intelligence a:focus-visible { outline:2px solid var(--line); outline-offset:4px; }
@media(max-width:480px) { .web-intelligence .wi-family-links { gap:.5rem; } .web-intelligence .wi-report-list > li { padding:.8rem 0; } }

.web-intelligence .wi-selected { margin:1.25rem 0 .5rem; }
.web-intelligence .wi-selected h2 { font-size:1.15rem; margin:0 0 .75rem; overflow-wrap:anywhere; }
.web-intelligence .wi-access { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1.5rem; margin:0 0 1rem; }
.web-intelligence .wi-access > div { min-width:0; }
.web-intelligence .wi-access dt { color:var(--muted); font-size:.85rem; }
.web-intelligence .wi-access dd { margin:.15rem 0 0; font-size:.9rem; }
.web-intelligence .wi-tenant-links { display:flex; flex-wrap:wrap; gap:.75rem; }
@media(max-width:480px) {
  .web-intelligence .wi-access { grid-template-columns:1fr; }
  .web-intelligence .wi-access > div { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
  .web-intelligence .wi-access dd { flex-shrink:0; }
}

.web-intelligence nav.wi-tabs { flex-wrap:wrap; overflow:visible; }
.web-intelligence .wi-experts-tab small { display:inline-block; margin-left:.4rem; font-size:.65rem; font-weight:500; padding:.15rem .4rem; border-radius:2rem; background:var(--fill); color:var(--muted); }
.web-intelligence .wi-report-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin:1.5rem 0 1rem; }
.web-intelligence .wi-report-heading h2 { margin:0; font-size:1.25rem; min-width:0; }
.web-intelligence .wi-chat-launch { display:inline-grid; place-items:center; width:42px; height:42px; padding:0; flex-shrink:0; border-radius:50%; color:var(--accent); }
.web-intelligence .wi-chat-launch:hover { background:var(--fill); }
.web-intelligence .wi-report-actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:1rem 0; }
.web-intelligence .wi-copy { display:inline-flex; align-items:center; gap:.5rem; }
.web-intelligence [data-copy-status] { font-size:.85rem; color:var(--muted); }
.web-intelligence .wi-copy-text { width:100%; min-width:0; white-space:pre-wrap; margin:.5rem 0 1.5rem; }
.web-intelligence .wi-chart { margin:1.5rem 0; width:100%; min-width:0; }
.web-intelligence .wi-chart-plot { position:relative; width:100%; min-width:0; height:clamp(220px,35vw,320px); }
@media(max-width:600px) {
  .web-intelligence .wi-document table, .web-intelligence .wi-document tbody { display:block; }
  .web-intelligence .wi-document .wi-table-header { display:none; }
  .web-intelligence .wi-document tr:not(.wi-table-header) { display:block; border:1px solid var(--line); border-radius:10px; padding:.35rem .75rem; margin:.75rem 0; }
  .web-intelligence .wi-document tr:not(.wi-table-header) > td, .web-intelligence .wi-document tr:not(.wi-table-header) > th { display:block; width:100%; padding:.55rem 0; }
  .web-intelligence .wi-document td[data-label]:before { content:attr(data-label); display:block; margin-bottom:.25rem; font-weight:600; color:var(--muted); }
  .web-intelligence .wi-chat-actions .primary { width:100%; }
}
.web-intelligence .wi-report-paragraph { white-space:pre-line; }
.web-intelligence .wi-chart figcaption { font-weight:600; margin-bottom:.8rem; line-height:1.4; }
.web-intelligence .wi-chart-unit, .web-intelligence .wi-document-period { color:var(--muted); }
.web-intelligence .wi-chart-values, .web-intelligence .wi-source-values { margin:.8rem 0 1.4rem; }
.web-intelligence .wi-chart-values summary, .web-intelligence .wi-source-values summary { cursor:pointer; color:var(--muted); font-size:.9rem; }
.web-intelligence .wi-value-list { margin:.75rem 0; padding:0; }
.web-intelligence .wi-value-list > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem 1.5rem; border-bottom:1px solid var(--line); padding:.65rem 0; min-width:0; }
.web-intelligence .wi-value-list dt { color:var(--muted); font-size:.9rem; }
.web-intelligence .wi-value-list dd { margin:0; min-width:0; white-space:pre-line; }
.web-intelligence .wi-value-list dd small { display:block; color:var(--muted); margin-top:.3rem; }
.web-intelligence .wi-source-row { border:1px solid var(--line); border-radius:12px; padding:.35rem 1rem; }
.web-intelligence .wi-source-row > div:last-child { border:0; }
@media(max-width:600px) { .web-intelligence .wi-value-list > div { grid-template-columns:minmax(0,1fr); gap:.25rem; } }

.wi-report-version { margin:18px 0; padding:16px; border:1px solid var(--line); border-radius:12px; }
.wi-report-version label { display:block; margin-bottom:6px; font-weight:600; }
.wi-report-version select { width:min(100%,280px); }
.wi-report-version p { margin:8px 0; }
.wi-report-version .bad { color:var(--bad,var(--err)); }

/* ===== merged from usage-costs.css ===== */
.usage-chart { margin:24px 0; width:100%; min-width:0; }
.usage-chart>div { position:relative; height:320px; }
.cost-table { width:100%; border-collapse:collapse; font-size:14px; }
.cost-table th,.cost-table td { padding:10px 6px; text-align:left; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.cost-table th small { display:block; font-weight:normal; }
@media(max-width:760px){.cost-table,.cost-table tbody,.cost-table tr,.cost-table td,.cost-table th{display:block;}.cost-table thead{display:none;}.cost-table tr{border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0;}.cost-table td{display:flex;justify-content:space-between;gap:12px;}.cost-table td::before{content:attr(data-label);font-weight:600;}.usage-chart>div{height:280px;}}

/* ===== merged from roadmap.css ===== */
/* The Roadmap (Joe, 2026-10-08): tabs across the top, one video per tab, and the Tool roadmap; NexVerto's own look. */
.roadmap{width:100%;min-width:0;box-sizing:border-box;color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif}
.roadmap-head h1{font-family:"IBM Plex Sans",system-ui,sans-serif!important;font-weight:600!important;font-size:clamp(26px,3vw,36px)!important;letter-spacing:-.02em!important;margin:0 0 18px}
.roadmap-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;margin:0 0 18px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.roadmap-tabs [role=tab]{flex:1 1 auto;padding:10px 16px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 15px/1.2 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.roadmap-tabs [role=tab]:hover{background:var(--fill)}
.roadmap-tabs [role=tab][aria-selected=true]{background:var(--accent);color:#fff}
.roadmap-panel video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;object-fit:contain;box-shadow:0 14px 40px rgba(16,79,182,.14)}
.roadmap-audio{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,var(--accent),#0b1220);color:#fff}
.roadmap-audio span{font-size:64px;line-height:1}.roadmap-audio audio{width:80%}
.roadmap-size{margin:10px 2px 0;font-size:12px;font-weight:600;color:var(--accent)}
.roadmap-note{margin:8px 2px 0;color:var(--muted);font-size:14px}
.tool-roadmap{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tool-roadmap li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.tool-roadmap strong{font-size:15px}.tool-roadmap span{font-size:13px;color:var(--muted)}
@media(max-width:600px){.roadmap-tabs [role=tab]{flex:1 1 45%;font-size:14px;padding:10px}}

/* ===== merged from a client file ===== */
/* The portal's consistent look (Joe, 2026-10-08). Colours and fonts come from the saved theme profile
   (portal/themes/<PORTAL_THEME>.json, appended when served); the Roadmap keeps NexVerto. Fonts: SIL OFL, self-hosted. */
/* NexVerto's typeface for the Roadmap: kept here, after the served token cut, so it is never dropped (2026-10-08). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/static/fonts/ibm-plex-sans.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/instrument-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/instrument-serif-latin.woff2) format("woff2")}
html[data-portal-brand="deployment"] body{font-family:var(--sans);background:var(--bg);color:var(--ink)}
html[data-portal-brand="deployment"] h1,html[data-portal-brand="deployment"] h2{font-family:var(--heading);font-weight:400;letter-spacing:-.01em}
/* a client logo top left on a white header, as on a client (Joe, 2026-10-08). */
html[data-portal-brand="deployment"] header.top{background:var(--header-bg,var(--nav));color:var(--header-ink,var(--nav-ink));border-bottom:1px solid var(--header-line,var(--line));box-shadow:0 2px 12px var(--rail-lift)}
html[data-portal-brand="deployment"] .portal-logo{display:block;height:40px;width:auto;max-width:180px;background:var(--logo-plate,transparent);border-radius:8px}
@media(max-width:600px){html[data-portal-brand="deployment"] .portal-logo{height:32px}}
/* ONE consistent portal (Joe, 2026-10-08): the same text, colours, sizes, buttons, fields and surfaces on the portal
   and on every tool screen inside it. These rules come last and win over each tool's own stylesheet. */
html[data-portal-brand="deployment"]{font-size:16px}
html[data-portal-brand="deployment"] body,html[data-portal-brand="deployment"] :is(button,input,select,textarea,table,p,li,label,td,th,span,a,small,strong){font-family:var(--sans)!important}
html[data-portal-brand="deployment"] main :is(h1){font-family:var(--heading)!important;font-weight:400!important;font-size:clamp(28px,3.2vw,40px)!important;line-height:1.15!important;color:var(--ink)!important;letter-spacing:-.01em}
html[data-portal-brand="deployment"] main :is(h2){font-family:var(--heading)!important;font-weight:400!important;font-size:clamp(22px,2.4vw,28px)!important;line-height:1.2!important;color:var(--ink)!important}
html[data-portal-brand="deployment"] main :is(h3){font-family:var(--sans)!important;font-weight:600!important;font-size:18px!important;color:var(--ink)!important}
html[data-portal-brand="deployment"] main :is(p,li,label,td,th,dd,dt){font-size:15px;line-height:1.55;color:var(--ink)}
html[data-portal-brand="deployment"] main :is(small,.muted,.hint,.help,.desc,.door-desc){color:var(--muted)!important}
/* Buttons: one primary style, one secondary style, everywhere. */
html[data-portal-brand="deployment"] main :is(button,.btn,input[type=submit],input[type=button],a.button):not(.door):not([class*="toggle"]):not([class*="close"]):not([class*="icon"]):not([class*="tab"]):not(.roadmap-step-head){border-radius:10px!important;font-weight:600!important;font-size:15px!important;padding:10px 18px!important;min-height:42px;border:1px solid var(--accent)!important;background:var(--card)!important;color:var(--accent)!important;box-shadow:none!important;transition:background .15s,color .15s}
html[data-portal-brand="deployment"] main :is(.btn.primary,button.primary,button[type=submit],input[type=submit],.primary-action){background:var(--accent)!important;color:var(--accent-ink)!important}
html[data-portal-brand="deployment"] main :is(button,.btn,input[type=submit]):not(:disabled):hover{background:var(--accent)!important;color:var(--accent-ink)!important}
html[data-portal-brand="deployment"] main :is(button,.btn,input[type=submit]):disabled{opacity:.55;cursor:not-allowed}
/* Fields: one input style. */
html[data-portal-brand="deployment"] main :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,textarea){border:1px solid var(--line)!important;border-radius:10px!important;background-color:var(--field)!important;color:var(--ink)!important;font-size:15px!important;padding:10px 12px!important;min-height:42px;box-shadow:none!important}
html[data-portal-brand="deployment"] main :is(input,select,textarea):focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:1px;border-color:var(--accent)!important}
html[data-portal-brand="deployment"] main :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}
/* Surfaces: cards and panels share one look. */
html[data-portal-brand="deployment"] main :is(.card,.panel,.door,.box,section.card,fieldset.card){background:var(--card)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--card-shadow)!important;color:var(--ink)}
html[data-portal-brand="deployment"] main :is(table){border-collapse:collapse;width:100%}
html[data-portal-brand="deployment"] main :is(th){background:var(--fill)!important;color:var(--ink)!important;font-weight:600!important;text-align:left}
html[data-portal-brand="deployment"] main :is(th,td){border-bottom:1px solid var(--line)!important;padding:10px 12px}
html[data-portal-brand="deployment"] main a:not(.btn):not(.door):not(.button){color:var(--link)}
/* Tabs: one style. */
html[data-portal-brand="deployment"] main :is(nav.tabs,[role=tablist]) :is(a,button){border-radius:999px!important;font-weight:600!important;font-size:14px!important}
html[data-portal-brand="deployment"] main :is(nav.tabs,[role=tablist]) :is(a[aria-current],button[aria-selected=true],.active,.is-active){background:var(--accent)!important;color:var(--accent-ink)!important}
/* Finish (Joe, 2026-10-08): one calm, finished look on every screen, from the theme profile's tokens only. */
html[data-portal-brand="deployment"] body{background:linear-gradient(180deg,var(--fill) 0,var(--bg) 360px) no-repeat,var(--bg)}
html[data-portal-brand="deployment"] main{max-width:1040px}
html[data-portal-brand="deployment"] .welcome>h1{margin-bottom:10px}
html[data-portal-brand="deployment"] .welcome .tour-offer{color:var(--muted);max-width:620px;margin:0 auto}
html[data-portal-brand="deployment"] .doors{gap:20px}
html[data-portal-brand="deployment"] .door{border-radius:16px;box-shadow:var(--card-shadow)}
html[data-portal-brand="deployment"] .door.soon{border-style:solid;background:var(--card);opacity:.92}
html[data-portal-brand="deployment"] .door.soon .door-art{filter:saturate(.35);opacity:.7}
html[data-portal-brand="deployment"] .door.soon .door-name{color:var(--ink)}
html[data-portal-brand="deployment"] :is(.tag,.badge,.pill){display:inline-flex;align-items:center;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--fill);color:var(--accent);border:1px solid var(--line)}
html[data-portal-brand="deployment"] main :is(h1+p,h2+p){margin-top:6px}
html[data-portal-brand="deployment"] main section+section{margin-top:28px}
html[data-portal-brand="deployment"] main hr{border:0;border-top:1px solid var(--line);margin:28px 0}
@media(max-width:600px){html[data-portal-brand="deployment"] main :is(table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}html[data-portal-brand="deployment"] .doors{gap:14px}}
/* ONE GREY-OUT, EVERY PAGE (Joe, 2026-10-08): anything not ready looks the same everywhere, greyed with one small
   label (Coming soon / Requires setup / Maintenance). No fine-print sentences. The portal owns this look; tools only say
   what is not ready. */
html[data-portal-brand="deployment"] :is(.door.soon,.tool-card.off,.tool .rail .off,.disabled-nav,.disabled-link,.disabled-control,[aria-disabled="true"]):not(.soon-pill){opacity:.55!important;filter:grayscale(1);cursor:not-allowed!important;text-decoration:none!important}
html[data-portal-brand="deployment"] main :is(button,input,select,textarea):disabled{opacity:.55!important;filter:grayscale(1);cursor:not-allowed!important}
html[data-portal-brand="deployment"] :is(.soon-pill,.door .tag,.tool-state .pill:not(.on),.maintenance-inline,.maintenance-note,.tool .rail .off em,.disabled-nav small,.tool .rail .off small,.wi-experts-tab small){display:inline-flex!important;align-items:center;width:auto!important;max-width:none!important;margin:4px 0 0!important;padding:2px 10px!important;border-radius:999px!important;border:1px solid var(--line)!important;background:var(--fill)!important;color:var(--muted)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;line-height:1.6!important;white-space:nowrap!important;opacity:1!important;filter:none!important;font-style:normal!important}
html[data-portal-brand="deployment"] .described .maintenance-notice{border-left:1px solid var(--line)!important;background:var(--fill)!important;color:var(--muted)!important}
html[data-portal-brand="deployment"] .card.maint p:first-child{margin-bottom:8px}
/* Seen on the live portal through the owner's device view (Joe, 2026-10-08): headings read as words, not shouted
   labels; every tool's status card has the same edge. */
html[data-portal-brand="deployment"] main h2{text-transform:none!important;letter-spacing:-.01em!important}
html[data-portal-brand="deployment"] .tool .tool-status,html[data-portal-brand="deployment"] .tool-status{border-left:4px solid var(--accent)!important}
html[data-portal-brand="deployment"] .portal-top-row[hidden]{display:none!important}
/* Picture tiles for a tool's list (Joe, 2026-10-08): the media library is pictures, not a 1999 table. */
html[data-portal-brand="deployment"] .tiles{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
html[data-portal-brand="deployment"] .tile-open{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:var(--card-shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
html[data-portal-brand="deployment"] a.tile-open:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
html[data-portal-brand="deployment"] .tile-pic{display:block;position:relative;height:0;padding-top:75%;overflow:hidden;background:var(--fill);border-bottom:1px solid var(--line)}
html[data-portal-brand="deployment"] .tile-pic img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain}
html[data-portal-brand="deployment"] .tile-name{padding:12px 14px 2px;font-weight:600;font-size:15px;line-height:1.35}
html[data-portal-brand="deployment"] .tile-meta{padding:0 14px 14px;font-size:13px;color:var(--muted)}
@media(max-width:600px){html[data-portal-brand="deployment"] .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Apply on pick (Joe, 2026-10-08): a form that saves on change shows no Save button. */
html[data-portal-brand="deployment"] form.instant-ready :is(button[type=submit],.act){display:none!important}
/* Switches, not boxes (Joe, 2026-10-08): every on/off checkbox in the portal is drawn as a switch. */
html[data-portal-brand="deployment"] main input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:40px;height:24px;margin:0 8px 0 0;border-radius:999px;background:var(--line);border:0;cursor:pointer;transition:background .2s;vertical-align:middle}
html[data-portal-brand="deployment"] main input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
html[data-portal-brand="deployment"] main input[type=checkbox]:checked{background:var(--accent)}
html[data-portal-brand="deployment"] main input[type=checkbox]:checked::after{transform:translateX(16px)}
html[data-portal-brand="deployment"] main input[type=checkbox]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
html[data-portal-brand="deployment"] main input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
/* Row actions (Joe, 2026-10-08): more than two fold into one menu; the menu opens to a clean list. */
html[data-portal-brand="deployment"] .row-menu{position:relative;display:inline-block}
html[data-portal-brand="deployment"] .row-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 14px;border:1px solid var(--accent);border-radius:10px;color:var(--accent);font-weight:600;font-size:14px;background:var(--card)}
html[data-portal-brand="deployment"] .row-menu>summary::-webkit-details-marker{display:none}
html[data-portal-brand="deployment"] .row-menu>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
html[data-portal-brand="deployment"] .row-menu[open]>summary{background:var(--accent);color:var(--accent-ink)}
html[data-portal-brand="deployment"] .row-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:180px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
html[data-portal-brand="deployment"] .row-menu-list form{margin:0}
html[data-portal-brand="deployment"] main .row-menu-list button{width:100%;justify-content:flex-start;text-align:left;border:0!important;background:transparent!important;color:var(--ink)!important;min-height:36px;padding:8px 12px!important;border-radius:8px!important;font-weight:500!important}
html[data-portal-brand="deployment"] main .row-menu-list button:hover{background:var(--fill)!important;color:var(--accent)!important}
/* Phone cards for tool lists (Joe, 2026-10-08): compact, no line under every value; labels and badges sit together. */
@media(max-width:600px){
  html[data-portal-brand="deployment"] .described tbody tr{padding:14px 16px!important;margin:0 0 10px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--card)!important}
  html[data-portal-brand="deployment"] .described tbody td{border:0!important;padding:3px 0!important}
  html[data-portal-brand="deployment"] .described tbody td:first-child{font-size:16px;font-weight:600;padding-bottom:6px!important}
  html[data-portal-brand="deployment"] .described tbody td:has(> .badge){display:inline-block!important;width:auto!important;margin-right:6px}
  html[data-portal-brand="deployment"] .described tbody td.acts{padding-top:10px!important}
}
/* Change log (Joe, 2026-10-08): at the bottom of the settings menu, under a rule, in lighter text. */
header.top details .menu hr.menu-rule{border:0;border-top:1px solid var(--line);margin:6px 4px}
header.top details .menu a.m-changelog{color:var(--muted);font-size:13px}
header.top details .menu .m-onboarding{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px}
@media(max-width:600px){header.top details .menu .m-onboarding{padding:12px}}
html[data-portal-brand="deployment"] .changelog-entry{margin:0 0 32px}
html[data-portal-brand="deployment"] .changelog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
html[data-portal-brand="deployment"] .changelog-meta{color:var(--muted);font-size:14px}
html[data-portal-brand="deployment"] .changelog-tool{margin:12px 0;padding:0!important}
html[data-portal-brand="deployment"] .changelog-tool>summary{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;cursor:pointer;list-style:none}
html[data-portal-brand="deployment"] .changelog-tool>summary::-webkit-details-marker{display:none}
html[data-portal-brand="deployment"] .changelog-tool-name{font-weight:600;font-size:17px}
html[data-portal-brand="deployment"] .changelog-counts{color:var(--muted);font-size:13px}
html[data-portal-brand="deployment"] .changelog-tool h3{margin:4px 20px 6px!important;font-size:14px!important;color:var(--muted)!important;text-transform:uppercase;letter-spacing:.04em}
html[data-portal-brand="deployment"] .changelog-list{margin:0 20px 16px;padding-left:18px}
html[data-portal-brand="deployment"] .changelog-list li{margin:4px 0}
/* The one AI mark (Joe, 2026-10-08): wherever something needs an AI key, it carries this. */
html[data-portal-brand="deployment"] .ai-mark{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:18px;padding:0 6px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--art-to,var(--accent)));color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;vertical-align:middle}
/* The portal's drop-down (Joe, 2026-10-08): one high-quality look for every select, and the section picker that
   replaces a row of more than four tabs. */
html[data-portal-brand="deployment"] main select{appearance:none!important;-webkit-appearance:none!important;padding-right:44px!important;background-color:var(--field)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B5E8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html[data-portal-brand="deployment"] main select:hover{border-color:var(--accent)!important}
html[data-portal-brand="deployment"] main select:focus-visible{box-shadow:0 0 0 4px var(--focus-ring)!important}
html[data-portal-brand="deployment"] .pick-nav{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:10px 12px 10px 18px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow);max-width:460px}
html[data-portal-brand="deployment"] .pick-nav label{margin:0;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
html[data-portal-brand="deployment"] main .pick-nav select{flex:1;font-weight:600!important;color:var(--accent)!important;border-color:transparent!important;background-color:var(--fill)!important;min-height:44px}
/* The AI ledger (Joe, 2026-10-08): green dot = a key is saved, red dot = none; one switch per AI feature, off by default. */
html[data-portal-brand="deployment"] .ai-ledger{margin-top:28px}
html[data-portal-brand="deployment"] .ai-ledger h2{display:flex;align-items:center;gap:10px}
html[data-portal-brand="deployment"] .ai-services{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
html[data-portal-brand="deployment"] .ai-services li{display:inline-flex;align-items:center;gap:8px;font-size:14px}
html[data-portal-brand="deployment"] .dot{display:inline-block;flex:0 0 auto;width:10px;height:10px;border-radius:50%}
html[data-portal-brand="deployment"] .dot.on{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
html[data-portal-brand="deployment"] .dot.off{background:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
html[data-portal-brand="deployment"] .ai-section{margin:12px 0;padding:16px 20px!important}
html[data-portal-brand="deployment"] .ai-section h3{margin:0 0 8px!important}
html[data-portal-brand="deployment"] .ai-features{list-style:none;margin:0;padding:0}
html[data-portal-brand="deployment"] .ai-features li{padding:8px 0;border-top:1px solid var(--line)}
html[data-portal-brand="deployment"] .ai-cost-line{margin:4px 0 0 0;font-size:.875rem}
html[data-portal-brand="deployment"] .ai-cost-ok{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:10px 12px;border:1px solid var(--attention, #D97706);border-radius:10px;font-weight:600}
html[data-portal-brand="deployment"] .ai-cost-ok[hidden]{display:none}
html[data-portal-brand="deployment"] .ai-review{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:8px 0 0}
html[data-portal-brand="deployment"] .ai-review input[type=text]{flex:1 1 220px;min-width:0}
html[data-portal-brand="deployment"] .ai-features li:first-child{border-top:0}
html[data-portal-brand="deployment"] .ai-features form{margin:0}
html[data-portal-brand="deployment"] .ai-switch{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer}
html[data-portal-brand="deployment"] .ai-label{flex:1}
/* AI folded away (Joe, 2026-10-08): one small AI note where a switched-off AI feature would be. */
html[data-portal-brand="deployment"] .ai-fold{margin:8px 0 14px;font-size:13px;color:var(--muted)}
html[data-portal-brand="deployment"] .ai-fold>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
html[data-portal-brand="deployment"] .ai-fold>summary::-webkit-details-marker{display:none}
html[data-portal-brand="deployment"] .ai-fold p{margin:6px 0 0}
/* TOP BAR, ONE LOOK (Joe, 2026-10-08): every icon in the bar looks the same (no stray boxes); only the page you are on is
   filled. On phones the icons sit a little closer so the bar is not crowded. */
html[data-portal-brand="deployment"] header.top .quick a.badge:not(.active){border:0!important;box-shadow:none!important;background:transparent}
html[data-portal-brand="deployment"] header.top .quick a.badge:not(.active):hover{background:var(--hover)}
@media(max-width:600px){
  html[data-portal-brand="deployment"] header.top{padding:0 12px}
  html[data-portal-brand="deployment"] header.top .quick{gap:0}
  html[data-portal-brand="deployment"] header.top :is(.quick a.badge,a.guide-start,form.theme button,details summary){width:38px;height:40px}
  html[data-portal-brand="deployment"] .portal-logo{height:28px;max-width:104px}
}
/* ONE ORGANIZATION SWITCH (Joe, 2026-10-08): every tool's switch looks like Web Intelligence's, label above, full width
   up to the same size; the tool's maintenance line is one slim row, no fine print. */
html[data-portal-brand="deployment"] .tool .scope-pick{display:grid;gap:.5rem;margin:1.25rem 0;max-width:36rem}
html[data-portal-brand="deployment"] .tool .scope-pick label{color:var(--muted);font-size:.85rem}
html[data-portal-brand="deployment"] .tool .scope-pick select{min-width:0;width:100%;max-width:100%}
html[data-portal-brand="deployment"] .tool-status-line{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--muted);font-size:14px}
html[data-portal-brand="deployment"] .tool-status-line .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Phones keep the organization's Profile button (it was hidden on small screens): it drops under the name. */
@media(max-width:600px){
  html[data-portal-brand="deployment"] .tool .tenant-head{flex-wrap:wrap}
  html[data-portal-brand="deployment"] .tool .tenant-head .btn{display:inline-flex!important;margin:4px 0 0 auto}
}
/* Copy instructions for your AI (Joe, 2026-10-08). */
html[data-portal-brand="deployment"] .ai-copy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
html[data-portal-brand="deployment"] .ai-copy-help{font-size:13px}
html[data-portal-brand="deployment"] .ai-copy-done{font-size:13px;font-weight:600;color:var(--accent)}
/* TOOL SUITES (Joe, 2026-10-08; Roadmap Tool suites tab only): the miniature-world scene, then the inventory by suite. */
.roadmap{--st-production:#22C55E;--st-qualification:#22D3EE;--st-development:#F59E0B;--st-ideas:#A78BFA}
.stage-production{--st:var(--st-production)}.stage-qualification{--st:var(--st-qualification)}.stage-development{--st:var(--st-development)}.stage-ideas{--st:var(--st-ideas)}
.suite-scene{margin:0 0 14px;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.suite-scene .scene-art{display:block;width:100%;height:auto}
.scene-stages{list-style:none;margin:0;padding:0 0 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.scene-stages::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:1px;background:linear-gradient(90deg,rgba(103,232,249,.15),rgba(103,232,249,.7),rgba(103,232,249,.15))}
.scene-stages li{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 8px;text-align:center;color:var(--ink)}
.scene-stages li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--st);box-shadow:0 0 10px var(--st);margin:4px 0 6px}
.scene-stages b{font:600 12px/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.scene-stages .scene-count{font:600 22px/1.1 "IBM Plex Sans",system-ui,sans-serif;color:var(--st)}
.scene-stages small{font-size:12px;color:var(--muted);max-width:24ch}
.suite-disclaimer{margin:0 0 22px;font-size:13px;color:var(--muted);font-style:italic}
.suite-inventory-title{margin:0 0 12px;font-size:20px}
.suite{margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.suite-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 18px;cursor:pointer;list-style:none}
.suite-head::-webkit-details-marker{display:none}
.suite-head::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
details[open]>.suite-head::after{transform:rotate(-135deg)}
.suite-name{font-weight:600;font-size:17px}.suite-about{color:var(--muted);font-size:14px}
.suite-tally{display:flex;flex-wrap:wrap;gap:6px}
.tally{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.tally i{width:7px;height:7px;border-radius:50%;background:var(--st)}
.suite-lanes{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 18px 18px}
.suite-lane{padding:10px;border-radius:12px;background:var(--fill);border-top:3px solid var(--st)}
.suite-lane h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.suite-lane ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.suite-lane li{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.suite-lane li a,.suite-lane li strong{font-weight:600;font-size:14px}
.suite-lane li span{font-size:12px;color:var(--muted);line-height:1.4}
.suite-lane li em{font-style:normal;font-size:11px;color:#B45309;font-weight:600}
[data-theme="dark"] .suite-lane li em{color:#FBBF24}
.suite-empty{margin:0;font-size:12px;color:var(--muted)}
@media(max-width:900px){.suite-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.suite-lanes{grid-template-columns:1fr;padding:0 12px 12px}.scene-stages{grid-template-columns:1fr 1fr;row-gap:14px}.scene-stages::before{display:none}.scene-stages small{font-size:11px}.suite-head{padding:12px}}
/* THE STATUS PAGE (Joe, 2026-10-08). */
.status-page h1{margin:0 0 14px}
.status-page .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#94A3B8;flex:0 0 auto}
.status-page .state-up .dot,.status-banner.state-up .dot{background:#16A34A}
.status-page .state-degraded .dot,.status-banner.state-degraded .dot{background:#D97706}
.status-page .state-down .dot,.status-banner.state-down .dot{background:#DC2626}
.status-page .state-locked .dot{background:#DC2626}
.status-banner{display:flex;align-items:center;gap:10px;padding:14px 18px;margin:0 0 8px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-weight:600}
.status-note{margin:0 0 18px;color:var(--muted);font-size:13px}
.status-group{margin:0 0 18px}.status-group h2{margin:0 0 8px;font-size:18px}
.status-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.status-list li{padding:12px 16px;border-top:1px solid var(--line)}.status-list li:first-child{border-top:0}
.status-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.status-word{color:var(--muted);font-size:13px}
.status-uptime{margin-left:auto;display:flex;gap:12px;font-size:12px;color:var(--muted)}.status-uptime b{color:var(--ink)}
.status-bars{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;margin:8px 0 4px}
.status-bars i{height:18px;border-radius:2px;background:var(--fill)}
.status-bars .bar-ok{background:#16A34A}.status-bars .bar-warn{background:#D97706}.status-bars .bar-bad{background:#DC2626}
.status-detail{margin:0;font-size:12px;color:var(--muted)}
.status-outages{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.status-outages li{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;border-top:1px solid var(--line);font-size:14px}.status-outages li:first-child{border-top:0}
@media(max-width:600px){.status-uptime{margin-left:0;width:100%}}
/* DELIVERY WEBSITE REVIEW (Joe, 2026-10-08): the public one-week review link. */
.review-body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg,#f6f8fb);color:var(--ink,#182230);font-family:var(--sans,system-ui,sans-serif)}
.review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 18px;background:var(--card,#fff);border-bottom:1px solid var(--line,#d0d5dd)}
.review-head small{margin-left:auto;color:var(--muted,#667085)}
.review-card{max-width:420px;margin:48px auto;padding:24px;background:var(--card,#fff);border:1px solid var(--line,#d0d5dd);border-radius:16px}
.review-card form{display:grid;gap:10px}.review-error{color:#B42318;font-weight:600}
.review-help{margin:0;padding:8px 18px;font-size:14px;color:var(--muted,#667085)}
.review-frame{flex:1;width:100%;min-height:80vh;border:0;background:#fff}
/* THE WELCOME NOTE (Joe, 2026-10-08): a pop-out that folds to one row. */
html[data-portal-brand="deployment"] .welcome-note{max-width:680px;margin:16px auto;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px}
html[data-portal-brand="deployment"] .welcome-note>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 18px;cursor:pointer;list-style:none}
html[data-portal-brand="deployment"] .welcome-note>summary::-webkit-details-marker{display:none}
html[data-portal-brand="deployment"] .welcome-note>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
html[data-portal-brand="deployment"] .welcome-note[open]>summary::after{transform:rotate(-135deg)}
html[data-portal-brand="deployment"] .welcome-note-title{font-weight:600}
html[data-portal-brand="deployment"] .welcome-note-when{font-size:13px;color:var(--muted)}
html[data-portal-brand="deployment"] .welcome-note .welcome-letter{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 16px 16px;max-width:none}
/* ROADMAP LINK (Joe, 2026-10-09): centered between the wordmark and the time, map icon plus the word Roadmap. */
header.top .roadmap-link.roadmap-center{display:inline-flex;align-items:center;gap:6px;width:auto;height:40px;padding:0 12px;font-weight:600;font-size:14px;text-decoration:none;color:var(--nav-ink,var(--ink))}
header.top .roadmap-link.roadmap-center svg{width:20px;height:20px}
@media(max-width:600px){header.top .roadmap-link.roadmap-center{padding:0 6px;font-size:12px;gap:4px}}
/* Roadmap Tool suites: no hero picture (Joe, 2026-10-09); the stage counts stay. */
.suite-scene .scene-stages{padding-top:16px}
/* Header with the centered Roadmap link: wordmark | Roadmap | time | icons, one row. */
header.top:has(.roadmap-center){grid-template-columns:1fr auto auto 1fr;column-gap:16px}
header.top .roadmap-center{grid-column:2;grid-row:1}
header.top:has(.roadmap-center) .clock{grid-column:3;grid-row:1}
header.top:has(.roadmap-center) .tray{grid-column:4;grid-row:1}
@media(max-width:560px){
  header.top:has(.roadmap-center){grid-template-columns:auto auto 1fr;column-gap:6px}
  header.top .roadmap-center{grid-column:2}
  header.top:has(.roadmap-center) .tray{grid-column:3}
}
.suite-lane .lane-about{margin:-4px 0 8px;font-size:11px;color:var(--muted);line-height:1.35}

/* Roadmap video feedback: scoped to the four media panels. */
.roadmap-feedback{max-width:48rem;margin:1.25rem auto;text-align:left}
.roadmap-feedback fieldset{border:0;padding:0;margin:0;min-width:0}
.roadmap-feedback legend{font-weight:600;margin-bottom:.6rem}
.roadmap-feedback-votes{display:flex;gap:.75rem;margin-bottom:.9rem;flex-wrap:wrap}
.roadmap-feedback-votes label{display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .9rem;border:1px solid currentColor;border-radius:.5rem;cursor:pointer}
.roadmap-feedback-votes label:has(input:checked){outline:2px solid var(--accent,currentColor);outline-offset:2px;font-weight:700}
.roadmap-feedback-votes input{width:auto;margin:0;accent-color:var(--accent)}
.roadmap-feedback textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;margin:.4rem 0 .75rem;resize:vertical}
.roadmap-feedback button{min-height:44px}
.roadmap-feedback-status{min-height:1.5em;margin:.5rem 0;overflow-wrap:anywhere}

/* INTERNAL TO THE a client PORTAL - Joe sign-off 2026-10-09 04:40 UTC */
.meeting-table{max-width:800px;margin:2rem auto;padding:clamp(1rem,3vw,2rem)}.meeting-eyebrow{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.75}
.meeting-card{border:1px solid var(--line);border-radius:20px;padding:clamp(1.2rem,4vw,2rem);margin:1.2rem 0;background:var(--card);box-shadow:0 12px 36px #0000000a;overflow-wrap:anywhere}
.meeting-card h2{margin:.4rem 0 1rem}.meeting-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.meeting-table textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;resize:vertical;font:inherit;line-height:1.5;padding:.8rem;border-radius:10px;min-height:7rem}
.meeting-from-person{margin-left:clamp(0px,6vw,60px)}.meeting-from-nexverto{margin-right:clamp(0px,6vw,60px)}
.meeting-scar:after{content:'';position:fixed;inset:0;border:5px solid #c62336;pointer-events:none;z-index:2147483647}
@media(max-width:600px){.meeting-from-person,.meeting-from-nexverto{margin-left:0;margin-right:0}.meeting-table{margin:0 auto}.meeting-card{margin:.8rem 0}}

/* NexVerto Onboarding progress on its postcard (Joe, 2026-10-09; portal/onboarding.py) */
.onboard { margin:1rem 0; padding:1rem; border:1px solid var(--line, #d8dee8); border-radius:10px; background:var(--card, #fff); }
.onboard .onboard-bar { width:100%; height:14px; appearance:none; border:0; border-radius:7px; overflow:hidden; background:var(--line, #e5e8ee); }
.onboard .onboard-bar::-webkit-progress-bar { background:var(--line, #e5e8ee); border-radius:7px; }
.onboard .onboard-bar::-webkit-progress-value { background:var(--accent, #2e4a6b); border-radius:7px; }
.onboard .onboard-bar::-moz-progress-bar { background:var(--accent, #2e4a6b); border-radius:7px; }
.onboard-rows { list-style:none; margin:.75rem 0; padding:0; display:grid; gap:.4rem; }
.onboard-rows a { display:flex; justify-content:space-between; gap:1rem; padding:.6rem .8rem; border:1px solid var(--line, #d8dee8); border-radius:8px; text-decoration:none; color:inherit; }
.onboard-rows a:hover { border-color:var(--accent, #2e4a6b); }
.onboard-count { font-weight:600; white-space:nowrap; }
.onboard-count.ok { color:var(--ok, #1a7f37); }
.onboard .idea { padding:.8rem 0; border-top:1px solid var(--line, #d8dee8); }
.onboard .idea h3 { margin:0 0 .25rem; font-size:1rem; }
.onboard .idea-form { display:grid; gap:.5rem; }
.onboard .idea-stars { display:flex; flex-wrap:wrap; gap:.75rem; border:0; padding:0; margin:0; }
.onboard .idea-acts { display:flex; gap:.5rem; flex-wrap:wrap; margin:0; }
.onboard .copy-source { width:100%; }

/* SIMPLE INDEX CARD (Joe, 2026-10-09: "it should have been a simple index card, with a left highlight"): plain card,
   left bar in the priority colour, no paper texture, shading or ruled lines; in the stack the whole card is the link. */
.postcard .index-card { --paper-ink:#182230; --paper-muted:#475569; --paper-line:#d0d5dd; --paper-field:#fff; --paper:#fff; background:#fff; background-image:none; box-shadow:none; border:1px solid #d0d5dd; border-left:6px solid var(--priority); border-radius:3px; color:#182230; color-scheme:light; }
.postcard .index-card .ic-lines { background-image:none; line-height:1.6; }
.postcard .index-card .ic-top { border-bottom:0; }
a.postcard-link { display:block; color:inherit; text-decoration:none; }
a.postcard-link:focus-visible { outline:2px solid var(--priority); outline-offset:3px; }
a.postcard-link .ic-body { color:#475569; }
.index-card .card-tabs { --card:#fff; --line:#d0d5dd; --accent:#1d5f89; --accent-ink:#fff; --link:#1d5f89; --fill:#f2f4f7; margin:0 0 1rem; }

/* Day 1 stays a white index card in either theme; its controls need dark ink. */
#card-nexverto-onboarding-day-1 .index-card { --verto:#1d5f89; --link:#1d5f89; --accent:#1d5f89; --accent-ink:#fff; --on-fill:#fff; --ok:#1a7f37; }

/* Demo Co: same portal shell, sample-only guest screens. */
.demo-portal{max-width:1080px;margin:2rem auto;padding:0 1rem}
.demo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem;margin:1.5rem 0}
.demo-card{display:block;padding:1.25rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);color:var(--ink);text-decoration:none}
a.demo-card:hover{border-color:var(--accent)}
.demo-card h2,.demo-card h3{margin-top:0}.demo-card p:last-child{margin-bottom:0}
.demo-pin,.demo-editor{max-width:640px;display:grid;gap:.75rem;margin:1.5rem 0}
.demo-pin{max-width:320px}.demo-pin button,.demo-editor button{justify-self:start}
.demo-editor input,.demo-editor textarea,.demo-pin input{width:100%;min-width:0}
.demo-number{font-size:2rem;font-weight:650;font-variant-numeric:tabular-nums}

/* Roadmap production note: one native disclosure beside the title, in the page's own theme. */
.roadmap-head { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px; }
.roadmap-head h1 { margin:0; }
.roadmap-about { max-width:100%; }
.roadmap-about summary { display:list-item; width:fit-content; box-sizing:border-box; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); cursor:pointer; font-size:14px; line-height:1.4; }
.roadmap-about summary:hover { background:var(--fill); }
.roadmap-about summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.roadmap-about-panel { position:absolute; z-index:5; top:calc(100% + 8px); inset-inline-end:0; width:min(34rem,100%); box-sizing:border-box; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); box-shadow:0 8px 24px rgb(0 0 0 / .16); text-align:left; line-height:1.6; }
.roadmap-about-panel h2 { margin:0 0 10px; font:600 17px/1.4 "IBM Plex Sans",system-ui,sans-serif; }
.roadmap-about-panel p { margin:0 0 12px; }
.roadmap-about-panel p:last-child { margin-bottom:0; }