/* ============================================================
   Broker Genius — warehouse-pages.css
   The Warehouse Overview's tour half and the seven feature pages
   (Receive, Stock, Release, Customs, Billing, Transit shed,
   Settings). Loaded after main.css and warehouse.css, and only
   on those pages (inc/warehouse-pages.php).

   Same visual system as the rest of the site: the main.css
   tokens, 2px ink borders, hard shadows, mono micro-labels,
   brand yellow. No colour here that main.css or warehouse.css
   does not already use.
   ============================================================ */

/* ---------- The row of Warehouse pages under the menu ---------- */
.whp-rail {
  background: var(--card);
  border-bottom: 2px solid var(--ink);
  padding: 0 28px;
}
.whp-rail__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.whp-rail__inner::-webkit-scrollbar { display: none; }
.whp-rail__k {
  flex: none;
  font: 700 10.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-right: 10px;
}
.whp-rail__a {
  flex: none;
  font: 500 12.5px var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-3);
  padding: 7px 12px;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.whp-rail__a:hover { color: var(--ink); border-color: var(--line); }
.whp-rail__a.is-on { color: var(--ink); background: var(--accent); border-color: var(--ink); }
.whp-rail__a:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }

/* ---------- Screens ---------- */
.whp-shot {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
}
.whp-shot__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  min-width: 0;
}
.whp-shot__dots { display: flex; gap: 6px; flex: none; }
.whp-shot__dots i { width: 9px; height: 9px; border: 1.5px solid var(--ink); display: block; }
.whp-shot__dots i:first-child { background: var(--accent); }
.whp-shot__label {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.whp-shot__link { display: block; cursor: zoom-in; }
.whp-shot__link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.whp-shot img { display: block; width: 100%; height: auto; }

/* A side panel from the product: narrower, so it reads at its real size. */
.whp-shot--panel { max-width: 540px; margin: 0 auto; }

/* Printed paper: no bar, a softer shadow, like a sheet on a desk. */
.whp-shot--paper { box-shadow: 5px 5px 0 rgba(16, 22, 42, 0.12); border-color: var(--line-dash); background: #fff; }

/* The phone screen. */
.whp-shot--phone {
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--brown-shadow);
}
.whp-shot--phone img { border-radius: 24px; }
.whp-shot--phone .whp-shot__link { border-radius: 24px; overflow: hidden; }
.whp-feat--phone .whp-caption, .whp-feat--panel .whp-caption { margin-left: auto; margin-right: auto; text-align: center; max-width: 46ch; }

.whp-caption {
  font: 500 12px/1.6 var(--font-mono);
  color: var(--muted-2);
  margin-top: 16px;
  max-width: 80ch;
}

/* ---------- Feature page hero ---------- */
.whp-hero {
  border-bottom: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 64px 28px 76px;
}
.whp-hero__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.whp-hero__shot { max-width: 1180px; margin: 52px auto 0; }
.whp-hero .whp-caption, .whp-ovhero .whp-caption { margin-left: auto; margin-right: auto; text-align: center; }
.whp-ovhero { padding-bottom: 76px; }

/* ---------- Feature blocks: text beside a screen, alternating ---------- */
.whp-feat { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 80px 28px; }
.whp-feat--flip { background: var(--tint); }
.whp-feat__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: center;
}
.whp-feat--flip .whp-feat__text { order: 2; }
.whp-feat--flip .whp-feat__media { order: 1; }
.whp-feat--panel .whp-feat__inner,
.whp-feat--phone .whp-feat__inner,
.whp-feat--paper .whp-feat__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.whp-feat__text, .whp-feat__media { min-width: 0; }

.whp-feat__n {
  display: inline-block;
  font: 700 10.5px var(--font-mono);
  color: var(--ink);
  background: var(--accent);
  border: 1.5px solid var(--ink);
  padding: 2px 6px 1px;
  margin-right: 6px;
}
.whp-feat__title {
  font-size: 38px;
  line-height: 1.07;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-top: 16px;
  max-width: 18ch;
  text-wrap: balance;
}
.whp-feat__body {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 18px;
  max-width: 54ch;
  text-wrap: pretty;
}
.whp-points { margin: 26px 0 0; border-top: 2px solid var(--ink); }
.whp-points__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.whp-points dt {
  font: 700 11px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
  padding-top: 2px;
}
.whp-points dd { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--ink); }

