/* =========================================================
   pensoia-header  (web component)
   Shared responsive topbar + info modal used by the public
   pages (go/index.html and go/display.html).

   The component renders its own DOM in light DOM, so these
   rules target `pensoia-header` descendants directly. All
   colors reference the theme tokens from theme.css.

   Responsive strategy: mobile-first with clamp() everywhere
   so the same component scales from 360px phone to a 120"
   projector. The [mode="display"] attribute scales key
   sizes up one tier for large-room viewing.
   ========================================================= */

pensoia-header {
  display: block;
  width: 100%;
}

/* ---------- topbar row ---------- */

pensoia-header .ph-bar {
  display: grid;
  grid-template-columns: 1fr auto max-content;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  padding: clamp(8px, 1.4vh, 14px) clamp(14px, 2.4vw, 28px);
  background: var(--background);
}

pensoia-header .ph-left {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
}

pensoia-header .ph-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 1vw, 12px);
}

pensoia-header .ph-logo {
  font-size: clamp(0.88rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary);
  flex-shrink: 0;
}

/* ---------- brand logo link (Trail student + validar header) ----------
   The Codex Trail header renders the PensoIA glyph-wordmark as inline SVG and
   wraps it in a link to pensoia.com. Two marks are emitted: navy-ink for the
   light theme, white-ink for the dark theme; CSS shows one per active theme.
   The legacy go/ pages keep the text .ph-logo above, so these rules (which match
   only the SVG marks) stay inert there. */
pensoia-header a.ph-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

pensoia-header .ph-logo-mark {
  align-items: center;
}

pensoia-header .ph-logo-mark svg {
  height: clamp(22px, 3vw, 28px);
  width: auto;
  display: block;
}

pensoia-header[mode="display"] .ph-logo-mark svg {
  height: clamp(28px, 3.5vw, 42px);
}

pensoia-header .ph-logo-light { display: inline-flex; }
pensoia-header .ph-logo-dark  { display: none; }
[data-theme="dark"] pensoia-header .ph-logo-light { display: none; }
[data-theme="dark"] pensoia-header .ph-logo-dark  { display: inline-flex; }

pensoia-header .ph-title {
  min-width: 0;
  font-size: clamp(0.86rem, 1.4vw, 1.05rem);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---------- action button (generic pill, used for trilha WhatsApp/ClassPulse) ---------- */

pensoia-header .ph-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: clamp(6px, 1vh, 9px) clamp(10px, 1.4vw, 14px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}

pensoia-header .ph-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

pensoia-header .ph-action-btn:active {
  transform: scale(0.97);
}

pensoia-header .ph-action-btn svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

pensoia-header .ph-action-btn .ph-label-mobile { display: none; }

@media (max-width: 560px) {
  pensoia-header .ph-action-btn span { display: none; }
  pensoia-header .ph-action-btn .ph-label-mobile { display: inline; }
  pensoia-header .ph-action-btn { padding: 8px 10px; }
}

/* ---------- code button (QR glyph + code text) ---------- */

pensoia-header .ph-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.4vw, 14px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}

pensoia-header .ph-code-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

pensoia-header .ph-code-btn:active {
  transform: scale(0.97);
}

