/* =====================================================================
   Administrator panel (views/admin.js). Every rule is scoped under .adm
   (the wrapper admin.page() puts around each page body) or an adm-*
   class, so nothing here leaks into the nutritionist app.
   Tokens only — no hardcoded colours.
   ===================================================================== */

/* ---------------- page frame ---------------- */
.adm-head-text{min-width:0}
.adm-col{min-width:0}
/* the columns stack below 1100px: cards already carry their own bottom margin, so no extra row gap */
.adm .split{row-gap:0}
.adm-label{margin:0 0 10px;font-size:var(--fs-sm);font-weight:500;color:var(--text-3);letter-spacing:0}
.adm-dim{color:var(--text-3)}
.adm-narrow{max-width:880px}
.adm-sessions .sec{margin-bottom:10px}
.adm-sessions .adm-note{margin:0 0 14px}
/* one footer pattern everywhere: actions right-aligned, [Cancel (quiet)] [Primary] */
.adm-form-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 20px}
.adm .form-actions.adm-end{justify-content:flex-end}
/* long forms end with the shared .sticky-actions.floating; the cards above it already end with a 20px margin */
.adm .sticky-actions{margin-top:0}
/* hint and note links: underlined, not told apart by colour alone */
.adm .hint a,.adm .adm-note a,.adm .adm-source a{text-decoration:underline;text-underline-offset:2px}
/* file inputs line up with the 36px text fields next to them */
.adm input[type=file]{height:36px;padding-block:3px}
.adm input[type=file]::file-selector-button{height:28px}
.adm-label-meta{margin-left:6px;font-weight:400;color:var(--text-4)}
.adm-note{margin:-6px 0 14px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-3)}
.adm-note-flat{margin-top:0}
.adm-meta-line{display:flex;align-items:flex-start;gap:6px;color:var(--info-tx)}
.adm-meta-line .i{margin-top:2px;flex-shrink:0}
/* cards whose last block is a grid of labelled fields: the labels' own bottom margin already adds the space */
.adm .card:has(>.grid-2:last-child,>.grid-3:last-child,>.grid-4:last-child){padding-bottom:4px}
.adm-card-title{margin:0 0 14px}
.adm-card-title .i{color:var(--text-3)}
.adm-sub-title{margin:4px 0 12px;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.adm-spacer{min-height:1px}
.adm-check-line{margin:0 0 16px}
.adm-select-sm{max-width:300px}
.adm-open-unit{margin-top:16px} /* food form: "Opens in the diet chart with" under the unit sizes */

/* ---------------- toolbar inside table cards ---------------- */
.adm .toolbar .chips{margin:0}
.adm .toolbar .search-form{flex:0 1 320px}
.adm .toolbar .meta strong{font-weight:600}

/* ---------------- tables ---------------- */
/* make the scroller the containing block of absolutely positioned children (e.g. .sr-only header labels),
   otherwise they escape the horizontal scroll and widen the page on phones */
.adm .table-scroll{position:relative}
.adm td{padding-top:9px;padding-bottom:9px}
.adm td small{margin-top:2px}
.adm .table-scroll>table.adm-fit{min-width:560px}
.adm td.actions .row-actions .btn{margin:0}
.adm .row-actions form{display:inline-flex}
.adm tr.adm-empty>td{height:auto;padding:0;border-bottom:0}
.adm tr.adm-empty:hover>td{background:none}
.adm tr.adm-row-due>td:first-child{box-shadow:inset 2px 0 0 var(--warn-sig)}
.adm .card.flush>.empty{padding:36px 20px}
.adm-table-note{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text-3)}
.adm-table-note .i{color:var(--text-4)}
.adm-table-note em{font-style:normal;font-weight:500;color:var(--text-2)}

/* person cell: avatar + name + secondary line */
.adm-person{display:flex;align-items:center;gap:10px;min-width:0}
.adm-person-text{display:flex;flex-direction:column;min-width:0}
.adm-person-text small{overflow-wrap:anywhere}
.adm-person-name{font-weight:500;color:var(--text)}
.adm-person-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0}
.adm-handle{font-size:var(--fs-xs);color:var(--text-4);white-space:nowrap}
.adm-badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px}

/* inline status notes */
.adm-meta-err,.adm-meta-warn{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:500}
.adm td .adm-meta-err,.adm td .adm-meta-warn{display:flex}
.adm-meta-err{color:var(--high-tx)}
.adm-meta-warn{color:var(--warn-tx)}
.adm td small.adm-meta-err{color:var(--high-tx)}
.adm td small.adm-meta-warn{color:var(--warn-tx)}
.adm-quote{max-width:34ch;white-space:normal}

