/* The four demo pages (T-022, restyled to the C2 theme in T-040). Loaded after ../theme.css, which supplies the night
   palette, the type and the neon sign. The page around the demos is dark, like the rest of the site; the demos themselves
   (the customer's phone, the printed sheet, the spreadsheet, the report, the checklist) stay light, as C2's lit window and
   light-box do. No web fonts of its own and no external requests: the faces come from ../fonts through theme.css. */

/* ---- The banner and the header ------------------------------------------------------------------------------ */
.demo-bar { background: var(--deep); color: var(--cream); text-align: center; font-size: .86rem; font-weight: 500; padding: 8px 14px; border-bottom: 1px solid var(--rule); }
.demo-bar::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); margin-right: 10px; transform: translateY(-1px); }
.demo-bar b { color: var(--glow); font-weight: 700; }

.demo-top .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; }
.demo-top .sign-name { gap: 7px; }
.street-nav { flex-wrap: wrap; gap: 8px 26px; align-items: center; }
.street-nav a.nav-cta { color: var(--coral); border: 1px solid var(--coral); border-radius: 3px 10px 10px 10px; padding: 7px 13px; }
.street-nav a.nav-cta:hover { color: var(--ink); background: var(--coral); }

/* ---- The page ---------------------------------------------------------------------------------------------- */
main.demo section { padding: 52px max(32px, calc((100% - var(--wrap)) / 2 + 32px)); }
main.demo section:first-child { padding-top: 60px; }
main.demo section.band { background: linear-gradient(180deg, rgba(255, 243, 230, .05), rgba(255, 243, 230, .018)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
main.demo h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .98; margin: 0 0 .45em; max-width: 18em; text-shadow: 0 0 44px rgba(255, 111, 89, .3); }
main.demo h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.06; margin: 0 0 .55em; }
main.demo h3 { font-size: 1.22rem; line-height: 1.15; margin: 1.5em 0 .45em; }
main.demo .lede { font-size: 1.14rem; line-height: 1.55; margin: 0 0 1em; max-width: 40em; }
main.demo p, main.demo li { max-width: 46em; }
main.demo b { color: var(--cream); font-weight: 700; }
main.demo .small { font-size: .88rem; } main.demo .muted { color: var(--dim); }
main.demo ul, main.demo ol { padding-left: 1.25em; } main.demo li { margin: .35em 0; }
main.demo li::marker { color: var(--coral); }
.crumb { font: 500 .76rem/1.5 var(--mono); letter-spacing: .06em; color: var(--dim); margin: 0 0 14px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 18px 0 0; padding: 0 !important; list-style: none; font: 400 .84rem/1.4 var(--mono); letter-spacing: .02em; color: var(--lilac); }
.job-meta li { margin: 0; }
.job-meta li::marker { content: ""; }
main.demo .job-meta b { color: var(--glow); font-weight: 500; }

.button.small { padding: 10px 17px; font-size: .94rem; }
.button.ghost { background: transparent; color: var(--coral); box-shadow: inset 0 0 0 2px var(--coral); }
.button.ghost:hover { background: rgba(255, 111, 89, .14); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }

/* ---- Light surfaces: what the demos show. Each keeps its own colours on the dark wall. ---------------------- */
.phone, .qr-sheet, .sheet, .report, .checklist, .chat { color: var(--ink); color-scheme: light; }
.phone, .qr-sheet, .report, .checklist, .sheet { box-shadow: 0 0 0 1px rgba(255, 207, 154, .3), 0 0 56px 4px rgba(255, 207, 154, .13), 0 26px 40px -22px rgba(0, 0, 0, .7); }
main.demo :is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) :is(h2, h3) { color: var(--ink); }
main.demo :is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) b { color: inherit; }
main.demo :is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) a { color: var(--stamp); }
main.demo :is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) .muted { color: var(--ink-muted); }
main.demo :is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) li::marker { color: var(--stamp); }
:is(.phone, .qr-sheet, .sheet, .report, .checklist, .chat) :focus-visible { outline-color: var(--plum); }

