/* Local Bite admin — the site's black, lime and glass (web/static/app.css) turned into a dense panel of
   cards, tables, forms and charts (Leo, 2026-10-11: «igual, con el mismo estilo de toda la app» and a
   light mode «bien contrastado»). Letters and colours come from theme.css, loaded first (a link to
   web/static/theme.css): no loose colours below this block, see the note at the top of that file.
   Light only with the switch in the header (cookie lb_theme), never from the device's setting.
   Desktop keeps the panel's layout; the phone gets a collapsed menu, cards instead of wide tables
   and forms one field per row (Diana, 2026-09-21). */

/* ── Tokens of the panel only. In light, colour lives in solid fills and lines are ink (Leo's rule),
   so the first series follows --accent: lime on black, ink on paper. ── */
:root{
  --series-1:var(--accent);
  --series-2:#9085E9;               /* violet: 5.4:1 on the dark card, apart from lime for every eye */
  --field:var(--surface2);--field-line:var(--fg-16);
  --lift:inset 0 1px 0 var(--fg-05);  /* the glass edge of the site's cards */
  --lime-edge:0 0 0 0 transparent;  /* a lime fill on paper needs an ink edge; none on black */
  --ease:cubic-bezier(.22,1,.36,1);
  --page:1320px;--gutter:32px;
}
html[data-theme="light"]{
  --series-2:#4A3AA7;               /* 8.7:1 on white */
  --field:var(--surface);--field-line:var(--fg-35);  /* white fields, edges at 3:1 on paper */
  --lift:0 1px 2px rgba(11,12,14,.05),0 10px 28px -18px rgba(11,12,14,.22);
  --lime-edge:inset 0 0 0 1px rgba(11,12,14,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-feature-settings:'ss01';
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* The site's lime glow, still and faint, behind the header; gone in light (--glow-k 0) */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-wrap:break-word;
  background:radial-gradient(1000px 520px at 100% -180px,rgba(var(--lime-rgb),calc(.09 * var(--glow-k))),transparent 70%),var(--bg)}
::selection{background:var(--selection)}
a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.38);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s}
p{margin:0 0 14px;line-height:1.6;color:var(--text2)}
strong{font-weight:600;color:var(--text)}
h1{margin:4px 0 18px;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.12}
h2{margin:40px 0 14px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
form{margin:0}
ol{margin:6px 0 14px;padding-left:22px;color:var(--text2);line-height:1.6}
ol li{margin:6px 0;padding-left:4px}
ol li::marker{color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums}
code{padding:1px 7px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;overflow-wrap:anywhere}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(hover:hover){a:hover{text-decoration-color:currentColor}}

/* ── Header: the wordmark and ADMIN, the switches, and the sections in a pill like the site's dock ── */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "nav nav";align-items:center;gap:18px 24px;
  padding:18px max(var(--gutter),calc((100% - var(--page)) / 2 + var(--gutter))) 18px;border-bottom:1px solid var(--line)}
.top:not(.with-menu){grid-template-areas:"brand tools"}
.brand{grid-area:brand;justify-self:start;display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.wordmark{display:block;width:auto;height:37px}
.wordmark.ink,html[data-theme="light"] .wordmark{display:none}
html[data-theme="light"] .wordmark.ink{display:block}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);
  color:var(--text2);font-size:11px;font-weight:700;letter-spacing:.16em}
.header-tools{display:contents}
nav{grid-area:nav;justify-self:start;max-width:100%;display:flex;gap:4px;padding:4px;overflow-x:auto;scrollbar-width:none;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift)}
nav::-webkit-scrollbar{display:none}
nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;white-space:nowrap;
  color:var(--text2);font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
@media(hover:hover){nav a:hover{color:var(--text);background:var(--surface2)}}
/* The section on screen is the chosen chip of the site: solid lime, ink letters */
nav a[aria-current="page"]{background:var(--lime);color:var(--on-lime);box-shadow:var(--lime-edge)}
.switches{grid-area:tools;justify-self:end;display:flex;align-items:center;gap:8px}
.switches button{min-height:38px;padding:0 15px;gap:7px;background:transparent;color:var(--text);border-color:var(--line2);box-shadow:none;font-size:13.5px}
.switches svg.i{width:16px;height:16px;color:var(--accent)}
.sign-out svg.i{color:var(--text2)}
@media(hover:hover){.switches button:hover{background:var(--surface2);filter:none}}
/* Two classes: the checkbox rule further down must not bring the menu's checkbox back on a wide screen */
.top .menu-toggle,.top .burger{display:none}

