/* Copyright © Spatial Reality Solutions Inc., 2026
 *
 * Matrise Field app. The same tokens as the desktop design system in
 * system.css: an 8px spacing scale, Inter, radius 4, and the accent
 * #db1e2a for the primary action and the focus ring only. On a phone the
 * controls are 48px tall, above the 44px touch minimum, and text in
 * inputs is 16px so that iPhone does not zoom the page when one is
 * focused.
 */

@font-face {
    font-family: Inter;
    src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --m-space-1: 2px;
    --m-space-2: 4px;
    --m-space-3: 8px;
    --m-space-4: 12px;
    --m-space-5: 16px;
    --m-space-6: 24px;
    --m-space-7: 32px;
    --m-space-8: 40px;
    --m-space-9: 48px;

    --m-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --m-fs-label: 14px;
    --m-lh-label: 18px;
    --m-fs-body: 14px;
    --m-lh-body: 20px;
    --m-fs-title: 16px;
    --m-lh-title: 24px;
    --m-fs-panel: 20px;
    --m-lh-panel: 28px;

    --m-text: #e5e7eb;
    --m-text-body: #cbd5e1;
    --m-text-secondary: #9ca3af;
    --m-text-disabled: #6b7280;

    --m-accent: #db1e2a;
    --m-accent-hover: #b8141f;

    --m-page: #0a0d12;
    --m-surface: #11151c;
    --m-field: rgba(255, 255, 255, .04);
    --m-border: rgba(255, 255, 255, .12);
    --m-border-control: #9ca3af;
    --m-hover: rgba(255, 255, 255, .06);

    --m-status-bad: #f87171;
    --m-status-warn: #fbbf24;
    --m-status-good: #4ade80;

    --m-radius: 4px;
    --m-touch: 48px;

    --m-dur-fast: 70ms;
    --m-dur: 240ms;
    --m-ease: cubic-bezier(.2, 0, .38, .9);
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--m-page); }

body {
    font-family: var(--m-font);
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    color: var(--m-text-body);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font-family: inherit; }

/* ── Screen ─────────────────────────────────────────────────────────── */

#app {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.screen {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--m-space-6) var(--m-space-5) var(--m-space-7);
    animation: m-in var(--m-dur) var(--m-ease);
}

@keyframes m-in {
    from { opacity: 0; transform: translateY(var(--m-space-3)); }
    to { opacity: 1; transform: none; }
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--m-space-3);
    margin-bottom: var(--m-space-7);
    color: var(--m-text);
    font-size: var(--m-fs-title);
    line-height: var(--m-lh-title);
    font-weight: 600;
}

.brand img { width: var(--m-space-8); height: var(--m-space-8); }

/* A panel's title is always its largest text. */
h1 {
    margin: 0 0 var(--m-space-3);
    font-size: var(--m-fs-panel);
    line-height: var(--m-lh-panel);
    font-weight: 600;
    color: var(--m-text);
}

h1:focus { outline: none; }

h2 {
    margin: var(--m-space-6) 0 var(--m-space-3);
    font-size: var(--m-fs-title);
    line-height: var(--m-lh-title);
    font-weight: 600;
    color: var(--m-text);
}

p { margin: 0 0 var(--m-space-5); }

.lede { color: var(--m-text-body); margin-bottom: var(--m-space-6); }
.meta { color: var(--m-text-secondary); font-size: var(--m-fs-label); line-height: var(--m-lh-label); }

/* ── Form ───────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--m-space-5); }

.field label {
    display: block;
    margin-bottom: var(--m-space-2);
    font-size: var(--m-fs-label);
    line-height: var(--m-lh-label);
    color: var(--m-text);
}

.field input {
    display: block;
    width: 100%;
    min-height: var(--m-touch);
    padding: var(--m-space-3) var(--m-space-4);
    font-size: var(--m-fs-title);
    line-height: var(--m-lh-title);
    color: var(--m-text);
    background: var(--m-field);
    border: 1px solid var(--m-border-control);
    border-radius: var(--m-radius);
}

.field input.code {
    letter-spacing: var(--m-space-2);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons: real buttons, 48px ────────────────────────────────────── */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-3);
    width: 100%;
    min-height: var(--m-touch);
    padding: var(--m-space-3) var(--m-space-5);
    font-size: var(--m-fs-title);
    line-height: var(--m-lh-title);
    font-weight: 600;
    color: var(--m-text);
    background: transparent;
    border: 1px solid var(--m-border-control);
    border-radius: var(--m-radius);
    cursor: pointer;
    transition: background var(--m-dur-fast) var(--m-ease);
}

