/* ==========================================================================
   Australian Welding Institute: component styles
   Mobile first. Breakpoints at 48em (768), 64em (1024) and 90em (1440).
   Every colour resolves to a token in tokens.css. No hard coded hex here
   except pure white and pure black overlays.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--awi-page-bg);
  color: var(--awi-text);
  font-family: var(--awi-font-body);
  font-size: var(--awi-step-0);
  line-height: var(--awi-leading-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ------------------------------------------------------------ 2. Headings */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--awi-font-heading);
  color: var(--awi-deep-steel);
  font-weight: 600;
  line-height: var(--awi-leading-snug);
  margin: 0 0 var(--awi-space-4);
  text-wrap: balance;
}
h1 { font-size: var(--awi-step-4); line-height: var(--awi-leading-tight); letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: var(--awi-step-3); letter-spacing: -0.01em; margin-top: var(--awi-space-7); }
h3 { font-size: var(--awi-step-2); margin-top: var(--awi-space-6); }
h4 { font-size: var(--awi-step-1); margin-top: var(--awi-space-5); }
h5, h6 { font-size: var(--awi-step-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--awi-steel-grey); }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--awi-space-5); }
li { margin-bottom: var(--awi-space-2); }
li > ul, li > ol { margin-top: var(--awi-space-2); margin-bottom: 0; }

strong, b { font-weight: 600; }

/* ---------------------------------------------------------------- 3. Links */

a { color: var(--awi-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--awi-link-hover); text-decoration-thickness: 2px; }

/* Visible focus on every interactive thing. Two tone so it reads on any
   background: a dark inner outline plus a light outer halo. */
:focus-visible {
  outline: 3px solid var(--awi-focus);
  outline-offset: 2px;
  border-radius: var(--awi-radius);
}
.awi-dark :focus-visible,
.awi-footer :focus-visible { outline-color: var(--awi-focus-on-dark); }

/* Skip link. Visible the moment it takes focus. */
.awi-skip {
  position: absolute;
  left: var(--awi-space-4);
  top: -100%;
  z-index: 100;
  background: var(--awi-deep-steel);
  color: #FFFFFF;
  padding: var(--awi-space-3) var(--awi-space-4);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--awi-radius) var(--awi-radius);
}
.awi-skip:focus { top: 0; color: #FFFFFF; }

/* -------------------------------------------------------------- 4. Layout */

.awi-container {
  width: 100%;
  max-width: var(--awi-container);
  margin-inline: auto;
  padding-inline: var(--awi-gutter);
}
.awi-container--wide { max-width: var(--awi-container-wide); }
.awi-container--narrow { max-width: 48rem; }

.awi-section { padding-block: var(--awi-space-7); }
@media (min-width: 48em) { .awi-section { padding-block: var(--awi-space-8); } }
.awi-section--tight { padding-block: var(--awi-space-6); }

.awi-surface { background: var(--awi-surface); }
.awi-dark { background: var(--awi-surface-dark); color: var(--awi-text-on-dark); }
.awi-dark h1, .awi-dark h2, .awi-dark h3, .awi-dark h4 { color: #FFFFFF; }
.awi-dark a { color: var(--awi-link-on-dark); }
.awi-dark a:hover { color: #FFFFFF; }
.awi-dark .awi-lede, .awi-dark .awi-meta { color: var(--awi-text-muted-on-dark); }

/* Every track has an explicit zero floor. A bare 1fr track carries an implied
   minimum of auto, which means min-content, which means one unshrinkable child
   can push the track wider than the grid and give the whole page a sideways
   scrollbar. That is exactly what happened: the table on the AS 3992 page has
   a min-content width of 468px, so at a 375px viewport the single auto track
   went to 468px and took the body with it, even though the table sits in an
   .awi-tablewrap with overflow-x: auto. minmax(0, 1fr) lets the track shrink
   and the overflow stays inside the wrapper, where it scrolls on its own.
   Found and fixed 22 August 2026. */
.awi-grid { display: grid; gap: var(--awi-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) {
  .awi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .awi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .awi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .awi-grid--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--awi-space-7); align-items: start; }
}

.awi-prose { max-width: var(--awi-measure); }
.awi-prose > :first-child { margin-top: 0; }

/* The lede measure is deliberate and it now looks it.
   Inside .awi-prose it never showed, because the parent's 68ch was the tighter
   of the two caps and the lede and the prose ended on the same right edge. Bare
   in an .awi-container it showed badly: the lede stopped at 840px and the plain
   paragraph directly under it ran the full 1104px of the column, so two
   left aligned paragraphs at the same level had right edges 264px apart. That
   reads as a wrapping fault, not as a short measure.
   Both now take --awi-measure, so the intro column has one right edge whatever
   the type size, which is the same thing the standards pages have always done
   by putting their intro inside .awi-prose. Paragraphs only: headings carry
   text-wrap: balance and short strings, and the breadcrumb ol must stay wide. */
.awi-lede { font-size: var(--awi-step-1); line-height: 1.5; color: var(--awi-text); max-width: var(--awi-measure); }
:where(main, .entry-content) .awi-container > p { max-width: var(--awi-measure); }
.awi-meta { font-size: var(--awi-step--1); color: var(--awi-text-muted); }
.awi-mono { font-family: var(--awi-font-mono); font-variant-ligatures: none; }

/* -------------------------------------------------------------- 5. Header */

.awi-header {
  background: var(--awi-page-bg);
  border-bottom: 1px solid var(--awi-rule);
  position: relative;
}
.awi-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--awi-space-4);
  min-height: 4.5rem;
  padding-block: var(--awi-space-3);
}
.awi-logo { display: block; flex: 0 0 auto; }
.awi-logo img { width: 150px; height: auto; }
@media (min-width: 48em) { .awi-logo img { width: 200px; } }
@media (min-width: 64em) { .awi-logo img { width: 230px; } }

