/* Accure base (the accure-0001 stylesheet): the structure of every page and widget. It holds no theme tokens: those, and the
   look of the shared components, are in style.css, which loads after this file. */






* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.5; letter-spacing: -.01em;
  font-feature-settings: "cv02", "cv03", "cv04", "calt";
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, pre, .secret { font-family: var(--mono); letter-spacing: 0; }
code { font-size: 12.5px; background: var(--tint); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px; }
h1 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--strong); margin: 0 0 6px; }
h2 { font-size: 15px; font-weight: 500; color: var(--strong); margin: 36px 0 12px; }
.card > h2:first-child { margin-top: 0; }
p { margin: 8px 0; }

/* Icons */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* Top bar */
header.top {
  position: sticky; top: 0; z-index: 20; height: var(--header);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--canvas); border-bottom: 1px solid var(--line);
}
header.top .spacer { flex: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--strong); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--btn-text); }
.brand .mark .ic { width: 18px; height: 18px; stroke-width: 2.25; vertical-align: 0; }
.brand .tag, .tag { font-size: 11px; font-weight: 500; color: var(--subtle); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.brand.big { font-size: 20px; justify-content: center; margin-bottom: 20px; }
.brand.big .mark { width: 36px; height: 36px; border-radius: 9px; }
.divider { width: 1px; height: 24px; background: var(--line); }
.org { display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); }
.org select { border: 0; background: transparent; padding: 6px 4px; font-weight: 500; color: var(--text); max-width: 260px; box-shadow: none; }
.org select:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.toplink { display: inline-flex; align-items: center; gap: 6px; color: var(--text); padding: 6px 10px; border-radius: var(--radius); }
.toplink:hover { background: var(--tint); text-decoration: none; }
.who { color: var(--subtle); font-size: 13px; padding: 0 4px; }

/* Layout */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--header)); }
nav.side {
  position: sticky; top: var(--header); align-self: start; height: calc(100vh - var(--header)); overflow-y: auto;
  padding: 12px; border-inline-end: 1px solid var(--line); background: var(--canvas);
  display: flex; flex-direction: column; gap: 2px;
}
nav.side button, nav.side .navlink, nav.side a.navitem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: none; border: 0; padding: 7px 10px; border-radius: var(--radius);
  color: var(--text); font: inherit; cursor: pointer;
}
nav.side button .ic, nav.side .navlink .ic, nav.side a.navitem .ic { color: var(--subtle); }
nav.side button:hover, nav.side .navlink:hover, nav.side a.navitem:hover { background: var(--tint); text-decoration: none; }
nav.side .navitem.active { background: var(--recessed); color: var(--strong); font-weight: 500; box-shadow: inset 0 0 0 1px var(--hairline); }
nav.side .navitem.active .ic { color: var(--strong); }
nav.side .navlink { margin-top: auto; color: var(--subtle); }
nav.side .navlink .ic:last-child { width: 12px; height: 12px; margin-inline-start: auto; }

main { padding: 40px 48px 96px; max-width: 1160px; width: 100%; }
main.docs { margin: 0 auto; max-width: 860px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); font-size: 12px; margin-bottom: 4px; }
.eyebrow .ic { width: 14px; height: 14px; vertical-align: 0; }
#view > h1 + p, #view > h1 + .muted { margin-top: 0; }
#view > h1 { margin-bottom: 4px; }

/* Surfaces */
.card {
  background: var(--base); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; margin: 20px 0; box-shadow: 0 1px 1px oklch(0% 0 0 / .02);
}
/* Tiles wrap and grow to fill each row, so a row never ends in an empty cell. */
.tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0; }
.tiles > * { flex: 1 1 200px; min-width: 0; }
.tile { background: var(--base); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.tile .label { color: var(--subtle); font-size: 13px; }
.tile .value { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--strong); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tile .sub { color: var(--subtle); font-size: 12px; margin-top: 2px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { white-space: nowrap; } /* column titles stay on one line; tables scroll inside .table-wrap */
thead th { color: var(--subtle); font-weight: 500; font-size: 12px; background: var(--elevated); border-bottom: 1px solid var(--line); }
thead tr th:first-child { border-start-start-radius: var(--radius); }
thead tr th:last-child { border-start-end-radius: var(--radius); }
tbody tr:hover td { background: var(--elevated); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
thead th { white-space: nowrap; }
/* Wide tables scroll sideways inside their card when the page is narrow (phone, Ask AI open). */
.table-wrap { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; }
.card > .table-wrap, .card > div > .table-wrap { margin: -4px 0; }

/* Controls */
input, select, textarea, button { font: inherit; letter-spacing: inherit; color: var(--text); }
input, select, textarea {
  background: var(--base); border: 0; border-radius: var(--radius); padding: 6px 10px; min-height: 34px;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .1s;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1.5px var(--brand); }
input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--brand); box-shadow: none; }
input[type="file"] { padding: 4px; }
input[type="file"]::file-selector-button { border: 0; border-radius: 6px; background: var(--fill); padding: 6px 10px; margin-inline-end: 10px; font: inherit; color: var(--text); cursor: pointer; }
textarea { width: 100%; min-height: 160px; resize: vertical; line-height: 1.5; }
select { padding-inline-end: 28px; }

button.primary, button.secondary, button.danger, button.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 13px; border-radius: var(--radius); border: 0; cursor: pointer;
  font-weight: 500; white-space: nowrap; transition: background-color .1s, box-shadow .1s, transform .1s;
}
/* button.primary colours: see the theme layer ("Accure round 18") below. */
button.secondary { background: var(--base); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
button.secondary:hover { background: var(--tint); }
button.danger { background: var(--base); color: var(--danger); box-shadow: 0 0 0 1px var(--line); }
button.danger:hover { background: var(--danger-tint); }
/* Buttons without a variant class (Calculate, Sign, Edit… in module views and dialogs) look like secondary
   buttons instead of the browser's grey default. Zero specificity: any contextual button rule still wins. */
:where(#view button:not([class]), dialog button:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border-radius: var(--radius); border: 0; cursor: pointer; font-weight: 500; white-space: nowrap;
  background: var(--base); box-shadow: 0 0 0 1px var(--line); transition: background-color .1s, box-shadow .1s;
}
:where(#view button:not([class]), dialog button:not([class])):hover { background: var(--tint); }
button.ghost { background: none; color: var(--subtle); padding: 0 10px; }
button.ghost:hover { background: var(--tint); color: var(--text); }
button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--ring); }
button:disabled { opacity: .55; cursor: default; }

.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.row > label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--subtle); }
.row > label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; min-height: 36px; }
.grow { flex: 1; min-width: 200px; }

/* Feedback */
.muted { color: var(--subtle); }
.small { font-size: 13px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 500; background: var(--tint); color: var(--text); vertical-align: 2px;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.good { background: var(--success-tint); color: var(--success); }
.badge.bad { background: var(--danger-tint); color: var(--danger); }
.badge.warn { background: var(--warning-tint); color: var(--warning); }
.notice { padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; background: var(--info-tint); border: 1px solid var(--line); font-size: 13px; }
.notice.bad { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.notice.good { background: var(--success-tint); color: var(--success); border-color: transparent; }
.secret { display: block; background: var(--recessed); border: 1px solid var(--hairline); padding: 8px 10px; border-radius: var(--radius); word-break: break-all; font-size: 12.5px; margin-top: 6px; }
code.secret { display: inline-block; margin: 0; }
pre { background: var(--recessed); border: 1px solid var(--hairline); padding: 12px 14px; border-radius: var(--radius); overflow: auto; font-size: 12.5px; line-height: 1.6; }
.output { white-space: pre-wrap; background: var(--recessed); border: 1px solid var(--hairline); padding: 12px 14px; border-radius: var(--radius); min-height: 140px; }
details > summary { cursor: pointer; color: var(--subtle); padding: 6px 0; }
details > summary:hover { color: var(--text); }

/* Sign in */
.center { max-width: 400px; margin: 12vh auto; padding: 0 16px; }
.center .card { padding: 28px; }
.center h1 { font-size: 20px; }

.hidden { display: none !important; }

main { container: content / inline-size; min-width: 0; }
@container app (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  nav.side { position: static; height: auto; flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  nav.side button, nav.side .navlink, nav.side a.navitem { width: auto; white-space: nowrap; }
  nav.side .navlink { margin-top: 0; }
  main { padding: 20px 16px 48px; }
}

/* Native selects styled like inputs, with a small chevron glyph */
select:not(.org select) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.row > label { min-width: 160px; }
.row > label > input:not([type="checkbox"]), .row > label > select { width: 100%; }

/* Brand: the Marcus Aurelius mark on its own near-black shape: one file for light and dark. */
.logo { display: block; height: 32px; width: auto; }
.brand.big .logo { height: 56px; margin: 0 auto; }
.head-left { display: flex; align-items: center; gap: 10px; width: calc(var(--sidebar) - 16px); padding-inline-end: 12px; margin-inline-end: 4px; border-inline-end: 1px solid var(--line); height: 100%; }
.org { flex: 1; min-width: 0; gap: 4px; }
.org select { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.org > .ic:last-child { width: 14px; height: 14px; }
button.toplink { background: none; border: 0; font: inherit; cursor: pointer; }
button.toplink[aria-expanded="true"] { background: var(--tint); }

/* Page header: title + subtitle left, actions right */
.pagehead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.pagehead > div:first-child { flex: 1; min-width: 0; }
.pagehead h1 { font-size: 24px; margin-bottom: 4px; }
.pagehead p { margin: 0; color: var(--subtle); }
.pagehead .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
a.button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border-radius: var(--radius); color: var(--text); background: var(--base); box-shadow: 0 0 0 1px var(--line), var(--shadow); font-weight: 500; white-space: nowrap; }
a.button:hover { background: var(--tint); text-decoration: none; }
.pill { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--fill); color: var(--text); white-space: nowrap; }

/* Recommendations */
.recs { padding: 0; overflow: hidden; }
.recs > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 22px; color: var(--text); font-weight: 500; }
.recs > summary::-webkit-details-marker { display: none; }
.recs > summary .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--brand); color: var(--btn-text); font-size: 11px; padding: 0 5px; }
.recs > summary .ic:last-child { margin-inline-start: auto; transition: transform .15s; }
.recs:not([open]) > summary .ic:last-child { transform: rotate(180deg); }
.recs ul { list-style: none; margin: 0; padding: 4px 22px 12px; border-top: 1px solid var(--hairline); background: var(--elevated); }
.recs li { position: relative; padding: 10px 0 10px 18px; }
.recs li + li { border-top: 1px solid var(--hairline); }
.recs li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.recs li b { display: block; color: var(--strong); font-weight: 500; }
.recs li span { color: var(--subtle); font-size: 13px; }
.recs li a, .recs li button.link { font-size: 13px; }
button.link { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Dialog */
dialog.dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--base); color: var(--text); box-shadow: 0 20px 50px oklch(0% 0 0 / .35); }
dialog.dialog::backdrop { background: oklch(0% 0 0 / .45); }
dialog.dialog .dhead { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); font-weight: 500; color: var(--strong); }
dialog.dialog .dhead button { margin-inline-start: auto; }
dialog.dialog .dbody { padding: 16px 20px 20px; }
dialog.dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--subtle); margin: 10px 0; }
dialog.dialog label > * { width: 100%; }
dialog.dialog textarea { min-height: 140px; }
dialog.dialog .dtitle { min-width: 0; overflow-wrap: anywhere; }
/* confirmDialog(): a short question, Cancel and one verb */
dialog.dialog.confirm-dialog { width: min(440px, calc(100vw - 32px)); }
dialog.dialog.confirm-dialog .confirm-text { margin: 0 0 4px; line-height: 1.5; color: var(--text); }
dialog.dialog.confirm-dialog .field { margin: 12px 0 4px; }
dialog.dialog.confirm-dialog textarea { min-height: 84px; }
dialog.dialog.confirm-dialog [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
dialog.dialog.confirm-dialog .dbody > .row { margin-top: 16px; }

/* Estimator */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.suggest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.suggest .big { font-size: 22px; font-weight: 500; color: var(--strong); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 0 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; font-size: 11px; color: var(--subtle); min-width: 0; }
.bars .bar i { display: block; width: 100%; max-width: 44px; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.segmented { display: inline-flex; background: var(--fill); border-radius: var(--radius); padding: 2px; gap: 2px; }
.segmented button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; color: var(--subtle); }
.segmented button.on { background: var(--base); color: var(--strong); box-shadow: var(--shadow); }

@container app (max-width: 820px) {
  .head-left { width: auto; border-inline-end: 0; }
  nav.side .navhead { display: none; }
}
@container app (max-width: 640px) { .toplink span { display: none; } }
@container content (max-width: 640px) { .pagehead { flex-direction: column; } }

/* Website list + detail */
tr.clickable { cursor: pointer; }
tr.clickable td:last-child .ic { color: var(--subtle); }
.progress { position: relative; height: 8px; border-radius: 99px; background: var(--fill); overflow: visible; margin-top: 6px; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: var(--brand); width: 100%;
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 99px); transition: clip-path .2s ease-out; }
@starting-style { .progress > span { clip-path: inset(0 100% 0 0 round 99px); } }
.progress > small { position: absolute; inset-inline-end: 0; top: -18px; font-size: 11px; color: var(--subtle); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 16px 0 4px; overflow-x: auto; }
.tabs button { background: none; border: 0; font: inherit; color: var(--subtle); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--strong); border-bottom-color: var(--brand); font-weight: 500; }
.back { display: inline-block; margin-bottom: 8px; text-decoration: none; }
.legend { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.legend .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); display: inline-block; }
.legend .dot.alt { background: var(--success); margin-inline-start: 10px; }
.bars .bar .pair { display: flex; align-items: flex-end; gap: 1px; width: 100%; height: 100%; justify-content: center; }
.bars .bar .pair i { width: 45%; max-width: 12px; }
.bars .bar .pair i.alt { background: var(--success); }
.pagerow { border: 1px solid var(--line); border-radius: var(--radius); background: var(--base); margin: 6px 0; }
.pagerow > summary { display: flex; align-items: center; gap: 12px; padding: 9px 12px; flex-wrap: wrap; color: var(--text); }
.pagerow > summary .path { font-family: var(--mono); font-size: 12.5px; flex: 1; min-width: 200px; word-break: break-all; }
.pagerow[open] > summary { border-bottom: 1px solid var(--hairline); }
.pagerow > .table-wrap > table { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chip { font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: var(--fill); color: var(--subtle); font-family: var(--mono); }
.chip.published { background: var(--success-tint); color: var(--success); }
.chip.failed { background: var(--danger-tint); color: var(--danger); }
.chip.queued, .chip.translating { background: var(--warning-tint); color: var(--warning); }
ol.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--line); }
ol.timeline li { position: relative; padding: 4px 0 10px 16px; font-size: 13px; }
ol.timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--base); border: 2px solid var(--brand); }
ol.steps { padding-inline-start: 20px; } ol.steps li { margin: 6px 0; }
ul.checks { list-style: none; padding: 0; margin: 0; } ul.checks li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; }
ul.checks .ic { color: var(--success); margin-top: 2px; }
.card.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
details.card > summary { list-style: none; display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--strong); }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { margin-bottom: 8px; }

/* ---- Shell: user menu, quick search, recents ---- */
.iconbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; border: 0; background: none; color: var(--text); cursor: pointer; }
.iconbtn:hover { background: var(--tint); }
.iconbtn .ic { width: 18px; height: 18px; }
.usermenu { position: relative; }
.popover { position: fixed; min-width: 240px; background: var(--base); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px oklch(0% 0 0 / .16); padding: 6px; z-index: 1000; display: flex; flex-direction: column; }
.popover .pop-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.popover button, .popover a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.popover button:hover, .popover a:hover { background: var(--tint); text-decoration: none; }
.popover hr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; width: 100%; }
.quicksearch { display: flex !important; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 7px 10px !important; border-radius: var(--radius) !important;
  background: var(--base) !important; box-shadow: 0 0 0 1px var(--line); color: var(--subtle) !important; }
.quicksearch span { flex: 1; }
kbd { font-family: var(--font); font-size: 11px; color: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: var(--base); }

/* ---- Quick search palette ---- */
dialog.palette { width: min(680px, calc(100vw - 32px)); max-height: 70vh; margin-top: 12vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--base); color: var(--text); box-shadow: 0 24px 60px oklch(0% 0 0 / .45); display: none; flex-direction: column; }
dialog.palette[open] { display: flex; }
dialog.palette::backdrop { background: oklch(0% 0 0 / .5); }
.pal-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.pal-search input { flex: 1; border: 0; box-shadow: none; background: none; font-size: 15px; padding: 4px 0; }
.pal-search input:focus { box-shadow: none; }
.pal-list { overflow-y: auto; padding: 6px; flex: 1; }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: var(--radius); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.pal-item small { margin-inline-start: auto; color: var(--subtle); font-size: 12px; }
.pal-item.on { background: var(--tint); }
.pal-foot { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-top: 1px solid var(--hairline); }

/* ---- Ask AI panel ---- */
.assistant { position: fixed; top: var(--header); inset-inline-end: 0; bottom: 0; width: min(420px, 100vw); background: var(--canvas); border-inline-start: 1px solid var(--line);
  transform: translateX(100%); transition: transform .18s ease; z-index: 30; display: flex; flex-direction: column; }
