/* Courses Maison — « ticket de caisse ».
   Le fond est le tapis de caisse, chaque écran est un ticket thermique posé
   dessus. Martian Mono (chasse fixe, axe de largeur réglé étroit) pour tout
   ce qui est imprimé ; Young Serif seulement pour les titres, comme un logo
   d'enseigne en tête de ticket. Aucune police système par défaut. */

@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono.woff") format("woff");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("/static/fonts/young-serif.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --belt: #2b3038;        /* tapis de caisse */
  --belt-2: #353b45;
  --belt-ink: #c9ced6;
  --paper: #fcfcfa;       /* papier thermique, blanc froid */
  --paper-2: #f1f2ee;
  --ink: #1c2333;         /* encre bleu-noir */
  --ink-2: #5f6675;
  --ink-3: #a3a8b3;
  --rule: #c9ccd2;
  --stamp: #3730a3;       /* tampon violet, comme à la Poste */
  --stamp-bg: #e6e4fb;
  --alert: #b42318;
  --ok: #3f6212;
  --mono: "Martian Mono", ui-monospace, monospace;
  --serif: "Young Serif", Georgia, serif;
  --zig: 8px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --belt: #1d2128;
    --belt-2: #262b33;
    --paper: #e8e9e4;    /* le papier reste un papier, juste moins éblouissant le soir */
    --paper-2: #dcddd7;
    --rule: #b9bcc2;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--belt);
  /* rainures du tapis */
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 24px);
  color: var(--ink);
  font-family: var(--mono);
  font-stretch: 82%;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--stamp); }
:focus-visible { outline: 2px dashed var(--stamp); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------- ticket */

#app { padding: 14px 12px calc(86px + var(--safe-b)); }

.ticket {
  position: relative;
  max-width: 460px;
  margin: 0 auto 18px;
  background: var(--paper);
  padding: 22px 18px 26px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 14px 30px -18px rgba(0, 0, 0, .7);
}
/* bords dentelés : coupe du massicot de la caisse */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--zig);
  background-size: calc(var(--zig) * 2) var(--zig);
  background-repeat: repeat-x;
}
.ticket::before {
  top: calc(var(--zig) * -1);
  background-image: linear-gradient(135deg, transparent 50%, var(--paper) 50%), linear-gradient(-135deg, transparent 50%, var(--paper) 50%);
}
.ticket::after {
  bottom: calc(var(--zig) * -1);
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(-45deg, transparent 50%, var(--paper) 50%);
}

