/* Rules the components and previews need beyond tokens.json: layout grid, element defaults, gradients, motion, responsive overrides. Values that live in tokens.json are not repeated here. */
/* from layout.css: the grid and band classes (token values for spacing live in tokens.css) */
/* The layout grid: three breakpoints, 20px gutters throughout. The container is always
   width:100% — desktop simply caps it with a max-width of 1,152px and centres it;
   tablet and mobile have no cap, so their columns divide whatever width they get. Padding is
   the horizontal inset between the container edge and the first column, applied
   inside the container rather than as an outer margin. "columns" is the number of
   tracks the content area is divided into.

   The per-breakpoint values below are the SPEC. For authoring, use the resolved
   --grid-padding and .em-container at the foot of this file: the inset is a strict
   two-value step (24 below 1024, 36 at and above it), never an interpolation. A
   clamp(24px,4vw,36px) lands on 31px at 768 and is wrong at every width between the
   two breakpoints. */

:root{
  --grid-desktop-min:1024px;
  --grid-desktop-container-max:1152px;
  --grid-desktop-columns:12; /* @kind other */
  --grid-desktop-gutter:20px;
  --grid-desktop-padding:36px;

  --grid-tablet-min:768px;
  --grid-tablet-max:1023px;
  --grid-tablet-columns:6; /* @kind other */
  --grid-tablet-gutter:20px;
  --grid-tablet-padding:24px;

  --grid-mobile-min:320px;
  --grid-mobile-max:767px;
  --grid-mobile-default:375px;
  --grid-mobile-columns:4; /* @kind other */
  --grid-mobile-gutter:20px;
  --grid-mobile-padding:24px;

  /* The resolved inset: write padding-inline:var(--grid-padding) and get the spec. */
  --grid-padding:var(--grid-mobile-padding);
}
@media (min-width:1024px){:root{--grid-padding:var(--grid-desktop-padding)}}

/* The page container. max-width sizes the CONTENT box, so this must be border-box or a
   1,152 cap plus 36px insets renders a 1,224px band — 72px wider than the spec. */
.em-container{box-sizing:border-box;width:100%;max-width:var(--grid-desktop-container-max);margin-inline:auto;padding-inline:var(--grid-padding)}

/* Vertical band rhythm — the same decision as the horizontal inset, on the other axis,
   and a strict step for the same reason: a clamp between two ramp steps computes values
   that are not on the ramp at all (clamp(64px,8vw,96px) is 80px at a 1000px viewport,
   72px at 900px). Both steps are ramp values: --space-8xl and --space-10xl. */
:root{--section-padding-y:var(--space-8xl)}
@media (min-width:1024px){:root{--section-padding-y:var(--space-10xl)}}

/* A band and its container are two elements, never one. The band paints the ground edge
   to edge and owns the vertical rhythm; the container inside it owns the measure and the
   inset. Collapsing them breaks the common case — a full-bleed green band with centred
   copy needs its fill to run past the 1,152 cap. Nest them:
     <section class="em-section" data-surface="muted"><div class="em-container">…  */
/* The dialog panel's inset — the same strict-step decision again, for a component that
   writes inline styles and so cannot carry its own media query. Both steps are ramp
   values; a clamp between them would land the panel on 45px at a 900px viewport. */
:root{--modal-padding:var(--space-3xl)}
@media (min-width:1024px){:root{--modal-padding:var(--space-6xl)}}

.em-section{padding-block:var(--section-padding-y)}
.em-section[data-surface="page"]{background-color:var(--surface-page)}
.em-section[data-surface="muted"]{background-color:var(--surface-muted)}
.em-section[data-surface="brand"]{background-color:var(--surface-brand);color:var(--text-on-brand)}

/* Two adjacent bands on the SAME ground collapse to one step. The boundary between them
   is invisible, so keeping both reads as one 256px hole rather than as two sections. A
   change of ground keeps both steps — the colour change earns the full pair. Declaring
   data-surface is what opts a band in, and it is also what paints it, so the attribute
   can't disagree with the fill. */
