/* ProAgri Client Portal - base layer.
   Reset, page frame, typography, focus, and the shared surfaces every view
   builds on (.pa-view, .pa-panel, .pa-sec-head).

   Every value here resolves against css/tokens.css. Nothing in this file may
   hardcode a colour, radius, shadow, spacing or duration. The brand tokens no
   longer move at runtime, but one wrong red still undoes the system. */

/* ── Derived inks ─────────────────────────────────────────────────────────────
   ProAgri red is a bright, light-ish red. Set as TEXT on white it sits near
   3.6:1, and on a red tint it falls further - below the 4.5:1 this app holds
   itself to. These inks mix the brand hue toward --pa-text so the colour still
   reads as red while the contrast clears AA. Use them for brand-coloured TEXT;
   use --pa-brand-primary itself only as a FILL behind
   --pa-brand-primary-contrast.

   Navy needs no such treatment - it is already dark enough to set as text - so
   --pa-accent-ink is the raw navy, named for symmetry so a view never has to
   know which of the two needs mixing. */
:root {
  --pa-brand-ink: color-mix(in srgb, var(--pa-brand-primary) 74%, var(--pa-text));
  --pa-brand-ink-strong: color-mix(in srgb, var(--pa-brand-primary) 52%, var(--pa-text));
  --pa-accent-ink: var(--pa-brand-accent);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* The UA rule for [hidden] is `display: none` at the lowest specificity, so ANY
   class that sets a display value beats it and the element renders even while
   the JS believes it is hidden. That produced a real bug here: an empty error
   banner sat visible on every wizard step because its class set `display: flex`.
   Each such class now carries its own `[hidden]` guard, but this is the backstop
   so the next flex/grid element toggled via the `hidden` property cannot
   reintroduce it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Roboto at 15px is a fairly small x-height for a reassurance product, so the
   body leading is set open (1.6) rather than the 1.5 a UI font usually takes.
   Poppins headings sit on their own much tighter leading below, and that gap
   between 1.6 body and ~1.15 display is what gives the page its rhythm: the
   headings read as compact blocks, the copy underneath as unhurried.

   The web font request in index.html loads Roboto 400/500/700 and Poppins
   400/500/600/700/800. So a 600 asked for in the BODY face has no cut to land
   on and CSS font matching resolves it UP to Roboto 700 - you silently get bold
   where you designed semibold. Anything set in the body face here therefore
   names 500 or 700 deliberately; 600 is reserved for Poppins, which ships it. */
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pa-bg);
  color: var(--pa-text);
  font-family: var(--pa-brand-font);
  font-size: var(--pa-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, not `hidden`: hidden would make body a scroll container and break
     the sticky header. Either way the page body never scrolls sideways. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* Headings are Poppins, the CI's heading face, at a real bold cut.

   This changed shape when the fonts did. The display face used to be Instrument
   Serif, which ships no bold, so headings sat on the UI face at 700 and the
   serif was reserved for a handful of named "display slots" pinned to weight
   400. Poppins has the full range, so the display face is simply what a heading
   IS - and every `font-weight: 400` still sitting next to
   --pa-brand-font-display in this codebase is a leftover from the serif and now
   renders a heading limp. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pa-brand-font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--pa-track-heading);
  /* Poppins is wide; a two-word overhang on a wrapped title is very visible in
     a geometric face. Balance the ragged edge where the browser can. */
  text-wrap: balance;
}

/* The one biggest title on a page is the only 700 in the type system. Every
   other heading is 600. Two bold weights competing in a geometric face reads as
   shouting, and this product is meant to reassure. */
h1 {
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.15;
}

/* Poppins sets optically larger than the old serif at the same px, so the
   sizes step in smaller ratios than a serif scale would: 25/20/17/15 is roughly
   1.25/1.18/1.13. A wider ratio here made every h2 look like a banner. The h1
   is the exception - it earns a real jump on wider screens, because on a phone
   32px Poppins Bold wraps a client name onto three lines. */
h1 { font-size: var(--pa-text-xl); }
h2 { font-size: var(--pa-text-lg); }
h3 { font-size: var(--pa-text-md); }
h4, h5, h6 { font-size: var(--pa-text-base); }

@media (min-width: 768px) {
  h1 { font-size: var(--pa-text-2xl); line-height: 1.12; }
}

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

table { border-collapse: collapse; }

hr {
  border: 0;
  border-top: 1px solid var(--pa-border);
  margin: var(--pa-space-5) 0;
}

::placeholder { color: var(--pa-text-faint); opacity: 1; }

::selection {
  background: var(--pa-brand-soft-strong);
  color: var(--pa-text);
}

/* ── Focus ────────────────────────────────────────────────────────────────── */
/* Never removed anywhere in this codebase.

   Three layers, because this ring has to survive on BOTH grounds. ProAgri red
   on white is a clean 3.9:1, but red on the navy chrome (header, hero, phone
   frame) is 3.03:1 - technically at the line and visually mush, since red and
   navy are close in luminance. So a light separator ring sits between the
   control and the red one: on a white panel it is invisible and you simply see
   a red ring floating at a 2px gap; on navy it cuts the red away from the
   ground and the ring reads instantly. The soft --pa-brand-ring halo outside
   it carries the eye at a glance.

   Outline (not box-shadow) does the red, because an outline is not clipped by
   an ancestor's overflow: hidden and the shadow layers would be. */
