/* platform screens (claude.ai/design). Uses tokens.css and the shared classes in app.css. */
.plat { max-width: none; } /* full page width, like Contacts */
.plat.narrow { max-width: none; } /* every page uses the full width, so both edges line up */
.plat .page-head h1 { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.plat .page-head form { margin: 0; }

/* Search and status pills above a row list. */
.plat-find { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }

/* Row lists: fixed-width meta columns so rows line up; they wrap under the name on phones. */
.plat .rows .grow > a { font-weight: 500; color: var(--color-ink); }
.plat .rows .n { width: 7rem; font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.plat .rows .n.m { width: 5.5rem; }
.plat .rows .st-cell { width: 6.5rem; }
.plat .rows .when { width: 9.5rem; font-size: var(--text-sm); color: var(--color-ink-3); }
.plat .rows .orgs { flex: 1 1 12rem; min-width: 0; font-size: var(--text-sm); }
.plat .rows .admin { width: 12rem; display: flex; justify-content: flex-end; }
.plat .rows .admin form { display: flex; gap: var(--space-xs); align-items: center; }
.rows.flat { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin: 0; background: transparent; }
.rows .r .row { gap: var(--space-2xs); flex-wrap: wrap; }
@media (max-width: 40rem) {
  .plat .rows :is(.n, .n.m, .st-cell, .when, .admin) { width: auto; }
  .plat .rows .admin { justify-content: flex-start; }
}

/* A status as a dot and a word. */
.dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); background: var(--color-rule-strong); }
.dot.ok { background: var(--color-ok); }
.dot.bad { background: var(--color-bad); }

/* Feature switches: one row each, a name and what it covers. */
.feats { display: flex; flex-direction: column; }
.feat { display: flex; gap: var(--space-sm); align-items: flex-start; padding: 0.625rem var(--space-md); border-bottom: var(--rule); margin: 0; font-weight: 400; cursor: pointer; }
.feat:hover { background: var(--color-paper-2); }
.feat input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--color-accent); }
.feat b { font-weight: 500; display: block; }
.feat small { font-size: var(--text-sm); color: var(--color-ink-3); }
.plat-foot { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: flex-end; padding: var(--space-sm) var(--space-md); }
.plat-foot .grow { flex: 1 1 14rem; margin: 0; }
.panel-head .sub { margin-top: 2px; }

/* The suspend area: its own red-bordered section. */
.danger-zone { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; padding: var(--space-md); margin-bottom: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-bad); border-radius: var(--radius-lg); }
.danger-zone > div { flex: 1 1 18rem; }
.danger-zone h2 { margin: 0; font-size: var(--text-md); }
.danger-zone p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
a.btn.danger { background: var(--color-surface); color: var(--color-bad); border-color: var(--color-rule-strong); }
a.btn.danger:hover { background: var(--color-bad-soft); color: var(--color-bad); }
.danger-zone.stacked { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.danger-zone.stacked > div { flex: none; }
.danger-zone.stacked .plat-foot { padding: 0; }
.danger-zone.stacked label { max-width: 28rem; }

/* Integrations: provider nav on the left, numbered step cards on the right. */
.intg { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.intg-nav { flex: 1 1 12.5rem; max-width: 15rem; display: flex; flex-direction: column; gap: 2px; }
.intg-nav h1 { font-size: var(--text-xl); line-height: 1.75rem; font-weight: 600; margin: 0 0 var(--space-xs); }
.intg-nav a { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 10px; border-radius: var(--radius); color: var(--color-ink); text-decoration: none; }
.intg-nav a:hover { background: var(--color-paper-3); }
.intg-nav a[aria-current] { background: var(--color-accent-soft); font-weight: 600; }
.intg-nav .grow { flex: 1; min-width: 0; }
.intg-nav small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 400; }
.intg-nav .hint { margin-top: var(--space-sm); font-size: var(--text-xs); }
.intg-main { flex: 999 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.intg-main h2 { margin: 0; font-size: var(--text-2xl); line-height: 2rem; font-weight: 600; }
.intg-main .sub { color: var(--color-ink-2); }
.intg-main .plat-foot { padding: 0; }
@media (max-width: 40rem) { .intg-nav { max-width: none; } }

.step-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.step-cards > li { display: flex; gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface); border: var(--rule); border-radius: var(--radius-lg); }
.step-cards > li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.step-cards b { font-weight: 600; }
.step-cards p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.step-cards label { margin: var(--space-2xs) 0 0; }
.plat .step-n { flex: none; }
.plat .step-n.done { background: var(--color-ok-soft); color: var(--color-ok); border-color: transparent; }

.secret { display: flex; gap: var(--space-xs); align-items: center; }
.secret input { flex: 1; min-width: 0; }
.copyfield input { flex: 1; min-width: 0; height: var(--control-h); padding: 0 10px; border: var(--rule); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); }
.copyfield { margin: 0; }
input.mono { font-size: var(--text-xs); }
/* An organisation's numbers: one compact row of six. */
.plat.narrow .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--space-xs); }
.plat.narrow .tile { padding: var(--space-xs) var(--space-sm); }
.plat.narrow .tile b { font-size: var(--text-lg); line-height: 1.5rem; }
.rows.tight .grow { flex-basis: 0; }
.org-row form { margin-left: auto; }

