/* Typography Styles */

/* Import fonts */
/* REL-021 — FS-046 §4.8: the portal's own copies, so no page tells Google a visitor's address. */
@import url('../fonts/fonts.css');

/* Base text styles */
/* ⚠ FS-037 — THE ONE BASE SIZE, and it lives here so everything inherits it.
   15px: Tracey found 14px too small and Pete found 16px too big, and the point of
   the rule is that there is no third answer. A paragraph anywhere in the portal
   needs no font-size of its own — if it has one, that is a bug. */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;   /* 15px — the value of --text-base, written out here on
                             purpose: body must not depend on a custom property
                             defined in a sheet that loads after it. */
  line-height: 1.5;
  color: #212529;
}

/* Standard text */
.text-standard {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.5;
}

/* ===========================================================================
   ⚠ LEGACY — the two-level scale, for the pages FS-037 has not converted yet.
   ===========================================================================
   These two rules are the whole reason the portal's headings drifted apart, and
   they are kept only while pages convert one at a time.

   h2 and h3 are styled here; h1, h4, h5 and h6 are NOT, so they fall through to
   Bootstrap — in the BODY typeface, at Bootstrap's own scale. Measured at
   1280px with the portal's real sheet stack:

       h1  40px/500 Roboto     (never styled by us)
       h2  24px/700 Cabin
       h4  24px/500 Roboto     ← the same size as h2, LARGER than h3
       h5  20px/500 Roboto
       h3  19.2px/700 Cabin
       h6  16px/500 Roboto

   So a fourth heading level was unreachable: six pages wrote their own
   `h4 { font-size: 12px }` and the rest gave up on heading tags and used a
   <div> with a class. That is the drift Tracey raised, and it was the only
   option available.

   🔴 DO NOT add h1 / h4 rules here. The replacement is the .portal-type block
   below. When the last page carries .portal-type, delete these two rules and
   drop the class from the markup.
   =========================================================================== */

/* Page titles (h2) — legacy */
h2, .page-title {
  font-family: 'Cabin Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: #212529;
}

/* Card titles (h3) — legacy */
h3, .card-title {
  font-family: 'Cabin Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
  color: #212529;
}

/* Responsive adjustments — legacy */
@media (max-width: 768px) {
  h2, .page-title {
    font-size: 1.3rem;
  }

  h3, .card-title {
    font-size: 1.1rem;
  }
}

/* ===========================================================================
   FS-037 — THE PORTAL'S TYPE SCALE. Four levels, one visual style each.
   ===========================================================================
   TWO LEVELS NAME, TWO LEVELS LABEL:

     H1  30 / 24px    Cabin Condensed 700, sentence case   the page title
     H2  24 / 20px    Cabin Condensed 700, sentence case   a section of the page
     H3  17 / 16px    Roboto 700, ALL CAPS, .05em          a label or a reading
                      (or Cabin Condensed, sentence case, when it NAMES — .is-name)
     H4  14px         Roboto 700, ALL CAPS, .08em          the same, one level in

   …over ONE base text size of 15px and ONE caption size of 13px. Six sizes for
   the whole portal.

   Pete, 2026-09-17: "I want H3 to be all caps (and color appropriate) and H4 to
   be all caps just smaller color appropriate." The caps-green look he wanted to
   keep therefore carries TWO levels — which is also what lets a card on the
   report be promoted onto a page of its own (power/attribute.php) without
   running out of levels.

   ⚠ SCOPED UNDER .portal-type, ON PURPOSE, and the scope is temporary. These
   rules change what every h1-h4 in the subtree looks like, and a page whose
   markup still says <h3> where it means "a section" would come out as a caps
   green label. So a page opts in when its markup has been retagged, and the
   class disappears when the last one has. Specificity: `.portal-type h3` is
   (0,1,1), which beats both the legacy `h3` and Bootstrap's — no !important is
   needed anywhere, and if one shows up, something else is wrong.

   🔑 A LEVEL IS A LEVEL, NOT A SIZE. Nothing may be given a heading's look
   without being a heading tag, and no page's stylesheet may set a font-size on
   a heading. The one exception in the whole guide is the group page's four view
   tabs, which take the H3 look by class because they are <label> elements for
   radio inputs — controls, not headings.
   =========================================================================== */

.portal-type h1,
.portal-type h2 {
  font-family: 'Cabin Condensed', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #212529);
  text-transform: none;
  letter-spacing: normal;
}

