/* GB Rates' look (10/29/2026 redesign; Daniel 10/28: "the UI is a bit ugly and busy ... make it more aesthetically
   pleasing and legible", "carrier logos on here for legibility"). Barlow, the grotesk drawn from California's highway
   signs and plates, for words; its semi-condensed cut for prices and days. Harbor ink on quay grey, GB's crane red only
   for the main action and the page you're on, the carriers' own logos to scan by, Daniel's port photos on the start
   screens. Fonts: SIL Open Font License (static/fonts/OFL Barlow.txt). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/barlow-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/barlow-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-semi-condensed-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --bg: #eef1f4; --panel: #ffffff; --ink: #172434; --muted: #5a6b7d; --faint: #8795a5; --line: #dde3e9; --soft: #f5f7f9;
  --brand: #d4232b; --brand-ink: #ffffff; --brand-hover: #bc1d24; --ok: #11845b; --warn: #9a5800; --bad: #b42318;
  --link: #1d5fa8; --chip: #e7ecf1; --plate-line: #dde3e9;
  --shadow: 0 1px 2px rgba(23,36,52,.05), 0 3px 10px rgba(23,36,52,.06);
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --hdr: 56px; --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e151e; --panel: #151e29; --ink: #e6ecf2; --muted: #9eb0c2; --faint: #74869a; --line: #263243; --soft: #1a2532;
          --chip: #213041; --link: #8cb9ff; --brand-hover: #e0393f; --plate-line: #ffffff; --shadow: none; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
::selection { background: #d6e4f5; }
/* the bar: the name, the pages (one line; it scrolls sideways on a phone), who's signed in behind their initials */
header.top { display: flex; align-items: stretch; gap: 20px; height: var(--hdr); padding: 0 20px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
header.top .brand { display: flex; align-items: center; gap: 9px; font: 600 19px/1 var(--cond); letter-spacing: .01em;
  color: var(--ink); white-space: nowrap; }
header.top .brand:hover { text-decoration: none; }
header.top .brand img { width: 26px; height: 26px; }
header.top nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
header.top nav::-webkit-scrollbar { display: none; }
header.top nav a { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-weight: 500;
  white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
header.top nav a:hover { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--line); }
header.top nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
header.top nav a:focus-visible { outline-offset: -2px; }
.me { margin-left: auto; position: relative; display: flex; align-items: center; }
.me > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  color: var(--ink); font-weight: 500; padding: 4px 2px; border-radius: 8px; }
.me > summary::-webkit-details-marker { display: none; }
.me .av { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; font: 600 12.5px/1 var(--cond); letter-spacing: .03em; }
.me .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 28px rgba(23,36,52,.14); padding: 12px 14px;
  display: grid; gap: 3px; z-index: 30; }
