/* ProAgri Client Portal - shell layer.
   The frame js/app.js renders on every route: demo bar, header, brand, nav,
   client name, burger + mobile panel, footer - plus the home overview (hero,
   tiles, recent activity).

   THE SHAPE LANGUAGE IS FLOATING PANELS, and that is the whole point of this
   file. The first pass painted the CI onto the old geometry: a full-bleed navy
   band butting against the viewport, square-ish corners, white cards outlined
   in 1px. Correct colours, dated shape - a corporate intranet in brand paint.

   Here nothing butts against the edge. The canvas (--pa-bg) is a shade down
   from the surfaces, and every large element - the header bar, the hero, the
   tiles, the footer - is a rounded panel sitting ON that canvas with air around
   it and depth from shadow rather than from hairlines. Controls are pills.

   Colour is unchanged and stays unchanged: navy is chrome, red is action,
   yellow is "waiting on you", black is ink. The one deliberate colour edit is
   that the 3px red rule under the old header is gone - a full-width rule is a
   BAND device, and there is no band any more. Red keeps its two honest homes in
   the chrome instead: the active nav pill on desktop, and the burger (the only
   action in the header) on mobile. */

/* ── Page frame ───────────────────────────────────────────────────────────── */
#pa-root {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.pa-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────────────────
   Two elements doing two jobs.

   .pa-header is the STICKY GUTTER: a transparent-looking strip of canvas that
   holds the floating bar off the viewport edge and, because it is painted
   --pa-bg, cleanly swallows whatever scrolls up behind it. Without that fill
   the page would be visible in the 16px of air above and below a "floating"
   bar, which reads as a rendering fault rather than as float.

   .pa-header-inner is the BAR: the navy panel itself, capped at --pa-shell-max
   and rounded to --pa-radius-xl. At the 64px header height that radius makes a
   stadium, which is exactly the intended reference shape - a pill of chrome
   resting on the page.

   The horizontal inset matches .pa-view's padding rather than --pa-shell-inset,
   so the bar's edges line up with the hero and the tiles below it at every
   width. --pa-shell-inset owns the vertical air, where nothing has to align. */
.pa-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: var(--pa-shell-inset) var(--pa-space-4);
  background: var(--pa-bg);
}

/* A soft gradient was tried below the gutter, to dissolve content into it
   rather than slice it. On a white card it reads as intended; over the navy
   hero - the one panel that actually scrolls under the header on this screen -
   a light-to-transparent wash on a dark ground is a grey smear. The gutter is
   the canvas colour, so a clean edge simply reads as content passing under the
   chrome, which is what it is. No fade. */

.pa-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pa-space-4);
  width: 100%;
  /* .pa-view (base.css) caps at --pa-shell-max and then pads INSIDE that cap,
     so a panel in the page body starts one padding step in from where a bar
     capped at the raw --pa-shell-max would. Subtracting the same padding here
     is what makes the bar's left and right edges land exactly on the hero's and
     the tiles' at every width - and misaligned edges are the fastest way to
     make a floating layout look accidental. */
  max-width: calc(var(--pa-shell-max) - var(--pa-space-4) * 2);
  min-height: var(--pa-header-h);
  margin: 0 auto;
  padding: 0 var(--pa-space-5);
  background: var(--pa-brand-accent);
  color: var(--pa-on-dark);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-lg);
}

@media (min-width: 768px) {
  .pa-header { padding-left: var(--pa-space-5); padding-right: var(--pa-space-5); }
  .pa-header-inner {
    max-width: calc(var(--pa-shell-max) - var(--pa-space-5) * 2);
  }
}

/* ── Brand ────────────────────────────────────────────────────────────────────
   The guidelines require 2X clear space around the mark on every side, where 1X
   is the height of the counter inside the "P". --pa-logo-clear holds that value
   and it is enforced here as padding rather than left to whatever gap the flex
   row happens to produce, so the rule survives someone tightening the header
   later. The bar's own left padding buys the mark clearance from the stadium
   curve on top of that. */
