/* Requests workspace
 *
 * Requests is an action inbox first and a policy editor second. This file
 * tightens only that screen: it keeps every request, consequence and control,
 * while removing the oversized reply fields and repeated full-width utility
 * rows that pushed the next decision below the fold. */

#requests > #asksCard,
#requests > #asksAnsweredCard,
#requests > #asksHistoryCard,
#requests > #helpAsksCard,
#requests > #helpAsksHistoryCard,
/* W1.1 / F3.1 — `.screen` is `display:grid; grid-template-columns:
   repeat(2, minmax(0,1fr))` at >=900px (app.css:473). A direct child with no
   span takes ONE 590px track, and grid's default `align-items: stretch` then
   forced every `.chip.filterchip` in #requestsFilter to the row height —
   measured 75x223, four giant vertical lozenges — while #requestsEmptyCard
   sat BESIDE them in column 2. app.css:5119 documents this exact trap and
   already fixes it for `#activity > .filterrow`; #requests never got the
   line. Id-scoped, so `.chips`' other wearers (.devgroup, .schedule-field-days,
   #settingsMount) do not move. `grid-column`/`align-self` are inert below
   900px where `.screen` is plain block flow, so no media query is needed. */
#requests > #requestsFilter,
#requests > #requestsEmptyCard,
#requests > #requestsSignpost,
/* O3.3 / W4.4c — with the three above spanning, #parenttapLinkCard was the
   last non-spanning direct child and would have been left dangling in a
   single 590px track. It is a full-width footer card in her artboard. */
#requests > #parenttapLinkCard {
  grid-column: 1 / -1;
  min-width: 0;
}

#requests > #requestsFilter { align-self: start; }

#requests .requests-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  /* W5.2 — hers is 18px between a card's title row and the first row under
     it, measured on Requests.dc.html (card head margin-bottom: 18px). */
  margin-bottom: 18px;
}

#requests .requests-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

#requests .requests-card-head .sect { margin-bottom: 6px; }
#requests .requests-card-head .help { margin: 0; max-width: 760px; line-height: 1.45; }
#requests .requests-card-head > .ghost { flex: none; }

#requests #helpAsksList {
  display: grid;
  gap: 10px;
}

#requests .reqcard { margin: 0; }

/* A direct-message reply is normally one short sentence. Start it at one
   comfortable line while keeping vertical resize for a longer answer. */
#requests .help-reply-card > textarea.inp {
  min-height: 50px;
  max-height: 160px;
}

/* #requestHandlingPanel — the per-child "Request handling" card, moved off
   this screen onto #child (GoodQA 8c11ca92, 2026-09-17; see
   js/requests.js's own header). One child, one box: no grid, no
   `:only-child` rule to keep in sync with it any more. */
#child .reqpolicy-proof {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 2px;
}

#child .reqpolicy-proof > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--glow);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

#child .reqpolicy-proof > .fineprint { margin: 0 0 4px; line-height: 1.5; }

@media (min-width: 1100px) {
  /* Decision requests stay one calm reading column. The old auto-fit grid
     combined with app.css's desktop flex row and squeezed request headlines
     into one-character columns at 1280px and 1920px. */
  #requests #helpAsksList { grid-template-columns: minmax(0, 1fr); }

  #requests #helpAsksList > .reqcard:not(.help-reply-card) {
    display: block;
  }

  #requests #helpAsksList > .reqcard:not(.help-reply-card) > .reqdecisions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
  }

  #requests #helpAsksList > .reqcard:not(.help-reply-card) .reqdecision > button {
    width: 100%;
  }

  #requests .help-reply-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px 10px;
  }
}

