/* ============================================================
   WYVERN FREIGHT — LOGISTICS GLOSSARY (glossary.html)
   Matches the DP World glossary (user 2026-10-26: "this design does not match DP World ... fix this page"), measured
   at 1440px on dpworld.com/en/glossary: white banner (H1 + lead), large search field, wrapped pill filters, A-Z row
   across the full width (not sticky), letter heading above a 3-column grid of light grey 12px-radius cards
   (category pill, bold title, definition, Learn more at the foot). Wyvern keeps its own type, colours and buttons
   (no arrow on Learn more). Definitions are clipped to 4 lines only on terms whose dialog shows the full text
   (ui-ux-pro-max truncation-strategy); simple terms always show their whole definition.
   ============================================================ */
.gx-page{--gx-card:var(--surface-2);--gx-pill:var(--surface-3)}

/* ---------- Banner: plain white, no photo (DP World) ---------- */
.gx-hero{background:#fff;border-bottom:0}
.gx-hero .container{padding-top:64px;padding-bottom:24px}
.gx-hero .doc-lead{max-width:640px}

/* ---------- Search ---------- */
.gx-tools{background:#fff}
.gx-tools .container{padding-bottom:8px}
.gx-search{position:relative;border-bottom:1px solid var(--line-strong);transition:border-color var(--t-fast)}
.gx-search:focus-within{border-bottom-color:var(--ink)}
.gx-search-i{position:absolute;right:56px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.gx-q{display:block;width:100%;height:56px;padding:0 96px 0 0;border:0;background:transparent;
  font:500 clamp(26px,2.8vw,40px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink);-webkit-appearance:none;appearance:none}
.gx-q::placeholder{color:var(--subtle);opacity:1}   /* 4.8:1 on white (taste audit 2026-10-26; was 2.6:1) */
.gx-q::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.gx-q:focus{outline:none}
.gx-search:has(.gx-q:focus-visible){box-shadow:0 2px 0 0 var(--ink)}
.gx-clear{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:50%;background:var(--gx-card);color:var(--ink-2);cursor:pointer}
.gx-clear[hidden]{display:none}
.gx-clear:hover{background:var(--gx-pill);color:var(--ink)}
.gx-clear:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Category pills ---------- */
.gx-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.gx-chip{flex:none;min-height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:#fff;
  font:500 14px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;touch-action:manipulation;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.gx-chip:hover{border-color:var(--ink-2);color:var(--ink)}
.gx-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gx-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- A-Z row: full width, scrolls with the page (DP World) ---------- */
.gx-az{background:#fff}
.gx-az .container{padding-top:8px;padding-bottom:8px}
.gx-az-list{display:flex;justify-content:space-between;gap:4px;list-style:none;margin:0;padding:0}
.gx-az-l{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;
  font:600 16px/1 var(--sans);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color var(--t-fast),color var(--t-fast)}
.gx-az-l:hover:not(:disabled){background:var(--gx-card)}
.gx-az-l.is-on{background:var(--ink);color:#fff}
.gx-az-l:disabled{color:#C3C8CF;cursor:default}
.gx-az-l:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Letter groups + card grid ---------- */
.gx-body .container{padding-top:8px;padding-bottom:96px}
.gx-group{padding-top:32px;scroll-margin-top:calc(var(--bar-compact) + 16px)}
.gx-group[hidden]{display:none}
.gx-empty + .gx-group{padding-top:16px}   /* first letter sits close to the filters, so the first cards show without scrolling */
.gx-letter{margin-bottom:20px;font:600 48px/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.gx-letter:focus{outline:none}
.gx-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}

.gx-term{display:flex;flex-direction:column;align-items:flex-start;padding:20px 20px 22px;border-radius:var(--r-tile);background:var(--gx-card);
  scroll-margin-top:calc(var(--bar-compact) + 24px);transition:box-shadow .6s var(--ease)}
.gx-term[hidden]{display:none}
.gx-cat{display:inline-flex;align-items:center;min-height:26px;padding:3px 12px 4px;border-radius:var(--r-pill);background:var(--gx-pill);
  font:500 12px/1.2 var(--sans);color:var(--ink-2)}
.gx-name{margin-top:16px;font:600 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.gx-acr{margin-left:6px;padding:3px 10px 4px;border-radius:var(--r-pill);background:#fff;font:500 12px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink-2);
  text-decoration:none;vertical-align:.2em;white-space:nowrap}   /* pill, like the category tag (taste audit: one radius system) */
.gx-def{margin-top:10px;font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.gx-term[data-detail] .gx-def{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.gx-term[data-detail] .gx-def{margin-bottom:16px}
.gx-more{margin-top:auto;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}   /* spacing sits on the definition, so the focus ring hugs the label */
.gx-term.is-target{box-shadow:0 0 0 2px var(--red)}

.gx-empty{max-width:640px;padding:56px 0 24px}
.gx-empty[hidden]{display:none}
.gx-empty-h{font:600 clamp(26px,2.4vw,34px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.gx-empty p{margin-top:12px;font:400 17px/1.55 var(--sans);color:var(--muted)}
.gx-empty .gx-empty-acts{margin-top:24px}
.gx-reset{-webkit-appearance:none;appearance:none;border:0;cursor:pointer}

.gx-note{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);max-width:760px;font:400 14px/1.6 var(--sans);color:var(--muted)}

/* ---------- Term dialog ---------- */
.gx-dlg{width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--r-tile);background:#fff;color:var(--ink);overflow:hidden;
  box-shadow:var(--shadow-overlay)}
.gx-dlg::backdrop{background:rgba(11,14,18,.6)}
.gx-dlg-in{position:relative;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
.gx-dlg-head{position:relative;padding:28px 32px 24px;background:var(--gx-card)}
.gx-dlg-cat{display:inline-flex;align-items:center;min-height:26px;padding:3px 12px 4px;border-radius:var(--r-pill);background:var(--gx-pill);
  font:500 12px/1.2 var(--sans);color:var(--ink-2)}
.gx-dlg-t{margin-top:16px;padding-right:48px;font:600 clamp(28px,3.2vw,38px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.gx-dlg-t:focus{outline:none}
.gx-dlg-t .gx-acr{font-size:13px;vertical-align:.35em}
.gx-dlg-def{margin-top:12px;font:400 18px/1.5 var(--sans);color:var(--ink-2)}
.gx-dlg-x{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer}
.gx-dlg-x:hover{background:var(--gx-pill);color:var(--ink)}
.gx-dlg-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gx-dlg-body{padding:4px 32px 32px}
.gx-sec{padding-top:24px}
.gx-sec-h{font:600 15px/1.3 var(--sans);color:var(--ink)}
.gx-sec p,.gx-sec li{font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.gx-sec p{margin-top:8px}
.gx-sec ul{margin:8px 0 0;padding-left:20px}
.gx-sec li + li{margin-top:8px}
.gx-sec .gx-rel{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.gx-sec .gx-rel li{margin:0}
.gx-rel a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font:500 14px/1.2 var(--sans);color:var(--ink);text-decoration:none;transition:border-color var(--t-fast),background-color var(--t-fast)}
.gx-rel a:hover{border-color:var(--ink);background:var(--gx-card)}
.gx-rel a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gx-sec .gx-svc{margin-top:12px}
.gx-src{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font:400 13px/1.55 var(--sans) !important;color:var(--muted) !important}
.gx-src a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
html:has(.gx-dlg[open]){overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .gx-dlg[open]{animation:gxDlgIn .3s cubic-bezier(.32,.72,0,1)}
  .gx-dlg[open]::backdrop{animation:gxFade .25s ease-out}
}
@keyframes gxDlgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gxFade{from{opacity:0}to{opacity:1}}

/* ---------- Touch screens: 44px targets (ui-ux-pro-max touch-target-size) ---------- */
@media (pointer:coarse){
  .gx-chip{min-height:44px;padding:0 16px}
  .gx-az-l{width:44px;height:44px}
}

/* ---------- Tablet: 2 columns; A-Z scrolls sideways when it cannot fit ---------- */
@media (max-width:1139px){
  .gx-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-az-list{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gx-az-list::-webkit-scrollbar{display:none}
  .gx-az-list li{flex:none}
}

/* ---------- Phone: 1 column; pills scroll sideways (DP World); the dialog fills the screen ---------- */
@media (max-width:767px){
  .gx-hero .container{padding-bottom:20px}
  .gx-q{height:60px;padding-right:88px;font-size:24px}
  .gx-search-i{right:52px}
  .gx-cats{flex-wrap:nowrap;overflow-x:auto;margin:18px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gx-cats::-webkit-scrollbar{display:none}
  .gx-az .container{padding-left:0;padding-right:0}
  .gx-az-list{padding:0 var(--gutter)}
  .gx-terms{grid-template-columns:minmax(0,1fr);gap:12px}
  .gx-group{padding-top:32px}
  .gx-letter{font-size:40px;margin-bottom:16px}
  .gx-def{font-size:16px}
  .gx-body .container{padding-bottom:64px}

  .gx-dlg{width:100vw;height:100dvh;max-height:none;margin:0;border-radius:0;box-shadow:none}
  .gx-dlg-in{height:100dvh;max-height:none}
  .gx-dlg-head{position:sticky;top:0;z-index:1;padding:20px 20px 18px}
  .gx-dlg-x{top:12px;right:12px}
  .gx-dlg-t{margin-top:12px;font-size:28px}
  .gx-dlg-def{font-size:17px}
  .gx-dlg-body{padding:0 20px 40px}
}

@media print{
  .gx-tools,.gx-az,.gx-more,.gx-dlg,.gx-page .sv-cta{display:none !important}
  .gx-term{break-inside:avoid;background:none;border:1px solid #ccc}
  .gx-term[data-detail] .gx-def{display:block;-webkit-line-clamp:unset;overflow:visible}
}