/* ===========================================================================
   kjerr design system — MindMarket reference
   Cream canvas, white elevation, pill geometry, one structural accent.
   No shadows, no gradients: elevation is the cream -> white surface shift.
   =========================================================================== */

:root {
  --cream:    #f5f1e4;   /* page canvas, never white */
  --white:    #ffffff;   /* elevated cards + floating pill nav only */
  --recess:   #e0dbce;   /* recessed surfaces: inputs, wells, track */
  --ink:      #2c2e2a;   /* text, icons, borders — warm near-black */
  --muted:    #80827f;   /* secondary text */
  --hairline: #d5d5d4;   /* dividers */
  --green:    #8ed462;   /* structural accent: strokes, fills of controls */
  --coral:    #ff705d;   /* ONE prominent action per view */
  --blue:     #2ba0ff;   /* decorative only */
  --yellow:   #f5e211;   /* decorative only */

  --r-card: 50px;
  --r-mid:  28px;
  --r-chip: 10px;
  --nav-h:  64px;
  --gutter: 20px;    /* the page's side margin; the phone strips bleed through it */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* accent overrides written by the workspace settings page */
[data-accent="blue"]   { --green: var(--blue); }
[data-accent="yellow"] { --green: var(--yellow); }
[data-accent="ink"]    { --green: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.muted   { color: var(--muted); }
.small   { font-size: 13px; }
.tiny    { font-size: 12px; }
.center  { text-align: center; }
.mono-num { font-variant-numeric: tabular-nums; }
.hidden  { display: none !important; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: -9999px; }   /* off the start edge: never scrollable, in either direction */
.skip-link:focus { inset-inline-start: 16px; top: 16px; background: var(--white); padding: 10px 18px;
  border-radius: var(--r-chip); z-index: 100; }

/* ---------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 620px; }
.wrap-wide { max-width: 1360px; }

.page { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 72px; }

/* -------------------------------------------------------------- pill nav -- */

.nav {
  position: fixed; inset: 14px 0 auto; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
.nav-pill {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 32px); max-width: 1120px;
  height: var(--nav-h);
  padding: 0 10px 0 22px;
  background: var(--white);
  border: 1px solid var(--green);
  border-radius: var(--r-card);
}
.nav-brand { font-size: 17px; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-brand-logo { height: 26px; width: auto; border-radius: 6px; vertical-align: middle; }
.nav-brand-empty { width: 0; }
/* the workspace name: absolutely centred so neither the logo on the left nor
   the links on the right can push it off the middle */
.nav-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: none; }
.nav-link {
  padding: 9px 14px; border-radius: var(--r-card); font-size: 14px; color: var(--ink);
  border: 1px solid transparent; white-space: nowrap;
}
.nav-link:hover { border-color: var(--hairline); }
.nav-link[aria-current="page"] { border-color: var(--green); }
/* language menu: what you see is the globe and the code; the native select
   lies invisibly on top, so the click and the picker are the browser's own */
.nav-lang { position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r-card); border: 1px solid transparent;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.nav-lang:hover, .nav-lang:focus-within { border-color: var(--hairline); }
.nav-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: pointer; font-size: 16px; appearance: none; border: 0; }
.nav-lang noscript .btn { position: relative; margin-inline-start: 4px; }
.nav-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-inline-start: 4px; border-radius: 50%; background: var(--recess);
  border: 1px solid var(--hairline); font-size: 13px; font-weight: 500; color: var(--ink); }
.nav-avatar:hover { border-color: var(--green); text-decoration: none; }
.nav-sep { width: 1px; height: 24px; background: var(--hairline); margin: 0 6px; }
.nav-tabs { display: flex; align-items: center; gap: 2px; margin-inline-start: 14px; min-width: 0; flex: none;
  overflow-x: auto; scrollbar-width: none; }
.nav-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 14px;
  border-radius: var(--r-card); border: 1px solid transparent; color: var(--ink); white-space: nowrap; }
.nav-tab .icon { color: var(--muted); flex: none; }
.nav-tab:hover { border-color: var(--hairline); }
.nav-tab[aria-current="page"] { border-color: var(--green); }
.nav-tab[aria-current="page"] .icon { color: var(--ink); }

/* ----------------------------------------------------------- control room -- */

.cr-h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.cr-h2 { font-size: 22px; }
.cr-section { margin-top: 36px; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cr-stat { display: block; background: var(--white); border: 1px solid transparent;
  border-radius: var(--r-mid); padding: 16px 18px; color: var(--ink); }
a.cr-stat:hover { border-color: var(--green); }
.cr-stat-value { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.cr-stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cr-stat-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cr-table-wrap { overflow-x: auto; background: var(--white); border-radius: var(--r-mid); }
.cr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-table th { text-align: start; font-weight: 500; font-size: 12px; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; padding: 14px 14px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--hairline); }
.cr-table td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cr-table tr:last-child td { border-bottom: 0; }
.cr-table tbody tr:hover td { background: var(--recess); }
.cr-table td.cr-cell-link { padding: 0; }
.cr-table td.cr-cell-link > a { display: block; padding: 12px 14px; min-width: 56px; text-decoration: none; }
.cr-table th.cr-sort a { display: inline-block; padding: 4px 0; border-bottom: 1px dashed var(--hairline); }
.cr-table th.cr-sort a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.cr-table th.cr-sort-on { color: var(--ink); }
.cr-table td.cr-cell-link > a:hover { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
/* one row, one height: the search field, the two dates and the button all
   sit on the same 38px line */
.post-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 auto 16px; max-width: 720px; }
.post-search .search { flex: 1 1 200px; }
.post-search .input { height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-chip); }
.post-search .search .input { padding-inline-start: 36px; }
.post-search .search svg { inset-inline-start: 12px; }
.post-search-date { display: flex; align-items: center; gap: 6px; margin: 0; }
.post-search-date .input { width: auto; }
.post-search .btn { height: 38px; }
.post-comments { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.post-comments .comment + .comment { margin-top: 10px; }
.comment-replies { margin: 8px 0 0; margin-inline-start: 30px; padding-inline-start: 12px; border-inline-start: 2px solid var(--hairline); }
.comment-replies .comment + .comment { margin-top: 8px; }
.comment-reply > summary { cursor: pointer; list-style: none; display: inline-block; margin-top: 4px; }
.comment-reply > summary::-webkit-details-marker { display: none; }
.comment-reply > summary:hover { color: var(--ink); text-decoration: underline; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14px; }
.cr-dl dt { color: var(--muted); }
.cr-dl dd { margin: 0; }
.cr-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.cr-list li + li { margin-top: 6px; }
.cr-danger .btn { border-color: var(--coral); color: var(--coral); }
.cr-danger .btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
@media (max-width: 900px) { .cr-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- surface -- */

.card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 28px 30px;
  border: 1px solid transparent;
}
.card-mid { border-radius: var(--r-mid); padding: 20px 22px; }
.card-outline { border-color: var(--hairline); }
.card-accent { border-color: var(--green); }
.well { background: var(--recess); border-radius: var(--r-mid); padding: 18px 20px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-card);
  border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }

