/* #region zone:desk.style.header-family — ปุ่มบนหัวเว็บเป็นชุดเดียวกัน: สูงเท่ากัน มุม ขอบ ตัวอักษร ระยะห่าง 8px */
/* Owner 2026-10-13 "Nav bar ทำให้ UI เท่ากัน": every control on the right of the header is one family — the stage
   button, the market picker, the language button (one icon, toggles ไทย ↔ EN), the theme button, the Board's Luna button, the avatar, the AI status
   chip and the clock. One 36px height in a 56px bar, pill labels and circular icon controls, one border
   token, one hover/active/pressed treatment, one text size and weight, 16px icons, 8px between neighbours. Icon-only
   buttons (language, theme) and the avatar are circles. The market button reads as a picker (name + unit +
   caret); the language button is icon-only, so the two are never confused.
   Loaded last (index.html), so these win over the older per-control rules in desk.css, desk-quick-tools.css,
   desk-stage-analysis.css, desk-board-panes.css, desk-board-layout.css and desk-touch.css — Desk and Board alike. */
:root {
  --hdr-ctl: 44px;
  --hdr-ctl-pad: var(--sp-3);
  --hdr-ctl-icon: 16px;
  --hdr-ctl-fs: var(--fs-md);
}

:root .brand.web-lockup.web-lockup .web-endorsement {
  font-size: var(--fs-xs);
  line-height: var(--fs-xs);
}

/* 8px between neighbours, including search and account. */
:root .app-header,
:root[data-board] .app-header {
  column-gap: var(--sp-2);
  height: 56px;
  --head-h: 56px;
}
:root .app-shell {
  --head-h: 56px;
}
:root .app-header .header-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
:root .app-header .search-wrap,
:root[data-board] .app-header .search-wrap {
  margin-inline: 0;
  min-width: 80px;
}
:root .app-header .search-wrap input {
  height: var(--hdr-ctl);
  border-radius: var(--r-pill);
}
:root .app-header .search-wrap > svg {
  top: calc(var(--hdr-ctl) / 2);
}
:root .app-header .account,
:root[data-board] .app-header .account {
  gap: var(--sp-2);
}
:root .app-header .quick-tools {
  gap: var(--sp-2);
}

/* ---- the shared box ---- */
:root .app-header .qt-btn,
:root[data-board] .app-header .qt-btn,
:root .app-header .board-luna-btn,
:root[data-board] .app-header .board-luna-btn,
:root .app-header .ai-chip,
:root[data-board] .app-header .ai-chip {
  box-sizing: border-box;
  height: var(--hdr-ctl);
  min-height: var(--hdr-ctl);
  border: 1px solid var(--header-well-line);
  border-radius: var(--r-pill);
  background: var(--header-well-bg);
  color: var(--header-well-text);
  font-size: var(--hdr-ctl-fs);
  font-weight: 600;
  line-height: 1;
}
/* Labelled buttons: text + icon, 12px inside; icon-only: circle. */
:root .app-header .qt-btn,
:root[data-board] .app-header .qt-btn,
:root .app-header .board-luna-btn,
:root[data-board] .app-header .board-luna-btn {
  width: var(--hdr-ctl);
  min-width: var(--hdr-ctl);
  padding: 0;
  gap: var(--sp-2);
  border-radius: 50%;
}
:root .app-header .qt-btn.qt-stage-btn,
:root[data-board] .app-header .qt-btn.qt-stage-btn,
:root .app-header .qt-market-btn,
:root[data-board] .app-header .qt-market-btn,
:root[data-board] .app-header .board-luna-btn {
  width: auto;
  padding: 0 var(--hdr-ctl-pad);
  border-radius: var(--r-pill);
}
:root .app-header .qt-market-btn,
:root[data-board] .app-header .qt-market-btn {
  gap: var(--sp-1);
}
:root .app-header .qt-btn svg,
:root[data-board] .app-header .qt-btn svg,
:root .app-header .board-luna-btn svg,
:root[data-board] .app-header .board-luna-btn svg {
  width: var(--hdr-ctl-icon);
  height: var(--hdr-ctl-icon);
  flex-shrink: 0;
}
:root .app-header .qt-btn .qt-market-caret,
:root[data-board] .app-header .qt-btn .qt-market-caret {
  width: 14px;
  height: 14px;
}
:root[data-board] .app-header .board-luna-btn svg {
  color: inherit;
}

/* Compact navigation below 1600px leaves room for the status chip and search.
   The market picker keeps its currency unit and caret. */
