/* SlopCop design system v2: components. Needs tokens.css first.
   Every class starts sc-; a state is is-*. Put `sc` on the element that holds a v2 screen (the body, or a
   screen's root while the rest of an app is still v1): it sets the ground, the face and the resets, and
   nothing below works outside it. Asset paths are relative to this file. */

/* ---- Base ---- */
.sc { background: var(--sc-bg); color: var(--sc-fg); font: 400 var(--sc-t-body)/1.5 var(--sc-sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.sc, .sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, pre, blockquote) { margin: 0; padding: 0; }
.sc :where(ol, ul) { list-style: none; }
.sc :where(a) { color: inherit; text-decoration: none; }
.sc :where(button) { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
.sc :where(h3, h4, dt, strong, b) { font-weight: 600; }
.sc :where(code, pre, kbd, samp) { font-family: var(--sc-mono); }
.sc :where(p) { text-wrap: pretty; }
.sc :focus-visible { outline: 2px solid var(--sc-fg); outline-offset: 3px; }
/* A ground inside another ground: a night band on a paper page, a paper sheet in a dark screen. */
.sc-on-field, .sc-on-paper { background: var(--sc-bg); color: var(--sc-fg); }

/* ---- Type ---- */
.sc-display { font: 400 var(--sc-t-display)/.96 var(--sc-display); letter-spacing: -.022em; text-wrap: balance; }
.sc-heading { font-size: var(--sc-t-heading); line-height: 1.02; font-weight: 600; letter-spacing: -.032em; text-wrap: balance; }
.sc-title { font-size: var(--sc-t-title); line-height: 1.1; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.sc-lead { font-size: var(--sc-t-lead); line-height: 1.4; }
.sc-item { font-size: var(--sc-t-item); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.sc-small { font-size: var(--sc-t-small); line-height: 1.45; }
.sc-note { font-size: var(--sc-t-note); line-height: 20px; }
.sc-quiet { color: var(--sc-quiet); }
.sc-mono { font: 400 var(--sc-t-mono)/21px var(--sc-mono); }
.sc-wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 28px/1 var(--sc-wordmark); letter-spacing: -.012em; }
.sc-wordmark img { display: block; flex: none; }
/* Product screens */
.sc-ui { font-size: var(--sc-ui-body); line-height: 22px; }
.sc-ui-page { font-size: var(--sc-ui-page); line-height: 32px; font-weight: 600; letter-spacing: -.022em; }
.sc-ui-section { font-size: var(--sc-ui-section); line-height: 26px; font-weight: 600; letter-spacing: -.012em; }
.sc-ui-small { font-size: var(--sc-ui-small); line-height: 18px; }
/* A link in running text: underlined, the text's own colour. A link is never red. */
.sc-link, .sc-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sc-link:hover, .sc-prose a:hover { text-decoration-thickness: 2px; }

/* ---- Tag. The one card. What it holds lies on the ground it sits on, marked off by one solid hairline,
   with one corner cut the way an evidence tag is. No fill of another colour, no shadow, no radius.
   The line is the tag's own background; ::before, one pixel in, is the surface. Both clips cut the corner
   only and pass 5 px outside the other three sides, so a tag that starts on a part pixel is drawn by its own
   box, which the browser snaps, and its lower hairline is not thinned. ---- */
.sc-tag { position: relative; isolation: isolate; --cut: var(--sc-cut); --surface: var(--sc-bg); --line: var(--sc-line);
  background: var(--line);
  clip-path: polygon(-5px -5px, calc(100% - var(--cut) - 5px) -5px, calc(100% + 5px) calc(var(--cut) + 5px), calc(100% + 5px) calc(100% + 5px), -5px calc(100% + 5px)); }
.sc-tag::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface);
  clip-path: polygon(-5px -5px, calc(100% - var(--cut) - 4.414px) -5px, calc(100% + 5px) calc(var(--cut) + 4.414px), calc(100% + 5px) calc(100% + 5px), -5px calc(100% + 5px)); }
.sc-tag.is-lead { --cut: var(--sc-cut-l); }
.sc-tag.is-quiet { --line: color-mix(in srgb, var(--sc-fg) 46%, var(--sc-bg)); }   /* a tag among many: a chip, a row of marks */
.sc-tag.is-found { --line: var(--sc-mark); }                                        /* the finding. One per view. */
.sc-tag.is-pressable:hover { --surface: var(--sc-tint); }
/* A chip: a small tag for a name, a mark and a name, a filter. */
.sc-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 8px; font: 500 13.5px/1 var(--sc-sans); white-space: nowrap; --cut: var(--sc-cut-s); }
.sc-chip svg { display: block; flex: none; width: 14px; height: 14px; fill: currentColor; }