/* the single prominent action per view */
.btn-primary { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-quiet { border-color: var(--hairline); color: var(--muted); }
.btn-quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- inputs -- */

.field { display: block; margin-bottom: 16px; }
.label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.input, .textarea, .select {
  width: 100%; background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-mid);
  padding: 13px 18px; font-size: 15px;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.55; border-radius: var(--r-mid); }
/* The idea's own text in the inbox pane: tall enough to read it all, no inner scrollbar.
   field-sizing does it natively; app.js sizes it from scrollHeight elsewhere. */
.textarea.js-autogrow { field-sizing: content; overflow: hidden; resize: none; max-height: none; }
/* a title: wraps like a heading instead of scrolling sideways in a one-line input */
.textarea.js-oneline { min-height: 0; padding-top: 6px; padding-bottom: 6px; line-height: 1.3;
  border-radius: var(--r-chip); overflow-wrap: anywhere; }
.select { appearance: none; padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232c2e2a' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center; }
.input-sunken { background: var(--recess); border-color: transparent; }
.field-error { color: var(--ink); font-size: 13px; margin-top: 6px; }
.field-error::before { content: "— "; }
.input-invalid { border-color: var(--coral); }

.search { position: relative; }
.search .input { padding-inline-start: 42px; }
.search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------------------- chips -- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-chip); border: 1px solid var(--hairline);
  padding: 3px 9px; font-size: 12px; line-height: 1.6; color: var(--ink);
  background: transparent; white-space: nowrap;
}
.chip-ink { border-color: var(--ink); }
.chip-solid { background: var(--recess); border-color: transparent; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
/* Status chips are typographic, not colour-coded: the accents are not a
   semantic system. Weight and border carry the difference. */
/* Status chips take their colour from --sc, set inline from Settings → Statuses. */
.status-chip { display: inline-flex; align-items: center; gap: 6px; border-color: var(--sc, var(--hairline)); }
.status-chip-solid { background: var(--sc); border-color: var(--sc); color: #fff; }
.status-chip-solid .status-dot { background: #fff; }
.status-chip-lg { font-size: 13px; padding: 4px 11px; }
.status-chip-unknown { color: var(--muted); }
.status-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc, var(--muted)); }

.tag-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-chip);
  border: 1px dashed var(--hairline); padding: 3px 9px; font-size: 12px; color: var(--muted); }
a.tag-chip:hover { border-color: var(--ink); color: var(--ink); }
.tag-editor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 0; }
.tag-editor-chips:empty { display: none; }
.tag-chip-x { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; }
.tag-chip-x:hover { color: var(--ink); }

/* ------------------------------------------------------------ vote pill --- */

