/* On top of Pico (the colour file is picked in the browser). Fonts are the service's own. */
:root {
  --pico-font-family: 'manrope', system-ui, sans-serif;
  --checker-a: #2a3140;
  --checker-b: #202634;
}
[data-theme='light'] { --checker-a: #e4e7ec; --checker-b: #f4f5f7; }
[data-theme='dark'] { --pico-background-color: #141922; --pico-card-background-color: #1b2130; --pico-card-sectioning-background-color: #1b2130; }
[x-cloak] { display: none !important; }

h1, h2, h3, h4, .brand { font-family: 'unbounded', var(--pico-font-family); }
h3 { font-size: 1.05rem; margin: 0; }
h4 { font-size: 0.95rem; margin: 1.2rem 0 0.6rem; }

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
.brand { font-weight: 700; font-size: 1.2rem; }
.brand .dot { color: var(--pico-primary); margin: 0 0.3rem; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; line-height: 1.2; min-width: 0; }
.who strong { overflow-wrap: anywhere; }
.who details { margin: 0; }
/* The switch between the donations cabinet and the bot's (the same markup on both pages). */
.switch { display: flex; gap: 0.2rem; }
.switch a { padding: 0.25rem 0.9rem; border-radius: 1rem; text-decoration: none; color: var(--pico-muted-color); }
.switch a[aria-current='page'] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 700; }
.avatar { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 700; }

.tabs { display: flex; gap: 0.2rem; overflow-x: auto; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.2rem; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--pico-muted-color); padding: 0.7rem 1rem; white-space: nowrap; margin: 0; width: auto; }
.tabs button.active { color: var(--pico-contrast); /* not --pico-color: Pico turns it white inside a button */ border-bottom-color: var(--pico-primary); font-weight: 700; }

.cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.span2 { grid-column: 1 / -1; }
.builder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; }
.narrow { max-width: 32rem; margin: 3rem auto; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.row { display: flex; gap: 0.6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row > * { width: auto; margin-bottom: 0.5rem; }
.row .grow { flex: 1 1 14rem; }
.inline { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.inline select { margin: 0; }
button.small, [role='button'].small { padding: 0.3rem 0.7rem; font-size: 0.85rem; width: auto; }

.notice { padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; }
.notice.error { background: #5a1d1d55; border: 1px solid #c0392b; }
.notice.ok { background: #1d5a3a55; border: 1px solid #27ae60; }
.notice.warn { background: #5a4a1d55; border: 1px solid #d4a017; }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 1rem; font-size: 0.8rem; background: var(--pico-muted-border-color); white-space: nowrap; }
.badge.ok, .badge.sent { background: #1d5a3a; color: #b8f0cf; }
.badge.warn, .badge.ready, .badge.pending { background: #5a4a1d; color: #f5dfa0; }
.badge.failed { background: #5a1d1d; color: #f5b8b8; }

.checker { background-color: var(--checker-b); background-image: conic-gradient(var(--checker-a) 25%, transparent 0 50%, var(--checker-a) 0 75%, transparent 0); background-size: 24px 24px; background-repeat: repeat; border-radius: var(--pico-border-radius); }
.live { aspect-ratio: 16 / 9; } /* the proportions of an OBS source */
.live:empty::after { content: 'Чекаю на донат…'; color: var(--pico-muted-color); font-size: 0.9rem; }
/* «Оверлей»: address and test donation beside the wide live preview; one column (address, preview, test) below 1024 px. */
.overlay-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'addr' 'live' 'test'; align-items: start; }
.overlay-grid > article { margin-bottom: 0; }
.ov-addr { grid-area: addr; }
.ov-live { grid-area: live; }
.ov-test { grid-area: test; }
@media (min-width: 1024px) {
  .overlay-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: 'addr live' 'addr test'; }
}
.builder-stage { aspect-ratio: 16 / 9; }

/* A set's alerts: one row each (rule, picture, sound, time), unfolding into its settings. */
.alert-items { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0; container-type: inline-size; }
/* The head and the unfolded body get their own tints of the card colour, so rows do not run together
   (both follow the theme: --pico-color is the text colour, --pico-card-background-color the card). */
.alert-item { --alert-head-bg: color-mix(in srgb, var(--pico-color) 9%, var(--pico-card-background-color)); --alert-body-bg: color-mix(in srgb, var(--pico-color) 3%, var(--pico-card-background-color)); --alert-rule: color-mix(in srgb, var(--pico-color) 18%, var(--pico-card-background-color));
  border: 1px solid var(--pico-muted-border-color); border-left: 4px solid transparent; border-radius: var(--pico-border-radius); overflow: clip; /* clip, not hidden: hidden would stop the head sticking */ }
.alert-item.previewed { border-left-color: var(--pico-primary); }
/* An unfolded alert keeps its head (rule, preview, copy, remove) at the top of the screen while scrolled. */
.alert-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem 0.3rem 0.2rem; background: var(--alert-head-bg); }
.alert-head > button { margin: 0; }
/* A phone: the row (rule, picture, sound, time) has the whole width, its buttons a line of their own on the right. */
@media (max-width: 600px) {
  .alert-head { flex-wrap: wrap; row-gap: 0.2rem; }
  .alert-head > .alert-toggle { flex-basis: 100%; }
  .alert-head > .alert-toggle + button { margin-left: auto; }
}
/* A Gemini model in the access tab: switch, id, move/remove; its thinking mode under it. */
.model { padding: 0.5rem 0; border-top: 1px solid var(--pico-muted-border-color); }
.model .row { margin-bottom: 0.3rem; }
.model .grow { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.model select { margin-bottom: 0; }

button.icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; line-height: 1; flex: none; }
.alert-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: 1rem minmax(7.5rem, 1fr) 2.5rem 1.2rem auto; align-items: center; gap: 0.4rem;
  width: auto; margin: 0; padding: 0.4rem; background: none; border: 0; color: inherit; text-align: left; }
.alert-toggle:focus-visible { outline: 2px solid var(--pico-primary); }
.chev { color: var(--pico-muted-color); }
.thumb-cell { display: flex; align-items: center; justify-content: center; height: 2rem; }
.alert-toggle strong { overflow-wrap: normal; font-family: 'unbounded', var(--pico-font-family); font-size: 0.85rem; }
.thumb { max-width: 2.5rem; max-height: 2rem; object-fit: contain; border-radius: 3px; }
.alert-body { display: flow-root; /* the last margin stays inside the tinted body */ padding: 0 0.9rem; border-top: 1px solid var(--pico-muted-border-color); background: var(--alert-body-bg); }
/* Section titles inside an alert: quieter than the alert's name, with a rule above every one but the first. */
.alert-body h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color); margin: 0 0 0.6rem; padding-top: var(--pico-spacing); border-top: 1px solid var(--alert-rule); }
.alert-body h4:first-child { border-top: 0; }
/* Under a preset select: what the preset is and what can be done with it. */
.preset-bar { margin-bottom: var(--pico-spacing); }
.preset-bar .row > button { margin: 0; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: var(--pico-spacing) 0; border-top: 1px solid var(--alert-rule); }
.alert-actions > button { margin: 0; }

/* One vertical rhythm in the alert's body and the preview card: every block is followed by one
   --pico-spacing; a field's own margin is zero (its label carries it), a hint sits close under its field.
   The body's bottom edge is that last margin, so its top and bottom padding match. */
:is(.alert-body, .preview-card) label { margin-bottom: var(--pico-spacing); }
:is(.alert-body, .preview-card) label > :is(input:not([type='checkbox'], [type='radio']), select, textarea) { margin-bottom: 0; }
:is(.alert-body, .preview-card) label > input[type='range'] { display: block; } /* inline-block would leave a descender gap below */
/* Pico's track colour equals the body's tint in the dark theme: the slider's line disappears. */
.alert-body input[type='range'] { --pico-range-border-color: color-mix(in srgb, var(--pico-color) 20%, var(--alert-body-bg)); --pico-range-active-border-color: color-mix(in srgb, var(--pico-color) 30%, var(--alert-body-bg)); }
:is(.alert-body, .preview-card) .grid { row-gap: 0; }
:is(.alert-body, .preview-card) .row { margin-bottom: var(--pico-spacing); }
:is(.alert-body, .preview-card) .row > * { margin-bottom: 0; }
:is(.alert-body, .preview-card) :is(.grid, label) + small { margin-top: calc(var(--pico-spacing) * -0.6); }
/* Pico has no destructive button: --pico-del-color, filled or outlined (the hover rules restate the colours — Pico's own hover would turn them green). */
button.danger { --pico-background-color: var(--pico-del-color); --pico-border-color: var(--pico-del-color); --pico-color: #fff; }
button.danger:is(:hover, :active, :focus) { --pico-background-color: var(--pico-del-color); --pico-border-color: var(--pico-del-color); --pico-color: #fff; filter: brightness(1.1); }
button.danger.outline { --pico-background-color: transparent; --pico-color: var(--pico-del-color); --pico-border-color: var(--pico-del-color); }
button.danger.outline:is(:hover, :active, :focus) { --pico-background-color: color-mix(in srgb, var(--pico-del-color) 15%, transparent); --pico-color: var(--pico-del-color); --pico-border-color: var(--pico-del-color); filter: none; }
button.danger:focus-visible { --pico-box-shadow: 0 0 0 var(--pico-outline-width) color-mix(in srgb, var(--pico-del-color) 40%, transparent); }
/* A very narrow card (two columns on a small screen; on a phone the header's buttons are on a line of their own): the rule only. */
@container (max-width: 320px) {
  .alert-toggle { grid-template-columns: 1rem minmax(0, 1fr); }
  .alert-toggle > small, .alert-toggle > .thumb-cell { display: none; } /* the name needs all the room the card has */
  .alert-toggle strong { font-size: 0.75rem; overflow-wrap: anywhere; } /* «замовчуванням» must not push «Прев’ю» out */
}
.card-head { flex-wrap: wrap; }

/* Free layout editor: the rendered alert under draggable boxes, all in canvas percentages. */
.canvas { position: relative; width: 100%; overflow: hidden; touch-action: none; user-select: none; }
.canvas-render { position: absolute; inset: 0; }
.handle { position: absolute; border: 1px dashed #ffffff99; cursor: move; outline: none; }
.handle.picked, .handle:focus-visible { border: 2px solid var(--pico-primary); background: #00000022; }
.handle-label { position: absolute; left: 0; top: 0; font-size: 11px; padding: 0 4px; background: #000000aa; color: #fff; pointer-events: none; }
.resize { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--pico-primary); border-radius: 2px; cursor: nwse-resize; }
.guide { position: absolute; background: #ff3ea5; pointer-events: none; }
.guide-x { top: 0; bottom: 0; width: 1px; }
.guide-y { left: 0; right: 0; height: 1px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.media-grid figure { margin: 0; padding: 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.media-grid img { max-height: 140px; width: 100%; object-fit: contain; }
.media-grid audio { width: 100%; }

/* Small layout fixes (2026-09-28). */
html { scrollbar-gutter: stable; } /* no sideways jump when a tab grows a scrollbar */
.who .dropdown ul { min-width: 15rem; }
.who .dropdown label { direction: ltr; display: grid; gap: 0.3rem; }
.who .dropdown select { width: 100%; margin: 0; }
/* Text in the tabs is 1 px smaller than Pico's fluid root size (16–21 px by screen width). Fields and buttons
   are sized in rem by Pico and stay as they are (on a phone 16 px: iOS zooms into a smaller field). */
.tabs ~ section { font-size: calc(1rem - 1px); }
/* A label that wraps to two lines must not push its field below its neighbours'. */
article .grid { align-items: end; }
/* A hint under a field belongs to it, not to the field below. */
:is(article, fieldset, div) > small { display: block; margin-bottom: var(--pico-spacing); }
/* A note inside a switch's label stays on its line: Pico's `input + small` (a hint under a field) skips the label text. */
label > input[role='switch'] + small { display: inline; margin: 0; }
/* Donations tab: the filter fields flow into as many columns as fit (two on a phone); the summary's totals stand out. */
.history-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); column-gap: var(--pico-grid-column-gap); align-items: end; }
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pico-grid-column-gap); }
.totals strong { display: block; font-size: 1.4rem; }
td { white-space: nowrap; }
td.donor { white-space: normal; min-width: 10rem; max-width: 18rem; overflow-wrap: anywhere; }

/* Builder: an upload button under a media select; the preview stays in view beside the long form. */
label.upload[role='button'] { position: relative; display: block; width: fit-content; margin: -0.5rem 0 var(--pico-spacing); cursor: pointer; }
/* Visually hidden, not display:none: the native file input keeps Tab and Enter/Space. */
label.upload input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
label.upload:focus-within { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
@media (min-width: 1024px) {
  .builder > article:last-child { position: sticky; top: 0.5rem; max-height: calc(100vh - 1rem); overflow-y: auto; }
  /* The unsaved-changes bar (x-show: inline display none when hidden) takes the bottom of the screen. */
  .builder:has(~ .save-bar:not([style*="none"])) > article:last-child { max-height: calc(100vh - 6rem); }
}
.test-box { margin: 1rem 0 0; }
.test-box > summary { font-family: 'unbounded', var(--pico-font-family); font-size: 0.95rem; }

/* Unsaved alert edits: a bar stuck to the bottom of the screen while the builder is in view. */
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 1rem; padding: 0.6rem 1rem; border: 1px solid #d4a017; border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); box-shadow: 0 -4px 16px #00000040; }
.save-bar .row > *, .save-bar > button { margin-bottom: 0; }
/* Text that may hold slurs (filter words, LLM rules): unreadable on a stream until the eye is on. */
textarea.masked { color: transparent; text-shadow: 0 0 7px var(--pico-color); user-select: none; }

/* Minecraft: the donation page's settings and the order of its tiles (drag and drop with a mouse, a list on a phone). */
.prefix { display: flex; align-items: stretch; }
.prefix > span { display: flex; align-items: center; padding: 0 0.6rem; border: 1px solid var(--pico-form-element-border-color); border-right: 0; border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); font-size: 0.85rem; white-space: nowrap; margin-bottom: var(--pico-spacing); }
.prefix input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
/* The log (its last 50 changes): its own scroll instead of a card as long as the page. */
.mc-audit { max-height: 20rem; overflow-y: auto; }
.mc-logos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mc-order-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.mc-ochip { padding: 0.3rem 0.8rem; border-radius: 1rem; border: 1px solid var(--pico-muted-border-color); font-weight: 700; font-size: 0.88rem; user-select: none; }
.mc-ochip.fixed { opacity: 0.6; }
.mc-order-group h4 { margin: 0.8rem 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pico-muted-color); }
.mc-order-list { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.mc-otile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); user-select: none; }
.mc-otile.hidden-on-page { opacity: 0.6; border-style: dashed; }
.mc-otext { display: grid; min-width: 0; line-height: 1.25; }
.mc-otext strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-slot { width: 36px; height: 36px; display: grid; place-items: center; background: var(--checker-a); box-shadow: inset 2px 2px 0 rgb(0 0 0 / 0.35), inset -2px -2px 0 rgb(255 255 255 / 0.12); font-family: 'unbounded', var(--pico-font-family); font-weight: 700; }
.mc-slot img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
[draggable='true'] { cursor: grab; }
.dragging { opacity: 0.4; }
.mc-dirty { color: var(--pico-primary); font-weight: 700; }

/* Media pickers (admin/media-picker.js), shared with /banners/: a field (the picked file, its buttons, a drop zone)
   and one dialog with the library. A zone a file is held over turns the primary colour. */
.media-field, .drop-zone { --zone-border: color-mix(in srgb, var(--pico-muted-color) 50%, transparent); }
.media-field { display: grid; gap: 0.7rem; padding: 0.8rem; margin-bottom: var(--pico-spacing); border: 1.5px dashed var(--zone-border); border-radius: var(--pico-border-radius); }
.media-field.drag, .drop-zone.drag { border-style: solid; border-color: var(--pico-primary); background: var(--pico-primary-focus); }
.media-file { display: flex; gap: 0.8rem; align-items: center; min-width: 0; }
.media-file > div { min-width: 0; }
.media-file strong, .pick-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-file small, .pick-card small { display: block; margin: 0; color: var(--pico-muted-color); font-size: 0.8rem; }
.media-thumb { flex: none; width: 88px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: var(--checker-a); color: var(--pico-muted-color); overflow: hidden; }
span.media-thumb:not(:has(img, :not(template)))::after { content: '—'; }
.media-thumb { position: relative; }
.media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
button.media-thumb { margin: 0; padding: 0; border: 0; color: var(--pico-primary); font-size: 1.3rem; }
.media-field .row > *, .drop-zone > * { margin: 0; }
.media-field label.upload[role='button'], .drop-zone label.upload[role='button'] { margin: 0; }
.drop-hint { margin: 0 !important; color: var(--pico-muted-color); font-size: 0.8rem; }
@media (hover: none) { .drop-hint { display: none !important; } } /* a phone has no files to drag */
.drop-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.9rem 1rem; margin-bottom: var(--pico-spacing);
  border: 1.5px dashed var(--zone-border); border-radius: var(--pico-border-radius); }
.drop-zone > div { flex: 1 1 14rem; }
.drop-zone small { display: block; margin: 0; color: var(--pico-muted-color); }
dialog.media-picker > article { width: min(62rem, calc(100vw - 2rem)); max-width: none; }
.media-picker header { display: flex; align-items: center; gap: 0.6rem; }
.media-picker header h3 { flex: 1; margin: 0; }
.media-picker header button { margin: 0; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.8rem; }
@media (max-width: 600px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }
.pick-grid > div, .pick-list > div { min-width: 0; }
.pick-grid .pick-card { height: 100%; align-content: start; }
/* A card is a <button>: Pico's button colours are reset to the card's. */
.pick-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; width: 100%; min-width: 0; margin: 0; padding: 0.4rem; text-align: left; background: var(--pico-card-sectioning-background-color);
  color: inherit; font-weight: inherit; border: 2px solid color-mix(in srgb, var(--pico-muted-color) 30%, transparent); border-radius: var(--pico-border-radius); }
.pick-card > span { min-width: 0; }
.pick-card:hover { border-color: var(--pico-secondary); }
.pick-card.on { border-color: var(--pico-primary); }
.pick-card .media-thumb { width: 100%; }
.pick-list { display: grid; gap: 0.4rem; }
.pick-list .pick-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.pick-list .media-thumb { width: 2.6rem; aspect-ratio: 1; border-radius: 50%; }
.pick-list .pick-card button { margin: 0; }
.media-grid figcaption strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.field-name { display: block; margin-bottom: 0.4rem; }
article .grid:has(> div > .media-field) { align-items: start; } /* two fields of different heights start level */
.drop-zone .drop-hint { font-size: inherit; color: inherit; }

/* Minecraft catalog (docs/minecraft-admin-plan.md, decisions 1–5): the head and the column titles stick to the top while the
   list scrolls; one grid for the titles and every row; a row unfolds into its editor, like an alert. */
.mc-catalog { padding-top: 0; }
.mc-cat-sticky { position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--pico-block-spacing-horizontal) * -1); padding: var(--pico-spacing) var(--pico-block-spacing-horizontal) 0.3rem;
  background: var(--pico-card-background-color); border-bottom: 1px solid var(--pico-muted-border-color); }
