/* ITAHUKA Video Platform v5.0.3 — configurable mobile/PWA presentation */
:root {
  --it-theme-notification: #e00014;
  --it-theme-success: #11845b;
  --it-theme-warning: #d97706;
  --it-theme-logo-height: 36px;
  --it-pwa-theme-color: #fff;
  --it-pwa-background-color: #fff;
}
.site-brand img { max-height: var(--it-theme-logo-height); width: auto; }
body[data-logo-mode="wordmark"] .site-brand img { display: none; }
body[data-logo-mode="image"] .site-brand .brand-name,
body[data-logo-mode="image"] .site-brand strong { display: none; }
body[data-icon-style="solid"] .mobile-bottom-nav span,
body[data-icon-style="solid"] .public-sidebar nav a > span { font-weight: 900; }
body[data-icon-style="rounded"] .mobile-bottom-nav span,
body[data-icon-style="rounded"] .public-sidebar nav a > span { border-radius: 10px; background: var(--it-theme-surface-alt); }
.notification-badge, .header-notification-count { background: var(--it-theme-notification) !important; }
body[data-notification-badge-style="dot"] .notification-badge { width: 9px; min-width: 9px; height: 9px; padding: 0; overflow: hidden; color: transparent; }
body[data-notification-badge-style="outline"] .notification-badge { background: var(--it-theme-surface) !important; border: 2px solid var(--it-theme-notification); color: var(--it-theme-notification); }

.itahuka-splash { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: var(--it-pwa-background-color); color: var(--it-theme-text); transition: opacity .22s ease, visibility .22s ease; }
.itahuka-splash.is-leaving { opacity: 0; visibility: hidden; }
.itahuka-splash__identity { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.itahuka-splash__identity img { max-width: min(220px, 58vw); max-height: 82px; object-fit: contain; }
.itahuka-splash__identity strong { font-size: clamp(2rem, 7vw, 4.25rem); letter-spacing: .04em; }
.itahuka-splash__identity span { color: var(--it-theme-muted); font-weight: 700; }
.itahuka-splash__identity i { width: 28px; height: 28px; margin-top: 16px; border: 3px solid color-mix(in srgb, var(--it-theme-live) 20%, transparent); border-top-color: var(--it-theme-live); border-radius: 50%; animation: it-v5-spin .7s linear infinite; }
body[data-pwa-splash-style="identity-dark"] .itahuka-splash { background: #070b11; color: #fff; }
body[data-pwa-splash-style="minimal"] .itahuka-splash__identity span { display: none; }
@keyframes it-v5-spin { to { transform: rotate(360deg); } }

.v5-install-sheet { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 99999; width: min(620px, calc(100% - 24px)); display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--it-theme-border); border-radius: 18px; background: var(--it-theme-surface); color: var(--it-theme-text); box-shadow: 0 18px 55px rgba(2,8,23,.22); transform: translate(-50%, 140%); opacity: 0; transition: .3s ease; }
.v5-install-sheet.is-visible { transform: translate(-50%, 0); opacity: 1; }
.v5-install-sheet__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--it-theme-live); color: #fff; font-size: 22px; }
.v5-install-sheet__copy { display: grid; gap: 3px; }
.v5-install-sheet__copy span { color: var(--it-theme-muted); font-size: .9rem; }
.v5-install-sheet__actions { display: flex; gap: 8px; }
.v5-install-sheet button { min-height: 44px; border-radius: 10px; border: 1px solid var(--it-theme-border); padding: 0 16px; font-weight: 800; background: var(--it-theme-surface); color: var(--it-theme-text); }
.v5-install-sheet [data-v5-install-now] { background: var(--it-theme-live); border-color: var(--it-theme-live); color: #fff; }

body[data-player-style="engagement"] .watch-actions,
body[data-player-style="broadcast"] .watch-actions { position: relative; }
body[data-player-style="cinema"] .public-sidebar { display: none; }
body[data-schedule-style^="timeline"] .schedule-list,
body[data-schedule-style^="timeline"] .schedule-day-list { border-left: 2px solid var(--it-theme-border); margin-left: 10px; padding-left: 14px; }
body[data-schedule-style^="timeline"] .schedule-item,
body[data-schedule-style^="timeline"] .schedule-row { position: relative; }
body[data-schedule-style^="timeline"] .schedule-item::before,
body[data-schedule-style^="timeline"] .schedule-row::before { content: ""; position: absolute; left: -20px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--it-theme-surface); border: 3px solid var(--it-theme-live); }
body[data-chat-style="hero"] .chat-panel,
body[data-chat-style="community"] .chat-panel { border-top: 3px solid var(--it-theme-live); }
body[data-library-style="smart"] .library-card,
body[data-library-style="productivity"] .video-library-card { border-radius: var(--it-theme-radius); }

