/*
    The illustrated console panels.

    These are drawings of the real console in HTML and CSS rather than screenshots, which is a
    deliberate trade. A screenshot is more truthful on the day it is taken and slowly becomes a lie;
    a drawing stays legible at any width, weighs nothing, and can be corrected in a diff. It also
    means no customer data is on the marketing site by accident, which a screenshot of a live console
    eventually manages.

    Everything here uses the console's own greys (--c-*) rather than the site's warm ink, because
    that is what the console looks like and the point is to show the console.
*/

/* ---------------------------------------------------------------- shell */

.mock {
    background: var(--c-bg);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 50px 90px -30px rgba(15, 3, 32, .7);
    animation: mob-float 9s ease-in-out infinite;
    display: flex;
    font-size: 13px;
    color: var(--c-ink);
}

/* On a light section the panel needs a real border and a much lighter shadow. */
.mock--light {
    border-color: #E4DFEE;
    box-shadow: 0 24px 60px -34px rgba(36, 16, 51, .4);
    animation: none;
}

.mock--still { animation: none; }

.mock-side {
    width: 158px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--line-soft);
    padding: 14px 10px;
}

.mock-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; }

.mock-brand-mark {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    flex: none;
}

.mock-brand-name { font-weight: 800; font-size: 13px; letter-spacing: -.01em; }

.mock-side-head {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--c-faint);
    padding: 8px 6px 6px;
}

.mock-nav { display: flex; flex-direction: column; gap: 1px; }

.mock-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--c-body);
    font-weight: 500;
}

.mock-nav-item .icon { color: var(--c-muted); }

.mock-nav-item.is-active {
    background: var(--tint);
    color: var(--brand);
    font-weight: 700;
}

.mock-nav-item.is-active .icon { color: inherit; }

.mock-main { flex: 1; padding: 16px; min-width: 0; }

.mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mock-title { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.mock-title--sm { font-size: 15px; }
.mock-sub { font-size: 11px; color: var(--c-muted); }
.mock-sub--lg { font-size: 11.5px; }

.mock-chips-row { display: flex; gap: 6px; }

.mock-chip {
    border: 1px solid var(--line-soft);
    background: #fff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 11px;
    color: var(--c-body);
    font-weight: 600;
    white-space: nowrap;
}

.mock-chip--brand {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.mock-chip--action {
    padding: 6px 10px;
    font-weight: 700;
    color: var(--brand);
}

/* ---------------------------------------------------------------- device table */

.mock-table {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
}

.mock-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr .9fr;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid #F4F3F7;
    align-items: center;
}

.mock-row:last-child { border-bottom: 0; }

.mock-row--head {
    padding: 9px 13px;
    border-bottom-color: var(--line-soft);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--c-muted);
}

/* The rows deal themselves in. Delays are per-position rather than per-element so the markup does
   not carry timing values that would have to be renumbered when a row is added. */
.mock-row--in { animation: mob-rowin .55s var(--ease) both; }
.mock-row--in:nth-of-type(2) { animation-delay: .37s; }
.mock-row--in:nth-of-type(3) { animation-delay: .49s; }
.mock-row--in:nth-of-type(4) { animation-delay: .61s; }
.mock-row--in:nth-of-type(5) { animation-delay: .73s; }

.mock-device-name { font-weight: 600; font-size: 12px; }
.mock-serial { font-family: var(--mono); font-size: 9.5px; color: var(--c-faint); }
.mock-cell { font-size: 11px; color: var(--c-body); }
.mock-row .status { justify-self: start; }

/* ---------------------------------------------------------------- tiles */

.mock-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

.mock-tile {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px;
}

.mock-tile-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--c-muted);
    margin-bottom: 6px;
}

.mock-tile-value { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }

.mock-bar {
    height: 5px;
    background: var(--neutral-bg);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.mock-bar > span {
    display: block;
    height: 100%;
    transform-origin: left center;
    animation: mob-bar 1.1s var(--ease) both .3s;
    background: var(--brand);
}

.mock-bar--warn > span { background: var(--warn-fg); animation-delay: .3s; }
.mock-bar--bad > span { background: var(--bad-fg); animation-delay: .5s; }

/* ---------------------------------------------------------------- report panel */

.mock-report {
    background: var(--c-bg);
    border: 1px solid #E4DFEE;
    border-radius: 18px;
    padding: 18px;
}

.mock-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.note--mock { font-size: 11.5px; margin-bottom: 12px; }

.mock-finding {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 15px;
}

.mock-finding + .mock-finding { margin-top: 10px; }

.mock-finding-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.mock-finding-who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mock-finding-name { font-weight: 700; font-size: 14px; color: var(--c-ink); }
.mock-finding-serial { font-family: var(--mono); font-size: 10.5px; color: var(--c-faint); }
.mock-finding-count { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.mock-finding-text { font-size: 12.5px; line-height: 1.6; color: var(--c-body); }
.mock-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------------------------------------------------------- enrolment and policy cards */

.step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }

.option {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.option-thumb {
    width: 52px; height: 52px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A QR code, suggested rather than drawn: a real one would be a scannable link to nowhere. */
.option-thumb--qr { background: repeating-linear-gradient(45deg, #241033 0 4px, #fff 4px 8px); }

.option-thumb--tint {
    background: var(--tint);
    border: 1px solid var(--tint-line);
    color: var(--brand);
}

.option-title { font-size: 12px; font-weight: 700; color: var(--c-ink); }
.option-text { font-size: 11px; line-height: 1.5; color: var(--c-muted); margin-top: 2px; }

.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11.5px; }
.kv-key { color: var(--c-body); font-weight: 600; }

.event { display: flex; gap: 10px; align-items: flex-start; }
.event .dot { margin-top: 6px; }
.event-title { font-size: 11.5px; font-weight: 700; color: var(--c-ink); }
.event-meta { font-size: 10.5px; color: var(--c-muted); }

.event--in { animation: mob-rowin .55s var(--ease) both; }
.event--in:nth-of-type(1) { animation-delay: .34s; }
.event--in:nth-of-type(2) { animation-delay: .48s; }
.event--in:nth-of-type(3) { animation-delay: .62s; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 560px) {
    /* Below this the sidebar and the table cannot both be legible, and the sidebar is the part a
       visitor already understands. */
    .mock { flex-direction: column; }
    .mock-side { width: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .mock-nav { display: none; }
    .mock-side-head { display: none; }
    .mock-brand { padding-bottom: 0; }
}

/* ================================================================ kiosk handset */

.phone-wrap { display: flex; justify-content: center; }

.phone {
    width: 264px;
    background: #241033;
    border-radius: 36px;
    padding: 12px;
    box-shadow: 0 30px 60px -24px rgba(20, 4, 40, .45);
}

.phone-screen {
    background: linear-gradient(165deg, #3A1656, #241033);
    border-radius: 26px;
    overflow: hidden;
    padding: 34px 20px 24px;
}

.phone-id { text-align: center; margin-bottom: 26px; }

.phone-avatar {
    width: 44px; height: 44px;
    margin: 0 auto 12px;
    background: var(--brand-gradient);
    border-radius: 13px;
    animation: mob-ring 3.4s ease-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
}

.phone-name { color: #fff; font-weight: 700; font-size: 14px; }
.phone-user { color: rgba(255, 255, 255, .55); font-size: 11px; margin-top: 3px; }

.phone-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.phone-app { display: flex; flex-direction: column; align-items: center; gap: 7px; }

.phone-app-icon {
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, .12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.phone-app-label { font-size: 9.5px; color: rgba(255, 255, 255, .75); }

.phone-status {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, .45);
}

/* ================================================================ remote control */

.rc { background: #fff; border: 1px solid #E4DFEE; border-radius: 18px; overflow: hidden; }

.rc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--line-soft);
}

.rc-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; color: var(--c-ink); }

.rc-live {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ok-fg);
    animation: mob-pulse 2.4s ease-out infinite;
    flex: none;
}

.rc-body { padding: 16px; background: var(--c-bg); }

.rc-screen {
    background: #241033;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 12px, rgba(255, 255, 255, .02) 12px 24px);
    border-radius: 10px;
    height: 266px;
    position: relative;
    overflow: hidden;
}

.rc-scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 34px;
    background: linear-gradient(180deg, rgba(160, 90, 255, 0), rgba(160, 90, 255, .22));
    animation: mob-scan 4.6s ease-in-out infinite;
}

/* The banner the device itself shows while somebody is watching. It is in the drawing because it
   is in the product, and because being told you are being watched is the reassurance that sells it. */
.rc-banner {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    background: rgba(160, 90, 255, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 10px;
    text-align: center;
}

.rc-pane {
    position: absolute;
    left: 10px; right: 10px; top: 32px; bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rc-pane[hidden] { display: none; }

.rc-pane--app { background: #fff; box-shadow: 0 10px 24px -12px rgba(10, 2, 20, .6); }
.rc-pane--logs { background: #150724; border: 1px solid rgba(255, 255, 255, .1); }
.rc-pane--files { background: #fff; }

.rc-tabs { display: flex; gap: 8px; margin-top: 12px; }

.rc-tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-family: var(--body);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    color: var(--c-body);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.rc-tab[aria-selected="true"] {
    background: var(--tint);
    border-color: #E0D0FB;
    color: var(--brand);
    font-weight: 700;
}

.rc-hint { font-size: 10.5px; color: var(--c-muted); margin-top: 9px; text-align: center; }
.rc-meta { font-family: var(--mono); font-size: 10px; color: var(--c-muted); margin-top: 12px; line-height: 1.7; }

/* ---------------------------------------------------------------- the till app being controlled */

.till-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #241033;
}

.till-mark {
    width: 16px; height: 16px;
    border-radius: 5px;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 8.5px;
}

.till-name { color: #fff; font-weight: 700; font-size: 9.5px; }
.till-tag { font-family: var(--mono); font-size: 8px; color: rgba(255, 255, 255, .55); }

.till-body { flex: 1; padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.till-line { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--c-body); }
.till-line b { color: var(--c-ink); font-weight: 700; }
.till-sep { height: 1px; background: #F1EFF6; }

.till-total {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #E9E5F1;
}

.till-total-label { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); }

.till-total-value {
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
    color: var(--c-ink);
    letter-spacing: -.02em;
}

.till-actions { display: flex; gap: 6px; padding: 0 10px 10px; }

.till-btn {
    flex: 1;
    text-align: center;
    background: #F4F2F8;
    border-radius: 6px;
    padding: 7px;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--c-body);
}

.till-btn--pay { flex: 1.6; background: var(--brand); color: #fff; font-weight: 800; }

/* ---------------------------------------------------------------- live log pane */

.rclog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.rclog-title { color: rgba(255, 255, 255, .85); font-weight: 700; font-size: 9.5px; }

.rclog-state {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 8px;
    color: #7ADFA4;
}

.rclog-state .dot { width: 5px; height: 5px; background: #7ADFA4; }

.rclog-body {
    flex: 1;
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 8px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .62);
    overflow: hidden;
}

.rclog-body > div { animation: mob-rowin .5s ease-out both; }
.rclog-body > div:nth-child(1) { animation-delay: .05s; }
.rclog-body > div:nth-child(2) { animation-delay: .14s; }
.rclog-body > div:nth-child(3) { animation-delay: .23s; }
.rclog-body > div:nth-child(4) { animation-delay: .32s; }
.rclog-body > div:nth-child(5) { animation-delay: .41s; }
.rclog-body > div:nth-child(6) { animation-delay: .5s; }

.rclog-time { color: rgba(255, 255, 255, .35); }
.lvl-i { color: #9BE7B8; }
.lvl-w { color: #F5C77E; }
.lvl-e { color: #F58E86; }

.rclog-actions { display: flex; gap: 6px; padding: 0 10px 9px; }

.rclog-btn {
    background: rgba(255, 255, 255, .1);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
}

.rclog-btn--go { margin-left: auto; background: var(--brand); color: #fff; font-weight: 800; }

/* ---------------------------------------------------------------- file pane */

.rcfile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #EFEDF4;
}

.rcfile-path { font-family: var(--mono); font-size: 8.5px; color: var(--brand); }

.rcfile-upload {
    background: var(--tint);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 8px;
    font-weight: 800;
    color: var(--brand);
}

.rcfile-list { flex: 1; min-height: 0; overflow: hidden; }

.rcfile-row {
    display: grid;
    grid-template-columns: 1fr 52px 46px;
    gap: 8px;
    padding: 4px 10px;
    border-bottom: 1px solid #F6F5F9;
    align-items: center;
    font-size: 9px;
    animation: mob-rowin .5s ease-out both;
}

.rcfile-row:nth-child(2) { animation-delay: .06s; }
.rcfile-row:nth-child(3) { animation-delay: .14s; }
.rcfile-row:nth-child(4) { animation-delay: .22s; }
.rcfile-row:nth-child(5) { animation-delay: .3s; }
.rcfile-row:nth-child(6) { animation-delay: .38s; }
.rcfile-row:last-child { border-bottom: 0; }

.rcfile-row--head {
    padding: 5px 10px;
    background: var(--page);
    border-bottom-color: #EFEDF4;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--c-faint);
    animation: none;
}

.rcfile-name { display: flex; align-items: center; gap: 6px; color: var(--c-ink); }
.rcfile-name .icon { color: var(--c-muted); }
.rcfile-size { color: var(--c-muted); }
.rcfile-size--none { color: var(--c-faint); }
.rcfile-act { color: var(--brand); font-weight: 700; }
.rcfile-foot { padding: 7px 10px; border-top: 1px solid #EFEDF4; font-size: 8px; color: var(--c-muted); }

/* ================================================================ zone map */

.zonemap { background: #fff; border: 1px solid #E4DFEE; border-radius: 18px; overflow: hidden; padding: 16px; }
.zonemap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zonemap-title { font-weight: 800; font-size: 14px; color: var(--c-ink); }

.zonemap-btn {
    background: var(--brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 7px;
}

.zonemap-canvas {
    height: 200px;
    border-radius: 10px;
    background: #EFEAF9;
    border: 1px solid #E0D0FB;
    position: relative;
    overflow: hidden;
}

.zonemap-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.zone-box { position: absolute; border: 2px solid; }
.zone-box--depot { left: 32px; top: 34px; width: 132px; height: 92px; border-color: var(--brand); background: rgba(109, 40, 217, .12); }
.zone-box--store { right: 34px; bottom: 30px; width: 104px; height: 74px; border-color: var(--warn-fg); background: rgba(150, 89, 10, .1); }

.zone-label {
    position: absolute;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, .82);
    padding: 1px 4px;
    border-radius: 3px;
}

.zone-label--depot { left: 38px; top: 40px; color: var(--brand); }
.zone-label--store { right: 40px; bottom: 88px; color: var(--warn-fg); }

.blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; }
.blip--ok { background: var(--ok-fg); box-shadow: 0 0 0 4px rgba(25, 122, 69, .2); }
.blip--bad { background: var(--bad-fg); box-shadow: 0 0 0 4px rgba(179, 38, 30, .2); animation: mob-pulse 2.8s ease-out infinite; }
.blip--moving { left: 74px; top: 70px; animation: mob-blip 12s ease-in-out infinite; }
.blip--parked { left: 120px; top: 96px; }
.blip--strayed { left: 196px; top: 150px; }

.zonemap-events { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }

/* ================================================================ audit table */

.logtable { background: #fff; border: 1px solid #E4DFEE; border-radius: 18px; overflow: hidden; padding: 16px; }
.logtable-title { font-weight: 800; font-size: 14px; color: var(--c-ink); margin-bottom: 4px; }
.logtable-sub { font-size: 11.5px; color: var(--c-muted); margin-bottom: 14px; }

.logtable-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr .7fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F4F3F7;
    font-size: 12px;
    align-items: center;
}

.logtable-row:last-child { border-bottom: 0; }

.logtable-row--head {
    padding: 8px 0;
    border-bottom-color: var(--line-soft);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--c-muted);
}

.logtable-who { color: var(--c-ink); font-weight: 600; }
.logtable-cell { color: var(--c-body); }

.logtable-note {
    background: var(--c-bg);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 11px 13px;
    margin-top: 14px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--c-body);
}

.till-who { display: flex; align-items: center; gap: 7px; }