/* Shared layout for the administration masterlists: the Store Masterlist
   (masterlist.html) and the Event Masterlist (events.html).

   Both pages are the same kind of surface — a record table with a filter strip
   and a bulk-action strip, plus an editor — so this file is their single source
   of truth and the two cannot drift apart.

   Anatomy. The work area is the record list, edge to edge: header band, command
   row, then the list card with its filter band, bulk strip, table and pagination
   footer. The editor is a dock across the bottom of the work area rather than a
   column beside the list. That is the point of this sheet. Side by side, the
   Store Masterlist's nine columns had roughly 630px to live in and three of them
   ran off the card, so the page that exists to show records hid a third of every
   row. Docked, the list gets the whole work area and every column fits; the
   editor stays open the whole time, so Quick Add and row-click editing behave
   exactly as before.

   Themes. The workspace has three (light, grey and dark), defined as tokens by
   theme.css, which theme.js loads on every administration page. Nothing here
   hardcodes a surface colour: this sheet maps the palette tokens onto the names
   the rest of the file uses, so the two masterlists are designed in all three
   themes instead of one. The navigation rail is pinned back to the fixed dark
   chrome tokens because it is the one piece of furniture shared with every other
   admin page and must not change identity with this page's theme.

   The sheet only describes appearance. It never reads data, and the few ids it
   names (#eventForm, #foreverLink) are used for layout only, so page behaviour
   stays in each page's own script.

   Three values are load-bearing and must stay in step with
   tests/browser/masterlist-layout.spec.js, which measures the rendered editor on
   both pages: the editor dock's padding, the label column width and the column
   gap of the field grid. The Store editor's fields are wrapped in .field
   elements and the Event editor's labels and controls are siblings, so the sheet
   makes .field a display:contents box and places label and control by grid
   column; that is what puts the two editors' headings and first fields at the
   same distance from the dock edge. The spec also allows only a hair of
   difference between the two editors' heading-to-field distance, which is why
   the two subtitle paragraphs and the two field grids share their metrics and
   why anything added to one editor alone has to be small. */

