/* ============================================================================
   GovKit — reference implementation of the LinkedTrust pattern language.
   VENDORED: canonical copy = Cooperation-org/site-linkedtrust-us design/tokens.css.
   docs/design/pattern-language.md is the contract; pattern numbers cited below.

   One dependency-free stylesheet: tokens on :root (18 · THEMEABLE ROOTS),
   light only — paper in every OS theme (golda 2026-07-22), no fonts shipped,
   no animation anywhere (4 · NOTHING MOVES — do not add transitions).

   The six leaf colors are validated (CVD/contrast/lightness) —
   re-run the dataviz palette validator before changing any of them.
   ============================================================================ */

:root {
  /* 1 · WARM PAPER */
  --gk-bg: #faf9f6;
  --gk-surface: #fffefb;
  --gk-ink: #26221c;
  --gk-ink-2: #5d574d;
  --gk-muted: #8a8378;
  --gk-border: #e6e1d8;
  --gk-border-strong: #cbc4b6;

  /* accent = the cyan leaf, deepened (links, the one filled action) */
  --gk-accent: #007fa3;
  --gk-accent-deep: #00607c;
  --gk-on-accent: #ffffff;

  /* 6 · SIX LEAVES — categorical, fixed order, validated on paper */
  --gk-cat-0: #007fa3;  --gk-cat-0-soft: #d7e8ea;   /* cyan  */
  --gk-cat-1: #c94f58;  --gk-cat-1-soft: #f3e1e0;   /* coral */
  --gk-cat-2: #5c8a27;  --gk-cat-2-soft: #e4e9d9;   /* green */
  --gk-cat-3: #9d4270;  --gk-cat-3-soft: #eddfe3;   /* plum  */
  --gk-cat-4: #a3780a;  --gk-cat-4-soft: #eee7d5;   /* gold  */
  --gk-cat-5: #009b83;  --gk-cat-5-soft: #d7ece6;   /* teal  */

  /* 12 · STATUS IS A WORD — tints reuse the leaf family */
  --gk-ok: #4a7020;        --gk-ok-soft: #e4e9d9;
  --gk-warn: #8a6508;      --gk-warn-soft: #eee7d5;
  --gk-bad: #b03a44;       --gk-bad-soft: #f3e1e0;
  --gk-neutral: #5d574d;   --gk-neutral-soft: #edeae3;

  /* 3 · QUIET TYPE, SPOKEN HEADINGS */
  --gk-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gk-font-head: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, serif;
  --gk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 5 · HAIRLINE STRUCTURE */
  --gk-radius: 6px;        /* controls */
  --gk-radius-card: 10px;  /* cards */
  --gk-leaf-radius: 50% 50% 50% 2px;  /* 7 · EVERY MEMBER A LEAF */

  --gk-measure: 62rem;     /* 9 · THE MEAT IS THE PAGE */
  color-scheme: light;
}

/* Paper only: the dashboards render light in every OS theme (golda 2026-07-22).
   Forms must read at a glance — light fields, dark ink, visible borders. */

/* ---- base ------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gk-bg);
  color: var(--gk-ink);
  font-family: var(--gk-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 3 · SPOKEN HEADINGS — serif, book warmth, no shouting weights */
h1, h2, h3 {
  font-family: var(--gk-font-head);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h1 { font-size: 1.6rem; margin-top: 0.5rem; }
h2 { font-size: 1.15rem; margin-top: 1rem; }
h3 { font-size: 1rem; margin-top: 0.75rem; }

p { margin: 0.4rem 0 0.8rem; }

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

small { color: var(--gk-ink-2); }

.gk-muted, .gk-placeholder { color: var(--gk-muted); font-size: 0.9rem; }
.gk-mono {
  font-family: var(--gk-font-mono);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

/* ---- chrome: header / footer (9 · THE MEAT IS THE PAGE) ---------------- */

.gk-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--gk-border);
  background: var(--gk-surface);
}
.gk-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--gk-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gk-ink);
}
.gk-brand:hover { color: var(--gk-ink); text-decoration: none; }
.gk-brand svg { display: block; }