.mc-catalog.folded .mc-cat-sticky { border-bottom: 0; }
.mc-cat-sticky .card-head > * { margin: 0; }
.mc-cat-sum { color: var(--pico-muted-color); }
.mc-cat-body { padding-top: var(--pico-spacing); }
.mc-grid { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 6rem 11rem 3.4rem 13.5rem; gap: 0.6rem; align-items: center; }
.mc-cols { margin-top: 0.5rem; padding: 0 0.6rem 0 calc(0.4rem + 4px); }
.mc-cols button { margin: 0; padding: 0.2rem 0; width: auto; white-space: nowrap; justify-self: start; background: none; border: 0; color: var(--pico-muted-color); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mc-cols button[aria-sort='ascending'], .mc-cols button[aria-sort='descending'] { color: var(--pico-primary); }
.mc-cols .mc-arrow { font-size: 0.7rem; }
.mc-cols .mc-sort-reset { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pico-primary); }
.mc-sort-phone { display: none; align-items: end; gap: 0.5rem; margin-top: 0.5rem; }
.mc-sort-phone label { flex: 1; margin: 0; font-size: 0.85rem; }
.mc-sort-phone select { margin: 0; }
.mc-items { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0; }
.mc-item { --mc-head-bg: color-mix(in srgb, var(--pico-color) 9%, var(--pico-card-background-color)); --mc-body-bg: color-mix(in srgb, var(--pico-color) 3%, var(--pico-card-background-color));
  border: 1px solid var(--pico-muted-border-color); border-left: 4px solid transparent; border-radius: var(--pico-border-radius); }
