/*
 * Bright, plain, readable — now set in Inter, with the type doing the ranking.
 *
 * ## The rule that has not changed
 *
 * **Where a consequence would be explained, it is named in the control** — a
 * button reads "Post job · 100 sat" rather than carrying a paragraph beside
 * it. That is a label, not a warning, so nothing true was suppressed to make
 * the page quiet. A restyle that makes the page prettier and the next action
 * less obvious is a regression, and that rule is what prevents it.
 *
 * ## What the type does now, and where it came from
 *
 * The owner asked for the font and formatting of family.co. Read off that
 * page rather than copied from it: Inter, a tight scale of 17/15/13, weights
 * 400 and 500 with 600 kept for genuine emphasis, and **negative tracking
 * that grows with size** — its signature, and the reason its headings look
 * set rather than typed. Ranking is done with WEIGHT and SIZE, not colour,
 * so colour stays free to mean something.
 *
 * Inter is self-hosted at `./inter.woff2` — one variable latin subset, 48 KB,
 * every weight. `font-src 'self'` (index.html) refuses a CDN and refuses an
 * @import, and a same-origin file needs no change to that policy. The OFL
 * requires the notice to travel with the font: `./inter-license.txt`.
 *
 * ## What guards the button that spends money — MEASURED, and NOT `--accent`
 *
 * ```
 * resting   .go--primary is  --ink  #121212, white on it   18.73:1
 * hover     it becomes       --accent #1a56db, white on it  6.18:1
 * ```
 *
 * **`--ink` is the contrast-critical token here, and `--accent` is critical
 * only for the hover state.** This paragraph previously said the accent was
 * worn by the pay button. That was false the moment the same commit made the
 * button ink — and the cost is not untidiness: **it aims the next reader at
 * the wrong token.** Someone darkening or lightening `--accent` for a link
 * would pass their own review and never touch the colour actually carrying
 * the amount. Change either of the two above and re-measure both states.
 *
 * ## A separate note: the one place we deliberately do NOT match family.co
 *
 * Its blue is #1A88F8, which is **3.55:1** on white and fails normal-text
 * contrast. It is refused wherever text sits on it. The warmth of its
 * neutrals is taken in full, because nothing is legible-or-not by those.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  /* One variable file covers the whole range, so 400/500/600 cost no extra request. */
  font-weight: 100 900;
  font-display: swap;
  src: url("./inter.woff2") format("woff2");
}
:root {
  /* Warm neutrals, read off family.co. The paper is not white and the ink is not black. */
  --bg: #fbfaf9; --panel: #ffffff; --line: #eae6dd; --ink: #121212;
  --dim: #6d6c6b; --accent: #1a56db; --warn: #8a5a00; --bad: #a11; --ok: #175c2c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Tracking tightens as type grows — the family.co signature, in one place. */
  --track-display: -.022em; --track-head: -.014em; --track-body: -.011em;
  --r-card: 12px; --r-control: 8px; --r-chip: 6px;
  /*
   * ONE vertical scale. Every gap on the page is one of these six, so the
   * rhythm is a decision made once rather than six times in six files.
   * Spacing was ad-hoc before — .6/.7/.8/1/1.5/1.6/2rem, none of them related
   * — and that is the half a reader feels without being able to name.
   */
  --s1: .25rem; --s2: .5rem; --s3: .85rem; --s4: 1.4rem; --s5: 2.2rem; --s6: 3.5rem;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Inter's own optical sizing and tabular figures — the second is why columns
     of sats line up without a monospace fallback doing it for them. */
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}
h1 { font-size: 1.65rem; font-weight: 600; margin: 0 0 .15rem; letter-spacing: var(--track-display); }
/*
 * The step heading. It was uppercase, letterspaced OUT and dimmed — three
 * devices to say "this is a heading". Inter at 500 says it with one, and the
 * step title is the most important word on a page that shows one step.
 */
