/* Everything this page needs that no other surface has. The shell, the rail, the
   bands, the cards, the chips, the pills, the stamps and the FR-1.4 modal are all
   `capture.css`'s and are not restated here (CS-16). No `:root` property is added
   and `--accent` appears once, on a focus ring (story 2.5 §Rulings 1). */

/* The draft body. `draft_text` is a rendered document — headings, blank lines and
   a provenance line the TEMPLATE wrote — so it is shown as it was written, with
   its own line breaks intact. Nothing parses it: a markdown renderer here would be
   a second opinion about the audited bytes, and FR-3.8 forbids the library that
   would do it well. */
.draft-body { white-space:pre-wrap; overflow-wrap:break-word; margin:0;
              font:var(--fs-body)/1.6 system-ui,sans-serif; }
/* While the founder is editing, the box is visibly theirs: the caret needs a
   surface it can sit in, and the ring is the ONE permitted use of the accent
   outside a link (`:focus-visible`, story 2.5 §Rulings 1). */
.draft-body[contenteditable="true"] { background:var(--fill); border-radius:var(--radius);
              padding:.9rem 1rem; margin:-.9rem -1rem; }
.draft-body[contenteditable="true"]:focus-visible { outline:2px solid var(--accent);
              outline-offset:2px; }

/* The working indicator, in the slot the elapsed count used to hold. Anthony,
   2026-09-01, after reading the shipped wait: *"30 seconds feels rushed for a user
   looking at it — instead of time, let's just put an indication that the derivation
   is taking place."* So there is no number here at all: three dots fading in turn,
   in `--muted` beneath the sentence, saying only that work is in hand (CS-50 —
   a mark whose meaning a founder can read off it).

   It is page-local rather than in `capture.css` on purpose: that file states it
   carries no animation anywhere, and this is the one surface with a wait to
   indicate. Nothing here is ambient — `#waiting` is hidden until the founder's own
   submit opens it, and it closes the moment the answer lands. */
#working { display:flex; align-items:center; gap:.4rem; height:1.2rem;
           color:var(--muted); margin:.6rem 0 0; }
#working span { width:.4rem; height:.4rem; border-radius:50%;
                background:currentColor; opacity:.3;
                animation:working 1.4s ease-in-out infinite; }
#working span:nth-child(2) { animation-delay:.18s; }
#working span:nth-child(3) { animation-delay:.36s; }
@keyframes working { 0%, 70%, 100% { opacity:.3; } 35% { opacity:1; } }

/* Reduced motion: the dots stop and hold. Three marks at rest still read as work
   in hand — the signal survives the freeze, which is the point of choosing a mark
   over a moving one. */
@media (prefers-reduced-motion: reduce) {
  #working span { animation:none; opacity:.6; }
}

/* Constraints Honoured: one row per stored entry, never a count. The dotted rule
   is `.item`'s, borrowed rather than re-invented, so a constraint reads like a
   captured item because that is what it is. */
.constraints { list-style:none; margin:.6rem 0 0; padding:0; }
.constraints li { padding:.5rem 0; }
.constraints li + li { border-top:1px dotted var(--line); }

/* The earlier drafts, grown into the browse surface by story 3.4 §Ruled R3. A row
   is an audience, a time, an addressable link and a way in — the draft body is
   deliberately not here (one place, criterion 11). The group heading is the use
   case, stated once above the rows it holds (criteria 48, 58).

   ARRANGEMENT ONLY: `.microcap`'s treatment is `capture.css`'s and is borrowed by
   the heading rather than re-declared, and there is no second media query — the
   rows wrap on their own at 375px (story 2.5 §Rulings 2). */
.drafts { list-style:none; margin:0; padding:0; }
.drafts li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
             padding:.75rem 0; border-top:1px solid var(--line); }
.drafts li a { flex:1; min-width:0; }
.drafts .when { color:var(--muted); }
.drafts-group { display:block; border-top:0; padding:1.4rem 0 .1rem;
                font-family:var(--mono); font-size:var(--fs-cap);
                letter-spacing:.08em; text-transform:uppercase;
                color:var(--muted); }
.drafts-group:first-child { padding-top:.2rem; }

/* The three regions that appear AFTER the action row take the band rhythm the
   rest of the panel is set in (`.band`'s 2.75rem). `.formbar` closes with a
   hairline and its own padding, so without this the draft would sit on the
   button it came from. */
#waiting, #draft { margin-top:2.5rem; }

/* The panel's own foot, matching `form.html`'s: leaving is the browser's Back,
   and Sign out belongs where the founder finishes reading. */
#nav { margin-top:3rem; }