.gk-tabs { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.gk-tab {
  padding: 0.3rem 0.65rem;
  border-radius: var(--gk-radius);
  color: var(--gk-ink-2);
  font-size: 0.88rem;
}
.gk-tab:hover { color: var(--gk-ink); background: var(--gk-neutral-soft); text-decoration: none; }
.gk-tab[aria-current="page"] { color: var(--gk-ink); background: var(--gk-neutral-soft); }

.gk-org { color: var(--gk-muted); font-size: 0.88rem; }
.gk-user { margin-left: auto; color: var(--gk-muted); font-size: 0.88rem; }

/* account menu: the name is the only chrome; actions fold beneath it */
.gk-usermenu { position: relative; display: inline-block; }
.gk-usermenu > summary {
  list-style: none;               /* hide the default disclosure triangle */
  cursor: pointer;
  color: var(--gk-ink-2);
  padding: 0.15rem 0.1rem;
  user-select: none;
}
.gk-usermenu > summary::-webkit-details-marker { display: none; }
.gk-usermenu > summary::after { content: " \25BE"; color: var(--gk-muted); font-size: 0.85em; }
.gk-usermenu > summary:hover { color: var(--gk-ink); }
.gk-usermenu[open] > summary { color: var(--gk-ink); }
.gk-usermenu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  box-shadow: 0 6px 20px rgba(38, 34, 28, 0.1);
  padding: 0.25rem;
  z-index: 20;
}
.gk-usermenu-pop a {
  padding: 0.4rem 0.6rem;
  border-radius: var(--gk-radius);
  color: var(--gk-ink-2);
  white-space: nowrap;
}
.gk-usermenu-pop a:hover { background: var(--gk-neutral-soft); color: var(--gk-ink); text-decoration: none; }

.gk-main {
  max-width: var(--gk-measure);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2rem;
}

.gk-footer {
  max-width: var(--gk-measure);
  margin: 2rem auto 0;
  padding: 1rem 1.25rem 1.5rem;
  color: var(--gk-muted);
  font-size: 0.83rem;
  border-top: 1px solid var(--gk-border);
}

/* 13 · ONE TRUNK PER PAGE — the h1 line, with at most one quiet cross-link */
.gk-pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- cards (5 · HAIRLINE STRUCTURE: paper on paper, no shadow) ---------- */

.gk-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  /* Wide ledgers scroll inside their card; the page itself never scrolls sideways. */
  overflow-x: auto;
}
.gk-card > :first-child { margin-top: 0; }

/* ---- buttons (10 · SMALL QUIET BUTTONS) --------------------------------- */

.gk-btn, button {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  font-family: var(--gk-font-body);
  font-size: 0.85rem;
  color: var(--gk-ink);
  background: var(--gk-surface);
  border: 1px solid var(--gk-border-strong);
  border-radius: var(--gk-radius);
  cursor: pointer;
  text-decoration: none;
}
.gk-btn:hover, button:hover { border-color: var(--gk-ink-2); text-decoration: none; }

/* the ONE filled action a page is for — still small */
.gk-btn-primary, button.gk-btn-primary {
  background: var(--gk-accent);
  border-color: var(--gk-accent);
  color: var(--gk-on-accent);
  font-weight: 600;
}
.gk-btn-primary:hover { background: var(--gk-accent-deep); border-color: var(--gk-accent-deep); }

/* destructive: coral-bordered, never coral-filled */
.gk-btn-danger { color: var(--gk-bad); border-color: var(--gk-bad); background: var(--gk-surface); }

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

input, select, textarea {
  font-family: var(--gk-font-body);
  font-size: 0.9rem;
  color: var(--gk-ink);
  background: var(--gk-surface);
  border: 1px solid var(--gk-border-strong);
  border-radius: var(--gk-radius);
  padding: 0.3rem 0.5rem;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gk-accent);
  outline-offset: 1px;
}
label { color: var(--gk-ink-2); font-size: 0.9rem; }
fieldset {
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
}
legend {
  font-family: var(--gk-font-head);
  font-weight: 600;
  padding: 0 0.4rem;
}
.gk-form-row { margin: 0.5rem 0; }
.gk-form-row label { display: inline-block; min-width: 8rem; }
.gk-error { color: var(--gk-bad); font-size: 0.85rem; }

/* ---- ledger tables (11 · LEDGER TABLES) ---------------------------------- */