/* ---- Buttons. Solid for the one main act of a view, line for the rest, text for the least. Square.
   The main button may cast a dotted shadow under the pointer; nothing else has a shadow. ---- */
.sc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; font: 500 16px/1 var(--sc-sans); white-space: nowrap; cursor: pointer; }
.sc-button.is-solid { background: var(--sc-fg); color: var(--sc-bg); }
.sc-button.is-line { box-shadow: inset 0 0 0 1px currentColor; }
.sc-button.is-line:hover { background: var(--sc-tint); }
.sc-button.is-text { height: auto; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sc-button.is-danger { color: var(--sc-mark-text); box-shadow: inset 0 0 0 1px currentColor; }   /* deletes, revokes. Line only: red is never a fill. */
.sc-button.is-m { height: 42px; padding: 0 16px; }
.sc-button.is-s { height: 34px; padding: 0 12px; font-size: 14px; }
.sc-button:disabled, .sc-button[aria-disabled="true"] { color: var(--sc-faint); cursor: default; }
.sc-button.is-solid:disabled, .sc-button.is-solid[aria-disabled="true"] { background: var(--sc-faint); color: var(--sc-bg); }
@media (prefers-reduced-motion: no-preference) {
  .sc-button { transition: transform var(--sc-press) var(--sc-ease-out), background-color var(--sc-press) ease; }
  .sc-button:active:not(:disabled) { transform: translateY(1px); }
}
.sc-cast { position: relative; --cast: 0px; }
.sc-cast::before, .sc-cast::after { content: ""; position: absolute; background-color: var(--sc-fg); image-rendering: pixelated; pointer-events: none;
  -webkit-mask: url(assets/tint-32.png) 0 0 / 8px 8px; mask: url(assets/tint-32.png) 0 0 / 8px 8px; }
.sc-cast::before { left: var(--cast); right: calc(-1 * var(--cast)); top: 100%; height: var(--cast); }
.sc-cast::after { left: 100%; width: var(--cast); top: var(--cast); bottom: 0; }
.sc-cast:hover { --cast: 5px; transform: translate(-2px, -2px); }

/* ---- Rows: plain facts between hairlines. A title and one quiet line. ---- */
.sc-rows { display: grid; gap: 0 var(--sc-8); }
.sc-rows > * { padding: var(--sc-4) 0 26px; border-top: 1px solid var(--sc-hair); }
.sc-rows :where(dt, h3) { font-size: var(--sc-t-item); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.sc-rows :where(dd, p) { margin-top: 6px; color: var(--sc-quiet); font-size: var(--sc-t-small); line-height: 1.45; max-width: 24em; }
.sc-rows.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-rule { border: 0; border-top: 1px solid var(--sc-hair); margin: 0; }

/* ---- What a machine printed. On a tag or in a well, in the mono face, 13/21. Red marks the code that is
   the problem (an underline, not a wash) and nothing else. ---- */
.sc-tag code, .sc-code { font: 400 var(--sc-t-mono)/21px var(--sc-mono); }
.sc-code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc :where(code) b, .sc :where(code) mark { font-weight: 700; color: inherit; background: none; box-shadow: inset 0 -2px 0 var(--sc-mark); }
.sc :where(code) i, .sc-dim { font-style: normal; color: var(--sc-quiet); }
.sc-well { background: var(--sc-well); padding: var(--sc-4) var(--sc-5); overflow: auto; }
/* Code in four inks, put on by runtime/code.js: keywords, strings, numbers, comments. Everything else is the text colour;
   red stays the finding's. */
.sc-ink-key { color: var(--sc-code-key); }
.sc-ink-str { color: var(--sc-code-str); }
.sc-ink-num { color: var(--sc-code-num); }
.sc-ink-note { color: var(--sc-quiet); }
/* A listing with line numbers. A flagged line carries a red bar and a red number; the code that is the
   problem is underlined in it (<b>), as everywhere. No wash: red is a line, never a fill. */
.sc-listing { display: grid; font: 400 var(--sc-t-mono)/21px var(--sc-mono); background: var(--sc-well); padding: var(--sc-3) 0; overflow-x: auto; }
.sc-listing > * { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); padding-right: var(--sc-5); white-space: pre; }
.sc-listing > * > :first-child { padding-right: 1.2em; text-align: right; color: var(--sc-faint); user-select: none; }
.sc-listing > .is-flagged { box-shadow: inset 2px 0 0 var(--sc-mark); }
.sc-listing b { font-weight: 700; box-shadow: inset 0 -2px 0 var(--sc-mark); }
.sc-listing > .is-flagged > :first-child { color: var(--sc-mark-text); }
/* A finding: the red-lined tag with its severity, what was found, where, the lines, and what can be done. */
.sc-finding { padding: 16px 18px 6px; }
.sc-finding > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sc-4); }
.sc-finding > header :where(h2, h3, h4) { font-size: 16px; line-height: 22px; }
.sc-finding > .sc-mono { margin-top: 4px; color: var(--sc-quiet); }
.sc-finding > .sc-listing { margin: 14px -17px 0; }   /* to the tag's line, not over it */
.sc-finding > footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4); padding: 12px 0; }

