/* =========================================================
   Zeal Portal, the generators (Arc H)
   crew sheet editor, RAMS assembler, project brief, member view

   One stylesheet for the three project-tab surfaces and the
   freelancer's read-only pair. Every class is gx-* and every
   value is a token. Controls are the canonical components
   (.btn, .chip, .pill, .seg, .pl-input, .textarea, .card); this
   file only lays them out and adds the surface-specific bits:
   the kind badge, the counts line, the drift banner, the gaps
   list, the version rows.

   Geometry: cards and labels take --r-soft, act-on controls take
   --r-1 through the components they already are.

   The one phone rule sits at the foot inside the 430px gate
   (docs/mobile-contract.md §2): the member view is met on a
   phone first, so buttons go full width and rows stack there,
   and nowhere else.
   ========================================================= */

.gx { display: grid; gap: var(--s-5); max-width: 100%; }
.gx > .card + .card { margin-top: 0; }

/* ── the head: what this will produce, counts, staleness ── */
.gx-head { display: grid; gap: var(--s-2); }
.gx-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  justify-self: start;
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  letter-spacing: var(--track-body);
  color: var(--ink);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule-structural, var(--rule-2));
  border-radius: var(--r-soft);
  background: var(--paper);
}
.gx-badge__tier {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.gx-badge[data-kind="crew_pack"] .gx-badge__tier { color: var(--accent); }
.gx-counts,
.gx-hint,
.gx-note {
  margin: 0;
  font-family: var(--font-cd);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.gx-note { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-2); }
/* the one line saying why the personal chips are greyed (S1 note 12) */
.gx-locknote { color: var(--ink-3); font-style: italic; }
.gx-stale { margin: 0; font-family: var(--font-body); font-size: var(--t-small); color: var(--amber); }
.gx-err   { margin: 0; font-family: var(--font-body); font-size: var(--t-small); color: var(--red-status); }
.gx-ok    { margin: 0; font-family: var(--font-body); font-size: var(--t-small); color: var(--green); }

/* ── the drift banner (RAMS): amber for newer versions, red for withdrawn ── */
.gx-banner {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-soft);
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  border: 1px solid var(--amber);
  background: var(--amber-soft);
  color: var(--ink);
}
.gx-banner[data-tone="red"] {
  border-color: var(--red-status);
  background: var(--red-soft);
}
.gx-banner b { font-weight: var(--w-bold); }

/* ── cards: the canonical .card, with a tighter header ── */
.gx-card .card__header { margin-bottom: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.gx-card .card__title { font-size: var(--t-h5); text-transform: lowercase; }
.gx-card .card__meta  { font-size: var(--t-small); }
.gx-card__body { display: grid; gap: var(--s-3); }

/* ── rows: a label-value grid with an action slot ── */
.gx-rows { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.gx-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  min-width: 0;
}
.gx-row--head {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
}
.gx-row--3 { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) auto; }
.gx-row.is-excluded .gx-row__v,
.gx-row.is-excluded .gx-row__k { color: var(--ink-3); }
.gx-row__k { font-family: var(--font-cd); font-size: var(--t-form); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.gx-row__v { font-family: var(--font-std); font-size: var(--t-form); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.gx-row__v small,
.gx-row__sub {
  display: block;
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.gx-row__acts { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
/* the form column on a crew row: a dot and "complete" or "n gaps", nothing
   more; the gaps card underneath carries the detail (7 Sept 2026) */
.gx-row__form {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.gx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.gx-row__form[data-tone="ok"] .gx-dot { background: var(--green); }
.gx-row__form[data-tone="gap"] .gx-dot { background: var(--amber); }
.gx-row__form[data-tone="off"] .gx-dot { background: var(--rule-2); }
.gx-recipient-default { color: var(--ink-2); }
.gx-row .pl-input { width: auto; min-width: 0; }
/* no add row lives inside .gx-rows: the grid clips overflow for its corners,
   so pickers sit in a .gx-grid2 beside it (7 Sept 2026) */

/* ── fields: label over control ── */
.gx-field { display: grid; gap: var(--s-1); min-width: 0; }
.gx-label {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.gx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.gx-grid2 > .gx-field--wide { grid-column: 1 / -1; }
.gx .textarea { min-height: 72px; font-family: var(--font-body); font-size: var(--t-form); }

/* ── chips: a wrapped set, a locked one greyed with its reason in the title ── */
.gx-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gx-chips .chip { cursor: pointer; }
.gx-chips .chip[disabled] { cursor: not-allowed; opacity: 0.5; }
.gx-chips .chip.is-locked { cursor: default; }

/* ── the preset segmented control sits beside its hint ── */
.gx-segrow { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ── gaps: the worklist ── */
.gx-gaps { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.gx-gap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--paper);
}
.gx-gap__name { font-family: var(--font-std); font-weight: var(--w-medium); font-size: var(--t-form); color: var(--ink); }
.gx-gap__fields { grid-column: 1; font-family: var(--font-cd); font-size: var(--t-small); color: var(--ink-3); }
.gx-gap__fix { grid-column: 1 / -1; font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-3); margin: 0; }
.gx-gap .btn { grid-column: 2; grid-row: 1; }

/* ── versions ── */
.gx-versions { display: grid; gap: var(--s-1); }
.gx-ver {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--paper);
}
.gx-ver__v { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: var(--t-form); color: var(--ink); }
.gx-ver__meta { font-family: var(--font-cd); font-size: var(--t-small); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.gx-ver.is-superseded .gx-ver__v,
.gx-ver.is-superseded .gx-ver__meta { color: var(--ink-3); }

/* ── the foot: preview and generate ── */
.gx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-structural, var(--rule-2));
}
.gx-foot__acts { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }
.gx-unsaved { font-family: var(--font-cd); font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--amber); }
.gx-unsaved.is-saved { color: var(--ink-3); }

/* ── the check card's state line ── */
.gx-check { display: grid; gap: var(--s-2); }
.gx-check__line { margin: 0; font-family: var(--font-body); font-size: var(--t-form); color: var(--ink); line-height: var(--lh-body); }

/* ── blocks, grouped by family ── */
.gx-family { display: grid; gap: var(--s-2); }
.gx-family__name {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s-2) 0 0;
}
.gx-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--paper);
}
.gx-block.is-locked { background: var(--paper-2); }
.gx-block.is-suggested { border-color: var(--rule-3); }
.gx-block__title { font-family: var(--font-std); font-size: var(--t-form); color: var(--ink); }
.gx-block__meta { font-family: var(--font-cd); font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-3); }
.gx-block__meta.is-overdue { color: var(--amber); }
.gx-block__sugg { color: var(--accent); }