/* Plans */
.plan-row .n { min-width: 8rem; }
.plan-policy { border: 0; padding: 0; margin: var(--space-md) 0 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.plan-policy.bare { margin: 0; }
.plan-policy legend { font-weight: 600; margin-bottom: var(--space-xs); }
.policy-choice { align-items: flex-start; padding: var(--space-sm) var(--space-md); border: var(--rule); border-radius: var(--radius); margin: 0; }
.policy-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.policy-choice > input { margin-top: 3px; }
.policy-choice > span { display: flex; flex-direction: column; gap: 2px; }

/* Customer stories: reorder buttons, logo rows with an inline edit form. */
.callout { display: flex; gap: var(--space-xs); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-ink-2); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.moves { gap: 2px; flex: none; }
.moves .icon-btn:disabled { opacity: 0.35; cursor: default; }
.logo-prev { width: 9rem; height: 3rem; flex: none; display: grid; place-items: center; border: var(--rule); border-radius: var(--radius-md); background: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-2); overflow: hidden; text-align: center; line-height: 1.1; padding: 4px; }
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-edit { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; margin: 0; }
.logo-edit label { margin: 0; flex: 1 1 12rem; }
.logo-edit label.check { flex: none; padding-bottom: 0.6rem; }
.logo-edit.add { padding: var(--space-md); border-top: var(--rule); }
.facts-edit { display: flex; flex-direction: column; gap: var(--space-sm); }
.fact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-sm); }
.fact-row label { margin: 0; }
.tones { border: 0; padding: 0; margin: 0; display: flex; gap: var(--space-md); flex-wrap: wrap; }
.tones legend { font-weight: 500; margin-bottom: var(--space-2xs); padding: 0; }
.chiplet-dot { width: 12px; height: 12px; border-radius: var(--radius-pill); display: inline-block; }
.chiplet-dot.blue { background: var(--color-accent); }
.chiplet-dot.green { background: var(--color-ok); }

/* Site pages and help centre editors. */
.copy-fields { display: flex; flex-direction: column; gap: var(--space-md); }
.copy-fields > label { margin: 0; }
.copy-name { display: flex; gap: var(--space-xs); align-items: center; }
.copy-fields label.edited :is(input, textarea) { border-color: var(--color-accent); }
.copy-fields .orig { margin-top: calc(-1 * var(--space-sm)); font-size: var(--text-sm); color: var(--color-ink-3); }
.copy-fields .orig p { margin: var(--space-2xs) 0 0; white-space: pre-wrap; }
.markup-help { font-size: var(--text-sm); color: var(--color-ink-2); }
.markup-help ul { margin: var(--space-xs) 0 0; padding-left: 1.25rem; display: grid; gap: 2px; }
.topic-head { display: flex; gap: var(--space-sm); align-items: center; }
.topic-head h2 { margin: 0; }
.topic-edit { padding: var(--space-sm) var(--space-md); border-top: var(--rule); }
.topic-edit summary { cursor: pointer; font-weight: 500; color: var(--color-accent); font-size: var(--text-sm); }
.topic-edit .logo-edit { margin-block: var(--space-sm); }
.topic-head .ic-box { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; }
.topic-head .ic-box.blue { background: var(--color-info-soft); color: var(--color-info); }
.topic-head .ic-box.green { background: var(--color-ok-soft); color: var(--color-ok); }
.topic-head .ic-box.sun { background: var(--color-warn-soft); color: var(--color-warn); }
.topic-head .ic-box.coral { background: var(--color-bad-soft); color: var(--color-bad); }
.panel-head.topic-head { justify-content: flex-start; }
.topic-head .grow { flex: 1 1 auto; min-width: 0; }
.show-switch { margin: 0; flex: none; font-weight: 500; font-size: var(--text-sm); }
.panel.is-off { opacity: 0.6; }
.panel.is-off .show-switch { opacity: 1; }
.icon-pick, .colour-pick { display: flex; gap: var(--space-xs); align-items: center; }
.icon-prev { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.colour-pick input[type="color"] { width: 3rem; height: 2.5rem; padding: 2px; flex: none; }
.colour-pick input[type="text"] { width: 8rem; font-family: var(--font-mono); }
.img-prev { max-width: 100%; max-height: 14rem; border-radius: var(--radius-md); border: var(--rule); margin-top: var(--space-xs); }

/* Emails editor: fields beside a live-looking preview. */
.email-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: var(--space-lg); align-items: start; }
.email-preview { position: sticky; top: var(--space-md); }
.mail-subject { display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: var(--rule); border-bottom: var(--rule); font-size: var(--text-sm); }
.mail-subject span { color: var(--color-ink-3); }
.mail-frame { display: block; width: 100%; height: 54rem; border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-paper); }
.vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-xs) var(--space-md); margin: 0; }
.vars div { display: flex; flex-direction: column; gap: 2px; }
.vars dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-3); }
.mail-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); }
@media (max-width: 64rem) { .email-edit { grid-template-columns: minmax(0, 1fr); } .email-preview { position: static; } }