@media (max-width: 699px) {
  #requests .requests-card-head { gap: 10px; }
  #requests .requests-card-head .sect::after { display: none; }
  #requests .requests-card-head > .ghost { padding-inline: 10px; }

  /* A direct reply is one short answer plus one action. Keep those on the
     same row so a single ask does not spend another full line on Send, while
     the heading remains full-width and easy to scan. This class belongs only
     to free-text asks; app and time decisions keep their stacked consequence
     rows in `.reqdecisions`. */
  #requests .help-reply-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px 10px;
  }

  #requests .help-reply-card > .reqhead {
    display: block;
    grid-column: 1 / -1;
  }

  #requests .help-reply-card .reqhead > .asub {
    margin-top: 4px;
  }

  #requests .help-reply-card > textarea.inp {
    min-width: 0;
    min-height: 50px;
    font-size: 16px;
    resize: vertical;
  }

  #requests .help-reply-card > .reqactions {
    grid-column: 2;
    align-self: end;
    margin-top: 0;
  }

  #requests .help-reply-card > .reqactions > .iconbtn {
    min-height: 50px;
  }
}

/* ===================================================================== */
/* W4.4 — design fidelity against her Requests / RequestsEmpty artboards.
 *
 * WHY EVERY RULE BELOW LIVES HERE AND NOT IN app.css. This file is linked at
 * index.html:117, AFTER app.css (114). app.css carries a 262-line verbatim
 * duplicated region in which `.reqcard`, `.reqeyebrow`, `.reqcard .reqtext .an`
 * and `.reqhead` are each declared twice (3649/6579, 3652/6582, 3656/6586)
 * and the LATER copy wins — editing the first copy has zero on-screen effect,
 * which has already burned a lane. Overriding from this file is later in the
 * cascade than both copies, so it wins regardless of which duplicate moves,
 * and it keeps the blast radius on the four Requests list ids instead of the
 * shared `.reqcard` base that js/request-rollup.js:462 and js/processes.js
 * also build against.
 *
 * SCOPE, deliberately: the site-ask lists only — #asksList, #asksHistoryList,
 * #asksAnsweredList. NOT #helpAsksList / #helpAsksHistoryList. A help ask is
 * an interactive multi-control card (.reqdecisions, a reply <textarea>, a Send
 * action) and the >=1100px rules above depend on `#helpAsksList > .reqcard`
 * still being a block card; flattening it to a divider row would break the
 * three-up decision grid. Her artboard only draws the site-ask row shape. */

/* F3.2 — stop nesting cards inside cards. Live rendered each row as a
 * bordered white 1152x91 card inside a bordered white card; hers is a
 * transparent 770x55 row with a single hairline bottom divider. Her literal
 * is rgba(22,35,63,.07); --border-subtle is rgba(22,35,63,.08) in light — a
 * delta no eye resolves — and flips to --line in dark, where a hardcoded
 * .07 ink would be invisible. */
#requests #asksList,
#requests #asksHistoryList,
#requests #asksAnsweredList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#requests #asksList > .reqcard,
#requests #asksHistoryList > .reqcard.answered,
#requests #asksAnsweredList > .reqcard.answered {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 0 0 14px;
  margin: 0;
  gap: 14px;
  align-items: center;
  box-shadow: none;
}

/* W5.13 — THE LAST *VISIBLE* ROW, not the last DOM child.
 * `:last-child` was right until the filter chips were wired up.
 * applyRequestsFilter() hides a non-matching row with `.requests-filtered`
 * (`display: none !important`, app.css:2568) and LEAVES IT IN THE DOM, so
 * under Approved or Denied the hidden row is still `:last-child` and the last
 * row a parent can actually see keeps a divider with nothing under it — a
 * hairline dangling in the card's bottom padding. Measured by clicking the
 * chips, not by reading the list: Pending looks perfect and Approved does not.
 * `:has()` is already load-bearing in this stylesheet's neighbour
 * (app.css:4046 `.screen > .card:has(#devList)`), and where it is unsupported
 * this degrades to exactly today's behaviour rather than to a broken row. */
