/* =====================================================================================================================
   Auto hunt window (js/ui/pages/auto.js). Needs css/ui-tokens.css + css/ui-kit.css. Scoped to [data-win="auto"].
   Wide windows: three columns (hero + Salvage Core | combat routine | repair & rest + field record).
   Narrower than ~1060 px (tablets, phone landscape, UI scale 1.3): the column wrappers dissolve (display: contents),
   the hero sticks on the left and everything else becomes one list on the right. Portrait: one column.
   The whole body is one .gscroll, so nothing is cut at any size.
   ===================================================================================================================== */

[data-win="auto"] .au {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
/* the size container sits inside the scroller (on the scroller itself the sticky hero leaked 4 px of overflow) */
[data-win="auto"] .au-box {
  container: au / inline-size;
}
[data-win="auto"] .au-grid {
  display: grid;
  grid-template-columns: minmax(calc(300 * var(--u)), calc(380 * var(--u))) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(14 * var(--u));
  align-items: start;
  padding-bottom: calc(2 * var(--u));
}
[data-win="auto"] .au-col {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au .gcard {
  padding: calc(16 * var(--u));
}
[data-win="auto"] .au .gk-note {
  margin-top: calc(10 * var(--u));
}

/* ----------------------------------------------------------------------------------------------------- hero */
[data-win="auto"] .au-hero {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  --bd: var(--line-strong);
  --fill:
    radial-gradient(110% 80% at 0% 0%, var(--accent-a08), transparent 60%),
    linear-gradient(180deg, var(--text-a04), transparent 70%),
    var(--panel2-a90);
}
[data-win="auto"] .au-hero.m-on {
  --bd: var(--accent);
  --fill:
    radial-gradient(120% 90% at 0% 0%, var(--accent-a16), transparent 65%),
    linear-gradient(180deg, var(--text-a04), transparent 70%),
    var(--panel2-a90);
}
[data-win="auto"] .au-hero.m-locked {
  --fill:
    var(--hazard-dim) 0 0 / 100% calc(4 * var(--u)) no-repeat,
    linear-gradient(180deg, var(--text-a04), transparent 70%),
    var(--panel2-a90);
}
[data-win="auto"] .au-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* status lamp: dim when idle, amber when hunting, red-dim when locked (static: no looping animation) */
[data-win="auto"] .au-led {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  background: var(--faint);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[data-win="auto"] .m-on .au-led {
  background: var(--accent);
  box-shadow: 0 0 calc(10 * var(--u)) var(--accent);
}
[data-win="auto"] .m-off .au-led {
  background: var(--good);
}
[data-win="auto"] .au-hero-mid {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au-hero-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  color: var(--accent);
  background: var(--accent-a08);
  clip-path: polygon(calc(12 * var(--u)) 0, 100% 0, 100% calc(100% - calc(12 * var(--u))), calc(100% - calc(12 * var(--u))) 100%, 0 100%, 0 calc(12 * var(--u)));
}
[data-win="auto"] .au-hero-glyph .gglyph {
  width: 64%;
  height: 64%;
}
[data-win="auto"] .m-locked .au-hero-glyph,
[data-win="auto"] .m-town .au-hero-glyph,
[data-win="auto"] .m-dead .au-hero-glyph {
  color: var(--dim);
  background: var(--text-a04);
}
[data-win="auto"] .au-hero-txt {
  min-width: 0;
}
[data-win="auto"] .au-state {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.2;
}
[data-win="auto"] .m-on .au-state {
  color: var(--accent);
}
[data-win="auto"] .au-desc {
  margin: calc(4 * var(--u)) 0 0;
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.45;
}
[data-win="auto"] .au-go {
  min-height: calc(60 * var(--u));
  font-size: var(--fs-lg);
}
[data-win="auto"] .au-go .gk-reason {
  display: block;
  font-size: var(--fs-label);
}
[data-win="auto"] .au-lockprog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
}
[data-win="auto"] .au-lockstep {
  font-family: var(--f-num);
  font-size: var(--fs-sm);
  color: var(--dim);
}
[data-win="auto"] .au-lockstep b {
  color: var(--accent);
  font-size: var(--fs-lg);
}
[data-win="auto"] .au-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
[data-win="auto"] .au-chip b {
  font-family: var(--f-head);
  font-weight: 600;
  letter-spacing: 0;
}
[data-win="auto"] .au-hp,
[data-win="auto"] .au-minicore {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}
[data-win="auto"] .au-hp-l {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the mini Core bar only shows when the Core card is not right under the hero (narrow layouts) */
[data-win="auto"] .au-minicore {
  display: none;
}

/* ---------------------------------------------------------------------------------------------- Salvage Core */
[data-win="auto"] .au-core {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au-ringbox {
  position: relative;
  flex: none;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
}
[data-win="auto"] .au-ring {
  width: 100%;
  height: 100%;
  display: block;
}
[data-win="auto"] .au-ring circle {
  fill: none;
}
[data-win="auto"] .au-ring-track {
  stroke: var(--line);
  stroke-width: 10;
}
[data-win="auto"] .au-ring-fill {
  stroke: var(--info);
  stroke-width: 10;
  transition: stroke-dasharray 300ms var(--ease);
}
[data-win="auto"] .k-good .au-ring-fill {
  stroke: var(--good);
}
[data-win="auto"] .k-warn .au-ring-fill {
  stroke: var(--accent);
}
[data-win="auto"] .k-danger .au-ring-track {
  stroke: var(--danger-a14);
}
/* segment cuts in the panel colour (24 segments) */
[data-win="auto"] .au-ring-cut {
  stroke: #182124;
  stroke-width: 12;
  stroke-dasharray: 0.7 3.4667;
}
[data-win="auto"] .au-ring-in {
  fill: rgba(11, 15, 16, 0.6) !important;
  stroke: var(--line);
  stroke-width: 1;
}
[data-win="auto"] .au-ringval {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: calc(38 * var(--u));
  font-family: var(--f-num);
  font-weight: 700;
}
[data-win="auto"] .au-ringval b {
  font-size: var(--fs-hero);
  line-height: 1;
}
[data-win="auto"] .au-ringval small {
  font-size: var(--fs-sm);
  color: var(--dim);
  margin-left: 2px;
}
[data-win="auto"] .k-danger .au-ringval b {
  color: var(--bad);
}
[data-win="auto"] .au-core-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(5 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au-core-name {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
}
[data-win="auto"] .au-refill {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.4;
}
[data-win="auto"] .au-refill .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: var(--info);
  margin-top: 1px;
}
[data-win="auto"] .au-what {
  margin-top: calc(14 * var(--u)) !important;
}
[data-win="auto"] .au-table {
  width: 100%;
  margin-top: calc(10 * var(--u));
  border-collapse: separate;
  border-spacing: 0 calc(4 * var(--u));
  table-layout: fixed;
  font-size: var(--fs-sm);
}
[data-win="auto"] .au-table th,
[data-win="auto"] .au-table td {
  padding: calc(7 * var(--u)) calc(8 * var(--u));
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
}
[data-win="auto"] .au-table thead th {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  color: var(--dim);
  padding-top: 0;
  padding-bottom: calc(2 * var(--u));
}
[data-win="auto"] .au-table thead th:first-child {
  width: 30%;
}
[data-win="auto"] .au-table thead th.is-now {
  color: var(--info);
}
[data-win="auto"] .au-table tbody th {
  font-family: var(--f-head);
  font-weight: 600;
  white-space: nowrap;
  background: var(--text-a04);
}
[data-win="auto"] .au-table tbody th .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-right: calc(6 * var(--u));
  vertical-align: -3px;
  color: var(--dim);
}
[data-win="auto"] .au-table tbody tr.is-row th {
  box-shadow: inset 2px 0 0 var(--info);
  color: var(--text);
}
[data-win="auto"] .au-table td {
  background: var(--text-a04);
  color: var(--dim);
}
[data-win="auto"] .au-table td.k-bad {
  color: var(--bad);
}
[data-win="auto"] .au-table td.k-warn {
  color: var(--accent);
}
[data-win="auto"] .au-table td.is-now {
  background: var(--info-a10);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--info-dim);
}
[data-win="auto"] .au-table td.is-now.k-bad {
  background: var(--danger-a14);
  box-shadow: inset 0 0 0 1px var(--danger);
  color: var(--bad);
}
[data-win="auto"] .au-bonus {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: calc(10 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text);
  background: var(--accent-a08);
  box-shadow: inset 2px 0 0 var(--accent);
}
[data-win="auto"] .au-bonus .gglyph {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--accent);
}

/* -------------------------------------------------------------------------------------------- combat routine */
[data-win="auto"] .au-rows {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
[data-win="auto"] .au-row {
  display: grid;
  grid-template-columns: calc(22 * var(--u)) calc(52 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(64 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  background: linear-gradient(90deg, var(--text-a04), transparent);
  border-left: 2px solid var(--line);
}
[data-win="auto"] .au-row.is-empty {
  border-left-style: dashed;
  background: none;
}
[data-win="auto"] .au-row.au-shoulder {
  margin-top: calc(6 * var(--u));
  border-left-color: var(--info-dim);
}
[data-win="auto"] .au-row.is-need {
  border-left-color: var(--danger);
}
[data-win="auto"] .au-slotn {
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}
[data-win="auto"] .au-slotn .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--info);
}
[data-win="auto"] .au-art {
  display: block;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
}
[data-win="auto"] .au-art-empty {
  display: grid;
  place-items: center;
  color: var(--faint);
  border: 1px dashed var(--line-strong);
}
[data-win="auto"] .au-art-empty .gglyph {
  width: 40%;
  height: 40%;
}
[data-win="auto"] .is-off .au-art {
  opacity: 0.45;
  filter: grayscale(0.8);
}
[data-win="auto"] .au-rtxt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au-rtxt b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-win="auto"] .au-lv {
  font-size: var(--fs-label);
  color: var(--dim);
  font-weight: 500;
  margin-left: calc(4 * var(--u));
}
[data-win="auto"] .au-rtxt small {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.35;
}
[data-win="auto"] .au-need {
  margin-top: calc(2 * var(--u));
}
[data-win="auto"] .au-row .gswitch {
  min-height: var(--tap);
}

/* --------------------------------------------------------------------------------------------- repair and rest */
[data-win="auto"] .au-hpmap {
  position: relative;
  height: calc(74 * var(--u));
  margin: calc(2 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
}
[data-win="auto"] .au-hpmap-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(38 * var(--u));
  height: calc(10 * var(--u));
  background: linear-gradient(90deg, rgba(255, 75, 58, 0.55), rgba(255, 178, 30, 0.5) 40%, rgba(142, 219, 90, 0.6));
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
[data-win="auto"] .au-zone-rest {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(135deg, rgba(5, 8, 9, 0.6) 0 4px, transparent 4px 8px);
}
[data-win="auto"] .au-mk {
  position: absolute;
  top: calc(20 * var(--u));
  left: calc(var(--p, 0) * 100%);
  width: 2px;
  height: calc(36 * var(--u));
  margin-left: -1px;
  background: var(--text);
}
[data-win="auto"] .au-mk span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 calc(4 * var(--u));
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
  white-space: nowrap;
}
[data-win="auto"] .au-mk.k-kit {
  background: var(--accent);
}
[data-win="auto"] .au-mk.k-kit span {
  color: var(--accent);
  top: calc(36 * var(--u));
  bottom: auto;
}
[data-win="auto"] .au-mk.k-rest {
  background: var(--bad);
}
[data-win="auto"] .au-mk.k-rest span {
  color: var(--bad);
}
[data-win="auto"] .au-mk.k-resume {
  background: var(--good);
}
[data-win="auto"] .au-mk.k-resume span {
  color: var(--good);
}
[data-win="auto"] .au-hpmap-scale {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(32 * var(--u));
  display: none;
}
[data-win="auto"] .au-kit {
  margin: calc(4 * var(--u)) 0 calc(2 * var(--u));
}
/* sliders: label + value on one line, the track below (long Thai labels) */
[data-win="auto"] .au-slider {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "l o" "s s";
  row-gap: 0;
  margin-top: calc(4 * var(--u));
}
[data-win="auto"] .au-slider .gsl-label {
  grid-area: l;
  font-size: var(--fs-sm);
  color: var(--dim);
}
[data-win="auto"] .au-slider .gsl-out {
  grid-area: o;
}
[data-win="auto"] .au-slider .gslider {
  grid-area: s;
}
[data-win="auto"] .au-sub {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: calc(12 * var(--u)) 0 calc(2 * var(--u));
}
[data-win="auto"] .au-sub .gh-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
[data-win="auto"] .au-subeye.th {
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 600;
}
[data-win="auto"] .au-restock {
  margin-top: calc(12 * var(--u));
}

/* ------------------------------------------------------------------------------------------------ field record */
[data-win="auto"] .au-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
[data-win="auto"] .au-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "g l" "g v";
  align-items: center;
  column-gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--text-a04);
  border-left: 2px solid var(--line-strong);
}
[data-win="auto"] .au-stat .gglyph {
  grid-area: g;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  color: var(--info);
}
[data-win="auto"] .au-stat small {
  grid-area: l;
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-win="auto"] .au-stat b {
  grid-area: v;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------------- tiers and container widths */
html[data-tier="compact"] [data-win="auto"] .au-grid,
html[data-tier="compact"] [data-win="auto"] .au-col {
  gap: calc(12 * var(--u));
}
html[data-tier="phone"] [data-win="auto"] .au-grid,
html[data-tier="phone"] [data-win="auto"] .au-col {
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] [data-win="auto"] .au .gcard {
  padding: calc(12 * var(--u));
}
html[data-tier="phone"] [data-win="auto"] .au-ringbox {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
}
html[data-tier="phone"] [data-win="auto"] .au-ringval {
  padding-top: calc(30 * var(--u));
}
html[data-tier="phone"] [data-win="auto"] .au-ringval b {
  font-size: var(--fs-h1);
}

@container au (max-width: 1060px) {
  [data-win="auto"] .au-grid {
    grid-template-columns: minmax(calc(220 * var(--u)), calc(280 * var(--u))) minmax(0, 1fr);
    grid-template-areas: "a r" "a h" "a c" "a f";
  }
  [data-win="auto"] .au-col {
    display: contents;
  }
  [data-win="auto"] .au-hero {
    grid-area: a;
    position: sticky;
    top: 0;
    align-self: start;
    gap: calc(10 * var(--u));
  }
  [data-win="auto"] .au-routine { grid-area: r; }
  [data-win="auto"] .au-hull { grid-area: h; }
  [data-win="auto"] .au-coreinfo { grid-area: c; }
  [data-win="auto"] .au-record { grid-area: f; }
  [data-win="auto"] .au-minicore {
    display: flex;
  }
  [data-win="auto"] .au-hero-glyph {
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
  }
  [data-win="auto"] .au-state {
    font-size: var(--fs-xl);
  }
  [data-win="auto"] .au-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [data-win="auto"] .au-stat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "l" "v";
  }
  [data-win="auto"] .au-stat .gglyph {
    display: none;
  }
}
@container au (max-width: 620px) {
  [data-win="auto"] .au-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "r" "h" "c" "f";
  }
  [data-win="auto"] .au-hero {
    position: relative; /* not static: the kit's ::before frame needs the card as its containing block */
  }
  [data-win="auto"] .au-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* label + value line over the hero bars */
[data-win="auto"] .au-bl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  min-width: 0;
}
[data-win="auto"] .au-bl b {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
[data-win="auto"] .au-amount {
  font-family: var(--f-num);
  font-size: var(--fs-sm);
  color: var(--dim);
}
[data-win="auto"] .au-amount b {
  font-size: var(--fs-xl);
  color: var(--text);
}
[data-win="auto"] .au-core-tag {
  font-size: var(--fs-sm);
}
@container au (max-width: 620px) {
  [data-win="auto"] .au-row {
    grid-template-columns: calc(14 * var(--u)) calc(48 * var(--u)) minmax(0, 1fr) auto;
    gap: calc(8 * var(--u));
  }
  [data-win="auto"] .au-art {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
  }
  [data-win="auto"] .au-rtxt b {
    white-space: normal;
  }
}