/* Nabble for groups — the only part of the site written for a desktop
   (2026-09-17). Its own small stylesheet, for the same reason mobile_only.html
   carries its own palette: pulling the app's fifteen stylesheets onto a static
   page would be most of a megabyte for two pages of words. The tokens are
   copied from style.css under the same names, so a change there is greppable
   here, and that file stays the source. */
:root {
  --brand-navy:      #0C1D36;
  --brand-blue:      #369AF6;
  --brand-green:     #2FBF71;
  --brand-orange:    #FF8A3D;
  --brand-cream:     #F4E9DD;
  --brand-white:     #FAF5F3;
  --brand-grey:      #7B8794;
  --brand-navy-soft: #374458;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 48px 24px 64px;
  background: var(--brand-cream);
  color: var(--brand-navy);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.brand {
  width: min(100%, 360px);
  height: auto;
  display: block;
  margin: 0 auto 36px;
}

h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0 0 16px;
  text-align: center;
}

.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--brand-navy-soft);
  margin: 0 auto 36px;
  max-width: 56ch;
  text-align: center;
}

/* Three cards rather than three paragraphs: on a wide screen a single column of
   prose runs to a line length nobody reads. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.card {
  background: var(--brand-white);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(12, 29, 54, .08);
}

.card h2 {
  font-size: 17px;
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  font-size: 15px;
  color: var(--brand-navy-soft);
}

.card--borrow  { border-top: 4px solid var(--brand-green); }
.card--lend    { border-top: 4px solid var(--brand-orange); }
.card--connect { border-top: 4px solid var(--brand-blue); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary { background: var(--brand-navy); color: var(--brand-white); }
.btn--quiet   { background: transparent; color: var(--brand-navy); border: 1px solid var(--brand-grey); }

/* The form: one column, because two fields side by side on a wide screen makes
   a short form look like an application. */
form.enquiry {
  background: var(--brand-white);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(12, 29, 54, .08);
  max-width: 520px;
  margin: 0 auto;
}

form.enquiry label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

form.enquiry input,
form.enquiry textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--brand-grey);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;   /* 16px so iOS doesn't zoom the page on focus */
  background: #fff;
}

form.enquiry textarea { resize: vertical; min-height: 90px; }
form.enquiry .btn { width: 100%; }

.note, .error, .sent {
  max-width: 520px;
  margin: 0 auto 20px;
  font-size: 15px;
  text-align: center;
}

.note  { color: var(--brand-navy-soft); }
.error { color: #B3261E; font-weight: 600; }

.sent {
  background: var(--brand-white);
  border-left: 4px solid var(--brand-green);
  border-radius: 12px;
  padding: 18px 20px;
  text-align: left;
}

footer {
  margin-top: 48px;
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--brand-grey);
}

footer a { color: var(--brand-blue); font-weight: 600; }

@media (max-width: 520px) {
  body { padding: 32px 18px 48px; }
  .actions .btn { width: 100%; text-align: center; }
}

/* ── Signing in (2026-09-27) ─────────────────────────────────────────────── */
.form-heading {
  max-width: 520px;
  margin: 8px auto 12px;
  font-size: 20px;
}

/* Asking for access sits under signing in, one tap away, so the page leads
   with what somebody who is set up came for. */
details.ask {
  max-width: 520px;
  margin: 24px auto 0;
}
details.ask summary {
  cursor: pointer;
  text-align: center;
  color: var(--brand-navy-soft);
  font-size: 15px;
  margin-bottom: 16px;
  list-style: none;
}
details.ask summary::-webkit-details-marker { display: none; }
details.ask summary span { color: var(--brand-blue); font-weight: 600; }
details.ask .lede { margin-top: 0; }

/* ── The organisation's page ─────────────────────────────────────────────── */
.signed-in {
  max-width: 760px;
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--brand-navy-soft);
}
.groups-list { max-width: 760px; margin: 0 auto; }
.group-card {
  background: var(--brand-white);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 2px 10px rgba(12, 29, 54, .08);
  margin-bottom: 20px;
}
.group-card h2 { margin: 0 0 2px; font-size: 22px; }
.group-status { margin: 0 0 16px; font-size: 14px; color: var(--brand-grey); }
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.figure {
  background: var(--brand-cream);
  border-radius: 12px;
  padding: 10px 12px;
}
.figure-n { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.figure-n--few { font-size: 15px; font-weight: 600; color: var(--brand-navy-soft); padding: 5px 0 3px; }
.figure-label { font-size: 13px; color: var(--brand-navy-soft); }
.fewest-note { max-width: 760px; margin: 4px auto 0; font-size: 14px; color: var(--brand-grey); text-align: center; }

/* ── Signed in: the side menu and the page beside it (2026-09-27) ────────── */
body.signed-in-body { padding: 0; }
/* The menu is the window's height and stays put; only the page beside it
   scrolls, and only when it's taller than the window (2026-09-28).
   goals/goals_reviewed/2026-09-28-hub-side-menu-fixed-height.md */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.menu-open { display: none; }
.side-menu {
  flex: none;
  width: 240px;
  background: var(--brand-navy);
  color: var(--brand-white);
  padding: 24px 0;
  overflow-y: auto;
}
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 18px; }
/* The Nabble Hub header logo (2026-09-28): wide enough that "Hub" in its badge reads. */
.side-brand { display: block; width: 180px; max-width: 100%; height: auto; }
.menu-button { display: none; }
.side-who { margin: 0 22px 14px; font-weight: 700; font-size: 17px; }
.side-heading {
  margin: 18px 22px 6px;
  font-size: 12px;
  color: #B4BCC5;
}
.side-links a {
  display: block;
  padding: 9px 22px;
  color: var(--brand-white);
  text-decoration: none;
  font-size: 15px;
  border-left: 4px solid transparent;
}
.side-links a:hover { background: rgba(255, 255, 255, .06); }
.side-links a.on { border-left-color: var(--brand-blue); background: rgba(54, 154, 246, .14); font-weight: 600; }
.side-links a.side-sub { padding-left: 30px; }

