/* ================================================================
   BLOCKORDER — shared design system  v2  "Refined Butchery Craft"
   ----------------------------------------------------------------
   Evolution of v1 (butcher's paper, oxblood, brass) executed at a
   premium level: tonal scales, real typographic hierarchy, layered
   depth, craft motifs (butcher stripe, grade-stamp brandmark,
   ticket perforation), and a bespoke SVG icon set replacing emoji.

   COMPATIBILITY: the six runtime brand variables are unchanged —
   --brand, --brand-dark, --brand-soft, --accent, --action, --good —
   so applyBrand() keeps re-skinning every screen per butchery.
   All derived tones are computed with color-mix() so they track
   whatever colours the shop picks. (Chrome 111+, fine for kiosk.)
   ================================================================ */

/* ----------------------------------------------------------------
   FONTS — self-hosted (the platform must work with no internet).
   Download once, ship in /static/fonts/, wire up with @font-face.
   Display: Fraunces (SemiBold 600, Black 900 + italic axis unused)
   UI/body: Inter    (Regular 400, SemiBold 600, ExtraBold 800)
   Fallbacks keep every screen usable before fonts load.
   ---------------------------------------------------------------- */
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/Fraunces-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/Fraunces-Black.woff2')    format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Inter';    src: url('/static/fonts/Inter-Regular.woff2')     format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter';    src: url('/static/fonts/Inter-SemiBold.woff2')    format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter';    src: url('/static/fonts/Inter-ExtraBold.woff2')   format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* ---- Brand (overwritten from settings by applyBrand) ---- */
  --brand:      #6B1D27;   /* oxblood        */
  --brand-dark: #471218;   /* oxblood, deep  */
  --brand-soft: #8C3A44;   /* oxblood, lifted*/
  --accent:     #B08420;   /* brass          */
  --action:     #B3222F;   /* butcher red    */
  --good:       #47663A;   /* herb green     */

  /* ---- Derived brand tones (track applyBrand automatically) ---- */
  --brand-ink:     color-mix(in srgb, var(--brand) 62%, #16090b);
  --brand-tint:    color-mix(in srgb, var(--brand) 8%,  var(--bone));
  --brand-wash:    color-mix(in srgb, var(--brand) 16%, var(--paper));
  --accent-bright: color-mix(in srgb, var(--accent) 72%, #ffd977);
  --accent-deep:   color-mix(in srgb, var(--accent) 70%, #4a3406);
  --accent-tint:   color-mix(in srgb, var(--accent) 14%, var(--bone));
  --good-tint:     color-mix(in srgb, var(--good) 11%,  var(--bone));
  --action-tint:   color-mix(in srgb, var(--action) 10%, var(--bone));

  /* ---- Fixed neutrals — warm, paper-born ---- */
  --paper:      #F3EBDD;   /* butcher's paper       */
  --paper-deep: #EADFCB;   /* paper, shaded         */
  --bone:       #FFFDF8;   /* cards                 */
  --char:       #26211D;   /* ink                   */
  --char-soft:  #6E6459;   /* ink, secondary        */
  --char-faint: #9C9184;   /* ink, tertiary         */
  --line:       #E2D5BF;   /* hairlines             */
  --line-soft:  #EDE3D1;   /* subtler hairlines     */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ---- Depth (layered, warm-tinted shadows) ---- */
  --shadow-1: 0 1px 2px rgba(60,42,28,.07), 0 2px 8px -2px rgba(60,42,28,.10);
  --shadow-2: 0 1px 2px rgba(60,42,28,.08), 0 6px 18px -6px rgba(60,42,28,.22);
  --shadow-3: 0 2px 4px rgba(60,42,28,.10), 0 16px 40px -14px rgba(60,42,28,.38);
  --shadow-press: inset 0 2px 5px rgba(60,42,28,.18);

  /* ---- Radius scale ---- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* v1 compatibility: screens' inline styles still reference --shadow */
  --shadow: var(--shadow-2);

  /* ---- Craft motifs ---- */
  --stripe: repeating-linear-gradient(-45deg,
      var(--action) 0 14px, #F7F1E6 14px 28px);           /* awning stripe  */
  --stripe-band: repeating-linear-gradient(-45deg,
      rgba(255,255,255,.16) 0 10px, transparent 10px 20px);/* on dark bars  */
  --grain:
      repeating-linear-gradient(0deg,  rgba(87,60,32,.020) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(87,60,32,.016) 0 1px, transparent 1px 3px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    var(--grain);
  color: var(--char);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: 'ss01' 1;
}

/* ================================================================
   ICONS — bespoke line-art set, drawn for BlockOrder.
   Inline the sprite once per page (icons-sprite.svg), then:
     <svg class="ic"><use href="#ic-beef"/></svg>
   Icons inherit currentColor; size with font-size or .ic-* helpers.
   ================================================================ */
.ic { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.22em;
      fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }
.ic-lg  { width: 34px; height: 34px; }
.ic-xl  { width: 46px; height: 46px; stroke-width: 1.5; }
.ic-hero{ width: 72px; height: 72px; stroke-width: 1.25; }

/* ================================================================
   SHARED HEADER — deeper gradient, stripe sheen, brass rule,
   grade-stamp brandmark.
   ================================================================ */
.app-header {
  background: var(--brand);
  background-image:
    linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 52%, var(--brand-ink) 100%);
  color: #fff;
  /* safe-area: installed on an iPhone the app draws under the status bar */
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 14px;
  position: relative;
  box-shadow: 0 3px 14px -4px rgba(30,10,12,.5);
}
.app-header::after {           /* brass double rule */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background:
    linear-gradient(90deg, var(--accent-deep), var(--accent-bright) 30%, var(--accent) 55%, var(--accent-bright) 80%, var(--accent-deep));
  box-shadow: 0 -2px 0 rgba(255,255,255,.14);
}
.brandline { display: flex; align-items: center; gap: 14px; }

/* Grade-stamp brandmark: double ring + tick marks, like an ink stamp */
.brandmark {
  width: 52px; height: 52px; flex: 0 0 52px; position: relative;
  border-radius: 50%; display: grid; place-items: center; font-size: 23px;
  color: var(--accent-bright);
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.10), rgba(0,0,0,.28) 72%);
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 4.5px transparent, inset 0 0 0 1px rgba(0,0,0,.35),
              0 2px 6px rgba(0,0,0,.35);
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}
.brandline h1 {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: 22px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.08;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.brandline .tag {
  font-size: 10.5px; letter-spacing: 3.4px; text-transform: uppercase;
  color: var(--accent-bright); font-weight: 700; margin-top: 3px; opacity: .95;
}

/* ================================================================
   CARDS & SECTIONS
   ================================================================ */
.card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-2);
  position: relative;
}
.card::before {                /* top light-catch */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgba(255,255,255,.85);
}
h2.sec {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: .6px; color: var(--brand-ink);
  display: flex; align-items: center; gap: 9px;
}
h2.sec .ic { color: var(--accent-deep); }
.sec-rule {                    /* short brass underline for section heads */
  width: 44px; height: 3px; border-radius: 2px; margin: 6px 0 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}