table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gk-border);
  vertical-align: middle;
}
th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gk-muted);
  border-bottom-color: var(--gk-border-strong);
}
.gk-num, .gk-final, td.num, th.num {
  text-align: right;
  font-family: var(--gk-font-mono);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}
th.gk-num, th.num { font-family: var(--gk-font-body); font-size: 0.75rem; }
.gk-final { font-weight: 600; }
.gk-total {
  margin-top: 0.5rem;
  font-weight: 600;
  border-top: 1px solid var(--gk-border-strong);
  padding-top: 0.4rem;
}

/* ---- status words (12 · STATUS IS A WORD, NOT A COLOR) ------------------- */

.gk-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.gk-badge-open, .gk-badge-draft { background: var(--gk-warn-soft); color: var(--gk-warn); }
.gk-badge-approved, .gk-badge-live { background: var(--gk-ok-soft); color: var(--gk-ok); }
.gk-badge-closed { background: var(--gk-neutral-soft); color: var(--gk-neutral); }
.gk-badge-failed { background: var(--gk-bad-soft); color: var(--gk-bad); }

.gk-verify-ok { color: var(--gk-ok); font-weight: 600; }
.gk-verify-bad { color: var(--gk-bad); font-weight: 600; }
.gk-winner { font-weight: 600; color: var(--gk-ok); }

/* quiet aside, not an alert */
.gk-note {
  border-left: 2px solid var(--gk-border-strong);
  background: var(--gk-surface);
  padding: 0.5rem 0.8rem;
  border-radius: 0 var(--gk-radius) var(--gk-radius) 0;
  font-size: 0.9rem;
  color: var(--gk-ink-2);
  margin: 0.6rem 0;
}

.gk-messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.gk-messages li {
  border: 1px solid var(--gk-border);
  border-left: 2px solid var(--gk-accent);
  background: var(--gk-surface);
  border-radius: 0 var(--gk-radius) var(--gk-radius) 0;
  padding: 0.5rem 0.8rem;
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.gk-messages li.error { border-left-color: var(--gk-bad); }
.gk-messages li.success { border-left-color: var(--gk-ok); }

/* ---- leaves (6 + 7): categorical identity ------------------------------- */

.gk-cat-0 { --gk-cat: var(--gk-cat-0); --gk-cat-soft: var(--gk-cat-0-soft); }
.gk-cat-1 { --gk-cat: var(--gk-cat-1); --gk-cat-soft: var(--gk-cat-1-soft); }
.gk-cat-2 { --gk-cat: var(--gk-cat-2); --gk-cat-soft: var(--gk-cat-2-soft); }
.gk-cat-3 { --gk-cat: var(--gk-cat-3); --gk-cat-soft: var(--gk-cat-3-soft); }
.gk-cat-4 { --gk-cat: var(--gk-cat-4); --gk-cat-soft: var(--gk-cat-4-soft); }
.gk-cat-5 { --gk-cat: var(--gk-cat-5); --gk-cat-soft: var(--gk-cat-5-soft); }

/* a member's leaf: swatch form (beside their name in a ledger) */
.gk-leaf {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--gk-leaf-radius);
  background: var(--gk-cat, var(--gk-muted));
  margin-right: 0.45rem;
  vertical-align: -0.05em;
}

/* avatar form: soft leaf with the person's initial in their deep color */
.gk-leaf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--gk-leaf-radius);
  background: var(--gk-cat-soft, var(--gk-neutral-soft));
  color: var(--gk-cat, var(--gk-ink-2));
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

/* SVG marks (pie wedges) take the leaf color as fill */
rect.gk-cat-0, path.gk-cat-0, circle.gk-cat-0 { fill: var(--gk-cat-0); }
rect.gk-cat-1, path.gk-cat-1, circle.gk-cat-1 { fill: var(--gk-cat-1); }
rect.gk-cat-2, path.gk-cat-2, circle.gk-cat-2 { fill: var(--gk-cat-2); }
rect.gk-cat-3, path.gk-cat-3, circle.gk-cat-3 { fill: var(--gk-cat-3); }
rect.gk-cat-4, path.gk-cat-4, circle.gk-cat-4 { fill: var(--gk-cat-4); }
rect.gk-cat-5, path.gk-cat-5, circle.gk-cat-5 { fill: var(--gk-cat-5); }

