/* =====================================================================================================================
   Systems window (js/ui/pages/systems.js, id 'systems', layout 'list-detail'). Page agent P-HANGAR.
   Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page (sy- prefix).
   list = PWR / DEX / ENG cards, presets, restat (inner scroll); detail = free points, before -> after, confirm.
   Narrow lists (tablet, phone) switch the stat cards to rows with a container query.
   ===================================================================================================================== */

.gscroll.sy-list {
  container-type: inline-size;
  padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u));
}
.sy-list .ghead {
  margin: calc(4 * var(--u)) 0 calc(6 * var(--u));
}
.sy-list .ghead:not(:first-child) {
  margin-top: calc(22 * var(--u));
}
.sy-intro {
  margin: 0 0 calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
}
.sy-autobar {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: 0 0 calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
  background: var(--info-a10);
  box-shadow: inset 2px 0 0 var(--info);
}
.sy-autobar .gglyph,
.sy-note .gglyph {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(1 * var(--u));
  color: var(--info);
}

/* ------------------------------------------------------------------------------------------------- stat cards */
.sy-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}
.gcard.sy-stat {
  --sc: var(--accent);
  --sc-a: var(--accent-a16);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "what" "effs" "meter" "step";
  grid-template-rows: auto 1fr auto auto auto;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
}
.gcard.sy-stat.k-dex {
  --sc: var(--info);
  --sc-a: var(--info-a22);
}
.gcard.sy-stat.k-eng {
  --sc: var(--hp);
  --sc-a: var(--good-a14);
}
.gcard.sy-stat.has-pend {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, var(--accent-a08), transparent 70%), var(--panel2-a90);
}
.sy-sh {
  grid-area: head;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
}
.sy-ico {
  display: grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  color: var(--sc);
  background: var(--sc-a);
  box-shadow: inset 0 0 0 1px var(--sc);
  -webkit-clip-path: polygon(var(--cut-xs) 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%, 0 var(--cut-xs));
  clip-path: polygon(var(--cut-xs) 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%, 0 var(--cut-xs));
}
.sy-ico .gglyph {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.sy-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sy-code {
  font: 700 var(--fs-xl) / 1.05 var(--f-num);
  letter-spacing: 0.06em;
  color: var(--sc);
}
.sy-th {
  font: 600 var(--fs-sm) / 1.3 var(--f-head);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-val {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  white-space: nowrap;
}
.sy-val b {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.sy-val i {
  font-style: normal;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
}
.sy-what {
  grid-area: what;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
}
.sy-effs {
  grid-area: effs;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.sy-eff {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.sy-efl {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-eff b {
  font-size: var(--fs-body);
  color: var(--text);
  white-space: nowrap;
}
.sy-eff i {
  font-style: normal;
  font-weight: 700;
  color: var(--good);
  white-space: nowrap;
}
.sy-meter {
  grid-area: meter;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}
.sy-meter .gbar {
  --bc: var(--sc);
  --h: calc(6 * var(--u));
}
.sy-capt {
  font-size: var(--fs-label);
  line-height: 1.25;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-step {
  grid-area: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(8 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
}
.sy-step .gbtn.icon {
  width: max(var(--tap), calc(46 * var(--u)));
  height: max(var(--tap), calc(46 * var(--u)));
}
.sy-pend {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--faint);
}
.has-pend .sy-pend {
  color: var(--accent);
}

/* --------------------------------------------------------------------------------------------------- presets */
.sy-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(200 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
}
.gcard.sy-preset {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-height: calc(112 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  cursor: pointer;
}
.gcard.sy-preset.is-on {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, var(--accent-a16), transparent 75%), var(--panel2-a90);
}
.sy-ptop {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
  min-width: 0;
}
.sy-pname {
  font: 600 var(--fs-body) / 1.3 var(--f-head);
  color: var(--text);
  white-space: nowrap;
}
.sy-ptop .g-eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
}
.is-on .sy-ptop .g-eyebrow {
  color: var(--accent);
}
.sy-ratio {
  display: flex;
  gap: calc(10 * var(--u));
}
.sy-r {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.sy-r small {
  font: 600 var(--fs-xs) / 1 var(--f-num);
  letter-spacing: 0.06em;
  color: var(--dim);
}
.sy-rp {
  display: inline-flex;
  gap: 2px;
}
.sy-rp i {
  width: calc(10 * var(--u));
  height: calc(6 * var(--u));
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: skewX(-20deg);
}
.sy-rp i.on {
  background: var(--info);
  box-shadow: none;
}
.is-on .sy-rp i.on {
  background: var(--accent);
}
.sy-hand {
  color: var(--dim);
}
.sy-hand .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.sy-hint {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--dim);
}
.sy-pon {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: auto;
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--accent);
}
.sy-pon .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* ---------------------------------------------------------------------------------------------------- restat */
.gcard.sy-restat {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  grid-template-areas: "head nums" "note note" "btns btns";
  align-items: center;
  gap: calc(10 * var(--u)) calc(16 * var(--u));
  margin-bottom: calc(6 * var(--u));
}
.sy-rhead {
  grid-area: head;
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  min-width: 0;
}
.sy-rico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  color: var(--info);
  background: var(--info-a10);
  box-shadow: inset 0 0 0 1px var(--info-dim);
}
.sy-rico .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.sy-rtext {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.sy-rtext b {
  font: 600 var(--fs-body) / 1.3 var(--f-head);
}
.sy-rtext span {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--dim);
}
.sy-rnums {
  grid-area: nums;
  display: flex;
  gap: calc(18 * var(--u));
}
.sy-rn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}
.sy-rn small {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
}
.sy-rn b {
  font-size: var(--fs-xl);
  line-height: 1.15;
}
.sy-rn.is-short b {
  color: var(--bad);
}
.sy-rnote {
  grid-area: note;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.4;
}
.sy-rbtns {
  grid-area: btns;
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
.sy-rbtns .gbtn {
  min-height: max(var(--tap), calc(44 * var(--u)));
}

/* ------------------------------------------------------------------------------------------- detail (summary) */
.sy-free {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label num" "sub sub";
  align-items: end;
  gap: calc(4 * var(--u)) calc(12 * var(--u));
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--line);
}
.sy-fl {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.sy-flth {
  font: 600 var(--fs-xl) / 1.25 var(--f-head);
  color: var(--text);
}
.sy-fn {
  grid-area: num;
  font-size: calc(52 * var(--u));
  font-weight: 700;
  line-height: 0.95;
  color: var(--faint);
}
.sy-free.has-free .sy-fn {
  color: var(--accent);
  text-shadow: 0 0 calc(18 * var(--u)) var(--accent-a35);
}
.sy-plan,
.sy-lv {
  grid-area: sub;
}
.sy-plan {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}
.sy-plan small {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-lv {
  font-size: var(--fs-sm);
  color: var(--dim);
}
.gscroll.sy-dscroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(10 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) 0;
}
.sy-cap {
  margin-bottom: calc(2 * var(--u));
}
.sy-cap .g-eyebrow {
  color: var(--info);
}
.sy-rows .gstat:last-child {
  border-bottom: 0;
}
.sy-rows .gstat.hl .gs-val {
  color: var(--accent);
}
/* point spread */
.sy-spread {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  margin-top: calc(16 * var(--u));
}
.sy-spread > .g-eyebrow {
  margin-bottom: calc(2 * var(--u));
}
.sy-sp {
  --sc: var(--accent);
  display: grid;
  grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr) calc(64 * var(--u));
  align-items: center;
  gap: calc(10 * var(--u));
}
.sy-sp.k-dex {
  --sc: var(--info);
}
.sy-sp.k-eng {
  --sc: var(--hp);
}
.sy-spk {
  font: 700 var(--fs-sm) / 1 var(--f-num);
  letter-spacing: 0.06em;
  color: var(--sc);
}
.sy-sp .gbar {
  --bc: var(--sc);
  --h: calc(10 * var(--u));
}
.sy-spv {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: calc(5 * var(--u));
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
}
.sy-spv small {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--faint);
}
.sy-note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--dim);
  background: var(--text-a04);
  box-shadow: inset 2px 0 0 var(--info-dim);
}
.sy-actions {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(8 * var(--u));
  padding-top: calc(12 * var(--u));
}
.sy-actions .gbtn {
  width: 100%;
  min-height: max(var(--tap), calc(48 * var(--u)));
}
.sy-actions .gbtn .gk-label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sy-actions {
  container-type: inline-size;
}
/* a narrow action row (small phones, UI scale 1.3) drops the button glyphs before it cuts a label */
@container (max-width: 240px) {
  .sy-actions .gbtn .gk-g {
    display: none;
  }
}

