/* Display scale — ระบบสเกลชั้นเดียวสำหรับจอแสดงผล (wall / globe / live / ransomware / killchain / brief kiosk)
   จุดอ้างอิง: 1920×1080 = scale 1.0 — ค่าฐานทุกตัวคือขนาดที่เห็นจริงบน FHD
   จอเล็กกว่า 1536×864 ล็อกที่ 0.8, จอ 4K/2160 ไหลถึง 2.0
   ตัวคูณทำงานเฉพาะจอ ≥1360×768 — ต่ำกว่านั้น base CSS + media เดิมของแต่ละหน้าทำงานเอง */

:root {
  /* หมายเหตุ CSS: clamp/min ห้ามผสม number กับ length —
     คำนวณเป็น length (px) ก่อน แล้วแปลงเป็น number ด้วย tan(atan2()) */
  --display-scale-px: clamp(0.8px, min(100vw / 1920, 100vh / 1080), 2px);
  /* fallback สำหรับ Chromium < M111 (CefSharp เก่า) — override เมื่อรองรับ trig */
  --display-scale: 1;
  --display-scale: tan(atan2(var(--display-scale-px), 1px));
  --display-font: calc(24px * var(--display-scale));

  /* แบรนด์ TCS-CERT — ใช้ทุกขนาดจอ (มี floor/ceiling ในตัวผ่าน clamp)
     FHD: ชื่อ ~36px, สับ ~19px, โลโก้นกฮูก ~80px (ไม่มีกรอบ) */
  --header-brand-name: clamp(20px, calc(36px * var(--display-scale)), 72px);
  --header-brand-sub: clamp(13px, calc(19px * var(--display-scale)), 38px);
  --header-brand-text-block: calc(
    var(--header-brand-name) * 1.1 + var(--header-brand-sub) * 1.35 + 4px
  );
  /* โลโก้เต็มรูป ไม่มีกรอบ: FHD 80px, มือถือ ≥52px, 4K ≤148px */
  --header-brand-mark: min(
    clamp(52px, calc(80px * var(--display-scale)), 148px),
    calc(var(--header-brand-text-block) * 1.45)
  );
}

/* ==================================================================
   ตัวคูณ scale — เฉพาะจอใหญ่ ป้องกันชนกับ mobile/tablet media เดิม
   ================================================================== */
