/* NMX ID: this site's own styles. They load after the main site's (newmediaxp-www): /assets/css/style.css (the
   regions of www's stylesheet these pages use) and /assets/css/palette.css, which scripts/build-assets.mjs takes from
   the www folder at build time. www's classes are used as they are: the page shell (.wrap, .skip, .visually-hidden),
   the header and footer, buttons (.btn, .btn--grey/--red/--green/--orange/--small), windows (.window, .window__bar,
   .window__close, .window__body), tags (.chip), text links (.link-point), logo squares (.site-logo) and the 404 page.
   Only what www has no rule for is here. No inline styles: the CSP is style-src 'self'. */

/* ------------------------------------------------------------------ tokens www doesn't have */
:root {
  --chrome-danger: hsl(0 100% 88%); /* Sign out: light pink, as bright as the header's other links (the user's pick, 2026-11-06) */
  --info: var(--link);
  --info-bg: hsl(240 100% 35% / .07);
  --error-ink: #ffffff;
  --ok: hsl(120 100% 22%);
  --ok-ink: #ffffff;
  --ok-bg: hsl(120 100% 30% / .1);
  /* brown: the admin page's Adjust wallet. www has none, so it's made on www's palette steps (OKLCH L .35 here, .8 dark;
     shadow .23 / .46; dark ink .2) at hue 65 and chroma .06, yellower and greyer than www's orange */
  --brown-bg: #4f3315;
  --brown-ink: #ffffff;
  --brown-shadow: #251b11;
  --panel: 800px; /* a page that is one column of panels: www's article width (style.css .post) */
}
[data-theme="dark"] {
  --info-bg: hsl(240 100% 85% / .08);
  --error-ink: #260e0b;
  --ok: hsl(120 70% 62%);
  --ok-ink: #0c1a0b;
  --ok-bg: hsl(120 70% 50% / .12);
  --brown-bg: #dab490;
  --brown-ink: #1e140a;
  --brown-shadow: #6b5239;
}

/* ------------------------------------------------------------------ text */
body { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; }
h1 { margin: 0 0 14px; }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 12px; }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 18px 0 8px; }
p { margin: 0 0 12px; }
code, .mono { font-family: var(--font-mono); font-size: .88em; font-weight: 500; overflow-wrap: anywhere; }
strong { font-weight: 700; }
.muted { color: var(--muted); font-size: .94rem; }

/* ------------------------------------------------------------------ page widths: www's .wrap, and ours */
main { padding-block: clamp(24px, 6vw, 48px) 48px; }
/* a page of one column (sign-in, Link, 404, errors): www's article width. The pages with a lot on them take
   the whole width, as www's blog page (www's .wrap--wide) */
.wrap--panel { --wrap: var(--panel); }
.wrap--panel .not-found { max-width: none; } /* www's 404 box is 640px; here it's the column's width, as the others */

/* ------------------------------------------------------------------ header: www's, plus this site's name and Sign out */
/* the name beside the logo: www's "NMX" wordmark at every width, then the site's word ("ID", or "Admin") */
.brand__word { --word-img: url(/assets/img/nmx-wordmark-short.png); width: 74.8px; }
.brand__site { margin-left: -3px; font: 700 1.5rem/1 var(--font-head); white-space: nowrap; }
.brand + .top__actions { margin-left: auto; } /* the sign-in page has no links: the theme button still sits at the right */
/* Sign out on the account pages is a button: www's header link, in red */
.nav button {
  position: relative;
  display: block;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--chrome-text);
  font: 600 1.125rem/1.55 var(--font-head);
  cursor: pointer;
  transition: background-color .15s;
}
.nav button:hover { background: var(--chrome-hover); }
.nav .sign-out { color: var(--chrome-danger); }