.assistant.open { transform: none; box-shadow: -12px 0 32px oklch(0% 0 0 / .2); }
.as-top { display: flex; align-items: center; gap: 2px; flex: none; height: var(--header); padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.as-top b { flex: 1; font-weight: 500; }
.as-help { display: flex; align-items: center; justify-content: space-between; margin: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--base); }
.as-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.as-hello { text-align: center; padding: 8px 0 8px; }
.as-hello h3 { margin: 10px 0 2px; font-weight: 500; font-size: 18px; color: var(--strong); }
.as-logo { height: 56px; width: auto; }
.as-sugg { display: flex; flex-direction: column; gap: 8px; margin: 20px auto 0; max-width: 300px; text-align: start; }
.as-sugg button { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--base); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: start; transition: background-color .12s, border-color .12s, transform .12s; }
.as-sugg button:hover { background: var(--tint); }
.as-sugg b { display: block; font-weight: 500; }
.as-sugg small { display: block; color: var(--subtle); font-size: 12px; }
.as-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.as-msg { margin: 12px 0; line-height: 1.55; font-size: 14px; }
.as-msg.me { margin-inline-start: 15%; background: var(--fill); padding: 8px 12px; border-radius: 12px 12px 4px 12px; white-space: pre-wrap; }
.as-msg.ai { background: var(--base); border: 1px solid var(--line); padding: 10px 14px; border-radius: 12px 12px 12px 4px; }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0; padding-inline-start: 20px; } .md h4 { margin: 10px 0 4px; font-size: 14px; }
.as-input { margin: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--base); padding: 8px 10px; }
.as-input:focus-within { box-shadow: 0 0 0 1.5px var(--brand); }
.as-input textarea { min-height: 44px; border: 0; box-shadow: none; padding: 4px 2px; background: none; resize: none; }
.as-row { display: flex; align-items: center; justify-content: space-between; }
.chip-ro { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--subtle); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.chip-ro .ic { width: 12px; height: 12px; }
.as-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; border: 0; background: var(--brand); color: var(--btn-text); cursor: pointer; }
.as-send:disabled { opacity: .5; }

/* ---- Analytics ---- */
.sectionhead { display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; }
.sectionhead h2 { margin: 0; flex: 1; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--base); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px 10px; min-width: 0; }
.stat.wide { grid-column: span 2; }
.stat-head { display: flex; justify-content: space-between; color: var(--subtle); font-size: 13px; }
.stat-value { display: flex; align-items: baseline; gap: 8px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--strong); margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-weight: 500; color: var(--subtle); }
.delta.up { color: var(--success); } .delta.down { color: var(--danger); }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .grid { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.chart .axis { fill: var(--subtle); font-size: 11px; font-family: var(--font); }
svg.chart .area { opacity: .14; }
svg.chart .line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
svg.chart .empty { fill: var(--subtle); font-size: 13px; font-family: var(--font); }
.barlist { display: flex; flex-direction: column; gap: 6px; }
.barrow { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barrow .bt { height: 8px; background: var(--fill); border-radius: 99px; overflow: hidden; }
.barrow .bt i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.barrow .bv { color: var(--subtle); font-variant-numeric: tabular-nums; }
@container content (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stat.wide { grid-column: auto; } }

/* ---- Promo banner (Cloudflare style) ---- */
.banner { display: flex; align-items: center; gap: 18px; padding: 6px 18px 6px 6px; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--base); }
.banner .banner-art { width: 132px; align-self: stretch; min-height: 84px; flex: none; padding: 4px; border-radius: 12px; }
.banner .banner-art b { font-size: 24px; line-height: 1; font-weight: 650; letter-spacing: -.03em; }
.banner .banner-art small { font-size: 11px; line-height: 1.25; opacity: .9; margin-top: 3px; }
@container content (max-width: 560px) { .banner { flex-wrap: wrap; padding: 6px; } .banner .txt { flex-basis: calc(100% - 160px); } }
.banner .txt { flex: 1; min-width: 0; padding: 8px 0; }
.banner .txt b { display: block; color: var(--strong); font-weight: 500; font-size: 15px; }
.banner .txt span { color: var(--subtle); font-size: 13px; }
button.accent { background: var(--brand); color: var(--btn-text); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2), var(--shadow); }
button.accent:hover { background: var(--brand-hover); }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--info-tint); margin: 12px 0; }
.nudge .txt { flex: 1; }

/* ---- Forms: switches, glossary, compare ---- */
.switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.switch:first-of-type { border-top: 0; }
.switch .txt { flex: 1; } .switch .txt b { display: block; font-weight: 500; color: var(--strong); } .switch .txt span { color: var(--subtle); font-size: 13px; }
.switch input[type="checkbox"] { width: 34px; height: 20px; appearance: none; -webkit-appearance: none; border-radius: 99px; background: var(--fill); position: relative; cursor: pointer; flex: none; margin-top: 2px; box-shadow: none; transition: background .15s; }
.switch input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px oklch(0% 0 0 / .3); }
.switch input[type="checkbox"]:checked { background: var(--brand); }
.switch input[type="checkbox"]:checked::after { inset-inline-start: 16px; }
.gloss-row { display: grid; grid-template-columns: 1fr 120px 1fr auto; gap: 8px; margin: 6px 0; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp td { vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.cmp td.src { width: 45%; color: var(--subtle); }
.cmp td.tr textarea { min-height: 60px; font-size: 13.5px; }
.cmp tr.manual td.tr { box-shadow: inset 3px 0 0 var(--success); }
@container content (max-width: 760px) { .gloss-row { grid-template-columns: 1fr 1fr; } }
.codeblock { position: relative; }
.codeblock button { position: absolute; top: 8px; inset-inline-end: 8px; }
@container app (max-width: 820px) { .quicksearch kbd { display: none; } }

/* ---- Public tools page ---- */
body.public header.top { justify-content: space-between; }
.tools-main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
.hero h1 { font-size: 34px; letter-spacing: -.03em; margin: 12px 0 6px; }
.hero p { font-size: 16px; margin: 0 0 8px; }
.tabs button .ic { vertical-align: -3px; }
.preview-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; margin: 12px 0; }
.preview-frame iframe { width: 100%; height: 640px; border: 0; display: block; }
.cta { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 16px 20px; margin: 16px 0; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--base)); flex-wrap: wrap; }
a.primary-link { background: var(--brand); color: var(--btn-text); box-shadow: none; }
a.primary-link:hover { background: var(--brand-hover); }
.card.score { display: flex; align-items: center; gap: 20px; }
.ring { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; align-content: center; border: 6px solid; flex: none; }
.ring b { font-size: 28px; line-height: 1; } .ring small { color: var(--subtle); font-size: 11px; }
.ring.good { border-color: var(--success); } .ring.warn { border-color: var(--warning); } .ring.bad { border-color: var(--danger); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.dot.pass { background: var(--success); } .dot.warn { background: var(--warning); } .dot.fail { background: var(--danger); }
.fix { display: inline-flex; gap: 6px; color: var(--success); } .fix .ic { flex: none; margin-top: 2px; }
.card.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card.reach > div { display: flex; flex-direction: column; gap: 4px; }
.card.reach b { font-size: 28px; font-weight: 500; letter-spacing: -.02em; } .card.reach b.plus { color: var(--success); }
.market { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--base); cursor: pointer; font-size: 13px; }
.market small { margin-inline-start: auto; color: var(--subtle); } .market.on { border-color: var(--brand); background: var(--info-tint); }
@container content (max-width: 760px) { .card.reach { grid-template-columns: 1fr; } .hero h1 { font-size: 26px; } .preview-frame iframe { height: 480px; } }
.codeblock pre { padding-inline-end: 84px; white-space: pre-wrap; word-break: break-all; }
.newtag { margin-inline-start: auto; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .02em; padding: 3px 7px; border-radius: 99px; background: var(--success-tint); color: var(--success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, transparent); }
.mdflow { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mdflow li { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--recessed); }
.mdflow .step { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--brand); color: var(--btn-text); }
.mdpreview { margin-top: 10px; }
.mdmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.mdmeta .spacer { flex: 1; }
.mdraw { max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; padding: 12px; border-radius: var(--radius); background: var(--recessed); border: 1px solid var(--hairline); margin: 0; }
.mdrendered { max-height: 420px; overflow: auto; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--hairline); }
.card > .sectionhead:first-child { margin-top: 0; }
.card .stats { margin: 8px 0 12px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1em 0 .4em; color: var(--strong); line-height: 1.3; }
.md h1 { font-size: 22px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; } .md h4, .md h5, .md h6 { font-size: 14px; }
.md > :first-child { margin-top: 0; }
.md blockquote { margin: .8em 0; padding: 2px 12px; border-inline-start: 3px solid var(--line); color: var(--subtle); }
.md hr { border: 0; border-top: 1px solid var(--hairline); margin: 1em 0; }
.md .mdcode { padding: 10px 12px; border-radius: var(--radius); background: var(--recessed); overflow: auto; font-size: 12.5px; }
.md .mdtable { overflow-x: auto; margin: .8em 0; }
.md .mdtable table { border-collapse: collapse; font-size: 13px; }
.md .mdtable th, .md .mdtable td { border: 1px solid var(--hairline); padding: 5px 9px; text-align: start; }
.md .mdimg { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--fill); color: var(--subtle); }

/* ---- Scrollbars: thin everywhere ---- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--subtle) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--subtle) 45%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--subtle) 70%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- Dashboard shell: header and sidebar never move; only the content scrolls.
   The Ask AI panel is a full-height column next to the app, so opening it narrows the header too. ---- */
html:has(body.app) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.app { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; display: flex; }
body.app .app-col { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; container: app / inline-size; }
body.app header.top { position: relative; flex: none; }
body.app .layout { flex: 1; min-height: 0; }
body.app nav.side { position: static; height: 100%; overscroll-behavior: contain; }
body.app .scroller { min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
body.app .assistant { position: relative; top: auto; inset-inline-end: auto; bottom: auto; flex: none; height: 100%; width: 0; transform: none;
  border-inline-start: 0; overflow: hidden; box-shadow: none; z-index: 30; visibility: hidden; }
body.app .assistant.open { width: 400px; border-inline-start: 1px solid var(--line); box-shadow: none; visibility: visible; }
@container app (max-width: 820px) {
  .layout { grid-template-rows: auto minmax(0, 1fr); }
  nav.side { height: auto; }
}
/* Below 1024px the panel doesn't squeeze the page: it slides over it. */
@media (max-width: 1023px) {
  body.app .assistant { position: fixed; inset: var(--as-top, var(--header)) 0 0 auto; height: auto; z-index: 50; }
  body.app .assistant.open { width: min(420px, 100vw); box-shadow: -16px 0 40px oklch(0% 0 0 / .22); }
}

/* ---- Tips / notifications ---- */
.iconbtn { position: relative; }
.dot-badge { position: absolute; top: 6px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--canvas); }
.tips-pop { width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; padding: 0; }
.tips-pop .pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin: 0; }
.tips-pop .pop-head b { flex: 1; }
.tip { display: flex !important; gap: 10px; align-items: flex-start !important; padding: 12px 14px !important; border-radius: 0 !important; border-bottom: 1px solid var(--hairline) !important; width: 100%; }
.tip:last-child { border-bottom: 0 !important; }
.tip .tip-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--info-tint); color: var(--brand); flex: none; }
.tip b { display: block; font-weight: 500; color: var(--strong); font-size: 13.5px; }
.tip span { display: block; color: var(--subtle); font-size: 12.5px; line-height: 1.45; }
.tip.unseen b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-inline-start: 6px; vertical-align: 2px; }
.toasts { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; width: min(400px, calc(100vw - 32px)); background: var(--base); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px oklch(0% 0 0 / .28); padding: 14px 14px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; }
.toast .tip-ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: var(--btn-text); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2); }
.toast .tip-ic .ic { width: 18px; height: 18px; }
.toast b { color: var(--strong); font-weight: 500; }
.toast p { margin: 0; grid-column: 2 / 4; color: var(--subtle); font-size: 13px; }
.toast .toast-actions { grid-column: 2 / 4; display: flex; gap: 8px; margin-top: 8px; }
.toast .toast-actions button { min-height: 30px; padding: 0 12px; font-size: 13px; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Cookie consent ---- */
.consent { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 70; width: min(440px, calc(100vw - 32px)); background: var(--base); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 44px oklch(0% 0 0 / .3); padding: 16px 18px; font-size: 13px; }
.consent-head { display: flex; align-items: center; gap: 8px; color: var(--strong); font-size: 14px; }
.consent p { color: var(--subtle); margin: 6px 0 10px; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.consent-settings { margin-bottom: 8px; }

/* ---- Plans & pricing ---- */
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.save-tag { font-size: 11.5px; font-weight: 600; color: var(--success); background: var(--success-tint); padding: 2px 8px; border-radius: 99px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--base); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; }
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 14px 36px color-mix(in srgb, var(--brand) 18%, transparent); }
.plan.current { background: var(--elevated); }
.plan .ribbon { position: absolute; top: -11px; inset-inline-start: 18px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 99px; background: var(--brand); color: var(--btn-text); }
.plan .ribbon.alt { background: var(--success); }
.plan h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--strong); }
.plan .for { color: var(--subtle); font-size: 12.5px; margin-top: -8px; }
.plan .price { display: flex; align-items: baseline; gap: 4px; color: var(--strong); }
.plan .price b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.plan .price small { color: var(--subtle); font-size: 13px; }
.plan .billed { color: var(--subtle); font-size: 12px; margin-top: -8px; min-height: 1.5em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { color: var(--success); width: 15px; height: 15px; margin-top: 2px; }
.plan .cta-row { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.plan .cta-row button { width: 100%; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--subtle); font-size: 12.5px; margin: 6px 0 18px; }
.trust span { display: inline-flex; align-items: center; gap: 6px; } .trust .ic { color: var(--success); width: 14px; height: 14px; }

.contact-card { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: 14px; margin: 16px 0;
  background: var(--brand); color: var(--btn-text); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .18), inset 0 0 0 1px oklch(0% 0 0 / .08); }
.contact-card .txt { flex: 1; min-width: 240px; } .contact-card b { font-size: 17px; font-weight: 600; display: block; } .contact-card span { opacity: .92; font-size: 13.5px; }
.contact-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-card button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius); font-weight: 500; cursor: pointer;
  background: #fff; color: var(--blue-deep); box-shadow: 0 1px 2px oklch(0% 0 0 / .15); transition: background-color .1s, transform .1s; }
.contact-card button:hover { background: oklch(97% .015 262); }
.contact-card button.ghostw { background: transparent; color: var(--btn-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); }
.contact-card button.ghostw:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.contact-card button:focus-visible { box-shadow: 0 0 0 1px var(--blue-deep), 0 0 0 4px oklch(0% 0 0 / .2); }
.notice.warn { background: var(--warning-tint); color: var(--text); border-color: transparent; }
@container app (max-width: 820px) {
  header.top { gap: 4px; padding: 0 10px; }
  header.top .spacer { display: none; }
  .head-left { flex: 1 1 auto; min-width: 0; }
}

/* ---- Sidebar groups: collapsible headings (remembered for 30 days) ---- */
/* Groups read like pages: icon, name and a chevron; their pages hang off a guide line. */
nav.side .navgroup { display: flex; flex-direction: column; }
nav.side button.navhead { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 32px; border-radius: var(--radius); font-size: inherit; font-weight: 400;
  text-transform: none; letter-spacing: inherit; color: var(--text); background: none; }
nav.side button.navhead:hover { background: var(--tint); }
nav.side button.navhead .chev { width: 14px; height: 14px; margin-inline-start: auto; transform: rotate(180deg); transition: transform .18s ease; opacity: .6; }
nav.side .navgroup.collapsed button.navhead .chev { transform: rotate(90deg); }
nav.side .navgroup.has-active:not(.collapsed) > button.navhead { color: var(--strong); }
nav.side .navitems { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .18s ease; }
nav.side .navitems > .sub { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; margin-inline-start: 17px; padding: 2px 0 6px 8px; border-inline-start: 1px solid var(--line); }
nav.side .navgroup.collapsed .navitems { grid-template-rows: 0fr; }
nav.side .navgroup.collapsed .navitems > .sub { visibility: hidden; transition: visibility 0s .18s; }
nav.side .sub a.navitem { padding: 6px 10px; }
nav.side .sub a.navitem > .ic { display: none; }
nav.side .sub a.navitem.active { box-shadow: none; background: var(--recessed); }
nav.side a.navitem:focus-visible, nav.side a.recent:focus-visible { outline-offset: -2px; }
.newtag.soon { background: var(--info-tint); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
@container app (max-width: 820px) {
  nav.side .navgroup, nav.side .navitems, nav.side .navitems > .sub, nav.side .navareas, nav.side .navrow { display: contents; }
  nav.side .sub a.navitem > .ic { display: inline; }
  nav.side button.navhead, nav.side .recents, nav.side .pinned, nav.side .navrow-actions { display: none !important; }
  nav.side .navrow > a.navitem { padding-inline-end: 10px; }
}

/* ---- Settings ---- */
.setlayout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.settoc { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 16px; }
.settoc a { color: var(--subtle); padding: 6px 10px; border-radius: var(--radius); font-size: 13.5px; }
.settoc a:hover { background: var(--tint); color: var(--text); text-decoration: none; }
.setsec { scroll-margin-top: 16px; }
.sethead { margin-bottom: 6px; } .sethead h2 { margin: 0 0 2px; } .sethead p { margin: 0; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.setrow b { font-weight: 500; color: var(--strong); }
.setrow .segmented button { display: inline-flex; align-items: center; gap: 6px; }
.setrow .segmented .ic { width: 14px; height: 14px; }
h3.subhead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--subtle); margin: 18px 0 2px; }
h3.subhead .ic { width: 14px; height: 14px; }
.subcard { border-top: 1px solid var(--hairline); padding: 4px 0 8px; }
@container content (max-width: 760px) { .setlayout { grid-template-columns: 1fr; } .settoc { position: static; flex-direction: row; flex-wrap: wrap; padding-top: 0; } }

/* ---- Hosted preview ---- */
.pv { margin: 12px 0; }
.pv .preview-frame { position: relative; min-height: 200px; }
@keyframes pv-pulse { 50% { opacity: .25; transform: scale(.8); } }
@keyframes pv-spin { to { transform: rotate(360deg); } }
body.hosted header.top { position: sticky; }
/* ---- Models: one row per model ---- */
.model-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--info-tint); color: var(--brand); flex: none; }
.model-ic .ic { width: 15px; height: 15px; }
.q-up { color: var(--success); } .q-down { color: var(--subtle); }
nav.side a.recent { color: var(--text); text-decoration: none; border-radius: var(--radius); }
nav.side a.recent:hover { background: var(--tint); text-decoration: none; }