.sub { font-size: 13.5px; color: var(--char-soft); margin: 0 0 14px; }

/* ================================================================
   BUTTONS — gradient body, inner highlight, honest pressed state
   ================================================================ */
.btn {
  border: 0; border-radius: var(--r-md); padding: 13px 22px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .3px;
  color: #fff; background: var(--brand);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff) 0%, var(--brand) 38%, var(--brand-ink) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(40,20,12,.25), 0 5px 14px -6px rgba(40,20,12,.45);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-press), 0 1px 2px rgba(40,20,12,.2); }
.btn.action { background: var(--action);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--action) 74%, #ffb199) 0%, var(--action) 40%, color-mix(in srgb, var(--action) 62%, #3d0208) 100%); }
.btn.good { background: var(--good);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--good) 72%, #d6e8b8) 0%, var(--good) 40%, color-mix(in srgb, var(--good) 62%, #14230c) 100%); }
.btn.brass { background: var(--accent); color: #2A1D04;
  background-image: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.btn.ghost { background: none; color: var(--brand); border: 2px solid var(--line);
  box-shadow: none; }
.btn.ghost:hover { background: rgba(107,29,39,.05); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); filter: none; }
.btn.small { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn.big { padding: 18px 28px; font-size: 18px; border-radius: var(--r-lg); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px;
}

/* ================================================================
   FORMS
   ================================================================ */
label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--char-soft); margin: 0 0 6px;
}
input[type=text], input[type=tel], input[type=number], input[type=date],
input[type=password], input[type=color], textarea, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; font: inherit; background: #fff; color: var(--char);
  margin-bottom: 14px; box-shadow: inset 0 1.5px 4px rgba(60,42,28,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--brand-soft);
  box-shadow: inset 0 1.5px 4px rgba(60,42,28,.06), 0 0 0 3.5px color-mix(in srgb, var(--brand) 14%, transparent);
}
textarea { min-height: 62px; resize: vertical; }
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }

/* ================================================================
   CHIPS
   ================================================================ */
.chip {
  padding: 11px 18px; border-radius: var(--r-pill); cursor: pointer; font: inherit;
  font-weight: 700; font-size: 14px; border: 1.5px solid var(--line);
  background: var(--bone); color: var(--char); letter-spacing: .3px;
  box-shadow: var(--shadow-1);
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.chip:active { transform: scale(.96); }
.chip.on {
  background: var(--brand); border-color: var(--brand-ink); color: #fff;
  background-image: linear-gradient(180deg, var(--brand-soft), var(--brand));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-1);
}
.chip.good.on { background: var(--good); border-color: color-mix(in srgb, var(--good) 70%, #000);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--good) 80%, #fff), var(--good)); }
.chiprow { display: flex; flex-wrap: wrap; gap: 9px; }

/* ================================================================
   MODAL SHEET — paper sheet with brass spine
   ================================================================ */
.sheet-bg {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--brand-ink) 55%, rgba(20,12,8,.55));
  backdrop-filter: blur(3px);
}
.sheet-bg.on { display: flex; }
.sheet {
  background: var(--paper); background-image: var(--grain);
  width: 100%; max-width: 600px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 24px 22px 28px;
  max-height: 94vh; overflow-y: auto;
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow-3);
}
@media (min-width: 640px) {
  .sheet-bg { align-items: center; padding: 20px; }
  .sheet { border-radius: var(--r-xl); }
}
.sheet h3 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 900;
  font-size: 23px; letter-spacing: .3px; color: var(--brand-ink); }

/* ================================================================
   BADGES & MISC
   ================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
}
.badge.paid { background: var(--good-tint); color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.badge.unpaid { background: var(--action-tint); color: var(--action);
  border: 1px solid color-mix(in srgb, var(--action) 35%, transparent); }
.empty { color: var(--char-faint); font-size: 13.5px; font-style: italic; padding: 10px 2px; }

/* Butcher-stripe band — thin craft accent, use sparingly */
.stripe-band { height: 7px; background: var(--stripe); border-radius: 4px;
  opacity: .85; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }

/* Ticket perforation edge (prep-board tickets, kiosk slip card) */
.perf { position: relative; }
.perf::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background-image: radial-gradient(circle, var(--paper) 1.6px, transparent 1.8px);
  background-size: 11px 2px; background-repeat: repeat-x;
}