:root {
  /* Neumorphic base — soft clinic teal-gray */
  --bg: #e4eaec;
  --bg-soft: #e4eaec;
  --bg-elev: #e4eaec;
  --neu-light: #ffffff;
  --neu-dark: #c2ced3;
  --neu-out:
    8px 8px 16px var(--neu-dark),
    -8px -8px 16px var(--neu-light);
  --neu-out-sm:
    5px 5px 12px var(--neu-dark),
    -5px -5px 12px var(--neu-light);
  --neu-out-xs:
    3px 3px 7px var(--neu-dark),
    -3px -3px 7px var(--neu-light);
  --neu-in:
    inset 6px 6px 12px var(--neu-dark),
    inset -6px -6px 12px var(--neu-light);
  --neu-in-sm:
    inset 3px 3px 7px var(--neu-dark),
    inset -3px -3px 7px var(--neu-light);
  --neu-press:
    inset 4px 4px 8px var(--neu-dark),
    inset -2px -2px 6px var(--neu-light);
  --ink: #1a3540;
  --muted: #5f7a84;
  --line: rgba(26, 53, 64, 0.06);
  --teal: #1a9f94;
  --teal-soft: rgba(26, 159, 148, 0.14);
  --sand: #c4893a;
  --sand-soft: rgba(196, 137, 58, 0.16);
  --ok: #1e9a62;
  --warn: #c47a1a;
  --danger: #d64c42;
  --side: #e4eaec;
  --side-ink: #1a3540;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --side-w: 228px;
  --insight-w: 260px;
  /* ตัวอักษร — ใช้ร่วมทุกแท็บ */
  --fs-xs: 0.8rem;
  --fs-sm: 0.92rem;
  --fs-base: 1rem;
  --fs-md: 1.12rem;
  --fs-lg: 1.38rem;
  --kpi-value: 1.22rem;
  /* กราฟ — ใช้ร่วมทุกแท็บ */
  --chart-h: 220px;
  --chart-h-sm: 175px;
  --chart-h-wide: 275px;
  --chart-donut-h: 280px;
  --chart-tick: 11;
  --chart-legend: 11;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
}
body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  overscroll-behavior-y: contain;
}

.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--insight-w);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "side top insight"
    "side main insight";
  min-height: 100vh;
}

.sidebar {
  grid-area: side;
  background: var(--bg);
  color: var(--side-ink);
  padding: 1.25rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--neu-out-sm);
  z-index: 5;
}
.side-brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: var(--neu-out-xs);
  background: var(--bg);
}
.brand-text {
  min-width: 0;
}
.side-brand strong,
.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.side-brand span,
.brand-text span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
  margin-top: 0.15rem;
}
.side-close { display: none; }
.side-nav {
  display: grid;
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0.35rem;
}
.nav-item {
  border: 0;
  background: var(--bg);
  color: var(--muted);
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.35;
  transition: box-shadow 0.2s, color 0.2s, font-weight 0.2s;
  box-shadow: var(--neu-out-xs);
}
.nav-item:hover {
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
}
.nav-item:active { box-shadow: var(--neu-press); }
.nav-item.active {
  color: var(--teal);
  font-weight: 700;
  box-shadow: var(--neu-in-sm);
  background: var(--bg);
}
.side-meta {
  border-top: 0;
  padding-top: 0.85rem;
  box-shadow: var(--neu-in-sm);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.75rem;
  background: var(--bg);
}
.side-meta p { margin: 0 0 0.35rem; font-size: var(--fs-xs); color: var(--muted); }
.side-meta small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.side-meta .devops-credit {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.topbar {
  grid-area: top;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.4rem;
  padding-left: max(1.4rem, env(safe-area-inset-left));
  padding-right: max(1.4rem, env(safe-area-inset-right));
  border-bottom: 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--neu-out-sm);
}
.topbar-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}
.topbar-titles { min-width: 0; }
.topbar h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}
.topbar p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.top-tools { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.menu-btn { display: none; }
.filter-btn { display: none; }
.filter-summary {
  display: none;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.35;
}
.icon-btn {
  border: 0;
  background: var(--bg);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--neu-out-xs);
}
.icon-btn:hover { box-shadow: var(--neu-out-sm); }
.icon-btn:active { box-shadow: var(--neu-press); }
.menu-btn {
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.side-close.icon-btn {
  background: var(--bg);
  color: var(--ink);
  width: 40px;
  height: 40px;
  box-shadow: var(--neu-out-xs);
}
.nav-backdrop {
  display: none;
}
.filter, .search {
  display: grid;
  gap: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.filter select, .search input {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  min-width: 220px;
  box-shadow: var(--neu-in-sm);
  outline: none;
}
.filter select:focus, .search input:focus {
  box-shadow: var(--neu-in);
}

.insight-rail {
  grid-area: insight;
  border-left: 0;
  background: var(--bg);
  padding: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  box-shadow: var(--neu-out-sm);
}
.insight-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.insight-head h2 { margin: 0; font-size: var(--fs-md); font-family: var(--font-display); }
.insight-head span {
  background: var(--bg);
  color: var(--teal);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: var(--neu-out-xs);
}
.insight-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.insight-toggle .insight-head { margin-bottom: 0; flex: 1; }
.insight-chevron {
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.2s;
}
.insight-rail.collapsed .insight-list { display: none; }
.insight-rail.collapsed .insight-chevron { transform: rotate(-90deg); }
.insight-rail.collapsed .insight-toggle { margin-bottom: 0; }
.insight-toggle { margin-bottom: 0.75rem; }
.insight-card {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  text-align: left;
  box-shadow: var(--neu-out-sm);
}
.insight-card:active { box-shadow: var(--neu-press); }
.insight-card .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--teal);
}
.insight-card.sev-high .tag { color: var(--danger); }
.insight-card.sev-mid .tag { color: var(--warn); }
.insight-card.sev-good .tag { color: var(--ok); }
.insight-card h4 { margin: 0 0 0.3rem; font-size: var(--fs-sm); }
.insight-card p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }

.views {
  grid-area: main;
  padding: 1.1rem 1.35rem 2.5rem;
  overflow: auto;
}
.view { display: none; }
.view.active { display: grid; gap: 1rem; }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.kpi-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--neu-out);
}
.kpi-card .label { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.kpi-card .value {
  font-family: var(--font-display);
  font-size: var(--kpi-value);
  margin: 0.2rem 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.kpi-card .foot { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.kpi-card .delta { font-size: var(--fs-xs); font-weight: 700; }
.kpi-card .delta.pos { color: var(--ok); }
.kpi-card .delta.neg { color: var(--danger); }

/* เพิ่มขึ้นเขียว · ลดลงแดง */
.chg.pos { color: var(--ok); font-weight: 700; }
.chg.neg { color: var(--danger); font-weight: 700; }
.chg.flat { color: var(--muted); }
.badge.pos { color: var(--ok); border-color: rgba(30,154,98,0.35); background: rgba(30,154,98,0.08); }
.badge.neg { color: var(--danger); border-color: rgba(214,76,66,0.35); background: rgba(214,76,66,0.08); }
.unit-card .badge.pos,
.unit-card .badge.neg { font-weight: 700; }
.explain .chg { white-space: nowrap; }


.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.panel {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  box-shadow: var(--neu-out);
}
.block-head {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
}
.block-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.block-head span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.chart-frame {
  position: relative;
  height: var(--chart-h);
  max-width: 100%;
  border-radius: var(--radius-sm);
  padding: 0.45rem;
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.chart-frame.chart-sm { height: var(--chart-h-sm); }
.chart-frame.chart-wide { height: var(--chart-h-wide); }
.chart-frame.chart-donut {
  height: var(--chart-donut-h, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-frame.chart-donut canvas {
  max-width: min(100%, 320px);
  margin: 0 auto;
}
.explain {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }

.share-legend {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.share-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.35rem 0.15rem;
  border-bottom: 1px solid var(--line);
}
.share-row:last-child { border-bottom: 0; }
.share-row .swatch,
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.swatch.inline {
  margin-right: 0.4rem;
  vertical-align: middle;
}
.share-row strong {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.share-row small {
  color: var(--muted);
  font-size: var(--fs-xs);
}
.share-row em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.focus-cards { display: grid; gap: 0.55rem; }
.focus-card {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: var(--neu-out-sm);
}
.focus-card:hover { box-shadow: var(--neu-out); }
.focus-card:active { box-shadow: var(--neu-press); }
.focus-card .badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.25rem;
}
.focus-card h4 { margin: 0 0 0.25rem; font-size: var(--fs-sm); }
.focus-card p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }

.loc-legend, .unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.loc-legend > div, .unit-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: var(--neu-out-sm);
}
.loc-legend strong, .unit-card h3 {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
}
.loc-legend span, .unit-card .loc { color: var(--muted); font-size: var(--fs-xs); }
.unit-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.7rem;
}
.unit-card .badge {
  font-size: 0.7rem;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  background: var(--bg);
  color: var(--teal);
  white-space: nowrap;
  box-shadow: var(--neu-out-xs);
}
.unit-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.55rem;
}
.unit-metrics span { display: block; color: var(--muted); font-size: 0.72rem; }
.unit-metrics strong { font-family: var(--font-display); font-size: 1rem; }
.unit-card p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.unit-card.dim { opacity: 0.4; }

.list-head, .svc-row {
  display: grid;
  grid-template-columns: 42px 95px 1fr 130px 140px;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
}
.list-head {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.list-head span:nth-child(4),
.list-head span:nth-child(5),
.svc-row .meta,
.svc-row .rev { text-align: right; }
.svc-list { display: grid; gap: 0.35rem; }
.svc-row {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-out-xs);
}
.svc-row:hover { box-shadow: var(--neu-out-sm); }
.svc-row.hidden { display: none; }
.svc-row .rank { color: var(--muted); font-family: var(--font-display); }
.svc-row .code { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); }
.svc-row .name { font-size: var(--fs-sm); }
.svc-row .meta { color: var(--muted); font-size: var(--fs-xs); }
.svc-row .rev { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }

.staff-leader {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.leader-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.95rem 1rem;
  box-shadow: var(--neu-out-sm);
}
.leader-card .place { color: var(--teal); font-size: var(--fs-xs); font-weight: 700; }
.leader-card h3 { margin: 0.25rem 0; font-family: var(--font-display); font-size: 1.05rem; }
.leader-card .title { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 0.45rem; }
.leader-card strong { font-family: var(--font-display); font-size: 1.15rem; }

.table-wrap {
  overflow: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.data-table th, .data-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.data-table th { background: transparent; color: var(--muted); font-size: var(--fs-xs); }
.data-table tr.hidden { display: none; }
.data-table tr.row-warn td { background: rgba(196, 137, 58, 0.12); }
.data-table tr.row-warn em { color: #9a6a2a; font-style: normal; font-weight: 600; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.num.strong { font-weight: 700; color: var(--ink); }
.data-table td.code { color: var(--teal); font-weight: 600; }
.data-table td.name { white-space: normal; min-width: 14rem; max-width: 22rem; }
.svc-year-table th.svc-yhead { text-align: center; color: var(--ink); font-weight: 700; }
.svc-year-table th.svc-yhead.active-year,
.svc-year-table td.active-year { background: rgba(26, 159, 148, 0.08); }
.svc-year-table thead tr:last-child th { text-align: right; }
.svc-matrix-bar { margin: 0.5rem 0 0.85rem; }
.svc-matrix-bar input[type="search"] {
  min-width: min(240px, 100%);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  outline: none;
}
.table-scroll {
  overflow: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  max-height: min(70vh, 640px);
  box-shadow: var(--neu-in-sm);
}
.table-scroll .data-table { margin: 0; }
.table-scroll .data-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--line); }

.stats-list, .method-list { display: grid; gap: 0.5rem; max-height: 340px; overflow: auto; }
.stat-item, .method-item {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
}
.stat-item strong, .method-item strong { display: block; font-size: var(--fs-sm); margin-bottom: 0.2rem; }
.stat-item span, .method-item span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.stat-item .pass { color: var(--ok); font-weight: 700; }
.stat-item .fail { color: var(--danger); font-weight: 700; }

.analysis-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.55;
  box-shadow: var(--neu-in-sm);
}
.analysis-box li { margin: 0.35rem 0; }

