/* Skin: Sectional Chart. Chart-blue shell on a pale chart ground; in-bond legs drawn as magenta airways between boxed port codes. */
:root {
  --chart-blue: oklch(42% 0.11 255); --chart-blue-deep: oklch(33% 0.1 255); --chart-tint: oklch(94% 0.03 245); --route: oklch(48% 0.2 350);
  --bg: oklch(96% 0.012 245); --surface: oklch(99% 0.004 245); --ink: oklch(22% 0.03 255); --muted: oklch(44% 0.035 255);
  --line: oklch(88% 0.02 245); --line-strong: oklch(74% 0.04 250);
  --accent: var(--chart-blue); --accent-ink: oklch(99% 0.004 245); --focus: oklch(52% 0.2 350);
  --radius: 3px;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --rule: var(--line-strong);
  --sheet-shadow: 0 1px 2px color-mix(in oklab, var(--chart-blue) 18%, transparent);
  --btn-weight: 650; --btn-hover: var(--chart-tint);
  --sel-bg: color-mix(in oklab, var(--route) 22%, white);

  --top-bg: var(--chart-blue); --top-ink: oklch(99% 0.004 245); --top-border: 0 solid transparent;
  --title-size: 17px; --title-case: none; --title-track: .01em; --title-weight: 650;
  --label-size: 11px; --label-case: uppercase; --label-track: .06em; --label-weight: 650;
  --switch-on-bg: oklch(99% 0.004 245); --switch-on-ink: var(--chart-blue-deep);

  --tab-r: 0px;
  --tab-all-bg: transparent; --tab-hold-bg: transparent; --tab-exam-bg: transparent; --tab-rel-bg: transparent; --tab-other-bg: transparent;
  --tab-on-bg: transparent; --tab-on-ink: var(--chart-blue-deep);
  --tabs-gap: 2px;

  --head-bg: var(--chart-tint); --head-ink: var(--chart-blue-deep); --head-pad: 9px 9px; --head-size: 11px;
  --head-case: uppercase; --head-track: .06em; --head-weight: 650;
  --cell-pad: 10px 9px;
  --row-hold: color-mix(in oklab, var(--hold-bg) 55%, var(--surface));
  --row-exam: color-mix(in oklab, var(--exam-bg) 55%, var(--surface));
  --row-na: color-mix(in oklab, var(--na-bg) 70%, var(--surface));
  --row-open: color-mix(in oklab, var(--chart-tint) 80%, var(--surface));
  --row-detail: color-mix(in oklab, var(--chart-tint) 45%, var(--surface));
}

body {
  font-size: 14px; background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M160 0V160M0 160H160' fill='none' stroke='%232c5d96' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
}
.badge-mock { background: var(--surface); color: var(--chart-blue-deep); border-radius: var(--radius); }
.lang { border: 1px solid var(--chart-blue-deep); border-right: 0; background: var(--surface); }
.lang button { background: var(--surface); color: var(--chart-blue-deep); font-weight: 650; }
.lang button + button { border-top-color: var(--line-strong); }
.lang button[aria-pressed="true"] { background: var(--chart-blue-deep); color: oklch(99% 0.004 245); }

.sheet { border-top: 3px solid var(--chart-blue); }
.sheet-rose { border-top-color: var(--route); }
.btn.primary:disabled { background: var(--chart-tint); color: var(--muted); border-color: var(--line-strong); }

/* underline tabs */
.filters { border-bottom: 1px solid var(--line-strong); gap: 2px; margin-bottom: 12px; }
.fchip { border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 12px 6px; margin-bottom: -1px; font-weight: 650; color: var(--muted); }
.fchip[aria-pressed="true"] { border-bottom-color: var(--route); color: var(--chart-blue-deep); }
.fchip:hover:not([aria-pressed="true"]) { background: var(--chart-tint); filter: none; }
.ports-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 14px 6px; color: var(--muted); }
.ports-tabs button[aria-selected="true"] { border-bottom-color: var(--route); color: var(--chart-blue-deep); }
.ports-tabs { border-bottom: 1px solid var(--line-strong); }

.grid > thead > tr > th { border-bottom: 1px solid var(--chart-blue); }
.grid tbody tr:last-child td { border-bottom: 0; }

/* identifiers: prefix, serial and check digit share one colour, font and spacing */
.mawb { font-size: 14.5px; font-weight: 700; letter-spacing: .03em; }
.pc { display: inline-block; margin-right: 6px; padding: 0 5px; border: 1.5px solid var(--chart-blue); border-radius: var(--radius); background: var(--surface); color: var(--chart-blue-deep); font: 700 12.5px/1.45 var(--mono); }

/* signature: the in-bond leg drawn as a magenta airway between two boxed port codes */
.rp { padding: 1px 6px; border: 1.5px solid var(--chart-blue); border-radius: var(--radius); background: var(--surface); color: var(--chart-blue-deep); font: 700 13px/1.5 var(--mono); }
.route { gap: 0; }
.ra { position: relative; flex: 0 0 34px; height: 2px; margin: 0 8px 0 2px; font-size: 0; background: var(--route); }
.ra::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 8px solid var(--route); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ra::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--route); }

.pct-bar { background: var(--chart-tint); height: 7px; border-radius: 0; }
.pct-bar > i { border-radius: 0; }
.chip, .bchip, .tag { border-radius: var(--radius); }
.mini { border-color: var(--line-strong); }
.mini th { color: var(--chart-blue-deep); }