@media (max-width: 720px) {
  .v5-install-sheet { grid-template-columns: 44px 1fr; }
  .v5-install-sheet__actions { grid-column: 1 / -1; }
  .v5-install-sheet__actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .itahuka-splash__identity i { animation-duration: 1.5s; } .v5-install-sheet,.itahuka-splash { transition: none; } }

/* ========================================================================== 
   v5.0.3 Mobile PWA theme family
   The approved default is Mobile PWA — ITAHUKA Red: white surfaces,
   true black typography and ITAHUKA red interaction states.
   ========================================================================== */
body[data-theme^="itahuka-mobile-"] {
  color: var(--it-theme-text) !important;
  background: var(--it-theme-bg) !important;
  font-size: var(--it-theme-body-size);
  line-height: var(--it-theme-line-height);
}
body[data-theme="itahuka-mobile-pwa-red"] { color-scheme: light; }
body[data-theme^="itahuka-mobile-"] .site-header,
body[data-theme^="itahuka-mobile-"] .site-header .nav-shell,
body[data-theme^="itahuka-mobile-"] .mobile-bottom-nav,
body[data-theme^="itahuka-mobile-"] .it-live-player-card,
body[data-theme^="itahuka-mobile-"] .it-live-guide,
body[data-theme^="itahuka-mobile-"] .it-community-chat,
body[data-theme^="itahuka-mobile-"] .panel,
body[data-theme^="itahuka-mobile-"] .video-card,
body[data-theme^="itahuka-mobile-"] .library-card {
  background: var(--it-theme-surface) !important;
  color: var(--it-theme-text) !important;
  border-color: var(--it-theme-border) !important;
}
body[data-theme^="itahuka-mobile-"] .site-header .brand,
body[data-theme^="itahuka-mobile-"] .site-header .brand-name,
body[data-theme^="itahuka-mobile-"] .site-header strong,
body[data-theme^="itahuka-mobile-"] .public-sidebar a,
body[data-theme^="itahuka-mobile-"] .mobile-bottom-nav a,
body[data-theme^="itahuka-mobile-"] h1,
body[data-theme^="itahuka-mobile-"] h2,
body[data-theme^="itahuka-mobile-"] h3,
body[data-theme^="itahuka-mobile-"] h4,
body[data-theme^="itahuka-mobile-"] strong {
  color: var(--it-theme-text);
}
body[data-theme^="itahuka-mobile-"] .mobile-bottom-nav a.is-active,
body[data-theme^="itahuka-mobile-"] .mobile-bottom-nav a[aria-current="page"],
body[data-theme^="itahuka-mobile-"] .public-sidebar a.active,
body[data-theme^="itahuka-mobile-"] .is-live,
body[data-theme^="itahuka-mobile-"] .live-label,
body[data-theme^="itahuka-mobile-"] .live-dot {
  color: var(--it-theme-live) !important;
}
body[data-theme^="itahuka-mobile-"] .button,
body[data-theme^="itahuka-mobile-"] .button-primary,
body[data-theme^="itahuka-mobile-"] .it-chat-send,
body[data-theme^="itahuka-mobile-"] [data-schedule-reminder].is-active {
  background: var(--it-theme-accent) !important;
  border-color: var(--it-theme-accent) !important;
  color: var(--it-theme-accent-contrast) !important;
}
body[data-theme^="itahuka-mobile-"] .button-secondary,
body[data-theme^="itahuka-mobile-"] .it-live-action,
body[data-theme^="itahuka-mobile-"] .it-chat-message__meta button {
  background: var(--it-theme-surface) !important;
  border-color: var(--it-theme-border) !important;
  color: var(--it-theme-text) !important;
}
body[data-theme^="itahuka-mobile-"] .notification-badge,
body[data-theme^="itahuka-mobile-"] .header-notification-count {
  background: var(--it-theme-notification) !important;
  color: #fff !important;
}

/* Correct the historical generic chat rule that painted the active tab solid
   red and made its label disappear. Mobile PWA tabs use the approved red
   underline with black/red readable text. */