.awi-header__actions { display: flex; align-items: center; gap: var(--awi-space-2); }

/* Header calls to action move into the drawer below 1024px, so the top bar at
   320px is only the lockup and the menu button. */
.awi-header__cta { display: none; }
@media (min-width: 64em) { .awi-header__cta { display: flex; gap: var(--awi-space-2); } }
.awi-nav__cta { display: block; padding-block: var(--awi-space-4); }
.awi-nav__cta .awi-btn { width: 100%; }
.awi-nav__cta .awi-btn + .awi-btn { margin-top: var(--awi-space-3); }
@media (min-width: 64em) { .awi-nav__cta { display: none; } }

/* Nav toggle. Only shown below 64em. Progressive enhancement: with JS off the
   toggle is hidden and the nav renders as a plain stacked list. */
.awi-navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--awi-space-2);
  min-height: var(--awi-tap);
  min-width: var(--awi-tap);
  padding: var(--awi-space-2) var(--awi-space-3);
  background: transparent;
  border: 1px solid var(--awi-border-interactive);
  border-radius: var(--awi-radius);
  color: var(--awi-deep-steel);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.awi-navtoggle:hover { border-color: var(--awi-temper-blue); }
.awi-navtoggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.awi-navtoggle__bars::before,
.awi-navtoggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.awi-navtoggle__bars::before { top: -6px; }
.awi-navtoggle__bars::after { top: 6px; }

.awi-nav { border-top: 1px solid var(--awi-rule); }
.awi-nav__list { list-style: none; margin: 0; padding: 0; }
.awi-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--awi-tap);
  padding: var(--awi-space-3) 0;
  color: var(--awi-deep-steel);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--awi-rule);
}
.awi-nav__list a:hover { color: var(--awi-arc-blue); }
.awi-nav__list a[aria-current="page"] { color: var(--awi-temper-blue); box-shadow: inset 4px 0 0 var(--awi-bronze); padding-left: var(--awi-space-3); }

@media (min-width: 64em) {
  .awi-navtoggle { display: none; }
  .awi-nav { border-top: 0; }
  .awi-nav[hidden] { display: block !important; }
  .awi-nav__list { display: flex; align-items: stretch; gap: var(--awi-space-5); }
  .awi-nav__list a {
    border-bottom: 3px solid transparent;
    padding: var(--awi-space-3) 0;
    white-space: nowrap;
  }
  .awi-nav__list a[aria-current="page"] {
    box-shadow: none;
    padding-left: 0;
    border-bottom-color: var(--awi-bronze);
  }
}

/* --------------------------------------------------------------- 6. Buttons */

