/* Waslah dashboard. One token layer; base styles are the phone layout, wider screens layer on. */

:root {
  color-scheme: light;

  /* Neutrals carry the page; one accent. */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efede7;
  --ink: #1d1c1a;
  --ink-2: #55514a;
  --ink-3: #6b675f;
  --line: #e2dfd7;
  --line-strong: #c9c4b9;
  --row-hover: #f2f0eb;

  --accent: #0b6b4f;
  --accent-hover: #095a43;
  --accent-active: #074835;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ea;

  --danger: #b42318;
  --danger-hover: #951d14;
  --danger-soft: #fcebe9;
  --warn: #7a5000;
  --warn-soft: #fbf0d9;
  --ok: #0b6b4f;
  --ok-soft: #e3f1ea;
  --focus: #2457c5;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.375rem;
  --t-display: 2.375rem;
  --t-hero: 2.625rem;
  --lh-tight: 1.15;
  --lh: 1.55;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --hair: 1px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent);
  --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.06);

  --dur: 140ms;
  --dur-spin: 900ms;
  --r-pill: 999px;
  --outline: 2px;
  /* QR codes need dark modules on a light quiet zone in both themes. */
  --qr-bg: #ffffff;
  --qr-ink: #55514a;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --side-w: 15rem;
  --measure: 68rem;
  --lp-wrap: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base) / var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--outline) solid var(--focus);
  outline-offset: var(--outline);
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
code, .mono, pre { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.icon { width: 1.05em; height: 1.05em; flex: none; }
.spin { animation: spin var(--dur-spin) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- shell */

.shell { min-height: 100vh; }

.side {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: var(--hair) solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink);
  font-weight: 650;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--s4) * -1);
  padding: 0 var(--s4);
}
.nav::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link:active { background: var(--line); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.nav-link[aria-current="page"] .icon { color: var(--accent); }

/* Account switcher: a button and a list of small POST forms. Without JS the list simply shows. */
.switcher { position: relative; min-width: 0; }
.switcher-btn { max-width: 100%; justify-content: space-between; gap: var(--s2); }
.switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.switcher-hint { color: var(--ink-3); font-size: var(--t-xs); }
.switcher-menu { list-style: none; margin: var(--s1) 0 0; padding: var(--s1); display: grid; gap: 2px; }
.switcher.js .switcher-menu {
  display: none; position: absolute; z-index: 20; left: 0; top: 100%; min-width: 14rem;
  background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.switcher.js .switcher-menu.is-open { display: grid; }
.switcher-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); border: 0; border-radius: var(--r); background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.switcher-item:hover, .switcher-item:focus-visible { background: var(--surface-2); }
.switcher-item[aria-current="true"] { background: var(--accent-soft); }
.switcher-item .muted { font-size: var(--t-xs); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.side-foot { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.who { display: none; }

.main {
  padding: var(--s5) var(--s4) var(--s8);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- page type */

.page-head { margin-bottom: var(--s6); }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); }
.eyebrow { color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s2); }
.display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 650;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.lede { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; }
.page-head > p:last-child:not(.lede):not(.eyebrow) { margin-top: var(--s5); }
.back {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin-bottom: var(--s4); color: var(--ink-3); text-decoration: none; font-size: var(--t-sm);
}
.back:hover { color: var(--ink); }

.section { margin-top: var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.section-title {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-lg); font-weight: 620; letter-spacing: -0.01em; margin-bottom: var(--s3);
}
.section-head .section-title { margin-bottom: 0; }
.link-quiet { color: var(--ink-2); font-size: var(--t-sm); }
.hint { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s1); }
.empty {
  padding: var(--s5) var(--s4);
  border: var(--hair) dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}

.panel {
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
}
.panel-key { border-color: var(--accent); background: var(--accent-soft); }
.panel-key p { margin-bottom: var(--s3); color: var(--ink-2); }
.panel > .hint:first-of-type { margin-bottom: var(--s4); }

.split { display: grid; gap: 0 var(--s5); }

.flash, .alert {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s4);
}
.flash .icon, .alert .icon { margin-top: 0.2em; }
.flash { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.flash .icon { color: var(--ok); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.alert-danger .icon { color: var(--danger); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.alert-warn .icon { color: var(--warn); }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 0.125rem var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 550;
  white-space: nowrap;
  border: var(--hair) solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ---------------------------------------------------------------- rows */

.rows {
  list-style: none; padding: 0;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rows > li + li { border-top: var(--hair) solid var(--line); }
.rows-plain { border: 0; border-radius: 0; background: none; }
.row-link, .row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  color: var(--ink); text-decoration: none;
}
.rows-plain .row { padding-left: 0; padding-right: 0; flex-wrap: wrap; }
.rows-plain .row-main { flex: 1 1 12rem; }  /* on a narrow phone the actions drop below instead of squeezing the text */
.row-link { transition: background var(--dur) var(--ease); }
.row-link:hover { background: var(--surface-2); color: var(--ink); }
.row-link:active { background: var(--line); }
.row-link:focus-visible { outline-offset: calc(var(--outline) * -1); }
.row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-title { font-weight: 560; }
.row-sub { color: var(--ink-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.row-arrow { color: var(--ink-3); display: none; }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.stat dt { color: var(--ink-3); font-size: var(--t-sm); }
.stat dd { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat dd a { color: var(--danger); }
.stat-lead { grid-column: 1 / -1; }
.stat-lead dd { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.025em; }

/* ---------------------------------------------------------------- tables */

.table-wrap {
  position: relative; /* contains .sr-only headers so they cannot widen the page */
  overflow-x: auto;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.panel .table-wrap { border-radius: var(--r); margin-bottom: var(--s4); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  text-align: start; font-weight: 550; color: var(--ink-3);
  padding: var(--s2) var(--s3);
  border-bottom: var(--hair) solid var(--line);
  white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: var(--hair) solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--row-hover); }
.cell-text { min-width: 14rem; max-width: 32rem; overflow-wrap: anywhere; }
.cell-error { display: block; margin-top: var(--s1); color: var(--danger); font-size: var(--t-xs); max-width: 18rem; }

/* ---------------------------------------------------------------- filters */

.filters { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s1) var(--s3);
  min-height: 2rem;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-2); background: var(--surface);
  text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip:active { background: var(--line); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-current="true"] .muted { color: inherit; }
.table .chip { white-space: nowrap; }  /* a long tag stays one pill; the table scrolls inside .table-wrap */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }

/* ---------------------------------------------------------------- forms */

.stack { display: grid; gap: var(--s4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 550; margin-bottom: var(--s2); padding: 0; }
.field { display: grid; gap: var(--s1); }
.field label { font-weight: 550; font-size: var(--t-sm); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--ink-3); }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
input:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--danger); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 0.8; }
/* One-line message boxes: keep the hint on one line instead of a clipped second line on narrow screens. */
textarea[rows="1"]::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
textarea { resize: vertical; line-height: var(--lh); }
input.mono { font-family: var(--mono); }
.input-short { max-width: 9rem; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0.2em 0 0; accent-color: var(--accent); flex: none; }

.check { display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer; }
.checks { display: grid; gap: var(--s2); }

.choices { display: grid; gap: var(--s2); }
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { box-shadow: var(--ring); }
.choice-body { display: grid; gap: var(--s1); }
.choice-title { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 580; }
.choice-text { color: var(--ink-2); font-size: var(--t-sm); }

.inline-form { display: grid; gap: var(--s3); align-items: end; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s4);
  font: inherit; font-weight: 560;
  color: var(--ink);
  background: var(--surface);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn:active { background: var(--line); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.btn[aria-busy="true"] .icon { animation: spin var(--dur-spin) linear infinite; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); }

.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-hover); }
.btn-danger:active { background: color-mix(in srgb, var(--danger) 18%, transparent); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; }
.btn-sm { min-height: 2.25rem; padding: var(--s1) var(--s3); font-size: var(--t-sm); }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------------------------------------------------------------- facts, code */

