/* =====================================================================================================================
   SS Online UI kit (direction A "Field Terminal"; Proposed 2026-10-09). Needs css/ui-tokens.css first.

   README (for page agents)
   - Build markup with js/ui/kit.js helpers (they escape text and emit the classes below), or write it by hand
     with the same classes. Windows come from js/ui/windows.js (.gwin shell; see the README at the top of that file).
   - Components: .gbtn (primary|secondary|ghost|danger|icon; sm|lg; .locked; .block), .gtabs/.gtab, .gseg,
     .grail/.grail-btn, .gpanel, .gcard, .gtile, .ghead, .gcell (+ .ggrid), .gstat, .gbar, .gpips, .gchip, .gtag,
     .gswitch, .gslider, .gstepper, .gfield/.ginput, .gscroll/.gscroll-x, .gdialog, .gtoast, .gtip, .gwin.
   - States, everywhere: .is-pressed (set by js/no-web.js on pointerdown), .is-selected / [aria-pressed=true] /
     [aria-selected=true] (amber brackets), :focus-visible (cyan brackets, keyboard only), [aria-disabled=true] or
     :disabled (45 %, still receives the press so the window manager can toast data-reason), .locked / .is-locked
     (hatched + padlock), .is-empty (cells). Hover styles exist only for (hover:hover) and (pointer:fine).
   - Chamfers: the shape lives in ::before (clip-path + gradient-drawn 1px border, works in Safari); ::after draws
     the selection / focus brackets OUTSIDE the box, so the element itself stays a plain rectangle (hit area) and can
     carry a drop-shadow glow. Per element: --c (cut), --c1 (top-left) --c2 (bottom-right) --c3 (top-right)
     --c4 (bottom-left), --bd (border colour), --fill (background layers). Do not put clip-path on these elements.
   - Scrolling: only inside .gscroll (vertical) / .gscroll-x (horizontal, no bar). The page never scrolls.
   - Text: Thai never gets letter-spacing or uppercase; Latin eyebrows use .g-eyebrow. Numbers use .g-num.
   - Sizes: calc(N * var(--u)). Touch targets come from --tap / --tap-sm (>= 44 px on touch).
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- glyphs */
.gglyph {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
  overflow: visible;
}
.gglyph .g2 {
  opacity: 0.42;
}

/* the HUD under an open window (marked by windows.js) is hidden; the world canvas stays visible */
.gwin-under:not(canvas) {
  opacity: 0 !important;
  transition: opacity var(--t-med) var(--ease);
}

/* ---------------------------------------------------------------------------------------------------- shapes */
:is(.gbtn, .gcell, .gpanel, .gcard, .gtile, .gchip, .gtag, .gf-box, .gdialog, .gtoast, .gtip, .gwin-region.is-panel, .grail-btn)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-clip-path: polygon(var(--c1, var(--c)) 0, calc(100% - var(--c3, 0px)) 0, 100% var(--c3, 0px), 100% calc(100% - var(--c2, var(--c))), calc(100% - var(--c2, var(--c))) 100%, var(--c4, 0px) 100%, 0 calc(100% - var(--c4, 0px)), 0 var(--c1, var(--c)));
  clip-path: polygon(var(--c1, var(--c)) 0, calc(100% - var(--c3, 0px)) 0, 100% var(--c3, 0px), 100% calc(100% - var(--c2, var(--c))), calc(100% - var(--c2, var(--c))) 100%, var(--c4, 0px) 100%, 0 calc(100% - var(--c4, 0px)), 0 var(--c1, var(--c)));
  background:
    linear-gradient(135deg, transparent calc(var(--c1, var(--c)) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c1, var(--c)) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(315deg, transparent calc(var(--c2, var(--c)) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c2, var(--c)) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(225deg, transparent calc(var(--c3, 0px) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c3, 0px) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(45deg, transparent calc(var(--c4, 0px) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c4, 0px) * 0.7071 + 0.6px), transparent 0),
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--bd);
  transition: filter var(--t-fast) var(--ease), opacity var(--t-fast);
}
/* brackets: two L marks (top-left + bottom-right) just outside the box */
:is(.gbtn, .gcell, .gcard, .gtile, .grail-btn)::after {
  content: "";
  position: absolute;
  inset: calc(-4 * var(--u));
  pointer-events: none;
  opacity: 0;
  --bl: calc(12 * var(--u));
  --bc: var(--accent);
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / 2px var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / 2px var(--bl) no-repeat;
  transition: opacity var(--t-fast) var(--ease), inset var(--t-fast) var(--ease);
}
:is(.gbtn, .gcell, .gcard, .gtile, .grail-btn):focus-visible {
  outline: none;
}
:is(.gbtn, .gcell, .gcard, .gtile, .grail-btn):focus-visible::after,
:is(.gbtn, .gcell, .gcard, .gtile).is-focus::after {
  opacity: 1;
  --bc: var(--info);
}
:is(.gbtn, .gcell, .gcard, .gtile).is-selected::after,
.gcell[aria-pressed="true"]::after,
.gcard[aria-pressed="true"]::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------------------------------- buttons */
.gbtn {
  --c: var(--cut-sm);
  --bd: var(--line-strong);
  --fill: linear-gradient(180deg, var(--text-a04), transparent 60%), var(--panel2-a90);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 calc(18 * var(--u));
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), color var(--t-fast);
}
.gbtn .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
}
.gbtn .gk-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.gbtn .gk-sub,
.gbtn .gk-reason {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.2;
}
.gbtn.primary {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%), linear-gradient(90deg, transparent 0 calc(100% - 7px), rgba(26, 18, 3, 0.18) 0), var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  filter: drop-shadow(0 0 calc(9 * var(--u)) var(--accent-a35));
}
.gbtn.primary .gk-sub {
  color: rgba(26, 18, 3, 0.72);
}
.gbtn.secondary {
  --bd: var(--line-strong);
}
.gbtn.ghost {
  --bd: transparent;
  --fill: transparent;
  color: var(--dim);
}
.gbtn.danger {
  --bd: var(--danger);
  --fill: linear-gradient(180deg, var(--danger-a14), rgba(255, 75, 58, 0.06));
  color: var(--bad);
}
.gbtn.info {
  --bd: var(--info-dim);
  --fill: linear-gradient(180deg, var(--info-a22), var(--info-a10));
  color: var(--info);
}
.gbtn.icon {
  padding: 0;
  width: var(--tap);
}
.gbtn.icon .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.gbtn.sm {
  min-height: var(--tap-sm);
  min-width: var(--tap-sm);
  padding: 0 calc(12 * var(--u));
  font-size: var(--fs-sm);
  --c: var(--cut-xs);
}
.gbtn.icon.sm {
  width: var(--tap-sm);
  padding: 0;
}
.gbtn.lg {
  min-height: var(--tap-lg);
  padding: 0 calc(30 * var(--u));
  font-size: var(--fs-lg);
  --c: var(--cut-md);
}
.gbtn.block {
  display: flex;
  width: 100%;
}
.gbtn.is-pressed {
  transform: translateY(1px) scale(0.975);
}
.gbtn.is-pressed::before {
  filter: brightness(1.25);
}
.gbtn.primary.is-pressed {
  filter: drop-shadow(0 0 calc(4 * var(--u)) var(--accent-a35)) brightness(0.94);
}
.gbtn.is-selected {
  --bd: var(--accent);
  color: var(--accent);
}
.gbtn[aria-pressed="true"]:not(.gtab) {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, var(--accent-a16), var(--accent-a08));
  color: var(--accent);
}
.gbtn:disabled,
.gbtn[aria-disabled="true"] {
  opacity: 0.45;
  filter: none;
  transform: none;
}
/* A disabled primary must not read as an amber call to action (2026-10-09 review): dark hatched plate, dim amber
   edge, faint text, and (block / large buttons) the reason on a second line. Secondary and ghost keep the 45% fade. */