.btn:hover { background: var(--m-hover); }

.btn.primary {
    color: #fff;
    background: var(--m-accent);
    border-color: var(--m-accent);
}

.btn.primary:hover { background: var(--m-accent-hover); border-color: var(--m-accent-hover); }

.btn[disabled] {
    color: var(--m-text-disabled);
    background: transparent;
    border-color: var(--m-border);
    cursor: default;
}

.btn.primary[disabled] { color: var(--m-text-disabled); background: var(--m-hover); border-color: var(--m-border); }

.btn + .btn { margin-top: var(--m-space-3); }

button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--m-accent);
    outline-offset: 2px;
}

.btn svg { width: var(--m-space-5); height: var(--m-space-5); flex: none; }

/* A row in a list of sites: a button, with the name and where it is. */
.row {
    display: flex;
    align-items: center;
    gap: var(--m-space-4);
    width: 100%;
    min-height: var(--m-touch);
    margin-bottom: var(--m-space-3);
    padding: var(--m-space-3) var(--m-space-4);
    text-align: left;
    color: var(--m-text);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    cursor: pointer;
    transition: background var(--m-dur-fast) var(--m-ease);
}

.row:hover { background: var(--m-hover); }
.row .grow { flex: 1; min-width: 0; }
.row .name { display: block; font-size: var(--m-fs-title); line-height: var(--m-lh-title); font-weight: 600; }
.row .sub { display: block; color: var(--m-text-secondary); font-size: var(--m-fs-label); line-height: var(--m-lh-label); }
.row svg { width: var(--m-space-5); height: var(--m-space-5); flex: none; color: var(--m-text-secondary); }

/* ── Messages: colour never carries the meaning alone ───────────────── */

.msg {
    margin: 0 0 var(--m-space-5);
    padding: var(--m-space-4);
    color: var(--m-text);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-left-width: var(--m-space-2);
    border-radius: var(--m-radius);
}

.msg.is-bad { border-left-color: var(--m-status-bad); }
.msg.is-good { border-left-color: var(--m-status-good); }
.msg.is-warn { border-left-color: var(--m-status-warn); }
.msg strong { display: block; margin-bottom: var(--m-space-1); }

.card {
    margin: 0 0 var(--m-space-5);
    padding: var(--m-space-4);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
}

.card p:last-child { margin-bottom: 0; }

.quiet-row { margin-top: var(--m-space-6); }

.noscript { padding: var(--m-space-5); }

/* ── Screens with the tab bar ───────────────────────────────────────── */

.screen.with-tabs { padding-bottom: calc(var(--m-space-9) + var(--m-space-9)); }

.tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: var(--m-space-2);
    padding: var(--m-space-2) var(--m-space-3);
    padding-bottom: calc(var(--m-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
}

.tab {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-1);
    max-width: 160px;
    min-height: var(--m-touch);
    padding: var(--m-space-2) var(--m-space-3);
    font-size: var(--m-fs-label);
    line-height: var(--m-lh-label);
    color: var(--m-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--m-radius);
    cursor: pointer;
}

.tab svg { width: var(--m-space-6); height: var(--m-space-6); }
.tab[aria-current="page"] { color: var(--m-text); font-weight: 600; background: var(--m-hover); }

.back { width: auto; min-height: var(--m-touch); margin-bottom: var(--m-space-3); padding-left: var(--m-space-3); padding-right: var(--m-space-5); border-color: transparent; }

.syncline {
    display: flex;
    align-items: center;
    gap: var(--m-space-3);
    margin-bottom: var(--m-space-5);
    color: var(--m-text-secondary);
    font-size: var(--m-fs-label);
    line-height: var(--m-lh-label);
}

.syncline-text { flex: 1; }

.iconbtn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--m-touch);
    height: var(--m-touch);
    color: var(--m-text);
    background: transparent;
    border: 1px solid var(--m-border-control);
    border-radius: var(--m-radius);
    cursor: pointer;
}

.iconbtn svg { width: var(--m-space-5); height: var(--m-space-5); }
.iconbtn[disabled] { color: var(--m-text-disabled); border-color: var(--m-border); cursor: default; }