/* Website → Switcher & notices: sketch of a page with the visitor UI */
.uiform { display: grid; gap: 16px; }
.uiform > div > b { display: block; font-weight: 500; color: var(--strong); margin-bottom: 6px; }
.uiform .segmented { flex-wrap: wrap; }
/* ---- Globe cards: solid deep-blue card in a darker frame, hatched globe behind the content ---- */



/* ---- Panels (Framer pass): hairline frames, 16 px radii, a lit top edge in dark, quiet 13 px captions ---- */



/* Hairline grid behind a hero or an empty area, fading out from the top centre; content stays above it. */
.hairgrid { position: relative; isolation: isolate; }
/* Empty states with a small globe */
.empty { display: flex; align-items: center; gap: 18px; padding: 14px; }
.empty .txt { flex: 1; min-width: 200px; }
.empty .txt b { display: block; color: var(--strong); font-weight: 500; font-size: 15px; }
.empty .txt p { margin: 2px 0 10px; color: var(--subtle); font-size: 13px; }
@container content (max-width: 480px) { .empty { flex-wrap: wrap; } }

/* Sign in: form first, the globe beside it on wide screens and below it on phones */
.auth { max-width: none; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 480px); gap: 56px; align-items: center; justify-content: center; padding: 40px 24px; }
.auth .center { margin: 0; max-width: none; padding: 0; }
.auth-hero { height: min(560px, calc(100dvh - 80px)); }
.auth-hero h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; color: #fff; max-width: 15ch; }
.auth-hero p { margin: 0; max-width: 34ch; font-size: 14px; opacity: .9; }
@media (max-width: 899px) {
  .auth { grid-template-columns: minmax(0, 420px); gap: 24px; align-content: start; padding: 10vh 16px 32px; }
  .auth-hero { height: auto; min-height: 220px; } /* a fixed 220px clipped the third point on phones */

.auth-hero h2 { font-size: 20px; }
}

/* Loading skeletons (shown only when a page takes longer than a moment) */
.skel { display: block; border-radius: 6px; background: var(--fill); }
.skel-title { width: 220px; height: 26px; margin: 22px 0 10px; }
.skel-line { width: 420px; max-width: 80%; height: 12px; margin: 0 0 22px; }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.skel-tile { height: 92px; border-radius: var(--radius-lg); }
.skel-card { height: 220px; border-radius: var(--radius-lg); }

/* ---- Motion: short, transform/opacity only, off for reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  button.primary:active, button.secondary:active, button.danger:active, button.ghost:active, button.accent:active,
  a.button:active, .iconbtn:active, .toplink:active, .as-send:active, .contact-card button:active, .segmented button:active { transform: scale(.97); }
  .skel { animation: skel-pulse 1.1s ease-in-out infinite alternate; }
  dialog.dialog[open], dialog.palette[open] { animation: dlg-in .16s cubic-bezier(.2, .8, .2, 1); }
  dialog.dialog[open]::backdrop, dialog.palette[open]::backdrop { animation: fade-in .16s ease-out; }
  .popover:not(.hidden) { animation: pop-in .12s ease-out; transform-origin: top right; }
  body.app .assistant.open > * { animation: as-in .18s cubic-bezier(.2, .8, .2, 1); }
  .toast { animation: toast-in .18s cubic-bezier(.2, .8, .2, 1); }
  .toast.out { animation: toast-out .14s ease-in forwards; }
  #view.enter { animation: view-in .16s ease-out; }
  .scroller { view-transition-name: content; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(content) { animation: fade-out .1s ease-in both; }
  ::view-transition-new(content) { animation: view-in .16s ease-out both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  body.app .assistant.open { animation: sheet-in .2s cubic-bezier(.2, .8, .2, 1); }
  body.app .assistant.open > * { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  nav.side .navitems, .progress > span { transition: none; }
}
@keyframes skel-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes as-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---- Header balance (left, beside the organization) ---- */
.headbal { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 6px; padding: 5px 10px; border-radius: var(--radius); color: var(--subtle); font-size: 13px; white-space: nowrap; }
.headbal:hover { background: var(--tint); text-decoration: none; color: var(--text); }
.headbal b { color: var(--strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.headbal .pill { font-size: 11px; padding: 1px 8px; }
.headbal.low b { color: var(--warning); }
@container app (max-width: 980px) { .headbal .pill, .headbal-label { display: none; } }
@container app (max-width: 560px) { .headbal { display: none; } }

/* ---- Recommendations: one in full, the next fading out, "Show all" ---- */
.recs ul { background: none; border-top: 1px solid var(--hairline); padding: 6px 18px 4px; }
.recs li { padding: 9px 0 9px 20px; }
.recs li + li { border-top: 0; }
.recs li::before { top: 16px; }
.recs li span a, .recs li span button.link { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); }
.recs.folded li:nth-child(n+3) { display: none; }
.recs.folded li:nth-child(2) { max-height: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.recs.folded li:nth-child(2) * { visibility: visible; }
.recs-more { display: block; width: 100%; padding: 8px 0 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.recs-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Accessibility ---- */
.skiplink { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius); background: var(--strong); color: var(--base); font-weight: 500; }
.skiplink:focus { top: 10px; text-decoration: none; }
#view:focus, .pagehead h1:focus { outline: none; box-shadow: none; } /* the router moves focus here after a navigation: no ring on a programmatic focus */
html[data-text="large"] :is(main, nav.side, header.top, .assistant > *, dialog) { zoom: 1.08; }
html[data-text="larger"] :is(main, nav.side, header.top, .assistant > *, dialog) { zoom: 1.18; }
html[data-contrast="more"] { --subtle: oklch(40% 0 0); --placeholder: oklch(52% 0 0); --line: oklch(14.5% 0 0 / .28); --hairline: oklch(82% 0 0); }
html[data-contrast="more"][data-theme="dark"] { --subtle: oklch(84% 0 0); --placeholder: oklch(70% 0 0); --line: oklch(52% 0 0); --hairline: oklch(40% 0 0); }
@media (prefers-color-scheme: dark) { html[data-contrast="more"]:not([data-theme="light"]) { --subtle: oklch(84% 0 0); --placeholder: oklch(70% 0 0); --line: oklch(52% 0 0); --hairline: oklch(40% 0 0); } }
html[data-underline] a:not(.button):not(.navitem):not(.navlink):not(.recent):not(.brand):not(.headbal) { text-decoration: underline; text-underline-offset: 2px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
html[data-motion="reduce"] .scroller { view-transition-name: none; }


/* ---- Banner: a fixed-size card that never stretches ---- */
.banner { padding: 10px 14px 10px 10px; gap: 16px; }
.banner .banner-art { width: 96px; height: 68px; min-height: 0; align-self: center; padding: 3px; border-radius: 12px; }
.banner .banner-art b { font-size: 19px; }
.banner .banner-art small { font-size: 10.5px; }
.banner .txt b { font-size: 14.5px; }
@container content (max-width: 560px) { .banner { flex-wrap: wrap; } .banner .txt { flex: 1 1 calc(100% - 140px); } }

/* ---- Ask AI: dots behind everything below the header, glyph with a moving blue dot field ---- */
.as-hero { position: relative; height: 170px; display: grid; place-items: center; margin: 0 -16px; }
.as-halo { position: absolute; inset: 0; width: 100%; height: 100%; }
.as-hero .as-logo { position: relative; height: 64px; filter: drop-shadow(0 6px 14px oklch(0% 0 0 / .25)); }
@media (prefers-reduced-motion: no-preference) {
  .as-hero .as-logo { animation: glyph-float 5s ease-in-out infinite; }
  .as-sugg button:hover { transform: translateY(-1px); }
}
@keyframes glyph-float { 50% { transform: translateY(-4px); } }
.as-sugg button:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--base); }
.as-sugg small { font-size: 12px; }
.as-ic { background: var(--tint); border-color: var(--hairline); }

/* ---- Websites ---- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.searchbox { display: flex; align-items: center; gap: 8px; min-width: 220px; padding: 0 10px; border-radius: var(--radius); background: var(--base); box-shadow: 0 0 0 1px var(--line); color: var(--subtle); }
.searchbox:focus-within { box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--ring); }
.searchbox input { flex: 1; min-width: 0; box-shadow: none; padding-inline-start: 0; background: none; }
.searchbox input:focus { box-shadow: none; }
.listcard { padding: 0; overflow: hidden; }
.listcard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--subtle); }
.listcard-head b { color: var(--strong); font-weight: 500; }
.listcard > .table-wrap { margin: 0; }
.listcard td:first-child, .listcard th:first-child { padding-inline-start: 18px; }
.meter { width: 140px; height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; flex: none; }
.meter i { display: block; height: 100%; width: 100%; background: var(--brand); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 99px); }
a.rowlink { color: var(--strong); font-weight: 500; }
@container content (max-width: 560px) { .meter { display: none; } }

/* Add-website dialog */
dialog.dialog.wide { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
dialog.dialog .dhead { font-size: 18px; padding: 18px 22px; }
dialog.dialog.wide .dbody { padding: 18px 22px 22px; }
.readback { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--text); }
.readback span { color: var(--strong); font-weight: 500; }
.readback .ph { color: var(--subtle); font-weight: 400; }
.choices { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 500; color: var(--subtle); }
dialog.dialog .choice, .choice { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--base); cursor: pointer; color: var(--text); font-size: 14px; font-weight: 400; }
dialog.dialog .choice > *, .choice > * { width: auto; }
.choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--info-tint); }
.choice:has(input:focus-visible) { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.choice input { margin-top: 3px; accent-color: var(--brand); min-height: 0; box-shadow: none; }
.choice b { display: block; font-weight: 500; color: var(--strong); }
.choice small { display: block; color: var(--subtle); font-size: 12.5px; margin-top: 2px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
dialog.dialog .fgrid label small { font-weight: 400; color: var(--subtle); font-size: 12px; }
details.advanced { margin: 14px 0 4px; border-top: 1px solid var(--hairline); padding-top: 6px; }
details.advanced > summary { font-weight: 500; color: var(--text); }
.dfoot { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
@container content (max-width: 560px) { .choices { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }

/* ---- Plans: key facts only, the rest in "Compare all plans" ---- */
.plan-balance { font-size: 13.5px; padding: 10px 12px; border-radius: var(--radius); background: var(--elevated); border: 1px solid var(--hairline); }
.plan-balance b { color: var(--strong); font-weight: 600; }
.plan ul.facts { gap: 9px; }
.plan ul.facts li { align-items: center; color: var(--text); }
.plan ul.facts li .ic { color: var(--subtle); margin-top: 0; }
.plan ul.facts b { font-weight: 600; color: var(--strong); }
.plan ul.facts small { display: block; color: var(--subtle); font-size: 11.5px; }
.plan ul.facts li > span { flex: 1; }
.plan li.fresh > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.plan li.fresh b { margin: 0 2px; }
.freshbar { display: inline-flex; gap: 2px; margin-inline-start: auto; padding-inline-start: 6px; align-self: center; }
.freshbar i { width: 4px; height: 10px; border-radius: 2px; background: var(--fill); }
.freshbar i.on { background: var(--success); }

/* ---- Questions: a quiet list with chevrons ---- */
.card.faq { padding: 0; overflow: hidden; }
.faq-head { padding: 18px 22px 14px; border-bottom: 1px dashed var(--line); }
.faq-head h2 { margin: 0 0 2px; font-size: 17px; }
.faq-head p { margin: 0; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 22px; color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--elevated); color: var(--strong); }
.faq-item > summary > span { flex: 1; }
.faq-item > summary .ic { color: var(--subtle); transform: rotate(180deg); transition: transform .18s ease; }
.faq-item[open] > summary .ic { transform: none; }
.faq-item > p { margin: 0; padding: 0 22px 16px; max-width: 72ch; color: var(--subtle); font-size: 13.5px; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] > p { animation: view-in .16s ease-out; } }
/* ---- Ask AI: structure, history, full screen ---- */
.assistant .as-frame { flex: 1; min-height: 0; display: flex; }
.assistant .as-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.assistant .as-side, .assistant .as-chips { display: none; }
.as-top .spacer { flex: 1; }
.as-title-wrap { position: relative; min-width: 0; }
.as-title { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 5px 8px; margin-inline-start: -8px; border: 0; border-radius: var(--radius); background: none;
  color: var(--strong); font: inherit; font-weight: 500; cursor: pointer; }
.as-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-title:hover { background: var(--tint); }
.as-title .ic { width: 14px; height: 14px; color: var(--subtle); flex: none; }
.as-history { inset-inline-start: 0; inset-inline-end: auto; width: 290px; max-height: 60vh; overflow-y: auto; }
.as-chat { display: flex; align-items: center; border-radius: var(--radius); }
.as-chat:hover, .as-chat.on { background: var(--tint); }
.as-chat .as-chat-open { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; padding: 7px 10px !important; background: none !important; }
.as-chat .as-chat-del { opacity: 0; padding: 6px !important; color: var(--subtle) !important; }
.as-chat:hover .as-chat-del, .as-chat .as-chat-del:focus-visible { opacity: 1; }
.as-chat-del .ic { width: 13px; height: 13px; }
.as-chatgroup { padding: 12px 10px 4px; font-size: 12px; font-weight: 500; color: var(--subtle); }
.as-history .as-chat button { border: 0; font: inherit; color: var(--text); cursor: pointer; text-align: start; }
.assistant .as-msg.me { white-space: pre-wrap; }
/* The access chip is a toggle */
button.chip-ro { background: var(--base); cursor: pointer; font: inherit; font-size: 12px; }
button.chip-ro:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
button.chip-ro[aria-pressed="true"] .ic { color: var(--success); }

/* Full screen (like a chat app): chats on the left, the conversation centred */
body.app .assistant.full { position: fixed; inset: 10px; z-index: 80; width: auto !important; height: auto; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px oklch(0% 0 0 / .45); visibility: visible; }
body.ai-full::after { content: ""; position: fixed; inset: 0; z-index: 79; background: oklch(0% 0 0 / .45); }
@media (prefers-reduced-motion: no-preference) { body.app .assistant.full { animation: dlg-in .18s cubic-bezier(.2, .8, .2, 1); } body.app .assistant.full > * { animation: none; } }
.assistant.full .as-top { border-radius: 14px 14px 0 0; }
.assistant.full .as-title { cursor: default; }
.assistant.full .as-title:hover { background: none; }
.assistant.full .as-side { display: flex; flex-direction: column; gap: 2px; width: 260px; flex: none; padding: 10px; border-inline-end: 1px solid var(--line); background: var(--canvas); overflow-y: auto; }
.as-side-head { display: none; }
.as-side-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.as-side-item:hover { background: var(--tint); }
.as-side-search { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin: 2px 0 6px; border-radius: var(--radius); color: var(--subtle); }
.as-side-search:focus-within { box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--ring); }
.as-side-search input { flex: 1; min-width: 0; padding-inline-start: 0; box-shadow: none; background: none; }
.as-side-search input:focus { box-shadow: none; }
.as-chatlist .as-chat button { border: 0; font: inherit; color: var(--text); cursor: pointer; text-align: start; background: none; border-radius: var(--radius); }
.assistant.full .as-help { display: none; }
.assistant.full .as-body, .assistant.full .as-input, .assistant.full .as-chips { width: min(780px, calc(100% - 48px)); margin-inline-start: auto; margin-inline-end: auto; }
.assistant.full .as-body { padding: 16px 0; }
.assistant.full .as-input { margin-bottom: 20px; }
.assistant.full .as-input textarea { min-height: 64px; font-size: 15px; }
/* Empty full screen: glyph, question and the input in the middle, three suggestions under it */
.assistant.full.is-empty .as-main { justify-content: center; }
.assistant.full.is-empty .as-body { flex: none; overflow: visible; }
.assistant.full.is-empty .as-sugg { display: none; }
.assistant.full.is-empty .as-hello h3 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 4px; }
.assistant.full.is-empty .as-hero { height: 190px; }
.assistant.full.is-empty .as-hero .as-logo { height: 84px; }
.assistant.full.is-empty .as-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.as-chips button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--base); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: start; }
.as-chips button:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.as-chips b { display: block; font-weight: 500; } .as-chips small { display: block; color: var(--subtle); font-size: 12px; }
@media (max-width: 760px) {
  body.app .assistant.full { inset: 0; border-radius: 0; }
  .assistant.full .as-side { display: none; }
}

/* Confirmation cards */
.as-action { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: var(--radius-lg); background: var(--base); }
.as-action.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.as-action.done, .as-action.cancelled { border-color: var(--line); }
.as-action-head { display: flex; align-items: center; gap: 8px; }
.as-action-head b { flex: 1; color: var(--strong); font-weight: 500; }
.as-action-head .ic { color: var(--brand); }
.as-action.danger .as-action-head .ic { color: var(--danger); }
.as-action-sum { margin: 6px 0 0; }
.as-action-params { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius); background: var(--elevated); font-size: 12.5px; }
.as-action-params dt { color: var(--subtle); }
.as-action-params dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.as-action-btns { display: flex; gap: 8px; margin-top: 12px; }
.as-action-out { margin: 8px 0 4px; white-space: pre-wrap; font-size: 13px; }
.secretrow { display: flex; gap: 8px; align-items: center; }
.secretrow .secret { flex: 1; margin: 0; }