.head { text-align: center; margin-bottom: 14px; }
.head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 2px 0 6px;
}
.head .addr { color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.head-tools { position: absolute; top: 12px; right: 10px; display: flex; gap: 2px; }
.head-tools.left { right: auto; left: 10px; }

hr.dash, .dash {
  border: 0;
  height: 1px;
  margin: 12px 0;
  background-image: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%);
  background-size: 8px 1px;
}
hr.double { border: 0; border-top: 3px double var(--ink); margin: 14px 0; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; background: none; border-radius: 50%;
  color: var(--ink-2);
}
.icon-btn:active { background: var(--paper-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------- magasins */

.stores {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -18px 4px; padding: 2px 18px 8px;
}
.stores::-webkit-scrollbar { display: none; }
.store-chip {
  flex: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 12px 6px 10px;
  border-radius: 3px;
  font-size: 13px;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.store-chip i { width: 8px; height: 8px; border-radius: 1px; background: var(--c, var(--ink-3)); }
.store-chip b { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.store-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.store-chip[aria-pressed="true"] b { color: var(--ink-3); }

/* ------------------------------------------------------------- saisie */

.add {
  display: flex; gap: 6px; align-items: stretch;
  margin: 10px 0 4px;
  position: relative;
}
.add input {
  flex: 1; min-width: 0;
  border: 0; border-bottom: 2px solid var(--ink);
  background: transparent;
  padding: 10px 2px 8px;
  font-size: 16px;            /* 16 px : pas de zoom auto sur iPhone */
}
.add input::placeholder { color: var(--ink-3); }
.add input:focus { outline: none; border-bottom-color: var(--stamp); }
.btn-ink {
  border: 0; background: var(--ink); color: var(--paper);
  padding: 0 14px; min-height: 42px; border-radius: 3px;
  font-weight: 600;
}
.btn-ink:active { transform: translateY(1px); }
.btn-line {
  border: 1px solid var(--ink); background: transparent;
  padding: 0 14px; min-height: 42px; border-radius: 3px;
}
.btn-stamp { border: 0; background: var(--stamp); color: #fff; padding: 0 16px; min-height: 46px; border-radius: 3px; font-weight: 600; }
.btn-danger { border: 1px solid var(--alert); color: var(--alert); background: transparent; padding: 0 14px; min-height: 42px; border-radius: 3px; }
.btn-text { border: 0; background: none; color: var(--stamp); padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; }
.btn-wide { width: 100%; }

.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top: 0;
  max-height: 260px; overflow-y: auto;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .45);
}
.suggest button {
  display: flex; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  border: 0; border-bottom: 1px dotted var(--rule);
  background: none; padding: 10px 10px;
}
.suggest button small { color: var(--ink-3); }
.suggest button:focus, .suggest button:hover { background: var(--paper-2); outline: none; }

.usual { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.usual button {
  border: 1px dashed var(--ink-3); background: none;
  padding: 4px 9px; border-radius: 3px; font-size: 12.5px; color: var(--ink-2);
}
.usual button::before { content: "+ "; color: var(--ink-3); }
.usual button.fav { border-style: solid; border-color: var(--stamp); color: var(--stamp); }

/* ------------------------------------------------------------- lignes */

.aisle {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 4px;
  color: var(--ink-2); font-size: 12px;
}
.aisle::before, .aisle::after {
  content: ""; flex: 1; height: 1px;
  background-image: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%);
  background-size: 6px 1px;
}
.aisle span { flex: none; }

.line {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border: 0; background: none; width: 100%; text-align: left;
  position: relative;
  min-height: 44px;
}
.line .qty { color: var(--ink-2); font-size: 12.5px; text-align: right; overflow-wrap: anywhere; }
.line .name { font-size: 15px; word-break: break-word; }
.line .meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.line .meta .store-dot { display: inline-block; width: 7px; height: 7px; background: var(--c); margin-right: 4px; vertical-align: 1px; }
.line .box {
  width: 24px; height: 24px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  display: grid; place-items: center;
  align-self: center;
  color: var(--paper);
}
.line .box svg { width: 16px; height: 16px; opacity: 0; }
.line-wrap { display: flex; align-items: center; gap: 2px; }
.line-wrap .line { flex: 1; }
.line-wrap .more { color: var(--ink-3); width: 34px; height: 44px; }

.line.done .name, .line.done .qty { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.line.done .box { background: var(--stamp); border-color: var(--stamp); }
.line.done .box svg { opacity: 1; }
/* tampon de la personne qui a pris l'article */
.line .who {
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  background: var(--paper);
  border: 1.5px solid var(--stamp); color: var(--stamp);
  font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 2px;
  opacity: .75; letter-spacing: .04em;
}
.line.just .box { animation: stamp .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

.empty { text-align: center; color: var(--ink-2); padding: 24px 6px 8px; }
.empty .big { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }

/* ------------------------------------------------------------- totaux */

.totals { font-size: 13px; }
.totals .row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.totals .row.big { font-size: 17px; font-weight: 700; padding-top: 6px; }
.totals .row span:first-child { color: var(--ink-2); }
.totals .row.big span:first-child { color: var(--ink); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.actions .btn-stamp { grid-column: 1 / -1; }

/* code-barres du pied de ticket = bouton « scanner » */
.barcode {
  display: block; width: 100%;
  margin: 20px auto 0; padding: 0;
  border: 0; background: none; text-align: center;
  color: var(--ink-2); font-size: 11px;
}
.barcode .bars {
  height: 46px; margin: 0 auto 4px; width: 78%;
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px,
    var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px,
    var(--ink) 16px 17px, transparent 17px 19px, var(--ink) 19px 22px, transparent 22px 23px);
}
.barcode:active .bars { opacity: .7; }

/* ------------------------------------------------------------- déchirure */

.tearing { animation: tear .7s cubic-bezier(.55, 0, .7, .3) forwards; transform-origin: 30% 0; }
@keyframes tear {
  0% { transform: none; }
  25% { transform: rotate(-1.5deg) translateY(4px); }
  100% { transform: rotate(-6deg) translate(-12px, 120vh); opacity: .9; }
}
.fresh { animation: print .5s steps(10) both; clip-path: inset(0 0 0 0); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------- navigation */

nav.belt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--belt-2);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 6px 8px calc(6px + var(--safe-b));
  display: flex; justify-content: center;
}
nav.belt .in { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 460px; }
nav.belt button {
  border: 0; background: none; color: var(--belt-ink);
  display: grid; justify-items: center; gap: 2px;
  font-size: 11px; padding: 6px 0;
  opacity: .62;
}
nav.belt button svg { width: 22px; height: 22px; }
nav.belt button[aria-current="page"] { opacity: 1; color: #fff; }
nav.belt button[aria-current="page"] svg { color: #a9a5f5; }
nav.belt .badge { font-size: 10px; background: var(--alert); color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 2px; }

.offline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: #e8b13a; color: #2b2208; text-align: center; font-size: 12px; padding: 3px 8px calc(3px);
  padding-top: calc(3px + env(safe-area-inset-top, 0px));
}

/* ------------------------------------------------------------- feuilles */

#sheet-root:empty { display: none; }
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(16, 18, 22, .55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper);
  padding: 20px 18px calc(20px + var(--safe-b));
  animation: up .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 40px 4px 0; line-height: 1.15; }
.sheet .sub { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; }
.sheet .close { position: absolute; top: 10px; right: 8px; }

.field { display: block; margin: 12px 0; }
.field > span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--rule); border-radius: 3px;
  background: #fff;
  padding: 10px; font-size: 16px;
}
@media (prefers-color-scheme: dark) { .field input, .field select, .field textarea { background: var(--paper); } }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--stamp); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.row2 .field, .row3 .field { margin: 6px 0; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.btns > * { flex: 1; }
.btns > .stepper { flex: none; }
.hint { font-size: 12px; color: var(--ink-2); margin: 6px 0; }
.err { color: var(--alert); font-size: 13px; margin: 8px 0; }

.seg { display: flex; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: none; padding: 9px 4px; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; }
.check-row input { width: 20px; height: 20px; accent-color: var(--stamp); flex: none; margin-top: 1px; }

/* ------------------------------------------------------------- recette → courses */

.pick { border-top: 1px dotted var(--rule); }
.prow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border-bottom: 1px dotted var(--rule); }
.pick label {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline;
  padding: 10px 0; min-width: 0;
}
.pst {
  max-width: 116px; font-size: 13px; padding: 6px 4px; border: 1px solid var(--rule); border-radius: 3px;
  background: transparent; color: var(--ink-2);
}
.pst.known { color: var(--ink); font-weight: 700; border-color: var(--ink-3); }
.pst:disabled { opacity: .35; }
.pick input { width: 20px; height: 20px; accent-color: var(--ink); align-self: center; }
.pick .q { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.pick .why { display: block; font-size: 11.5px; color: var(--ok); }
.pick .off .nm, .pick .off .q { color: var(--ink-3); text-decoration: line-through; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 3px; }
.stepper button { border: 0; background: none; width: 38px; height: 36px; font-size: 18px; }
.stepper output { min-width: 66px; text-align: center; font-size: 13px; }

/* ------------------------------------------------------------- recettes */

.search {
  width: 100%; border: 1px solid var(--rule); border-radius: 3px; background: transparent;
  padding: 10px; font-size: 16px; margin: 4px 0 8px;
}
.recipe-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline;
  width: 100%; text-align: left; border: 0; background: none;
  padding: 12px 0; border-bottom: 1px dotted var(--rule);
}
.recipe-row .t { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.recipe-row .m { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }
.recipe-row .s { font-size: 12px; color: var(--ink-2); }

.recipe-head { text-align: left; }
.recipe-head h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 4px 0 8px; }
.recipe-img { width: calc(100% + 36px); margin: -22px -18px 14px; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.05); }
.ing-list { list-style: none; padding: 0; margin: 6px 0; }
.ing-list li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; }
.ing-list li .q { text-align: right; color: var(--ink-2); font-size: 13px; }
.ing-list li.opt { color: var(--ink-3); }
.steps { padding-left: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 6px; margin: 10px 0; font-size: 14px; line-height: 1.6; }
.steps li::before { content: counter(s) "."; color: var(--stamp); font-weight: 700; }