.vote {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; padding: 8px 10px; gap: 1px;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--white); cursor: pointer; color: var(--ink);
  transition: border-color .12s ease, background-color .12s ease;
}
.vote:hover { border-color: var(--ink); }
.vote[data-voted="1"] { border-color: var(--green); background: var(--white); }
.vote[data-voted="1"] .vote-caret { color: var(--green); }
.vote-caret { font-size: 11px; line-height: 1; }
.vote-count { font-size: 17px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vote-label { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }

/* ------------------------------------------------------------- idea list -- */

.board-grid { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.sidebar { position: sticky; top: calc(var(--nav-h) + 28px);
  max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
.sidebar-title { font-size: 12px; color: var(--muted); padding: 0 14px 8px; letter-spacing: .04em;
  text-transform: uppercase; }
.sidebar-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-card); border: 1px solid transparent; font-size: 14px; }
.sidebar-item[aria-current="page"] { background: var(--white); border-color: var(--green); }
.sidebar-item:hover { border-color: var(--hairline); }
.sidebar-group + .sidebar-group { margin-top: 22px; }
.sidebar-box { margin-top: 22px; padding: 14px 6px 6px; background: var(--white);
  border: 1px solid var(--hairline); border-radius: 14px; }
.sidebar-box .sidebar-item { padding: 8px 10px; font-size: 13px; border-radius: var(--r-chip); }
.sidebar-box .sidebar-item[aria-current="page"] { background: var(--cream); }
.topic-filter .truncate { font-style: italic; padding-inline-end: 3px; }   /* room for the slant of the last letter */

.idea-list { display: flex; flex-direction: column; gap: 10px; }
.idea-row {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 1px solid transparent; border-radius: var(--r-mid);
  padding: 18px 22px;
}
.idea-row:hover { border-color: var(--green); }
.idea-title { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
.idea-snippet { color: var(--muted); font-size: 14px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.idea-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); }
.meta-when { white-space: nowrap; }   /* the count and the date stay on one line */

.sort-bar { display: flex; align-items: center; gap: 6px; }
.sort-bar-cats { margin-bottom: 14px; flex-wrap: wrap; }
.board-tools { margin-bottom: 14px; flex-wrap: wrap; gap: 12px; }
.board-tools .search { min-width: 220px; }
/* Suggest an idea: the whole form on a desktop; on a phone one button that
   unfolds it (the :target rules in the phone block below) */
.submit-card { margin-bottom: 24px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.submit-open { display: none; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.sort-opt { padding: 7px 14px; border-radius: var(--r-card); border: 1px solid transparent;
  font-size: 13px; color: var(--muted); cursor: pointer; }
.sort-opt[aria-current="true"] { border-color: var(--green); color: var(--ink); background: var(--white); }

/* --------------------------------------------------- duplicate suggester -- */

.similar { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.similar-head { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.similar-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--r-chip); border: 1px solid var(--hairline); margin-bottom: 6px; }
.similar-item:hover { border-color: var(--green); }
.similar-item .grow { font-size: 14px; }

/* -------------------------------------------------------------- comments -- */

/* Settings -> Appearance -> Text size: the board's reading text scales, the
   chrome (chips, bylines, buttons) does not. Only board pages carry data-text. */
:root { --text-scale: 1; }
html[data-text="small"] { --text-scale: .9; }
html[data-text="large"] { --text-scale: 1.15; }
html[data-text="xlarge"] { --text-scale: 1.3; }
.idea-h1 { font-size: calc(28px * var(--text-scale)); margin-bottom: 10px; overflow-wrap: anywhere; }
.idea-head { align-items: flex-start; gap: 18px; }
.idea-text { margin-top: 20px; }
/* an idea the team translated into the visitor's language: a quiet line under the text says so,
   and opens to the words the author wrote */
.tr-source { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--hairline); font-size: 13px; }
.tr-comment { margin-top: 8px; padding-top: 8px; }
.tr-comment .comment-body { margin-top: 8px; }
.tr-source > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.tr-source > summary::-webkit-details-marker { display: none; }
.tr-source-mark { display: inline-flex; align-items: center; gap: 5px; }
.tr-source-mark .icon { width: 13px; height: 13px; }
.tr-source-open { text-decoration: underline; text-underline-offset: 2px; }
.tr-source > summary:hover .tr-source-open { color: var(--ink); }
.tr-source[open] .tr-source-open { display: none; }
.tr-source-title { font-size: calc(17px * var(--text-scale)); font-weight: 500; margin: 12px 0 0; overflow-wrap: anywhere; }
.tr-source-text { margin-top: 10px; }
.idea-fields { margin-top: 18px; display: grid; gap: 12px; }
.idea-field dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.idea-field dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-page .idea-field dd { font-size: calc(15px * var(--text-scale)); }
.idea-page .idea-text, .idea-page .comment-body { font-size: calc(15px * var(--text-scale)); }
.comment { padding: 16px 0; border-top: 1px solid var(--hairline); }
.comment:first-child { border-top: none; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.comment-author { font-weight: 600; }
.comment-title { font-weight: 600; color: var(--muted); }
.idea-author { font-weight: 600; }
.comment-body { white-space: pre-wrap; word-wrap: break-word; }
/* the visitor's own comment: Edit opens the box in place, Delete sits beside Save */
.comment-own { margin-block-start: 6px; }
.comment-own > summary { display: inline-block; cursor: pointer; list-style: none; }
.comment-own > summary::-webkit-details-marker { display: none; }
.comment-own > summary:hover { color: var(--ink); text-decoration: underline; }
.comment-own[open] > summary { margin-block-end: 8px; }
.comment-own .textarea { min-height: 90px; }
.comment-own-actions { display: flex; gap: 8px; margin-block-start: 8px; align-items: center; }
.comment-own-actions .comment-delete { margin-inline-start: auto; }
.comment-admin { background: var(--white); border: 1px solid var(--green); border-radius: var(--r-mid);
  padding: 18px 20px; margin: 14px 0; }
.comment-admin .comment-head { color: var(--ink); }
.comment-internal { background: var(--recess); border-radius: var(--r-mid); padding: 16px 18px;
  margin: 12px 0; border: 1px dashed var(--muted); }

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

.inbox { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 18px;
  align-items: start; }
.inbox-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 190px);
  overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
.inbox-row { display: block; background: var(--white); border: 1px solid transparent;
  border-radius: var(--r-mid); padding: 14px 18px; cursor: pointer; text-align: start; width: 100%; }
.inbox-row:hover { border-color: var(--hairline); }
.inbox-row[aria-selected="true"] { border-color: var(--green); }
.inbox-more { display: block; text-align: center; padding: 14px; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--hairline); border-radius: var(--r-chip); }
.inbox-more:hover { color: var(--ink); border-color: var(--ink); }
.inbox-row-title { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 4px; }
.inbox-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
  flex-wrap: wrap; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.detail { position: sticky; top: calc(var(--nav-h) + 24px); }
.detail-empty { color: var(--muted); text-align: center; padding: 80px 20px; }
.status-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.status-opt { padding: 6px 12px; border-radius: var(--r-chip); border: 1px solid var(--hairline);
  font-size: 13px; cursor: pointer; background: transparent; }
.status-opt:hover { border-color: var(--ink); }
.status-opt { display: inline-flex; align-items: center; gap: 6px; }
.status-opt[aria-pressed="true"] { border-color: var(--sc, var(--ink)); background: var(--sc, var(--ink)); color: #fff; }
.status-opt[aria-pressed="true"] .status-dot, .status-opt[aria-pressed="true"] .kbd { background: #fff; color: var(--ink); }
.kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--hairline);
  border-radius: 6px; font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.tabs { display: flex; gap: 4px; }
.tab { padding: 7px 14px; border-radius: var(--r-card); font-size: 13px; color: var(--muted);
  border: 1px solid transparent; cursor: pointer; }
.tab[aria-current="page"] { background: var(--white); border-color: var(--green); color: var(--ink); }

/* -------------------------------------------------------------- settings -- */

.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--nav-h) + 28px); }
.settings-group { margin-bottom: 18px; }
.settings-group-title { font-size: 12px; color: var(--muted); padding: 0 14px 6px;
  letter-spacing: .04em; text-transform: uppercase; }
.settings-link { display: block; padding: 9px 14px; border-radius: var(--r-card);
  border: 1px solid transparent; font-size: 14px; color: var(--ink); white-space: nowrap; }
.settings-link:hover { border-color: var(--hairline); }
.settings-link[aria-current="page"] { background: var(--white); border-color: var(--green); }
.settings-main { max-width: 720px; min-width: 0; }
.settings-h1 { font-size: 30px; margin-bottom: 6px; }
.settings-sub { color: var(--muted); margin-bottom: 20px; }
.settings-main .card + .card, .settings-main .card + form.card, .settings-main form.card + .card,
.settings-main form.card + form.card { margin-top: 16px; }

/* screenshots on ideas and comments */
.shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shots:empty { display: none; }
.shot { position: relative; margin: 0; width: 132px; max-width: 100%; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--recess); }
.shot-pending { height: 96px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--hairline); border-radius: 8px; }
.shot-x { position: absolute; top: -6px; inset-inline-end: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--white); color: var(--ink); font-size: 14px;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.shot-remove { margin: 0; }
.shot-file { width: auto; max-width: 260px; }
.file-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-chip); background: var(--white); color: var(--ink);
  font-size: 13px; text-decoration: none; cursor: default; }
a.file-chip { cursor: pointer; }
a.file-chip:hover { border-color: var(--ink); text-decoration: none; }
.file-chip svg { flex: none; color: var(--muted); }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-size { flex: none; color: var(--muted); font-size: 12px; margin-inline-start: 4px; }
.shots { align-items: flex-start; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(44, 46, 42, .82); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0;
  background: var(--white); border: 1px solid rgba(255, 255, 255, .25); }
