/* 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-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 .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); }

/* 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); }
#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-2); 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: 46vw; 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; }
}