.gbtn.primary:disabled,
.gbtn.primary[aria-disabled="true"] {
  opacity: 1;
  --bd: var(--accent-dim);
  --fill: var(--hatch), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--panel-2);
  color: var(--faint);
  font-weight: 600;
  filter: none;
}
.gbtn.primary:is(:disabled, [aria-disabled="true"]) .gglyph {
  color: var(--accent-dim);
}
.gbtn.primary:is(:disabled, [aria-disabled="true"]) :is(.gk-sub, .gk-kbd) {
  color: var(--faint);
}
.gbtn.primary:is(:disabled, [aria-disabled="true"]) .gk-label {
  max-width: 100%;
}
.gbtn.primary:is(:disabled, [aria-disabled="true"]) .gk-reason {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  text-align: center;
  color: var(--dim);
}
.gbtn.locked {
  opacity: 1;
  --bd: var(--line);
  --fill: var(--hatch), var(--panel-a72);
  color: var(--faint);
}
.gbtn.locked .gk-label {
  color: var(--dim);
}
.gk-lockicon .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: var(--accent-dim);
}
.gk-kbd {
  font-family: var(--f-num);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--dim);
  padding: 0 calc(5 * var(--u));
  border: 1px solid var(--line);
  line-height: calc(18 * var(--u));
  margin-left: calc(2 * var(--u));
}
.gbtn.primary .gk-kbd {
  color: rgba(26, 18, 3, 0.7);
  border-color: rgba(26, 18, 3, 0.35);
}
html[data-input="touch"] .gk-kbd {
  display: none;
}
.gk-badge {
  position: absolute;
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
  min-width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  padding: 0 calc(4 * var(--u));
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: calc(18 * var(--u));
  text-align: center;
}

/* ------------------------------------------------------------------------------------------------------ tabs */
.gtabs {
  display: inline-flex;
  align-items: stretch;
  gap: calc(3 * var(--u));
  min-width: 0;
}
.gtab {
  --sk: calc(10 * var(--u));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: var(--tap-sm);
  min-width: calc(var(--tap-sm) + 2 * var(--sk));
  padding: 0 calc(20 * var(--u));
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--dim);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.gtab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
  clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
  background: linear-gradient(180deg, var(--text-a04), transparent), var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--line);
  transition: background var(--t-fast);
}
.gtab .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.gtab[aria-selected="true"] {
  color: var(--accent-ink);
}
.gtab[aria-selected="true"]::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 55%), var(--accent);
  box-shadow: none;
}
.gtab.is-pressed {
  transform: translateY(1px);
}
.gtab.locked {
  color: var(--faint);
}
.gtab.locked::before {
  background: var(--hatch), var(--panel);
}
.gtab:focus-visible {
  outline: none;
}
.gtab:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--info);
}
.gtab-badge {
  font-size: var(--fs-xs);
  min-width: calc(18 * var(--u));
  padding: 0 calc(4 * var(--u));
  line-height: calc(18 * var(--u));
  background: var(--danger);
  color: #fff;
}
.gtab[aria-selected="true"] .gtab-badge {
  background: var(--accent-ink);
  color: var(--accent);
}

/* -------------------------------------------------------------------------------------------- segmented control */
.gseg {
  --c: var(--cut-xs);
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  gap: 2px;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background:
    linear-gradient(135deg, transparent calc(var(--c) * 0.7071 - 0.6px), var(--line-strong) 0 calc(var(--c) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(315deg, transparent calc(var(--c) * 0.7071 - 0.6px), var(--line-strong) 0 calc(var(--c) * 0.7071 + 0.6px), transparent 0),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  position: relative;
  max-width: 100%;
}
.gseg > button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: var(--tap-sm);
  min-width: var(--tap-sm);
  padding: 0 calc(14 * var(--u));
  border: 0;
  margin: 0;
  background: transparent;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--dim);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.gseg > button .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.gseg > button + button {
  box-shadow: -2px 0 0 -1px var(--line);
}
.gseg > button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%), var(--accent);
  color: var(--accent-ink);
}
.gseg > button.is-pressed {
  background: var(--panel-3);
}
.gseg > button[aria-pressed="true"].is-pressed {
  filter: brightness(0.92);
}
.gseg > button[aria-disabled="true"] {
  opacity: 0.45;
}
.gseg > button:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -3px;
}

/* ----------------------------------------------------------------------------------------- panels, cards, tiles */
.gpanel {
  --c: var(--cut-lg);
  --bd: var(--line);
  --fill: linear-gradient(180deg, var(--text-a04), transparent calc(120 * var(--u))), var(--glass);
  position: relative;
  isolation: isolate;
  padding: calc(16 * var(--u));
  min-width: 0;
}
.gpanel.solid {
  --fill: linear-gradient(180deg, var(--text-a04), transparent calc(120 * var(--u))), var(--panel);
}
/* corner ticks on the two uncut corners */
.gpanel::after,
.gwin-region.is-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --tl: calc(14 * var(--u));
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) top right / var(--tl) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) top right / 1px var(--tl) no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom left / var(--tl) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom left / 1px var(--tl) no-repeat;
}
.gcard {
  --c: var(--cut-md);
  --bd: var(--line);
  --fill: linear-gradient(180deg, var(--text-a04), transparent 70%), var(--panel2-a90);
  position: relative;
  isolation: isolate;
  display: block;
  padding: calc(14 * var(--u));
  min-width: 0;
  border: 0;
  margin: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--t-fast) var(--ease);
}
button.gcard.is-pressed,
.gtile.is-pressed {
  transform: scale(0.985);
}
.gcard.is-selected,
.gcard[aria-pressed="true"] {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, var(--accent-a16), transparent 70%), var(--panel2-a90);
}
.gcard.accent {
  --bd: var(--accent-dim);
}
.gcard.info {
  --bd: var(--info-dim);
  --fill: linear-gradient(180deg, var(--info-a10), transparent 70%), var(--panel2-a90);
}
.gcard.danger {
  --bd: var(--danger);
  --fill: linear-gradient(180deg, var(--danger-a14), transparent 70%), var(--panel2-a90);
}