/* ---- Banner art: as before on desktop; on phones a card: art the full width, text, button bottom-left ---- */
.banner .banner-art { width: 132px; height: 88px; }
.banner .banner-art b { font-size: 23px; }
.banner .banner-art small { font-size: 11px; }
@container content (max-width: 560px) {
  .banner { position: relative; flex-direction: column; align-items: stretch; padding: 8px 8px 16px; gap: 14px; }
  .banner .banner-art { width: auto; height: 148px; align-self: stretch; }

.banner .banner-art b { font-size: 28px; }
  .banner .txt { padding: 0 8px; flex: none; }
  .banner > button.primary { align-self: flex-start; margin-inline-start: 8px; }
  .banner > button.ghost { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; color: #fff; }
  .banner > button.ghost:hover { background: oklch(100% 0 0 / .15); }
}

/* ---- Round 7 ---- */
.recs > summary { padding: 10px 18px; }
.recs > summary .count { min-width: 17px; height: 17px; font-size: 10.5px; }
.testmode { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.testmode .ic { width: 14px; height: 14px; }
details.helper > summary { gap: 10px; }
details.helper > summary .small { font-weight: 400; }
details.helper[open] > summary { margin-bottom: 12px; }
/* Plan facts: icon | text | tip | meter, all on one centred line */
.plan ul.facts li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; }
.plan ul.facts li .freshbar { margin: 0; padding: 0; }
.plan li.fresh > span { display: block; }
.plan li.fresh b { margin: 0; }

/* ---- Translate & Documents: one card, languages on top, two panes ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tx.card { padding: 0; overflow: hidden; }
.tx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--elevated); }
.tx-bar .spacer, .tx-opts .spacer, .tx-foot .spacer { flex: 1; }
.tx-bar .segmented button { padding: 4px 10px; }
.tx-panes { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; }
.tx-pane { display: flex; flex-direction: column; min-width: 0; }
.tx-pane + .tx-pane { border-inline-start: 1px solid var(--line); }
.tx-pane.out { background: var(--elevated); }
.tx-foot { display: flex; align-items: center; gap: 12px; padding: 6px 10px 8px 20px; min-height: 42px; font-size: 12.5px; color: var(--subtle); }
.tx-foot .ghost { min-height: 28px; padding: 0 8px; font-size: 12.5px; }
.tx-more > summary { font-weight: 500; color: var(--text); padding: 7px 0; }
.tx-more .fgrid { margin-top: 6px; }
.tx-opts label, .tx-more label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--subtle); margin: 4px 0; }
.tx-go { align-self: center; }
.tx-go kbd { background: oklch(0% 0 0 / .1); border-color: transparent; color: var(--btn-text); margin-inline-start: 4px; }
.tx > .notice, .tx > div > .notice { margin: 0 14px 12px; }
@container content (max-width: 720px) {
  .tx-panes { grid-template-columns: 1fr; }
  .tx-pane + .tx-pane { border-inline-start: 0; border-top: 1px solid var(--line); }

.tx-go kbd { display: none; }
}
/* Documents: a drop zone instead of a file field */
.tx-drop { padding: 16px; }
.tx-pad { padding: 14px 16px; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; padding: 24px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--elevated); cursor: pointer; transition: border-color .12s, background-color .12s; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--info-tint); }
.drop:focus-within { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.drop b { color: var(--strong); font-weight: 500; font-size: 15px; }
.drop-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--base); border: 1px solid var(--line); color: var(--brand); margin-bottom: 4px; }
.drop-ic .ic { width: 20px; height: 20px; }
.drop.has-file > b, .drop.has-file > .small, .drop.has-file > .drop-ic { display: none; }
.drop-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--base); border: 1px solid var(--line); }
.drop-picked span { font-weight: 500; color: var(--strong); }
.drop-picked small { color: var(--subtle); }
.docrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 36px; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
.docrow:last-child { border-bottom: 0; }
.doc-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--tint); color: var(--subtle); }
.doc-main { min-width: 0; }
.doc-main b { display: block; font-weight: 500; color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container content (max-width: 560px) { .docrow { grid-template-columns: 32px minmax(0, 1fr) 36px; } .docrow > .badge { display: none; } .docrow > a.button, .docrow > span:not(.doc-ic):not(.badge) { grid-column: 2; justify-self: start; } }
.plan ul.facts li > .freshbar { display: inline-flex; flex: none; }
/* ---- Round 8 ---- */
/* Settings contents: a pill that slides to the section in view */
.settoc a { position: relative; z-index: 1; transition: color .18s ease; }
.settoc a.on { color: var(--strong); font-weight: 500; }
.settoc a.on:hover { background: none; }
.settoc-ind { position: absolute; inset-inline-start: 0; top: 0; z-index: 0; border-radius: var(--radius); background: var(--recessed); box-shadow: inset 0 0 0 1px var(--hairline); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.settoc-ind::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .settoc-ind { transition: none; } }

/* Ask AI: one dot canvas behind the panel's content */
.assistant .as-frame { position: relative; }
.as-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.assistant .as-side, .assistant .as-main { position: relative; z-index: 1; }
.as-hero .as-tilt { display: inline-block; transition: transform .2s ease-out; will-change: transform; }
.as-hero { height: 150px; }

/* ⓘ beside its label text, centred on the line */
.lbl { display: inline-flex; align-items: center; gap: 4px; }

/* Disclosure triangles become the same line chevron as everywhere else (not on "⋯" overflow menus) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details:not(.recs):not(.faq-item):not(.pagerow):not(.sl-more) > summary::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; flex: none; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}
details[open]:not(.recs):not(.faq-item):not(.pagerow):not(.sl-more) > summary::before { transform: rotate(90deg); }

/* Sidebar: the guide line starts below its row and ends above the next one */
nav.side .navitems > .sub { margin: 4px 0 6px 17px; padding: 0 0 0 8px; }
nav.side .navgroup.collapsed .navitems > .sub { margin-top: 0; margin-bottom: 0; }

/* Concentric corners: a container's radius is its child's radius plus the gap between them */
.banner { border-radius: 22px; }
.banner .banner-art { border-radius: 14px; padding: 3px; }
@container content (max-width: 560px) { .banner { border-radius: 22px; } .banner .banner-art { border-radius: 14px; } }

/* Recommendations: tight header, list and footer at any length */
.recs > summary { padding: 12px 18px; }
.recs ul { padding: 2px 18px 2px; }
.recs li { padding: 8px 0 8px 20px; }
.recs li::before { top: 15px; }
.recs.folded li:nth-child(2) { max-height: 24px; }
.recs-more { padding: 4px 0 10px; }
.recs:not(.folded) .recs-more { padding-top: 6px; border-top: 1px solid var(--hairline); }

/* Rows of lists read on one centre line */
.listcard td, .model-rows td { vertical-align: middle; }
.listcard td .progress { margin-top: 14px; }

/* ---- Round 9 ---- */
/* Tips: a quiet note, not an alert */
.toast.tipnote { display: block; width: min(360px, calc(100vw - 32px)); padding: 12px 14px 10px; box-shadow: 0 12px 32px oklch(0% 0 0 / .18); }
.tipnote-head { display: flex; align-items: center; justify-content: space-between; margin: -2px -6px 2px 0; }
.tipnote-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--subtle); }
.tipnote-head .ghost { min-height: 26px; padding: 0 6px; }
.toast.tipnote b { display: block; font-size: 14px; color: var(--strong); font-weight: 500; }
.toast.tipnote p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; }
.toast.tipnote .toast-actions { display: flex; gap: 16px; margin: 0; }
.toast.tipnote button.link { font-size: 13px; font-weight: 500; text-decoration: none; }
.toast.tipnote button.link:hover { text-decoration: underline; }
button.link.quiet { color: var(--subtle); }
.tip { display: block !important; padding: 12px 16px !important; }
.tip .tip-cta { display: block; margin-top: 4px; color: var(--link); font-size: 12.5px; }
.tip.unseen { box-shadow: inset 2px 0 0 var(--brand); }

/* Settings contents: just the pill, no accent bar */
.settoc-ind::before { display: none; }

/* Tiles: a label, the number, one quiet line */
.tile { padding: 14px 16px; }
.tile .label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.tile .value { font-size: 22px; margin: 4px 0 2px; }
.tile .sub { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tiles > .tile { flex-basis: 180px; }

/* Search-style first row (preview, estimator) */
.tx-bar.bigbar { gap: 8px; padding: 10px; }
.tx-bar.bigbar .searchbox { min-height: 40px; background: var(--base); }
.tx-bar.bigbar .searchbox input { font-size: 15px; }
.tx-bar.bigbar > select { width: auto; max-width: 240px; }
/* Models catalog */
.found { margin: 4px 0 12px; color: var(--subtle); font-size: 13px; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
label.switch.card { margin: 0 0 16px; padding: 14px 16px; }

/* ---- Round 10 ---- */
/* Recommendations header: no extra gap under the summary (details.card adds one). */
.recs[open] > summary { margin-bottom: 0; }
/* Footer sits at the bottom of the content column and its line runs to the right edge. */
body.app .scroller { display: flex; flex-direction: column; }
body.app .scroller > main { flex: 1 0 auto; }
/* Code blocks: even padding, Copy button centred on a one-line command. */
.codeblock pre { margin: 0; padding: 15px 84px 15px 14px; min-height: 52px; }
.codeblock button { top: 9px; inset-inline-end: 9px; }
/* Buttons: text centred and not selectable. */
button, a.button, .toplink, .navitem, .navlink, .navhead, .recs > summary, .segmented, .chip, .newtag, .ai-badge { -webkit-user-select: none; user-select: none; }
button.primary, button.secondary, button.danger, button.ghost, a.button { line-height: 1; }
/* "Set up with AI" badge beside Ask AI. */
.ai-badge { font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .02em; padding: 3px 7px; border-radius: 99px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); white-space: nowrap; }
@container app (max-width: 980px) { .ai-badge { display: none; } }
.mcp-pick { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 2px 0 6px; }

/* ---- Round 11 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Recommendations: details.card[open] > summary adds 8px below; this rule outranks it. */
details.card.recs[open] > summary { margin-bottom: 0; }
/* "Set up with AI": a little apart from the label, brighter. */
.ai-badge { margin-inline-start: 4px; color: var(--btn-text); background: color-mix(in srgb, var(--brand) 85%, #fff); box-shadow: none; }
/* Tip note: title + close on one row, real buttons on the right. */
.toast.tipnote { padding: 14px 16px; }
.tipnote-head { align-items: flex-start; gap: 10px; margin: 0; }
.tipnote-head b { flex: 1; padding-top: 2px; }
.tipnote-head .ghost { margin: -2px -8px 0 0; }
.toast.tipnote p { margin: 6px 0 12px; color: var(--subtle); }
.toast.tipnote .toast-actions { justify-content: flex-end; gap: 8px; }
.toast.tipnote .toast-actions button { min-height: 32px; }
/* Phone menu: one row, every item centred on the same line. */
@container app (max-width: 820px) {
  nav.side { align-items: center; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  nav.side .quicksearch { width: auto; margin: 0; flex: none; }
  nav.side > a.navitem, nav.side .navrow > a.navitem, nav.side > .navlink, nav.side .quicksearch { min-height: 36px; }
}
/* Sign in: logo and wordmark. */
.lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.lockup .logo { height: 64px; width: auto; }
.lockup b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--strong); }
.lockup small { display: block; margin-top: 4px; font-size: 15px; color: var(--subtle); }
/* Sign-in code: six slots over one real input. */
.otp { position: relative; display: block; flex: 1; min-width: 0; }
.otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; letter-spacing: 0; cursor: text; z-index: 1; }
.otp-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.otp-slots i { display: grid; place-items: center; height: 44px; border-radius: var(--radius); background: var(--base); box-shadow: 0 0 0 1px var(--line); font-style: normal; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--strong); transition: box-shadow .1s; }
.otp-slots i.on { box-shadow: 0 0 0 2px var(--brand); }
#code-form { flex-wrap: nowrap; align-items: stretch; }
#code-form button { min-height: 44px; }
/* Fewer borders (less eye strain): surfaces separate by tone, hairlines stay faint. */
.card, .tile { border-color: var(--hairline); box-shadow: none; }
.recs ul { border-top-color: transparent; }

/* ---- Round 12 ---- */
/* Charts: a quiet warm-neutral line, not the brand blue. */



svg.chart .area { opacity: 1; }
svg.chart .line { stroke-width: 1.5; }
svg.chart .line.flat { opacity: .35; }
/* Websites list: 7-day page-view sparkline. */
.spark { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; }
.spark svg.chart { width: 104px; height: 28px; flex: none; }
.spark b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--strong); }
/* "Set up with AI": a plain, quiet label (no glowing pill). */
.ai-badge, :root[data-theme="dark"] .ai-badge { margin-inline-start: 6px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0;
  color: var(--subtle); background: none; box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-badge { color: var(--subtle); } }
.toplink:hover .ai-badge { color: var(--text); }
/* Plans: name, rule, price, plain list; one accent for the recommended plan. */
.plan { gap: 0; padding: 22px 22px 20px; border-color: var(--hairline); box-shadow: none; }
.plan.featured { border-color: var(--hairline); box-shadow: none; }
.plan.current { background: var(--base); }
.plan.fits { border-color: color-mix(in srgb, var(--brand) 55%, var(--hairline)); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.plan-tag { font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: var(--fill); color: var(--text); white-space: nowrap; }
.plan-tag.rec, .plan-tag.fit { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--link); }
.plan-rule { height: 3px; border-radius: 2px; margin: 12px 0 14px; background: var(--fill); }
.plan.featured .plan-rule { background: var(--brand); }
.plan .price b { font-size: 28px; font-weight: 600; }
.plan .for { margin: 4px 0 16px; font-size: 13px; min-height: 2.6em; }
.plan ul.facts { gap: 10px; margin-bottom: 18px; }
.plan ul.facts li { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 13.5px; line-height: 1.45; }
.plan ul.facts li > span:first-child { flex: 1; }
/* Locked feature: dimmed controls with the plan and an Upgrade button on top. */
.locked { position: relative; border-radius: var(--radius); margin: 6px 0; }
.locked-body { opacity: .35; filter: blur(.6px); pointer-events: none; }
.locked-over { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 8px; text-align: center; }
.locked-plan { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--fill); color: var(--text); }
.locked-plan .ic { width: 13px; height: 13px; }
.locked-over button.primary { min-height: 30px; font-size: 13px; }
.locked-about { flex-basis: 100%; font-size: 12px; color: var(--subtle); }
.segmented button.is-locked { display: inline-flex; align-items: center; gap: 5px; opacity: .6; }
.segmented button.is-locked .ic { width: 12px; height: 12px; }
.segmented button.is-locked:hover { opacity: 1; }

/* ---- Round 13: sign-in options, setup guide, batch ---- */
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.auth-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.auth-alt .secondary { display: inline-flex; align-items: center; gap: 8px; }
.redo-setup { color: var(--subtle); font-size: 13px; border: 1px dashed var(--line); }
.redo-setup:hover { color: var(--text); }

.choices { display: grid; gap: 10px; }
.choices.two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice { display: flex; align-items: flex-start; gap: 12px; text-align: start; padding: 14px 16px; border-radius: var(--radius); background: var(--base); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.choice:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.choice.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.choice.big { flex-direction: column; padding: 20px; }
.choice > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.choice b { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-weight: 600; }
.choice-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }

.totp-box { display: grid; gap: 8px; }
.totp-steps { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
.totp-key { font-family: var(--mono); letter-spacing: .06em; user-select: all; }
.pk-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.pk-list li { display: flex; align-items: center; gap: 8px; }
.row-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.totp-scan { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.totp-qr { padding: 8px; background: #fff; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); line-height: 0; }
.totp-steps details summary { cursor: pointer; }

/* Setup guide: full screen, one question at a time. */
@media (prefers-reduced-motion: no-preference) { .setup-step { animation: setup-in .45s cubic-bezier(.2, .8, .2, 1); } }
@keyframes setup-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* The real Ask AI, embedded: no panel chrome. */
body.app .assistant.embedded { position: static; transform: none; width: 100% !important; height: 100%; border: 0; box-shadow: none; visibility: visible; animation: none; }
.assistant.embedded > * { animation: none !important; }
.assistant.embedded .as-top, .assistant.embedded .as-help { display: none; }
@media (max-width: 640px) { .setup-head { padding: 16px; } .setup-stage { place-items: start center; padding-top: 4vh; } }

/* ---- Round 14: calmer setup, more room everywhere ---- */
/* Spacing: everything had too little air. */
@media (max-width: 640px) { main { padding: 24px 16px 72px; } }

/* Setup: one calm rhythm on every screen. */
.choice { padding: 18px 20px; gap: 14px; border-radius: 14px; transition: border-color .15s, background-color .15s; }
.choice.big { padding: 22px 24px; gap: 14px; }
.choice.on { box-shadow: none; background: color-mix(in srgb, var(--brand) 6%, var(--base)); }
.choice > span:last-child { gap: 5px; }
.choices.stack-3 { grid-template-columns: 1fr; }
.choices.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Buttons: quiet, not shouting. */
/* Two-step switch row. */
.switch-knob { flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--fill); position: relative; transition: background-color .2s; }
.switch-knob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px oklch(0% 0 0 / .3); }
/* Setup page: the dot grid is the page itself; the embedded assistant sits on it, unframed. */
body.app .assistant.embedded { background: none; overflow: visible; }
.assistant.embedded .as-dots { display: none; }
.assistant.embedded .as-frame, .assistant.embedded .as-main { overflow: visible; }
.assistant.embedded .as-body { padding: 4px 4px 12px; }
.assistant.embedded .as-input { margin: 8px 2px 2px; background: var(--base); }
/* Always solid and still: no fades, no slide-ins, nothing half-transparent. */
.setup-step.wide, .assistant.embedded, .assistant.embedded * { animation: none !important; }
.assistant.embedded .as-msg { opacity: 1; margin: 16px 0; }
.assistant.embedded .as-msg.ai { background: var(--base); border-color: var(--line); padding: 14px 18px; border-radius: 16px 16px 16px 6px; }
.assistant.embedded .as-msg.me { background: var(--fill); padding: 12px 16px; border-radius: 16px 16px 6px 16px; }
.as-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.as-quick button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--base); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.as-quick button:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.as-quick .ic { width: 15px; height: 15px; color: var(--brand); }

