/*
 * butter.css - the shared Butter kit stylesheet (staff app and admin screens).
 * Owner: Builder A. Builder B builds on this; keep names stable.
 *
 * Load order in a page:
 *   <link rel="stylesheet" href="/shared/butter.css">
 *   <script src="/shared/api.js"></script>
 *   <script src="/shared/shell.js"></script>
 *
 * Page skeleton (shell.js fills #bt-header and #bt-nav):
 *   <body class="bt-app">
 *     <header id="bt-header" class="bt-header"></header>
 *     <main id="bt-main" class="bt-main"> ... </main>
 *     <nav id="bt-nav" class="bt-nav"></nav>
 *   </body>
 *
 * Tokens (CSS variables, Butter only, never blend with Bekedo palettes):
 *   --bt-yellow #FCFF94   primary brand colour, primary buttons, active nav
 *   --bt-toast  #412D17   Warm Toast, dark surfaces and text
 *   --bt-white  #FFFFFF   cards
 *   --bt-cream  #EFECE5   page background
 *   --bt-muted  #BBBBB4   borders, secondary text on dark
 *   --bt-muted-text #6B5B4A  secondary text on light (readable on cream and white)
 *   --bt-gold   #F7B614   accent, used sparingly (warning banner edge)
 *   --bt-red    #A12B1E   errors
 *   Radius: --bt-radius-pill 48px (buttons), --bt-radius-card 24px (cards and
 *   panels), --bt-radius-tight 8px (dense tables and list rows).
 *
 * Classes:
 *   Layout    .bt-app .bt-header .bt-main .bt-nav .bt-stack .bt-row .bt-spread
 *   Type      .bt-h1 .bt-h2 .bt-muted .bt-small .bt-num (tabular figures)
 *   Buttons   .bt-btn  + .bt-btn--primary (yellow) | .bt-btn--dark | .bt-btn--ghost
 *             .bt-btn--block (full width) .bt-btn--big (scan button)
 *   Cards     .bt-card  .bt-card--toast (dark card)
 *   Banners   .bt-banner + .bt-banner--info | --warn | --error | --ok  (role=alert)
 *   Forms     .bt-field (label + input wrapper)  .bt-input  .bt-select  .bt-textarea
 *   Lists     .bt-list (ul) > .bt-item (li, tight radius)  .bt-item__main  .bt-item__side
 *   Status    .bt-tag + .bt-tag--ok | --wait | --no   (small pill label)
 *   Misc      .bt-hidden  .bt-spinner  .bt-sr (screen-reader only)
 *
 * Rules built in: phone first, 48px minimum tap target, inputs 16px (no iOS
 * zoom), no hover-only behaviour (only :active and :focus-visible), no emoji,
 * no max-height animation.
 */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('/shared/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/shared/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/shared/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('/shared/fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url('/shared/fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url('/shared/fonts/jost-latin-600-normal.woff2') format('woff2'); }

:root {
  --bt-yellow: #FCFF94;
  --bt-toast: #412D17;
  --bt-white: #FFFFFF;
  --bt-cream: #EFECE5;
  --bt-muted: #BBBBB4;
  --bt-muted-text: #6B5B4A;
  --bt-gold: #F7B614;
  --bt-red: #A12B1E;
  --bt-green: #2F5D2A;
  --bt-radius-pill: 48px;
  --bt-radius-card: 24px;
  --bt-radius-tight: 8px;
  --bt-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bt-font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bt-gutter: 16px;
  --bt-nav-h: 64px;
  --bt-header-h: 60px;
  --bt-duck-h: 36px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bt-app {
  margin: 0;
  background: var(--bt-cream);
  color: var(--bt-toast);
  font-family: var(--bt-font-body);
  font-size: 18px;
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Shell */
/* Header: a bar and, in the admin app, a tab row under it. The bar is one line that never wraps its
   contents: the duck, the title, then who is signed in and Log out. If the width runs out the title
   gives way first (two lines at most), then the first name is cut with an ellipsis; Log out never
   wraps. --bt-duck-h is the one number that decides how much room the title gets at 390px. */
.bt-header {
  position: sticky; top: 0; z-index: 10;
  padding: 8px var(--bt-gutter);
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--bt-toast); color: var(--bt-yellow);
}
.bt-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: calc(var(--bt-header-h) - 16px); }
.bt-header__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bt-header__duck { display: block; height: var(--bt-duck-h); width: auto; flex: none; }
.bt-header__home { display: flex; align-items: center; min-width: 44px; min-height: 44px; flex: none; border-radius: var(--bt-radius-pill); }
.bt-header__home:focus-visible { outline: 3px solid var(--bt-yellow); outline-offset: 2px; }
.bt-header__title { font-family: var(--bt-font-head); font-weight: 700; font-size: 16px; line-height: 1.15; margin: 0; letter-spacing: -0.4px; min-width: 0; }
.bt-header__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.bt-header__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-header__link {
  color: var(--bt-yellow); background: transparent; border: 1px solid var(--bt-yellow);
  border-radius: var(--bt-radius-pill); min-height: 44px; padding: 0 12px;
  font: 600 14px var(--bt-font-head); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; white-space: nowrap; flex: none;
}
.bt-main {
  max-width: 640px; margin: 0 auto;
  padding: var(--bt-gutter);
  padding-bottom: calc(var(--bt-nav-h) + 24px + env(safe-area-inset-bottom, 0px));
}
.bt-main--nonav { padding-bottom: 24px; }
.bt-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  min-height: var(--bt-nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bt-toast);
  display: flex; justify-content: space-around;
}
.bt-nav:empty { display: none; }
.bt-nav a {
  flex: 1; min-height: var(--bt-nav-h); display: flex; align-items: center; justify-content: center;
  color: var(--bt-muted); text-decoration: none; font: 600 13px var(--bt-font-head); text-align: center; padding: 0 4px;
}
.bt-nav a[aria-current="page"] { color: var(--bt-toast); background: var(--bt-yellow); }

/* Tab row under the bar (admin app): plain text tabs, the current one on yellow. The header's own
   8px padding sits under it, and .bt-main adds the gutter: 16px or more above the first heading. */
.bt-nav--tabs {
  position: static; min-height: 0; margin-top: 4px; padding: 0; background: transparent;
  justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bt-nav--tabs::-webkit-scrollbar { display: none; }
.bt-nav--tabs a {
  flex: 1 1 0; min-width: max-content; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--bt-yellow);
  border-radius: var(--bt-radius-pill); white-space: nowrap;
}
.bt-nav--tabs a[aria-current="page"] { color: var(--bt-toast); background: var(--bt-yellow); }

/* Layout helpers */
.bt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bt-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-hidden { display: none !important; }
.bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.bt-h1 { font-family: var(--bt-font-head); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 8px; }
.bt-h2 { font-family: var(--bt-font-head); font-weight: 700; font-size: 18px; line-height: 1.2; margin: 0 0 8px; }
.bt-muted { color: var(--bt-muted-text); }
.bt-small { font-size: 15px; }
.bt-num { font-variant-numeric: tabular-nums; font-family: var(--bt-font-head); font-weight: 600; }
/* After the type rules on purpose: headings in a stack keep the gap above them. */
.bt-stack > * + * { margin-top: 16px; }

/* Buttons */
.bt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px;
  border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-pill);
  background: transparent; color: var(--bt-toast);
  font: 700 15px var(--bt-font-head); text-decoration: none; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bt-btn--primary { background: var(--bt-yellow); color: #000; border-color: var(--bt-toast); }
.bt-btn--dark { background: var(--bt-toast); color: var(--bt-yellow); }
.bt-btn--ghost { background: transparent; }
.bt-btn--block { display: flex; width: 100%; }
.bt-btn--big { min-height: 72px; font-size: 20px; }
.bt-btn:active { transform: scale(0.98); }
.bt-btn:focus-visible, .bt-input:focus-visible, .bt-select:focus-visible, .bt-textarea:focus-visible, .bt-nav a:focus-visible, .bt-header__link:focus-visible {
  outline: 3px solid var(--bt-toast); outline-offset: 2px;
}
.bt-btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

/* The header is dark, so its focus ring is yellow */
.bt-header a:focus-visible, .bt-header button:focus-visible { outline: 3px solid var(--bt-yellow); outline-offset: 2px; }

/* Cards */
.bt-card { background: var(--bt-white); border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-card); padding: 20px; }
.bt-card--toast { background: var(--bt-toast); color: var(--bt-yellow); border-color: var(--bt-toast); }