/* .gtile: big menu tile (glyph + Thai label + eyebrow) */
.gtile {
  --c: var(--cut-md);
  --bd: var(--line);
  --fill: radial-gradient(120% 90% at 50% 0%, var(--text-a08), transparent 60%), var(--panel2-a90);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  min-height: calc(112 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  border: 0;
  margin: 0;
  background: none;
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: transform var(--t-fast) var(--ease);
}
.gtile .gt-glyph {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  color: var(--accent);
}
.gtile .gt-label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.gtile .gt-eyebrow {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(14 * var(--u));
}
.gtile .gt-tag {
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(10 * var(--u));
}
.gtile .gt-key {
  position: absolute;
  bottom: calc(10 * var(--u));
  right: calc(12 * var(--u));
}
.gtile.preview .gt-glyph {
  color: var(--dim);
}
.gtile.locked {
  --fill: var(--hatch), var(--panel-a72);
  color: var(--dim);
}
.gtile.locked .gt-glyph {
  color: var(--faint);
}

/* ---------------------------------------------------------------------------------------------- section header */
.ghead {
  display: flex;
  align-items: flex-end;
  gap: calc(10 * var(--u));
  min-width: 0;
  margin: 0 0 calc(10 * var(--u));
}
.ghead .gh-idx {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: calc(34 * var(--u));
  padding: 0 calc(6 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-a08);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ghead .gh-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ghead h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghead .gh-rule {
  flex: 1 1 auto;
  align-self: flex-end;
  height: 5px;
  margin-bottom: calc(6 * var(--u));
  min-width: calc(24 * var(--u));
  background:
    linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat,
    var(--hazard-dim) 0 0 / calc(36 * var(--u)) 4px no-repeat;
}
.ghead .gh-right {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex: none;
}
.ghead.sm h3 {
  font-size: var(--fs-body);
}

/* -------------------------------------------------------------------------------------------------- item cells */
.ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  gap: calc(8 * var(--u));
  align-content: start;
  padding: calc(5 * var(--u)); /* room for the selection brackets drawn outside each cell */
}
.gcell {
  --c: var(--cut-sm);
  --rc: var(--r-std);
  --rc-a: var(--r-std-a);
  --bd: var(--rc);
  --fill:
    linear-gradient(0deg, var(--rc) 0 2px, transparent 2px),
    radial-gradient(90% 70% at 50% 42%, var(--text-a08), transparent 70%),
    linear-gradient(160deg, var(--rc-a) 0%, var(--panel) 70%);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--text);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .gcell {
    --bd: color-mix(in srgb, var(--rc) 72%, transparent);
  }
}
.gcell.r-tuned {
  --rc: var(--r-tuned);
  --rc-a: var(--r-tuned-a);
}
.gcell.r-special {
  --rc: var(--r-special);
  --rc-a: var(--r-special-a);
}
.gcell.r-top {
  --rc: var(--r-top);
  --rc-a: var(--r-top-a);
}
.gcell.r-std {
  --fill:
    linear-gradient(0deg, var(--line-strong) 0 2px, transparent 2px),
    radial-gradient(90% 70% at 50% 42%, var(--text-a08), transparent 70%),
    linear-gradient(160deg, var(--r-std-a) 0%, var(--panel) 70%);
}
.gc-art {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.gc-art > img,
.gc-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.gc-tier {
  position: absolute;
  top: calc(4 * var(--u));
  left: calc(6 * var(--u));
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dim);
  line-height: 1;
}
.gc-badges {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
}
.gc-eq {
  display: grid;
  place-items: center;
  min-width: calc(17 * var(--u));
  height: calc(16 * var(--u));
  padding: 0 calc(3 * var(--u));
  font: 700 var(--fs-xs) / 1 var(--f-num);
  font-style: normal;
  color: var(--accent-ink);
  background: var(--accent);
  -webkit-clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.gc-new {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: var(--info);
  box-shadow: 0 0 0 2px rgba(57, 198, 217, 0.25), 0 0 8px var(--info);
  transform: rotate(45deg);
}
.gc-bound .gglyph {
  display: block;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  color: var(--dim);
}
.gcell .gpips {
  position: absolute;
  left: calc(6 * var(--u));
  bottom: calc(7 * var(--u));
}
/* mount badge (hand-held vs shoulder pod), bottom-right like a slot-type stamp */
.gc-mount {
  position: absolute;
  right: calc(4 * var(--u));
  bottom: calc(4 * var(--u));
  display: grid;
  place-items: center;
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(8, 12, 13, 0.72);
  color: var(--dim);
  pointer-events: none;
}
.gc-mount .gglyph {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
.gc-mount.k-shoulder {
  color: var(--info);
}
.gcell.sm .gc-mount {
  right: calc(2 * var(--u));
  bottom: calc(2 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.gcell.sm .gc-mount .gglyph {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.gc-qty {
  position: absolute;
  right: calc(6 * var(--u));
  bottom: calc(4 * var(--u));
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.gc-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-20 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.gc-lock .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--dim);
}
.gcell.is-locked {
  --bd: var(--line);
  --fill: var(--hatch), var(--panel-a72);
}
.gcell.is-locked .gc-art {
  opacity: 0.3;
  filter: grayscale(1);
}
.gcell.is-empty {
  --bd: var(--line);
  --fill: radial-gradient(70% 70% at 50% 50%, var(--text-a04), transparent), var(--panel-a72);
}
.gc-slot {
  inset: calc(7 * var(--u));
  outline: 1px dashed var(--line);
  outline-offset: 0;
}
.gc-slot .gglyph {
  width: 34%;
  height: 34%;
  color: var(--faint);
  filter: none;
}
.gc-slotlabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-label);
  color: var(--faint);
  text-align: center;
}
.gcell.is-pressed {
  transform: scale(0.965);
}
.gcell.is-selected,
.gcell[aria-pressed="true"] {
  --bd: var(--accent);
  filter: drop-shadow(0 0 calc(8 * var(--u)) var(--accent-a35));
}
.gcell[aria-disabled="true"]:not(.is-locked),
.gcell:disabled {
  opacity: 0.45;
}
.gcell.sm {
  --c: var(--cut-xs);
}
.gcell.lg {
  --c: var(--cut-md);
}
.gcell.lg .gc-tier,
.gcell.lg .gc-qty {
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------------------------------------------- pips */
.gpips {
  display: inline-flex;
  gap: 2px;
  --pc: var(--r-std);
}
.gpips > i {
  display: block;
  width: calc(8 * var(--u));
  height: calc(4 * var(--u));
  background: var(--pc);
  -webkit-clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.gpips > i.off {
  background: var(--line);
}
.gpips.r-tuned {
  --pc: var(--r-tuned);
}
.gpips.r-special {
  --pc: var(--r-special);
}
.gpips.r-top {
  --pc: var(--r-top);
}

/* ---------------------------------------------------------------------------------------------------- stat row */
.gstat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: calc(8 * var(--u));
  min-height: calc(32 * var(--u));
  padding: calc(5 * var(--u)) 0;
  border-bottom: 1px solid var(--line-a60);
}
.gstat .gs-g {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: var(--dim);
  align-self: center;
}
.gstat:not(:has(.gs-g)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.gstat .gs-label {
  font-size: var(--fs-sm);
  color: var(--dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gstat .gs-val {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.gstat .gs-val small {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-label);
  color: var(--dim);
  margin-left: calc(3 * var(--u));
}
.gs-delta {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 700;
  min-width: calc(44 * var(--u));
  text-align: right;
  white-space: nowrap;
}
.gs-delta.good {
  color: var(--good);
}
.gs-delta.bad {
  color: var(--bad);
}
.gstat .gs-bar {
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  margin-top: calc(4 * var(--u));
  background: var(--line-a60);
}
.gstat .gs-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(var(--v, 0));
  transform-origin: left;
  background: var(--line-strong);
}
.gstat .gs-bar > i.new {
  background: var(--info);
  opacity: 0.85;
  height: 1px;
  top: auto;
}
.gstat.big .gs-val {
  font-size: var(--fs-xl);
}
.gstat.hl .gs-label {
  color: var(--text);
}

/* -------------------------------------------------------------------------------------------------------- bars */
.gbar {
  --bc: var(--info);
  --h: calc(10 * var(--u));
  position: relative;
  height: var(--h);
  min-width: calc(60 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)), var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  overflow: hidden;
}
.gbar > .gb-fill,
.gbar > .gb-ghost {
  position: absolute;
  inset: 1px;
  transform: scaleX(var(--v, 0));
  transform-origin: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 60%), var(--bc);
  transition: transform var(--t-med) var(--ease);
}
.gbar > .gb-ghost {
  transform: scaleX(var(--g, 0));
  background: var(--bc);
  opacity: 0.32;
}
.gbar > .gb-over {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: calc(var(--over, 0) * 100%);
  background: repeating-linear-gradient(135deg, var(--danger) 0 5px, rgba(255, 75, 58, 0.35) 0 10px);
}
.gbar > .gb-ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(11, 15, 16, 0.65) 0 10%);
}
.gbar > .gb-text {
  position: absolute;
  inset: 0 calc(8 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 2px #000;
  line-height: 1;
}
.gbar.lg {
  --h: calc(20 * var(--u));
}
.gbar.lg > .gb-text {
  font-size: var(--fs-label);
}
.gbar.sm {
  --h: calc(5 * var(--u));
  min-width: calc(30 * var(--u));
}
.gbar.k-hp {
  --bc: var(--hp);
}
.gbar.k-exp {
  --bc: var(--exp);
}
.gbar.k-accent {
  --bc: var(--accent);
}
.gbar.k-danger {
  --bc: var(--danger);
}
.gbar.k-weight {
  --bc: var(--info);
}
.gbar.k-weight.is-over {
  box-shadow: inset 0 0 0 1px var(--danger);
}
.gbar.k-weight.is-over > .gb-fill {
  --bc: var(--accent);
}

/* ------------------------------------------------------------------------------------------------ chips, tags */
.gchip {
  --c: var(--cut-xs);
  --bd: var(--line);
  --fill: var(--panel2-a90);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(32 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(8 * var(--u));
  border: 0;
  margin: 0;
  background: none;
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
button.gchip {
  min-height: var(--tap-sm);
}
.gchip .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--dim);
  flex: none;
}
.gchip b {
  font-size: var(--fs-body);
  font-weight: 700;
}
.gchip .gch-pre,
.gchip .gch-suf {
  color: var(--dim);
  font-size: var(--fs-label);
}
.gchip.k-money .gglyph {
  color: var(--accent);
}
.gchip.k-money b {
  color: var(--accent);
}
.gchip.k-info .gglyph {
  color: var(--info);
}
.gchip.k-good .gglyph {
  color: var(--good);
}
.gchip.k-danger {
  --bd: var(--danger);
  --fill: var(--danger-a14);
  color: var(--bad);
}
.gchip.k-danger .gglyph {
  color: var(--danger);
}
.gtag {
  --c: 4px;
  --bd: var(--line-strong);
  --fill: var(--panel-a72);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: calc(20 * var(--u));
  padding: 0 calc(7 * var(--u));
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  line-height: 1;
}
.gtag.th,
.gc-name.th,
.gb-text.th {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-label);
}
.gtag.th {
  height: auto;
  min-height: calc(20 * var(--u));
  padding-top: calc(2 * var(--u));
  padding-bottom: calc(2 * var(--u));
  line-height: 1.2;
}
.gtag.accent {
  --bd: var(--accent-dim);
  color: var(--accent);
}
.gtag.info {
  --bd: var(--info-dim);
  color: var(--info);
}
.gtag.danger {
  --bd: var(--danger);
  color: var(--bad);
}
.gtag.r-std {
  --bd: var(--r-std);
  color: var(--r-std);
}
.gtag.r-tuned {
  --bd: var(--r-tuned);
  color: var(--r-tuned);
}
.gtag.r-special {
  --bd: var(--r-special);
  color: var(--r-special);
}

/* ------------------------------------------------------------------------------------------------------ switch */
.gswitch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--u));
  min-height: var(--tap);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.gswitch.row,