/* Logs and the platform team */
.perm-matrix th[scope=row] { font-weight: 500; }
.perm-matrix .c { text-align: center; width: 84px; }
.team-rows .r { flex-wrap: wrap; }
.team-rows .chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.chips legend { font-weight: 600; margin-bottom: 6px; }
.cell-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Design parity (platform boards) ---- */
/* Shared bits: panel heads and feet with a rule, a two-column work area, sunflower pill. */
.plat .panel-head.ruled { border-bottom: var(--rule); padding: var(--space-md) 1.125rem; }
.plat .panel-head .sub { color: var(--color-ink-3); font-size: var(--text-base); }
.plat .plat-foot.ruled { border-top: var(--rule); padding: var(--space-sm) 1.125rem; }
.plat .panel-body.roomy { padding: 1.125rem; }
.plat-split { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.plat-split > .panel { margin: 0; }
.plat-main { flex: 3 1 30rem; min-width: 0; }
.plat-side { flex: 2 1 20rem; min-width: 0; }
.sun-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-sun); color: light-dark(var(--color-ink), var(--color-paper)); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.plat .unit-row { display: flex; align-items: center; gap: var(--space-xs); font-weight: 400; color: var(--color-ink-2); }
.plat .w-num { width: 5rem; }
.plat .w-num.wide { width: 6.25rem; }

/* Plans: four plan cards, then pricing terms beside recent changes. */
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.875rem; margin-bottom: 1.25rem; }
.pp-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: 1.125rem; border-radius: var(--radius-lg); background: var(--color-surface); border: var(--rule); color: var(--color-ink); text-decoration: none; transition: background var(--dur-short), border-color var(--dur-short); }
.pp-card:hover { background: var(--color-paper-2); color: var(--color-ink); }
.pp-card.best { border: 2px solid var(--color-accent); padding: calc(1.125rem - 1px); }
.pp-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.pp-top b { font-size: var(--text-md); font-weight: 700; }
.pp-price { font-size: 1.625rem; line-height: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pp-price small { display: inline; font-size: var(--text-base); font-weight: 500; color: var(--color-ink-3); letter-spacing: 0; }
.pp-tag { color: var(--color-ink-2); line-height: 1.45; flex: 1; }
.pp-facts { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-sm); border-top: var(--rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.pp-facts > span { display: flex; justify-content: space-between; gap: var(--space-xs); }
.pp-facts b { color: var(--color-ink); font-weight: 700; text-align: right; }
.pp-edit { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent-text); font-weight: 600; }
.terms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); }
.terms-grid > label, .terms-grid > fieldset { margin: 0; }
.terms-grid > label { font-weight: 600; }
.terms-grid .span2 { grid-column: 1 / -1; }
.terms-grid textarea { font-weight: 400; }
.plan-policy.warned { margin: 0; padding: 0.875rem var(--space-md); border: 1px solid var(--color-sun-rule); border-radius: var(--radius-lg); background: var(--color-sun-soft); }
.plan-policy.warned legend { float: left; width: 100%; padding: 0; color: var(--color-sun-ink); font-weight: 700; }
.plan-policy.warned .policy-choice { padding: var(--space-2xs) 0; border: 0; background: transparent; }
.change-list { list-style: none; margin: 0; padding: 0; }
.change-list li { display: flex; gap: var(--space-sm); padding: 0.875rem 1.125rem; border-top: var(--rule); }
.change-list li:first-child { border-top: 0; }
.ch-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.ch-ic.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.ch-ic.ok { background: var(--color-ok-soft); color: var(--color-ok); }
.ch-ic.info { background: var(--color-accent-soft); color: var(--color-accent-text); }
.ch-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-main b { font-weight: 700; }
.ch-main small { font-size: var(--text-sm); color: var(--color-ink-3); }