.lightbox-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .35); color: #fff; font-size: 22px;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shot a { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.shots-field { margin: 0 0 16px; }
.shots-field .shots { margin: 0 0 8px; }
.shots-add { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; margin: 0; }
.shots-add input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.shots-add:focus-within .shots-add-btn { outline: 2px solid var(--green); outline-offset: 2px; }
.shots-over .shots-add-btn { border-color: var(--green); }

/* ideas folded into this one (idea pane) */
.merged-srcs { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.merged-src + .merged-src { margin-top: 6px; }
.merged-src a { font-size: 14px; }

/* merge preview (idea pane) */
.merge-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-chip); }
.merge-sides { display: flex; align-items: stretch; gap: 8px; }
.merge-side { flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: var(--r-chip); background: var(--recess); }
.merge-side-main { background: var(--white); border: 1px solid var(--green); }
.merge-side-title { font-weight: 500; font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.merge-arrow { align-self: center; color: var(--muted); font-size: 18px; }
@media (max-width: 720px) {
  .merge-sides { flex-direction: column; }
  .merge-arrow { transform: rotate(90deg); align-self: center; }
}

/* team list */
.member { display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.member:first-child { border-top: 0; padding-top: 0; }
.member:last-child { padding-bottom: 0; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--recess);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 500;
  font-size: 15px; color: var(--ink); }
.member-name { font-weight: 500; font-size: 15px; }
.member-title { color: var(--muted); font-weight: 400; }
.member-email { color: var(--muted); font-size: 13px; }
/* editable name + job title: read as text, become a field on hover/focus */
.member-edit { min-width: 0; }
.member-fields { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-field { font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-chip, 8px); padding: 2px 6px; margin-inline-start: -7px; min-width: 0;
  transition: border-color .12s, background-color .12s; }
.member-field-name { font-weight: 500; font-size: 15px; width: 12em; max-width: 100%; }
.member-field-title { font-size: 13px; color: var(--muted); width: 14em; max-width: 100%; margin-inline-start: 0; }
.member-field::placeholder { color: var(--muted); opacity: .8; }
.member-field:hover { border-color: var(--hairline); }
.member-field:focus { outline: none; border-color: var(--green); background: var(--white);
  color: var(--ink); }
.member-field.input-invalid { border-color: var(--coral); }
.member-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.select-inline { width: auto; padding: 8px 36px 8px 14px; font-size: 13px;
  background-position: right 14px center; border-radius: var(--r-card); }

/* invite modal: a native <dialog>, so it also renders inline without JS */
.modal { border: 1px solid var(--green); border-radius: var(--r-mid); background: var(--white);
  color: var(--ink); padding: 28px 30px; width: min(640px, calc(100% - 32px)); margin: auto; }
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(44, 46, 42, .35); }
.modal h2 { font-size: 24px; margin-bottom: 4px; }
.invite-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 36px; gap: 8px;
  align-items: start; margin-bottom: 8px; }
.invite-row .input, .invite-row .select { padding: 10px 16px; font-size: 14px; }
.invite-row .select { padding-inline-end: 36px; background-position: right 14px center; }
.icon-btn { width: 36px; height: 40px; border: 1px solid transparent; border-radius: var(--r-chip);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.icon-btn:hover { border-color: var(--hairline); color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- roadmap -- */

/* Columns never get narrower than 230px: with six or more statuses on a laptop
   the board scrolls sideways instead of squeezing every card into a tall sliver. */
.roadmap { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(230px, 1fr)); gap: 14px;
  align-items: start; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
  scrollbar-gutter: stable; }
.roadmap-col { scroll-snap-align: start; }
.roadmap-col { background: var(--recess); border-radius: var(--r-mid); padding: 12px; min-height: 240px;
  display: flex; flex-direction: column; }
.roadmap-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 12px; }
.roadmap-col-title { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.roadmap-cards { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.roadmap-card { display: flex; gap: 12px; align-items: flex-start; background: var(--white);
  border: 1px solid transparent; border-radius: 18px; padding: 12px 14px; }
.roadmap-card:hover { border-color: var(--green); }
.roadmap-card .vote { min-width: 48px; padding: 6px 8px; }
.roadmap-card .vote-count { font-size: 15px; }
.roadmap-col-title { display: flex; align-items: center; gap: 8px; }
.roadmap-title { font-size: calc(14px * var(--text-scale)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
/* the way to add an idea from a column: a real button in the accent, not a dashed hint */
.roadmap-add { display: block; text-align: center; padding: 11px 10px; margin-top: 10px; font-size: 14px;
  font-weight: 500; color: var(--ink); background: transparent; border: 1.5px solid var(--green);
  border-radius: var(--r-chip); }
.roadmap-add:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.topic-chip { border-radius: var(--r-chip); border: 1px solid var(--hairline); padding: 2px 9px;
  font-size: 12px; color: var(--ink); background: var(--white); white-space: nowrap; }
a.topic-chip:hover, .topic-chip[aria-current="page"] { border-color: var(--green); }
.topic-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--hairline); border-radius: var(--r-chip); cursor: pointer; background: transparent; }
.topic-opt input { margin: 0; accent-color: var(--ink); }
.topic-opt:has(input:checked) { border-color: var(--ink); background: var(--white); }
/* Topic colours (Settings → Topics → Colour-code topics). Every topic element
   names its colour with data-tc. A workspace that has the switch on gets two
   things from the page shell: data-topic-colors on <html>, and a style block
   mapping each data-tc key to --tc in the step its theme calls for
   (themes.topic_css). Without them nothing here paints, so the switch turns
   all of it off at once. A chip is the colour washed into the card it sits
   on, so it sits in any theme; its text stays ink and a dot carries the
   full colour. */
.topic-dot { display: none; }
[data-topic-colors] .topic-dot[data-tc] { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tc); margin-inline-end: 8px; font-style: normal; }
[data-topic-colors] .topic-chip[data-tc] { color: var(--ink);
  background: color-mix(in srgb, var(--tc) 16%, var(--white));
  border-color: color-mix(in srgb, var(--tc) 45%, var(--white)); }
[data-topic-colors] .topic-chip[data-tc]::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--tc); margin-inline-end: 6px; vertical-align: 1px; }
[data-topic-colors] a.topic-chip[data-tc]:hover,
[data-topic-colors] .topic-chip[data-tc][aria-current="page"] { border-color: var(--tc); }
[data-topic-colors] .topic-opt[data-tc] input { accent-color: var(--tc); }
[data-topic-colors] .topic-opt[data-tc]:has(input:checked) { border-color: var(--tc);
  background: color-mix(in srgb, var(--tc) 16%, var(--white)); }
