/* designer2: settings, account, billing, checks, the check form, the invitation, the audit log. Linked after ee.css; it uses ee.css's tokens and defines none. */

/* designer2: invite */
/* a team's name and an address are other people's text, up to 120 letters without a space: they break inside the card at 320 */
.invite-who { overflow-wrap: anywhere; }

/* designer2: settings */
/* the new key is shown once: all of it is on the screen at every width, and on a phone the copy button stands under it, not over it */
.newkey { margin-top: 12px; } .newkey .cmd { margin-top: 6px; } .newkey .cmd pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 640px) { .newkey .cmd pre { padding-right: 14px; } .newkey .cmd .copy { position: static; transform: none; margin: 8px 0 0 auto; display: flex; } }

/* designer2: audit */
/* the moment is one piece; on a phone the address stands under it without a label, and the IP is left out (hunt D-7, K5 7) */
.audit td.when { white-space: nowrap; } .audit td[data-l="Action"] { min-width: 14ch; }
/* a detail is the record's own text, at times one long word (a list of ids): it breaks, so that the action beside it keeps its room */
.audit td.wide { overflow-wrap: anywhere; }
@media (max-width: 600px) { .audit td[data-l="IP"] { display: none; } table.audit.stack tbody td.by { grid-column: 1 / -1; } table.audit.stack tbody td.by::before { content: none; }   /* beats ee.css:576 table.stack tbody td[data-l]::before */ }

/* designer2: the invitation's form */
/* a refused password is said where the hint stood, in red, tied to the field: no box above the form that repeats the hint */
.auth .hint.is-err { color: var(--red); }

/* designer2: the Checks page's own tables */
/* a block's head is the check's name, its goal and its steps: the name alone is bold, not the whole cell */
@media (max-width: 720px) { table.stack.own tbody td:first-child { font-weight: 400; } table.stack.own tbody td:first-child > a { font-weight: 600; } table.stack.own td.actions form { margin-top: 4px; } }