.stats-verdict {
  display: grid;
  gap: 0.55rem;
  max-height: 420px;
  overflow: auto;
  padding-right: 0.2rem;
}
.verdict-card {
  background: var(--bg);
  border: 0;
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  box-shadow: var(--neu-out-xs);
}
.verdict-card.win-a { border-left-color: var(--teal); }
.verdict-card.win-b { border-left-color: #c4893a; }
.verdict-card.tie { border-left-color: #8aa0a8; }
.verdict-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.3rem;
}
.verdict-top strong { font-size: var(--fs-sm); }
.verdict-card p { margin: 0 0 0.35rem; font-size: var(--fs-sm); color: var(--ink); line-height: 1.45; }
.verdict-card small { color: var(--muted); font-size: var(--fs-xs); }
.verdict-card .badge {
  flex-shrink: 0;
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.verdict-card.win-a .badge { color: #0f6e67; background: rgba(26,159,148,0.12); }
.verdict-card.win-b .badge { color: #8a5a18; background: rgba(196,137,58,0.14); }

.sleep-cap-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.55rem;
  margin: 0.5rem 0 0.75rem;
}
.sleep-cap-chip {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  background: var(--bg);
  font-size: var(--fs-sm);
  box-shadow: var(--neu-out-xs);
}
.sleep-cap-chip strong { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 0.2rem; }
.sleep-cap-chip span { display: block; color: var(--ink); line-height: 1.4; }
.sleep-cap-chip em {
  display: inline-block;
  margin-top: 0.35rem;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-xs);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}
.sleep-cap-chip.ok em { background: rgba(26,159,148,0.14); color: #0f6e67; }
.sleep-cap-chip.warn em { background: rgba(196,137,58,0.16); color: #8a5a18; }
.sleep-cap-verdict { font-weight: 600; color: var(--ink); }
.panel-wide { grid-column: 1 / -1; }
.tag-ok {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #0f6e67;
  background: rgba(26,159,148,0.12);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.tag-muted {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #5a6a70;
  background: rgba(90, 106, 112, 0.12);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
tr.row-alumni td {
  opacity: 0.72;
}
.sleep-growth {
  margin-top: 0.35rem;
  margin-bottom: 0.85rem;
  border-top: 0;
  padding-top: 0;
}
.sleep-growth .present-step {
  background: var(--sand);
  font-size: 0.85rem;
}
.sleep-growth .present-act-head h2 {
  color: var(--ink);
}
.sleep-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  margin-bottom: 0.55rem;
  box-shadow: var(--neu-out);
}
.sleep-banner strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: 0.15rem;
}
.sleep-banner > div > span { color: var(--muted); font-size: var(--fs-sm); }
.sleep-banner-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.sleep-banner-metrics span {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--neu-out-xs);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.action-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--neu-out-sm);
}
.action-card .num {
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 800;
}
.action-card h3 { margin: 0.35rem 0; font-family: var(--font-display); font-size: 1.05rem; }
.action-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; }
}
.cap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.skill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}
.skill-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 700;
  border: 0;
  background: var(--bg);
  color: var(--muted);
  line-height: 1.25;
  box-shadow: var(--neu-out-xs);
}
.skill-badge.part-time {
  background: rgba(214, 76, 66, 0.1);
  border-color: rgba(214, 76, 66, 0.28);
  color: #a8322a;
}
.skill-badge.admin {
  background: rgba(70, 100, 140, 0.1);
  border-color: rgba(70, 100, 140, 0.28);
  color: #3a5470;
}
.skill-badge.expert {
  background: rgba(30,154,98,0.12);
  border-color: rgba(30,154,98,0.28);
  color: #0f6b42;
}
.skill-badge.sleep-expert {
  background: rgba(26,159,148,0.14);
  border-color: rgba(26,159,148,0.3);
  color: #0f6e67;
}
.skill-badge.sleep-basic {
  background: rgba(196,137,58,0.14);
  border-color: rgba(196,137,58,0.3);
  color: #8a5a18;
}
.skill-badge.unset {
  background: rgba(95,122,132,0.1);
  border-color: rgba(95,122,132,0.22);
  color: #5f7a84;
}
.skill-badge.role {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
}
.leader-card .skill-row { margin-top: 0.45rem; }
.cap-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  box-shadow: var(--neu-out-sm);
}
.cap-card.hidden { display: none; }
.cap-card h4 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
}
.cap-card .meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: 0.55rem;
}
.cap-card .meta strong { color: var(--ink); }
.cap-group { margin-bottom: 0.55rem; }
.cap-group:last-child { margin-bottom: 0; }
.cap-group-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.65rem;
  font-size: 0.86rem;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.25;
  max-width: 100%;
  box-shadow: var(--neu-out-xs);
}
.cap-chip.lead { background: rgba(26,159,148,0.14); border-color: rgba(26,159,148,0.28); color: #0f6e67; }
.cap-chip.perform { background: rgba(196,137,58,0.12); border-color: rgba(196,137,58,0.28); color: #8a5a18; }
.cap-chip.assist { background: rgba(90,143,160,0.12); border-color: rgba(90,143,160,0.25); color: #3d6573; }
.cap-chip code { font-family: var(--font-display); font-size: 0.8rem; opacity: 0.85; white-space: nowrap; }
.data-table td.cap-cell {
  white-space: normal;
  font-size: var(--fs-xs);
  line-height: 1.45;
  max-width: 28rem;
}

.sheet-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sheet-chips span {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  box-shadow: var(--neu-out-xs);
}

.scenario-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  box-shadow: var(--neu-out-sm);
}
.scenario-bar span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.scenario-bar select {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font: inherit;
  min-width: 280px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--neu-in-sm);
  outline: none;
}
.assume-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  display: grid;
  gap: 0.35rem;
}
.invest-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin: 1rem 0 0.85rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 0;
  box-shadow: var(--neu-out);
}
.invest-banner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.invest-banner > div > span { color: var(--muted); font-size: var(--fs-sm); }
.invest-banner-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.invest-banner-metrics span {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  box-shadow: var(--neu-out-xs);
}
.present-act {
  margin: 0.65rem 0 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.present-act:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.present-act-head {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0 0 0.45rem;
}
.present-step {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--teal);
  font-weight: 700;
  font-size: 0.78rem;
  margin-top: 0.1rem;
  box-shadow: var(--neu-out-xs);
}
.present-act-head h2 {
  margin: 0 0 0.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.25;
}
.present-act-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.present-bullets {
  margin: 0 0 0.55rem;
  padding-left: 1.05rem;
  color: var(--ink);
  font-size: var(--fs-xs);
  line-height: 1.4;
  display: grid;
  gap: 0.18rem;
}
.present-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.55rem;
}
.present-hl {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
}
.present-hl .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: var(--warn);
}
.present-hl.sev-ok .tag,
.present-hl.sev-good .tag { color: var(--ok); }
.present-hl.sev-high .tag { color: var(--danger); }
.present-hl h4 {
  margin: 0 0 0.15rem;
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.present-hl p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.present-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
}
.present-chip {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  min-width: 0;
  flex: 1 1 7.5rem;
  max-width: 11rem;
  box-shadow: var(--neu-out-xs);
}
.present-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 0.05rem;
  line-height: 1.25;
}
.present-chip strong { font-size: var(--fs-sm); line-height: 1.2; }
.present-chip.pos strong { color: var(--ok); }
.present-chip.neg strong { color: var(--danger); }

