/*
 * The app's global stylesheet: the document itself, and the token files.
 *
 * What belongs here is the part shadow DOM cannot reach from inside a
 * component: the document itself (canvas colour, the body font every component
 * then inherits), and the design tokens. Custom properties and inherited
 * properties cross a shadow boundary; selectors do not. So a rule written here
 * on `:root` reaches every `ui-*` control, and a rule written here on `.control`
 * reaches nothing.
 *
 * Served straight from disk by nginx — `root /app/frontend` in app/nginx.conf
 * makes /styles/app.css this file, through the allowlist location for
 * /styles/*.css. Any other path under /styles/ is a 404 rather than the HTML
 * shell, so a typo fails loudly.
 */

/* Must be the first rule in the file — the parser drops an @import that follows
   one, silently. Comments above it are fine.

   The cost is a serial round trip: the browser cannot discover colours.css
   until it has fetched and parsed this file, where a second <link> in the shell
   would fetch both at once. Accepted because it keeps the palette a detail of
   the stylesheet rather than something every HTML shell has to remember to
   list — and there are two shells (the app and the workbench) that must not
   drift. Revisit if this grows into a chain of imports. */
@import url('./colours.css');
@import url('./typography.css');
@import url('./focus.css');
@import url('./fields.css');
/* Last of the token files, because accessibility mode replaces tokens the
   others declare and the later declaration wins at equal specificity. */
@import url('./accessibility.css');
/* Accessibility mode's typeface, self-hosted from the npm package rather than
   Google's CDN, which the CSP does not allow and the repo does not use. An
   @font-face costs nothing until something is drawn in it, so outside the mode
   neither file is fetched. */
@import url('/node_modules/@fontsource/atkinson-hyperlegible/400.css');
@import url('/node_modules/@fontsource/atkinson-hyperlegible/700.css');

body {
  /* The body/UI font from the handoff, set here rather than in each component
     because font-family is inherited and inheritance is one of the two things
     that crosses a shadow boundary. `fieldStyles` says `font: inherit` on its
     control precisely to catch this — browsers reset the font on input and
     select, so without both halves the label would be Helvetica and the box
     beside it would be the browser's UI font.

     Size is deliberately not set: the handoff's scale runs 11px to 29px by
     role, so there is no single body size to inherit, and every component
     states its own. */
  font-family: var(--ap-font-body);
  color: var(--ap-color-text);
  margin: 0;

  /* On `body` rather than `:root` deliberately — with no background on the root
     element the browser propagates body's to the canvas, so the overscroll area
     past the top and bottom of a short page is this colour too instead of
     flashing white. Setting it on `:root` would leave body transparent and look
     identical until someone scrolls past the end on a phone.

     No `var(…, #f0ece6)` fallback on purpose. A fallback here would paper over
     a broken @import — the page would look right while every other variable in
     the file was missing. Without one, a failed import is visible in the first
     second: the background is the thing that goes. */
  background: var(--ap-color-canvas);
}

/* The one place this stylesheet touches layout, and it can only reach here:
   #outlet is in index.html, so it is light DOM and an ordinary selector
   matches it. Everything below is inside a shadow root and would not.

   A flex column with a full-height minimum is what lets a page claim the space
   under the nav — a short page would otherwise stop at its content and leave
   the canvas showing below it, which reads as the page having failed to fill. */
#outlet {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The notice index.html shows when scripting is off, which is the one case
   where nothing else on the page exists. It is light DOM by construction, since
   no component can render without JavaScript, so it has to be styled here.

   Drawn like the login card (screen 1a): centred on the surface colour, the
   heading face at the same size, the lede muted. Top-aligned below the
   breakpoint for the same reason the login page is. */
#outlet > noscript {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--ap-color-surface);

  @media (max-width: 640px) {
    align-items: start;
    padding: 40px 20px;
  }
}

.noscript-notice {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 380px;
  overflow-wrap: anywhere;

  & h1 {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  & p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ap-color-text-muted);
  }
}