/* designer2: the site's page (site.html), by the crowd's ruling site-page/RULING.md */
/* sizes 26 (22 at ≤480), 20, 17.5, 15, 13; weights 400 and 600; colour means state only */
.site-page .site-head h1 { font-size: 26px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; }
.site-page .site-url { margin: 0 0 14px; font-size: 15px; } .site-page .site-url a { color: var(--muted); text-decoration: none; } .site-page .site-url a:hover { text-decoration: underline; }
.site-page .verdict { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.site-page .verdict .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); position: relative; top: -1px; }
.site-page .verdict.red { color: var(--red); } .site-page .verdict.red .dot { background: var(--red-mark); }
.site-page .verdict.amber { color: var(--amber); } .site-page .verdict.amber .dot { background: var(--amber-mark); }
.site-page .verdict.green { color: var(--green); } .site-page .verdict.green .dot { background: var(--green); }
.site-page .verdict.grey { color: var(--ink-2); }
.site-page .counts { margin: 0 0 4px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 2px 14px; } .site-page .counts span { white-space: nowrap; } .site-page .counts .muted { white-space: normal; }   /* the long note on devices past the plan wraps (it ran past the edge at 320) */
.site-page .counts .ok { color: var(--green); } .site-page .counts .bad { color: var(--red); } .site-page .counts .warn { color: var(--amber); }
.site-page .night-line { margin: 0 0 16px; font-size: 13px; }
/* up to three failures with their picture: what broke, in one look */
.site-page .fail-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; margin: 0 0 8px; }
.site-page .fail-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--red-mark); border-radius: var(--r-l); background: var(--surface); color: inherit; text-decoration: none; }
.site-page .fail-card:hover { border-color: var(--line-2); border-left-color: var(--red-mark); }
.site-page .fail-card.look, .site-page .fail-card.look:hover { border-left-color: var(--amber-mark); } .site-page .fail-card.look .fail-text b { color: var(--ink); }   /* needs a look: amber border, ink title, the amber "?" — no red anywhere on a look card (DC-H75, design-critic 17:27) */
.site-page .fail-pic { display: block; width: 160px; height: 100px; border-radius: 6px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.site-page .fail-pic.phone { width: 64px; height: 112px; } .site-page .fail-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.site-page .fail-pic.none { display: grid; place-items: center; font-size: 12px; color: var(--muted); text-align: center; padding: 6px; }
.site-page .fail-text { display: grid; gap: 3px; min-width: 0; } .site-page .fail-text b { font-size: 15px; font-weight: 600; } .site-page .fail-text .why { font-size: 13px; color: var(--ink-2); }
.site-page .site-act { margin: 6px 0 18px; } .site-page .site-act form { display: inline; }
/* five folds: a card whose summary is a title and a count; closed, the page is one screen */
.site-page details.fold { padding: 0; margin-bottom: 12px; } .site-page details.fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; }
.site-page details.fold > summary::-webkit-details-marker { display: none; }
.site-page details.fold > summary::before { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-right: 4px; position: relative; top: -2px; transition: transform .12s; }
.site-page details.fold[open] > summary::before { transform: rotate(45deg); top: -4px; }
.site-page details.fold > summary .fold-t { font-size: 17.5px; font-weight: 600; } .site-page details.fold > summary .fold-n { font-size: 13px; color: var(--muted); }
.site-page details.fold > summary:hover .fold-t { color: var(--accent); }
.site-page details.fold > *:not(summary) { margin-left: 18px; margin-right: 18px; } .site-page details.fold[open] { padding-bottom: 16px; }
.site-page details.fold > .alerts, .site-page details.fold > .tablewrap { margin-left: 18px; margin-right: 18px; }
.site-page details.fold h3 { font-size: 15px; margin: 16px 18px 6px; }
.site-page .kindline .kindform { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 6px; } .site-page .kindline button { margin-left: 6px; }
.site-page .left-out ul { margin: 2px 0 6px 18px; padding: 0; } .site-page .left-out p { margin: 6px 0 0; }
/* tiles: the name and its state in words, no marks; a state's colour only where the last report gave one */
.site-page .chk-tiles.words .chk-tile { grid-template-columns: 1fr auto; } .site-page .chk-tile .chk-body b { font-weight: 600; font-size: 14.5px; }
.site-page .chk-tile .state { display: block; font-size: 13px; color: var(--muted); } .site-page .chk-tile .state.bad { color: var(--red); } .site-page .chk-tile .state.ok { color: var(--green); } .site-page .chk-tile .state.look { color: var(--amber); }   /* needs a look: amber, its own tone (DC-H74, design-critic 17:06; crowd2's span.state.look) */
.site-page .spark-line { margin: 0 0 8px; }
@media (max-width: 480px) { .site-page .site-head h1 { font-size: 22px; } .site-page details.fold > summary { padding: 12px 14px; } .site-page details.fold > *:not(summary), .site-page details.fold > .alerts, .site-page details.fold > .tablewrap { margin-left: 14px; margin-right: 14px; } .site-page details.fold h3 { margin-left: 14px; margin-right: 14px; } }
/* a tile that is off or left out is said in words and by its dashed edge, never by fading its text under 4.5:1 (the look tests) */
.site-page .chk-tile.off, .site-page .chk-tile.absent, .site-page .chk-tile.off.absent, .site-page .chk-tiles.dim { opacity: 1; }
.site-page .chk-tile.off .chk-body b, .site-page .chk-tile.absent .chk-body b { color: var(--ink-2); font-weight: 400; }
/* what a thumb presses is 44 px tall on a phone: the one button, and the report's replay */
@media (max-width: 720px) { .site-page .site-act .button, .site-page .site-act button, .site-page .tools-line .button.small { min-height: 44px; display: inline-flex; align-items: center; } }