main{flex:1;width:100%;max-width:var(--page);margin:0 auto;padding:30px var(--gutter) 56px}
/* Running text keeps a readable line; the callouts and tables use the whole width */
main>p:not([class]),.panel>p:not([class]){max-width:880px}
h1,h2,summary{text-wrap:balance}
p{text-wrap:pretty}
footer{padding:22px var(--gutter) 30px;border-top:1px solid var(--line);text-align:center;color:var(--text2);font-size:12px}

/* ── Controls: pill buttons, lime for the action of each form ── */
button,.button-link,a.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
  border-radius:999px;border:1px solid transparent;font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease),filter .2s,background .2s,border-color .2s,box-shadow .2s}
button,.button-link{background:var(--lime);color:var(--on-lime);box-shadow:var(--lime-edge),0 8px 26px -12px rgba(var(--lime-rgb),calc(.5 * var(--glow-k)))}
button:active,.button-link:active,a.secondary:active{transform:scale(.98)}
.secondary,a.secondary{background:var(--surface2);color:var(--text);border-color:var(--line2);box-shadow:none}
/* Confirm and cancel sit next to each other: same height on every screen. */
.actions button,.actions .button-link,.actions a.secondary{min-height:44px}
button[disabled]{opacity:.55;cursor:progress;transform:none}
.danger{background:var(--error-bg);color:var(--danger);border-color:var(--error-line);box-shadow:none}
@media(hover:hover){
  button:not([disabled]):hover,.button-link:hover{filter:brightness(1.06)}
  .secondary:hover,a.secondary:hover{background:var(--surface3);filter:none}
  .danger:not([disabled]):hover{border-color:var(--danger);filter:none}
}

input,select,textarea{max-width:100%;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--field-line);background-color:var(--field);
  color:var(--text);font:inherit;font-size:14.5px;outline:none;transition:border-color .2s,box-shadow .2s}
/* A field shows focus with its own edge and ring, not the outline of the buttons and links */
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input::placeholder,textarea::placeholder{color:var(--text3);opacity:1}
/* The browser's autofill keeps the field's own colours (no white box on black) */
input:-webkit-autofill,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--field) inset;caret-color:var(--text)}
input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--field) inset,0 0 0 3px rgba(var(--accent-rgb),.18)}
input[type=number],input[type=date]{font-variant-numeric:tabular-nums}
input[type=date]{padding-right:14px}
::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75}
/* The arrow is drawn with two gradients: the CSP allows no data: images */
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);
  background-position:right 22px center,right 17px center;background-size:5px 5px;background-repeat:no-repeat}
option{background:var(--surface);color:var(--text)}
textarea{display:block;width:100%;min-height:132px;padding:12px 16px;border-radius:18px;resize:vertical;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:22px;min-height:0;height:22px;
  margin:0;padding:0;border-radius:7px;border:1.5px solid var(--fg-35);background:var(--field);cursor:pointer}
input[type=checkbox]::after{content:'';width:10px;height:5px;border:solid var(--on-lime);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .2s var(--ease)}
input[type=checkbox]:checked{background:var(--lime);border-color:transparent;box-shadow:var(--lime-edge)}
input[type=checkbox]:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
input[type=checkbox]:focus{box-shadow:var(--lime-edge),0 0 0 3px rgba(var(--accent-rgb),.18)}
label{color:var(--text2);font-size:13px;font-weight:500}
label input{display:block;width:100%;margin:8px 0 18px}
.filters,.actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
/* One field per row with its name above it; on a wide screen they sit side by side. */
.stack{align-items:flex-end}
.stack label{display:flex;flex-direction:column;gap:7px;flex:1 1 220px;max-width:460px;margin:0}
.stack label input,.stack label select,.stack label textarea{display:block;width:100%;margin:0}
.stack label:has(>input[type=checkbox]){flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;min-height:44px;color:var(--text);font-size:14px}
.stack label input[type=checkbox]{display:inline-grid;width:22px;min-height:0}
/* The Apple key is a block of text: it takes a row of its own */
.stack label:has(>textarea){flex-basis:100%;max-width:none}
/* A form of fields is a card of its own; in a panel or an open section it is already in one */
.filters.stack{padding:18px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift)}
details .filters.stack{padding:0;background:none;border:0;box-shadow:none}
.stack details{flex:1 1 100%}
.stack details label{margin:0 0 14px}