/* ── the updates log (brief) ── */
.gx-log { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.gx-log__row { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.gx-log__date { font-family: var(--font-cd); font-size: var(--t-small); color: var(--ink-3); }
.gx-log__body { font-family: var(--font-body); font-size: var(--t-form); color: var(--ink); line-height: var(--lh-body); overflow-wrap: anywhere; }
.gx-log__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }

/* ── pointers: things that live elsewhere ── */
.gx-pointers { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.gx-pointer { display: flex; justify-content: space-between; gap: var(--s-3); font-family: var(--font-body); font-size: var(--t-form); color: var(--ink-2); padding: var(--s-1) 0; border-bottom: 1px dashed var(--rule); }
.gx-pointer__where { font-family: var(--font-cd); font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); }

/* ── the member view: two cards, read only ── */
.gx-member { display: grid; gap: var(--s-4); max-width: 640px; }
.gx-member .card,
.gx-member__card { display: grid; gap: var(--s-2); }
.gx-member__kind { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: var(--t-h5); text-transform: lowercase; color: var(--ink); margin: 0; }
.gx-member__ver { font-family: var(--font-cd); font-size: var(--t-small); letter-spacing: 0.02em; color: var(--ink-3); margin: 0; }
.gx-member__why { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-2); line-height: var(--lh-body); margin: 0; }

/* ── the one phone rule ────────────────────────────────────
   The member view is the surface met on a phone (S5). Inside the
   only phone gate (docs/mobile-contract.md §2): buttons go full
   width, the grids collapse to one column, nothing fixed. A rule
   here reaches no desktop viewport. */
@media (max-width: 430px) {
  .gx .btn,
  .gx-member .btn { width: 100%; justify-content: center; }
  .gx-grid2 { grid-template-columns: 1fr; }
  .gx-row,
  .gx-row--3,
  .gx-row--head { grid-template-columns: 1fr; }
  .gx-row--head { display: none; }
  .gx-row__acts { justify-content: flex-start; }
  .gx-ver { grid-template-columns: 3.5em minmax(0, 1fr); }
  .gx-gap { grid-template-columns: 1fr; }
  .gx-gap .btn { grid-column: 1; grid-row: auto; }
  .gx-log__row { grid-template-columns: 1fr; }
  .gx-log__add { grid-template-columns: 1fr; }
  .gx-foot { flex-direction: column; align-items: stretch; }
  .gx-foot__acts { flex-direction: column; }
}