/* D165 new Menu Builder - shared look (navy #123F3B, gold #B89A5A, soft gold #F2EBDD, paper #F5F6F3; Syne + DM Sans) */
:root { --navy: #123F3B; --navy-deep: #082E2B; --gold: #B89A5A; --soft: #F2EBDD; --paper: #F5F6F3; --ink: #24302E; --quiet: #61706D; --line: #D7D9D3; --faint: #EEF0EC; --red: #b33a32; --green: #2E7D4F; --brown: #6b4a12; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; }
a { color: var(--navy); }
button, input, select, textarea { font-family: inherit; }
.syne { font-family: Syne, sans-serif; font-weight: 700; color: var(--navy); }
.mbnav { background: var(--navy-deep); display: flex; align-items: center; gap: 2px; padding: 0 40px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.mbnav a { color: #C7CCC8; padding: 11px 11px 9px; text-decoration: none; font-size: 14px; font-weight: 700; border-bottom: 3px solid transparent; }
.mbnav a:hover { color: #fff; }
.mbnav a.on { color: #fff; border-bottom-color: var(--gold); }
.mbnav .dw { color: var(--gold); margin-right: 14px; padding-left: 0; }
.mbnav .tabs { display: flex; gap: 2px; }
.top h1.ptitle { margin: 0; font-family: Syne, sans-serif; font-weight: 700; font-size: 20px; color: #fff; }
.top { background: var(--navy); color: #fff; padding: 14px 40px; display: flex; align-items: center; gap: 14px; font-size: 15px; flex-wrap: wrap; }
.top a { color: var(--soft); text-decoration: none; }
.top .sep { color: #8D9994; }
.top .meta { margin-left: auto; font-size: 13px; color: #C7CCC8; }
.top .pbtn { padding: 6px 12px; background: var(--soft); color: var(--navy); border: 0; font-weight: 700; font-size: 13px; cursor: pointer; }
.top select { padding: 5px 8px; font-size: 13px; border: 0; background: var(--soft); color: var(--navy); font-weight: 700; }
.wrap { display: flex; gap: 24px; padding: 26px 40px; max-width: 1360px; margin: 0 auto; align-items: flex-start; }
.col-l { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.col-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.aside { width: 240px; flex-shrink: 0; }
.card { background: #fff; border: 1px solid var(--line); padding: 14px; }
.card.navytop { border-top: 4px solid var(--navy); padding: 18px 20px; }
.card.redtop { border-top: 4px solid var(--red); padding: 22px; }
.card.greentop { border-top: 4px solid var(--green); padding: 18px 20px; }
.emma { background: var(--navy); color: #fff; padding: 20px; border: 1px solid var(--gold); }
.emma .who { display: flex; gap: 12px; align-items: center; }
.emma img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.emma .name { font-family: Syne, sans-serif; font-weight: 700; color: var(--gold); }
.emma p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.btn { padding: 10px 16px; background: var(--navy); color: #fff; border: 0; font-weight: 700; font-size: 14px; cursor: pointer; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.gold { background: var(--gold); }
.btn.ghost { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.btn.redbtn { background: var(--red); }
.btn:disabled, .btn.off { background: #C7CCC8 !important; color: var(--quiet) !important; border-color: #C7CCC8 !important; cursor: default; }
.mark { flex-shrink: 0; display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; color: #fff; font-size: 12px; }
.mark.r { background: var(--red); } .mark.g { background: var(--green); }
.box { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-weight: 700; font-size: 14px; border: 2px solid; }
.box.r { border-color: var(--red); } .box.g { border-color: var(--green); }
.item { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; margin-top: 6px; padding: 7px 8px; font-size: 14px; cursor: pointer; background: #fff; border: 2px solid var(--green); }
.item.r { border-color: var(--red); }
.item.on { background: var(--soft); }
.msg { font-size: 15px; font-weight: 700; color: var(--navy); min-height: 22px; }
.msg.err { color: var(--red); }
.quiet { color: var(--quiet); }
.grid { display: grid; font-size: 14px; align-items: start; }
.grid > .h { padding: 8px 0; color: var(--quiet); border-bottom: 1px solid var(--line); }
.grid > .c { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--faint); }
.tick { padding: 8px; font-size: 14px; text-align: left; cursor: pointer; border: 1px solid var(--line); background: #fff; }
.tick.on { border-color: var(--red); background: var(--soft); font-weight: 700; }
.tick.may.on { border-color: var(--gold); }
.ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
input.f, select.f, textarea.f { padding: 10px 12px; font-size: 15px; border: 1px solid var(--line); background: #fff; }
.note { margin-top: 6px; font-size: 12px; color: var(--brown); background: var(--soft); padding: 5px 7px; }
.signin { max-width: 420px; margin: 80px auto; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 26px; }
.signin label { display: block; font-weight: 700; margin-top: 12px; }
.signin input { width: 100%; margin-top: 6px; }
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; font-family: 'DM Sans', sans-serif; color: #000; }
  #printArea h1 { font-family: Syne, sans-serif; font-size: 22pt; margin: 0 0 4mm; }
  #printArea table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  #printArea th, #printArea td { border-bottom: 1px solid #999; padding: 2mm; text-align: left; vertical-align: top; }
  #printArea .small { font-size: 9pt; color: #333; }
}
select, input, textarea { max-width: 100%; }
.card, .sec, .col-m, .col-l { min-width: 0; }
@media (max-width: 1000px) {
  .wrap > * { max-width: 100%; min-width: 0; width: 100%; }
  .card > div[style*="display:flex"], .sec > div[style*="display:flex"], .card > div[style*="display: flex"] { flex-wrap: wrap; }
  .wrap { flex-direction: column; padding: 16px; }
  .col-l, .aside { width: 100%; }
  .top { padding: 12px 16px; }
  .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D166 (30 Oct, Lee): an empty box says what to do, in red - never a value the browser guessed */
#app input::placeholder, #app textarea::placeholder { color: var(--red); opacity: 1; font-weight: 700; letter-spacing: .02em; }
#rq::placeholder { font-size: 12px; letter-spacing: 0; }
/* D167 Emma dictionary card (same card as the old builder) */
.dlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; text-align: left; }
.dlink:hover { color: var(--gold); }
.ddef { background: #fff; border: 1px solid var(--gold); color: var(--navy); font: 600 11px "DM Sans", sans-serif; padding: 1px 6px; cursor: pointer; vertical-align: 1px; }
.ddef:hover { background: var(--soft); }
.dcard { max-width: 620px; width: calc(100% - 32px); max-height: 86vh; overflow: auto; border: 1px solid var(--gold); border-top: 6px solid var(--navy); padding: 22px 24px; font-family: "DM Sans", sans-serif; color: #1d2b29; background: #fff; }
.dcard::backdrop { background: rgba(18, 63, 59, .45); }
.dclose { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--navy); }
.dkick { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.dhead b { display: block; font-family: Syne, sans-serif; font-size: 24px; color: var(--navy); margin-top: 4px; }
.dhead small { color: #5d6b69; font-size: 13px; }
.dlead { font-size: 14px; color: #5d6b69; margin: 10px 0; }
.dblock { margin: 12px 0; }
.dblock b { display: block; color: var(--navy); font-size: 15px; }
.dblock p { margin: 3px 0 0; line-height: 1.5; font-size: 14.5px; }
.dpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dpill { background: var(--soft); border: 1px solid var(--gold); padding: 3px 8px; font-size: 13px; font-weight: 700; }
.dpill small { font-weight: 400; margin-left: 6px; color: #5d6b69; }
.drel { border: 1px solid var(--line); padding: 2px 8px; font-size: 13px; }
.dnote { font-size: 12.5px !important; color: #5d6b69; }

/* D196 take me there */
.mb-bad { border: 2px solid var(--red) !important; box-shadow: 0 0 0 3px #f6d5d2 !important; }
.mb-here { outline: 3px solid var(--gold) !important; outline-offset: 3px; background-color: var(--soft); }
.mb-focus { box-shadow: 0 0 0 3px var(--navy) !important; }
.mb-why { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; padding: 10px 16px; font-size: 15px; font-weight: 400; margin: 0 0 6px; }
.mb-why b { color: #fff; }
.mb-go { margin-top: 8px; border: 2px solid var(--red); background: #fff5f4; padding: 8px 12px; font-weight: 400; color: var(--ink, #1d2b29); }
.mb-go-h { font-size: 13px; color: var(--red); font-weight: 700; }
.mb-go-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--faint); }
.mb-go-r b { flex: 1; min-width: 140px; }
.mb-go-b { padding: 7px 12px; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; }
.mb-offwhy { flex-basis: 100%; color: var(--red); font-weight: 700; font-size: 14px; margin-top: 6px; }
.dbadge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brown); border: 1px dashed var(--brown); padding: 0 5px; vertical-align: middle; }
/* D211 progress strip (drawing approved 2 Nov 08:56) */
.mb-strip { display: flex; flex-wrap: wrap; margin: 6px 0 10px; }
.mb-st { flex: 1; min-width: 150px; padding: 10px 12px; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.mb-st b { display: block; font-size: 15px; }
.mb-st.ok { border-color: var(--green); background: #f1f7f3; } .mb-st.ok b { color: var(--green); }
.mb-st.next { border: 2px solid var(--red); background: #fff5f4; } .mb-st.next b { color: var(--red); }
.mb-st.wait { color: var(--quiet); }
.mb-sacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mb-sgo { display: inline-block; padding: 4px 9px; background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
.mb-slink { font-size: 12px; font-weight: 700; color: var(--navy); }
.mb-shead { font-size: 13px; color: var(--quiet); margin-top: 12px; }
/* D212 label ticks when a packaged product is added */
.mb-lbl { margin-top: 8px; font-size: 14px; }
.mb-lts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mb-tk { padding: 5px 8px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.mb-tk.on { border-color: var(--navy); font-weight: 700; }
.mb-ltsub { margin: 6px 0 2px 14px; padding: 6px 10px; border-left: 3px solid var(--gold); background: var(--soft); }
/* D213 (6) label read from a photo: pre-ticked in gold, the manager decides */
.mb-tk.ai { border: 2px solid var(--gold); background: var(--soft); }
.mb-ltp { margin: 4px 0 8px; }
.mb-ltpb { display: inline-block; padding: 7px 11px; background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.mb-ltai { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--gold); background: var(--soft); font-size: 13px; }
.mb-ltbad { margin-top: 6px; padding: 8px 10px; border: 2px solid var(--red); background: #fff5f4; font-size: 13px; font-weight: 700; }
/* D216 (D218 3, 5): the owner's one-time yes to reading; keep the original */
.mb-read { border: 2px solid var(--navy); background: #fff; padding: 12px 14px; font-size: 14px; margin: 10px 0; max-width: 680px; line-height: 1.45; }
.mb-read.off { border-color: var(--line); background: var(--soft); }
.mb-keep { border-left: 3px solid var(--gold); background: var(--soft); padding: 7px 10px; font-size: 13px; margin-top: 8px; }
/* D216 (D216 A, F): paid to / paid by / terms */
.mb-pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--faint); }
.mb-pay label { font-size: 13px; font-weight: 700; display: block; }
.mb-pay input, .mb-pay select { display: block; width: 100%; margin-top: 4px; padding: 8px; font: inherit; font-size: 14px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 800px) { .mb-pay { grid-template-columns: 1fr 1fr; } }
.cm-ok { color: var(--green); font-weight: 700; } .cm-bad { color: var(--red); font-weight: 700; }
.dot { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #fff; } .dot.green { background: var(--green); } .dot.yellow { background: #C99A00; } .dot.orange { background: #D26A1E; } .dot.red { background: var(--red); }