/* ── Blocks ── */
/* Six figures on the overview, four on a user's page: each row is filled either way */
.cards{--cols:6;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;margin:22px 0 28px}
.cards:not(:has(>:nth-child(5))){--cols:4}
article,.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift)}
article{border-radius:22px;padding:18px 20px}
.cards>article{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:120px}
.cards>article>span{color:var(--text2);font-size:13px;font-weight:500;line-height:1.35}
.cards>article>strong{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.panel{border-radius:24px;padding:24px;margin:20px 0}
/* A confirmation or a progress report on its own: a card the width of what it says */
main>.panel{max-width:760px}
.panel h2{margin:0 0 16px}
.panel>p:last-child{margin-bottom:0}
.panel>form:not(:last-child){margin-bottom:18px}
/* A form alone in a card: the field over its button */
form.stack:not(.filters){display:flex;flex-direction:column;align-items:flex-start;gap:14px}
form.stack:not(.filters) label{flex:none;width:100%}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:20px 0}
.panel-grid .panel{margin:0}
/* The name of each fact takes what it needs, up to 60 %: the value always keeps room beside it */
.facts{margin:0 0 18px;display:grid;grid-template-columns:fit-content(60%) minmax(0,1fr);gap:9px 20px;font-size:14px}
.facts>div{display:contents}
.facts dt{color:var(--text2)}
.facts dd{margin:0;font-weight:600;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.facts .break{max-width:none}
.notice{margin:0 0 16px;padding:14px 18px 14px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line2);
  box-shadow:inset 3px 0 0 var(--accent);color:var(--text);line-height:1.55}
.flash{font-weight:500}
.warning{margin:0 0 16px;padding:14px 18px;border-radius:16px;background:var(--error-bg);border:1px solid var(--error-line);color:var(--danger);line-height:1.55}
.hint{color:var(--text2);font-size:13px;line-height:1.5}
/* The sign-in card sits in the middle of the screen, with the site's lime haze under it on black */
main:has(>.login){display:flex;flex-direction:column;justify-content:center}
main:has(>.login)>.flash{width:100%;max-width:440px;margin-inline:auto}
.login{width:100%;max-width:440px;margin:24px auto 48px;padding:34px 32px 32px;border-radius:28px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--lift),0 30px 70px -44px rgba(var(--lime-rgb),calc(.3 * var(--glow-k)))}
.login h1{margin:0 0 8px;font-size:28px}
.login p{margin:0 0 24px}
.login label input{min-height:52px;margin:8px 0 18px;font-size:16px}
.login button{width:100%;min-height:52px;font-size:16px}

/* Sections that open: a chevron that turns; at the top level, a card; in a table cell, compact */
details{margin:10px 0}
td details{margin:0}
td summary{min-height:0}
td details[open]{min-width:240px;padding-bottom:4px}
td details p{margin:10px 0;font-size:13px}
summary{display:flex;align-items:center;gap:10px;min-height:40px;border-radius:12px;cursor:pointer;list-style:none;color:var(--text);font-weight:600;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary::before{content:'';flex:none;width:7px;height:7px;margin:0 3px 0 2px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .2s var(--ease)}
details[open]>summary::before{transform:rotate(45deg) translate(-2px,-2px)}
main>details{margin:14px 0;padding:4px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift)}
main>details>summary{min-height:52px}
main>details[open]{padding-bottom:16px}
main>details[open]>summary{margin-bottom:6px}
main>details>.filters.stack{margin-bottom:4px}