.gk-list > .gswitch {
  display: flex;
  width: 100%;
}
.gsw-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gsw-label {
  font-size: var(--fs-body);
  line-height: 1.3;
}
.gsw-text small {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.35;
}
.gsw-track {
  --tw: calc(64 * var(--u));
  --th: calc(28 * var(--u));
  position: relative;
  flex: none;
  width: var(--tw);
  height: var(--th);
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: background var(--t-fast);
}
.gsw-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--th) - 6px);
  height: calc(var(--th) - 6px);
  background: linear-gradient(180deg, #c9d2cf, var(--dim));
  -webkit-clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  transition: transform var(--t-med) var(--ease), background var(--t-fast);
}
.gsw-on,
.gsw-off {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: calc(var(--tw) - var(--th));
  font: 700 var(--fs-xs) / 1 var(--f-num);
  letter-spacing: 0.08em;
}
.gsw-on {
  left: 2px;
  color: var(--accent-ink);
  opacity: 0;
}
.gsw-off {
  right: 2px;
  color: var(--faint);
}
.gswitch[aria-checked="true"] .gsw-track {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 60%), var(--accent);
  box-shadow: none;
}
.gswitch[aria-checked="true"] .gsw-knob {
  transform: translateX(calc(var(--tw) - var(--th)));
  background: linear-gradient(180deg, #2a2108, var(--accent-ink));
}
.gswitch[aria-checked="true"] .gsw-on {
  opacity: 1;
}
.gswitch[aria-checked="true"] .gsw-off {
  opacity: 0;
}
.gswitch.is-pressed .gsw-knob {
  filter: brightness(1.2);
}
.gswitch[aria-disabled="true"] {
  opacity: 0.45;
}
.gswitch:focus-visible {
  outline: none;
}
.gswitch:focus-visible .gsw-track {
  box-shadow: inset 0 0 0 2px var(--info);
}

/* ------------------------------------------------------------------------------------------------------ slider */
.gslider-row {
  display: grid;
  grid-template-columns: minmax(calc(110 * var(--u)), 36%) minmax(calc(120 * var(--u)), 1fr) calc(64 * var(--u));
  align-items: center;
  column-gap: calc(14 * var(--u));
  min-width: 0;
}
.gsl-label {
  font-size: var(--fs-body);
  line-height: 1.3;
}
.gsl-out {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}
.gslider {
  --v: 0;
  --thumb-w: calc(16 * var(--u));
  position: relative;
  height: var(--tap);
  min-width: calc(100 * var(--u));
  touch-action: pan-y;
  outline: none;
}
.gsl-track {
  position: absolute;
  left: calc(var(--thumb-w) / 2);
  right: calc(var(--thumb-w) / 2);
  top: 50%;
  height: calc(8 * var(--u));
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(11, 15, 16, 0.8) 0 10%), var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.gsl-fill {
  position: absolute;
  inset: 1px;
  transform: scaleX(var(--v));
  transform-origin: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%), var(--accent);
}
.gsl-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--thumb-w) / 2 + (100% - var(--thumb-w)) * var(--v));
  width: var(--thumb-w);
  height: calc(30 * var(--u));
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) 50% 50% / 2px 40% no-repeat,
    linear-gradient(180deg, #ffd27a, var(--accent));
  -webkit-clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: transform var(--t-fast) var(--ease);
}
.gslider.is-dragging .gsl-thumb,
.gslider.is-pressed .gsl-thumb {
  transform: translate(-50%, -50%) scale(1.12);
}
.gslider:focus-visible .gsl-track {
  box-shadow: inset 0 0 0 1px var(--info), 0 0 0 2px var(--info-a22);
}
.gslider:focus-visible .gsl-thumb {
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) 50% 50% / 2px 40% no-repeat,
    linear-gradient(180deg, #b5f2fa, var(--info));
}
.gslider[aria-disabled="true"] {
  opacity: 0.45;
}
html[data-orient="portrait"] .gslider-row,
.gslider-row.stack {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label out" "sl sl";
}
html[data-orient="portrait"] .gslider-row .gsl-label,
.gslider-row.stack .gsl-label {
  grid-area: label;
}
html[data-orient="portrait"] .gslider-row .gsl-out,
.gslider-row.stack .gsl-out {
  grid-area: out;
}
html[data-orient="portrait"] .gslider-row .gslider,
.gslider-row.stack .gslider {
  grid-area: sl;
}

