/* ============================================================
   ARABTECH — COMPONENTS  ·  MODERN CORPORATE B2B
   White and a cool tinted neutral carry the page. Deep teal owns
   navigation, figures and the footer. Brand red appears as chip
   dots, rules and the primary button (darkened to #C1141F so white
   type clears AA). Surfaces are rounded cards with a soft shadow.
   ------------------------------------------------------------
   WORDPRESS NOTE. The bespoke classes below are the design system
   and are all kept; the CORE BLOCK SUPPORT section at the end of
   this file dresses the blocks the templates actually emit
   (button, table, navigation, pagination, post-title, details,
   separator, image caption, tinted group) in exactly these tokens,
   so a page composed in the editor and a page composed from
   patterns look like one site. No new colours are introduced.
   ============================================================ */

/* ---------- Layout shells ---------- */
.page      { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--sheet-gutter); }
.wrap      { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--sheet-gutter); }
.page--wide{ max-width: 88rem; }
.stack > * + * { margin-block-start: var(--flow, var(--s-6)); }
.section   { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* ============================================================
   THE CARD SURFACE  (.sheet)
   Every panel of content is a white card with a hairline border,
   a generous radius and a soft shadow.
   ============================================================ */
.sheet {
  position: relative;
  background: var(--sheet);
  color: var(--ink-secondary);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: var(--sheet-pad);
}
.sheet--issued { border-color: var(--line); }
.sheet--flush  { padding: 0; overflow: hidden; }
.sheet--tint   { background: var(--bg-2); box-shadow: none; }
.sheet--noborder { border: 0; box-shadow: none; }

/* ============================================================
   SPEC PANEL  (.titleblock) — the at-a-glance facts strip
   ============================================================ */
.titleblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.titleblock--onGround { background: var(--line); }
.tb-cell {
  background: var(--at-white);
  padding: var(--s-4) var(--s-5);
  min-width: 0;
  border: 0;
}
.titleblock--onGround .tb-cell { background: var(--bg-2); }
.tb-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-nano);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-block-end: var(--s-2);
}
.tb-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tb-value--rev { color: var(--red-d); }

.sheet-no {
  font-family: var(--font-display);
  font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary);
}
.sheet-no b { color: var(--ink); }

/* ============================================================
   STATUS MARK  (.rev) — "new", "updated", "live"
   ============================================================ */
.rev {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--teal-d); background: var(--teal-l);
  border-radius: var(--r-pill); padding: .25rem .7rem;
}
.rev::before {
  content: ""; inline-size: 6px; block-size: 6px;
  border-radius: 50%; background: var(--at-red);
}
.rev--onGround { color: var(--teal-d); }

/* ============================================================
   ACTIONS — pills. Primary is #C1141F so white type clears AA;
   the pure brand red is never a text background.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: .8rem 1.5rem;
  min-height: 3rem;
  background: var(--red-d); color: #fff;
  border: 1.5px solid var(--red-d);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap;
  text-align: center; min-inline-size: 0; max-inline-size: 100%;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: #9E1019; border-color: #9E1019; color: #fff; }
.btn--ghost, .btn--onSheet {
  background: #fff; color: var(--teal); border-color: var(--line);
}
.btn--ghost:hover, .btn--onSheet:hover {
  background: var(--teal-l); border-color: var(--teal-l); color: var(--teal-d);
}
.btn--sm { min-height: 2.5rem; padding: .5rem 1.05rem; font-size: var(--t-micro); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--gr-150); color: var(--ink-tertiary); border-color: var(--gr-150);
  cursor: not-allowed;
}
.btn svg { width: 1em; height: 1em; flex: none; }
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

.link-callout {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 700;
  color: var(--teal); text-decoration: none;
  border-block-end: 0; padding-block-end: 0;
}
.link-callout::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
[dir="rtl"] .link-callout::after { content: "←"; }
.link-callout:hover { color: var(--red-d); }
.link-callout:hover::after { transform: translateX(3px); }
[dir="rtl"] .link-callout:hover::after { transform: translateX(-3px); }
.link-callout--onGround { color: var(--teal); }

/* ============================================================
   SPEC CHIPS  (.spec-strip) — the one-second scan
   ============================================================ */
.spec-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; padding: 0; margin: 0;
  border: 0;
}
.spec-strip li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .45rem .9rem;
  font-size: var(--t-nano); font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 1px rgba(20,38,44,.04);
  max-width: none;
}
.spec-strip li::before {
  content: ""; inline-size: 6px; block-size: 6px; flex: none;
  border-radius: 50%; background: var(--at-red);
}
.spec-strip b { font-weight: 700; color: var(--ink); }
.spec-strip ul { display: contents; list-style: none; padding: 0; }
.sheet--tint .spec-strip li { background: #fff; }

/* ============================================================
   TABLES — inside a card, tinted header, hover tint
   ============================================================ */
.spec-table, .register-table {
  inline-size: 100%; border-collapse: collapse; font-size: var(--t-small);
}
.spec-table caption, .register-table caption {
  text-align: start; font-family: var(--font-display);
  font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); padding: 0 0 var(--s-3);
}
.spec-table th, .spec-table td,
.register-table th, .register-table td {
  text-align: start; padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
.spec-table thead th, .register-table thead th {
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); background: var(--bg-2);
  white-space: nowrap;
}
.spec-table tbody th { font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.spec-table td, .register-table td { color: var(--ink-secondary); }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td,
.register-table tbody tr:last-child td { border-block-end: 0; }
.spec-table tbody tr:hover, .register-table tbody tr:hover { background: var(--gr-050); }
.register-table .rt-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--t-small); }
.register-table .rt-name a { text-decoration: none; color: var(--ink); }
.register-table .rt-name a:hover { color: var(--red-d); }
.register-table .tech { color: var(--ink-secondary); }
.table-scroll { overflow-x: auto; max-inline-size: 100%; border-radius: var(--r-md); }
.tick { color: var(--teal); font-weight: 700; }