/* ------------------------------------------------------------------- narrow list: stat cards become rows */
@container (max-width: 700px) {
  .sy-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(8 * var(--u));
  }
  .gcard.sy-stat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas: "head step" "what what" "effs meter";
    grid-template-rows: auto;
    gap: calc(6 * var(--u)) calc(12 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
  }
  .sy-sh {
    gap: calc(8 * var(--u));
  }
  .sy-step {
    padding-top: 0;
    border-top: 0;
    justify-self: end;
    width: 100%;
    max-width: calc(200 * var(--u));
  }
  .sy-val b {
    font-size: var(--fs-h1);
  }
  .sy-meter {
    justify-content: center;
  }
  .gcard.sy-restat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "nums" "note" "btns";
  }
  .sy-rnums {
    justify-content: flex-start;
  }
  .sy-rn {
    align-items: flex-start;
  }
  .sy-presets {
    grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr));
  }
}
@container (max-width: 380px) {
  .gcard.sy-stat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "what" "effs" "meter" "step";
  }
  .sy-step {
    max-width: none;
  }
  .sy-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------------------------------------- compact tier */
html[data-tier="compact"] .sy-val b {
  font-size: var(--fs-h1);
}
html[data-tier="compact"] .sy-fn {
  font-size: calc(44 * var(--u));
}