.awi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--awi-space-2);
  min-height: var(--awi-tap);
  padding: var(--awi-space-3) var(--awi-space-5);
  font-family: var(--awi-font-body);
  font-size: var(--awi-step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--awi-radius);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.awi-btn--primary { background: var(--awi-temper-blue); color: #FFFFFF; border-color: var(--awi-temper-blue); }
.awi-btn--primary:hover { background: var(--awi-deep-steel); border-color: var(--awi-deep-steel); color: #FFFFFF; }

/* Straw as a FILL with deep steel text. Never straw text. */
.awi-btn--accent { background: var(--awi-accent-fill); color: var(--awi-text-on-straw); border-color: var(--awi-accent-fill); }
.awi-btn--accent:hover { background: var(--awi-bronze); border-color: var(--awi-bronze); color: #FFFFFF; }

.awi-btn--ghost { background: transparent; color: var(--awi-temper-blue); border-color: var(--awi-border-interactive); }
.awi-btn--ghost:hover { border-color: var(--awi-temper-blue); background: var(--awi-surface); color: var(--awi-temper-blue); }

.awi-dark .awi-btn--ghost { color: #FFFFFF; border-color: var(--awi-rule-on-dark); }
.awi-dark .awi-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--awi-pale-temper); color: #FFFFFF; }

.awi-btn--sm { min-height: var(--awi-tap); padding: var(--awi-space-2) var(--awi-space-4); font-size: var(--awi-step--1); }
.awi-btn--block { width: 100%; }

.awi-btnrow { display: flex; flex-wrap: wrap; gap: var(--awi-space-3); }

/* ----------------------------------------------------------------- 7. Hero */

.awi-hero { background: var(--awi-surface-darkest); color: var(--awi-text-on-dark); border-bottom: 4px solid var(--awi-straw); }
.awi-hero__inner { padding-block: var(--awi-space-7); display: grid; gap: var(--awi-space-6); }
@media (min-width: 64em) {
  .awi-hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; padding-block: var(--awi-space-9); gap: var(--awi-space-8); }
}
.awi-hero h1 { color: #FFFFFF; margin-bottom: var(--awi-space-5); }
.awi-hero p { color: var(--awi-pale-temper); }
.awi-hero .awi-lede { color: var(--awi-pale-temper); }
.awi-hero__seal { max-width: 15rem; margin-inline: auto; }
.awi-hero__eyebrow {
  display: inline-block;
  font-family: var(--awi-font-mono);
  font-size: var(--awi-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--awi-straw);
  margin-bottom: var(--awi-space-4);
}

/* ---------------------------------------------------------------- 8. Cards */

.awi-card {
  display: flex;
  flex-direction: column;
  background: var(--awi-page-bg);
  border: var(--awi-border);
  border-top: 4px solid var(--awi-temper-blue);
  border-radius: var(--awi-radius);
  padding: var(--awi-space-5);
  height: 100%;
}
.awi-card h3 { margin-top: 0; font-size: var(--awi-step-1); }
.awi-card p:last-of-type { margin-bottom: var(--awi-space-5); }
.awi-card__foot { margin-top: auto; }
.awi-card--accent { border-top-color: var(--awi-straw); }
.awi-card--purple { border-top-color: var(--awi-temper-purple); }
.awi-card--bronze { border-top-color: var(--awi-bronze); }
.awi-card__num {
  font-family: var(--awi-font-mono);
  font-size: var(--awi-step--1);
  color: var(--awi-steel-grey);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--awi-space-2);
}

/* --------------------------------------------------------------- 9. Badges */

.awi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--awi-space-2);
  padding: 0.2em 0.6em;
  font-size: var(--awi-step--1);
  font-weight: 600;
  font-family: var(--awi-font-mono);
  border-radius: var(--awi-radius);
  border: 1px solid currentColor;
}
/* Status never relies on colour alone: each carries a text label and a glyph. */
.awi-badge--valid { color: var(--awi-status-valid); background: var(--awi-status-valid-bg); }
.awi-badge--hold { color: var(--awi-bronze); background: var(--awi-status-warn-bg); }
.awi-badge--alert { color: var(--awi-status-alert); background: var(--awi-status-alert-bg); }
.awi-badge--sample { color: var(--awi-temper-purple); background: #F2ECF5; }

/* Placeholder and sample flags. Loud on purpose. */
.awi-flag {
  display: block;
  border-left: 4px solid var(--awi-temper-purple);
  background: #F2ECF5;
  color: var(--awi-ink);
  padding: var(--awi-space-3) var(--awi-space-4);
  margin-bottom: var(--awi-space-5);
  font-size: var(--awi-step--1);
}
.awi-flag strong { font-family: var(--awi-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.awi-flag--hold { border-left-color: var(--awi-bronze); background: var(--awi-status-warn-bg); }

/* ---------------------------------------------------------- 10. Breadcrumbs */

.awi-breadcrumb { padding-block: var(--awi-space-4); border-bottom: 1px solid var(--awi-rule); font-size: var(--awi-step--1); }
.awi-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--awi-space-2); margin: 0; padding: 0; }
.awi-breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--awi-space-2); }
.awi-breadcrumb li + li::before { content: "/"; color: var(--awi-steel-grey); }
.awi-breadcrumb [aria-current="page"] { color: var(--awi-text-muted); }