.facts { display: grid; gap: var(--s3); }
.facts > div { display: grid; gap: var(--s1); }
.facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.facts dd { overflow-wrap: anywhere; }

.copy {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s1) var(--s1) var(--s3);
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s3);
}
.copy-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.code {
  margin: 0 0 var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
  white-space: pre;
}
.details { margin-top: var(--s5); }
.details summary { cursor: pointer; color: var(--ink-2); font-weight: 550; }
.details[open] summary { margin-bottom: var(--s3); }
.details p { color: var(--ink-2); margin-bottom: var(--s3); font-size: var(--t-sm); }

/* ---------------------------------------------------------------- campaigns */

.progress {
  display: block;
  width: 100%;
  height: var(--s2);
  margin-top: var(--s2);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
  appearance: none;
}
.progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-pill); }
.progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); }
.progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }
.progress-lg { height: var(--s3); margin: 0 0 var(--s4); }
.stats-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions-bar { margin: var(--s5) 0 0; }
.actions-bar form { display: contents; }
.details-panel {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r);
}
.details-panel summary { display: flex; align-items: center; gap: var(--s2); }
.details-panel[open] summary { margin-bottom: var(--s4); }
.panel .details-panel { background: var(--surface-2); margin-bottom: var(--s4); }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.range .input-short { max-width: 6rem; }
.preview { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--hair) solid var(--line); }
.preview-to { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s2); }
.bubble {
  max-width: 34ch;
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border: var(--hair) solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-lg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- billing */

.alert-info { background: var(--surface); }
.alert-info .icon { color: var(--ink-3); }
.banner { margin-bottom: var(--s5); }
.stats-usage { grid-template-columns: 1fr; }
.stats-usage .stat-lead, .stats-usage .stat { grid-column: auto; }
.stat-of { font-size: var(--t-base); font-weight: 500; }
.stat-word { font-size: var(--t-lg) !important; }

.plans > li + li { border-top: var(--hair) solid var(--line); }
.plan-row { display: grid; gap: var(--s4); padding: var(--s4); }
.plan-current { background: var(--accent-soft); }
.plan-main { display: grid; gap: var(--s1); min-width: 0; }
.plan-main .row-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-lg); }
.plan-features {
  list-style: none; padding: 0; margin-top: var(--s2);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  color: var(--ink-2); font-size: var(--t-sm);
}
.plan-features li { display: inline-flex; align-items: center; gap: var(--s1); }
.plan-price { margin-top: var(--s1); color: var(--ink-2); }
.plan-price strong { color: var(--ink); font-size: var(--t-lg); }
.plan-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.plan-qty .input-short { max-width: 6rem; }
.plan-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.plan-buttons [data-total] { font-variant-numeric: tabular-nums; }

.invoice { display: grid; gap: var(--s5); }
.invoice-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.invoice-lines { border: var(--hair) solid var(--line); border-radius: var(--r); }
.invoice-lines tfoot th, .invoice-lines tfoot td { padding: var(--s3); border-top: var(--hair) solid var(--line-strong); text-align: left; }
.num { text-align: right !important; }
.plain-main:has(.invoice) { max-width: 40rem; }

.invoice-row { flex-wrap: wrap; }
.invoice-row .row-main { flex: 1 1 100%; }
.pay-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pay-form input[name="reference"] { width: auto; min-width: 10rem; flex: 1 1 10rem; min-height: 2.25rem; }
/* In the staff payments table: keep the reference readable and the pay form usable instead of one letter per line. */
.table .copy { min-width: 11rem; }
.table .pay-form { min-width: 15rem; }
.chips-radio { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.chip-radio span {
  display: inline-flex; align-items: center; min-height: 2.25rem;
  padding: var(--s1) var(--s3);
  border: var(--hair) solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t-sm); color: var(--ink-2); background: var(--surface);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip-radio:hover span { background: var(--surface-2); color: var(--ink); }
.chip-radio input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip-radio input:focus-visible + span { box-shadow: var(--ring); }

.plan-grid { display: grid; gap: var(--s3); }
.checks-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.input-short-date { max-width: 12rem; }
.input-short-code { max-width: 14rem; }

@media print {
  .no-print, .side, .banner { display: none !important; }
  body { background: var(--qr-bg); }
}

/* ---------------------------------------------------------------- inbox */

.nav-count {
  margin-left: auto; min-width: 1.4rem; padding: 0 var(--s1);
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-xs); font-weight: 700; text-align: center; line-height: 1.4rem;
}
.unread-dot {
  flex: none; min-width: 1.4rem; padding: 0 var(--s1); border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-size: var(--t-xs); font-weight: 700; text-align: center; line-height: 1.4rem;
}
/* Bot simulator reuses these thread styles. */
.inbox-thread { display: none; }
.inbox-thread { flex-direction: column; gap: var(--s3); min-width: 0; background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.thread-head { display: grid; gap: var(--s2); padding-bottom: var(--s3); border-bottom: var(--hair) solid var(--line); }
.thread-back { justify-self: start; }
.thread-title { font-size: var(--t-lg); font-weight: 650; }
.thread-sub { color: var(--ink-3); font-size: var(--t-sm); }
.thread { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); align-content: start; flex: 1; overflow-y: auto; max-height: 60vh; padding-right: var(--s1); }
.msg { max-width: 80%; padding: var(--s2) var(--s3); border-radius: var(--r-lg); border: var(--hair) solid var(--line); }
.msg-in { justify-self: start; background: var(--bg); }
.msg-out { justify-self: end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s2); margin-top: var(--s1); color: var(--ink-3); font-size: var(--t-xs); }
.msg-meta .badge { font-size: var(--t-xs); padding: 0 var(--s1); }
.composer { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: end; padding-top: var(--s3); border-top: var(--hair) solid var(--line); }
.composer textarea { min-height: 2.75rem; resize: vertical; }
.thread-placeholder { margin: auto; text-align: center; color: var(--ink-2); display: grid; gap: var(--s2); max-width: 32ch; }
.thread-note { padding-top: var(--s3); border-top: var(--hair) solid var(--line); }

.ar-row { flex-wrap: wrap; }
.ar-row .row-main { flex: 1 1 18rem; }
.ar-reply { color: var(--ink-2); }
.ar-off .row-title a { color: var(--ink-3); }
.try-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.try-form .field { flex: 1 1 18rem; }
.try-form .check { min-height: 2.75rem; align-items: center; }
.details-body { margin-top: var(--s3); }

/* ---------------------------------------------------------------- bots */