.pa-brand {
  display: flex;
  align-items: center;
  gap: var(--pa-logo-clear);
  flex: none;
  min-width: 0;
  border-radius: var(--pa-radius-pill);
  padding: var(--pa-logo-clear) var(--pa-logo-clear) var(--pa-logo-clear) 0;
}

.pa-logo {
  height: var(--pa-logo-h);
  max-height: var(--pa-logo-h);
  width: auto;
  object-fit: contain;
}

.pa-brand-sep {
  width: 1px;
  height: 22px;
  flex: none;
  background: color-mix(in srgb, var(--pa-on-dark) 30%, transparent);
}

.pa-brand-sub {
  font-size: var(--pa-text-sm);
  font-weight: 500;
  color: var(--pa-on-dark-muted);
  white-space: nowrap;
}

/* ── Nav ──────────────────────────────────────────────────────────────────────
   Floating chips inside the bar. The nav is a shrinkable flex item in a
   fixed-width band (--pa-shell-max), so it CAN be handed less width than its
   links need; its children are nowrap and never shrink, so without a scroll
   container the last link would paint outside the nav box. `overflow-x: auto`
   makes the shrink real. The desktop band rules below then reclaim enough
   natural width that this net does not actually engage down to 1024. The
   padding keeps a focus ring off the scroll box's edge. */