/* ⚠ H1 AND H2 CLIMBED WITH H3, and the reason is that a size is not a weight.
   H3 is ALL CAPS, bold and tracked in a normal-width face; H2 is sentence case in
   a CONDENSED one. At 20px against 17px the step was 1.18 and the H3 still read
   as the larger of the two — Pete, 2026-09-17: "now H2 seems small in comparison
   to H3. It looks like we need to bump up h1 and h2 to keep up."

   So the gap between H2 and H3 is deliberately wide (1.41) where the others are
   ordinary steps (1.25 and 1.21): it is paying for the caps. */
.portal-type h1 {
  font-size: 1.875rem;        /* 30px */
  margin: 0 0 0.25rem;
}

.portal-type h2 {
  font-size: 1.5rem;          /* 24px */
  margin: 2rem 0 0.5rem;
}

.portal-type h3,
.portal-type h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--label-green, #66a12f);
}

/* FS-037 — H3 and H4 grew, and by a lot: 13px → 17px and 11px → 14px. Pete and
   Tracey, 2026-09-17: "she said our H4 and H3 are too small too." They were sized
   against the instrument's old 11–13px labels rather than against the portal's
   text, which is how a heading ended up SMALLER than the copy it introduced. */
.portal-type h3 {
  font-size: 1.0625rem;       /* 17px — the same as .is-name below: ONE H3 size, two treatments */
  letter-spacing: 0.05em;
  margin: 1.25rem 0 0.35rem;
}

.portal-type h4 {
  font-size: 0.875rem;        /* 14px */
  letter-spacing: 0.08em;
  margin: 1rem 0 0.3rem;
}

/* A heading is never pushed away from the top of the box it opens. */
.portal-type h2:first-child,
.portal-type h3:first-child,
.portal-type h4:first-child { margin-top: 0; }

/* ---- H3's second form: a heading that NAMES rather than LABELS --------------
   ⚠ It no longer carries a size. Both forms of H3 are 17px now, which is the
   tidiest thing to come out of raising the caps form: one level, one size, and
   the only difference is the typeface, the case and the colour.
   A caps-green H3 is right for a category ("Compare the poles") and wrong for a
   name or a sentence — a person on a tile, a FAQ question, a document's title.
   "AARON KOPEL" in green is shouting, and it is not what "all caps" was asking
   for. Same level, same job in the outline; different look, decided by what the
   heading IS rather than by taste.

   Where this applies, and it is the whole list: a person's name on a list tile,
   a report's context on My Power Style, a FAQ question, a resource's title, and
   a person's name in a group strip. FS-037 §7 Q1. */
.portal-type h3.is-name {
  font-family: 'Cabin Condensed', sans-serif;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink, #212529);
}

/* ⚠ The size, stated again for .is-name — found by power-style-guide.spec.ts.
   `.status-tile h3` (components.css, the list pages' legacy tile title) is the
   same specificity as `.portal-type h3` and loads later, so every tile title on a
   converted page came out 16.8px. (0,2,1) here settles it in the scale's own file,
   without a page stylesheet sizing a heading. */
.portal-type h3.is-name { font-size: 1.0625rem; }    /* 17px */

/* ---- "color appropriate", which sometimes means two colours ----------------
   Pete, 2026-09-17: "sometimes that means two colors. For example, 'Focus:
   Balanced' would use black for 'Focus:' and green for 'Balanced' — that's how
   it displays now. Only when it's an entire rating text like 'Moderately
   Accommodative' where it would be the color of the rating entirely."

   So a heading's colour is decided by what the heading is, in three cases:

     a label            "What this measures"       all --label-green
     a name + a reading "Focus: Balanced"          the name in --ink,
                                                   the reading in its zone colour
     a reading alone    "Moderately Accommodative" all in its zone colour

   .ps-reading covers the last two: it drops the heading itself back to ink, and
   the reading inside it — which psAttributeReadingHtml() already wraps in
   `<span class="attr-reading zone-…">` — supplies the colour. When the whole
   heading is the reading, the span is the whole content and the ink never shows.
   One class, both cases, and no colour rule to keep in step with the zones. */
.portal-type h2.ps-reading,
.portal-type h3.ps-reading,
.portal-type h4.ps-reading { color: var(--ink, #212529); }

@media (max-width: 768px) {
  .portal-type h1 { font-size: 1.5rem; }     /* 24px */
  .portal-type h2 { font-size: 1.25rem; }    /* 20px */
  .portal-type h3 { font-size: 1rem; }       /* 16px — both forms */
  .portal-type h3.is-name { font-size: 1rem; }
  /* H4 does not shrink: 14px is already the floor for a heading. */
}