:focus-visible {
  outline: 2px solid var(--pa-brand-primary);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--pa-surface),
    0 0 0 6px var(--pa-brand-ring);
}

/* Pointer focus on a mouse click should not paint a ring. */
:focus:not(:focus-visible) { outline: none; }

/* ── Skip link ────────────────────────────────────────────────────────────── */
.pa-skip {
  position: fixed;
  top: var(--pa-space-2);
  left: var(--pa-space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--pa-space-2) var(--pa-space-4);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-brand-ink);
  border: 1px solid var(--pa-brand-primary);
  box-shadow: var(--pa-shadow-lg);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--pa-space-5)));
  transition: transform var(--pa-dur) var(--pa-ease);
}

.pa-skip:focus-visible { transform: none; }

/* ── Body lock (modals) ───────────────────────────────────────────────────── */
.pa-noscroll {
  overflow: hidden;
  /* Keeps the sticky header from jumping sideways when the scrollbar goes. */
  scrollbar-gutter: stable;
}

/* ── Screen frame ─────────────────────────────────────────────────────────── */
/* Every view's root element. Flex column so sections space themselves without
   any view having to invent margins. */
.pa-view {
  width: 100%;
  max-width: var(--pa-shell-max);
  margin: 0 auto;
  padding: var(--pa-space-4) var(--pa-space-4) var(--pa-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  min-width: 0;
}

/* Panels float on the canvas, so the air BETWEEN them still has to read as more
   than the air inside them - but only just. This was a 32px gap on 32px padding
   and the screen spent more of itself on emptiness than on content: at 1440 the
   hero, four tiles and one panel did not fit above the fold. The gap steps to
   24px and the outer padding with it. The relationship survives, the waste
   does not. */
@media (min-width: 768px) {
  .pa-view {
    padding: var(--pa-space-5) var(--pa-space-5) var(--pa-space-7);
    gap: var(--pa-space-5);
  }
}

.pa-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
}

/* Surface card. The default container for a section of a screen.

   Floating-panel language: a large corner, real depth, and NO hairline. A 1px
   border plus a shadow is the dated-intranet tell - it draws the panel as a
   boxed region first and a lifted surface second. Here the canvas is a shade
   down from the surface, so the shadow alone separates them, and the edge stays
   soft. Where a divider is genuinely needed inside a panel, that is what
   .pa-divider is for. */
.pa-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  padding: var(--pa-space-4);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow);
  min-width: 0;
}

/* The recessed variant: a panel-within-a-panel, or a section that should not
   compete. It sits INTO the surface rather than above it, so it takes no
   shadow and a smaller corner - nesting a 26px corner inside a 26px corner
   leaves an ugly crescent of parent showing at each turn. */
.pa-panel-quiet {
  background: var(--pa-surface-2);
  border-radius: var(--pa-radius);
  box-shadow: none;
}

@media (min-width: 768px) {
  .pa-panel { padding: var(--pa-space-5); gap: var(--pa-space-4); }
}

@media (max-width: 599px) {
  /* A 26px corner on a panel that is nearly viewport-wide looks like a phone
     bezel, and the padding has to come down to keep the content column usable. */
  .pa-panel {
    padding: var(--pa-space-3);
    border-radius: var(--pa-radius);
  }
}

/* Section header: title + note on the left, an optional control on the right. */
.pa-sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
}

.pa-sec-head > * { min-width: 0; }

/* Display slot: Poppins SemiBold. Rendered as an <h2> by PA.ui.sectionHead, so
   it inherits the heading rules above and only restates what it pins. */
.pa-sec-title {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  line-height: 1.25;
}

/* The note is deliberately NOT a size step below at 13px-and-muted only: it is
   also on the body face while the title above it is Poppins. That family switch
   does most of the separating, which is why the note can stay readable rather
   than shrinking to a caption. */
.pa-sec-note {
  margin-top: var(--pa-space-1);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-text-muted);
  max-width: var(--pa-reading-max);
}

/* Uppercase micro-label. Poppins at small sizes closes up badly once it is set
   in caps, so this is the one slot that tracks POSITIVE. */
.pa-eyebrow {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-text-muted);
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.pa-icon { flex: none; }

.pa-muted { color: var(--pa-text-muted); }
.pa-faint { color: var(--pa-text-faint); }
.pa-small { font-size: var(--pa-text-sm); line-height: 1.5; }
.pa-tiny { font-size: var(--pa-text-xs); line-height: 1.45; }
/* Roboto Medium. NOT 600 - see the note on `body`: 600 has no cut here and
   resolves up to Bold, which is too much emphasis for an inline value. */
.pa-strong { font-weight: 500; }
/* Poppins, for a value that should read as a display figure rather than as
   emphasised body copy - a count, a date, a total. */
.pa-display {
  font-family: var(--pa-brand-font-display);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}
.pa-nums { font-variant-numeric: tabular-nums; }
.pa-reading { max-width: var(--pa-reading-max); }

/* Wide content (tables, timelines) scrolls inside its own box - never the page. */
.pa-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.pa-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-row {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
  min-width: 0;
}

.pa-divider {
  height: 1px;
  background: var(--pa-border);
  border: 0;
  margin: 0;
}

/* ── Shared keyframes (used by components.css and shell.css) ──────────────── */
@keyframes pa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pa-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pa-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}