.bot-layout { display: grid; gap: var(--s5); align-items: start; }
.steps-list { list-style: none; padding: 0; display: grid; gap: var(--s4); }
.step-card { scroll-margin-top: var(--s7); }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.step-kind { font-weight: 650; }
.step-stat { font-size: var(--t-sm); }
.step-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: var(--hair) solid var(--line); }
.options { display: grid; gap: var(--s3); }
.option-row {
  display: grid; gap: var(--s2); grid-template-columns: auto 1fr;
  padding: var(--s3); border: var(--hair) solid var(--line); border-radius: var(--r); background: var(--bg);
}
.option-row > .field, .option-row > .next-picker { grid-column: 2; }
.option-n {
  grid-row: span 3; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--r-pill); border: var(--hair) solid var(--accent); color: var(--accent); font-weight: 700;
}
.next-picker legend { font-size: var(--t-sm); }
.add-step { margin-top: var(--s4); }
.bot-settings { position: static; }
.sim { min-height: 28rem; display: flex; }
.sim-system { justify-self: center; color: var(--ink-3); font-size: var(--t-sm); text-align: center; padding: var(--s1) 0; }
.handover { align-items: center; flex-wrap: wrap; }
.handover form { margin-left: auto; }
.chat-flag { font-size: var(--t-xs); }

/* ---------------------------------------------------------------- admin + charts */

.stats-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subhead { font-size: var(--t-base); font-weight: 620; margin: var(--s5) 0 var(--s2); }
.cell-sub { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.search-form { margin-top: var(--s2); }
.search-form .field { min-width: 0; }
.facts-compact { margin-top: var(--s4); gap: var(--s2); }

.viz { margin: 0; padding: var(--s4); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); }
.viz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.viz-title { font-weight: 600; }
.viz-total { color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.viz-svg { width: 100%; height: auto; overflow: visible; }
.viz-bar { fill: var(--accent); }
.viz-hit { fill: transparent; }
.viz-col:hover .viz-bar { fill: var(--accent-hover); }
.viz-col:hover .viz-hit { fill: var(--row-hover); }
.viz-base { stroke: var(--line-strong); stroke-width: 1; }
.viz-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.viz-axis { fill: var(--ink-3); font-size: var(--t-xs); font-family: var(--font); font-variant-numeric: tabular-nums; }
.viz-empty { color: var(--ink-3); padding: var(--s5) 0; }
.viz-table { margin-top: var(--s3); font-size: var(--t-sm); }
.viz-table summary { cursor: pointer; color: var(--ink-2); }
.viz-table .table-wrap { margin-top: var(--s2); max-height: 16rem; overflow-y: auto; }

/* ---------------------------------------------------------------- landing */

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lp { background: var(--bg); }
/* room under the footer for the floating "Chat with us" button (2.75rem tall, var(--s4) from the edge),
   so it never covers the last content or the footer links */
body.lp { padding-bottom: calc(2.75rem + 2 * var(--s4)); }
.lp-wrap { width: 100%; max-width: var(--lp-wrap); margin: 0 auto; padding: 0 var(--s4); }
.lp-narrow > * { max-width: 46rem; }

.lp-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--line);
}
.lp-nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding-top: var(--s3); padding-bottom: var(--s3); }
.lp-links { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); width: 100%; padding-bottom: var(--s3); }
.lp-links > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; padding: var(--s3) 0; border-bottom: var(--hair) solid var(--line); }
.lp-links > a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.lp-links > .btn { justify-content: center; }
.lp-menu-btn { display: none; }
.lp-nav.js .lp-menu-btn { display: inline-flex; }
.lp-nav.js .lp-links {
  display: none;
  position: absolute; top: 100%; inset-inline: 0;
  padding: var(--s2) var(--s4) var(--s4);
  background: var(--surface);
  border-bottom: var(--hair) solid var(--line);
  max-height: calc(100vh - 4rem); overflow-y: auto;
}
.lp-nav.js .lp-links.is-open { display: flex; }
@media (min-width: 48rem) {
  .lp-nav-row { flex-wrap: nowrap; }
  .lp-menu-btn, .lp-nav.js .lp-menu-btn { display: none; }
  .lp-links, .lp-nav.js .lp-links, .lp-nav.js .lp-links.is-open {
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; width: auto;
    position: static; padding: 0; border: 0; max-height: none; overflow: visible; background: none;
    gap: var(--s1) var(--s4);
  }
  .lp-links > a:not(.btn) { padding: var(--s2) 0; border-bottom: 0; }
}
.lp-links > a:not(.btn):hover { color: var(--ink); }

.lp-hero { padding: var(--s7) 0 var(--s7); }
.lp-hero-grid { display: grid; gap: var(--s7); align-items: center; }
.lp-display {
  font-size: var(--t-hero);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
}
.lp-lede { margin-top: var(--s4); font-size: var(--t-lg); color: var(--ink-2); max-width: 46ch; }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.lp-btn { min-height: 3rem; padding: var(--s3) var(--s5); font-size: var(--t-base); }
.lp-fine { margin-top: var(--s3); color: var(--ink-3); font-size: var(--t-sm); }

.chat {
  margin: 0;
  max-width: 24rem;
  width: 100%;
  justify-self: center;
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.chat-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--accent); color: var(--accent-ink); }
.chat-head strong { display: block; line-height: 1.2; }
.chat-sub { display: block; font-size: var(--t-xs); opacity: 0.85; }
.chat-avatar {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill);
  background: var(--accent-ink); color: var(--accent); font-weight: 700; font-size: var(--t-sm);
}
.chat-body { display: grid; gap: var(--s2); padding: var(--s4); }
.bubble-in, .bubble-out {
  max-width: 85%;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.bubble-in { background: var(--surface); border: var(--hair) solid var(--line); justify-self: start; }
.bubble-out { background: var(--accent-soft); border: var(--hair) solid color-mix(in srgb, var(--accent) 25%, transparent); justify-self: end; }
.chat-meta { display: flex; justify-content: flex-end; align-items: center; gap: var(--s1); margin-top: var(--s1); color: var(--ink-3); font-size: var(--t-xs); }
.chat-meta .icon { color: var(--accent); }

.chat-body { position: relative; }
.chat-item { position: relative; display: grid; gap: var(--s1); }
.chat-item[data-side="in"] { justify-items: start; }
.chat-item[data-side="out"] { justify-items: end; }
.chat-item .bubble-in, .chat-item .bubble-out { margin: 0; }
.chat-who { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.chat-item-note { justify-items: center; }
.chat-note { margin: 0; padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--surface); border: var(--hair) solid var(--line); color: var(--ink-2); font-size: var(--t-xs); }
.chat-head .chat-replay { margin-inline-start: auto; background: transparent; border: var(--hair) solid currentColor; color: inherit; border-radius: var(--r-pill); padding: 0 var(--s3); min-height: 1.75rem; font-size: var(--t-xs); cursor: pointer; }
/* JS arms the animation: every bubble stays in the layout (so height never changes), hidden ones are invisible. */
.chat.is-armed .chat-item { visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease); }
.chat.is-armed .chat-item.is-shown { visibility: visible; opacity: 1; }
.chat.is-armed .chat-item.is-pending { visibility: visible; opacity: 1; }
.chat.is-armed .chat-item.is-pending > :not(.chat-typing) { visibility: hidden; }
.chat-typing { position: absolute; top: 0; display: none; gap: 0.25rem; padding: var(--s3); border-radius: var(--r-lg); background: var(--surface); border: var(--hair) solid var(--line); visibility: visible; }
.chat-item[data-side="out"] .chat-typing { inset-inline-end: 0; background: var(--accent-soft); }
.chat-item[data-side="note"] .chat-typing { display: none !important; }
.chat.is-armed .chat-item.is-pending .chat-typing { display: inline-flex; }
.chat-typing i { width: 0.4rem; height: 0.4rem; border-radius: var(--r-pill); background: var(--ink-3); animation: chat-dot 1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chat-typing i { animation: none; }
  .chat.is-armed .chat-item { transition: none; }
}

