/* ============================================================
   BetaDocta, section layouts for the neurology dashboard
   ------------------------------------------------------------
   Loaded AFTER bd-core.css. Nothing here invents a colour: ink,
   teal and paper from the token set, plus the one danger red
   (--danger) which is used only on content that is dangerous.

   Three sections are rebuilt here and each one is deliberately
   a different shape, so the page does not read as one repeated
   card grid:

     1. the hero          a quiet ink band, two lines and out
     2. #stroke-alert     BE-FAST as a vertical letter spine
     3. #emergencies      two urgency bands of opening rows
     4. #conditions       a borderless grouped index

   Rows end where their content ends. No height:100%, no
   align-items:stretch, no shadows, no second typeface.
   ============================================================ */

:root{
  /* the one red, at the opacities this page needs */
  --nd-danger-line:rgba(155,44,32,.26);
  --nd-danger-field:rgba(155,44,32,.045);
}

/* ============================================================
   1. Hero
   ------------------------------------------------------------
   The page had none: the site header ran straight into an h1
   and then a bordered card, so nothing told you where you had
   landed. Same ink band and same type as the home hero, but
   short on purpose — this is an emergency page and the stroke
   card has to stay on the first screen of a phone.
   ============================================================ */
.nd-hero{
  background:var(--ink);
  color:var(--on-ink);
  padding-block:var(--s4);
}
.nd-hero h1{
  color:var(--on-ink);
  max-width:14ch;
  margin:0 0 var(--s2);
  font-size:clamp(2rem,5.2vw,3.1rem);
}
.nd-hero__lede{
  margin:0;
  color:var(--on-ink-soft);
  font-size:1.05rem;
  line-height:1.5;
  max-width:46ch;
}
@media (min-width:760px){
  .nd-hero{ padding-block:var(--s5) }
  .nd-hero__lede{ font-size:1.12rem }
}
/* Wide: the headline and the line that explains it sit side by side on
   one baseline, so the band is filled by the words rather than by an
   ornament. */
@media (min-width:980px){
  .nd-hero .bd-wrap{
    display:grid;
    grid-template-columns:minmax(0,22rem) minmax(0,1fr);
    column-gap:var(--s5);
    align-items:end;
  }
  .nd-hero h1{ margin:0;max-width:11ch }
  .nd-hero__lede{ padding-bottom:.35rem;max-width:40ch }
}

/* The h1 moved into the hero, so the stroke section starts at
   its own heading and does not need the top air a page-opening
   section carries. */
#stroke-alert.bd-sec--tight{ padding-top:var(--s4) }


/* ============================================================
   2. BE-FAST
   ------------------------------------------------------------
   Six signs, each with a letter, a picture and a sentence. The
   letters spell a word, and in the two-column card grid the
   word could not be read: B and E sat beside each other, F and
   A on the next line, in small outlined chips that looked like
   buttons.

   They are now one column, left-aligned, set large, with the
   rows pulled close enough that B E F A S T reads down the
   edge of the block as a word. The picture follows the letter,
   the sentence follows the picture. The mnemonic is the
   structure of the section rather than a label inside it.

   The markup comes from site.js and cannot be changed here, so
   every rule below places an existing element.
   ============================================================ */
.neuro-fast{
  display:grid;
  grid-template-columns:1fr;   /* never two columns: it breaks the word */
  gap:0;
  margin-top:var(--s3);
  border-top:0;
  max-width:34rem;
}
.neuro-fast .card,
.neuro-fast .card.neuro-time{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:var(--s1) 0;
  column-gap:var(--s2);
  row-gap:.15rem;
  align-items:center;
  grid-template-columns:2.6rem 3rem minmax(0,1fr);
}
.neuro-fast .card + .card{ border-top:var(--rule) }

/* the letter: the whole point of the section */
.neuro-fast .neuro-let{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:start;
  width:auto;
  height:auto;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--ink);
  font-size:2.5rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
}
/* T is the one that is not a body part but a deadline. */
.neuro-fast .neuro-time .neuro-let,
.neuro-fast .card.neuro-time .neuro-let{ color:var(--danger);border:0;background:transparent }
/* The clock is drawn inline by site.js in a red that is one shade off
   the only red this site has. Pulled back onto the token. */
.neuro-fast .neuro-fast-clock svg{ stroke:var(--danger) }
.neuro-fast .neuro-fast-clock{ background:var(--danger-soft) }

