:root {
  --bg: #f4f5f7; --surface: #fff; --ink: #1b2731; --muted: #5d6675; --line: #dde1e7;
  /* From the logo: navy lettering and compass orange. */
  --brand: #1b2731; --brand-ink: #fff; --accent: #f86400; --link: #1f5fa8;
  --red: #b3261e; --red-bg: #fdecea; --amber: #8a5a00; --amber-bg: #fff4d6; --amber-line: #e6b740;
  --green: #1e6b36; --green-bg: #e6f4ea; --grey-bg: #eceef1;
  --amber-ink: #5c3c00; --head-bg: #fafbfc; --hover-bg: #eef3fb; --accent-bg: #fff8f2;
  --radius: 8px; --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}
/* Dark mode: switched with the button in the top bar (static/theme.js). Screen only, so
   printed sheets and labels always come out dark-on-white. */
@media screen {
  :root[data-theme="dark"] {
    --bg: #12171d; --surface: #1b222b; --ink: #e4e8ed; --muted: #9ba5b2; --line: #313b47;
    --brand: #26333f; --brand-ink: #fff; --link: #82b4ee;
    --red: #f28b82; --red-bg: #3b1f1d; --amber: #e9b95c; --amber-bg: #3a2f14; --amber-line: #b98b2c;
    --green: #81c995; --green-bg: #173021; --grey-bg: #27303a;
    --amber-ink: #f1d08a; --head-bg: #212a34; --hover-bg: #23303e; --accent-bg: #3a2414;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.45; }
a { color: var(--link); }
h1 { font-size: 1.6rem; margin: .2rem 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
code { background: var(--grey-bg); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 1.2rem; padding: .5rem 1.2rem;
  background: var(--brand); color: var(--brand-ink); position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid var(--accent); }
.brand { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; white-space: nowrap; }
.brand-mark { display: block; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.bw-hazmat { color: var(--accent); font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; }
.bw-compass { color: #fff; font-weight: 700; font-size: .62rem; letter-spacing: .42em; margin-top: 2px; }
.print-brand { display: none; }
.login-logo { display: block; margin: 0 auto 1.2rem; max-width: 70%; height: auto; }
.topsearch { flex: 1; max-width: 720px; }
.topsearch input { width: 100%; padding: .55rem .8rem; font-size: 1.05rem; border: 0; border-radius: 6px; }
.topnav { display: flex; align-items: center; gap: 1rem; margin-left: auto; white-space: nowrap; }
.topnav a, .topnav .linklike { color: var(--brand-ink); text-decoration: none; }
.topnav form { margin: 0; }
.who { opacity: .8; font-size: .9rem; }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

.page { max-width: 1400px; margin: 0 auto; padding: 1.2rem; }
.page.narrow { max-width: 420px; padding-top: 4rem; }

/* Cards and layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.h1-sub { font-weight: 400; color: var(--muted); font-size: 1.15rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.muted, .sub { color: var(--muted); }
.sub { font-size: .85rem; display: block; }
td.sub, th.sub { display: table-cell; }
.warn { color: var(--amber); }
.section-title { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.count { background: var(--grey-bg); border-radius: 10px; padding: 0 .5rem; font-size: .85rem; color: var(--muted); }
.empty { color: var(--muted); padding: 1rem 0; }
.intro { margin: 1rem 0 1.5rem; }

/* Status: always colour + icon + words */
.banner { border-radius: var(--radius); padding: .65rem .9rem; margin: 0 0 1rem; border-left: 5px solid; }
.banner.red { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.banner.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.banner.green { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.banner.strong { font-size: 1.05rem; }
.pill { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.pill.big { font-size: .95rem; padding: .3rem .9rem; }
.pill.red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }
.pill.amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.pill.green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.pill.grey { background: var(--grey-bg); color: var(--muted); border: 1px solid var(--line); }

/* Results tables */
table.results { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.results th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: var(--head-bg); padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.results td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.results.compact td { padding: .35rem .6rem; }
.result-row { cursor: pointer; }
.result-row:hover, .result-row.active { background: var(--hover-bg); }
.result-row.active { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Classification block */
.ident { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ident-main { flex: 1 1 260px; min-width: 0; }
.ident .labels { flex: 1 1 280px; }
.un { font-size: 2rem; font-weight: 800; letter-spacing: .02em; }
.psn { font-size: 1.15rem; font-weight: 600; margin-bottom: .6rem; }
.erg-guide { font-size: 1.15rem; margin: .2rem 0 .3rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.erg-names { margin: 0 0 .5rem; padding-left: 1.1rem; }
.un-table tr.dim td { color: var(--muted); }
.un-pi-pages { display: grid; gap: 1rem; margin: 1rem 0; }
.un-pi-page { margin: 0; }
.un-pi-page img { display: block; width: 100%; max-width: 900px; height: auto; background: #fff;
  border: 1px solid var(--line); border-radius: 4px; }
.un-pi-page figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.ext-link { font-size: .8rem; font-weight: 400; letter-spacing: 0; vertical-align: middle; margin-left: .4rem; }
.facts { display: grid; grid-template-columns: repeat(4, auto); gap: .4rem 1.4rem; margin: 0; }
.facts dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.facts dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.labels { max-width: 520px; }
.labels-title { font-weight: 600; margin-bottom: .3rem; }
.label-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.label { margin: 0; width: 150px; text-align: center; }
.label img { display: block; margin: 0 auto .3rem; }
.label figcaption { font-size: .85rem; }
.label-missing { width: 120px; height: 120px; margin: 0 auto .3rem; transform: rotate(45deg) scale(.72);
  border: 3px dashed var(--amber-line); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--amber); }
.label-missing { text-align: center; }
.air-labels { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.air-labels .label-row { align-items: flex-start; }
.air-note { flex: 1 1 200px; margin: 0; }
.cao-img { object-fit: contain; }

table.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; font-weight: 500; color: var(--muted); padding: .3rem .6rem .3rem 0; width: 45%; vertical-align: top; }
.kv td { padding: .3rem 0; }
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--line); }
.sps { margin: 0; }
.sps > div { display: grid; grid-template-columns: 4rem 1fr; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.sps dt { font-weight: 700; }
.sps dd { margin: 0; }
.sps summary { cursor: pointer; }
.sp-full { white-space: pre-line; margin-top: .3rem; }
.source { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .5rem; margin: 1rem 0 0; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { padding: .45rem 0; border-top: 1px solid var(--line); }
.docs li:first-child { border-top: 0; }
.doc-type { font-weight: 600; margin-right: .4rem; }

/* Forms */
.login label { display: block; margin: .6rem 0; font-weight: 600; }
.login input { display: block; width: 100%; padding: .55rem; font-size: 1rem; margin-top: .25rem;
  border: 1px solid var(--line); border-radius: 6px; }
button.primary { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 6px;
  padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; margin-top: .6rem; }
.inline-search { display: flex; gap: .5rem; margin: .8rem 0 1rem; max-width: 560px; }
.inline-search input { flex: 1; padding: .55rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.inline-search button { margin-top: 0; }

.stats { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1.1rem; min-width: 150px; }
.stat-n { font-size: 1.6rem; font-weight: 700; }
.stat-l { color: var(--muted); font-size: .85rem; }

/* Buttons */
.button, button.secondary, button.small { display: inline-block; border-radius: 6px; cursor: pointer;
  font: inherit; text-decoration: none; }
.button.primary { background: var(--brand); color: var(--brand-ink); padding: .6rem 1.2rem; }
.button.secondary, button.secondary { background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); padding: .45rem .9rem; font-size: .9rem; }
button.small { background: var(--surface); border: 1px solid var(--line); padding: .25rem .7rem; font-size: .85rem; }
button.small.ok { border-color: var(--green); color: var(--green); font-weight: 600; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Product page: shipment call to action, data gaps */
.ship-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }
.gap-list { list-style: none; margin: 0; padding: 0; }
.gap-list li { padding: .3rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.gap-list li:first-child { border-top: 0; }
.gap-list li.red { color: var(--red); }
.gap-list li.amber { color: var(--amber-ink); }

/* Shipment form */
.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.mode-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; cursor: pointer;
  display: flex; flex-direction: column; gap: .15rem; }
.mode-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--accent-bg); }
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.mode-name { font-weight: 700; }
.field-row { margin: .6rem 0; }
.field-row[hidden] { display: none; }
.ship-form label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.ship-form label.check { flex-direction: row; align-items: center; gap: .5rem; }
.ship-form input:not([type]), .ship-form input[inputmode], .ship-form select, .initials-bar input {
  padding: .45rem .55rem; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 6px; max-width: 420px; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1.2rem; }
.qty { display: flex; gap: .4rem; }
.qty input { width: 9rem; }
.qty-unit { align-self: center; font-weight: 400; }
.submit-row { display: flex; align-items: flex-end; gap: 1rem; }
.label-print-row { display: flex; align-items: center; gap: .8rem; margin-top: .7rem;
  padding-top: .7rem; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.label-print-row .sub { display: inline; flex: 1 1 260px; }
input.initials { width: 7rem; text-transform: uppercase; }

/* Checklist */
.status-banner { border-radius: var(--radius); padding: .8rem 1.1rem; margin-bottom: 1rem; border: 2px solid; }
.status-banner .status-word { font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; }
.status-banner ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.status-banner.red { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.status-banner.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.status-banner.green { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.chip { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .7rem; background: var(--surface);
  border-top: 4px solid var(--line); }
.chip.red { border-top-color: var(--red); } .chip.amber { border-top-color: var(--amber-line); }
.chip.green { border-top-color: var(--green); }
.chip-l { display: block; font-size: .75rem; text-transform: uppercase; color: var(--muted); }
.chip-v { font-weight: 700; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.2rem; margin: 0; }
.scenario-grid dt { font-size: .75rem; text-transform: uppercase; color: var(--muted); }
.scenario-grid dd { margin: 0; font-weight: 600; }
.initials-bar { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.initials-bar label { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: flex; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.item:first-child { border-top: 0; }
.item .box { flex: 0 0 1.6rem; height: 1.6rem; border: 2px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; }
.item.verified .box, .item.completed .box { border-color: var(--green); color: var(--green); }
.item.missing .box { border-color: var(--amber-line); color: var(--amber); }
.item.blocking .box { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.item.blocking .item-text { color: var(--red); font-weight: 700; }
.item.not_applicable .item-text { color: var(--muted); text-decoration: line-through; }
.item-body { flex: 1; min-width: 0; }
.item-text { white-space: pre-line; }
.item-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .25rem; font-size: .88rem; }
.sub.inline { display: inline; }
.note { font-style: italic; color: var(--muted); }
.item-form { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.item-form input { flex: 0 1 18rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .88rem; }
.locked { font-style: italic; margin-top: .25rem; }
.print-only { display: none; }

/* Regulation links and viewer */
a.reg { color: var(--link); text-decoration: underline dotted; text-underline-offset: 2px; }
a.reg:hover { text-decoration-style: solid; background: var(--hover-bg); }
th a.reg, dt a.reg { color: inherit; }
.reg-panel { position: fixed; top: 52px; right: 0; bottom: 0; width: min(48vw, 780px);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgba(0,0,0,.08);
  display: flex; flex-direction: column; z-index: 20; outline: none; }
.reg-panel[hidden] { display: none; }
body.reg-open main.page { margin-right: min(48vw, 780px); max-width: none; }
body.reg-open .product-grid { grid-template-columns: 1fr; }  /* too narrow for two columns */
body.reg-open .facts { grid-template-columns: repeat(2, auto); }
.cfr-text .hit, .cfr-text [id] { scroll-margin-top: 2.5rem; }
main .cfr-text .hit, main .cfr-text [id] { scroll-margin-top: 5rem; }  /* clear the sticky top bar */
.reg-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--head-bg); }
.reg-panel-head h2 { margin: .1rem 0 0; font-size: 1.05rem; }
.reg-panel-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; font-size: .9rem; }
.reg-close { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer;
  font-size: 1rem; padding: .15rem .55rem; }
.reg-body { overflow-y: auto; padding: .4rem 1.1rem 2rem; flex: 1; scroll-padding-top: 1rem; }
.reg-loading { padding: 1rem; color: var(--muted); }
.cfr-text p { margin: .5rem 0; }
.cfr-text h3 { margin: 1rem 0 .4rem; }
.cfr-text .hit, .cfr-text :target { background: var(--amber-bg); outline: 2px solid var(--amber-line);
  outline-offset: 2px; border-radius: 3px; }
.cfr-text .cita { font-size: .8rem; color: var(--muted); }
.cfr-text .extract { border-left: 3px solid var(--line); margin: .5rem 0; padding-left: .8rem; }
.cfr-text .cfr-note { background: var(--grey-bg); padding: .4rem .7rem; border-radius: 6px; }
.cfr-text .figure-note { color: var(--muted); font-style: italic; }
.table-wrap { overflow-x: auto; margin: .6rem 0; }
.cfr-table { border-collapse: collapse; font-size: .85rem; }
.cfr-table th, .cfr-table td { border: 1px solid var(--line); padding: .25rem .45rem; vertical-align: top; text-align: left; }
.cfr-table th { background: var(--head-bg); }
.cfr-table caption { text-align: left; font-weight: 600; padding: .3rem 0; }
.sec-list { columns: 2; column-gap: 2rem; padding-left: 1.1rem; margin: .5rem 0 0; }
.sec-list li { break-inside: avoid; margin: .15rem 0; }
.cfr-index details > summary { cursor: pointer; }

/* Admin classify screen: the document beside the form */
.classify-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.doc-pane { position: sticky; top: .5rem; }
.doc-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.doc-frame { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.form-pane label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; margin: .4rem 0; }
.form-pane label.check { flex-direction: row; align-items: center; gap: .5rem; }
.form-pane input:not([type]), .form-pane input[inputmode], .form-pane select, .form-pane textarea {
  padding: .45rem .55rem; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 6px; }
.form-pane .pick label { display: inline; font-weight: 400; margin: 0; }
.form-pane .field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-pane .field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.entry-search { display: flex; gap: .4rem; align-items: center; }
.entry-search input[name="q"] { flex: 1; }
.classify-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; margin-top: .7rem;
  padding-top: .7rem; border-top: 1px dashed var(--line); }
.classify-save label { margin: 0; }
form.inline { display: inline; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.filters a { text-decoration: none; }

/* Below this width the full top menu and the search box don't fit on one row: the search
   box moves to its own row instead of pushing the menu off the screen. */
@media (max-width: 1200px) {
  .topbar { flex-wrap: wrap; }
  .topsearch { order: 3; flex-basis: 100%; max-width: none; }
}

/* Tablet / narrow: one column, bigger touch targets */
@media (max-width: 900px) {
  .product-grid, .ident, .classify-grid { grid-template-columns: 1fr; }
  .doc-pane { position: static; }
  .doc-frame { height: 60vh; }
  .form-pane .field-grid.two, .form-pane .field-grid.three { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .topsearch { order: 3; flex-basis: 100%; max-width: none; }
  .topnav { flex-wrap: wrap; white-space: normal; gap: .4rem .9rem; margin-left: 0; }
  .product-head { flex-wrap: wrap; }
  .h1-sub { display: block; }
  .results th:nth-child(n+6), .results td:nth-child(n+6) { display: none; }
  .results td { padding: .8rem .6rem; }
  .facts { grid-template-columns: repeat(2, auto); }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid, .scenario-grid { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-cta { flex-direction: column; align-items: flex-start; }
  .reg-panel { width: 100vw; top: 0; }
  body.reg-open main.page { margin-right: 0; }
  .sec-list { columns: 1; }
}

/* Print: the product reference sheet */
@media print {
  .topbar, .topnav, .reg-panel { display: none; }
  .print-brand { display: block; margin: 0 0 .5rem; }
  .no-print, .ship-cta { display: none !important; }
  .print-only { display: block; }
  .chips { grid-template-columns: repeat(5, 1fr); }
  .status-banner, .chip, .pill, .item .box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .item { break-inside: avoid; }
  a.reg { text-decoration: none; color: inherit; }
  body.reg-open main.page { margin-right: 0; }
  body { background: #fff; }
  .card { border-color: #999; break-inside: avoid; }
  details > summary { list-style: none; }
  .product-grid { grid-template-columns: 1fr; }
}
.carrier-list { list-style: none; padding: 0; margin: .3rem 0 .8rem; display: grid; gap: .45rem; }
.carrier-list details { margin-top: .2rem; }
.carrier-detail { white-space: pre-line; }
.item-detail { white-space: pre-line; }
.legal-note { font-size: .75rem; color: var(--muted); margin: 2rem 0 0; }
.air-table td { vertical-align: top; }
.air-printed { margin: .5rem 0; }
.air-printed img { display: block; width: 100%; max-width: 980px; height: auto; background: #fff; border: 1px solid var(--line); }
.air-sp-text, .ocr-text pre { white-space: pre-line; }
.ocr-text pre { font-family: inherit; font-size: .85rem; background: var(--grey-bg); padding: .6rem; border-radius: 4px; max-height: 24rem; overflow: auto; }
.iata-hits { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.iata-hits li { margin: 0 0 .7rem; }
.iata-hits mark, .doc-hits mark, .ask-text mark { background: var(--grey-bg); color: inherit; font-weight: 600; padding: 0 .1em; }
.doc-snippet { margin-top: .25rem; }
.links-grid { line-height: 1.9; }

/* --- Ask ------------------------------------------------------------------- */
.ask-form { display: flex; gap: .5rem; max-width: 46rem; }
.ask-form input { flex: 1; font-size: 1.05rem; padding: .55rem .7rem; }
.ask-read .pill { margin-right: .15rem; }
.ask-entry .kv.compact th { white-space: nowrap; }
.ask-entry .kv.compact td { padding-right: 1.2rem; }
.ask-h { margin-top: 1.6rem; }
.ask-group h3 { margin: 0; font-size: 1rem; }
.ask-passages { margin: 0; padding-left: 1.3rem; }
.ask-passages li { margin: .1rem 0 .9rem; }
.ask-where { font-weight: 600; }
.ask-text { line-height: 1.45; }
.ask-sps summary { cursor: pointer; color: var(--muted); margin: .4rem 0; }

/* --- Document viewer (page pictures) ------------------------------------------ */
.doc-pages { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .4rem 0 1rem; color: var(--muted); }
.doc-pages a { padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.doc-pages a.current { background: var(--grey-bg); font-weight: 600; }
.doc-view { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.doc-page { margin: 0; width: 100%; max-width: 980px; scroll-margin-top: 1rem; }
.doc-page img { display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.doc-page figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
/* Invisible words over the page picture (static/doc_text.js): selectable, copyable, found by
   Ctrl+F. cqw (1% of the page width) sizes the text with the picture. */
.page-box { position: relative; container-type: inline-size; }
.page-box img { user-select: none; -webkit-user-select: none; }
.text-layer { position: absolute; inset: 1px; overflow: hidden; line-height: 1;
  font-family: Arial, Helvetica, sans-serif; color: transparent; }
.text-layer span { position: absolute; white-space: pre; transform-origin: 0 0; cursor: text; }
.text-layer ::selection { background: rgba(30, 110, 255, .32); color: transparent; }
body.doc-embed { padding: .6rem; background: var(--grey-bg); }
.doc-review { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .35rem 0 .2rem; }
.doc-review input[name=initials] { width: 9.5rem; padding: .2rem .4rem; }
.doc-review button.small { padding: .2rem .7rem; font-size: .85rem; }
.packing-option { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin: .8rem 0; display: flex; flex-direction: column; gap: .3rem; }
.packing-option legend { font-weight: 600; padding: 0 .3rem; }

/* --- Carriers, rules, incidents ------------------------------------------------- */
.carrier-block { border-top: 1px solid var(--line); padding: .7rem 0; }
.carrier-block h3 { margin: 0 0 .3rem; font-size: 1rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.inline-form input:not([type=file]), .inline-form select { padding: .3rem .45rem; }
.add-carrier { border-top: 1px solid var(--line); padding-top: .8rem; }
.rule-form .wide { grid-column: 1 / -1; }
.rule-form textarea, .rule-form input:not([type=checkbox]), .rule-form select { width: 100%; }
@media (max-width: 760px) { .rule-form { grid-template-columns: 1fr; } }

/* --- EX / CA number on the shipment form ------------------------------------------ */
.ex-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .8rem 1.2rem; align-items: start;
  border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; margin: .8rem 0; }
.ex-letter { margin-bottom: .35rem; }
.ex-label { display: flex; flex-direction: column; align-items: center; gap: .3rem; max-width: 12rem; text-align: center; }
.label.small figcaption { font-size: .75rem; }
@media (max-width: 860px) { .ex-box { grid-template-columns: 1fr; } }