/* Banners */
.bt-banner { border-radius: var(--bt-radius-card); padding: 14px 18px; border: 2px solid var(--bt-toast); background: var(--bt-white); font-size: 17px; }
.bt-banner--info { background: var(--bt-yellow); }
.bt-banner--warn { background: #FFF1C2; border-color: var(--bt-gold); }
.bt-banner--error { background: #FBE4E0; border-color: var(--bt-red); color: var(--bt-red); }
.bt-banner--ok { background: #E4F0E2; border-color: var(--bt-green); color: var(--bt-green); }

/* Forms */
.bt-field { display: block; }
.bt-field > span { display: block; font: 600 15px var(--bt-font-head); margin-bottom: 6px; }
.bt-input, .bt-select, .bt-textarea {
  width: 100%; min-height: 48px; padding: 10px 16px;
  font: 400 16px var(--bt-font-body); color: var(--bt-toast);
  background: var(--bt-white); border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-tight);
}
/* Date and month inputs: iOS Safari gives them an intrinsic width that can push past the card, and an
   empty one shows nothing. Pin the box, drop the native chrome, keep a 44px+ tap height; the hint line
   (BtShell, shell.js) says what the empty field is for, because iOS ignores placeholder on dates. */
input[type="date"].bt-input, input[type="month"].bt-input {
  display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; min-height: 48px; line-height: 1.4; text-align: left;
}
input[type="date"].bt-input::-webkit-date-and-time-value, input[type="month"].bt-input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.bt-hint { display: block; margin: 4px 0 0; font: 400 14px var(--bt-font-body); color: var(--bt-muted-text, #6B5A47); }
.bt-textarea { min-height: 112px; resize: vertical; }
/* Every select, on every page: one look, the same box as the month picker button (.bt-month__btn): 48px,
   2px Warm Toast edge, tight radius, 16px text, and the same small triangle in the same place (10px by 6px,
   16px from the right edge). Native chrome is dropped so iOS, Android and desktop draw the same height.
   Set here once: a new select inherits it and needs no page rule. The triangle colour is --bt-toast. */
select.bt-select {
  -webkit-appearance: none; appearance: none; height: 48px; line-height: 1.4;
  padding: 0 42px 0 16px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background: var(--bt-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23412D17'/%3E%3C/svg%3E") no-repeat right 16px center / 10px 6px;
}
select.bt-select:disabled { cursor: default; opacity: 0.6; }

/* Lists */
.bt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-item {
  background: var(--bt-white); border: 1px solid var(--bt-muted); border-radius: var(--bt-radius-tight);
  padding: 12px 14px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bt-item__main { min-width: 0; }
.bt-item__side { text-align: right; flex: none; }

/* Status tags */
.bt-tag { display: inline-block; padding: 2px 12px; border-radius: var(--bt-radius-pill); font: 600 13px var(--bt-font-head); border: 1.5px solid var(--bt-toast); background: var(--bt-white); }
.bt-tag--ok { background: #E4F0E2; border-color: var(--bt-green); color: var(--bt-green); }
.bt-tag--wait { background: var(--bt-yellow); }
.bt-tag--no { background: #FBE4E0; border-color: var(--bt-red); color: var(--bt-red); }

/* Welcome card: numbered steps, shown once per browser (BtShell.welcome) */
.bt-welcome .bt-card { border: 2px solid var(--bt-gold); }
.bt-steps { margin: 0 0 16px; padding-left: 24px; }
.bt-steps li + li { margin-top: 10px; }

.bt-spinner { width: 28px; height: 28px; border: 4px solid var(--bt-muted); border-top-color: var(--bt-toast); border-radius: 50%; animation: bt-spin 0.8s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-spinner { animation-duration: 2.4s; } .bt-btn:active { transform: none; } }

/* Login pages: brand block above the card, centred on the screen */
.bt-login { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; max-width: 440px; }
.bt-brand { text-align: center; margin-bottom: 20px; }
.bt-brand__duck { display: block; width: 150px; height: auto; margin: 0 auto 12px; }
.bt-brand__word { display: block; width: 132px; height: auto; margin: 0 auto 8px; border-radius: var(--bt-radius-tight); }
.bt-brand p { margin: 0; }

/* Small text link with a full-size tap target */
.bt-textlink { display: inline-flex; align-items: center; min-height: 48px; color: var(--bt-toast); font: 600 15px var(--bt-font-head); text-decoration: underline; text-underline-offset: 3px; }
.bt-textlink:focus-visible { outline: 3px solid var(--bt-toast); outline-offset: 2px; }

/* Disclosure rows (details/summary): full-size tap target, a drawn arrow */
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ''; flex: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
details[open] > summary::before { transform: rotate(90deg); }
summary:focus-visible { outline: 3px solid var(--bt-toast); outline-offset: 2px; }

/* Names as grey bars stacked under each other (BtShell.nameStacks): Off today. One column on a phone,
   two groups side by side from 700px, each with its own stack. */
.bt-offgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .bt-offgrid:not(.bt-offgrid--one) { grid-template-columns: 1fr 1fr; align-items: start; } }
.bt-offgroup__h { margin: 0 0 8px; font: 600 14px var(--bt-font-head); color: var(--bt-muted-text); }
.bt-offgroup > p { margin: 0; }
.bt-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-names li {
  min-height: 44px; display: flex; align-items: center; padding: 8px 12px;
  background: var(--bt-cream); border: 1px solid var(--bt-muted); border-radius: var(--bt-radius-tight);
  font: 600 15px var(--bt-font-head);
}

/* Off today as a closed disclosure card (BtShell.offDisclosure): the same look as the Today sections,
   with the counts on the bar so it reads without opening. */
.bt-disc { background: var(--bt-white); border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-tight); }
.bt-disc > summary { min-height: 48px; padding: 0 12px; gap: 10px; }
.bt-disc[open] > summary { border-bottom: 2px solid var(--bt-toast); }
.bt-disc__title { font: 700 16px var(--bt-font-head); white-space: nowrap; }
.bt-disc__badges { margin-left: auto; display: flex; gap: 6px; flex: none; }
.bt-disc__badges .bt-tag { white-space: nowrap; font-size: 12px; padding: 2px 8px; }
.bt-disc__body { padding: 12px; }
.bt-disc__body > p { margin: 0 0 12px; }

/* Month picker (BtShell.monthPicker): a button, and under it a year row and a grid of twelve months */
.bt-month { position: relative; }
.bt-month__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 10px 16px;
  font: 400 16px var(--bt-font-body); color: var(--bt-toast); text-align: left; cursor: pointer;
  background: var(--bt-white); border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-tight);
}
.bt-month__btn::after { content: ''; flex: none; border-top: 6px solid currentColor; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.bt-month__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: 288px; max-width: calc(100vw - 32px); padding: 12px;
  background: var(--bt-white); border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-tight);
}
.bt-month__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bt-month__year { font: 700 16px var(--bt-font-head); }
.bt-month__nav {
  min-height: 44px; min-width: 64px; padding: 0 12px; cursor: pointer; font: 700 14px var(--bt-font-head); color: var(--bt-toast);
  background: transparent; border: 2px solid var(--bt-toast); border-radius: var(--bt-radius-pill);
}
.bt-month__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-month__cell {
  min-height: 44px; cursor: pointer; font: 600 15px var(--bt-font-head); color: var(--bt-toast);
  background: var(--bt-white); border: 1px solid var(--bt-muted); border-radius: var(--bt-radius-tight);
}
.bt-month__cell[aria-pressed="true"] { background: var(--bt-yellow); border: 2px solid var(--bt-toast); }
.bt-month__btn:focus-visible, .bt-month__nav:focus-visible, .bt-month__cell:focus-visible { outline: 3px solid var(--bt-toast); outline-offset: 2px; }

/* A list or screen with nothing in it */
.bt-empty { text-align: center; padding: 8px 0 4px; }
.bt-empty img { display: block; width: 88px; height: auto; margin: 0 auto 8px; }
.bt-empty p { margin: 0; }

/* ---- Scan: the camera frame and the big result word, shared by the staff and admin Scan pages ---- */
.scan-frame { position: relative; background: var(--bt-toast); border-radius: var(--bt-radius-card); overflow: hidden; aspect-ratio: 3 / 4; max-height: 70vh; width: 100%; }
.scan-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame::after { content: ''; position: absolute; inset: 18% 14%; border: 4px solid var(--bt-yellow); border-radius: var(--bt-radius-card); pointer-events: none; }
.scan-big { font-family: var(--bt-font-head); font-weight: 700; font-size: 28px; margin: 0; }