/* A sheet: labelled lines of a machine's text on one tag. */
.sc-sheet { padding: 4px var(--sc-5) 6px; }
.sc-sheet > li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 0 var(--sc-4); align-items: baseline; padding: 11px 0 12px; }
.sc-sheet > li + li { border-top: 1px solid var(--sc-hair); }
.sc-sheet > li > span { font-size: 15px; line-height: 22px; font-weight: 500; }
.sc-sheet code { overflow-wrap: anywhere; }

/* ---- The stage, bands and pictures. Content is as wide as the window less a gutter either side, up to
   the stage, and centred on a whole pixel (half a pixel would resample every dot of a picture pinned to it).
   A band is a stretch of field with one picture in dots pinned to a side at its natural size. ---- */
.sc-frame { position: relative; width: min(100% - 2 * var(--sc-gutter), var(--sc-stage)); margin: 0 auto; }
@supports (width: round(down, 1px, 1px)) { .sc-frame { margin-left: max(var(--sc-gutter), round(down, (100% - var(--sc-stage)) / 2, 1px)); } }
.sc-band { overflow: clip; }
.sc-band .sc-frame { padding: var(--sc-band-top) var(--sc-pad) calc(var(--sc-edge-h) + var(--sc-9)); }
/* A band that opens a page: its bar sits at the frame's top and its copy carries its own padding. */
.sc-band.is-opening .sc-frame { padding: 0 0 calc(var(--sc-edge-h) + var(--sc-6)); }
.sc-frame > :not(.sc-art) { position: relative; z-index: 1; }
.sc-art { display: block; position: absolute; inset: 0 calc(-1 * var(--sc-gutter)); overflow: clip; pointer-events: none; }
.sc-art img, .sc-art canvas { position: absolute; bottom: 0; max-width: none; image-rendering: pixelated; }
.sc-art.is-right img { right: 0; }
.sc-art.is-left img { left: 0; }
/* Any picture in dots, anywhere: natural size, square dots. */
.sc-plate { image-rendering: pixelated; max-width: none; }

/* The edge a field ends or begins in: the rim of a pool of lamplight, as paper dots over the field colour. */
.sc-edge { position: relative; height: var(--sc-edge-h); background: var(--sc-night) var(--sc-edge-img) center top repeat-x; image-rendering: pixelated; }
.sc-edge.is-begins { background-image: var(--sc-edge-up); background-position: center bottom; }
.sc-edge.is-drawn { background-image: none; }
.sc-edge canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Where a picture runs down to the end of its field, the edge lies over the picture's foot, masked to the
   part below the line where the light starts: the picture stops on that line. */
