/* Demo stage (/demo): office, driver phone and customer portal in one window.
   Demo copy only. Uses the brand tokens from app.css. */

html, body.demo { height: 100%; }
body.demo {
    margin: 0;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-ink);
    font-family: 'Barlow', system-ui, sans-serif;
    --bar-h: 56px;
    --gap: 16px;
}
body.demo::before, body.demo::after { display: none; }

/* ---------- Top bar ---------- */
.demo-bar {
    height: var(--bar-h);
    display: flex; align-items: center; gap: 24px;
    padding: 0 16px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-3);
    box-sizing: border-box;
}
.demo-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.demo-brand img { display: block; height: 28px; width: auto; }
.demo-brand .logo-text { font-size: 24px; }
.demo-tag { color: var(--on-ink-muted); font-size: 14px; white-space: nowrap; }

.demo-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; min-width: 0; }
.demo-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--on-ink-muted);
    font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.demo-tab:hover { background: var(--ink-2); color: var(--on-ink); }
.demo-tab[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.demo-tab kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 4px;
    border-radius: 4px; border: 1px solid currentColor;
    font: 600 12px/1 'Barlow', system-ui, sans-serif; opacity: .7;
}

.demo-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.demo-tools form { margin: 0; }
.demo-tool {
    padding: 7px 12px;
    border: 1px solid var(--ink-3); border-radius: 8px;
    background: transparent; color: var(--on-ink-muted);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.demo-tool:hover { color: var(--on-ink); border-color: var(--on-ink-muted); }
.demo-tool--reset:disabled { opacity: .6; cursor: progress; }

/* Hidden bar: a small tab in the corner brings it back. */
.demo-show-bar {
    display: none;
    position: fixed; z-index: 10; top: 0; right: 16px;
    padding: 2px 10px 4px;
    border: 0; border-radius: 0 0 6px 6px;
    background: var(--ink-3); color: var(--on-ink-muted);
    font: 600 12px 'Barlow', system-ui, sans-serif;
    opacity: 0; cursor: pointer; transition: opacity .2s;
}
.demo-show-bar:hover, .demo-show-bar:focus-visible { opacity: 1; }
body.demo.bar-hidden { --bar-h: 0px; }
body.demo.bar-hidden .demo-bar { display: none; }
body.demo.bar-hidden .demo-show-bar { display: block; }

/* ---------- Stage ---------- */
.demo-stage {
    height: calc(100% - var(--bar-h));
    display: flex; gap: var(--gap);
    padding: var(--gap);
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at 70% 0%, rgba(52, 176, 103, .14), transparent 60%),
        var(--ink-2);
}
.demo-pane { display: none; flex-direction: column; min-width: 0; min-height: 0; }
.demo-label {
    display: flex; align-items: center; gap: 8px;
    height: 28px; flex: none; margin-bottom: 8px;
    font-size: 15px; font-weight: 600; color: var(--on-ink);
    white-space: nowrap; overflow: hidden;
}
.demo-label-who { color: var(--on-ink-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.demo-label-who::before { content: '·'; margin: 0 8px 0 2px; }
.demo-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.demo-dot--office { background: var(--accent); }
.demo-dot--driver { background: #f2b33d; }
.demo-dot--customer { background: #6aa8ff; }
body.demo.labels-off .demo-label { display: none; }

.demo-screen {
    flex: 1; min-height: 0;
    border-radius: 10px; overflow: hidden;
    background: var(--paper);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.demo-screen iframe, .phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.demo-screen iframe { transform-origin: 0 0; }

/* Which panes each view shows. */
body.demo[data-view="office"] .demo-pane--office,
body.demo[data-view="customer"] .demo-pane--customer,
body.demo[data-view="split"] .demo-pane--office,
body.demo[data-view="split-customer"] .demo-pane--customer { display: flex; flex: 1; }
body.demo[data-view="driver"] .demo-pane--driver,
body.demo[data-view="split"] .demo-pane--driver,
body.demo[data-view="split-customer"] .demo-pane--driver { display: flex; flex: none; align-items: center; }
body.demo[data-view="driver"] .demo-pane--driver { flex: 1; }
/* Side by side: the phone sits on the right. */
body.demo[data-view="split"] .demo-pane--driver,
body.demo[data-view="split-customer"] .demo-pane--driver { order: 2; }

/* ---------- The phone ----------
   The frame is always a real 390 x 844 phone screen, so the driver app
   lays out exactly as on a phone; demo.js scales it to fit (--s). */
.phone-fit {
    --s: 1;
    flex: none;
    width: calc(418px * var(--s));
    height: calc(872px * var(--s));
}
.phone {
    position: relative;
    width: 418px; height: 872px;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 58px;
    background: #0d1416;
    box-shadow: 0 0 0 2px #3b5358, 0 24px 60px rgba(0, 0, 0, .5);
    transform: scale(var(--s));
    transform-origin: 0 0;
}
.phone-screen {
    display: flex; flex-direction: column;
    width: 390px; height: 844px;
    border-radius: 44px; overflow: hidden;
    background: var(--ink);
}
.phone-screen iframe { flex: 1; height: auto; min-height: 0; }
/* Status bar above the app: clock, the island, signal and battery. */
.phone-status {
    position: relative; flex: none; height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 30px 0 34px; box-sizing: border-box;
    color: #fff; font: 600 15px/1 -apple-system, 'Barlow', system-ui, sans-serif;
}
.phone-notch {
    position: absolute; top: 10px; left: 50%;
    width: 112px; height: 30px; margin-left: -56px;
    border-radius: 16px; background: #0d1416;
}
.phone-icons { display: flex; align-items: center; gap: 6px; }
.phone-signal {
    width: 17px; height: 11px;
    background: linear-gradient(to right, #fff 0 3px, transparent 3px 4.5px, #fff 4.5px 7.5px, transparent 7.5px 9px, #fff 9px 12px, transparent 12px 13.5px, #fff 13.5px 17px);
    clip-path: polygon(0 75%, 22% 75%, 22% 50%, 48% 50%, 48% 25%, 74% 25%, 74% 0, 100% 0, 100% 100%, 0 100%);
}
.phone-battery {
    position: relative; width: 24px; height: 11px;
    border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 3.5px; box-sizing: border-box;
}
.phone-battery::before { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #fff; border-radius: 1.5px; }
.phone-battery::after { content: ''; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: rgba(255, 255, 255, .55); border-radius: 0 1px 1px 0; }

/* ---------- Toast ---------- */
.demo-toast {
    position: fixed; z-index: 20; left: 50%; bottom: 24px;
    transform: translateX(-50%);
    padding: 10px 18px; border-radius: 8px;
    background: var(--accent); color: var(--on-accent);
    font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* Small laptops: tighter bar. */
@media (max-width: 1100px) {
    .demo-tag { display: none; }
    .demo-tab { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 760px) {
    .demo-tab kbd { display: none; }
    .demo-tools .demo-tool[data-hide-bar] { display: none; }
}