/*
 * Business-type looks. Loaded after app.css / bar.css / admin.css on every page.
 * The bar look is the default in those files, so it needs nothing here.
 * <html data-biz="burger|poutine"> picks a look; data-mode="dark" is the order screen on the iPad.
 * Colours here must match 'colors' in app/lib/themes.php (used for Stripe and the browser bar).
 */

/* =====================================================================
 * BURGER SHACK: diner cream, char-brown ink, ketchup red and mustard,
 * red gingham like a picnic table. Type: Passion One + Archivo.
 * ===================================================================== */
html[data-biz="burger"] {
  --paper: #FAEFD9;
  --card: #FFFAF0;
  --ink: #22160F;
  --ink-2: #4A382C;
  --muted: #7A6454;
  --rule: #E8D3B3;
  --signal: #FFB81C;
  --signal-tint: #FFEDC4;
  --go: #1E7B40;
  --go-tint: #E0F0E4;
  --stop: #C42B1C;
  --stop-tint: #FBE5E1;
  --accent: #D52F1D;
  --display: "Passion One", "Arial Black", Impact, sans-serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23D52F1D'/%3E%3Cpath d='M6 15.5a10 8 0 0 1 20 0z' fill='%23FFB81C'/%3E%3Crect x='5' y='17.5' width='22' height='4' rx='2' fill='%2322160F'/%3E%3Cpath d='M6 23h20v1.5a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 6 24.5z' fill='%23FFB81C'/%3E%3C/svg%3E");
  font-synthesis: none;
}
/* Kitchen screen (dark) */
html[data-biz="burger"][data-mode="dark"] {
  --bg: #191210;
  --panel: #231915;
  --panel-2: #30241D;
  --line: #47372D;
  --text: #FFF3E0;
  --muted: #BCA898;
  --faint: #806D60;
  --ink: #22160F;
  --signal: #FFB81C;
  --go: #2DBA6E;
  --stop: #FF5B45;
  --accent: #E5402C;
}

/* Gingham bands */
html[data-biz="burger"] body::before {
  height: 14px;
  background:
    linear-gradient(90deg, rgb(213 47 29 / .6) 50%, transparent 0) 0 0 / 14px 14px,
    linear-gradient(rgb(213 47 29 / .6) 50%, transparent 0) 0 0 / 14px 14px,
    #FFFAF0;
}
html[data-biz="burger"] .cart-bar::before,
html[data-biz="burger"] .checker-band,
html[data-biz="burger"] .pin-body::before {
  background:
    linear-gradient(90deg, rgb(213 47 29 / .75) 50%, transparent 0) 0 0 / 10px 10px,
    linear-gradient(rgb(213 47 29 / .75) 50%, transparent 0) 0 0 / 10px 10px,
    #FFFAF0;
}
html[data-biz="burger"] .status-hero.ready::before,
html[data-biz="burger"] .status-hero.ready::after {
  background:
    linear-gradient(90deg, rgb(255 255 255 / .55) 50%, transparent 0) 0 0 / 14px 14px,
    linear-gradient(rgb(255 255 255 / .55) 50%, transparent 0) 0 0 / 14px 14px;
}
html[data-biz="burger"] .poster::before,
html[data-biz="burger"] .poster::after {
  background:
    linear-gradient(90deg, rgb(213 47 29 / .7) 50%, transparent 0) 0 0 / 22px 22px,
    linear-gradient(rgb(213 47 29 / .7) 50%, transparent 0) 0 0 / 22px 22px,
    #fff;
}

/* "In the works" stripes: ketchup and mustard */
html[data-biz="burger"] .last-call::before,
html[data-biz="burger"] .status-hero.making::before {
  background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, var(--accent) 12px 24px);
}
html[data-biz="burger"] .progress div.live {
  background: repeating-linear-gradient(-45deg, var(--signal) 0 6px, var(--accent) 6px 12px);
}