.topic-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--hairline); }
.topic-row:first-child { border-top: 0; }
.topic-row.dragging { opacity: .4; }
.topic-row.drop-before { border-top: 2px solid var(--green); }
.drag-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 4px;
  user-select: none; touch-action: none; }
.topic-row .input { padding: 8px 14px; font-size: 14px; }
.status-row { flex-wrap: wrap; }
.status-row .grow { min-width: 180px; }
.status-flag { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.status-flag label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.status-flag input { margin: 0; accent-color: var(--ink); }
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop-panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 20; background: var(--white);
  border: 1px solid var(--ink); border-radius: 14px; padding: 12px; min-width: 220px; }
.pop-right .pop-panel { inset-inline-start: auto; inset-inline-end: 0; }
.swatch-current { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--sc);
  outline: 1px solid var(--hairline); outline-offset: 2px; }
.swatches { display: grid; grid-template-columns: repeat(5, 24px); gap: 10px; min-width: 0; }
a.swatch-current { flex: none; }
.topic-palette { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 6px 0 16px 38px; }
.topic-palette.hidden { display: none; }
.swatches-palette { grid-template-columns: repeat(13, 24px); gap: 8px; max-width: 100%; overflow-x: auto;
  padding: 4px; }   /* a row per tone, a column per hue; the padding keeps the checked ring inside */
.swatch { position: relative; width: 24px; height: 24px; }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--sc); }
.swatch input:checked + span { outline: 2px solid var(--sc); outline-offset: 2px; }
.btn-danger { border-color: var(--coral); color: var(--coral); }
.btn-danger:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ------------------------------------------------------------- topic map -- */

/* A rose chart on the left, its key on the right; the two stack on phones.
   Wedge colours are inline (a fixed, validated palette per light/dark card);
   everything else -- gaps, hole, text -- takes the page tokens. */
.tmap { display: grid; grid-template-columns: minmax(240px, 440px) minmax(220px, 400px); gap: 20px 48px;
  align-items: center; justify-content: center; padding: 28px 32px; }
.tmap-chart { min-width: 0; }
.tmap-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmap-wedge { stroke: var(--white); stroke-width: 2; transition: opacity .15s ease; }
.tmap-wedge[data-other] { fill: var(--muted); }
.tmap-svg:hover .tmap-wedge { opacity: .55; }
.tmap-svg:hover .tmap-slice:hover .tmap-wedge { opacity: 1; }
.tmap-link { outline: none; }
.tmap-link:focus-visible .tmap-wedge { stroke: var(--ink); stroke-width: 3; }
.tmap-pct { font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; pointer-events: none; }
.tmap-hole { fill: var(--white); stroke: var(--recess); stroke-width: 6; }
.tmap-total { font-family: var(--font); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; fill: var(--ink); }
.tmap-key { min-width: 0; }
.tmap-key-title { font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 12px; }
.tmap-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tmap-item { display: flex; align-items: flex-start; gap: 12px; }
.tmap-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.tmap-dot-other { background: var(--muted); }
.tmap-text { display: flex; flex-direction: column; min-width: 0; }
.tmap-name { font-size: 16px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; overflow-wrap: anywhere; }
a.tmap-name:hover { text-decoration: underline; }
.tmap-folded { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tmap-folded .topic-chip { background: transparent; }
/* The tick-boxes under the legend: one chip per topic with ideas, dimmed and
   dashed when left out. A ticked chip wears its topic colour only when the
   workspace colour-codes topics, like every other chip. */
.tmap-pick { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.tmap-pick-hint { margin: -6px 0 12px; line-height: 1.45; }
.tmap-pick-all { white-space: nowrap; }
.tmap-pick-boxes { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.tmap-pick-box { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  border: 1px solid var(--hairline); border-radius: var(--r-chip); padding: 4px 10px 4px 8px; font-size: 13px;
  line-height: 1.3; transition: border-color .12s ease, opacity .12s ease; }
.tmap-pick-box:hover { border-color: var(--ink); }
.tmap-pick-box input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.tmap-pick-box input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tmap-pick-n { color: var(--muted); font-size: 12px; }
.tmap-pick-box.is-off { border-style: dashed; opacity: .6; }
.tmap-pick-box.is-off .tmap-pick-name { text-decoration: line-through; text-decoration-color: var(--muted); }
[data-topic-colors] .tmap-pick-box[data-tc]:not(.is-off) { border-color: color-mix(in srgb, var(--tc) 45%, var(--white)); }
[data-topic-colors] .tmap-pick-box[data-tc]:not(.is-off) input { accent-color: var(--tc); }
.tmap-empty { padding: 48px 24px; text-align: center; }

/* --------------------------------------------------------- announcements -- */

.post { border-radius: var(--r-mid); padding: 26px 28px; }
.post + .post { margin-top: 16px; }
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.post-title { font-size: 22px; letter-spacing: -0.025em; margin-bottom: 12px; }
.post-body { font-size: 15px; line-height: 1.6; }
.post-body p { margin: 0 0 12px; }
.post-body h3 { font-size: 17px; margin: 18px 0 8px; }
.post-body ul { margin: 0 0 12px; padding-inline-start: 22px; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-chip); display: block; }
.post-body figure { margin: 14px 0; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body code { background: var(--recess); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.post-body .idea-ref { text-decoration: none; border: 1px solid var(--hairline);
  border-radius: var(--r-chip); padding: 1px 8px; font-size: 13px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post-body .idea-ref::before { content: "▲ "; color: var(--muted); }
.post-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 4px; }
.post-refs .chip { white-space: normal; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline); }
.reaction { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: transparent;
  cursor: pointer; color: var(--ink); }
.reaction:hover { border-color: var(--ink); }
.reaction[aria-pressed="true"] { border-color: var(--green); background: var(--white); }
.reaction-count { font-size: 13px; color: var(--muted); min-width: 0; }
.post-cat-feature { border-color: var(--ink); }
.post-cat-fix { border-style: dashed; }
.post-cat-improvement { }
.post-cat-announcement { background: var(--recess); border-color: transparent; }

/* ---------------------------------------------------------------- switch -- */

.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none;
  cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 26px; background: var(--recess);
  border: 1px solid var(--hairline); transition: background-color .12s ease, border-color .12s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white); border: 1px solid var(--hairline);
  transition: transform .12s ease; }
.switch input:checked + .switch-track { background: var(--ink); border-color: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(18px); border-color: var(--ink); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- notice -- */

.notice { border: 1px solid var(--ink); border-radius: var(--r-mid); padding: 14px 18px;
  margin-bottom: 18px; background: var(--white); font-size: 14px; }
.notice-quiet { border-color: var(--hairline); color: var(--muted); background: transparent; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--cream); padding: 12px 22px; border-radius: var(--r-card);
  font-size: 14px; z-index: 60; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.toast.show { opacity: 1; }

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

.hero { padding: 40px 0 24px; }
.hero h1 {
  font-size: clamp(52px, 11.2vw, 140px);
  font-weight: 500; letter-spacing: -0.06em; line-height: 0.95;
  margin: 0 0 28px; max-width: 14ch;
}
.hero-sub { font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); max-width: 46ch;
  letter-spacing: -0.01em; line-height: 1.45; margin-bottom: 32px; }
.section-h { font-size: clamp(34px, 5.6vw, 81px); font-weight: 500; letter-spacing: -0.05em;
  line-height: 1.0; margin: 0 0 28px; }
.section-h-sm { font-size: clamp(28px, 4.2vw, 53px); }
.section { padding: 72px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feature { background: var(--white); border-radius: var(--r-card); padding: 34px 32px; min-height: 250px;
  display: flex; flex-direction: column; }
.feature-num { font-size: 12px; color: var(--muted); margin-bottom: auto; }
.feature h3 { font-size: 26px; letter-spacing: -0.03em; margin: 24px 0 10px; }
.feature p { color: var(--muted); font-size: 15px; }
.loop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.loop-step { background: var(--white); border: 1px solid var(--green); border-radius: var(--r-card);
  padding: 12px 22px; font-size: 15px; }
.loop-arrow { color: var(--muted); }
.marquee-rule { height: 1px; background: var(--hairline); margin: 0; border: 0; }
.footer { padding: 44px 0 56px; color: var(--muted); font-size: 13px; }

/* landing: previews built from the real components, no screenshots */
.demo { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-mid);
  padding: 14px; margin-top: 8px; }
.demo-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 4px 8px 14px; }
.demo-brand { font-weight: 500; font-size: 15px; letter-spacing: -0.02em; }
.demo-tabs { margin-inline-start: 0; }
.demo-open { margin-inline-start: auto; }
.demo-open:hover, .demo-brand:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-row { background: var(--cream); pointer-events: none; }
.demo-row .idea-title { font-size: 16px; }
.demo-mail { display: flex; flex-direction: column; gap: 2px; margin-top: 12px;
  padding: 14px 18px; border: 1px dashed var(--hairline); border-radius: var(--r-chip); font-size: 14px; }