:root{
  color-scheme:var(--t-scheme,dark);
  --bg:var(--t-bg,#0a0a0b);--canvas:var(--t-canvas,#0e0e10);--panel:var(--t-surface,#141416);
  --panel-2:var(--t-surface-2,#191a1d);--panel-3:var(--t-surface-3,#212227);
  --line:var(--t-line,#26262b);--line-strong:var(--t-line-strong,#3a3a42);
  --text:var(--t-text,#f4f4f6);--dim:var(--t-dim,#b4b4bd);--muted:var(--t-mute,#85858f);
  --red:var(--t-accent,#e0454f);--red-dark:var(--t-accent,#e0454f);--green:var(--t-ok,#87d9a3);--amber:var(--t-warn,#eac378);--blue:var(--t-info,#9fd2e8);
  --radius:10px;--radius-sm:7px;--pill:999px;
  --field:var(--t-field,#0c0c0e);--field-line:var(--t-field-line,#3a3a42);
  --row-alt:var(--t-row-alt,rgba(255,255,255,.016));--row-hover:var(--t-row-hover,rgba(224,69,79,.10));--row-selected:var(--t-row-selected,rgba(224,69,79,.17));
  --shadow:var(--t-shadow,0 30px 60px -44px #000);--dock-shadow:var(--t-dock-shadow,0 -34px 60px -46px #000);
  /* The rail is 238px wide in nav.js. The dock has to start where the rail ends,
     so the number appears here as well; the two must stay equal. */
  --rail:238px;--dock-h:min(38vh,330px);--label-w:190px;--field-gap:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:13.5px/1.5 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--dock-h) + 10px)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* The rail is shared furniture: theme it with the rest of the product, never with
   this page's theme. Setting the variables it reads here keeps it identical on the
   masterlists and on every page that does not load this sheet. */
#tmsl-admin-rail{--line:#2c2c31;--red:#d93a45;--muted:#85858f}

/* ---- shell and header band --------------------------------------------- */
.shell{--gutter:clamp(18px,2vw,34px);max-width:1560px;margin:0 auto;padding:0 var(--gutter) 28px}
.header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 0;padding:18px 0 14px;border-bottom:1px solid var(--line)}
.header h1{margin:0;font-size:clamp(23px,2.2vw,29px);line-height:1.14;letter-spacing:-.8px;font-weight:650}
.kicker,.header .kicker{display:flex;align-items:center;gap:9px;margin:0 0 8px;color:var(--red);font-size:10px;font-weight:750;letter-spacing:2.1px}
.kicker::before,.header .kicker::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--red);flex:none}
.sub,.header p{margin:6px 0 0;color:var(--muted);font-size:12.5px;max-width:900px}
.head-actions,.header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-bottom:2px}
.connection{align-self:center;padding:7px 12px;border:1px solid var(--t-ok-line,#2f5a3d);border-radius:var(--pill);background:var(--t-ok-bg,#13251a);color:var(--green);font-size:9.5px;font-weight:750;letter-spacing:1px;white-space:nowrap}
.reset-link{padding:0;border:0;background:none;color:var(--muted);font-size:10px;letter-spacing:.5px;cursor:pointer;text-decoration:underline}
.reset-link:hover{color:var(--red)}

/* ---- notices ------------------------------------------------------------ */
.notice{display:none;margin:16px 0 0;padding:11px 15px;border:1px solid var(--line-strong);border-left:3px solid var(--muted);border-radius:var(--radius-sm);background:var(--panel-2);font-size:12px}
.notice.show{display:block}
.notice.info{background:var(--t-info-bg);border-color:var(--t-info-line);color:var(--t-info)}
.notice.ok{background:var(--t-ok-bg);border-color:var(--t-ok-line);color:var(--t-ok)}
.notice.err,.notice.danger{background:var(--t-bad-bg);border-color:var(--t-bad-line);color:var(--t-bad)}

/* ---- buttons and form controls ----------------------------------------- */
.btn,.file-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);font-size:12px;font-weight:600;letter-spacing:.2px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover,.file-button:hover{border-color:var(--muted);background:var(--panel-3)}
.btn:active,.file-button:active{transform:translateY(1px)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--t-accent-ink,#fff);font-weight:650;box-shadow:0 14px 30px -20px var(--red)}
.btn.primary:hover{background:var(--red);border-color:var(--text);opacity:.92}
.btn.danger{border-color:var(--t-bad-line);background:transparent;color:var(--t-bad)}
.btn.danger:hover{background:var(--t-bad-bg)}
.btn.amber{border-color:var(--t-warn-line);background:transparent;color:var(--amber)}
.btn.amber:hover{background:var(--t-warn-bg)}
.btn.success{border-color:var(--t-ok-line);background:var(--t-ok-bg);color:var(--t-ok)}
.btn.sm{min-height:28px;padding:4px 10px;font-size:11px;gap:5px}
.btn:disabled,.file-button:disabled{opacity:.45;cursor:not-allowed}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=datetime-local],select,textarea{background:var(--field);border:1px solid var(--field-line);border-radius:var(--radius-sm);color:var(--text);padding:8px 11px;transition:border-color .15s,box-shadow .15s}
input:not([type]):focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=datetime-local]:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--t-accent-soft,rgba(224,69,79,.14))}
select{width:auto;min-width:104px}
input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--red)}

/* ---- command row -------------------------------------------------------- */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0 0 12px;border-bottom:1px solid var(--line)}

/* ---- the record card ---------------------------------------------------- */
/* The Store Masterlist wraps the workspace in .layout. The track is given an
   explicit zero minimum because the table's min-width would otherwise become the
   grid's floor on a phone and push the whole page sideways instead of scrolling
   inside .table-wrap, where the spec expects it. */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.layout>*{min-width:0}