.lp-section { padding: var(--s7) 0; }
.lp-alt { background: var(--surface); border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line); }
.lp-h2 { font-size: var(--t-xl); font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--s4); text-wrap: balance; }
.lp-p { color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; margin-bottom: var(--s4); }

.lp-steps { list-style: none; padding: 0; display: grid; gap: var(--s5); margin-top: var(--s5); }
.lp-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.lp-steps h3, .lp-use h3, .lp-plan h3 { font-size: var(--t-lg); font-weight: 620; margin-bottom: var(--s1); }
.lp-steps p, .lp-use p { color: var(--ink-2); }
.lp-step-n {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-pill); border: var(--hair) solid var(--accent); color: var(--accent);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

.lp-uses { display: grid; gap: var(--s5); margin-top: var(--s5); }
.lp-use { display: grid; gap: var(--s2); align-content: start; }
.lp-use-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent);
}
.lp-use-lead { padding: var(--s5); background: var(--bg); border: var(--hair) solid var(--line); border-radius: var(--r-lg); }
.lp-use-lead h3 { font-size: var(--t-xl); }

.lp-answers { display: grid; gap: var(--s7); margin-top: var(--s5); }
.lp-answer { display: grid; gap: var(--s4); align-items: center; }
.lp-answer-copy { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.lp-answer h3 { font-size: var(--t-lg); font-weight: 620; }
.lp-answer-lead h3 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.lp-answer p { color: var(--ink-2); max-width: 46ch; }
.lp-answer-lead p { font-size: var(--t-lg); }
.lp-answer-note { color: var(--ink); font-weight: 560; }
.lp-answer-link { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; min-height: 2.75rem; }
.lp-answer-img { display: block; width: 100%; height: auto; border: var(--hair) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
@media (min-width: 48rem) {
  .lp-answer { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .lp-answer-lead { grid-template-columns: 5fr 7fr; }
  .lp-answer:nth-child(even) .lp-answer-copy { order: 2; }
  .lp-answer-lead .lp-answer-img { order: 0; }
}

.lp-dev { display: grid; gap: var(--s6); align-items: center; }
.lp-list { list-style: none; padding: 0; display: grid; gap: var(--s2); margin-bottom: var(--s4); color: var(--ink-2); }
.lp-list li { display: flex; gap: var(--s2); align-items: flex-start; }
.lp-list .icon { color: var(--accent); margin-top: 0.25em; }
.lp-code { margin: 0; font-size: var(--t-xs); }

.lp-plans { list-style: none; padding: 0; display: grid; gap: var(--s4); margin-top: var(--s5); }
.lp-plan {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--bg);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.lp-plan-lead { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow-pop); }
.lp-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.lp-plan-desc { color: var(--ink-2); font-size: var(--t-sm); }
.lp-plan-price { margin-top: var(--s2); color: var(--ink-2); }
.lp-plan-price strong { font-size: var(--t-display); line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin-inline-end: var(--s1); }
.lp-plan-year { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s2); }
.lp-plan .lp-list { margin-top: var(--s2); font-size: var(--t-sm); }
.lp-plan-cta { margin-top: auto; }

/* ---------------------------------------------------------------- pricing calculator */

.pricing-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4) var(--s6); margin-top: var(--s5); }
.pricing-count label, .pricing-period legend { display: block; font-weight: 550; font-size: var(--t-sm); margin-bottom: var(--s1); padding: 0; }
.stepper { display: inline-flex; align-items: stretch; gap: var(--s2); }
.stepper-btn { min-width: 2.75rem; min-height: 2.75rem; padding: 0; justify-content: center; }
.stepper-input { width: 4.5rem; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.upsell-lede { color: var(--ink-2); margin-bottom: var(--s4); }
.upsell-total { font-size: var(--t-lg, 1.125rem); font-variant-numeric: tabular-nums; margin: 0; }
.chip-radio { position: relative; display: inline-flex; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-radio .chip { min-height: 2.75rem; padding: var(--s1) var(--s4); }
.chip-radio input:checked + .chip { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip-radio input:focus-visible + .chip { box-shadow: var(--ring); }
.lp-plan-free { margin: 0; }
.pricing-table { margin-top: var(--s5); margin-bottom: var(--s3); max-width: 100%; }
.pricing-table:focus-visible { outline: none; box-shadow: var(--ring); }
.pricing-table .table { min-width: 36rem; }
.pricing-table th[scope="row"] { color: var(--ink); white-space: normal; text-align: start; font-weight: 550; padding: var(--s3); border-bottom: var(--hair) solid var(--line); }
.pricing-table thead th { color: var(--ink); padding: var(--s3); }
.pricing-cap { caption-side: top; text-align: start; padding: var(--s3); font-weight: 600; color: var(--ink-2); font-size: var(--t-sm); }
.pricing-table .yes, .pricing-table .no { display: inline-flex; align-items: center; gap: var(--s1); }
.pricing-table .yes .icon { color: var(--ok); }
.pricing-table .no { color: var(--ink-2); }
.pricing-table .no .icon { color: var(--danger); }

.lp-faq { padding: var(--s4) 0; border-bottom: var(--hair) solid var(--line); }
.lp-faq summary { cursor: pointer; font-weight: 600; font-size: var(--t-lg); }
.lp-faq p { margin-top: var(--s2); color: var(--ink-2); max-width: 62ch; }

.lp-final { text-align: start; }
.lp-final .lp-h2 { font-size: var(--t-display); }

.lp-foot {
  margin-top: var(--s7);
  padding: var(--s7) 0 var(--s4);
  border-top: var(--hair) solid rgb(0 0 0 / 0.06);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.55), color-mix(in srgb, var(--accent) 7%, var(--bg)));
  color: var(--ink-2); font-size: var(--t-sm);
}
.lp-foot-grid { display: grid; gap: var(--s6); }
.lp-foot-brand { display: grid; justify-items: start; gap: var(--s3); max-width: 22rem; }
.lp-foot-brand p { color: var(--ink-2); }
.lp-foot-brand .brand { padding: 0; }
.lp-foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s5); }
.lp-foot-group h2 { font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.lp-foot-group ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.lp-foot-btn { width: 100%; justify-content: flex-start; min-height: 2.5rem; font-size: var(--t-sm); color: var(--ink); text-decoration: none; border-radius: var(--r-pill); padding-inline: var(--s4); }
.lp-foot-btn:hover { color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lp-foot-base { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--hair) solid rgb(0 0 0 / 0.06); color: var(--ink-3); font-size: var(--t-xs); }
@media (min-width: 48rem) {
  .lp-foot-grid { grid-template-columns: minmax(14rem, 1fr) 2fr; gap: var(--s7); }
}

/* ---------------------------------------------------------------- connect */

.connect { display: grid; gap: var(--s5); }
.steps { padding-left: 1.25rem; display: grid; gap: var(--s2); color: var(--ink-2); margin-bottom: var(--s3); }
.steps strong { color: var(--ink); font-weight: 600; }
.qr-box {
  display: grid; place-items: center;
  min-height: 16rem;
  padding: var(--s4);
  background: var(--qr-bg);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
}
.qr-box img { width: 15rem; height: 15rem; image-rendering: pixelated; }
.qr-wait, .qr-start { display: grid; justify-items: center; gap: var(--s3); color: var(--qr-ink); text-align: center; }
.qr-start .muted { color: var(--qr-ink); }
.qr-wait .icon { width: 1.75rem; height: 1.75rem; }

/* ---------------------------------------------------------------- plain (auth/error) */

.plain { display: grid; min-height: 100vh; }
.plain-main {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--s7) var(--s4);
}
.plain-main .brand { margin-bottom: var(--s7); }
.plain-title { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.025em; }
.plain-lede { color: var(--ink-2); margin: var(--s2) 0 var(--s5); }
.plain-main .eyebrow + .plain-title { margin-bottom: var(--s3); }
.plain-main > p:last-child { margin-top: var(--s5); }
.plain-foot { margin-top: var(--s5); color: var(--ink-2); }

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 40rem) {
  .main { padding: var(--s6) var(--s5) var(--s8); }
  .panel { padding: var(--s5); }
  .stats { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); align-items: end; padding: var(--s5); }
  .stat-lead { grid-column: auto; }
  .stats-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-usage { grid-template-columns: 2fr 1fr 1fr; }
  .stats-admin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-admin .stat-lead { grid-column: span 1; }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-desc { grid-column: 1 / -1; }
  .row-arrow { display: block; }
  .facts > div { grid-template-columns: 12rem 1fr; align-items: baseline; }
  .facts .copy { margin-bottom: 0; }
  .inline-form { grid-template-columns: minmax(0, 20rem) auto; justify-content: start; }
  .connect { grid-template-columns: 1fr auto; align-items: center; }
  .qr-box { width: 18rem; }
  .filters { grid-auto-flow: row; }
  .plain-main { padding-top: var(--s8); }
}