body[data-theme^="itahuka-mobile-"] .it-live-chat-column .it-community-chat--functional .it-community-chat__tabs,
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__tabs {
  background: var(--it-theme-surface) !important;
  border-color: var(--it-theme-border) !important;
}
body[data-theme^="itahuka-mobile-"] .it-live-chat-column .it-community-chat--functional .it-community-chat__tabs button,
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__tabs button {
  min-height: 48px;
  background: var(--it-theme-surface) !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  color: var(--it-theme-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
body[data-theme^="itahuka-mobile-"] .it-live-chat-column .it-community-chat--functional .it-community-chat__tabs button.is-active,
body[data-theme^="itahuka-mobile-"] .it-live-chat-column .it-community-chat--functional .it-community-chat__tabs [aria-selected="true"],
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__tabs button.is-active,
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__tabs [aria-selected="true"] {
  background: var(--it-theme-surface) !important;
  border-bottom-color: var(--it-theme-accent) !important;
  color: var(--it-theme-accent) !important;
}
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__pinned {
  background: var(--it-theme-surface-alt) !important;
  border-color: var(--it-theme-border) !important;
}
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__pinned p,
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message p,
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message__body header > strong {
  color: var(--it-theme-text) !important;
}
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message.is-official {
  background: color-mix(in srgb,var(--it-theme-accent) 5%,var(--it-theme-surface)) !important;
  border-color: color-mix(in srgb,var(--it-theme-accent) 52%,var(--it-theme-border)) !important;
}
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-role.is-host {
  background: var(--it-theme-accent) !important;
  color: #fff !important;
}
body[data-theme^="itahuka-mobile-"] .it-community-chat--functional textarea {
  background: var(--it-theme-surface) !important;
  color: var(--it-theme-text) !important;
  border-color: var(--it-theme-border) !important;
}

/* Mobile-first spacing and visual hierarchy based on the approved concept. */
@media (max-width: 900px) {
  body[data-theme^="itahuka-mobile-"] .site-header .nav-shell { min-height: 58px; height: 58px; }
  body[data-theme^="itahuka-mobile-"] .public-content { margin-left: 0 !important; }
  body[data-theme^="itahuka-mobile-"] .page-space { padding-top: 4px !important; }
  body[data-theme^="itahuka-mobile-"] .page-space > .container { width: 100% !important; padding-inline: 0 !important; }
  body[data-theme^="itahuka-mobile-"] .it-live-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body[data-theme^="itahuka-mobile-"] .it-live-player-card,
  body[data-theme^="itahuka-mobile-"] .it-live-guide,
  body[data-theme^="itahuka-mobile-"] .it-community-chat { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
  body[data-theme^="itahuka-mobile-"] .it-live-program-meta { padding: 14px 12px !important; }
  body[data-theme^="itahuka-mobile-"] .it-live-action { min-height: 46px; color: var(--it-theme-text) !important; font-weight: 850; }
  body[data-theme^="itahuka-mobile-"] .schedule-day,
  body[data-theme^="itahuka-mobile-"] .schedule-filter,
  body[data-theme^="itahuka-mobile-"] .schedule-daypart { min-height: 44px; }
  body[data-theme^="itahuka-mobile-"] .schedule-day.is-active,
  body[data-theme^="itahuka-mobile-"] .schedule-filter.is-active,
  body[data-theme^="itahuka-mobile-"] .schedule-daypart.is-active {
    background: var(--it-theme-accent) !important;
    border-color: var(--it-theme-accent) !important;
    color: #fff !important;
  }
  body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message p { font-size: 16px !important; line-height: 1.52; }
  body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message__body header > strong { font-size: 14px !important; }
  body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-chat-message__meta button { min-height: 34px; font-size: 12px !important; }
  body[data-theme^="itahuka-mobile-"] .it-community-chat--functional .it-community-chat__pinned p { font-size: 14px; line-height: 1.5; }
}

/* Theme-specific identity adjustments. */
body[data-theme="itahuka-mobile-newsroom"] .it-live-player-card,
body[data-theme="itahuka-mobile-newsroom"] .site-header { border-radius: 0 !important; }
body[data-theme="itahuka-mobile-community"] .it-community-chat--functional .it-chat-message.is-official { box-shadow: inset 3px 0 0 var(--it-theme-accent); }
body[data-theme="itahuka-mobile-utility"] .video-card,
body[data-theme="itahuka-mobile-utility"] .library-card { box-shadow: none !important; }
body[data-theme="itahuka-mobile-focus"] .it-live-program-meta { border-radius: 0 !important; }


/* v5.0.3 universal chat-tab readability guard.
   This also fixes legacy/default desktop themes while preserving each
   preset's token colors. Active tabs use an accent underline, never a
   solid fill that hides the label. */
.it-community-chat--functional .it-community-chat__tabs {
  background: var(--it-theme-surface, #fff) !important;
  border-color: var(--it-theme-border, #dedfe3) !important;
}
.it-community-chat--functional .it-community-chat__tabs button {
  min-height: 48px;
  background: var(--it-theme-surface, #fff) !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  color: var(--it-theme-text, #111) !important;
  font-weight: 850 !important;
}
.it-community-chat--functional .it-community-chat__tabs button.is-active,
.it-community-chat--functional .it-community-chat__tabs [aria-selected="true"] {
  background: var(--it-theme-surface, #fff) !important;
  border-bottom-color: var(--it-theme-accent, #e60017) !important;
  color: var(--it-theme-accent, #e60017) !important;
}