/* codes, TrxIDs, invoice numbers */
.adm-trx{font-weight:400;letter-spacing:.02em;color:var(--text);user-select:all}
.adm-code{font-weight:600;letter-spacing:.03em;color:var(--text)}
.adm-inv{display:inline-flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap}
.adm-inv .i{color:var(--text-4)}
.adm-inv:hover .i{color:currentColor}
.adm-pay{display:flex;flex-direction:column;min-width:0}
.adm-pay>.adm-method{align-self:flex-start;margin-bottom:4px}
.adm-method{gap:4px;white-space:nowrap}
/* Settings → Payments & fees: each method's heading carries an Offered / Not offered pill */
.adm-pay-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.adm-pay-h:first-child{margin-top:4px}
/* Food database / Medicines: who added a row that waits for approval, and its approve action */
.adm-added-by{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.adm table.adm-quiet .adm-added-by{padding-left:9px}
/* Food database: a food's USDA SR Legacy number under its name, the Source filter row, and the source line of its form */
.adm-food-src{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.adm .table-card>.toolbar.adm-src-bar{padding-top:10px;padding-bottom:10px;gap:8px 10px}
.adm-src-k{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-3)}
.adm-src-k .i{color:var(--text-4)}
.adm-food-src-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px}
.adm-food-src-note .i{flex:none;margin-top:2px;color:var(--text-3)}
/* a search with a Source chosen that finds nothing: its two ways out side by side */
.adm .empty .adm-empty-btns{justify-content:center}
.adm .empty .adm-empty-btns .btn{margin-top:0}
.adm table.adm-quiet td.actions .btn.adm-approve{visibility:visible} /* the row's Save shows on hover; a waiting row's Approve always */
.adm-approve-note{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.adm-amount{font-weight:600;color:var(--text)}

/* ---------------- overview ---------------- */
.adm-due,.adm-clear{display:inline-flex;align-items:center;gap:5px}
.adm-due{color:var(--warn-tx);font-weight:500}
.adm-clear{color:var(--text-4)}
/* an empty queue recedes, so the tiles with work waiting stand out at a glance */
.adm-queue .stat:has(.adm-clear) .stat-value{color:var(--text-4);font-weight:500}
.adm-platform>.card-title{margin:0 0 14px}
.adm-shortcuts>.card-title{margin:0 0 12px}
.adm-revenue{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface-2);color:inherit;text-decoration:none;transition:border-color var(--dur-1),background-color var(--dur-1)}
.adm-revenue:hover{border-color:var(--border-input);text-decoration:none}
.adm-revenue-label{font-size:var(--fs-sm);color:var(--text-3)}
.adm-revenue-value{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-revenue-link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-sm);font-weight:500;color:var(--link)}
.adm-metrics{display:flex;flex-direction:column}
.adm-metric{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -8px;padding:10px 8px;border-bottom:1px solid var(--border-subtle);border-radius:var(--r-sm);color:var(--text-2);text-decoration:none}
.adm-metric:last-child{border-bottom:0}
a.adm-metric:hover{background:var(--hover);color:var(--text);text-decoration:none}
.adm-metric-label{display:inline-flex;align-items:center;gap:9px}
.adm-metric-label .i{color:var(--text-4)}
.adm-metric-value{font-size:var(--fs-lg);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* quick actions: the same bordered 40px rows with a trailing chevron as the nutritionist dashboard's card */
.adm-links{display:flex;flex-direction:column;gap:8px}
.adm-links a{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 12px;border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-xs);color:var(--text);font-weight:500;text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.adm-links a>span{flex:1;min-width:0}
.adm-links a .i{flex-shrink:0;color:var(--text-3)}
.adm-links a .adm-links-chev{color:var(--text-4)}
.adm-links a:hover{background:var(--surface-2);border-color:var(--border-input-hover);color:var(--text);text-decoration:none}
.adm-links a:hover .i{color:var(--text)}

/* ---------------- nutritionist detail ---------------- */
.adm-profile-head{align-items:center}
.adm-profile-id{display:flex;align-items:center;gap:16px;min-width:0}
.adm-profile-id>div{min-width:0}
.adm-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-title-row .page-title{margin:0}
.adm-profile-head .page-sub{margin-top:4px}
.adm-break{overflow-wrap:anywhere}
/* meta line: each bit trails its own separator, so wrapped lines never start with a dot */
.adm-meta-bits{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px}
.adm-mbit{min-width:0}
.adm-mbit:not(:last-child)::after{content:"·";margin:0 8px;color:var(--text-4)}
.adm-dl{margin:0 0 16px}
.adm-dl dd{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.adm-dl dd .adm-dim{font-size:var(--fs-xs);font-weight:400}
.adm-validity{padding-top:16px;border-top:1px solid var(--border-subtle)}
.adm-foods td:nth-child(2){min-width:190px}
.adm-validity-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.adm-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 20px;margin:0 0 4px}
.adm-danger{border-color:var(--high-bd)}
.adm-danger .card-title{color:var(--high-tx)}
.adm-profile-card{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--border-subtle)}
.adm-profile-card>div{display:flex;flex-direction:column}