/* ── Tables and their phone-sized replacement ── */
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift)}
table{width:100%;border-collapse:separate;border-spacing:0;text-align:left;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child>th,tr:last-child>td{border-bottom:0}
th{background:var(--surface2);color:var(--text2);font-size:12.5px;font-weight:600}
td{color:var(--text)}
/* The date that opens most rows stays on one line */
td:first-child:not(.break){white-space:nowrap}
/* A row that starts with its name (the referral totals) */
tr:has(>td)>th{background:none;font-size:13.5px;font-weight:500}
@media(hover:hover){tr:has(>td):hover>td,tr:has(>td):hover>th{background:var(--fg-05)}}
.break{overflow-wrap:anywhere;max-width:240px}
.pagination{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;align-items:center}
.pagination a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);
  background:var(--surface);color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
@media(hover:hover){.pagination a:hover{background:var(--surface2)}}
.pagination span{color:var(--text2);font-size:14px;font-variant-numeric:tabular-nums}
.record-cards{display:none;list-style:none;margin:18px 0;padding:0;gap:12px}
.record-cards li{padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift);color:var(--text2)}
.record-title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--text)}
.record-sub{margin:0 0 12px;font-size:13px;color:var(--text2)}
/* A card is a receipt: name on the left, value on the right, and its one action without the lime
   (fifty lime buttons down a list would drown the one that matters on each page) */
.record-cards .facts{gap:8px 14px}
.record-cards .facts dd{margin:0;text-align:right}
.record-cards .button-link{width:100%;background:var(--surface2);color:var(--text);border-color:var(--line2);box-shadow:none}
.who{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.who h1{margin:0}
.who-photo{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)}
.link-row{margin-top:16px}
.link-row h2{flex:1 1 100%;margin:0 0 2px;font-size:18px}
.link-row .hint{flex:1 1 100%;margin:0}