/* ---------- What it prints ---------- */
.whp-docs { border-bottom: 2px solid var(--ink); background: var(--tint); padding: 76px 28px; }
.whp-docs__title { margin-top: 16px; max-width: 26ch; }
.whp-docs__grid { display: grid; gap: 28px; margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.whp-docs__grid--1 { grid-template-columns: minmax(0, 560px); }
.whp-docs__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.whp-docs__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.whp-doc { min-width: 0; }
/* Show the top of the sheet; the full page opens on click. */
.whp-doc__paper .whp-shot__link { height: 320px; overflow: hidden; position: relative; }
.whp-doc__paper img { height: 100%; object-fit: cover; object-position: top center; }
.whp-doc__paper .whp-shot__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
.whp-doc__t { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 20px; }
.whp-doc__b { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 6px; }

/* ---------- Who uses this tab ---------- */
.whp-roles { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 60px 28px; }
.whp-roles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.whp-role {
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 rgba(16, 22, 42, 0.10);
  padding: 22px;
}
.whp-role__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.whp-role__b { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

/* ---------- Previous / next ---------- */
.whp-pager { border-bottom: 2px solid var(--ink); background: var(--paper-2); padding: 40px 28px; }
.whp-pager__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.whp-pager__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 22px 26px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.whp-pager__link--next { text-align: right; }
.whp-pager__link:hover { background: var(--accent); color: var(--ink); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.whp-pager__k { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.whp-pager__link:hover .whp-pager__k { color: var(--ink); }
.whp-pager__t { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- Closing band ---------- */
.whp-cta .btn-primary { margin-top: 28px; background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--brown-shadow); }
.whp-cta .btn-primary:hover { background: #000; color: #fff; box-shadow: 1px 1px 0 var(--brown-shadow); }
.whp-cta__fine { font: 500 11.5px/1.6 var(--font-mono); color: #4A3F1E; margin-top: 26px; }

/* ============================================================
   Overview: the tour half
   ============================================================ */
.whp-tabs { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 76px 28px; scroll-margin-top: 80px; }
.whp-tabs__title { margin-top: 16px; max-width: 30ch; }
.whp-tabs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.whp-tab {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  min-width: 0;
}
.whp-tab:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.whp-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.whp-tab__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
/* Zoomed to the top-left of the screen, so the card shows a readable corner rather than a postage stamp. */
.whp-tab__img img { width: 165%; max-width: none; height: auto; display: block; }
/* The eighth card: the way in, in ink. */
.whp-tab--cta { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--brown-shadow); justify-content: flex-end; }
.whp-tab--cta:hover { color: #fff; box-shadow: 7px 7px 0 var(--brown-shadow); }
.whp-tab--cta .whp-tab__body { justify-content: flex-end; padding: 26px 22px; }
.whp-tab--cta .whp-tab__n { color: var(--accent); }
.whp-tab--cta .whp-tab__t { color: #fff; font-size: 26px; line-height: 1.1; }
.whp-tab--cta .whp-tab__b { color: var(--footer-text); flex: 0; margin-top: 10px; }
.whp-tab--cta .whp-tab__go { color: var(--accent); }
.whp-tab__body { display: flex; flex-direction: column; padding: 18px 20px 20px; flex: 1; }
.whp-tab__n { font: 700 11px var(--font-mono); color: var(--sand); }
.whp-tab__t { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; margin-top: 6px; }
.whp-tab__b { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; flex: 1; }
.whp-tab__go { font: 600 11.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); margin-top: 14px; }
.whp-tab--alt { background: var(--accent); }
.whp-tab--alt .whp-tab__b { color: #4A3F1E; }
.whp-tab--alt .whp-tab__go { color: var(--ink); }

.whp-home { border-bottom: 2px solid var(--ink); background: var(--tint); padding: 76px 28px; }
.whp-home__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.whp-home__title { margin-top: 16px; max-width: 20ch; }
.whp-home__blurb { font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 54ch; }
.whp-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.whp-tile { border: 2px solid var(--ink); background: var(--card); padding: 22px; box-shadow: 4px 4px 0 rgba(16, 22, 42, 0.08); }
.whp-tile--on { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); }
.whp-tile__k { font: 700 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.whp-tile__b { font-size: 14.8px; line-height: 1.6; color: var(--muted); margin-top: 10px; }
.whp-tile--on .whp-tile__b { color: #4A3F1E; }

.whp-who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.whp-who__card { border: 2px solid rgba(255, 255, 255, 0.28); background: #16161A; padding: 24px; }
.whp-who__card--note { border-style: dashed; background: transparent; }
.whp-who__t { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.whp-who__b { font-size: 14.8px; line-height: 1.6; color: var(--line-soft); margin-top: 10px; }
.whp-who__no { font: 600 11.5px var(--font-mono); letter-spacing: 0.06em; color: var(--accent); margin-top: 12px; }

.whp-kinds { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 76px 28px; }
.whp-kinds__title { margin-top: 16px; max-width: 28ch; }
.whp-kinds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.whp-kind { min-width: 0; }
.whp-kind .whp-shot { box-shadow: 6px 6px 0 var(--ink); }
.whp-kind__t { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-top: 26px; }
.whp-kind__b { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; max-width: 54ch; }
.whp-kind__tabs { font: 500 12px var(--font-mono); color: var(--muted-3); margin-top: 12px; }
.whp-kind__go { display: inline-block; font: 600 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); margin-top: 14px; }

.whp-docs--ov { background: var(--tint); }

.whp-codes { border-bottom: 2px solid var(--ink); background: var(--paper-2); padding: 60px 28px; }
.whp-codes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; border: 2px solid var(--ink); background: var(--card); }
.whp-code { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.whp-code:nth-child(3n) { border-right: 0; }
.whp-code:nth-last-child(-n + 3) { border-bottom: 0; }
.whp-code__k { font: 700 15px var(--font-mono); color: var(--ink); }
.whp-code__b { font-size: 14px; line-height: 1.5; color: var(--muted); }
.whp-codes__fine { font: 500 11.5px/1.6 var(--font-mono); color: var(--muted-2); margin-top: 16px; }

/* ---------- Full-size view of a screenshot ---------- */
.whp-zoom {
  border: 2px solid var(--ink);
  padding: 0;
  max-width: min(96vw, 1800px);
  max-height: 94vh;
  background: var(--card);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: auto;
}
.whp-zoom::backdrop { background: rgba(11, 11, 11, 0.78); }
.whp-zoom img { display: block; max-width: 100%; height: auto; }
.whp-zoom__close {
  position: sticky;
  top: 0;
  float: right;
  margin: 10px;
  font: 600 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .whp-feat__inner,
  .whp-feat--panel .whp-feat__inner,
  .whp-feat--phone .whp-feat__inner,
  .whp-feat--paper .whp-feat__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .whp-feat--flip .whp-feat__text { order: 1; }
  .whp-feat--flip .whp-feat__media { order: 2; }
  .whp-feat__title { max-width: 24ch; }
  .whp-tabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whp-home__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .whp-home__grid, .whp-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whp-docs__grid, .whp-docs__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whp-codes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whp-code:nth-child(3n) { border-right: 1px solid var(--line); }
  .whp-code:nth-child(2n) { border-right: 0; }
  .whp-code:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .whp-code:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 720px) {
  .whp-rail { padding: 0 16px; }
  .whp-hero { padding: 40px 20px 52px; }
  .whp-hero__shot { margin-top: 36px; }
  .whp-feat, .whp-docs, .whp-tabs, .whp-home, .whp-kinds { padding: 52px 20px; }
  .whp-roles, .whp-codes { padding: 44px 20px; }
  .whp-pager { padding: 28px 20px; }
  .whp-feat__title { font-size: 28px; }
  .whp-points__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .whp-shot { box-shadow: 5px 5px 0 var(--ink); }
  .whp-shot__bar { padding: 8px 10px; gap: 10px; }
  .whp-tabs__grid, .whp-home__grid, .whp-who__grid, .whp-roles__grid,
  .whp-kinds__grid, .whp-docs__grid, .whp-docs__grid--2, .whp-docs__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .whp-docs__grid--1 { grid-template-columns: minmax(0, 1fr); }
  .whp-pager__inner { grid-template-columns: minmax(0, 1fr); }
  .whp-pager__link--next { text-align: left; }
  .whp-pager__t { font-size: 22px; }
  .whp-codes__grid { grid-template-columns: minmax(0, 1fr); }
  .whp-code, .whp-code:nth-child(2n), .whp-code:nth-child(3n) { border-right: 0; }
  .whp-code:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .whp-code:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whp-tab, .whp-pager__link { transition: none; }
}