/* A status is always words. The colour only adds to them. */
.chips { display: flex; flex-wrap: wrap; gap: var(--m-space-2); margin: var(--m-space-2) 0 var(--m-space-4); }
.row .chips { margin: var(--m-space-2) 0 0; }

.chip {
    display: inline-block;
    padding: var(--m-space-1) var(--m-space-3);
    font-size: var(--m-fs-label);
    line-height: var(--m-lh-label);
    color: var(--m-text);
    border: 1px solid var(--m-border-control);
    border-radius: var(--m-radius);
}

.chip.is-bad { border-color: var(--m-status-bad); }
.chip.is-warn { border-color: var(--m-status-warn); }
.chip.is-good { border-color: var(--m-status-good); }

.kv { margin: 0 0 var(--m-space-5); }
.kv dt { margin-top: var(--m-space-4); color: var(--m-text-secondary); font-size: var(--m-fs-label); line-height: var(--m-lh-label); }
.kv dd { margin: var(--m-space-1) 0 0; color: var(--m-text); }

.link {
    display: inline;
    min-height: var(--m-touch);
    padding: var(--m-space-3) 0;
    text-align: left;
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    color: var(--m-text);
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.steps { margin: 0 0 var(--m-space-5); padding-left: var(--m-space-6); }
.steps li { margin-bottom: var(--m-space-4); padding-left: var(--m-space-2); }
.steps .name, .hist .name { display: block; color: var(--m-text); }
.steps .sub, .hist .sub { display: block; color: var(--m-text-secondary); font-size: var(--m-fs-label); line-height: var(--m-lh-label); }

.hist { padding: var(--m-space-3) 0; border-bottom: 1px solid var(--m-border); }

.field input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ── Recording work ─────────────────────────────────────────────────── */

.actions { margin: var(--m-space-6) 0; }
/* More and the help icon sit on one quiet row under the buttons. */
.action-row { display: flex; align-items: center; gap: var(--m-space-3); margin-top: var(--m-space-3); }
.action-help, .more-list { margin-top: var(--m-space-3); }
.action-help .meta { margin: 0 0 var(--m-space-2); }
.more-item { margin-bottom: var(--m-space-4); }
.more-item .meta { margin: var(--m-space-2) 0 0; }

.field select,
.field textarea {
    display: block;
    width: 100%;
    min-height: var(--m-touch);
    padding: var(--m-space-3) var(--m-space-4);
    font-size: var(--m-fs-title);
    line-height: var(--m-lh-title);
    color: var(--m-text);
    background: var(--m-field);
    border: 1px solid var(--m-border-control);
    border-radius: var(--m-radius);
}

.field textarea { min-height: 96px; }
.field .hint { display: block; margin-top: var(--m-space-2); color: var(--m-text-secondary); font-size: var(--m-fs-label); line-height: var(--m-lh-label); }
.field input[type="file"] { padding: var(--m-space-3); }

.field.check { display: flex; align-items: center; gap: var(--m-space-3); min-height: var(--m-touch); }
.field.check input { width: var(--m-space-6); height: var(--m-space-6); }
.field.check label { margin: 0; font-size: var(--m-fs-title); line-height: var(--m-lh-title); }

.row.static { cursor: default; }
.btn.small { width: auto; min-height: var(--m-touch); padding: var(--m-space-2) var(--m-space-4); font-size: var(--m-fs-label); }
.row.static select { width: auto; min-height: var(--m-touch); padding: var(--m-space-2) var(--m-space-3); font-size: var(--m-fs-label); color: var(--m-text); background: var(--m-field); border: 1px solid var(--m-border-control); border-radius: var(--m-radius); }

.msg.as-button { display: block; width: 100%; text-align: left; cursor: pointer; font-size: var(--m-fs-body); line-height: var(--m-lh-body); }

.scrim {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--m-space-5);
    padding-bottom: calc(var(--m-space-5) + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, .6);
}

.dialog {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--m-space-5);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
}

.dialog h2 { margin-top: 0; font-size: var(--m-fs-panel); line-height: var(--m-lh-panel); }

/* ── Scanning ───────────────────────────────────────────────────────── */

.camera-box {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--m-space-5);
    background: #000;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    aspect-ratio: 4 / 3;
}

.camera { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
    .screen { animation: none; }
    .btn, .row { transition: none; }
}