.mc-item.open { border-left-color: var(--pico-primary); }
.mc-item.off .mc-row { opacity: 0.6; }
.mc-row { padding: 0.3rem 0.6rem 0.3rem 0.4rem; cursor: pointer; }
.mc-row:hover, .mc-item.open .mc-row { background: var(--mc-head-bg); }
.mc-c-code code { font-weight: 700; }
.mc-c-name { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.mc-c-price { font-variant-numeric: tabular-nums; }
.mc-c-target { font-size: 0.88em; }
.mc-c-meta { display: none; color: var(--pico-muted-color); font-size: 0.85em; }
.mc-c-on input { margin: 0; }
.mc-c-act { justify-self: end; }
.mc-c-act .row > * { margin: 0; }
.mc-otext small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pico-muted-color); }
.mc-off-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.5rem 0.7rem; border: 1px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.mc-off-bar > * { margin: 0 !important; }
.mc-off-bar small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pico-muted-color); }
/* The standard chest: an entry with no picture of its own (the donation page's). */
.mc-slot img.mc-default { opacity: 0.45; }
.mc-slot.big { width: 52px; height: 52px; flex: none; }
.mc-slot.big img { width: 38px; height: 38px; }
.mc-editor { padding: 0.8rem 0.9rem; border-top: 1px solid var(--pico-muted-border-color); background: var(--mc-body-bg); }
.mc-ed { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.2rem 0.8rem; align-items: start; }
.mc-ed > * { min-width: 0; margin-bottom: 0.6rem; }
.mc-ed label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.mc-ed label > small { font-weight: 400; }
.mc-ed label > :is(input, select, textarea) { margin: 0.2rem 0 0; }
.mc-ed label > input + small, .mc-ed label > select + small { display: block; margin-top: 0.2rem; }
.mc-ed .s2 { grid-column: span 2; } .mc-ed .s3 { grid-column: span 3; } .mc-ed .s4 { grid-column: span 4; }
.mc-ed .field-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.mc-pic { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem; margin: 0; }
.mc-pic .row { margin-bottom: 0.2rem; }
.mc-pic .row > * { margin: 0; }
.mc-pic small { display: block; margin: 0; color: var(--pico-muted-color); font-size: 0.8rem; }
.mc-ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.mc-ed-foot > * { margin: 0; width: auto; }
@media (max-width: 1200px) {
  .mc-grid { grid-template-columns: 3.6rem minmax(0, 1fr) 5rem 8rem 3.2rem auto; }
  .mc-ed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-ed .s3 { grid-column: span 2; }
}
/* A phone: no column titles (a sort select instead); a row is code, name and price · target, its buttons under it. */
@media (max-width: 700px) {
  .mc-cols { display: none !important; }
  .mc-sort-phone:not([style*='none']) { display: flex; }
  .mc-row.mc-grid { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: 'code name on' 'code meta on' 'act act act'; row-gap: 0.15rem; }
  .mc-c-code { grid-area: code; align-self: start; padding-top: 0.3rem; }
  .mc-c-name { grid-area: name; }
  .mc-c-name .mc-slot { display: none; }
  .mc-c-meta { display: block; grid-area: meta; }
  .mc-c-price, .mc-c-target { display: none; }
  .mc-c-on { grid-area: on; }
  .mc-c-act { grid-area: act; justify-self: start; }
  .mc-ed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-ed .s2, .mc-ed .s3, .mc-ed .s4 { grid-column: 1 / -1; }
}
/* «Порядок на сторінці»: a category the page will not show is grey and dashed (decision 7). */
.mc-ochip.hidden-on-page { color: var(--pico-muted-color); border-style: dashed; font-weight: 500; }
.mc-ochip.hidden-on-page::after { content: ' · не видно'; font-size: 0.75rem; }
.mc-order-group.hidden-on-page h4 { opacity: 0.55; }
.mc-order-group.hidden-on-page h4::after { content: ' — не видно на сторінці'; text-transform: none; letter-spacing: 0; }
/* The test dialog. */
dialog.mc-test > article { width: min(34rem, calc(100vw - 2rem)); max-width: none; }
.mc-test header { display: flex; align-items: center; gap: 0.6rem; }
.mc-test header h3 { flex: 1; margin: 0; }
.mc-test header button { margin: 0; }
.mc-test .media-file { margin-bottom: var(--pico-spacing); }
.mc-lots .row > * { margin: 0; }
.mc-lots output { min-width: 2rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-lots { margin-bottom: var(--pico-spacing); }
.mc-wire { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.85rem; padding: 0.5rem 0.7rem; border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); overflow-wrap: anywhere; }
.mc-test-foot { justify-content: flex-end; margin-top: var(--pico-spacing); }
.mc-test-foot > * { margin: 0; }
.mc-ed { --pico-form-element-spacing-vertical: 0.4rem; --pico-form-element-spacing-horizontal: 0.6rem; }
.mc-ed-foot .grow, .card-head > .grow { flex: 1; }
.card-head > h3 + .mc-cat-sum { margin: 0; } /* the count beside its title, not halfway to the buttons */

.mc-icons { margin-top: var(--pico-spacing); }
.mc-icon-row { padding-block: 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 0.75rem; }
.mc-head { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.mc-icon-editor { margin-top: var(--pico-spacing); padding: var(--pico-spacing); background: var(--pico-card-sectioning-background-color); border-radius: var(--pico-border-radius); }
.mc-pixels { display: grid; grid-template-columns: repeat(8, 1fr); width: min(256px, 100%); aspect-ratio: 1; flex: none; touch-action: none; background: repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 16px 16px; }
.mc-pixels button { padding: 0; margin: 0; border-radius: 0; border: 1px solid #0003; min-width: 0; box-shadow: none; }
.mc-pixels button:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: -2px; z-index: 1; }
.mc-icon-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.mc-icon-tools label { margin: 0; }
.mc-icon-tools input[type=color] { width: 64px; }