@media (min-width: 40rem) {
  :root { --t-hero: 3.5rem; }
  .lp-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-use-lead { grid-column: 1 / -1; }
  .lp-plans { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-steps li { grid-template-columns: 1fr; }
}

@media (min-width: 60rem) {
  :root { --t-display: 2.75rem; --t-hero: 4.25rem; }
  .bot-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
  .bot-settings { position: sticky; top: var(--s5); }
  .inbox-thread { display: flex; }
  .thread-back { display: none; }
  .thread { max-height: 62vh; }
  .lp-hero { padding: var(--s8) 0; }
  .lp-hero-grid { grid-template-columns: 1.25fr 1fr; }
  .lp-dev { grid-template-columns: 1fr 1.1fr; }
  .lp-section { padding: var(--s8) 0; }
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side {
    position: sticky; top: 0; height: 100vh;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: var(--s5);
    padding: var(--s5) var(--s3);
    border-bottom: 0;
    border-right: var(--hair) solid var(--line);
  }
  .brand { padding: 0 var(--s3); }
  .nav { order: 0; flex: 1 1 auto; flex-direction: column; overflow: visible; margin: 0; padding: 0; }
  .side-foot {
    margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--s2);
    padding-top: var(--s4); border-top: var(--hair) solid var(--line);
  }
  .side-foot .btn { justify-content: flex-start; }
  .who { display: grid; padding: 0 var(--s3); min-width: 0; }
  .who-account { font-weight: 560; font-size: var(--t-sm); }
  .who-email { color: var(--ink-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
  .main { padding: var(--s7) var(--s7) var(--s8); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split > .section { margin-top: var(--s6); }
}

.miss-list { list-style: none; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-sm); }
.miss-list li { display: flex; justify-content: space-between; gap: var(--s3); }
.miss-list li span:first-child { overflow-wrap: anywhere; }

.pack-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.pack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r); background: var(--bg); }
.pack-name { font-weight: 600; }
.pack-credits { color: var(--ink-2); flex: 1; }
.ai-grant { margin-top: var(--s3); }
.split-3 { display: grid; gap: var(--s4); }
@media (min-width: 60rem) { .split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kb-list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.kb-list > li { padding: var(--s3) var(--s4); }
.kb-summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.kb-title { font-weight: 560; overflow-wrap: anywhere; }
.kb-found { list-style: none; padding: 0; display: grid; gap: var(--s2); margin-top: var(--s2); }
.kb-found li { padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r); font-size: var(--t-sm); }

.ai-settings { display: grid; gap: var(--s3); padding: var(--s3); border: var(--hair) solid var(--line); border-radius: var(--r); }