.demo-mail-from { font-size: 12px; color: var(--muted); }
.demo-mail-subject { font-weight: 500; letter-spacing: -0.01em; }
.demo-filters { flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.dir-list { display: flex; flex-direction: column; }
.dir-row { display: flex; align-items: center; gap: 14px; padding: 12px 8px;
  border-top: 1px solid var(--hairline); }
.dir-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.dir-name { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.dir-company { font-size: 13px; }
.dir-stats { display: flex; gap: 12px; font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ws-demo-list { display: flex; flex-direction: column; gap: 4px; }
.ws-demo-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--r-chip); border: 1px solid transparent; font-size: 15px; }
.ws-demo-item[aria-current="true"] { border-color: var(--green); background: var(--cream); }
.ws-demo-name { font-weight: 500; letter-spacing: -0.01em; flex: 1 1 auto; }
.ws-demo-badge { min-width: 20px; padding: 1px 7px; border-radius: var(--r-chip);
  background: var(--ink); color: var(--cream); font-size: 11px; text-align: center;
  font-variant-numeric: tabular-nums; }
.ws-demo-create { color: var(--muted); border-top: 1px solid var(--hairline); border-radius: 0;
  margin-top: 6px; padding-top: 14px; }
.demo-code { padding: 20px 22px; }
.landing-pre { margin: 0; background: var(--recess); border-radius: var(--r-chip);
  padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px;
  align-items: center; }
.split-flip .split-text { order: 2; }
.split-text .feature-num { margin-bottom: 14px; }
.split-text .section-h { margin-bottom: 18px; }
.split-text p { max-width: 48ch; }
.split-text .link { text-decoration: underline; text-underline-offset: 3px; }
.plain-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 12px; font-size: 15px; }
.plain-list li { color: var(--muted); padding-inline-start: 18px; position: relative; }
.plain-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; border: 1px solid var(--green); }
.plain-list strong { color: var(--ink); font-weight: 500; }
.card-h { font-size: 20px; margin-bottom: 8px; }
.landing-mark { display: block; width: 80px; height: 80px; margin: 0 auto 22px; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 18px 0;
  border-top: 1px solid var(--hairline); font-size: 15px; }
.fact strong { font-weight: 500; }
.fact .muted { font-size: 14px; }


.board-foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--hairline); text-align: center; }
.board-foot a { text-decoration: underline; text-underline-offset: 3px; }
/* the chip floats in the viewport corner, so it stays in sight down a long idea list;
   the footer keeps room under its last line so the chip never sits on the text */