/* Site pages: the brand card, page cards with a little sketch, then the other site areas. */
.sp-brand, .sp-card, .sp-also { background: var(--color-surface); border: var(--rule); border-radius: var(--radius-lg); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
:is(.sp-brand, .sp-card, .sp-also):hover { color: var(--color-ink); text-decoration: none; border-color: var(--color-rule-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.sp-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem; padding: 1.125rem 1.25rem; margin-bottom: 1.375rem; }
.sp-brand > .icon { color: var(--color-ink-3); }
.sp-swatches { display: flex; gap: 6px; }
.sp-swatches span { width: 34px; height: 34px; border-radius: 9px; }
.sp-swatches .blue { background: var(--color-accent); }
.sp-swatches .sun { background: var(--color-sun); }
.sp-brand-main { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-brand-main b, .sp-name b { font-size: 0.9375rem; font-weight: 700; }
.sp-brand-main > span { color: var(--color-ink-3); }
.sp-state { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-3); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.sp-state.on { background: var(--color-accent-soft); color: var(--color-accent-text); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.875rem; }
.sp-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.sp-thumb { height: 112px; border-radius: var(--radius); background: var(--color-paper); border: var(--rule); padding: var(--space-sm); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.sp-thumb .l1 { height: 6px; width: 40%; border-radius: 3px; background: var(--color-rule-strong); }
.sp-thumb .l2 { height: 12px; border-radius: 4px; background: var(--color-ink); }
.sp-thumb .l3 { height: 12px; width: 46%; border-radius: 4px; background: var(--color-sun); }
.sp-thumb .tiles3 { display: flex; gap: 6px; margin-top: auto; }
.sp-thumb .tiles3 span { flex: 1; height: 28px; border-radius: var(--radius-sm); background: var(--color-surface); border: var(--rule); }
.sp-thumb .tiles3 span.on { background: var(--color-accent-soft); border-color: transparent; }
.sp-name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.sp-meta { display: flex; justify-content: space-between; gap: var(--space-xs); color: var(--color-ink-3); font-size: var(--text-sm); }
.sp-h2 { margin: 1.875rem 0 0.875rem; font-size: var(--text-lg); font-weight: 700; font-family: var(--font-body); letter-spacing: 0; }
.sp-also { display: flex; gap: 0.875rem; align-items: center; padding: var(--space-md); }
.sp-also > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sp-also small { color: var(--color-ink-3); font-size: var(--text-sm); }
.sp-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.sp-ic.green { background: var(--color-ok-soft); color: var(--color-ok); }
.sp-ic.sun { background: var(--color-warn-soft); color: var(--color-warn); }
.sp-ic.blue { background: var(--color-accent-soft); color: var(--color-accent-text); }
@media (prefers-reduced-motion: reduce) { :is(.sp-brand, .sp-card, .sp-also):hover { transform: none; } }

/* On/off switches in the console: a checkbox drawn as a sliding track (feature lists, "Show on the page"). */
.plat input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-rule-strong); cursor: pointer; transition: background var(--dur-short) var(--ease-out); }
.plat input[type="checkbox"][role="switch"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease-out); }
.plat input[type="checkbox"][role="switch"]:checked { background: var(--color-accent); }
.plat input[type="checkbox"][role="switch"]:checked::before { transform: translateX(18px); }
.plat input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .plat input[type="checkbox"][role="switch"], .plat input[type="checkbox"][role="switch"]::before { transition: none; } }