/* ============================================================
   PRODUCT CARDS  (.lineup / .cubicle)
   ============================================================ */
.lineup { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.cubicle {
  position: relative; display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
  color: var(--ink-secondary); text-decoration: none;
  min-block-size: 15rem;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cubicle:hover, .cubicle:focus-visible { border-color: var(--gr-300); transform: translateY(-2px); }
.cubicle__face {
  flex: 1; display: grid; place-items: center;
  padding: var(--s-6); min-block-size: 8rem;
  background: var(--bg-3);
  border-block-end: 1px solid var(--line);
}
.cubicle__face img { max-block-size: 8rem; width: auto; }
.cubicle__face--empty {
  color: var(--ink-tertiary); font-family: var(--font-display);
  font-size: var(--t-nano); font-weight: 600; letter-spacing: 0;
  text-transform: none; text-align: center; line-height: 1.6;
  background-image: none;
}
.cubicle__label { display: block; padding: var(--s-5); border-block-start: 0; }
.cubicle__name {
  display: block; font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--tr-tight); line-height: 1.25; color: var(--ink);
}
.cubicle__spec {
  display: block; margin-block-start: var(--s-2); line-height: 1.55;
  font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-tertiary);
}

/* ============================================================
   BADGES & FILTERS
   ============================================================ */
.chip {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  padding: .2rem .7rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--teal-l); color: var(--teal-d);
  white-space: nowrap;
}
.sheet .chip { background: var(--teal-l); color: var(--teal-d); }
.chip--live { background: var(--red-100); color: var(--red-700); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter {
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--teal); background: #fff;
  transition: all var(--dur-fast) var(--ease-out);
}
.filter:hover { border-color: var(--gr-300); background: var(--teal-l); color: var(--teal-d); }
.filter[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ============================================================
   CERTIFICATE BADGE  (.stamp)
   ============================================================ */
.stamp {
  display: inline-grid; gap: var(--s-1); place-items: center;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--teal-d); text-align: center;
  font-family: var(--font-display); text-transform: none;
  letter-spacing: 0; line-height: 1.35;
  transform: none;
}
.stamp b { font-size: var(--t-body); font-weight: 700; }
.stamp span { font-size: var(--t-nano); color: var(--ink-tertiary); }

/* ============================================================
   FORMS
   ============================================================ */
.field { display: grid; gap: var(--s-2); }
.field > label, .fieldset-legend {
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.field .req { color: var(--red-d); }
.input, .select, .textarea {
  inline-size: 100%;
  padding: .8rem 1rem;
  min-height: 3rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--gr-300);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gr-500); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-l); }
.textarea { min-height: 7rem; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%),
                    linear-gradient(135deg, var(--teal) 50%, transparent 50%);
  background-position: right 1.15rem top 55%, right 0.85rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--s-10);
}
[dir="rtl"] .select { background-position: left 0.85rem top 55%, left 1.15rem top 55%; }
.field-hint { font-size: var(--t-micro); color: var(--ink-tertiary); }
.field-error {
  font-size: var(--t-micro); color: var(--red-d); font-weight: 700;
  display: flex; align-items: center; gap: var(--s-2);
}
.field-error::before { content: "!"; display: grid; place-items: center;
  inline-size: 1.05rem; block-size: 1.05rem; border-radius: 50%;
  background: var(--red-d); color: #fff; font-size: .7rem; flex: none; }
.field[data-invalid] .input, .field[data-invalid] .select, .field[data-invalid] .textarea {
  border-color: var(--red-d); background: #fff; box-shadow: 0 0 0 3px var(--red-100);
}
.dropzone {
  display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-8) var(--s-5);
  border: 2px dashed var(--gr-300); border-radius: var(--r-md);
  background: var(--bg-2); text-align: center; color: var(--ink-secondary);
  min-inline-size: 0;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dropzone:hover, .dropzone[data-drag] { border-color: var(--teal); background: var(--teal-l); }
.checkbox { display: flex; gap: var(--s-3); align-items: flex-start; }
.checkbox input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .25rem; flex: none; }
.checkbox label { font-size: var(--t-small); color: var(--ink-secondary); max-width: var(--measure); }

.steps { display: flex; list-style: none; padding: 0; gap: var(--s-2); flex-wrap: wrap; }
.steps li {
  flex: 1; min-inline-size: 8rem; padding: .6rem 1rem;
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  background: var(--bg-2); color: var(--ink-tertiary);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  text-align: center;
}
.steps li[aria-current="step"] { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 700; }
.steps li[data-done] { background: var(--teal-l); color: var(--teal-d); border-color: var(--teal-l); }

/* ============================================================
   FEEDBACK STATES
   ============================================================ */
.notice {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--at-red);
  border-radius: var(--r-md);
  background: var(--bg-2); color: var(--ink-secondary);
  font-size: var(--t-small);
}
.notice b { color: var(--ink); display: block; margin-block-end: var(--s-1); font-family: var(--font-display); }
.empty-state {
  display: grid; gap: var(--s-4); place-items: center; text-align: center;
  padding: var(--s-16) var(--s-5);
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); color: var(--ink-tertiary);
}
.empty-state[hidden] { display: none; }
.empty-state__code {
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-tertiary);
}