/* ------------------------------------------------------------------------------------- phone (both orientations) */
html[data-tier="phone"] .sy-list .ghead:not(:first-child) {
  margin-top: calc(14 * var(--u));
}
html[data-tier="phone"] .sy-list .ghead .g-eyebrow {
  display: none;
}
html[data-tier="phone"] .sy-intro {
  margin-bottom: calc(8 * var(--u));
  font-size: var(--fs-label);
}
html[data-tier="phone"] .sy-ico {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
}
html[data-tier="phone"] .sy-ico .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
html[data-tier="phone"] .sy-code {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .sy-th {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .sy-what,
html[data-tier="phone"] .sy-eff,
html[data-tier="phone"] .sy-hint,
html[data-tier="phone"] .sy-rtext span,
html[data-tier="phone"] .sy-rnote,
html[data-tier="phone"] .sy-autobar,
html[data-tier="phone"] .sy-note {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .sy-eff b {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .gcard.sy-preset {
  min-height: 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
}
html[data-tier="phone"] .sy-free {
  padding-bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .sy-flth {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .sy-fn {
  font-size: calc(40 * var(--u));
}
html[data-tier="phone"] .sy-fl .g-eyebrow {
  display: none;
}
html[data-tier="phone"] .sy-rows .gstat {
  min-height: calc(28 * var(--u));
  padding: calc(3 * var(--u)) 0;
}
html[data-tier="phone"] .sy-note {
  margin-top: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
}
html[data-tier="phone"] .sy-actions {
  padding-top: calc(8 * var(--u));
}

/* ------------------------------------------------------------- portrait: the summary stays under the list */
html[data-orient="portrait"] .gwin[data-win="systems"] .gwin-body[data-layout="list-detail"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "list" "detail";
}
html[data-orient="portrait"] .gwin[data-win="systems"] .gwin-body > [data-region="detail"] {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  max-height: none;
  transform: none;
  visibility: visible;
  transition: none;
  filter: none;
}
html[data-orient="portrait"] .gwin[data-win="systems"] .gwin-sheetbar {
  display: none;
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-free {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0 0 calc(6 * var(--u));
}
html[data-orient="portrait"] .gwin[data-win="systems"] .gscroll.sy-dscroll {
  flex: none;
  max-height: calc(132 * var(--u));
  padding-top: calc(6 * var(--u));
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-cap,
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-spread {
  display: none;
}

/* 2026-10-09 review: on portrait the summary is a short bar (free points, DPS before -> after, confirm / clear) so the
   three stat cards and their steppers own the screen; the full derived table stays on wider screens. */
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-list > .sy-intro:first-of-type {
  display: none;
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-free {
  align-items: center;
  padding: 0 0 calc(4 * var(--u));
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-fn {
  font-size: calc(30 * var(--u));
  line-height: 1;
}
html[data-orient="portrait"] .gwin[data-win="systems"] :is(.sy-lv, .sy-fl .g-eyebrow) {
  display: none;
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-flth {
  font-size: var(--fs-lg);
}
html[data-orient="portrait"] .gwin[data-win="systems"] .gscroll.sy-dscroll {
  max-height: none;
  overflow: visible;
  padding-top: calc(2 * var(--u));
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-rows .gstat:nth-child(n + 3),
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-dscroll .sy-note {
  display: none;
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-actions {
  padding-top: calc(6 * var(--u));
}
html[data-orient="portrait"] .gwin[data-win="systems"] .sy-actions .gbtn {
  min-height: var(--tap-sm);
}
/* phone: the clear button takes the width its Thai label needs ('ล้างแผน' was cut to 'ล้างแ…' at 844x390) */
html[data-tier="phone"] .sy-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}
html[data-tier="phone"] .sy-actions .gbtn.sy-clear {
  padding: 0 calc(12 * var(--u));
}
html[data-tier="phone"] .sy-actions .gbtn.sy-clear .gk-label {
  overflow: visible;
}
.sy-actions .gbtn .gk-reason {
  display: -webkit-box;
  white-space: normal;
}
.sy-actions .gbtn:has(.gk-reason) {
  padding-block: calc(4 * var(--u));
}