/* ==========================================================================
   22RPM — Blood Pressure Monitor Patient Guide
   Shared stylesheet for /index.html (EN) and /es/index.html (ES).

   Three delivery targets, all served by this one file:
     1. Web      — twentytwohealth.com/bp-guide/
     2. App      — embedded in the 22RPM patient app, offline, iframe at 375px
     3. Print    — US Letter, handed to patients, assume grayscale photocopy

   No webfonts, no CDN, no network calls of any kind. Colour tokens come from
   assets/brand.css, copied verbatim from the 22RPM website repo.
   ========================================================================== */

/* -------------------------------------------------- guide-local additions */
:root {
  /* Clinical status colours. NOT part of the 22RPM brand palette — blood
     pressure categories need their own semantic scale. Measured on white:
       normal   #1b5e20  7.87:1     stage2   #b3261e  6.54:1
       elevated #6d4c00  7.82:1     crisis   #8c1006  9.58:1
       stage1   #8a3d00  7.64:1
     …and on their own chip backgrounds: 7.00 / 7.36 / 6.85 / 5.72 / 8.38:1.
     Every one clears AA for normal text in both contexts. Category is ALSO
     carried by the label text and, in print, by a distinct border style —
     never by colour alone (WCAG 1.4.1). */
  --cat-normal: #1b5e20;
  --cat-normal-bg: #e8f5e9;
  --cat-elevated: #6d4c00;
  --cat-elevated-bg: #fff8e1;
  --cat-stage1: #8a3d00;
  --cat-stage1-bg: #fff0e2;
  --cat-stage2: #b3261e;
  --cat-stage2-bg: #fdeceb;
  --cat-crisis: #8c1006;
  --cat-crisis-bg: #fdeceb;
  /* Low sits outside the hypertension severity ramp, so it is deliberately
     brand blue rather than a warmer colour: 12.91:1 on white, 11.01:1 on its
     own chip. AHA defines hypotension as under 90/60, matching classifyBP(). */
  --cat-low: #013550;
  --cat-low-bg: #e7eef2;

  --guide-max: 50rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

a {
  color: var(--brand-primary);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  background: var(--brand-primary);
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.topbar a.back {
  color: var(--text-inverse);
  font-size: 0.9rem;
  text-decoration: none;
}
.topbar a.back:hover {
  text-decoration: underline;
}
.topbar :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* Language toggle: two real links, current one marked with aria-current. */
.langs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-on-inverse-muted);
}
.langs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.langs a {
  display: block;
  padding: 0.3rem 0.9rem;
  color: var(--text-inverse);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.langs a[aria-current="true"] {
  background: var(--text-inverse);
  color: var(--brand-primary);
}

/* ----------------------------------------------------------------- header */

.guide-head {
  background: var(--surface);
  padding: 1.1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 3px solid var(--brand-accent);
}
.guide-head img {
  width: 46px;
  flex-shrink: 0;
}
.guide-head .wordmark {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-primary);
  letter-spacing: 0.01em;
}
.guide-head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- hero */

.hero {
  background: var(--brand-primary);
  color: var(--text-inverse);
  text-align: center;
  padding: 2.4rem 1.25rem 2rem;
}
.hero .badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  margin-bottom: 0.9rem;
}
.hero h1 {
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  margin-bottom: 0.6rem;
}
.hero p {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--text-on-inverse-muted);
}

/* -------------------------------------------------------------- container */

.container {
  max-width: var(--guide-max);
  margin-inline: auto;
  padding: 0 1rem 2.5rem;
}

