/* AskNaro shared system layer.  Loaded after inkwell-fonts.css and BEFORE each page's own
   <style>, so a page can still override anything here deliberately.

   It carries only what genuinely belongs to every page: the carved-corner ladder, a focus ring,
   the loading skeleton, and a spacing scale. Palettes stay in the pages for now because each one
   already declares its own; the values were reconciled in the same pass. Added 2026-08-24. */

:root{
  /* --- the palette, one value per role ---------------------------------------------------
     THIS BLOCK IS THE SOURCE OF TRUTH. Each page still declares the same tokens in its own
     :root so a missing stylesheet can never strip the product of colour — but if you change a
     brand colour, change it HERE FIRST and then propagate, and never let the two disagree.

     Before 2026-08-24 they did disagree: every app page declared a base palette and then a
     second :root ("inkwell skin") overrode most of it, so the product shipped two blues
     (#1A759F / #14719B), two inks (#184E77 / #123E63), two greys (#6B8198 / #566E86) and three
     hairlines. The pairs were reconciled per token on merit, not by picking one file's set:

       --primary   #14719B  the two blues were 2 dE apart, i.e. indistinguishable; this one
                            clears 4.5:1 on the app background and #1A759F did not (4.49)
       --ink       #184E77  the lighter of the two inks, and the value the logo art was drawn
                            against; 8.8:1, passes with room
       --muted     #566E86  #6B8198 measured 4.02:1 on white and 3.5:1 on the app background —
                            a WCAG AA failure on the landing, auth and reset pages
       --danger    #B3453C  #C0584F measured 4.42:1, just under AA, and it is error text
       --line      #CFDCE5  #E1EAEF hairlines were all but invisible on the #F7FAFB paper

     #1876a3 is NOT in this list on purpose: it is baked into the logo SVGs (logo.svg,
     naro-logo.svg, browser-icon.svg) and stays as --stroke, matching the artwork.
     The dashboard's chart colours are a categorical data scale, not brand colour; they are
     deliberately their own set. */
  --naro-primary:  #14719B;
  --naro-accent:   #3FAE8C;
  --naro-ink:      #184E77;
  --naro-ink-soft: #2C5E8E;
  --naro-muted:    #566E86;
  --naro-hairline: #CFDCE5;   /* NOT --naro-line: landing-v6 uses that name for the chat bubble border */
  --naro-danger:   #B3453C;
  --naro-stroke:   #1876a3;   /* logo artwork colour — do not "correct" it */

  /* --- the carved corner: five sizes, ONE ratio ------------------------------------------
     The signature shape is a small radius on three corners and a long sweep on the fourth.
     Which size to use was always clear from the element (modal > card > tile > button > chip);
     what had drifted was the PROPORTION — thirteen different sweeps across the product
     (9/30, 7/26, 7/22, 7/20, 6/22, 6/20, 6/18, 5/18, 5/15, 4/12, 4/11, 4/10), ratios from
     2.5x to 3.7x. Read side by side the shape looked like a rounding error instead of a mark.
     Every tier below is the same 3.7x sweep, so the corner scales instead of wobbling. */
  --corner-surface: 9px 9px 33px 9px;   /* modals, hero card                */
  --corner-card:    7px 7px 26px 7px;   /* cards, panels, list rows         */
  --corner-tile:    6px 6px 22px 6px;   /* KPI tiles, group cards, options  */
  --corner-control: 5px 5px 18px 5px;   /* buttons                          */
  --corner-chip:    4px 4px 15px 4px;   /* small buttons, filter chips      */

  /* --- measurement scale -----------------------------------------------------------------
     The eight product pages currently carry 31 distinct pixel font-sizes (9.5, 10, 10.5, 11,
     11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 17 ... ) and 144 distinct padding
     shorthands. Half-pixel steps like 13.5 vs 14 are not a hierarchy — nobody can see the
     difference, but every one of them is a decision someone has to make again next time.

     These are the scales for NEW work. The existing values are deliberately NOT rewritten in
     this pass: changing a card from 13.5px to 14px re-wraps its text, and re-flowing eight
     live pages is a change to make on purpose with eyes on it, not as a side effect of a
     tidy-up. Burn the old values down as each component is next touched. */
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15.5px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:25px; --fs-3xl:30px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* --- focus ring, one recipe (there were four, one of them a colour in no token) --- */
  --focus-ring: 2px solid #184E77;   /* = --naro-ink; 8.8:1 on white, well past the 3:1 a focus indicator needs */
  --focus-offset: 2px;
}

/* --------------------------------------------------------------------------------------
   Focus. Four pages had no :focus-visible rule at all, which is a WCAG failure and a real
   problem for anyone driving the product from a keyboard. One rule, every control.
   :focus-visible (not :focus) so a mouse click does not leave a ring behind.
   -------------------------------------------------------------------------------------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  /* No border-radius here. It was setting 3px, which meant focusing a button flattened the very
     carved corner the same commit had just unified — the ring is supposed to trace the control,
     not reshape it. A modern outline already follows the element's own radius. */
}
/* controls that sit on the dark ink band need a light ring to be visible at all */
.top :is(a,button,[tabindex]):focus-visible,
.bandbar :is(a,button,[tabindex]):focus-visible,
.chead :is(a,button,[tabindex]):focus-visible{
  outline: 2px solid #CDE6F2;
}

/* --------------------------------------------------------------------------------------
   Loading skeleton. Every list in the product cleared its container and waited, so a slow
   request was indistinguishable from a broken page. Use .sk in the shape of the thing that
   is coming; it inherits the card corner so the placeholder and the real card agree.
   -------------------------------------------------------------------------------------- */
.sk{
  background:#fff;
  border:1px solid var(--line, #CFDCE5);
  border-radius: var(--corner-card);
  padding:18px 18px 16px;          /* matches the course/course-card tiles it stands in for */
  min-height:118px;
  display:flex; flex-direction:column; gap:10px;
}
.sk.row{min-height:0;padding:14px 16px}   /* for list rows rather than tiles */
.sk-line{
  display:block; height:10px; border-radius:4px;
  background:linear-gradient(90deg,#E7EEF2 25%,#F4F8FA 37%,#E7EEF2 63%);
  background-size:400% 100%;
  animation: naro-sweep 1.3s ease-in-out infinite;
}
.sk-line.w70{width:70%} .sk-line.w45{width:45%} .sk-line.w30{width:30%;height:8px}
@keyframes naro-sweep{ from{background-position:100% 0} to{background-position:0 0} }

/* A grid of skeletons matching the card grids the product uses. */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}

@media (prefers-reduced-motion: reduce){
  .sk-line{ animation:none; background:#E7EEF2 }
}

/* --------------------------------------------------------------------------------------
   Screen-reader-only text. Needed wherever the visual design carries meaning that the
   markup does not — a loading state, an icon-only control, a status change.
   -------------------------------------------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}