/* หน้าผลการดำเนินงาน — กระชับให้พอดีจอ */
#view-overview.active {
  gap: 0.55rem;
}
#view-overview .invest-banner {
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.85rem;
  gap: 0.55rem 0.85rem;
  border-radius: 12px;
}
#view-overview .invest-banner strong {
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin-bottom: 0.12rem;
}
#view-overview .invest-banner > div > span {
  font-size: var(--fs-xs);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#view-overview .invest-banner-metrics {
  gap: 0.3rem;
}
#view-overview .invest-banner-metrics span {
  padding: 0.22rem 0.5rem;
  font-size: var(--fs-xs);
}
#view-overview .kpi-strip {
  gap: 0.45rem;
  margin-bottom: 0.15rem;
}
#view-overview .grid-2 {
  gap: 0.55rem;
}
#view-overview .focus-cards {
  gap: 0.4rem;
  max-height: min(220px, 32vh);
  overflow: auto;
}
#view-overview .focus-card {
  padding: 0.5rem 0.65rem;
}
#view-overview .share-legend {
  margin-top: 0.35rem;
  gap: 0.3rem;
}

@media (max-width: 900px) {
  .present-highlights { grid-template-columns: 1fr; }
  .present-chip { max-width: none; flex: 1 1 calc(50% - 0.35rem); }
}
.svc-menu-section { margin-bottom: 0.75rem; }
.svc-menu-section h4 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
}
.invest-rec.role-booking {
  box-shadow: var(--neu-in-sm);
}
.invest-rec-head em.role-booking {
  color: var(--warn);
  background: rgba(196,137,58,0.12);
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}
.invest-rec-head em.role-exam { color: var(--ok); }
.invest-rec {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  background: var(--bg);
  box-shadow: var(--neu-out-sm);
}
.invest-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
}
.invest-rec-head .swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  display: inline-block;
}
.invest-rec-head em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--teal);
  background: rgba(26,159,148,0.12);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.invest-rec p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.unit-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.55rem;
}
.unit-card-head em { color: var(--muted); font-style: normal; font-size: var(--fs-xs); }
.unit-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}
.unit-metrics div { display: grid; gap: 0.1rem; }
.unit-metrics span { color: var(--muted); font-size: var(--fs-xs); }
.unit-metrics b { font-size: var(--fs-sm); }
.site-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}
.site-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 44px;
  box-shadow: var(--neu-out-xs);
}
.site-tab:hover { box-shadow: var(--neu-out-sm); }
.site-tab em {
  font-style: normal;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.site-tab.active {
  color: var(--teal);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.site-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 1rem;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--neu-out);
}
.site-pill {
  display: inline-block;
  color: var(--teal);
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  box-shadow: var(--neu-out-xs);
}
.site-hero h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.25;
}
.site-role {
  margin: 0 0 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.site-rule {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.site-hero-side {
  display: grid;
  gap: 0.55rem;
  align-content: center;
}
.site-hero-side div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255,255,255,0.55);
  border-radius: 10px;
}
.site-hero-side span { color: var(--muted); font-size: var(--fs-xs); }
.site-hero-side strong { font-size: var(--fs-sm); }
.site-talk {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.site-talk li + li { margin-top: 0.4rem; }
.site-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin-top: 0.85rem;
}
.loc-filter-hint { margin: 0 0 0.75rem; }
.unit-card .site-open {
  margin-top: 0.55rem;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
}
@media (max-width: 900px) {
  .site-hero { grid-template-columns: 1fr; }
}

