/* Breakpoint strategy & a11y: see css/design-system.css (breakpoints 640 / 768 / 1024, focus-visible, reduced-motion) */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ── Single authoritative token block — all themes, all modes ─────────────
       Tokens are grouped by concern. Per-client brand overrides happen at
       runtime via applyClientBrand() in venue-router.js (house-override.css).
       dinner-mode overrides follow immediately below.
    ── */
    :root {
      /* Breakpoints & layout (mobile-first) */
      --content-max:    100%;
      --content-max-sm: 640px;
      --content-max-md: 768px;
      --content-max-lg: 1024px;
      --content-max-xl: 1400px;

      /* Accessibility — focus ring */
      --focus-ring-width:         2px;
      --focus-ring-offset:        2px;
      --focus-ring-color:         var(--accent, #1a4a3d);
      --focus-ring-color-inverse: #fff;

      /* Shadows */
      --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
      --shadow-sm: 0 2px 10px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
      --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
      --shadow-lg: 0 10px 40px rgba(0,0,0,.11), 0 3px 12px rgba(0,0,0,.06);

      /* Brand-agnostic design tokens — overridden per-client via house-override.css */
      --green:          #2a3a5e;
      --brass:          #7b9ccc;
      --brass-light:    #9aacdd;
      --ink:            #f0ebe2;
      --ink-soft:       rgba(240,235,226,.75);
      --rust:           #a0522d;
      --quiz-cyan:      #4DD0E1;
      --rose-pink:      #E91E63;
      --white:          #FFFFFF;
      --border:         rgba(122,156,204,.2);
      --wine-accent:    #FFB74D;
      --wine-bottom-box:#4A4D4D;
      --muted:          #8a7f72;
      --sage:           #6b9470;

      /* Card text tokens */
      --card-text:        #1a1a1a;
      --card-text-soft:   #444;
      --card-text-muted:  #555;
      --card-inner-border:rgba(0,0,0,.12);

      /* Lunch mode (default) */
      --page-bg:                 #f0e9de;
      --header-bg:               rgba(26,26,46,0.96);
      --text-primary:            #1a1a1a;
      --text-main:               #1a1a1a;
      --text-secondary:          #333;
      --text-muted:              #666;
      --accent:                  #2a3a5e;
      --input-bg:                #e8e1d4;
      --toggle-track:            #dbd3c4;
      --crest-color:             rgba(255,255,255,.9);
      --border-inactive:         rgba(42,58,94,.25);
      --border-inactive-strong:  rgba(42,58,94,.4);
      --gold:                    #2a3a5e;
      --gold-subtle:             rgba(42,58,94,.2);
      --gold-dim:                rgba(42,58,94,.6);
      --sub-pill-active-fg:      #ffffff;
      --category-label-color:    var(--brass);
      --category-label-border:   rgba(42,58,94,.3);
      --card:                    #fdfaf6;
      --card-border:             rgba(180,144,72,.22);
      --card-border-hover:       rgba(26,74,61,.18);
      --card-shadow-hover:       0 12px 40px rgba(0,0,0,.11), 0 3px 10px rgba(0,0,0,.06);
      --modal-card:              #fdfaf6;
      --modal-text:              #1a1a1a;
      --modal-text-soft:         #555;
    }

    /* Dinner mode — all overrides in one place */
    body.dinner-mode {
      --page-bg:                 #090909;
      --header-bg:               #0d0d14;
      --card:                    #131313;
      --card-border:             rgba(184,150,78,.18);
      --card-border-hover:       rgba(184,150,78,.28);
      --card-shadow-hover:       0 20px 60px rgba(0,0,0,.75), 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(212,184,114,.08);
      --input-bg:                #1c1c1c;
      --toggle-track:            #232323;
      --modal-card:              #141414;
      --text-main:               #f0ebe2;
      --text-primary:            #f0ebe2;
      --text-secondary:          #e0e0e0;
      --text-muted:              #9e9e9e;
      --accent:                  #d4b872;
      --crest-color:             rgba(255,255,255,.85);
      --border-inactive:         rgba(255,255,255,.15);
      --border-inactive-strong:  rgba(255,255,255,.2);
      --gold:                    #d4b872;
      --gold-subtle:             rgba(212,184,114,.2);
      --gold-dim:                rgba(212,184,114,.7);
      --sub-pill-active-fg:      #1a1a1a;
      --category-label-color:    #E0E0E0;
      --category-label-border:   rgba(255,255,255,.15);
      --modal-text:              #f0ebe2;
      --modal-text-soft:         rgba(240,235,226,.75);
      --card-text:               #f0ebe2;
      --card-text-soft:          rgba(240,235,226,.88);
      --card-text-muted:         rgba(240,235,226,.7);
      --card-inner-border:       rgba(255,255,255,.12);
      --focus-ring-color:        var(--accent, #d4b872);
    }

    body.dinner-mode .item-card.food-card .allergen-pill {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.2);
    }
    body.dinner-mode .item-card.food-card .item-card-sep {
      background: rgba(255,255,255,.18);
    }
    body.dinner-mode .item-card.food-card .item-card-badge-v {
      background: #3d9a73;
      color: #fff;
    }
    body.dinner-mode .item-card.food-card .item-card-badge-gf {
      background: #c99a1a;
      color: #fff;
    }
    body.dinner-mode .item-card.food-card .item-card-badge-signature {
      background: #a67c52;
      color: #fff;
    }

    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      z-index: 100;
      padding: 12px 20px;
      background: var(--green);
      color: #fff;
      font-weight: 600;
      border-radius: 4px;
      text-decoration: none;
      transition: top 0.2s ease;
    }
    .skip-link:focus {
      top: 16px;
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    html {
      width: 100%;
      overflow-x: hidden;
      scrollbar-width: none;
    }

    body {
      width: 100%;
      max-width: 100%;
      margin: 0;
      font-family: 'Syne', 'Inter', system-ui, sans-serif;
      background: var(--page-bg);
      color: var(--text-primary);
      min-height: 100vh;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      scrollbar-width: none;
      box-sizing: border-box;
    }

    html::-webkit-scrollbar, body::-webkit-scrollbar {
      display: none;
    }

    /* Root app container: full width, no offset */
    #venue-os-app-wrap {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    /* Splash screen */
    .splash-screen {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      transition: opacity 0.6s ease, visibility 0.6s ease;
      visibility: visible;
    }
    .splash-screen.splash-done {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .splash-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      animation: splash-in 0.8s ease-out;
    }
    @keyframes splash-in {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    .splash-crest {
      width: 140px;
      height: auto;
      opacity: 0.9;
    }
    .splash-title {
      font-family: 'Syne', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 4px;
      color: #fff;
    }
    .splash-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 6px;
      color: rgba(255,255,255,.8);
      text-transform: uppercase;
    }
    @media (prefers-reduced-motion: reduce) {
      .splash-inner { animation: none; }
      .splash-screen { transition-duration: 0.2s; }
    }

    /* Remove blue tap highlight on mobile */
    button,
    a,
    .item-card,
    .wine-detail-card,
    .cocktail-card,
    .allergen-pill {
      -webkit-tap-highlight-color: transparent;
    }

    /* Content area */
    main {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 40px 24px 80px;
      box-sizing: border-box;
      background: var(--page-bg);
    }

    #food {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    #food.active {
      display: block;
    }

    #drinks-wrapper {
      display: none;
    }

    #drinks-wrapper.active {
      display: block;
    }

    #standards {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    #standards.active {
      display: block;
    }

    #drinks-wrapper .content-section {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    #drinks-wrapper .content-section.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Soho Standards section */
    .standards-title {
      margin-bottom: 20px;
      color: var(--text-primary);
    }

    /* Sub-nav: F&B Standards | General info */
    .standards-subnav {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      padding: 4px;
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      width: fit-content;
    }
    .standards-subnav-pill {
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: color 0.2s, background 0.2s;
    }
    .standards-subnav-pill:hover {
      color: var(--text-primary);
      background: color-mix(in srgb, var(--brass, #b8964e) 12%, transparent);
    }
    .standards-subnav-pill.active {
      color: var(--brass, #b8964e);
      background: color-mix(in srgb, var(--brass, #b8964e) 22%, transparent);
      border: 1px solid color-mix(in srgb, var(--brass, #b8964e) 45%, transparent);
    }
    .standards-panel {
      display: none;
    }
    .standards-panel.standards-panel-active {
      display: block;
    }
    .standards-panel[hidden] {
      display: none !important;
    }

    /* General info — same accent family as F&B Standards (.section-title uses --gold; brass = venue peach/gold) */
    .standards-panel-general {
      --gi-accent: var(--brass, #b8964e);
      --gi-accent-soft: var(--brass-light, #d4b872);
      --gi-wash: color-mix(in srgb, var(--brass, #b8964e) 5%, #fff);
      --gi-mint: var(--gi-wash);
      --gi-mint-border: color-mix(in srgb, var(--brass, #b8964e) 28%, transparent);
    }
    .general-info-wrap {
      margin-bottom: 0;
    }
    .general-info-hero {
      background: #000000;
      color: var(--brass-light, #d4b872);
      padding: 22px 20px 24px;
      border-radius: 16px;
      margin-bottom: 24px;
      box-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
      border: 1px solid color-mix(in srgb, var(--brass, #b8964e) 25%, transparent);
      text-align: center;
    }
    .general-info-hero-text {
      margin: 0 auto;
      max-width: 38em;
      font-family: var(--sv-font-display, 'Syne', 'Montserrat', sans-serif);
      font-size: 0.98rem;
      line-height: 1.55;
      opacity: 0.98;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-wrap: pretty;
      hyphens: none;
      word-break: normal;
    }
    .general-info-hero-venue {
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    body.dinner-mode .general-info-hero {
      background: #000000;
      color: var(--gold, var(--brass-light, #d4b872));
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
    }
    .general-info-accordion {
      display: flex;
      flex-direction: column;
      gap: 14px;
      border: none;
      border-radius: 0;
      overflow: visible;
      background: transparent;
    }
    .general-info-item {
      border: none;
      border-radius: 14px;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--gi-mint-border);
      box-shadow: 0 2px 12px color-mix(in srgb, var(--brass, #b8964e) 10%, transparent);
      transition: box-shadow 0.22s ease, border-color 0.2s, transform 0.2s ease;
    }
    .general-info-item:hover {
      border-color: color-mix(in srgb, var(--brass, #b8964e) 42%, transparent);
      box-shadow: 0 6px 20px color-mix(in srgb, var(--brass, #b8964e) 16%, transparent);
      transform: translateY(-1px);
    }
    .general-info-item[open] {
      border-color: var(--gi-accent);
      box-shadow: 0 8px 28px color-mix(in srgb, var(--brass, #b8964e) 22%, transparent);
    }
    .general-info-item:last-child {
      border-bottom: 1px solid var(--gi-mint-border);
    }
    /* Colored left accent – peach/salmon family (allergies / gold unchanged) */
    .general-info-item--soho-house-history summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--soho-house-leadership summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--soho-house-amsterdam-team summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--history summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--table-plan summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--back-to-basic summary { border-left: 4px solid #b8860b; }
    .general-info-item--service-standards summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--speed-to-service summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--greeting summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--menu summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--allergies summary { border-left: 4px solid #c62828; }
    .general-info-item--seating-drinks summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--order-taking summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--mise-en-place summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--food-service summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--clearing summary { border-left: 4px solid #b8860b; }
    .general-info-item--dessert summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--bill summary { border-left: 4px solid var(--gi-accent); }
    .general-info-item--coaster-etiquette summary { border-left: 4px solid var(--gi-accent); }
    /* Hoxton Amsterdam — reservation palette on section headers */
    .general-info-item--hox-team summary { border-left-color: #00897b; }
    .general-info-item--hox-team .general-info-item-num { background: #00897b; }
    .general-info-item--hox-team .general-info-item-chevron { border-top-color: #00897b; }
    .general-info-item--hox-house-rules summary { border-left-color: #c62828; }
    .general-info-item--hox-house-rules .general-info-item-num { background: #c62828; }
    .general-info-item--hox-house-rules .general-info-item-chevron { border-top-color: #c62828; }
    .general-info-item--hox-benefits summary { border-left-color: #f9a825; }
    .general-info-item--hox-benefits .general-info-item-num { background: #f9a825; }
    .general-info-item--hox-benefits .general-info-item-chevron { border-top-color: #f9a825; }
    .general-info-item--hox-uniforms summary { border-left-color: #00838f; }
    .general-info-item--hox-uniforms .general-info-item-num { background: #00838f; }
    .general-info-item--hox-uniforms .general-info-item-chevron { border-top-color: #00838f; }
    .general-info-item summary {
      padding: 16px 20px;
      font-weight: 600;
      font-size: 15px;
      color: var(--text-primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      transition: background 0.2s;
      border-left: 4px solid var(--gi-accent);
      background: linear-gradient(90deg, color-mix(in srgb, var(--brass, #b8964e) 10%, transparent) 0%, transparent 24px);
    }
    .general-info-item-num {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--gi-accent);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
    }
    .general-info-item-title {
      flex: 1;
    }
    .general-info-item-chevron {
      flex-shrink: 0;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 8px solid var(--gi-accent);
      background: none;
      transition: transform 0.25s ease;
    }
    .general-info-item[open] .general-info-item-chevron {
      transform: rotate(180deg);
    }
    .general-info-item summary::-webkit-details-marker,
    .general-info-item summary::marker {
      display: none;
    }
    .general-info-item summary:hover {
      background: linear-gradient(90deg, color-mix(in srgb, var(--brass, #b8964e) 14%, transparent) 0%, transparent 24px);
    }
    .general-info-item-body {
      padding: 20px 24px 24px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--brass, #b8964e) 6%, transparent) 0%, transparent 40px);
      border-top: 1px solid var(--gi-mint-border);
    }
    body.dinner-mode .general-info-item-body {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 48px);
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    /* Text-only sections: card look, colors, better typography */
    .general-info-item-body--text-only {
      background: linear-gradient(180deg, color-mix(in srgb, var(--brass, #b8964e) 8%, transparent) 0%, color-mix(in srgb, var(--brass, #b8964e) 4%, #fff) 35%, color-mix(in srgb, var(--brass, #b8964e) 3%, #fff) 100%);
      padding: 24px 28px 28px;
    }
    body.dinner-mode .general-info-item-body--text-only {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.22) 100%);
    }
    .general-info-item-body--text-only .general-info-item-text {
      background: #fff;
      border-radius: 16px;
      padding: 26px 28px 28px;
      margin-bottom: 0;
      border: 1px solid var(--gi-mint-border);
      border-left: 3px solid var(--gi-accent);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--brass, #b8964e) 15%, transparent),
        0 12px 40px rgba(0, 0, 0, 0.06);
    }
    .general-info-item-body--rich.general-info-item-body--text-only .general-info-item-text {
      padding: 28px 28px 32px;
    }
    body.dinner-mode .general-info-item-body--text-only .general-info-item-text {
      background: rgba(18, 18, 20, 0.92);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    }
    .general-info-item-body--with-image .general-info-item-img {
      margin-bottom: 22px;
    }
    .general-info-item-body--with-image .general-info-item-text {
      margin-top: 0;
    }
    .general-info-item-text {
      margin-bottom: 0;
    }
    .general-info-item-body p {
      margin: 0 0 14px;
      font-size: 15px;
      line-height: 1.65;
      color: var(--text-secondary);
    }
    .general-info-item-body p:last-child {
      margin-bottom: 0;
    }

    /* Premium accordion copy — prose inside .general-info-item-text */
    .general-info-prose {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    .general-info-lead {
      margin: 0 0 1.25rem;
      font-size: 0.98rem;
      line-height: 1.65;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      max-width: 38em;
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }
    body.dinner-mode .standards-panel-general .general-info-lead {
      color: rgba(245, 242, 235, 0.88);
    }

    /* Team — name / role rows */
    .general-info-team {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--gi-mint-border);
    }
    .general-info-team-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 12px 20px;
      align-items: baseline;
      padding: 14px 18px;
      margin: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--brass, #b8964e) 14%, transparent);
      background: color-mix(in srgb, var(--brass, #b8964e) 3%, transparent);
    }
    .general-info-team-row:last-child {
      border-bottom: none;
    }
    .general-info-team-row:nth-child(even) {
      background: color-mix(in srgb, var(--brass, #b8964e) 5%, transparent);
    }
    body.dinner-mode .general-info-team {
      border-color: rgba(255, 255, 255, 0.1);
    }
    body.dinner-mode .general-info-team-row {
      background: rgba(255, 255, 255, 0.04);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    body.dinner-mode .general-info-team-row:nth-child(even) {
      background: rgba(255, 255, 255, 0.065);
    }
    .general-info-name {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-primary);
    }
    body.dinner-mode .general-info-name {
      color: rgba(255, 255, 255, 0.95);
    }
    .general-info-role {
      font-size: 0.9rem;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    body.dinner-mode .general-info-role {
      color: rgba(255, 255, 255, 0.72);
    }
    @media (max-width: 520px) {
      .general-info-team-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }

    /* Numbered house rules */
    .general-info-rules {
      list-style: none;
      margin: 0;
      padding: 0;
      counter-reset: girule;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .general-info-rule {
      counter-increment: girule;
      position: relative;
      margin: 0;
      padding: 16px 18px 16px 3.25rem;
      border-radius: 12px;
      border: 1px solid var(--gi-mint-border);
      background: linear-gradient(135deg, color-mix(in srgb, var(--brass, #b8964e) 5%, #fff) 0%, #fff 100%);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--brass, #b8964e) 12%, transparent);
    }
    body.dinner-mode .general-info-rule {
      background: rgba(32, 32, 36, 0.98);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }
    .general-info-rule::before {
      content: counter(girule);
      position: absolute;
      left: 14px;
      top: 1.15rem;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #fff;
      background: var(--gi-accent);
      border-radius: 50%;
    }
    .general-info-rule-title {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
    body.dinner-mode .standards-panel-general .general-info-rule .general-info-rule-title {
      color: rgba(255, 255, 255, 0.96);
    }
    .general-info-rule-detail {
      display: block;
      font-size: 0.94rem;
      line-height: 1.6;
      color: var(--text-secondary);
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }
    body.dinner-mode .standards-panel-general .general-info-rule .general-info-rule-detail {
      color: rgba(245, 242, 235, 0.88);
    }

    /* Benefits / uniforms — card stack */
    .general-info-cards {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .general-info-card {
      margin: 0;
      padding: 16px 18px;
      border-radius: 12px;
      border: 1px solid var(--gi-mint-border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--brass, #b8964e) 6%, transparent) 0%, transparent 48px);
    }
    body.dinner-mode .general-info-card {
      background: rgba(32, 32, 36, 0.95);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .general-info-card-title {
      display: block;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gi-accent);
      margin-bottom: 8px;
    }
    body.dinner-mode .general-info-card-title {
      color: var(--gold, var(--brass-light));
    }
    .general-info-card-detail {
      display: block;
      font-size: 0.94rem;
      line-height: 1.6;
      color: var(--text-secondary);
    }
    body.dinner-mode .general-info-card-detail {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Benefits: 3-up grid + icon + headline amount */
    .general-info-benefits {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 640px) {
      .general-info-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
    }
    .general-info-benefit-card {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      margin: 0;
      padding: 16px 14px;
      border-radius: 14px;
      border: 1px solid var(--gi-mint-border);
      background: linear-gradient(160deg, color-mix(in srgb, var(--brass, #b8964e) 8%, #fff) 0%, #fff 100%);
      box-shadow: 0 2px 14px color-mix(in srgb, var(--brass, #b8964e) 10%, transparent);
    }
    body.dinner-mode .general-info-benefit-card {
      background: rgba(28, 28, 32, 0.98);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    }
    .general-info-benefit-icon {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Syne', 'Montserrat', sans-serif;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #fff;
      background: var(--gi-accent);
      border-radius: 12px;
    }
    .general-info-benefit-inner {
      flex: 1;
      min-width: 0;
    }
    .general-info-benefit-name {
      display: block;
      font-family: 'Syne', 'Montserrat', sans-serif;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
    body.dinner-mode .general-info-benefit-name {
      color: rgba(255, 255, 255, 0.95);
    }
    .general-info-benefit-highlight {
      display: block;
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--gi-accent);
      margin-bottom: 8px;
    }
    body.dinner-mode .general-info-benefit-highlight {
      color: var(--gold, var(--brass-light));
    }
    .general-info-benefit-detail {
      margin: 0;
      font-size: 0.84rem;
      line-height: 1.55;
      color: var(--text-secondary);
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }
    body.dinner-mode .general-info-benefit-detail {
      color: rgba(255, 255, 255, 0.78);
    }

    /* Legacy plain text body */
    .general-info-prose--legacy .general-info-p {
      font-size: 0.96rem;
      line-height: 1.7;
      margin: 0 0 1rem;
      color: var(--text-primary);
    }
    .general-info-prose--legacy .general-info-p:last-child {
      margin-bottom: 0;
    }
    body.dinner-mode .general-info-prose--legacy .general-info-p {
      color: rgba(255, 255, 255, 0.88);
    }
    .general-info-item-img {
      margin-bottom: 18px;
      border-radius: 14px;
      overflow: hidden;
      max-width: 100%;
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--brass, #b8964e) 20%, transparent),
        0 16px 48px rgba(0, 0, 0, 0.12);
    }
    body.dinner-mode .general-info-item-img {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }
     .general-info-item-img img {
       width: 100%;
       height: auto;
       display: block;
     }

    /* Daily run sheet — GENERAL_INFO_SECTIONS.dailyTasks (grouped + expandable rows) */
    .general-info-item-body--daily-tasks .general-info-item-text {
      margin-bottom: 16px;
    }
    .daily-sheet {
      margin-top: 4px;
    }
    .daily-sheet-toolbar {
      margin-bottom: 18px;
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(0,0,0,.04);
      border: 1px solid var(--card-border, rgba(0,0,0,.08));
    }
    body.dinner-mode .daily-sheet-toolbar {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.1);
    }
    .daily-sheet-hint {
      margin: 0 0 12px;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text-muted, #666);
    }
    body.dinner-mode .daily-sheet-hint {
      color: rgba(245, 240, 232, 0.75);
    }
    .daily-scope-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }
    .daily-scope-btn {
      border: 1px solid var(--card-border, rgba(0,0,0,.15));
      background: var(--card, #fff);
      color: var(--text, #222);
      font-size: 0.8rem;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    body.dinner-mode .daily-scope-btn {
      background: rgba(255,255,255,.06);
      color: #f0ebe0;
      border-color: rgba(255,255,255,.1);
    }
    .daily-scope-btn.is-active {
      background: color-mix(in srgb, var(--brass, #b8964e) 24%, transparent);
      border-color: color-mix(in srgb, var(--brass, #b8964e) 55%, transparent);
      color: var(--brass, #8b6914);
    }
    body.dinner-mode .daily-scope-btn.is-active {
      background: color-mix(in srgb, var(--gold, var(--brass-light)) 22%, transparent);
      border-color: color-mix(in srgb, var(--gold, var(--brass-light)) 50%, transparent);
      color: var(--gold, var(--brass-light));
    }
    .daily-sheet-groups--empty {
      padding: 16px;
      text-align: center;
    }
    .daily-scope-empty {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-muted, #666);
    }
    body.dinner-mode .daily-scope-empty {
      color: rgba(245, 240, 232, 0.65);
    }
    .daily-sheet-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .daily-filter-btn {
      border: 1px solid var(--card-border, rgba(0,0,0,.15));
      background: var(--card, #fff);
      color: var(--text, #222);
      font-size: 0.8rem;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    body.dinner-mode .daily-filter-btn {
      background: rgba(255,255,255,.06);
      color: #f0ebe0;
      border-color: rgba(255,255,255,.1);
    }
    .daily-filter-btn.is-active {
      background: color-mix(in srgb, var(--brass, #b8964e) 22%, transparent);
      border-color: color-mix(in srgb, var(--brass, #b8964e) 50%, transparent);
      color: var(--brass, #b8964e);
    }
    body.dinner-mode .daily-filter-btn.is-active {
      background: color-mix(in srgb, var(--gold, var(--brass-light)) 18%, transparent);
      border-color: color-mix(in srgb, var(--gold, var(--brass-light)) 45%, transparent);
      color: var(--gold, var(--brass-light));
    }
    .daily-sheet-search-wrap {
      display: block;
    }
    .daily-sheet-search {
      width: 100%;
      max-width: 420px;
      box-sizing: border-box;
      padding: 10px 14px;
      font-size: 0.92rem;
      border-radius: 10px;
      border: 1px solid var(--card-border, rgba(0,0,0,.12));
      background: var(--card, #fff);
      color: var(--text, #222);
    }
    body.dinner-mode .daily-sheet-search {
      background: rgba(0,0,0,.25);
      border-color: rgba(255,255,255,.12);
      color: #f5f0e8;
    }
    .daily-sheet-groups {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .daily-seg[hidden] {
      display: none !important;
    }
    .daily-seg-title {
      margin: 0 0 10px;
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted, #777);
    }
    body.dinner-mode .daily-seg-title {
      color: rgba(245, 240, 232, 0.55);
    }
    .daily-seg-rows {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--card-border, rgba(0,0,0,.1));
      background: var(--card, #fff);
    }
    body.dinner-mode .daily-seg-rows {
      background: rgba(0,0,0,.2);
      border-color: rgba(255,255,255,.08);
    }
    .daily-line {
      border-bottom: 1px solid var(--card-border, rgba(0,0,0,.08));
    }
    .daily-line:last-child {
      border-bottom: none;
    }
    .daily-line[hidden] {
      display: none !important;
    }
    .daily-line > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px 12px 36px;
      position: relative;
      transition: background .15s;
    }
    .daily-line > summary::-webkit-details-marker {
      display: none;
    }
    .daily-line > summary::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 50%;
      margin-top: -5px;
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      opacity: 0.45;
      transition: transform .2s;
    }
    .daily-line[open] > summary::before {
      transform: rotate(45deg);
      margin-top: -3px;
    }
    .daily-line > summary:hover {
      background: rgba(0,0,0,.03);
    }
    body.dinner-mode .daily-line > summary:hover {
      background: rgba(255,255,255,.04);
    }
    .daily-line-sum-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      margin-bottom: 6px;
    }
    .standards-panel-general .daily-line-time {
      color: var(--gi-accent);
    }
    .daily-line-time {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--brass, #b8964e);
      white-space: nowrap;
    }
    .daily-line-role {
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .daily-line-role--barista { background: rgba(121, 85, 72, 0.15); color: #5d4037; }
    .daily-line-role--bartender { background: rgba(25, 118, 210, 0.12); color: #1565c0; }
    .daily-line-role--waiter { background: color-mix(in srgb, var(--brass, #b8964e) 16%, transparent); color: color-mix(in srgb, var(--brass, #b8964e) 85%, #000); }
    .daily-line-role--other { background: rgba(0,0,0,.07); color: var(--text-muted, #666); }
    .daily-line-role--all { background: rgba(46, 125, 50, 0.14); color: #2e7d32; }
    .daily-line--cleaning .daily-line-role {
      display: none;
    }
    .daily-line-pri {
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-left: auto;
      padding: 2px 7px;
      border-radius: 4px;
    }
    .daily-line-pri--high { background: rgba(198, 40, 40, 0.12); color: #b71c1c; }
    .daily-line-pri--med { background: rgba(245, 124, 0, 0.14); color: #e65100; }
    .daily-line-pri--low { background: rgba(84, 110, 122, 0.12); color: #455a64; }
    .daily-line-task {
      display: block;
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.35;
      color: var(--text, #1a1a1a);
      padding-right: 8px;
    }
    body.dinner-mode .daily-line-task {
      color: #f5f0e8;
    }
    .daily-line-body {
      padding: 0 14px 14px 36px;
      border-top: 1px solid var(--card-border, rgba(0,0,0,.12));
      margin-top: 0;
      padding-top: 12px;
    }
    .daily-line-body p {
      margin: 0 0 10px;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text-muted, #555);
    }
    body.dinner-mode .daily-line-body p {
      color: rgba(245, 240, 232, 0.82);
    }
    .daily-line-body p:last-child {
      margin-bottom: 0;
    }

    .dos-donts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 24px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--card-border, rgba(0,0,0,.08));
    }
    @media (max-width: 600px) {
      .dos-donts-grid {
        grid-template-columns: 1fr;
      }
    }
    .dos-donts-col {
      padding: 14px 16px;
      border-radius: 10px;
    }
    .dos-donts-dos {
      background: rgba(76, 175, 80, 0.08);
      border: 1px solid rgba(76, 175, 80, 0.25);
    }
    .dos-donts-donts {
      background: rgba(211, 47, 47, 0.06);
      border: 1px solid rgba(211, 47, 47, 0.25);
    }
    .dos-donts-heading {
      margin: 0 0 10px;
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dos-donts-dos .dos-donts-heading { color: #2e7d32; }
    .dos-donts-donts .dos-donts-heading { color: #c62828; }
    .dos-donts-icon {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }
    .dos-donts-icon-check {
      background: #2e7d32;
      color: #fff;
    }
    .dos-donts-icon-x {
      background: #c62828;
      color: #fff;
    }
    .dos-donts-list {
      margin: 0;
      padding-left: 20px;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .dos-donts-list li {
      margin-bottom: 6px;
    }
    .dos-donts-list li:last-child {
      margin-bottom: 0;
    }

    .standards-intro {
      max-width: 780px;
      margin-bottom: 32px;
      padding: 20px 24px;
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 12px;
    }

    .standards-intro-desc {
      color: var(--text-secondary);
      font-size: 15px;
      margin-bottom: 12px;
      line-height: 1.65;
      margin-bottom: 20px;
      letter-spacing: 0.02em;
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }

    .standards-intro-bible {
      margin: 0 0 20px;
    }
    .standards-intro-bible-img {
      display: block;
      width: 100%;
      max-height: min(70vh, 900px);
      object-fit: contain;
      border-radius: 8px;
      border: 1px solid var(--card-border);
      background: var(--bg-secondary, #1a1a1a);
    }
    .standards-intro-bible-cap {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
    }

    .standards-color-codes {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 16px;
    }

    .standards-color-codes--grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
      margin-bottom: 12px;
    }
    @media (max-width: 520px) {
      .standards-color-codes--grid {
        grid-template-columns: 1fr;
      }
    }
    .standards-color-codes--grid .standards-color-item {
      flex: unset;
      min-width: 0;
    }

    /* Red + yellow priority: same width as each other, not full row */
    .standards-color-priority {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 520px;
      margin-bottom: 16px;
    }
    @media (max-width: 480px) {
      .standards-color-priority {
        grid-template-columns: 1fr;
        max-width: none;
      }
    }
    .standards-color-priority .standards-color-item {
      flex: unset;
      min-width: 0;
    }

    .standards-color-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      flex: 1;
      min-width: 220px;
    }

    .standards-color-swatch {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      margin-top: 4px;
    }

    .standards-color-item strong {
      display: block;
      font-size: 13px;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .standards-color-item span:last-of-type {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .standards-steps-note {
      font-size: 13px;
      color: var(--text-muted);
      font-style: italic;
      margin: 0;
    }

    /* Standards tab: display + body fonts (Syne + Montserrat) */
    .standards-section {
      --sv-font-body: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --sv-font-display: 'Syne', 'Montserrat', sans-serif;
    }
    .standards-section .section-title.standards-title {
      font-family: var(--sv-font-display);
      font-weight: 600;
      letter-spacing: 0.14em;
    }
    .standards-panel-fb,
    .standards-panel-general {
      font-family: var(--sv-font-body);
    }
    .standards-panel-fb .standards-intro-desc,
    .standards-panel-fb .standards-steps-note {
      font-family: var(--sv-font-body);
      letter-spacing: 0.01em;
    }
    .standards-panel-fb .standards-card-title {
      font-family: var(--sv-font-display);
    }
    .standards-panel-general .general-info-item-title {
      font-family: var(--sv-font-display);
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .standards-panel-general .general-info-prose,
    .standards-panel-general .general-info-lead {
      font-family: var(--sv-font-body);
    }
    .standards-panel-general .general-info-rule-title {
      font-family: var(--sv-font-display);
    }
    .standards-panel-fb .standards-color-item strong {
      font-family: var(--sv-font-display);
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Reservation colours: importance + badges */
    .standards-color-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .standards-color-badge {
      display: inline-block;
      align-self: flex-start;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--brass, #b8964e) 22%, transparent);
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    body.dinner-mode .standards-color-badge {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.92);
    }
    .standards-color-item--critical {
      padding: 10px 12px 10px 14px;
      margin: -4px 0;
      border-radius: 10px;
      border-left: 4px solid #c62828;
      background: color-mix(in srgb, #c62828 8%, var(--card));
    }
    body.dinner-mode .standards-color-item--critical {
      background: rgba(198, 40, 40, 0.12);
    }
    .standards-color-item--critical .standards-color-swatch {
      width: 14px;
      height: 14px;
      margin-top: 2px;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    }
    .standards-color-item--high {
      padding: 8px 10px;
      border-radius: 10px;
      border-left: 3px solid #f9a825;
      background: color-mix(in srgb, #f9a825 7%, var(--card));
    }
    body.dinner-mode .standards-color-item--high {
      background: rgba(249, 168, 37, 0.1);
    }
    .standards-color-item--info {
      opacity: 0.95;
    }
    .standards-color-item--critical .standards-color-badge {
      background: rgba(198, 40, 40, 0.2);
      color: #b71c1c;
    }
    body.dinner-mode .standards-color-item--critical .standards-color-badge {
      background: rgba(255, 200, 200, 0.15);
      color: #ffcdd2;
    }
    .standards-color-item--high .standards-color-badge {
      background: rgba(249, 168, 37, 0.25);
      color: #e65100;
    }
    body.dinner-mode .standards-color-item--high .standards-color-badge {
      color: #ffe0b2;
    }
    .standards-color-desc {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-muted);
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
    }

    .standards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
    }
    .standards-card {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      display: flex;
      flex-direction: column;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
      outline: none;
    }
    .standards-card:hover {
      border-color: var(--card-border-hover);
      box-shadow: var(--card-shadow-hover);
      transform: translateY(-2px);
    }
    .standards-card-img {
      aspect-ratio: 3/4;
      overflow: hidden;
      background: var(--page-bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .standards-card-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .standards-card-body {
      padding: 16px;
      flex: 1;
    }
    .standards-card-subtitle {
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #5a5045; /* lunch: dark enough on white card (7.5:1) */
      display: block;
      margin-bottom: 6px;
    }
    body.dinner-mode .standards-card-subtitle { color: var(--brass); } /* dinner: brass on dark card passes */
    .standards-card--mise-en-place .standards-card-subtitle { color: #7a3018; } /* AA on white: 5.8:1 */
    .standards-card--mise-en-place { border-top: 3px solid #a0522d; }
    .standards-card--how-to-be-served .standards-card-subtitle { color: #6b4c14; } /* AA on white: 5.1:1 */
    .standards-card--how-to-be-served { border-top: 3px solid #b8964e; }
    .standards-card--micros .standards-card-subtitle { color: #3a5c3e; } /* AA on white: 5.5:1 */
    .standards-card--micros { border-top: 3px solid #6b9470; }
    .standards-card--service .standards-card-subtitle { color: #2e4f6e; } /* AA on white: 6.2:1 */
    .standards-card--service { border-top: 3px solid #5c7c99; }
    body.dinner-mode .standards-card--mise-en-place .standards-card-subtitle { color: #c07040; }
    body.dinner-mode .standards-card--how-to-be-served .standards-card-subtitle { color: #b8964e; }
    body.dinner-mode .standards-card--micros .standards-card-subtitle { color: #6b9470; }
    body.dinner-mode .standards-card--service .standards-card-subtitle { color: #7aa0c4; }
    .standards-card-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 8px;
      line-height: 1.3;
    }
    .standards-card-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .modal-image-area.is-standards img {
      object-fit: contain;
    }

    .offline-preload-wrap {
      margin-top: 32px;
      padding: 20px;
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
    }
    .offline-preload-btn {
      display: inline-block;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 600;
      color: #1a1a1a; /* explicit dark text: #1a1a1a on #b8964e = 6.98:1, passes AA in all modes */
      background: var(--brass);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.1s;
    }
    .offline-preload-btn:hover:not(:disabled) {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    .offline-preload-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .offline-preload-status {
      margin: 12px 0 0;
      font-size: 14px;
      color: var(--text-muted);
    }

    @media (min-width: 769px) {
      #standards-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .standards-title {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
      }
      .standards-intro {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 720px;
        text-align: left;
      }
      .standards-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 28px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
      }
    }

    .cocktail-subsection {
      margin-top: 40px;
      padding-top: 24px;
      border-top: 1px solid var(--gold-subtle);
    }
    .cocktail-subsection:first-of-type {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--gold-subtle);
    }
    .cocktail-subsection.classic-cocktails-section {
      background: var(--gold-subtle);
      margin-top: 24px;
      padding: 24px 20px 28px;
      border-radius: 12px;
      border: 1px solid var(--border-inactive);
    }
    .cocktail-subsection.classic-cocktails-section .cocktail-subsection-title {
      font-size: 1.35rem;
      margin-bottom: 24px;
    }
    .cocktail-subsection-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--gold);
      margin: 0 0 20px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .section-title {
      font-size: 1.75rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 32px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--gold-subtle);
    }

    /* Mobile optimizations — only rules for components not in their own files */
    @media (max-width: 768px) {
      html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
      }

      .search-row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .search-bar {
        padding: 10px 14px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .nav-wrap {
        width: 100%;
        margin: 0;
        padding: 10px 12px 8px;
        box-sizing: border-box;
      }

      .nav-top {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .filter-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 10px 16px;
      }

      .main-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 10px;
      }

      .main-tab {
        text-align: center;
        min-height: 40px;
        font-size: 11px;
        letter-spacing: 0.08em;
      }

      .nav-wrap.tab-food .sub-pills-food,
      .nav-wrap.tab-drinks .sub-pills-drinks {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding-bottom: 8px;
        overflow-x: visible;
        scroll-snap-type: none;
      }

      .sub-pill {
        min-height: 40px;
        padding: 6px 6px;
        font-size: 11px;
        letter-spacing: 0.02em;
        justify-content: center;
        text-align: center;
        min-width: 0;
      }

      .sub-pill .sub-pill-icon {
        width: 12px;
        height: 12px;
      }

      main {
        padding: 16px 12px 48px;
        width: 100%;
        overflow-x: hidden;
      }

      #food-content, #drinks-wrapper {
        width: 100%;
        overflow-x: hidden;
      }

      .section-title {
        font-size: 1.2rem;
        margin-bottom: 16px;
      }

      .item-card-grid,
      .standards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        min-width: 0;
      }
    }

    /* Empty search state */
    .empty-search-state {
      padding: 48px 24px;
      text-align: center;
    }
    .empty-search-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 8px;
    }
    .empty-search-tip {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    /* New user welcome – one-time quick guide (menu, standards, quiz) */
    .new-user-welcome {
      margin: 0 0 20px;
      padding: 16px 20px;
      background: linear-gradient(135deg, rgba(26,74,61,.12) 0%, rgba(184,150,78,.08) 100%);
      border: 1px solid rgba(26,74,61,.25);
      border-radius: 12px;
      font-family: inherit;
    }
    body.dinner-mode .new-user-welcome {
      background: linear-gradient(135deg, rgba(26,74,61,.2) 0%, rgba(212,184,114,.1) 100%);
      border-color: rgba(212,184,114,.25);
    }
    .new-user-welcome-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 16px;
      max-width: 640px;
    }
    .new-user-welcome-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--accent);
      margin: 0;
    }
    .new-user-welcome-tip {
      flex: 1 1 220px;
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.4;
    }
    .new-user-welcome-btn {
      flex-shrink: 0;
      padding: 10px 18px;
      border-radius: 10px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.2s;
    }
    /* Dinner mode: gold button needs dark text to pass AA (white on #d4b872 = 1.87:1) */
    body.dinner-mode .new-user-welcome-btn { color: #1a1a1a; }
    .new-user-welcome-btn:hover,
    .new-user-welcome-btn:focus-visible {
      opacity: 0.9;
    }

    .mb-pork-note { margin-top: 4px; font-size: 12px; color: #b0413e; font-weight: 500; }
    body.dinner-mode .mb-pork-note { color: #ffb3a8; }

    /* Daily tasks sheet — intro copy */
    .daily-tasks-intro {
      margin-bottom: 1rem;
      padding: 0 2px;
    }
    .daily-tasks-intro .general-info-lead {
      margin: 0 0 0.65rem;
      max-width: none;
      font-size: 0.95rem;
      line-height: 1.55;
      text-wrap: pretty;
    }
    .daily-tasks-intro .general-info-lead:last-child {
      margin-bottom: 0;
    }

    /* Standards: reservation colour codes — swipeable cards on narrow screens */
    @media (max-width: 600px) {
      .standards-intro .standards-color-codes--grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 14px;
        padding: 4px 2px 12px;
        margin-left: -6px;
        margin-right: -6px;
        padding-left: 6px;
        padding-right: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
      }
      .standards-intro .standards-color-codes--grid .standards-color-item {
        flex: 0 0 min(86vw, 300px);
        min-width: 0;
        scroll-snap-align: start;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
        box-sizing: border-box;
      }
      body.dinner-mode .standards-intro .standards-color-codes--grid .standards-color-item {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }
      .standards-intro .standards-color-priority {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        max-width: none;
        margin-bottom: 14px;
        padding-bottom: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
      }
      .standards-intro .standards-color-priority .standards-color-item {
        flex: 0 0 min(82vw, 280px);
        min-width: 0;
        scroll-snap-align: start;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
        box-sizing: border-box;
      }
      body.dinner-mode .standards-intro .standards-color-priority .standards-color-item {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }

    /* General info — mobile: readable paragraphs, no cramped cards */
    @media (max-width: 600px) {
      .standards-panel-general .general-info-item-body {
        padding: 16px 14px 18px;
      }
      .standards-panel-general .general-info-item-body--text-only {
        padding: 16px 12px 18px;
      }
      .standards-panel-general .general-info-item-body--text-only .general-info-item-text {
        padding: 18px 16px 20px;
        border-radius: 14px;
        max-width: 100%;
        overflow: visible;
      }
      .standards-panel-general .general-info-lead {
        max-width: none;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
      }
      .standards-panel-general .general-info-item-body p {
        font-size: 0.94rem;
        line-height: 1.62;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: none;
      }
      .standards-panel-general .general-info-prose {
        overflow: visible;
      }
      .standards-panel-general .general-info-hero {
        padding: 18px 14px 20px;
        margin-left: 0;
        margin-right: 0;
      }
      .standards-panel-general .general-info-hero-text {
        max-width: none;
        font-size: 0.94rem;
        line-height: 1.58;
      }
    }