/* A claim, and the form that makes one — cycle 21, review round 1.
 *
 * ITS OWN STYLESHEET BECAUSE TWO PAGES DRAW THE SAME CARD, and spine §7.3 is why they do: one
 * vocabulary across every surface a claim reaches. The app draws your own claims inside the
 * assistant's view; `/admin-facts` draws everybody's for the operator. A card that looked
 * different on the two would let the operator's idea of a claim drift from the writer's.
 *
 * IT WAS IN app.css FOR ONE BUILD and the review page loaded app.css to get at it. That page
 * came out dark green with the claim bodies invisible, because app.css also styles the street
 * — a stylesheet written for one page cannot be borrowed by another just because the useful
 * part is in it. Found by looking at the screenshot, which is the third time on this cycle.
 *
 * EVERY COLOUR IS A VARIABLE WITH A LIGHT DEFAULT, and each host sets what it needs:
 *
 *   admin-facts.html   takes the defaults below — a pale tool page, ink on paper
 *   app.css            overrides them on `.written`, for the dark scrim the ask view draws
 *
 * The alternative was two copies of the same rules under two selectors, which is the drift
 * this file exists to prevent, one level down.
 *
 * NO RAW HEX. Every default resolves to a token — design-01 §8.1, the palette is the world's
 * identity, and tests/test_spec.py greps for it.
 */

/* THE CAVEAT, AND IT LIVES HERE SINCE CYCLE 21's REVIEW ROUND rather than in app.css.
   It is the app's oldest shared mark — cycle 6 drew it on an unchecked bearing, and the list,
   the tray, the foot bar and the record have all drawn it since. It moved because spine §7.2
   says the marker is part of the claim rather than chrome around it, and the operator's review
   page draws claims without loading app.css. A marker that could be lost by loading a
   different stylesheet is exactly the caveat that section forbids.

   One wording and one look everywhere (spine §7.3). */
.caveat {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--clay);
  border: 1px dashed var(--clay);
  border-radius: 999px;
  padding: 1px 7px;
}

.written,
.facts {
  --claim-ink: var(--ink);
  --claim-ink-soft: var(--ink-soft);
  --claim-quiet: var(--ink-soft);
  --claim-rule: rgba(31, 44, 38, .14);
  --claim-edge: rgba(31, 44, 38, .3);
  --claim-fill: rgba(31, 44, 38, .05);
  --claim-field: var(--trim-white);
}

/* ── WHAT IS WRITTEN DOWN HERE — cycle 21 ────────────────────────────────────────────────

   IT SITS UNDER THE DECK, IN THE SAME SCROLLER, AND LOOKS DIFFERENT ON PURPOSE. Your cards
   above are a conversation you had; this is the street's own record, which was here before
   you arrived. Same dark surface, no card boxes — a list of sentences with their state under
   them, which is what spine §7.3 is asking a claim to look like. */
.written { margin: 18px 0 0; }

.written-title {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--claim-quiet);
  font-weight: 600;
}

/* WHAT HAPPENS TO IT, SAID BEFORE IT HAPPENS — add-eatery's lede, same job. */
.written-lede {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--claim-ink-soft);
}

.written-form {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.written-field {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--claim-edge);
  border-radius: var(--radius);
  background: var(--claim-field);
  color: var(--claim-ink);
  font: inherit;
  font-size: 14px;
}

.written-field::placeholder { color: var(--claim-quiet); }
.written-field:focus { outline: none; border-color: var(--claim-quiet); }

.written-send,
.claim-act,
.claim-challenge-send {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--claim-edge);
  border-radius: 999px;
  background: var(--claim-fill);
  color: var(--claim-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.written-send:disabled,
.claim-challenge-send:disabled { opacity: .6; cursor: default; }

.written-signin { margin: 0 0 14px; }
.written-signin-line {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--claim-ink-soft);
}

/* spine §9 — a thin surface reads as thin. Not an error, not an illustration, not a nudge. */
.written-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--claim-quiet);
}

.written-error {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--clay);
}

.written-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A CLAIM IS A SENTENCE WITH ITS PROVENANCE UNDER IT, in descending loudness: what is
   claimed, then what state it is in, then who and how, then which source. A reader scanning
   stops at the first line; a reader deciding whether to confirm reads the rest. */
.claim {
  padding: 11px 0 0;
  border-top: 1px solid var(--claim-rule);
}

.claim:first-child { border-top: 0; padding-top: 0; }

.claim-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

/* spine §7.1 — CONFIRMED IS THE SILENT DEFAULT. There is no rule here for
   [data-state="confirmed"] and that absence is the design: a badge on confirmed content
   trains people to read unbadged content as merely un-badged rather than unconfirmed. */
.claim[data-state="proposed"] .claim-body,
.claim[data-state="disputed"] .claim-body { color: var(--claim-ink); }

/* The same dashed-clay caveat every other surface draws. One visual vocabulary for "nobody
   has checked this" (spine §7.3) — a second one would teach the caveat twice. app.css lifts
   the border on the dark scrim, where the token's own value goes muddy. */
.written .caveat,
.facts .caveat { color: var(--clay); }

.claim-by,
.claim-basis,
.claim-source-class,
.claim-source,
.claim-confirmed,
.claim-waiting,
.claim-against {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--claim-ink-soft);
}

/* HOW THEY KNOW is the line a confirmer actually reads, so it is the one that is not faded
   as far as the rest. spine §3's `basis`, on screen for the first time. */
.claim-basis { color: var(--claim-ink); }

.claim-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* THE SECOND ACCOUNT — spine §6 shows both and chooses neither. Indented under the claim it
   contradicts, the same way a refusal's accounts are indented under it. */
.claim-against {
  margin-left: 8px;
  padding-left: 9px;
  border-left: 2px solid var(--claim-edge);
}

/* Your own claim, waiting for somebody who has not come past yet. Quieter than a caveat
   because it is not a caveat about the claim — it is the state of the street. */
.claim-waiting { color: var(--claim-quiet); font-style: italic; }

.claim-acts {
  margin: 9px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.claim-challenge {
  margin: 9px 0 0;
  display: flex;
  gap: 7px;
}

.claim-challenge-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--claim-edge);
  border-radius: var(--radius);
  background: var(--claim-field);
  color: var(--claim-ink);
  font: inherit;
  font-size: 13px;
}

.claim-challenge-field::placeholder { color: var(--claim-quiet); }
.claim-challenge-field:focus { outline: none; border-color: var(--claim-quiet); }

/* ── THE WAY IN, FOLDED — cycle 21, review round 2 ────────────────────────────────────────

   The heading and the `+` share a row, so the resting state of the whole section is one line
   plus whatever you have written. That is the shape the human asked for: an option, not a
   feature. */
/* STACKED, NOT A ROW, and the first build was a row. At 390px the button is wide enough that
   "What you have written here" wrapped around it and the heading read as two ragged lines with
   a control wedged in the gap. A row would need either a terser heading or a bare `+`, and
   both cost more than the line this spends. */
.written-head { margin: 0 0 10px; }

.written-head .written-title { margin: 0 0 8px; }

.written-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--claim-edge);
  border-radius: 999px;
  background: var(--claim-fill);
  color: var(--claim-ink);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}

.written-add-mark {
  font-size: 15px;
  line-height: 1;
  /* Optically centred: a `+` sits high in most faces at this size. */
  margin-top: -1px;
}