pensoia-header .ph-qr-glyph {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

pensoia-header .ph-code-text {
  font-variant-numeric: tabular-nums;
}

/* Hide when no code is set */
pensoia-header:not([code]) .ph-code-btn,
pensoia-header[code=""] .ph-code-btn {
  display: none;
}

/* ---------- zoom controls ---------- */

pensoia-header .ph-zoom {
  display: none;
  gap: 4px;
  flex-shrink: 0;
}

/* Projector display only — NOT the student trilha (Élder: the A−/A+ belong on the display). */
pensoia-header[mode="display"] .ph-zoom {
  display: flex;
}

pensoia-header .ph-zoom-btn {
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
}

pensoia-header .ph-zoom-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- theme button ---------- */

pensoia-header .ph-theme-btn {
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

pensoia-header .ph-theme-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- exit button ---------- */

pensoia-header .ph-exit-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 6px 8px;
  flex-shrink: 0;
}

pensoia-header .ph-exit-btn:hover {
  color: var(--text-primary);
}

pensoia-header:not([exitable]) .ph-exit-btn {
  display: none;
}

/* ---------- display-mode scale bump ---------- */

pensoia-header[mode="display"] .ph-bar {
  padding: clamp(10px, 1.8vh, 22px) clamp(20px, 3vw, 48px);
}

pensoia-header[mode="display"] .ph-title {
  font-size: clamp(1.1rem, 2vw, 2rem);
}

pensoia-header[mode="display"] .ph-logo {
  font-size: clamp(0.9rem, 1.4vw, 1.3rem);
}

/* Display mode modal: fullscreen, two-column, readable from 20m away.
   Row 1: label spans full width (centered).
   Row 2 left: square QR code. Row 2 right: URL + code stacked via .ph-modal-info flex wrapper.
   Student modal stays flex column (no grid). */

pensoia-header[mode="display"] .ph-modal-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "label label"
    "qr    info";
  align-items: center;
  justify-items: center;
  width: min(96vw, 1300px);
  max-width: 96vw;
  max-height: 96vh;
  padding: clamp(36px, 5vmin, 64px) clamp(40px, 6vw, 80px);
  column-gap: clamp(32px, 6vw, 80px);
  row-gap: clamp(12px, 2.5vmin, 28px);
}

/* Vertical divider */
pensoia-header[mode="display"] .ph-modal-card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 8%;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}

pensoia-header[mode="display"] .ph-modal-close {
  width: 52px;
  height: 52px;
  font-size: 2.4rem;
}

/* Label: full-width centered header */
pensoia-header[mode="display"] .ph-modal-label {
  grid-area: label;
  justify-self: center;
  font-size: clamp(2.4rem, 5.5vmin, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-primary);
}

/* QR: square, fills the left column */
pensoia-header[mode="display"] .ph-modal-qr {
  grid-area: qr;
  align-self: center;
  justify-self: center;
  width: min(clamp(300px, 55vmin, 640px), 100%);
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Info wrapper: vertically centers URL + code as a pair in the right column */
pensoia-header[mode="display"] .ph-modal-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vmin, 16px);
}

pensoia-header[mode="display"] .ph-modal-url {
  align-self: auto;
  justify-self: auto;
  text-align: center;
  font-size: clamp(3.2rem, 8vmin, 8rem);
  font-weight: 700;
  color: var(--primary);
}

pensoia-header[mode="display"] .ph-modal-code {
  align-self: auto;
  justify-self: auto;
  text-align: center;
  font-size: clamp(6rem, 16vmin, 14rem);
  letter-spacing: 0.35em;
}

/* ---------- tight screens: drop title ---------- */

@media (max-width: 480px) {
  pensoia-header:not([mode="display"]) .ph-title {
    display: none;
  }
}

/* ---------- narrow phones: tighten ph-right ---------- */

@media (max-width: 480px) {
  pensoia-header[mode="student"] .ph-right {
    gap: 6px;
  }
  pensoia-header[mode="student"] .ph-code-btn {
    padding: 5px 8px;
    font-size: 0.88rem;
    gap: 4px;
  }
  pensoia-header[mode="student"] .ph-qr-glyph {
    display: none;
  }
}

/* =========================================================
   Info modal (lives inside the component)
   ========================================================= */

pensoia-header .ph-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ph-fade-in 0.18s ease-out;
}

pensoia-header .ph-modal[hidden] {
  display: none;
}

@keyframes ph-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

pensoia-header .ph-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

pensoia-header .ph-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: clamp(14px, 2vmin, 22px);
  padding: clamp(24px, 4vmin, 48px) clamp(28px, 5vmin, 60px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vmin, 26px);
  max-width: min(94vw, 620px);
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  animation: ph-card-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.18);
}

@keyframes ph-card-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

pensoia-header .ph-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

pensoia-header .ph-modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

pensoia-header .ph-modal-label {
  font-size: clamp(0.7rem, 1.4vmin, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

pensoia-header .ph-modal-qr {
  width: clamp(220px, 42vmin, 440px);
  height: clamp(220px, 42vmin, 440px);
  max-width: 100%;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

pensoia-header .ph-modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vmin, 14px);
}

pensoia-header .ph-modal-code {
  font-size: clamp(3rem, 9vmin, 5.75rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

pensoia-header .ph-modal-url {
  font-size: clamp(1rem, 2.4vmin, 1.6rem);
  color: var(--text-secondary);
  font-weight: 500;
}