#requests #asksList > .reqcard:not(:has(~ .reqcard:not(.requests-filtered))),
#requests #asksHistoryList > .reqcard.answered:not(:has(~ .reqcard.answered:not(.requests-filtered))),
#requests #asksAnsweredList > .reqcard.answered:not(:has(~ .reqcard.answered:not(.requests-filtered))) {
  border-bottom: 0;
  padding-bottom: 0;
}

/* `.reqhead` is align-items:flex-start in both app.css copies (3650/6580).
 * W5.4 — and its gap is 12px in both, against her 14px: her row text starts
 * at x=359 with the 34px avatar at x=311, i.e. 34 + 14. A 2px indent error
 * repeated down a list is exactly the kind of thing that reads as "off"
 * without being nameable. */
#requests #asksList > .reqcard > .reqhead,
#requests #asksHistoryList > .reqcard.answered > .reqhead,
#requests #asksAnsweredList > .reqcard.answered > .reqhead {
  align-items: center;
  gap: 14px;
}

/* F3.6 — her row is two lines, title first. Live put a 10.5px/800 uppercase
 * tracked eyebrow ABOVE a 16px/700 title. The uppercase treatment survives
 * everywhere else it is used because this is scoped to the two site-ask
 * lists. `--text-tertiary` is #6D778A in light (NOT #8A93A3 — that value
 * moved to --text-tertiary-ui, which the 2026-09-20 third ruling reserves
 * for non-text uses). The DOM order of .reqeyebrow vs .an is an app.js
 * change and is reported to the coordinator, not faked here with `order`. */
#requests #asksList .reqcard .reqtext .an,
#requests #asksHistoryList .reqcard .reqtext .an,
#requests #asksAnsweredList .reqcard .reqtext .an {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}

#requests #asksList .reqcard .reqeyebrow,
#requests #asksHistoryList .reqcard .reqeyebrow,
#requests #asksAnsweredList .reqcard .reqeyebrow {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-tertiary);
  margin: 0;
}

/* F3.3 — the child's monogram in the row's leading position. The DOM swap
 * (avatarEl() in place of the generic `.acticon` globe) is app.js and is
 * reported to the coordinator; these rules are the CSS half and are inert
 * until it lands. Her fills are FLAT; `.avatar[data-tone]` (app.css:2387+45)
 * is a two-stop gradient, so the gradient is cancelled HERE rather than on
 * `.avatar`, which Kids / Settings / Account / the rail all share. */
#requests #asksList .reqcard > .reqhead > .avatar,
#requests #asksHistoryList .reqcard > .reqhead > .avatar,
#requests #asksAnsweredList .reqcard > .reqhead > .avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  line-height: 21px;
  color: #FFFFFF;
}

/* FLAT FILLS, ONE PER TONE — and this is a CORRECTION, not an addition.
 *
 * The rule above used to cancel the gradient with `background-image: none`,
 * which was the right INTENT (her monograms are flat) and left the avatar
 * with NO BACKGROUND AT ALL. `.avatar[data-tone="N"]` (app.css:2529-2533)
 * supplies the tone ONLY as `background: linear-gradient(...)`, so cancelling
 * the image cancels the colour with it. Measured live: the element was
 * present and correctly sized at 34x34 with the right initial, and invisible
 * — dark glyph on transparent, on a white card.
 *
 * Each tone takes the FIRST STOP of the gradient it replaces, so the person
 * keeps the hue they already had everywhere else in the product and only the
 * treatment flattens. These are FILL tokens carrying the handoff's literals,
 * which is exactly what they are for. */