.pa-nav {
  display: flex;
  align-items: center;
  gap: var(--pa-space-1);
  flex: 0 1 auto;
  min-width: 0;
  /* Pushed to the trailing edge. The nav used to be followed by the client name
     chip, which is what held the right of the bar; with that gone the nav sat
     mid-bar against a stretch of empty navy. Mark left, nav right is also the
     arrangement the shape language this shell borrows from uses. On mobile the
     nav becomes an absolutely positioned panel, so this has no effect there. */
  margin-left: auto;
  padding: var(--pa-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pa-nav::-webkit-scrollbar { display: none; }

.pa-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  flex: none;
  height: 40px;
  padding: 0 var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  color: var(--pa-on-dark-muted);
  font-size: var(--pa-text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    color var(--pa-dur) var(--pa-ease),
    box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-nav-link:hover {
  background: color-mix(in srgb, var(--pa-on-dark) 12%, transparent);
  color: var(--pa-on-dark);
}

/* The active item is the one solid red shape in the header, and it is a pill
   because every control in this app is. On navy, red at full strength clears AA
   against white text, which is why this can be a fill rather than the pale
   brand tint the old light header had to use. */
.pa-nav-link.is-active {
  background: var(--pa-brand-primary);
  color: var(--pa-brand-primary-contrast);
  font-weight: 600;
  box-shadow: var(--pa-shadow-sm);
}

.pa-nav-link.is-active:hover {
  background: var(--pa-brand-primary-hover);
  color: var(--pa-brand-primary-contrast);
}

.pa-nav-link.is-active .pa-icon { color: var(--pa-brand-primary-contrast); }

.pa-nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--pa-space-1);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-primary);
  color: var(--pa-brand-primary-contrast);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A red count on a red pill is invisible. On the active item it inverts, and
   the numeral takes --pa-brand-ink so red-on-white still clears AA. */
.pa-nav-link.is-active .pa-nav-count {
  background: var(--pa-brand-primary-contrast);
  color: var(--pa-brand-ink);
}

/* ── Header right: the client's name, the demo switcher, the burger ────────── */
.pa-header-right {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  /* No margin-left: auto here. It used to be what pushed this block to the
     trailing edge, back when it held the client name chip. The nav now carries
     that auto margin, and TWO auto margins in one flex row split the free space
     between them rather than sending everything one way - which left the nav
     floating 132px short of the edge at 1440. */
  flex: none;
}

/* The client's name, and nothing else about them. It occupies the slot the
   client's own LOGO used to sit in, which is the whole change in one element:
   the portal names its client rather than wearing them. Two lines, because the
   label is what stops "Mahindra Tractors SA" reading as the site's own name.
   Inside a floating bar a hard divider rule is the wrong device, so the block
   is set on its own tinted pill instead. */
.pa-burger { display: none; }

/* ── Desktop band: buy the nav the width it needs ─────────────────────────────
   The bar is capped at --pa-shell-max, so the three blocks compete for a FIXED
   content width at every viewport from 1280 up - which is why the old overflow
   reproduced identically at 1280, 1440 and 1920. Two rules give the width back:

   - Nav icons come off. In a horizontal bar the icon duplicates a label that is
     already fully legible, at ~25px a link. They stay in the mobile panel
     below, where the rows are wide and the icon earns its place.
   - The brand sub-label and separator come off, since the nav is in the bar
     competing for the same space (they return below 1024 when it collapses).

   THE BAND STARTS AT 1200, and that number moved in this pass. Two things ate
   the width the old 1024 breakpoint relied on: the bar is now capped one
   .pa-view padding step narrower on each side so its edges line up with the
   panels below it, and the nav items are pills. Measured, the six links need
   659px; the bar hands the nav 554px at 1024 and 674px at 1200. So between 1024
   and 1199 the nav would have had to scroll - reachable, but a link half off
   the edge with no affordance is not honest navigation, and it is the failure
   the header already had at those widths. Below 1200 the burger owns it. */
@media (min-width: 1200px) {
  .pa-nav .pa-icon { display: none; }
  .pa-brand-sep,
  .pa-brand-sub { display: none; }
}

/* The first widths that show the bar have the least room in it, so the links
   and the client block are trimmed until the viewport can pay for them. */
@media (min-width: 1200px) and (max-width: 1359px) {
  .pa-header-inner { gap: var(--pa-space-2); }
  .pa-nav-link { padding: 0 var(--pa-space-2); }
}

/* ── Mobile nav: a floating panel hung off the bar ────────────────────────────
   It is positioned against .pa-header-inner, not against the viewport, so it
   tracks the bar exactly - including on the demo deployment, where a banner
   above the header used to push the bar down and leave a viewport-anchored
   panel overlapping it. It is its own rounded card with its own shadow, which
   is the same floating language as everything else on the canvas.

   The links live on white here, so their on-dark colours have to be restated:
   --pa-on-dark-muted on --pa-surface is a ~1.3:1 ghost. */
@media (max-width: 1199px) {
  .pa-burger {
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: var(--pa-radius-pill);
  }

  /* Red is action, and on a phone the burger is the only action the chrome
     offers - the nav it opens is otherwise invisible. This is where the red
     that used to sit in the 3px rule goes at mobile widths. */
  .pa-header .pa-burger {
    background: var(--pa-brand-primary);
    color: var(--pa-brand-primary-contrast);
    box-shadow: var(--pa-shadow-sm);
  }

  .pa-header .pa-burger:hover:not(:disabled) {
    background: var(--pa-brand-primary-hover);
    color: var(--pa-brand-primary-contrast);
  }

  .pa-nav {
    position: absolute;
    top: calc(100% + var(--pa-space-2));
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pa-space-1);
    max-height: calc(100dvh - var(--pa-header-h) - var(--pa-space-7));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--pa-space-3);
    background: var(--pa-surface);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition:
      opacity var(--pa-dur) var(--pa-ease),
      transform var(--pa-dur) var(--pa-ease),
      visibility var(--pa-dur) var(--pa-ease);
  }

  body.pa-nav-open .pa-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .pa-nav-link {
    height: 48px;
    justify-content: flex-start;
    padding: 0 var(--pa-space-4);
    border-radius: var(--pa-radius);
    font-size: var(--pa-text-base);
    color: var(--pa-text);
  }

  .pa-nav-link:hover {
    background: var(--pa-surface-3);
    color: var(--pa-text);
  }

  .pa-nav-link .pa-icon { color: var(--pa-accent-ink); }

  .pa-nav-link.is-active,
  .pa-nav-link.is-active:hover {
    background: var(--pa-brand-primary);
    color: var(--pa-brand-primary-contrast);
  }

  .pa-nav-count { margin-left: auto; }

  /* Out of the bar, the panel rows are wide: the icons come back. */
  .pa-nav .pa-icon { display: block; }
}