/* ============================================================
   APPENDED FOR SCREENS: about · factory · sectors · careers
   Tokens only. Logical properties only. Each block names the
   screen that required it.
   ============================================================ */

/* ---------- about.html — the ruled milestone timeline ----------
   A card grid was banned and would be wrong: milestones are
   stations on one rule, read left to right, and the rule is the
   point. Separators come from the grid gap so the component
   re-rules itself correctly when it wraps to one column. */
.timeline {
  display: grid;
  gap: var(--s-10) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.timeline__item {
  position: relative;
  padding-block-start: var(--s-5);
  border-block-start: var(--rule-med) solid var(--rule-ink);
}
.timeline__item::before {         /* the red station mark, set on the rule */
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 2.25rem;
  block-size: 3px;   /* a visible station mark, not a hairline */
  background: var(--at-red);
}
.timeline__yr {
  display: block;
  font-family: var(--font-tech);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--tr-tech);
  color: var(--ink);
  line-height: 1;
}
.timeline__t {
  display: block;
  margin-block-start: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: 1.25;
  color: var(--ink);
}
.timeline__d {
  margin-block-start: var(--s-2);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--ink-secondary);
  max-width: 34ch;
}

/* ---------- factory.html — the numbered process sequence ----------
   Eight operations in order. The number is the component; the
   sequence must read as a route through the building, not as
   eight equal tiles. */
.process {
  display: grid;
  gap: var(--rule-thin);
  background: var(--rule-quiet);
  border-block: var(--rule-med) solid var(--rule-ink);
}
.process__step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  background: var(--sheet);
  padding-block: var(--s-6);
  padding-inline: var(--s-2);
}
.process__no {
  font-family: var(--font-tech);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--tr-tech);
  line-height: 1;
  color: var(--red-600);
}
.process__t {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.process__d {
  margin-block-start: var(--s-2);
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
  max-width: 66ch;
}
.process__out {
  margin-block-start: var(--s-3);
  font-family: var(--font-tech);
  font-size: var(--t-nano);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
@media (max-width: 34rem) {
  .process__step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* ---------- factory.html — an honest photography slot ----------
   There is no photography of any kind. This names the exact shot
   the client must supply rather than faking one. */
.photo-slot {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  text-align: center;
  min-block-size: 13rem;
  padding: var(--s-8) var(--s-5);
  border: var(--rule-med) dashed var(--gr-400);
  background-image: repeating-linear-gradient(135deg, var(--gr-050) 0 10px, transparent 10px 20px);
}
.photo-slot__id {
  font-family: var(--font-tech);
  font-size: var(--t-nano);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red-600);
}
.photo-slot__t {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.photo-slot__d {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--ink-secondary);
  max-width: 36ch;
}

/* ---------- sectors.html — a sector entry ----------
   Demand on one side, the answer and the register on the other. */
.sectors { display: grid; gap: var(--s-6); }
.sector {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 54rem) { .sector { grid-template-columns: minmax(0, 1fr); } }
.sector__lede { color: var(--ink-secondary); line-height: var(--lh-loose); }
.sector h3 {
  font-family: var(--font-tech);
  font-size: var(--t-nano);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-block: var(--s-6) var(--s-3);
}
.sector ul {
  padding-inline-start: var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--ink-secondary);
}
.sector li::marker { color: var(--at-red); }

/* ---------- about.html — organisations published as names ----------
   The current site carries 50 logos and zero names. Names are the
   thing a consultant can search for, so names get the component. */
.namelist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0 var(--s-8);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.namelist li {
  max-width: none;
  padding-block: var(--s-3);
  border-block-end: var(--rule-hair) solid var(--rule-quiet);
  font-size: var(--t-small);
  color: var(--ink);
}

/* ---------- careers.html — the application form ---------- */
.form-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.form-grid .field--full { grid-column: 1 / -1; }

/* ============================================================
   APPENDED FOR: projects.html · project-museum.html ·
   approvals.html · downloads.html
   One ground — paper white. Tokens only, no raw colour values,
   logical properties only.
   ============================================================ */

/* project-museum.html — photography slots. There is no project
   photography. Each slot names the asset the client must supply,
   so the gap reads as a brief rather than a hole. */
.photo-slots {
  display: grid; gap: var(--rule-med);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.photo-slot {
  display: grid; gap: var(--s-2);
  align-content: center; justify-items: center; text-align: center;
  aspect-ratio: 4 / 3; padding: var(--s-5);
  border: var(--rule-thin) dashed var(--gr-400);
  background-color: var(--sheet-tint);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 8px, transparent 8px 16px);
}
.photo-slot__name {
  font-family: var(--font-display); font-size: var(--t-small);
  font-weight: 700; line-height: var(--lh-snug); color: var(--ink);
}
.photo-slot__meta {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); line-height: 1.7;
}

/* approvals.html — the certificate register. A numbered,
   rule-separated list where every entry sets its own height:
   deliberately NOT an icon-card grid. */
.certlist { display: grid; list-style: none; padding: 0; margin: 0; }
.certlist > li {
  max-width: none; display: grid; gap: var(--s-5);
  padding-block: var(--s-10);
  border-block-start: var(--rule-thin) solid var(--rule-quiet);
}
.certlist > li:first-child { border-block-start: var(--rule-med) solid var(--rule-ink); }
.cert-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.cert-no {
  font-family: var(--font-tech); font-size: var(--t-micro);
  letter-spacing: var(--tr-tech); color: var(--red-600);
  font-weight: 700; flex: none;
}

/* approvals.html — six-column certificate register: the row header
   is a certificate name, not a 40% label column. */
