/* Dark only, as this project asks. The token names and values are the house
   palette; the light half is deliberately not here. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #09090b;
  --text: #fafafa;
  --panel: #1b1d29;
  --panel-2: #252736;
  --panel-border: rgba(255, 255, 255, .09);
  --line: #2f3140;
  /* Boxes you type into are darker than the panel and have a border you can
     see in daylight, so nobody has to click to find them. */
  --field: #0e0f15;
  --field-border: #464857;
  --muted: #a1a1aa;
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -16px rgba(0, 0, 0, .6);

  /* Brand yellow, which is also the accent. It marks the primary action and
     where you are, and is never decoration. */
  --accent: #fbc711;
  --accent-hover: #ddaf0f;
  --on-accent: #645007;
  --accent-container: #4b3c05;
  --on-accent-container: #fde694;

  --link: #2295f1;
  --danger: #f34236;   --danger-bg: #350f0c;
  --success: #4bae4f;  --success-bg: #102611;
  --warning: #ffc006;  --warning-bg: #382a01;
  --info: #2295f1;     --info-bg: #072135;

  /* Older names still used around the place. */
  --green: var(--success);
  --red: var(--danger);

  --radius: 0.875rem;
  --panel-radius: 1.375rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -.01em; }
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); font-size: .95rem; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--text); text-decoration: none; }
.topbar .cta {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
}
.topbar .cta:hover { background: var(--accent-hover); }
.inline { display: inline; }
.linky {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .95rem; padding: 0;
}
.linky:hover { color: var(--text); }

/* One width for every page, so moving between pages never makes the content
   jump fatter or thinner. Anything that needs to be narrower, like a form,
   is narrow inside a full-width panel, never a narrower panel. */
:root { --page: 1180px; --gutter: max(20px, calc((100% - var(--page)) / 2 + 20px)); }
main, main.wide { max-width: var(--page); margin: 0 auto; padding: 28px 20px 64px; }

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; margin: 32px 0 12px; }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 6px; }
/* Text uses the width of its box; the layout, not a line cap, keeps it readable. */
p.lede { color: var(--muted); margin-top: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
  margin-bottom: 20px;
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* A grid item will not go narrower than its widest word unless told to, and
   then it paints over its neighbour instead of shrinking. */
.grid > * { min-width: 0; }
.grid code, .grid p { overflow-wrap: anywhere; }

.card { display: block; color: inherit; }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card .meta, .meta { color: var(--muted); font-size: .85rem; }

label { display: block; margin: 14px 0 6px; font-size: .9rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], input[type=datetime-local], input:not([type]), textarea, select {
  display: block; width: 100%; padding: 11px 13px; background: var(--field);
  border: 1px solid var(--field-border); border-radius: var(--radius); color: var(--text);
  font: inherit;
}
input::placeholder, textarea::placeholder { color: #767887; }
input[type=file] { color: var(--muted); }
textarea { min-height: 7rem; resize: vertical; }

/* Anything that turns a setting on or off is a switch, and it saves itself. */
.switch { display: inline-flex; align-items: center; gap: .625rem;
  cursor: pointer; min-height: 2.75rem; margin: 10px 0 0; color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  flex: none; width: 2.75rem; height: 1.5rem;
  background: var(--line); border: 1px solid var(--panel-border);
  border-radius: 999px; position: relative; transition: background .15s ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1.25rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .switch .track, .switch .track::after { transition: none; }
}

/* Checkboxes are for picking several things from a list, never for a setting.
   The browser default is too small and too pale to see. */
input[type="checkbox"], input[type="radio"] {
  width: 1.125rem; height: 1.125rem; flex: none;
  accent-color: var(--accent); cursor: pointer;
}

button.primary, .btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 18px;
  font: inherit; font-weight: 700; cursor: pointer; white-space: normal;
}
button.primary:hover, .btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none;
}
.btn.ghost {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--line); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }


/* A table inside a panel lives in a scroller, or it paints over the edge. */
.scroller { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
th {
  color: var(--muted); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .05em;
}

.filelist { list-style: none; margin: 0; padding: 0; }
.filelist li { border-bottom: 1px solid var(--line); }
.filelist li:last-child { border-bottom: 0; }
.filelist a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 4px; color: var(--text);
}
.filelist a > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filelist a:hover { background: var(--panel-2); text-decoration: none; }
.filelist .size { color: var(--muted); font-size: .85rem; }
.dir::before { content: "📁 "; }
.file::before { content: "📄 "; }

.crumbs { color: var(--muted); font-size: .9rem; margin-bottom: 10px; word-break: break-all; }

pre.code {
  margin: 0; padding: 0; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius); min-width: 0;
  overflow: auto; font-size: .87rem; line-height: 1.5;
}
pre.code table { border-collapse: collapse; width: auto; min-width: 100%; }
pre.code td { border: 0; padding: 0 12px; vertical-align: top; white-space: pre; }
pre.code td.ln {
  color: #5b6272; text-align: right; user-select: none;
  position: sticky; left: 0; background: var(--panel-2); padding-right: 14px;
}
code, pre, .mono { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }

.keyshow {
  background: var(--panel-2); border: 1px solid var(--success); border-radius: var(--radius);
  padding: 12px; word-break: break-all; font-size: .9rem;
}

/* Messages appear next to whatever caused them, never at the top of the page.
   They push the page open a little and are closed by hand. */
/* A message is one quiet line under what it is about: a small mark in the
   page's own colour and plain text. No coloured boxes, no green or red slabs. */
.note {
  display: flex; align-items: center; gap: 9px; margin: 8px 0 0; padding: 2px 0;
  background: none; border: 0; color: var(--text); font-size: .9rem; max-width: none;
}
.note .tick {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent); font-size: .72rem; font-weight: 800;
}
.note .what { flex: 1; }
.note .shut {
  background: none; border: 0; color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px;
}
.note .shut:hover { color: var(--text); }

/* The quiet mark a self-saving field leaves behind. */
.saved {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 6px 0 0; color: var(--success); font-size: .82rem;
}

/* The house footer. Each column is as wide as what is in it and the space is
   shared out evenly, so the gap at the left edge, the two between the columns
   and the gap at the right edge all match. The column gap is zero on purpose:
   anything set there is added on top of the even share and the four stop
   matching. The narrow layouts put the side padding back. */
.site-foot {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 36px 0 32px; margin-top: 16px;
}
.foot-grid {
  display: grid; grid-template-columns: max-content max-content max-content;
  justify-content: space-evenly; column-gap: 0; row-gap: 24px;
}
.foot-grid > :first-child { max-width: 280px; }
.foot-grid > :nth-child(2) { min-width: 240px; max-width: 288px; }

.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.foot-brand svg { width: 22px; height: 22px; color: var(--accent); }
.foot-brand:hover { text-decoration: none; }
.foot-lead { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }

/* The first column reads from the left edge down and the last from the right
   edge down, so the two outer columns each sit flush with their own side of
   the page. Only the middle is centred, over its button. */
.site-foot h3 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 0 0 10px; text-align: center;
}
.foot-grid > :first-child h3 { text-align: left; }
.foot-grid > :nth-child(3), .foot-grid > :nth-child(3) h3 { text-align: right; }
.foot-grid > :nth-child(3) li a { justify-content: flex-end; }

.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 6px; }
.site-foot a { color: var(--text); font-size: .9375rem; }
.site-foot a:hover { color: var(--accent); }
.site-foot li a { display: inline-flex; align-items: center; }

/* The button that will not be caught. The box needs a height or it has
   nowhere to run to. */
.cookie-game { position: relative; height: 136px; }
.cookie-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: left .18s ease, top .18s ease;
  background: var(--accent); color: var(--on-accent); border: 0;
  padding: 9px 16px; border-radius: 999px; font: inherit; font-weight: 700;
  font-size: .8125rem; white-space: nowrap; cursor: pointer;
}
.cookie-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cookie-btn { transition: none; } }

.foot-small { margin: 2px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.6; }
.foot-small b { color: var(--text); font-weight: 700; }
.foot-vow { margin-top: 8px; }
.foot-grid > :nth-child(2) .foot-small { text-align: center; }

/* Three lines of small print down the left. Beside the first, who built it;
   beside the last, the pages the law asks for. Both hard against the right. */
