/* Verse Health page shell (2026-10-07). The app inside draws itself (its rules are in verse-health.css, all under
   .vh-app, with the IBM Plex Sans @font-face this bar also uses); this file only styles the bar above it and makes
   the app fill the rest of the window. The bar is the app's own ink one step darker, so it reads as the frame
   behind the app rather than a second header. Colour means state: amber for sample records, green for a signed-in
   account, ivory for the one action (Sign in). */
:root {
    --hs-frame: #0A0D14;
    --hs-app: #12161F;
    --hs-raise: #1A1F2B;
    --hs-line: #2B3140;
    --hs-text: #E7E4DC;
    --hs-muted: #8C93A5;
    --hs-paper: #F1EDE3;
    --hs-on-paper: #1B1D24;
    --hs-demo: #FBBF24;
    --hs-live: #34D399;
    --hs-bar: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--hs-app);
    color: var(--hs-text);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

/* ── The bar ── */
.hs-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: calc(var(--hs-bar) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    background: var(--hs-frame);
    border-bottom: 1px solid var(--hs-line);
    position: relative;
    z-index: 2;
}

.hs-home {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px 0 8px;
    border-radius: 6px;
    color: var(--hs-muted);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.hs-home:hover { color: var(--hs-text); background: var(--hs-raise); }
.hs-home svg {
    width: 17px; height: 17px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.hs-sep { flex: none; width: 1px; height: 18px; background: var(--hs-line); }

.hs-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hs-crumb { color: var(--hs-muted); white-space: nowrap; }
.hs-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--hs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The trace between "Verse Services" and "Verse Health": drawn once when the page opens. */
.hs-pulse {
    flex: none;
    width: 34px; height: 14px;
    fill: none; stroke: var(--hs-paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 70;
    stroke-dashoffset: 0;
    animation: hs-trace 1.2s cubic-bezier(.45, 0, .2, 1) .2s both;
}
@keyframes hs-trace { from { stroke-dashoffset: 70; opacity: .35; } }

.hs-state { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }

.hs-status { display: inline-flex; align-items: center; gap: 7px; color: var(--hs-muted); white-space: nowrap; }
.hs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-demo); box-shadow: 0 0 0 3px rgba(251, 191, 36, .16); }
.hs-status.is-signed-in .hs-dot { background: var(--hs-live); box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.hs-st-short { display: none; }

.hs-signin {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--hs-paper);
    color: var(--hs-on-paper);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.hs-signin:hover { background: #FFFFFF; }
.hs-signin[hidden] { display: none; }

.hs-home:focus-visible, .hs-signin:focus-visible { outline: 2px solid var(--hs-paper); outline-offset: 2px; }

/* ── The app: fills everything under the bar and scrolls inside its own content pane ── */
.hs-host { flex: 1 1 auto; min-height: 0; position: relative; }
.hs-host > .vh-app { position: absolute; inset: 0; }

.hs-fail { margin: 12vh auto 0; max-width: 420px; padding: 0 20px; text-align: center; color: var(--hs-muted); font-size: 14px; }
.hs-fail[hidden] { display: none; }
.hs-fail-head { color: var(--hs-text); font-size: 16px; font-weight: 600; margin: 0 0 6px; }

/* ── Phones ── */
/* Text fields at 16 px, as the phone shell set them: below that, iOS zooms the page in on every field. */
@media (max-width: 900px) {
    body .hs-host .vh-app :is(input, select, textarea) { font-size: 16px; }
}
@media (max-width: 600px) {
    .hs-bar { gap: 8px; }
    .hs-home { padding: 0 8px; }
    .hs-home-tx, .hs-sep, .hs-crumb { display: none; }
    .hs-st-long { display: none; }
    .hs-st-short { display: inline; }
    .hs-signin { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-pulse { animation: none; }
}