/* Red buttons, rounder corners */
html[data-biz="burger"] .btn.primary { background: var(--accent); border-color: var(--ink); color: #fff; }
html[data-biz="burger"] .btn.primary:hover { background: #BF2716; }
html[data-biz="burger"] .cat-nav a.active { background: var(--accent); color: #fff; }
html[data-biz="burger"] .cat h2::after { height: 4px; border-radius: 2px; background: var(--accent); }
html[data-biz="burger"] :is(.btn, .card, .tip, .chip, .stepper, .tip-custom, .optin, .notice, a.track, .last-call,
  .field input, .note-toggle textarea, .error, .panel, .stat, .open-card, .key, .tbtn, .switch, .ocard, .rcard,
  .btn-ready, .btn-pick, .btn-more, .sheet, .sheet-btn, .start-btn, .mp-item, .toast) { border-radius: 12px; }
html[data-biz="burger"] .status-hero { border-radius: 18px; }
html[data-biz="burger"] .item { border-radius: 10px; }

/* =====================================================================
 * POUTINE: cheese-curd cream, gravy-brown ink, fry gold and Quebec blue,
 * a striped, scalloped awning like a casse-croûte. Type: Lilita One + Figtree.
 * ===================================================================== */
html[data-biz="poutine"] {
  --paper: #F8F2E7;
  --card: #FFFDF7;
  --ink: #2C1D13;
  --ink-2: #4F3D30;
  --muted: #7B6A5C;
  --rule: #E6DAC6;
  --signal: #FFC52E;
  --signal-tint: #FFF1C9;
  --go: #19804B;
  --go-tint: #DFF0E5;
  --stop: #C4271C;
  --stop-tint: #FBE6E3;
  --accent: #1E4FA0;
  --display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231E4FA0'/%3E%3Cpath d='M9 7h4v10H9zM14.5 5h4v12h-4zM20 8h4v9h-4z' fill='%23FFC52E'/%3E%3Cpath d='M5 15h22a11 10 0 0 1-22 0z' fill='%23FFFDF7'/%3E%3Cpath d='M7 15h18c0 2.5-2.5 3.6-4 3-1.6 1.6-3.4 1.6-5 0-1.6 1.4-3.6 1.2-4.6-.4C9.6 18 7 17.4 7 15z' fill='%237A4520'/%3E%3C/svg%3E");
  font-synthesis: none;
}
/* Kitchen screen (dark): night navy */
html[data-biz="poutine"][data-mode="dark"] {
  --bg: #111621;
  --panel: #19202E;
  --panel-2: #232B3C;
  --line: #353F55;
  --text: #F8F2E7;
  --muted: #A8AEBD;
  --faint: #6D7488;
  --ink: #2C1D13;
  --signal: #FFC52E;
  --go: #2DBA6E;
  --stop: #FF5B45;
  --accent: #4D7FD6;
}

/* Awning: blue and cream stripes with a scalloped edge */
html[data-biz="poutine"] body::before {
  height: 20px;
  background: linear-gradient(90deg, var(--accent) 50%, #fff 0) 0 0 / 32px 100%;
  -webkit-mask: radial-gradient(circle 8px at 8px 12px, #000 96%, #0000) 0 0 / 16px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 12px no-repeat;
          mask: radial-gradient(circle 8px at 8px 12px, #000 96%, #0000) 0 0 / 16px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 12px no-repeat;
}
html[data-biz="poutine"] .cart-bar::before,
html[data-biz="poutine"] .checker-band,
html[data-biz="poutine"] .pin-body::before {
  background: linear-gradient(90deg, var(--accent) 50%, #FFFDF7 0) 0 0 / 20px 100%;
}
html[data-biz="poutine"][data-mode="dark"] .checker-band,
html[data-biz="poutine"][data-mode="dark"] .pin-body::before {
  background: linear-gradient(90deg, #1E4FA0 50%, #FFFDF7 0) 0 0 / 20px 100%;
}
html[data-biz="poutine"] .status-hero.ready::before,
html[data-biz="poutine"] .status-hero.ready::after {
  background: linear-gradient(90deg, rgb(255 255 255 / .7) 50%, transparent 0) 0 0 / 20px 100%;
}
html[data-biz="poutine"] .poster::before,
html[data-biz="poutine"] .poster::after {
  background: linear-gradient(90deg, var(--accent) 50%, #fff 0) 0 0 / 40px 100%;
}

/* "In the works" stripes: fry gold and blue */
html[data-biz="poutine"] .last-call::before,
html[data-biz="poutine"] .status-hero.making::before {
  background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, var(--accent) 12px 24px);
}
html[data-biz="poutine"] .progress div.live {
  background: repeating-linear-gradient(-45deg, var(--signal) 0 6px, var(--accent) 6px 12px);
}

/* Blue buttons, soft round corners */
html[data-biz="poutine"] .btn.primary { background: var(--accent); border-color: var(--ink); color: #fff; }
html[data-biz="poutine"] .btn.primary:hover { background: #18438A; }
html[data-biz="poutine"] .cat-nav a.active { background: var(--accent); color: #fff; }
html[data-biz="poutine"] .cat h2::after { height: 4px; border-radius: 2px; background: var(--accent); }
html[data-biz="poutine"] :is(.btn, .card, .tip, .chip, .stepper, .tip-custom, .optin, .notice, a.track, .last-call,
  .field input, .note-toggle textarea, .error, .panel, .stat, .open-card, .key, .tbtn, .switch, .ocard, .rcard,
  .btn-ready, .btn-pick, .btn-more, .sheet, .sheet-btn, .start-btn, .mp-item, .toast) { border-radius: 16px; }
html[data-biz="poutine"] .status-hero { border-radius: 22px; }
html[data-biz="poutine"] .item { border-radius: 12px; }

/* =====================================================================
 * Shared by the food looks
 * ===================================================================== */
/* The brand mark is the business icon instead of the checkered flag. */
html:is([data-biz="burger"], [data-biz="poutine"]) :is(.dot, .flag, .spinner, .start-flag, .adm-top .dot) {
  background: var(--icon) center / contain no-repeat;
  border-radius: 0;
}
html:is([data-biz="burger"], [data-biz="poutine"]) .dot { width: 22px; height: 22px; }
/* Loyalty stamps are little burgers / poutines */
html:is([data-biz="burger"], [data-biz="poutine"]) .stamp.on { border-radius: 22%; background: var(--icon) center / cover no-repeat; border-color: var(--ink); }
html:is([data-biz="burger"], [data-biz="poutine"]) .stamp.on::after { display: none; }
html:is([data-biz="burger"], [data-biz="poutine"]) .stamp { border-radius: 22%; }
html:is([data-biz="burger"], [data-biz="poutine"]) .spinner { animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.06); } }

/* These display fonts are wider than the bar's condensed type, so big headings come down a notch.
 * No italics: they're part of the bar's racing look. */
html:is([data-biz="burger"], [data-biz="poutine"]) .hero h1 { font-size: 44px; line-height: 1; }
html:is([data-biz="burger"], [data-biz="poutine"]) .brand,
html:is([data-biz="burger"], [data-biz="poutine"]) .pin-brand,
html:is([data-biz="burger"], [data-biz="poutine"]) .poster-brand { font-style: normal; }
html:is([data-biz="burger"], [data-biz="poutine"]) .item-name { font-size: 21px; letter-spacing: .01em; }
html:is([data-biz="burger"], [data-biz="poutine"]) .cat h2 { font-size: 32px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .status-hero .code { font-size: min(96px, 23vw); }
html:is([data-biz="burger"], [data-biz="poutine"]) .status-hero.ready .code { font-size: min(116px, 27vw); }
html:is([data-biz="burger"], [data-biz="poutine"]) .poster h1 { font-size: 84px; line-height: .95; }
html:is([data-biz="burger"], [data-biz="poutine"]) .tip .big { font-size: 30px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .line-name { font-size: 18px; -webkit-hyphens: auto; hyphens: auto; }
html:is([data-biz="burger"], [data-biz="poutine"]) .lines li { font-size: 23px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .ocard .code { font-size: 44px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .rcard { gap: 10px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .rcard .code { font-size: 32px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .rcard.match .code { font-size: 44px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .btn-pick { padding: 0 12px; font-size: 18px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .pin-box h1 { font-size: 44px; }
/* The wider type needs tighter top-bar buttons to keep the bar on one line */
html:is([data-biz="burger"], [data-biz="poutine"]) .bar-top { gap: 8px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .tbtn { padding: 0 10px; font-size: 16px; letter-spacing: .03em; }
html:is([data-biz="burger"], [data-biz="poutine"]) .switch { font-size: 16px; letter-spacing: .03em; }
html:is([data-biz="burger"], [data-biz="poutine"]) .brand { font-size: 22px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .stat { font-size: 15px; }
html:is([data-biz="burger"], [data-biz="poutine"]) .clock { min-width: 0; font-size: 20px; }
@media (max-width: 360px) {
  html:is([data-biz="burger"], [data-biz="poutine"]) .hero h1 { font-size: 36px; }
  html:is([data-biz="burger"], [data-biz="poutine"]) .tip .big { font-size: 24px; }
}

/* Poutine's rounded type reads best without forced capitals in long text. */
html[data-biz="poutine"] .item-name,
html[data-biz="poutine"] .line-name,
html[data-biz="poutine"] .lines li,
html[data-biz="poutine"] .mp-item { text-transform: none; }