.neuro-fast .neuro-fast-fig{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  width:3rem;
  height:3rem;
  padding:.15rem;
  background:var(--teal-wash);
  border-radius:var(--r);
}
.neuro-fast .card h3{
  grid-column:3;
  grid-row:1;
  align-self:end;
  margin:0;
  font-size:1rem;
  line-height:1.25;
}
.neuro-fast .card p{
  grid-column:3;
  grid-row:2;
  align-self:start;
  margin:0;
  color:var(--text-soft);
  font-size:.92rem;
  line-height:1.4;
}
/* Time ships a clock, not a person, so its row has no figure and
   must not leave the hole where one would have been. */
.neuro-fast .card:not(:has(.neuro-fast-fig)){ grid-template-columns:2.6rem minmax(0,1fr) }
.neuro-fast .card:not(:has(.neuro-fast-fig)) h3,
.neuro-fast .card:not(:has(.neuro-fast-fig)) p{ grid-column:2 }

@media (max-width:26rem){
  .neuro-fast .card,
  .neuro-fast .card.neuro-time{ grid-template-columns:2.2rem 2.5rem minmax(0,1fr);column-gap:var(--s1) }
  .neuro-fast .card:not(:has(.neuro-fast-fig)){ grid-template-columns:2.2rem minmax(0,1fr) }
  .neuro-fast .neuro-let{ font-size:2.1rem }
  .neuro-fast .neuro-fast-fig{ width:2.5rem;height:2.5rem }
}
@media (min-width:760px){
  .neuro-fast{ max-width:40rem }
  .neuro-fast .card,
  .neuro-fast .card.neuro-time{ grid-template-columns:3.1rem 3.5rem minmax(0,1fr);padding:.6rem 0 }
  .neuro-fast .card:not(:has(.neuro-fast-fig)){ grid-template-columns:3.1rem minmax(0,1fr) }
  .neuro-fast .neuro-let{ font-size:2.9rem }
  .neuro-fast .neuro-fast-fig{ width:3.5rem;height:3.5rem }
  .neuro-fast .card h3{ font-size:1.05rem }
}


/* ============================================================
   3. Signs that must not wait
   ------------------------------------------------------------
   This was two columns of prose: a bold title, a paragraph,
   "What to do:" and a sentence, six times over. Nothing told
   you which of them meant leave the house now.

   It is now two bands. The first carries the signs that mean
   go to hospital immediately and sits on the faintest wash of
   the danger red, so you can see the difference before you
   read a word. The second is the one sign that means see a
   doctor without delay, on plain paper. Inside a band each
   sign is one line you can scan, and it opens for the detail.
   ============================================================ */
.nd-urgency{ display:grid;gap:var(--s4);margin-top:var(--s2) }

.nd-band{ border:var(--rule);border-radius:var(--r);padding:var(--s2) var(--s3) }
.nd-band--now{ border-color:var(--nd-danger-line);background:var(--nd-danger-field) }

.nd-band__label{
  margin:0;
  padding-block:.35rem var(--s1);
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  color:var(--text);
}
.nd-band--now .nd-band__label{ color:var(--danger) }
.nd-band__count{ font-weight:400;color:var(--text-mute);font-size:.88rem }
.nd-band--now .nd-band__count{ color:var(--text-mute) }

.nd-rows{ list-style:none;margin:0;padding:0 }
.nd-rows > li + li{ border-top:var(--rule) }
.nd-band--now .nd-rows > li + li{ border-top-color:var(--nd-danger-line) }

