/* HealthTracker design system. Colours are sampled from the logo ring (royal blue to teal) with navy for text. */
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --navy: #0a2a43; --ink: #16324a; --blue: #0c61ab; --blue-d: #094d8a; --mid: #1883b2; --teal: #1b9eae; --teal-ink: #0b6b78; --lteal: #bfe3e8;
  --green: #2f8f6b; --green-ink: #1f6f52; --grey: #5b676d; --line: #dbe4ea; --bg: #ffffff; --off: #f5f8fa; --tint: #eaf3f8;
  --amber: #b45309; --amber-bg: #fff4e5; --red: #b42318; --red-bg: #fdecea;
  --radius: 8px; --header-h: 76px;
  --shadow: 0 1px 2px rgba(10, 42, 67, .06), 0 6px 20px rgba(10, 42, 67, .05);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--bg); }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 650; }
h4 { font-size: 1.1rem; font-weight: 650; margin-bottom: .3em; }
.h-small { font-size: 1rem; margin: 1.1em 0 .4em; color: var(--grey); text-transform: none; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-d); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.narrow { max-width: 860px; }
.section { padding-block: clamp(56px, 8vw, 112px); }
.center { text-align: center; }
.muted { color: var(--grey); }
.small { font-size: .9rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink); max-width: 62ch; }
.mt { margin-top: 1em; }
.plain { list-style: none; padding: 0; margin: 0 0 1em; }
.plain li { padding: 3px 0; }
.two-col { columns: 2; column-gap: 32px; }
.two-col li { break-inside: avoid; }
.inline { display: inline; }
.date { color: var(--grey); font-variant-numeric: tabular-nums; margin-right: .4em; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 52px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 16px; }
.nav-links { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; color: var(--ink); text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 1rem; transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--tint); color: var(--blue); }
.nav-links a[aria-current="page"] { color: var(--blue); background: var(--tint); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; margin-left: auto; align-items: center; gap: 10px; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; transition: transform .2s; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
@media (max-width: 1080px) {
  .brand img { height: 46px; }
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 20px; flex-direction: column; align-items: stretch; box-shadow: var(--shadow); }
  html.js .site-nav.open { display: flex; }
  html.js .nav-links { flex-direction: column; } html.js .nav-links a { padding: 12px 8px; font-size: 1.1rem; }
  html.js .nav-actions { padding-top: 12px; border-top: 1px solid var(--line); justify-content: space-between; }
  html:not(.js) .bar { flex-wrap: wrap; padding-block: 10px; } html:not(.js) .site-nav { flex-wrap: wrap; }
  html:not(.js) .nav-links { flex-wrap: wrap; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 6px; border: 2px solid transparent; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; line-height: 1.2; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-d); color: #fff; box-shadow: 0 4px 14px rgba(12, 97, 171, .28); }
.btn-ghost { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn-ghost:hover { background: var(--tint); color: var(--blue-d); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; }
.btn-lg { padding: 15px 28px; font-size: 1.15rem; } .btn-small { padding: 7px 14px; font-size: .95rem; } .btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-link { font-weight: 650; color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--teal); padding-bottom: 2px; }
.btn-link:hover { border-color: var(--blue); }
.link-btn, .link-quiet { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-quiet { color: var(--ink); text-decoration: none; font-weight: 550; } .link-quiet:hover { color: var(--blue); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 1.6em; }

/* ---------- forms ---------- */
label { display: block; font-weight: 550; color: var(--navy); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=time], input[type=number], input:not([type]), select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #9fb2c0; border-radius: 6px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--teal); outline-offset: 0; border-color: var(--blue); }
textarea { resize: vertical; }
.stack > * + * { margin-top: 16px; } .stack-lg > * + * { margin-top: 24px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.row-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .row-form label { flex: 1 1 200px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; font-weight: 650; color: var(--navy); margin-bottom: 6px; }
.hint { color: var(--grey); font-size: .92rem; margin: 0 0 8px; font-weight: 400; }
.field-err { display: block; color: var(--red); font-weight: 500; font-size: .95rem; margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 450; margin-top: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--blue); }
.opt { font-weight: 400; color: var(--grey); font-size: .9rem; }
.search { margin-bottom: 18px; }

/* ---------- cards, notices, chips ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .card-head h2 { margin: 0; font-size: 1.35rem; }
.card h2 { font-size: 1.35rem; } .card-sum { cursor: pointer; list-style: revert; } .card-sum h2 { display: inline; }
.notice { border-radius: var(--radius); padding: 14px 18px; margin: 16px 0; border: 1px solid; }
.notice-ok { background: #e9f6ef; border-color: #a6d8bf; color: #17503a; }
.notice-warn { background: var(--amber-bg); border-color: #f0c78f; color: #7a3a06; }
.notice-info { background: var(--tint); border-color: #b9d4e6; color: var(--navy); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--tint); color: var(--navy); border: 1px solid #b9d4e6; }
.chip-rx { background: #e8f1fa; color: var(--blue-d); } .chip-self { background: #fff4e5; color: #7a3a06; border-color: #f0c78f; }
.chip-sample { background: #fff; border-style: dashed; color: var(--grey); } .chip-rec { background: #e9f6ef; color: #17503a; border-color: #a6d8bf; } .chip-early { background: var(--amber-bg); color: #7a3a06; border-color: #f0c78f; }
.chip-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #9fb2c0; color: var(--navy); font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
.chip-btn:hover:not([disabled]) { border-color: var(--blue); background: var(--tint); color: var(--blue); } .chip-btn[disabled] { opacity: .55; cursor: default; }
.empty { border: 1.5px dashed #9fb2c0; border-radius: var(--radius); padding: 22px; background: var(--off); color: var(--ink); } .empty.big { text-align: center; padding: 48px 24px; }
.more { margin-top: 14px; } .more > summary { cursor: pointer; font-weight: 600; color: var(--blue); } .more[open] > summary { margin-bottom: 10px; }
.danger-zone > summary { color: var(--red); } .card.danger-zone { border-color: #efb4ad; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 12px 0; } .facts div { min-width: 120px; } .facts dt { font-size: .85rem; color: var(--grey); } .facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.history { padding-left: 1.1em; margin: 0 0 8px; } .history li { padding: 2px 0; }
.is-past { opacity: .85; background: var(--off); }
.stepper { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0 0 18px; font-weight: 600; color: var(--grey); }
.stepper .on { color: var(--blue); border-bottom: 3px solid var(--teal); } .stepper .done { color: var(--green-ink); } .stepper .done::before { content: "\2713\00a0"; }
.checklist { list-style: none; padding: 0; counter-reset: c; } .checklist li { padding: 8px 0 8px 36px; position: relative; } .checklist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border: 2px solid #9fb2c0; border-radius: 50%; }
.checklist li.ok::before { background: var(--green); border-color: var(--green); } .checklist li.ok::after { content: ""; position: absolute; left: 6px; top: 15px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.checklist li.ok a { color: var(--grey); }
.two-col-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 800px) { .two-col-cards { grid-template-columns: 1fr; } }
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px 20px; } .filters label { flex: 1 1 150px; font-size: .95rem; } .filters .btn { flex: none; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 960px) { .grid-main { grid-template-columns: 1fr; } }
.checkin-card { border-left: 6px solid var(--teal); } .checkin-card.done { border-left-color: var(--green); } .big-rating { font-size: 1.4rem; font-weight: 650; color: var(--navy); } .big-rating .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; margin-right: 8px; }
.spark { width: 100%; max-width: 420px; height: 56px; display: block; margin-bottom: 8px; }
.insight { padding: 14px 0; border-top: 1px solid var(--line); } .insight:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- auth ---------- */
.auth-wrap { min-height: calc(100vh - var(--header-h) - 200px); display: grid; place-items: center; padding: 40px 16px; background: var(--off); }
.auth-card { width: 100%; max-width: 480px; margin: 0; } .page-auth main { background: var(--off); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(32px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.hero-copy h1 { margin-bottom: .45em; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.04; }
.h-light { font-weight: 300; color: #5b676d; display: block; } .h-bold { font-weight: 800; color: var(--blue); display: block; }
.hero-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage-tag { text-align: center; font-size: 1.15rem; font-weight: 600; color: var(--navy); max-width: 30ch; margin: 28px auto 0; }
/* Solid, clear logo. A light band sweeps across it like a searchlight; it is masked to the logo's own shape, so nothing shines outside the ring. */
.logo-sheen { position: relative; width: min(86%, 460px); aspect-ratio: 313 / 293; isolation: isolate; --mx: 50%; --my: 40%; }
.stage-logo { display: block; width: 100%; height: 100%; }
.sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../img/healthtracker-mark.png) center / 100% 100% no-repeat; mask: url(../img/healthtracker-mark.png) center / 100% 100% no-repeat; }
.sheen-sweep { overflow: hidden; }
/* Brushed-metal sheen: soft light and shade lobes sit on a conic gradient that slowly turns around the ring's centre, so the highlight travels round the logo like light on polished metal. */
.spin { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 18deg, rgba(255,255,255,.46) 34deg, rgba(255,255,255,.10) 52deg, rgba(255,255,255,0) 70deg,
    rgba(8,40,90,.18) 100deg, rgba(8,40,90,0) 130deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.10) 198deg, rgba(255,255,255,.46) 214deg, rgba(255,255,255,.10) 232deg, rgba(255,255,255,0) 250deg,
    rgba(8,40,90,.18) 280deg, rgba(8,40,90,0) 310deg, rgba(255,255,255,0) 360deg);
  animation: metal-turn 26s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Colour pulse: a second copy of the logo, richer in colour, is revealed only inside two wide lobes that turn with the highlights, so the blues and teals deepen where the light passes. */
.sat { position: absolute; inset: 0; filter: saturate(1.7) contrast(1.04); pointer-events: none;
  -webkit-mask-image: conic-gradient(from var(--a) at 50% 50%, transparent 0deg, #000 50deg, #000 90deg, transparent 150deg, transparent 180deg, #000 230deg, #000 270deg, transparent 330deg);
  mask-image: conic-gradient(from var(--a) at 50% 50%, transparent 0deg, #000 50deg, #000 90deg, transparent 150deg, transparent 180deg, #000 230deg, #000 270deg, transparent 330deg);
  animation: sat-turn 26s linear infinite; }
@keyframes sat-turn { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sat { display: none; } }
@keyframes metal-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { display: none; } }
@media (max-width: 899px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero-copy { padding-top: 8px; } .logo-sheen { width: min(72%, 320px); } }

/* ---------- home sections ---------- */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } @media (max-width: 860px) { .two-up { grid-template-columns: 1fr; } }
.problem { background: var(--off); } .kicker-p { font-weight: 650; color: var(--teal-ink); margin-bottom: 10px; }
.big-list li { font-size: 1.15rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.steps li { border-top: 3px solid var(--teal); padding-top: 18px; } .step-n { display: block; font-size: 3rem; font-weight: 300; line-height: 1; color: var(--blue); margin-bottom: 10px; }
.dark { background: var(--navy); color: #d7e6f2; } .dark h2, .dark h3 { color: #fff; } .dark .lead { color: #e6f0f7; } .dark .kicker-p { color: var(--lteal); } .dark a { color: var(--lteal); }
.quotes { list-style: none; padding: 0; margin: 0 0 16px; } .quotes li { border-left: 3px solid var(--teal); padding: 6px 0 6px 16px; margin: 12px 0; font-size: 1.1rem; color: #fff; }
.demo-card { background: #fff; border-radius: var(--radius); padding: 16px; margin: 0; color: var(--ink); } .demo-card figcaption { font-size: .92rem; color: var(--grey); padding-top: 8px; }
.ticks { list-style: none; padding: 0; margin: 0; } .ticks li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); } .ticks li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 12px; height: 6px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.chip-list.big .chip-btn { padding: 12px 20px; font-size: 1.05rem; }
.cta-band { background: linear-gradient(135deg, var(--blue) 0%, var(--teal-ink) 100%); color: #fff; } .cta-band h2 { color: #fff; max-width: 24ch; margin-inline: auto; } .cta-band .btn-primary { background: #fff; color: var(--blue-d); } .cta-band .btn-primary:hover { background: var(--tint); }
.pro { background: var(--off); }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--off); border-top: 1px solid var(--line); margin-top: 0; padding-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; } @media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-h { font-size: 1rem; margin-bottom: .4em; } .site-footer a { color: var(--ink); }
.safety-strip { border-top: 1px solid var(--line); margin-top: 28px; padding-block: 18px 28px; color: var(--grey); }

/* ---------- check-in ---------- */
.checkin .block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 20px; }
.checkin legend { font-size: 1.2rem; float: left; width: 100%; margin-bottom: 8px; } .checkin legend + * { clear: both; }
.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
.scale-opt { position: relative; margin: 0; cursor: pointer; }
.scale-opt input, .pill input, .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale-opt .num, .scale-opt .lab { display: block; text-align: center; }
.scale-opt .num { font-size: 1.7rem; font-weight: 700; padding: 12px 0 0; background: #fff; border: 2px solid #9fb2c0; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--navy); }
.scale-opt .lab { font-size: .85rem; font-weight: 600; padding: 2px 2px 10px; background: #fff; border: 2px solid #9fb2c0; border-top: 0; border-radius: 0 0 8px 8px; color: var(--grey); }
.scale-opt:hover .num, .scale-opt:hover .lab { border-color: var(--blue); }
.scale-opt input:checked ~ .num, .scale-opt input:checked ~ .lab { background: var(--blue); border-color: var(--blue); color: #fff; }
.scale-opt input:focus-visible ~ .num { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (max-width: 480px) { .scale-opt .lab { font-size: .72rem; } }
.sym-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); } .sym-row:first-of-type { border-top: 0; }
.sym-name { font-weight: 600; color: var(--navy); flex: 1 1 200px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { margin: 0; position: relative; } .pill span { display: inline-block; padding: 7px 13px; border: 1.5px solid #9fb2c0; border-radius: 999px; font-weight: 550; font-size: .95rem; cursor: pointer; background: #fff; color: var(--ink); }
.pill input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; } .pill input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; } .pill:hover span { border-color: var(--blue); }
.numfield { display: flex; align-items: center; gap: 8px; margin: 0; } .numfield input { width: 90px; margin: 0; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.pick { margin: 0; position: relative; } .pick span { display: inline-block; padding: 8px 14px; border: 1.5px solid #9fb2c0; border-radius: 8px; font-weight: 550; background: #fff; cursor: pointer; color: var(--ink); }
.pick input:checked + span { background: var(--tint); border-color: var(--blue); color: var(--blue-d); box-shadow: inset 0 0 0 1px var(--blue); } .pick input:checked + span::before { content: "\2713\00a0"; } .pick input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; } .pick:hover span { border-color: var(--blue); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 700px) { .sticky-actions { position: sticky; bottom: 0; background: rgba(255, 255, 255, .97); padding: 12px 0; border-top: 1px solid var(--line); z-index: 5; } }

/* ---------- timeline, tables, charts ---------- */
.timeline { list-style: none; padding: 0; margin: 24px 0; } .t-day { display: grid; grid-template-columns: 110px 1fr; gap: 18px; margin-bottom: 14px; } @media (max-width: 640px) { .t-day { grid-template-columns: 1fr; gap: 4px; } }
.t-date { display: flex; flex-direction: column; padding-top: 18px; color: var(--navy); } .t-body.card { margin: 0; padding: 16px 20px; }
.t-wb { font-weight: 650; color: var(--navy); font-size: 1.1rem; margin-bottom: 6px; } .num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; margin-right: 6px; color: #fff; background: var(--blue); }
.wb-1 { background: #7a3a06; } .wb-2 { background: #b45309; } .wb-3 { background: #5b676d; } .wb-4 { background: var(--mid); } .wb-5 { background: var(--blue); }
.t-line { margin: 6px 0; } .t-k { display: inline-block; min-width: 120px; font-size: .85rem; font-weight: 650; color: var(--grey); }
.tag { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border-radius: 6px; background: var(--off); border: 1px solid var(--line); font-size: .92rem; }
.tag-strong { background: var(--amber-bg); border-color: #f0c78f; } .tag-good { background: #e9f6ef; border-color: #a6d8bf; } .tag-change { background: #fff; border: 1.5px solid var(--amber); }
.t-note { background: var(--off); border-left: 3px solid var(--lteal); padding: 8px 12px; margin: 8px 0 0; font-size: .95rem; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 10px 0; } table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data th { background: var(--off); color: var(--navy); font-weight: 650; }
.chart-fig { margin: 0 0 12px; } .chart-fig figcaption { font-size: .92rem; color: var(--grey); padding-top: 6px; } svg.chart { width: 100%; height: auto; display: block; font-family: inherit; }
.sentences li { padding: 8px 0; border-bottom: 1px solid var(--line); } .log-list li { padding: 8px 0; border-bottom: 1px solid var(--line); } .q-list { padding-left: 1.2em; }

/* ---------- report ---------- */
.report { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 48px); box-shadow: var(--shadow); }
.report h1 { font-size: 2rem; } .report h2 { font-size: 1.35rem; border-bottom: 2px solid var(--lteal); padding-bottom: 4px; margin-top: 1.6em; } .report-head .notice { margin-bottom: 0; }
@media print {
  @page { margin: 14mm; }
  body { font-size: 11pt; color: #000; background: #fff; } .site-header, .site-footer, .no-print, .skip, .notice-info.no-print { display: none !important; }
  .wrap { max-width: none; padding: 0; } .section { padding: 0; } .report { border: 0; box-shadow: none; padding: 0; } .report section { break-inside: avoid-page; }
  .chart-fig, table.data tr { break-inside: avoid; } a { color: #000; text-decoration: none; } .card { box-shadow: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}