#requests #asksList .reqcard > .reqhead > .avatar[data-tone="1"],
#requests #asksHistoryList .reqcard > .reqhead > .avatar[data-tone="1"],
#requests #asksAnsweredList .reqcard > .reqhead > .avatar[data-tone="1"] { background: var(--glow); }
#requests #asksList .reqcard > .reqhead > .avatar[data-tone="2"],
#requests #asksHistoryList .reqcard > .reqhead > .avatar[data-tone="2"],
#requests #asksAnsweredList .reqcard > .reqhead > .avatar[data-tone="2"] { background: var(--mint); }
#requests #asksList .reqcard > .reqhead > .avatar[data-tone="3"],
#requests #asksHistoryList .reqcard > .reqhead > .avatar[data-tone="3"],
#requests #asksAnsweredList .reqcard > .reqhead > .avatar[data-tone="3"] { background: var(--amber); }
#requests #asksList .reqcard > .reqhead > .avatar[data-tone="4"],
#requests #asksHistoryList .reqcard > .reqhead > .avatar[data-tone="4"],
#requests #asksAnsweredList .reqcard > .reqhead > .avatar[data-tone="4"] { background: var(--sky); }
#requests #asksList .reqcard > .reqhead > .avatar[data-tone="5"],
#requests #asksHistoryList .reqcard > .reqhead > .avatar[data-tone="5"],
#requests #asksAnsweredList .reqcard > .reqhead > .avatar[data-tone="5"] { background: var(--brand); }

/* F3.9 — the pending count. Live: 20x20, 11px, inline immediately after the
 * card title. Hers: 22px tall, 12px/800, hard right on the head row. The
 * colours already match (live's rgba(255,196,75,.18) composites over white to
 * rgb(255,244,223) against her rgb(253,241,223), and the text is her exact
 * #C2760A) — size and placement are the whole visible delta. Scoped by title
 * id because `.badge` is the shared count pill every nav entry wears via
 * setTitleBadge(). Moving it out of the <h2> is app.js; `.requests-card-head`
 * above is already `justify-content: space-between`, so the head row is ready
 * for it. */
#requests #asksTitle .badge.attn,
#requests #asksHistoryTitle .badge.attn {
  /* W5.3 — 36px, not 22. Re-measured on her artboard: the "3" pill is
     36x22, not a 22px circle. Height, type and the tint were already right
     (live composites rgba(255,196,75,.18) over white to rgb(255,244,223)
     against her rgb(253,241,223)); only the min-width was short. */
  min-width: 36px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

/* F3.10 — the empty state's icon tile was GENUINELY INVISIBLE: app.css:2305
 * fills it with var(--dusk2), which is #FFFFFF in light (app.css:194), on a
 * #FFFFFF card. Her tile is a visible #F1F3F6 with a #16233F glyph.
 * --surface-raised is exactly #F1F3F6 in light and var(--dusk2) in dark, so
 * the token — not a literal — is what keeps dark correct. */
#requests > #requestsEmptyCard {
  padding: 56px 32px;
}

#requests .requests-empty-icon {
  background: var(--surface-raised);
  color: var(--text-primary);
  /* W5.9 — hers is `margin: 0 0 18px`; ours carried an extra 8px on top, so
     the tile sat 8px below her optical centre inside the same 56px pad. */
  margin-top: 0;
}

/* F3.13 — the Approved/Denied verdict pill on an answered row.
 *
 * HONESTY BOUNDARY (2026-09-18 ruling §19). This pill states a COMPLETED
 * FACT, so it may only appear where the server actually resolved the request.
 * A site ask's rule is written server-side and answeredAskRow reads
 * `a.resolution` (app.js:15336) — the server's own answer, never the button
 * that was pressed — so "Allowed"/"Blocked" is true on these two lists.
 * It is deliberately NOT scoped to #helpAsksHistoryList, where a more-time or
 * app-unlock answer is correctly reported as queued-and-unconfirmed
 * (`helpAsks.moreTimeQueued`, app.js:2357). Do not widen this selector.
 *
 * The element itself is built in app.js and is reported to the coordinator;
 * these rules are inert until it lands. Denied borrows the same neutral
 * --surface-raised the empty tile uses rather than a hardcoded #F1F3F6. */