/* ------------------------------------------------------------------ panels: a page's boxes */
.panel {
  margin-bottom: 18px;
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel > :last-child { margin-bottom: 0; }
.panel h1 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
/* a panel's heading with a button at its right; the button goes under it when the line is too narrow */
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.panel__head > :is(h1, h2) { margin: 0; }
.panel__head:not(:last-child) { margin-bottom: 14px; }

.stack { margin-bottom: 18px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ messages */
.note { padding: 11px 14px; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 10px; background: var(--info-bg); }
.note--error { border-left-color: var(--error); background: var(--error-bg); }
.note--ok { border-left-color: var(--ok); background: var(--ok-bg); }
#notice { margin-bottom: 18px; }
/* a page's notice can be closed (dom.js notify): a small, quiet × at its top right, with the words flowing around it, as
   notices usually have. www has no such button (its windows' close button is the big red one), so it's ours. 24px
   square, the smallest a tap target should be; www's close icon, drawn at 16px */
.note:has(> .note__close) { display: flow-root; }
.note__close {
  float: right;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin: 0 -6px 0 10px;
  padding: 0; border: 0; border-radius: 6px;
  background: none; color: inherit; opacity: .7;
  cursor: pointer;
}
.note__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.note__close svg { width: 16px; height: 16px; stroke-width: 2.2; }
/* in a notice too narrow for words beside it (only on screens under about 260px), the × gets its own line, still at
   the right: beside it, words would be split letters apart */
.note:has(> .note__close) { container-type: inline-size; }
@container (max-width: 8rem) {
  .note__close { float: none; margin: -2px -6px 4px auto; }
}

/* ------------------------------------------------------------------ buttons: www's .btn, and two layouts of ours
   www's buttons sit at their text's width, and none is wider than 320px (www's .btn max-width). .btn--block fills its
   column up to that; a panel's own main button (Sign in) and a .btn--center one (the Link page's Continue) sit in the
   middle */
.btn--block { display: flex; width: 100%; height: auto; min-height: 46px; padding-block: 10px; line-height: 1.2; text-align: center; }
.panel > .btn--block, .btn--center { margin-inline: auto; }
.panel > .btn:not(:last-child) { margin-bottom: 18px; } /* room for the pixel shadow before the next line */
.btn--brown { --btn-bg: var(--brown-bg); --btn-ink: var(--brown-ink); --btn-shadow: var(--brown-shadow); }

/* ------------------------------------------------------------------ sign-in choices: logo tiles, as www's share icons
   One tile per provider: its logo (www's /assets/img/<name>-icon.svg) on its square (www's .site-logo), with the grey
   button's outline and pixel shadow, as www's .share__social links. Ours are 56px, and can be buttons ("Link
   another"), which www's rules (links only) don't reach. The image's alt text names the action ("Continue with
   Google"), and the tile's title shows it on hover. */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 10px 0 24px; padding: 0; list-style: none; }
.tiles.start { justify-content: flex-start; }
.tiles:empty { display: none; } /* no sign-in choices (no app to sign in to): no gap either */
.tile {
  /* zero-blur drop-shadows trace the rounded square; the glint's corner ≈ 25% of 56px, plus the 1px outline */
  --outline: drop-shadow(1px 0 0 var(--grey-shadow)) drop-shadow(-1px 0 0 var(--grey-shadow)) drop-shadow(0 1px 0 var(--grey-shadow)) drop-shadow(0 -1px 0 var(--grey-shadow));
  --corner: 15px; --depth: 5px;
  position: relative;
  display: block;
  padding: 0; border: 0; border-radius: 28%; /* the focus outline's shape */
  background: none;
  cursor: pointer;
  transition: transform .15s;
}
/* www's glint in the shadow's corner (style.css .btn::before, .share__social a::before) */
.tile::before {
  content: "";
  position: absolute; z-index: 1;
  right: calc(1px - var(--depth)); bottom: calc(1px - var(--depth));
  width: calc(2 * var(--corner) - 2px); height: calc(2 * var(--corner) - 2px);
  border: 1.5px solid transparent;
  border-right-color: var(--glint); border-bottom-color: var(--glint);
  border-radius: 50%;
  -webkit-clip-path: polygon(50% 50%, 100% 68.2%, 100% 100%, 85% 100%, 50% 50%, 75.5% 100%, 64.3% 100%);
  clip-path: polygon(50% 50%, 100% 68.2%, 100% 100%, 85% 100%, 50% 50%, 75.5% 100%, 64.3% 100%);
  pointer-events: none;
  transition: right .15s, bottom .15s, opacity .15s;
}
/* the outline and pixel shadow sit on the image, so they don't also outline the glint (on the tile) */
.tile img { display: block; width: 56px; height: 56px; filter: var(--outline) drop-shadow(4px 4px 0 var(--grey-shadow)); transition: filter .15s; }
.tile:hover { --depth: 3px; transform: translate(2px, 2px); }
.tile:hover img { filter: var(--outline) drop-shadow(2px 2px 0 var(--grey-shadow)); }
.tile:active { transform: translate(3px, 3px); }
.tile:active img { filter: var(--outline) drop-shadow(1px 1px 0 var(--grey-shadow)); }
.tile:active::before { opacity: 0; }

/* ------------------------------------------------------------------ forms */
label { display: block; font-weight: 500; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 2px solid var(--faint); border-radius: 8px;
  background: var(--solid-bg); color: var(--text);
  font: 400 1rem/1.4 var(--font-body);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.field + .field { margin-top: 14px; }
.field .muted { margin: 6px 0 0; }
.field + p { margin-top: 18px; }
.code-input { font: 500 1.4rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* the device code */
.code {
  padding: 12px; border: 2px dashed var(--faint); border-radius: 10px;
  background: var(--solid-bg);
  font: 700 clamp(1.5rem, 1.2rem + 1.5vw, 1.9rem)/1.3 var(--font-mono); letter-spacing: .14em; text-align: center;
}

/* ------------------------------------------------------------------ lists and key/value pairs */
ul.list { list-style: none; margin: 0; padding: 0; }
/* a row's text, then its button; the button goes under the text when they don't both fit (the text keeps 10rem) */
ul.list > li { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
ul.list > li > .grow { flex: 1 1 10rem; }
ul.list > li:first-child { border-top: 0; padding-top: 0; }
ul.list > li:last-child { padding-bottom: 0; }
ul.plain { margin: 0; padding-left: 1.2em; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* a value with www's copy button after it (the Account ID): the button goes under the value when the line is too
   narrow, and the label sits level with the middle of the button */
.kv dd.kv__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kv dd.kv__copy > .mono { min-width: 0; }
.kv dt.kv__mid { align-self: center; }

/* the apps and purchases pages: one table, App, Item, a tag, Details, a row per thing the account has in an app (or has
   bought), the app named on each row. Lines between rows, none around the table: the panel is its box. Cells line up
   on their first line */
.account-table { width: 100%; margin-top: 20px; border-collapse: collapse; }
.account-table th, .account-table td { padding: 11px 16px 11px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--line); }
.account-table :is(th, td):last-child { padding-right: 0; }
.account-table thead th { padding-top: 0; padding-bottom: 8px; border-top: 0; color: var(--faint); font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.account-table tbody tr:first-child > * { border-top-width: 2px; }
.account-table th[scope="row"] { font-weight: 500; }
.account-table td:has(> .chip) { width: 1%; white-space: nowrap; } /* the tag column only as wide as its widest tag */
/* the row number (#): as wide as the biggest number, right-aligned so the digits line up, quieter than the rest */
.account-table__no, .account-table thead th:first-child { width: 1%; white-space: nowrap; text-align: right; }
.account-table__no { color: var(--faint); font-variant-numeric: tabular-nums; }
/* wide enough for columns: the app and item names stay on one line, each column only as wide as its widest entry with
   32px between columns, and the details take what's left. Left to the browser, a page-wide table shared its spare
   width among App, Item and Details, so on a wide screen they stood far apart (the user found it odd, 2026-11-07) */
@media (min-width: 720px) {
  .account-table__app, .account-table th[scope="row"] { width: 1%; white-space: nowrap; }
  .account-table th, .account-table td { padding-right: 32px; }
  .account-table :is(th, td):last-child { padding-right: 0; }
}

/* an account's status (admin): small mono capitals, as www's badges, on a colour */
.badge {
  display: inline-block; padding: 3px 6px 2px; border-radius: 3px;
  background: var(--grey-bg); color: var(--grey-ink);
  font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
.badge.active { background: var(--ok); color: var(--ok-ink); }
.badge.banned, .badge.deleted { background: var(--error); color: var(--error-ink); }

/* ------------------------------------------------------------------ confirmation windows: www's .window (dom.js ask()),
   with the message, any fields and one full-width button in its body */
/* wider than www's 400px (the user's call, 2026-11-06): these windows hold more text and fields than www's. One you
   type into (dom.js ask() with fields: Delete account, the admin actions) is wider still */
.window { width: min(100% - 32px, 520px); max-height: calc(100vh - 32px); }
.window--form { width: min(100% - 32px, 720px); }
/* www's window keeps its close button beside the title (green beside a red "Yes, …" button); ours adds the body's
   message, fields and button */
.window__body > * + * { margin-top: 14px; }
.window__message { line-height: 1.5; font-weight: 500; }
.window__message > :last-child { margin-bottom: 0; }
/* the "Yes, …" button: the window's width up to 320px (as every button), in the middle */
.window__actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 20px; }
.window__actions > .btn { width: 100%; }

/* ------------------------------------------------------------------ record tables (admin): the apps table's look
   A line between rows, mono capitals over the columns, the first column heading its row. When a table doesn't fit its
   panel (admin.js checks, at every width) or the screen is under 720px, it's .stacked: each row shows as labelled
   lines (each cell's data-label), the first cell as the row's title. Nothing scrolls sideways */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; margin-top: 6px; border-collapse: collapse; }
/* words break only when they don't fit (break-word, not anywhere: "anywhere" lets the table squeeze a column down to
   one letter); tags and buttons never break; long ids and JSON may break anywhere */
.data-table th, .data-table td { padding: 10px 16px 10px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--line); overflow-wrap: break-word; }
.data-table :is(.badge, .chip, .btn) { white-space: nowrap; }
.data-table :is(th, td):last-child { padding-right: 0; }
.data-table thead th { padding-top: 0; padding-bottom: 8px; border-top: 0; color: var(--faint); font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow-wrap: normal; }
.data-table tbody tr:first-child > * { border-top-width: 2px; }
.data-table th[scope="row"] { font-weight: 500; }
.data-table code { overflow-wrap: anywhere; }
/* in columns, ids and times stay whole (a table that gets too wide for them stacks instead); stacked, ids may break */
.data-table:not(.stacked) .mono { overflow-wrap: normal; }
.when { white-space: nowrap; }
.sub-id { display: block; font-size: .8rem; } /* an item's id under its name */
.cell-link { color: var(--link); font-weight: 500; text-decoration: none; }
.cell-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.data-table.stacked, .data-table.stacked tbody, .data-table.stacked tr { display: block; }
.data-table.stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.data-table.stacked tr { padding: 12px 0; border-top: 1px solid var(--line); }
.data-table.stacked tbody tr:first-child { border-top-width: 2px; }
.data-table.stacked tr > * { display: block; padding: 2px 0; border-top: 0 !important; overflow-wrap: anywhere; }
.data-table.stacked th[scope="row"] { padding-bottom: 6px; font-weight: 600; }
/* label | value: the label column is as wide as "LAST ACTIVE"; a tag or button keeps its own width */
.data-table.stacked td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 12px; align-items: baseline; justify-items: start; }
.data-table.stacked td::before { content: attr(data-label); color: var(--faint); font: 500 .68rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.data-table.stacked td[data-label=""] { display: block; }
.data-table.stacked td[data-label=""]::before { content: none; }
/* under 360px the label goes above its value, in tables and in key/value lists */
@media (max-width: 359px) {
  .data-table.stacked td { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd + dt { margin-top: 8px; }
}

/* admin: a row of filters or a search form, wrapping to as many lines as it needs */
.lookup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 14px; align-items: end; margin-bottom: 18px; }
.lookup .field + .field { margin-top: 0; }
.results:not(:empty) { margin-bottom: 4px; }
.inline-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.inline-field label { margin: 0; }
.inline-field select { width: auto; max-width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.more { margin: 16px 0 0; }

/* ------------------------------------------------------------------ narrow screens
   The header follows www's rules (style.css "responsive"): the links go behind the menu button under 600px, and its
   parts go one at a time as the width runs out (the NMX wordmark under 260px, the logo under 180px, the theme button
   under 120px). This site's longer link lists need the menu a little sooner, so www's menu rules also run in the bands
   below; and its name ("ID", "Admin") needs room of its own. Nothing shrinks. */
@media not all and (min-width: 600px) {
  .js .nav button { padding: 12px 10px; text-align: right; }
}
/* signed in, the account pages' four links and Sign out beside "NMX ID" need 706px between the side margins (measured
   2026-11-07, with the device code page's link named "Link"; 776px as "Sign-in Code"), plus 48px of margins and up to
   17px for a scrollbar: 771px */
@media (min-width: 600px) and (max-width: 779px) {
  .top__actions { margin-left: auto; }
  .top__bar { flex-wrap: wrap; gap: 12px; height: auto; min-height: 64px; }
  .nav { order: 3; width: 100%; margin: 0; }
  .nav ul { flex-wrap: wrap; padding-bottom: 8px; }
  .js .top__bar { flex-wrap: nowrap; height: 64px; }
  .js .nav-btn { display: grid; order: 2; margin-left: -6px; }
  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto;
    background: var(--chrome-reverse);
    border-top: 1px solid var(--chrome-line);
    box-shadow: 0 14px 24px -12px hsl(250 60% 10% / .6);
  }
  .js .top.is-open .nav { display: block; }
  .js .nav ul { flex-direction: column; align-items: flex-end; padding: 8px 16px 14px; }
  .js .nav a, .js .nav button { padding: 12px 10px; text-align: right; }
  .js .nav a[aria-current]::after { left: auto; right: 10px; width: 24px; bottom: 6px; }
}
/* the admin pages' five links and Sign out beside "NMX Admin" need 836px between the side margins, plus up to 17px for
   a scrollbar (measured): 901px */
@media (min-width: 780px) and (max-width: 909px) {
  .wide .top__actions { margin-left: auto; }
  .wide .top__bar { flex-wrap: wrap; gap: 12px; height: auto; min-height: 64px; }
  .wide .nav { order: 3; width: 100%; margin: 0; }
  .wide .nav ul { flex-wrap: wrap; padding-bottom: 8px; }
  .js .wide .top__bar { flex-wrap: nowrap; height: 64px; }
  .js .wide .nav-btn { display: grid; order: 2; margin-left: -6px; }
  .js .wide .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto;
    background: var(--chrome-reverse);
    border-top: 1px solid var(--chrome-line);
    box-shadow: 0 14px 24px -12px hsl(250 60% 10% / .6);
  }
  .js .wide .top.is-open .nav { display: block; }
  .js .wide .nav ul { flex-direction: column; align-items: flex-end; padding: 8px 16px 14px; }
  .js .wide .nav a { padding: 12px 10px; text-align: right; }
  .js .wide .nav a[aria-current]::after { left: auto; right: 10px; width: 24px; bottom: 6px; }
}
/* beside the theme and menu buttons, "NMX ID" fits down to 293px and "NMX Admin" down to 346px (measured); below that
   the NMX wordmark goes (the logo still says NMX), then the word: under 208px ("ID") and 260px ("Admin"). A few px to
   spare in each */
@media (max-width: 295px) {
  .brand__word { display: none; }
}
@media (max-width: 211px) {
  .brand__site { display: none; }
}
@media (max-width: 347px) {
  .wide .brand__word { display: none; }
}
@media (max-width: 263px) {
  .wide .brand__site { display: none; }
}
/* four tiles still fit one row on a 320px phone: www's 48px share-icon size, closer together */
@media (max-width: 359px) {
  .tiles { gap: 10px; }
  .tile { --corner: 13px; }
  .tile img { width: 48px; height: 48px; }
}
/* narrow screens: the columns don't fit (they need about 700px). Each row shows on lines, numbered like a list: the
   number at the left, then the app as a small label, the item and its tag, and the details. The column headings are for
   screen readers only, since there are no columns to head */
@media (max-width: 719px) {
  .account-table, .account-table tbody { display: block; }
  .account-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .account-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
    padding: 11px 0; border-top: 1px solid var(--line);
  }
  .account-table tr > * { padding: 0; border-top: 0 !important; }
  .account-table tr > td:last-child { grid-column: 2 / -1; color: var(--muted); }
  .account-table tbody tr:first-child { border-top-width: 2px; }
  .account-table__no, .account-table__app { color: var(--faint); font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
  .account-table__no { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: auto; }
  .account-table__app { grid-column: 2 / -1; }
  .account-table td:has(> .chip) { width: auto; }
}
/* under 260px the item's name and its tag don't fit one line: the tag goes under the name */
@media (max-width: 259px) {
  .account-table tr { grid-template-columns: auto minmax(0, 1fr); }
  .account-table__no { grid-row: 1 / span 4; }
  .account-table td:has(> .chip) { grid-column: 2; }
}
/* under 260px a long button label or tag goes onto more lines instead of out of its box (a window's
   "Yes, delete account", the "This" tag). Buttons grow to hold it, as www's window buttons do
   (style.css .window__body .btn); a button's arrow goes under its word before the word breaks ("Continue"); only a
   word longer than the whole line breaks. Nothing shrinks */
@media (max-width: 259px) {
  .panel .btn, .window__body .btn { flex-wrap: wrap; height: auto; min-height: 46px; padding: 8px 12px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .panel .btn--small, .window__body .btn--small { min-height: 42px; }
  .chip { white-space: normal; overflow-wrap: anywhere; }
}

/* Windows high contrast (forced colours) drops fills and shadows: www gives buttons a border; the tiles' glint goes */
@media (forced-colors: active) {
  .tile::before { display: none; }
}