/* Edit a site page: a sticky list of sections beside the section cards. */
.pe-code { font-family: var(--font-mono); font-size: var(--text-sm); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-paper-2); }
.pe-wrap { display: flex; flex-wrap: wrap; gap: 1.375rem; align-items: flex-start; }
.pe-jump { flex: 0 0 13.125rem; position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radius-lg); background: var(--color-surface); border: var(--rule); max-height: calc(100vh - 2.5rem); overflow-y: auto; }
.pe-jump-h { padding: 4px 8px 8px; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); }
.pe-jump a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; border-radius: 8px; color: var(--color-ink); text-decoration: none; }
.pe-jump a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.pe-jump a.off { color: var(--color-ink-3); text-decoration: line-through; }
.pe-main { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.pe-main > .panel { margin: 0; scroll-margin-top: var(--space-md); }
.pe-save { flex: 1 1 100%; }
.pe-sec .show-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--text-base); white-space: nowrap; cursor: pointer; }
.pe-sec .when-off { display: none; }
.pe-sec:has(.show-switch input:not(:checked)) { opacity: 0.62; }
.pe-sec:has(.show-switch input:not(:checked)) .panel-body { display: none; }
.pe-sec:has(.show-switch input:not(:checked)) .panel-head { border-bottom: 0; }
.pe-sec:has(.show-switch input:not(:checked)) .when-off { display: block; }
.pe-sec:has(.show-switch input:not(:checked)) .when-on { display: none; }
.pe-sec.is-off { opacity: 1; }
.pe-sec:has(.show-switch input:checked) { opacity: 1; }
.pe-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-md); padding: 1.125rem; }
.pe-fields > * { margin: 0; }
.pe-fields .full { grid-column: 1 / -1; }
.pe-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 600; }
.pe-field :is(input, textarea) { font-weight: 400; }
.pe-field input.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.pe-field .hint { font-weight: 400; }
.pe-field.edited :is(input:not([type="color"]), textarea) { border: 1.5px solid var(--color-accent); }
.pe-changed { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--text-xs); font-weight: 700; }
.pe-fields .orig { margin-top: calc(-1 * var(--space-xs)); }
.pe-look { display: flex; flex-direction: column; gap: 6px; padding: 1.125rem 1.25rem; border-radius: 12px; background: var(--color-paper); border: 1px dashed var(--color-rule-strong); }
.pe-look > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); }
.pe-look b { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; font-weight: 700; letter-spacing: var(--tracking-display); }
.pe-look mark { background: linear-gradient(transparent 58%, var(--color-sun) 58%); color: inherit; padding: 0 2px; }
.pe-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-sm); }
.pe-more summary { cursor: pointer; color: var(--color-ink-3); margin-bottom: var(--space-sm); }
.pe-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.875rem; }
.pe-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0.875rem; border-radius: 12px; border: var(--rule); background: var(--color-paper); }
.pe-group legend { float: left; width: 100%; padding: 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); }
.pe-group .icon-prev { width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent-text); border: 0; }
@media (max-width: 52rem) { .pe-jump { position: static; flex: 1 1 100%; max-height: none; flex-direction: row; flex-wrap: wrap; } .pe-jump-h { flex-basis: 100%; } }
.icon-pick input { flex: 1; min-width: 0; }
.pe-group .hint { display: none; }
.pe-group:nth-child(3n+2) .icon-prev { background: var(--color-ok-soft); color: var(--color-ok); }
.pe-group:nth-child(3n) .icon-prev { background: var(--color-warn-soft); color: var(--color-warn); }

/* Edit a plan: sections on the left, what saving does on the right, switches at the end of each feature row. */
.feat { align-items: center; padding: 11px 1.125rem; }
.feat > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feat b { font-weight: 600; }
.feats > .feat:last-child { border-bottom: 0; }
.pl-wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.pl-main { flex: 1 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.pl-main > .panel { margin: 0; overflow: hidden; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); }
.pl-grid > label { margin: 0; font-weight: 600; }
.pl-grid > label :is(input, textarea) { font-weight: 400; }
.pl-grid > label .hint { font-weight: 400; }
.pl-grid > label.check { font-weight: 400; align-self: center; }
.pl-grid .span2 { grid-column: 1 / -1; }
.pl-grid input[type="number"] { max-width: 7.5rem; }
.pl-aside { flex: 0 1 20rem; min-width: 0; position: sticky; top: 1.25rem; }
.pl-impact { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; }
.pl-impact-h { font-size: 0.9375rem; }
.pl-impact p { margin: 0; color: var(--color-ink-2); line-height: 1.5; }
.pl-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding-top: var(--space-sm); border-top: var(--rule); text-align: center; }
.pl-counts > span { display: flex; flex-direction: column; padding: 10px; border-radius: var(--radius); background: var(--color-paper); }
.pl-counts b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pl-counts small { font-size: var(--text-xs); color: var(--color-ink-3); }
.pl-impact a { font-weight: 600; }
.pl-save { flex: 1 1 100%; }
.policy-choice { padding: 0.875rem var(--space-md); border-radius: 12px; border-color: var(--color-rule-strong); }
.policy-choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--color-accent); }
.policy-choice > input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); }
@media (max-width: 64rem) { .pl-aside { position: static; flex: 1 1 100%; } }
label.policy-choice { display: flex; gap: var(--space-sm); align-items: flex-start; }
.policy-choice > input[type="radio"] { margin-top: 1px; flex: none; }