.spec-table--reg tbody th { inline-size: auto; color: var(--ink); font-weight: 700; white-space: nowrap; }

/* downloads.html · approvals.html · project-museum.html —
   a field whose value does not exist yet and must come from the
   client. Never styled as an error; it is a hand-over instruction. */
.awaiting {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary);
}
/* The pending marker must be unmistakable — .chip carries no border, so a
   dashed border-style alone rendered nothing. */
.chip--pending {
  background: #FFF6E5; color: #7A4B00;
  border: 1px dashed #C99A3B;
}

/* projects.html · downloads.html — secondary line inside a register
   cell: the product family, or the sites one entry covers. */
.rt-sub {
  display: block; margin-block-start: var(--s-2);
  font-family: var(--font-tech); font-size: var(--t-nano);
  font-weight: 400; letter-spacing: var(--tr-tech);
  line-height: 1.6; color: var(--ink-tertiary);
}

/* projects.html · downloads.html — live result count and the
   labelled facet rows standing above a filterable register. */
.reg-count {
  font-family: var(--font-tech); font-size: var(--t-micro);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-secondary); max-width: none;
}
.reg-count b { color: var(--ink); font-weight: 700; }
.facets { display: grid; gap: var(--s-5); }
.facet { display: grid; gap: var(--s-3); }
.facet__label {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary);
}
.reg-note {
  max-width: var(--measure); margin-block-start: var(--s-5);
  font-size: var(--t-small); color: var(--ink-secondary);
}

/* ============================================================
   APPENDED FOR SCREENS: quote · quote-sent · contact ·
   news · news-article · faq
   Tokens only. Logical properties only. Each block names the
   screen that required it and why the kit could not already do it.
   ============================================================ */

/* ---------- quote.html · contact.html — the form field grid ----------
   The kit ships .field but nothing to lay fields out on a sheet.
   auto-fit so a two-up form becomes one-up on a phone with no
   breakpoint of its own. */
.form-grid--q {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}
.form-grid--q .field--full { grid-column: 1 / -1; }
.fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.fieldset > .fieldset-legend { display: block; padding: 0; margin-block-end: var(--s-6); }

/* Actions welded to the end of a form step, on a rule. */
.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  margin-block-start: var(--s-10); padding-block-start: var(--s-6);
  border-block-start: var(--rule-thin) solid var(--rule-quiet);
}
.form-actions__note {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); margin-inline-start: auto; max-width: none;
}

/* ---------- quote.html — THE PANEL SCHEDULE ----------
   The line-item table the buyer already owns as a schedule of loads.
   Controls sit inside table cells, so they run tighter than the
   standalone .input; the column header is the visible label. */
.sched { inline-size: 100%; border-collapse: collapse; min-inline-size: 52rem; }
.sched thead th {
  text-align: start; padding: var(--s-2) var(--s-2) var(--s-3);
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); font-weight: 700; white-space: nowrap;
  border-block-end: var(--rule-med) solid var(--rule-ink);
}
.sched td, .sched tbody th {
  padding: var(--s-3) var(--s-2); vertical-align: top; text-align: start;
  border-block-end: var(--rule-thin) solid var(--rule-quiet);
}
.sched__no {
  inline-size: 3.5rem; padding-block-start: var(--s-5) !important;
  font-family: var(--font-tech); font-size: var(--t-small);
  font-weight: 700; color: var(--ink-tertiary);
}
.sched .input, .sched .select {
  min-height: 2.75rem; padding-block: var(--s-2); padding-inline: var(--s-3);
  font-size: var(--t-small);
}
.sched .select { padding-inline-end: var(--s-8); }
.sched__rm {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  border: var(--rule-thin) solid var(--gr-400);
  color: var(--ink-secondary);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sched__rm:hover { border-color: var(--at-red); color: var(--red-600); }
.sched__rm:disabled { color: var(--gr-300); border-color: var(--rule-quiet); cursor: not-allowed; }
.sched__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  margin-block-start: var(--s-5);
}

/* ---------- quote.html — the file input inside the dropzone ----------
   The input itself stays visible and focusable; the dropzone is its
   <label>, so the whole area is the hit target without hiding the
   control from the keyboard. */
/* A grid item's automatic minimum size is its content's min-content
   width, and a native file input reports a large one — enough to push
   the dropzone wider than the sheet on a phone. Zeroed at both levels
   so the control shrinks instead of overflowing the page. */
.dropzone { cursor: pointer; min-inline-size: 0; }
.dropzone > * { min-inline-size: 0; max-inline-size: 100%; }
.dropzone__t {
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--tr-tight); color: var(--ink);
}
.dropzone input[type="file"] { font-size: var(--t-small); max-inline-size: 100%; }

/* ---------- contact.html — the map placeholder ----------
   No map key exists in a static comp. Naming the coordinates is
   more useful than a grey rectangle pretending to be a map. */
.map-stub {
  display: grid; place-items: center; gap: var(--s-3); text-align: center;
  min-block-size: 11rem; padding: var(--s-8) var(--s-5);
  border: var(--rule-thin) dashed var(--gr-400);
  background-color: var(--sheet-tint);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 8px, transparent 8px 16px);
}
.map-stub__co {
  font-family: var(--font-tech); font-size: var(--t-body);
  font-weight: 700; letter-spacing: var(--tr-tech); color: var(--ink);
}
.map-stub__note {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); max-width: 34ch; line-height: 1.7;
}

/* ---------- contact.html — the emergency route ----------
   A failed board is the highest-urgency enquiry there is. It gets
   the only shouting red field on the site, and black ink on it. */