.sc-edge.is-fold { margin-top: calc(-1 * var(--sc-edge-h)); z-index: 2; pointer-events: none;
  -webkit-mask: var(--sc-edge-cut) center top repeat-x; mask: var(--sc-edge-cut) center top repeat-x; }

/* ---- A cover: a post's picture in a box. The box is field whatever ground it sits on. Three ways to fill it:
   baked (`is-baked`, below: our own photographs, no script); as it comes (a picture we did not make, shown whole
   in grey, screened onto the field, so its dark parts are the field); or printed in dots in the browser by
   runtime/cover.js (`img[data-sc-cover]`), for a page that cannot bake. ---- */
.sc-cover { display: block; position: relative; overflow: hidden; background: var(--sc-night); margin: 0; }
.sc-cover img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.35) brightness(.82); mix-blend-mode: screen; }
.sc-cover img[data-sc-cover] { object-fit: cover; }
.sc-cover canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }   /* at its own size, cropped by the box: a dot is never stretched */
.sc-cover.is-empty { aspect-ratio: 3 / 2; }                                                 /* a post without a picture keeps its place in a row */
.sc-cover.is-printing img, .sc-cover.is-dithered img { visibility: hidden; }   /* while the dots are made, the box is the field */
/* A baked cover: the picture baked at a ladder of widths (tools/plate.py, look `cover`), every one of them in the page,
   and the one nearest the box's width shown at its own size in the middle of the box. The photograph's own black
   surround meets the box's field, so a little field round it or a little cropped from it does not show. The others are
   never fetched: they are lazy and not displayed. No script. */
.sc-cover.is-baked { container-type: inline-size; }
.sc-cover.is-baked img { display: none; position: absolute; left: calc(50% - var(--w) / 2); top: calc(50% - var(--h) / 2); width: var(--w); height: var(--h); max-width: none;
  object-fit: none; filter: none; mix-blend-mode: normal; image-rendering: pixelated; }
@supports (width: round(down, 1px, 1px)) { .sc-cover.is-baked img { left: round(down, calc(50% - var(--w) / 2), 1px); top: round(down, calc(50% - var(--h) / 2), 1px); } }   /* whole pixels: a dot is never split */
.sc-cover.is-baked img[width="220"] { --w: 220px; --h: 147px; }
.sc-cover.is-baked img[width="280"] { --w: 280px; --h: 187px; }
.sc-cover.is-baked img[width="340"] { --w: 340px; --h: 227px; }
.sc-cover.is-baked img[width="400"] { --w: 400px; --h: 267px; display: block; }      /* the one shown where container queries are not known */
.sc-cover.is-baked img[width="460"] { --w: 460px; --h: 307px; }
.sc-cover.is-baked img[width="620"] { --w: 620px; --h: 413px; }
.sc-cover.is-baked img[width="760"] { --w: 760px; --h: 507px; }
@container (max-width: 369.98px) { .sc-cover.is-baked img[width="400"] { display: none; } }
@container (min-width: 430px) { .sc-cover.is-baked img[width="400"] { display: none; } }
@container (max-width: 249.98px) { .sc-cover.is-baked img[width="220"] { display: block; } }
@container (min-width: 250px) and (max-width: 309.98px) { .sc-cover.is-baked img[width="280"] { display: block; } }
@container (min-width: 310px) and (max-width: 369.98px) { .sc-cover.is-baked img[width="340"] { display: block; } }
@container (min-width: 430px) and (max-width: 539.98px) { .sc-cover.is-baked img[width="460"] { display: block; } }
@container (min-width: 540px) and (max-width: 689.98px) { .sc-cover.is-baked img[width="620"] { display: block; } }
@container (min-width: 690px) { .sc-cover.is-baked img[width="760"] { display: block; } }
/* A cover printed on a tag keeps the tag's line and its cut corner. */
.sc-tag > .sc-cover { margin: 1px 1px 0; clip-path: polygon(0 0, calc(100% - var(--cut) + .586px) 0, 100% calc(var(--cut) - .586px), 100% 100%, 0 100%); }
.sc-tag > .sc-cover:only-child { margin: 1px; }