/* Setup pitch art */
/* Enterprise contact page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 400 !important; }
.chip-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--base)); }
.chip-check input { margin: 0; }
/* Assistant: plan change card */
.as-plan { margin: 10px 0 0; border-radius: var(--radius); background: var(--elevated); padding: 12px; display: grid; gap: 10px; }
.as-plan-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.as-plan-name { font-size: 18px; font-weight: 600; color: var(--strong); line-height: 1.2; }
.as-plan-price { font-size: 15px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.as-plan-rows { display: grid; gap: 4px; font-size: 12.5px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.as-plan-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 6px; }
.as-plan-row .ic { width: 12px; height: 12px; color: var(--subtle); }
.as-plan-row b { color: var(--strong); font-weight: 600; }
.as-plan-note { margin: 0; }

/* Assistant answers as cards */
.as-msg.ai.as-card { padding: 0; overflow: hidden; }
.as-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--hairline); }
.as-card-head b { font-size: 13.5px; font-weight: 600; color: var(--strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-card-head .spacer { flex: 1; }
.as-card-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--brand) 12%, var(--base)); color: var(--brand); }
.as-card-mark .ic { width: 14px; height: 14px; }
.as-card.err .as-card-mark { background: var(--danger-tint); color: var(--danger); }
.as-card-copy { min-height: 26px; width: 26px; padding: 0; justify-content: center; opacity: .7; }
.as-card-copy:hover, .as-card-copy.done { opacity: 1; color: var(--success); }
.as-card-body { padding: 12px 14px; }
.as-card-body > :first-child { margin-top: 0; }
.as-card-body > :last-child { margin-bottom: 0; }
.as-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--hairline); background: var(--elevated); }
.as-card-actions button { min-height: 30px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.as-card-actions .ic { width: 12px; height: 12px; }
.assistant.embedded .as-msg.ai.as-card { padding: 0; }
.assistant.embedded .as-card-body { padding: 14px 18px; }

/* Setup: the featured purpose (website translation) */
.choices .choice.featured { grid-column: 1 / -1; padding: 18px 18px; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--base)); }
.choice.featured b { font-size: 17px; font-weight: 600; }
.choice.featured .choice-ic { color: var(--brand); }
.choice-tag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: var(--btn-text); font-size: 11px; font-weight: 600; letter-spacing: .02em; }

/* Settings on phones: a menu of sections; each opens on its own page */
.setmenu, .setback { display: none; }
@media (max-width: 760px) {
  .setlayout { display: block; }
  .setlayout .settoc { display: none; }
  .setlayout:not([data-open]) .setmenu { display: block; padding: 4px 0; overflow: hidden; }
  .setlayout:not([data-open]) .setmain { display: none; }
  .setlayout[data-open] .setsec:not(.open) { display: none; }
  .setlayout[data-open] .setback { display: inline-flex; }
  .setmenu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 15px; color: var(--strong); text-align: start; cursor: pointer; }
  .setmenu-row + .setmenu-row { border-top: 1px solid var(--hairline); }
  .setmenu-row > span:nth-child(2) { flex: 1; }
  .setmenu-row > .ic { width: 14px; height: 14px; color: var(--subtle); }
  .setmenu-row:active { background: var(--tint); }
  .setmenu-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, var(--base)); color: var(--brand); }
  .setmenu-ic .ic { width: 16px; height: 16px; }
  .setback { align-items: center; gap: 2px; margin: 0 0 10px -6px; padding: 6px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--link); cursor: pointer; }
  .setback-ic .ic { width: 16px; height: 16px; transform: rotate(180deg); }
}

/* Colour round 17 (blue) removed: the theme colour lives in the Accure round 18 layer at the end. */

/* Setup fits one screen: no scrolling; tall steps are scaled down by onboarding.js. */
@media (max-height: 820px) {
  .setup-step h1 { font-size: clamp(24px, 3.4vw, 32px); }
  .setup-line { margin-bottom: 22px; }
  .setup-step h1 + :not(.setup-line) { margin-top: 20px; }
  .setup-actions { margin-top: 24px; }
  .setup-art { height: 140px; margin-bottom: 20px; }
  .setup-head { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-height: 680px) {
  .setup-line { margin-bottom: 14px; font-size: 15px; }
  .setup-art { height: 110px; margin-bottom: 14px; }
  .setup-actions { margin-top: 16px; }
  .choice.big { padding: 14px 16px; }
}
@media (max-width: 640px) { .setup-ai { height: calc(100dvh - 220px); } .setup-stage { padding-top: 4px; } }

/* "What brings you here?": the website card featured on top, the other three evenly below. */
.choices.purpose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choices.purpose .choice.big { padding: 18px; gap: 12px; }
.choices.purpose .choice-ic { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 14%, var(--base)); color: var(--brand); }
.choices.purpose .choice-ic .ic { width: 20px; height: 20px; }
.choices.purpose .choice.featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
.choices.purpose .choice.featured .choice-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--brand); color: var(--btn-text); }
.choices.purpose .choice.featured .choice-ic .ic { width: 24px; height: 24px; }
.choices.purpose .choice.featured > .ic { margin-inline-start: auto; width: 18px; height: 18px; color: var(--brand); flex: none; }
.choice-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.choice-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.choice-title b { font-size: 17px; }
.choices.purpose .choice-tag { width: fit-content; justify-self: start; margin: 0; padding: 2px 8px; font-size: 11px; line-height: 1.5; }
@media (max-width: 720px) { .choices.purpose { grid-template-columns: 1fr; } .choices.purpose .choice.big:not(.featured) { flex-direction: row; align-items: center; } }
/* ======================================================================================
   Accure layer. Everything above is the MXO design system, unchanged. Accure keeps its tokens,
   type scale and components and adds: its own brand (the blue plus mark), document status
   pills, the AI home, the module kit (lists, forms, detail, boards), the inbox and confirm page.
   ====================================================================================== */


a.button.primary { justify-content: center; font-weight: 500; }
.num, td.num, .amount { font-variant-numeric: tabular-nums; }
main.wide { max-width: 1440px; }

/* Brand lockup: the Accure mark, wordmark beside it. */
.brandmark { display: inline-flex; align-items: center; gap: 9px; color: var(--strong); font-weight: 650; letter-spacing: -.01em; font-size: 14px; }
.brandmark:hover { text-decoration: none; }
.brandmark img { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 1px 2px oklch(0% 0 0 / .15); }
.lockup .logo { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--blue) 60%, transparent), 0 1px 2px oklch(0% 0 0 / .15); }
.lockup b { letter-spacing: -.01em; }

.avatar { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 650; }

/* Count badges in the sidebar and on the bell */
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: auto; border-radius: 9px; background: var(--brand-mark); color: var(--brand-ink); font-size: 11px; font-weight: 600; }
.iconbtn { position: relative; }
.iconbtn .count { position: absolute; top: 2px; inset-inline-end: 0; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }

/* Document status pills (planning/UI/design-system.md). Every pill has a tone: the base .st is the neutral
   tone (draft, todo, channels, intervals and any value not listed), the lists below map known status values
   (the lower-cased value is the class) to warning, success, info, danger or muted. */
.st { --st-bg: var(--fill); --st-fg: var(--text); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--st-bg); color: var(--st-fg); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.st:is(.pending, .draft-pending, .T2, .needs_review, .review, .requested, .submitted, .queued, .paused, .partially_signed, .partially_paid, .invoice_due, .proposed, .proposal, .negotiation, .waiting, .due_soon) { --st-bg: var(--warning-tint); --st-fg: var(--warning); }
.st:is(.approved, .posted, .executed, .paid, .done, .active, .booked, .completed, .signed, .accepted, .published, .granted, .answered, .charged, .resolved, .won, .matched, .received, .opted_in, .signed_up, .invoiced, .filed, .ok) { --st-bg: var(--success-tint); --st-fg: var(--success); }
.st:is(.sent, .info, .T1, .open, .planned, .scheduled, .in_progress, .running, .doing, .quoted, .issued, .inbox, .qualified, .lead, .engaged, .shared, .configured) { --st-bg: var(--info-tint); --st-fg: var(--link); }
.st:is(.overdue, .failed, .T3, .rejected, .dead, .declined, .refused, .firing, .mismatch, .collection, .lost, .disputed, .error) { --st-bg: var(--danger-tint); --st-fg: var(--danger); }
.st:is(.locked, .cancelled, .expired, .ended, .terminated, .archived, .abandoned, .retired, .lapsed, .withdrawn, .void, .revoked, .inactive, .disposed, .skipped, .waived, .credited, .removed, .closed, .none, .superseded, .opted_out, .not_needed, .disabled) { --st-bg: var(--recessed); --st-fg: var(--subtle); }
/* Muted pills sit on recessed backgrounds too: a hairline keeps their edge. */
.st:is(.locked, .cancelled, .expired, .ended, .terminated, .archived, .abandoned, .retired, .lapsed, .withdrawn, .void, .revoked, .inactive, .disposed, .skipped, .waived, .credited, .removed, .closed, .none, .superseded, .opted_out, .not_needed, .disabled) { box-shadow: inset 0 0 0 1px var(--hairline); }

/* Country pack honesty banner */
.draftnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); background: var(--warning-tint); color: var(--text); font-size: 13px; margin: 12px 0; border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.draftnote .ic { color: var(--warning); margin-top: 1px; }

/* AI home */
.composer { position: relative; margin: 22px 0 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--base); box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 8px 24px -16px oklch(0% 0 0 / .25); }
.composer:focus-within { box-shadow: 0 0 0 1.5px var(--brand), 0 8px 24px -16px oklch(0% 0 0 / .25); }
.composer textarea { min-height: 72px; border: 0; box-shadow: none; background: none; resize: none; padding: 16px 18px 6px; font-size: 15px; }
.composer textarea:focus { box-shadow: none; }
.composer .bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 16px; color: var(--subtle); font-size: 12px; }
.composer .bar .grow { min-width: 0; }
.composer .send { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 24px; }
.chipsrow button { border: 1px solid var(--line); background: var(--base); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.chipsrow button:hover { background: var(--tint); }
.brief { display: grid; gap: 8px; }
.brief-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--base); color: var(--text); }
a.brief-item:hover { background: var(--elevated); text-decoration: none; }
.brief-item .bi { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--recessed); color: var(--subtle); }
.brief-item.due .bi { background: var(--warning-tint); color: var(--warning); }
.brief-item.todo .bi { background: var(--brand-tint); color: var(--brand); }
.brief-item.warn .bi { background: var(--danger-tint); color: var(--danger); }
.brief-item b { display: block; font-weight: 500; color: var(--strong); }
.brief-item span { color: var(--subtle); font-size: 13px; }
.brief-item .when { margin-inline-start: auto; color: var(--subtle); font-size: 12px; white-space: nowrap; }
.sectionhead { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 10px; }
.sectionhead h2 { margin: 0; }
.sectionhead a, .sectionhead button { margin-inline-start: auto; font-size: 13px; }

/* Assistant panel (shares MXO's .assistant frame) */
.assistant .as-top .brandmark img { width: 22px; height: 22px; }
.assistant .as-top b { margin-inline-start: 8px; }
.assistant .as-body { display: flex; flex-direction: column; }
.as-msg.ai .md > :first-child { margin-top: 0; } .as-msg.ai .md > :last-child { margin-bottom: 0; }
.as-msg.ai .md h4 { margin: 6px 0 4px; font-size: 14px; color: var(--strong); }
.as-msg.ai .md ul, .as-msg.ai .md ol { padding-inline-start: 18px; margin: 6px 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.as-input .row { margin: 0; align-items: center; }
.as-input .hint { color: var(--subtle); font-size: 12px; flex: 1; }
.as-history { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.as-history button { display: flex; align-items: center; gap: 8px; text-align: start; border: 0; background: none; padding: 7px 8px; border-radius: var(--radius); font: inherit; color: var(--text); cursor: pointer; }
.as-history button:hover { background: var(--tint); }
.as-history button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--subtle); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Pending action card (assistant, inbox) */
.pcard { border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); background: var(--base); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.pcard .ph { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--subtle); }
.pcard .ph .st { margin-inline-start: auto; }
.pprev { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 8px; font-size: 13px; } .pprev dt { color: var(--subtle); } .pprev dd { margin: 0; }
.pcard p { margin: 6px 0 10px; color: var(--strong); font-weight: 500; }
.pcard .row { margin: 0; gap: 8px; }
.pcard details { margin-top: 6px; font-size: 12px; }
.pcard pre { max-height: 220px; font-size: 12px; }

/* Module kit */
.kit-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 10px; }
.kit-toolbar input[type="search"] { min-width: 220px; flex: 1; max-width: 360px; }
.kit-list tbody tr { cursor: pointer; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.kit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.kit-form .field.wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--subtle); }
.field > input, .field > select, .field > textarea { width: 100%; font-size: 14px; font-weight: 400; color: var(--text); }
.field > textarea { min-height: 90px; }
.field small { font-weight: 400; }
.field .req { color: var(--brand); }
label.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); font-weight: 400; }
label.check input { margin-top: 2px; }
.kit-detail { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 0; margin: 0; }
.kit-detail dt, .kit-detail dd { padding: 9px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.kit-detail dt { color: var(--subtle); font-size: 13px; }
.kit-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kit-col { background: var(--recessed); border-radius: 12px; padding: 8px; min-height: 120px; border: 1px solid var(--hairline); }
.kit-col.drop { box-shadow: inset 0 0 0 2px var(--brand); }
.kit-col h3 { display: flex; align-items: center; gap: 8px; margin: 4px 6px 8px; font-size: 13px; font-weight: 600; color: var(--strong); }
.kit-col h3 small { color: var(--subtle); font-weight: 500; }
.kit-card { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 1px oklch(0% 0 0 / .03); }
.kit-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.kit-card b { display: block; font-weight: 500; color: var(--strong); }
.kit-card span { color: var(--subtle); font-size: 12px; }
.kit-card.dragging { opacity: .5; }

/* Inbox */
.inbox-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item .meta { color: var(--subtle); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inbox-item b { color: var(--strong); font-weight: 500; }
.inbox-item .row { margin: 0; gap: 8px; }

/* Onboarding (create company) */
.onboard { max-width: 560px; margin: 4vh auto; }
.onboard .card { padding: 28px; }
.onboard h1 { font-size: 24px; }
.found { display: flex; gap: 14px; padding: 14px; border-radius: 12px; background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); margin: 12px 0; }
.found b { display: block; color: var(--strong); font-size: 15px; }
.found span { color: var(--subtle); font-size: 13px; display: block; }

/* Confirm page */
.confirm { max-width: 520px; margin: 6vh auto; padding: 0 16px; }
.confirm .card { padding: 26px; }
.confirm h1 { font-size: 21px; line-height: 1.3; }
.confirm .what { font-size: 17px; font-weight: 500; color: var(--strong); margin: 10px 0 16px; line-height: 1.4; }
.confirm .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.confirm .actions button { min-height: 44px; font-size: 15px; }
.confirm .done { text-align: center; padding: 10px 0; }
.confirm .done .ic { width: 40px; height: 40px; color: var(--success); }

/* Sign-in page: single column variant */
.auth.single { grid-template-columns: minmax(0, 420px); }
.auth-hero.accure { border-radius: 21px; padding: 5px; background: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.auth-hero.accure .inner { height: 100%; border-radius: 16px; padding: 30px; color: #fff; background:
  radial-gradient(120% 80% at 100% 0%, #6f9bff 0%, transparent 60%), linear-gradient(160deg, #2f6bf2, #1b3fae); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero.accure .inner::after { content: ""; position: absolute; inset-inline-end: -40px; bottom: -40px; width: 280px; height: 280px; opacity: .09; transform: rotate(-8deg);
  background: linear-gradient(#fff, #fff) center / 18% 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 18% no-repeat; border-radius: 40px; }
.auth-hero.accure h2 { color: #fff; font-size: 28px; max-width: 16ch; }
.auth-hero.accure ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14px; position: relative; z-index: 1; }
.auth-hero.accure li { display: flex; gap: 8px; align-items: center; }
.auth-hero.accure li .ic { color: #fff; }
.langswitch { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.langswitch button { border: 0; background: none; font: inherit; font-size: 12px; color: var(--subtle); padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.langswitch button.on { background: var(--fill); color: var(--strong); }
/* Language picker (lang-picker.js): globe + the current language's own name; a searchable popover of languages. */



.lp { display: inline-flex; min-width: 0; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--base); color: var(--strong); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px oklch(0% 0 0 / .05); }
.lp-btn:hover { background: var(--tint); }
.lp-btn[aria-expanded="true"] { background: var(--tint); border-color: color-mix(in srgb, var(--strong) 24%, var(--line)); }
.lp-btn .lp-globe { width: 16px; height: 16px; color: var(--subtle); stroke-width: 1.6; }
.lp-btn .lp-caret { width: 14px; height: 14px; color: var(--subtle); stroke-width: 2; }
.lp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }
.lp-btn.lp-field { min-width: 220px; height: 36px; border-radius: var(--radius); padding: 0 10px; box-shadow: none; }
.lp-btn.lp-field .lp-name { flex: 1; text-align: start; }
.lp-pop { position: fixed; z-index: 1000; width: min(300px, calc(100vw - 16px)); max-height: min(440px, calc(100dvh - 24px)); display: flex; flex-direction: column;
  padding: 6px; background: var(--base); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--lp-shadow); overflow: hidden; }
.lp-search { display: flex; align-items: center; gap: 9px; flex: none; height: 40px; margin: 0 0 6px; padding: 0 12px; border-radius: 11px; background: var(--recessed); cursor: text; }
.lp-search:focus-within { box-shadow: 0 0 0 1px var(--line); }
.lp-search .ic { width: 15px; height: 15px; color: var(--subtle); }
.lp-search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; color: var(--strong); font: inherit; font-size: 14px; outline: none; }
.lp-search input:focus, .lp-search input:focus-visible { box-shadow: none; outline: none; }
.lp-search input::placeholder { color: var(--placeholder); }
.lp-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 10px; cursor: pointer; }
.lp-item.active { background: var(--tint); }
.lp-item[hidden] { display: none; }
.lp-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-own { font-size: 14px; font-weight: 500; color: var(--strong); line-height: 1.3; }
.lp-sub { font-size: 12.5px; color: var(--subtle); line-height: 1.3; }
.lp-check { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--strong); color: var(--base); }
.lp-check .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.lp-none { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; color: var(--subtle); }
@media (prefers-reduced-motion: no-preference) {
  .lp-btn { transition: background-color .15s, border-color .15s, transform .12s; }
  .lp-btn:active { transform: scale(.97); }
  .lp-pop { animation: lp-pop .18s cubic-bezier(.2, .9, .3, 1); transform-origin: top; }
}
@keyframes lp-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.consent-list { margin: 4px 0; padding-inline-start: 18px; color: var(--subtle); }
.consent-list li { margin: 3px 0; }

/* Settings */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--subtle); }
.kv dd { margin: 0; }
.copyrow { display: flex; gap: 8px; align-items: center; }
.copyrow code { flex: 1; padding: 8px 10px; overflow-x: auto; white-space: nowrap; }
.rules-path { font-family: var(--mono); font-size: 12.5px; }
.rules-crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-family: var(--mono); font-size: 12.5px; margin: 10px 0; }
.rules-crumbs button { border: 0; background: none; color: var(--link); cursor: pointer; font: inherit; padding: 0; }