h2 { font-size: 1.05rem; font-weight: 500; margin: 0 0 .8rem; letter-spacing: var(--track-head); color: var(--ink); }
h3 { font-size: .95rem; font-weight: 500; margin: 1.2rem 0 .3rem; letter-spacing: var(--track-head); }
code { font-family: var(--mono); font-size: .88em; }
em { font-style: normal; color: var(--dim); font-weight: 400; font-size: .82em; }
.muted, .sub { color: var(--dim); font-size: .88rem; }

.top { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.sub { margin: 0 0 .5rem; }
.status { font-family: var(--mono); font-size: .8rem; color: var(--dim); margin: 0 0 .6rem; }
.status__note { margin-left: .35rem; }
.status__warn { margin-left: .35rem; color: var(--warn); }
.disclosure {
  margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--accent);
  background: var(--panel); font-size: .87rem; max-width: 70ch;
}

main { display: grid; gap: 1rem; padding: 1rem 1.25rem 2rem; max-width: 1100px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.15rem 1.25rem; }
.panel--wall { border-color: var(--warn); }

/* Board */
.board { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: var(--s3); }
.seat {
  display: grid; gap: .25rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--panel); color: var(--ink); border: 1px solid #e3ded4;
  border-radius: var(--r-control); padding: .7rem .8rem;
}
.seat:hover { border-color: var(--accent); }
.seat--selected { border-color: var(--accent); background: #eef3fd; }
.seat--stale { opacity: .55; }
.seat__head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.seat__name { font-weight: 500; letter-spacing: var(--track-head); overflow-wrap: anywhere; }
.seat__rate { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.seat__meta { display: flex; gap: .3rem; flex-wrap: wrap; }
.seat__about { color: var(--dim); font-size: .8rem; overflow-wrap: anywhere; }
.seat__fact { display: flex; gap: .4rem; font-size: .78rem; font-family: var(--mono); }
.seat__label { color: var(--dim); min-width: 5.5em; }
.seat__value { overflow-wrap: anywhere; }
.seat__value--unstated { color: #8a8a80; font-style: italic; }
.badge { font-size: .72rem; padding: .1rem .4rem; border-radius: var(--r-chip); border: 1px solid var(--line); }
.badge--ok { color: var(--ok); border-color: var(--ok); }
.badge--off { color: var(--warn); border-color: #5a4526; }
.badge--muted { color: var(--dim); }
.empty { color: var(--warn); }

/* Composer */
.target { margin-bottom: .8rem; font-size: .87rem; }
.field { display: grid; gap: .25rem; margin-bottom: .7rem; }
.field__label { font-size: .8rem; color: var(--dim); display: flex; gap: .4rem; align-items: baseline; }
.field-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
textarea, input[type="text"], input[type="number"], select {
  background: var(--panel); color: var(--ink); border: 1px solid #d6d1c6;
  border-radius: var(--r-control); padding: .6rem .7rem; font: inherit; width: 100%;
  letter-spacing: var(--track-body);
}
textarea::placeholder, input::placeholder { color: #9a968d; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Was monospace, beside two Inter inputs in the SAME field group — one
   grouping in two typefaces, which reads as unconsidered rather than
   deliberate. It is prose a person writes, not a value they check. */
textarea { font-size: .95rem; line-height: 1.5; resize: vertical; min-height: 8.5rem; }
.filters { border: 1px solid var(--line); border-radius: 6px; padding: .7rem; margin: 0; }
.filters legend { font-size: .8rem; color: var(--dim); padding: 0 .3rem; }
.checks { display: flex; gap: .8rem; flex-wrap: wrap; }
.check { display: flex; gap: .3rem; align-items: center; font-family: var(--mono); font-size: .85rem; }
.check input { width: auto; }

/* Price */
.price__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.price__label { color: var(--dim); font-size: .88rem; }
/* An amount to READ, not a key to compare character by character. Inter's
   tabular figures line the column up without monospace doing it, and the
   stated rule — mono for keys and amounts — kept only the half that earns it:
   a key is compared, a price is read. */
.price__value { font-weight: 500; color: var(--ink); letter-spacing: var(--track-head); }
.price__explain { color: var(--dim); font-size: .8rem; }
.price__caution { margin: .8rem 0 0; padding: .6rem .8rem; background: #fdf3e0; border-left: 3px solid var(--warn); font-size: .85rem; }

.notes { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.note { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; font-size: .84rem; padding: .35rem .5rem; border-radius: 4px; }
.note--blocker { background: #fdecec; border-left: 3px solid var(--bad); }
.note--warning { background: #fdf6da; border-left: 3px solid var(--warn); }
.note__cite { font-family: var(--mono); color: var(--dim); font-size: .78rem; }

.go {
  margin-top: 1rem; font: inherit; font-weight: 500; cursor: pointer;
  background: var(--accent); color: #ffffff; border: 0; border-radius: var(--r-control);
  padding: .65rem 1.15rem; letter-spacing: var(--track-head);
}
.go:disabled { background: #eeeae1; color: #9a968d; cursor: not-allowed; }

/* Wall */
.wall__lede { padding: .7rem .9rem; background: #fdf3e0; border-left: 3px solid var(--warn); margin: 0 0 1rem; }
.wall__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; }
.wall__step { display: grid; gap: .2rem; }
.wall__step-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.wall__step-title { font-weight: 500; letter-spacing: var(--track-head); }
.wall__cite { font-family: var(--mono); font-size: .72rem; padding: .05rem .35rem; border-radius: 3px; border: 1px solid var(--line); color: var(--dim); }
.wall__cite--impl { color: var(--warn); border-color: #5a4526; }
.wall__step-body { color: var(--dim); font-size: .87rem; }
.wall__built { margin: 1rem 0 0; font-size: .87rem; }
.wall__h { margin-bottom: .2rem; }
.wall__json {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: .7rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem; color: #b9c6d3;
}

.foot { border-top: 1px solid var(--line); padding: var(--s4) var(--s4) var(--s5); color: var(--dim); font-size: .78rem; }
.foot p { max-width: 80ch; margin: 0; }

/* --- Slice 2: identity and funding --- */
.panel--danger { border-color: var(--bad); }
.disclosure--danger { border-left-color: var(--bad); background: #fdecec; }
.danger { color: var(--bad); }
.badge--danger { color: var(--bad); border-color: #5a2a2e; }

.ack { display: grid; gap: .5rem; margin: .8rem 0; }
.ack__item {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .55rem .7rem;
  font-size: .87rem; cursor: pointer;
}
.ack__item:hover { border-color: var(--bad); }
.ack__item input { width: auto; margin-top: .2rem; }
.ack__item--final { border-color: var(--ok); margin-top: 1rem; }
.ack__item--final:hover { border-color: var(--ok); }

.go--danger { background: var(--bad); color: #ffffff; }
.go--quiet { background: transparent; color: var(--accent); border: 1px solid var(--line); margin-top: .6rem; }

.identity-out { margin-top: 1rem; display: grid; gap: .5rem; }
.keyrow {
  display: grid; gap: .25rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: .55rem .7rem;
}
.keyrow--secret { border-color: #5a2a2e; }
.keyrow__label { display: flex; gap: .5rem; align-items: baseline; font-size: .78rem; color: var(--dim); }
.keyrow__value { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; color: var(--ink); }
.keyrow__copy {
  justify-self: start; font: inherit; font-size: .75rem; cursor: pointer; margin-top: .2rem;
  background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .5rem;
}

.seedproof { margin-top: .8rem; border: 1px solid var(--line); border-radius: 6px; padding: .7rem; }
.seedproof h4 { margin: 0 0 .3rem; font-size: .9rem; }
.seedproof__bytes {
  font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; white-space: pre-wrap;
  background: var(--panel); border-radius: 4px; padding: .5rem; margin: .5rem 0 .3rem;
}
.seedproof__same { background: #fdecec; color: var(--bad); }
.seedproof__rest { color: var(--dim); }
.seedproof__legend { font-size: .78rem; color: var(--dim); margin: 0; display: flex; gap: .4rem; align-items: center; }
.seedproof__swatch { width: .8rem; height: .8rem; background: #fdecec; border-radius: 2px; display: inline-block; }

.mint__line { margin: 0 0 .4rem; font-size: .85rem; }
.testmoney { margin: 0 0 .8rem; padding: .6rem .8rem; background: #fdf3e0; border-left: 3px solid var(--warn); font-size: .85rem; }
.balance-row { display: flex; gap: .8rem; align-items: baseline; margin: .6rem 0 .9rem; flex-wrap: wrap; }
.balance__label { font-size: .8rem; color: var(--dim); }
.balance { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; flex: 1; }
.balance__figure { font-size: 1.35rem; font-weight: 500; letter-spacing: var(--track-display); color: var(--ink); }
.balance__why { font-size: .8rem; color: var(--dim); max-width: 62ch; }
.danger-box { margin: 0 0 .8rem; padding: .6rem .8rem; background: #fdecec; border-left: 3px solid var(--bad); font-size: .85rem; }

/* Slice 3: the money warnings, and the balance's supporting lines. */
.balance__why--danger { color: var(--bad); font-weight: 600; }

/* --- 6 · Post the job -------------------------------------------------- */
/* The one screen that spends. It is styled to be read, not to be pretty:
   each precondition carries its own verdict so a disabled button always has a
   visible reason. A dead control with no explanation is what stopped bob. */
.wall__action { margin: 0 0 1.5rem; }
.post__checks { list-style: none; margin: 0 0 1rem; padding: 0; }
.post__check {
  display: grid; grid-template-columns: 3rem 14rem 1fr; gap: .5rem;
  align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--line);
}
.post__check-mark { font-variant: small-caps; letter-spacing: .05em; font-weight: 600; }
.post__check--ok .post__check-mark { color: var(--ok, #6ea86e); }
.post__check--no .post__check-mark { color: var(--warn, #c98a3e); }
.post__check-label { font-weight: 600; }
.post__check-detail { color: var(--muted, #9a9a9a); }
.post__warn {
  margin: 1rem 0; padding: .75rem 1rem;
  border-left: 3px solid var(--warn, #c98a3e); background: #fdf3e0;
}
.post__gate { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0; cursor: pointer; }
.post__go {
  display: block; width: 100%; padding: .8rem 1rem; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); border-radius: 3px;
}
.post__go:disabled { opacity: .45; cursor: not-allowed; }
.post__go:not(:disabled) { border-color: var(--warn, #c98a3e); }
.post__status { margin: .75rem 0 0; color: var(--muted, #9a9a9a); min-height: 1.2em; }

@media (max-width: 40rem) {
  .post__check { grid-template-columns: 2.5rem 1fr; }
  .post__check-detail { grid-column: 2; }
}

/* The build id. Small, always present, and readable back to whoever shipped
   it — the host caches index.html for an hour, so "did my fix arrive" is
   otherwise a guess on both sides. */
.build { margin: .25rem 0 0; font-size: .8rem; color: var(--muted, #9a9a9a); }
.build code { font-size: .95em; }

/* The live job, above everything. It used to render 89% down the page. */
.panel--live { border-left: 3px solid var(--warn, #c98a3e); }
.live__job { margin: 0 0 .35rem; }
.live__id { margin: 0 0 .5rem; font-family: ui-monospace, monospace; font-size: .8rem; color: var(--muted, #9a9a9a); word-break: break-all; }


/* --- the bright pass --------------------------------------------------- */
/* Panels stop being boxes and become sections separated by a rule. A border
   on every side is chrome; a line between things is structure. */
.panel {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: var(--s5) 0 var(--s4); margin: 0;
}
.panel:first-of-type { border-top: 0; }
/*
 * ## THE MEASURE, AND WHY IT NARROWED
 *
 * 46rem was set when the page showed every panel at once. It shows ONE STEP —
 * a heading, a few fields and one button — and at that width a two-line
 * sentence became one long line the eye has to travel. 34rem holds the wizard
 * at a reading measure.
 *
 * ⛔ THE SEAT BOARD DOES NOT GET ITS OWN WIDTH, AND THE FIRST ATTEMPT DID.
 *
 * It widened that one step to 46rem and pulled it back with a negative
 * margin. Every test stayed green and the SCREENSHOT showed why it was wrong:
 * the step heading no longer lined up with the header rule above it, so the
 * page appeared to shift as the owner moved between steps. **One measure, or
 * the alignment is a different decision on every screen.** The board fits by
 * taking narrower columns instead.
 */
main, header, .foot { max-width: 34rem; margin: 0 auto; padding: 0 var(--s4); }

/*
 * ## HIERARCHY, INVERTED ON PURPOSE
 *
 * The wordmark used to be the largest text on the page and the step title was
 * small, uppercase and dimmed. **The most important words on a page that
 * shows one step are the name of that step**, so the two swapped ranks: the
 * wordmark is now a quiet label and the step title leads.
 */
header { padding-top: var(--s5); padding-bottom: var(--s2); }
h1 { font-size: .82rem; font-weight: 500; color: var(--dim); letter-spacing: .02em; margin: 0; }
h2 { font-size: 1.45rem; font-weight: 600; color: var(--ink); letter-spacing: var(--track-display); margin: 0 0 var(--s4); }

/* Every step gets the same rhythm, so moving between them feels like one page. */
.step { padding-top: var(--s5); padding-bottom: var(--s6); }
.step > * + * { margin-top: var(--s3); }
.field { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.field__label { font-size: .82rem; color: var(--dim); font-weight: 500; }

/*
 * ## THE ACTION GETS ITS OWN ROOM
 *
 * The button used to sit in the flow with a 1rem margin, the same distance as
 * any paragraph from any other. **It is the only thing on the step a person
 * has to do**, so it is separated by the largest gap on the page and nothing
 * follows it but its own status line. A prettier page with a quieter action
 * is the regression this rule exists to prevent.
 */
.go {
  font: inherit; font-weight: 500; letter-spacing: var(--track-head);
  padding: .8rem 1.4rem; cursor: pointer; margin-top: var(--s5);
  background: var(--panel); color: var(--ink);
  border: 1px solid #d6d1c6; border-radius: var(--r-control);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.go:hover:not(:disabled) { border-color: var(--ink); }
.go:disabled { opacity: .4; cursor: not-allowed; }
/* The one control that spends. It reads its own amount, so it needs weight
   rather than colour to say so — and it is wide, because it is the terminus. */
.go--primary {
  background: var(--ink); color: var(--panel); border-color: var(--ink);
  width: 100%; text-align: center;
}
.go--primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
/* Its status line belongs to it, not to the paragraph flow above it. */
.go + .line { margin-top: var(--s3); }

/*
 * ⚠ NOT `.note` — that class already means the offer-note ROW, which is
 * `display: grid` with a citation column. A plain paragraph given that class
 * turns every word into a grid item, one per line. It shipped that way and
 * only a screenshot showed it; the contrast check, the word count and the
 * suite were all silent.
 *
 * A class name is an interface. Reusing one because it reads well is the same
 * mistake as reusing a variable because it is in scope.
 */
.line { margin: var(--s3) 0 0; color: var(--dim); }
code, .mono, .live__id { font-family: var(--mono); }
a { color: var(--accent); }
.build { color: var(--dim); }

/* The live job: the most important thing on the page, so it is the only thing
   with an accent edge. */
.panel--live { border-top: 0; border-left: 2px solid var(--accent); padding-left: var(--s3); margin-top: var(--s4); }

/* `#durability` sits in a flex row that squeezed it to one word per line.
   Seen only by looking at a screenshot — no measurement reported it. */
#durability { flex-basis: 100%; }
#durability .line { margin-top: .8rem; }
/* Label left, amount right, nothing between them — a two-column money row
   needs no third track, and the fixed 9rem/8rem pair left the figure adrift
   in the middle of the line at this measure. */
.price__row { grid-template-columns: 1fr auto; }
.price__explain { grid-column: 1 / -1; color: var(--dim); font-size: .82rem; }