#requests #asksHistoryList .reqcard.answered .verdict,
#requests #asksAnsweredList .reqcard.answered .verdict {
  margin-left: auto;
  flex: none;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  white-space: nowrap;
}

#requests #asksHistoryList .reqcard.answered .verdict.allow,
#requests #asksAnsweredList .reqcard.answered .verdict.allow {
  color: var(--done-text);
  background: var(--done-tint);
}

#requests #asksHistoryList .reqcard.answered .verdict.block,
#requests #asksAnsweredList .reqcard.answered .verdict.block {
  color: var(--text-tertiary);
  background: var(--surface-raised);
}

/* OUR THIRD ROW ACTION SURVIVES. Her row has exactly two buttons; ours has
 * three, because "Allow scoped" is the only way to grant 24 hours rather than
 * forever (app.js openAskRow's own comment records it as deliberately
 * undecorated: it is a form of allow, not a third meaning). Her action
 * cluster is a right-aligned flex row of 34px pills with 8px gaps and NO
 * fixed count, so three fit at 1512px — ours occupies 234px against her 148px
 * with ~340px of slack. Below 1100px it wraps under the row, which is what
 * `.reqactions`' own `flex-wrap: wrap` (app.css:2262) already does; that wrap
 * is LOAD-BEARING and is not overridden anywhere in this file. */
#requests #asksList > .reqcard > .reqactions {
  margin-left: auto;
  gap: 8px;
}

/* ===================================================================== */
/* W5 — SECOND FIDELITY PASS, against Requests.dc.html and
 * RequestsEmpty.dc.html read in a browser with the same getComputedStyle
 * routine that read ours, so every number below is a real pair.
 *
 * W4.4 (above) got the ROW right and left the PAGE wrong. Re-measured
 * 2026-09-20, the four things that actually made this screen not read like
 * hers were all outside the row: the column is 1212px against her 820px, the
 * card edge is the .16 CONTROL ink instead of the .08 CARD ink, every card
 * title drags a decorative hairline she does not draw, and the answered rows
 * are painted at 82% opacity so her full-strength history reads as greyed
 * out here. */

/* W5.1 — HER READING COLUMN IS 820px, AND NOT ONLY ON THIS SCREEN.
 * Measured at 1512x982 on four of her artboards: Requests, Activity,
 * Settings and Account all put an 820px column at x=286 inside a 1282px
 * main (only Home, a dashboard, goes wider at 1170px). Ours is 1212px, which
 * is why our Approve/Deny cluster sits ~400px further from the request it
 * answers than hers does, and why the empty card reads as a blank slab.
 *
 * This belongs in app.css as one rule for every list screen — it is written
 * up in .scratch/fidelity-appcss-requests.patch for the coordinator, who owns
 * that file. Scoped here so THIS surface is right now; the value is hers, so
 * when the global rule lands this one is a harmless no-op. */
#requests { max-width: 820px; }

/* W5.2 — HER CARD EDGE IS THE .08 INK.
 * app.css:8189 `:root[data-theme="light"] .card { border-color: var(--line) }`
 * beats app.css:1249's own `border: 1px solid var(--border-subtle)`, so every
 * card in light theme wears the .16 CONTROL edge. The owner's ruling and her
 * artboard agree on .08 for a card; app.css:1244's own comment says so and is
 * then contradicted 7000 lines later. Global fix is in the patch file; this
 * is the same value, scoped. Inert in dark, where --border-subtle IS --line.
 *
 * #parenttapLinkCard is deliberately in the edge list and out of the padding
 * list: it is a compact link row at 14px/16px by its own design and 24px
 * would inflate it. Her card padding is 24px; ours was 22px. */
#requests > #asksCard,
#requests > #asksAnsweredCard,
#requests > #asksHistoryCard,
#requests > #helpAsksCard,
#requests > #helpAsksHistoryCard,
#requests > #requestsEmptyCard,
#requests > #parenttapLinkCard {
  border-color: var(--border-subtle);
}

