/* view styles: admin (views/admin.js, admin_user.js, admin_store.js, admin_reports.js, admin_takedowns.js). The app's
   config tab: a settings list on the left in three groups, the section's groupboxes on the right. One layer on app.css's
   tokens; every class starts with adm-. */

.adm { display: flex; flex-direction: column; min-width: 0; }
.adm > .ph { margin-bottom: var(--sp-4); }
.adm-me { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-md); }
.adm-me > b { font-weight: 700; }
.adm-grid { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.adm-body { min-width: 0; }

/* ---------------------------------------------------------------- the section list: a box of rows, a dim caption per
   group, the open one the tab tint with the accent cap */
.adm-side { position: sticky; top: calc(var(--hdr-h) + var(--sub-h) + 2px + var(--sp-4)); min-width: 0; }
.adm-nav { display: flex; flex-direction: column; padding: 6px 0; background: var(--s-box); border: 1px solid var(--e-line); border-top-color: var(--g-edge-t);
  border-bottom-color: var(--g-edge-b); box-shadow: var(--el-1); }
.adm-ng { display: flex; flex-direction: column; }
.adm-ng + .adm-ng { margin-top: 6px; padding-top: 6px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.adm-ngh { padding: 4px var(--g-r) 4px var(--g-l); font-size: var(--fs-sm); line-height: 16px; color: var(--tx-4); }
.adm-nav a { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 30px; padding: 0 10px 0 var(--g-l); color: var(--tx-3);
  font: 400 var(--fs-md)/16px var(--ui); white-space: nowrap; transition: background var(--hover), color var(--hover); }
.adm-nav a > .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-nav a:hover { color: var(--tx); background: var(--s-hover); }
.adm-nav a.on { color: var(--tx); font-weight: 700; background: linear-gradient(90deg, var(--tab-t), var(--tab-b) 70%, transparent); }
.adm-nav a.on::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--tick-on); }
.adm-nav a:not(.on) .bd { background: #1C1C20; color: var(--tx-3); }
.adm-nav a.on .bd { background: #3A2C5C; color: #E3D2FF; }
.adm-nav .bd.warn, .adm-nav a.on .bd.warn { background: #3A2E12; color: var(--warn); }

/* ---------------------------------------------------------------- shared pieces */
.adm-skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.adm-skel .sk:nth-child(3n+1) { width: 42%; }
.adm-skel .sk:nth-child(3n+2) { width: 78%; }
.adm-skel .sk:nth-child(3n) { width: 60%; }
.adm-skel.rows { padding: var(--sp-4) var(--g-r) var(--sp-4) var(--g-l); }
.adm-skel.chart-sk .sk { width: 100%; height: 150px; }
.av-sk { width: 64px; height: 64px; flex: none; }
/* a flush box's toolbar, footer and message line */
.adm-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 10px var(--g-r) 10px var(--g-l); background: #111114;
  border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
.adm-tools > .combo { width: 150px; }
.adm-tools > .adm-hint { flex: 1 1 260px; }
.adm-search { flex: 1 1 240px; max-width: 420px; }
.adm-search input::-webkit-search-cancel-button { display: none; }
.adm-foot { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 6px 10px 6px var(--g-l); font-size: var(--fs-md);
  border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); background: #111114; }
.adm-foot > .t3 { flex: 1; min-width: 0; }
.adm-pad { padding: 0 var(--g-r) 0 var(--g-l); }
.adm-pad:has(.msg-line:empty), .adm-pad:empty { display: none; }
.adm-pad .msg-line { padding: 10px 0; }
.adm-hint { display: inline-flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }
.adm-hint > .ic { margin-top: 2px; }
.adm-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.adm-none { font-size: var(--fs-md); color: var(--tx-3); }
.adm-sep { height: 1px; margin: 2px 0; background: #000; box-shadow: 0 1px 0 var(--e-hair); }
.adm-wide { grid-column: 1 / -1; }
.card-b > .msg-line:not(:empty) { margin-top: 10px; }

/* ---------------------------------------------------------------- tables (admin_user.js dataTable): a well-dark head row,
   rows of 40 on hairlines, the clickable ones capped in the accent on hover */
.adm-tw { overflow-x: auto; overscroll-behavior-x: contain; transition: opacity var(--panel); }
.adm-tw.busy { opacity: .55; }
.adm-t { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: 18px; }
.adm-t th { height: 28px; padding: 0 10px; text-align: left; font: 400 var(--fs-sm)/14px var(--ui); color: var(--tx-4); white-space: nowrap;
  background: #111114; border-bottom: 1px solid #000; }
.adm-t td { height: 40px; padding: 5px 10px; white-space: nowrap; color: var(--tx); vertical-align: middle; }
.adm-t th:first-child, .adm-t td:first-child { padding-left: var(--g-l); }
.adm-t th:last-child, .adm-t td:last-child { padding-right: var(--g-r); }
.adm-t tbody tr + tr td { border-top: 1px solid var(--e-hair); }
.adm-t tbody tr { transition: background var(--hover); }
.adm-t tbody tr:not(.msg):not(.sk-row):hover { background: var(--s-hover); }
.adm-t tr.click { cursor: pointer; }
.adm-t tr.click:hover td:first-child { box-shadow: inset 2px 0 0 var(--ac-line); }
.adm-t tr.click:focus-visible { outline: 0; background: var(--row-fc); }
.adm-t tr.click:focus-visible td:first-child, .adm-t tr.me td:first-child { box-shadow: inset 2px 0 0 var(--ac); }
.adm-t tr.dimmed td { color: var(--tx-3); }
.adm-t tr.dimmed .who { opacity: .7; }
.adm-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-t td.mono-c { color: var(--tx-2); font-variant-numeric: tabular-nums; }
.adm-t td.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.adm-t td.wide { min-width: 220px; white-space: normal; color: var(--tx-2); overflow-wrap: anywhere; }
.adm-t td.acts { width: 1%; text-align: right; }
/* app.css's bare .acts (a flex row, for page heads) must not turn an actions cell into a block: the head band would stop short */
.adm-t th.acts, .adm-t td.acts { display: table-cell; }
.adm-t tr.msg td { height: auto; padding: 0; }
.adm-t tr.msg .err-line { padding: var(--sp-4); }
.adm-t tr.sk-row .sk { width: 70%; min-width: 36px; }
.adm-t tr.sk-row td:first-child .sk { width: 120px; }
.adm-t .combo { min-width: 150px; height: 24px; background: transparent; border-color: transparent; box-shadow: none; font-size: var(--fs-md); }
.adm-t .combo > svg { opacity: .35; }
.adm-t tr:hover .combo, .adm-t .combo:focus-visible, .adm-t .combo.open { border-color: #000; background: linear-gradient(180deg, var(--input-t), var(--input-b)); }
.adm-t tr:hover .combo > svg, .adm-t .combo.open > svg { opacity: .6; }
/* a role nobody here may change: the dropdown's box without the chevron */
.adm-t .adm-ro { display: inline-flex; align-items: center; height: 24px; min-width: 150px; padding: 0 9px; border: 1px solid transparent; font-size: var(--fs-md); }
.adm-t .chips { flex-wrap: nowrap; }
.adm-t .copy:hover { color: var(--ac-hi); }
.adm-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 260px; }
.adm-name .who { overflow: hidden; text-overflow: ellipsis; }
.adm-name .badge.inline { margin-left: 0; }
.adm-name .you { padding: 0 5px; font: 700 var(--fs-xs)/16px var(--ui); color: #E3D2FF; background: #3A2C5C; box-shadow: 0 0 0 1px #000; }
.adm-act { display: inline-block; padding: 0 6px; font: 400 var(--fs-sm)/18px var(--ui); color: var(--tx-2); background: #1C1C20; border: 1px solid #000; }
.adm-act.lbl { font-size: var(--fs-md); }
.adm-ver { font-weight: 700; color: var(--tx); }
.adm-pub, .adm-nofile { display: inline-flex; align-items: center; gap: var(--sp-2); }
.adm-acts { display: inline-flex; align-items: center; gap: 2px; }
.adm-acts .btn.danger { margin-left: 4px; }
/* Same PC as: the other account opens its own drawer */
.adm-pc-u { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 2px 4px; margin: -2px -4px; border: 0; background: none; font: inherit; color: var(--tx); }
.adm-pc-u:hover { background: var(--s-hover); }
.adm-pc-u:hover .who { text-decoration: underline; text-underline-offset: 2px; }
.adm-pc.hit { border-color: #4A3B1C; }
.adm-pc.hit > .card-h::before { background: var(--warn); }

/* ---------------------------------------------------------------- dashboard: a groupbox grid */
.adm-dash { align-items: stretch; }
.adm-dash .kv { min-height: 26px; font-size: var(--fs-md); }
.adm-dash .kv + .kv { border-top: 1px solid var(--e-hair); }
/* a count that opens its list: the row is a link, a chevron at its end */
a.kv.adm-go { margin: 0 calc(-1 * var(--g-r)) 0 calc(-1 * var(--g-l)); padding: 0 var(--g-r) 0 var(--g-l); color: inherit; transition: background var(--hover); }
a.kv.adm-go:hover { background: var(--s-hover); color: inherit; }
a.kv.adm-go > svg { flex: none; color: var(--tx-4); transition: color var(--hover), transform var(--hover); }
a.kv.adm-go:hover > svg { color: var(--ac-hi); transform: translateX(2px); }
.adm-chart-box { min-height: 150px; }
.adm-chart { position: relative; display: flex; align-items: stretch; gap: var(--sp-2); height: 168px; }
/* quarter gridlines behind the bars, between the count row (16) and the day row (20) */
.adm-chart::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; bottom: 21px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--e-hair) 0 1px, transparent 1px 25%); }
.adm-chart .col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; cursor: default; }
.adm-chart .n { height: 16px; font-size: var(--fs-sm); line-height: 16px; color: var(--tx-3); transition: color var(--hover); }
.adm-chart .bw { position: relative; flex: 1; width: 100%; max-width: 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; border-bottom: 1px solid var(--e-line-2); }
.adm-chart .bw > .n { flex: none; text-align: center; }
.adm-chart .b { width: 100%; background: linear-gradient(180deg, rgba(155,123,255,.5), rgba(85,79,173,.45)); box-shadow: 0 0 0 1px #000; transform-origin: bottom;
  animation: adm-grow var(--panel) both; transition: background var(--hover); }
@keyframes adm-grow { from { transform: scaleY(0); } }
.adm-chart .zero .bw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.07); }
.adm-chart .col:hover .b { background: linear-gradient(180deg, rgba(183,154,255,.75), rgba(85,79,173,.6)); }
.adm-chart .col:hover .n { color: var(--tx); }
.adm-chart .today .b { background: var(--ac-grad-v); }
.adm-chart .d { margin-top: 6px; font-size: var(--fs-sm); line-height: 14px; color: var(--tx-4); }
.adm-chart .today .d, .adm-chart .today .n { color: var(--ac-hi); }

/* a row with an icon tile, a title and description, a control on the right */
.adm-line { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; }
.adm-line.pad { padding: var(--sp-3) var(--g-r) var(--sp-3) var(--g-l); }
.adm-line .t { font: 700 var(--fs-md)/18px var(--ui); color: var(--tx); }
.adm-line .d { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }
.adm-line > .combo { width: auto; min-width: 168px; max-width: 280px; }
.adm-ti, .adm-tile .ti { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--tx-3); border: 1px solid #000;
  background: linear-gradient(180deg, #1D1D21, #151518); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* ---------------------------------------------------------------- forum structure and topic prefixes */
.adm-cat .card-h .aside .mono { color: var(--tx-3); }
.adm-frow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 116px 116px 76px 28px; align-items: center; gap: var(--sp-3); padding: 10px 10px 10px var(--g-l); cursor: pointer; }
.adm-frow + .adm-frow { border-top: 1px solid var(--e-hair); }
.adm-frow .pos { width: 28px; height: 22px; display: grid; place-items: center; font-size: var(--fs-sm); color: var(--tx-2); background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.adm-frow .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 var(--fs-base)/18px var(--ui); color: var(--tx); }
.adm-frow .ds { margin-top: 1px; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-frow .perm { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--fs-md); white-space: nowrap; }
.adm-frow .perm .cap { font-size: var(--fs-xs); line-height: 12px; }
.adm-frow .perm .rl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the default (Registered) reads quiet so a raised gate stands out */
.adm-frow .perm .role-registered { color: var(--tx-3); }
.adm-frow .perm .role-registered .ic { opacity: .5; }
.adm-frow > .chip { justify-self: start; }
.adm-frow > .btn { opacity: .55; transition: opacity var(--hover), background var(--hover); }
.adm-frow:hover > .btn, .adm-frow:focus-visible > .btn, .adm-frow > .btn:focus-visible { opacity: 1; }
.adm-pxr { grid-template-columns: auto minmax(0, 1fr) 28px; }
.adm-pxr .ds { margin: 0; }
.adm-pxprev { display: flex; align-items: center; min-height: var(--ctl-h); }
.adm-pxprev .px { height: 22px; padding: 0 8px; font-size: var(--fs-md); }
.adm-pxsw { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-pxsw .px { height: 26px; padding: 0 12px; font-size: var(--fs-md); cursor: pointer; opacity: .55; transition: opacity var(--hover), box-shadow var(--hover); }
.adm-pxsw .px:hover { opacity: .85; }
.adm-pxsw .px.on { opacity: 1; box-shadow: 0 0 0 2px var(--s-page), 0 0 0 3px currentColor; }
.adm-pxf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-4); max-height: 260px; overflow-y: auto; padding: 6px 10px; background: var(--s-well);
  border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.adm-pxg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-pxg .cap { margin-bottom: 2px; }

/* ---------------------------------------------------------------- forms: editor dialogs, releases, tokens, site */
.adm-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-fld > .combo { width: 100%; }
.adm-fld > .stepper, .adm-fld > .seg { align-self: flex-start; }
.adm-fld .hint, .adm-sub-h .hint { font-size: var(--fs-md); color: var(--tx-3); }
.adm-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.adm-form2.wide { grid-template-columns: minmax(0, 1fr) 200px; }
.adm-form-f { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.adm-form-f .adm-hint { flex: 1 1 260px; }
.adm-form .msg-line:not(:empty) { margin-top: -4px; }
.adm-form textarea.field { min-height: 96px; }
.adm-sw { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--tx-2); cursor: pointer; }
.adm-file { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 6px; background: var(--s-well); border: 1px dashed var(--e-line-3);
  transition: border-color var(--hover), background var(--hover); }
.adm-file:hover { border-color: #5A5A63; }
.adm-file.has { border-style: solid; border-color: var(--ac-line); background: #0E0C14; }
.adm-file .nm { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-file.has .nm { color: var(--tx); }
/* the empty hint is a sentence: it wraps on a phone, a file name keeps its ellipsis */
.adm-file:not(.has) .nm { white-space: normal; line-height: 17px; }
.adm-preview .card.callout { box-shadow: none; }
/* the notes preview under the field, in a well */
.adm-npv { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) 10px 10px; font-size: var(--fs-md); line-height: 20px; background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.adm-npv[hidden] { display: none; }
.adm-npv > .cap { color: var(--tx-4); }
/* the release editor: the release's one file */
.adm-rfile { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-3); background: var(--s-well); border: 1px dashed var(--e-line-3); }
.adm-rfile.has { border-style: solid; border-color: var(--ac-line); background: #0E0C14; }
.adm-rfile .h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 22px; font-size: var(--fs-md); }
.adm-rfile .h .cap { color: var(--tx-2); }
.adm-rfile .f { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; font-size: var(--fs-md); }
.adm-rfile .f .nm { flex: 1; min-width: 0; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-rfile .f .mono { flex: none; }
.adm-sha { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; max-width: 100%; height: 24px; margin-left: -6px; padding: 0 6px; border: 0;
  background: transparent; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-2); transition: background var(--hover), color var(--hover); }
.adm-sha:hover { background: rgba(255,255,255,.045); color: var(--tx); }
.adm-sha .cap { color: var(--tx-4); }
.adm-sha .mono { overflow: hidden; text-overflow: ellipsis; }
.adm-sha .ic { opacity: .5; transition: opacity var(--hover); }
.adm-sha:hover .ic, .adm-sha:focus-visible .ic { opacity: .9; }
/* the upload panel */
.adm-up { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-3); background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); animation: pop-in var(--panel); }
.adm-up .l1 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); }
.adm-up .prog-track { position: relative; flex: 1; min-width: 20px; height: 5px; overflow: hidden; background: linear-gradient(180deg, var(--track-t), var(--track-b)); box-shadow: 0 0 0 1px #000; }
.adm-up .prog-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ac-grad); transition: width 180ms ease-out; }
.adm-up + .msg-line:not(:empty), .adm-form + .adm-up[hidden] + .msg-line:not(:empty) { margin-top: var(--sp-3); }
/* API tokens: a command in a hint, and the one-time plaintext box */
.adm-code { padding: 0 5px; font-size: var(--fs-sm); color: var(--tx-2); white-space: nowrap; background: var(--s-well); border: 1px solid #000; }
.adm-hint:has(.adm-code) { line-height: 21px; }
.adm-tok-new:empty { display: none; }
.adm-tok-new .callout > .grow { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-tok-w { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adm-tok-w b { font-weight: 700; color: var(--tx); }
.adm-key { display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 10px; margin-bottom: 4px; background: var(--s-well); border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.adm-key .k { flex: 1; min-width: 0; font: 400 var(--fs-md)/32px var(--ui); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the whole token stays readable: it wraps instead of ending in an ellipsis */
.adm-tok-new .adm-key { margin: 0; }
.adm-tok-new .adm-key .k { padding: 8px 0; user-select: all; white-space: normal; word-break: break-all; line-height: 18px; }

/* site: switch tiles in a column, the banner and copyright boxes beside them, the save bar under the grid */
.adm-site { align-items: stretch; }
.adm-site .hint::first-letter { text-transform: uppercase; }
.adm-tiles { display: flex; flex-direction: column; gap: 6px; }
.adm-tile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px var(--sp-3) 6px 10px; cursor: pointer; user-select: none; background: var(--s-well);
  border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); transition: background var(--hover); }
.adm-tile:hover { background: #0F0F12; }
.adm-tile .t { font: 700 var(--fs-md)/17px var(--ui); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tile .d { font-size: var(--fs-md); line-height: 16px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tile:not(.on) .ti .ic { opacity: .5; }
.adm-tile.on .t { color: var(--tx); }
.adm-tile.on .ti { color: var(--ac-hi); background: linear-gradient(180deg, var(--tab-t), var(--tab-b)); }
.adm-tile .adm-skel { padding: 0; }
.adm-savebar { display: flex; flex-direction: column; gap: var(--sp-2); padding: 10px var(--g-r) 10px var(--g-l); }
.adm-savebar::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--ac-grad-v); }
.adm-savebar .msg-line:empty { display: none; }

/* ---------------------------------------------------------------- reports */
.adm-rps { display: flex; flex-direction: column; transition: opacity var(--hover); }
.adm-rps.busy { opacity: .55; }
.adm-rp { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--g-r) var(--sp-3) var(--g-l);
  cursor: pointer; transition: background var(--hover); }
.adm-rp + .adm-rp { border-top: 1px solid var(--e-hair); }
.adm-rp:hover { background: var(--s-hover); }
.adm-rp:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }
.adm-rp.done { opacity: .72; }
.adm-rp-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-rp-c .l1 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-md); }
.chip.adm-rk { height: 18px; padding: 0 6px; }
.adm-rp .snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-md); line-height: 18px; color: var(--tx-2); }
.adm-rp-r { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-md); }
.adm-rp-r .grow { display: flex; flex-direction: column; gap: 2px; }
.adm-rp-r .pm-faces > .av + .av { margin-left: -6px; }
.adm-rp .why { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-rp-s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--fs-md); }
.adm-rp-list { display: flex; flex-direction: column; }
.adm-rp-u { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--g-r) 10px var(--g-l); }
.adm-rp-u + .adm-rp-u { border-top: 1px solid var(--e-hair); }
.adm-rp-u .l1 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
.adm-rp-u .why { margin-top: 2px; font-size: var(--fs-base); line-height: 19px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-rp-cc .card-b { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------------------------------------------------------------- the user, report and takedown drawers */
.adm-drawer { gap: var(--sp-3); }
.adm-uh { display: flex; align-items: flex-start; gap: 14px; }
.adm-uh > .btn { flex: none; }
.adm-un { display: flex; align-items: center; gap: 7px; min-width: 0; }
.adm-un .nm { min-width: 0; font: 700 var(--fs-lg)/22px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-un .badge.inline { margin-left: 2px; }
.adm-us { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; font-size: var(--fs-md); color: var(--tx-3); }
.adm-us a.out { display: inline-flex; align-items: center; gap: 4px; color: var(--tx-3); }
.adm-us a.out:hover { color: var(--ac-hi); }
.adm-uh .chips { margin-top: 10px; }
.adm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 14px 0 0; }
.adm-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); min-width: 0; padding: 6px 0; border-top: 1px solid var(--e-hair); }
.adm-facts dt { flex: none; font-size: var(--fs-md); color: var(--tx-3); }
.adm-facts dd { min-width: 0; margin: 0; text-align: right; font-size: var(--fs-md); font-weight: 700; color: var(--ac-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-facts dd.mono, .adm-facts dd.t3 { font-weight: 400; color: var(--tx-2); }
.adm-facts dd.t3 { color: var(--tx-3); }
.adm-facts dd.sel { user-select: text; color: var(--tx); }
.adm-td .card-b > .adm-facts:first-child { margin-top: 0; }
.adm-ucard .msg-line:not(:empty) { margin-top: 10px; }
.adm-sub + .adm-sub, .adm-stmts, .adm-tools-l { margin-top: 14px; padding-top: 14px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.adm-sub-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-2); }
.adm-sub-h .cap { color: var(--tx-2); font-weight: 700; }
.adm-inline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.adm-inline > .inp { flex: 1 1 200px; }
.adm-inline > .combo { width: 132px; }
.adm-inline > .t2 { font-size: var(--fs-md); }
.adm-sub .adm-inline > .btn { min-width: 96px; }
.adm-sub .adm-inline > .combo { width: 140px; }
.adm-inline + .adm-inline, .adm-inline + div:not(:empty) { margin-top: 10px; }
.adm-notes .adm-note { padding: 10px var(--g-r) 12px var(--g-l); }
.adm-notes .adm-note + .adm-note { border-top: 1px solid var(--e-hair); }
.adm-note .h { display: flex; align-items: center; gap: var(--sp-2); min-height: 24px; font-size: var(--fs-md); }
.adm-note .h .btn { opacity: 0; transition: opacity var(--hover); }
.adm-note:hover .h .btn, .adm-note .h .btn:focus-visible { opacity: 1; }
.adm-note .b { margin-top: 2px; font-size: var(--fs-base); line-height: 19px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-compose { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--g-r) var(--sp-3) var(--g-l); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.adm-compose .inp { flex: 1; }
.adm-drawer .card.callout .chip { margin-left: 4px; cursor: pointer; }
.adm-sig { margin: var(--sp-3) 0 0; padding: 10px 0 0; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); white-space: pre-wrap; overflow-wrap: anywhere;
  border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.adm-stmts .adm-line { min-height: 30px; }
.adm-content .adm-fld { margin-bottom: 4px; }
.adm-content .adm-fld .inp { max-width: 240px; }
.adm-lines .adm-line { padding: var(--sp-2) 0; }
.adm-lines .adm-line + .adm-line { border-top: 1px solid var(--e-hair); }
.adm-strikes { display: flex; flex-direction: column; }
.adm-strike { display: flex; align-items: flex-start; gap: 10px; padding: var(--sp-2) 0; }
.adm-strike + .adm-strike { border-top: 1px solid var(--e-hair); }
.adm-strike .n { flex: none; min-width: 36px; font-size: var(--fs-md); line-height: 19px; color: var(--tx-3); }
.adm-strike .b { font-size: var(--fs-base); line-height: 19px; overflow-wrap: anywhere; }
.adm-strike .m { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }
.adm-strike .m .td { padding: 0; border: 0; background: none; font: inherit; color: var(--ac-hi); }
.adm-strike .m .td:hover { color: #D6C4FF; }
.adm-strike.off .b { color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--tx-4); }
/* takedowns: the queue's claimant, the notice text and its addresses */
.adm-claim { display: flex; flex-direction: column; min-width: 0; line-height: 17px; }
.adm-claim > span { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-t td.wide .adm-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-work { font-size: var(--fs-base); line-height: 20px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-urls { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: var(--sp-2) var(--g-r) 10px 40px; font-size: var(--fs-md); line-height: 19px; }
.adm-urls li { overflow-wrap: anywhere; }
.adm-urls li::marker { color: var(--tx-4); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- products (admin_store.js): every cell is a field */
.adm-in { height: 26px; padding: 0 8px; color: var(--tx); font: 400 var(--fs-md)/18px var(--ui); outline: 0; border: 1px solid #000;
  background: linear-gradient(180deg, var(--input-t), var(--input-b)); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); transition: border-color var(--hover); }
.adm-in:hover { border-color: #2C2C32; }
.adm-in:focus { border-color: var(--ac-line); }
.adm-in:disabled { opacity: .4; }
.adm-in.nm { width: 150px; }
.adm-in.ds { width: 100%; min-width: 220px; }
.adm-in.dy { width: 64px; }
.adm-in.pr { width: 82px; text-align: right; }
.adm-in.ps { width: 56px; text-align: right; }
.adm-in[type=number] { -moz-appearance: textfield; }
.adm-in[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.adm-prod .combo { min-width: 130px; }
.adm-dur { display: flex; align-items: center; gap: 10px; }
.adm-dur .check-row { padding: 0; font-size: var(--fs-md); }
.adm-prod tr.new td:first-child, .adm-prod tr.dirty td:first-child { box-shadow: inset 2px 0 0 var(--ac); }

/* the license grant in the user drawer: the one product as a fixed label, then the length */
.adm-prod-l { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-h); padding: 0 10px 0 5px; font-size: var(--fs-md); background: var(--s-well);
  border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); }
.adm-prod-l > img { flex: none; }
.adm-prod-l > b { font-weight: 700; color: var(--tx); white-space: nowrap; }

/* ---------------------------------------------------------------- invitations: the generator beside the default validity and
   the codes just made, the list under both with its bulk bar */
/* both columns end level: the generator's button sits on its floor, the codes box takes the rest of the side */
.adm-inv { align-items: stretch; }
.adm-inv-gen, .adm-inv-res { display: flex; flex-direction: column; }
.adm-inv-gen > .card-b, .adm-inv-res > .card-b { flex: 1; display: flex; flex-direction: column; }
.adm-inv-gen .adm-form { flex: 1; }
.adm-inv-gen .adm-form-f { margin-top: auto; }
.adm-inv-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.adm-inv-side > .adm-inv-res { flex: 1 1 auto; }
.adm-inv-res .adm-inv-list { flex: 1; }
.adm-inv-res .adm-inv-none { display: flex; align-items: center; justify-content: center; height: 100%; }
.adm-inv-gen .adm-fld > .seg { max-width: 100%; }
.adm-inv-gen .adm-fld > .pm-to { min-height: var(--ctl-h); }
.adm-inv-gen .adm-form2 { align-items: start; }
.adm-inv-gen .adm-form-f { padding-top: var(--sp-3); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
/* a validity: the number, "days", Never expires */
.adm-days { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.adm-days > .inp { flex: none; width: 76px; }
.adm-days > .inp.off { opacity: .4; }
.adm-days > .inp input { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.adm-days > .inp input::-webkit-inner-spin-button { -webkit-appearance: none; }
.adm-days > .u { font-size: var(--fs-md); color: var(--tx-3); }
.adm-days > .check-row { padding-right: 2px; }
.adm-days > .check-row .lab { font-size: var(--fs-md); }
.adm-defrow { justify-content: space-between; }
.adm-inv-side .card-b > .adm-form > .hint { font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }
/* the codes just made: a scrolling list in the box, each with its copy buttons */
.adm-inv-list { max-height: 352px; overflow-y: auto; overscroll-behavior: contain; }
.adm-inv-none { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.adm-inv-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 2px 6px 2px var(--g-l); }
.adm-inv-r + .adm-inv-r { border-top: 1px solid var(--e-hair); }
.adm-inv-r .ow { max-width: 140px; font-size: var(--fs-md); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-inv-res .adm-foot:has(> .t3:empty) { display: none; }
.adm-inv-c { min-width: 0; font: 700 var(--fs-md)/18px var(--ui); letter-spacing: .04em; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.adm-t .adm-inv-c { cursor: copy; transition: color var(--hover); }
.adm-t .adm-inv-c:hover, .adm-t .adm-inv-c:focus-visible { color: var(--ac-hi); }
/* the list: a fixed layout that fits the box (the note takes what is left), two-line cells, every row 44 high. Name
   columns hold a 16-character name ("by" one under the owner), Expires and the used time "44 minutes ago" */
.adm-inv-tw .adm-t { table-layout: fixed; }
.adm-inv-tw .i-sel { width: calc(var(--g-l) + 18px); padding-right: 0; }
/* room for the widest hex code (Verdana's capitals are wider than its digits) */
.adm-inv-tw .i-code { width: 224px; }
.adm-inv-tw .i-code .sub, .adm-inv-tw .i-st .sub { display: none; }
.adm-inv-tw .i-st { width: 90px; }
.adm-inv-tw .i-ow { width: 148px; }
.adm-inv-tw .i-ex { width: 116px; }
.adm-inv-tw .i-us { width: 140px; }
/* four 24 px icons, their gaps, the padding */
.adm-inv-tw .i-acts { width: calc(4 * 24px + 3 * 2px + 10px + var(--g-r)); }
.adm-inv-tw td { height: 44px; overflow: hidden; text-overflow: ellipsis; }
.adm-inv-tw .check-row { display: inline-flex; vertical-align: middle; min-height: 0; padding: 4px 0; }
.adm-inv-tw .check-row .lab { display: none; }
.adm-inv-tw .adm-inv-c { display: block; letter-spacing: .02em; }
.adm-inv-tw .adm-acts { gap: 2px; }
.adm-two { display: flex; flex-direction: column; min-width: 0; line-height: 17px; }
.adm-two > * { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-two > .sub, .adm-two > .mono { font-size: var(--fs-sm); line-height: 15px; color: var(--tx-3); }
/* a time in the quiet line (.mono sets its own font) stays quiet */
.adm-two > .sub > .mono { font-size: inherit; line-height: inherit; }
.adm-ell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ul { color: var(--tx); }
.adm-ul:hover { color: var(--ac-hi); }
.adm-inv-tbl .adm-tools > .seg { flex: none; }
.adm-owner { flex: 0 1 150px; }
.adm-owner input::-webkit-search-cancel-button { display: none; }
.adm-segn { font-size: var(--fs-sm); color: var(--tx-4); font-variant-numeric: tabular-nums; }
.seg > button.on .adm-segn { color: var(--tx-3); }
.adm-segn:empty { display: none; }
/* what is picked, and the change for all of it, tinted like an open tab */
.adm-bulk { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 8px var(--g-r) 8px var(--g-l); border-bottom: 1px solid #000;
  background: linear-gradient(90deg, var(--tab-t), var(--tab-b) 60%, #111114); box-shadow: inset 2px 0 0 var(--ac); }
.adm-bulk[hidden] { display: none; }
.adm-bulk > b { font: 700 var(--fs-md)/18px var(--ui); color: var(--tx); }
.adm-link { padding: 0; border: 0; background: none; font: 400 var(--fs-md)/18px var(--ui); color: var(--ac-hi); text-decoration: underline; text-underline-offset: 2px; }
.adm-link:hover { color: #D6C4FF; }
.adm-link[hidden] { display: none; }
.adm-inv-now { font-size: var(--fs-md); line-height: var(--ctl-h); }

/* touch: nothing to hover, so the quiet controls show as they are */
@media (hover: none) {
  .adm-t .combo { border-color: #000; background: linear-gradient(180deg, var(--input-t), var(--input-b)); }
  .adm-t .combo > svg { opacity: .6; }
  .adm-frow > .btn, .adm-note .h .btn { opacity: 1; }
}

/* ---------------------------------------------------------------- responsive */
/* the narrower box (823 at 1101; at 1100 the side list shrinks): the Note column folds under the code, which takes what
   is left; tighter cells, and the code's own click copies it, so its icon goes */
@media (max-width: 1280px) {
  .adm-inv-tw .i-nt { display: none; }
  .adm-inv-tw .i-code { width: auto; }
  .adm-inv-tw .i-code .sub { display: block; }
  .adm-inv-tw .adm-inv-c { letter-spacing: 0; }
  .adm-inv-tw :is(th, td):not(:first-child):not(:last-child) { padding-left: 8px; padding-right: 8px; }
  .adm-inv-tw .i-st { width: 86px; }
  .adm-inv-tw .i-ow { width: 144px; }
  .adm-inv-tw .i-ex { width: 112px; }
  .adm-inv-tw .i-us { width: 136px; }
  .adm-inv-tw .i-acts { width: calc(3 * 24px + 2 * 2px + 8px + var(--g-r)); padding-left: 8px; }
  .adm-inv-tw .adm-acts > .btn:first-child { display: none; }
}
@media (max-width: 1100px) {
  .adm-grid { grid-template-columns: 184px minmax(0, 1fr); }
  /* narrower again (to 751 at 1001): Expires folds under the status */
  .adm-inv-tw .i-ex { display: none; }
  .adm-inv-tw .i-st { width: 108px; }
  .adm-inv-tw .i-st .sub { display: block; line-height: 13px; }
  .adm-frow { grid-template-columns: 36px minmax(0, 1fr) 104px 104px 28px; }
  .adm-frow > .chip { display: none; }
}
/* at the list | detail fold (1000, as messages, tickets, settings) the section list becomes a strip over the content that
   scrolls sideways (app.css fades its edges) */
@media (max-width: 1000px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; margin: 0 calc(-1 * var(--pad)); }
  .adm-nav { flex-direction: row; gap: 2px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; background: none; border: 0;
    border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav::after { content: ""; flex: none; width: var(--sp-6); }
  .adm-ng { display: contents; }
  .adm-ngh { display: none; }
  .adm-nav a { flex: none; height: 36px; padding: 0 10px; }
  .adm-nav a.on { background: none; }
  .adm-nav a.on::before { left: 10px; right: 10px; top: auto; bottom: -1px; width: auto; height: 2px; background: var(--ac-grad); }
  @supports not (animation-timeline: scroll()) {
    .adm-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
    .adm-nav.scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  }
}
@media (min-width: 1001px) {
  /* app.css fades sideways strips; the list does not scroll sideways here */
  .adm-nav { -webkit-mask-image: none; mask-image: none; animation: none; }
}
@media (max-width: 840px) {
  .adm-me { width: 100%; }
  .adm-tools { padding: 10px var(--g-r) 10px var(--g-l); }
  .adm-search { flex-basis: 100%; max-width: none; }
  .adm-tools .seg { max-width: 100%; }
  .adm-bar > .adm-hint { flex-basis: 100%; }
  .adm-frow { grid-template-columns: 28px minmax(0, 1fr) 36px; row-gap: 6px; padding: var(--sp-3); }
  .adm-frow .perm { grid-column: 2; flex-direction: row; align-items: baseline; gap: 6px; }
  .adm-frow > .btn { grid-column: 3; grid-row: 1; }
  .adm-frow .pos { width: 24px; }
  .adm-inline > .inp { flex-basis: 100%; }
  .adm-inline > .combo { flex: 1 1 120px; }
  .adm-line { flex-wrap: wrap; }
  .adm-sub-h { flex-wrap: wrap; row-gap: 2px; }
  .adm-sub-h .hint { order: 3; flex-basis: 100%; }
  .adm-rp { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-2); }
  .adm-rp-r { grid-column: 1; grid-row: 2; }
  .adm-rp-s { grid-row: 1 / span 2; grid-column: 2; }
  .adm-pxf { grid-template-columns: minmax(0, 1fr); }
  .adm-owner { flex: 1 1 100%; }
  /* the invitations list as stacked rows: pick | code | status, then owner and expiry, the note, who used it and the
     actions */
  .adm-inv-tw { overflow: visible; }
  .adm-inv-tw .adm-t, .adm-inv-tw tbody { display: block; width: 100%; }
  .adm-inv-tw thead { display: none; }
  .adm-inv-tw tbody tr { display: block; }
  .adm-inv-tw tbody tr:not(.msg):not(.sk-row) { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "sel code st" ". ow ex" ". nt nt" ". us acts"; align-items: center; gap: 6px var(--sp-2); padding: 10px var(--g-r) 10px var(--g-l); }
  .adm-inv-tw tbody tr + tr { border-top: 1px solid var(--e-hair); }
  .adm-inv-tw td { display: block; width: auto !important; height: auto; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .adm-inv-tw tr.sk-row td, .adm-inv-tw tr.msg td { padding: 10px var(--g-r) 10px var(--g-l) !important; }
  .adm-inv-tw td.i-sel { grid-area: sel; }
  .adm-inv-tw td.i-code { grid-area: code; }
  .adm-inv-tw td.i-st { grid-area: st; justify-self: end; }
  .adm-inv-tw td.i-ow { grid-area: ow; }
  .adm-inv-tw td.i-ex { display: block; grid-area: ex; justify-self: end; text-align: right; }
  .adm-inv-tw td.i-nt { display: block; grid-area: nt; }
  .adm-inv-tw .i-code .sub, .adm-inv-tw .i-st .sub { display: none; }
  .adm-inv-tw td.i-us { grid-area: us; }
  .adm-inv-tw td.i-acts { grid-area: acts; justify-self: end; }
  .adm-inv-tw td.i-nt:has(> .t4:only-child) { display: none; }
  .adm-inv-tw td.i-us:has(> .t4:only-child) { visibility: hidden; }
  .adm-inv-tw .adm-two { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; line-height: 18px; }
  .adm-bulk > .grow { flex-basis: 100%; height: 0; }
  .adm-inv-r .ow { max-width: 96px; }
}
@media (max-width: 600px) {
  .adm-chart { gap: 4px; height: 150px; }
  .adm-chart .n { font-size: var(--fs-xs); }
  .adm-form2, .adm-form2.wide { grid-template-columns: minmax(0, 1fr); }
  .adm-facts { grid-template-columns: minmax(0, 1fr); }
  /* the text above, the picker full width under it */
  .adm-line:has(> .combo) > .grow { flex: 1 1 100%; }
  .adm-line > .combo { flex: 1 1 auto; max-width: none; }
  .adm-uh { flex-wrap: wrap; }
  .adm-uh > .btn { order: 3; }
  /* the four targets as a 2 x 2 block, the status filter tighter, so neither has to scroll */
  .adm-inv-gen .adm-fld > .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; }
  .adm-inv-gen .adm-fld > .seg > button { justify-content: center; }
  .adm-inv-gen .adm-fld > .seg > button:nth-child(3)::before { display: none; }
  .adm-inv-gen .adm-fld > .seg > button:nth-child(n+3) { box-shadow: inset 0 1px 0 #000; }
  .adm-inv-tbl .adm-tools > .seg { flex: 1 1 100%; }
  /* the copy buttons by their icons, so the box keeps its title */
  .adm-inv-res > .card-h .aside .btn > .tx { display: none; }
  .adm-inv-tbl .adm-tools > .seg > button { flex: 1 0 auto; justify-content: center; gap: 4px; padding: 0 6px; }
}