.alarm { border-block-start: 6px solid var(--at-red); }
.alarm__tag {
  display: inline-block; background: var(--at-red); color: var(--at-black);
  font-family: var(--font-tech); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
}
.hotline {
  display: inline-block; margin-block-start: var(--s-4);
  font-family: var(--font-display); font-size: var(--t-h1);
  font-weight: 700; letter-spacing: var(--tr-display);
  line-height: 1.1; color: var(--ink); text-decoration: none;
}
.hotline:hover { text-decoration: underline; text-decoration-color: var(--at-red); text-decoration-thickness: 3px; }
.hotline + .hotline { margin-inline-start: var(--s-8); }

/* ---------- news.html — the index list ----------
   Entries are register lines, not cards: date and kind on one
   side, the title carrying the weight. Collapses to a stack
   before the columns can crush the title. */
.idx { list-style: none; padding: 0; margin: 0; display: grid; }
.idx > li { max-width: none; border-block-start: var(--rule-thin) solid var(--rule-quiet); }
.idx > li:first-child { border-block-start: var(--rule-med) solid var(--rule-ink); }
.idx__a {
  display: grid; gap: var(--s-2) var(--s-6);
  grid-template-columns: 7rem 11rem minmax(0, 1fr);
  align-items: start;
  padding-block: var(--s-6); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.idx__a:hover { background: var(--sheet-tint); }
.idx__date {
  font-family: var(--font-tech); font-size: var(--t-micro);
  letter-spacing: var(--tr-tech); color: var(--ink-tertiary);
}
.idx__t {
  display: block;
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--tr-tight); line-height: 1.25;
  color: var(--ink); max-width: 44ch;
}
.idx__a:hover .idx__t { color: var(--red-600); }
.idx__d {
  display: block;
  margin-block-start: var(--s-2); font-size: var(--t-small);
  line-height: var(--lh-normal); color: var(--ink-secondary); max-width: 62ch;
}
@media (max-width: 52rem) {
  .idx__a { grid-template-columns: minmax(0, 1fr); }
}

/* Filters and empty states standing on a white sheet rather than
   on the dark ground the kit's defaults assume. */
.filters--onSheet .filter { color: var(--ink-secondary); border-color: var(--rule-quiet); }
.filters--onSheet .filter:hover { border-color: var(--gr-300); background: var(--teal-l); color: var(--teal-d); }
.filters--onSheet .filter[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.sheet .empty-state { border-color: var(--rule-quiet); color: var(--ink-secondary); }
.sheet .empty-state__code { color: var(--ink-tertiary); }
/* .empty-state sets display:grid, which outranks the UA rule for the
   hidden attribute — so an empty state marked hidden still painted.
   The filter script in app.js toggles .hidden, so this is what makes
   the empty state actually conditional. */
.empty-state[hidden] { display: none; }

/* ---------- news-article.html — read mode ----------
   A pull quote is a rule with a voice, not a decorated box. */
.pullquote {
  margin-block: var(--s-10); padding-inline-start: var(--s-6);
  border-inline-start: var(--rule-heavy) solid var(--at-red);
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight);
  color: var(--ink); max-width: 44ch;
}
.pullquote p { color: var(--ink); font-size: inherit; line-height: inherit; max-width: none; }
.pullquote cite {
  display: block; margin-block-start: var(--s-3); font-style: normal; font-weight: 400;
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-tertiary);
}
/* Read mode. The measure is carried by the text blocks themselves,
   not by the article container — so a three-column normative table
   and a notice can use the full width of the sheet while the prose
   stays at a 72ch line. */
/* .prose in chrome.css caps the measure and loads after this file, so
   the modifier has to out-specify it rather than out-order it. */
.prose.prose--read { max-width: none; }
.prose--read > * + * { margin-block-start: var(--s-5); }
.prose--read > p,
.prose--read > h2,
.prose--read > h3,
.prose--read > ul,
.prose--read > ol,
.prose--read > .pullquote { max-inline-size: 72ch; }
.prose--read > h2 { max-inline-size: 30ch; }
.prose--read > .pullquote { max-inline-size: 48ch; }
.prose--read > .table-scroll, .prose--read > .notice { margin-block: var(--s-10); }

/* ---------- faq.html — the accordion ----------
   Semantic <details>. The chevron is authored inline so it can be
   rotated; a unicode arrow cannot be. It points along the inline
   axis when closed, so RTL must mirror it before rotating. */
.qa { border-block-end: var(--rule-thin) solid var(--rule-quiet); }
.qa:first-of-type { border-block-start: var(--rule-med) solid var(--rule-ink); }
.qa > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding-block: var(--s-5);
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--tr-tight); line-height: 1.3;
  color: var(--ink);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--red-600); }