.em-section[data-surface="page"]+.em-section[data-surface="page"],
.em-section[data-surface="muted"]+.em-section[data-surface="muted"],
.em-section[data-surface="brand"]+.em-section[data-surface="brand"]{padding-block-start:0}

/* The card grid. `repeat(auto-fit,minmax(300px,1fr))` lets the track minimum choose the
   column count, which packs as many as fit and dumps the remainder on the last row: four
   cards in a 1,152 container render 3 + 1, and that reads as a mistake rather than a
   layout. So the column count is chosen by the NUMBER OF CARDS, and the track minimum
   goes back to doing the only job it is good at — collapsing the grid on small widths.

   Desktop counts: 1→1 · 2→2 · 4→2 (2x2) · 8→4 · everything else→3. Three tracks is the
   default because 3, 6 and 9 fill it exactly and 5 reads better as 3 + 2 than as
   2 + 2 + 1. Seven is the one count with no good answer — add one or cut one. Anything
   unusual sets grid-template-columns inline, which beats every rule here. */
.em-grid{display:grid;gap:var(--grid-desktop-gutter);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.em-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .em-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .em-grid:has(>:last-child:nth-child(1)){grid-template-columns:minmax(0,1fr)}
  .em-grid:has(>:last-child:nth-child(2)),.em-grid:has(>:last-child:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .em-grid:has(>:last-child:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* from semantic.css: element defaults, and the interaction values that are not plain colours */
:root{--focus-ring:0 0 0 4px rgba(0,0,0,0.1);--shadow-focus:inset 0 0 0 1px var(--focus-border),var(--focus-ring)}
a{color:var(--text-brand);text-decoration:none}
a:hover{text-decoration:underline}
:where(p,li,dd,blockquote,figcaption) a{text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:from-font}

input,textarea,select,button{font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--gray-700);opacity:1}
input[type="search"]::-webkit-search-cancel-button{display:none}

/* from motion.css */
/* Motion. One curve and one duration cover almost everything: the default is a
   symmetric ease-in-out, which suits state changes where an element stays put
   and only its appearance shifts — hover fills, focus rings, border colours,
   opacity. Entering elements decelerate (--ease-out) and exiting ones
   accelerate (--ease-in), so a thing arriving feels caught rather than dropped.
   Durations are deliberately few: fast for small immediate feedback (checkbox,
   radio, tab), default for state changes, slow for larger surfaces
   travelling further. If a transition needs a value between these, the motion
   is probably doing too much. --transition-default is the shorthand tail —
   transition:background var(--transition-default). */
:root{
  --ease-default:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
  --ease-in:cubic-bezier(0.4,0,1,1); /* @kind other */

  --duration-fast:0.15s; /* @kind other */
  --duration-default:0.3s; /* @kind other */
  --duration-slow:0.5s; /* @kind other */

  --transition-default:var(--duration-default) var(--ease-default); /* @kind other */
}

/* from gradients.css */
/* Two gradient families, gray and brand green, each built only from steps of its own
   ramp so a gradient can never introduce a colour the palette does not have. Seven per
   family: one conic (600 fading to transparent) and six linear pairings that stay
   within two or three steps of each other, keeping the transition shallow — these are
   surfaces and section grounds, not decoration. Angles are fixed per token; pick a
   gradient rather than re-angling one. */

:root{
  /* Gray gradients */
  --gradient-gray-conic:conic-gradient(from 262.152deg at 50% 50%,var(--gray-600) 0deg,rgba(107,113,109,0) 360deg); /* @kind color */ /* gray-600 conic → transparent */
  --gradient-gray-600-500:linear-gradient(90deg,var(--gray-600),var(--gray-500)); /* @kind color */ /* gray-600 → gray-500, 90deg */
  --gradient-gray-700-600:linear-gradient(45deg,var(--gray-700),var(--gray-600)); /* @kind color */ /* gray-700 → gray-600, 45deg */
  --gradient-gray-800-600-45:linear-gradient(45deg,var(--gray-800),var(--gray-600)); /* @kind color */ /* gray-800 → gray-600, 45deg */
  --gradient-gray-800-600-90:linear-gradient(90deg,var(--gray-800),var(--gray-600)); /* @kind color */ /* gray-800 → gray-600, 90deg */
  --gradient-gray-800-700:linear-gradient(26.5deg,var(--gray-800),var(--gray-700)); /* @kind color */ /* gray-800 → gray-700, 26.5deg */
  --gradient-gray-900-600:linear-gradient(45deg,var(--gray-900),var(--gray-600)); /* @kind color */ /* gray-900 → gray-600, 45deg */
  /* EM Brand gradients */
  --gradient-brand-conic:conic-gradient(from 262.152deg at 50% 50%,var(--brand-600) 0deg,rgba(32,160,71,0) 360deg); /* @kind color */ /* brand-600 conic → transparent */
  --gradient-brand-600-500:linear-gradient(90deg,var(--brand-600),var(--brand-500)); /* @kind color */ /* brand-600 → brand-500, 90deg */
  --gradient-brand-700-600:linear-gradient(45deg,var(--brand-700),var(--brand-600)); /* @kind color */ /* brand-700 → brand-600, 45deg */
  --gradient-brand-800-600-45:linear-gradient(45deg,var(--brand-800),var(--brand-600)); /* @kind color */ /* brand-800 → brand-600, 45deg */
  --gradient-brand-800-600-90:linear-gradient(90deg,var(--brand-800),var(--brand-600)); /* @kind color */ /* brand-800 → brand-600, 90deg */
  --gradient-brand-800-700:linear-gradient(26.5deg,var(--brand-800),var(--brand-700)); /* @kind color */ /* brand-800 → brand-700, 26.5deg */
  --gradient-brand-900-600:linear-gradient(45deg,var(--brand-900),var(--brand-600)); /* @kind color */ /* brand-900 → brand-600, 45deg */
  /* the 20%-white veil laid over any solid accent on hover (buttons) */
  --gradient-hover-veil:linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)); /* @kind color */
}