/* Fixes after visual review */
.as-input { align-self: stretch; }
.as-input textarea { width: 100%; }
.as-input textarea:focus, .composer textarea:focus { box-shadow: none; }
.aipage .as-body { flex: 1; overflow: auto; padding: 16px 0; }
.aipage .as-body > *, .aipage .as-input { width: min(780px, calc(100% - 48px)); margin-inline-start: auto; margin-inline-end: auto; }
.aipage .as-body > .as-msg.me { margin-inline-start: auto; margin-inline-end: max(24px, calc((100% - 780px) / 2)); width: auto; max-width: min(640px, 80%); }
.aipage .as-input { margin-bottom: 20px; }
.aipage .as-input textarea { min-height: 56px; font-size: 15px; }
.aipage-side { width: 250px; flex: none; border-inline-end: 1px solid var(--line); overflow: auto; background: var(--elevated); }
.aipage-side button.on { background: var(--recessed); font-weight: 500; }
.aipage-side small { margin-inline-start: auto; white-space: nowrap; }
@container app (max-width: 820px) { .aipage-side { display: none; } }
@container app (max-width: 640px) { #ask-ai kbd { display: none; } }
.confirm form.card { display: flex; flex-direction: column; gap: 12px; }
.confirm form.card h1 { margin: 0; }
.confirm form.card .field select { width: 100%; }

/* Phone: summary tiles two per row everywhere (integrator polish) */
@media (max-width: 640px) {
  .tiles { gap: 10px; margin: 16px 0; }
  .tiles > *, .tiles > .tile { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .tile { padding: 12px 14px; }
  .tile .value { font-size: 18px; }
}

/* ---- WP5: notifications bell, support banner, palette records -------------------------------- */
.notifpop { width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.notifpop .notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notifpop .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.notifpop .notif-item:hover { background: var(--tint); text-decoration: none; }
.notifpop .notif-item > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notifpop .notif-item b { font-weight: 450; color: var(--text); overflow-wrap: anywhere; }
.notifpop .notif-item.unread b { font-weight: 600; color: var(--strong); }
.notifpop .notif-item.unread::after { content: ""; flex: none; width: 7px; height: 7px; margin: 7px 0 0 auto; border-radius: 50%; background: var(--brand); }
.notifpop .notif-item.todo { background: var(--warning-tint); color: var(--warning); }
.notifpop .notif-item .ic { flex: none; margin-top: 2px; color: var(--subtle); }
.notifpop a:not(.notif-item) { display: inline-flex; padding: 6px; font-size: 13px; }
/* Rows size to their text at every width: .popover is a flex column with a max-height, and the generic
   `.popover a { min-height: 34px }` replaces the flex default `min-height: auto`, so eight long rows would
   otherwise shrink to 34px each and overprint their neighbours (the panel scrolls instead). Titles clamp
   at two lines (three on phones), the full summary sits under the title in the subtle meta size. */
.notifpop > * { flex-shrink: 0; }
.popover.notifpop a.notif-item { height: auto; min-height: 0; flex-shrink: 0; align-items: flex-start; padding: 10px; line-height: 1.4; }
.notifpop .notif-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.notifpop .notif-item .notif-body { color: var(--subtle); font-size: var(--fs-meta); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.notifpop .notif-item:not(.todo) :is(small, time) { color: var(--subtle); }
.notifpop .notif-item + .notif-item:not(.todo) { border-top: 1px solid var(--hairline); border-start-start-radius: 0; border-start-end-radius: 0; }
.notifpop .notif-item:has(+ .notif-item:not(.todo)) { border-end-start-radius: 0; border-end-end-radius: 0; }
.linkbtn { background: none; border: 0; padding: 2px 4px; color: var(--brand); font: inherit; font-size: 13px; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.notif-row.unread b { color: var(--strong); }
.notif-row.unread .bi { position: relative; }
.notif-row.unread .bi::after { content: ""; position: absolute; top: 2px; inset-inline-start: -10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.notif-row .bi .ic { color: var(--subtle); margin-top: 3px; }
.notif-row .pill { padding: 0; background: none; color: var(--placeholder); } /* the category as quiet text, not a chip on every row */
.notif-row > .row > div { min-width: 0; }
.notif-row b { overflow-wrap: anywhere; }
.impbar { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--warning-tint); color: var(--warning); font-size: 13px; border-bottom: 1px solid var(--line); flex: none; }
.impbar span { flex: 1; min-width: 0; }
.impbar button { padding: 3px 10px; font-size: 12px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impbar { flex-wrap: wrap; } }

/* ======================================================================================
   Accure round 18: MXO's later Cloudflare layer, ported in Accure blue. One place for the
   theme colour (switch back by editing the --blue-* tokens), a lighter dark canvas, the
   shell (logo + wordmark, header tools, sidebar org switcher, account menu, footer, support),
   quiet empty states, stat cards, page-header docs pill, fixed popovers and one type scale.
   Sentence case only: no all-caps text transforms (test/ui-foundation.test.ts enforces it).
   ====================================================================================== */

/* Theme colour: blue #2563EB. Light buttons carry white text (~5.2:1, AA); text links use #1d4ed8 (~6.7:1 on white).
   Dark mode uses a brighter blue (#4f8dff) with dark ink text. */

/* Dark: canvas rgb(10,10,10); surfaces and hairlines one small step up so the layers keep their contrast. */


:root[data-theme="dark"] .nudge, :root[data-theme="dark"] .notice.info { background: var(--banner-info); border-color: var(--btn-edge); }
:root[data-theme="dark"] .choice-tag, :root[data-theme="dark"] .plan-tag.rec { background: var(--brand-tint-2); color: var(--link); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.primary, :root:not([data-theme="light"]) a.button.primary { background: var(--btn); border-color: var(--btn); box-shadow: none; }
  :root:not([data-theme="light"]) button.primary:hover, :root:not([data-theme="light"]) a.button.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
  :root:not([data-theme="light"]) .nudge, :root:not([data-theme="light"]) .notice.info { background: var(--banner-info); border-color: var(--btn-edge); }
  :root:not([data-theme="light"]) .choice-tag, :root:not([data-theme="light"]) .plan-tag.rec { background: var(--brand-tint-2); color: var(--link); }
}
.as-send { background: var(--btn); color: var(--btn-text); }

/* Focus: brand border + a soft 3px ring (inputs, pickers, buttons). */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
button:focus-visible, a.button:focus-visible, .headpill:focus-visible, .headsearch:focus-visible, .orgswitch-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--ring); }
.composer:focus-within, .as-input:focus-within { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.as-input textarea:focus, .composer textarea:focus, .orgswitch-search input:focus, .headsearch input:focus { box-shadow: none; border-color: transparent; }

/* Logo + Accure wordmark, vertically centred in the header row. The mark follows the text colour. */
.brand.navitem-home { display: inline-flex; align-items: center; gap: 8px; height: 100%; color: var(--strong); text-decoration: none; }
.brand.navitem-home:hover { text-decoration: none; }
.logo-mark { width: 32px; height: 26px; flex: none; color: var(--strong); fill: currentColor; }
.brand-word { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--strong); line-height: 1; }
/* logo.svg is a dark mark: shown light on dark themes. */
img[src="/static/logo.svg"] { box-shadow: none !important; border-radius: 0 !important; background: none; object-fit: contain; }
.as-hello img[src="/static/logo.svg"] { width: 56px; height: 45px; }
.lockup .logo { width: 48px; height: 39px; }
:root[data-theme="dark"] img[src="/static/logo.svg"] { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src="/static/logo.svg"] { filter: invert(1); } }

/* Header tools: view-as-role pill and search, one quiet line right of the brand. */
.head-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.headpill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 99px; background: var(--base); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.headpill:hover { background: var(--tint); }
.headpill .ic { width: 14px; height: 14px; color: var(--subtle); }
.headpill.previewing { border-color: color-mix(in srgb, var(--brand) 45%, var(--hairline)); background: var(--brand-tint); }
.headpill.previewing .ic:first-child { color: var(--brand); }
.headsearch { display: inline-flex; align-items: center; gap: 8px; width: clamp(180px, 26vw, 320px); height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--base); color: var(--subtle); font: inherit; font-size: 13px; cursor: text; text-align: start; }
.headsearch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headsearch:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.headsearch .ic { width: 14px; height: 14px; }
.rolepop { min-width: 240px; width: 280px; }
.rolepop .pop-email { white-space: normal; line-height: 1.45; }
.previewbar { background: var(--brand-tint); color: var(--text); }
.previewbar .ic { color: var(--brand); }
@container app (max-width: 1100px) { .headsearch { width: 34px; padding: 0; justify-content: center; } .headsearch span, .headsearch kbd { display: none; } }
@container app (max-width: 820px) { .headpill span { display: none; } .head-tools { gap: 4px; } .brand-word { font-size: 17px; } }
@container app (max-width: 640px) { .support-top { display: none; } }
.mobile-only { display: none !important; }
@container app (max-width: 640px) { #user-pop .mobile-only { display: flex !important; } }

/* Popovers float above everything (fixed when placed by shell.js), never clipped by the sidebar. */
.popover { max-height: min(60vh, 520px); max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; }
.popover button, .popover a { padding: 7px 10px; font-size: var(--fs-row); min-height: 34px; }
.popover button > .ic, .popover a > .ic { width: var(--ic-row); height: var(--ic-row); color: var(--subtle); }
.popover .grow { flex: 1; min-width: 0; }
.popover .pop-val { color: var(--subtle); font-size: var(--fs-meta); }
.popover .pop-email { padding: 8px 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); }
.popover .pop-foot { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.popover .pop-foot a { font-size: var(--fs-meta); min-height: 0; }
.popover .pop-note, .pop-note { margin: 0; padding: 6px 10px 8px; color: var(--subtle); font-size: var(--fs-meta); line-height: 1.45; }
.pop-empty { display: flex; align-items: center; gap: 8px; padding: 18px 12px; color: var(--subtle); font-size: var(--fs-row); }
.pop-empty .ic { color: var(--subtle); }
.stat-menu { z-index: 1000; }

/* Account menu (MXO): compact rows, values right, inline submenus, red sign out. */
#user-pop { min-width: 248px; padding: 6px; }
#user-pop button { width: 100%; min-height: 34px; padding: 7px 10px; font-size: var(--fs-row); }
#user-pop button[aria-haspopup] > .ic:last-child { width: 13px; height: 13px; transition: transform .15s; }
#user-pop button.on[aria-haspopup] > .ic:last-child { transform: rotate(90deg); }
#user-pop .pop-sub { margin: 2px 0 4px 26px; padding-inline-start: 6px; border-inline-start: 1px solid var(--hairline); }
#user-pop .pop-sub button { min-height: 30px; font-size: var(--fs-row); }
#user-pop .pop-sub button > .ic { color: var(--strong); }
#user-pop .danger-item, #user-pop .danger-item > .ic { color: var(--danger); }
#user-pop .danger-item:hover { background: var(--danger-tint); }

/* Sidebar: org switcher, Overview, AI, Inbox, Pinned, the role's areas (closed; the current one open), More, Recents,
   Settings, Help at the bottom. One icon column: every row has a 16px icon at the same x. */
nav.side { font-size: 13.5px; gap: 1px; }
nav.side .orgswitch { flex: none; position: relative; margin: 0 0 10px; }
.orgswitch-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--hairline) !important; border-radius: var(--radius); background: var(--base) !important; color: var(--strong) !important; font: inherit; font-weight: 500; font-size: 13.5px; cursor: pointer; text-align: start; }
.orgswitch-btn:hover { background: var(--tint) !important; }
.orgswitch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgswitch-btn > .ic { width: 14px; height: 14px; color: var(--subtle); }
.orgswitch-btn > .orgswitch-ic { width: 16px; height: 16px; }
.orgswitch-pop { position: fixed; width: 280px; padding: 6px; max-height: min(60vh, 420px); }
.orgswitch-search, .pop-search { display: flex; align-items: center; gap: 8px; padding: 0 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: var(--radius); }
.orgswitch-search .ic, .pop-search .ic { width: 14px; height: 14px; color: var(--subtle); }
.orgswitch-search input, .pop-search input { flex: 1; border: 0 !important; background: none !important; box-shadow: none !important; height: 34px; min-height: 0; padding: 0; font-size: 13.5px; }
.orgswitch-search:focus-within, .pop-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.orgswitch-pop button { width: 100%; min-height: 36px; }
.orgswitch-pop button .grow { display: flex; flex-direction: column; line-height: 1.3; }
.orgswitch-pop button .grow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgswitch-pop button small { color: var(--subtle); font-size: var(--fs-sub); }
.orgswitch-pop button > .ic:last-child:not(:first-child) { color: var(--strong); }
nav.side .navlabel { padding: 10px 10px 2px; font-size: var(--fs-sub); font-weight: 500; color: var(--subtle); }
nav.side .navsublabel { padding: 8px 10px 2px; font-size: var(--fs-sub); color: var(--subtle); }
nav.side .recents .sub { margin-inline-start: 0; padding: 0 0 4px; border-inline-start: 0; }
/* Blocks: top pages, Pinned, the areas, Recents, Settings; a little air between them, 1 px between rows. */
nav.side .navareas { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
nav.side .recents, nav.side .pinned { margin-top: 8px; }
nav.side .recents + a.navitem { margin-top: 8px; }
/* Pinned: a small label and up to five one-line rows with the page's icon; the star at the end unpins. */
nav.side .pinned .navlabel { padding: 0 10px 3px; }
nav.side .pinned-list { display: flex; flex-direction: column; gap: 1px; }
nav.side a.navitem.pin { white-space: nowrap; min-width: 0; }
nav.side a.navitem.pin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav.side :is(a.navitem.pin, a.navitem.recent) small { flex: 0 1 auto; min-width: 0; color: var(--subtle); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.side :is(a.navitem.pin, a.navitem.recent) small::before { content: "· "; }
nav.side a.navitem.pin small { margin-inline-start: -5px; }
/* Recents: one line per page, "Title · Area", cut with an ellipsis; its pin and remove buttons sit at the end. */
nav.side .recents a.navitem.recent { display: flex; flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; padding: 6px 58px 6px 36px; min-height: 30px; font-size: 13px; color: var(--text); white-space: nowrap; }
nav.side .recents a.navitem.recent > span { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rows with actions: the link fills the row, the pin (and in Recents the remove) button sits at its end, shown on hover or focus. */
nav.side .navrow { position: relative; display: flex; flex-direction: column; min-width: 0; }
nav.side .navrow > a.navitem { padding-inline-end: 34px; }
nav.side .recents .navrow > a.navitem { padding-inline-end: 58px; }
nav.side a.navitem > .ic, nav.side button.navhead > .ic:first-child, nav.side .navlink > .ic { width: 16px; height: 16px; }
nav.side .navfoot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 1px; }
nav.side .navfoot .navlink { margin-top: 0; color: var(--subtle); }
nav.side .count { margin-inline-start: auto; }
@container app (max-width: 820px) {
  nav.side .orgswitch { margin: 0 6px 0 0; min-width: 160px; }
  nav.side .navfoot { margin-top: 0; padding-top: 0; flex-direction: row; }
  nav.side .navlabel, nav.side .navsublabel { display: none; }
}

/* Breadcrumbs above the page. */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -16px 0 14px; font-size: 12.5px; color: var(--subtle); }
.crumbs a { color: var(--subtle); }
.crumbs a:hover { color: var(--text); }
.crumbs .ic { width: 12px; height: 12px; }
.crumbs [aria-current] { color: var(--text); }
@container app (max-width: 820px) { .crumbs { margin-top: 0; } }

/* Page header: title, one short line, a quiet docs pill, one primary action. */
.pagehead p { max-width: 64ch; }
.pagehead .actions { flex-wrap: wrap; justify-content: flex-end; }
.docs-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--text); font-size: 13px; background: var(--base); white-space: nowrap; }
.docs-pill:hover { background: var(--tint); text-decoration: none; }
.docs-pill .ic { width: 14px; height: 14px; color: var(--subtle); }
@container content (max-width: 640px) { .pagehead .actions { flex-wrap: wrap; } }

/* Empty states: a quiet bordered card with a neutral icon tile (also the kit's and older .kit-empty). */
.empty.quiet, .kit-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 24px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--base); color: var(--subtle); box-shadow: none; }
.empty.quiet .empty-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--tint); color: var(--subtle); }
.empty.quiet .empty-ic .ic { width: 20px; height: 20px; }
.kit-empty > .ic:first-child { box-sizing: content-box; width: 20px; height: 20px; padding: 12px; margin-bottom: 6px; border-radius: 12px; background: var(--tint); color: var(--subtle); }
.empty.quiet b, .kit-empty b { display: block; margin: 0; font-size: 15px; font-weight: 500; color: var(--strong); }
.empty.quiet p, .kit-empty p { margin: 0 0 10px; max-width: 46ch; color: var(--subtle); }