/* --------------------------------------------------------------- 11. Tables */

.awi-tablewrap { overflow-x: auto; margin-bottom: var(--awi-space-5); border: var(--awi-border); border-radius: var(--awi-radius); }
table { border-collapse: collapse; width: 100%; font-size: var(--awi-step--1); margin: 0; }
caption { text-align: left; padding: var(--awi-space-3) var(--awi-space-4); font-weight: 600; color: var(--awi-deep-steel); border-bottom: 1px solid var(--awi-rule); background: var(--awi-surface); }
th, td { padding: var(--awi-space-3) var(--awi-space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--awi-rule); }
thead th { background: var(--awi-surface); font-family: var(--awi-font-body); font-weight: 600; color: var(--awi-deep-steel); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.awi-num, th.awi-num, .awi-cell-mono { font-family: var(--awi-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----------------------------------------------------------------- 12. Forms */

.awi-field { margin-bottom: var(--awi-space-5); }
.awi-field > label { display: block; font-weight: 600; color: var(--awi-deep-steel); margin-bottom: var(--awi-space-2); }
.awi-field__hint { display: block; font-size: var(--awi-step--1); color: var(--awi-text-muted); margin-bottom: var(--awi-space-2); }
.awi-req { color: var(--awi-status-alert); font-weight: 700; }

input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--awi-tap);
  padding: var(--awi-space-3);
  font-family: var(--awi-font-body);
  font-size: var(--awi-step-0);
  color: var(--awi-text);
  background: var(--awi-page-bg);
  border: 1px solid var(--awi-border-interactive);
  border-radius: var(--awi-radius);
}
input.awi-mono { font-family: var(--awi-font-mono); letter-spacing: 0.05em; }
input:hover, select:hover, textarea:hover { border-color: var(--awi-temper-blue); }
input[aria-invalid="true"] { border-color: var(--awi-status-alert); border-width: 2px; }

.awi-error { display: block; margin-top: var(--awi-space-2); color: var(--awi-status-alert); font-weight: 600; font-size: var(--awi-step--1); }
.awi-error::before { content: "!  "; font-family: var(--awi-font-mono); }

fieldset { border: var(--awi-border); border-radius: var(--awi-radius); padding: var(--awi-space-5); margin: 0 0 var(--awi-space-5); }
legend { font-family: var(--awi-font-heading); font-weight: 600; font-size: var(--awi-step-1); color: var(--awi-deep-steel); padding-inline: var(--awi-space-2); }

/* Radio and checkbox rows sized to the 44px target */
.awi-choice { display: flex; gap: var(--awi-space-3); align-items: flex-start; padding: var(--awi-space-3); min-height: var(--awi-tap); border: 1px solid var(--awi-border-interactive); border-radius: var(--awi-radius); margin-bottom: var(--awi-space-3); cursor: pointer; }
.awi-choice:hover { border-color: var(--awi-arc-blue); background: var(--awi-surface); }
.awi-choice input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--awi-temper-blue); }
.awi-choice__label { font-weight: 600; color: var(--awi-deep-steel); display: block; }
.awi-choice__note { font-size: var(--awi-step--1); color: var(--awi-text-muted); display: block; }
.awi-choice:has(input:checked) { border-color: var(--awi-temper-blue); border-width: 2px; padding: calc(var(--awi-space-3) - 1px); background: var(--awi-surface); }

/* ------------------------------------------------------- 13. Verify results */

.awi-result { border: 2px solid var(--awi-border-interactive); border-radius: var(--awi-radius); overflow: hidden; }
.awi-result__head { background: var(--awi-surface); padding: var(--awi-space-4) var(--awi-space-5); border-bottom: 1px solid var(--awi-rule); display: flex; flex-wrap: wrap; gap: var(--awi-space-3); align-items: center; justify-content: space-between; }
.awi-result__body { padding: var(--awi-space-5); }
.awi-deflist { display: grid; gap: 0; margin: 0; }
.awi-deflist > div { display: grid; gap: var(--awi-space-1); padding-block: var(--awi-space-3); border-bottom: 1px solid var(--awi-rule); }
.awi-deflist > div:last-child { border-bottom: 0; }
.awi-deflist dt { font-size: var(--awi-step--1); font-weight: 600; color: var(--awi-steel-grey); text-transform: uppercase; letter-spacing: 0.05em; }
.awi-deflist dd { margin: 0; color: var(--awi-text); }
/* Fallback, for a deflist that sits outside any declared container. Viewport
   width is the only thing available there. */
