/* =====================================================
     LAZY MIKE'S BEO — matches Brand Brief v1.0
     Cream page + paper cards, 2px ink borders,
     4px offset block shadows, Mike Blue hero, Hot Pink
     for the slogan strip. No gradients, no glass, no
     hairlines. Bowlby One headlines, Libre Franklin body.
     ===================================================== */
  :root {
    --lm-cream: #FFF8EC;
    --lm-paper: #FDEFD3;
    --lm-ink: #111111;
    --lm-blue: #2BB7E5;
    --lm-blue-deep: #1B8F88;
    --lm-blue-ink: #0E4A63;
    --lm-pink: #FF7FB1;
    --lm-pink-hot: #FF4F93;
    --lm-mustard: #F0B429;
    --lm-ketchup: #D7352B;
    --lm-pickle: #6E8E3B;
    --lm-rye: #6B3E1A;
    --lm-kraft: #C99A62;

    --fg1: #111111;
    --fg2: #2a2a2a;
    --fg3: #6a6a60;

    --font-display: 'Bungee Shade', sans-serif;
    --font-headline: 'Bowlby One', sans-serif;
    --font-funky: 'Shrikhand', cursive;
    --font-hand: 'Permanent Marker', cursive;
    --font-body: 'Libre Franklin', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --border-w: 2px;
    --shadow-sm: 3px 3px 0 var(--lm-ink);
    --shadow-md: 4px 4px 0 var(--lm-ink);
    --radius: 2px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0; padding: 0;
    background: var(--lm-cream);
    color: var(--fg1);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 80px;
  }

  /* ============== TOOLBAR ============== */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .toolbar button {
    font-family: var(--font-headline);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    border: var(--border-w) solid var(--lm-ink);
    background: var(--lm-blue);
    color: var(--lm-ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    border-radius: var(--radius);
    transition: transform .08s, box-shadow .08s, background .12s;
  }
  .toolbar button:hover { background: var(--lm-pink); }
  .toolbar button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--lm-ink);
  }
  .toolbar button.secondary { background: var(--lm-cream); }
  .toolbar button.secondary:hover { background: var(--lm-mustard); }

  /* Share-link reveal field — shown only when clipboard copy is blocked,
     so staff can always select + copy the link manually. */
  .share-link-field {
    flex: 1 1 240px;
    min-width: 180px;
    border: 2px solid var(--lm-ink);
    border-radius: 4px;
    padding: 6px 10px;
    font: 500 12px var(--font-body);
    background: var(--lm-paper);
    color: var(--lm-ink);
  }

  /* ============== MASTHEAD ============== */
  header.masthead {
    background: var(--lm-cream);
    border: var(--border-w) solid var(--lm-ink);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    margin-bottom: 22px;
    overflow: hidden;
  }
  .masthead-inner {
    padding: 26px 32px 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    border-bottom: var(--border-w) solid var(--lm-ink);
  }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-blue-deep);
    font-weight: 700;
    margin-bottom: 8px;
  }
  h1.brand {
    font-family: var(--font-display);
    font-size: 56px;
    margin: 0;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--lm-ink);
    text-transform: uppercase;
  }
  h1.brand .apos { color: var(--lm-blue); }
  .brand-sub {
    font-family: var(--font-headline);
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lm-ink);
    margin-top: 8px;
    line-height: 1;
  }
  .masthead-meta {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg3);
    line-height: 1.55;
    font-weight: 600;
  }
  .masthead-meta strong { color: var(--lm-ink); font-weight: 800; }
  .masthead-meta .doc-kind {
    font-family: var(--font-headline);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--lm-ink);
    margin-bottom: 6px;
    font-weight: normal;
  }

  /* Pink slogan strip — full-bleed inside the masthead */
  .slogan {
    background: var(--lm-pink);
    padding: 12px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
  }
  .slogan .quote {
    font-family: var(--font-hand);
    font-size: 24px;
    line-height: 1;
    color: var(--lm-ink);
    letter-spacing: 0.01em;
  }
  .slogan .quote .cream {
    color: var(--lm-cream);
    -webkit-text-stroke: 1.5px var(--lm-ink);
  }
  .slogan .where {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-ink);
    text-align: right;
    line-height: 1.45;
    font-weight: 700;
  }

  /* ============== LAYOUT ============== */
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
  }
  main.beo-body { min-width: 0; }

  /* ============== CARDS ============== */
  .card {
    background: var(--lm-paper);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
  }
  .card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px 12px;
  }
  .card-head .num {
    width: 26px; height: 26px;
    background: var(--lm-ink);
    color: var(--lm-cream);
    font-family: var(--font-headline);
    font-size: 13px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    flex-shrink: 0;
  }
  .card-head h2 {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lm-ink);
    line-height: 1;
  }
  .card-head .rule {
    flex: 1;
    border-top: var(--border-w) dashed var(--lm-ink);
    opacity: 0.4;
    height: 0;
    margin: 4px 4px 0;
  }
  .card-head .sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lm-blue-deep);
    font-weight: 700;
    white-space: nowrap;
  }
  .card-body { padding: 4px 22px 22px; }

  /* ============== SUBSECTIONS ============== */
  .subsection {
    margin-top: 22px;
    padding-top: 18px;
    border-top: var(--border-w) dashed var(--lm-ink);
  }
  .subsection:first-child { margin-top: 8px; padding-top: 0; border-top: none; }
  .subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
  }
  .subsection h3 {
    font-family: var(--font-headline);
    font-size: 17px;
    font-weight: normal;
    margin: 0;
    color: var(--lm-ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .subsection .min-note {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--lm-ink);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--lm-mustard);
    padding: 3px 9px;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    white-space: nowrap;
  }
  .subsection .desc {
    font-size: 13px;
    color: var(--fg2);
    margin: 0 0 12px;
    line-height: 1.5;
  }
  .subsection .desc strong { color: var(--lm-ink); }

  /* ============== FORM FIELDS ============== */
  .grid { display: grid; gap: 14px; }
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 760px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  }

  .field { display: flex; flex-direction: column; gap: 5px; }
  .field.span-2 { grid-column: span 2; }
  .field.span-full { grid-column: 1 / -1; }
  .field > label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lm-ink);
    font-weight: 700;
  }
  .field input[type=text],
  .field input[type=date],
  .field input[type=time],
  .field input[type=number],
  .field input[type=email],
  .field input[type=tel],
  .field select,
  .field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--lm-ink);
    background: var(--lm-cream);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    padding: 8px 11px;
    transition: box-shadow .1s, background .1s;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    background: #fff;
    box-shadow: 3px 3px 0 var(--lm-blue);
  }
  .field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }
  .field input::placeholder, .field textarea::placeholder { color: #998d72; }

  /* Toggle (onsite/offsite) */
  .toggle-group {
    display: inline-flex;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--lm-cream);
    width: fit-content;
  }
  .toggle-group input { display: none; }
  .toggle-group label {
    padding: 9px 22px;
    cursor: pointer;
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: normal;
    color: var(--lm-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--lm-cream);
    transition: background .1s;
  }
  .toggle-group label + label { border-left: var(--border-w) solid var(--lm-ink); }
  .toggle-group input:checked + label { background: var(--lm-blue); }

  /* ============== MENU ITEMS ============== */
  .item-list { display: flex; flex-direction: column; gap: 2px; }
  .menu-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--radius);
    transition: background .12s;
  }
  .menu-item:hover { background: rgba(43,183,229,0.10); }
  .menu-item.active { background: rgba(43,183,229,0.16); }
  .menu-item .name {
    font-size: 14px;
    color: var(--fg1);
    font-weight: 500;
    line-height: 1.35;
  }
  .menu-item .name strong {
    font-family: var(--font-headline);
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--lm-ink);
  }
  .menu-item .name em {
    font-style: normal;
    color: var(--fg3);
    font-size: 12.5px;
    display: block;
    margin-top: 2px;
  }
  .menu-item .price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg3);
    white-space: nowrap;
    font-weight: 700;
  }
  .menu-item .qty-wrap { display: flex; align-items: center; gap: 6px; }
  .menu-item input.qty {
    width: 66px;
    padding: 6px 8px;
    text-align: center;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 700;
    background: var(--lm-cream);
  }
  .menu-item input.qty:focus {
    outline: none;
    background: #fff;
    box-shadow: 2px 2px 0 var(--lm-blue);
  }
  .menu-item .unit-label {
    font-size: 10.5px;
    color: var(--fg3);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 50px;
    font-weight: 700;
  }
  .menu-item .line-total {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lm-ink);
    min-width: 64px;
    text-align: right;
  }
  .menu-item.active .line-total { color: var(--lm-blue-ink); }

  /* ============== INLINE DETAIL PANELS (breakfast sandwich breakdown) ============== */
  .menu-item .detail-panel {
    display: none;
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--lm-cream);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
  }
  .menu-item.active .detail-panel { display: block; }
  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .detail-grid.single { grid-template-columns: 1fr; }
  @media (max-width: 760px) {
    .detail-grid { grid-template-columns: 1fr; }
  }
  .detail-head {
    font-family: var(--font-headline);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lm-ink);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1.5px dashed var(--lm-ink);
  }
  .detail-sum {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    background: var(--lm-paper);
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
  }
  .detail-sum.balanced { background: var(--lm-pickle); color: var(--lm-cream); }
  .detail-sum.unbalanced { background: var(--lm-mustard); }
  .detail-rows { display: grid; gap: 4px; }
  .detail-row {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 8px;
    align-items: center;
  }
  .detail-row label {
    font-size: 12.5px;
    color: var(--lm-ink);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .detail-row input[type=number] {
    width: 100%;
    padding: 4px 6px;
    text-align: center;
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    font-size: 12.5px;
    font-family: var(--font-body);
    font-weight: 600;
    background: #fff;
  }
  .detail-row input[type=number]:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--lm-blue);
  }
  .upgrade-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--lm-blue-deep);
    background: rgba(43,183,229,0.15);
    padding: 1px 5px;
    border-radius: var(--radius);
    letter-spacing: 0.04em;
  }
  .detail-warning {
    margin-top: 10px;
    padding: 7px 10px;
    background: #FCE3DF;
    border: 1.5px solid var(--lm-ketchup);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--lm-ink);
    letter-spacing: 0.04em;
    display: none;
  }
  .detail-warning.show { display: block; }

  /* Nested flavor sub-panel (bagel flavors inside bread breakdown) */
  .flavor-subpanel {
    margin: 4px 0 8px 22px;
    padding: 10px 12px 11px;
    background: var(--lm-cream);
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    box-shadow: 2px 2px 0 var(--lm-ink);
  }
  .flavor-subpanel[hidden] { display: none; }
  .subpanel-head {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--lm-blue-deep);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    margin-bottom: 7px;
    border-bottom: 1px dashed var(--lm-ink);
  }
  .subpanel-sum {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: var(--lm-paper);
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    color: var(--lm-ink);
  }
  .subpanel-sum.balanced { background: var(--lm-pickle); color: var(--lm-cream); }
  .subpanel-sum.unbalanced { background: var(--lm-mustard); }
  .subpanel-grid {
    display: grid;
    gap: 4px;
  }
  .subpanel-row {
    display: grid;
    grid-template-columns: 1fr 56px;
    gap: 8px;
    align-items: center;
  }
  .subpanel-row label {
    font-size: 12px;
    color: var(--lm-ink);
  }
  .subpanel-row input[type=number] {
    width: 100%;
    padding: 3px 6px;
    text-align: center;
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    font-family: var(--font-body);
  }
  .subpanel-row input[type=number]:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--lm-blue);
  }

  /* ============== PICKLIST OVER-LIMIT BADGE ============== */
  .picklist-meta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lm-ink);
  }
  .picklist-count {
    background: var(--lm-blue);
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    padding: 2px 8px;
  }
  .picklist-count.over { background: var(--lm-mustard); }
  .picklist-extra-rate {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .picklist-extra-rate strong { color: var(--lm-ink); }
  .picklist-edit-rate {
    background: var(--lm-cream);
    border: 1.5px solid var(--lm-ink);
    border-radius: var(--radius);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .picklist-edit-rate:hover { background: var(--lm-mustard); }

  /* ============== RATE MODAL ============== */
  .modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    animation: scrimFade .12s ease-out;
  }
  .modal-scrim[hidden] { display: none; }
  @keyframes scrimFade {
    from { background: rgba(17, 17, 17, 0); }
    to { background: rgba(17, 17, 17, 0.55); }
  }
  .modal-card {
    background: var(--lm-paper);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--lm-ink);
    max-width: 460px;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    animation: modalPop .14s ease-out;
  }
  @keyframes modalPop {
    from { transform: translate(-4px, -6px); opacity: 0; }
    to { transform: translate(0, 0); opacity: 1; }
  }
  .modal-stripe {
    background: var(--lm-pink);
    border-bottom: var(--border-w) solid var(--lm-ink);
    padding: 8px 22px;
    text-align: left;
  }
  .modal-stripe-text {
    font-family: var(--font-hand);
    font-size: 22px;
    line-height: 1;
    color: var(--lm-ink);
    letter-spacing: 0.01em;
  }
  .modal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lm-blue-deep);
    font-weight: 700;
    padding: 22px 26px 0;
  }
  .modal-title {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: normal;
    margin: 4px 0 8px;
    padding: 0 26px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--lm-ink);
    line-height: 1.05;
  }
  .modal-body {
    margin: 0;
    padding: 0 26px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fg2);
  }
  .modal-body strong { color: var(--lm-ink); }
  .modal-input-row {
    margin: 16px 26px 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    background: var(--lm-cream);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    padding: 10px 14px;
  }
  .modal-dollar {
    font-family: var(--font-headline);
    font-size: 24px;
    color: var(--lm-ink);
    line-height: 1;
  }
  .modal-input-row input[type=number] {
    border: none;
    background: transparent;
    font-family: var(--font-headline);
    font-size: 26px;
    color: var(--lm-ink);
    padding: 0;
    width: 100%;
    text-align: left;
    line-height: 1;
  }
  .modal-input-row input[type=number]:focus { outline: none; }
  .modal-input-row input[type=number]::-webkit-outer-spin-button,
  .modal-input-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .modal-input-row input[type=number] { -moz-appearance: textfield; }
  .modal-suffix {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lm-ink);
    font-weight: 700;
    text-align: right;
    line-height: 1.3;
  }
  .modal-input-row.invalid { box-shadow: 3px 3px 0 var(--lm-ketchup); }
  .modal-error {
    margin: 10px 26px 0;
    padding: 8px 12px;
    background: #FCE3DF;
    border: 1.5px solid var(--lm-ketchup);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--lm-ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 26px 22px;
  }
  .modal-btn {
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 18px;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    box-shadow: 4px 4px 0 var(--lm-ink);
    cursor: pointer;
    transition: transform .07s, box-shadow .07s, background .12s;
    color: var(--lm-ink);
  }
  .modal-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--lm-ink); }
  .modal-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--lm-ink);
  }
  .modal-btn-cancel { background: var(--lm-cream); }
  .modal-btn-cancel:hover { background: var(--lm-mustard); }
  .modal-btn-save { background: var(--lm-blue); }
  .modal-btn-save:hover { background: var(--lm-pink); }

  /* Checkbox grid */
  .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 14px;
    margin-top: 10px;
  }
  .checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    color: var(--fg2);
    transition: background .12s;
  }
  .checkbox-grid label:hover { background: rgba(43,183,229,0.10); }
  .checkbox-grid input { accent-color: var(--lm-blue); width: 16px; height: 16px; }
  .checkbox-grid input:checked + span { color: var(--lm-ink); font-weight: 600; }
  .picklist-note {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--lm-ink);
    margin-top: 8px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* ============== RATE PRESETS ============== */
  .rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .rate-row .rate-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lm-ink);
    min-width: 70px;
    font-weight: 700;
  }
  .preset-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; }
  .preset-btns button {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border: var(--border-w) solid var(--lm-ink);
    background: var(--lm-cream);
    color: var(--lm-ink);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .1s;
    text-transform: uppercase;
  }
  .preset-btns button:hover { background: var(--lm-mustard); }
  .preset-btns button.active { background: var(--lm-blue); }
  .rate-row input[type=number] {
    width: 70px;
    padding: 5px 8px;
    font-size: 13px;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    background: var(--lm-cream);
    text-align: center;
  }
  .rate-row .pct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lm-ink);
    font-weight: 700;
  }

  /* ============== INVOICE TABLE ============== */
  .invoice {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-family: var(--font-body);
  }
  .invoice th, .invoice td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid rgba(17,17,17,0.18);
    font-size: 13px;
  }
  .invoice th {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lm-ink);
    border-bottom: var(--border-w) solid var(--lm-ink);
  }
  .invoice td.num { text-align: right; font-family: var(--font-mono); font-weight: 600; }
  .invoice tr.totals-row td {
    font-weight: 700;
    border-bottom: 1px solid rgba(17,17,17,0.18);
  }
  .invoice tr.grand-total td {
    font-family: var(--font-headline);
    font-size: 18px;
    color: var(--lm-ink);
    background: var(--lm-blue);
    border-top: var(--border-w) solid var(--lm-ink);
    border-bottom: var(--border-w) solid var(--lm-ink);
    padding-top: 12px;
    padding-bottom: 12px;
    letter-spacing: 0.04em;
  }
  .invoice tr.balance-row td { font-weight: 700; color: var(--lm-ink); }
  .invoice tr.no-items td {
    text-align: center;
    color: var(--fg3);
    font-style: italic;
    padding: 20px 0;
  }
  .invoice .qty-col { color: var(--fg3); }
  .tbd-flag {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    background: var(--lm-mustard);
    color: var(--lm-ink);
    padding: 2px 7px;
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* ============== SIDEBAR ============== */
  aside.sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
  }
  .sidebar-inner {
    background: var(--lm-paper);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar-head {
    padding: 14px 18px;
    background: var(--lm-blue);
    color: var(--lm-ink);
    border-bottom: var(--border-w) solid var(--lm-ink);
  }
  .sidebar-head .ticket-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lm-ink);
  }
  .sidebar-head h3 {
    font-family: var(--font-headline);
    font-size: 20px;
    margin: 3px 0 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1;
  }
  .sidebar-body { padding: 14px 16px 16px; }
  .sidebar .line-items {
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.5;
  }
  .sidebar .line-items .li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(17,17,17,0.25);
  }
  .sidebar .li-name { color: var(--fg2); }
  .sidebar .li-name .qty-text { color: var(--fg3); font-size: 10.5px; }
  .sidebar .li-total { color: var(--lm-ink); font-weight: 700; white-space: nowrap; }

  /* Per-item breakdown lines (e.g. meat & bread breakdown under a sandwich row) */
  .sidebar .li-breakdown {
    margin-top: 3px;
    padding-left: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.45;
    color: var(--fg3);
  }
  .sidebar .li-breakdown > div { padding: 1px 0; }

  .invoice .inv-breakdown {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--fg3);
    font-weight: 400;
  }
  .invoice .inv-breakdown > div { padding: 1px 0; }
  .sidebar .no-selections {
    color: var(--fg3);
    font-style: italic;
    padding: 12px 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
  }
  .sidebar .totals {
    margin-top: 14px;
    padding-top: 12px;
    border-top: var(--border-w) solid var(--lm-ink);
    font-family: var(--font-mono);
    font-size: 12.5px;
  }
  .sidebar .totals .row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 4px 0;
  }
  .sidebar .totals .row.grand {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--lm-blue);
    border: var(--border-w) solid var(--lm-ink);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-headline);
    font-size: 18px;
    color: var(--lm-ink);
    letter-spacing: 0.04em;
    border-radius: var(--radius);
  }
  .sidebar .totals .row.balance {
    margin-top: 10px;
    font-weight: 700;
    color: var(--lm-ink);
  }
  .sidebar .per-guest {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--lm-mustard);
    border: var(--border-w) solid var(--lm-ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--lm-ink);
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .sidebar .per-guest strong {
    display: block;
    font-family: var(--font-headline);
    font-size: 20px;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .sidebar .min-warning {
    margin-top: 12px;
    padding: 8px 10px;
    background: #FCE3DF;
    border: var(--border-w) solid var(--lm-ketchup);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--lm-ink);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
  }

  /* ============== SIGNATURES ============== */
  .sig-intro {
    font-size: 12.5px;
    color: var(--fg2);
    margin: 0 0 10px;
    line-height: 1.5;
  }
  .sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 14px;
  }
  @media (max-width: 760px) { .sig-grid { grid-template-columns: 1fr; } }
  .sig-block { display: flex; flex-direction: column; gap: 10px; }
  .sig-line {
    border-bottom: var(--border-w) solid var(--lm-ink);
    height: 34px;
    position: relative;
  }
  .sig-line input {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    font-family: var(--font-funky);
    font-size: 18px;
    color: var(--lm-ink);
  }
  .sig-line input:focus { outline: none; background: rgba(43,183,229,0.08); }
  .sig-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lm-ink);
    font-weight: 700;
  }
  .sig-block .sig-meta {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 14px;
  }

  /* ============== FOOTER ============== */
  .footnote {
    margin-top: 30px;
    padding: 14px 18px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg3);
    letter-spacing: 0.14em;
    border-top: var(--border-w) solid var(--lm-ink);
    text-transform: uppercase;
    font-weight: 700;
  }
  .footnote strong { color: var(--lm-ink); }

  /* ============== EXPORT MODE (print + PDF) ============== */
  /* These rules run BOTH when actually printing AND when generating a
     PDF via html2pdf. They hide live-tool chrome and zero-value rows. */
  /* When preparing for print/PDF, the mobile bar is hidden so reset the
     bottom padding reservation we added at <=768px (otherwise small-viewport
     prints get a wasted strip of empty space at the bottom of the page). */
  body.preparing-print .page,
  body.preparing-print .mobile-min-warning { padding-bottom: 0; }
  body.preparing-print .mobile-min-warning { display: none !important; }

  body.preparing-print .toolbar,
  body.preparing-print aside.sidebar,
  body.preparing-print .mobile-totals-bar,
  body.preparing-print .suggestions-section,
  body.preparing-print .no-print,
  body.preparing-print .rate-row,
  body.preparing-print .invoice tr.no-items,
  body.preparing-print .print-hide {
    display: none !important;
  }
  body.preparing-print .checkbox-grid label:not(.checked) { display: none !important; }
  body.preparing-print .checkbox-grid .picklist-note { display: none !important; }
  body.preparing-print .detail-row:not(.has-value) { display: none !important; }
  body.preparing-print .subpanel-row:not(.has-value) { display: none !important; }

  /* In export mode the layout collapses to single column so the PDF
     fills the page properly without a sidebar gutter. */
  body.preparing-print .layout { display: block; }

  /* Toggle group renders only the checked label as a plain pill */
  body.preparing-print .toggle-group input + label { display: none; }
  body.preparing-print .toggle-group input:checked + label {
    display: inline-block !important;
  }

  /* ============== RESPONSIVE ============== */
  @media (max-width: 980px) {
    .layout { grid-template-columns: 1fr; }
    aside.sidebar { position: static; }
    .sidebar-inner { max-height: none; }
    h1.brand { font-size: 38px; }
    .masthead-inner { grid-template-columns: 1fr; }
    .masthead-meta { text-align: left; }
  }
  @media (max-width: 560px) {
    .page { padding: 12px 12px 60px; }
    .masthead-inner { padding: 20px 18px 16px; }
    h1.brand { font-size: 30px; }
    .brand-sub { font-size: 15px; }
    .slogan { padding: 12px 18px; flex-direction: column; align-items: flex-start; }
    .slogan .quote { font-size: 19px; }
    .slogan .where { text-align: left; }
    .card-body { padding: 4px 14px 16px; }
    .card-head { padding: 14px 14px 8px; flex-wrap: wrap; }
    .card-head .sub { display: none; }
    .card-head .rule { display: none; }
    .menu-item {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 10px;
      border-bottom: 1px dashed rgba(17,17,17,0.2);
    }
    .menu-item .qty-wrap { justify-self: end; }
    .modal-card { max-width: 100%; }
    .modal-input-row { grid-template-columns: auto 1fr; }
    .modal-suffix { grid-column: 1 / -1; text-align: left; padding-top: 6px; border-top: 1.5px dashed var(--lm-ink); }
    .modal-title { font-size: 20px; }
    .modal-stripe-text { font-size: 18px; }
  }

  /* ============== CLIENT SUGGESTIONS ==============
     Section + CTA + per-client "your suggestions" list on client.html. */
  .suggestions-section {
    margin: 20px 0;
    padding: 18px 20px;
    background: var(--lm-cream, #f5f0e8);
    border: 2px dashed var(--lm-blue-deep, #1a4b8c);
    border-radius: 6px;
  }
  .suggestions-head h2 {
    font-family: var(--font-display);
    color: var(--lm-blue-deep, #1a4b8c);
    margin: 0 0 4px 0;
    font-size: 20px;
  }
  .suggestions-head p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--fg2, #555);
  }
  .suggest-cta {
    border: 2px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 14px;
    background: var(--lm-paper, #fffdf7);
    color: var(--lm-ink, #1a1a1a);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--lm-ink, #1a1a1a);
  }
  .suggest-cta:hover { background: var(--lm-mustard, #f4c430); }
  .suggestions-list { margin-top: 16px; }
  .suggestions-list-head {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg2, #555);
    margin: 0 0 8px 0;
  }
  .suggestions-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
  }
  .suggestions-items li {
    background: var(--lm-paper, #fffdf7);
    border: 1px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .suggestion-meta {
    font-size: 11px;
    color: var(--fg3, #777);
    margin-bottom: 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .suggestion-status-open { color: var(--lm-blue-deep, #1a4b8c); font-weight: 700; }
  .suggestion-status-resolved { color: #4a7c59; font-weight: 700; }
  .suggestion-text { white-space: pre-wrap; word-break: break-word; }
  .suggestion-resolution {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(17,17,17,0.2);
    font-size: 12px;
    color: var(--fg2, #555);
    font-style: italic;
  }

  /* ============== SUGGEST MODAL (client) ============== */
  .suggest-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .suggest-modal-overlay[aria-hidden="false"] { display: flex; }
  #suggest-modal-box, #sug-list-modal-box {
    background: var(--lm-paper, #fffdf7);
    border: 3px solid var(--lm-ink, #1a1a1a);
    border-radius: 6px;
    box-shadow: 6px 6px 0 var(--lm-ink, #1a1a1a);
    padding: 20px;
    width: min(520px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
  }
  #suggest-modal-title, #sug-list-modal-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--lm-blue-deep, #1a4b8c);
    border-bottom: 2px solid var(--lm-ink, #1a1a1a);
    padding-bottom: 8px;
    margin: 0 0 12px 0;
  }
  .suggest-modal-hint { font-size: 13px; color: #555; margin: 0 0 10px 0; }
  #suggest-text {
    width: 100%;
    border: 2px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
  }
  .suggest-modal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .suggest-modal-fields input {
    border: 2px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
  }
  .suggest-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
  }
  .suggest-modal-actions button {
    border: 2px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }
  #suggest-cancel-btn, #sug-list-close-btn { background: var(--lm-cream, #f5f0e8); }
  #suggest-submit-btn {
    background: var(--lm-blue-deep, #1a4b8c);
    color: #fff;
    box-shadow: 3px 3px 0 var(--lm-ink, #1a1a1a);
  }
  #suggest-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* ============== STAFF SUGGESTIONS LIST MODAL ============== */
  .suggestions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .suggestions-btn.has-open {
    background: var(--lm-mustard, #f4c430);
    border-color: var(--lm-ink, #1a1a1a);
  }
  .suggestions-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--lm-ketchup, #c8252f);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
  }
  .sug-list-empty {
    padding: 16px 0;
    text-align: center;
    color: var(--fg3, #777);
    font-style: italic;
  }
  .sug-list-section-head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg2, #555);
    margin: 12px 0 6px 0;
  }
  .sug-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
  }
  .sug-list-items li {
    background: var(--lm-cream, #f5f0e8);
    border: 1px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .sug-list-items-resolved li {
    background: var(--lm-paper, #fffdf7);
    opacity: 0.75;
  }
  .sug-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .sug-list-resolve-btn {
    border: 2px solid var(--lm-ink, #1a1a1a);
    border-radius: 4px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 12px;
    background: #4a7c59;
    color: #fff;
    cursor: pointer;
  }

  /* ============== MOBILE TOTALS BAR ==============
     Hidden on desktop; shown as a sticky footer on phones/small tablets in
     place of the full sidebar (which is also hidden at the same breakpoint).
     Updated by renderSidebar in shared.js. */
  .mobile-totals-bar { display: none; }
  .mobile-min-warning { display: none; }

  @media (max-width: 768px) {
    .mobile-totals-bar {
      display: flex;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      background: var(--lm-ink, #1a1a1a);
      color: var(--lm-paper, #fffdf7);
      padding: 8px 14px;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
      border-top: 3px solid var(--lm-mustard, #f4c430);
      box-shadow: 0 -4px 0 rgba(0,0,0,0.15);
      font-family: var(--font-headline);
    }
    .mobile-min-warning {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 58px;
      z-index: 49;
      padding: 8px 14px;
      background: var(--lm-ketchup, #c8252f);
      color: var(--lm-paper, #fffdf7);
      font-family: var(--font-headline);
      font-size: 13px;
      text-align: center;
      border-top: 2px solid var(--lm-ink, #1a1a1a);
    }
    .mobile-min-warning[hidden] { display: none; }
    .mtb-cell {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }
    .mtb-cell-pg { text-align: right; }
    .mtb-label {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--lm-cream, #f5f0e8);
      opacity: 0.7;
    }
    .mtb-value {
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
    }
    .mtb-pg { color: var(--lm-mustard, #f4c430); }
    /* Push page content above the bar so the last card isn't covered. */
    .page { padding-bottom: 92px; }
    /* Hide the sidebar; bottom-bar replaces it. Override the 980px rule. */
    aside.sidebar { display: none; }
    .layout { grid-template-columns: 1fr; }
  }

  /* ============== SMALL-TABLET (≤768px) ==============
     Fills the gap between the existing 560px and 980px rules so staff
     editing on a small tablet doesn't feel half-broken. */
  @media (max-width: 768px) {
    .toolbar { gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
    .toolbar button { padding: 6px 12px; font-size: 13px; }
    .toolbar .save-status { width: 100%; text-align: right; padding-top: 4px; }
    .masthead-inner { padding: 22px 18px 18px; }
    h1.brand { font-size: 34px; }
  }

  /* ============== PHONE (≤480px) ==============
     Aggressive restructuring for narrow phones. */
  @media (max-width: 480px) {
    .page { padding: 8px 8px 92px; }
    .masthead-inner { padding: 18px 14px 14px; }
    h1.brand { font-size: 26px; line-height: 1.05; }
    .brand-sub { font-size: 13px; }
    .slogan .quote { font-size: 17px; }
    .toolbar { padding: 6px 8px; gap: 4px; }
    .toolbar button { padding: 6px 10px; font-size: 12px; }
    .toggle-group label { padding: 7px 14px; font-size: 13px; }

    /* Menu rows: stack qty/unit/line-total under the name with bigger
       touch targets. Override the 560px rule that uses 1fr + justify-self. */
    .menu-item {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px 10px;
    }
    .menu-item .name { font-size: 14px; }
    .menu-item .price { font-size: 12px; color: var(--fg2, #555); }
    .menu-item .qty-wrap {
      justify-self: stretch;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .menu-item .qty-wrap .qty {
      flex: 0 0 auto;
      width: 88px;
      height: 40px;
      font-size: 16px; /* prevents iOS auto-zoom on focus */
      padding: 6px 10px;
    }
    .menu-item .unit-label {
      flex: 1 1 auto;
      font-size: 13px;
      min-width: 0;
    }
    .menu-item .line-total {
      justify-self: end;
      font-size: 14px;
      font-weight: 700;
    }

    /* Form inputs at 16px so iOS doesn't zoom on focus */
    input[type=text], input[type=number], input[type=email],
    input[type=tel], input[type=date], input[type=time],
    select, textarea { font-size: 16px; }

    /* Sig modal: tighter padding, full-bleed canvas */
    #sig-modal-box { padding: 14px; width: min(480px, 96vw); }
    #sig-modal-title { font-size: 16px; margin-bottom: 10px; }
    .sig-modal-actions button { padding: 8px 18px; font-size: 14px; }

    /* Bottom bar slimmer on phone */
    .mobile-totals-bar { padding: 6px 12px; }
    .mtb-value { font-size: 16px; }
  }

  /* ============== PRINT ============== */
  @media print {
    @page { size: letter; margin: 0.5in 0.55in; }
    html, body {
      background: #fff !important;
      font-size: 10.5pt;
    }
    .page { padding: 0; max-width: none; }
    .mobile-totals-bar { display: none !important; }
    .mobile-min-warning { display: none !important; }

    /* Note: toolbar/sidebar/no-print/rate-row hiding is handled by
       body.preparing-print rules above (shared with PDF export). */

    /* Print-only: collapse toggle to plain text styling */
    .toggle-group input:checked + label {
      background: transparent !important;
      color: #000 !important;
      padding: 0 !important;
      border: none !important;
      font-family: var(--font-headline);
      font-size: 11pt;
    }
    .toggle-group { border: none !important; background: transparent !important; }

    /* Cards keep borders but lose offset shadows on print */
    .card, header.masthead, .sidebar-inner {
      box-shadow: none !important;
      page-break-inside: avoid;
      break-inside: avoid;
      border: 1.5pt solid #000 !important;
    }

    /* Preserve brand color blocks on print */
    .slogan,
    .sidebar-head,
    .invoice tr.grand-total td,
    .card-head .num,
    .subsection .min-note,
    .tbd-flag,
    .sidebar .totals .row.grand,
    .sidebar .per-guest,
    .preset-btns button.active {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* Form fields → plain underlines */
    input[type=text], input[type=date], input[type=time],
    input[type=number], input[type=email], input[type=tel],
    select, textarea {
      border: none !important;
      border-bottom: 1px solid #444 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 1px 2px !important;
      border-radius: 0 !important;
      color: #000 !important;
      font-weight: 500 !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }
    textarea {
      border: 1px solid #888 !important;
      padding: 4px 6px !important;
    }
    input::placeholder, textarea::placeholder { color: transparent !important; }
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number] { -moz-appearance: textfield; }

    /* Header */
    header.masthead { margin-bottom: 14px; }
    .masthead-inner { padding: 14px 22px 12px; border-bottom-width: 1.5pt; }
    h1.brand { font-size: 36pt; }
    .brand-sub { font-size: 13pt; }
    .slogan { padding: 8px 22px; }
    .slogan .quote { font-size: 16pt; }

    /* Menu items: hide qty input/unit (invoice handles itemization) */
    .menu-item { padding: 3px 0; }
    .menu-item input.qty { display: none; }
    .menu-item .unit-label { display: none; }
    .menu-item:hover, .menu-item.active { background: transparent !important; }

    /* Detail panels — print as a compact summary */
    .menu-item .detail-panel { background: transparent !important; padding: 6px 0 !important; }
    .detail-warning, .picklist-edit-rate { display: none !important; }
    .detail-row input[type=number],
    .subpanel-row input[type=number] {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      font-weight: 700;
      text-align: left;
    }
    .detail-head, .subpanel-head { border-bottom: 1pt solid #000 !important; }
    .detail-sum, .subpanel-sum { background: transparent !important; border: 1pt solid #000 !important; }
    .flavor-subpanel {
      box-shadow: none !important;
      background: transparent !important;
      border: 1pt dashed #000 !important;
      margin-left: 16px !important;
      padding: 6px 8px !important;
    }
    .flavor-subpanel[hidden] { display: none !important; }

    /* Picklist meta: keep it visible if it exists (shows extra-pick surcharge) */
    .picklist-meta { margin-top: 4px; }
    .picklist-count { background: transparent !important; border: 1pt solid #000 !important; }

    .invoice { font-size: 10pt; }

    /* Signatures */
    .sig-line { border-bottom: 1pt solid #000 !important; }
    .sig-line input { font-family: var(--font-funky); font-size: 14pt; }

    /* Avoid mid-element breaks */
    .menu-item, .subsection, .field, .invoice tr { break-inside: avoid; }
  }

/* ── Client mode ─────────────────────────────────────────────────────────── */

body.client-mode .toolbar,
body.client-mode aside.sidebar,
body.client-mode .rate-row,
body.client-mode .picklist-edit-rate {
  display: none !important;
}

body.client-mode input,
body.client-mode select,
body.client-mode textarea {
  pointer-events: none;
  background: var(--lm-cream) !important;
}

body.client-mode #sig-name-input {
  pointer-events: auto;
  background: #fff !important;
}

body.client-mode .menu-item .qty {
  color: var(--lm-ink);
  font-weight: 700;
}

body.client-mode #card-10,
body.client-mode .sign-section {
  display: block !important;
}

/* ── Sign section ─────────────────────────────────────────────────────────── */

.sign-section {
  background: #e8f0e8;
  border: 2px solid #4a7c59;
  border-radius: 6px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 4px 4px 0 #4a7c59;
}

.sign-section h3 {
  font-family: var(--font-display);
  color: #4a7c59;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.sign-section p {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

.sign-slot {
  border: 2px dashed #4a7c59;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #4a7c59;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ── Signature modal overlay ─────────────────────────────────────────────── */

#sig-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#sig-modal-overlay[aria-hidden="false"] {
  display: flex;
}

#sig-modal-box {
  background: var(--lm-paper, #fffdf7);
  border: 3px solid var(--lm-ink, #1a1a1a);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--lm-ink, #1a1a1a);
  padding: 20px;
  width: min(480px, 92vw);
}

#sig-modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--lm-blue-deep, #1a4b8c);
  border-bottom: 2px solid var(--lm-ink, #1a1a1a);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

#sig-canvas {
  width: 100%;
  border: 2px solid var(--lm-ink, #1a1a1a);
  border-radius: 4px;
  background: var(--lm-cream, #f5f0e8);
  touch-action: none;
  display: block;
  cursor: crosshair;
}

.sig-modal-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.sig-modal-name-row label {
  font-size: 13px;
  white-space: nowrap;
}

#sig-name-input {
  flex: 1;
  border: 2px solid var(--lm-ink, #1a1a1a);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
}

.sig-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

#sig-clear-btn {
  border: 2px solid var(--lm-ink, #1a1a1a);
  border-radius: 4px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 13px;
  background: var(--lm-cream, #f5f0e8);
  cursor: pointer;
}

#sig-sign-btn {
  border: 2px solid var(--lm-ink, #1a1a1a);
  border-radius: 4px;
  padding: 6px 18px;
  font-weight: 700;
  font-size: 13px;
  background: var(--lm-blue-deep, #1a4b8c);
  color: #fff;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--lm-ink, #1a1a1a);
}

#sig-sign-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Custom line items ──────────────────────────────────────────────────────── */
.custom-line-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.custom-line-row .custom-line-name {
  flex: 1;
}
.custom-line-row .custom-line-amount {
  width: 100px;
}
.custom-line-row .custom-line-remove {
  background: none;
  border: none;
  color: var(--lm-ketchup);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
body.client-mode #add-custom-line-btn,
body.client-mode .custom-line-remove {
  display: none !important;
}
body.preparing-print .custom-line-remove {
  display: none !important;
}