.qa__q { max-width: 52ch; }
.qa__chev {
  inline-size: 0.9rem; block-size: 0.9rem; flex: none;
  margin-inline-start: auto; margin-block-start: 0.4em;
  color: var(--red-600);
  transition: transform var(--dur) var(--ease-out);
}
.qa[open] > summary .qa__chev { transform: rotate(90deg); }
[dir="rtl"] .qa__chev { transform: scaleX(-1); }
[dir="rtl"] .qa[open] > summary .qa__chev { transform: scaleX(-1) rotate(90deg); }
.qa__body { padding-block: var(--s-1) var(--s-8); }
.qa__body > * + * { margin-block-start: var(--s-4); }
.qa__body p, .qa__body li { color: var(--ink-secondary); line-height: var(--lh-loose); }
.qa__body ul { padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.qa__body li::marker { color: var(--at-red); }

/* ---------- quote-sent.html — the next-step sequence ----------
   Numbered, on one rule. Not four equal tiles. */
.nextlist { list-style: none; padding: 0; margin: 0; display: grid; }
.nextlist > li {
  max-width: none;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-start: var(--rule-thin) solid var(--rule-quiet);
}
.nextlist > li:first-child { border-block-start: var(--rule-med) solid var(--rule-ink); }
.nextlist__no {
  font-family: var(--font-tech); font-size: var(--t-h3); font-weight: 700;
  letter-spacing: var(--tr-tech); line-height: 1.1; color: var(--red-600);
}
.nextlist__t {
  font-family: var(--font-display); font-size: var(--t-body);
  font-weight: 700; letter-spacing: var(--tr-tight); color: var(--ink);
}
.nextlist__d {
  margin-block-start: var(--s-2); font-size: var(--t-small);
  line-height: var(--lh-loose); color: var(--ink-secondary); max-width: 64ch;
}

/* ============================================================
   APPENDED FOR: search.html · 404.html · privacy.html
   Tokens only. No raw colour values. Logical properties only.
   ============================================================ */

/* search.html — the query bar. Field and action share one baseline;
   the field takes the slack so the button never shrinks. */
.search-bar { display: flex; gap: var(--s-4); align-items: flex-end; flex-wrap: wrap; }

/* search.html — a result group heading line. Results are grouped
   register sections, so each needs a ruled line carrying its class
   and its count. Deliberately not a card header. */
.result-group__head {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding-block-end: var(--s-3);
  border-block-end: var(--rule-med) solid var(--rule-ink);
  margin-block-end: var(--s-4);
}
.result-group__title { color: var(--ink); font-size: var(--t-h3); }
.result-group__n {
  margin-inline-start: auto;
  font-family: var(--font-tech); font-size: var(--t-micro);
  letter-spacing: var(--tr-label); color: var(--ink-tertiary);
}

/* search.html — the matched extract under a register line. It sits
   inside .rt-name and must shed that cell's display weight. */
.result-snip {
  display: block; margin-block-start: var(--s-2);
  max-width: 64ch;
  font-family: var(--font-body); font-size: var(--t-small);
  font-weight: 400; letter-spacing: var(--tr-normal);
  line-height: var(--lh-normal); color: var(--ink-secondary);
}
.result-snip b { color: var(--ink); font-weight: 700; }

/* search.html — suggested families and queries in the zero-result
   state. .filter is reused as the visual; as a link it needs the
   box behaviour and the underline removed. */
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag-list li { max-width: none; }
a.filter { display: inline-flex; align-items: center; text-decoration: none; }
a.filter:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   ADDED FOR: products.html · product-enclosures.html ·
   forms-of-separation.html
   ------------------------------------------------------------
   1. Multi-column spec tables. .spec-table pins its row header
      at 40% because it was drawn for two-column data; a
      comparison matrix carries three to six data columns and
      needs the header to size with its content.
   2. The form-of-separation figures — a plan diagram authored
      for this set, plus its caption, in the drawing idiom.
   Existing tokens only; no new colours, no raw hex.
   ============================================================ */
.spec-table--cols tbody th { inline-size: auto; white-space: normal; }
/* .spec-table pins thead th to nowrap, which pushes a six-column matrix
   wider than the sheet. Comparison headers wrap. */
.spec-table--cols thead th { white-space: normal; }
.spec-table--cols th, .spec-table--cols td { padding-inline: var(--s-3); }
/* Sentence-bearing cells read in the body face. The mono is for measurements. */
.spec-table--prose td { font-family: var(--font-body); color: var(--ink-secondary); }
.spec-table--prose tbody th { color: var(--ink); }
.spec-table--prose td .chip, .spec-table--prose td .tick { font-family: var(--font-tech); }

/* ---- The form figures ---- */
.formfigs { display: grid; gap: var(--rule-med); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.formfig {
  display: grid; gap: var(--s-4); margin: 0; padding: var(--s-4);
  border: var(--rule-thin) solid var(--rule-quiet);
  background: var(--sheet); color: var(--ink);
}
.formfig svg { inline-size: 100%; block-size: auto; }
.formfig figcaption { display: grid; gap: var(--s-2); }
.formfig__no {
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-tertiary);
}
.formfig__name {
  font-family: var(--font-display); font-size: var(--t-body); font-weight: 700;
  letter-spacing: var(--tr-tight); line-height: var(--lh-snug); color: var(--ink);
}
.formfig__text { font-size: var(--t-small); line-height: var(--lh-normal); color: var(--ink-secondary); }
.formfig-key {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  list-style: none; padding: 0; margin: 0;
  font-family: var(--font-tech); font-size: var(--t-nano);
  letter-spacing: var(--tr-tech); color: var(--ink-secondary);
}
.formfig-key li { max-width: none; }
.formfig-key b { color: var(--ink); font-weight: 700; }

/* The diagram: objects are filled, barriers are heavy lines. */
.dia-frame { fill: none; stroke: currentColor; stroke-width: 2; }
.dia-bus   { fill: var(--gr-500); }
.dia-unit  { fill: var(--gr-100); stroke: var(--gr-300); stroke-width: .75; }
.dia-term  { fill: none; stroke: var(--gr-300); stroke-width: .75; stroke-dasharray: 3 2; }
.dia-bar   { stroke: currentColor; stroke-width: 3.5; stroke-linecap: square; }
.dia-no    { font-family: var(--font-tech); font-size: 9px; font-weight: 700; fill: var(--ink-tertiary); }

/* projects.html · project-museum.html · downloads.html —
   A five- or six-column register must keep its column shape on a
   phone and scroll inside .table-scroll, rather than crushing a
   project or document title to two words a line. Same device as
   .sched uses on the quote schedule. */
.register-table--wide { min-inline-size: 46rem; }


/* ============================================================
   NARROW-VIEWPORT SAFETY NET
   Dense technical tables and long action labels are the two things
   that break a 375px viewport. Both are handled at the source so no
   page has to remember a wrapper.
   ============================================================ */
@media (max-width: 48rem) {
  /* A table that is NOT already inside .table-scroll scrolls itself.
     Scoping this matters: applying display:block to a wrapped table lets
     its <caption> lay out at the full content width and escape the page. */
  :not(.table-scroll) > .spec-table,
  :not(.table-scroll) > .register-table { display: block; overflow-x: auto; max-inline-size: 100%; }
  .table-scroll { max-inline-size: 100%; }

  /* Long labels wrap instead of forcing the sheet wider. */
  .btn, .wp-block-button__link { white-space: normal; inline-size: 100%; }
  .hero__actions .btn { inline-size: 100%; }
  .spec-strip { row-gap: var(--s-3); }
}

/* Comfortable targets for a hand on a site, not a mouse at a desk. */
@media (pointer: coarse) {
  .filter, .btn--sm, .lang-switch a,
  .wp-block-query-pagination a, .wp-block-query-pagination span.current {
    min-block-size: 2.75rem; display: inline-flex;
    align-items: center; justify-content: center; }
}

/* Nothing may force a flex or grid child wider than its track. */
.lineup > *, .figures > *, .titleblock > *, .sec-head > * { min-inline-size: 0; }
.tb-value, .cubicle__spec, .rt-name { overflow-wrap: anywhere; }


/* A grid track with a fixed minimum is the most common cause of overflow on
   a 320px phone. Guard every track this system defines, and let prose break
   a long unbreakable token rather than push the page sideways. */
.lineup, .figures, .grid, .form-grid, .form-grid--q, .sectors, .photo-slots, .formfigs {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.lineup { grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); }
.figures { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.prose, .prose p, .prose li, .lede, .hero__lede { overflow-wrap: break-word; }


/* A chip is a stamped classification, so it holds one line — but a long
   status label must not push a 320px phone sideways. */
@media (max-width: 30rem) {
  .chip { white-space: normal; }
}


/* ============================================================
   CORE BLOCK SUPPORT
   ------------------------------------------------------------
   theme.json already carries what it can express: the button
   surface, the link colours, the heading scale. Everything below
   is what theme.json has no vocabulary for — hairlines, tinted
   thead, hover tints, the chevron, the pagination pills. Existing
   tokens only; no colour is invented here.

   These are written so a block sitting inside a bespoke component
   inherits the component, not a second opinion: nothing here uses
   !important and nothing here is more specific than it needs to be.
   ============================================================ */

/* ---------- core/button — the same pill as .btn ----------
   theme.json styles.elements.button covers colour, radius and the
   focus ring. What it cannot say is the minimum target height, the
   icon gap or the hover surface, so those live here. */
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem;
  padding: .8rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0; text-transform: none;
  text-decoration: none; text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.wp-block-button__link:hover { background: #9E1019; border-color: #9E1019; color: #fff; }

/* The outline style is the ghost button: white on the sheet, teal
   type, hairline border — never a red outline, which would read as
   an error state. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--at-white); color: var(--teal);
  border: 1.5px solid var(--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--teal-l); border-color: var(--teal-l); color: var(--teal-d);
}
.wp-block-button.is-style-outline .wp-block-button__link:where(:not(.has-text-color)) { color: var(--teal); }

.wp-block-button__link svg { width: 1em; height: 1em; flex: none; }

/* ---------- core/table — the register treatment ----------
   Editors compose specification tables with core/table, so it has
   to arrive already looking like .spec-table rather than needing a
   custom class nobody will remember to add. */
.wp-block-table { margin-block: var(--s-8); }
.wp-block-table > table {
  inline-size: 100%; border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums lining-nums;
}
.wp-block-table :is(th, td) {
  text-align: start; vertical-align: top;
  padding: var(--s-4) var(--s-5);
  border: 0; border-block-end: 1px solid var(--line);
}
.wp-block-table thead { border-block-end: 0; }
.wp-block-table thead th {
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-tertiary); background: var(--bg-2);
}
.wp-block-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.wp-block-table td { color: var(--ink-secondary); }
.wp-block-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.wp-block-table tbody tr:hover { background: var(--gr-050); }
.wp-block-table tfoot { border-block-start: var(--rule-heavy) solid var(--rule-ink); }
.wp-block-table tfoot :is(th, td) { border-block-end: 0; font-weight: 700; color: var(--ink); }
.wp-block-table figcaption {
  margin-block-start: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-tertiary);
}
/* Core's striped style would fight the hairline register. Keep the
   stripe quiet enough that the rules still carry the rows. */
.wp-block-table.is-style-stripes { border-block-end: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--bg-2); }
/* A wide table scrolls inside itself rather than pushing the page —
   the same device .table-scroll and .sched use. */