.master-layout{display:block;margin-top:14px}
.master-layout>*{min-width:0}
.wide{margin-top:18px}
.card,.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
/* Every record card carries the accent cap the dashboard puts on its first
   statistic. The editor dock is a different surface and stays uncapped. */
.card:not(.edit-panel)::before,.master-layout>article.panel:not(.edit-panel)::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--red),transparent 62%)}
.card-header,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 18px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.card-header h2,.section-head h2{margin:0;font-size:13px;line-height:1.25;letter-spacing:1.4px;font-weight:750;text-transform:uppercase}
.card-header p,.section-head p{margin:5px 0 0;color:var(--muted);font-size:11.5px}
.metric,.stats{display:flex;flex-direction:column;gap:3px;padding:8px 12px;border:1px solid var(--line-strong);border-left:2px solid var(--red);border-radius:var(--radius-sm);background:var(--panel);text-align:right;white-space:nowrap;color:var(--text);font-size:13px;font-weight:650}
.metric span{margin:0;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:1.4px}
.metric strong{color:var(--text);font-size:13px;font-weight:650}
.section-head>b{display:inline-block;min-width:28px;padding:3px 9px;border:1px solid var(--t-accent-line);border-radius:var(--pill);background:var(--t-accent-soft);color:var(--red);font-size:11px;font-weight:700;text-align:center}
.item{padding:14px 18px;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item>b,.item>strong{color:var(--text);font-size:13px;font-weight:650;display:block}
.meta{margin-top:4px;color:var(--muted);font-size:11px}
.empty{padding:34px 18px;color:var(--muted);font-size:12px;text-align:center}
span.empty{display:block}

/* The bulk strip is the same control in the same place on both pages: the Store
   Masterlist reveals it when rows are selected, the Event Masterlist keeps it
   visible so the count and the buttons never move. */
.bulk-bar{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;background:var(--t-accent-soft);border-bottom:1px solid var(--t-accent-line);box-shadow:inset 3px 0 0 var(--red)}
.bulk-bar.show{display:flex}
.bulk-count{color:var(--red);font-size:10px;font-weight:750;letter-spacing:1.3px;text-transform:uppercase}

/* ---- filter band -------------------------------------------------------- */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.filters>.btn,.filters>.page-size{margin-left:auto}
.filters input:not([type=checkbox]){flex:1 1 220px;min-width:0}
.filters label,.page-size{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:9.5px;font-weight:750;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap}
.page-size select{min-width:74px;padding:7px 9px}
.chip,.filter{min-height:30px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--panel);color:var(--dim);font-size:10px;font-weight:750;letter-spacing:.9px;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}
.chip:hover,.filter:hover{border-color:var(--muted);color:var(--text)}
.chip.active,.filter.selected{background:var(--red);border-color:var(--red);color:var(--t-accent-ink,#fff)}

/* ---- record tables ------------------------------------------------------ */
.table-wrap{overflow:auto;border-top:1px solid var(--line)}
/* Fixed layout so the table can never run past its card: the columns below give
   each cell a share of whatever width is available and long values truncate. The
   min-width keeps the phone layout scrolling inside this wrapper, which is what
   tests/browser/masterlist-layout.spec.js checks at 480px. */
table{width:100%;min-width:640px;table-layout:fixed;border-collapse:collapse}
th,td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th{position:sticky;top:0;z-index:1;background:var(--panel-2);color:var(--muted);font-size:9.5px;font-weight:750;letter-spacing:1.3px;border-bottom:1px solid var(--line-strong)}
td{color:var(--text);font-size:12.5px}
th:first-child,td:first-child{padding-left:18px}
th:last-child,td:last-child{padding-right:18px}
tbody tr{background:var(--panel)}
tbody tr:nth-child(even){background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
.data-row{cursor:pointer}
/* A hovered row and a row that is actually open in the editor must not look
   alike: the selection is the stronger of the two, so it survives hovering. */
tbody tr:hover{background:var(--row-hover)}
tbody tr.selected{background:var(--row-selected)}
tbody tr:hover td:first-child,tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tbody td strong,tbody td b{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:12.5px;font-weight:650}
tbody td strong+small{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:2px;color:var(--muted);font-size:10px;letter-spacing:.5px;text-transform:uppercase}
tbody td .meta{display:block;overflow:hidden;text-overflow:ellipsis}
.check{width:38px}
td .link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:10.5px;vertical-align:bottom}
.link,td a{color:var(--red);text-decoration:none}
.link:hover,td a:hover{text-decoration:underline}
/* Column shares, per page. The two masterlists hold different fields; the Store
   Masterlist's nine columns include the two long text fields, which is exactly
   the pair that used to be pushed off the card. */
.card:not(.edit-panel) th:nth-child(1){width:4%}
.card:not(.edit-panel) th:nth-child(2){width:19%}
.card:not(.edit-panel) th:nth-child(3){width:12%}
.card:not(.edit-panel) th:nth-child(4){width:16%}
.card:not(.edit-panel) th:nth-child(5){width:9%}
.card:not(.edit-panel) th:nth-child(6){width:11%}
.card:not(.edit-panel) th:nth-child(7){width:11%}
.card:not(.edit-panel) th:nth-child(8){width:8%}
.card:not(.edit-panel) th:nth-child(9){width:10%}
article.panel:not(.edit-panel) th:nth-child(1){width:6%}
article.panel:not(.edit-panel) th:nth-child(2){width:26%}
article.panel:not(.edit-panel) th:nth-child(3){width:26%}
article.panel:not(.edit-panel) th:nth-child(4){width:12%}
article.panel:not(.edit-panel) th:nth-child(5){width:16%}
article.panel:not(.edit-panel) th:nth-child(6){width:14%}
/* The name cell is the one that carries two lines: the record and its
   classification. Everything else stays on one line and truncates. */
.card:not(.edit-panel) td:nth-child(2),article.panel:not(.edit-panel) td:nth-child(2){white-space:normal}
.stat-col{text-align:center}
/* The page script paints the scanner and overdue-date values with inline styles.
   This one is too pale to read on the light theme's white row. */
html[data-theme=light] #storesTbody span[style*="ff8790"],html[data-theme=light] #eventRows span[style*="ff8790"]{color:var(--t-bad)!important}

/* Status chips: one vocabulary for the legacy badge classes and the pill classes
   the Event Masterlist renders, each carrying its own colour dot. */
.badge,.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid transparent;border-radius:var(--pill);line-height:1.45;font-size:9.5px;font-weight:750;letter-spacing:.9px;text-transform:uppercase}
.badge::before,.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge.active,.badge.active-b,.pill.active{background:var(--t-ok-bg);border-color:var(--t-ok-line);color:var(--t-ok)}
.badge.inactive,.badge.inactive-b,.pill.inactive{background:var(--panel-3);border-color:var(--line-strong);color:var(--dim)}
.badge.unverified,.badge.unverified-b,.badge.pending,.badge.due,.pill.pending{background:var(--t-warn-bg);border-color:var(--t-warn-line);color:var(--t-warn)}
.badge.rejected,.badge.expired,.pill.rejected{background:var(--t-bad-bg);border-color:var(--t-bad-line);color:var(--t-bad)}

/* ---- pagination --------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2);border-radius:0 0 var(--radius) var(--radius);color:var(--muted);font-size:11.5px}
.pagination-controls{display:flex;align-items:center;gap:6px;margin-left:auto}
.pagination-controls>span{padding:5px 11px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--panel);color:var(--dim);font-size:10.5px;font-weight:650;white-space:nowrap}

/* ---- editor dock -------------------------------------------------------- */
/* Fixed across the bottom of the work area, under the rail's right edge. Because
   it is out of flow the list above it keeps the full width, which is the whole
   reason for the dock: see the column shares above. */
.edit-panel{position:fixed;left:var(--rail);right:0;bottom:0;z-index:30;max-height:var(--dock-h);overflow:auto;padding:16px var(--gutter) 16px;border:0;border-top:1px solid var(--line-strong);border-radius:0;background:var(--panel-2);box-shadow:var(--dock-shadow)}
.edit-panel .card-header{display:block;padding:0;background:none;border:0}
.edit-panel h2{margin:0;font-size:13px;line-height:1.25;letter-spacing:1.4px;font-weight:750;text-transform:uppercase}
/* Both editors carry one line under the heading. Sharing its metrics, together
   with the field grid's, is what keeps the spec's heading-to-field tolerance. */
.edit-panel .card-header p,.edit-panel p.sub{margin:5px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}
.field label,#eventForm>label{display:block;margin:0;color:var(--muted);font-size:9.5px;font-weight:750;letter-spacing:1.3px;line-height:1.35;text-transform:uppercase}
.field label span{display:block;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none;opacity:.85}
/* Labels and controls share one four-column grid — two label/control pairs per
   row — so both editors line up and the dock stays shallow enough that the list
   above it still shows its rows. The Store fields are wrappers, the Event fields
   are loose siblings, and display:contents makes the wrapper disappear from the
   grid; that is why the pairs are placed by field parity on one page and by
   label parity on the other. */
.form,#eventForm{display:grid;grid-template-columns:var(--label-w) minmax(0,1fr) var(--label-w) minmax(0,1fr);column-gap:var(--field-gap);margin-top:12px}
.field{display:contents}
.form .field>label,#eventForm>label{align-self:center;text-align:right;margin:0}
.form>.field:nth-child(n)>label,#eventForm>label:nth-of-type(n){grid-column:1}
.form>.field:nth-child(n)>:not(label),#eventForm>label:nth-of-type(n)+input,#eventForm>label:nth-of-type(n)+select{grid-column:2}
.form>.field:nth-child(even)>label,#eventForm>label:nth-of-type(even){grid-column:3}
.form>.field:nth-child(even)>:not(label),#eventForm>label:nth-of-type(even)+input,#eventForm>label:nth-of-type(even)+select{grid-column:4}
.form>.field:nth-child(odd)>label,#eventForm>label:nth-of-type(odd){grid-column:1}
.form>.field:nth-child(odd)>:not(label),#eventForm>label:nth-of-type(odd)+input,#eventForm>label:nth-of-type(odd)+select{grid-column:2}
#eventForm input:not([type=hidden]),#eventForm select,#eventForm textarea,.field input,.field select,.field textarea{width:100%;min-width:0}
.form>.field>:not(label),#eventForm>label+input,#eventForm>label+select,#eventForm>label+textarea{margin:7px 0}
.field textarea{min-height:40px;resize:vertical}
.form .checks,.checks,.selection,.actions,.edit-actions,#foreverLink,.edit-panel hr,.edit-panel>.meta,.edit-panel>p.meta{grid-column:1/-1}
.actions,.edit-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.checks label{display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);font-size:12px;cursor:pointer}
.checks label:has(input:checked){border-color:var(--t-accent-line);background:var(--t-accent-soft)}
.checks input{width:15px;height:15px;margin:0;accent-color:var(--red)}
.selection{margin:10px 0 0;color:var(--muted);font-size:11px}
.edit-panel hr{border:0;border-top:1px solid var(--line);margin:14px 0;width:100%}
.edit-panel #foreverLink{margin-top:12px;overflow-wrap:anywhere}
.edit-panel>p.meta,.edit-panel>.meta{margin-top:10px}

/* ---- import panel ------------------------------------------------------- */
.import-panel{display:none;margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--red);border-radius:var(--radius);background:var(--panel-2);font-size:12px}
.import-panel.open{display:block}
.import-panel p{margin:0 0 10px;color:var(--muted);font-size:12px}
.import-panel code{color:var(--text);font-family:var(--mono);font-size:11px}
.file-button{border-color:var(--line-strong);background:var(--panel-3);color:var(--text)}
.file-name{margin-left:10px;color:var(--muted);font-size:12px}

/* ---- signs in front of the Store Masterlist ---------------------------- */
.auth{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:24px}
.auth-card{width:100%;max-width:400px;padding:32px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--red);border-radius:var(--radius);box-shadow:var(--shadow)}
.auth-card h2{margin:0 0 6px;font-size:15px;letter-spacing:.3px}
.auth-card p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.5}
.auth-field{margin-bottom:13px}
.auth-field label{display:block;margin-bottom:6px;color:var(--muted);font-size:9.5px;font-weight:750;letter-spacing:1.2px;text-transform:uppercase}
.auth-field input{width:100%}
.auth-btn{width:100%;margin-top:6px;padding:12px;border:0;border-radius:var(--radius-sm);background:var(--red);color:var(--t-accent-ink,#fff);font-size:13px;font-weight:650;letter-spacing:.4px}
.auth-btn:disabled{opacity:.5;cursor:not-allowed}
.auth-err{display:none;margin-top:12px;padding:10px 12px;border:1px solid var(--t-bad-line);border-radius:var(--radius-sm);background:var(--t-bad-bg);color:var(--t-bad);font-size:12px}
.auth-err.show{display:block}
.auth-hint{margin-top:14px;text-align:center}
.auth-hint button{padding:0;border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline}
.qr-wrap{margin:14px 0;text-align:center}
.qr-wrap img{max-width:180px;border:3px solid var(--line);border-radius:var(--radius-sm)}
.back-link{display:inline-block;margin-top:14px;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline}
.back-link:hover{color:var(--red)}

/* ---- narrow screens ----------------------------------------------------- */
@media(max-width:1000px){
  .shell{--gutter:20px}
  .header{flex-direction:column;align-items:flex-start;gap:14px}
  .head-actions,.header-right{justify-content:flex-start}
  .metric,.stats{text-align:left}
}
/* Below this width there is no room for a dock: the editor returns to normal
   flow under the list, which is also where the single-column layout puts it. */
@media(max-width:900px){
  body{padding-bottom:0}
  .master-layout>.edit-panel{position:static;left:auto;right:auto;bottom:auto;max-height:none;overflow:visible;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .edit-panel .card-header,.edit-panel{padding:16px}
  .toolbar .btn,.toolbar .file-button{flex:1 1 130px}
}
@media(max-width:700px){
  .shell{--gutter:14px}
  .form,#eventForm{grid-template-columns:minmax(0,1fr);column-gap:0}
  .form>.field:nth-child(n)>label,#eventForm>label:nth-of-type(n){grid-column:1;text-align:left;margin-top:12px}
  .form>.field:nth-child(n)>:not(label),#eventForm>label:nth-of-type(n)+input,#eventForm>label:nth-of-type(n)+select,#eventForm>label:nth-of-type(n)+textarea{grid-column:1}
  .card-header,.section-head,.filters,.bulk-bar,.pagination,.item{padding-left:14px;padding-right:14px}
  th:first-child,td:first-child{padding-left:14px}
  th:last-child,td:last-child{padding-right:14px}
  .header h1{font-size:22px;letter-spacing:-.5px}
  .filters{gap:8px}
  .filters label,.page-size{flex:1 1 100%}
  .filters input:not([type=checkbox]),.filters select{flex:1 1 100%;min-width:0}
  .filters>.btn{margin-left:0}
  .auth{padding:16px}
  .auth-card{padding:24px}
}