/* chrome.css — the home page's chrome, shared by the app screens (/demo, /exercise, /progress). 2026-10-04.
   Part 1 is copied verbatim from the <style> block in index.html (one comment reworded): tokens, type,
   nav, buttons, footer, the nav underline and the nav's responsive rules. index.html still carries its own inline copy; it can
   link this file and drop those rules later. Until then, change both together.
   Part 2 is only what the app screens add on top: room under the fixed nav, and the app bar. */

/* ── Part 1: from index.html ── */
:root {
    --ink: #111A2C; --ink-2: #1B2A4A; --teal: #0D7377; --teal-deep: #0A5C5F;
    --mint: #E2F4F2; --paper: #F7F9FB; --line: #DDE3EA; --muted: #5B6675;
    --amber: #B45309; --amber-bg: #FEF3E2;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--paper);
    color: #23303F;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--ink); line-height: 1.14; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
p { font-size: 1.02rem; color: #465264; max-width: 640px; }
a { text-decoration: none; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section-label {
    font-family: var(--mono);
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 14px; display: block;
}

/* NAV */
nav#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
}
.nav-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
}
.nav-logo { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; color: var(--ink); min-height:44px; display:inline-flex; align-items:center; gap:10px; }
.nav-logo span { color: var(--teal); }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #86F2E4; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: #465264; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--teal); }
.nav-cta {
    background: var(--ink) !important; color: #fff !important;
    padding: 11px 20px; border-radius: 10px; font-weight: 600 !important;
}
.nav-cta:hover { background: var(--teal) !important; }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; min-width: 44px; min-height: 44px; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 26px; min-height: 54px; border-radius: 12px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1rem;
    transition: all 0.22s ease; cursor: pointer; border: none; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(17,26,44,0.22); }
.btn-primary:hover { background: var(--teal); transform: translateY(-2px); }
.btn-secondary { background: #fff; color: var(--ink); border: 1.5px solid #C9D1DB; }
.btn-secondary:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn .dot-lens { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #86F2E4; position: relative; flex-shrink: 0; }
.btn .dot-lens::after { content:''; position:absolute; inset:3px; border-radius:50%; background:#86F2E4; }

/* FOOTER */
footer#old-footer {
    background: #141f35; padding: 44px 0 32px;
    color: rgba(255,255,255,0.42); font-size: 0.85rem;
}
.footer-inner { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 28px; }
.footer-brand { font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 6px; }
.footer-brand span { color: #0D7377; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.48); transition: color 0.2s; min-height:40px; padding:3px 9px; margin:-3px -9px; display:inline-flex; align-items:center; }
.footer-links a:hover { color: #0D7377; }
.footer-disclaimer {
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem; color: rgba(255,255,255,0.3); text-align: center;
}
.footer-disclaimer a { color: #0D7377; }

/* ── Elevation: animated underline on nav links ── */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1.5px; background: #0D7377;
    transition: width 0.25s ease;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

/* The nav carries EIGHT top-level items, which need ~1020px to sit on one line.
   Collapse used to fire at 600px, so from 600–1000px every item rendered and
   wrapped mid-phrase ("How / it / works" colliding with the logo). Tighten
   first, then collapse at the width where it genuinely stops fitting. */
@media (max-width: 1180px) {
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 0.86rem; }
}
@media (max-width: 1000px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 66px; left: 0; right: 0;
        background: rgba(247,249,251,0.98); backdrop-filter: blur(12px);
        padding: 24px; gap: 18px;
        border-bottom: 1px solid rgba(27,42,74,0.08);
    }
    /* vertical dropdown — labels may wrap, and shouldn't inherit the
       tightened desktop size */
    .nav-links.open a { font-size: 0.95rem; white-space: normal; }
    .nav-hamburger { display: flex; }
}
@media (max-width: 600px) {
    /* .btn is white-space:nowrap by default — on a 375px phone a long CTA label
       ("Start the record before the calendar starts scoring it") forced the button
       to 480px, which widened the document to 503px and dragged the fixed nav with
       it, scrolling the whole page sideways. Let labels wrap below 600px only. */
    .btn { white-space: normal; text-align: center; }
}

/* ── Part 2: the app screens only (not on the home page) ── */
/* The nav is position:fixed and 69px tall (68px + its 1px border); on the home the hero's top padding
   clears it. An app screen starts with the app bar instead, just under the nav: the app's own links,
   the current screen marked (the home's "you are here" mint), and a status slot on the right. */
:root { --nav-h: 69px; --appbar-h: 53px; }
.appbar { margin-top: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 0 24px; }
.appbar-inner { max-width: 1180px; margin: 0 auto; min-height: calc(var(--appbar-h) - 1px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appbar-links { display: flex; align-items: center; gap: 4px; margin-left: -12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.appbar-links::-webkit-scrollbar { display: none; }
.appbar-links a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; color: #465264; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.appbar-links a:hover { color: var(--teal); }
.appbar-links a[aria-current="page"] { background: var(--mint); color: var(--teal); font-weight: 700; cursor: default; }
/* a page under a tab rather than the tab itself (/prom sits under Your progress) marks the tab with aria-current="true" */
.appbar-links a[aria-current="true"] { color: var(--teal); font-weight: 700; }
.appbar-status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 0.86rem; color: var(--muted); }
.appbar-status a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 8px; font-weight: 500; color: #465264; transition: color 0.2s; }
.appbar-status a:hover { color: var(--teal); }
/* a status chip (the camera demo): the home hero's eyebrow, smaller */
.appbar-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #33414F; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.appbar-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(13,115,119,0.16); flex-shrink: 0; }
/* a running clock (the exercise session) */
.appbar-timer-label { font-weight: 600; color: var(--ink); }
.appbar-timer-time { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--teal); }
/* the session screen keeps its clock in view, as its old top bar did */
.appbar--stick { position: sticky; top: var(--nav-h); z-index: 900; }
/* at phone width the three links fit on one line from 360px; what is marked hide-sm steps aside, and the
   session clock keeps its time on screen (its label stays readable to screen readers) */
@media (max-width: 600px) {
    /* four tabs do not fit one row on a 390px phone; they wrap onto two rows rather than scroll, so the current
       screen is always in view */
    .appbar-inner { padding: 4px 0; }
    .appbar-links { margin-left: -7px; gap: 0; flex-wrap: wrap; overflow: visible; }
    .appbar-links a { padding: 0 7px; font-size: 0.8rem; }
    .appbar .hide-sm { display: none; }
    .appbar-timer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ── Part 3 (2026-10-05): JointCoach's voice for the suite grammar in /msk.css, and the one primary button ── */
:root { --msk-display: 'Plus Jakarta Sans', 'Inter', sans-serif; --msk-paper: #F7F9FB; --msk-line: #DDE3EA; --msk-accent: var(--teal); --msk-accent-deep: var(--teal-deep); --msk-accent-soft: var(--mint); }
/* one primary button per screen, in ink (the home's button); everything else is a ghost. Element+class so it wins over a page's own .btn-primary. */
a.btn-primary, button.btn-primary, a.btn.btn-primary, button.btn.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 6px 18px rgba(17,26,44,0.22); }
a.btn-primary:hover, button.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
/* the nav's call to action wears the same ink as the primary button (the home's choice: ink buttons, teal for marks and tags) */
.msk-nav .msk-cta { background: var(--ink); } .msk-nav .msk-cta:hover { background: var(--ink-2); }
a.btn-secondary, button.btn-secondary { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); }
a.btn-secondary:hover, button.btn-secondary:hover { border-color: var(--ink-2); background: rgba(27,42,74,0.05); }