.nd-row{ margin:0 }
.nd-row > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1.1rem;
  align-items:center;
  gap:var(--s2);
  padding-block:.8rem;
  cursor:pointer;
  list-style:none;
  font-weight:650;
  font-size:1rem;
  line-height:1.3;
  color:var(--text);
}
.nd-row > summary::-webkit-details-marker{ display:none }
.nd-row > summary:hover{ color:var(--teal-press) }
/* a hinge, drawn from the text colour, not an icon font */
.nd-row__chev{
  width:.6rem;height:.6rem;
  justify-self:end;
  border-right:2px solid var(--text-mute);
  border-bottom:2px solid var(--text-mute);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.nd-row[open] .nd-row__chev{ transform:rotate(-135deg) }
.nd-row__body{ padding-bottom:var(--s2);max-width:62ch }
.nd-row__body p{ margin:0 0 .5rem;color:var(--text-soft);font-size:.95rem;line-height:1.55 }
.nd-row__body .nd-row__act{
  margin:0;
  color:var(--text);
  padding-top:.5rem;
  border-top:var(--rule);
  font-size:.95rem;
}
.nd-band--now .nd-row__act{ border-top-color:var(--nd-danger-line) }
.nd-row__act strong{ font-weight:700 }

@media (prefers-reduced-motion:reduce){
  .nd-row__chev{ transition:none }
}

/* --- the SNOOP headache flags, under the same heading ---
   Still rendered and still translated by site.js, so this only
   restyles what that code writes. Kept deliberately light: a
   letter in front of the line, no boxes, no rules between the
   items, so it does not read as a second copy of the band
   above it. */
/* The line that introduces SNOOP is written by site.js into an h3, and
   it is a sentence, not a heading. Set as a lead-in so it does not
   arrive as four lines of bold. */
.nd-snoop-block{ margin-top:var(--s4);padding-top:var(--s4);border-top:var(--rule) }
#snoopIntro{
  font-size:1rem;
  font-weight:600;
  line-height:1.45;
  color:var(--text);
  max-width:58ch;
  margin:0 0 var(--s2);
}
.nd-snoop{ display:grid;gap:var(--s3);margin-top:var(--s2) }
.nd-snoop .card,
.nd-snoop .snoop-card{
  display:grid;
  grid-template-columns:1.6rem minmax(0,1fr);
  column-gap:var(--s2);
  row-gap:.1rem;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
}
.nd-snoop .neuro-let,
.nd-snoop .snoop-let{
  grid-column:1;grid-row:1 / span 2;align-self:start;
  width:auto;height:auto;background:transparent;border:0;border-radius:0;
  color:var(--teal-press);font-size:1.25rem;font-weight:700;line-height:1.25;
}
.nd-snoop h3{ grid-column:2;grid-row:1;margin:0;font-size:1rem;line-height:1.25 }
.nd-snoop p{ grid-column:2;grid-row:2;margin:0;color:var(--text-soft);font-size:.93rem;line-height:1.5 }

@media (min-width:760px){
  .nd-urgency{ gap:var(--s4) }
  .nd-snoop{ grid-template-columns:1fr 1fr;column-gap:var(--s5) }
}


/* ============================================================
   4. The conditions themselves
   ------------------------------------------------------------
   Same prose problem as the section above, but these are not
   emergencies and must not look like them. So: no boxes, no
   wash, no opening rows. A grouped index — how serious, then
   the conditions in that group, name first and one line of
   plain language under it. A hairline between the three
   groups and nowhere else.
   ============================================================ */
.nd-index{ display:grid;gap:0;margin-top:var(--s2) }
.nd-group{ padding-block:var(--s3) }
.nd-group + .nd-group{ border-top:var(--rule) }
.nd-group:first-child{ padding-top:var(--s1) }
.nd-group:last-child{ padding-bottom:0 }

.nd-group__label{
  margin:0 0 var(--s2);
  font-size:.95rem;
  font-weight:700;
  line-height:1.3;
  color:var(--text-mute);
}
.nd-group--emergency .nd-group__label{ color:var(--danger) }

.nd-group__items{ display:grid;gap:var(--s3) }
.nd-item{ margin:0 }
.nd-item__name{
  display:block;
  font-size:1.05rem;
  font-weight:650;
  line-height:1.3;
  color:var(--text);
  text-decoration:none;
}
a.nd-item__name{ color:var(--teal-press);text-decoration:underline;text-underline-offset:3px }
a.nd-item__name:hover{ color:var(--ink) }
.nd-item__sum{ margin:.2rem 0 0;color:var(--text-soft);font-size:.94rem;line-height:1.55;max-width:58ch }

@media (min-width:760px){
  .nd-group{
    display:grid;
    grid-template-columns:11rem minmax(0,1fr);
    column-gap:var(--s4);
    align-items:start;
  }
  .nd-group__label{ margin:0 }
  /* Columns rather than a two-up grid: a grid lines the entries up in
     rows and leaves a hole wherever one entry is taller than its
     neighbour. Flowed columns close up behind each other. */
  .nd-group__items{ display:block;columns:2;column-gap:var(--s4) }
  .nd-item{ break-inside:avoid;margin-bottom:var(--s3) }
  .nd-item:last-child{ margin-bottom:0 }
}

/* A coloured left border on a card is one of the generated-card tells,
   and this one also reads as a crop mark down the side of the page.
   The danger wash and the red heading already say what this card is;
   the stripe is a third statement of the same thing. */
.neuro-alert{ border-left-width:1px;border-left-color:rgba(155,44,32,.28) }

/* The neurology hero is the same band as the home hero, so the header
   rides it here too rather than sitting on it as a white bar. */
.neuro-hero{ background:var(--ink);color:var(--on-ink) }
html[data-hero] .nd-hero{ padding-top:calc(66px + clamp(var(--s4),6vh,var(--s5))) }
.nd-hero + .bd-sec{ border-top:0;padding-top:var(--s4) }