/* the pie is a pie — round chart, quiet gaps between wedges */
.gk-pie-svg {
  width: 13rem;
  max-width: 60vw;
  margin: 0.75rem auto;
  display: block;
}
.gk-pie-svg path, .gk-pie-svg circle {
  stroke: var(--gk-surface);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* ---- bars (14 THE PIE IS A CANOPY · 15 TWO TALLIES, SAME RULER) ---------- */

.gk-bar-svg {
  width: 100%;
  height: 2rem;
  margin: 0.75rem 0;
  border-radius: 4px;
  display: block;
  background: var(--gk-neutral-soft);
}

.gk-bar-row { margin: 0.5rem 0; }
.gk-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  gap: 0.5rem;
}
.gk-bar-label .gk-num { font-size: 0.82rem; }
.gk-bar-track {
  background: var(--gk-neutral-soft);
  border-radius: 3px;
  height: 0.7rem;
  overflow: hidden;
  margin-top: 0.15rem;
}
.gk-bar-fill { background: var(--gk-accent); height: 100%; min-width: 1px; }
.gk-bar-fill.raw { background: var(--gk-muted); }

/* per-row quiet bar inside a ledger */
.gk-rowbar-track { background: var(--gk-neutral-soft); border-radius: 3px; width: 8rem; max-width: 40vw; }
.gk-rowbar { height: 0.45rem; border-radius: 3px; min-width: 1px; background: var(--gk-cat, var(--gk-accent)); }

/* ---- genesis checklist (choose-your-own-adventure, any order) ------------ */

.gk-cyoa { display: flex; gap: 1.25rem; align-items: flex-start; }
.gk-cyoa-index {
  position: sticky;
  top: 1rem;
  flex: 0 0 11rem;
}
.gk-cyoa-index ul { list-style: none; margin: 0; padding: 0; }
.gk-cyoa-index li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  color: var(--gk-ink);
  text-decoration: none;
}
.gk-cyoa-index li a:hover { background: var(--gk-neutral-soft); }
.gk-cyoa-count {
  font-size: 0.78rem;
  color: var(--gk-muted);
  min-width: 2.2rem;
  font-variant-numeric: tabular-nums;
}
.gk-cyoa-alldone { color: var(--gk-ok); }
.gk-cyoa-modules { flex: 1; min-width: 0; }
.gk-cyoa-items { list-style: none; margin: 0; padding: 0; }
.gk-cyoa-items li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
}
.gk-cyoa-items form { display: inline; }
/* Title, done-stamp and brief share one column so the brief lines up under the
   title rather than under the checkbox. */
.gk-cyoa-body { flex: 1; min-width: 0; }
/* How to do the item. Gone once it is ticked: at that point it is just noise. */
.gk-cyoa-brief {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--gk-muted);
  max-width: 62ch;
}
.gk-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  line-height: 1;
  font-size: 0.8rem;
  border: 1px solid var(--gk-muted);
  border-radius: 4px;
  background: var(--gk-surface);
  color: var(--gk-ok);
  cursor: pointer;
  vertical-align: middle;
}
.gk-checkbox.is-done { border-color: var(--gk-ok); }
.gk-done-title { color: var(--gk-muted); text-decoration: line-through; }
.gk-done-meta { font-size: 0.78rem; }
@media (max-width: 640px) {
  .gk-cyoa { flex-direction: column; }
  .gk-cyoa-index { position: static; flex: none; width: 100%; }
  .gk-cyoa-index ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
}

/* ---- provenance (8 · PROVENANCE IS A BRANCH) ----------------------------- */

details.gk-trace { margin: 0.25rem 0; }
details.gk-trace summary {
  cursor: pointer;
  color: var(--gk-accent);
  font-size: 0.88rem;
}
details.gk-trace summary:hover { color: var(--gk-accent-deep); }
details.gk-trace[open] > *:not(summary) {
  margin-left: 0.35rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--gk-border-strong);  /* the branch line */
}
details.gk-trace table { margin: 0.4rem 0 0.8rem; }
details.gk-trace th, details.gk-trace td {
  padding: 0.25rem 0.5rem;
  font-size: 0.88em;
  border-bottom-color: var(--gk-border);
}