#requests > #asksCard,
#requests > #asksAnsweredCard,
#requests > #asksHistoryCard,
#requests > #helpAsksCard,
#requests > #helpAsksHistoryCard {
  padding: 24px;
}

/* W5.3 — NO DECORATIVE HAIRLINE AFTER A CARD TITLE, AND THE COUNT GOES RIGHT.
 * app.css:1259 gives every `.sect` a `::after` that fills the rest of the row
 * with a gradient rule; app.css:7962 keeps it. She draws no such line on any
 * Requests card — her title is a plain 16.5/800 label and the count pill is
 * hard right on the same row (measured: her "3" ends at x=1081, the card's own
 * right padding edge). Ours sat inline 8px after the title.
 *
 * `::after` is a pseudo-element with no JS behind it, so hiding it cannot
 * silence a message: grepped app.js for every `.textContent =` / `.innerHTML =`
 * touching this screen — asksMsg, requestsEmptyTitle, requestsEmptySub and
 * setTitleBadge('asksTitle') — and none of them writes into a `.sect::after`
 * or into any element these rules hide. Scoped to #requests so the hairline
 * survives on every other screen that still wants it. */
#requests .sect::after { display: none; }
#requests .sect > .badge { margin-left: auto; }

/* W5.4 — FILTER CHIPS. Hers: 13.5px/700 on 9px 18px padding with an 8px gap,
 * and the row breathes — 26px above, 20px below. Ours: 13px/600 on 9px 13px
 * with a 6px gap and a 8px/4px margin, so the chips read smaller and thinner
 * than hers and the row crowded the card beneath it.
 *
 * THE ONE NUMBER DELIBERATELY NOT MATCHED IS THE HEIGHT. Hers is 40.25px;
 * `.chip` sets `min-height: 44px` and app.css says why in two places
 * (":837 44px, NOT 42" and ":8799 44px, not 40") — it is the tap-target
 * floor, not a style choice. 44 stays; an a11y floor outranks a design-tool
 * number. Everything else is hers. */
#requests > #requestsFilter {
  gap: 8px;
  margin: 26px 0 20px;
}

#requests > #requestsFilter > .chip {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

/* W5.5 — AN ANSWERED ROW IS NOT A DISABLED ROW.
 * app.css:2552 `.reqcard.answered { opacity: .82 }`. Her History rows are
 * full-strength #16233F, the same ink as a pending row; ours composite to
 * roughly rgb(64,75,99) on white and read as greyed-out — the same "washed
 * out so it looks disabled" failure that had to be reverted on the device
 * menu today. Verdict is carried by the words and by the tinted tile below,
 * never by dimming the whole row. */
#requests #asksHistoryList > .reqcard.answered,
#requests #asksAnsweredList > .reqcard.answered {
  opacity: 1;
}

/* W5.6 — THE ANSWERED ROW'S LEADING TILE.
 * app.css:4006 `.acticon` is 30x30, radius 10px, `background: var(--dusk2)`
 * — and --dusk2 is #FFFFFF in light, so on a white card this tile is a white
 * square on white with a grey glyph floating in it. Same class of genuinely
 * invisible element as F3.10's empty-state tile.
 *
 * Hers leads the row with the CHILD's 34px monogram and puts an Approved /
 * Denied pill hard right. We cannot build either from CSS — answeredAskRow()
 * in app.js appends a `.acticon` glyph span and no avatar and no pill, and
 * app.js is not this lane's file (the request is in the report). What IS
 * available honestly is the row's own `data-resolution`, which app.js sets
 * from the SERVER's `a.resolution` and not from the button that was pressed
 * (answeredAskRow's own comment). So the tile takes her verdict SHAPE and her
 * verdict COLOURS — 34px circle, --done-tint/--done-text for approved,
 * --surface-raised/--text-tertiary for denied — reading a real field.
 *
 * NO `content:` IS INVENTED HERE. Painting "Approved" from CSS would produce
 * an English string on a screen that ships es and fr dictionaries; the pill
 * stays an app.js request rather than an untranslatable fake. */
