/* ═══════════════════════════════════════════════════════════════════════════════
   nm-student.css: what every student page shares (4 Oct 2026). Jean: "One mast style (the
   portal's), Arimo body / Fraunces headings everywhere, … focus outlines restored."
   It is linked last in each page's head, so it settles what the pages' own styles left
   different, and it draws its colours from the nm-theme.css tokens, falling back to the light
   values where a page has none.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Type: Arimo for reading, Fraunces for the page's headings (fraunces.css is self-hosted) */
body{font-family:'Arimo',Arial,sans-serif}
h1,h2{font-family:'Fraunces',Georgia,serif}

/* The mast, as the portal draws it: the mark, a pink title after a hairline, the page's links
   and the theme switch to the right, on the surface colour with the pink rule beneath */
.nm-mast,.topbar,.mast{display:flex;align-items:center;gap:12px;background:var(--white,#FFF);
  border:0;border-bottom:3px solid var(--pink,#FF0066);border-radius:0;box-shadow:none;padding:10px 20px}
.nm-mast .mark,.topbar .mark,.mast .mark{flex-shrink:0;display:inline-block;line-height:0}
.nm-mast .t,.topbar .ttitle,.topbar .topbar-title,.mast .t{font-family:'Arimo',Arial,sans-serif;font-size:13px;font-weight:800;
  color:var(--pink-text,#CC0052);border-left:1px solid var(--border,#E8E8E8);padding-left:12px}
.nm-mast .r,.mast .right,.topbar .topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nm-mast .r a,.mast .right a,.topbar .topbar-right a{font-family:'Arimo',Arial,sans-serif;font-size:12.5px;font-weight:700;
  color:var(--pink-text,#CC0052);text-decoration:none}
.nm-mast .r a:hover,.mast .right a:hover,.topbar .topbar-right a:hover{text-decoration:underline}

/* Where the keyboard is. Several pages took the outline away (outline:none) and put nothing
   in its place, so a student moving by Tab could not see where they were. A visible ring on
   keyboard focus wherever that was done; a mouse click on a button does not draw it. */
:focus-visible{outline:2px solid var(--pink-text,#CC0052)!important;outline-offset:2px}

/* THE HERO (5 Oct 2026): the portal's, moved here so it is one component (Jean: "The study support
   hero is the quality we need"). The portal's welcome and study support, the self-test, Past papers
   and Study techniques draw it. A card in the content column: the four-colour mass on its canvas
   (data-module="pathways", 14px cells, the words kept clear: data-avoid=".in"), a Fraunces title of
   moderate size, and one line under it in the body sans. The card is the portal's 200px tall, and
   grows instead of clipping when a page's line is longer; the mosaic redraws whenever its canvas
   changes size or the screen's pixel ratio changes (nm-mosaic.js), so it is never a stretched
   bitmap. */
.nm-hero{position:relative;min-height:200px;overflow:hidden;border-radius:14px;background:var(--white,#FFF);border:1px solid var(--border,#E8E8E8);margin-bottom:18px}
.nm-hero[hidden]{display:none}
.nm-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.nm-hero .in{position:relative;padding:36px 0 64px 32px;max-width:58%}
.nm-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.5rem,4vw,1.9rem);line-height:1.15;margin:0 0 8px;color:var(--dark,#2D2D2D);letter-spacing:0}
.nm-hero h1 .accent{color:var(--teal-dk,#1FA3A3)}
.nm-hero p{font-family:'Arimo',Arial,sans-serif;font-size:13.5px;line-height:1.55;color:var(--mid,#5A5A5A);max-width:330px;margin:0}
@media(max-width:600px){.nm-hero{min-height:190px}.nm-hero .in{padding:24px 0 60px 18px;max-width:78%}.nm-hero p{max-width:none}}
@media print{.nm-hero canvas{display:none!important}}
/* A page whose hero is not inside its .wrap names its column in --nm-col (the .wrap's max-width), and
   the hero takes that column less its 20px gutters, so it lines up with the tiles or cards beneath.
   On a phone that hero runs edge to edge, as it did. */
.nm-hero.in-col{width:calc(100% - 40px);max-width:calc(var(--nm-col,860px) - 40px);margin:22px auto 0}
@media(max-width:600px){.nm-hero.in-col{width:100%;max-width:none;margin:0;border-radius:0;border-width:0 0 1px}}

/* ── Phones (the phone pass, 4 Oct 2026) ─────────────────────────────────────────────
   On a touch screen every control is at least 44px in each direction, a fingertip, and a field
   is at least 16px type: below that, an iPhone zooms the whole page when the field is tapped and
   leaves it zoomed. A plain button centres its words in the taller box; a link styled as a button
   is given the padding instead. A tick box or a radio is answered through its label, which is the
   target; the box itself is drawn a little larger. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{font-size:16px!important}
  button,select,summary,[role=button],
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]){min-height:44px}
  button,[role=button]{min-width:44px}
  a.btn{padding-top:14px;padding-bottom:14px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .nm-mast .r a,.mast .right a,.topbar .topbar-right a,.nm-back{display:inline-flex;align-items:center;min-height:44px}
}

/* The mast on a phone: one row, the mark without its wordmark. The theme switch is a round 44px button showing a half-filled
   circle (its words stay its accessible name, so a screen reader still hears "Dark mode"), the
   signed-in address is left to the portal's own pages, and the spacing tightens. */
@media (max-width:560px){
  .nm-mast,.topbar,.mast{padding:6px 14px;gap:10px}
  .nm-mast .t,.topbar .ttitle,.topbar .topbar-title,.mast .t{font-size:12.5px;padding-left:10px;min-width:0}
  .nm-mast .r,.mast .right,.topbar .topbar-right{gap:8px}
  .nm-mast .who,.topbar .who{display:none}
  /* the mark alone: the lockup's square mark is its first 26px at this size, the wordmark follows */
  .nm-mast [data-mark="now-matters-lockup"],.topbar [data-mark="now-matters-lockup"],.mast [data-mark="now-matters-lockup"]{width:26px!important;overflow:hidden;flex:none}
  .nm-mast .nm-lockup,.topbar .nm-lockup,.mast .nm-lockup{clip-path:inset(0 calc(100% - 26.5px) 0 0)}
  /* a mark that is a link home keeps a 44px target around it */
  .nm-mast a[data-mark],.topbar a[data-mark],.mast a[data-mark]{box-sizing:content-box!important;padding:9px!important;margin:-9px 0 -9px -9px}
  .nm-mast a:has(> [data-mark]),.topbar a:has(> [data-mark]),.mast a:has(> [data-mark]){min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;margin:-9px 0 -9px -9px}
  .nm-theme-btn{font-size:0!important;width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:0!important}
  .nm-theme-btn::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box;
    background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
  /* a switch straight in the mast (the portal's) is pushed to the right, as the address before it did */
  .nm-mast > .nm-theme-btn,.topbar > .nm-theme-btn,.mast > .nm-theme-btn{margin-left:auto!important}
}

/* Links that stand as controls of their own (the phone pass, 4 Oct 2026): a back link, a chip, a
   "Read the guide →", the planner's links under a session, the guide's contents, the library's
   filter chips. On a touch screen each is 44px tall; a link inside a sentence stays as it is. Tick
   boxes are answered through their labels; one without a label is drawn at 24px at least. */
@media (pointer:coarse){
  a.sb,.links a,a.back,a.code,a.chip,.bar .r a,a.go,a.sh-go,a.tag,a.brand-lockup,.filter-chip,.alpha-btn{display:inline-flex;align-items:center;min-height:44px}
  nav.contents a{display:flex;align-items:center;min-height:44px}
  input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}
  input[type=file]{min-height:44px}
}

/* A tick box with no words beside it: an invisible 44px label around it, so the whole area ticks it,
   laid out as if only the box were there */
.nm-hit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-10px;cursor:pointer;flex:none}

/* More of the same (the phone pass): the report's contents, a subject's careers and its papers link,
   a bursary's contact line, each 44px tall on a touch screen. The career code and the Enneagram
   number in a report's cards get a bigger target through padding with a matching negative margin,
   so nothing in the card moves. */
@media (pointer:coarse){
  .nm-toc a,.meta a{display:flex;align-items:center;min-height:44px}
  .careers a,.papers-box a,.prog-foot a{display:inline-flex;align-items:center;min-height:44px}
  a.cc-code{display:inline-block;padding:13px 6px;margin:-13px -6px}
  a.en-num{min-width:44px;margin-left:-8px;margin-right:-8px;justify-content:center}
}