@media (min-width: 48em) {
  .awi-deflist > div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--awi-space-4); align-items: baseline; }
}

/* Inside a panel, the panel's width decides, not the window's. This matters
   because .awi-grid--sidebar hands its aside 20rem: the media query above put
   a 14rem label column in a 20rem panel and left about 2rem for the value, so
   "ISO 9606" wrapped two characters per line. Every panel that can hold a
   deflist declares itself a container, so the nearest one always answers. The
   30rem threshold sits clear of both cases: a sidebar panel measures about
   17rem inside its padding, the main column about 60rem at the 1400px
   container width. Fixed 22 August 2026. */
.awi-callout,
.awi-card,
.awi-grid--sidebar > aside { container-type: inline-size; }

@container (max-width: 30rem) {
  .awi-deflist > div { grid-template-columns: minmax(0, 1fr); gap: var(--awi-space-1); align-items: start; }
}

/* ---------------------------------------------------------- 14. Join wizard */

.awi-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--awi-space-2); margin: 0 0 var(--awi-space-6); padding: 0; counter-reset: awistep; }
.awi-steps li { display: flex; align-items: center; gap: var(--awi-space-2); font-size: var(--awi-step--1); font-weight: 600; color: var(--awi-steel-grey); padding: var(--awi-space-2) var(--awi-space-3); border: 1px solid var(--awi-rule); border-radius: var(--awi-radius); }
.awi-steps li[aria-current="step"] { color: var(--awi-deep-steel); border-color: var(--awi-temper-blue); border-width: 2px; padding: calc(var(--awi-space-2) - 1px) calc(var(--awi-space-3) - 1px); }
.awi-steps__n { font-family: var(--awi-font-mono); background: var(--awi-surface); border-radius: 50%; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.awi-steps li[aria-current="step"] .awi-steps__n { background: var(--awi-straw); color: var(--awi-text-on-straw); }

.awi-price { background: var(--awi-surface-dark); color: #FFFFFF; padding: var(--awi-space-5); border-radius: var(--awi-radius); border-left: 4px solid var(--awi-straw); }
.awi-price__amount { font-family: var(--awi-font-mono); font-size: var(--awi-step-3); font-weight: 500; display: block; line-height: 1.1; color: #FFFFFF; }
.awi-price__note { color: var(--awi-pale-temper); font-size: var(--awi-step--1); }
.awi-price dl { margin: var(--awi-space-4) 0 0; font-size: var(--awi-step--1); }
.awi-price dl > div { display: flex; justify-content: space-between; gap: var(--awi-space-4); padding-block: var(--awi-space-2); border-bottom: 1px solid var(--awi-rule-on-dark); }
.awi-price dt { color: var(--awi-pale-temper); }
.awi-price dd { margin: 0; font-family: var(--awi-font-mono); }

/* --------------------------------------------------------------- 15. Lists */

.awi-linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--awi-rule); }
.awi-linklist li { margin: 0; border-bottom: 1px solid var(--awi-rule); }
.awi-linklist a { display: block; padding: var(--awi-space-4) 0; text-decoration: none; color: var(--awi-deep-steel); font-weight: 600; min-height: var(--awi-tap); }
.awi-linklist a:hover { color: var(--awi-arc-blue); }
.awi-linklist a:hover .awi-linklist__title { text-decoration: underline; }
.awi-linklist__title { display: block; }
.awi-linklist__meta { display: block; font-weight: 400; font-size: var(--awi-step--1); color: var(--awi-text-muted); font-family: var(--awi-font-mono); }

/* A list row that is deliberately not a link. Used for held library entries:
   the title is catalogued, the article is not published, so there is nothing
   to click. Matches the anchor metrics so the list reads evenly. */
.awi-linklist__item { display: block; padding: var(--awi-space-4) 0; color: var(--awi-text-muted); font-weight: 600; }
.awi-linklist__item .awi-linklist__title { color: var(--awi-text-muted); }

.awi-cols { columns: 1; column-gap: var(--awi-space-7); }
@media (min-width: 48em) { .awi-cols { columns: 2; } }

/* Callout, used for definitions and key facts */
.awi-callout { border: var(--awi-border); border-left: 4px solid var(--awi-arc-blue); background: var(--awi-surface); padding: var(--awi-space-5); border-radius: var(--awi-radius); margin-bottom: var(--awi-space-5); }
.awi-callout > :last-child { margin-bottom: 0; }
.awi-callout h2, .awi-callout h3 { margin-top: 0; }

/* Table of contents for long library articles */
.awi-toc { position: sticky; top: var(--awi-space-4); border: var(--awi-border); border-radius: var(--awi-radius); padding: var(--awi-space-4); background: var(--awi-surface); font-size: var(--awi-step--1); }
.awi-toc h2 { font-size: var(--awi-step-0); margin: 0 0 var(--awi-space-3); text-transform: uppercase; letter-spacing: 0.06em; color: var(--awi-steel-grey); font-family: var(--awi-font-body); }
.awi-toc ol { list-style: none; margin: 0; padding: 0; }
.awi-toc li { margin-bottom: var(--awi-space-2); }
.awi-toc a { display: block; padding-block: var(--awi-space-1); }

/* --------------------------------------------------------------- 16. Footer */

.awi-footer { background: var(--awi-surface-darkest); color: var(--awi-text-on-dark); padding-block: var(--awi-space-7); border-top: 4px solid var(--awi-straw); }
.awi-footer h2 { font-size: var(--awi-step-0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--awi-straw); font-family: var(--awi-font-body); margin: 0 0 var(--awi-space-4); }
.awi-footer__grid { display: grid; gap: var(--awi-space-6); }
@media (min-width: 48em) { .awi-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .awi-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--awi-space-7); } }
.awi-footer ul { list-style: none; margin: 0; padding: 0; }
.awi-footer li { margin-bottom: var(--awi-space-1); }
.awi-footer a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--awi-tap); }
.awi-footer a:hover { color: var(--awi-pale-temper); text-decoration: underline; }
.awi-footer__logo img { width: 220px; }
.awi-footer__legal { margin-top: var(--awi-space-7); padding-top: var(--awi-space-5); border-top: 1px solid var(--awi-rule-on-dark); display: flex; flex-wrap: wrap; gap: var(--awi-space-3) var(--awi-space-5); align-items: center; justify-content: space-between; font-size: var(--awi-step--1); }
.awi-footer__legal p { margin: 0; color: var(--awi-pale-temper); }
.awi-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--awi-space-4); }
.awi-footer__legal li { margin: 0; }