/* ----------------------------------------------------------------------------------------------------- stepper */
.gstepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--u));
  min-width: 0;
}
.gst-label {
  font-size: var(--fs-body);
  line-height: 1.3;
}
.gstepper {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex: none;
}
.gst-val {
  display: grid;
  place-items: center;
  min-width: calc(60 * var(--u));
  padding: 0 calc(8 * var(--u));
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.gstepper .gbtn[data-step="-1"] {
  --c2: 0px;
}
.gstepper .gbtn[data-step="1"] {
  --c1: 0px;
}

/* ------------------------------------------------------------------------------------------------- text fields */
.gfield {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.gf-label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--dim);
}
.gf-box {
  --c: var(--cut-sm);
  --bd: var(--line-strong);
  --fill: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent), var(--panel);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: var(--tap);
  padding: 0 calc(12 * var(--u));
}
.gf-g {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--dim);
  flex: none;
}
.ginput {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: calc(var(--tap) - 2px);
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  caret-color: var(--accent);
  font-family: var(--f-body);
  font-size: max(16px, 1rem);
}
.ginput::placeholder {
  color: var(--faint);
}
.gfield:focus-within .gf-box {
  --bd: var(--accent);
  filter: drop-shadow(0 0 calc(6 * var(--u)) var(--accent-a16));
}
.gfield.is-error .gf-box {
  --bd: var(--danger);
}
.gf-err,
.gf-hint {
  font-size: var(--fs-label);
  line-height: 1.35;
}
.gf-err {
  color: var(--bad);
}
.gf-hint {
  color: var(--dim);
}
/* the browser's own autofill tint would look like a web form */
.ginput:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--panel) inset;
  transition: background-color 9999s;
}

/* ------------------------------------------------------------------------------------------------ inner scroll */
.gscroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  --fade: calc(18 * var(--u));
}
.gscroll-x {
  flex: none; /* a horizontal strip keeps its height inside a column */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* a strip often sits inside a vertical .gscroll: a vertical swipe that starts on it must still scroll the list,
     so allow both pan axes here and contain only the horizontal overscroll */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  --fade: calc(24 * var(--u));
}
.gscroll-x::-webkit-scrollbar {
  display: none;
}
.gscroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.gscroll::-webkit-scrollbar-track {
  background: transparent;
}
.gscroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 1px solid rgba(11, 15, 16, 0.6);
}
.gscroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dim);
}
.gscroll::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  .gscroll {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}
.gscroll[data-edge="start"] {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
}
.gscroll[data-edge="mid"] {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.gscroll[data-edge="end"] {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade));
}
.gscroll-x[data-edge="start"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.gscroll-x[data-edge="mid"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.gscroll-x[data-edge="end"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}

/* ---------------------------------------------------------------------------------------------- small helpers */
.gk-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  flex-wrap: wrap;
  min-width: 0;
}
.gk-row.nowrap {
  flex-wrap: nowrap;
}
.gk-col {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
}
.gk-list {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}
.gk-spacer {
  flex: 1 1 auto;
}
.gk-sep {
  height: 1px;
  background: var(--line);
  margin: calc(10 * var(--u)) 0;
  flex: none;
}
.gk-note {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.5;
  margin: 0;
}
.gk-hazard {
  display: block;
  height: calc(5 * var(--u));
  width: calc(56 * var(--u));
  background: var(--hazard);
  flex: none;
}
.gk-title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.25;
}
.gk-hero {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1;
}

/* ----------------------------------------------------------------------------------------------------- dialogs */
.gdlg-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: max(var(--gutter), var(--st)) max(var(--gutter), var(--sr)) max(var(--gutter), var(--sb)) max(var(--gutter), var(--sl));
  background: var(--grid-faint), radial-gradient(80% 80% at 50% 50%, rgba(5, 8, 9, 0.7), var(--scrim));
  touch-action: none;
}
.gdlg-layer.is-in .gdialog {
  animation: gdlgIn var(--t-med) var(--ease) both;
}
.gdialog {
  --c: var(--cut-lg);
  --bd: var(--line-strong);
  --fill: linear-gradient(180deg, var(--text-a04), transparent calc(100 * var(--u))), var(--panel);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(calc(560 * var(--u)), 100%);
  max-height: 100%;
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  gap: calc(14 * var(--u));
  filter: drop-shadow(0 calc(18 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55));
}
.gdialog.wide {
  width: min(calc(760 * var(--u)), 100%);
}
.gdialog::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--c);
  width: calc(120 * var(--u));
  height: 3px;
  background: var(--accent);
}
.gdialog.k-danger {
  --bd: rgba(255, 75, 58, 0.7);
}
.gdialog.k-danger::after {
  background: var(--danger);
}
.gdialog.k-reward {
  --bd: var(--accent-dim);
  --fill: radial-gradient(70% 50% at 50% 0%, var(--accent-a16), transparent 70%), var(--panel);
}
.gd-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
}
.gd-glyph {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  flex: none;
  color: var(--accent);
  background: var(--accent-a08);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
  -webkit-clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.gd-glyph .gglyph {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.gdialog.k-danger .gd-glyph {
  color: var(--danger);
  background: var(--danger-a14);
  box-shadow: inset 0 0 0 1px rgba(255, 75, 58, 0.6);
}
.gdialog.k-info .gd-glyph {
  color: var(--info);
  background: var(--info-a10);
  box-shadow: inset 0 0 0 1px var(--info-dim);
}
.gd-title {
  margin: calc(2 * var(--u)) 0 0;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.25;
}
.gd-body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  min-height: 0;
  padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  margin: calc(-4 * var(--u)) 0 calc(-4 * var(--u)) calc(-4 * var(--u));
}
.gd-body p {
  margin: 0 0 calc(8 * var(--u));
}
.gd-body p:last-child {
  margin-bottom: 0;
}
.gd-stripe {
  display: block;
  height: 4px;
  width: calc(64 * var(--u));
  background: var(--hazard-dim);
}
.gd-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(10 * var(--u));
  flex-wrap: wrap;
  padding-top: calc(4 * var(--u));
}
.gd-actions .gbtn {
  min-width: calc(128 * var(--u));
}
html[data-tier="phone"] .gdialog {
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
  gap: calc(10 * var(--u));
}
html[data-orient="portrait"] .gd-actions .gbtn {
  flex: 1 1 0;
}
@keyframes gdlgIn {
  from {
    opacity: 0;
    transform: translateY(calc(8 * var(--u))) scale(0.97);
  }
}

