/* Shared structure of the redesigned pages. Loaded after styles.css, before one skin-*.css that sets the tokens below. */

:root {
  --bg: oklch(97% 0.004 250); --surface: #fff; --ink: oklch(22% 0.02 255); --muted: oklch(45% 0.02 255);
  --line: oklch(90% 0.008 250); --line-strong: oklch(80% 0.012 250);
  --accent: oklch(46% 0.14 258); --accent-ink: #fff; --focus: oklch(48% 0.18 255);
  --tint: color-mix(in oklab, var(--ink) 5%, transparent);
  --radius: 8px;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --rule: var(--line-strong);            /* outline of sheets, tables, buttons */
  --edge-w: 0px;                         /* coloured top edge on rail sheets */
  --edge-green: transparent; --edge-rose: transparent; --edge-blue: transparent;
  --sheet-shadow: none;
  --btn-shadow: none; --btn-weight: 600; --btn-hover: var(--tint);
  --sel-bg: color-mix(in oklab, var(--accent) 22%, white); --sel-ink: var(--ink);

  --top-bg: var(--surface); --top-ink: var(--ink); --top-border: 1px solid var(--line);
  --title-size: 18px; --title-case: none; --title-track: -0.01em; --title-weight: 650;
  --label-size: 12px; --label-case: none; --label-track: 0; --label-weight: 600;

  --tab-r: var(--radius);
  --tab-all-bg: var(--surface); --tab-all-ink: var(--ink);
  --tab-hold-bg: var(--surface); --tab-hold-ink: var(--ink);
  --tab-exam-bg: var(--surface); --tab-exam-ink: var(--ink);
  --tab-rel-bg: var(--surface); --tab-rel-ink: var(--ink);
  --tab-other-bg: var(--surface); --tab-other-ink: var(--ink);
  --tab-on-bg: var(--ink); --tab-on-ink: var(--surface);
  --tabs-gap: 6px;

  --head-bg: var(--bg); --head-ink: var(--muted); --head-pad: 10px 9px; --head-size: 12.5px;
  --head-case: none; --head-track: 0; --head-weight: 600;
  --cell-x: 0 solid transparent; --cell-y: 1px solid var(--line); --cell-pad: 11px 9px;
  --row-hold: transparent; --row-exam: transparent; --row-na: transparent; --row-open: color-mix(in oklab, var(--accent) 5%, transparent); --row-detail: var(--tint);
}

body { caret-color: var(--ink); }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }

/* ---------- header ---------- */
.top { background: var(--top-bg); color: var(--top-ink); border-bottom: var(--top-border); }
.top-inner { max-width: none; padding: 12px 20px 10px; gap: 10px 18px; align-items: center; }
h1 { font-size: var(--title-size); font-weight: var(--title-weight); letter-spacing: var(--title-track); text-transform: var(--title-case); }
.top-sub { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: inherit; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-mock { margin-left: 0; }
.nav-link { text-decoration: none; padding: 5px 12px; font-size: 13px; }

.lang { border-radius: var(--radius) 0 0 var(--radius); }

/* ---------- layout: sticky entry rail + results ---------- */
.shell { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 20px; padding: 20px 60px 56px 20px; align-items: start; max-width: 2300px; margin: 0 auto; }
.rail { position: sticky; top: 14px; display: grid; gap: 16px; max-height: calc(100dvh - 28px); overflow-y: auto; padding: 0 4px 6px 0; scrollbar-color: var(--line) transparent; }
.stage { min-width: 0; margin: 0; padding: 0; max-width: none; width: auto; }

.sheet {
  background: var(--surface); border: 1px solid var(--rule); border-top-width: max(var(--edge-w), 1px); border-radius: var(--radius); padding: 14px 16px 16px;
  box-shadow: var(--sheet-shadow);
}
.sheet-green { border-top-color: var(--edge-green); }
.sheet-rose { border-top-color: var(--edge-rose); }
.sheet-blue { border-top-color: var(--edge-blue); }

@keyframes sheet-in { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rail .sheet, .blank-sheet { animation: sheet-in .38s cubic-bezier(.22, 1, .36, 1) both; }
.rail .sheet + .sheet { animation-delay: .07s; }
@media (prefers-reduced-motion: reduce) { .rail .sheet, .blank-sheet { animation: none; } }

.field label, .batch-date span {
  font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); margin-bottom: 6px;
}
.input-block, .input-block.collapsed { padding: 14px 16px 16px; }
.input-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 0; }
.hint { flex: 0 0 auto; width: auto; max-width: none; font-size: 12px; margin: 2px 0 0; }
.collapsed-bar { flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.parse-line:empty, .parse-issues:empty { display: none; }

textarea {
  font: 14px/1.7 var(--mono); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; min-height: 150px;
  background: var(--bg); color: var(--ink);
}
textarea:focus { background: var(--surface); outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--rule); }
textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); font-family: system-ui, sans-serif; font-style: italic; font-size: 13px; opacity: 1; }