/* ---- A face: a person's own photograph, small, in its own colours, with the chip's cut. The one picture that is not
   in dots and the one place colour comes from outside the palette: it is there to show a person. Built like the tag:
   the box is the line, the photograph sits a pixel inside it with the same cut, so the line runs along the cut corner
   too and a portrait cut out on white is still a tile. Without a photograph, the name's first letter on ink.
   <span class="sc-face"><img src="…" alt=""></span>  or  <span class="sc-face is-letter">Name</span> ---- */
.sc-face { display: inline-block; flex: none; position: relative; width: 24px; height: 24px; vertical-align: middle; --cut: 5px;
  background: color-mix(in srgb, var(--sc-fg) 34%, var(--sc-bg));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.sc-face img { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; filter: brightness(.96);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .586px) 0, 100% calc(var(--cut) - .586px), 100% 100%, 0 100%); }
.sc-face.is-m { width: 40px; height: 40px; --cut: 8px; }
.sc-face.is-l { width: 96px; height: 96px; --cut: var(--sc-cut); }
.sc-face.is-letter { overflow: hidden; background: var(--sc-fg); color: var(--sc-bg); text-align: center; font-size: 0; line-height: 24px; }
.sc-face.is-letter::first-letter { font: 600 12px/24px var(--sc-sans); text-transform: uppercase; }
.sc-face.is-letter.is-m { line-height: 40px; }
.sc-face.is-letter.is-m::first-letter { font-size: 17px; line-height: 40px; }
.sc-face.is-letter.is-l { line-height: 96px; }
.sc-face.is-letter.is-l::first-letter { font-size: 38px; line-height: 96px; }

/* ---- Reading: a post, a guide, a changelog entry. One column, the reading size, the sans throughout. ---- */
.sc-prose { font-size: var(--sc-t-read); line-height: 1.6; max-width: var(--sc-measure); }
.sc-prose > * + * { margin-top: 1.15em; }
.sc-prose :where(h2) { margin-top: 2.2em; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.sc-prose :where(h3) { margin-top: 1.9em; font-size: 22px; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.sc-prose :where(h4) { margin-top: 1.7em; font-size: inherit; }
.sc-prose :where(h2, h3, h4) + * { margin-top: .6em; }
.sc-prose :where(ul, ol) { padding-left: 1.3em; }
.sc-prose :where(ul) { list-style: square; }
.sc-prose :where(ol) { list-style: decimal; }
.sc-prose :where(li) + li { margin-top: .4em; }
.sc-prose :where(li)::marker { color: var(--sc-quiet); }
.sc-prose :where(blockquote) { padding-left: 1.1em; border-left: 1px solid var(--sc-fg); color: var(--sc-quiet); }
.sc-prose :where(hr) { border: 0; border-top: 1px solid var(--sc-hair); margin: 2.2em 0; }
.sc-prose :where(:not(pre) > code) { font-size: .86em; padding: .08em .3em; background: var(--sc-well); }
.sc-prose :where(pre) { font: 400 var(--sc-t-mono)/21px var(--sc-mono); background: var(--sc-well); padding: var(--sc-4) var(--sc-5); overflow-x: auto; }
.sc-prose :where(img, video) { display: block; max-width: 100%; height: auto; }
.sc-prose :where(figcaption) { margin-top: 8px; color: var(--sc-quiet); font-size: var(--sc-t-note); line-height: 20px; }
.sc-prose :where(table) { width: 100%; border-collapse: collapse; font-size: var(--sc-t-small); line-height: 1.45; }
.sc-prose :where(th, td) { padding: 10px 12px 10px 0; border-top: 1px solid var(--sc-hair); text-align: left; vertical-align: top; }
.sc-prose :where(thead th) { border-top: 0; color: var(--sc-quiet); font-weight: 500; }

/* ---- Product pieces. A screen is `sc sc-ui`; these are sized for it. ---- */
/* Forms */
.sc-label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; }
.sc-input, .sc-select, .sc-textarea { display: block; width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 0; background: var(--sc-well); color: var(--sc-fg);
  font: 400 var(--sc-ui-body)/22px var(--sc-sans); box-shadow: inset 0 0 0 1px var(--sc-hair); appearance: none; }
.sc-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--sc-faint); }
.sc-input:hover, .sc-select:hover, .sc-textarea:hover { box-shadow: inset 0 0 0 1px var(--sc-quiet); }
.sc-input:focus-visible, .sc-select:focus-visible, .sc-textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--sc-fg); }
.sc-input[aria-invalid="true"], .sc-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--sc-mark); }
.sc-input[aria-invalid="true"]:focus-visible, .sc-textarea[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--sc-fg); }   /* focus outranks invalid: the person is correcting it */
.sc-select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px; background-position: right 17px center, right 12px center; background-repeat: no-repeat; }
.sc-help { margin-top: 6px; color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; }
.sc-help.is-error { color: var(--sc-mark-text); }
.sc-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--sc-ui-body); line-height: 22px; cursor: pointer; }
.sc-check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 0; background: var(--sc-bg); box-shadow: inset 0 0 0 1px var(--sc-fg); cursor: pointer; }
.sc-check input[type="radio"] { border-radius: 50%; }
.sc-check input:checked { background: var(--sc-fg); box-shadow: inset 0 0 0 1px var(--sc-fg), inset 0 0 0 4px var(--sc-bg); }