/* ------------------------------------------------------------------------------------------------------ toasts */
.gtoasts {
  position: fixed;
  top: calc(max(calc(10 * var(--u)), var(--st)) + calc(6 * var(--u)));
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  width: min(calc(560 * var(--u)), calc(100% - 2 * var(--gutter)));
  transform: translateX(-50%);
  pointer-events: none;
}
/* 2026-10-09 review: while a window is open its toasts sit under the header bar (not over tabs and header switches);
   while a dialog is open they go under its scrim instead of over its title row */
html:has(.gwin:not([hidden])) .gtoasts {
  top: calc(var(--head-h, calc(56 * var(--u))) + var(--st) + calc(8 * var(--u)));
}
html:has(.gdlg-layer:not([hidden])) .gtoasts {
  z-index: calc(var(--z-dialog) - 1);
}
.gtoast {
  --c: var(--cut-sm);
  --bd: var(--line-strong);
  --kc: var(--info);
  --fill: linear-gradient(90deg, var(--kc) 0 3px, transparent 3px), linear-gradient(90deg, var(--info-a10), transparent 40%), rgba(18, 26, 28, 0.95);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  max-width: 100%;
  min-height: calc(42 * var(--u));
  padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--text);
  animation: gtoastIn var(--t-med) var(--ease) both;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45));
}
.gtoast .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--kc);
  flex: none;
}
.gtoast.k-good {
  --kc: var(--good);
  --fill: linear-gradient(90deg, var(--kc) 0 3px, transparent 3px), linear-gradient(90deg, var(--good-a14), transparent 40%), rgba(18, 26, 28, 0.95);
}
.gtoast.k-warn {
  --kc: var(--accent);
  --fill: linear-gradient(90deg, var(--kc) 0 3px, transparent 3px), linear-gradient(90deg, var(--accent-a16), transparent 40%), rgba(18, 26, 28, 0.95);
}
.gtoast.k-danger {
  --kc: var(--danger);
  --bd: rgba(255, 75, 58, 0.6);
  --fill: linear-gradient(90deg, var(--kc) 0 3px, transparent 3px), linear-gradient(90deg, var(--danger-a14), transparent 40%), rgba(18, 26, 28, 0.95);
}
.gtoast.is-out {
  animation: gtoastOut var(--t-med) var(--ease) both;
}
@keyframes gtoastIn {
  from {
    opacity: 0;
    transform: translateY(calc(-10 * var(--u)));
  }
}
@keyframes gtoastOut {
  to {
    opacity: 0;
    transform: translateY(calc(-6 * var(--u)));
  }
}

/* ----------------------------------------------------------------------------------------------------- tooltip */
.gtip {
  --c: var(--cut-xs);
  --bd: var(--line-strong);
  --fill: var(--panel-2);
  position: fixed;
  z-index: var(--z-tip);
  isolation: isolate;
  max-width: min(calc(320 * var(--u)), calc(100vw - 16px));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(4 * var(--u)));
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease);
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5));
}
.gtip.is-in {
  opacity: 1;
  transform: none;
}

/* =====================================================================================================================
   Window shell (.gwin) — built by js/ui/windows.js
   ===================================================================================================================== */