.btn {
  font-weight: var(--btn-weight); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: var(--btn-shadow);
}
.btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--rule); }
.btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); padding: 11px 16px; }
.btn.primary:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 86%, black); }
.btn:disabled { opacity: 1; background: var(--bg); color: var(--muted); border-color: var(--line-strong); box-shadow: none; }
.btn.sm { padding: 3px 10px; }

.search input, .house-tools input, .house-tools select, .batch-date input, .ports-editor input, .batch-edit input {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--rule); }

/* ---------- saved batches ---------- */
.batch-panel { padding: 12px 16px 16px; margin-top: 0; }
.batch-panel .batch-head { font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: var(--label-case); }
.batch-panel .batch-total { letter-spacing: 0; }
.batch-panel .batch-datebar .btn { margin: 0; height: 34px; display: inline-flex; align-items: center; }
.batch-panel .batch-range { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--muted); }
.batch-panel .batch-range input { font: inherit; font-size: 14px; color: var(--muted); border: 0; background: transparent; padding: 0; outline: 0; width: 8.5em; min-height: 0; }
.batch-panel .batch-range:focus-within { outline: 2px solid var(--focus); }
.batch-panel .batch-range-sep { padding: 0 4px; }
.batch-panel .batch-datebar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; display: flex; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: default; }
.batch-panel .batch-sub { font-size: 12px; }
.batch-panel .batch-filters { gap: 8px; }
.batch-panel .batch-filters .search { flex: 1 1 100%; max-width: none; }
.batch-panel .batch-list { border: 1px solid var(--rule); border-radius: var(--radius); max-height: 44vh; }
.batch-row { padding: 7px 10px; border-bottom: 1px solid var(--line); align-items: flex-start; flex-wrap: wrap; }
.batch-row.current { background: var(--accent); color: var(--accent-ink, #fff); }
.batch-row.current .batch-name, .batch-row.current .batch-main .sub { color: var(--accent-ink, #fff); }
.batch-row.current .batch-main:focus-visible { outline-color: var(--accent-ink, #fff); }
.batch-row { position: relative; display: block; }
.batch-row .batch-main { display: grid; width: 100%; box-sizing: border-box; gap: 9px; padding: 6px 0 4px; }
.batch-row .batch-name { padding-right: 150px; user-select: text; -webkit-user-select: text; cursor: text; }
.batch-row .batch-meta { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.batch-row .batch-main .sub { white-space: nowrap; flex: none; }
.batch-row .batch-chips { flex-wrap: nowrap; overflow: hidden; gap: 3px; }
.batch-row .bchip { white-space: nowrap; font-size: 11px; padding: 1px 6px; }
.batch-row .batch-acts { position: absolute; top: 7px; right: 10px; }
.batch-row.editing .batch-acts { position: static; margin-top: 6px; }
.batch-name { font-weight: 700; }
.batch-acts .btn { box-shadow: none; }
.batch-edit { flex-wrap: wrap; }

/* ---------- progress ---------- */
.results { margin: 0; }
.progress { color: var(--ink); min-height: 24px; margin: 0 0 10px; font-weight: 600; }
.bar { height: 8px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.bar > i { border-radius: var(--radius); background: var(--accent); }

/* ---------- tabs (status filters) + sheet body ---------- */
.filters { gap: var(--tabs-gap); margin: 0 0 12px; align-items: flex-end; }
.fchip {
  border-radius: var(--tab-r); border: 1px solid var(--rule); padding: 6px 14px; font-weight: 700;
  background: var(--tab-other-bg); color: var(--tab-other-ink);
}
.fchip[data-f="ALL"] { background: var(--tab-all-bg); color: var(--tab-all-ink); }
.fchip[data-f="HOLD"] { background: var(--tab-hold-bg); color: var(--tab-hold-ink); }
.fchip[data-f="EXAM"] { background: var(--tab-exam-bg); color: var(--tab-exam-ink); }
.fchip[data-f="RELEASED"] { background: var(--tab-rel-bg); color: var(--tab-rel-ink); }
.fchip:hover:not([aria-pressed="true"]) { filter: brightness(.96); }
.fchip.zero { opacity: 1; filter: saturate(.4); }
.fchip[aria-pressed="true"] { background: var(--tab-on-bg); color: var(--tab-on-ink); border-color: var(--tab-on-bg); filter: none; }
.sheet-body { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px 14px; box-shadow: var(--sheet-shadow); }
.toolbar { margin-bottom: 12px; }

/* ---------- grid ---------- */
.table-wrap { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table.grid { border-collapse: collapse; min-width: 1180px; }
.grid > thead > tr > th {
  vertical-align: bottom; padding: var(--head-pad); background: var(--head-bg); color: var(--head-ink);
  border: 0; border-bottom: 1px solid var(--rule); border-left: var(--cell-x); border-right: var(--cell-x);
  font-size: var(--head-size); font-weight: var(--head-weight); letter-spacing: var(--head-track); text-transform: var(--head-case);
}
.grid > thead th button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.grid td { padding: var(--cell-pad); border: 0; border-bottom: var(--cell-y); border-left: var(--cell-x); border-right: var(--cell-x); }
.grid tr.main-row.st-HOLD td { background: var(--row-hold); }
.grid tr.main-row.st-EXAM td { background: var(--row-exam); }
.grid tr.main-row.st-NOT_FOUND td, .grid tr.main-row.st-ERROR td { background: var(--row-na); }
.grid tr.main-row:hover td { box-shadow: inset 0 0 0 999px color-mix(in oklab, var(--ink) 5%, transparent); }
.grid tr.main-row.open td { background: var(--row-open); }
.grid tr.detail-row > td { padding: 0; background: var(--row-detail); border-top: 0; }
.c-light { width: 46px; }
.light { margin-top: 4px; }
.expander { color: var(--ink); }
.expander:hover { background: var(--btn-hover); }
.grid tr.main-row td:last-child { max-width: 240px; }
.grid tr.main-row td:last-child .sub { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }

.mawb { position: relative; font-family: var(--mono); user-select: all; cursor: text; }
.awb-p { margin-right: .4em; }
.awb-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-mawb .sub { margin-top: 5px; }
.route { display: inline-flex; align-items: center; gap: 6px; }
.pct-n, .num { font-family: var(--mono); }

/* ---------- detail ---------- */
.detail { padding: 14px 18px 20px; gap: 16px; }
.detail h3, .detail h4 { font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); margin: 0 0 6px; }
.mini { border: 1px solid var(--rule); border-radius: 0; }
.mini th { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); background: var(--head-bg); color: var(--head-ink); border: 0; border-bottom: 1px solid var(--rule); padding: 6px 9px; }
.mini td { border: 0; border-bottom: 1px solid var(--line); padding: 6px 9px; }
.parts-total td { border-top: 2px solid var(--rule); background: var(--row-open); }

/* ---------- empty state ---------- */
.blank-sheet { display: none; padding: 28px 28px 30px; max-width: 760px; }
#results[hidden] ~ .blank-sheet { display: block; }
.blank-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.blank-text { margin: 0; max-width: 56ch; color: var(--muted); font-size: 14.5px; }

/* ---------- port names page ---------- */
.ports-stage { max-width: 1700px; margin: 0 auto; padding: 20px 60px 56px 20px; }
.ports-tabs { gap: var(--tabs-gap); margin-bottom: 12px; align-items: flex-end; }
.ports-tabs button {
  border-radius: var(--tab-r); border: 1px solid var(--rule); padding: 7px 18px; font-weight: 700;
  background: var(--tab-other-bg); color: var(--tab-other-ink);
}
.ports-tabs button:nth-child(1) { background: var(--tab-all-bg); color: var(--tab-all-ink); }
.ports-tabs button:nth-child(2) { background: var(--tab-hold-bg); color: var(--tab-hold-ink); }
.ports-tabs button[aria-selected="true"] { background: var(--tab-on-bg); color: var(--tab-on-ink); border-color: var(--tab-on-bg); }
.skin-ports .sheet-body[hidden] { display: none; }
.ports-input { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-family: var(--mono); font-size: 13.5px; }
.ports-input:hover { border-color: var(--rule); }
.ports-input:focus { background: var(--surface); outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--rule); }
.ports-grid { min-width: 0; }
.ports-grid td.mono { font-weight: 700; }
.ports-full { color: var(--ink); }
.ports-old { color: var(--muted); }
.ports-msg.bad { color: var(--hold-fg); }

/* ---------- laptop ---------- */
@media (max-width: 1500px) {
  .shell { grid-template-columns: 330px minmax(0, 1fr); padding-right: 56px; }
  .top-sub { display: none; }
}
@media (min-width: 1101px) {
  #inputGrid[hidden] { display: grid !important; }
  #editBtn { display: none; }
}

/* ---------- iPad and phones: rail stacks above, rows become labelled cards ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; padding: 14px 52px 40px 14px; gap: 14px; }
  .rail { position: static; max-height: none; overflow: visible; padding: 0; }
  .ports-stage { padding: 14px 52px 40px 14px; }
  table.grid { min-width: 0; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid thead { display: none; }
  .table-wrap { border: 0; background: transparent; }
  .grid tr.main-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
    margin: 0 0 12px; background: var(--surface); box-shadow: var(--sheet-shadow);
  }
  .grid tr.main-row td { border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 10px; background: transparent !important; box-shadow: none !important; }
  .grid td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .grid td:empty { display: none; }
  .grid td.c-mawb { grid-column: 1 / -1; order: -2; }
  .grid td.c-light { grid-column: 1 / -1; order: -3; width: auto; display: flex; align-items: center; gap: 10px; }
  .grid td.c-light::before { margin: 0; }
  .grid td.c-exp { grid-column: 1 / -1; order: 99; border-right: 0; padding: 0; }
  .grid td.c-exp .expander { width: 100%; height: 44px; justify-content: center; }
  .grid tr.main-row.st-HOLD { background: var(--row-hold); }
  .grid tr.main-row.st-EXAM { background: var(--row-exam); }
  .grid tr.main-row.st-NOT_FOUND, .grid tr.main-row.st-ERROR { background: var(--row-na); }
  .grid tr.main-row.open { background: var(--row-open); margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .grid tr.detail-row { display: block; border: 1px solid var(--rule); border-top: 0; margin: 0 0 12px; background: var(--surface); }
  .grid tr.detail-row > td { display: block; }
  .detail { padding: 12px 12px 18px; }
  .grid tr.main-row .pct-bar { width: 70px; }
  .toolbar { gap: 10px; }
}
@media (max-width: 600px) {
  .top-inner { padding: 10px 12px; gap: 8px 10px; }
  h1 { font-size: 15px; width: 100%; }
  .sheet { padding: 12px; }
  .grid tr.main-row { grid-template-columns: 1fr 1fr; }
  .shell, .ports-stage { padding-right: 46px; padding-left: 10px; }
  .lang { width: 34px; }
  .fchip { font-size: 12.5px; padding: 6px 8px; gap: 4px; }
  .toolbar-actions .btn { padding: 6px 10px; font-size: 13px; }
}
@media (pointer: coarse) {
  .btn, .fchip, .ports-tabs button, .nav-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .search input, .batch-date input, textarea, select { min-height: 44px; }
  .batch-main { min-height: 44px; }
}