/* =====================================================================================================================
   Pilot manual window (js/ui/pages/codex.js, id 'codex', layout 'list-detail'). Page agent P-MISC-B.
   Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page (cx- prefix).
   tips: list = gallery of tip cards (16:9 picture + index + Thai title), detail = the picked tip (picture, text, pages)
   controls: list = scheme switch + three groups of key / touch rows, detail = field facts (bottom sheet on portrait)
   ===================================================================================================================== */

.cx-list,
.cx-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.cx-list .ghead {
  flex: none;
}
.cx-scroll {
  container-type: inline-size;
  padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
}
.cx-loading {
  font-size: var(--fs-label);
  color: var(--dim);
}

/* tips: the viewer is the hero, so it gets the wider column on landscape (the gallery keeps 2-3 columns) */
html:not([data-orient="portrait"]) .gwin-body[data-layout="list-detail"]:has(.cx-list.is-tips) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .gwin-body[data-layout="list-detail"]:has(.cx-list.is-tips) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ------------------------------------------------------------------------------------------------- tip gallery */
.cx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(240 * var(--u)), 1fr));
  gap: calc(12 * var(--u));
  padding: calc(5 * var(--u));
}
.cx-grid.is-text {
  grid-template-columns: repeat(auto-fill, minmax(calc(200 * var(--u)), 1fr));
}
.gcard.cx-card {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
  cursor: pointer;
}
.cx-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cx-thumb > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cx-thumb.is-glyph {
  display: grid;
  place-items: center;
  background:
    var(--grid-faint),
    radial-gradient(80% 90% at 50% 40%, var(--info-a10), transparent 70%),
    var(--bg);
  color: var(--info);
}
.cx-thumb.is-glyph .gglyph {
  width: 34%;
  height: auto;
  aspect-ratio: 1;
}
.cx-card[aria-pressed="true"] .cx-thumb {
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.cx-cap {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
}
.cx-idx {
  flex: none;
  display: grid;
  place-items: center;
  min-width: calc(30 * var(--u));
  height: calc(26 * 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);
}
.cx-ct {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
  flex: 1 1 auto;
}
.cx-ct b {
  font: 600 var(--fs-body) / 1.3 var(--f-head);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cx-pg {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--dim);
}
.cx-pg .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.cx-card[aria-pressed="true"] .cx-ct b {
  color: var(--accent);
}

/* ------------------------------------------------------------------------------------------------- tip viewer */
.cx-dscroll {
  padding-right: calc(6 * var(--u));
}
.cx-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cx-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cx-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --bl: calc(14 * var(--u));
  background:
    linear-gradient(var(--accent), var(--accent)) top left / var(--bl) 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px var(--bl) no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / var(--bl) 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px var(--bl) no-repeat;
}
.cx-art.is-glyph {
  display: grid;
  place-items: center;
  color: var(--info);
  background: var(--grid-faint), radial-gradient(70% 80% at 50% 45%, var(--info-a22), transparent 70%), var(--bg);
}
.cx-art.is-glyph .gglyph {
  width: 30%;
  height: auto;
  aspect-ratio: 1;
}
.cx-dhead {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(4 * var(--u));
}
.cx-pnum {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.cx-title {
  margin: 0 0 calc(8 * var(--u));
  font: 600 var(--fs-xl) / 1.3 var(--f-head);
  color: var(--text);
}
.cx-body p {
  margin: 0 0 calc(6 * var(--u));
  font: 400 var(--fs-body) / 1.6 var(--f-body);
  color: var(--text);
}
.cx-body p + p {
  color: var(--dim);
}
.cx-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding-top: calc(12 * var(--u));
  margin-top: calc(6 * var(--u));
  border-top: 1px solid var(--line);
}
.cx-dots {
  display: flex;
  gap: calc(6 * var(--u));
}
.cx-dot {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cx-dot::before {
  content: "";
  width: calc(12 * var(--u));
  height: calc(5 * var(--u));
  background: var(--line-strong);
  transform: skewX(-24deg);
}
.cx-dot[aria-selected="true"]::before {
  width: calc(20 * var(--u));
  background: var(--accent);
}
.cx-dot:focus-visible {
  outline: 1px solid var(--info);
}
.cx-pick {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--dim);
  font-size: var(--fs-body);
}