/* Customer stories: one card per story, logos as tiles. */
.st-note { margin: 0 0 var(--space-sm); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.875rem; margin-bottom: 1.25rem; }
.st-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: 1.125rem; border-radius: var(--radius-lg); background: var(--color-surface); border: var(--rule); min-width: 0; }
.st-card.draft { border: 1px dashed var(--color-rule-strong); }
.st-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
.st-name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-name > a { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--color-ink); text-decoration: none; letter-spacing: var(--tracking-display); }
.st-name > a:hover { color: var(--color-accent-text); }
.st-chip { align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.st-chip.blue { background: var(--color-accent-soft); color: var(--color-accent-text); }
.st-chip.green { background: var(--color-ok-soft); color: var(--color-ok); }
.st-sum { margin: 0; color: var(--color-ink-2); line-height: 1.5; }
.st-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.st-facts > span { display: flex; flex-direction: column; padding: var(--space-xs); border-radius: var(--radius); background: var(--color-paper); min-width: 0; }
.st-facts b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.st-facts small { font-size: var(--text-xs); color: var(--color-ink-3); }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.st-tag { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 700; }
.st-tag.sun { background: var(--color-warn-soft); color: var(--color-warn); }
.st-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-sm); border-top: var(--rule); }
.st-foot form { margin: 0; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-sm); padding: 1.125rem; }
.lg-tile { display: flex; flex-direction: column; gap: var(--space-xs); padding: 10px; border-radius: 12px; background: var(--color-paper); border: var(--rule); min-width: 0; }
.lg-tile.off { border-style: dashed; border-color: var(--color-rule-strong); }
.lg-tile .logo-prev { width: 100%; height: 64px; font-size: 1.0625rem; background: var(--color-canvas-email); }
.lg-tile.off .logo-prev { opacity: 0.55; }
.lg-bar { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.lg-state { font-weight: 600; color: var(--color-ok); }
.lg-tile.off .lg-state { color: var(--color-ink-3); }
.lg-edit summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text); }
.lg-edit .logo-edit { flex-direction: column; align-items: stretch; margin-top: var(--space-xs); }
.lg-edit .logo-edit label { flex: none; }
.lg-edit .logo-edit label.check { padding: 0; }
.lg-actions { display: flex; align-items: center; gap: 10px; }
.logo-edit.add { border-top: var(--rule); padding: var(--space-md) 1.125rem; }

/* Every console panel head sits above a rule, like the boards. */
.plat .panel > .panel-head { border-bottom: var(--rule); padding: var(--space-md) 1.125rem; }
.plat .panel > .panel-head:last-child { border-bottom: 0; }
.plat .panel > .panel-head h2 { font-size: var(--text-md); font-weight: 700; }

/* Help centre: topic cards with their articles, adding a topic on the side; the article editor. */
.hc-wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.hc-topics { flex: 2 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.hc-topics > .panel { margin: 0; overflow: hidden; }
.hc-side { flex: 1 1 18rem; min-width: 0; position: sticky; top: 1.25rem; }
.hc-side .panel { margin: 0; }
.hc-topic .panel-head { padding: 0.875rem var(--space-md); gap: var(--space-sm); }
.hc-topic .panel-head h2 { font-size: 0.9375rem; }
.hc-topic .panel-head .sub { font-size: var(--text-sm); color: var(--color-ink-3); }
.hc-topic .ic-box { border-radius: var(--radius); }
.hc-row { display: flex; align-items: center; gap: var(--space-sm); min-height: 46px; padding: 6px var(--space-md); border-top: var(--rule); }
.hc-topic .panel-head + .hc-row { border-top: 0; }
.hc-row:hover { background: var(--color-paper-2); }
.hc-row > a.grow { flex: 1; min-width: 0; color: var(--color-ink); text-decoration: none; }
.hc-row > a.grow:hover { color: var(--color-accent-text); }
.hc-row form { margin: 0; }
.hc-row .moves .icon-btn, .hc-topic .moves .icon-btn { width: 28px; height: 28px; min-height: 28px; color: var(--color-ink-3); }
.hc-empty { margin: 0; padding: var(--space-md); color: var(--color-ink-3); font-size: var(--text-sm); }
.topic-edit summary { display: inline-flex; align-items: center; gap: 6px; }
.hc-add { flex-direction: column; align-items: stretch; padding: 1.125rem; }
.hc-add label { flex: none; }
.ar-panel { overflow: hidden; }
.ar-body { display: flex; flex-direction: column; gap: 0.875rem; }
.ar-body > label { margin: 0; font-weight: 600; }
.ar-body > label :is(input, select, textarea) { font-weight: 400; }
.ar-body > label.check { font-weight: 400; }
.ar-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-md); }
.ar-top label { margin: 0; font-weight: 600; }
.ar-top :is(input, select) { font-weight: 400; }
.ar-body textarea.ar-text { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; }
.ar-tips { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-sm); color: var(--color-ink-2); }
.ar-tips code { font-family: var(--font-mono); }
.ar-foot { justify-content: flex-start; }
.ar-del { margin-left: auto; }
@media (max-width: 40rem) { .ar-top { grid-template-columns: minmax(0, 1fr); } .hc-side { position: static; } }
.hc-row .danger-link { color: var(--color-ink-3); text-decoration: none; }
.hc-row:is(:hover, :focus-within) .danger-link { color: var(--color-bad); }

