/* 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: 56rem; }
.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); }

/* 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; max-width: 48.75rem; 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; }
.step-n { width: 24px; height: 24px; flex: none; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-2); border: var(--rule); }
.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: 34rem; border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #f1f5f9; }
.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; } }