/* ------------------------------------------------------------------------------------------------- controls */
.cx-ctlhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(12 * var(--u));
}
.cx-seg {
  flex: 0 1 auto;
  min-width: 0;
}
.cx-factsbtn {
  margin-left: auto;
}
html:not([data-orient="portrait"]) .cx-factsbtn {
  display: none;
}
.cx-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(300 * var(--u)), 1fr));
  gap: calc(14 * var(--u)) calc(22 * var(--u));
  align-items: start;
}
.cx-group .ghead {
  margin-bottom: calc(6 * var(--u));
}
.cx-rows {
  display: flex;
  flex-direction: column;
}
.cx-row {
  display: grid;
  grid-template-columns: calc(132 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(40 * var(--u));
  padding: calc(5 * var(--u)) calc(4 * var(--u));
  border-bottom: 1px solid var(--line-a60);
}
.cx-rows.is-touch .cx-row {
  grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr);
}
.cx-row:nth-child(odd) {
  background: var(--text-a04);
}
.cx-k {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u));
  min-width: 0;
}
.cx-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(30 * var(--u));
  height: calc(28 * var(--u));
  padding: 0 calc(8 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 700;
  font-style: normal;
  color: var(--text);
  white-space: nowrap;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.35);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.cx-or {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--faint);
}
.cx-what {
  font: 400 var(--fs-sm) / 1.45 var(--f-body);
  color: var(--text);
}
.cx-pad {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(30 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(6 * var(--u));
  font: 600 var(--fs-sm) / 1.2 var(--f-head);
  color: var(--text);
  background: var(--info-a10);
  box-shadow: inset 2px 0 0 var(--info);
}
.cx-pad .gglyph {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--info);
}
.cx-note {
  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.5;
  color: var(--dim);
  background: var(--info-a10);
  box-shadow: inset 2px 0 0 var(--info-dim);
}
.cx-note .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--info);
}
.cx-facts {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.cx-facts .gstat .gs-label {
  white-space: normal;
}

/* ------------------------------------------------------------------------------------------------- tiers */
@container (max-width: 520px) {
  .cx-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr));
    gap: calc(10 * var(--u));
  }
  .cx-ct b {
    font-size: var(--fs-sm);
  }
}
html[data-tier="phone"] .cx-title {
  font-size: var(--fs-lg);
  margin-bottom: calc(4 * var(--u));
}
html[data-tier="phone"] .cx-body p {
  font-size: var(--fs-sm);
  line-height: 1.5;
}
html[data-tier="phone"] .cx-dhead {
  margin-top: calc(8 * var(--u));
}
html[data-tier="phone"] .cx-nav {
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"] .cx-row {
  min-height: calc(36 * var(--u));
  grid-template-columns: calc(118 * var(--u)) minmax(0, 1fr);
}
html[data-tier="phone"] .cx-ctlhead {
  margin-bottom: calc(8 * var(--u));
}
html[data-orient="portrait"] .cx-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-orient="portrait"] .cx-seg {
  flex: 1 1 auto;
}
/* phone landscape: a shorter picture so the title and the two lines stay in view; page dots give way to the arrows */
html[data-tier="phone"] .cx-art {
  aspect-ratio: auto;
  height: calc(132 * var(--u));
}
html[data-tier="phone"][data-orient="portrait"] .cx-art {
  aspect-ratio: 16 / 9;
  height: auto;
}
html[data-tier="phone"] .cx-dots {
  display: none;
}
html[data-input="touch"] .cx-dot {
  width: 44px;
  height: 44px;
}
/* portrait: the scheme switch takes the full row, the facts button sits under it */
html[data-orient="portrait"] .cx-ctlhead {
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] .cx-seg {
  flex: 1 1 100%;
  display: flex;
}
html[data-orient="portrait"] .cx-seg > button {
  flex: 1 1 0;
  min-width: 0;
}
html[data-orient="portrait"] .cx-factsbtn {
  flex: 1 1 100%;
  margin-left: 0;
}
html[data-orient="portrait"] .cx-ct b {
  font-size: var(--fs-sm);
}
html[data-orient="portrait"] .cx-idx {
  min-width: calc(24 * var(--u));
  height: calc(22 * var(--u));
  font-size: var(--fs-xs);
}
html[data-orient="portrait"] .cx-pg {
  display: none;
}
html[data-orient="portrait"] .cx-row {
  grid-template-columns: calc(112 * var(--u)) minmax(0, 1fr);
}