@media (max-width: 599px) {
  .pa-header-inner {
    gap: var(--pa-space-2);
    padding: 0 var(--pa-space-2) 0 var(--pa-space-4);
  }
  .pa-brand { flex: 0 1 auto; overflow: hidden; }
  .pa-brand-sep,
  .pa-brand-sub { display: none; }
}

/* ── Footer ───────────────────────────────────────────────────────────────────
   Navy, matching the header - and floating, matching everything else.

   A full-bleed navy slab was the alternative and it is the wrong one here: it
   would be the only element on the page still touching the viewport edge, and a
   single edge-to-edge band at the bottom re-asserts exactly the intranet
   reading this redesign removes. Floated, the canvas frames the page on all
   four sides and the footer reads as the closing card in a stack of cards. */
.pa-footer {
  margin-top: auto;
  padding: var(--pa-space-6) var(--pa-space-4)
           calc(var(--pa-shell-inset) + env(safe-area-inset-bottom, 0px));
}

.pa-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-4);
  flex-wrap: wrap;
  width: 100%;
  /* Same cap as the header bar, for the same reason: its edges have to agree
     with the panels above it. */
  max-width: calc(var(--pa-shell-max) - var(--pa-space-4) * 2);
  margin: 0 auto;
  /* One mark, no copy. It was carrying a support line and was padded for two
     rows of content it no longer has. */
  padding: var(--pa-space-3) var(--pa-space-6);
  background: var(--pa-brand-accent);
  color: var(--pa-on-dark);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow);
}

@media (min-width: 768px) {
  .pa-footer { padding-left: var(--pa-space-5); padding-right: var(--pa-space-5); }
  .pa-footer-inner { max-width: calc(var(--pa-shell-max) - var(--pa-space-5) * 2); }
}

@media (max-width: 599px) {
  .pa-footer-inner {
    justify-content: flex-start;
    padding: var(--pa-space-3) var(--pa-space-5);
  }
}

/* The mark here is white-only: the guidelines forbid black on a dark ground and
   permit no other colour, and the header already carries the lock-up. */
.pa-footer-brand { display: flex; align-items: center; padding: var(--pa-logo-clear) 0; }

.pa-footer-brand .pa-logo {
  height: 26px;
  max-height: 26px;
  opacity: 0.92;
}

/* ── Home: hero ───────────────────────────────────────────────────────────────
   The largest panel on the page and the only screen element that is about the
   client rather than about their work: their name, in Poppins Bold, at the top
   of the type scale.

   The gradient is the sanctioned red-into-navy one (guidelines p.17), but it is
   navy-DOMINANT and the red is a bloom in the top-right corner rather than a
   diagonal wash across the whole panel. Two reasons, and the second is the hard
   one:

   1. Navy is chrome and red is action. A panel that is half red at full
      strength spends the accent on decoration.
   2. CONTRAST. White on ProAgri red is ~3.4:1 - fine under a 40px bold title,
      not fine under a 17px note. The old wash put the eyebrow and the note over
      red. Blooming the red into the empty right-hand corner keeps every line of
      copy on navy at ~11.7:1, and the graphic lives in the corner where the
      colour is.

   background-color is navy underneath, so if a gradient or color-mix ever fails
   to parse the fallback is still a brand surface and never white on white. */
.pa-hero {
  position: relative;
  overflow: hidden;
  padding: var(--pa-space-6) var(--pa-space-6);
  background-color: var(--pa-brand-accent);
  background-image:
    radial-gradient(58% 112% at 99% 0%,
      var(--pa-red) 0%,
      color-mix(in srgb, var(--pa-red) 52%, transparent) 32%,
      transparent 66%),
    linear-gradient(128deg,
      color-mix(in srgb, var(--pa-navy) 90%, var(--pa-black)) 0%,
      var(--pa-navy) 60%);
  color: var(--pa-on-dark);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-lg);
  animation: pa-rise-in var(--pa-dur-slow) var(--pa-ease) backwards;
}