/* ---------------- change requests: old → new ---------------- */
.adm-field{font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.adm-diff{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.adm-old,.adm-new{overflow-wrap:anywhere}
.adm-old del{color:var(--text-3);text-decoration-color:var(--text-4)}
.adm-diff-arrow{color:var(--text-4)}
.adm-new{padding:1px 7px;border-radius:var(--r-xs);background:var(--primary-soft);color:var(--primary-text);font-weight:500}

/* ---------------- password resets ---------------- */
.adm-reset{display:flex;align-items:center;gap:8px;min-width:0}
.adm-token{display:block;flex:1;min-width:0;max-width:460px;padding:5px 8px;font-size:var(--fs-xs);line-height:1.45;color:var(--text-2);word-break:break-all}

/* ---------------- discount codes / plans ---------------- */
.adm-meter{width:80px;height:4px;margin-top:6px}
.adm td .u{margin-left:.3em}
input.adm-upper{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em}
input.adm-upper::placeholder{font-family:var(--font-sans);text-transform:none;letter-spacing:0}
.adm table.adm-edit td{padding-top:8px;padding-bottom:8px}
.adm table.adm-edit input:not([type=checkbox]):not([type=radio]){margin:0;height:32px}
.adm table.adm-edit .input-group{margin:0}
.adm table.adm-edit td.num .input-group{justify-content:flex-end}
/* long inline-edit lists: fields read as text until the row is hovered or a field is focused,
   and the row's Save only appears on the row being worked on (visibility keeps the column width stable) */
.adm table.adm-quiet input:not([type=checkbox]):not([type=radio]){border-color:transparent;background:transparent;box-shadow:none;padding-left:8px;padding-right:8px}
.adm table.adm-quiet tr:hover input:not([type=checkbox]):not([type=radio]),.adm table.adm-quiet tr:focus-within input:not([type=checkbox]):not([type=radio]){border-color:var(--border-input);background:var(--surface)}
.adm table.adm-quiet input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--ring);background:var(--surface);box-shadow:0 0 0 3px var(--ring-soft)}
.adm table.adm-quiet td.actions .btn{visibility:hidden}
.adm table.adm-quiet tr:hover td.actions .btn,.adm table.adm-quiet tr:focus-within td.actions .btn{visibility:visible}
/* touch screens have no hover: keep the fields looking editable and every Save reachable */
@media (hover:none){
  .adm table.adm-quiet input:not([type=checkbox]):not([type=radio]){border-color:var(--border-input);background:var(--surface)}
  .adm table.adm-quiet td.actions .btn{visibility:visible}
}
.adm table.adm-quiet th:nth-child(n+2):nth-child(-n+4){padding-left:20px}
/* keep text fields readable when the table is squeezed and scrolls on phones */
.adm table.adm-edit input[name=name],.adm table.adm-edit input[name=brand]{min-width:150px}
.adm table.adm-edit input[name=name_bn],.adm table.adm-edit input[name=dosage]{min-width:130px}
.adm table.adm-edit input[name=group_name]{min-width:180px}
.adm input.adm-in-xs{width:76px;text-align:right}
.adm input.adm-in-sm{width:110px;flex:0 0 auto;text-align:right}
.adm-prefix>.addon{border-left:1px solid var(--border-input);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.adm-prefix>input{border-radius:0 var(--r-sm) var(--r-sm) 0}
.adm-prefix>input:focus{position:relative;z-index:1}

/* one "add" pattern on every list page: a card above the table, h2.sec with the entity icon, primary "Add …" */
.adm-addbar-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
.adm-addbar-5{grid-template-columns:repeat(5,minmax(0,1fr)) auto}
.adm-addbar-3{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.adm-addbar-2{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
.adm-addbar-row>label{margin:0}
@media (max-width:1280px){.adm-addbar-5{grid-template-columns:repeat(3,minmax(0,1fr))}.adm-addbar-5>.btn{justify-self:start}}
@media (max-width:900px){
  .adm-addbar-row,.adm-addbar-5,.adm-addbar-3,.adm-addbar-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-addbar-row>.btn{justify-self:start}
}
@media (max-width:640px){.adm-addbar-row,.adm-addbar-5,.adm-addbar-3,.adm-addbar-2{grid-template-columns:minmax(0,1fr)}}

/* ---------------- recipes / foods ---------------- */
textarea.adm-mono{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7}
.adm-example{margin:0 0 10px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-2);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7;color:var(--text-2);white-space:pre;overflow-x:auto}
/* "Show an example" disclosure right under the field it explains */
.adm-example-wrap{margin:10px 0 0}
.adm-example-wrap>summary{display:inline-flex;align-items:center;gap:4px;margin-left:-2px;padding:2px 4px;border-radius:var(--r-xs);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;list-style:none}
.adm-example-wrap>summary::-webkit-details-marker{display:none}
.adm-example-wrap>summary:hover{color:var(--text);background:var(--hover)}
.adm-example-wrap>summary .i{color:var(--text-4);transition:transform var(--dur-2) var(--ease-out)}
.adm-example-wrap[open]>summary .i{transform:rotate(90deg)}
.adm-example-wrap[open]>summary{margin-bottom:8px}
@media (min-width:1101px){.adm-aside{position:sticky;top:calc(var(--topbar-h) + 20px)}}
.adm-sizes{display:flex;flex-wrap:wrap;gap:4px}
.adm-size{display:inline-flex;align-items:center;height:22px;padding:0 7px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface-2);font-size:var(--fs-xs);color:var(--text-2);white-space:nowrap}
.adm-size .u{margin-left:5px;font-size:inherit;font-variant-numeric:tabular-nums}

/* ---------------- diagnostic tests ---------------- */
.adm-tests>.card-head{margin-bottom:16px;justify-content:flex-start}
.adm-tests>.card-head .spacer{flex:1}
.adm .adm-tests-search{flex:0 1 280px;height:32px;margin:0 0 0 8px;padding-left:34px;background-image:var(--search-glyph);background-repeat:no-repeat;background-position:11px center;background-size:15px}
/* live filter (common.js sets style="display:none" on each non-matching test form) */
.adm-tgroup:not(:has(form[data-row]:not([style*="none"]))){display:none}
.adm .adm-tests-none{display:none;padding:32px 20px}
.adm-tests:not(:has(#admTests form[data-row]:not([style*="none"]))) .adm-tests-none{display:flex}
.adm-legend{gap:8px}
.adm-legend .adm-key{height:24px;padding:0 8px 0 6px;font-size:var(--fs-xs);cursor:default}
.adm-legend .adm-key:hover{border-color:var(--border);color:var(--text-3)}
.adm-legend .adm-key.picked:hover{border-color:var(--border);color:var(--text)}
.adm-tgroups{columns:2 380px;column-gap:40px}
.adm-tgroup{break-inside:avoid;margin:0 0 22px}
.adm-tgroup-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.adm-tgroup-title .adm-dim{font-weight:400}
.adm .test-list{gap:6px}
.adm .test-checkbox{height:28px;padding:0 10px 0 8px;gap:6px;font-family:inherit;line-height:1}
/* shown is the normal state, so it stays neutral; hidden tests are the exception and read as switched off */
.adm .test-checkbox.picked{border-color:var(--border);background:var(--surface);color:var(--text);font-weight:400}
.adm .test-checkbox.picked .i{color:var(--primary)}
.adm .test-checkbox.picked:hover{border-color:var(--border-input-hover)}
.adm .test-checkbox:not(.picked){border-style:dashed;border-color:var(--border-input);background:var(--surface-2);color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--text-4)}
.adm .test-checkbox:not(.picked) .i{color:var(--text-4)}
.adm .test-checkbox:not(.picked):hover{color:var(--text);border-color:var(--border-input-hover)}

/* ---------------- promo slots ---------------- */
.adm-promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start}
.adm-promo{margin:0}
.adm-promo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-2px 0 14px}
.adm-promo-img{display:grid;place-items:center;aspect-ratio:3/2;margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden}
.adm-promo-img img{display:block;width:100%;height:100%;object-fit:contain}
.adm-promo-ph{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-4)}
.adm-remove{margin:-6px 0 16px}

/* ---------------- settings ---------------- */
.adm-settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
/* in-page nav: the shared .sec-nav.pills-md, whose current link (a[aria-current]) the ui.js [data-toc] scroll-spy sets;
   only its position lives here. html scroll-padding-top already clears the topbar, so a section lands level with the nav */
.adm-settings>.sec-nav{position:sticky;top:calc(var(--topbar-h) + 24px)}
.adm-set-body{min-width:0;max-width:900px}
.adm-set-sec{scroll-margin-top:8px}
.adm-set-sec:target{border-color:var(--primary-soft-border)}
.adm-set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--border-subtle)}
.adm-test-mail{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:4px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.adm-test-mail-text{display:flex;flex-direction:column;gap:2px}
.adm-test-mail-text span{font-size:var(--fs-sm);color:var(--text-3)}
.adm-test-mail-row{display:flex;gap:8px;flex:1 1 320px;max-width:440px}
.adm-test-mail-row input{margin:0;min-width:0}
/* the save bar (shared .sticky-actions.floating) sits between cards: keep the card rhythm below it */
.adm .adm-save-bar{margin-bottom:20px}
.adm-upload{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.adm-upload-file{flex:1 1 280px;max-width:400px;margin:0}
.adm-upload-file input{margin:0}
.adm-source{max-width:84ch;margin:0;font-size:var(--fs-xs);line-height:1.55;color:var(--text-3)}
/* backup: automatic daily copies (status list, how many days are kept, downloads) */
.adm-bk-dl{margin:0 0 16px}
.adm-bk-dl dd{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.adm-bk-sub{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.adm-bk-path{font-size:var(--fs-xs);overflow-wrap:anywhere;text-align:right}
.adm-bk-list{margin:0 0 16px}
.adm-bk-keep{margin:0 0 18px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.adm-bk-keep-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
.adm-bk-keep-row>label{margin:0;flex:0 1 220px}
.adm-bk-actions{margin:0 0 12px}
@media (max-width:640px){.adm-bk-actions>.btn,.adm-bk-actions>form,.adm-bk-actions>form .btn{flex:1 1 100%}}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  /* the pills row sticks under the topbar as a full-bleed bar (like the patient form's section pills) */
  .adm-settings{grid-template-columns:minmax(0,1fr);gap:0}
  .adm-settings>.sec-nav{top:var(--topbar-h);z-index:15;margin:-8px calc(var(--gutter) * -1) 16px;padding:10px var(--gutter);background:var(--bg);border-bottom:1px solid var(--border)}
  .adm-set-sec{scroll-margin-top:54px}  /* plus html scroll-padding-top: lands below the sticky pills bar */
}
@media (max-width:640px){
  .adm .toolbar .search-form{flex:1 1 100%;max-width:none}
  .adm-spacer{display:none}
  .adm-profile-id{align-items:flex-start;gap:12px}
  .adm-profile-id .av-xl{width:48px;height:48px;font-size:16px}
  .adm-validity-grid{grid-template-columns:minmax(0,1fr)}
  .adm-revenue-value{font-size:var(--fs-2xl)}
  .adm-tgroups{columns:1}
  .adm-test-mail-row{flex-basis:100%;max-width:none}
  /* the settings bar docks edge to edge but its place in the page is between cards: close the band at the bottom too */
  .adm .adm-save-bar{border-bottom-width:1px}
  .adm-tests>.card-head{gap:10px}
  .adm .adm-tests-search{order:3;flex:1 1 100%;margin:0}

  /* toolbars: with chips or a search, the plain count would drop onto an orphan line of its own; a search result count stays */
  .adm .toolbar:has(.chips,.search-form)>.spacer,.adm .toolbar:has(.chips,.search-form)>.meta:not(.adm-meta-keep){display:none}

  /* column-hiding tables: the first cell carries what the hidden columns said (shared .show-sm / .hide-sm) */
  .adm .adm-badges.show-sm{margin-top:5px}
  .adm .table-scroll>table.adm-sm-fit{min-width:0}
  .adm .adm-manage{width:30px;padding:0}
  .adm .adm-manage .i{margin:0}

  /* stacked tables: each row becomes a compact record, so amount, status and actions are always on screen */
  .adm .table-scroll>table.adm-stack{display:block;min-width:0}
  .adm table.adm-stack>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .adm table.adm-stack>tbody{display:block}
  .adm table.adm-stack>tbody>tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px;padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
  .adm table.adm-stack>tbody>tr:last-child{border-bottom:0}
  .adm table.adm-stack>tbody>tr>td{display:block;height:auto;min-width:0;padding:0;border:0;background:none;box-shadow:none}
  .adm table.adm-stack>tbody>tr.adm-row-due{box-shadow:inset 3px 0 0 var(--warn-sig)}
  .adm table.adm-stack>tbody>tr.adm-row-due>td:first-child{box-shadow:none}
  .adm table.adm-stack .c-who{white-space:normal}
  .adm table.adm-stack>tbody>tr.adm-empty{display:block;padding:0}
  .adm table.adm-stack td.actions{width:auto;text-align:right}
  .adm table.adm-stack td.actions small{display:inline;margin:0}
  .adm table.adm-stack td.actions small+small::before{content:" "}
  .adm table.adm-stack .c-when{font-size:var(--fs-sm);color:var(--text-3);text-align:right}
  .adm table.adm-stack .c-when small{display:inline;margin:0 0 0 4px;font-size:inherit;color:inherit}
  .adm table.adm-stack .c-st,.adm table.adm-stack .c-act{align-self:center}

  .adm table.adm-payments>tbody>tr{grid-template-areas:"who amt" "plan when" "pay pay" "st act"}
  .adm-payments .c-who{grid-area:who}
  .adm-payments .c-amt{grid-area:amt}
  .adm-payments .c-plan{grid-area:plan;font-size:var(--fs-sm);color:var(--text-2)}
  .adm-payments .c-when{grid-area:when}
  .adm-payments .c-pay{grid-area:pay;padding:8px 0 2px!important;border-top:1px solid var(--border-subtle)!important}
  .adm-payments .c-st{grid-area:st}
  .adm-payments .c-act{grid-area:act}

  .adm table.adm-changes>tbody>tr{grid-template-areas:"who when" "field field" "diff diff" "st act"}
  .adm-changes .c-who{grid-area:who}
  .adm-changes .c-when{grid-area:when}
  .adm-changes .c-field{grid-area:field;margin-top:2px!important}
  .adm-changes .c-field .adm-field{font-size:var(--fs-xs);color:var(--text-3)}
  .adm-changes .c-diff{grid-area:diff;margin-top:-4px!important}
  .adm-changes .c-st{grid-area:st}
  .adm-changes .c-act{grid-area:act}

  .adm table.adm-resets>tbody>tr{grid-template-areas:"who who" "st when" "link link"}
  .adm-resets .c-who{grid-area:who}
  .adm-resets .c-st{grid-area:st}
  .adm-resets .c-when{grid-area:when;align-self:center}
  .adm-resets .c-link{grid-area:link}
  .adm-resets .adm-token{max-width:none}

  /* three tracks so "plan · period" can share a line without the period widening the amount column */
  .adm table.adm-invoices>tbody>tr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"who who amt" "inv inv when" "plan period period"}
  .adm-invoices .c-who{grid-area:who}
  .adm-invoices .c-amt{grid-area:amt;font-weight:600}
  .adm-invoices .c-inv{grid-area:inv}
  .adm-invoices .c-when{grid-area:when}
  .adm-invoices .c-plan{grid-area:plan;font-size:var(--fs-sm);color:var(--text-2)}
  .adm-invoices .c-period{grid-area:period;font-size:var(--fs-sm);color:var(--text-3);white-space:normal}
  .adm-invoices .c-trx{display:none!important}

  /* discount codes: "code  20% off" / "3 / 100 uses  Expires …" / "status  actions" */
  .adm table.adm-discounts>tbody>tr{grid-template-areas:"code pct" "used exp" "st act"}
  .adm-discounts .c-code{grid-area:code}
  .adm-discounts .c-pct{grid-area:pct;font-weight:600}
  .adm-discounts .c-used{grid-area:used;font-size:var(--fs-sm)}
  .adm-discounts .c-exp{grid-area:exp;font-size:var(--fs-sm);color:var(--text-3);text-align:right}
  .adm-discounts .c-exp .adm-meta-warn{justify-content:flex-end}
  .adm-discounts .c-st{grid-area:st}
  .adm-discounts .c-act{grid-area:act}

  /* recipes: "title  kcal" / "category  weight" / "status  actions" */
  .adm table.adm-recipes>tbody>tr{grid-template-areas:"rec kcal" "cat wt" "st act"}
  .adm-recipes .c-rec{grid-area:rec}
  .adm-recipes .c-kcal{grid-area:kcal;font-weight:600}
  .adm-recipes .c-cat{grid-area:cat;font-size:var(--fs-sm);color:var(--text-2)}
  .adm-recipes .c-wt{grid-area:wt;font-size:var(--fs-sm);color:var(--text-3)}
  .adm-recipes .c-st{grid-area:st}
  .adm-recipes .c-act{grid-area:act}

  /* contributors: "person  group / order" / "role" / "status  actions" (email is dropped) */
  .adm table.adm-contributors>tbody>tr{grid-template-areas:"who grp" "role role" "st act"}
  .adm-contributors .c-who{grid-area:who}
  .adm-contributors .c-grp{grid-area:grp;font-size:var(--fs-sm);color:var(--text-2);text-align:right}
  .adm-contributors .c-role{grid-area:role;padding-left:42px!important;font-size:var(--fs-sm)}
  .adm-contributors .c-st{grid-area:st}
  .adm-contributors .c-act{grid-area:act}
}
/* detail page, single column: subscription (status, validity) first, destructive card last */
@media (max-width:1100px){
  .adm .split.adm-detail{display:flex;flex-direction:column;align-items:stretch}
  .adm-detail>.adm-col{display:contents}
  .adm-o-sub{order:1}.adm-o-details{order:2}.adm-o-mods{order:3}.adm-o-hist{order:4}.adm-o-signin{order:5}.adm-o-danger{order:6}
}
@media (max-width:640px){.adm-nutrients{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* promo slots: one group per login-page slot (up to three rotating banners each) */
.adm-promo-slot+.adm-promo-slot{margin-top:36px}
.adm-promo-slot .section-title .adm-dim{font-weight:400;font-size:var(--fs-md)}

/* ---- parity round ---- */
/* Overview: Finish site setup */
.adm .adm-setup{margin:0 0 20px}
.adm .adm-setup-list{list-style:none;margin:0;padding:0}
.adm .adm-setup-list li{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 0;border-top:1px solid var(--border-subtle)}
.adm .adm-setup-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm .adm-setup-text span{font-size:var(--fs-sm);color:var(--text-3)}
@media (max-width:640px){.adm .adm-setup-list li{grid-template-columns:minmax(0,1fr) auto}.adm .adm-setup-list li>.status{grid-column:1/-1;justify-self:start}}
/* Site notice */
.adm .adm-notice-dl{margin-top:14px}
.adm .adm-fieldset{margin:12px 0 0;padding:0;border:0}
.adm .adm-fieldset legend{margin-bottom:6px;font-size:var(--fs-sm);font-weight:500}
/* Data retention (/admin/retention) and the nutritionist page's terms, last-active and cancel-deletion lines */
.adm .adm-terms small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.adm .adm-ret>.toolbar{align-items:flex-start}
.adm .adm-ret .card-sub{margin:2px 0 0;max-width:72ch}
.adm .adm-ret .row-actions{flex-wrap:wrap}
.adm .adm-ret-card .card-head{margin-bottom:12px}
.adm .adm-ret-card .adm-links a>.count{flex:0 0 auto}
.adm .adm-cancel-del{margin-bottom:8px}
/* phones: the dates of the hidden columns, under the name, and the actions on a line of their own below (stacked rows) */
.adm .adm-ret .adm-person-text small.adm-ret-sm{margin-top:3px;color:var(--text-3)}
@media (max-width:640px){
  .adm table.adm-ret-t>tbody>tr{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "act"}
  .adm table.adm-ret-t>tbody>tr>td:first-child{grid-area:who}
  .adm table.adm-ret-t>tbody>tr>td.actions{grid-area:act;text-align:left}
  .adm table.adm-ret-t td.actions .row-actions{justify-content:flex-start}
}
/* Activity log (/admin/activity): filter card (the shared add-bar grid) and the log table; phones stack each row as
   who + time / what / IP address */
.adm .adm-act-btns{flex-wrap:nowrap}
.adm-activity .c-who small,.adm-activity .c-what small,.adm-activity .c-when small{display:block}
.adm-activity .c-what{min-width:260px;overflow-wrap:anywhere}
.adm-act-what{color:var(--text)}
.adm-act-name{font-weight:500;color:var(--text)}
.adm-act-name.adm-dim{font-weight:400;color:var(--text-3)}
.adm-act-ip{font-size:var(--fs-sm);color:var(--text-2)}
@media (max-width:640px){
  .adm table.adm-activity>tbody>tr{grid-template-areas:"who when" "what what" "ip ip"}
  .adm-activity .c-who{grid-area:who}
  .adm-activity .c-when{grid-area:when}
  .adm-activity .c-what{grid-area:what;min-width:0}
  .adm-activity .c-ip{grid-area:ip}
  .adm table.adm-activity .c-when small{display:inline}
}
/* payment requests and password resets: the payer's or requester's "Deletion <date>" pill */
.adm td small.adm-del-note{margin-top:4px}
/* Ready templates (views/templates.js templatesAdminPage): phones stack each row as name / target / contents / status + actions */
.adm-templates .c-rec small{display:block}
.adm-templates .c-tgt,.adm-templates .c-what{color:var(--text-2)}
@media (max-width:640px){
  .adm table.adm-templates>tbody>tr{grid-template-areas:"rec rec" "tgt tgt" "what what" "st act"}
  .adm-templates .c-rec{grid-area:rec}
  .adm-templates .c-tgt{grid-area:tgt;font-size:var(--fs-sm)}
  .adm-templates .c-what{grid-area:what;font-size:var(--fs-sm);color:var(--text-3)}
  .adm-templates .c-st{grid-area:st}
  .adm-templates .c-act{grid-area:act}
}

/* ---------------- medicines: where each product was checked (source link and type) ---------------- */
/* the row shows a small link with the source type and a Change button; the two fields open under it (the disclosure
   stays in the cell, so the table keeps its width until a row is being changed) */
.adm-med-src-row{display:flex;flex-wrap:nowrap;align-items:center;gap:2px 4px}
.adm-med-src-row:has(>.adm-med-srcedit[open]){flex-wrap:wrap}
.adm-med-srclink{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--link);white-space:nowrap}
.adm-med-srclink:hover{text-decoration:underline;text-underline-offset:2px}
.adm-med-nosrc{font-size:var(--fs-xs);color:var(--text-4)}
.adm-med-srcedit>summary{list-style:none}
.adm-med-srcedit>summary::-webkit-details-marker{display:none}
.adm-med-srcedit[open]{flex-basis:100%}
.adm-med-srcedit[open]>summary{color:var(--primary-text);background:var(--primary-soft)}
.adm-med-srcbox{display:grid;gap:8px;width:250px;margin:6px 0 2px}
.adm-med-srcbox>label{margin:0;font-size:var(--fs-xs)}
.adm table.adm-edit .adm-med-srcbox input,.adm table.adm-edit .adm-med-srcbox select{width:100%;height:32px;margin:0;font-size:var(--fs-sm)}
.adm table.adm-quiet .adm-med-srcbox input:not([type=checkbox]){border-color:var(--border-input);background:var(--surface)}
/* below 1440 px the table would no longer fit its card with the Source column (1366 and 1280 px laptops): the link shows
   its icon only (the type stays in its label, its title and for screen readers), "None" becomes a dash and the Change
   button is smaller; below 1366 px the Drug–food medicine heading may also take two lines. So the table is no wider than
   before the column and every row's Save stays in view */
@media (max-width:1439.98px){
  .adm-med-srctype{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .adm-med-src-row{gap:2px}
  .adm-med-srclink{min-width:16px;min-height:24px;justify-content:center}
  .adm-med-nosrc::before{content:"\2014" / ""}
  .adm-med-srcedit>summary.btn-sm{--btn-h:24px}
  .adm table.adm-med-table :is(td.adm-med-src,th.adm-med-srch){padding-left:4px;padding-right:4px}
}
@media (max-width:1365.98px){
  .adm table.adm-med-table th.adm-med-dfh{white-space:normal;line-height:1.25}
}
/* ---- account protection (lib/protect.js): the nutritionist page's Devices and protection; in one column it follows
   Sign-in help ---- */
.adm-protect-form{display:grid;gap:12px;margin:0 0 16px;padding:16px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.adm-protect-form label,.adm-protect-form .adm-checks{margin:0}
.adm-dev-list>li>.adm-badges{flex:none;justify-content:flex-end}
.adm-protect-acts{display:grid;gap:8px}
.adm-dev-more{margin:0 0 12px}
.adm-dev-more>.body>.dev-list{margin:0}
@media (max-width:1100px){.adm-o-protect{order:5}}