/* css/steps.css — the one procedure in the product (.steps), and where .file-preview stood.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   Steps — the one procedure in the product — CIT-B
   ==========================================================================
   Filing with the state is three acts in a fixed order and the middle one
   happens on somebody else's website. See steps() in ui/components.js for why
   that makes it an element rather than three cards.

   DELIBERATELY THE SAME BONES AS .req ABOVE: a marker, a body, a note, a
   hairline between rows. A step and a requirement are the same idea seen from
   two directions — "this is done" and "this is met" — and giving them different
   proportions would make one screen look like a different product. What a step
   adds is the number and the trailing control, and nothing else.

   THE PROTOTYPE'S `.filing-step` IS NOT COPIED. docs/mockups/prototype.html
   invented it to render, and its banner says so. The shape below is that shape;
   the rules are this stylesheet's, using this stylesheet's tokens, so the
   design system does not fragment around the one screen that mattered most.

   NO LIST MARKERS: it is an <ol> because the order is meaningful to a screen
   reader, not because it wants a decimal in the margin — .step-mark is the
   visible number and it is aria-hidden, since the <li> already announces its
   position.
   ========================================================================== */
.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem 0}
.step + .step{border-top:1px solid var(--rule)}

/* The marker is 1.75rem square and NOT smaller: it carries either a numeral or
   a tick, and a tick needs room to read as one. Sized in rem so it grows with a
   browser's own font size (WCAG 1.4.4) rather than staying a 26px dot beside
   text at 200%. */
.step-mark{
  flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:.8125rem;font-weight:600;line-height:1;
  border:2px solid var(--rule-strong);color:var(--ink-soft);background:var(--paper);
}
/* Done is the approved green — the same green an approved submission gets,
   because it means the same thing. Colour is never the only carrier: the tick
   replaces the numeral and steps() puts the word in the accessible name. */
.step--done .step-mark{border-color:var(--approved);color:var(--approved);background:var(--approved-wash)}

/* flex:1 1 0, NOT 1 1 auto, and the phone is where the difference showed. With
   an `auto` basis the body asks for its CONTENT width first, and under 640px
   `.step`'s flex-wrap sent any title longer than the space beside the marker
   onto its own line — so steps 1 and 2 were "✓ Add approved hours" on one line
   and a bare "②" with "Download the file" underneath it, unindented, on the
   next. The numbers stopped lining up with anything and the list stopped being
   a list. A zero basis makes the body take the space that is left rather than
   demand the space it wants, and its text wraps inside itself. */
.step-body{flex:1 1 0;min-width:0}
.step-title{display:block;font-weight:700}
.step-note{display:block;font-family:var(--legible);font-size:.875rem;color:var(--ink-soft);margin-top:.15rem}
/* flex-shrink:0 so a long note never squeezes the button into two words on
   three lines, which is what happened to "Mark this filing as filed" at 1280
   before this line existed. */
.step-action{flex:0 0 auto;align-self:center}

@media (max-width:640px){
  /* The control drops under the text rather than fighting it for a 390px row.
     The marker stays on the title's line — it is what makes the list scannable
     — so only the action wraps.

     calc(100% - 2.5rem), NOT 100%, AND THE 15 PIXELS ARE THE WHOLE REASON. The
     indent that lines the button up under the step's text is a margin, and a
     margin is OUTSIDE the basis: `flex-basis:100%` plus `margin-left:2.5rem`
     is 100% + 40px, so the row overflowed its card and took the PAGE sideways
     with it — topbar, notices and every card dragged 15px off a 390px phone.

     Nothing could see it but a picture. jsdom has no layout engine, and the
     page still renders correctly; it is simply 405px wide. The Part 0 run
     names it, which is what that gate is for. 2.5rem is the marker's 1.75rem
     plus .step's own .75rem gap, so the button's left edge is exactly under
     the title's. */
  .step{flex-wrap:wrap}
  .step-action{flex-basis:calc(100% - 2.5rem);margin-left:2.5rem;align-self:flex-start}
}

/* ==========================================================================
   .file-preview STOOD HERE AND IS GONE — CIT-3
   ==========================================================================
   Four rules styling the block of PELSB bytes on the filing screen: --data, no
   wrapping, its own scroll box, an 18rem cap. The card that used it was removed
   because in the real app the download works and the card restated the file the
   button hands over — it only ever existed because the prototype's sandboxed
   preview pane blocks downloads.

   DELETED WITH ITS COMPONENT rather than kept for a future caller, the same way
   the `table.stacks` rules went with stackable(). CSS with no markup behind it is
   the kind of thing a later reader preserves out of caution forever.
   ========================================================================== */