/* Emails: a card per email; the editor with placeholder chips beside the preview. */
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.875rem; }
.em-card { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--rule); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short), box-shadow var(--dur) var(--ease-out); }
.em-card:hover { color: var(--color-ink); text-decoration: none; border-color: var(--color-rule-strong); box-shadow: var(--shadow-lift); }
.em-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.em-name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.em-name b { font-size: 0.9375rem; }
.em-main small { font-size: var(--text-sm); color: var(--color-ink-3); line-height: 1.45; }
.em-note { margin-top: var(--space-md); }
.email-fields { display: flex; flex-direction: column; gap: 0.875rem; }
.email-fields > .panel { margin: 0; }
.em-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0.875rem 1.125rem; border-bottom: var(--rule); }
.em-vars > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); margin-right: 4px; }
.ph-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--radius-pill); border: var(--rule); background: var(--color-paper); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); cursor: help; }
.em-vars-help { flex-basis: 100%; }
.em-vars-help summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-3); }
.em-vars-help .vars { margin-top: var(--space-xs); }
.em-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.em-fields > * { margin: 0; }
.em-fields .full { grid-column: 1 / -1; }
.em-prev { overflow: hidden; margin: 0; }
.em-prev .mail-subject { border-top: 0; }

/* Logs: the filters, table and pages sit inside one panel under the tabs. */
.plat .meters { margin-bottom: 1.25rem; }
.log-panel { overflow: hidden; }
.log-total { font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-panel > .filterbar { padding: var(--space-sm) 1.125rem; margin: 0; }
.log-panel .tablewrap { border: 0; border-top: var(--rule); border-radius: 0; margin: 0; box-shadow: none; }
.log-panel .pager { padding: var(--space-sm) 1.125rem; border-top: var(--rule); margin: 0; }
.log-panel .bulkbar { margin: 0; border-radius: 0; }

/* Platform team: the permission table runs edge to edge, people rows sit straight in the card, group chips show a tick box. */
.tm-card { padding: 0; overflow: hidden; }
.tm-card > h2 { margin: 0; padding: 1.125rem 1.25rem 0.75rem; font-size: var(--text-lg); }
.tm-flush { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.tm-flush .perm-matrix th[scope=col] { background: var(--color-paper); font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 600; }
.tm-flush .perm-matrix th[scope=col]:first-child { padding-left: 1.25rem; }
.tm-flush .perm-matrix th[scope=row] { padding-left: 1.25rem; background: transparent; }
.tm-flush .perm-matrix td.c .icon { color: var(--color-ok); }
.tm-rows { border: 0; border-radius: 0; margin: 0 1.25rem; background: transparent; }
.tm-rows > .r { padding: var(--space-sm) 0; border-top: var(--rule); }
.tm-rows > .r:first-child { border-top: var(--rule); }
.tm-rows .grow b { font-weight: 600; display: block; }
.tm-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--text-xs); font-weight: 700; }
.tm-rows > .r:nth-child(4n+2) .tm-av { background: var(--color-warn-soft); color: var(--color-warn); }
.tm-rows > .r:nth-child(4n+3) .tm-av { background: var(--color-ok-soft); color: var(--color-ok); }
.tm-rows > .r:nth-child(4n) .tm-av { background: var(--color-bad-soft); color: var(--color-bad); }
.tm-card > .hint { margin: 0; padding: var(--space-sm) 1.25rem 1.125rem; }
.tm-add { padding: 0 1.25rem 1.25rem; }
.tm-add > label { max-width: 29rem; font-weight: 600; }
.tm-add > label input { font-weight: 400; }
.tm-add fieldset.chips { border: 0; padding: 0; margin: 0; }
.tm-card .chip-check span { gap: 8px; font-weight: 600; min-height: 34px; }
.tm-card .chip-check span::before { content: ""; width: 14px; height: 14px; flex: none; box-sizing: border-box; border-radius: 3px; border: 1.5px solid var(--color-ink-3); background: var(--color-surface); color: var(--color-accent-ink); font-size: 10px; line-height: 11px; text-align: center; }
.tm-card .chip-check input:checked + span::before { content: "✓"; background: var(--color-accent); border-color: var(--color-accent); }
.tm-add .chips legend { margin-bottom: var(--space-xs); padding: 0; font-weight: 600; } .tm-add > div { margin-top: var(--space-xs); }