/* the three proofs on a phone: one block each, the token breaks inside the card; nothing scrolls sideways */
@media (max-width: 720px) { .site-page .tablewrap:has(> .proofs) table { min-width: 0; width: 100%; } .site-page .tablewrap:has(> .proofs)::after { content: none; }
  .site-page .proofs tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); } .site-page .proofs tr:last-child { border-bottom: 0; }
  .site-page .proofs td { display: block; border: 0; padding: 1px 0; width: auto; } .site-page .proofs code { white-space: normal; overflow-wrap: anywhere; } }

/* designer2: the check form */
/* the fold "API id" under Save is a thumb's height on a phone */
@media (max-width: 720px) { #testform .inl-details > summary { min-height: 44px; display: inline-flex; align-items: center; } }

/* designer2: the Checks page (tests.html) */
/* what a thumb presses on a phone is 44 px tall: Save, Approve, delete, "Run on this site", "Run now" per site */
@media (max-width: 720px) { .checks-list button, .checks-list .button, #add .button, #add button, #live-next button { min-height: 44px; display: inline-flex; align-items: center; } }
.checks-list tr.lead td { padding-top: 16px; } .checks-list tr.waits td { background: none; }
#live-next .queue-rows { margin: 0 0 8px; padding-left: 18px; }
/* the live section's rows: what runs, what waits in line, the night, the sites to run now */
#live-next .live-rows, #live-next .queue-rows { margin: 0 0 8px; padding-left: 18px; } #live-next .live-rows li, #live-next .queue-rows li { margin: 2px 0; }
#live-next .run-now { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 0; }

/* designer2: settings, the members' rows on a phone */
/* the role's form (a select, the owner's password field, save) wraps inside the row: at 320 it ran past the edge and took "save" and "remove" with it */
@media (max-width: 720px) { .members form.inline.row { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; align-items: center; }
  .members form.inline.row select, .members form.inline.row input { max-width: 100%; min-width: 0; flex: 1 1 140px; } .members form.inline.row button { flex: none; } }

/* designer2: the Usage page (usage.html), by crowd3's usage-meaning ruling: five headings, the number first, amber at the limit */
.usage .u-top { margin: 0 0 14px; font-size: 15px; } .usage .u-top.warn { color: var(--amber); }
.usage .card h2 { font-size: 17.5px; margin: 0 0 6px; } .usage .card p { margin: 0 0 6px; } .usage .card p:last-child { margin-bottom: 0; }
.usage .u-big { font-size: 20px; font-weight: 600; margin: 0 0 8px; } .usage .u-big.warn, .usage .card.warn h2 { color: var(--amber); }
.usage .card.warn { border-color: var(--amber-mark); } .usage .u-out { color: var(--ink-2); }
.usage .u-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } .usage .u-row > .card { margin: 0; }   /* Sites · Members · Devices: one row of small cards (critic #37) */
@media (max-width: 720px) { .usage .u-row { grid-template-columns: 1fr; } }   /* a phone: one under the other */

/* designer2: the Checks page's third commit (checks-page/RULING.md): the idle line, the number cell, the windows as 240 px stamps */
.idle-line { margin: -6px 0 16px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.idle-line .run-now, #live-next .run-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.checks-list .newest { margin: -8px 0 8px; } .checks-list .save-row { margin: 0 0 12px; }
.checks-list td.how .ok { color: var(--green); } .checks-list td.how .bad { color: var(--red); } .checks-list td.how .amber { color: var(--amber); }   /* "needs a look" in the house amber for words (NEEDS-A-LOOK.md; DC-H90's colour half, design-critic 18:14) */
#live-next .stop-all { margin: 8px 0 0; } #live-next .live-rows li button, #live-next .queue-rows li button { margin-left: 6px; }
/* the wall's frames as stamps: a bar with the dot and the host, a screen 240 wide, a caption; at most six (the seventh on is one line) */
#live .cams { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
#live .cam { width: 240px; max-width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); cursor: zoom-in; }
#live .cam .cam-pic { aspect-ratio: 16 / 10; background: var(--media-bg); } #live .cam .cam-pic img { object-fit: contain; object-position: top; background: var(--media-bg); }
#live .cam figcaption { padding: 6px 10px 8px; font-size: 12.5px; } #live .cam:nth-child(n+7):not(.focus) { display: none; }
/* C4: the window of the report started here stands first, in focus at 547 px; on a phone it is the one window shown */
#live .cam.focus { width: 547px; order: -1; }
#live.idle .rec { background: var(--line-3); } #live.idle .rec::after { display: none; }
@media (max-width: 480px) { #live .cam { width: 100%; } #live .cam:nth-child(n+2):not(.focus) { display: none; } #live .cams.has-focus .cam:not(.focus) { display: none; } }
#live-next .live-rows, #live-next .queue-rows { list-style: none; padding-left: 0; }
@media (max-width: 720px) { .checks-list .goal { display: none; } .checks-list tr.open .goal { display: block; } .checks-list tbody td:nth-child(2) { cursor: pointer; } .checks-list td.how { padding-top: 0; } }
#live > #live-next { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .checks-list td.actions:not(:has(a, button)) { display: none; } }
@media (max-width: 720px) { .checks-list tbody tr { padding: 8px 0; grid-template-rows: auto auto; } .checks-list tbody td:first-child { grid-row: 1 / span 2; align-self: start; } .checks-list tbody td:nth-child(2) { grid-row: 1; } .checks-list tbody td.how { grid-row: 2; } .checks-list tbody td.actions { grid-row: 2; } }
@media (max-width: 720px) { .checks-list tbody td.how { margin: 0; } }
/* the draft's try row (test_form.html): the site, the button, one line on what it costs */
#testform .try-row { margin-top: 10px; align-items: center; gap: 8px 12px; } #testform .try-row select { max-width: 260px; }
#live-next .live-rows .ok { color: var(--green); } #live-next .live-rows .bad { color: var(--red); }
@media (max-width: 720px) { #testform .try-row .button { min-height: 44px; display: inline-flex; align-items: center; } }

/* designer2: under a thumb, whatever the width (engineer2's walk on the owner's phone: Galaxy Fold, 344 closed / 884 open, a coarse pointer) */
@media (pointer: coarse) { .narrow-left button, .narrow-left .button, .settings-col button, .settings-col .button, .checks-list button, .checks-list .button, #add button, #add .button, #testform button, #testform .button, .usage .button, body:has(.usage) .row.head .button, #live-next button, .idle-line button, .idle-line .button { min-height: 44px; } .narrow-left .inl-details summary, .settings-col .inl-details summary { min-height: 44px; display: inline-flex; align-items: center; } #reset-dead .button { min-height: 44px; } }
@media (max-width: 720px) { #reset-dead .button { min-height: 44px; display: inline-flex; align-items: center; } }

/* designer2: Billing on Free after a trial (hunt D-6 S4): the one site the night checks, the others wait; an admin's picker on one line */
.free-one { margin: 8px 0 6px; } .free-one p { margin: 0 0 6px; }
.free-one .free-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .free-one .free-pick label { font-weight: 400; margin: 0; } .free-one .free-pick select { width: auto; max-width: 260px; margin: 0; }
@media (pointer: coarse) { .free-one .free-pick button { min-height: 44px; } }

/* designer2: the site's page — a check found absent is put back with two ways (engineer3's 326b5010): the two buttons on their own row under the words, never beside the name */
.site-page .chk-tile .anyway { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }

/* designer2: the Checks page's A5 — four or more sites are summed and a tap opens which ones (a details under the numbers) */
.checks-list td.how details.by-site { margin-top: 2px; } .checks-list td.how details.by-site summary { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; list-style: none; display: inline; }
.checks-list td.how details.by-site summary::-webkit-details-marker { display: none; } .checks-list td.how details.by-site[open] summary { margin-bottom: 2px; display: block; }
.checks-list td.how details.by-site bdi, .checks-list td.how bdi { overflow-wrap: anywhere; }
@media (pointer: coarse) { .checks-list td.how details.by-site summary { display: inline-flex; align-items: center; min-height: 44px; } .checks-list td.how details.by-site[open] summary { display: flex; } }

/* designer2: the Checks page on a phone (checks-page ruling C8): a row is one line — the box, the name, the number at its right;
   the goal opens on a tap; the actions (edit, Approve) stand under the name. It was two lines, ~63 px, 116 px before the goal hid */
@media (max-width: 720px) {
  .checks-list tbody tr { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 10px; padding: 7px 0; }
  .checks-list tbody td:first-child { grid-row: 1; }
  .checks-list tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .checks-list tbody td.how { grid-column: 3; grid-row: 1; max-width: calc(46vw / var(--zoom, 1)); text-align: right; align-self: start; padding-top: 3px; overflow-wrap: anywhere; }
  .checks-list tbody td.how br { display: none; } .checks-list tbody td.how br + span { display: block; }
  .checks-list tbody td.actions { grid-column: 2 / -1; grid-row: 2; }
  .checks-list tbody tr.lead td:nth-child(2) { grid-column: 2 / -1; }
  /* a check that waits for an admin carries its steps: the name has the whole width, the words and Approve stand under it */
  .checks-list tbody tr.waits td:nth-child(2) { grid-column: 2 / -1; } .checks-list tbody tr.waits td.how { grid-column: 2 / -1; grid-row: 2; max-width: none; text-align: left; } .checks-list tbody tr.waits td.actions { grid-row: 3; }
}
/* Settings: Pause / Resume beside the night hour (live-overview ruling); the sentence and its button wrap on a phone, the button keeps a thumb's height */
.settings-col .night-hold { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
@media (pointer: coarse) { .settings-col .night-hold button { min-height: 44px; } }
/* account: the line under the title says who is signed in and which team, and links back to the Overview (first-touch FT-3) */
.acct-who { max-width: 62ch; margin: -4px 0 18px; color: var(--ink-2); line-height: 1.5; }
.acct-who b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.card form.logout-others { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }   /* the sessions line is its own thing, not a tail of the password's button */
/* account: the deletes sit last, each closed behind a quiet line; red only on the confirm button inside (first-touch FT-3) */
.acct-end h2 { font-size: 16px; color: var(--ink-2); }
.acct-end details.acct-del { display: block; margin: 0 0 12px; }
.acct-end details.acct-del > summary { display: block; padding: 11px 0; line-height: 22px; color: var(--ink-2); }   /* a thumb's height; block, not flex, keeps the space before the team's name */
.acct-end details.acct-del[open] > summary { color: var(--ink); }
.acct-end details.acct-del > form, .acct-end details.acct-del > p { margin: 6px 0 12px; }

/* designer2: under a thumb a box is ticked through its label and a fold opened through its summary, 44 px each (senior's split of the
   look tests' known lines, 2026-09-30). The box stays small: its label reaches 14 px to its left without moving it */
@media (max-width: 720px), (pointer: coarse) {
  #testform label.check, .settings-col label.check { min-height: 44px; padding-left: 14px; margin-left: -14px; }
  #testform .acts label.check.inl { display: inline-flex; vertical-align: top; }
  #testform details.step > summary { padding-top: 10px; padding-bottom: 10px; min-height: 44px; box-sizing: border-box; }
  #testform details.acts-wrap > summary { padding: 12px 0; min-height: 44px; box-sizing: border-box; }   /* a list item still: its triangle stays */
  #testform .inl-details > summary, .settings-col .inl-details > summary { display: inline-block; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .checks-list td label.tick { display: grid; place-items: center; width: 44px; height: 44px; margin: -7px 0; position: relative; z-index: 1; }   /* inside its row (the table's wrap clips what leaves it); it may lie over the gap to the name */
  .site-page .tools-line .button.small { min-height: 44px; display: inline-flex; align-items: center; }
}

/* designer2: on a phone the row's name is the box's label and its ::after covers the whole row (ee.css, form[action="/tests"] tbody td label.inl::after);
   the numbers, "which sites" and a row's buttons stand above it, or a press on them ticks the box and the fold never opens (crowd2, checks/loop-02 FIX 1) */
.checks-list tbody td.how, .checks-list tbody td.actions { position: relative; z-index: 1; }

/* designer2: crowd2's checks/loop-02 — the number cell's parts stay whole (6), rows of one height (10a), the help line's measure (10b),
   the running card's one last line (9a), a report on many sites is one line with its names in a fold (4) */
.checks-list td.how .nw { white-space: nowrap; }
section.checks-list tbody td .pill { padding-block: 0; line-height: 18px; vertical-align: 1px; margin-top: 0; }
#oneline-help { max-width: none; margin-top: 6px; } #oneline-help a { white-space: nowrap; } @media (pointer: coarse) { #oneline-help { margin-bottom: 18px; } #oneline-help a { padding: 6px 0 20px; position: relative; z-index: 1; } }   /* DC-H92 (design-critic 14:29 UTC 4 Oct): the tap is 44 px through the inline link's padding, 6 px up (inside the gap to the field) and 20 px down, the hint 8 px further from "Run" so the tap covers no label; an inline-flex box stretched the hint's line to 44 px, a hole between its two lines */   /* a thumb's 44 px (design-critic 23:14) */   /* the help spans the field, "Advanced form" never breaks (critic-lead #19) */
#night-line::first-letter { text-transform: uppercase; }
#live-next details.by-site { display: inline; } #live-next details.by-site[open] { display: block; margin: 2px 0 4px; }
#live-next details.by-site summary { display: inline; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
#live-next details.by-site summary::-webkit-details-marker { display: none; } #live-next details.by-site a { overflow-wrap: anywhere; }
@media (pointer: coarse) { #live-next details.by-site summary { display: inline-flex; align-items: center; min-height: 44px; } }
/* on a phone a row with a fold gives its numbers the whole second line, left: the names keep their width and the open fold does not grow a 179 px column */
@media (max-width: 720px) { .checks-list tbody tr:has(details.by-site) td.how { grid-column: 2 / -1; grid-row: 2; max-width: none; text-align: left; } .checks-list tbody tr:has(details.by-site) td.actions { grid-row: 3; } }

/* crowd5: the Checks list between the phone and the desktop table (the owner on his Fold, ~900 px, 4 Oct: "Looks bad arranged" —
   the check's sentence broke into four short lines beside a near-empty column). Each check is one block: the box, the name and its
   sentence on the full width, the state line and "which sites" under them, a row's own buttons at its right */
@media (min-width: 721px) and (max-width: 1210px) {
  form[action="/tests"] .checks-list .tablewrap table { min-width: 0; } form[action="/tests"] .checks-list .tablewrap::after { content: none; }
  form[action="/tests"] .checks-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  form[action="/tests"] .checks-list tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  form[action="/tests"] .checks-list tbody tr:last-child { border-bottom: 0; }
  form[action="/tests"] .checks-list tbody td { display: block; border: 0; padding: 0; }
  form[action="/tests"] .checks-list tbody td:first-child { grid-column: 1; grid-row: 1 / span 2; }
  form[action="/tests"] .checks-list tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
  form[action="/tests"] .checks-list tbody td.how { grid-column: 2; grid-row: 2; margin: 0; padding-top: 6px; }
  form[action="/tests"] .checks-list tbody td.actions { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
  form[action="/tests"] .checks-list tbody td.actions:empty { display: none; }
  form[action="/tests"] .checks-list tbody tr.lead td:nth-child(2) { grid-column: 2 / -1; }
}
/* the line "Runs when you ask" follows the open-able "which sites" straight: a <br> after a block stood as an empty line (the Fold's gap) */
.checks-list td.how details.by-site + br { display: none; }
/* under a thumb "which sites" keeps its 44 px but reads as the next line of the numbers, not a link alone under a gap (the Fold);
   open, it keeps its bottom so the box never lies over the sites' own links */
@media (pointer: coarse) { .checks-list td.how details.by-site { margin-top: 0; } .checks-list td.how details.by-site > summary { margin: -12px 0; position: relative; z-index: 1; } .checks-list td.how details.by-site[open] > summary { margin-bottom: 2px; } }

/* crowd5, DC-H99 (design-critic 18:14 UTC 4 Oct, luma's /tests at 390): on a phone a check's state stands BESIDE its name only when it fits
   there on one line ("Works on 6 of 6 sites"); a longer one ("Not checked yet on 48 of 48 sites") stood in a 179-px right column on two
   lines. A wrapping flex row decides it without a measure: an item that does not fit beside the name at its one-line width goes to the
   next line, under the name, left, and wraps there. The box keeps the row's left edge; the row's buttons stand on their own line */
@media (max-width: 720px) {
  form[action="/tests"] .checks-list tbody:not(#waiting):not(#unread) > tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 2px; padding: 7px 0 7px 46px; min-height: 44px; box-sizing: border-box; }   /* the box's 44-px tap (from the row's top edge) stays inside its own row, as the grid row held it */
  form[action="/tests"] .checks-list tbody:not(#waiting):not(#unread) > tr > td:first-child { position: absolute; left: 0; top: 7px; }
  form[action="/tests"] .checks-list tbody:not(#waiting):not(#unread) > tr > td:nth-child(2) { flex: 1 1 120px; min-width: 0; }
  form[action="/tests"] .checks-list tbody:not(#waiting):not(#unread) > tr > td.how { flex: 0 1 auto; max-width: none; min-width: 0; text-align: left; margin: 0; }
  form[action="/tests"] .checks-list tbody:not(#waiting):not(#unread) > tr > td.actions { flex: 1 0 100%; }
}

/* crowd5: /usage as one row of equal tiles (the owner, senior 03:33 UTC 5 Oct (b)): four at 1920, two a row below 1000, one on a phone;
   the number large on its own line, a short line under it; the notes and the folded rule under the row */
.usage .u-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.usage .u-tile { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usage .u-tile h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0; }
.usage .u-num { font-size: 32px; font-weight: 700; line-height: 1.1; margin: 4px 0 0; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; } .usage .u-num small { font-size: 16px; font-weight: 500; color: var(--muted); }
.usage .u-num.warn { color: var(--amber); }
.usage .u-sub { font-size: 14px; color: var(--ink-2); margin: 0; overflow-wrap: anywhere; }
.usage .u-notes { max-width: 72ch; } .usage .u-notes p { margin: 0 0 8px; }
.usage details.u-more > summary { cursor: pointer; color: var(--accent); padding: 6px 0; } .usage details.u-more > p { margin: 4px 0 0; color: var(--ink-2); }
@media (pointer: coarse) { .usage details.u-more > summary { min-height: 44px; display: flex; align-items: center; } }
@media (max-width: 1000px), (min-width: 1024px) and (max-width: 1100px) { .usage .u-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .usage .u-tiles { grid-template-columns: 1fr; } }
.usage details.u-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; } .usage details.u-more > summary::-webkit-details-marker { display: none; }
.usage details.u-more > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; } .usage details.u-more[open] > summary::before { transform: rotate(45deg); }   /* the fold says it opens: the site page's fold chevron, the same row (LOOP-10 row 87, 2 usability) */
@media (prefers-reduced-motion: reduce) { .usage details.u-more > summary::before { transition: none; } }