/* ── Charts: lines in the series colours, labels in text ink. The text size is in the drawing's units,
   so it steps with the width of the card to stay about 12 px on screen. ── */
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin:8px 0 12px}
.chart-grid>article{min-width:0;padding:20px 22px 14px;container-type:inline-size}
.chart-grid h2{margin:0 0 10px;font-size:16px}
.chart-grid article p{margin:0 0 14px;color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
svg.chart{display:block;width:100%;height:auto;font-size:12px;overflow:visible}
.chart .grid{fill:none;stroke:var(--line2);stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.chart .axis{fill:none;stroke:var(--fg-30);vector-effect:non-scaling-stroke}
.chart .tick{fill:var(--text2);font-variant-numeric:tabular-nums}
.chart .tick.y{text-anchor:end;dominant-baseline:central}
.chart .tick.end{text-anchor:end}
.chart .line{fill:none;stroke:currentColor;stroke-width:2.25px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* The brand line glows like the site's lime does on black; on paper the glow is off */
.chart .line.series-one{filter:drop-shadow(0 0 5px rgba(var(--lime-rgb),calc(.4 * var(--glow-k))))}
.series-one{color:var(--series-1)}
.series-two{color:var(--series-2)}
.chart-grid article p.legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 4px;color:var(--text2);font-size:13px}
.key{display:inline-flex;align-items:center;gap:8px}
.key i{flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.chart-grid details{margin:6px 0 0}
.chart-data{max-height:260px;margin:8px 0 6px;border-radius:14px;box-shadow:none}
.chart-data th{position:sticky;top:0;z-index:1}
.chart-data th,.chart-data td{padding:9px 14px}
@container (max-width:899px){svg.chart{font-size:9.5px}}
@container (max-width:719px){svg.chart{font-size:11.5px}}
@container (max-width:579px){svg.chart{font-size:13.5px}}
@container (max-width:459px){svg.chart{font-size:17px}}
@container (max-width:359px){svg.chart{font-size:21px}}
/* Shares of the total: a bar in the first series' colour */
meter{display:block;width:100%;height:8px;margin:8px 0 0;border:0;border-radius:999px;background:var(--fg-08);overflow:hidden;
  appearance:none;-webkit-appearance:none;-moz-appearance:none}
meter::-webkit-meter-bar{height:8px;border:0;border-radius:999px;background:var(--fg-08)}
meter::-webkit-meter-optimum-value,meter::-webkit-meter-suboptimum-value,meter::-webkit-meter-even-less-good-value{border-radius:999px;background:var(--series-1)}
meter::-moz-meter-bar{border-radius:999px;background:var(--series-1)}

/* ── Tablet: the menu collapses into the burger and the charts go one per row ── */
@media(max-width:980px){
  .top{grid-template-areas:"brand burger" "menu menu";gap:0 12px;padding-top:12px;padding-bottom:12px;position:relative}
  .top:not(.with-menu){grid-template-areas:"brand tools"}
  .top .burger{grid-area:burger;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
    border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;transition:background .2s,color .2s}
  .burger svg.i{width:20px;height:20px}
  .burger .shut{display:none}
  .top .menu-toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .menu-toggle:checked+.burger{background:var(--lime);color:var(--on-lime);border-color:transparent;box-shadow:var(--lime-edge)}
  .menu-toggle:checked+.burger .open{display:none}
  .menu-toggle:checked+.burger .shut{display:block}
  .menu-toggle:focus-visible+.burger{outline:2px solid var(--accent);outline-offset:2px}
  .with-menu .header-tools{grid-area:menu;display:none;flex-direction:column;gap:12px;padding:16px 0 8px}
  .menu-toggle:checked~.header-tools{display:flex}
  .with-menu nav{flex-direction:column;align-items:stretch;justify-self:stretch;width:100%;border-radius:24px;padding:6px}
  .with-menu nav a{min-height:48px;padding:0 18px;font-size:15px}
  .with-menu .switches{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-self:stretch}
  .with-menu .switches button{width:100%;min-height:46px}
  .with-menu .sign-out{grid-column:1/-1}
}
@media(max-width:900px){
  .cards:has(>:nth-child(5)){--cols:3}
  .chart-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Phone: cards instead of wide tables, one field per row, finger-sized buttons ── */
@media(max-width:760px){
  :root{--gutter:16px}
  main{padding:22px var(--gutter) 40px}
  h1{font-size:26px}
  h2{margin-top:30px;font-size:19px}
  .cards,.cards:has(>:nth-child(5)),.cards:not(:has(>:nth-child(5))){--cols:2;gap:10px}
  .cards>article{min-height:104px;padding:14px 16px;border-radius:20px}
  .cards>article>strong{font-size:26px}
  .panel{padding:18px;border-radius:22px}
  .filters,.actions{flex-direction:column;align-items:stretch;gap:12px}
  .filters button,.actions button,.actions .button-link,.actions a.secondary,.panel form button{width:100%;min-height:48px;font-size:16px}
  .filters input:not([type=checkbox]),.filters select,.stack label input:not([type=checkbox]),.stack label select{min-height:48px;font-size:16px}
  .stack label{flex:none;max-width:none}
  .filters.stack{padding:16px;border-radius:20px}
  .only-wide{display:none}
  .record-cards{display:grid}
  .pagination{justify-content:space-between}
  .break{max-width:100%}
  th,td{padding:11px 12px}
  /* A long name or email keeps whole words: the table slides sideways in its card instead */
  td.break{min-width:180px}
  .login{margin-top:24px;padding:26px 20px 22px;border-radius:24px}
  .who-photo{width:56px;height:56px}
}
/* Without the menu (the sign-in page) the header holds the wordmark and both switches: on a phone the
   ADMIN label gives way (the card says it), and on the narrowest the switches keep only their icons. */
@media(max-width:480px){
  .top:not(.with-menu){gap:0 10px}
  .top:not(.with-menu) .badge{display:none}
  .top:not(.with-menu) .switches{gap:6px}
  .top:not(.with-menu) .switches button{padding:0 12px;gap:6px}
}
@media(max-width:360px){
  .top:not(.with-menu) .switches button{width:40px;min-height:40px;padding:0}
  .top:not(.with-menu) .switches svg.i{width:18px;height:18px}
  .top:not(.with-menu) .switches .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:340px){.cards,.cards:has(>:nth-child(5)),.cards:not(:has(>:nth-child(5))){--cols:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}