.me .menu b { font-weight: 600; }
.me .menu .out { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 64px; }
h1 { font-size: 25px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; margin: 4px 0 14px; }
h2 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
h3 { font-size: 15px; font-weight: 600; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.flash { background: #fff6e5; border: 1px solid #f0d39b; color: #6b4300; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .flash { background: #3a2c10; border-color: #6b4f1d; color: #f3d29a; } }
form.search { display: grid; grid-template-columns: 2fr 2fr 1.2fr 1.3fr 1.4fr auto; gap: 10px; align-items: end; }
form.search .wide { grid-column: span 2; }
label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
input:not([type]), input[type=text], input[type=date], input[type=number], input[type=email], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #cfd7df; border-radius: 8px; background: var(--panel);
  color: var(--ink); font: inherit; }
@media (prefers-color-scheme: dark) { input[type=text], input[type=date], input[type=number], input[type=email], input[type=search], input[type=password], select, textarea { border-color: var(--line); } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(29,95,168,.16); }
textarea { min-height: 70px; }
.boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.boxes label { display: inline-flex; gap: 5px; align-items: center; font-weight: 500; color: var(--ink);
  background: var(--chip); padding: 5px 8px; border-radius: 6px; margin: 0; font-size: 13px; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 15px;
  border-radius: 8px; border: 1px solid #cfd7df; background: var(--panel); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--soft); text-decoration: none; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.small { min-height: 0; padding: 4px 10px; font-size: 13px; }
@media (prefers-color-scheme: dark) { .btn { border-color: var(--line); } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.chip { display: inline-block; background: var(--chip); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 500; color: var(--ink); margin: 1px 2px 1px 0; }
.chip.warn { background: #fdefd5; color: #774400; } .chip.ok { background: #dcf1e6; color: #0d5a37; } .chip.bad { background: #fde3e1; color: #8a1c13; }
@media (prefers-color-scheme: dark) { .chip.warn { background: #4a3812; color: #f3d29a; } .chip.ok { background: #143b28; color: #9fe0bd; } .chip.bad { background: #4a1a17; color: #f6b4ae; } }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--soft); position: sticky; top: var(--hdr); }
/* a table that scrolls sideways is its own scroll box: its header can't stick under the page's bar, and the bar's
   height pushed it down over the first rows, leaving a blank band above (Teresa's screenshots, 10/30/2026) */
[style*="overflow-x"] th { top: 0; }
tbody tr:last-child > td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total { font: 600 18px/1.2 var(--cond); font-variant-numeric: tabular-nums; }
tr.opt { cursor: pointer; } tr.opt:hover td { background: var(--soft); }
tr.detail td { background: var(--soft); }
tr.detail[hidden] { display: none; }
.legs td { border: 0; padding: 3px 8px; } .legs td:first-child { white-space: nowrap; color: var(--muted); } .legs { width: auto; min-width: 420px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.kv div:nth-child(odd) { color: var(--muted); }
pre.copy { white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.drop { border: 2px dashed #c9d2dc; border-radius: var(--r); padding: 26px; text-align: center; color: var(--muted); }
.drop.over { border-color: var(--brand); color: var(--ink); }
@media (prefers-color-scheme: dark) { .drop { border-color: var(--line); } }
.routing { font-weight: 600; }
.right { text-align: right; }
@media (max-width: 860px) {
  form.search { grid-template-columns: 1fr 1fr; } form.search .wide { grid-column: span 2; }
  .grid2 { grid-template-columns: 1fr; } th { position: static; }
  .hide-m { display: none; }
  main { padding: 16px 14px 56px; }
  h1 { font-size: 22px; }
}
@media (max-width: 760px) {
  header.top { gap: 12px; padding: 0 12px; }
  header.top .brand span { display: none; }       /* the mark alone: the pages need the room */
  header.top nav a { padding: 0 8px; }
  .me .nm { display: none; }
}

/* ---- search (10/24/2026: one line for the lane, chips for cargo and boxes, the rest under More) --------------------- */
form.search2 { display: grid; gap: 12px; }
form.search2 .lane { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 2fr) minmax(140px, 1fr) auto; gap: 10px; align-items: end; }
form.search2 .lane input { min-height: 42px; font-size: 16px; }
form.search2 .swap { height: 42px; width: 42px; border-radius: 50%; border: 1px solid #cfd7df; background: var(--panel); color: var(--ink); font-size: 17px; cursor: pointer; }
form.search2 .swap:hover { background: var(--soft); }
form.search2 .go { min-height: 42px; padding: 0 26px; font-size: 16px; }
form.search2 .pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
form.search2 .lbl { font-size: 13px; color: var(--muted); font-weight: 600; min-width: 50px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { position: relative; display: inline-flex; margin: 0; cursor: pointer; font-weight: 500; color: var(--ink); }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span, button.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--chip); border: 1px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink); white-space: nowrap; }
button.pill { font: inherit; font-size: 14px; cursor: pointer; }
.pill span:hover, button.pill:hover { border-color: #c3cdd7; }
.pill input:checked + span, button.pill.on { background: var(--ink); color: var(--panel); }
.pill input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 1px; }
details.more { margin-left: auto; } details.more summary { cursor: pointer; color: var(--link); font-size: 14px; }
details.more .morebox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: min(620px, 92vw); }
details.more .span2 { grid-column: span 2; }

/* the start screen (10/29/2026): one of Daniel's port photos, the search riding up over its foot */
.hero { margin: -4px 0 6px; }
.hero-photo { height: 320px; border-radius: 14px; overflow: hidden; background: #b9c6d2; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-form { position: relative; margin: -112px 28px 0; }
.hero-form > .panel { box-shadow: 0 12px 34px rgba(23,36,52,.18); padding: 18px 20px; }
.credit { margin: 10px 28px 0; font-size: 12.5px; color: var(--faint); }

/* the results (10/29/2026): a logo to scan by; the route said once when the rates share it; the free days at the
   destination in three columns under one heading; the notes on how to read it folded away */
.reshead { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 24px 0 12px; }
.reshead h2 { margin: 0; font-size: 21px; }
.reshead .lane-sum { color: var(--muted); font-size: 15px; }
.reshead .lane-sum b { color: var(--ink); font-weight: 600; }
.reshead .filter { margin-left: auto; }
.reshead .hidden-note { flex-basis: 100%; color: var(--muted); font-size: 13.5px; }
.results-panel { padding: 0; }
table.results { border-collapse: separate; border-spacing: 0; }
table.results thead { position: sticky; top: var(--hdr); z-index: 2; }
table.results th { position: static; white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
table.results thead tr:first-child th:first-child { border-top-left-radius: var(--r); }
table.results thead tr:first-child th:last-child { border-top-right-radius: var(--r); }
table.results th.grp { text-align: center; padding-bottom: 2px; border-bottom: 0; }
table.results tr.sub th { text-align: center; font-weight: 500; padding-top: 0; }
table.results th.fdg, table.results td.fd0, table.results td.fdspan { border-left: 1px solid var(--line); }
table.results td { vertical-align: middle; padding: 11px 10px; }
table.results tr.best > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
td.c-car { min-width: 220px; }
.cc { display: flex; align-items: center; gap: 12px; }
.cc .cname { font-weight: 600; font-size: 15.5px; }
.cc .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.cc .cargo-m { display: none; }
.cc .sub .cargo-d { color: var(--muted); }
.lowest { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ok); }
.carrier { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; }
.clogo { flex: none; display: block; width: 58px; height: 32px; object-fit: contain; background: #fff;
  border: 1px solid var(--plate-line); border-radius: 6px; padding: 3px 5px; }
.clogo.mono { display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--cond);
  color: #3d5166; letter-spacing: .03em; }
.carrier.sm .clogo { width: 46px; height: 26px; padding: 2px 4px; }
.carrier.sm .clogo.mono { font-size: 11px; }
.carrier .cname { font-weight: 600; }
td.c-route .rt { font-weight: 500; }
td.c-route .cargo { color: var(--muted); font-size: 13.5px; }
td.c-route .chip { margin-right: 4px; }
td.c-route .svc { margin: 3px 0 4px; }      /* the service and the direct-call words on the row (Teresa, 11/3/2026) */
.chip.svc { background: #e6effc; color: #1f4f99; font-weight: 600; }
@media (prefers-color-scheme: dark) { .chip.svc { background: #1c2b45; color: #a9c5f5; } }
table.results td.price { text-align: right; white-space: nowrap; }
td.price .total { display: block; font-size: 19px; }
td.price .bd { display: block; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
table.results td.fd { text-align: center; width: 70px; font: 600 16px/1.25 var(--cond); font-variant-numeric: tabular-nums; }
td.fd .fdb { display: block; white-space: nowrap; }
td.fd .fdb i { font: 500 11.5px var(--sans); font-style: normal; color: var(--muted); margin-right: 4px; }
td.fd .gap { color: var(--faint); font: italic 500 14px var(--sans); }
td.fd .ex { font: 500 12px var(--sans); color: var(--muted); display: block; }
table.results td.fdspan { text-align: center; font-size: 14px; color: var(--muted); max-width: 260px; }
td.fdspan .fdb i { font-style: normal; font-weight: 600; margin-right: 4px; }
td.until { white-space: nowrap; font-size: 14px; color: var(--muted); }
td.c-flags .chip { white-space: nowrap; }
table.results tr.detail > td { background: var(--soft); padding: 16px 18px 18px; }
.boxdetail { gap: 22px; }
.boxdetail .bdhead { font-size: 16px; } .boxdetail .bdhead .muted { font-size: 13.5px; margin-left: 6px; }
.boxdetail form.panel { box-shadow: none; }
.boxdetail + .boxdetail { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
details.howto { margin-top: 14px; font-size: 13.5px; color: var(--muted); max-width: 920px; }
details.howto summary { cursor: pointer; color: var(--link); font-size: 14px; margin-bottom: 6px; }
details.howto p { margin: 6px 0; }
/* free time on the quote page and the customer's page: demurrage | per diem | combined (10/28/2026) */
table.ftmini, table.fttable { border-collapse: collapse; width: auto; }
table.ftmini th, table.fttable th { position: static; background: none; }      /* not the page's sticky headers */
table.ftmini { font-size: 12.5px; line-height: 1.3; }
table.ftmini th, table.ftmini td { padding: 1px 6px; border: 0; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.ftmini tr:first-child th { font-size: 11.5px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
table.ftmini th:first-child { text-align: left; color: var(--muted); font-weight: 600; padding-left: 0; }
table.ftmini td { font-weight: 600; }
table.ftmini td.muted, table.fttable td.muted, table.ftmini td.gap, table.fttable td.gap { font-weight: 400; font-style: italic; color: var(--muted); }
.ftbox { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 4px 0 1px; }
.ftbox:first-child { margin-top: 0; }
sup.ftgb { font: 700 9.5px var(--sans); color: var(--link); margin-left: 2px; letter-spacing: .02em; }
table.fttable { font-size: 14px; margin: 2px 0 4px; }
table.fttable th, table.fttable td { padding: 4px 16px 4px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
table.fttable thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 0; }
table.fttable tbody th { font-weight: 600; color: var(--ink); font-size: 14px; white-space: nowrap; }
table.fttable td { font-weight: 600; }
table.fttable tr:last-child th, table.fttable tr:last-child td { border-bottom: 0; }
table.fttable .ftsub { font-weight: 400; }
table.fttable td.ftfrom, div.ftfrom { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.show-m { display: none; }
table.wide .chip { white-space: nowrap; }      /* a status reads as one chip, not two lines */
@media (max-width: 860px) { div.show-m { display: block; } }
.ftp { margin-top: 8px; }
details.np { margin-top: 8px; } details.np summary { cursor: pointer; color: var(--warn); }
@media (max-width: 1100px) {
  table.results td.until, table.results th.until { display: none; }
}
@media (max-width: 860px) {
  .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }      /* a wide table scrolls in its panel, not the page */
  .tscroll th { top: 0; }                                                /* ... so its header stays on its table */
  form.search2 .lane { grid-template-columns: 1fr auto 1fr; } form.search2 .lane .date, form.search2 .lane .go { grid-column: span 3; }
  details.more { margin-left: 0; } details.more .morebox { grid-template-columns: 1fr; } details.more .span2 { grid-column: auto; }
  table.uploads td.upfile { word-break: break-word; min-width: 140px; }
  table.uploads td.upstatus { min-width: 120px; }
  table.uploads .chip { border-radius: 8px; }
  .tscroll > table.wide { min-width: 760px; }         /* scrolls at a width it can be read at, rather than squeezed */
  .tscroll > table.mid { min-width: 520px; }
  .hero-photo { height: 200px; }
  .hero-form { margin: -64px 12px 0; }
  .hero-form > .panel { padding: 14px; }
  .credit { margin: 8px 12px 0; }
}
/* a phone: each rate is a card (the carrier, the boxes' prices side by side, then the free days on one line); the
   route, the dates and the breakdown behind a tap */
@media (max-width: 760px) {
  form.search2 .pick { display: grid; gap: 6px; }
  form.search2 > *, form.search2 .pick > * { min-width: 0; }
  form.search2 .pick > .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  form.search2 .pick > .chips::-webkit-scrollbar { display: none; }
  details.more .morebox { min-width: 0; }
  details.more { justify-self: start; }
  .reshead .filter { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  table.results > thead { display: none; }
  table.results, table.results > tbody, table.results > tbody > tr, table.results > tbody > tr > td { display: block; }
  table.results > tbody > tr.opt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
  table.results > tbody > tr.opt::after { content: "Free days at destination"; order: 4; flex: 1 1 100%; font-size: 12.5px;
    font-weight: 600; color: var(--muted); margin: 2px 0 -6px; }
  table.results > tbody > tr[hidden], table.results > tbody > tr > td.hide-m { display: none; }
  table.results > tbody > tr.opt > td { border: 0; padding: 0; width: auto; }
  table.results > tbody > tr.opt:hover > td { background: none; }
  table.results > tbody > tr.opt:hover { background: var(--soft); }
  table.results > tbody > tr.opt > td.c-car { order: 1; flex: 1 1 100%; }
  table.results > tbody > tr.opt > td.c-route { order: 2; flex: 1 1 100%; }
  table.results > tbody > tr.opt > td.c-route:empty { display: none; }
  table.results > tbody > tr.opt > td.price { order: 3; text-align: left; }
  table.results > tbody > tr.opt > td.price::before { content: attr(data-box); display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  table.results > tbody > tr.opt > td.fd, table.results > tbody > tr.opt > td.fdspan { order: 5; text-align: left; border-left: 0; font-size: 15px; }
  table.results > tbody > tr.opt > td.fd::before { content: attr(data-k) " "; font: 500 13px var(--sans); color: var(--muted); }
  table.results > tbody > tr.opt > td.fd .fdb { display: inline; margin-right: 6px; }
  table.results > tbody > tr.opt > td.fd .ex { display: inline; margin-left: 3px; }
  table.results > tbody > tr.opt > td.fd, table.results > tbody > tr.opt > td.fdspan { align-self: flex-start; }
  table.results > tbody > tr.opt > td.c-route.only-cargo { display: none; }
  .cc .cargo-m { display: inline; }
  table.results > tbody > tr.opt > td.fdspan { flex: 1 1 100%; max-width: none; text-align: left; }
  table.results > tbody > tr.opt > td.c-flags { order: 6; flex: 1 1 100%; }
  table.results > tbody > tr.opt > td.c-flags:empty { display: none; }
  table.results tr.best > td:first-child { box-shadow: none; }
  table.results > tbody > tr.opt.best { box-shadow: inset 3px 0 0 var(--ok); }
  table.results > tbody > tr.detail > td { padding: 14px; }
  .legs { min-width: 0; width: 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv > div:nth-child(odd) { margin-top: 8px; }
  table.fttable th, table.fttable td { padding-right: 10px; }
  .hero-photo { height: 170px; border-radius: 12px; }
  .hero-form { margin: -44px 8px 0; }
}

/* ---- GB Academy ---------------------------------------------------------------------------------------------------- */
.ac-head { display: flex; align-items: baseline; gap: 16px; } .ac-links { margin-left: auto; display: flex; gap: 14px; }
.ac-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ac-stats .panel { text-align: center; } .ac-stats b { display: block; font-size: 22px; } .ac-stats span { color: var(--muted); font-size: 12px; }
.ac-mods { display: grid; gap: 10px; } .ac-mod { display: block; color: var(--ink); } .ac-mod:hover { text-decoration: none; border-color: var(--muted); }
.ac-mod-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ac-mod-top b { font-size: 15px; }
.ac-n { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.ac-locked { opacity: .65; }
.ac-bar { height: 6px; background: var(--soft); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; } .ac-bar i { display: block; height: 100%; background: var(--ok); }
.chip.ac-completed { background: #dff3e8; color: #0f5a33; } .chip.ac-in-progress { background: #e6effc; color: #1f4f99; }
.ac-bad, .chip.ac-bad { color: var(--bad); } .chip.ac-bad { background: #fde2e1; } .ac-bad-row td:first-child { border-left: 3px solid var(--bad); }
@media (prefers-color-scheme: dark) { .chip.ac-completed { background: #143b28; color: #9fe0bd; } .chip.ac-in-progress { background: #1c2b45; color: #a9c5f5; } .chip.ac-bad { background: #4a1a17; color: #f6b4ae; } }
.ac-lessons { margin: 0; padding-left: 22px; } .ac-lessons li { padding: 6px 0; } .ac-lessons li.ac-done > a { color: var(--ok); }
.ac-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.ac-content { font-size: 15px; line-height: 1.6; } .ac-content video { width: 100%; border-radius: 8px; background: #000; }
.ac-content table { margin: 10px 0; } .ac-content th, .ac-content td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.ac-content figure.ac-fig { margin: 14px 0 18px; } .ac-content img { max-width: 100%; height: auto; }
.ac-content figure.ac-fig img { display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ac-content figure.ac-fig figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.ac-walk { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ac-walk video { margin-top: 6px; aspect-ratio: 16 / 9; }
.ac-side ol { padding-left: 18px; margin: 8px 0 0; } .ac-side li { padding: 3px 0; font-size: 13px; } .ac-side li.on a { font-weight: 700; color: var(--ink); }
.ac-checks { margin-top: 14px; } .ac-checks fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 10px 12px; }
.ac-checks legend { font-weight: 600; padding: 0 4px; } .ac-opt { display: block; font-size: 14px; color: var(--ink); font-weight: 400; margin: 6px 0; cursor: pointer; }
.ac-right { border-color: var(--ok) !important; } .ac-wrong { border-color: var(--bad) !important; }
.ac-assign { display: grid; grid-template-columns: 2fr 1.2fr 1.6fr 1fr auto; gap: 10px; align-items: end; }
.ac-vid { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.ac-shipped { margin-top: 8px; max-width: 260px; } .ac-shipped .btn { margin-bottom: 4px; }
.ac-pre { white-space: pre-wrap; font-size: 12px; background: var(--soft); padding: 10px; border-radius: 6px; }
@media (max-width: 760px) { .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-lesson, .ac-assign { grid-template-columns: 1fr; } }
tr.opt[hidden] { display: none; }

/* People (10/26): add, edit, remove; GB and outside GB; what each role can do */
.people .lead { max-width: 900px; }
.pf-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pf-grid > [hidden] { display: none !important; }
#pf, #mf { scroll-margin-top: 70px; }   /* Edit/Change scroll the form below the sticky header */
.pf-email { flex: 2 1 240px; } .pf-name { flex: 1.3 1 160px; } .pf-org { flex: 1.4 1 180px; }
.pf-role { flex: 0 0 150px; } .pf-dep { flex: 1 1 140px; } .pf-sees { flex: 0 0 auto; }
.pf-sees .chips { min-height: 36px; }
.pf-go { flex: 0 0 auto; display: flex; gap: 8px; }
.hint { font-weight: 400; color: var(--muted); font-size: 11px; }
.people-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.people h2 { font-size: 15px; margin: 20px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.people h2 .muted { font-size: 13px; font-weight: 500; }
[hidden] { display: none !important; }
.panel.tight { padding: 0; overflow-x: auto; }
.panel.tight th { position: static; }   /* sticky inside a scrolling box covered the first row */
td.acts { white-space: nowrap; text-align: right; width: 1%; }
td.acts form { display: inline; margin-left: 6px; }
details.removed { margin-top: 18px; }
details.removed summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.roles { position: sticky; top: 64px; margin-top: 20px; }
.roles h2 { margin-top: 0; }
.roles h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 4px; }
.roles .role-item { padding: 8px 0; border-top: 1px solid var(--line); }
.roles .role-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.roles .role-head .chip { margin: 0; }
.roles p { font-size: 13px; line-height: 1.45; margin: 4px 0 0; }
.chip.role { font-weight: 600; }
.chip.role-admin { background: #fde2e1; color: #8a1c13; }
.chip.role-pricing { background: #e6effc; color: #1f4f99; }
.chip.role-manager { background: #efe6fb; color: #5b2a9a; }
.chip.role-sales { background: #dff3e8; color: #0f5a33; }
.chip.role-customer, .chip.role-agent { background: #fff1d6; color: #7a4a00; }
@media (prefers-color-scheme: dark) {
  .chip.role-admin { background: #4a1a17; color: #f6b4ae; } .chip.role-pricing { background: #1c2b45; color: #a9c5f5; }
  .chip.role-manager { background: #33224d; color: #d2b8f5; } .chip.role-sales { background: #143b28; color: #9fe0bd; }
  .chip.role-customer, .chip.role-agent { background: #4a3812; color: #f3d29a; }
}
@media (max-width: 1100px) { .people-grid { grid-template-columns: minmax(0, 1fr); } .roles { position: static; } }

/* sign-in (GB staff: Microsoft 365; customers and agents: a password) and the customer portal (10/27/2026) */
input[type=password] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--ink); font: inherit; }
.signin { max-width: 860px; margin: 0 auto; }
.signin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.signin form label { margin-top: 10px; }
.btn.wide { display: block; width: 100%; text-align: center; margin-top: 14px; }
.flash.bad { background: #fde2e1; border-color: #f4b7b2; color: #8a1c13; }
@media (prefers-color-scheme: dark) { .flash.bad { background: #4a1a17; border-color: #7a2a24; color: #f6b4ae; } }
.offer { margin-bottom: 10px; }
.offer.best { border-color: var(--ok); }
.offer-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.offer .route { font-size: 15px; font-weight: 600; margin: 2px 0; }
.offer-prices { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.offer-prices .price { display: flex; flex-direction: column; align-items: flex-end; min-width: 92px; }
.offer-prices .price b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.ask { margin-top: 10px; }
details.ask > summary { list-style: none; display: inline-block; }
details.ask > summary::-webkit-details-marker { display: none; }
.ask-form { margin-top: 10px; display: grid; gap: 10px; }
.pf-rep select, .pf-mgr select, .pf-op select { min-width: 180px; }
.pf-pw .row input { width: 190px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 760px) {
  .signin-grid { grid-template-columns: 1fr; }
  .offer-head { flex-direction: column; }
  .offer-prices { justify-content: flex-start; }
  .offer-prices .price { align-items: flex-start; }
  .ask-form .grid2 { grid-template-columns: 1fr; }
}

/* customer and agent accounts on People (10/27/2026): one per company, any number of people */
.people h2 .btn { margin-left: auto; }
.pf-new { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pf-acct { flex: 1.4 1 200px; } .pf-acct select { width: 100%; }
.acct { margin-bottom: 10px; padding: 12px 14px; }
.acct-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.acct-head .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acct-head .acts form { display: inline; }
.acct-name { font-size: 15px; }
.acct-who { margin-right: 12px; white-space: nowrap; }
.acct-people { width: 100%; margin-top: 8px; border-top: 1px solid var(--line); }
.acct-people td { padding: 6px 4px; }
#af { scroll-margin-top: 70px; }

/* rate sheets (10/27/2026): pinned sheets first, one click to today's file */
.rs .lead { max-width: 900px; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 14px 0; }
.rs-card { display: flex; flex-direction: column; gap: 4px; }
.rs-card.pinned { border-color: var(--ok); }
.rs-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rs-name { font-weight: 700; font-size: 15px; }
.rs-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pin { background: none; border: 0; cursor: pointer; font-size: 18px; color: #c8ccd4; line-height: 1; padding: 2px 4px; }
.pin.on { color: #e5a400; }
form.inline { display: inline; margin: 0; }
.rs-top { display: flex; align-items: center; gap: 10px; }
.rs-run { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rs-edit textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rs-tab { border-top: 1px solid var(--line); padding: 8px 0; }
.rs-tab summary { cursor: pointer; }
.rs-carriers { flex: 3 1 360px; } .rs-carriers input { width: 100%; }
.rs-rm { align-self: flex-end; }
.rs-cmp td.up { color: #8a1c13; } .rs-cmp td.down { color: #0f5a33; }
.rs-remove { margin-top: 12px; }
.rs-wait { max-width: 640px; margin: 40px auto; text-align: center; }

/* markups (10/27/2026): one account at a time; an empty box takes the line above it, in grey */
.mk-head { display: flex; align-items: flex-end; gap: 10px 22px; flex-wrap: wrap; }
.mk-head h1 { margin: 0 0 6px; }
.mk-pick { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mk-pick .mk-acct input { width: 320px; }
.mk-pick .mk-catpick select { width: 200px; }
.mk-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 2px; }
.mk-who h2 { margin: 0; font-size: 19px; }
.mk-how { margin: 4px 0 12px; color: var(--muted); }
.mk-accts { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-accts .chip b { margin-left: 6px; color: var(--muted); }
.mk-table td { vertical-align: middle; padding: 6px 10px; }
.mk-table tr.mk-sec td { background: var(--soft); padding: 9px 10px; border-top: 1px solid var(--line); }
.mk-table tr.mk-sec .hint { margin-left: 8px; font-size: 12px; }
.mk-table tr.mk-addrow td { padding: 8px 10px 12px; }
.mk-where { min-width: 260px; }
.mk-kind { margin-left: 6px; font-size: 12px; color: var(--muted); }
.mk-to { color: var(--muted); margin: 0 6px; font-size: 12px; }
.mk-src { margin-left: 8px; font-size: 11px; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.mk-indent { color: var(--muted); padding-left: 18px; }
.mk-car { width: 1%; white-space: nowrap; }
.mk-car select { width: 150px; padding: 5px 8px; }
.mk-box { width: 128px; }
.mk-box input { text-align: right; font-variant-numeric: tabular-nums; padding: 6px 9px; }
.mk-box input::placeholder { color: var(--muted); opacity: .7; }
.mk-box input.bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.mk-from { font-size: 11px; color: var(--muted); text-align: right; min-height: 15px; max-width: 150px; margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-from.none { color: var(--warn); }
.mk-price { width: 120px; }
.mk-price b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-price b.thin { color: var(--bad); }
.mk-pdet { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.mk-x { width: 1%; white-space: nowrap; text-align: right; }
.mk-link { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; font: inherit; font-size: 12px; }
.mk-link:hover { text-decoration: underline; }
.mk-load { margin-left: 12px; }
input[type=search].mk-filter { margin-left: 14px; width: 190px; padding: 4px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
tr.mk-row.sub td { border-bottom-style: dashed; }
tr.mk-row.changed td:first-child { box-shadow: inset 3px 0 0 var(--link); }
tr.mk-row.new .mk-where > input { max-width: 300px; }
.mk-lanein { display: flex; align-items: center; gap: 4px; }
.mk-lanein input { min-width: 0; flex: 1 1 140px; }
.mk-note { font-size: 11px; color: var(--muted); margin-top: 3px; }
.mk-note.bad { color: var(--bad); }
.mk-bar { position: sticky; bottom: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px;
  margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 4; }
.mk-bar.on { border-color: var(--link); box-shadow: 0 0 0 1px var(--link), var(--shadow); }
.mk-last { margin-left: auto; }
details.mk-rules, details.mk-copy { margin-top: 16px; }
details.mk-rules summary, details.mk-copy summary { cursor: pointer; color: var(--link); font-size: 13px; }
details.mk-rules ol { margin: 8px 0 0; padding-left: 20px; max-width: 860px; }
details.mk-rules li { margin: 4px 0; }
.mk-copyform { margin-top: 8px; } .mk-copyform select { width: 280px; }
@media (max-width: 900px) {
  .mk-pcol, .mk-price { display: none; }
  .mk-pick .mk-acct input, .mk-pick .mk-catpick select { width: 100%; }
  .mk-pick > div { flex: 1 1 160px; }
}

/* welcome emails (10/27/2026): two ways side by side; set-password pages */
.wm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 6px; }
.wm-opt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--soft); display: flex;
  flex-direction: column; gap: 6px; align-items: flex-start; }
.wm-opt p { margin: 0; }
.wm-opt .row { width: 100%; flex-wrap: nowrap; }
.wm-opt .row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wm-how { margin: 2px 0 4px; }
.wm-said { color: var(--muted); margin-top: 3px; } .wm-said.bad { color: var(--bad); }
tr.wm-row > td { background: var(--panel); }
.pw-page { max-width: 520px; }
@media (max-width: 760px) { .wm { grid-template-columns: 1fr; } }

/* sign in (10/29/2026): Daniel's photo of ONE Harbour at anchor beside the two ways in */
.signin2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr); min-height: min(640px, calc(100vh - var(--hdr) - 70px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.signin-photo { position: relative; min-height: 260px; background: #9fc0e3; }
.signin-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.signin-forms { padding: 32px 38px; display: grid; gap: 6px; align-content: center; }
.signin-forms h1 { margin: 0 0 8px; }
.signin-forms h2 { margin: 0 0 2px; font-size: 17px; }
.signin-forms p { margin: 0 0 10px; }
.signin-forms section + section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 12px; }
.signin-forms form label { margin-top: 10px; }
@media (max-width: 860px) {
  .signin2 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .signin-photo { min-height: 170px; }
  .signin-forms { padding: 22px 18px; }
}
/* a contract's page: the carrier's logo by its name */
h1.vtitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h1.vtitle .clogo { width: 66px; height: 36px; }
/* the customer's page: the carrier's logo on each offer */
.offer-car { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.offer-car .carrier .cname { font-size: 16px; }
.offer .route { margin-top: 6px; }
/* People on a phone: an account's people and their buttons wrap inside the account's card */
@media (max-width: 760px) {
  .acct { overflow-x: auto; }
  .acct-people td.acts { white-space: normal; text-align: left; }
  .acct-people td.acts form, .acct-people td.acts .btn { margin: 4px 4px 0 0; }
  .acct-people td { word-break: break-word; }
}

/* Reserves: the export bot's COSCO list (10/29/2026) */
.rsv-sum { margin-bottom: 6px; } .rsv-sum p { margin: 0; }
.rsv-filter { margin: 0 0 8px; }
.rsv-filter a.chip { color: var(--ink); padding: 4px 11px; }
.rsv-filter a.chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.rsv-filter a.chip.on { background: var(--ink); color: var(--panel); }
.rsv-sail .lane { white-space: nowrap; margin-right: 12px; }
.rsv-sail .lane b { color: var(--bad); }
.rsv-sail .lane.full b { color: var(--ok); }
.rsv-sail tr.gap td { background: var(--soft); }
.rsv-sail details.which { display: inline-block; }
.rsv-sail details.which summary { cursor: pointer; color: var(--link); }
.rsv-list td.bk { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsv-list tr.changed td { background: #fff7e0; }
@media (prefers-color-scheme: dark) { .rsv-list tr.changed td { background: #33290f; } }
.rsv-sail td, .rsv-list td { vertical-align: top; }
.rsv-sail tr.closed td { color: var(--muted); }
.rsv-sail tr.closed .lane b { color: inherit; }
@media (max-width: 760px) {
  /* phone: each sailing and each reserve is a card */
  .rsv-sail thead, .rsv-list thead { display: none; }
  .rsv-sail, .rsv-list, .rsv-sail tbody, .rsv-list tbody { display: block; width: 100%; }
  .rsv-sail tr, .rsv-list tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--line); }
  .rsv-sail td, .rsv-list td { display: block; padding: 0; border: 0; background: none !important; }
  .rsv-sail td.svc, .rsv-list td.svc { order: 1; }
  .rsv-sail td.from { order: 2; }
  .rsv-sail td.short { order: 3; margin-left: auto; }
  .rsv-sail td.ves { order: 4; flex-basis: 100%; }
  .rsv-sail td.etd { order: 5; } .rsv-sail td.etd:not(:empty)::before { content: "ETD "; color: var(--muted); }
  .rsv-sail td.wk { order: 6; color: var(--muted); } .rsv-sail td.wk::before { content: "week of "; }
  .rsv-sail td.lanes { order: 7; flex-basis: 100%; }
  .rsv-sail tr.gap, .rsv-list tr.changed { background: var(--soft); }
  .rsv-list td.route { order: 2; }
  .rsv-list td.st { order: 3; margin-left: auto; text-align: right; }
  .rsv-list td.ves { order: 4; flex-basis: 100%; }
  .rsv-list td.bk { order: 5; }
  .rsv-list td.qty { order: 6; } .rsv-list td.qty::before { content: "Qty "; color: var(--muted); }
  .rsv-list td.left { order: 7; } .rsv-list td.left::before { content: "Left "; color: var(--muted); }
  .rsv-list td.etd { order: 8; } .rsv-list td.etd:not(:empty)::before { content: "ETD "; color: var(--muted); }
  .rsv-list td.port { order: 9; flex-basis: 100%; } .rsv-list td.port:not(:empty)::before { content: "Cut off "; color: var(--muted); }
  .rsv-list td.doc { order: 10; } .rsv-list td.doc:not(:empty)::before { content: "Doc "; color: var(--muted); }
  .rsv-list td.chg { order: 11; flex-basis: 100%; }
  .rsv-list td.chg:empty { display: none; }
  .rsv-list td.num, .rsv-sail td.num { text-align: left; }
}
/* side by side with CargoSphere (11/2/2026): the note over the results, the form in a row's details, the page */
.sbs-note { margin: 6px 0 10px; color: var(--muted); }
.sbs-form { margin-top: 12px; border-style: dashed; }
.sbs-form .sbs-head { margin-bottom: 8px; }
.sbs-boxes { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.sbs-box { display: flex; flex-direction: column; gap: 4px; min-width: 150px; font-size: 13px; }
.sbs-box input { max-width: 170px; }
.sbs-box.wide { flex: 1 1 220px; } .sbs-box.wide input { max-width: none; }
.sbs-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.sbs-day h2 { margin: 0; }
.sbs-list { width: 100%; border-collapse: collapse; }
.sbs-list th, .sbs-list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sbs-list td.num, .sbs-list th.num { text-align: right; white-space: nowrap; }
.sbs-list tr.open td { background: var(--soft); }
.sbs-list td.act { white-space: nowrap; }
.sbs-list details.close { display: inline-block; position: relative; }
.sbs-list details.close summary { list-style: none; cursor: pointer; }
.sbs-list details.close summary::-webkit-details-marker { display: none; }
.sbs-list details.close form { position: absolute; right: 0; z-index: 5; width: 280px; margin-top: 6px; }
.sbs-list details.close form .row { margin-top: 8px; display: flex; gap: 6px; }
.sbs-lanes { margin: 0; padding-left: 18px; } .sbs-lanes li { margin: 3px 0; }
.sbs-paste { margin-top: 14px; } .sbs-paste textarea { width: 100%; font: 13px/1.4 ui-monospace, Menlo, monospace; }
@media (max-width: 760px) {
  .sbs-list thead { display: none; }
  .sbs-list, .sbs-list tbody { display: block; width: 100%; }
  .sbs-list tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .sbs-list td { display: block; padding: 0; border: 0; background: none !important; }
  .sbs-list td.ln { flex-basis: 100%; }
  .sbs-list td.num { text-align: left; }
  .sbs-list details.close form { position: static; width: auto; }
}
@media (max-width: 760px) {
  .sbs-list td.gb::before { content: "GB Rates "; color: var(--muted); font-weight: 400; }
  .sbs-list td.cs::before { content: "CargoSphere "; color: var(--muted); font-weight: 400; }
  .sbs-list td.df:empty { display: none; }
}