.intro {
  background: var(--brand-primary-100);
  border-left: 5px solid var(--brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.25rem;
  margin-top: 2rem;
  color: var(--brand-primary);
}
.intro strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2.6rem 0 1.4rem;
}
.section-label::before,
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.section-label span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------- step cards */

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.step > .head {
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: 0.9rem 1.1rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.step > .head .n {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--text-inverse);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.step > .head h2 {
  font-size: 1.1rem;
  color: var(--text-inverse);
}
.step > .head p {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-on-inverse-muted);
}
.step > .body {
  padding: 1.1rem;
}
.step > .body > p:first-child {
  margin-top: 0;
}

ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: s;
}
/* The number is absolutely positioned rather than a flex item: the list item
   must stay a normal inline flow so that <strong> inside the sentence wraps
   with the text instead of becoming its own column. */
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 2.45rem;
  margin-bottom: 0.75rem;
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--brand-primary-100);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
ol.steps > li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ notes */

.note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: 1rem;
  font-size: 0.97rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
}
.note .ico {
  font-size: 1.15rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.note p {
  margin: 0;
}
.note--ok {
  background: var(--cat-normal-bg);
  border-color: var(--cat-normal);
  color: var(--cat-normal);
}
.note--warn {
  background: var(--cat-elevated-bg);
  border-color: var(--cat-elevated);
  color: var(--cat-elevated);
}
.note--danger {
  background: var(--cat-crisis-bg);
  border-color: var(--cat-crisis);
  color: var(--cat-crisis);
}

/* ------------------------------------------------------------ screenshots */

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.shot {
  flex: 0 1 10.5rem;
  text-align: center;
}
.shot img {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.shot .cap {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
  line-height: 1.45;
}
.shot .cap strong {
  display: block;
  color: var(--brand-primary);
}

/* ------------------------------------------------------------- cuff rules */

.cuff {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}
@media (min-width: 30rem) {
  .cuff {
    grid-template-columns: 1fr 1fr;
  }
}
.cuff > div {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
}
.cuff strong {
  display: block;
  color: var(--brand-primary);
}
.cuff span {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- BP table */

.table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}
.source {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.6rem 0 0;
}
table.bp {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
table.bp th,
table.bp td {
  padding: 0.6rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.bp thead th {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 0;
}
table.bp td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Named for screen readers on screen, shown as a heading on paper. */
table.bp caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Category chip. Colour is decorative reinforcement; the CATEGORY NAME is
   always present as text, and each chip carries a distinct border style that
   survives grayscale photocopying. */
.cat {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
}
.cat--low {
  background: var(--cat-low-bg);
  color: var(--cat-low);
  border: 2px dotted var(--cat-low);
}
.cat--normal {
  background: var(--cat-normal-bg);
  color: var(--cat-normal);
  border: 1px solid var(--cat-normal);
}
.cat--elevated {
  background: var(--cat-elevated-bg);
  color: var(--cat-elevated);
  border: 2px dashed var(--cat-elevated);
}
.cat--stage1 {
  background: var(--cat-stage1-bg);
  color: var(--cat-stage1);
  border: 3px double var(--cat-stage1);
}
.cat--stage2 {
  background: var(--cat-stage2-bg);
  color: var(--cat-stage2);
  border: 2px solid var(--cat-stage2);
}
.cat--crisis {
  background: var(--cat-crisis-bg);
  color: var(--cat-crisis);
  border: 3px solid var(--cat-crisis);
}
tr.row-crisis td {
  font-weight: 600;
  color: var(--cat-crisis);
}

/* --------------------------------------------------------------- FAQ */

/* Plain question/answer blocks, deliberately NOT <details>. A closed <details>
   is hidden by the UA shadow slot, which no print rule can reliably override
   in every engine — and the guide has to print correctly from an app WebView
   of unknown version with no JavaScript available to force it open. */
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  padding: 0.85rem 1rem;
  break-inside: avoid;
}
.faq h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 0.3rem;
}
.faq p {
  margin: 0;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- support */

.support {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.25rem;
  text-align: center;
  margin-top: 2rem;
}
.support h2 {
  font-size: 1.2rem;
  color: var(--text-inverse);
  margin-bottom: 0.4rem;
}
.support p {
  color: var(--text-on-inverse-muted);
  margin: 0 auto 1.1rem;
  max-width: 32rem;
}
.support a {
  display: inline-block;
  border: 2px solid var(--text-inverse);
  color: var(--text-inverse);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-md);
}
.support a:hover {
  background: var(--text-inverse);
  color: var(--brand-primary);
}
.support :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* --------------------------------------------------------------- footer */

.guide-foot {
  background: var(--brand-primary);
  color: var(--text-on-inverse-muted);
  text-align: center;
  padding: 1.4rem 1rem;
  font-size: 0.85rem;
}
.guide-foot p {
  margin: 0 auto;
  max-width: 40rem;
}
.guide-foot p + p {
  margin-top: 0.5rem;
}

/* --------------------------------------------- narrow phones / app iframe */

@media (max-width: 24rem) {
  body {
    font-size: 1rem;
  }
  .container {
    padding-inline: 0.75rem;
  }
  .step > .body {
    padding: 0.9rem;
  }
  .shot {
    flex: 0 1 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PRINT — US Letter, 0.5in margins, 2 pages, assume grayscale photocopy
   ========================================================================== */

@page {
  size: letter;
  margin: 0.5in;
}

@media print {
  /* Everything black on white. No brand fills survive a photocopier as
     anything but muddy gray, so they are dropped entirely. */
  :root {
    --text: #000;
    --text-muted: #000;
    --brand-primary: #000;
    --border: #000;
    --border-strong: #000;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.3;
  }

  /* Screen-only chrome.
     The printed sheet is deliberately the ESSENTIAL handout: the six setup
     steps, the blood pressure table, the emergency warning, and how to reach
     us, plus the troubleshooting FAQ. Only the welcome blurb, the app
     screenshots and the optional tips are dropped; those remain on the web
     page and in the app embed. This is an editorial cut, not a layout
     accident. The sheet runs to three Letter pages at a 12pt floor. */
  .topbar,
  .langs,
  .hero,
  .guide-foot,
  .support a,
  .support > p:not(.print-only),
  .shots,
  .store,
  .skip-link,
  .note--tip,
  .intro {
    display: none !important;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  /* Compact masthead */
  .guide-head {
    border-bottom: 1.5pt solid #000;
    padding: 0 0 5pt;
    margin-bottom: 7pt;
    gap: 8pt;
  }
  .guide-head img {
    width: 34pt;
    filter: grayscale(100%) contrast(160%);
  }
  .guide-head .wordmark {
    font-size: 13pt;
    color: #000;
  }
  .guide-head p {
    font-size: 8.5pt;
    color: #000;
  }
  .print-title {
    display: block !important;
    font-size: 14pt;
    font-weight: 700;
    margin-left: auto;
    text-align: right;
  }

  .intro {
    background: none;
    border: none;
    border-left: 2pt solid #000;
    padding: 3pt 0 3pt 7pt;
    margin: 0 0 7pt;
    color: #000;
    font-size: 12pt;
  }
  .intro strong {
    font-size: 12pt;
  }

  .section-label {
    margin: 8pt 0 5pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .section-label span {
    font-size: 10pt;
    color: #000;
  }
  .section-label::before,
  .section-label::after {
    background: #000;
  }

  /* Steps flow in two columns to fit the page budget */
  .steps-wrap {
    column-count: 2;
    column-gap: 14pt;
  }
  /* A section divider inside the column flow must not be orphaned at the
     bottom of a column. */
  .steps-wrap .section-label {
    break-before: column;
  }

  .step {
    border: 0.75pt solid #000;
    border-radius: 0;
    margin-bottom: 6pt;
    break-inside: avoid;
    page-break-inside: avoid;
    display: block;
  }
  .step > .head {
    background: none !important;
    color: #000 !important;
    border-bottom: 0.75pt solid #000;
    padding: 3pt 5pt;
    gap: 5pt;
  }
  .step > .head .n {
    background: #000 !important;
    color: #fff !important;
    width: 16pt;
    height: 16pt;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .step > .head h2 {
    font-size: 13pt;
    color: #000 !important;
  }
  .step > .head p {
    display: none;
  }
  .step > .body {
    padding: 5pt;
    font-size: 12pt;
  }

  ol.steps > li {
    margin-bottom: 3pt;
    padding-left: 17pt;
  }
  ol.steps > li::before {
    background: none;
    border: 0.75pt solid #000;
    color: #000;
    width: 13pt;
    height: 13pt;
    font-size: 9pt;
    top: 1.5pt;
  }

  .note {
    border: 0.75pt solid #000 !important;
    background: none !important;
    color: #000 !important;
    padding: 3pt 5pt;
    margin-top: 4pt;
    font-size: 12pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .note--danger {
    border-width: 1.5pt !important;
  }

  .cuff {
    gap: 4pt;
    margin-top: 4pt;
    grid-template-columns: 1fr 1fr;
  }
  .cuff > div {
    border: 0.75pt solid #000;
    padding: 3pt 5pt;
    font-size: 12pt;
  }
  .cuff strong,
  .cuff span {
    color: #000;
  }

  /* The TABLE is the clinically load-bearing element and must never split.
     The surrounding card is allowed to break, so its heading and intro
     sentence can sit at the foot of a page with the table starting the next
     one — guarding the whole card instead wastes most of a page. */
  .bp-card {
    break-inside: auto;
  }
  .bp-card > .head {
    break-after: avoid;
    page-break-after: avoid;
  }
  .table-wrap {
    overflow: visible;
    margin-top: 4pt;
  }
  .source {
    color: #000;
    font-size: 12pt;
    margin-top: 4pt;
  }
  table.bp {
    font-size: 12pt;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1pt solid #000;
  }
  table.bp caption {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    text-align: left;
    font-weight: 700;
    font-size: 12pt;
    padding-bottom: 3pt;
  }
  table.bp thead th {
    background: none !important;
    color: #000 !important;
    border-bottom: 1pt solid #000;
    font-size: 12pt;
  }
  table.bp th,
  table.bp td {
    border-bottom: 0.5pt solid #000;
    padding: 3pt 4pt;
  }
  /* Grayscale-safe: no background fills, category conveyed by the label text
     plus a border style unique to each row. */
  .cat {
    background: none !important;
    color: #000 !important;
    padding: 1pt 4pt;
    font-size: 12pt;
  }
  .cat--low {
    border: 1.5pt dotted #000 !important;
  }
  .cat--normal {
    border: 0.75pt solid #000 !important;
  }
  .cat--elevated {
    border: 1.5pt dashed #000 !important;
  }
  .cat--stage1 {
    border: 3pt double #000 !important;
  }
  .cat--stage2 {
    border: 1.5pt solid #000 !important;
  }
  .cat--crisis {
    border: 2.5pt solid #000 !important;
  }
  tr.row-crisis td {
    color: #000 !important;
    font-weight: 700;
  }

  .faq-wrap {
    column-count: 2;
    column-gap: 14pt;
  }
  .faq {
    border: 0;
    border-bottom: 0.5pt solid #000;
    border-radius: 0;
    padding: 0 0 3pt;
    margin-bottom: 3pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .faq h3 {
    font-size: 12pt;
    color: #000;
    margin-bottom: 1pt;
  }
  .faq p {
    color: #000;
    font-size: 12pt;
  }

  .support {
    background: none !important;
    color: #000 !important;
    border: 1pt solid #000;
    border-radius: 0;
    padding: 5pt 7pt;
    margin-top: 7pt;
    text-align: left;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .support h2 {
    font-size: 13pt;
    color: #000 !important;
  }
  .support p {
    color: #000 !important;
    margin: 0;
    max-width: none;
    font-size: 12pt;
  }

  .print-only {
    display: block !important;
  }

  a {
    color: #000 !important;
    text-decoration: none;
  }
}

.print-title,
.print-only {
  display: none;
}