/* The matrix, oversized and bled off the corner the red bloom sits in, so the
   graphic and the colour are one gesture instead of two. The guidelines allow
   the icon as a graphic element in its own right, and it is what stops the hero
   being a coloured rectangle. It is a background, so it is aria-hidden by
   construction, and it never sits under the copy.

   THE url() STAYS RELATIVE. `.css` is not rewritten under BASE_PATH, so a
   root-absolute path silently 404s on the subpath deployment. */
.pa-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--pa-space-6) * -1.6);
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  background: url('../img/proagri/proagri-matrix.svg') no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}

/* A single soft highlight along the top edge. On a large dark panel this is the
   difference between "filled rectangle" and "lit surface", and it costs no
   colour: it is the on-dark ink at 14%. */
.pa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pa-on-dark) 22%, transparent);
  pointer-events: none;
}

.pa-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pa-space-3);
  max-width: var(--pa-reading-max);
}

.pa-hero-eyebrow {
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pa-on-dark) 76%, transparent);
}

/* Poppins Bold. The client's name is the largest type on the page, which is the
   point: it is the only thing here that is theirs. */
.pa-hero-title {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-2xl);
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.06;
  text-wrap: balance;
}

.pa-hero-note {
  font-size: var(--pa-text-md);
  color: var(--pa-on-dark-muted);
}

.pa-hero-count { display: flex; margin-top: var(--pa-space-2); }

/* Badges on the hero sit on a dark panel, and the page-level variants are all
   pale tints built for paper: on navy they disappear. Both are restated solid
   here so the count is the second thing read after the client's name. */
.pa-hero .pa-badge-action {
  background: var(--pa-yellow);
  border-color: var(--pa-yellow);
  color: var(--pa-black);
}

.pa-hero .pa-badge-approved {
  background: color-mix(in srgb, var(--pa-on-dark) 16%, transparent);
  border-color: color-mix(in srgb, var(--pa-on-dark) 36%, transparent);
  color: var(--pa-on-dark);
}

@media (min-width: 768px) {
  .pa-hero { padding: var(--pa-space-7) var(--pa-space-7); }
  .pa-hero-title { font-size: var(--pa-text-3xl); }
}

@media (max-width: 599px) {
  .pa-hero {
    padding: var(--pa-space-5) var(--pa-space-4);
    border-radius: var(--pa-radius-lg);
  }
  .pa-hero-title { font-size: var(--pa-text-xl); }
  /* The copy runs the full width of the panel at this size, so the bloom is
     pushed almost entirely off the corner and the matrix comes off: either one
     would sit behind a line of text. */
  .pa-hero {
    background-image:
      radial-gradient(70% 90% at 116% -8%,
        var(--pa-red) 0%,
        color-mix(in srgb, var(--pa-red) 50%, transparent) 36%,
        transparent 72%),
      linear-gradient(150deg,
        color-mix(in srgb, var(--pa-red) 16%, var(--pa-navy)) 0%,
        var(--pa-navy) 62%);
  }
  .pa-hero::after { display: none; }
}

/* ── Home: tiles ──────────────────────────────────────────────────────────────
   Four soft cards, and the work here was making them stop being four identical
   white rectangles.

   The composition, not the container, is what does it. app.js emits icon,
   count, label, note, badge in a stack; grid areas lift the count out of that
   stack and set it opposite the icon on a header row, so each tile opens on a
   navy chip and a large navy numeral facing each other, then reads down into
   its label and note, and closes on a status badge with a chevron affordance in
   the opposite corner. That is a designed card rather than a list with a border
   round it.

   They are also RANKED. A tile whose badge says "All clear" has nothing in it
   for the client, so it recedes onto the quiet surface with a faint numeral;
   the tiles that want something stay white, crisp and shadowed. Four tiles that
   all need action still look alike - correctly, because they are alike. */
