/* 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); }
.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; }
.flow.flow-down { grid-auto-flow: row; gap: 26px; }
.flow.flow-down .flow-step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
.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; }