.findings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.decision-hero {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--neu-out);
}
.decision-hero strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: 0.25rem;
}
.decision-hero p { margin: 0 0 0.35rem; font-size: var(--fs-sm); line-height: 1.45; }
.decision-hero small { color: var(--muted); font-size: var(--fs-xs); }
.decision-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.prio-badge, .horizon-badge, .ok-badge, .warn-badge, .neutral-badge {
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.prio-badge { background: rgba(214,76,66,0.12); color: #a33; }
.horizon-badge { background: var(--bg-soft); color: var(--muted); }
.ok-badge { background: rgba(30,154,98,0.12); color: #1e9a62; }
.warn-badge { background: rgba(196,137,58,0.14); color: #8a5a18; }
.neutral-badge { background: rgba(90,143,160,0.14); color: #3d6674; }
.badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.ve-badge-manage {
  display: none;
  border: 1px dashed rgba(26,159,148,0.7);
  background: rgba(26,159,148,0.1);
  color: var(--teal);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
body.ve-edit-mode .ve-badge-manage { display: inline-flex; }
body.ve-edit-mode .badge-row {
  outline: 2px dashed rgba(196,137,58,0.7);
  outline-offset: 3px;
  border-radius: 10px;
  padding: 0.2rem;
  cursor: pointer;
}
.ve-badge-help { margin: 0 0 0.65rem; color: var(--muted); font-size: var(--fs-sm); }
.ve-badge-list { display: grid; gap: 0.55rem; max-height: 45vh; overflow: auto; margin-bottom: 0.75rem; }
.ve-badge-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem;
  background: var(--bg-soft);
}
.ve-badge-item-main, .ve-badge-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.ve-badge-add-row { grid-template-columns: 1fr auto auto; margin-bottom: 0.75rem; }
.ve-badge-item-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ve-badge-item input, .ve-badge-item select, .ve-badge-add-row input, .ve-badge-add-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font: inherit;
}
.ve-badge-empty { color: var(--muted); font-size: var(--fs-sm); margin: 0.35rem 0; }
.ve-badge-card { width: min(640px, 100%); }
.insight-card .badge-row { margin-bottom: 0.35rem; }

.direction { color: var(--ink) !important; }
.evidence-list, .next-steps ol {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.next-steps { margin-top: 0.55rem; }
.next-steps strong { font-size: var(--fs-xs); color: var(--ink); }
.link-view {
  margin-top: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.roadmap-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: var(--neu-out-sm);
}
.roadmap-card h4 { margin: 0 0 0.35rem; font-family: var(--font-display); }
.roadmap-card p { margin: 0 0 0.45rem; font-size: var(--fs-sm); }
.roadmap-card ul {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .roadmap-grid { grid-template-columns: 1fr; }
}
.finding-card {
  border: 0;
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--neu-out-sm);
}
.finding-card:active { box-shadow: var(--neu-press); }
.finding-card.sev-high { border-left-color: var(--danger); }
.finding-card.sev-mid { border-left-color: var(--sand); }
.finding-card.sev-good { border-left-color: var(--ok); }
.finding-card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.25rem;
}
.finding-card h4 { margin: 0 0 0.3rem; font-size: var(--fs-sm); }
.finding-card p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
@media (max-width: 1100px) {
  .findings-grid { grid-template-columns: 1fr; }
}

/* ---- Tablet ---- */
@media (max-width: 1200px) {
  .app {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-areas:
      "side top"
      "side main"
      "side insight";
  }
  .insight-rail {
    display: block;
    position: static;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: none;
  }
}

/* ---- Tablet compact / large phone landscape ---- */
@media (max-width: 1100px) {
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .topbar { order: 1; }
  .views { order: 2; flex: 1 1 auto; min-width: 0; }
  .insight-rail { order: 3; }
  .menu-btn { display: inline-flex; }
  .side-close { display: inline-flex; }
  .filter-btn { display: inline-flex; }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 53, 64, 0.4);
    z-index: 40;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .nav-backdrop[hidden] { display: none !important; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: var(--neu-out);
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    padding-top: max(0.7rem, env(safe-area-inset-top));
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
  }
  .topbar-main {
    align-items: center;
    gap: 0.55rem;
  }
  .topbar-titles { flex: 1; min-width: 0; }
  .topbar h1 {
    font-size: 1.12rem;
    line-height: 1.25;
  }
  .topbar p {
    margin-top: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .topbar.filters-collapsed .top-tools { display: none; }
  .topbar:not(.filters-collapsed) .top-tools {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .topbar:not(.filters-collapsed) .top-tools .search {
    grid-column: 1 / -1;
  }
  .topbar.filters-collapsed .filter-summary {
    display: block;
  }
  .filter-btn[aria-expanded="true"] {
    box-shadow: var(--neu-press);
    color: var(--teal);
  }
  .filter select, .search input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .insight-rail {
    margin: 0.35rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--neu-out-sm);
    padding: 0.75rem;
  }
  .insight-list {
    display: grid;
    gap: 0.55rem;
    max-height: min(42vh, 320px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .views {
    padding: 0.75rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: 1rem;
  }
  .view.active { gap: 0.75rem; }
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .kpi-card {
    padding: 0.7rem 0.75rem;
    min-height: 4.5rem;
  }
  .grid-2, .action-grid, .cap-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .present-highlights {
    grid-template-columns: 1fr;
  }
  .loc-legend, .unit-grid, .staff-leader {
    grid-template-columns: 1fr;
  }
  :root {
    --chart-h: 200px;
    --chart-h-sm: 165px;
    --chart-h-wide: 235px;
    --chart-donut-h: 250px;
    --kpi-value: 1.12rem;
    --chart-tick: 10;
    --chart-legend: 10;
  }
  .scenario-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .scenario-bar select { min-width: 0; width: 100%; min-height: 44px; font-size: 16px; }
  .nav-item { min-height: 48px; padding: 0.9rem 1rem; }
  .side-nav { gap: 0.45rem; }
  .table-wrap, .table-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }
  .table-wrap::after,
  .table-scroll::after {
    content: "เลื่อนดูตาราง →";
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    padding: 0.35rem 0.15rem 0;
  }
  .data-table { min-width: 560px; }
  .invest-banner, .sleep-banner, .present-chips, .decision-hero, .site-hero {
    max-width: 100%;
  }
  .invest-banner, .sleep-banner, .site-hero, .decision-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .invest-banner-metrics,
  .sleep-banner-metrics {
    width: 100%;
  }
  .list-head, .svc-row { grid-template-columns: 36px 1fr 100px; }
  .list-head span:nth-child(2),
  .list-head span:nth-child(4),
  .svc-row .code,
  .svc-row .meta { display: none; }
  .stats-verdict { max-height: none; }
  .panel { max-width: 100%; overflow: hidden; }
  .chart-frame { max-width: 100%; }
  .site-tabs {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    margin-bottom: 0.65rem;
  }
  .site-tab {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  #view-overview .focus-cards {
    max-height: none;
  }
  .block-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .ve-toolbar {
    max-width: calc(100vw - 1rem);
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    padding: 0.45rem 0.65rem;
    gap: 0.4rem;
  }
  .ve-brand { display: none; }
}

/* ---- Phone ---- */
@media (max-width: 640px) {
  :root {
    --fs-xs: 0.78rem;
    --fs-sm: 0.88rem;
    --fs-base: 0.95rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.18rem;
    --kpi-value: 1.08rem;
    --chart-h: 190px;
    --chart-h-sm: 155px;
    --chart-h-wide: 215px;
    --chart-donut-h: 220px;
    --chart-tick: 9;
    --chart-legend: 10;
    --radius: 16px;
  }
  .topbar {
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    padding-top: max(0.55rem, env(safe-area-inset-top));
  }
  .topbar h1 { font-size: 1.05rem; }
  .topbar p { display: none; }
  .topbar:not(.filters-collapsed) .top-tools {
    grid-template-columns: 1fr;
  }
  .menu-btn, .filter-btn, .side-close.icon-btn {
    width: 44px;
    height: 44px;
  }
  .views {
    padding: 0.65rem;
    padding-left: max(0.65rem, env(safe-area-inset-left));
    padding-right: max(0.65rem, env(safe-area-inset-right));
  }
  .view.active { gap: 0.65rem; }
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .kpi-card {
    padding: 0.65rem 0.7rem;
  }
  .kpi-card .value {
    font-size: var(--kpi-value);
    word-break: break-word;
  }
  .panel { padding: 0.75rem 0.8rem; }
  .share-row strong { font-size: var(--fs-sm); }
  .cap-card { padding: 0.75rem; }
  .unit-metrics { grid-template-columns: 1fr; }
  .leader-card strong { font-size: var(--fs-md); }
  .present-chip { flex: 1 1 100%; max-width: none; }
  .present-chips { flex-direction: column; }
  .insight-rail { margin-inline: 0.55rem; }
  .invest-banner-metrics span,
  .sleep-banner-metrics span {
    font-size: 0.72rem;
  }
  .data-table { min-width: 520px; font-size: 0.75rem; }
  .roadmap-grid { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --fs-xs: 0.78rem;
    --fs-sm: 0.9rem;
    --fs-base: 0.98rem;
    --fs-md: 1.08rem;
    --fs-lg: 1.28rem;
    --kpi-value: 1.12rem;
    --chart-h: 205px;
    --chart-h-sm: 168px;
    --chart-h-wide: 245px;
    --chart-donut-h: 260px;
  }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .present-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-legend, .unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-leader { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #view-overview .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav-item, .insight-card, .focus-card, .unit-card, .icon-btn, .site-tab, .finding-card {
    -webkit-tap-highlight-color: rgba(26,159,148,0.15);
  }
  .filter select, .search input, .scenario-bar select, .top-tools select {
    font-size: 16px;
  }
  .present-chip, .invest-rec {
    min-height: 44px;
  }
}

/* ---- Visual Editor (Admin) ---- */
#veRoot { position: relative; z-index: 10000; }
.ve-toolbar {
  position: fixed;
  left: 50%;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  max-width: min(960px, calc(100vw - 1.2rem));
  padding: 0.55rem 0.85rem;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--neu-out);
}
.ve-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 7rem;
}
.ve-brand strong { font-family: var(--font-display); font-size: 0.95rem; }
.ve-brand span { font-size: 0.72rem; color: var(--muted); }
.ve-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ve-btn {
  border: 0;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--neu-out-xs);
}
.ve-btn:active { box-shadow: var(--neu-press); }
.ve-btn.primary {
  background: var(--bg);
  color: var(--teal);
  box-shadow: var(--neu-out-sm);
}
.ve-btn.ok {
  background: var(--bg);
  color: var(--ok);
}
.ve-btn.danger {
  background: var(--bg);
  color: var(--danger);
}
.ve-dirty {
  font-size: 0.75rem;
  color: var(--warn);
  font-weight: 700;
}
.ve-login, .ve-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 28, 0.55);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.ve-login[hidden], .ve-modal[hidden], .ve-drawer[hidden], .ve-toast[hidden] { display: none !important; }
.ve-login-card, .ve-modal-card {
  width: min(520px, 100%);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--neu-out);
}
.ve-login-card h3, .ve-modal-card h3 { margin: 0 0 0.35rem; font-family: var(--font-display); }
.ve-login-card p { margin: 0 0 0.85rem; color: var(--muted); font-size: var(--fs-sm); }
.ve-login-card label {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 0.85rem;
}
.ve-login-card input, .ve-modal-card textarea, #veSearch {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font: inherit;
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  outline: none;
  color: var(--ink);
}
.ve-login-actions, .ve-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ve-login-actions .ve-btn, .ve-modal-actions .ve-btn, .ve-drawer .ve-btn {
  color: var(--ink);
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
}
.ve-login-actions .ve-btn.primary, .ve-modal-actions .ve-btn.primary {
  color: var(--teal);
  background: var(--bg);
  box-shadow: var(--neu-out-sm);
}
.ve-err { color: #d64c42; display: block; margin-top: 0.55rem; }
.ve-modal-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.ve-modal-card code {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
}
.ve-modal-card textarea { min-height: 160px; resize: vertical; margin-bottom: 0.75rem; }
.ve-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg);
  border-left: 0;
  box-shadow: var(--neu-out);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 10001;
}
.ve-drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.ve-drawer h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.ve-field-list {
  overflow: auto;
  display: grid;
  gap: 0.4rem;
  padding-bottom: 1rem;
}
.ve-field-item {
  text-align: left;
  border: 0;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--neu-out-xs);
}
.ve-field-item.changed {
  color: var(--teal);
  box-shadow: var(--neu-in-sm);
}
.ve-field-item:active { box-shadow: var(--neu-press); }
.ve-field-item code {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.ve-field-item span {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.35;
}
.ve-toast {
  position: fixed;
  left: 50%;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 10002;
  box-shadow: var(--neu-out);
}
.ve-toast.ok { color: var(--ok); }
.ve-toast.bad { color: var(--danger); }

.ve-upload-card { width: min(640px, 100%); }
.ve-upload-lead {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  max-width: 36rem;
}
.ve-upload-meta {
  margin: 0.85rem 0;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: grid;
  gap: 0.35rem;
  box-shadow: var(--neu-in-sm);
}
.ve-upload-filechips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}
.ve-upload-filechips code {
  font-size: 0.72rem;
  background: var(--bg);
  border: 0;
  border-radius: 8px;
  padding: 0.15rem 0.4rem;
  box-shadow: var(--neu-out-xs);
}
.ve-upload-drop {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  padding: 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0.65rem;
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.ve-upload-drop input[type="file"] { font: inherit; width: 100%; }
.ve-upload-drop strong { font-size: 0.95rem; }
.ve-upload-drop span { color: var(--muted); font-size: var(--fs-sm); }
.ve-upload-picked {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 8rem;
  overflow: auto;
}
.ve-upload-picked li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--neu-out-xs);
}
.ve-upload-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 0.35rem 0 0.2rem;
  cursor: pointer;
}
.ve-upload-check input { margin-top: 0.15rem; }
.ve-upload-hint {
  display: block;
  color: var(--muted);
  margin: 0 0 0.85rem 1.55rem;
  font-size: 0.78rem;
}
.ve-upload-status {
  margin-top: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--ink);
  box-shadow: var(--neu-in-sm);
}
.ve-upload-status.busy { color: var(--teal); font-weight: 600; }