/* ---------------------------------------------------------------- admin */
.main.main-wide { max-width: none; }
.admin-nav { margin-bottom: var(--s5); }
.admin-nav .chip { display: inline-flex; align-items: center; gap: var(--s1); }
.chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.now-note {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.now-note svg { flex: none; margin-top: 0.15em; }
.now-note strong { color: var(--ink); }

/* ---------------------------------------------------------------- help center */

.help-topic { font-size: var(--t-lg); margin: var(--s6) 0 var(--s2); }
.help-list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.help-list li > a { font-weight: 600; }
.help-list p { color: var(--ink-2); max-width: 62ch; }
.help-crumb { font-size: var(--t-sm); margin-bottom: var(--s2); }
.help-section { margin-top: var(--s5); }
.help-section h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.help-section p { color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s2); overflow-wrap: anywhere; }
.help-section img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin-top: var(--s2); }
.help-steps { padding-inline-start: 1.25rem; display: grid; gap: var(--s2); color: var(--ink-2); max-width: 62ch; }
.help-stuck { margin-top: var(--s6); color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- features, about, docs */

.ft-hero .lp-lede { max-width: 56ch; }
.ft-lead { display: grid; gap: var(--s4); margin-top: var(--s6); }
.ft-card { padding: var(--s5); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.ft-card h2 { font-size: var(--t-xl); font-weight: 680; margin-bottom: var(--s2); }
.ft-card p { color: var(--ink-2); margin-bottom: var(--s2); max-width: 60ch; }
.ft-card-lead { border-color: var(--accent); }
.ft-list { display: grid; gap: var(--s5); margin-top: var(--s4); }
.ft-item { min-width: 0; }
.ft-item h3 { font-size: var(--t-lg); font-weight: 620; margin-bottom: var(--s1); }
.ft-item p { color: var(--ink-2); max-width: 60ch; }
.ft-shot { margin: var(--s3) 0 0; }
.ft-shot img { display: block; max-width: 100%; height: auto; border: var(--hair) solid var(--line); border-radius: var(--r-sm); }
@media (min-width: 48rem) { .ft-lead { grid-template-columns: 1fr 1fr; } }

.about-h { font-size: var(--t-lg); font-weight: 650; margin: var(--s5) 0 var(--s2); }

.docs-toc { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.docs-sec { margin-top: var(--s6); scroll-margin-top: var(--s6); min-width: 0; }
.docs-sec h2 { font-size: var(--t-xl); font-weight: 680; margin-bottom: var(--s2); }
.docs-sec h3 { font-size: var(--t-base); font-weight: 620; margin: var(--s4) 0 var(--s2); }
.docs-sec p, .docs-sec ul { color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s2); overflow-wrap: anywhere; }
.docs-sec .help-steps { max-width: 62ch; }
.docs-sec .code { max-width: 100%; }
.docs-sec :not(pre) > code { font-size: 0.92em; background: var(--surface-2); padding: 0.05em 0.35em; border-radius: var(--r-sm); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- support chat widget */

.sc { position: fixed; inset-inline-end: var(--s4); bottom: var(--s4); z-index: 40; max-width: calc(100vw - 2 * var(--s4)); }
.sc-open { box-shadow: var(--shadow-pop); border-radius: var(--r-pill); }
.sc-panel {
  position: fixed; inset: 0; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); color: var(--ink);
}
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--hair) solid var(--line); }
.sc-title { font-size: var(--t-base); font-weight: 650; min-width: 0; }
.sc-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); background: var(--bg); }
.sc-log:focus-visible { outline: none; box-shadow: inset var(--ring); }
.sc-note { align-self: center; max-width: 100%; text-align: center; font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.sc-msg { display: grid; gap: var(--s1); max-width: 85%; min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--r-lg); border: var(--hair) solid var(--line); }
.sc-me { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.sc-them { align-self: flex-start; background: var(--surface); }
.sc-who { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.sc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.sc-chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-self: flex-start; max-width: 100%; }
.sc-chip { min-height: 2.25rem; max-width: 100%; padding: var(--s1) var(--s3); border: var(--hair) solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); text-align: start; overflow-wrap: anywhere; cursor: pointer; }
.sc-chip:hover { background: var(--accent-soft); }
.sc-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.sc-chip-person { border-style: dashed; }
.sc-phone { display: grid; gap: var(--s1); padding: var(--s3); border-top: var(--hair) solid var(--line); background: var(--warn-soft); }
.sc-phone label { font-size: var(--t-sm); font-weight: 550; }
.sc-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sc-row input { flex: 1 1 8rem; min-width: 0; }
.sc-hint { font-size: var(--t-xs); color: var(--ink-2); }
.sc-error { font-size: var(--t-sm); color: var(--danger); padding: 0 var(--s3); }
.sc-error:empty, .sc-phone .sc-error:empty { display: none; }
.sc-phone .sc-error { padding: 0; }
.sc-compose { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); padding: var(--s3); border-top: var(--hair) solid var(--line); }
.sc-compose textarea { flex: 1 1 8rem; min-width: 0; min-height: 2.75rem; resize: none; }
.sc-panel > .sc-error { padding-bottom: var(--s3); }
/* honeypot field: clipped to nothing and out of the tab order, not display:none (some bots skip hidden fields) */
.sc .sc-compose input.sc-hp { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
@media (min-width: 40rem) {
  .sc-panel {
    inset-block: auto var(--s4); inset-inline: auto var(--s4); width: 24rem; height: min(34rem, calc(100vh - 2 * var(--s4)));
    border: var(--hair) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden;
  }
}
.ct-open { margin-top: var(--s4); }

/* ---------------------------------------------------------------- admin support */

.sup-list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.sup-row {
  display: grid; gap: var(--s1); padding: var(--s3) var(--s4); color: inherit; text-decoration: none;
  background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r);
}
.sup-row:hover { background: var(--surface-2); }
.sup-row:focus-visible { box-shadow: var(--ring); outline: none; }
.sup-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sup-when { margin-left: auto; font-size: var(--t-sm); }
.sup-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-sm); }
.sup-last { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.sup-log {
  display: grid; gap: var(--s2); max-height: 28rem; overflow-y: auto; padding: var(--s3); margin-bottom: var(--s4);
  background: var(--surface-2); border: var(--hair) solid var(--line); border-radius: var(--r);
}
.sup-msg { padding: var(--s2) var(--s3); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); max-width: 40rem; }
.sup-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.sup-staff { background: var(--accent-soft); justify-self: end; }
.sup-ai { justify-self: end; }
.sup-system { background: transparent; border-style: dashed; color: var(--ink-3); }
.sup-others { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); font-size: var(--t-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .sup-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* help search and article contents */
.help-search { display: flex; gap: var(--s2); margin: var(--s4) 0 var(--s2); max-width: 46rem; }
.help-search input { flex: 1; min-width: 0; }
.help-hit { font-size: var(--t-sm); }
.help-results[hidden], #help-browse[hidden] { display: none; }
.help-layout { display: grid; gap: var(--s4); }
.help-main { min-width: 0; max-width: 46rem; }
.help-toc { border: var(--hair) solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: var(--s3) var(--s4); align-self: start; }
.help-toc h2 { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; margin-bottom: var(--s2); }
.help-toc ol { list-style: none; padding: 0; display: grid; gap: var(--s1); }
.help-toc a { display: block; padding: var(--s1) 0; font-size: var(--t-sm); }
.help-section { scroll-margin-top: 5rem; }
@media (min-width: 64rem) {
  .help-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s6); }
  .help-toc { grid-column: 1; grid-row: 1; position: sticky; top: 5.5rem; }
  .help-main { grid-column: 2; grid-row: 1; }
}