/* Tables: hairlines between rows, quiet headings, numbers in tabular figures. No stripes, no cell borders. */
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--sc-ui-body); line-height: 22px; }
.sc-table th { padding: 0 var(--sc-4) 8px 0; color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; font-weight: 500; text-align: left; white-space: nowrap; }
.sc-table td { padding: 11px var(--sc-4) 12px 0; border-top: 1px solid var(--sc-hair); vertical-align: top; }
.sc-table :where(th, td):last-child { padding-right: 0; }
.sc-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-table tbody tr.is-pressable:hover { background: var(--sc-tint); }
@media (max-width: 640px) { .sc-table .is-wide { display: none; } }   /* a phone keeps the name and the state; mark the rest is-wide */

/* Tabs: words on a hairline; the current one is ink with a two-pixel line under it. */
.sc-tabs { display: flex; gap: var(--sc-6); border-bottom: 1px solid var(--sc-hair); overflow-x: auto; scrollbar-width: none; }
.sc-tabs > * { padding: 10px 0 11px; margin-bottom: -1px; color: var(--sc-quiet); font-size: var(--sc-ui-body); line-height: 22px; font-weight: 500; white-space: nowrap; }
.sc-tabs > :hover { color: var(--sc-fg); }
.sc-tabs > [aria-current], .sc-tabs > [aria-selected="true"] { color: var(--sc-fg); box-shadow: inset 0 -2px 0 var(--sc-fg); }

/* Status: a square and a word. Red is for a finding or a failure and nothing else; every other state is
   told by the square's fill and the word. */
.sc-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sc-ui-small); line-height: 18px; font-weight: 500; white-space: nowrap; }
.sc-status::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--sc-fg); }
.sc-status.is-error::before { background: var(--sc-mark); }
.sc-status.is-error { color: var(--sc-mark-text); }
.sc-status.is-pending::before { background: none; box-shadow: inset 0 0 0 1px var(--sc-fg); }
.sc-status.is-off { color: var(--sc-quiet); }
.sc-status.is-off::before { background: var(--sc-faint); }
.sc-status.is-partial::before { background: linear-gradient(90deg, var(--sc-fg) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--sc-fg); }
/* A count beside a word: tabs, filters. */
.sc-count { display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 6px; font: 500 12px/18px var(--sc-sans); font-variant-numeric: tabular-nums; text-align: center; box-shadow: inset 0 0 0 1px var(--sc-hair); }

/* Notice: a tag with a line of text. The failing one has the red line. Never a coloured bar on one side. */
.sc-notice { display: flex; align-items: baseline; gap: var(--sc-3); padding: 12px var(--sc-4) 13px; font-size: var(--sc-ui-body); line-height: 22px; }
.sc-notice > :first-child { font-weight: 600; white-space: nowrap; }

/* Dialog: a tag that leads, on the ground at 72%. */
.sc-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--sc-4); background: color-mix(in srgb, var(--sc-night) 72%, transparent); }
.sc-dialog { width: min(100%, 520px); padding: var(--sc-7); --cut: var(--sc-cut-l); }
.sc-dialog > * + * { margin-top: var(--sc-4); }