.board-foot-cta { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 30; margin: 0; }
.board-foot-floats { padding-bottom: 56px; }
.board-foot-bare { margin-top: 0; padding-top: 0; border-top: 0; }
/* under the ideas grid the footer belongs to the idea column, not the sidebar */
.board-grid + .board-foot { margin-inline-start: 248px; }
.board-foot .chip-accent { text-decoration: none; background: var(--blue); border-color: var(--blue);
  color: #fff; padding: 7px 15px; font-size: 13px; font-weight: 500; outline: 3px solid var(--cream); }
.board-foot .chip-accent:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.board-foot .chip-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* marketing pages: facts card, faq, pricing, comparison, steps, changelog, footer */
.page-hero { padding: 40px 0 8px; }
.page-hero .feature-num { margin-bottom: 14px; }
.page-hero .section-h { max-width: 18ch; }
.page-hero .hero-sub { max-width: 62ch; }
.facts-card { margin: 0; background: var(--white); border-radius: var(--r-mid); padding: 10px 26px;
  align-self: start; }
.facts-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); font-size: 14px; }
.facts-row:last-child { border-bottom: 0; }
.facts-row dt { color: var(--muted); }
.facts-row dd { margin: 0; }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.faq-item { background: var(--white); border-radius: var(--r-mid); padding: 24px 26px; }
.faq-q { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.faq-a { color: var(--muted); font-size: 15px; margin: 0; line-height: 1.55; }
.faq-a .link, .fact .link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.price-card { background: var(--white); border: 1px solid var(--green); border-radius: var(--r-mid);
  padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.price-card-quiet { border-color: var(--hairline); }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-amount { font-size: clamp(36px, 5vw, 56px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.plain-list.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
.table-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px;
  background: var(--white); border-radius: var(--r-mid); overflow: hidden; }
.compare th, .compare td { text-align: start; vertical-align: top; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline); }
.compare thead th { font-weight: 500; font-size: 15px; }
.compare tbody th { font-weight: 500; color: var(--muted); width: 150px; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare td:last-child { background: var(--cream); }
.steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 14px;
  color: var(--muted); line-height: 1.55; max-width: 64ch; }
.steps strong { color: var(--ink); font-weight: 500; }
.steps-wide { max-width: none; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.steps-wide li { background: var(--white); border-radius: var(--r-mid); padding: 22px 24px; }
.rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rep-tile { background: var(--cream); border-radius: var(--r-chip); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; }
.rep-value { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; }
.site-foot { border-top: 1px solid var(--hairline); margin-top: 24px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-h { color: var(--ink); font-weight: 500; }
.foot-about p { margin: 0; max-width: 48ch; line-height: 1.55; }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .rep-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr; }
  .facts-row { grid-template-columns: 1fr; gap: 2px; }
  .price-card, .faq-item { padding: 22px 20px; }
}

/* ----------------------------------------------------------- responsive -- */

/* Tablets and phones: one column. The board's filters turn into chip strips
   that scroll sideways and bleed through the page gutter, the idea form
   folds into a single button, and the order becomes form, filters, tools,
   ideas -- what a visitor on a phone came for, in that order. */
@media (max-width: 900px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .board-grid + .board-foot { margin-inline-start: 0; }
  .board-main { display: contents; }
  .submit-card { order: -2; margin-bottom: 18px; }
  .sidebar { order: -1; position: static; max-height: none; overflow: visible; min-width: 0;
    margin-bottom: 16px; }
  .sidebar-boards { display: none; }   /* one board, always current: says nothing here */
  .sidebar-group + .sidebar-group { margin-top: 0; }
  .sidebar-group + .sidebar-box, .sidebar-group + .sidebar-group { margin-top: 12px; }
  .sidebar-title { padding: 0 0 6px; }
  .sidebar-list, .sort-bar, .roadmap {
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter); padding-right: var(--gutter);
    scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter); }
  .sidebar-list::-webkit-scrollbar, .sort-bar::-webkit-scrollbar, .roadmap::-webkit-scrollbar { display: none; }
  .sidebar-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .sidebar-item, .sidebar-box .sidebar-item { flex: none; gap: 6px; padding: 7px 12px; font-size: 13px;
    border-radius: var(--r-card); border-color: var(--hairline); background: var(--white); }
  .sidebar-item[aria-current="page"], .sidebar-box .sidebar-item[aria-current="page"] {
    border-color: var(--green); background: var(--white); }
  .sidebar-box { margin-top: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
  .topic-filter .truncate { font-style: normal; }

  /* the form: a button until it is wanted; #submit in the address opens it,
     from the button here or from the roadmap's "+ Suggest an idea" */
  .submit-open { display: flex; height: 48px; background: var(--coral); border-color: var(--coral); color: #fff; }
  .submit-open:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  .submit-card:not(:target) { padding: 0; background: transparent; border-color: transparent; }
  .submit-card:not(:target) .submit-body { display: none; }
  .submit-card:target .submit-open { display: none; }

  .board-tools { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .board-tools .search { min-width: 0; width: 100%; }
  .sort-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .sort-bar-cats { flex-wrap: nowrap; }
  .sort-opt { flex: none; }
  .row-between .sort-bar { width: 100%; }

  /* the "free board" chip stops floating over the ideas and sits in the footer */
  .board-foot-cta { position: static; display: inline-block; margin-top: 12px; }
  .board-foot-floats { padding-bottom: 0; }
  .board-foot-bare .board-foot-cta { margin-top: 0; }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-flip .split-text { order: 0; }
  .demo-filters { margin-inline-start: 0; }
  .dir-stats { display: none; }
  .roadmap { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px;
    scroll-snap-type: x mandatory; }
  .roadmap-col { flex: 0 0 min(82vw, 320px); max-width: 320px; scroll-snap-align: start; }
  .tmap { grid-template-columns: 1fr; padding: 22px 20px; }
  .tmap-chart { max-width: 380px; margin: 0 auto; }
  .settings { grid-template-columns: 1fr; gap: 18px; }
  .settings-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; }
  .settings-group { display: flex; gap: 4px; margin: 0; }
  .settings-group-title { display: none; }
  .settings-link { padding: 8px 14px; font-size: 13px; }
  .invite-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .invite-row .select { grid-column: 1; }
  .invite-row .icon-btn { grid-column: 2; grid-row: 1; }
  .member-actions { margin-inline-start: 52px; width: 100%; }
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { max-height: none; }
  .detail { position: static; }
  .inbox-detail-pane { display: none; }
  body.detail-open .inbox-list, body.detail-open .inbox-col { display: none; }
  body.detail-open .inbox-detail-pane { display: block; }
}

/* Phones: a tighter gutter and nav, mid radii on the cards, full-width
   primary buttons in the forms. */
@media (max-width: 620px) {
  :root { --nav-h: 56px; --gutter: 16px; }
  .page { padding-top: calc(var(--nav-h) + 22px); padding-bottom: 56px; }
  .card { padding: 20px 18px; border-radius: var(--r-mid); }
  .feature { padding: 26px 24px; border-radius: var(--r-mid); min-height: 0; }
  .nav { inset: 10px 0 auto; }
  .nav-pill { padding: 0 8px 0 16px; width: calc(100% - 20px); }
  .nav-center { font-size: 15px; max-width: 38%; }
  .nav-link { padding: 8px 10px; font-size: 13px; }
  .nav-links { gap: 2px; }
  .nav-lang { padding: 8px 8px; }
  .nav-avatar { width: 32px; height: 32px; font-size: 12px; }
  .nav-tabs { margin-inline-start: 6px; }
  .nav-tab { padding: 8px 9px; }
  .nav-tab-label { display: none; }
  .hero { padding: 24px 0 8px; }
  .section { padding: 48px 0; }

  .idea-row { padding: 14px 14px 14px 12px; gap: 12px; }
  .idea-title { font-size: 16px; }
  .idea-row .vote { min-width: 52px; padding: 7px 8px; }
  .idea-meta { gap: 8px; margin-top: 8px; }
  .submit-card:target { padding: 20px 18px; }
  .form-actions .btn-primary { width: 100%; }
  .shots-add .shots-hint { flex-basis: 100%; }

  .idea-page .idea-head { gap: 12px; }
  .idea-h1 { font-size: calc(24px * var(--text-scale)); }
  .status-chip-lg { font-size: 12px; padding: 3px 10px; }
  .comment-admin { padding: 14px 16px; }

  .post { padding: 20px 18px; }
  .post-title { font-size: 20px; }
  .post-search { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .post-search .search { grid-column: 1 / -1; }
  .post-search-date { min-width: 0; }
  .post-search-date .input { width: 100%; min-width: 0; padding: 0 10px; }
  .post-search > .btn { width: 100%; }
  .post-search > .btn:last-child:nth-child(4) { grid-column: 1 / -1; }   /* Search alone spans the row */
  .reaction { padding: 5px 10px; }

  .roadmap-col { flex-basis: min(84vw, 320px); }
  .lightbox { padding: 12px; }
}

@media (max-width: 400px) {
  .nav-lang > span { display: none; }   /* the globe alone; the code is in the picker */
  .nav-lang { padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- right to left -- */
/* Arabic boards: the shell sets dir="rtl" and the logical properties above do
   the rest; only the painted bits that face one way need turning round. */
[dir="rtl"] .select { background-position: left 18px center; }
[dir="rtl"] .invite-row .select { background-position: left 14px center; }
[dir="rtl"] .switch input:checked + .switch-track::after { transform: translateX(-18px); }
/* Tenant text follows its own script, paragraph by paragraph: an English idea
   on an Arabic board reads left to right, an Arabic one on an English board
   right to left, and what people type runs the way they type it. */
.idea-title, .idea-snippet, .roadmap-title, .idea-h1, .comment-body, .post-title, .post-body p,
.post-body li, .wg-item-title, .input, .textarea { unicode-bidi: plaintext; }

/* ------------------------------------------- Settings → Custom domain -- */
/* One card that reads top to bottom: the domain and where it stands, then the
   three steps on a rail. Done steps ring in the structural accent, the step
   being waited on gets an ink ring, later ones stay hairline. */
.dom-h2 { font-size: 20px; margin: 0; }
.dom-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dom-name { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere;
  margin-bottom: 8px; }
.dom-chip .chip-dot { background: var(--hairline); }
.dom-tls .dom-chip { border-color: var(--ink); }
.dom-tls .dom-chip .chip-dot { background: var(--ink); }
.dom-live .dom-chip { border-color: var(--green); border-width: 2px; padding: 2px 8px; }
.dom-live .dom-chip .chip-dot { background: var(--ink); }
.dom-steps { list-style: none; margin: 24px 0 0; padding: 0; }
.dom-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px; padding-bottom: 22px; }
.dom-step:last-child { padding-bottom: 0; }
.dom-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 13.5px;
  top: 30px; bottom: 2px; border-inline-start: 1px solid var(--hairline); }
.dom-step.is-done:not(:last-child)::before { border-inline-start: 2px solid var(--green); }
.dom-tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 500; border: 1px solid var(--hairline); color: var(--muted);
  background: var(--white); }
.dom-step.is-now .dom-tick { border: 2px solid var(--ink); color: var(--ink); }
/* the accent can be ink, yellow or blue: ring it, never fill it, so the tick always reads */
.dom-step.is-done .dom-tick { border: 2px solid var(--green); color: var(--ink); }
.dom-step-title { font-weight: 500; line-height: 28px; }
.dom-step.is-later .dom-step-title { color: var(--muted); }
.dom-step-body p { margin: 4px 0 0; }
.dom-problem { border-inline-start: 3px solid var(--coral); padding: 2px 0 2px 12px; font-size: 14px; }
.dom-record { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px;
  background: var(--cream); border-radius: var(--r-chip); overflow: hidden; }
.dom-record th { text-align: start; font-weight: 400; font-size: 12px; color: var(--muted);
  padding: 10px 14px 4px; }
.dom-record td { padding: 4px 14px 12px; vertical-align: middle; }
.dom-record td:first-child { font-weight: 500; width: 70px; }
.dom-value { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dom-value code { font-size: 13px; overflow-wrap: anywhere; }
.dom-when { margin: 20px 0 0; }
.dom-notes { display: flex; flex-direction: column; gap: 8px; margin: 0; }
@media (max-width: 560px) {
  .dom-record thead { display: none; }
  .dom-record tr { display: grid; grid-template-columns: 1fr; padding: 10px 0; }
  .dom-record td { padding: 2px 14px; width: auto; }
  .dom-record td[data-label]::before { content: attr(data-label); display: block; font-size: 12px;
    color: var(--muted); }
}

/* ------------------------------------------------------- Settings → API -- */
.api-h2 { font-size: 20px; margin: 0 0 4px; }
.api-lede { margin: 0 0 18px; max-width: 64ch; }
.api-reveal { border: 2px solid var(--ink); border-radius: var(--r-mid); padding: 16px 18px; margin-bottom: 18px; }
.api-reveal p { margin: 8px 0 0; }
.api-key-row { gap: 12px; flex-wrap: wrap; align-items: center; }
.api-key-row code { font-size: 13px; word-break: break-all; }
.api-keys, .api-hooks { list-style: none; margin: 0 0 18px; padding: 0; }
.api-key { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
.api-key:last-child { border-bottom: 1px solid var(--hairline); }
.api-key-name { font-weight: 500; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.api-empty { margin: 0 0 18px; }
.api-new { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.api-new .field { margin-bottom: 0; min-width: 220px; }
.api-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.api-ro { padding-bottom: 12px; }
.api-hook { border: 1px solid var(--hairline); border-radius: var(--r-mid); padding: 16px 18px; }
.api-hook + .api-hook { margin-top: 12px; }
.api-hook.is-off .api-hook-url { color: var(--muted); text-decoration: line-through; }
.api-hook-head { display: flex; gap: 12px; align-items: center; }
.api-hook-url { font-size: 13px; word-break: break-all; }
.api-events { border: 0; margin: 12px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.api-events code { font-size: 12px; }
.api-hook-actions { gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.api-log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.api-log li { padding: 3px 0 3px 14px; position: relative; }
.api-log li::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; width: 7px; height: 7px;
  border-radius: 50%; border: 1px solid var(--muted); }
.api-log li.is-ok::before { border: 2px solid var(--green); }
.api-log li.is-bad::before { background: var(--coral); border-color: var(--coral); }
.api-log-state { color: var(--muted); }
.api-log li.is-bad .api-log-state { color: var(--ink); }
.api-rotate { gap: 8px; margin-top: 10px; }
.api-events-ref { margin-top: 16px; }
.api-events-ref .plain-list { margin-top: 10px; }