.main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 36px 40px 48px; }
.main-title { text-align: left; margin: 0 0 2px; font-size: 30px; }
.main-sub { margin: 0 0 22px; color: var(--brand-navy-soft); font-size: 15px; }
.section-title { margin: 28px 0 6px; font-size: 20px; }
.main .group-card, .main .groups-list { max-width: none; }
.main .fewest-note, .main .note, .main .sent, .main .error { margin-left: 0; text-align: left; }
.main form.enquiry--left { margin: 0; }
.group-card h2 a { color: var(--brand-navy); text-decoration: none; }
.group-card h2 a:hover { text-decoration: underline; }
.viewing-bar {
  margin: -12px 0 20px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(54, 154, 246, .14);
  font-size: 15px;
}
.viewing-bar a { color: var(--brand-blue); font-weight: 600; }
.viewer-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid #E7DCC8; }
.viewer-row:first-of-type { border-top: none; }
.viewer-row a { color: var(--brand-navy); font-weight: 600; }
.viewer-row span { color: var(--brand-grey); font-size: 14px; }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.chart-card { background: var(--brand-white); border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(12, 29, 54, .08); }
.chart-head { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.chart-bar { flex: 1; background: var(--brand-blue); border-radius: 3px 3px 0 0; min-height: 3px; }
.chart-bar--few { background: transparent; border-bottom: 2px solid #E7DCC8; height: 0; min-height: 0; }
.chart-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--brand-grey); }

/* A narrow window: the menu becomes a bar across the top, its links behind the
   Menu button. */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  /* The bar stays at the top; opened, its links scroll within it if need be. */
  .side-menu { width: auto; padding: 14px 0; max-height: 70vh; max-height: 70dvh; }
  .side-top { padding: 0 18px; }
  .menu-button {
    display: block;
    color: var(--brand-white);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
  }
  .side-links { display: none; padding-top: 10px; }
  .menu-open:checked ~ .side-menu .side-links { display: block; }
  .main { padding: 24px 18px 40px; }
}

/* ── A Nabble login's home: every organisation (2026-09-27) ───────────────── */
.all-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.all-table th { text-align: left; font-size: 13px; color: var(--brand-grey); font-weight: 600; padding: 6px 10px 6px 0; }
.all-table td { padding: 10px 10px 10px 0; border-top: 1px solid #E7DCC8; font-variant-numeric: tabular-nums; }
.all-table td a { color: var(--brand-navy); font-weight: 600; }
.side-who--open { margin-top: 16px; margin-bottom: 4px; font-size: 15px; }

/* ── Making a group, with where it is (2026-09-27) ───────────────────────── */
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-row .btn { flex: none; }
form.enquiry .form-select {
  width: 100%; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--brand-grey);
  border-radius: 12px; font: inherit; font-size: 16px; background: #fff;
}
.place-preview {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(47, 191, 113, .12); font-size: 15px;
}
.place-preview ul { margin: 6px 0 0; padding-left: 18px; }
.row-action a { color: var(--brand-blue); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Groups on a map (2026-09-28). goals/goals_reviewed/2026-09-28-groups-on-a-map.md */
.map-card { margin: 0 0 22px; }
.map-box {
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-white);
  border: 1px solid rgba(12, 29, 54, 0.12);
}
.map-box--empty {
  height: auto;
  padding: 18px;
  color: var(--brand-grey);
}
.map-label {
  background: rgba(250, 245, 243, 0.9);
  border: 0;
  box-shadow: none;
  color: var(--brand-navy);
  font-weight: 700;
}
.map-popup { display: grid; gap: 2px; min-width: 160px; }
.map-popup a { margin-top: 6px; color: var(--brand-blue); font-weight: 600; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; }
.map-legend:empty, .map-unplaced:empty { display: none; }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.map-unplaced { margin: 6px 0 0; font-size: 14px; }
.map-unplaced a { color: var(--brand-blue); }
@media (max-width: 700px) { .map-box { height: 300px; } }

/* Heat by people or transactions, over a span (2026-09-28). */
.map-heat-switches { padding: 6px 10px; }
.map-heat-group + .map-heat-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ddd; }
.map-heat-title { font-weight: 700; margin-bottom: 2px; }
.map-heat-switches label { display: block; }

/* The sign-in page's logo is its heading (2026-09-28). */
.brand-heading { margin: 0; line-height: 0; }