/* The Legal department — intake, drafts, redlines, reviews and the statute page (spec §2.1: a task owns
   app/static/surfaces/<name>.css and links it from its own {% block styles %}; nothing is appended to style.css after
   wave 1). Tokens only: every colour here is one :root already defines, so the department follows the shell's palette
   rather than starting a second one. */

/* ---- the intake form (G40, R23, R24, R25) ----------------------------------------------------------------------
   Every radio and checkbox used to render CENTRED ABOVE its label, so which control belonged to which option was
   genuinely ambiguous — the first probe toggled the wrong "Optional clauses" box. `.choice` is the fix: the control
   sits on the text's first line, the text wraps beside it, and the whole row is the hit area. */
.intake .choice { display: flex; align-items: flex-start; gap: .55rem; margin: .3rem 0; padding: .2rem .1rem; line-height: 1.45; cursor: pointer; }
.intake .choice input { flex: 0 0 auto; margin: .28rem 0 0; width: 1rem; height: 1rem; }
.intake .choice span { flex: 1 1 auto; }
.intake .choice:hover { background: var(--sunk); }
.intake .field { display: block; margin: .75rem 0; }
.intake .field > input, .intake .field > textarea, .intake .field > select { display: block; width: 100%; margin-top: .25rem; }
.intake .hint { display: block; margin: .2rem 0 0; }
.intake fieldset.inner { margin: .75rem 0; }
.req { color: var(--accent-warn); font-weight: 600; }

/* G41's other half: a form bounced for the one answer its own radio made necessary says so at the top and again on
   the field, and comes back carrying everything else the founder typed. Warm tokens, not a red the palette has no
   word for — this is a question we still need answered, not a failure. */
.form-error { margin: 0 0 1rem; padding: .6rem .8rem; background: var(--accent-warn-soft); border-left: 3px solid var(--accent-warn); }
.intake .field.has-error > input, .intake .field.has-error > textarea { border: 1px solid var(--accent-warn); }
.intake .field-error { display: block; margin: .25rem 0 0; font-size: .85rem; color: var(--accent-warn); }

/* R24: ~30 s of a motionless form. The static expectation is always visible; this is the live state, added by the
   form's own submit handler, so a founder who has JavaScript sees the page acknowledge the click. */
.intake .drafting { display: none; margin: .5rem 0 0; color: var(--muted); }
.intake.is-drafting .drafting { display: block; }
.intake.is-drafting button[type="submit"] { opacity: .55; pointer-events: none; }

/* R25: the notes are their own form, so "Clear notes" is a plain reset and works with JavaScript off. */
.private-notes { margin: 1.5rem 0 0; }
.private-notes textarea { display: block; width: 100%; margin: .35rem 0 .5rem; }

/* ---- drafts ------------------------------------------------------------------------------------------------------ */
.version-line { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.save-version { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: .75rem 0; }
.draft .preview-note { margin: 0 0 1rem; padding: .5rem .7rem; border-left: 3px solid var(--line); color: var(--muted); }
.draft .verdict-legend { margin: 1.25rem 0 0; }
.draft .missing code { font-size: .9em; }
ul.saved { list-style: none; padding: 0; }
ul.saved li { padding: .2rem 0; }

/* G45: the word-level diff interleaved both texts into one unreadable clause. Two columns, one clause at a time; on a
   phone they stack, which is the same reading order. */
.redline { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .35rem 0 .5rem; }
.redline .side { min-width: 0; }
.redline .side h4 { margin: 0 0 .25rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.redline .side p { margin: 0; }
.redline .side-b { border-left: 1px solid var(--line); padding-left: 1rem; }
.redline-direction { margin: 0 0 1rem; color: var(--muted); }
@media (max-width: 700px) {
  .redline { grid-template-columns: 1fr; }
  .redline .side-b { border-left: 0; border-top: 1px solid var(--line); padding: .5rem 0 0; }
}

/* ---- the statute page (G28, G29, R22, C10) ----------------------------------------------------------------------- */
.transcription { margin: .35rem 0 1rem; }
.official { margin: 0 0 1.25rem; }
.section-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; padding-top: .6rem; border-top: 1px solid var(--line); }
ul.cited { list-style: none; padding: 0; }
ul.cited li { padding: .15rem 0; }
.signed-out { margin: 1.25rem 0; padding: .6rem .8rem; background: var(--sunk); }

/* ---- reviews ----------------------------------------------------------------------------------------------------- */
table.memo code { font-size: .85em; color: var(--muted); }

/* ---- one clause of the approved library, /library/{id} (Plan 5 A3, `G38`) -----------------------------------------
   The page borrows `.register`, `.rule` and `.rule-list` from settings.css, the way ca.css does, because those are
   the shell's list primitives and a second copy of them would drift. `.clause-text` is the page's own: the clause
   wording is the thing a founder came to read, and set in body copy it was indistinguishable from the sentences
   ABOUT it. Quoted, in the reading face, off the left rule — the same visual grammar the drafts use for a clause.
   Tokens only; no colour here that :root does not already define. */
.clause-text { margin: .4rem 0 0; padding: .1rem 0 .1rem .9rem; border-left: 2px solid var(--line);
               font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif; font-size: .97rem; line-height: 1.6; }
.clause-text code { font-family: inherit; font-style: italic; padding: 0 .15rem; background: var(--sunk);
                    border-radius: 3px; color: var(--muted); }

/* ---- the intake form's agreement note, /matters/new (Plan 5 C2) ---------------------------------------------------
   What the document is and who signs it, said before the first question, for the two agreements C1 shipped that a
   founder may never have seen. It shipped as `class="callout"` against no rule anywhere in the app, so the one
   paragraph on the page that is not a field label rendered as undifferentiated body copy (C2 review, Minor 5).

   Not `.notice`: that class is the cross-verify strip's, it is counted by tests/test_notice.py, and giving a second
   element the same treatment on the same page would read as a second strip. Tokens only. */
.intake-note { margin: 1rem 0; padding: .7rem .9rem; background: var(--sunk); border-left: 3px solid var(--accent);
               border-radius: 0 var(--radius) var(--radius) 0; font-size: .92rem; line-height: 1.55; }