/* Organisation page: its six numbers in one row. */
.plat .tiles.six { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-sm); }
.plat .tiles.six .tile { padding: 0.875rem var(--space-md); }
.plat .tiles.six .tile b { font-size: 1.625rem; line-height: 2rem; }
.plat > .pills { margin-bottom: var(--space-md); }
.intg-nav { padding: 10px; background: var(--color-surface); border: var(--rule); border-radius: var(--radius-lg); }
.intg-nav h1 { padding: 4px 6px 0; }
.intg-nav .hint { padding: 0 6px; }
.intg-nav { max-width: 17.5rem; flex-basis: 15rem; }
.intg-nav h1 { font-size: var(--text-lg); line-height: 1.5rem; }
.intg-nav a { min-height: 40px; padding: 6px 10px; }
.intg-nav a small { white-space: nowrap; }
.pp-card:hover, .pp-card:hover * { text-decoration: none; }

/* Discounts: the organisations a code is for, ticked ones first, in a box that scrolls. */
.pick-list { max-height: 240px; overflow-y: auto; border: var(--rule); border-radius: 10px; background: var(--color-paper-2); padding: var(--space-xs) var(--space-sm); display: grid; gap: 2px; }
.pick-list small { margin-left: var(--space-xs); }
fieldset.pl-grid { border: 0; border-radius: 0; margin: 0; }
.pl-grid fieldset, .pl-grid > .stack-sm { border: 0; padding: 0; margin: 0; }
.pl-grid .label, .pl-grid legend { font-weight: 600; font-size: var(--text-base); padding: 0; margin-bottom: var(--space-2xs); display: block; }
.pl-grid fieldset label.check, .pl-grid > .stack-sm label.check { margin-bottom: var(--space-2xs); }

/* Reports: figures in tables line up on the right */
.plat th.num, .plat td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Plans: income bands and the add-ons list */
.terms-grid .bands { display: flex; flex-direction: column; gap: var(--space-xs); border: 0; padding: 0; margin: 0; }
.terms-grid .bands legend { font-weight: 600; padding: 0; margin-bottom: var(--space-xs); }
.terms-grid .bands > .unit-row { flex-wrap: wrap; gap: var(--space-sm); }
.addon-admin { overflow: hidden; margin-bottom: 1.25rem; }
.addon-admin .list-row { color: var(--color-ink); text-decoration: none; }
.addon-admin .list-row:hover { background: var(--color-paper-2); }
.addon-admin .panel-head + .list-row { border-top: 0; }

/* Visitors: the funnel from first visit to paying */
.funnel { margin-bottom: 1.25rem; }
.funnel-steps { list-style: none; margin: 0; padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-md); }
.funnel-steps li { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr 5rem; grid-template-areas: "label bar count" ". rate rate"; gap: 4px var(--space-md); align-items: center; }
.funnel-label { grid-area: label; display: flex; flex-direction: column; font-weight: 600; }
.funnel-label small { color: var(--color-ink-3); font-weight: 400; font-size: 0.8125rem; }
.funnel-bar { grid-area: bar; height: 14px; border-radius: var(--radius-pill); background: var(--color-paper-2); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); transition: width var(--dur-short) var(--ease-out); }
.funnel-steps li:last-child .funnel-bar i { background: var(--color-ok); }
.funnel-steps b { grid-area: count; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.funnel-rate { grid-area: rate; color: var(--color-ink-3); font-size: 0.8125rem; }
@media (max-width: 40rem) {
  .funnel-steps { padding: var(--space-md); }
  .funnel-steps li { grid-template-columns: 1fr auto; grid-template-areas: "label count" "bar bar" "rate rate"; }
}