/* ---- seats at the table (16 · A DRAW YOU CAN VERIFY) --------------------- */

.gk-seats { list-style: none; padding: 0; margin: 0.5rem 0; }
.gk-seats li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  margin-bottom: 0.4rem;
  background: var(--gk-surface);
}

/* ---- ballots: the deliberate exception to small buttons ------------------ */
/* Casting a vote is the page's one action and must be sure on a phone. */

.gk-choices { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.8rem 0; }
.gk-choice button {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--gk-border-strong);
  border-radius: var(--gk-radius-card);
  background: var(--gk-surface);
  color: var(--gk-ink);
  text-align: left;
}
.gk-choice button:hover { border-color: var(--gk-accent); }
.gk-choice.chosen button {
  border-color: var(--gk-accent);
  background: var(--gk-cat-0-soft);
  color: var(--gk-ink);
  font-weight: 600;
}

/* ---- misc kept from the app sheets --------------------------------------- */

.gk-queue { border-left: 2px solid var(--gk-warn); }
.gk-missing, .gk-audit { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.gk-adjust-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.gk-adjust-form input[type="number"] { width: 6rem; }
.gk-adjust-form input[type="text"] { flex: 1 1 12rem; min-width: 10rem; }



/* radio lists (e.g. Django RadioSelect) read as quiet choices, not machinery */
fieldset > ul, fieldset div > ul { list-style: none; padding-left: 0; margin: 0.25rem 0 0.5rem; }
fieldset > ul li, fieldset div > ul li { margin: 0.2rem 0; }
fieldset > ul label, fieldset div > ul label { color: var(--gk-ink); }

/* ---- unfolds (19 · DETAILS UNFOLD) ---------------------------------------- */
/* High level visible first; detail opens in place. Summary states the concept
   AND the defaults, so skipping it is an informed choice, not a leap. */

details.gk-unfold {
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  background: var(--gk-surface);
  margin: 0.6rem 0;
}
details.gk-unfold > summary {
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  color: var(--gk-ink);
}
details.gk-unfold > summary .gk-muted { font-size: 0.85rem; }
details.gk-unfold[open] > summary { border-bottom: 1px solid var(--gk-border); }
details.gk-unfold > *:not(summary) { padding: 0 0.9rem; }
details.gk-unfold fieldset { border: none; padding: 0.25rem 0 0.75rem; margin: 0; }

/* ---- stat tiles (one headline number each; no chart needed) --------------- */

.gk-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.gk-tile {
  flex: 1 1 12rem;
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
  padding: 0.9rem 1rem;
}
.gk-tile .gk-tile-big {
  font-family: var(--gk-font-mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.gk-tile .gk-tile-big small { font-size: 0.65em; color: var(--gk-ink-2); font-family: var(--gk-font-body); }
.gk-tile .gk-tile-lbl {
  color: var(--gk-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gk-tile-issued { border-left: 2px solid var(--gk-ok); }
.gk-tile-pending { border-left: 2px solid var(--gk-warn); }

/* ---- the plain door (17) -------------------------------------------------- */

.gk-door {
  max-width: 22rem;
  margin: 3.5rem auto;
  text-align: center;
}
.gk-door h1 { font-size: 1.35rem; }
.gk-door form { text-align: left; margin-top: 1rem; }
.gk-door input { width: 100%; margin: 0.25rem 0 0.75rem; }

/* ---- invite mint form: grouped fields in a two-column grid ---------------- */

.gk-invite-lede { margin: 0 0 0.25rem; }
.gk-fieldgroup { margin: 1rem 0 0.25rem; }
.gk-fieldgroup > h3 { font-size: 0.98rem; margin: 0 0 0.35rem; }
.gk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.25rem;
}
@media (max-width: 640px) { .gk-form-grid { grid-template-columns: 1fr; } }
.gk-field { display: flex; flex-direction: column; gap: 0.15rem; }
.gk-field.gk-span-2 { grid-column: 1 / -1; }
.gk-field input, .gk-field select, .gk-field textarea { width: 100%; }
.gk-field label small, .gk-check small { color: var(--gk-muted); font-weight: 400; }
.gk-check input { width: auto; margin-right: 0.4rem; }
.gk-mint-row { margin: 1rem 0 0.25rem; }

/* members table: role/rate controls in one quiet row; org rate as a footline */
.gk-member-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gk-rate-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.gk-rate-line input { width: 6rem; }

/* just minted: the fresh link at the top of the page, handed straight to the
   inviter — first thing seen, nothing to read, nothing to hunt for */
.gk-minted {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--gk-surface);
  border: 2px solid var(--gk-accent);
  border-radius: var(--gk-radius);
}
.gk-minted h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.gk-minted .gk-sharelink { margin: 0; }

/* copy = the two-page glyph, not a word; a check on success */
.gk-copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  line-height: 0;
  color: var(--gk-ink-2);
  background: none;
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
  cursor: pointer;
}
.gk-copy-icon:hover { color: var(--gk-accent); border-color: var(--gk-accent); }
.gk-copy-icon.gk-copied { color: var(--gk-accent); border-color: var(--gk-accent); }

/* invite row actions: revoke (word) + delete (trash glyph), kept on one line */
.gk-row-actions { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.gk-row-actions form { margin: 0; }
/* delete = quiet trash glyph that reddens on intent, matching the copy icon's weight */
.gk-del-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  line-height: 0;
  color: var(--gk-ink-2);
  background: none;
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
  cursor: pointer;
}
.gk-del-icon:hover { color: var(--gk-bad); border-color: var(--gk-bad); }

/* narrow single-column pages (profile, simple forms) */
.gk-narrow { max-width: 34rem; margin: 0 auto; }
/* public "About <org>" stub: quiet, centered, one leaf */
.gk-about { text-align: center; padding-top: 2rem; }
.gk-about .gk-leaf { display: inline-block; margin-bottom: 0.75rem; transform: scale(1.6); }
.gk-about h1 { margin: 0 0 0.25rem; }
.gk-about-url { color: var(--gk-muted); margin: 0 0 1.25rem; font-size: 0.9rem; }
.gk-about .gk-btn-primary { margin-top: 0.5rem; }
.gk-profile .gk-field { margin: 0 0 1rem; }
.gk-profile input[readonly] { color: var(--gk-muted); background: var(--gk-neutral-soft); }

/* member stake: current share %, an inline grant, and the granted total */
.gk-stake { white-space: nowrap; }
.gk-stake-pct { font-weight: 600; margin-right: 0.5rem; }
.gk-grant-form { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.gk-grant-form input { width: 9rem; }
.gk-stake-note { display: block; margin-top: 0.2rem; font-size: 0.8rem; }
/* quiet = a secondary action that shouldn't compete with the primary button */
.gk-btn-quiet { font-weight: 500; }

/* invites ledger: the share link is the page's product — copyable, never a flash */
.gk-sharelink { display: flex; align-items: center; gap: 0.4rem; }
.gk-sharelink input {
  flex: 1;
  min-width: 11rem;
  font-family: var(--gk-font-mono);
  font-size: 0.78rem;
  color: var(--gk-ink-2);
}

/* the invitee's door: the inviter's words, then one way in */
.gk-invite-words {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  text-align: left;
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
}
.gk-invite-words p { margin: 0.25rem 0; }
.gk-invite-words-from {
  color: var(--gk-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gk-door .gk-ways { margin-top: 1rem; }
.gk-door .gk-ways .gk-btn-primary { width: 100%; }
.gk-door-fine { font-size: 0.8rem; margin: 0.5rem 0 0; }

/* ---- cohort progress (staff + mentors: every team at once) --------------- */

.gk-matrix { width: 100%; border-collapse: collapse; }
.gk-matrix th, .gk-matrix td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--gk-border);
  text-align: left;
  vertical-align: middle;
}
.gk-matrix thead th { border-bottom: 1px solid var(--gk-border-strong); font-weight: 600; }
.gk-matrix tbody tr:last-child th, .gk-matrix tbody tr:last-child td { border-bottom: none; }
.gk-matrix tbody tr:hover { background: var(--gk-neutral-soft); }
/* Row headers are the team's name, not a column label: undo the small-caps
   label styling `th` carries, so the name reads as the row's subject. */
.gk-matrix tbody th.gk-matrix-team {
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gk-ink);
  white-space: nowrap;
}
.gk-matrix th.gk-matrix-total, .gk-matrix td.gk-matrix-total { text-align: right; }
.gk-matrix-mod { display: block; font-size: 0.85rem; }
.gk-matrix-week { display: block; font-size: 0.72rem; font-weight: 400; }
.gk-matrix-note { margin: 0.75rem 0 0; }

/* One segment per item, filled when done: the count is shown, never encoded
   in a shade (5 · HAIRLINE STRUCTURE). 2px surface gap between segments. */
.gk-seg { display: inline-flex; gap: 2px; vertical-align: middle; }
.gk-seg-part {
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--gk-border);
}
.gk-seg-part.is-done { background: var(--gk-accent); }
.gk-seg-count {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--gk-ink-2);
  font-variant-numeric: tabular-nums;
}