@media (max-width: 1599px) {
  :root .app-header .qt-btn.qt-stage-btn,
  :root[data-board] .app-header .qt-btn.qt-stage-btn {
    width: var(--hdr-ctl);
    padding: 0;
  }
  .app-header .qt-stage-label,
  .app-header .qt-market-name,
  .app-header .qt-macro-caret {
    display: none;
  }
  :root .app-header .qt-market-btn,
  :root[data-board] .app-header .qt-market-btn {
    padding: 0 var(--sp-2);
  }
}
@media (min-width: 900px) and (max-width: 960px) {
  :root .app-header .clock,
  :root[data-board] .app-header .clock {
    display: none;
  }
}
@media (min-width: 900px) and (max-width: 1399px) {
  :root .app-header .search-wrap {
    min-width: 80px;
  }
}
@media (min-width: 900px) and (max-width: 1099px) {
  :root .app-header .ai-chip,
  :root[data-board] .app-header .ai-chip {
    display: none;
  }
}

/* ---- one hover / active / pressed treatment ---- */
:root .app-header .qt-btn:hover,
:root[data-board] .app-header .qt-btn:hover,
:root .app-header .board-luna-btn:hover,
:root[data-board] .app-header .board-luna-btn:hover,
:root .app-header .ai-chip:hover,
:root[data-board] .app-header .ai-chip:hover {
  background: var(--header-well-hover);
  color: var(--header-text);
}
:root .app-header .qt-btn:active,
:root[data-board] .app-header .qt-btn:active,
:root .app-header .board-luna-btn:active,
:root[data-board] .app-header .board-luna-btn:active {
  background: var(--header-well-line);
}
/* Pressed = "this is on" (the stage view open, the Luna sheet open). The theme button's
   aria-pressed only swaps its sun/moon icon, so it keeps the plain look. */
:root .app-header .qt-btn.qt-stage-btn[aria-pressed='true'],
:root[data-board] .app-header .qt-btn.qt-stage-btn[aria-pressed='true'],
:root .app-header .board-luna-btn[aria-expanded='true'],
:root[data-board] .app-header .board-luna-btn[aria-expanded='true'] {
  background: var(--acc-soft);
  color: var(--accent-text);
}

/* ---- status chip and clock: same box height, same centre line, same text size ---- */
:root .app-header .ai-chip,
:root[data-board] .app-header .ai-chip {
  padding: 0 var(--hdr-ctl-pad);
  color: var(--mint);
}
:root[data-board] .app-header .ai-chip {
  color: var(--accent-text);
}
:root .app-header .ai-chip.denied,
:root[data-board] .app-header .ai-chip.denied {
  color: var(--down);
}
:root .app-header .clock,
:root[data-board] .app-header .clock {
  height: var(--hdr-ctl);
  font-size: var(--hdr-ctl-fs);
  font-weight: 600;
  line-height: 1;
}

/* ---- the avatar: a circle at the same height (its tier ring stays outside the circle) ---- */
:root .app-header .member-avatar,
:root[data-board] .app-header .member-avatar {
  box-sizing: border-box;
  width: var(--hdr-ctl);
  height: var(--hdr-ctl);
  border-width: 1px;
  border-radius: 50%;
  background-clip: border-box;
  outline: 0;
  font-size: var(--hdr-ctl-fs);
  font-weight: 600;
}
:root .app-header .member-avatar.plus,
:root[data-board] .app-header .member-avatar.plus {
  box-shadow:
    0 0 0 2px var(--header-bg),
    0 0 0 3.5px var(--accent);
}
:root .app-header .member-avatar.elite,
:root[data-board] .app-header .member-avatar.elite {
  box-shadow:
    0 0 0 2px var(--header-bg),
    0 0 0 3.5px var(--amber);
}
/* #endregion */

/* #region zone:desk.style.header-hierarchy — พอร์ตจำลองเด่น มหภาคเป็นเมนู ตลาดเป็นตัวเลือก */
:root .app-header .qt-btn.qt-stage-btn.qt-paper-btn {
  background: var(--header-well-bg);
  border-color: var(--header-well-line);
  color: var(--header-well-text);
}
.app-header .member-name-tier {
  max-width: 160px;
}
.app-header #member-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root .app-header .qt-btn.qt-stage-btn.qt-paper-btn:hover,
:root .app-header .qt-btn.qt-stage-btn.qt-paper-btn:active {
  background: var(--header-well-hover);
  color: var(--header-text);
}
:root .app-header .qt-btn.qt-stage-btn.qt-paper-btn[aria-pressed='true'] {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
:root .app-header .qt-btn.qt-market-btn {
  position: relative;
  margin-inline-start: var(--sp-2);
  border-radius: var(--r-pill, 999px);
  background: transparent;
}
.app-header .qt-market-btn::before {
  content: '';
  position: absolute;
  inset-inline-start: -9px;
  top: 8px;
  bottom: 8px;
  border-inline-start: 1px solid var(--header-well-line);
}
.app-header .qt-market-unit {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--header-well-line);
}
.qt-macro-group {
  position: relative;
  flex-shrink: 0;
}
.qt-macro-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 210px;
  max-width: calc(100vw - 24px);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel);
  box-shadow: var(--card-shadow);
}
:root .app-header #qt-macro-menu .macro-option {
  display: flex;
  width: 100%;
  padding: 0 var(--hdr-ctl-pad);
  justify-content: flex-start;
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
:root .app-header #qt-macro-menu .macro-option + .macro-option {
  margin-top: var(--sp-2);
}
:root .app-header #qt-macro-menu .macro-option:hover,
:root .app-header #qt-macro-menu .macro-option:focus-visible,
:root .app-header #qt-macro-menu .macro-option[aria-selected='true'] {
  color: var(--accent-text);
  background: var(--acc-soft);
}
:root .app-header #qt-macro-menu .qt-stage-label {
  display: inline;
}
.app-header .qt-macro-caret {
  max-width: 12px;
}
@media (max-width: 600px) {
  :root .app-header {
    padding-inline: var(--sp-2);
  }
  .app-header .brand-text {
    display: none;
  }
  :root .app-header .qt-btn.qt-stage-btn {
    width: var(--hdr-ctl);
    padding: 0;
  }
  .app-header .qt-stage-label,
  .app-header .qt-market-name,
  .app-header .qt-macro-caret {
    display: none;
  }
}
/* #endregion */