/* ------------------------------------------------------------ 17. Utilities */

.awi-visually-hidden {
  position: absolute !important;
  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;
}
.awi-stack > * + * { margin-top: var(--awi-space-4); }
.awi-mt-0 { margin-top: 0; }
.awi-mb-0 { margin-bottom: 0; }
.awi-center { text-align: center; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- 18. Print */

@media print {
  .awi-header__actions, .awi-nav, .awi-navtoggle, .awi-skip, .awi-footer__grid { display: none; }
  body { font-size: 11pt; color: #000; }
  .awi-hero, .awi-dark, .awi-footer { background: #fff !important; color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --------------------------------------------------- 404 template addition */
/* The prototype 404 used an inline font-size on the card headings. Inline
   styles do not belong in a template, so the rule lives here instead. */
.awi-card__title-sm { font-size: var(--awi-step-2); margin-top: 0; }

/* ----------------------------------------------------- 19. Calculators */
/* The three calculator pages. Inputs in one column, a live result panel in the
   other, one column on a phone. Everything that can be reused is reused:
   .awi-field, fieldset, legend, .awi-btn and .awi-result all come from the
   form and result components above. What is added here is the two column
   arrangement, the numeric output type and the formula block, because a
   calculator that will not show its working is not usable on a job. */

.awi-calc { display: grid; gap: var(--awi-space-6); align-items: start; margin-bottom: var(--awi-space-6); }
@media (min-width: 64em) {
  .awi-calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--awi-space-7); }
}
.awi-calc fieldset { margin-bottom: var(--awi-space-5); }
.awi-calc input[inputmode="decimal"] { font-family: var(--awi-font-mono); font-variant-numeric: tabular-nums; }
@media (min-width: 64em) { .awi-calc__panel { position: sticky; top: var(--awi-space-4); } }

.awi-fieldgrid { display: grid; gap: var(--awi-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34em) { .awi-fieldgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.awi-fieldgrid .awi-field { margin-bottom: 0; }

/* Numeric output. Mono and tabular so a column of results lines up, and the
   primary answer set large enough that it cannot be read as a supporting one. */
.awi-outlist { margin: 0; }
.awi-outlist > div { padding-block: var(--awi-space-4); border-bottom: 1px solid var(--awi-rule); }
.awi-outlist > div:first-child { padding-top: 0; }
.awi-outlist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.awi-outlist dt { font-size: var(--awi-step--1); font-weight: 600; color: var(--awi-steel-grey); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--awi-space-1); }
.awi-outlist dd { margin: 0; }
.awi-out { font-family: var(--awi-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--awi-deep-steel); font-size: var(--awi-step-1); }
.awi-out--lead { font-size: var(--awi-step-3); line-height: 1.1; }
.awi-out__unit { font-family: var(--awi-font-body); font-size: var(--awi-step--1); font-weight: 400; color: var(--awi-text-muted); margin-left: 0.4em; }

/* Interpretation band under a result. The text carries the meaning, never
   colour on its own, so this stays deliberately neutral. */
.awi-band { display: block; margin-top: var(--awi-space-4); padding: var(--awi-space-3) var(--awi-space-4); border-left: 4px solid var(--awi-border-interactive); background: var(--awi-surface); font-size: var(--awi-step--1); }

/* Formula block. Scrolls sideways on its own rather than taking the page with it. */
.awi-formula { background: var(--awi-surface); border: var(--awi-border); border-left: 4px solid var(--awi-steel-grey); border-radius: var(--awi-radius); padding: var(--awi-space-4) var(--awi-space-5); margin-bottom: var(--awi-space-5); }
.awi-formula > :last-child { margin-bottom: 0; }
.awi-formula code { display: block; overflow-x: auto; white-space: pre; padding-block: var(--awi-space-1); font-family: var(--awi-font-mono); font-size: var(--awi-step--1); color: var(--awi-deep-steel); }
.awi-formula__note { display: block; margin-top: var(--awi-space-3); font-size: var(--awi-step--1); color: var(--awi-text-muted); }

/* --------------------------------------------------- 20. Library search */
/* The Job Knowledge search: one band, used on /knowledge/ and on the search
   results page. Everything reusable is reused: the global input rule, .awi-btn,
   .awi-callout and .awi-field__hint all come from the components above. What is
   added here is the band itself, the result list, and the marked term.

   No new colours. Every pair below is one of the pairs already calculated by
   _tools/check.py: ink on off white, steel grey on off white, ink on the warn
   background for the mark, deep steel on white for a result title. */

.awi-kbsearch { background: var(--awi-surface); border-bottom: 1px solid var(--awi-rule); padding-block: var(--awi-space-5); margin-bottom: var(--awi-space-6); }

/* On the results page the band sits inside the container already, so it drops
   the full width treatment and reads as a field on the page. */
.awi-container > .awi-kbsearch { background: transparent; border-bottom: 0; padding-block: 0; }
.awi-container > .awi-kbsearch > .awi-container { padding-inline: 0; max-width: none; }

.awi-kbsearch__form { display: grid; gap: var(--awi-space-3); align-items: end; }
@media (min-width: 40em) {
  .awi-kbsearch__form { grid-template-columns: minmax(0, 1fr) auto; }
}
.awi-kbsearch__field > label { display: block; font-weight: 600; color: var(--awi-deep-steel); margin-bottom: var(--awi-space-1); }
.awi-kbsearch__field .awi-field__hint { max-width: 60ch; }
.awi-kbsearch__actions { display: flex; flex-wrap: wrap; gap: var(--awi-space-3); }

/* The placeholder is set rather than left to the browser: the default sits
   around 2.5:1 on white and this token is 4.83:1. */
.awi-kbsearch input[type="search"]::placeholder { color: var(--awi-text-muted); opacity: 1; }

.awi-kbsearch__count { margin: var(--awi-space-4) 0 0; font-family: var(--awi-font-mono); font-size: var(--awi-step--1); color: var(--awi-text-muted); }
.awi-kbsearch__more { margin: var(--awi-space-2) 0 0; font-size: var(--awi-step--1); color: var(--awi-text-muted); display: flex; flex-wrap: wrap; gap: var(--awi-space-3); align-items: center; }
.awi-kbsearch__empty { margin-top: var(--awi-space-4); background: var(--awi-page-bg); }

/* The controls this band prints hidden and the script reveals: the Clear
   button, the full text line and the empty state. The hidden attribute is only
   display:none in the user agent stylesheet, so .awi-btn's inline-flex and this
   file's own flex would both win over it and print a control that does nothing
   when JavaScript is off. Stated here so it cannot. */
.awi-kbsearch [hidden] { display: none !important; }

/* Set by assets/js/knowledge-search.js on a row the filter has excluded. A
   class rather than the hidden attribute, because a grid or flex display
   declared elsewhere would otherwise win over it. */
.awi-kb-hidden { display: none !important; }

/* Search results. A list, not cards: the reader is scanning titles. */
.awi-results { list-style: none; margin: 0 0 var(--awi-space-6); padding: 0; border-top: 1px solid var(--awi-rule); }
.awi-results__item { margin: 0; padding-block: var(--awi-space-5); border-bottom: 1px solid var(--awi-rule); }
.awi-results__title { font-size: var(--awi-step-1); margin: 0 0 var(--awi-space-2); }
.awi-results__title a { text-decoration: none; }
.awi-results__title a:hover { text-decoration: underline; }
.awi-results__meta { margin: 0 0 var(--awi-space-2); font-size: var(--awi-step--1); color: var(--awi-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.awi-results__snippet { margin: 0; max-width: var(--awi-measure); color: var(--awi-text); }

/* The matched term in context. A fill, never colour on its own: the word is
   still the word, and the panel around it carries no meaning. */
mark { background: var(--awi-status-warn-bg); color: var(--awi-ink); padding: 0 0.15em; border-radius: 1px; }

.awi-pagination { margin-bottom: var(--awi-space-6); }
.awi-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--awi-space-2); align-items: center; }
.awi-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--awi-tap); min-height: var(--awi-tap); padding-inline: var(--awi-space-3); border: 1px solid var(--awi-border-interactive); border-radius: var(--awi-radius); text-decoration: none; font-family: var(--awi-font-mono); font-size: var(--awi-step--1); }
.awi-pagination .page-numbers:hover { border-color: var(--awi-temper-blue); background: var(--awi-surface); }
.awi-pagination .page-numbers.current { border-color: var(--awi-temper-blue); border-width: 2px; color: var(--awi-deep-steel); font-weight: 600; }

/* -------------------------------------------------- 21. WordPress rendering */

/* Two renderings, one stylesheet, and this is the only section where they
   differ. Every selector below is a GeneratePress or WordPress class, so all of
   it is inert in the static prototype in _build/*.html, which has no such
   markup. Nothing above this line is WordPress specific and nothing here
   changes the prototype.

   The h1 needs no rule at all. It sits inside .awi-container in the prototype
   and, since 23 August 2026, inside .awi-container in WordPress too, because
   build_import.py stopped stripping it out and generatepress-layout.php
   suppresses the GeneratePress entry title on any post whose content already
   carries one. Same markup, same container, same left edge, one h1 per page.
   See the note in inc/generatepress-layout.php for what was wrong before.

   What is left is the imported content that carries no .awi-container: the 32
   Job Knowledge articles, whose content starts at an h2. On those the h1 does
   come from the GeneratePress entry title, and both it and the prose sit bare
   in .inside-article, flush against the container edge with no gutter at all,
   because .awi-container owns the horizontal spacing and there is none here to
   own it. They are aligned with each other and both in the wrong place. So the
   article wrapper becomes the container when the content brings none. The test
   is asked of the content rather than of a list of post types, so an imported
   article that is later rebuilt with an .awi-container drops out of it on its
   own. Guarded to single posts and pages: an archive loop item also has an
   .inside-article and must not become a 1200px column. */

:where(body.single, body.page) .inside-article:not(:has(.awi-container)) {
  width: 100%;
  max-width: var(--awi-container);
  margin-inline: auto;
  padding-inline: var(--awi-gutter);
  padding-block: var(--awi-space-7);
}
@media (min-width: 48em) {
  :where(body.single, body.page) .inside-article:not(:has(.awi-container)) {
    padding-block: var(--awi-space-8);
  }
}

/* The section padding above supplies the top of the page, so the first heading
   must not add its own margin on top of it. Same rule .awi-prose already has. */
.entry-content > :first-child { margin-top: 0; }

/* Prose in imported content has no .awi-container to sit in, so the measure
   rule further up cannot reach it. Same measure, same reason. */
.entry-content > p { max-width: var(--awi-measure); }