/* #region zone:desk.board.style.base — Super_T Board: ส่วนที่ต้องเป็นกลางเมื่อปิด Board (หน้าเดิมไม่เปลี่ยน) */
/* Spec docs/superpowers/specs/2026-10-07-desk-board-design.md. Everything that changes the look is scoped to
   :root[data-board] (desk-board.js sets it from /me features.deskBoard). The few unscoped rules below only keep the
   Board's extra markup invisible / layout-neutral on the old Desk. */
.scan-card {
  display: contents;
}
.board-tab-icon,
.tab-board {
  display: none;
}
/* #endregion */

/* #region zone:desk.board.style.tokens — โทเค็นเฉพาะ Board (สีทั้งหมดมาจากธีมกลางใน desk-tokens.css) */
/* The Board no longer carries its own palette (was palette A, forest green): colours come from desk-tokens.css so
   the owner-picked light / dark themes apply here too. Only the Board-only extras (regime band, strong hairline,
   deep fill, wave) and the Board's tighter radii live here. Contrast: desk-tokens-contrast.test.mjs. */
:root[data-board] {
  --cream: var(--u-card);
  --line-strong: var(--u-border);
  --deep: #111418;
  --wave: #5a46b5;
  --wave-soft: #eeebf8;
  --r-card: var(--u-radius-card);
  --r-inner: var(--u-radius-inner);
  --r-control: var(--u-radius-inner);
  --r-button: var(--u-radius-inner);
  --r-input: var(--u-radius-inner);
  --board-band-h: 0px;
}
:root[data-board][data-theme='dark'] {
  --cream: var(--u-card);
  --line-strong: var(--u-border);
  --deep: #e6edf3;
  --wave: #b9a4ff;
  --wave-soft: #262240;
}
:root[data-board] body {
  background: var(--bg);
}
:root[data-board] [hidden] {
  display: none !important;
}
:root[data-board] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* #endregion */

/* #region zone:desk.board.style.controls — ปุ่ม ตราประทับ ป้ายสูตร และปุ่มสลับของกระดาน */
:root[data-board] .board-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-size: var(--u-text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
:root[data-board] .board-btn:hover:not(:disabled) {
  background: var(--hover);
}
:root[data-board] .board-btn:active:not(:disabled) {
  background: var(--acc-soft);
}
:root[data-board] .board-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
:root[data-board] .board-btn.is-pinned,
:root[data-board] .board-btn.is-on {
  background: var(--acc-soft);
  border-color: transparent;
  color: var(--accent-text);
}
:root[data-board] .board-btn.is-pinned .icon-pin path {
  fill: currentColor;
}
:root[data-board] .board-btn.sm {
  height: 32px;
  font-size: var(--fs-md);
}
:root[data-board] .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
}
:root[data-board] .icon-btn.sm {
  width: 28px;
  height: 28px;
}
:root[data-board] .icon-btn.xs {
  width: 24px;
  height: 24px;
}
:root[data-board] .icon-btn.sm svg,
:root[data-board] .icon-btn.xs svg {
  width: 16px;
  height: 16px;
}
/* The trend-risk stamp: an outlined passbook mark that always carries its word (never colour only). */
:root[data-board] .stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 20px;
  padding: 0 7px;
  border-radius: var(--u-radius-pill); /* DUI-24: stamps are pills like every other chip */
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, var(--u-sheet));
  font-size: var(--u-text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: none;
}
:root[data-board] .stamp::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
:root[data-board] .stamp.hold {
  color: var(--up-text);
}
:root[data-board] .stamp.caution {
  color: var(--amber);
}
:root[data-board] .stamp.exit {
  color: var(--down-text);
}
:root[data-board] .stamp.lg {
  height: 26px;
  padding: 0 10px;
  font-size: var(--u-text-sm);
}
:root[data-board] .ftag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--u-text-xs);
  white-space: nowrap;
}
:root[data-board] .seg {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  padding: 3px;
  gap: 2px;
}
:root[data-board] .seg-btn.active {
  color: var(--text);
  font-weight: 650;
}
/* The popover menu (desk-menu.js) and the input dialog (desk-ui.js inputDialog) — Desk components, Board styled. */
.desk-menu {
  position: fixed;
  z-index: 70;
  min-width: var(--menu-min-width);
  max-width: var(--menu-max-width);
  padding: var(--menu-padding);
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  background: var(--u-sheet);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  /* concentric: a row's corner is the menu's corner minus its padding and border */
  --menu-row-radius: calc(var(--r-inner) - var(--menu-padding) - 1px);
  box-shadow: var(--pop-shadow);
  animation: stIn var(--dur-slow) var(--ease-out);
}
.desk-menu-item {
  display: flex;
  align-items: center;
  gap: var(--menu-row-gap);
  min-height: var(--menu-row-height);
  padding: var(--menu-row-padding);
  border: 0;
  border-radius: var(--menu-row-radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  text-align: left;
}
.desk-menu-item svg {
  color: var(--muted);
  flex: none;
}
/* the picked choice of a one-of-many menu (role=menuitemradio): its tick sits at the end of the row */
.desk-menu-item[aria-checked='true'] svg:last-child {
  margin-left: auto;
  color: var(--accent-text);
}
.desk-menu-item:hover:not(:disabled),
.desk-menu-item:focus-visible {
  background: var(--hover);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--acc-ring);
}
.desk-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.desk-menu-item.is-danger,
.desk-menu-item.is-danger svg {
  color: var(--down);
}
.desk-menu-sep {
  height: 1px;
  margin: var(--sp-1) 6px;
  background: var(--line);
}
.desk-dialog-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--muted);
}
.desk-dialog-field .input {
  height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--panel2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.desk-dialog-field .input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-ring);
}
.desk-dialog-field .input[aria-invalid='true'] {
  border-color: var(--down);
}
.desk-dialog-btn.is-quiet {
  margin-right: auto;
  border-color: transparent;
  color: var(--down);
}
/* #endregion */