/* #region zone:desk.style.header-phone-fit — หัวเว็บบนมือถือต้องพอดีจอ: ซ่อนคำว่า Board และ (beta) */
/* At 390px the logo, 4 buttons (44px each), the avatar and the "Board" word / "(beta)" tag were 407-421px wide, so the
   last control was cut off and the page scrolled sideways. Below 600px the "Board" word and the "(beta)" tag step aside
   (the profile dialog still shows "(beta)"; the Board's bottom tab bar already says where you are). */
@media (max-width: 599px) {
  :root .app-header .brand-accent,
  :root[data-board] .app-header .brand-accent,
  :root .app-header .beta-label,
  :root[data-board] .app-header .beta-label {
    display: none;
  }
}
/* #endregion */

/* #region zone:desk.style.macro-menu-phone — เมนูมหภาคไม่ล้นจอซ้ายบนมือถือแคบ */
@media (max-width: 420px) {
  .qt-macro-menu {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px) + var(--sp-2));
    left: var(--sp-2);
    right: var(--sp-2);
    width: auto;
    min-width: 0;
    max-width: none;
  }
}
/* #endregion */

/* #region zone:desk.style.header-narrow — จอ 360px ยังมีปุ่มครบและช่องไฟแปดพิกเซล */
@media (max-width: 1599px) {
  .app-header .beta-label {
    display: none;
  }
  .app-header .member-name-tier {
    display: none;
  }
}
.header-secondary {
  display: none;
  position: relative;
}
.header-secondary > summary {
  list-style: none;
  cursor: pointer;
}
.header-secondary > summary::-webkit-details-marker {
  display: none;
}
.header-secondary-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 210px;
  max-width: calc(100vw - 24px);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel);
  box-shadow: var(--card-shadow);
}
.header-secondary:not([open]) > .header-secondary-menu {
  display: none;
}
@media (max-width: 820px) {
  .header-secondary {
    display: block;
  }
  .header-secondary[open] > .header-secondary-menu {
    display: grid;
    gap: var(--sp-2);
    position: fixed;
    top: calc(var(--head-h, 56px) + var(--sp-2));
    right: var(--sp-3);
    max-height: calc(100dvh - var(--head-h, 56px) - 2 * var(--sp-3));
    overflow-y: auto;
  }
  :root .app-header #header-secondary-menu .qt-btn {
    width: 100%;
    padding-inline: var(--sp-3);
    border-radius: var(--r-pill);
    justify-content: flex-start;
    color: var(--text);
    background: var(--panel2);
  }
  :root .app-header #header-secondary-menu .qt-btn:is(:hover, :focus-visible, :active) {
    background: var(--hover);
    color: var(--text);
  }
  :root .app-header #header-secondary-menu #qt-theme-btn {
    display: inline-flex;
  }
  #header-secondary-menu .header-lang::after,
  #header-secondary-menu #qt-theme-btn::after {
    content: attr(aria-label);
  }
  .app-header #header-secondary-menu .qt-stage-label,
  .app-header #header-secondary-menu .qt-macro-caret {
    display: inline;
  }
  .header-secondary-menu .qt-macro-menu {
    position: static;
    margin-top: var(--sp-2);
  }
  :root .app-header .ai-chip,
  :root .app-header .clock {
    display: none;
  }
}
@media (max-width: 380px) {
  :root .app-header .qt-btn.qt-market-btn {
    width: var(--hdr-ctl);
    padding: 0;
    margin-inline-start: 0;
    gap: 0;
  }
  .app-header .qt-market-caret,
  .app-header .qt-market-btn::before {
    display: none;
  }
}
/* #endregion */