/* Stat cards: title + ⋯ menu, value, trend, chart area; three per row (2 at 860px, 1 at 480px). */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats .stat.wide { grid-column: auto; }
.stat { display: flex; flex-direction: column; }
.stat-head { display: flex; align-items: center; gap: 8px; }
.stat-head .label { flex: 1; min-width: 0; }
.stat-menu-wrap { position: relative; }
.stat-more { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--subtle); cursor: pointer; }
.stat-more:hover { background: var(--tint); color: var(--text); }
.stat-more .ic { width: 15px; height: 15px; }
.stat-menu { position: fixed; min-width: 160px; padding: 4px; background: var(--base); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px oklch(0% 0 0 / .16); }
.stat-menu button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: var(--fs-row); text-align: start; cursor: pointer; }
.stat-menu button:hover { background: var(--tint); }
.stat-nodata { margin-top: auto; color: var(--placeholder); font-size: 12px; } /* an empty figure: a quiet word, not a box in a box */
.stat.no-data .stat-value { color: var(--subtle); }
@container content (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* Footer like Cloudflare's: one centred row, thin dividers, the copyright last. */
.appfoot { display: flex; justify-content: center; text-align: center; padding: 20px 16px 28px; border-top: 1px solid var(--hairline); color: var(--subtle); font-size: 13px; }
.appfoot nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 6px; }
.appfoot nav > * { padding: 2px 12px; border: 0; border-inline-start: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; }
.appfoot nav > :first-child { border-inline-start: 0; }
.appfoot nav > *:hover { color: var(--strong); text-decoration: underline; text-underline-offset: 3px; }
.appfoot nav > .appfoot-copy { color: var(--subtle); cursor: default; }
.appfoot nav > .appfoot-copy:hover { text-decoration: none; color: var(--subtle); }
body.app .scroller { display: flex; flex-direction: column; }
body.app .scroller > main { flex: 1 0 auto; }

/* Support panel. */ /* the dialog's tab strip; .support-top is the header button (hidden on phones) */


/* Settings hub. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 16px; }
.settings-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--base); color: var(--text); }
.settings-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); text-decoration: none; }
.settings-card b { flex: 1; font-weight: 500; font-size: 13.5px; }
.settings-card .empty-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--tint); color: var(--subtle); }
.settings-card > .ic { width: 14px; height: 14px; color: var(--subtle); }

/* One type scale for menus and lists: rows 13.5px, values 12-12.5px, sub-labels 11.5px, headings 14-15px. */
.pal-item { font-size: var(--fs-row); padding: 7px 10px; }
.pal-item small { font-size: var(--fs-small); }
.pal-item .ic { width: var(--ic-row); height: var(--ic-row); color: var(--subtle); }
.pal-foot .grow { flex: 1; }
.notifpop .notif-item { font-size: var(--fs-row); }
.notifpop .notif-item small { font-size: var(--fs-small); }
.popover .pop-head b { font-size: var(--fs-head); }

/* Dot field behind the assistant greeting (dots.js); grid aligned to the viewport. */
.has-dots { position: relative; isolation: isolate; }
.has-dots > :not(canvas.as-dots) { position: relative; z-index: 1; }
canvas.as-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.as-hello img { transition: transform .12s ease-out; will-change: transform; }
body.app .assistant { background-attachment: fixed; background-position: 0 0; }

/* Assistant page: history full height with its divider, the composer inside the chat pane, one-line
   title, quiet composer, readable history titles. */
.card.aipage { position: relative; display: flex; padding: 0; overflow: hidden; height: calc(100dvh - var(--header) - 120px); min-height: 420px; align-items: stretch; }
.aipage-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.aipage-bar { display: none; }
.aipage-side { width: 268px; align-self: stretch; height: auto; padding: 10px; display: flex; flex-direction: column; gap: 1px; }
.aipage-side button { align-items: center; }
.aipage-side button span { white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; line-height: 1.35; font-size: 13.5px; }
.aipage-side small { font-size: 11.5px; padding-top: 2px; }
.aipage-side.as-history { position: static; max-height: none; width: 268px; }
/* The chat root shares the class name .as-chat with MXO's history rows: undo the row styles. */
.as-chat:has(> .as-body) { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; border-radius: 0; background: none !important; }
.as-chat:has(> .as-body) > .as-body { align-self: stretch; width: 100%; }
.as-hello { width: 100%; }
.as-hello h3 { text-wrap: balance; }
.aipage .as-hello { padding: 6vh 0 2vh; }
.aipage .as-hello h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.aipage .as-sugg.as-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
@container content (max-width: 560px) { .aipage .as-sugg.as-cards { grid-template-columns: 1fr; } }
.aipage .as-input { border-color: var(--line); box-shadow: none; }
.aipage .as-input:focus-within { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
/* Narrow: the history opens as a panel over the chat from the History button in the bar. */
@container app (max-width: 820px) {
  .aipage-bar { display: flex; padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
  .aipage-histbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; font-size: 13px; }
  .card.aipage .aipage-side { display: none; }
  .card.aipage.side-open .aipage-side { display: flex; position: absolute; inset: 0 auto 0 0; z-index: 3; width: min(300px, 86%); box-shadow: 0 12px 32px oklch(0% 0 0 / .18); }
}
.as-input, .composer { border-color: var(--line); }

/* Map (work): quiet attribution without Leaflet's flag. */
.leaflet-control-attribution { font-size: 10.5px !important; background: color-mix(in srgb, var(--base) 75%, transparent) !important; color: var(--subtle) !important; }
.leaflet-control-attribution svg { display: none !important; }
.leaflet-control-attribution a { color: var(--subtle) !important; }

/* OSM fallback basemap: darkened in dark mode so it matches the theme. */
.wk-tiles-osm { filter: grayscale(1) brightness(1.04) contrast(.88); }
:root[data-theme="dark"] .wk-tiles-osm { filter: grayscale(1) invert(1) brightness(.95) contrast(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wk-tiles-osm { filter: grayscale(1) invert(1) brightness(.95) contrast(.95); } }

/* Sidebar: at most five items per group; "Show n more" reveals the rest (phones show everything). */
nav.side .navgroup.clamped .navitem.extra, nav.side .navgroup.clamped .navrow.extra, nav.side .navgroup.clamped .navsublabel.extra { display: none; }
nav.side .navmore { display: flex; align-items: center; width: 100%; padding: 5px 10px; border: 0; background: none; color: var(--subtle); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; border-radius: var(--radius); }
nav.side .navmore:hover { background: var(--tint); color: var(--text); }
@container app (max-width: 820px) { nav.side .navgroup.clamped .navitem.extra { display: flex; } nav.side .navgroup.clamped .navrow.extra { display: contents; } nav.side .navmore { display: none; } }

/* Calm pass (row 34): softer off-white text in dark mode, no drop shadow on the primary button, and
   blue kept for the primary action and focus: decorative icons and checks are neutral. */


button.primary, a.button.primary { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .22); }
.as-quick .ic, .as-action-head .ic, .tip .tip-ic, .model-ic, .setmenu-ic, .setup-facts .ic, .ac-answer .ic,
.headpill.previewing .ic:first-child, .previewbar .ic, .brief-item.todo .bi, .kit-empty .ic { color: var(--subtle); }
.tip .tip-ic, .model-ic, .brief-item.todo .bi { background: var(--tint); }
.headpill.previewing { border-color: var(--line); background: var(--tint); }
.previewbar { background: var(--tint); }

/* Stat card chart: a small neutral sparkline under the trend line. */
.stat-spark { display: block; width: 100%; height: 36px; margin-top: auto; padding-top: 6px; color: var(--subtle); overflow: visible; }
/* An empty state inside a card doesn't draw a second border. */
.card > .empty.quiet, .card > .kit-empty { border: 0; padding: 32px 16px; }

/* ======================================================================================
   Polish round (rows 20, 22, 34, 53): one calm surface rule, every empty state the same card,
   dark-mode map chrome, and layout rules that keep headers, tables and dialogs consistent.
   ====================================================================================== */

/* Calm (row 34): surfaces are flat and separate by tone and hairlines. Only floating layers keep a
   shadow (popovers, menus, dialogs, toasts, the assistant panel), so depth still means "on top". */
.card, .tile, .stat, .kit-card, .kit-col, .brief-item, .settings-card, .composer:not(:focus-within) { box-shadow: none; }
.segmented button.on:not(:focus-visible) { box-shadow: 0 0 0 1px var(--hairline); }
main .wk-card, main .lg-rcard:hover, main .card .card { box-shadow: none; }
button.secondary:not(:focus-visible), a.button:not(.primary):not(:focus-visible) { box-shadow: 0 0 0 1px var(--line); }
button.accent:not(:focus-visible) { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2); }
.kit-card { border-color: var(--hairline); }
.card .card, .card .tile, .card .stat { border-color: var(--hairline); }
.stat, .tile { border-color: var(--hairline); }
dialog.dialog { box-shadow: 0 16px 40px oklch(0% 0 0 / .22); }

/* Empty states (row 53): hairRows' .pp-empty, work's .wk-empty and parties' .pt-empty render as the
   same quiet bordered card as emptyState() and .kit-empty (compact: they sit inside lists). Inside a
   card the card is the border, exactly like ".card > .empty.quiet". */
main :is(.pp-empty, .wk-empty, .pt-empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 8px 0; padding: 20px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--base); color: var(--subtle); font-size: 13px; line-height: 1.5; text-align: center; box-shadow: none; }
main .card :is(.pp-empty, .wk-empty, .pt-empty, .empty.quiet, .kit-empty):not(.card) { border: 0; background: none; padding: 20px 8px; margin: 0; }
main :is(.pp-empty, .wk-empty, .pt-empty) > :is(b, strong) { color: var(--strong); font-weight: 500; }
main :is(.pp-empty, .wk-empty, .pt-empty):empty { display: none; }

/* Map (row 20): Leaflet's own chrome follows the theme; the OSM fallback tiles are darkened by the
   filter above (CARTO's real dark tiles need ACCURE_CARTO_KEY); the dark canvas shows while tiles load. */
.leaflet-container { background: var(--recessed); font: inherit; }
.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: var(--radius) !important; overflow: hidden; }
.leaflet-bar a { background: var(--base) !important; color: var(--text) !important; border-bottom-color: var(--hairline) !important; }
.leaflet-bar a:hover { background: var(--tint) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--base); color: var(--text); box-shadow: 0 12px 32px oklch(0% 0 0 / .18); }
.leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.leaflet-popup-content { font-size: 13px; line-height: 1.5; }
.leaflet-container a.leaflet-popup-close-button { color: var(--subtle); }

/* Layout consistency (row 22): titles shrink before actions overflow, actions wrap to the right,
   long words in cells and titles wrap, the first/last child of a card has no outer margin, one
   divider style, and dialogs scroll inside instead of running off short screens. */
.pagehead > div:first-child { flex: 1 1 280px; }
.pagehead { flex-wrap: wrap; row-gap: 10px; }
td:not(.num) { overflow-wrap: break-word; }
.card > :first-child:is(h2, h3, p, .row) { margin-top: 0; }
.card > :last-child:is(h2, h3, p, .row, .table-wrap) { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 20px 0; }
.tiles, .stats { margin: 16px 0; }
dialog.dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
dialog.dialog .dbody { overflow-y: auto; min-height: 0; }
dialog.dialog > :not(.dbody) { flex: none; }
/* A work card inside a dialog: the dialog is the frame, so the card drops its own (no card in a card).
   It runs edge to edge in the dialog body, its pane lines up with the title and its footer is the
   dialog's footer (kept in view while a long form scrolls). */
dialog.dialog .card.tx { border: 0; border-radius: 0; box-shadow: none; background: none; margin: 0 -20px; overflow: visible; }
dialog.dialog.wide .card.tx { margin: 0 -22px; }
dialog.dialog .card.tx .tx-pad { padding: 16px 20px; }
dialog.dialog .card.tx .tx-bar { padding-inline: 20px; }
dialog.dialog .card.tx .tx-foot { position: sticky; bottom: 0; z-index: 1; background: var(--base); padding: 10px 20px 10px 12px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
dialog.dialog .dbody:has(> :is(.tx-form, .pp-wrap, .card.tx):first-child) { padding-top: 0; }
dialog.dialog .dbody:has(> :is(.tx-form, .pp-wrap, .card.tx):last-child) { padding-bottom: 0; }
dialog.dialog .pp-wrap > .pp-plan { margin: 10px 0 16px; }
/* Kit fields in a dialog: the grid gap spaces them (no extra label margin); a checkbox sits beside its text. */
dialog.dialog .kit-form > label { margin: 0; }
dialog.dialog label > input:is([type="checkbox"], [type="radio"]) { width: auto; align-self: flex-start; margin: 9px 0 0; }
dialog.dialog .kit-form > label.check { flex-direction: row; align-items: center; align-self: end; min-height: 38px; font-size: 13px; font-weight: 400; color: var(--text); }
dialog.dialog .kit-form > label.check > * { width: auto; }
dialog.dialog .kit-form > label.check input { margin: 0; }
.kit-toolbar input[type="search"] { min-width: min(220px, 100%); }
@container content (max-width: 640px) { .pagehead .actions { justify-content: flex-start; } }
/* On phones the head stacks (column): a 280px basis would become a 280px-tall title block. */
@container content (max-width: 640px) { .pagehead > div:first-child { flex-basis: auto; } }

/* Kit pieces (rows 46/52): clickable stat cards, several empty-state actions in one row. */
.stat-link { cursor: pointer; }
.stat-link:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.stat-link:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Phones: the sidebar is a menu behind the header's menu button (no clipped nav strip under the header).
   Open, it is the desktop sidebar (groups, sub-items, Show more) in the page's place below the header. */
.navtoggle { display: none; }
@container app (max-width: 640px) {
  header.top .navtoggle { display: inline-grid; place-items: center; flex: none; }
  nav.side { display: none; }
  /* In the layout's place (not fixed: the app column is a container, so fixed would follow it, not the viewport). */
  body.nav-open .layout { grid-template-rows: minmax(0, 1fr); }
  body.nav-open .scroller { display: none; }
  body.nav-open nav.side { display: flex; position: static; height: 100%; min-height: 0; flex-direction: column; align-items: stretch; gap: 2px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 24px; border: 0; background: var(--canvas); }
  body.nav-open nav.side :is(button, .navlink, a.navitem) { width: 100%; white-space: normal; }
  body.nav-open nav.side .orgswitch { margin: 0 0 10px; min-width: 0; }
  body.nav-open nav.side .navgroup, body.nav-open nav.side .navareas, body.nav-open nav.side .pinned-list, body.nav-open nav.side .navrow { display: flex; flex-direction: column; }
  body.nav-open nav.side .navitems { display: grid; }
  body.nav-open nav.side .navitems > .sub { display: flex; }
  body.nav-open nav.side button.navhead { display: flex !important; }
  body.nav-open nav.side .sub a.navitem > .ic { display: none; }
  body.nav-open nav.side :is(.navlabel, .navsublabel) { display: block; }
  body.nav-open nav.side .navgroup.clamped .navitem.extra, body.nav-open nav.side .navgroup.clamped .navrow.extra, body.nav-open nav.side .navgroup.clamped .navsublabel.extra { display: none; }
  body.nav-open nav.side .navmore { display: flex; }
  body.nav-open nav.side :is(.recents, .pinned):not(.hidden) { display: flex !important; }
  body.nav-open nav.side .navrow-actions { display: flex !important; opacity: .7; }
  body.nav-open nav.side button.navrow-btn { width: 22px; white-space: nowrap; }
  body.nav-open nav.side .navrow > a.navitem { padding-inline-end: 34px; }
  body.nav-open nav.side .recents .navrow > a.navitem { padding-inline-end: 58px; }
  body.nav-open nav.side :is(a.navitem.pin, a.navitem.recent, a.navitem.pin > span, a.navitem.recent > span) { white-space: nowrap; }
  body.nav-open nav.side .navfoot { margin-top: 12px; padding-top: 10px; flex-direction: column; border-top: 1px solid var(--hairline); }
}

/* AI page: one line per conversation (title cut off, time on the right), the dot field behind the whole chat, and a
   full-page mode (side panel's maximize) that covers the app with only the chat, search, new chat, minimize and close. */
.aipage-side small { flex: none; padding-top: 0; }
.aipage-fullbar { display: none; }
.aipage-full { --aipage-fullbar: 52px; }
.aipage-full .aipage-fullbar { display: flex; align-items: center; gap: 6px; flex: none; height: var(--aipage-fullbar); padding: 0 12px 0 16px; border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.aipage-fullbar b { font-weight: 500; margin-inline-end: auto; }
.aipage-fullbar .brandmark img { height: 20px; width: auto; display: block; }
.aipage-search { width: min(280px, 40%); height: 32px; font-size: 13px; }
body.aipage-immersive header.top, body.aipage-immersive nav.side, body.aipage-immersive .appfoot, body.aipage-immersive .assistant, body.aipage-immersive main .crumbs { display: none !important; }
body.aipage-immersive .layout { display: block; }
body.aipage-immersive .scroller { overflow: hidden; }
body.aipage-immersive main#view { padding: 0; max-width: none; margin: 0; width: 100%; }
body.aipage-immersive .card.aipage { margin: 0; height: 100dvh; min-height: 0; border-radius: 0; border: 0; box-shadow: none; background-color: var(--canvas); }
@media (max-width: 640px) { .aipage-search { display: none; } }

/* Header wordmark from the branding folder (Accure Logo, website.svg), colored by the theme. */
.logo-wordmark { display: block; width: 85px; height: 20px; color: var(--strong); }

button.primary kbd, a.button.primary kbd, .tx-go kbd { background: oklch(100% 0 0 / .22); border-color: transparent; color: #fff; border-radius: 6px; }

/* Ask AI panel: its own grey surface and a clear edge against the project, like Cloudflare's side panel. */
:root[data-theme="dark"] body.app .assistant { background-color: var(--base); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.app .assistant { background-color: var(--base); } }
body.app .assistant.open { border-inline-start-color: var(--line); }
:root[data-theme="dark"] .assistant .as-top, :root[data-theme="dark"] .assistant .as-input { background-color: var(--base); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .assistant .as-top { background-color: var(--base); } }
.rl-count { margin-inline-start: auto; align-self: center; white-space: nowrap; }
.kit-toolbar[hidden], .kit-toolbar button[hidden], .rl-count:empty { display: none; }
:root[data-theme="dark"] body.app .assistant, :root[data-theme="dark"] .assistant .as-top, :root[data-theme="dark"] .assistant .as-input { background-color: hsl(0, 0%, 8.2%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.app .assistant, :root:not([data-theme="light"]) .assistant .as-top, :root:not([data-theme="light"]) .assistant .as-input { background-color: hsl(0, 0%, 8.2%); } }

/* Page content is centered in the area beside the menu (and beside the AI panel when it is open), with one max width. */
body.app main#view { margin-inline: auto; }
.pal-label { padding: 10px 12px 4px; font-weight: 500; }
/* Sortable table headers: a quiet arrow that shows the active sort. */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--strong); }
th.sortable::after { content: "\2195"; margin-inline-start: 6px; font-size: 11px; opacity: 0; }
th.sortable:hover::after, th.sortable:focus-visible::after { opacity: .5; }
th.sortable[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
th.sortable[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }

/* Display options: compact density tightens rows and table cells; the row count can be hidden. */
html[data-density="compact"] .pp-row { padding-top: 5px; padding-bottom: 5px; }
html[data-density="compact"] th, html[data-density="compact"] td { padding-top: 5px; padding-bottom: 5px; }
html.hide-count .rl-count { display: none; }
.displayopts { min-width: 200px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.displayopts label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.displayopts.hidden { display: none; }
.displayopts input[type="radio"], .displayopts input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; border: 0; box-shadow: none; accent-color: var(--brand); flex: none; }

/* Button labels and button-like controls are not selectable or copyable; inputs, tables and content stay selectable. */
button, [role="button"], [role="menuitem"], [role="menuitemradio"], [role="tab"], summary, .headpill, .iconbtn, .pal-item, .st, .badge, .toplink, .navitem, .navlink { -webkit-user-select: none; user-select: none; }

/* Logos and SVG graphics are not selectable or draggable. */
svg, img, .brand, .logo, .mark { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

.rolepop > * { flex: none; }
.rolepop .pop-email { height: auto; overflow: visible; white-space: normal; }

/* Ask AI page, after Claude: no box around the page, a calm readable thread, replies as plain text, user messages in a
   soft rounded bubble, and a large rounded composer with a quiet note below it. */
.card.aipage { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.aipage-side { background: transparent; border-inline-end: 1px solid var(--hairline); }
.aipage .as-body > *, .aipage .as-input, .aipage-note { width: min(720px, calc(100% - 48px)); margin-inline-start: auto; margin-inline-end: auto; }
.aipage .as-msg { font-size: 15px; line-height: 1.7; }
.aipage .as-msg.ai { background: none; border: 0; padding: 4px 2px; border-radius: 0; }
.aipage .as-msg.me { background: var(--fill); border-radius: 18px; padding: 10px 16px; margin-inline-start: auto; margin-inline-end: max(24px, calc((100% - 720px) / 2)); max-width: min(560px, 80%); width: fit-content; }
.aipage .as-input { border-radius: 22px; padding: 12px 14px 10px; margin-bottom: 8px; background: var(--base); box-shadow: 0 1px 2px oklch(0% 0 0 / .18); }
.aipage .as-input textarea { min-height: 64px; font-size: 15px; }
.aipage-note { display: none; margin-top: 0; margin-bottom: 14px; text-align: center; font-size: 12px; }
.aipage .aipage-note { display: block; }
.aipage-main > .aipage-note { display: block; }
.keymods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin-top: 6px; max-height: 160px; overflow: auto; }
.keymods label.check, .kit-form label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.keymods input[type="checkbox"], .kit-form label.check input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--brand); }
.kit-form label.check, .keymods label.check { flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; gap: 8px; min-height: 0; padding: 0; }
.kit-form .keymods { align-items: start; }

/* Status dots: a small round count next to a page, rolled up to its group header (red: overdue or off, orange: waiting). */
.navbadge { margin-inline-start: auto; font-size: 12px; font-weight: 500; line-height: 1; color: var(--subtle); font-variant-numeric: tabular-nums; flex: none; }
.navbadge.bad { color: var(--bad); }
nav.side .navhead .navbadge { margin-inline-start: auto; margin-inline-end: 6px; }
nav.side .navhead .chev { margin-inline-start: 0; }
nav.side a.navitem { position: relative; }

/* View switcher: the areas sit in two columns so the whole list fits without scrolling. */
.rolepop { width: min(440px, calc(100vw - 16px)); max-height: none; overflow: visible; }
.rolepop .pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; padding: 0 4px; }
.rolepop .pop-grid button { min-width: 0; }
.rolepop .pop-grid button .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Recents header like the other groups; closed, its list takes no room. */
nav.side .recents > button.navhead { display: flex; }
nav.side .recents.collapsed .navitems { display: none; }
.complete-setup { color: var(--link, var(--brand)); font-weight: 500; }
.complete-setup .ic { color: currentColor; }
@container app (max-width: 820px) { .complete-setup span { display: none; } }
.vault-spaces { display: flex; flex-direction: column; gap: 10px; }
.vault-space { display: flex; gap: 14px; align-items: flex-start; text-align: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--base); color: var(--text); font: inherit; cursor: pointer; }
.vault-space:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.vault-space .ic { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; }
.vault-space small { display: block; color: var(--subtle); margin-top: 2px; font-size: 13px; }