/* The page as a customer's phone shows it */
.split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 52px; align-items: start; }
.phone { border: 12px solid var(--frame); border-color: #24122c #170b1d #0f0714; border-radius: 34px; background: radial-gradient(120% 40% at 50% 0, #fffbf4 0%, var(--cream) 60%, #ffecd6 100%); padding: 18px 16px 20px; max-width: 400px; width: 100%; margin: 0 auto; }
main.demo .phone h2 { font-size: 1.5rem; line-height: 1.05; margin: 0 0 4px; color: var(--plum); }
.phone .hours { font-size: .88rem; color: var(--ink-muted); margin: 0 0 12px; }
.phone-buttons { display: flex; gap: 8px; margin: 0 0 12px; }
.demo-button { flex: 1; text-align: center; border: 2px solid var(--plum); border-radius: 3px 12px 12px 12px; padding: 9px 6px; font-weight: 700; font-size: .92rem; color: var(--plum); background: transparent; }
.demo-button.fill { background: var(--plum); color: var(--cream); }
.note-under { font-size: .8rem; color: var(--ink-muted); margin: -2px 0 12px; }
main.demo .menu-section h3 { font: 500 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-muted); border-bottom: 1px solid var(--paper-line); padding-bottom: 6px; margin: 20px 0 6px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px dotted var(--paper-line); }
.item .name { font-weight: 600; }
.item .price { font: 800 1.02rem/1.2 var(--display); font-stretch: 92%; white-space: nowrap; }
.item .desc { grid-column: 1 / -1; font-size: .86rem; color: var(--ink-muted); margin: 0; }
.tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tag { font-size: .72rem; font-weight: 600; border: 1px solid var(--stamp); color: var(--stamp); border-radius: 99px; padding: 1px 9px; background: #ffe9dc; }
.tag.none { border-color: var(--paper-line); color: var(--ink-muted); background: transparent; }
.allergen-note { font-size: .8rem; color: var(--ink-muted); margin: 16px 0 0; }

.explain h2:not(:first-child) { margin-top: 1.4em; }
.callout { background: rgba(255, 111, 89, .09); border-left: 4px solid var(--coral); border-radius: 3px 12px 12px 3px; padding: 14px 18px; margin: 18px 0; }
.callout p { margin: 0; color: var(--cream); }

/* Printable QR sheet */
.qr-sheet { background: #fffdf8; border: 3px solid var(--plum); border-radius: 4px 4px 4px 28px; padding: 24px; max-width: 440px; text-align: center; }
main.demo .qr-sheet h3 { font-size: 1.7rem; margin: 0 0 6px; color: var(--plum); }
.qr-box { width: 220px; max-width: 100%; height: 220px; margin: 16px auto; border: 3px dashed var(--ink); display: grid; place-items: center; text-align: center; padding: 14px; font-size: .9rem; color: var(--ink-muted); }
.qr-box b { display: block; color: var(--ink); margin-bottom: 4px; }
.qr-sheet p { margin: .3em auto; }

/* Chat mock: a WhatsApp conversation, as the owner would see it */
.chat { background: #efe3d3; border-radius: 4px 18px 18px 18px; padding: 14px; min-height: 120px; box-shadow: inset 0 0 0 1px rgba(110, 54, 22, .12); }
.bubble { background: #dcf3d0; border-radius: 12px 12px 2px 12px; padding: 10px 14px; margin: 0 0 8px auto; max-width: 92%; font-size: .96rem; line-height: 1.45; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.bubble.in { background: #fff; border-radius: 12px 12px 12px 2px; margin: 0 auto 8px 0; }
.bubble .who { display: block; font: 500 .68rem/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-muted); margin-bottom: 3px; }
.mock-note { font-size: .88rem; color: var(--dim); margin: 8px 0 0; }
.chat .mock-note { color: var(--ink-muted); margin: 0; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.seg label { font-weight: 500; font-size: .9rem; margin: 0; color: var(--lilac); background: rgba(255, 243, 230, .05); border: 1px solid var(--rule); border-radius: 3px 12px 12px 12px; padding: 8px 15px; cursor: pointer; }
.seg label:hover { border-color: var(--coral); }
.seg label:has(input:checked) { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); color: var(--cream); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--glow); outline-offset: 2px; }
.seg input { accent-color: var(--coral); margin-right: 6px; }
.mock-form { display: grid; gap: 6px; max-width: none; }
.mock-form > label { margin-top: 12px; }
.mock-form select { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--paper-line); border-radius: 12px; padding: 12px 15px; }
.mock-form select:focus { outline: 0; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(255, 111, 89, .38); }
.mock-form textarea { min-height: 70px; resize: vertical; }
.mock-form .button { width: 100%; margin-top: 14px; }
.mock-form fieldset { margin: 0; }
.mock-form .chips { margin-top: 2px; }

/* Spreadsheet before and after */
.sheet { overflow-x: auto; border-radius: 10px; margin: 14px 0 8px; background: #fff; }
.sheet table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.sheet.before table { font: 400 .8rem/1.4 var(--mono); }
.sheet th, .sheet td { text-align: left; padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid #e4dbd1; border-right: 1px solid #e4dbd1; vertical-align: baseline; }
.sheet th:last-child, .sheet td:last-child { border-right: 0; }
.sheet th { background: #f1ebe4; color: #4a3f52; font: 600 .78rem var(--sans); }
.sheet.before th { background: #e9e9e9; color: #444; font: 600 .78rem var(--mono); }
.sheet .err { background: #fbe3e3; color: #a61b1b; font-weight: 700; }
.sheet .num { text-align: right; }
.sheet tbody tr:last-child td { border-bottom: 1px solid #e4dbd1; }
.sheet tfoot td { font-weight: 700; background: #ffecd6; border-bottom: 0; }
.pill-yes, .pill-no { display: inline-block; border-radius: 99px; padding: 0 9px; font-size: .78rem; font-weight: 700; }
.pill-yes { background: #dff3df; color: #1d6b2d; } .pill-no { background: #fbe3e3; color: #a61b1b; }
.problems { padding-left: 1.25em; } .problems li { margin: .4em 0; }
.report { background: #fffdf8; border-radius: 4px 4px 4px 24px; padding: 22px; max-width: 660px; margin-top: 18px; }
main.demo .report h3 { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.15; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.kpi { border: 1px solid #e4dbd1; border-radius: 3px 10px 10px 10px; padding: 10px 12px; background: #fff; }
main.demo .report .kpi b { display: block; font: 800 1.35rem/1.15 var(--display); font-stretch: 92%; color: var(--stamp); }
.kpi span { font-size: .82rem; color: var(--ink-muted); }
.bars { display: grid; gap: 7px; margin: 10px 0; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 8px; align-items: center; font-size: .9rem; }
.bar-row > b { text-align: right; }
.bar { background: #ffecd6; border-radius: 6px; height: 16px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--stamp); }

/* Acceptance checklist */
.checklist { background: #fffdf8; border-radius: 4px 4px 4px 24px; padding: 24px 28px; max-width: 800px; }
main.demo .checklist h2 { margin: 0 0 .4em; font-size: 1.5rem; }
.checklist ol { padding-left: 1.3em; } .checklist li { margin: .55em 0; }
.checklist ol ol { margin-top: .3em; }
.checklist .not-incl { color: var(--ink-muted); font-size: .92rem; margin-bottom: 0; }

/* Index cards */
.demo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 22px; }
.demo-card { border: 1px solid var(--rule); border-radius: 3px 14px 14px 14px; padding: 22px; display: grid; gap: 8px; align-content: start; background: linear-gradient(180deg, rgba(255, 243, 230, .06), rgba(255, 243, 230, .014)); }
main.demo .demo-card h3 { margin: 0; font-size: 1.28rem; line-height: 1.15; }
.demo-card .price { font: 500 .8rem/1.4 var(--mono); letter-spacing: .02em; color: var(--glow); }
.demo-card p { margin: 0; }
.demo-card p:last-child { margin-top: 8px; }

@media (max-width: 1020px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .demo-cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  main.demo section { padding: 40px 18px; }
  main.demo section:first-child { padding-top: 44px; }
  .demo-top .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .demo-top .sign { gap: 11px; } .demo-top .tube { width: 32px; height: 32px; } .demo-top .neon-word { font-size: 1.3rem; }
  .demo-top .sign-name small { font-size: .56rem; }
  .street-nav { gap: 6px 18px; } .street-nav a { font-size: .68rem; letter-spacing: .12em; }
  .phone { border-width: 9px; border-radius: 28px; padding: 16px 12px 18px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.demo .report .kpi b { font-size: 1.2rem; }
  .bar-row { grid-template-columns: 96px 1fr 58px; }
  .report, .checklist { padding: 18px 16px; }
  .qr-sheet { padding: 18px 14px; }
}

/* On paper: black ink on white, whatever the screen colours were, and no page furniture. Everything under main is forced
   (the dark theme's cream and lilac text, the pills, the chips and the glows would otherwise print pale or vanish when
   the browser leaves background graphics off). The menu page, which tells the visitor that Print gives the QR sheet on
   its own, prints only that sheet: its main carries class print-qr. */
@media print {
  .demo-bar, .page-top, footer, .no-print { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; }
  main.demo section, main.demo section.band { background: none !important; border: 0 !important; padding: 12pt 0 !important; }
  main.demo * { color: #000 !important; background: transparent !important; text-shadow: none !important; box-shadow: none !important; border-color: #000 !important; }
  main.demo li::marker, main.demo ::placeholder { color: #000 !important; opacity: 1; }
  main.demo .phone { border-width: 2pt !important; border-radius: 12pt !important; }
  main.demo .bar { border: 1px solid #000; background: #fff !important; }
  main.demo .bar i { background: #000 !important; }
  main.print-qr > section { display: none !important; }
  main.print-qr > section:has(.qr-sheet) { display: block !important; }
  main.print-qr > section:has(.qr-sheet) > :not(.qr-sheet) { display: none !important; }
}