.gwin-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-win);
  pointer-events: none;
}
.gwin-layer > .gwin {
  pointer-events: auto;
}
.gwin {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(var(--rail-w) + var(--sl)) minmax(0, 1fr);
  grid-template-rows: calc(var(--head-h) + var(--st)) minmax(0, 1fr);
  grid-template-areas: "head head" "rail body";
  color: var(--text);
  touch-action: none;
}
.gwin.no-rail {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body";
}
.gwin.no-rail .gwin-rail {
  display: none;
}
/* scrim: dim the live world, faint grid, darker edges */
.gwin-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--grid-faint),
    radial-gradient(120% 90% at 60% 45%, transparent 30%, rgba(4, 7, 8, 0.6) 100%),
    var(--world-dim);
  pointer-events: none;
}
.gwin[data-layout="stage"] .gwin-scrim {
  background:
    var(--grid-faint),
    linear-gradient(90deg, rgba(4, 7, 8, 0.78) 0%, rgba(4, 7, 8, 0.25) 32%, rgba(4, 7, 8, 0.12) 50%, rgba(4, 7, 8, 0.25) 68%, rgba(4, 7, 8, 0.78) 100%);
}
.gwin[data-layout="map"] .gwin-scrim {
  background: var(--scrim);
}
.gwin.is-entering .gwin-body {
  animation: gwinBodyIn var(--t-med) var(--ease) both;
}
.gwin.is-entering .gwin-head,
.gwin.is-entering .gwin-rail {
  animation: gwinFade var(--t-med) var(--ease) both;
}
.gwin.is-switching .gwin-body {
  animation: gwinSwitch var(--t-fast) var(--ease) both;
}
@keyframes gwinBodyIn {
  from {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
}
@keyframes gwinFade {
  from {
    opacity: 0;
  }
}
@keyframes gwinSwitch {
  from {
    opacity: 0.2;
    transform: translateX(calc(6 * var(--u)));
  }
}

/* header */
.gwin-head {
  grid-area: head;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-width: 0;
  padding: var(--st) max(var(--gutter), var(--sr)) 0 max(var(--gutter), var(--sl));
  background: linear-gradient(180deg, #080c0d, #0b1112);
  box-shadow: inset 0 -1px 0 var(--line), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.gwin-head::after {
  content: "";
  position: absolute;
  left: max(var(--gutter), var(--sl));
  bottom: 0;
  width: calc(var(--rail-w) + 60 * var(--u));
  height: 2px;
  background: var(--accent);
}
.gwin-close {
  flex: none;
}
.gwin-title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: 0 1 auto;
}
.gwin-glyph {
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  flex: none;
  color: var(--accent);
  background: var(--accent-a08);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
  -webkit-clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.gwin-glyph .gglyph {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.gwin-titletext {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  min-width: 0;
}
.gwin-titletext h2 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gwin-eyebrowrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.gwin-eyebrowrow .gk-hazard {
  width: calc(28 * var(--u));
  height: calc(4 * var(--u));
}
.gwin-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: calc(14 * var(--u));
  margin-left: calc(4 * var(--u));
  box-shadow: inset 1px 0 0 var(--line);
  align-self: stretch;
}
.gwin-tabs .gtabs {
  align-items: center;
}
.gwin-spacer {
  flex: 1 1 auto;
}
.gwin-combat {
  flex: none;
}
.gwin-chips {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex: none;
}
.gwin-chips > .is-squeezed {
  display: none;
}
.gwin-x {
  flex: none;
}

/* rail (landscape) / bottom bar (portrait). The outer nav holds the background and the "more" chevrons; the inner
   .gwin-railin scrolls (hidden scrollbar) and fades the edges that hide entries (data-edge set by windows.js). */
.gwin-rail {
  grid-area: rail;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(90deg, rgba(8, 12, 13, 0.95), rgba(10, 15, 16, 0.82));
  box-shadow: inset -1px 0 0 var(--line);
  --fade: calc(34 * var(--u));
}
.gwin-railin {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: calc(10 * var(--u)) calc(8 * var(--u)) max(calc(10 * var(--u)), var(--sb)) calc(8 * var(--u) + var(--sl));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
.gwin-railin::-webkit-scrollbar {
  display: none;
}
.gwin-rail[data-edge="start"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
}
.gwin-rail[data-edge="mid"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.gwin-rail[data-edge="end"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade));
}
/* "more" chevrons on the hidden ends (decoration only; the rail scrolls by drag / wheel) */
.gwin-rail::before,
.gwin-rail::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--sl) / 2);
  width: calc(14 * var(--u));
  height: calc(7 * var(--u));
  margin-left: calc(-7 * var(--u));
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 1;
}
.gwin-rail::before {
  top: calc(3 * var(--u));
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.gwin-rail::after {
  bottom: max(calc(3 * var(--u)), calc(var(--sb) - 4 * var(--u)));
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.gwin-rail:is([data-edge="end"], [data-edge="mid"])::before,
.gwin-rail:is([data-edge="start"], [data-edge="mid"])::after {
  opacity: 0.9;
}
.grail-btn {
  --c: var(--cut-xs);
  --bd: transparent;
  --fill: transparent;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  flex: none;
  width: 100%;
  min-height: max(var(--tap), calc(58 * var(--u)));
  padding: calc(5 * var(--u)) calc(2 * var(--u));
  margin: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.15;
  text-align: center;
  transition: color var(--t-fast);
}
.grail-btn .gglyph {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.grail-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grail-btn[aria-current="page"] {
  color: var(--accent);
  --bd: var(--line);
  --fill: linear-gradient(90deg, var(--accent) 0 3px, transparent 3px), linear-gradient(90deg, var(--accent-a16), transparent 85%), var(--panel-a72);
}
.grail-btn.is-pressed {
  transform: scale(0.96);
}
.grail-btn .gk-badge {
  top: calc(4 * var(--u));
  right: calc(8 * var(--u));
}
.grail-sep {
  flex: none;
  height: 1px;
  margin: calc(4 * var(--u)) calc(10 * var(--u));
  background: var(--line);
}

/* body + regions */
.gwin-body {
  grid-area: body;
  position: relative;
  display: grid;
  gap: calc(12 * var(--u));
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: var(--body-max);
  justify-self: start;
  padding: calc(14 * var(--u)) max(var(--gutter), var(--sr)) max(calc(14 * var(--u)), var(--sb)) calc(14 * var(--u));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.gwin.no-rail .gwin-body {
  padding-left: max(var(--gutter), var(--sl));
}
.gwin-region {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.gwin-region.is-panel {
  --c: var(--cut-lg);
  --bd: var(--line);
  --fill: linear-gradient(180deg, var(--text-a04), transparent calc(140 * var(--u))), var(--glass);
}
.gwin-rin {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow: clip; /* regions never grow past their grid cell and never scroll (not even for focus): put growable
                     content in a .gscroll. hidden above is the fallback for browsers without clip (Safari < 16). */
}
.gwin-region.is-panel > .gwin-rin {
  padding: calc(16 * var(--u));
}
html[data-tier="phone"] .gwin-region.is-panel > .gwin-rin {
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.gwin-sheetbar {
  display: none;
}

.gwin-body[data-layout="list-detail"] {
  /* side columns are capped by a share of the body, so a narrow body (tablet / phone at UI scale 1.3) never pushes
     the detail off screen and the list (or the stage) keeps a usable width */
  grid-template-columns: minmax(0, 1fr) min(var(--detail-w), 46%);
  grid-template-areas: "list detail";
}
.gwin-body[data-layout="stage"] {
  grid-template-columns: min(var(--side-w), 31%) minmax(0, 1fr) min(var(--detail-w), 40%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "left stage detail" "foot foot foot";
}
.gwin-body[data-layout="single"] {
  grid-template-areas: "main";
}
.gwin-body[data-layout="map"] {
  grid-template-areas: "map";
  padding: calc(8 * var(--u)) max(calc(8 * var(--u)), var(--sr)) max(calc(8 * var(--u)), var(--sb)) max(calc(8 * var(--u)), var(--sl));
  max-width: none;
}
[data-region="list"] {
  grid-area: list;
}
[data-region="detail"] {
  grid-area: detail;
}
[data-region="left"] {
  grid-area: left;
}
[data-region="stage"] {
  grid-area: stage;
}
[data-region="foot"] {
  grid-area: foot;
}
[data-region="main"] {
  grid-area: main;
}
[data-region="map"] {
  grid-area: map;
}

/* stage: transparent centre framed by thin brackets; the live robot shows through */
.gwin-region[data-region="stage"]::before {
  content: "";
  position: absolute;
  inset: calc(4 * var(--u)) calc(10 * var(--u));
  pointer-events: none;
  --sl2: calc(22 * var(--u));
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) top left / var(--sl2) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) top left / 1px var(--sl2) no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) top right / var(--sl2) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) top right / 1px var(--sl2) no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom left / var(--sl2) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom left / 1px var(--sl2) no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom right / var(--sl2) 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom right / 1px var(--sl2) no-repeat;
}

/* --- compact / phone tiers --- */
html[data-tier="phone"] .gwin-head {
  gap: calc(8 * var(--u));
}
html[data-tier="phone"] .gwin-glyph {
  display: none;
}
html[data-tier="phone"] .gwin-titletext h2 {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] .gwin-eyebrowrow {
  display: none;
}
html[data-tier="phone"] .gwin-tabs {
  padding-left: calc(8 * var(--u));
}
html[data-tier="phone"] .gwin-body {
  gap: calc(8 * var(--u));
  padding-top: calc(8 * var(--u));
  padding-bottom: max(calc(8 * var(--u)), var(--sb));
  padding-left: calc(8 * var(--u));
}
/* compact (768-ish tall laptops / tablets): the full 11-entry rail fits a 1280x720 screen */
html[data-tier="compact"] .grail-btn {
  min-height: max(var(--tap), calc(52 * var(--u)));
  padding: calc(4 * var(--u)) calc(2 * var(--u));
}
html[data-tier="compact"] .grail-btn .gglyph {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
html[data-tier="compact"] .gwin-railin {
  gap: 2px;
  padding-top: calc(6 * var(--u));
}
html[data-tier="phone"] .grail-btn {
  min-height: var(--tap);
  font-size: var(--fs-label);
}
html[data-tier="phone"] .grail-btn .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
html[data-tier="phone"] .gwin-railin {
  gap: 2px;
  padding-top: calc(6 * var(--u));
}
html[data-tier="phone"] .gtab {
  padding: 0 calc(14 * var(--u));
}

/* --- portrait: tabs on a second header row, rail becomes a bottom bar, detail becomes a bottom sheet --- */
html[data-orient="portrait"] .gwin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "body" "rail";
}
html[data-orient="portrait"] .gwin.no-rail {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head" "body";
}
html[data-orient="portrait"] .gwin-head {
  flex-wrap: wrap;
  row-gap: calc(6 * var(--u));
  min-height: calc(var(--head-h) + var(--st));
  padding-top: max(calc(6 * var(--u)), var(--st));
  padding-bottom: calc(6 * var(--u));
  padding-left: max(calc(8 * var(--u)), var(--sl));
  padding-right: max(calc(8 * var(--u)), var(--sr));
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .gwin-glyph,
html[data-orient="portrait"] .gwin-eyebrowrow {
  display: none;
}
html[data-orient="portrait"] .gwin-title {
  flex: 1 1 0;
}
html[data-orient="portrait"] .gwin-spacer {
  display: none;
}
html[data-orient="portrait"] .gwin-chips > :nth-child(n + 3) {
  display: none;
}
html[data-orient="portrait"] .gwin-tabs {
  order: 10;
  flex: 1 0 100%;
  padding-left: 0;
  margin-left: 0;
  box-shadow: none;
}
html[data-orient="portrait"] .gwin-tabs .gtabs {
  width: 100%;
}
html[data-orient="portrait"] .gwin-tabs .gtab {
  flex: 1 0 auto;
}
html[data-orient="portrait"] .gwin-head::after {
  left: max(calc(8 * var(--u)), var(--sl));
  width: calc(96 * var(--u));
}
html[data-orient="portrait"] .gwin-rail {
  background: linear-gradient(0deg, rgba(8, 12, 13, 0.98), rgba(10, 15, 16, 0.9));
  box-shadow: inset 0 1px 0 var(--line);
}
html[data-orient="portrait"] .gwin-railin {
  flex-direction: row;
  gap: 2px;
  padding: calc(4 * var(--u)) max(calc(6 * var(--u)), var(--sr)) max(calc(6 * var(--u)), var(--sb)) max(calc(6 * var(--u)), var(--sl));
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
}
html[data-orient="portrait"] .gwin-rail[data-edge="start"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
html[data-orient="portrait"] .gwin-rail[data-edge="mid"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
html[data-orient="portrait"] .gwin-rail[data-edge="end"] > .gwin-railin {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}
html[data-orient="portrait"] .gwin-rail::before,
html[data-orient="portrait"] .gwin-rail::after {
  left: auto;
  top: calc(50% - var(--sb) / 2);
  width: calc(7 * var(--u));
  height: calc(14 * var(--u));
  margin: calc(-7 * var(--u)) 0 0;
  bottom: auto;
}
html[data-orient="portrait"] .gwin-rail::before {
  left: max(calc(2 * var(--u)), var(--sl));
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
html[data-orient="portrait"] .gwin-rail::after {
  right: max(calc(2 * var(--u)), var(--sr));
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[data-orient="portrait"] .grail-btn {
  width: auto;
  min-width: calc(56 * var(--u));
  flex: 1 1 0;
  min-height: max(var(--tap), calc(58 * var(--u)));
}
html[data-orient="portrait"] .grail-btn[aria-current="page"] {
  --fill: linear-gradient(0deg, var(--accent) 0 3px, transparent 3px), linear-gradient(0deg, var(--accent-a16), transparent 85%), var(--panel-a72);
}
html[data-orient="portrait"] .grail-sep {
  width: 1px;
  height: auto;
  margin: calc(8 * var(--u)) 2px;
}
html[data-orient="portrait"] .gwin-body {
  padding: calc(8 * var(--u)) max(calc(8 * var(--u)), var(--sr)) calc(8 * var(--u)) max(calc(8 * var(--u)), var(--sl));
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .gwin-body[data-layout="list-detail"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "list";
}
html[data-orient="portrait"] .gwin-body[data-layout="stage"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(150 * var(--u)), 1fr) auto auto;
  grid-template-areas: "stage" "left" "foot";
}
/* bottom sheet */
html[data-orient="portrait"] .gwin-body:is([data-layout="list-detail"], [data-layout="stage"]) > [data-region="detail"] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-height: 82%;
  height: auto;
  transform: translateY(105%);
  transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
  visibility: hidden;
  --c1: var(--cut-md);
  --c2: 0px;
  --c3: var(--cut-md);
  --fill: linear-gradient(180deg, var(--text-a04), transparent calc(140 * var(--u))), var(--panel);
  filter: drop-shadow(0 calc(-8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.5));
}
html[data-orient="portrait"] .gwin-body[data-sheet="open"] > [data-region="detail"] {
  transform: none;
  visibility: visible;
  transition: transform var(--t-slow) var(--ease);
}
html[data-orient="portrait"] .gwin-body[data-sheet="open"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(4, 7, 8, 0.6);
}
html[data-orient="portrait"] .gwin-sheetbar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  flex: none;
  padding: calc(6 * var(--u)) calc(10 * var(--u)) 0;
}
html[data-orient="portrait"] .gwin-sheetbar::before {
  content: "";
  position: absolute;
  top: calc(6 * var(--u));
  left: 50%;
  width: calc(44 * var(--u));
  height: 4px;
  transform: translateX(-50%);
  background: var(--line-strong);
}

@media (hover: hover) and (pointer: fine) {
  .gbtn:not([aria-disabled="true"]):not(:disabled):hover::before,
  .gtile:not(.locked):hover::before,
  .gcard:is(button, [data-act]):hover::before,
  .gchip:is(button):hover::before {
    filter: brightness(1.28);
  }
  .gbtn.primary:not([aria-disabled="true"]):hover::before {
    filter: brightness(1.08);
  }
  .gbtn.ghost:not([aria-disabled="true"]):hover {
    color: var(--text);
    --fill: var(--text-a04);
  }
  .gcell:not([aria-disabled="true"]):hover::before {
    filter: brightness(1.35);
  }
  .gcell:not([aria-disabled="true"]):not(.is-selected):hover::after {
    opacity: 0.55;
    --bc: var(--line-strong);
  }
  .gtile:not(.locked):hover::after {
    opacity: 0.6;
    --bc: var(--accent-dim);
  }
  .gtab:not([aria-selected="true"]):hover {
    color: var(--text);
  }
  .gtab:not([aria-selected="true"]):hover::before {
    background: linear-gradient(180deg, var(--text-a08), transparent), var(--panel-3);
  }
  .gseg > button:not([aria-pressed="true"]):hover {
    color: var(--text);
    background: var(--panel-3);
  }
  .grail-btn:not([aria-current="page"]):hover {
    color: var(--text);
    --fill: var(--text-a04);
  }
  .gswitch:hover .gsw-track {
    filter: brightness(1.15);
  }
  .gslider:hover .gsl-thumb {
    filter: brightness(1.1);
  }
}
/* demo-only hover look for gallery screenshots on touch screens */
.is-hover.gbtn::before,
.is-hover.gcell::before {
  filter: brightness(1.28);
}

/* focus visuals only after keyboard input (kit.js sets html[data-modality]); fields keep their own focus style */
html[data-modality="pointer"] :focus-visible:not(input):not(textarea) {
  outline: none;
}
html[data-modality="pointer"] :is(.gbtn, .gcell, .gcard, .gtile, .grail-btn):focus-visible:not(.is-selected):not([aria-pressed="true"])::after {
  opacity: 0;
}
html[data-modality="pointer"] :is(.gbtn, .gcell, .gcard, .gtile, .grail-btn):focus-visible::after {
  --bc: var(--accent);
}
html[data-modality="pointer"] .gtab:focus-visible::before {
  box-shadow: none;
}
html[data-modality="pointer"] .gswitch:focus-visible .gsw-track,
html[data-modality="pointer"] .gslider:focus-visible .gsl-track {
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-modality="pointer"] .gswitch[aria-checked="true"]:focus-visible .gsw-track {
  box-shadow: none;
}
html[data-modality="pointer"] .gslider:focus-visible .gsl-thumb {
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) 50% 50% / 2px 40% no-repeat,
    linear-gradient(180deg, #ffd27a, var(--accent));
}

@media (prefers-reduced-motion: reduce) {
  .gwin.is-entering .gwin-body,
  .gwin.is-entering .gwin-head,
  .gwin.is-entering .gwin-rail,
  .gwin.is-switching .gwin-body,
  .gdlg-layer.is-in .gdialog,
  .gtoast {
    animation: none;
  }
}