/* from typography.css: the mobile reading size, and the size tokens the components read */
:root{
  /* display */
  --text-display-size:80px;
  --text-display-lh:90%;

  /* h1 */
  --text-h1-size:64px;
  --text-h1-lh:90%;

  /* h2 */
  --text-h2-size:56px;
  --text-h2-lh:100%;

  /* h3 */
  --text-h3-size:48px;
  --text-h3-lh:110%;

  /* h4 */
  --text-h4-size:40px;
  --text-h4-lh:110%;

  /* h5 */
  --text-h5-size:32px;
  --text-h5-lh:110%;

  /* subheading large */
  --text-sub-lg-size:24px;
  --text-sub-lg-lh:120%;

  /* subheading small */
  --text-sub-sm-size:20px;
  --text-sub-sm-lh:120%;

  /* body */
  --text-body-size:18px;
  --text-body-lh:140%;

  /* component title — same size as body but fixed; titles are labels, not reading copy, so they do not shrink on mobile */
  --text-title-size:18px;
  --text-title-lh:140%;

  /* small */
  --text-small-size:16px;
  --text-small-lh:140%;

  /* meta */
  --text-meta-size:14px;
  --text-meta-lh:140%;

  /* xs */
  --text-xs-size:12px;
  --text-xs-lh:140%;

  /* weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* tracking — the one exception to the 0 rule: uppercase pill labels (Eyebrow, and the
     tag and label pills on ArticleCard and SplitCard). Caps at 12-14px set solid read as
     a single clot; 0.5px is what the theme sets on them. Nothing else takes tracking. */
  --tracking-caps:0.5px;
}
@media (max-width:767px){:root{--text-body-size:16px}.em-body,.em-body-bold{font-size:16px}}