/* help topic tiles */
.help-tiles { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; max-width: none; }
.help-tiles li { display: flex; }
.help-tile { display: flex; flex-direction: column; gap: var(--s1); width: 100%; padding: var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; }
.help-tile:hover { background: var(--surface-2); border-color: var(--ink-3); }
.help-tile:focus-visible { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
.help-tile svg { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-bottom: var(--s1); }
.help-tile span { color: var(--ink-2); font-size: var(--t-sm); }
.help-tile em { font-style: normal; color: var(--ink-3); font-size: var(--t-xs); margin-top: auto; padding-top: var(--s2); }
.help-topic[id] { scroll-margin-top: 5rem; }
@media (min-width: 40rem) { .help-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .help-tiles { grid-template-columns: repeat(4, 1fr); } }
.lp-narrow > #help-browse { max-width: none; }

/* ---------------------------------------------------------------- Arabic and right-to-left */

html[lang="ar"] { --font: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
/* Arabic letters join, so negative tracking breaks words apart; Arabic also needs more line height. */
html[lang="ar"] :is(h1, h2, h3, strong, summary, .lp-display, .lp-h2) { letter-spacing: normal; }
html[lang="ar"] .lp-display { line-height: 1.3; }
html[lang="ar"] .lp-h2 { line-height: 1.4; }
/* Code, API examples and paths read left to right on every page. */
pre, pre.code { direction: ltr; text-align: left; }
[dir="rtl"] :not(pre) > code { direction: ltr; unicode-bidi: isolate; }
/* Arrows point the way the page reads. */
[dir="rtl"] .lp-answer-link .icon, [dir="rtl"] .icon-flip { transform: scaleX(-1); }
.lp-lang:lang(ar) { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }

/* ---------------------------------------------------------------- gloss (public pages) */

:root {
  --gloss-hi: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --gloss-shadow: 0 1px 2px rgb(16 40 30 / 0.06), 0 10px 30px -8px rgb(16 40 30 / 0.16);
  --glass: rgb(255 255 255 / 0.72);
  --glass-line: rgb(255 255 255 / 0.85);
}

body.lp {
  background:
    radial-gradient(60rem 32rem at 85% -8rem, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(48rem 28rem at -10% 18rem, rgb(120 190 255 / 0.14), transparent 70%),
    linear-gradient(180deg, #fbfbf8 0%, var(--bg) 40rem);
  background-attachment: fixed;
}
body.lp .lp { background: transparent; }

.lp-nav {
  background: rgb(255 255 255 / 0.68);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border-bottom-color: rgb(0 0 0 / 0.06);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 6px 20px -12px rgb(0 0 0 / 0.18);
}
.lp-nav.js .lp-links { background: rgb(255 255 255 / 0.94); }
@media (min-width: 48rem) { .lp-nav.js .lp-links { background: none; } }

.btn {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 100%);
  box-shadow: var(--gloss-hi), 0 1px 2px rgb(0 0 0 / 0.06);
}
.btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #ffffff) 0%, var(--accent) 55%, var(--accent-active) 100%);
  border-color: var(--accent-active);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
}
.btn-primary:hover {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #ffffff) 0%, var(--accent-hover) 55%, var(--accent-active) 100%);
}
.btn-primary:active { background-image: none; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2); }
.btn-quiet { background-image: none; box-shadow: none; }
.btn:focus-visible { box-shadow: var(--ring); }

.lp-display {
  background: linear-gradient(120deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 85%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lp-plan, .help-tile, .chat, .sc-panel {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), var(--glass));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgb(0 0 0 / 0.07);
  box-shadow: var(--gloss-hi), var(--gloss-shadow);
}
.lp-plan-lead {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--gloss-hi), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.help-tile:hover { background: #ffffff; border-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-2px); }
.help-tile { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }

.chat-head, .sc-head {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #ffffff), var(--accent) 60%, var(--accent-active));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.sc-head { color: var(--accent-ink); border-bottom-color: transparent; }
.sc-head .btn { color: var(--accent-ink); }
.sc-head .btn:hover { background: rgb(255 255 255 / 0.15); }
.bubble-in, .sc-them { box-shadow: 0 1px 1px rgb(0 0 0 / 0.04); }
.bubble-out, .sc-me {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 1px 1px rgb(0 0 0 / 0.04);
}
.sc-open { box-shadow: var(--gloss-hi), 0 10px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent); }

.lp-answer-img { box-shadow: var(--gloss-shadow); border-color: rgb(0 0 0 / 0.07); }

@media (prefers-reduced-transparency: reduce) {
  .lp-nav, .lp-plan, .help-tile, .chat, .sc-panel { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .lp-display { color: CanvasText; background: none; }
}

/* ---------------------------------------------------------------- chat (WhatsApp-style) */
/* Phone: one view at a time. 48rem: list + conversation, ready-made as a side sheet.
   80rem (64rem of content once the 15rem menu is a column): three columns. */

.main.main-chat { max-width: none; padding: var(--s3) var(--s3) var(--s3); }
.ch {
  --ch-top: 8rem;
  display: grid; grid-template-columns: minmax(0, 1fr);
  height: calc(100dvh - var(--ch-top) - var(--s3)); min-height: 26rem;
  background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.ch-list, .ch-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-open .ch-list { display: none; }
.ch:not(.ch-open) .ch-conv { display: none; }

.ch-avatar {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}
.ch-avatar .icon { width: 1.15rem; height: 1.15rem; }

/* list */
.ch-list-head { display: grid; gap: var(--s2); padding: var(--s3); border-bottom: var(--hair) solid var(--line); }
.ch-list-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.ch-title { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.ch-search { position: relative; }
.ch .ch-search input[type="search"] { min-height: 2.5rem; padding-inline-start: 2.25rem; border-radius: var(--r-pill); background: var(--bg); }
.ch-search-icon { position: absolute; inset-inline-start: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-3); display: flex; pointer-events: none; }
.ch-chips { gap: var(--s1); }
.ch-chips .chip { min-height: 1.875rem; }
.ch-rows { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
.ch-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3); color: var(--ink); text-decoration: none; border-bottom: var(--hair) solid var(--line);
  transition: background var(--dur) var(--ease);
}
.ch-row:hover { background: var(--row-hover); color: var(--ink); }
.ch-row:focus-visible { outline-offset: calc(var(--outline) * -1); }
.ch-row.is-active { background: var(--accent-soft); }
.ch-row.is-active .ch-avatar { background: var(--surface); }
.ch-row-main { display: grid; gap: 2px; min-width: 0; }
.ch-row-top, .ch-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0; }
.ch-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row-time { flex: none; color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; }
.ch-row-time.is-unread { color: var(--accent); font-weight: 650; }
.ch-row-preview { color: var(--ink-2); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.ch-row-via { color: var(--ink-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
.ch-empty { margin: var(--s4) var(--s3); color: var(--ink-2); font-size: var(--t-sm); }

/* conversation */
.ch-conv { background: var(--bg); }
.ch-head {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  background: var(--surface); border-bottom: var(--hair) solid var(--line);
}
.ch-back { flex: none; padding-inline: var(--s2); }
.ch-head-text { min-width: 0; flex: 1; }
.ch-head-title { font-size: var(--t-base); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-head-sub { color: var(--ink-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-banner { margin: var(--s2) var(--s3) 0; padding: var(--s2) var(--s3); font-size: var(--t-sm); }
.ch-banner > span { flex: 1 1 14rem; min-width: 0; }

.ch-thread {
  list-style: none; margin: 0; padding: var(--s3); flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s2);
}
.ch-day { align-self: center; margin: var(--s2) 0; }
.ch-day span {
  display: inline-block; padding: 2px var(--s3); border-radius: var(--r-pill);
  background: var(--surface); border: var(--hair) solid var(--line); color: var(--ink-2); font-size: var(--t-xs); font-weight: 560;
}
.ch-msg { display: grid; max-width: min(85%, 38rem); min-width: 0; }
.ch-in { align-self: flex-start; justify-items: start; }
.ch-out { align-self: flex-end; justify-items: end; }
.ch-bubble {
  padding: var(--s2) var(--s3); border-radius: var(--r-lg); border: var(--hair) solid var(--line);
  background: var(--surface); box-shadow: 0 1px 1px rgb(0 0 0 / 0.04); min-width: 0; max-width: 100%;
}
.ch-in .ch-bubble { border-end-start-radius: 4px; }
.ch-out .ch-bubble {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); border-end-end-radius: 4px;
}
.ch-bubble .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 2px var(--s1) 0;
  color: var(--ink-3); font-size: var(--t-xs); line-height: 1.4;
}
.ch-by { font-weight: 600; color: var(--ink-2); }
.ch-tick { display: inline-flex; margin-inline-start: var(--s1); color: var(--ink-3); }
.ch-tick .icon { width: 1rem; height: 1rem; }
.ch-tick-read { color: var(--accent); }
.ch-tick-failed { color: var(--danger); }
.ch-error { color: var(--danger); font-size: var(--t-xs); margin: 0 var(--s1); overflow-wrap: anywhere; }

.ch-typing { margin: 0; padding: var(--s1) var(--s4); color: var(--accent); font-size: var(--t-sm); font-weight: 560; }
.ch-note { margin: 0; padding: var(--s3); background: var(--surface); border-top: var(--hair) solid var(--line); }
.ch-send-error { margin: 0 var(--s3) var(--s2); font-size: var(--t-sm); }

.ch-composer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--s2);
  padding: var(--s2) var(--s3); background: var(--surface); border-top: var(--hair) solid var(--line);
}
.ch-tools { display: flex; align-items: end; gap: var(--s1); }
.ch-composer:not(:has(.ch-tools > :not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; }
.ch-composer:not(:has(.ch-tools > :not([hidden]))) .ch-tools { display: none; }
.ch-tool, .ch-attach, .ch-send { min-width: 2.75rem; padding-inline: var(--s2); border-radius: var(--r-pill); }
.ch-attach-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); background: var(--surface); border-top: var(--hair) solid var(--line); font-size: var(--t-sm);
}
.ch.js .ch-attach-form { display: none; }
.ch-photo { display: block; margin: calc(var(--s1) * -1) calc(var(--s2) * -1) var(--s1); }
.ch-photo:last-child { margin-bottom: calc(var(--s1) * -1); }
.ch-photo img {
  display: block; max-width: min(100%, 18rem); max-height: 20rem; width: auto; height: auto;
  border-radius: calc(var(--r-lg) - 4px); object-fit: cover; background: var(--line);
}
.ch-file {
  display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; margin-bottom: var(--s1);
  padding: var(--s2) var(--s3); border-radius: var(--r); border: var(--hair) solid var(--line);
  background: var(--bg, transparent); color: var(--ink); font-size: var(--t-sm); font-weight: 560; text-decoration: none;
}
.ch-file:last-child { margin-bottom: 0; }
.ch-file:hover { border-color: var(--accent); }
.ch-file span { overflow-wrap: anywhere; }
.ch-file .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--accent); }
.ch-input { position: relative; min-width: 0; }
.ch-input textarea {
  display: block; width: 100%; min-height: 2.75rem; max-height: 10.5rem; resize: none; overflow-y: auto;
  border-radius: 1.375rem; padding: var(--s2) var(--s4); line-height: 1.5;
}
.ch-hint { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: var(--t-xs); display: none; }
.ch-slash {
  position: absolute; inset-inline: 0; bottom: calc(100% + var(--s1)); z-index: 6;
  list-style: none; margin: 0; padding: var(--s1); max-height: 14rem; overflow-y: auto;
  background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.ch-slash li { padding: var(--s2) var(--s3); border-radius: var(--r); cursor: pointer; font-size: var(--t-sm); overflow-wrap: anywhere; }
.ch-slash li[aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }

.ch-placeholder { margin: auto; padding: var(--s5); text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: var(--s2); max-width: 34ch; }
.ch-placeholder-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.ch-placeholder-icon .icon { width: 1.5rem; height: 1.5rem; }

/* ready-made: a bottom sheet on phones, a side sheet in the middle, a column when wide */
.ch-ready { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 0; padding: var(--s3); background: var(--surface); }
.ch:not(.js) .ch-ready { display: none; }
.ch-ready-head { display: flex; align-items: center; gap: var(--s2); }
.ch-ready-title { font-size: var(--t-base); font-weight: 650; margin-inline-end: auto; }
.ch .ch-ready-q[type="search"] { min-height: 2.25rem; border-radius: var(--r-pill); background: var(--bg); }
.ch-ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.ch-ready-item {
  display: grid; gap: 2px; width: 100%; padding: var(--s2) var(--s3); text-align: start;
  font: inherit; color: var(--ink); background: var(--surface); cursor: pointer;
  border: var(--hair) solid var(--line); border-radius: var(--r);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ch-ready-item:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ch-ready-item:focus-visible { outline: none; box-shadow: var(--ring); }
.ch-ready-name { font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; }
.ch-ready-body { color: var(--ink-2); font-size: var(--t-xs); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-ready-none { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.ch-ready > .ch-hint { display: block; }
.ch-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.32); }

.ch.js .ch-ready {
  position: fixed; z-index: 50; inset-inline: 0; bottom: 0; max-height: 75dvh;
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 32px rgb(0 0 0 / 0.16);
  transform: translateY(100%); visibility: hidden;
  transition: transform 200ms var(--ease), visibility 0s linear 200ms;
}
.ch.js .ch-ready.is-open { transform: none; visibility: visible; transition: transform 200ms var(--ease); }

/* New chat */
.ch-dialog {
  width: min(32rem, calc(100vw - 2 * var(--s4))); max-height: calc(100dvh - 2 * var(--s4)); padding: 0;
  border: var(--hair) solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.2);
}
.ch-dialog[open]:not(:modal) { position: fixed; inset: var(--s4) 0 auto; margin: 0 auto; z-index: 60; }
.ch-dialog::backdrop { background: rgb(0 0 0 / 0.36); }
.ch-dialog > form { padding: var(--s4); }
.ch-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.ch-dialog-title { font-size: var(--t-lg); font-weight: 650; }
.ch-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); max-height: 12rem; overflow-y: auto; }
.ch-pick-list:empty { display: none; }
.ch-pick-none { color: var(--ink-2); font-size: var(--t-sm); }
.ch-pick-add > summary { cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); }
.ch-pick-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); margin-top: var(--s2); }
.ch-pick-add-row > .field { flex: 1 1 12rem; }
.ch-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }

/* the support button would sit on the composer */
body:has(.ch-open) .sc { display: none; }

@media (min-width: 48rem) {
  .ch { grid-template-columns: clamp(16rem, 34%, 22rem) minmax(0, 1fr); }
  .ch-open .ch-list, .ch:not(.ch-open) .ch-conv { display: flex; }
  .ch-list { border-inline-end: var(--hair) solid var(--line); }
  .ch-back { display: none; }
  .ch-head { padding: var(--s2) var(--s4); }
  .ch-thread { padding: var(--s4) var(--s5); }
  .ch-composer { padding: var(--s3) var(--s4) var(--s2); }
  .ch-hint { display: block; }
  .ch.js .ch-ready {
    inset-inline: auto 0; top: 0; bottom: 0; width: min(22rem, 90vw); max-height: none;
    border-radius: 0; box-shadow: -8px 0 32px rgb(0 0 0 / 0.16); transform: translateX(100%);
  }
}
@media (min-width: 60rem) {
  .main.main-chat { padding: var(--s4) var(--s4) var(--s3); }
}
@media (min-width: 80rem) {
  .ch.ch-has-ready { grid-template-columns: clamp(18rem, 22vw, 22rem) minmax(0, 1fr) 18rem; }
  .ch .ch-ready, .ch:not(.js) .ch-ready, .ch.js .ch-ready {
    position: static; display: flex; transform: none; visibility: visible; box-shadow: none; width: auto;
    border-inline-start: var(--hair) solid var(--line); transition: none;
  }
  .ch .ch-scrim, .ch .ch-ready-close, .ch .ch-tool { display: none !important; }
  .ch-composer:not(:has(.ch-attach:not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-composer:not(:has(.ch-attach:not([hidden]))) .ch-tools { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch.js .ch-ready, .ch.js .ch-ready.is-open { transition: none; }
}

/* ---------------------------------------------------------------- overview */

.attn { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.attn-item {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line); border-radius: var(--r);
  color: var(--ink); text-decoration: none;
}
.attn-item .icon { margin-top: 0.2em; flex: none; }
.attn-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attn-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.attn-warn .icon { color: var(--warn); }
.attn-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.attn-danger .icon { color: var(--danger); }
.attn-item:hover { color: var(--ink); filter: brightness(0.97); }
.attn-item .row-arrow { display: block; margin-top: 0.2em; }

.quick { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }

.ov-grid { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.ov-grid .panel { margin-bottom: 0; min-width: 0; }
.ov-plan { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; }
.ov-line { margin-bottom: var(--s3); }
.ov-kv { display: grid; gap: var(--s2); font-size: var(--t-sm); }
.ov-kv > div { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ov-kv dt { color: var(--ink-3); }
.ov-kv dd { font-variant-numeric: tabular-nums; }

.act { flex-wrap: wrap; }
.act-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 48rem) {
  .ov-grid { grid-template-columns: 3fr 2fr; }
}

/* ---------------------------------------------------------------- ask Waslah AI */

.ask { display: grid; gap: var(--s3); }
.ask-log { min-height: 12rem; max-height: min(32rem, 60vh); border: var(--hair) solid var(--line); border-radius: var(--r-lg); }
.ask-compose { padding: 0; border-top: 0; }
.ask .sc-error { padding: 0; }
.ask-pending .sc-text { color: var(--ink-3); }
.ask-out { margin: 0; }
.ov-ask { margin-top: var(--s5); margin-bottom: var(--s5); }
.ov-ask .sc-compose { padding: 0; border-top: 0; }

/* ---------------------------------------------------------------- menu switches */
.switch-list { list-style: none; margin: 0; padding: 0; display: grid; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: var(--hair) solid var(--line); cursor: pointer; }
.switch-list li:last-child .switch-row { border-bottom: 0; }
input.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.75rem; height: 1.5rem; margin: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--surface, #fff); transition: transform .15s; }
.switch:checked { background: var(--accent, #0a7f5a); }
.switch:checked::after { transform: translateX(1.25rem); }
.switch:focus-visible { outline: 2px solid var(--accent, #0a7f5a); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }