/* gather.css — the whole design system, in one file.

   No build step, no framework, no CDN. Custom properties do the theming: a
   brand's colours are written into :root as inline style on <body> by
   base.html, so one stylesheet serves every brand.

   The look is deliberately its own: a warm paper ground, a single ink colour
   for text, generous line height, and one accent used sparingly. Cards are
   separated by space and a hairline rather than by shadow. It is not trying
   to look like anybody else's community product.

   Layout: a fixed rail on the left at desktop width, a bottom bar on a phone.
   Everything is fluid between. */

:root {
  --brand: #2f6f5e;
  --accent: #d98324;

  --ink: #1d1b19;
  --ink-soft: #55504b;
  --ink-faint: #8a8279;
  --paper: #faf7f2;
  --card: #ffffff;
  --line: #e6e0d6;
  --line-strong: #cdc4b6;

  --ok: #2f6f5e;
  --warn: #9a6a00;
  --bad: #a1362c;
  --info: #2c5d86;

  --radius: 10px;
  --radius-sm: 6px;
  --rail: 232px;
  --measure: 68ch;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;

  --gap: 1rem;
  --gap-lg: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece7e0;
    --ink-soft: #b3aca3;
    --ink-faint: #837c74;
    --paper: #17161a;
    --card: #1f1e23;
    --line: #2f2d34;
    --line-strong: #423f48;
    --ok: #6fbfa5;
    --warn: #d6a64a;
    --bad: #e2867a;
    --info: #7fb2dd;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step-0)/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
}

body[data-type="serif"] {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
               serif;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 620; }
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { color: var(--accent); }

small, .small { font-size: var(--step--1); color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; }

img { max-width: 100%; height: auto; }

/* --- skip link and focus ------------------------------------------------ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); padding: 0.75rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

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

.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  border-right: 1px solid var(--line);
  background: var(--card);
  padding: 1.25rem 0.875rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.main { flex: 1 1 auto; min-width: 0; padding: 1.5rem 1.75rem 5rem; }
.main > .inner { max-width: 940px; margin: 0 auto; }
.main.wide > .inner { max-width: 1180px; }
.main.narrow > .inner { max-width: 620px; }

.topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 20;
}
.topbar .grow { flex: 1 1 auto; }

/* --- brand mark --------------------------------------------------------- */

.mark {
  display: flex; align-items: center; gap: 0.625rem;
  font-weight: 650; color: var(--ink); text-decoration: none;
  margin-bottom: 1.25rem;
}
.mark .glyph {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
}
.mark img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.mark .sub { display: block; font-size: var(--step--1); color: var(--ink-faint);
             font-weight: 400; }

/* --- navigation --------------------------------------------------------- */

.nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.5rem; }
.nav a {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--paper); color: var(--ink); }
.nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand); font-weight: 600;
}
.nav .icon { width: 1.1em; text-align: center; opacity: 0.8; }
.nav .count {
  margin-left: auto; font-size: var(--step--1); font-weight: 600;
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 0 0.4rem; min-width: 1.25rem; text-align: center;
}

.nav-title {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 650;
  padding: 0 0.625rem; margin: 0 0 0.375rem;
}

/* --- cards -------------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.125rem 1.25rem;
  margin-bottom: var(--gap);
}
.card.tight { padding: 0.875rem 1rem; }
.card.flush { padding: 0; overflow: hidden; }
.card > :last-child { margin-bottom: 0; }

.card-head {
  display: flex; align-items: baseline; gap: var(--gap);
  margin-bottom: 0.75rem;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .grow { flex: 1 1 auto; }

.grid { display: grid; gap: var(--gap); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.row { display: flex; gap: var(--gap); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row .grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack.tight { gap: 0.5rem; }

/* --- page headers ------------------------------------------------------- */

.page-head { margin-bottom: var(--gap-lg); }
.page-head h1 { margin-bottom: 0.25rem; }
.page-head .lede { color: var(--ink-soft); font-size: var(--step-1);
                   max-width: var(--measure); }