.ing-edit { display: grid; grid-template-columns: 48px 58px 1fr 30px; gap: 6px; align-items: center; margin: 6px 0; }
.ing-edit input, .ing-edit select { border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: 8px 6px; font-size: 15px; min-width: 0; width: 100%; }
@media (prefers-color-scheme: dark) { .ing-edit input, .ing-edit select { background: var(--paper); } }
.ing-edit .x { border: 0; background: none; color: var(--ink-3); height: 36px; }
.ing-edit .raw { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); margin-top: -4px; }

/* ------------------------------------------------------------- repas */

.week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.week-nav strong { font-weight: 600; font-size: 13px; }
.day { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dotted var(--rule); }
.day .d { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.day .d b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.day.today .d b { color: var(--stamp); }
.day .slots { display: grid; gap: 4px; }
.slot {
  display: flex; gap: 8px; align-items: baseline;
  border: 0; background: none; text-align: left; width: 100%;
  padding: 5px 0; font-size: 14px;
}
.slot small { color: var(--ink-3); width: 36px; flex: none; font-size: 11px; }
.slot .v.none { color: var(--ink-3); }
.slot .v.rec { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* ------------------------------------------------------------- placard */

.p-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.p-row .n { font-size: 14.5px; border: 0; background: none; text-align: left; padding: 4px 0; }
.p-row .n small { display: block; color: var(--ink-3); font-size: 11.5px; }
.p-row .n small.late { color: var(--alert); }
.p-row .n small.soon { color: #a15c07; }
.tag { font-size: 11px; border: 1px solid var(--rule); border-radius: 3px; padding: 3px 7px; background: none; color: var(--ink-2); white-space: nowrap; }
.tag.on { border-color: var(--alert); color: var(--alert); }

/* ------------------------------------------------------------- historique */

.trip { border-bottom: 1px dotted var(--rule); }
.trip summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; cursor: pointer; }
.trip summary::-webkit-details-marker { display: none; }
.trip summary .d { font-size: 14.5px; }
.trip summary .s { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }
.trip summary .n { font-size: 12px; color: var(--ink-2); }
.trip .ti { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 13px; padding: 3px 0; }
.trip .ti.miss { color: var(--alert); }
.trip .ti .q { color: var(--ink-2); }
.trip .btns { margin: 8px 0 14px; }

/* ------------------------------------------------------------- réglages */

.set-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dotted var(--rule); }
.set-row .sw { width: 14px; height: 14px; background: var(--c); border-radius: 2px; flex: none; }
.set-row .grow { flex: 1; }
.order-row { display: grid; grid-template-columns: 1fr 40px 40px; align-items: center; border-bottom: 1px dotted var(--rule); font-size: 13.5px; }
.order-row .icon-btn { width: 36px; height: 36px; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 32px; height: 32px; border-radius: 3px; border: 2px solid transparent; background: var(--c); }
.colors button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }

/* ------------------------------------------------------------- scan */

.scan-box { position: relative; background: #000; aspect-ratio: 4 / 3; margin: 8px 0; overflow: hidden; }
.scan-box #reader { width: 100%; height: 100%; }
.scan-box video { width: 100% !important; height: 100% !important; object-fit: cover; }
.scan-box .laser { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 8px #ef4444; pointer-events: none; }

/* ------------------------------------------------------------- mode magasin */

body.shop .line { padding: 14px 0; min-height: 56px; }
body.shop .line .name { font-size: 18px; }
body.shop .line .box { width: 30px; height: 30px; }
body.shop .usual, body.shop .add { display: none; }

/* ------------------------------------------------------------- connexion */

.login { max-width: 360px; margin: 10vh auto 0; }
.login .head h1 { font-size: 40px; }

#toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: 9px 14px; border-radius: 3px; font-size: 13px;
  max-width: calc(100vw - 32px);
  transition: opacity .2s, transform .2s;
  display: flex; gap: 12px; align-items: center;
  width: max-content;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { border: 0; background: none; color: #a9a5f5; text-decoration: underline; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 720px) {
  #app { padding-top: 36px; }
  .head h1 { font-size: 40px; }
}