/* The per-river pages and the FAQ.
   ============================================================================================

   A SEPARATE FILE, deliberately.

   watch.css is the approved consumer design and it was being edited by somebody else while these
   pages were built. Two authors in one stylesheet is how a design gets an accidental second
   opinion, so nothing here is in that file and nothing here changes it.

   Every selector below is scoped under `body.p-river` or `body.p-faq`, which the server writes
   only onto these two page types. That is the whole safety argument: no rule in this file can
   reach the home page, a watch page or a map, because no other page carries those classes.

   Nothing here invents a look. The colours, the type and the rhythm are the tokens already
   declared in watch.css's :root -- paper, card, navy, rule, the signal ladder -- so these pages
   are the existing design applied to a new shape of content rather than a new design.

   The mobile half follows the rule test_watch_mobile.py enforces on watch.css: a rule that must
   not reach the desktop page is scoped on `body.mob`. This file is not scanned by that test, so
   it is written to the standard rather than to what is checked.

   Reading copy stays at or above 16px. html is 17px, so .95rem = 16.15px is the floor used for
   the qualifying lines, and nothing smaller is used for prose anywhere. */

/* ---- shared shell ------------------------------------------------------------------------ */
body.p-river main,
body.p-faq main {
  padding-bottom: 3rem;
}

body.p-river .river-head,
body.p-faq .faq-head {
  margin: 1.6rem 0 1.4rem;
}

body.p-river h1,
body.p-faq h1 {
  margin: 0 0 .5rem;
  line-height: 1.18;
}

body.p-river .lede,
body.p-faq .lede {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46rem;
  margin: 0 0 .6rem;
}

body.p-river .asof {
  font-size: .95rem;
  color: var(--ink-2);
  margin: 0;
}

body.p-river .qual,
body.p-faq .qual {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}

body.p-river section,
body.p-faq section {
  margin-top: 2.2rem;
}

body.p-river h2,
body.p-faq h2 {
  margin: 0 0 .6rem;
  line-height: 1.25;
}

/* ---- one gauge --------------------------------------------------------------------------- */
body.p-river .river-gauge {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--slate);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: var(--pad);
  margin: 0 0 1.1rem;
}

/* The signal ladder, read off the status class the server already puts on the article. The
   colour is a restatement of what the words say, never the only place the status appears. */
body.p-river .river-gauge.sev { border-left-color: var(--red); }
body.p-river .river-gauge.con { border-left-color: var(--orange); }
body.p-river .river-gauge.clr { border-left-color: var(--green); }
body.p-river .river-gauge.non { border-left-color: var(--grey); }

body.p-river .river-gauge h2 {
  font-size: 1.35rem;
}

body.p-river .reading {
  margin: .2rem 0 .3rem;
}

body.p-river .reading strong {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--navy);
  letter-spacing: -.01em;
}

body.p-river .reading .qual,
body.p-river .reading em {
  font-size: .95rem;
  font-style: normal;
  color: var(--ink-2);
  margin-left: .4rem;
}

body.p-river .move {
  margin: 0 0 .6rem;
  font-size: 1rem;
}

body.p-river .move .up   { color: var(--green); }
body.p-river .move .down { color: var(--red); }
body.p-river .move .flat { color: var(--slate); }

body.p-river .need {
  margin: .7rem 0 .3rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule-2);
}

body.p-river .spark-fig {
  margin: 1rem 0 .4rem;
}

body.p-river .spark-fig svg {
  max-width: 100%;
  height: auto;
}

body.p-river .spark-fig figcaption {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: .3rem;
}

body.p-river .official {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--rule-2);
}

body.p-river .official a {
  display: inline-block;
  color: var(--navy);
  font-weight: 600;
}

body.p-river .official .qual {
  display: block;
  margin-top: .2rem;
}

/* The way down to one gauge's own page, at the foot of that gauge's entry. Deliberately quieter
   than .official above it: that link leaves for an authority's own product and is the important
   one on this page, and this is a link further into our own site. Same scoping rule as every
   other selector in this file — under the body class, so it cannot reach another page type. */
body.p-river .deeper {
  margin: .7rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}

body.p-river .deeper a {
  color: var(--navy);
  font-weight: 600;
}

/* ---- the closing sections ---------------------------------------------------------------- */
body.p-river .river-meaning p,
body.p-faq .faq-item p {
  max-width: 46rem;
  line-height: 1.55;
}

body.p-river .cta {
  margin-top: 1rem;
}

body.p-river .cta a,
body.p-faq .faq-next a {
  font-weight: 600;
  color: var(--navy);
}

body.p-river .river-sources ul,
body.p-faq .faq-next ul {
  margin: .4rem 0 .8rem;
  padding-left: 1.2rem;
}

body.p-river .river-sources li,
body.p-faq .faq-next li {
  margin-bottom: .35rem;
  line-height: 1.5;
}

body.p-river .river-sources li {
  font-size: .95rem;
  color: var(--ink-2);
}

/* ---- the FAQ ----------------------------------------------------------------------------- */
body.p-faq .faq-item {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: var(--pad);
  margin: 0 0 1.1rem;
}

body.p-faq .faq-item h2 {
  font-size: 1.3rem;
}

body.p-faq .faq-item p:last-child {
  margin-bottom: 0;
}

/* ---- the phone -----------------------------------------------------------------------------
   Scoped on body.mob for the reason watch.css scopes its mobile section that way: the server
   decides which shape of page was served, and a rule that leaked the other way would reshape a
   laptop. Tap targets are brought to 44px here, where a finger is the pointer. */
body.mob.p-river .river-gauge,
body.mob.p-faq .faq-item {
  border-radius: 8px;
}

body.mob.p-river .reading strong {
  font-size: 1.7rem;
}

body.mob.p-river .lede,
body.mob.p-faq .lede {
  font-size: 1.05rem;
}

body.mob.p-river .official a,
body.mob.p-river .cta a,
body.mob.p-faq .faq-next a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

body.mob.p-river .river-sources li,
body.mob.p-faq .faq-next li {
  margin-bottom: .6rem;
}