#requests #asksHistoryList > .reqcard.answered > .reqhead > .acticon,
#requests #asksAnsweredList > .reqcard.answered > .reqhead > .acticon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  line-height: 21px;
  background: var(--surface-raised);
  color: var(--text-tertiary);
}

#requests #asksHistoryList > .reqcard.answered[data-resolution="approved"] > .reqhead > .acticon,
#requests #asksAnsweredList > .reqcard.answered[data-resolution="approved"] > .reqhead > .acticon {
  background: var(--done-tint);
  color: var(--done-text);
}

/* W5.7 — the answered row's second line. app.css:2525 makes `.asub` 11px with
 * a 2px top margin (4px for :first-of-type); her second line is the same
 * 12.5px/18.75px quiet line the pending rows already use, sitting directly
 * under a 21px title so the two-line block is 40px on both lists. */
#requests #asksHistoryList .reqcard.answered .asub,
#requests #asksAnsweredList .reqcard.answered .asub {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 18.75px;
  color: var(--text-tertiary);
  margin-top: 0;
}

/* W5.8 — the empty state's second line. Hers is the quiet tertiary ink, ours
 * was --text-secondary (#5B6472), a full step darker than the same sentence
 * gets anywhere else on this screen. Her literal is #8A93A3, which the
 * 2026-09-20 third ruling reserves for non-text uses; --text-tertiary
 * (#6D778A) is the legal token nearest it and is what the request rows'
 * own second line already uses, so the two now agree. */
#requests #requestsEmptySub { color: var(--text-tertiary); }

/* W5.10 — THE PARENTTAP CARD IS A FOOTER, NOT A LEAD.
 * Its own comment three hundred lines up already calls it "a full-width
 * footer card", but index.html places #parenttapLinkCard BEFORE #asksCard, so
 * with the empty card hidden it renders between the filter chips and the
 * requests — a link to another screen outranking the requests this screen
 * exists to answer. Hers has nothing in that slot: the first thing under the
 * chips is the Pending card.
 *
 * `order` moves it visually and touches no destination, no label and no
 * handler — the card, its count and its button are all still there. The flex
 * switch below 900px is only so `order` applies at phone widths too; `.screen`
 * is plain block flow there and `order` would otherwise be inert. `.card`
 * keeps its own 16px bottom margin in that mode (no `gap` is set), so mobile
 * spacing is unchanged, and #requestsFilter is put back to `stretch` because
 * the `align-self: start` written for the >=900px GRID would shrink-wrap the
 * chip row in a flex column and break its wrapping.
 *
 * KNOWN TENSION, reported rather than hidden: this makes visual order differ
 * from DOM order, so a keyboard tab still reaches ParentTap before the
 * requests. The real fix is moving the node in index.html, which this lane
 * does not own. */
#requests > #parenttapLinkCard { order: 1; }

@media (max-width: 899.98px) {
  #requests { display: flex; flex-direction: column; }
  #requests > #requestsFilter { align-self: stretch; }
}

/* W5.11 — `#requestsMount` is this screen's declared wave-0 mount and is
 * empty on purpose (index.html says so). As a grid/flex item it still
 * collects the container's 18px gap, so the page carries a phantom band
 * under its last card. `:empty` means the moment anything ever mounts there
 * it comes back on its own. */
#requests > #requestsMount:empty { display: none; }

/* W5.12 — the two explanations under the request list. She prints none inside
 * the card; ours are real, load-bearing sentences about what an answer DOES
 * ("becomes a rule", "24 hours only") and the honesty rules keep them. What
 * they lacked was separation: at a 10px top margin the first one read as a
 * fourth, broken request row rather than a footnote to the three above it. */
#requests #asksCard > #asksList + .fineprint { margin-top: 16px; }