/* Sorted ascending, one series, so no legend: the heading names it. */
.gk-rank { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.gk-rank li {
  display: grid;
  grid-template-columns: minmax(8rem, 24rem) minmax(0, 26rem) 2rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
}
.gk-rank-label { font-size: 0.88rem; }
.gk-rank-track { height: 8px; background: var(--gk-border); border-radius: 4px; }
.gk-rank-bar { display: block; height: 100%; background: var(--gk-accent); border-radius: 4px; }
.gk-rank-value {
  text-align: right;
  font-size: 0.8rem;
  color: var(--gk-ink-2);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .gk-rank li { grid-template-columns: 1fr 2rem; }
  .gk-rank-track { grid-column: 1 / -1; }
}


/* ---- profile to-do (the page people join through) ----------------------- */
.gk-todo { list-style: none; margin: 0 0 1rem; padding: 0; }
.gk-todo li { padding: 0.3rem 0 0.3rem 1.8rem; position: relative; }
.gk-todo li::before {
  content: ""; position: absolute; left: 0; top: 0.45rem;
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--gk-border-strong); background: var(--gk-surface);
}
.gk-todo li.done { color: var(--gk-ink-2); }
.gk-todo li.done::before { background: var(--gk-ok); border-color: var(--gk-ok); }
.gk-todo li.done::after {
  content: ""; position: absolute; left: 4px; top: 0.68rem;
  width: 7px; height: 3.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.gk-firstthing h2 { margin-top: 0; font-size: 1.05rem; }
.gk-firstthing .gk-lede { margin: 0 0 0.8rem; color: var(--gk-ink-2); }
.gk-actions { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.gk-pullrow { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.gk-pullrow .gk-field { flex: 1 1 18rem; margin: 0; }

/* the preview: the real public page in a frame, so what you see IS the page.
   Sized like a browser window, quiet border, never taller than the screen. */
.gk-preview {
  margin: 0.9rem 0 0.7rem;
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-card);
  overflow: hidden;
  background: var(--gk-surface);
}
.gk-preview iframe {
  display: block;
  width: 100%;
  height: min(70vh, 34rem);
  border: 0;
}
/* the picture they have now, so "upload" is a change to something, not a guess */
.gk-picnow { margin: 0 0 0.5rem; }
.gk-picnow img {
  width: 64px; height: 64px; object-fit: contain;
  border: 1px solid var(--gk-border); border-radius: 8px; background: #fff;
}
.gk-picnow.round img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
.gk-previewline { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.gk-previewline .gk-sharelink { flex: 1 1 22rem; }

/* ---- the three lists on a team's join page: things they made, pictures,
   what they are up to. Each row is its own little form (see settings.html). */

.gk-rows { list-style: none; margin: 0 0 1rem; padding: 0; }
.gk-rows li {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0; border-top: 1px solid var(--gk-border);
}
.gk-rows li:first-child { border-top: none; }
.gk-rows li > span { flex: 1; min-width: 0; }
.gk-rows img {
  width: 72px; height: 52px; object-fit: cover; flex: none;
  border: 1px solid var(--gk-border); border-radius: 4px;
}
.gk-rows form, .gk-pics form { margin: 0; }

.gk-pics { list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.gk-pics li { display: flex; flex-direction: column; gap: 0.3rem; }
.gk-pics img {
  width: 100%; height: 96px; object-fit: cover;
  border: 1px solid var(--gk-border); border-radius: 6px;
}

.gk-addrow { display: grid; gap: 0.8rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gk-addrow button[type=submit] { justify-self: start; }