.crumbs { font-size: var(--step--1); color: var(--ink-faint);
          margin-bottom: 0.5rem; }
.crumbs a { color: var(--ink-faint); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 550; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.accent {
  background: var(--accent); border-color: var(--accent); color: #1d1b19;
}
.btn.quiet { border-color: transparent; background: transparent;
             color: var(--ink-soft); }
.btn.quiet:hover { background: var(--paper); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.small { padding: 0.3rem 0.6rem; font-size: var(--step--1); }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

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

label { display: block; font-weight: 550; margin-bottom: 0.3rem; }
label .hint { display: block; font-weight: 400; font-size: var(--step--1);
              color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="number"],
input[type="datetime-local"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
  width: 100%; padding: 0.5rem 0.65rem; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }

.field { margin-bottom: var(--gap); }
.field.inline { display: flex; align-items: center; gap: 0.5rem; }
.field.inline label { margin: 0; font-weight: 400; }
.field.inline input[type="checkbox"] { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius);
           padding: 1rem; margin: 0 0 var(--gap); }
legend { font-weight: 600; padding: 0 0.4rem; }

.checks { display: flex; flex-direction: column; gap: 0.4rem; }
.checks label { display: flex; gap: 0.5rem; align-items: flex-start;
                font-weight: 400; margin: 0; }
.checks input { width: auto; margin-top: 0.3rem; }

/* --- notices ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--line-strong); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
  margin-bottom: var(--gap); background: var(--card);
}
.notice.ok { border-left-color: var(--ok); }
.notice.warn { border-left-color: var(--warn); }
.notice.bad { border-left-color: var(--bad); }
.notice.info { border-left-color: var(--info); }
.notice p:last-child { margin-bottom: 0; }
.notice .how { font-size: var(--step--1); color: var(--ink-soft);
               margin-top: 0.3rem; }

.flashes { margin-bottom: var(--gap); }

/* --- tags and pills ----------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--step--1); font-weight: 550;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink-soft);
}
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.pill.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill.solid { background: var(--brand); color: #fff; border-color: var(--brand); }
.pill.sim {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--warn) 12%, transparent) 0 6px,
    transparent 6px 12px);
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

/* --- avatars ------------------------------------------------------------ */

.avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-weight: 650; font-size: 0.875rem; object-fit: cover;
  text-transform: uppercase;
}
.avatar.small { width: 28px; height: 28px; flex-basis: 28px;
                font-size: 0.6875rem; }
.avatar.large { width: 72px; height: 72px; flex-basis: 72px;
                font-size: 1.5rem; }

/* --- feed --------------------------------------------------------------- */

.post { border-bottom: 1px solid var(--line); padding: 1.125rem 1.25rem; }
.post:last-child { border-bottom: 0; }
.post-meta { display: flex; align-items: center; gap: 0.5rem;
             flex-wrap: wrap;
             font-size: var(--step--1); color: var(--ink-faint);
             margin-bottom: 0.5rem; }
/* The author and the time each stay on one line. Without this a narrow
   screen breaks "13 Aug 2026" across three lines, which reads as three
   separate things. */
.post-meta > * { white-space: nowrap; }
.post-meta strong { white-space: normal; }
.post-meta strong { color: var(--ink); font-weight: 600; }
.post h3 { margin-bottom: 0.35rem; font-size: var(--step-1); }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--brand); }
.post-body { color: var(--ink-soft); }
.post-foot { display: flex; gap: 1rem; margin-top: 0.75rem;
             font-size: var(--step--1); }

.prose { max-width: var(--measure); }
.prose h2, .prose h3, .prose h4 { margin-top: 1.5em; }
.prose blockquote {
  margin: 1em 0; padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--line-strong); color: var(--ink-soft);
}
.prose pre {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.75rem; overflow-x: auto;
}
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
              font-size: 0.9em; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose img { border-radius: var(--radius-sm); }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.4rem 0.6rem;
                        text-align: left; }

.comment { padding: 0.875rem 0; border-top: 1px solid var(--line); }
.comment.reply { margin-left: 2.5rem; }

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

.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--step-0); }
table.data th, table.data td {
  text-align: left; padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.data th {
  font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 650;
  white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td.right, table.data th.right { text-align: right; }
table.data .nowrap { white-space: nowrap; }

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

.stat { }
.stat .value { font-size: var(--step-3); font-weight: 650; letter-spacing: -0.02em;
               display: block; line-height: 1.1; }
.stat .label { font-size: var(--step--1); color: var(--ink-faint);
               text-transform: uppercase; letter-spacing: 0.05em;
               font-weight: 600; }
.stat .note { font-size: var(--step--1); color: var(--ink-soft); }

.bar { height: 6px; background: var(--line); border-radius: 999px;
       overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }

/* --- lists -------------------------------------------------------------- */

.tiles { display: grid; gap: var(--gap);
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tile {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; text-decoration: none;
  color: var(--ink);
}
.tile:hover { border-color: var(--line-strong); color: var(--ink); }
.tile h4 { margin-bottom: 0.25rem; }
.tile .meta { font-size: var(--step--1); color: var(--ink-faint); }

.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list li { border-bottom: 1px solid var(--line); }
.lesson-list li:last-child { border-bottom: 0; }
.lesson-list a { display: flex; gap: 0.75rem; align-items: center;
                 padding: 0.7rem 0; text-decoration: none; color: var(--ink); }
.lesson-list .tick { width: 1.2rem; color: var(--ok); }
.lesson-list .locked { color: var(--ink-faint); }

.ladder { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ladder li { display: flex; align-items: center; gap: 0.75rem;
             padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.ladder li:last-child { border-bottom: 0; }
.ladder .rank { counter-increment: rank; font-variant-numeric: tabular-nums;
                color: var(--ink-faint); font-weight: 650; width: 1.75rem; }
.ladder .rank::before { content: counter(rank); }

/* --- embeds ------------------------------------------------------------- */

.embed { position: relative; padding-top: 56.25%; border-radius: var(--radius);
         overflow: hidden; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%;
                border: 0; }

/* --- empty states ------------------------------------------------------- */

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.empty h3 { color: var(--ink); }
.empty .glyph { font-size: 2rem; opacity: 0.4; display: block;
                margin-bottom: 0.5rem; }

/* --- banner ------------------------------------------------------------- */

.banner {
  border-radius: var(--radius); padding: 1.75rem;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
  color: #fff; margin-bottom: var(--gap-lg);
}
.banner h1 { color: #fff; }
.banner p { color: rgba(255,255,255,0.88); max-width: var(--measure); }
.banner .btn { background: #fff; border-color: #fff; color: var(--brand); }

/* --- mobile bar --------------------------------------------------------- */

.mobile-bar { display: none; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .rail {
    position: static; width: auto; height: auto; flex: none;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0.875rem 1rem;
  }
  .rail .nav { flex-direction: row; overflow-x: auto; gap: 0.25rem;
               margin-bottom: 0; padding-bottom: 0.25rem; }
  .rail .nav a { white-space: nowrap; }
  .rail .nav-title, .rail .rail-hide { display: none; }
  .rail .mark { margin-bottom: 0.75rem; }
  .main { padding: 1rem 1rem 4.5rem; }
  h1 { font-size: var(--step-3); }
  .post, .card { padding: 1rem; }
}

@media (max-width: 520px) {
  .btn-row .btn { flex: 1 1 auto; }
  .comment.reply { margin-left: 1rem; }
}

/* --- print -------------------------------------------------------------- */

@media print {
  .rail, .topbar, .btn, .mobile-bar { display: none !important; }
  body { background: #fff; }
  .card { border-color: #ccc; }
}