.wp-block-table { overflow-x: auto; max-inline-size: 100%; }

/* ---------- core/navigation — the same rail links ---------- */
.wp-block-navigation { font-family: var(--font-display); }
.wp-block-navigation .wp-block-navigation-item__content {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  background: var(--teal-l); color: var(--teal-d); text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content:focus-visible { text-decoration: none; }

/* The submenu is a card, matching .sheet. */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--at-white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh);
  padding: var(--s-2);
  min-inline-size: 14rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; }

/* The responsive overlay is the drawer: white ground, display face,
   ruled entries. */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--at-white); padding: var(--s-5) var(--sheet-gutter); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: var(--s-4) 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--t-h3); font-weight: 700; color: var(--ink);
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--teal); }

/* ---------- core/query-pagination — .filter pills ---------- */
.wp-block-query-pagination {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-6);
  border-block-start: var(--rule-thin) solid var(--rule-quiet);
}
.wp-block-query-pagination :is(a, span.current, .wp-block-query-pagination-numbers .page-numbers) {
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--teal); background: var(--at-white);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.wp-block-query-pagination a:hover {
  border-color: var(--gr-300); background: var(--teal-l); color: var(--teal-d);
}
.wp-block-query-pagination :is(span.current, .page-numbers.current) {
  background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700;
}
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; color: var(--ink-tertiary); }
.wp-block-query-pagination-next { margin-inline-start: auto; }