.legal { border-top: 1px solid var(--line); background: var(--panel); padding: 18px 20px 22px; }
.legal-inner { display: grid; grid-template-columns: 1fr auto; gap: 2px 24px; align-items: center; }
.legal-line { grid-column: 1; margin: 0; font-size: .75rem; line-height: 1.7; color: var(--muted); }
.legal-ai {
  grid-column: 2; grid-row: 1; justify-self: end; margin: 0;
  font-size: .75rem; line-height: 1.7; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.ai-spark { width: .95rem; height: .95rem; flex: none; color: var(--accent); }
.legal-links {
  grid-column: 2; grid-row: 3; justify-self: end;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.legal-links a {
  color: var(--muted); font-size: .75rem;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.legal-links a:hover { color: var(--text); }

@media (max-width: 62rem) {
  .site-foot { padding-left: 20px; padding-right: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; justify-content: stretch; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .site-foot h3, .foot-grid > :nth-child(3) { text-align: left; }
  .foot-grid > :nth-child(3) li a { justify-content: flex-start; }
  .foot-grid > :nth-child(2) .foot-small { text-align: left; }
}
@media (max-width: 52rem) {
  .legal-inner { grid-template-columns: 1fr; }
  .legal-ai, .legal-links { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}
@media (max-width: 34rem) { .foot-grid { grid-template-columns: 1fr; } }

/* The numbered walk-through on the how-it-works page. */
.steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; }
.steps li {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  padding: 16px 20px; margin-bottom: 12px;
}
.steps h3 { margin: 0 0 4px; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--muted); }

table caption { text-align: left; padding: 0 10px 8px; }

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  main { padding: 20px 14px 48px; }
}

/* Syntax colours - quiet, readable, dark only. */
.hljs-comment, .hljs-quote { color: #6b7280; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #c792ea; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #9ece6a; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #ff9e64; }
.hljs-title, .hljs-section, .hljs-name { color: #7aa2f7; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--accent); }
.hljs-built_in, .hljs-class .hljs-title { color: #2ac3de; }
.hljs-meta { color: #7dcfff; }
.hljs-deletion { color: var(--danger); }

.prose { white-space: normal; word-wrap: break-word; }
.prose:first-letter { text-transform: none; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

.chat {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 60vh; overflow-y: auto; padding-right: 4px;
}
.msg { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; }
.msg .whom { color: var(--accent); font-weight: 700; font-size: .9rem; }
.msg .said { word-wrap: break-word; }
.msg .flag { background: none; border: 0; color: #5b6272; cursor: pointer; font-size: .8rem; }
.msg .flag:hover { color: var(--danger); }
.msg.gone .said { color: var(--muted); font-style: italic; }

.banner {
  display: block; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; color: var(--muted);
  text-align: center; font-size: .9rem;
}
.banner:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }

/* The tick beside a label whose value is already stored. */
.set-tick { color: var(--success); font-weight: 800; }

/* The i. A round button on the heading line; the standing explanation of a
   screen sits behind it, shut until somebody wants it, and pushes the page
   down rather than covering it. */
.eye { margin: 0 0 8px; }
.eye > summary { list-style: none; display: flex; align-items: center; gap: .625rem; cursor: pointer; }
.eye > summary::-webkit-details-marker { display: none; }
.eye-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  font-size: .8125rem; font-weight: 700; font-style: italic;
}
.eye[open] > summary .eye-btn {
  background: var(--accent-container); border-color: var(--accent-container);
  color: var(--on-accent-container);
}
.eye > .eye-body { margin: 10px 0 0; color: var(--muted); }

/* A destructive button that has been armed and is waiting for the second press. */
.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.linky.is-armed { background: none; color: var(--danger); font-weight: 700; }

/* ---------- The back end ---------- */
/* A floating sidebar with the page beside it, sitting on the page ground with
   air all round. The same shape as the Help and Portal desks. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

body.shell { display: block; }

.app {
  display: flex; align-items: stretch; gap: 20px;
  padding: 20px; min-height: 100vh; box-sizing: border-box;
}
@media (min-width: 900px) { .app { max-width: 96rem; margin: 0 auto; } }

.nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-burger { display: none; cursor: pointer; color: var(--muted); font-size: 1.25rem; }

.sidebar {
  flex-shrink: 0; width: 240px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  padding: 16px 12px; position: sticky; top: 20px;
  height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; z-index: 100;
}
.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 4px 12px 8px;
}
.sidebar .brand { font-size: 1rem; }
.sidebar-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }

.nav-group {
  margin: 14px 10px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  width: 100%; box-sizing: border-box; border-radius: var(--radius);
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left;
}
.nav-link:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav-link.is-active {
  background: var(--accent-container); color: var(--on-accent-container); font-weight: 600;
}
.nav-icon { width: 18px; height: 18px; flex: none; }
.nav-badge {
  margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  background: var(--accent-container); color: var(--on-accent-container);
}
.sidebar-bottom {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}

.content { flex: 1; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); margin: 0; }
.title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.page-title { margin: 0; }
.badge {
  width: fit-content; padding: 3px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font-size: .75rem; font-weight: 600;
}

/* Numbers at the top of a page. Each says what it counts, never a bare figure. */
.stat-row {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat-n { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.stat-l { font-size: .8125rem; color: var(--muted); }
.stat.is-wanted .stat-n { color: var(--accent); }

.content .panel, .content .card {
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: none;
}

@media (max-width: 900px) {
  .app { flex-direction: column; padding: 12px; gap: 12px; }
  .sidebar { position: static; height: auto; width: auto; }
  .nav-burger { display: inline-block; }
  .sidebar-menu { display: none; }
  .nav-toggle:checked ~ .sidebar .sidebar-menu { display: flex; }
}

/* What changed between two versions. Green for what arrived, red for what
   went, and the file name above each patch. */
.filediff {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  padding: 1rem 1.25rem; margin-bottom: 14px;
}
.filediff > summary {
  cursor: pointer; display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; list-style: none;
}
.filediff > summary::-webkit-details-marker { display: none; }
.filediff > summary::before { content: "▸ "; color: var(--muted); }
.filediff[open] > summary::before { content: "▾ "; }
.filediff > summary .mono { font-size: .9rem; word-break: break-all; }
.filediff pre.code { margin-top: 12px; padding: 10px 0; }

pre.code.diff code { display: block; }
.dl { display: block; padding: 0 14px; white-space: pre-wrap; word-break: break-word; }
.dl-add { background: var(--success-bg); color: var(--success); }
.dl-cut { background: var(--danger-bg); color: var(--danger); }
.dl-at { color: var(--muted); }

/* The mark sits beside the name, in the accent, at whatever size it is given. */
.brand { display: inline-flex; align-items: center; gap: 7px; }
.brand .mark { flex: none; color: var(--accent); }
.foot-brand .mark { color: var(--accent); }

/* The file list reads down two columns rather than one long sprawl, and
   folders and files are kept apart. */
.tree { display: grid; gap: 20px; align-items: start; }
@media (min-width: 62rem) { .tree { grid-template-columns: 1fr 1fr; } }
.tree > * { min-width: 0; }
.tree .panel { margin-bottom: 0; }
.tree h2 { margin-top: 0; font-size: 1.0625rem; }

/* ---------- A project's own address ----------
   Every colour here reads the accent, which each project sets to its own. */

.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;
}

body.on-project main { padding-top: 28px; }

.hero { padding: 28px 0 22px; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.15; }
.hero .lede { font-size: 1.15rem; }
.btn.big { padding: 13px 26px; font-size: 1.05rem; border-radius: 999px; }

.home-grid {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "news community" "news bugs";
}
.home-grid > :nth-child(1) { grid-area: news; }
.home-grid > :nth-child(2) { grid-area: community; }
.home-grid > :nth-child(3) { grid-area: bugs; }
.home-grid .panel { margin-bottom: 0; }
.home-grid h2 { margin: 0 0 6px; font-size: 1.15rem; }
@media (max-width: 760px) {
  .home-grid { grid-template-columns: 1fr; grid-template-areas: "news" "community" "bugs"; }
}

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }

/* New, Improved and Fixed: three badges that never share a colour. */
.kind {
  display: inline-block; min-width: 5.4em; text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-right: 8px; vertical-align: 1px;
}
.kind-new { background: var(--accent-container); color: var(--on-accent-container); }
.kind-improved, .kind-idea { background: var(--info-bg); color: #9ccff9; }
.kind-fixed { background: var(--success-bg); color: #aedbb0; }
.kind-bug { background: var(--danger-bg); color: #faaaa5; }

.news, .talk, .plain-list { list-style: none; margin: 10px 0 14px; padding: 0; }
.news li, .talk li, .plain-list li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.news li:last-child, .talk li:last-child, .plain-list li:last-child { border-bottom: 0; }
.talk li { font-size: .92rem; color: var(--muted); }
.talk strong { color: var(--text); margin-right: 6px; }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; }

/* The All / New / Improved / Fixed filter: one capsule, like the menu. */
.whats-head, .bugs-head, .code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.whats-head h1, .bugs-head h1, .code-head h1 { margin: 0; }
.segmented {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.segmented a {
  padding: 6px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .9rem;
}
.segmented a:hover { color: var(--text); text-decoration: none; }
.segmented a.is-here { background: var(--accent); color: var(--on-accent); }

.release .card-head h2 { font-size: 1.3rem; }
.release .lede { margin: 6px 0 4px; }
.note-group { margin-top: 16px; }
.note-group ul { margin: 8px 0 0; padding-left: 1.2rem; }
.note-group li { margin: 4px 0; }
.release-foot {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap;
}
.release-foot a { color: var(--muted); }
.release-foot a:hover { color: var(--text); }
.waiting { border-style: dashed; }
.waiting ul { list-style: none; padding: 0; margin: 10px 0 0; }
.waiting li { padding: 5px 0; }

.code-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.code-actions select { width: auto; margin: 0; }

/* The community: the chat beside a narrow column of who is here. */
.community {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 260px; align-items: start;
}
@media (max-width: 860px) { .community { grid-template-columns: 1fr; } }
.community-main > .panel:last-child { margin-bottom: 0; }
.rules {
  background: var(--accent-container); color: var(--on-accent-container);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px;
}
.rules summary { cursor: pointer; font-weight: 700; }
.rules .prose { margin-top: 8px; }
.join-panel { text-align: center; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.join-panel p { margin-left: auto; margin-right: auto; }
.join-panel .rules { text-align: left; }
.msg-end { display: inline-flex; gap: 8px; align-items: baseline; }
.msg-end form { display: inline; }
.member { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; }
td.actions form { display: inline-block; margin-right: 12px; }

/* Why a message is being reported. A box on the page, never a browser pop-up. */
.report-box {
  background: var(--panel); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); padding: 1.5rem; max-width: 380px; width: calc(100% - 32px);
}
.report-box::backdrop { background: rgba(0, 0, 0, .6); }
.wipe-box .wipe-said { margin-top: 0; }
.wipe-box button[hidden] { display: none; }
.wipe-box .wipe-bad { color: var(--danger); }
.choice-item { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-weight: 500; }
.choice-item input { width: auto; margin: 0; accent-color: var(--accent); }

/* The two ways to join, on the sign-up page. */
.choice { border: 0; padding: 0; margin: 0 0 6px; }
.choice legend { font-weight: 700; margin-bottom: 8px; }
.choice label {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 400;
}
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-container); }
.choice input { width: auto; margin: 4px 0 0; accent-color: var(--accent); }

/* ---------- The owner's settings ---------- */

.setup-list { list-style: none; padding: 0; margin: 8px 0 0; }
.setup-list li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.setup-tick {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  display: inline-grid; place-items: center; font-size: .75rem; font-weight: 800; flex: none;
}
.setup-list li.is-done { color: var(--muted); }
.setup-list li.is-done .setup-tick { background: var(--success); border-color: var(--success); color: #102611; }

.logo-row input[type=file] { padding: 8px; }

.swatches { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.swatches legend { font-weight: 700; margin-bottom: 8px; }
.swatch { position: relative; cursor: pointer; margin: 0; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch-dot {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  background: var(--swatch); border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}
.swatch input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--text); }
.swatch input:focus-visible + .swatch-dot { outline: 2px solid var(--text); outline-offset: 2px; }

.on-project.card { border-top: 3px solid var(--project, var(--accent)); }

/* ---------- Blog and newsletter ---------- */

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head form { margin: 0; }

.blog-list { display: grid; gap: 20px; }
.post-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center;
  color: inherit; margin: 0;
}
.post-card:hover { border-color: var(--accent); text-decoration: none; }
.post-card h2 { margin: 2px 0 6px; font-size: 1.3rem; }
.post-card-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.post-card:not(:has(.post-card-cover)) { grid-template-columns: 1fr; }
@media (max-width: 640px) { .post-card { grid-template-columns: 1fr; } }

.post-body, .post > h1 { max-width: 760px; }
.post h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; letter-spacing: -.015em; margin: 4px 0 18px; }
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; }
.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body h2, .post-body h3, .post-body h4 { line-height: 1.3; margin: 1.6em 0 .5em; }
.post-body blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 3px solid var(--accent); color: #d4d4d8; }
.post-body blockquote cite { display: block; font-size: .9rem; color: var(--muted); font-style: normal; }
.post-body figure { margin: 1.4em 0; }
.post-body figure img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.post-body figcaption { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.post-body table { border-collapse: collapse; width: 100%; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post-body mark { background: var(--accent-container); color: var(--on-accent-container); padding: 0 3px; border-radius: 3px; }
.post-body code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }


.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.newsletter-form input[type=email] { flex: 1 1 240px; margin: 0; }
.news-tick { justify-content: center; margin: 4px 0 12px; }

/* The writer's screen: the post on the left, its settings beside it. */
.post-edit { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 960px) { .post-edit { grid-template-columns: 1fr; } }
.post-edit-side .panel { margin-bottom: 20px; }
.big-input { font-size: 1.4rem; font-weight: 700; }
.cover-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; }

.logo-stage { display: flex; align-items: center; min-height: 64px; padding: 12px 16px; border-radius: var(--radius);
  background: #101117; border: 1px solid var(--field-border); margin-bottom: 8px; }
.logo-stage-name { font-weight: 800; font-size: 1.05rem; }
/* A post as it will look, drawn inert: nothing in it can run or reach the page. */
.post-preview { display: block; width: 100%; height: min(78vh, 900px); border: 1px solid var(--field-border);
  border-radius: var(--radius); background: #09090b; }
.ai-asks { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px;
  grid-template-columns: 1fr; }
.ai-asks li { background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius);
  padding: 12px 14px; font-style: italic; }

/* ---------- Mentions ---------- */
.mention-menu { position: relative; display: inline-block; }
.mention-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .88rem; }
.mention-menu summary::-webkit-details-marker { display: none; }
.mention-menu .mm-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; padding: 8px;
  background: var(--panel); border: 1px solid var(--field-border); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.mention-menu .mm-head { margin: 4px 8px 6px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.mention-menu .mm-list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 9px; color: var(--text); }
.mention-menu .mm-list a:hover { background: var(--panel-2); text-decoration: none; }
.mention-menu .mm-n { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 8px; font-weight: 800; font-size: .75rem; }
@media (max-width: 640px) { .mention-menu .mm-say { display: none; } }

.mention { color: var(--accent); font-weight: 700; }
.mention-me { background: var(--accent); color: var(--on-accent); border-radius: 5px; padding: 0 4px; }
.msg.to-me { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; border-radius: 6px; }
/* The one you were sent to: lit up so you can find it and answer it. */
.msg:target { background: var(--accent-container); color: var(--on-accent-container); border-radius: 8px;
  padding: 6px 10px; animation: target-glow 1.6s ease-out 2; }
@keyframes target-glow { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.mention-banner { background: var(--accent-container); color: var(--on-accent-container); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.mention-banner .meta { color: inherit; opacity: .85; margin-left: 8px; }
.mention-banner ul { margin: 8px 0 0; padding-left: 1.1rem; }
.mention-banner a { color: inherit; text-decoration: underline; }
.badge-role { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .68rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.role-owner { background: var(--accent); color: var(--on-accent); }
.role-mod { background: var(--info-bg); color: #9ccff9; border: 1px solid #1e5a8a; }
.role-admin { background: #3b1d4f; color: #e0b8f5; border: 1px solid #6a3a8a; }
.msg .whom { white-space: nowrap; }

/* The @ picker under the chat box. */
.say-box { position: relative; }
.people-list { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px;
  min-width: 240px; max-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--field-border);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.people-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.people-list li[aria-selected="true"], .people-list li:hover { background: var(--panel-2); }
.people-list .meta { font-size: .75rem; }
/* Steps in order: each a card that stands out from its panel, numbered, with no icons or arrows. */
.flow { display: grid; gap: 10px; }
.flow-step { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; row-gap: 2px; align-items: start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.flow-num { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; background: var(--accent-container); color: var(--on-accent-container); font-weight: 800; }
.flow-step strong { font-size: 1rem; }
.flow-step > span:last-child { color: var(--muted); line-height: 1.5; }
.account-grid { align-items: start; }
.status-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.status-steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.status-steps li.is-here { color: var(--text); font-weight: 700; }
.status-steps li.is-here .setup-tick { border-color: var(--accent); color: var(--accent); }
.status-steps li.is-done .setup-tick { background: var(--success); border-color: var(--success); color: #102611; }
.people-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.person { display: flex; gap: 14px; align-items: center; margin: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-container); color: var(--on-accent-container); font-weight: 800; font-size: 1.1rem; }

/* The Members tab */
.member-search { display: flex; gap: 10px; }
.member-search input { flex: 1; margin: 0; }
.members-table td { vertical-align: top; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 16px; }
.act-menu { display: inline-block; position: relative; }
.act-menu summary { list-style: none; display: inline; }
.act-menu summary::-webkit-details-marker { display: none; }
.act-menu[open] > div { position: absolute; z-index: 10; right: 0; top: 1.6em; display: grid; gap: 6px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--field-border); border-radius: 10px; white-space: nowrap; }
.danger-link { color: var(--danger) !important; }
.standing { font-weight: 700; }
.standing.is-banned { color: var(--danger); }
.standing.is-muted { color: var(--warning); }

/* ---------- The owner's panel: a sidebar like the back end ---------- */
.owner-shell .content { padding: 0; }
.owner-shell .content .panel { background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow-panel); }
.owner-shell .content .panel .panel, .owner-shell .content .panel .card { background: var(--panel-2); box-shadow: none; }
.owner-shell .sidebar-top .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.owner-shell .sidebar-top .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-shell .sidebar-top .app-logo { max-width: 180px; max-height: 36px; }
.nav-mention { color: var(--text); }
.nav-mention .nav-badge { background: var(--accent); color: var(--on-accent); }
.side-made { display: flex; align-items: center; gap: 8px; margin: 10px 10px 2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.side-made:hover { color: var(--text); text-decoration: none; }
.side-made .mark { color: var(--accent); }
.owner-shell .owner-head { margin-top: 4px; }
.btn-soon, .cta-soon { cursor: default; opacity: .9; }
.topbar .cta-soon { background: var(--accent-container); color: var(--on-accent-container); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; }

/* ---------- The panel: main column, submenu column, page ---------- */
.owner-shell .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.work { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.work.has-sub { grid-template-columns: 220px minmax(0, 1fr); }
.work-strip { grid-column: 1 / -1; }
.subnav {
  position: sticky; top: 20px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel); padding: 14px 10px;
}
.subnav .sidenav { display: flex; flex-direction: column; gap: 2px; }
.subnav-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); min-height: 36px; }
.subnav-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav-head .app-logo { max-width: 190px; max-height: 36px; }
.nav-badge.is-hot { background: var(--accent); color: var(--on-accent); }
.nav-empty { padding: 4px 10px; font-size: .82rem; }
@media (max-width: 1100px) { .work.has-sub { grid-template-columns: 1fr; } .subnav { position: static; } }
@media (max-width: 900px) { .owner-shell .app { grid-template-columns: 1fr; } }

/* The strip of notices: one line each, saying which project it came from. */
.notice-strip { display: grid; gap: 8px; }
.notice {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent-container); color: var(--on-accent-container); border: 1px solid var(--accent);
}
.notice-from { flex: none; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.notice-what { flex: 1; min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-open { flex: none; font-weight: 700; color: inherit; text-decoration: underline; }
.notice-shut { background: none; border: 0; color: inherit; font-size: 1.1rem; cursor: pointer; padding: 0 4px; opacity: .8; }
.notice-shut:hover { opacity: 1; }
.notice-mention { background: var(--panel); color: var(--text); border-color: var(--accent); }
.notice-more { margin: 0; font-size: .82rem; color: var(--muted); }
.notice-card .prose { line-height: 1.7; }
@media (max-width: 640px) { .notice { flex-wrap: wrap; } .notice-what { white-space: normal; } }

/* Signed in: Buildmorphic is one thin line, always at the bottom of the window. */
.thin-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter); background: rgba(16, 17, 23, .96); border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; backdrop-filter: blur(6px);
}
.thin-foot .brand { font-size: .82rem; gap: 7px; color: var(--text); }
.thin-foot .brand:hover { text-decoration: none; }
body:has(.thin-foot) { padding-bottom: 34px; }
.owner-shell .thin-foot { padding: 0 20px; }
.owner-shell .sidebar { height: calc(100vh - 40px - 34px); }
.nav-tag { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.nav-tag + .nav-badge { margin-left: 6px; }
.work.has-sub .logo-row { grid-template-columns: 1fr; gap: 16px; }
/* Saved: a green tick beside the field's heading for a moment. */
.saved-tick { display: inline-grid; place-items: center; margin-left: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--success); color: #102611; font-size: .7rem; font-weight: 900; vertical-align: 1px;
  animation: tick-in .25s ease-out; }
@keyframes tick-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thin-foot .brand small { color: var(--muted); font-weight: 500; font-size: .76rem; margin-left: 8px; }

/* The footer sits at the bottom of the window however short the page is:
   the page is at least as tall as the window, and the main part takes the slack. */
body:not(.shell) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.shell) > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
body:not(.shell) > header, body:not(.shell) > footer, body:not(.shell) > .legal, body:not(.shell) > style { flex: none; }

/* In the panel the page fills its column. The width cap on Buildmorphic's own
   public pages must not reach in here, or pages without a second column stop
   short of the right edge and the panel seems to change size between pages. */
.owner-shell main.content { max-width: none; width: auto; margin: 0; }

/* The admin's stop, folded away until it is wanted. */
details.stop summary { cursor: pointer; list-style: none; color: var(--danger); font-size: .85rem; margin-top: 4px; }
details.stop summary::-webkit-details-marker { display: none; }
details.stop form { display: grid; gap: 8px; margin-top: 8px; min-width: 200px; }

/* How much of an allowance is used: a plain bar, filled in the accent. */
.meter { height: 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--field-border); overflow: hidden; margin: 10px 0 4px; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* A weekly review is plain text from the laptop, shown as written. */
.review-text { white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; }

/* A Markdown file, shown as the document it is meant to be. */
.md-doc { line-height: 1.7; }
.md-doc h1, .md-doc h2, .md-doc h3 { margin: 1.2em 0 .5em; line-height: 1.25; }
.md-doc h1:first-child, .md-doc h2:first-child { margin-top: 0; }
.md-doc h1 { font-size: 1.7rem; } .md-doc h2 { font-size: 1.35rem; } .md-doc h3 { font-size: 1.12rem; }
.md-doc p, .md-doc ul, .md-doc ol, .md-doc blockquote, .md-doc table, .md-doc pre { margin: 0 0 1em; }
.md-doc ul, .md-doc ol { padding-left: 1.5em; }
.md-doc img { max-width: 100%; height: auto; border-radius: 8px; }
.md-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.md-doc pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow-x: auto; }
.md-doc pre code { background: none; border: 0; padding: 0; }
.md-doc blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; color: var(--muted); }
.md-doc table { border-collapse: collapse; display: block; overflow-x: auto; }
.md-doc th, .md-doc td { border: 1px solid var(--line); padding: 6px 12px; text-align: left; }
.md-doc th { background: var(--panel-2); }
.md-doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.readme-panel h2 { margin-top: 0; font-size: 1rem; color: var(--muted); }

/* Beside a version number: a beta or a release candidate. A full release carries no flag. */
.stage-flag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; border: 1px solid; }
.stage-beta { background: var(--warning-bg); color: #ffe08a; border-color: #8a6a05; }
.stage-rc { background: var(--info-bg); color: #9ccff9; border-color: #1e5a8a; }

/* A community's invitation: the heading and the way in, then the reasons as cards, then a last word. */
.join-hero { text-align: center; padding: 48px 28px; }
.join-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 12px; }
.join-hero .lede { font-size: 1.1rem; margin: 0 auto 22px; }
.join-hero .btn-row { justify-content: center; margin-bottom: 14px; }
.join-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
.join-reason { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel); padding: 24px; }
.join-reason h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--accent); }
.join-reason p { margin: 0; color: var(--muted); line-height: 1.6; }
.join-close { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.join-close h2 { margin: 0 0 6px; }
.join-close p { margin: 0; color: var(--muted); }
@media (max-width: 1000px) { .join-reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .join-reasons { grid-template-columns: 1fr; } .join-hero { padding: 32px 18px; } }

/* Short points side by side, as cards: no icons, no bullets. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 0; }
.fact { display: grid; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.fact > span { color: var(--muted); line-height: 1.5; font-size: .92rem; }

/* The bugs page across the whole width: what is open beside the form, then the steps in a row. */
.bugs-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.bugs-grid > .panel { margin: 0; }
.bugs-grid + .panel { margin-top: 16px; }
.flow.flow-across { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .bugs-grid { grid-template-columns: 1fr; } .flow.flow-across { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flow.flow-across { grid-template-columns: 1fr; } }

/* The way in early, just under the house banner, until the opening day. */
.banner-early { text-align: center; margin: -6px 0 14px; font-size: .92rem; }
.banner-early a { color: var(--accent); font-weight: 700; }

/* The roadmap: how far things have come along the top, then a lane for each stage, most wanted first. */
.rm-head h1 { margin: 0 0 6px; }
.rm-journey { display: flex; gap: 6px; margin: 16px 0 10px; }
.rm-leg { min-width: 90px; border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); background: var(--panel); }
.rm-leg strong { font-size: 1.5rem; }
.rm-leg span { color: var(--muted); font-weight: 600; }
.rm-leg.rm-suggested { border-top: 4px solid var(--muted); }
.rm-leg.rm-approved { border-top: 4px solid var(--info); }
.rm-leg.rm-in_progress { border-top: 4px solid var(--accent); }
.rm-leg.rm-completed { border-top: 4px solid var(--success); }
.rm-latest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; font-size: .92rem; }
.rm-latest a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.rm-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--muted); flex: none; }
.rm-dot.rm-approved { background: var(--info); } .rm-dot.rm-in_progress { background: var(--accent); } .rm-dot.rm-completed { background: var(--success); }
.rm-lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.rm-lane { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel); padding: 16px; display: grid; gap: 10px; }
.rm-lane header { display: flex; align-items: center; gap: 10px; }
.rm-lane h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.rm-step { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; background: var(--panel-2); color: var(--muted); }
.rm-approved .rm-step { background: var(--info-bg); color: #9ccff9; }
.rm-in_progress .rm-step { background: var(--accent-container); color: var(--on-accent-container); }
.rm-completed .rm-step { background: var(--success-bg); color: #aedbb0; }
.rm-n { font-weight: 700; color: var(--muted); }
.rm-what { margin: -4px 0 0; }
.rm-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.rm-card-top { display: flex; gap: 12px; align-items: flex-start; }
.rm-card-text { min-width: 0; flex: 1; }
.rm-card h4 { margin: 0 0 4px; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.rm-card details { margin: 4px 0; } .rm-card details summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.rm-card details p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.rm-card .meta { margin: 4px 0 0; font-size: .8rem; }
.rm-app { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--on-accent-container); background: var(--accent-container);
  border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; }
.rm-vote { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; padding: 6px 8px;
  border-radius: 12px; border: 1px solid var(--field-border); background: var(--field); color: var(--text); font: inherit; cursor: pointer; }
.rm-vote .rm-count { font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.rm-vote span:last-child { font-size: .72rem; color: var(--muted); }
.rm-vote:hover { border-color: var(--accent); }
.rm-vote.is-on { background: var(--accent-container); border-color: var(--accent); }
.rm-vote.is-on span:last-child { color: var(--on-accent-container); }
.rm-vote.is-still { cursor: default; }
.rm-vote.is-still:hover { border-color: var(--field-border); }
.rm-shipped { display: inline-block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: #aedbb0; background: var(--success-bg);
  border-radius: 999px; padding: 2px 10px; }
.rm-move { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rm-move select, .rm-move input { flex: 1 1 110px; min-width: 0; margin: 0; }
.rm-empty { text-align: center; padding: 12px 0; }
.rm-declined summary { cursor: pointer; font-weight: 700; }
.rm-declined .rm-card { margin-top: 10px; }
@media (max-width: 1100px) { .rm-lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rm-lanes { grid-template-columns: 1fr; } .rm-journey { flex-wrap: wrap; } .rm-leg { flex: 1 1 40%; } }
.pw-count.pw-ok { color: var(--success); font-weight: 700; }
button:disabled { opacity: .55; cursor: not-allowed; }
.pay-due { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-color: var(--accent); }

/* The admin's projects: a card each, side by side, with room to read and edit the trusted addresses. */
.admin-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-proj-head input { max-width: 340px; margin: 0; }
.admin-projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.admin-proj { margin: 0; display: grid; gap: 12px; align-content: start; }
.admin-proj-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.admin-proj-top h3 { margin: 0 0 2px; font-size: 1.15rem; }
.admin-proj-top .meta { margin: 0; }
.admin-proj-state { text-align: right; font-size: .9rem; }
.admin-proj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.admin-proj-stats div { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.admin-proj-stats dt { font-size: .75rem; color: var(--muted); }
.admin-proj-stats dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.admin-proj textarea { width: 100%; min-height: 5.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.admin-proj form .meta { margin: 4px 0 0; }
.admin-proj-edit { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; align-items: start; }
.admin-proj-edit form { margin: 0; }
.admin-proj-room input { width: 100%; }
@media (max-width: 900px) { .admin-proj-edit { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .admin-projs { grid-template-columns: 1fr; } .admin-proj-stats { grid-template-columns: repeat(2, 1fr); } }