.pa-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-3);
}

@media (min-width: 640px) {
  .pa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four across at 1200, not 1024 - the same width the nav bar needs. At 1024 a
   quarter of the shell is ~230px, which wraps both the label and the note and
   leaves the count crowding the icon; the tile stops being a composition and
   becomes a squeeze. Below 1200 the whole shell is in its compact mode: burger
   nav, 2x2 tiles. */
@media (min-width: 1200px) {
  .pa-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pa-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    'icon  count'
    'label label'
    'note  note'
    'badge badge';
  column-gap: var(--pa-space-3);
  row-gap: 0;
  height: 100%;
  padding: var(--pa-space-4);
  background: var(--pa-surface);
  /* Hairline, not an outline: the depth is the shadow's job. It exists only so
     the card still has an edge for anyone in forced-colours or with shadows
     suppressed. */
  border: 1px solid color-mix(in srgb, var(--pa-border) 60%, transparent);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow);
  /* Every property that moves on hover is listed. border-color was missing, so
     the hairline snapped while everything around it eased. */
  transition:
    transform var(--pa-dur) var(--pa-ease),
    box-shadow var(--pa-dur) var(--pa-ease),
    border-color var(--pa-dur) var(--pa-ease),
    background-color var(--pa-dur) var(--pa-ease);
  /* `backwards` (not `both`): the final frame must not out-rank the hover
     transform once the load-in has finished. */
  animation: pa-rise-in var(--pa-dur-fast) var(--pa-ease) backwards;
}

.pa-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--pa-shadow-lg);
  border-color: var(--pa-accent-ring);
  background: var(--pa-surface);
}

.pa-tile:active { transform: translateY(-1px); }

/* Load-in stagger, capped at 6 children. Delays are expressed against
   --pa-dur-fast so prefers-reduced-motion collapses them to nothing along with
   the duration. */
.pa-tile:nth-child(1) { animation-delay: 0ms; }
.pa-tile:nth-child(2) { animation-delay: calc(var(--pa-dur-fast) * 0.25); }
.pa-tile:nth-child(3) { animation-delay: calc(var(--pa-dur-fast) * 0.5); }
.pa-tile:nth-child(4) { animation-delay: calc(var(--pa-dur-fast) * 0.75); }
.pa-tile:nth-child(5) { animation-delay: calc(var(--pa-dur-fast) * 1); }
.pa-tile:nth-child(6) { animation-delay: calc(var(--pa-dur-fast) * 1.25); }

/* The settled tiles. Quiet surface, no lift, faint numeral - they are still
   fully legible and still clickable, they simply stop competing with the ones
   that want something. */
.pa-tile:has(.pa-badge-approved) {
  background: var(--pa-surface-2);
  box-shadow: var(--pa-shadow-sm);
}

.pa-tile:has(.pa-badge-approved) .pa-tile-count { color: var(--pa-text-faint); }

.pa-tile:has(.pa-badge-approved) .pa-tile-icon {
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
}

.pa-tile:has(.pa-badge-approved):hover { box-shadow: var(--pa-shadow); }

.pa-tile-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pa-radius-sm);
  /* Navy, not red. On this screen red belongs to the nav, to counts that need
     attention and to primary buttons; a section icon is chrome, and chrome is
     navy. */
  background: var(--pa-accent-soft-strong);
  color: var(--pa-accent-ink);
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    color var(--pa-dur) var(--pa-ease);
}

.pa-tile:hover .pa-tile-icon {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-tile-count {
  grid-area: count;
  align-self: center;
  justify-self: end;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--pa-track-tight);
  color: var(--pa-accent-ink);
  font-variant-numeric: tabular-nums;
}

.pa-tile-label {
  grid-area: label;
  margin-top: var(--pa-space-5);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  line-height: 1.25;
}