/* Bars: the top of a site or a screen, crumbs, the foot. */
.sc-bar { display: flex; align-items: center; gap: 30px; height: 72px; padding: 0 var(--sc-pad); font-size: 16px; }
.sc-bar .sc-wordmark { margin-right: auto; }
.sc-bar.is-compact { height: 56px; gap: var(--sc-6); font-size: var(--sc-ui-body); }
.sc-bar.is-compact .sc-wordmark { font-size: 22px; }
.sc-crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; }
.sc-crumbs > * + *::before { content: "/"; margin-right: 8px; color: var(--sc-faint); }
.sc-crumbs > [aria-current] { color: var(--sc-fg); }

/* The rail: a product's navigation, down the left. The current page is told by lightness, ink among quiet,
   and never by red. */
.sc-rail { display: flex; flex-direction: column; gap: var(--sc-6); padding: var(--sc-5) var(--sc-3); border-right: 1px solid var(--sc-hair); }
.sc-rail .sc-wordmark { padding: 0 var(--sc-2); font-size: 22px; }
.sc-rail-group { display: grid; gap: 2px; }
.sc-rail-group > span { padding: 0 var(--sc-2) 6px; color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; }
.sc-rail a:not(.sc-wordmark) { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 var(--sc-2); color: var(--sc-quiet); font-size: var(--sc-ui-body); font-weight: 500; }
.sc-rail a:not(.sc-wordmark):hover { color: var(--sc-fg); background: var(--sc-tint); }
.sc-rail a[aria-current] { color: var(--sc-fg); background: var(--sc-tint); }

/* The shell of a product screen: the rail, then the screen. Under 900 px the rail is a bar across the top
   with its groups folded behind a Menu button (the product's own switcher goes there). */
.sc-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.sc-app > main { display: grid; align-content: start; gap: var(--sc-6); padding: var(--sc-6) var(--sc-6) var(--sc-8); }
.sc-app > main > * { min-width: 0; }
.sc-rail .sc-rail-menu { display: none; }

/* A section of a screen: a rule, its heading on the left, its controls in a column on the right. Screens are
   made of these, not of cards. */
.sc-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sc-4) var(--sc-8); align-items: start; padding: var(--sc-6) 0 var(--sc-8); border-top: 1px solid var(--sc-hair); }
.sc-section > header p { margin-top: 6px; color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; max-width: 26em; }
.sc-section > :not(header) { display: grid; gap: var(--sc-5); min-width: 0; }

/* A figure: a quiet label over a number. No box. */
.sc-figures { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-9); }
.sc-figure { display: grid; gap: 2px; }
.sc-figure dt { color: var(--sc-quiet); font-size: var(--sc-ui-small); line-height: 18px; font-weight: 400; }
.sc-figure dd { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Nothing here yet: one sentence and one act. A small plate may sit above them if it was made for this screen. */
.sc-empty { display: grid; justify-items: start; gap: var(--sc-3); padding: var(--sc-7) 0; max-width: 28em; }
.sc-empty p { color: var(--sc-quiet); }

@media (max-width: 900px) {
  .sc-section { grid-template-columns: 1fr; }
  .sc-app { grid-template-columns: 1fr; }
  .sc-app > .sc-rail { flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--sc-hair); padding: var(--sc-3) var(--sc-4); }
  .sc-app > .sc-rail .sc-rail-group { display: none; }
  .sc-app > .sc-rail .sc-rail-menu { display: inline-flex; }
  .sc-app > main { padding-inline: var(--sc-4); }
}
/* A finger needs more than a pointer does. */
@media (pointer: coarse) {
  .sc-button.is-s, .sc-button.is-m { height: 44px; }
  .sc-check input { width: 22px; height: 22px; }
  .sc-rail a:not(.sc-wordmark) { height: 44px; }
}
@media (max-width: 640px) {
  .sc-rows.is-two { grid-template-columns: 1fr; }
  .sc-sheet { padding-inline: var(--sc-4); }
  .sc-sheet > li { grid-template-columns: 1fr; gap: 4px; }
  .sc-bar { gap: var(--sc-4); }
  .sc-prose { font-size: 18px; }
  .sc-prose :where(h2) { font-size: 26px; }
}