/* Info buttons: a small "i" next to a label opens a short explanation; labels stay on one line (cut off with a tooltip). */
.flabel { display: flex; align-items: center; gap: 6px; min-width: 0; }
.flabel-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.info-i { flex: none; width: 16px; height: 16px; padding: 0; border: 1px solid var(--subtle); border-radius: 50%; background: none; color: var(--subtle); font: italic 600 10px/1 Georgia, "Times New Roman", serif; display: inline-grid; place-items: center; cursor: pointer; }
.info-i:hover, .info-i[aria-expanded="true"] { color: var(--strong); border-color: var(--strong); background: var(--tint); }
.infopop { min-width: 0; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 10px 12px; font-size: 13px; line-height: 1.45; z-index: 90; }
.infopop p { margin: 0; }
.infopop a { display: inline-block; margin-top: 6px; }
.info-i::before { content: "i"; } /* glyph by CSS: the button adds no text to its label's textContent */
.info-i:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.infopop p { max-width: 36ch; }
.infopop .linkbtn { display: inline-block; margin-top: 6px; padding: 0; font-size: 13px; }
/* Single-line titles and labels with an optional info button (labelWith, pagehead help). */
.pagehead h1.one { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pagehead > div:first-child { max-width: 100%; } /* a one-line title never pushes a stacked (phone) header wider than the page */
.pagehead h1 .h1-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pagehead h1 .info-i { position: relative; top: 1px; }
.pagehead p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
th .flabel { display: inline-flex; vertical-align: middle; max-width: 100%; }
th .info-i { margin-inline-start: 2px; }
.kit-detail dt .flabel { display: flex; }
.kit-board .kit-col h3 .flabel { display: inline-flex; min-width: 0; max-width: 100%; }
.stat-head .label { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.stat-head .label-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.field > .flabel { font-size: 12px; font-weight: 500; }

/* Row actions: pin (and in Recents remove) side by side, the same 22 px square, one hover style. A pinned page's star
   stays visible on its area row, in the brand colour. */
nav.side .navrow-actions { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; opacity: 0; }
nav.side .navrow:hover .navrow-actions, nav.side .navrow-actions:focus-within, nav.side .navareas .navrow:has(.navpin[aria-pressed="true"]) .navrow-actions { opacity: 1; }
nav.side .navrow-btn { position: static; transform: none; width: 22px; height: 22px; min-width: 0; padding: 0; margin: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--subtle); cursor: pointer; opacity: 1; }
nav.side .navrow-btn:hover, nav.side .navrow-btn:focus-visible { background: var(--tint); color: var(--strong); }
nav.side .navrow-btn .ic { width: 14px; height: 14px; }
nav.side .navpin[aria-pressed="true"] { color: var(--brand); }
nav.side .navpin[aria-pressed="true"] .ic { fill: currentColor; }
@media (hover: none) { nav.side .navrow-actions { opacity: .7; } }

/* Overview after MXO: small label, heading, greeting with company and plan, a large search with a dropdown (Recents, Search
   tips, keys), a Recommendations card with a count badge, lists, and a promo that can be dismissed. No dot field. */
.ov-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--subtle); font-size: 13px; }
.ov-kicker .ic { width: 14px; height: 14px; }
.ov-hello .ov-greet { margin: 0; color: var(--subtle); font-size: 15px; }
.ov-searchbox { position: relative; max-width: 620px; margin: 0 auto 10px; }
.ov-searchbox .ov-search { max-width: none; margin: 0; height: 50px; cursor: text; }
.ov-searchbox .ov-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.ov-search-input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; padding: 0; font-size: 15px; height: 100%; color: var(--text); }
.ov-search-input:focus { outline: none; box-shadow: none; border: 0; }
.ov-drop { position: absolute; z-index: 40; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 6px); background: var(--base); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 16px 40px oklch(0% 0 0 / .35); text-align: start; }
.ov-drop.hidden { display: none; }
.ov-drop-label { padding: 8px 10px 4px; font-weight: 500; }
.ov-drop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.ov-drop-item.on { background: var(--tint); }
.ov-drop-item .ic { width: 16px; height: 16px; color: var(--subtle); flex: none; }
.ov-drop-title { white-space: nowrap; }
.ov-drop-sub { color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov-drop-foot { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; margin-top: 6px; border-top: 1px solid var(--hairline); }
.ov-drop-foot kbd { min-width: 20px; text-align: center; }
.ov-drop-foot span { margin-inline-end: 8px; }
.ov-rec { border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--base); margin: 0 0 28px; }
.ov-rec-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--strong); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-align: start; }
.ov-rec-head .chev { margin-inline-start: auto; color: var(--subtle); transition: transform .15s; }
.ov-rec.collapsed .ov-rec-head .chev { transform: rotate(180deg); }
.ov-rec.collapsed .ov-rec-body { display: none; }
.ov-rec-body { padding: 0 18px 12px; border-top: 1px solid var(--hairline); }
.ov-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--btn-text, #fff); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; }
.ov-count.hidden { display: none; }
.ov-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-promo { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--base); }
.ov-promo-text { flex: 1; min-width: 0; }
.ov-promo-text b { color: var(--strong); }
.ov-promo-text p { margin: 2px 0 0; color: var(--subtle); font-size: 13.5px; }
@container content (max-width: 640px) { .ov-cols.two { grid-template-columns: 1fr; } .ov-promo { flex-wrap: wrap; } }
/* The header's right side never wraps: the Complete setup label gives way first (the icon stays, with its tooltip). */
header.top .toplink { white-space: nowrap; }
@container app (max-width: 1240px) { .complete-setup span { display: none; } }

/* Right-to-left (app_profile.localization.direction -> <html dir="rtl">): what logical properties cannot express. */
[dir="rtl"] select:not(.org select) { background-position: left 9px center; }
[dir="rtl"] .assistant { transform: translateX(-100%); }
[dir="rtl"] .assistant.open { transform: none; box-shadow: 12px 0 32px oklch(0% 0 0 / .2); }
[dir="rtl"] .popover:not(.hidden) { transform-origin: top left; }

/* Assistant start cards: the icon sits on the card's left edge, vertically centred, in a soft brand tile; text left aligned. */
.as-sugg.as-cards button { justify-content: flex-start; text-align: start; gap: 12px; padding: 10px 14px 10px 10px; min-height: 56px; }
.as-sugg.as-cards .as-ic { width: 38px; height: 38px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.as-sugg.as-cards .as-ic .ic { width: 19px; height: 19px; }
.as-sugg.as-cards button > span:last-child { min-width: 0; }
.as-sugg.as-cards b { font-size: 14px; line-height: 1.25; }

/* Full-screen AI like Claude: search, New, Recents and the person in the sidebar; greeting and input centred; a quiet row under the input. */
.aipage-full .aipage-side { padding: 12px 10px; gap: 2px; background: var(--elevated); }
.aipage-searchbox { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border-radius: var(--radius); background: var(--base); box-shadow: 0 0 0 1px var(--line); margin-bottom: 8px; color: var(--subtle); }
.aipage-searchbox .ic { width: 15px; height: 15px; flex: none; }
.aipage-searchbox input { border: 0; box-shadow: none; background: none; height: 34px; min-height: 0; padding: 0; width: 100%; }
.aipage-full .aipage-new { background: var(--recessed); font-weight: 500; }
.aipage-label { padding: 14px 10px 6px; font-size: 12px; color: var(--subtle); }
.aipage-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; border-top: 1px solid var(--hairline); }
.aipage-me > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.aipage-me b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipage-me small { color: var(--subtle); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipage-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--btn-text, #fff); font-size: 13px; font-weight: 600; flex: none; }
.aipage-modes { display: none; }
.aipage-full .aipage-modes { display: flex; justify-content: space-between; gap: 12px; width: min(780px, calc(100% - 48px)); margin: -12px auto 6px; padding: 0 6px; font-size: 13px; color: var(--subtle); }
/* An empty chat: greeting and input sit together in the middle of the page. */
.aipage-full .aipage-main:has(.as-hello) .as-chat { justify-content: center; }
.aipage-full .aipage-main:has(.as-hello) .as-body { flex: none; overflow: visible; padding-bottom: 0; }
.aipage-full .aipage-main:has(.as-hello) .as-input { margin-top: 18px; margin-bottom: 20px; }
.aipage-full .aipage-main:has(.as-hello) .as-hello { padding: 0; }
.aipage-full .aipage-main:has(.as-hello) .aipage-modes { margin-top: 0; }
.aipage-full .aipage-main:has(.as-hello) .as-sugg { display: none; }
.aipage-full .aipage-main:has(.as-hello) { position: relative; justify-content: center; }
.aipage-full .aipage-main:has(.as-hello) .aipage-fullbar { position: absolute; inset: 0 0 auto 0; }
.aipage-full .aipage-main:has(.as-hello) .as-chat { flex: none !important; }
.aipage-full .aipage-main:has(.as-hello) .aipage-note { position: absolute; inset: auto 0 10px 0; text-align: center; }
.aipage-me > span:last-child { text-align: start; justify-items: start; }

/* Mobile sign-in (<=700px): no promo card, less text, calm spacing. Desktop unchanged. */
@media (max-width: 700px) {
  .auth { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: max(9vh, 40px) 16px 32px; }
  .auth .center { width: 100%; max-width: 420px; margin: 0 auto; }
  .auth-hero, .auth-hero.accure { display: none; }
  .auth .lockup { margin-bottom: 28px; }
  .auth .lockup small { display: none; }
  .auth .card { padding: 24px 20px; border-radius: 16px; }
  .auth .card h1 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
  .auth #auth-lead { margin: 0 0 18px; }
  .auth #email-form, .auth #code-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .auth #email-form .grow, .auth #code-form .grow { min-width: 0; width: 100%; }
  .auth #email { min-height: 46px; font-size: 16px; }
  .auth #email-form button, .auth #code-form button { min-height: 46px; width: 100%; font-size: 15px; }
  .auth #tools-link { color: var(--subtle); font-size: 13px; }
}

/* Phones (<=700px): finished look. Header, notifications, overview recs, calendar toolbar, assistant. Desktop unchanged (the launcher's phone rules live in launcher.css). */
@media (max-width: 700px) {
  /* Header: icons evenly spaced, nothing pushed off-screen. */
  /* Real flex children: .head-left (brand), #head-tools, .spacer, buttons, .usermenu. Only the brand
     side and the tools give way; the right-hand controls never shrink. No overflow:hidden here: it
     would clip the account popover, which lives inside the header. */
  header.top { gap: 2px; padding: 0 8px; }
  header.top > :is(button, .usermenu) { flex-shrink: 0; }
  header.top > .head-left, header.top > #head-tools { min-width: 0; flex-shrink: 1; overflow: hidden; }
  header.top .head-left .brand { display: inline-flex; max-width: 100%; }

  /* Notifications: the base rules (WP5 block) already keep rows from shrinking into each other at every
     width; phones only get the full-width panel, a three-line title clamp and a wrapping footer. */
  .notifpop { width: calc(100vw - 16px); max-height: min(72dvh, 560px); }
  .notifpop .notif-item b { -webkit-line-clamp: 3; font-size: 14px; }
  .notifpop .pop-foot { flex-wrap: wrap; gap: 6px; }

  /* Overview recommendations: two lines instead of hard ellipsis, date under the title. */
  .recs > summary { padding: 12px 14px; }
  .recs ul { padding: 2px 14px 4px; }
  .recs li { padding-block: 10px; }
  .recs li::before { top: 17px; }
  .recs li :is(b, span, a) { white-space: normal; overflow-wrap: anywhere; }
  .recs li b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }

  /* Cards and page heads: calmer spacing. */
  main .card { border-radius: 14px; }
  .pagehead { gap: 10px; margin-bottom: 12px; }
  .pagehead h1 { font-size: 22px; }
  .pagehead .actions { width: 100%; gap: 6px; }
  .pagehead .actions > :is(button, a.button) { min-height: 38px; padding-inline: 12px; }
  .toolbar { gap: 8px; margin: 14px 0 10px; }
  .toolbar > :is(select, input, .grow) { min-width: 0; flex: 1 1 140px; }
  .pagehead .actions { flex-wrap: wrap; }
  /* Calendar: month nav + export + new wrap on two lines; module/person filters share one line. */
  .cal-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .cal-filters > select { min-width: 0; flex: 1 1 140px; }

  /* Assistant (welcome state): history bar under the title bar, not floating mid-screen. */
  .aipage-full .aipage-main:has(.as-hello) .aipage-bar { position: absolute; inset: var(--aipage-fullbar, 52px) 0 auto 0; z-index: 1; background: var(--canvas); }
  .aipage-full .aipage-main:has(.as-hello) .as-input { width: calc(100% - 32px); }
  .aipage-full .aipage-modes { width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; gap: 4px 12px; text-align: center; }
  .aipage-full .aipage-main:has(.as-hello) .aipage-note { padding: 0 16px; font-size: 12px; }
}

/* Profile page (Settings → Profile, views/core.js profile()): an in-page index beside the section cards on wide screens,
   hairline setting rows, a round photo. Tokens only, so dark mode and the contrast setting come for free. */
/* The underline setting is an on/off switch (a real checkbox underneath: keyboard and screen readers get a checkbox). */
/* The account button shows the photo when there is one. */
.iconbtn img.user-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }