/* 1st Monkstown Stores: a practical kit-list feel, calm enough to use mid-camp-packing. */

:root {
  --canvas: #EDE7D9;
  --panel: #F7F4EC;
  --panel-hover: #F0ECDF;
  --paper: #FFFFFF;
  --forest: #2E4A3B;
  --forest-dark: #23392D;
  --on-forest: #FFFFFF;
  --on-forest-muted: #E7E2D3;
  --charcoal: #29251F;
  --moss: #63754D;
  --slate: #5A6B6E;
  --ochre: #7A6A3F;   /* "reserved": 5.3:1 with white text */
  --gold: #8C6E24;
  --rust: #A8472B;
  --border: #D8CFBB;        /* dividers and card edges */
  --field-border: #8A8170;  /* input edges: 3:1 against white */
  --selection: #CFD8C4;
  --radius: 6px;
  --tap: 44px;
  --nav-h: 60px;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--charcoal);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-wrap: break-word;
  accent-color: var(--forest);
}

::selection { background: var(--selection); color: var(--charcoal); }

h1, h2, h3, h4, h5, .brand {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--forest-dark);
  margin: 0 0 0.4em;
  line-height: 1.2;
}
h2 { font-size: 1.5em; }
h3 { font-size: 1.15em; }
h4, h5 { font-size: 1em; }

a { color: var(--forest); text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.topbar :focus-visible, .tabbar :focus-visible { outline-color: var(--on-forest); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- controls ---------- */
button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95em;
  min-height: var(--tap);
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  padding: 0.5em 1.1em;
  cursor: pointer;
  background: var(--forest);
  color: var(--on-forest);
  line-height: 1.2;
}
button:hover { background: var(--forest-dark); border-color: var(--forest-dark); }
button.secondary { background: var(--panel); color: var(--forest-dark); border-color: var(--field-border); }
button.secondary:hover { background: var(--panel-hover); }
button.danger { background: var(--rust); border-color: var(--rust); color: var(--on-forest); }
button.secondary.danger { background: var(--panel); color: var(--rust); border-color: var(--rust); }
button.secondary.danger:hover { background: var(--rust); color: var(--on-forest); }
button:disabled { opacity: 0.55; cursor: progress; }
button.btn-sm { padding: 0.35em 0.8em; font-size: 0.85em; }
@media (pointer: fine) { button.btn-sm { min-height: 34px; } }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 1em; /* 16px keeps iOS from zooming on focus */
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  min-height: var(--tap);
  background: var(--paper);
  color: var(--charcoal);
  width: 100%;
}
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; }
input[type="file"] { padding: 0.45em; background: var(--panel); }
textarea { min-height: 0; }

label { display: block; font-weight: 600; font-size: 0.88em; margin: 0.9em 0 0.3em; }
label.check-row {
  display: flex; align-items: center; gap: 0.6em;
  font-weight: 400; font-size: 1em; margin: 0; min-height: var(--tap);
}
.req { font-weight: 400; color: var(--slate); }

fieldset { border: 0; padding: 0; margin: 0; }

/* ---------- login ---------- */
.login-screen { max-width: 400px; margin: 10vh auto; padding: 1.5em; }
.login-screen h1 { font-size: 1.6em; }
.login-screen form.hidden { display: none; }

/* ---------- app shell ---------- */
.topbar {
  background: var(--forest);
  color: var(--on-forest);
  padding: 0.6em 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { color: var(--on-forest); margin: 0; font-size: 1.1em; white-space: nowrap; margin-right: auto; }

.tabbar { display: flex; gap: 0.4em; }
.tabbar .tab {
  background: transparent;
  color: var(--on-forest-muted);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.tabbar .tab:hover { background: var(--forest-dark); }
.tabbar .tab[aria-current="page"] { background: var(--on-forest); color: var(--forest-dark); border-color: var(--on-forest); }
.tab .short { display: none; }

main { max-width: 900px; margin: 0 auto; padding: 1.2em 1em 4em; }

/* Phones: brand scrolls away, tabs live in a bar at the bottom within thumb reach. */
@media (max-width: 719px) {
  .topbar { position: static; padding: 0.5em 0.9em; }
  .topbar .brand { font-size: 1em; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--forest);
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 8px rgba(35, 57, 45, 0.18);
  }
  .tabbar .tab {
    flex: 1; min-height: var(--nav-h); border: 0; border-radius: 0;
    font-size: 0.85em; padding: 0.4em 0.2em;
    border-top: 3px solid transparent;
  }
  .tabbar .tab[aria-current="page"] { background: var(--forest-dark); color: var(--on-forest); border-top-color: var(--canvas); }
  .tab .long { display: none; }
  .tab .short { display: inline; }
  main { padding-bottom: calc(var(--nav-h) + 2.5em + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- account menu ---------- */
.account { position: relative; flex: 0 0 auto; }
.account-btn {
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%;
  background: var(--forest-dark); border: 2px solid rgba(255, 255, 255, 0.45);
  color: var(--on-forest); font-family: var(--font-head); font-size: 0.9em; letter-spacing: 0.02em;
}
.account-btn:hover, .account-btn[aria-expanded="true"] { background: var(--on-forest); color: var(--forest-dark); border-color: var(--on-forest); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 220px; max-width: 80vw; padding: 0.9em 1em 1em;
  background: var(--panel); color: var(--charcoal);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(41, 37, 31, 0.18);
}
.account-menu[hidden] { display: none; }
.account-name { font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.account-meta { margin: 0.1em 0 0.9em; }
.account-menu button { width: 100%; }

/* ---------- admin: home list on phones, sidebar on wide screens ---------- */
.admin-links { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.admin-links li + li { border-top: 1px solid var(--border); }
.admin-link {
  display: flex; align-items: center; gap: 0.8em; width: 100%; min-height: 64px;
  padding: 0.7em 1em; text-align: left; border: 0; border-radius: 0;
  background: transparent; color: var(--charcoal); font-weight: 400;
}
.admin-link:hover { background: var(--panel-hover); }
.admin-link:focus-visible { outline-offset: -3px; }
.admin-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-link-title { font-weight: 600; color: var(--forest-dark); }
.admin-link-desc { font-size: 0.85em; color: var(--slate); }
.count {
  min-width: 1.8em; padding: 0.1em 0.55em; border-radius: 999px; text-align: center;
  font-size: 0.85em; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--border); color: var(--charcoal);
}
.count:empty { display: none; }
.count.count-alert { background: var(--rust); color: var(--on-forest); }

.back-link {
  display: inline-flex; align-items: center; gap: 0.2em; margin: 0 0 0.6em -0.4em; padding: 0 0.4em;
  background: transparent; border: 0; color: var(--forest); font-weight: 600;
}
.back-link:hover { background: transparent; text-decoration: underline; text-underline-offset: 0.2em; }
.back-link .chevron { transform: rotate(180deg); color: var(--forest); }

/* Phones: either the list or one section, never both. */
.admin-layout[data-view="home"] .admin-panel { display: none; }
.admin-layout[data-view="section"] .admin-menu { display: none; }

@media (min-width: 900px) {
  main:has(#tab-admin:not(.hidden)) { max-width: 1160px; }
  .admin-layout, .admin-layout[data-view] { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2em; align-items: start; }
  .admin-layout .admin-menu, .admin-layout .admin-panel { display: block !important; }
  .admin-menu { position: sticky; top: 80px; }
  .admin-link { min-height: 56px; }
  .admin-link .chevron { display: none; }
  .admin-panel .back-link { display: none; }
  .admin-link[aria-current="page"] { background: var(--forest); }
  .admin-link[aria-current="page"] .admin-link-title,
  .admin-link[aria-current="page"] .admin-link-desc { color: var(--on-forest); }
}

/* ---------- surfaces ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1em;
  margin-bottom: 0.8em;
}
.card .card { background: var(--paper); }

/* ---------- catalog: search ---------- */
.catalog-tools { margin-bottom: 0.4em; }
.search-field { position: relative; }
.search-field .search-icon { position: absolute; left: 0.8em; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }
.search-field input { padding-left: 2.5em; min-height: 48px; font-size: 1.05em; }
.search-field input::placeholder { color: var(--slate); opacity: 1; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.6em; }
.chip {
  flex: 0 0 auto; white-space: nowrap; border-radius: 999px; padding: 0.35em 1em;
  background: var(--panel); color: var(--forest-dark); border-color: var(--field-border); font-size: 0.9em;
}
.chip:hover { background: var(--panel-hover); }
.chip[aria-pressed="true"] { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
.result-count { margin: 0.5em 0 0; font-variant-numeric: tabular-nums; }
.match-reason { font-size: 0.85em; color: var(--forest); margin-top: 0.1em; }
.empty-state { padding: 1.5em 0; }
.more-matches { margin: 0.8em 0 0; }
.empty-state p:first-child { font-weight: 600; margin-bottom: 0.2em; }
@media (max-width: 719px) {
  /* Pinned while scrolling results on a phone. */
  .catalog-tools {
    position: sticky; top: 0; z-index: 5;
    background: var(--canvas); margin: 0 -1em 0.4em; padding: 0.6em 1em 0.5em;
    box-shadow: 0 1px 0 var(--border);
  }
}

/* ---------- catalog: shelf list ---------- */
.shelf-heading { margin-top: 1.4em; }
.shelf-heading:first-child { margin-top: 0.4em; }
.shelf { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.6em; overflow: hidden; background: var(--panel); }
.shelf-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  padding: 0.7em 1em; min-height: 72px; cursor: pointer; background: var(--panel);
}
.shelf-row:hover { background: var(--panel-hover); }
.shelf-row:focus-visible { outline-offset: -3px; }
.shelf-summary { display: flex; align-items: center; gap: 0.8em; min-width: 0; }
.shelf-summary > div { min-width: 0; overflow-wrap: anywhere; }
.shelf-row .title { font-weight: 600; }
.shelf-row .counts { font-size: 0.88em; color: var(--slate); font-variant-numeric: tabular-nums; }
.shelf-body { display: none; border-top: 1px solid var(--border); padding: 1em; }
.shelf.open .shelf-body { display: block; animation: shelf-in 180ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes shelf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.chevron { flex: 0 0 auto; color: var(--slate); transition: transform 160ms ease-out; }
.shelf.open > .shelf-row .chevron,
.more-actions[open] > summary .chevron { transform: rotate(90deg); }

.care-note { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6em 0.8em; }

.primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 1em 0 0.6em; }
@media (min-width: 720px) { .primary-actions { display: flex; } }

.more-actions { margin-bottom: 0.4em; }
.more-actions > summary {
  display: inline-flex; align-items: center; gap: 0.3em;
  min-height: var(--tap); padding: 0 0.2em;
  font-weight: 600; color: var(--forest); cursor: pointer; list-style: none;
}
.more-actions > summary::-webkit-details-marker { display: none; }
.more-list { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0.3em 0 0.6em; }
.danger-zone { margin-top: 0.8em; padding-top: 0.8em; border-top: 1px solid var(--border); }

.units-heading { margin-top: 1.2em; }
.unit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6em;
  padding: 0.35em 0; border-bottom: 1px solid var(--border);
}
.unit-list > div:last-child .unit-row { border-bottom: none; }
.unit-card { margin: 0.5em 0 0.8em; }

.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); flex: 0 0 auto; }
.thumb-empty { background: var(--border); }
.photo-strip { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.4em; }

.history-heading { margin: 1.2em 0 0.3em; }
.history-list { list-style: none; padding: 0; margin: 0.3em 0 0; font-size: 0.88em; }
.history-list li { padding: 0.25em 0; border-bottom: 1px solid var(--border); }
.history-list li:last-child { border-bottom: none; }
.history-list time { color: var(--slate); font-variant-numeric: tabular-nums; margin-right: 0.3em; }

.plain-list { list-style: none; padding: 0; margin: 0 0 0.4em; }
.plain-list li { padding: 0.35em 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: none; }

/* ---------- forms ---------- */
.form-card > label:first-of-type, .form-card > p:first-child { margin-top: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1em; }
.row-flex { display: flex; gap: 0.6em; flex-wrap: wrap; align-items: center; }
.row-flex > * { flex: 1; min-width: 140px; }
.row-flex > button { flex: 0 0 auto; min-width: 0; }
.checklist .check-row { border-bottom: 1px solid var(--border); }

/* ---------- bookings ---------- */
.bookings-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 0.6em; }
.bookings-head h2 { margin: 0; }
@media (max-width: 719px) { .bookings-head .start-booking-btn { width: 100%; } }
.booking-main { min-width: 0; flex: 1; }
.booking-summary { font-size: 0.9em; margin-top: 0.3em; overflow-wrap: anywhere; }
.booking-secondary { margin-top: 0.4em; }
@media (max-width: 719px) {
  .booking-card .checkout-row { flex-direction: column; align-items: stretch; gap: 0.7em; }
  .booking-card .checkout-row > button { width: 100%; }
}
.tag.ready { background: var(--gold); }

/* ---------- booking in progress ---------- */
.booking-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  padding: 0.6em 1em calc(0.6em + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 2px solid var(--forest);
  box-shadow: 0 -4px 14px rgba(41, 37, 31, 0.14);
}
.booking-bar[hidden] { display: none; }
.booking-bar-text { min-width: 0; }
.booking-bar-text span { color: var(--slate); }
body.has-booking-bar main { padding-bottom: 7em; }
body.has-booking-bar .toast { bottom: 5.5em; }
@media (max-width: 719px) {
  .booking-bar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 0.6em; }
  .booking-bar button { padding-inline: 0.9em; }
  body.has-booking-bar main { padding-bottom: calc(var(--nav-h) + 7em + env(safe-area-inset-bottom, 0px)); }
  body.has-booking-bar .toast { bottom: calc(var(--nav-h) + 5.2em + env(safe-area-inset-bottom, 0px)); }
}

.in-booking-pill {
  display: inline-block; margin-top: 0.2em; padding: 0.05em 0.6em; border-radius: 999px;
  font-size: 0.8em; font-weight: 600; background: var(--selection); color: var(--forest-dark);
}
.in-booking-pill[hidden] { display: none; }
.booking-actions { margin: 1em 0 0.6em; }
.in-booking { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); }
.stepper .step-btn { border: 0; border-radius: 0; min-width: var(--tap); background: transparent; font-size: 1.1em; padding: 0.3em 0.7em; }
.stepper .step-btn:hover { background: var(--panel-hover); }
.stepper output { min-width: 2.2em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.draft-lines { list-style: none; padding: 0; margin: 0; }
.draft-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; padding: 0.6em 0; border-bottom: 1px solid var(--border); }
.draft-line:first-child { padding-top: 0; }
.draft-line-main { display: flex; flex-direction: column; min-width: 0; }
.draft-line-name { font-weight: 600; overflow-wrap: anywhere; }
.draft-line-avail { font-size: 0.85em; margin-top: 0; }
.draft-line-problem .draft-line-name { color: var(--rust); }
.draft-total { margin: 0.6em 0 0; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.date-pair label { margin-top: 0; }
.date-pair > div { min-width: 0; }
.date-pair input { min-width: 0; }
.draft-actions { margin-top: 0.2em; }
.draft-actions .confirm-booking-btn { flex: 1 1 auto; }

.bookings-tools { margin-bottom: 0.8em; }
.bookings-tools label { margin-top: 0; }
.bookings-tools select { max-width: 320px; }
@media (max-width: 719px) { .bookings-tools select { max-width: none; } }

/* ---------- checkouts ---------- */
.checkout-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.checkout-row .muted { margin-top: 0.15em; }

.unit-returns { margin-top: 0.4em; }
.unit-returns > summary {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--tap);
  font-weight: 600; color: var(--forest); cursor: pointer; list-style: none; font-size: 0.92em;
}
.unit-returns > summary::-webkit-details-marker { display: none; }
.unit-returns[open] > summary .chevron { transform: rotate(90deg); }
.unit-return-list { list-style: none; padding: 0; margin: 0; }
.unit-return-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; padding: 0.3em 0; border-top: 1px solid var(--border); }

/* ---------- stock, kits, to confirm, import ---------- */
.tag.confirm { background: var(--ochre); }
.confirm-note { border-left: 4px solid var(--ochre); background: var(--paper); padding: 0.6em 0.8em; border-radius: var(--radius); margin: 0.6em 0; }
.confirm-note p { margin: 0 0 0.4em; }
.confirm-note p:last-child { margin-bottom: 0; }
.confirm-text { margin: 0.4em 0 0; }
.contents-list { margin: 0.6em 0; }
.contents-list > summary { display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--tap); font-weight: 600; color: var(--forest); cursor: pointer; list-style: none; }
.contents-list > summary::-webkit-details-marker { display: none; }
.contents-list[open] > summary .chevron { transform: rotate(90deg); }
.contents-list ul { margin: 0.2em 0 0; padding-left: 1.2em; columns: 2 16em; column-gap: 2em; font-size: 0.92em; }
.contents-list li { break-inside: avoid; padding: 0.1em 0; }
.stock-big { font-family: var(--font-head); font-size: 1.5em; font-weight: 700; color: var(--forest-dark); margin: 0.2em 0; font-variant-numeric: tabular-nums; }
.stock-lines { list-style: none; padding: 0; margin: 0.4em 0; }
.stock-lines li { display: flex; justify-content: space-between; gap: 1em; padding: 0.35em 0; border-bottom: 1px solid var(--border); }
.stock-n { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.stock-out .stock-n { color: var(--rust); }
.count-grid { display: grid; grid-template-columns: 1fr 6.5em; gap: 0.4em 0.8em; align-items: center; }
.count-grid label { margin: 0; font-weight: 400; font-size: 0.95em; }
.unit-row-main { min-width: 0; }
.unit-where { font-size: 0.82em; }
.import-summary { margin-top: 1em; }
.import-summary .plain-list li { padding: 0.25em 0; }
.import-detail { margin: 0.6em 0; }
.import-detail > summary { cursor: pointer; font-weight: 600; color: var(--forest); min-height: var(--tap); display: flex; align-items: center; }
.import-detail table { font-size: 0.85em; }
.row-confirm td:first-child { box-shadow: inset 3px 0 0 var(--ochre); }
.import-skipped { margin: 0.6em 0; }

/* ---------- status tags ---------- */
.tag {
  display: inline-block; padding: 0.1em 0.6em; border-radius: 999px;
  font-size: 0.8em; font-weight: 600; color: var(--on-forest); white-space: nowrap; vertical-align: 0.05em;
}
.tag.available { background: var(--moss); }
.tag.checked_out { background: var(--slate); }
.tag.reserved { background: var(--ochre); }
.tag.damaged, .tag.overdue { background: var(--rust); }
.tag.goto { background: var(--gold); }

/* ---------- tables (ledger style) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--slate); font-weight: 600; font-size: 0.85em; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-actions { white-space: nowrap; }
.table-actions button + button { margin-left: 0.4em; }

/* ---------- feedback ---------- */
.muted { color: var(--slate); font-size: 0.9em; }
.error { color: var(--rust); font-size: 0.9em; margin-top: 0.4em; }
.error:empty { display: none; }
.hidden { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: 1.2em; z-index: 30;
  width: max-content; max-width: min(92vw, 480px); padding: 0.75em 1.1em;
  background: var(--charcoal); color: var(--paper); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(41, 37, 31, 0.25);
  font-size: 0.95em;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-error { background: var(--rust); }
@media (max-width: 719px) {
  .toast { bottom: calc(var(--nav-h) + 0.8em + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .shelf.open .shelf-body { animation: none; }
  .chevron, .toast { transition: opacity 120ms linear; }
  .toast, .toast.show { transform: translate(-50%, 0); }
}