@media (min-width: 1360px) and (min-height: 768px) {
  html.display-videowall {
    font-size: var(--display-font);
  }

  /* --- Wall --- */
  .wall-page .wall-grid {
    grid-template-rows:
      calc(104px * var(--display-scale)) minmax(0, 1fr)
      calc(191px * var(--display-scale)) calc(160px * var(--display-scale));
  }

  .wall-page .wall-panel__head {
    font-size: max(14px, calc(19px * var(--display-scale)));
  }

  .wall-page .wall-clock time {
    font-size: calc(44px * var(--display-scale));
  }

  .wall-page .wall-clock span {
    font-size: max(13px, calc(20px * var(--display-scale)));
  }

  .wall-page .wall-kpi__num {
    font-size: calc(clamp(64px, 4.9vw, 75px) * var(--display-scale));
  }

  .wall-page .wall-kpi__label {
    font-size: max(13px, calc(20px * var(--display-scale)));
  }

  .wall-page .wall-feed__row {
    font-size: max(14px, calc(22px * var(--display-scale)));
  }

  .wall-page .wall-spotlight__name {
    font-size: calc(clamp(38px, 3.2vw, 49px) * var(--display-scale));
  }

  .wall-page .wall-node text {
    font-size: calc(25px * var(--display-scale));
    stroke-width: calc(6px * var(--display-scale));
  }

  /* --- Globe (ตัวอักษร px ใน globe.css — สเกลเชิงเส้น: 4K = FHD × display-scale) --- */
  body.globe-page {
    --globe-mult: calc(var(--display-scale) * 1.8);
    --globe-ui-mult: calc(var(--display-scale) * 1.4);
    --globe-stat-mult: calc(var(--display-scale) * 1.3);
    --globe-caption-mult: calc(var(--display-scale) * 1.3);
    --globe-stats-band: calc(88px * var(--display-scale));
    --globe-header-band: calc(80px * var(--display-scale));
    --globe-spotlight-gap: calc(10px * var(--display-scale));
    font-size: calc(20px * var(--display-scale));
  }

  .globe-page .globe-app {
    min-height: 0;
  }

  .globe-page .scene-caption {
    max-width: min(calc(480px * var(--display-scale)), 26vw);
    bottom: calc(
      var(--edge) + var(--globe-stats-band) + calc(12px * var(--display-scale))
    );
  }

  .globe-page .spotlight-card {
    width: min(calc(400px * var(--display-scale)), 32vw);
    max-height: calc(
      100dvh - var(--edge) - var(--globe-header-band) - var(--globe-spotlight-gap, 0px) -
      var(--edge) - var(--globe-stats-band)
    );
  }

  .globe-page .globe-stat:not(.globe-stat--scene) {
    flex: 0 1 auto;
    max-width: min(calc(220px * var(--display-scale)), 14vw);
  }

  .globe-page .globe-stat--scene {
    max-width: min(calc(360px * var(--display-scale)), 30vw);
  }

  .globe-page .globe-clock time {
    font-size: calc(26px * var(--globe-ui-mult));
  }

  .globe-page .globe-clock span {
    font-size: calc(12px * var(--globe-ui-mult));
  }

  .globe-page .scene-caption__kicker {
    font-size: calc(13px * var(--globe-caption-mult));
  }

  .globe-page .scene-caption__title {
    font-size: calc(clamp(15px, 1.5vw, 22px) * var(--globe-caption-mult));
  }

  .globe-page .scene-caption__detail {
    font-size: calc(15px * var(--globe-caption-mult));
  }

  .globe-page .spotlight-card__eyebrow {
    font-size: calc(11px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card h2 {
    font-size: calc(22px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__aliases {
    font-size: calc(12px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__block h3 {
    font-size: calc(11px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__chips li {
    font-size: calc(11px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__list {
    font-size: calc(12.5px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__meta strong {
    font-size: calc(18px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__meta span {
    font-size: calc(11px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__latest {
    font-size: calc(12px * var(--globe-ui-mult));
  }

  .globe-page .spotlight-card__latest-label {
    font-size: calc(10px * var(--globe-ui-mult));
  }

  .globe-page .globe-stat strong {
    font-size: calc(clamp(22px, 1.35vw, 30px) * var(--globe-stat-mult));
  }

  .globe-page .globe-stat--scene strong {
    font-size: calc(clamp(16px, 1.15vw, 22px) * var(--globe-stat-mult));
  }

  .globe-page .globe-stat span {
    font-size: calc(12px * var(--globe-stat-mult));
  }

  .globe-page .globe-stat--scene span {
    font-size: calc(11px * var(--globe-stat-mult));
  }

  .globe-page .globe-help {
    font-size: calc(11px * var(--globe-stat-mult));
  }

  .globe-page .globe-help kbd {
    font-size: calc(10px * var(--globe-stat-mult));
  }

  @media (min-width: 3600px) and (min-height: 2000px) {
    .globe-page .globe-help {
      display: none;
    }
  }

  /* --- Live --- */
  body.live-page {
    font-size: var(--display-font);
  }

  .live-page .live-app {
    min-height: 0;
  }

  .live-page .live-clock time {
    font-size: calc(32px * var(--display-scale));
  }

  .live-page .live-clock span {
    font-size: max(12px, calc(17px * var(--display-scale)));
  }

  .live-page .scene-caption__kicker {
    font-size: max(13px, calc(17px * var(--display-scale)));
  }

  .live-page .live-stat strong {
    font-size: calc(clamp(32px, 2.9vw, 41px) * var(--display-scale));
  }

  .live-page .live-stat span {
    font-size: max(13px, calc(18px * var(--display-scale)));
  }

  .live-page .live-help {
    font-size: max(12px, calc(16px * var(--display-scale)));
  }

  .live-page .constellation text {
    font-size: calc(22px * var(--display-scale));
  }

  /* --- Ransomware --- */
  .ransomware-page {
    font-size: var(--display-font);
  }

  .ransomware-page .ransomware-app {
    grid-template-rows:
      calc(157px * var(--display-scale)) minmax(0, 1fr)
      calc(78px * var(--display-scale));
    grid-template-columns: minmax(0, 2.15fr) minmax(calc(520px * var(--display-scale)), 0.85fr);
  }

  .ransomware-page .ransomware-feed__heading h1 {
    font-size: calc(clamp(30px, 3vw, 41px) * var(--display-scale));
  }

  .ransomware-page .feed-state {
    font-size: max(13px, calc(19px * var(--display-scale)));
  }

  .ransomware-page .ticker-card {
    font-size: calc(22px * var(--display-scale));
  }

  .ransomware-page .ticker-card__group {
    font-size: calc(clamp(32px, 2.3vw, 39px) * var(--display-scale));
  }

  .ransomware-page .ticker-card__victim {
    font-size: calc(clamp(38px, 3vw, 52px) * var(--display-scale));
  }

  .ransomware-page .ticker-card__meta {
    font-size: max(14px, calc(20px * var(--display-scale)));
  }

  .ransomware-page .insights-label {
    font-size: max(13px, calc(20px * var(--display-scale)));
  }

  .ransomware-page .insight-card strong {
    font-size: calc(clamp(46px, 4.4vw, 64px) * var(--display-scale));
  }

  .ransomware-page .insight-card span {
    font-size: max(14px, calc(23px * var(--display-scale)));
  }

  .ransomware-page .insight-card small {
    font-size: max(12px, calc(19px * var(--display-scale)));
  }

  .ransomware-page .country-spotlight__country {
    font-size: calc(clamp(17px, 1.6vw, 24px) * var(--display-scale));
  }

  .ransomware-page .country-spotlight__victim {
    font-size: max(12px, calc(16px * var(--display-scale)));
  }

  .ransomware-page .ransomware-footer {
    font-size: max(13px, calc(18px * var(--display-scale)));
  }

  /* --- Kill-chain river --- */
  body.killchain-page {
    font-size: var(--display-font);
    --kc-stats-band: calc(112px * var(--display-scale));
    --kc-header-band: calc(96px * var(--display-scale));
  }

  .killchain-page .kc-clock time {
    font-size: calc(28px * var(--display-scale));
  }

  .killchain-page .kc-clock span {
    font-size: max(12px, calc(13px * var(--display-scale)));
  }

  .killchain-page .kc-caption__kicker {
    font-size: max(12px, calc(13px * var(--display-scale)));
  }

  .killchain-page .kc-caption__title {
    font-size: calc(clamp(28px, 3.2vw, 44px) * var(--display-scale));
  }

  .killchain-page .kc-caption__detail {
    font-size: max(14px, calc(18px * var(--display-scale)));
  }

  .killchain-page .kc-phase__count {
    font-size: calc(clamp(16px, 1.6vw, 26px) * var(--display-scale));
  }

  .killchain-page .kc-phase__label {
    font-size: max(12px, calc(16px * var(--display-scale)));
  }

  .killchain-page .kc-phase__slug {
    font-size: max(10px, calc(12px * var(--display-scale)));
  }

  .killchain-page .kc-spotlight h2 {
    font-size: calc(clamp(22px, 2vw, 30px) * var(--display-scale));
  }

  .killchain-page .kc-spotlight__meta strong {
    font-size: calc(22px * var(--display-scale));
  }

  .killchain-page .kc-stat strong {
    font-size: calc(clamp(24px, 2.4vw, 36px) * var(--display-scale));
  }

  .killchain-page .kc-stat span {
    font-size: max(12px, calc(13px * var(--display-scale)));
  }

  .killchain-page .kc-help {
    font-size: max(11px, calc(12px * var(--display-scale)));
  }

  .killchain-page .kc-help kbd {
    font-size: max(10px, calc(11px * var(--display-scale)));
  }

  @media (min-width: 3600px) and (min-height: 2000px) {
    .killchain-page .kc-help {
      display: none;
    }
  }

  /* --- Brief kiosk — สเกลตามจอ videowall --- */
  body.brief-kiosk .brief-page {
    --bfs: min(1.8, calc(1.6 * var(--display-scale, 1)));
    font-size: calc(1rem * var(--bfs, 1));
  }

  body.brief-kiosk .brief-kpi__card strong {
    font-size: calc(clamp(1.75rem, 4vw, 2.5rem) * var(--display-scale, 1) * 1.23);
  }
}

/* ==================================================================
   Brief kiosk chrome — compact strip (ทุกขนาดจอที่เข้าโหมด ?wall=1)
   ================================================================== */
body.brief-kiosk .header {
  min-height: 0 !important;
  padding: 6px 16px !important;
}

body.brief-kiosk .header-banner {
  display: flex !important;
  align-items: center !important;
  padding: 4px 0 !important;
}

body.brief-kiosk nav#menu,
body.brief-kiosk .header-tagline-center,
body.brief-kiosk .logo-tagline,
body.brief-kiosk .footer {
  display: none !important;
}

body.brief-kiosk main.main {
  padding-top: 0.5rem !important;
  overflow-y: auto !important;
  max-width: none !important;
}

body.brief-kiosk .main-grid-container.brief-grid {
  max-width: none !important;
}

body.brief-kiosk .brief-fontsize,
body.brief-kiosk .brief-actions,
body.brief-kiosk .brief-footer,
body.brief-kiosk .brief-panel--ransom,
body.brief-kiosk .cve-subnav {
  display: none !important;
}

body.brief-kiosk .page-header.brief-header .page-description {
  display: none;
}

/* --- Stage (Live ↔ Wall shell) — iframe ลูกสเกลเอง --- */
@media (min-width: 1360px) and (min-height: 768px) {
  html.display-videowall body.stage-page {
    font-size: var(--display-font);
  }
}