body.ve-edit-mode [data-edit-key] {
  outline: 2px dashed rgba(26, 159, 148, 0.85);
  outline-offset: 3px;
  cursor: pointer !important;
  position: relative;
}
body.ve-edit-mode [data-edit-key]:hover {
  outline-color: #c4893a;
  background: rgba(196, 137, 58, 0.08);
}
body.ve-edit-mode .insight-card,
body.ve-edit-mode .nav-item,
body.ve-edit-mode .link-view,
body.ve-edit-mode .focus-card {
  pointer-events: auto;
}
body.ve-admin .views {
  padding-bottom: 5.5rem;
}

/* —— Neumorphic polish (surfaces ที่ยังเป็นขอบแบน) —— */
.badge,
.tag-ok,
.tag-muted,
.verdict-card .badge,
.sleep-cap-chip em,
.focus-card .badge {
  border: 0 !important;
  box-shadow: var(--neu-out-xs);
  background: var(--bg);
}
.badge.pos,
.badge.neg {
  background: var(--bg);
}
.decision-card,
.findings-grid > *,
.ve-badge-item,
.ve-badge-manage,
.deep-card,
.queue-card,
.staff-impact-card {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-out-sm);
}
.share-row {
  border-bottom-color: transparent;
}
.present-act {
  border-top: 0;
}
.chart-frame canvas {
  border-radius: 10px;
}
::selection {
  background: rgba(26, 159, 148, 0.22);
  color: var(--ink);
}
/* ปุ่มหลัก/ลิงก์กด — เงานุ่ม */
button:not(.nav-item):not(.icon-btn):not(.ve-btn):not(.site-tab):not(.focus-card):not(.insight-card):not(.link-view):not(.insight-toggle),
.link-view {
  border-radius: var(--radius-sm);
}
.link-view {
  padding: 0.35rem 0.65rem;
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
}
.link-view:active {
  box-shadow: var(--neu-press);
}
input[type="search"],
input[type="text"],
input[type="password"],
select,
textarea {
  background: var(--bg);
  border: 0;
  box-shadow: var(--neu-in-sm);
  outline: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--neu-in);
}
@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .icon-btn,
  .site-tab,
  .ve-btn,
  .focus-card,
  .insight-card {
    transition: none;
  }
}