.pa-tile-note {
  grid-area: note;
  margin-top: var(--pa-space-1);
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

.pa-tile .pa-badge {
  grid-area: badge;
  align-self: end;
  justify-self: start;
  /* The chevron is a real sibling in this same row now, so the badge no longer
     needs a hard right margin to dodge an absolutely-positioned one. */
  margin-top: var(--pa-space-4);
}

/* The go affordance.

   This was two pseudo-elements: ::after drew the chip, ::before drew the glyph
   as a rotated border-corner, both absolutely positioned, because at the time
   app.js could not be touched. It never centred properly - the visual mass of a
   rotated corner is not its box centre, so the arrow always sat low and right
   inside its circle no matter what the offsets said.

   app.js now emits a real .pa-tile-go holding the real chevron icon, so this is
   a flex centre and it is exact. */
.pa-tile-go {
  grid-area: badge;
  justify-self: end;
  align-self: end;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  color: var(--pa-accent-ink);
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    color var(--pa-dur) var(--pa-ease),
    transform var(--pa-dur) var(--pa-ease);
}

.pa-tile:hover .pa-tile-go {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  transform: translateX(3px);
}

/* ── Home: recent activity ────────────────────────────────────────────────────
   Rows, not a ruled table. The panel around them is already a card, so hairline
   separators inside it are a second border system doing the same job; spacing
   and a quiet row surface separate them instead, and each row picks up a hover
   because the list sits in a product where everything else is touchable. */
.pa-activity {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-activity-row {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-4);
  background: var(--pa-surface-2);
  border-radius: var(--pa-radius-sm);
  font-size: var(--pa-text-sm);
  transition: background-color var(--pa-dur) var(--pa-ease);
}

.pa-activity-row:hover { background: var(--pa-surface-3); }

.pa-activity-key {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--pa-text);
  overflow-wrap: anywhere;
}

.pa-activity-time {
  flex: none;
  font-size: var(--pa-text-xs);
  color: var(--pa-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .pa-activity-row { flex-wrap: wrap; }
  .pa-activity-key { flex-basis: 100%; order: 3; }
}

/* ── Demo bar ─────────────────────────────────────────────────────────────────
   A SYSTEM LABEL, not a piece of the product. It was navy, which made it look
   like a second header and put a third navy surface on a page that already has
   two; a client on the demo could reasonably read it as portal chrome.

   So it is black - the CI's ink, the one corporate colour that is not doing a
   product job anywhere else on this screen - full-bleed, thin, and set in small
   caps at the caption size. It sits ABOVE the sticky header and scrolls away
   with the page, so it labels the deployment without permanently spending
   vertical space on a phone. */
.pa-demo-bar {
  background: var(--pa-black);
  color: var(--pa-on-dark);
}

.pa-demo-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pa-space-2) var(--pa-space-3);
  width: 100%;
  max-width: calc(var(--pa-shell-max) - var(--pa-space-4) * 2);
  margin: 0 auto;
  padding: var(--pa-space-2) var(--pa-space-4);
  font-size: var(--pa-text-xs);
}

@media (min-width: 768px) {
  .pa-demo-bar-inner {
    max-width: calc(var(--pa-shell-max) - var(--pa-space-5) * 2);
    padding-left: var(--pa-space-5);
    padding-right: var(--pa-space-5);
  }
}

.pa-demo-tag {
  flex: none;
  padding: 3px var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: color-mix(in srgb, var(--pa-on-dark) 16%, transparent);
  color: var(--pa-on-dark);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  font-size: var(--pa-text-xs);
  line-height: 1.3;
}

.pa-demo-note {
  flex: 1 1 auto;
  min-width: 0;
  color: color-mix(in srgb, var(--pa-on-dark) 72%, transparent);
}

.pa-demo-links {
  display: flex;
  flex: none;
  gap: var(--pa-space-3);
}

.pa-demo-link {
  color: var(--pa-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: opacity var(--pa-dur) var(--pa-ease);
}

.pa-demo-link:hover { opacity: 0.75; }

@media (max-width: 639px) {
  .pa-demo-note { flex-basis: 100%; order: 3; }
}