/* ---------- core/post-title ---------- */
.wp-block-post-title {
  font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: 800;
  line-height: var(--lh-tight); letter-spacing: var(--tr-display);
  color: var(--ink); text-wrap: balance;
  max-width: 24ch;
}
.wp-block-post-title :is(a, a:hover) { color: inherit; text-decoration: none; }
/* Inside a register line the title is a row heading, not a banner. */
.register-table .wp-block-post-title,
.idx .wp-block-post-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: var(--tr-tight); max-width: 44ch; }

/* ---------- core/group on the tinted surface ----------
   The tint is the site's secondary ground — a band that separates
   sections. It carries the hairlines a .sheet would, without the
   card shadow, because a full-bleed band is not a card. */
.wp-block-group.has-tint-background-color {
  border-block: 1px solid var(--line);
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  color: var(--ink-secondary);
}
.wp-block-group.has-tint-background-color :is(h2, h3, h4) { color: var(--ink); }
/* Nested inside a card it becomes .sheet--tint: rounded, no shadow,
   no bleeding rules. */
.sheet .wp-block-group.has-tint-background-color,
.wp-block-group.has-tint-background-color.is-style-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sheet-pad); box-shadow: none;
}

/* ---------- core/details — the .qa accordion ----------
   Core supplies no marker of its own once list-style is cleared, so
   the chevron is drawn with a border box that can be rotated. A
   unicode arrow cannot be, and RTL must mirror before rotating. */
.wp-block-details {
  border-block-end: var(--rule-thin) solid var(--rule-quiet);
  padding: 0;
}
.wp-block-details:first-of-type { border-block-start: var(--rule-med) solid var(--rule-ink); }
.wp-block-details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding-block: var(--s-5);
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 700; letter-spacing: var(--tr-tight); line-height: 1.3;
  color: var(--ink);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }
.wp-block-details > summary:hover { color: var(--red-600); }
.wp-block-details > summary::after {
  content: ""; flex: none;
  inline-size: 0.55rem; block-size: 0.55rem;
  margin-inline-start: auto; margin-block-start: 0.45em;
  border-block-start: 2px solid var(--red-600);
  border-inline-end: 2px solid var(--red-600);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.wp-block-details[open] > summary::after { transform: rotate(135deg); }
[dir="rtl"] .wp-block-details > summary::after { transform: rotate(-135deg); }
[dir="rtl"] .wp-block-details[open] > summary::after { transform: rotate(-45deg); }
.wp-block-details > :not(summary) { padding-block-end: var(--s-8); }
.wp-block-details :is(p, li) { color: var(--ink-secondary); line-height: var(--lh-loose); }
.wp-block-details li::marker { color: var(--at-red); }

/* ---------- core/separator ----------
   A section break is a hairline, and the wide variant is the heavy
   rule the register sections use. Never a decorative dot row. */
.wp-block-separator {
  border: 0; border-block-start: var(--rule-thin) solid var(--rule-quiet);
  margin-block: var(--s-10); opacity: 1;
  color: var(--line);
}
.wp-block-separator.is-style-wide { border-block-start-width: var(--rule-heavy); border-block-start-color: var(--rule-ink); }
.wp-block-separator.has-red-color, .wp-block-separator.has-red-background-color {
  border-block-start-width: var(--rule-heavy); border-block-start-color: var(--at-red);
}
.wp-block-separator.is-style-dots { border: 0; color: var(--ink-tertiary); }

/* ---------- core/image caption ----------
   The same voice as .ph__cap: quiet, small, above a hairline. */
.wp-block-image figcaption {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-nano); line-height: 1.5;
  color: var(--ink-tertiary);
  text-align: start;
}
.wp-block-image figcaption b, .wp-block-image figcaption strong {
  font-family: var(--font-display); color: var(--ink); font-weight: 700;
}
.wp-block-image img { border-radius: var(--r-md); }
.wp-block-image.is-style-rounded img { border-radius: var(--r-lg); }

/* ============================================================
   REGISTER TABLE COLUMN RHYTHM
   Project names are long ("Four Ministry of Health hospitals,
   El Minya"). Without a floor on the first column the browser
   gives it the least room and stacks it one word per line.
   ============================================================ */
.arabtech-register .register-table { table-layout: auto; }
.arabtech-register .register-table th:first-child,
.arabtech-register .register-table td:first-child { min-inline-size: 13rem; }
.arabtech-register .register-table th:nth-child(2),
.arabtech-register .register-table td:nth-child(2) { inline-size: 1%; white-space: nowrap; }
.arabtech-register .register-table td:nth-child(3) { min-inline-size: 12rem; }