/* CTL — Frost Dynasty. Shared public and command visual system. */
html { min-height: 100%; background: var(--ctl-void); scroll-padding-top: 88px; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ctl-text);
  background:
    radial-gradient(circle at 78% 4%, rgba(20, 84, 200, .15), transparent 31%),
    radial-gradient(circle at 8% 72%, rgba(104, 29, 39, .08), transparent 24%),
    linear-gradient(145deg, var(--ctl-void), var(--ctl-abyss) 48%, #020711);
  font-family: var(--font-interface);
}
body::before {
  background:
    linear-gradient(rgba(115, 204, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 204, 255, .014) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 94%);
  opacity: 1;
}
body::after {
  background-image: url("../images/patterns/frost-cartography.10770b7800ad.svg");
  background-position: center 18%;
  background-size: min(92vw, 1400px) auto;
  background-repeat: no-repeat;
  color: var(--ctl-frost);
  opacity: .045;
}
a, button, input, select, textarea, summary { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--ctl-frost); }
::selection { color: var(--ctl-void); background: var(--ctl-ice); }

.page-shell, .premium-shell, .ctl-shell {
  width: min(var(--ctl-content), calc(100% - clamp(24px, 5vw, 76px)));
  margin-inline: auto;
}
.home-premium .premium-shell { width: min(var(--ctl-content), calc(100% - clamp(24px, 5vw, 76px))); padding-inline: 0; }

/* Unified navigation */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border: 1px solid var(--ctl-bronze-bright);
  background: var(--ctl-void);
  color: var(--ctl-ivory);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Standalone legacy templates still render their historical utility bar.
   The shared Frost navigation supersedes it without changing page logic. */
.profile-topbar:has(~ .ctl-navbar),
.profile-topbar:has(~ .skip-link) { display: none; }

.ctl-navbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center;
  min-height: 76px;
  padding: 0 clamp(16px, 2.6vw, 34px);
  border: 1px solid rgba(115, 204, 255, .12);
  border-top: 0;
  background: linear-gradient(90deg, rgba(2, 8, 20, .97), rgba(5, 20, 39, .94));
  box-shadow: 0 18px 50px rgba(0, 4, 14, .34);
  backdrop-filter: blur(18px) saturate(130%);
  transition: min-height var(--motion-normal) var(--ease-premium), background var(--motion-normal) ease;
}
.ctl-navbar.is-compact { min-height: 62px; background: rgba(2, 8, 20, .98); }
.ctl-brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.ctl-brand__crest {
  position: relative;
  display: grid;
  width: 43px; height: 43px;
  flex: none;
  place-items: center;
  color: var(--ctl-ice);
  border: 1px solid var(--ctl-bronze);
  background: linear-gradient(145deg, rgba(17, 41, 69, .94), rgba(3, 11, 24, .98));
  box-shadow: inset 0 0 18px rgba(115, 204, 255, .12), 0 0 22px rgba(115, 204, 255, .08);
  transform: rotate(45deg);
}
.ctl-brand__crest::before { content: ""; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50% 50% 44% 44%; transform: rotate(-45deg); clip-path: polygon(8% 8%, 45% 18%, 50% 0, 55% 18%, 92% 8%, 82% 54%, 50% 100%, 18% 54%); background: currentColor; opacity: .9; }
.ctl-brand__crest img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; transform: rotate(-45deg); border-radius: 4px; }
.ctl-brand__copy { min-width: 0; }
.ctl-brand__copy strong { display: block; color: var(--ctl-ivory); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .16em; line-height: 1; }
.ctl-brand__copy small { display: block; margin-top: 5px; color: var(--ctl-bronze-bright); font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ctl-navbar__public { display: flex; min-width: 0; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 27px); }
.ctl-navbar__public a, .ctl-navbar__tools a, .ctl-navbar__tools button {
  position: relative;
  color: var(--ctl-steel);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color var(--motion-fast) ease;
}
.ctl-navbar__public a::after {
  content: "";
  position: absolute;
  right: 50%; bottom: -10px; left: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--ctl-frost), var(--ctl-bronze));
  transition: inset var(--motion-normal) var(--ease-premium);
}
.ctl-navbar__public a:hover, .ctl-navbar__public a.is-active, .ctl-navbar__tools a:hover, .ctl-navbar__tools button:hover { color: var(--ctl-ivory); }
.ctl-navbar__public a:hover::after, .ctl-navbar__public a.is-active::after { right: 0; left: 0; }
.ctl-navbar__tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.ctl-navbar__tool {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--ctl-border-soft);
  background: rgba(6, 22, 42, .42);
}
.ctl-navbar__tool--primary { color: var(--ctl-bronze-bright) !important; border-color: color-mix(in srgb, var(--ctl-bronze) 50%, transparent); }
.ctl-navbar .logout-form { margin: 0; }
.ctl-navbar .logout-form button { min-height: 34px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--ctl-bronze) 45%, transparent); background: transparent; cursor: pointer; }
.ctl-navbar__mobile-login { display: none; }
.ctl-navbar__mobile { display: none; position: relative; }
.ctl-navbar__mobile summary { display: grid; min-width: 44px; min-height: 38px; place-items: center; border: 1px solid var(--ctl-border); color: var(--ctl-ice); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.ctl-navbar__mobile summary::-webkit-details-marker { display: none; }
.ctl-navbar__mobile-panel { position: absolute; top: calc(100% + 10px); right: 0; display: grid; width: min(310px, calc(100vw - 30px)); padding: 10px; border: 1px solid var(--ctl-border); background: rgba(3, 11, 24, .99); box-shadow: var(--ctl-shadow-lg); }
.ctl-navbar__mobile-panel > a { display: flex; min-height: 43px; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(201, 239, 255, .07); color: var(--ctl-text); font-size: .75rem; font-weight: 700; }
.ctl-navbar__mobile-panel > a:last-of-type { border-bottom: 0; }
.ctl-navbar__mobile-panel > .ctl-navbar__mobile-auth {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--ctl-bronze) 58%, transparent);
  color: var(--ctl-bronze-bright);
  background: rgba(181, 120, 45, .08);
}
.ctl-navbar__mobile-logout { margin: 8px 0 0; }
.ctl-navbar__mobile-logout button {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ctl-bronze) 58%, transparent);
  color: var(--ctl-bronze-bright);
  background: rgba(181, 120, 45, .08);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

/* Context ribbons from existing standalone templates remain useful. */
.profile-topbar, .ranking-page > .profile-topbar {
  min-height: 42px;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(115, 204, 255, .09);
  background: rgba(3, 11, 24, .62);
}
.profile-topbar .brand { display: none; }
.profile-topbar-center { color: var(--ctl-bronze-bright); font-size: .64rem; letter-spacing: .14em; }

/* Floating command dock */
.ctl-dock {
  position: fixed;
  z-index: 80;
  right: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--ctl-bronze) 42%, transparent);
  border-radius: 999px;
  background: rgba(3, 11, 24, .9);
  box-shadow: 0 18px 50px rgba(0, 2, 10, .56), inset 0 1px rgba(201, 239, 255, .08);
  backdrop-filter: blur(16px);
  transform: translateX(50%);
}
.ctl-dock a {
  position: relative;
  display: grid;
  width: 42px; height: 42px;
  place-items: center;
  border: 1px solid rgba(115, 204, 255, .14);
  border-radius: 50%;
  color: var(--ctl-steel);
  background: rgba(6, 22, 42, .8);
  transition: color var(--motion-fast) ease, transform var(--motion-normal) var(--ease-premium), border-color var(--motion-fast) ease;
}
.ctl-dock a:hover, .ctl-dock a:focus-visible, .ctl-dock a.is-active { color: var(--ctl-ice); border-color: color-mix(in srgb, var(--ctl-frost) 52%, transparent); transform: translateY(-4px); }
.ctl-dock a.is-active::after { content: ""; position: absolute; bottom: 3px; width: 5px; height: 5px; border: 1px solid var(--ctl-bronze-bright); transform: rotate(45deg); }
.ctl-dock svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ctl-dock__label { position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 5px 8px; border: 1px solid var(--ctl-border-soft); border-radius: 4px; color: var(--ctl-text); background: var(--ctl-abyss); font-size: .6rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity var(--motion-fast), transform var(--motion-fast); }
.ctl-dock a:hover .ctl-dock__label, .ctl-dock a:focus-visible .ctl-dock__label { opacity: 1; transform: translate(-50%, 0); }

/* Shared footer and state system */
.ctl-footer, .footer {
  display: flex;
  min-height: 116px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 70px;
  padding: 28px 12px 64px;
  border-top: 1px solid var(--ctl-border-soft);
  color: var(--ctl-muted);
  font-size: .67rem;
  letter-spacing: .07em;
}
.ctl-state { display: grid; min-height: 180px; place-items: center; padding: 32px; border: 1px solid var(--ctl-border-soft); border-radius: var(--ctl-radius-md); background: linear-gradient(145deg, rgba(13, 29, 49, .82), rgba(3, 11, 24, .92)); text-align: center; }
.ctl-state__mark { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 13px; border: 1px solid var(--ctl-border-bright); color: var(--ctl-frost); transform: rotate(45deg); }
.ctl-state__mark span { transform: rotate(-45deg); }
.ctl-state h2 { margin: 0; color: var(--ctl-ivory); font-family: var(--font-display); font-size: 1.8rem; }
.ctl-state p { max-width: 540px; margin: 8px auto 0; color: var(--ctl-muted); }
.availability-banner, .command-messages p { border-radius: var(--ctl-radius-sm); }

/* Generic page surfaces: applies the same strategy to screens not explicitly listed. */
.ranking-hero, .command-hero, .officers-hero, .profile-hero, .class-guide-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--ctl-border-soft) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 20, .96), rgba(6, 22, 42, .82) 62%, rgba(6, 22, 42, .28)),
    url("../images/ctl_frozen_fox_hero.68123a982c0c.png") 74% 38% / cover no-repeat !important;
  box-shadow: var(--ctl-shadow-sm);
}
.ranking-hero::before, .command-hero::before, .officers-hero::before, .profile-hero::before, .class-guide-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 78% 34%, rgba(115, 204, 255, .12), transparent 26%); pointer-events: none; }
.section-block, .data-management-card, .command-workboard, .command-change-feed, .event-runtime-card, .pipeline-info, .war-room-guide, .war-room-calendar-access, .migration-tracker, .auth-card {
  border-color: var(--ctl-border-soft) !important;
  background: linear-gradient(145deg, rgba(13, 29, 49, .82), rgba(3, 11, 24, .94)) !important;
  box-shadow: var(--ctl-shadow-sm);
}
.ranking-table, .command-table { border-color: var(--ctl-border-soft); background: rgba(3, 11, 24, .82); }
.ranking-table th, .command-table th { color: var(--ctl-bronze-bright); background: linear-gradient(180deg, rgba(17, 41, 69, .96), rgba(6, 22, 42, .96)); }
.ranking-table td, .command-table td { border-color: rgba(115, 204, 255, .075); font-variant-numeric: tabular-nums; }
.ranking-table tbody tr:hover, .command-table tbody tr:hover { background: rgba(40, 119, 255, .07); }
.button-primary, .premium-button {
  color: var(--ctl-void) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, var(--ctl-ice), var(--ctl-frost) 54%, var(--ctl-bronze-bright)) !important;
  box-shadow: 0 12px 28px rgba(0, 5, 18, .3), inset 0 1px rgba(255,255,255,.55) !important;
}
.button-primary:hover, .premium-button:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Authenticated navigation has more command actions than the public header.
   Keep its secondary destinations in the menu even on wide screens so the
   fixed content shell never forces labels into neighbouring grid tracks. */
.ctl-navbar:has(.logout-form) {
  grid-template-columns: 190px minmax(0, 1fr) auto auto;
  gap: 10px;
  padding-inline: 16px;
}
.ctl-navbar:has(.logout-form) .ctl-navbar__public { gap: 11px; }
.ctl-navbar:has(.logout-form) .ctl-navbar__public a { font-size: .59rem; letter-spacing: .075em; }
.ctl-navbar:has(.logout-form) .ctl-navbar__public .ctl-navbar__link--secondary,
.ctl-navbar:has(.logout-form) .ctl-navbar__tools .ctl-navbar__tool:not(.ctl-navbar__tool--primary) { display: none; }
.ctl-navbar:has(.logout-form) .ctl-navbar__tools { gap: 6px; }
.ctl-navbar:has(.logout-form) .ctl-navbar__tool,
.ctl-navbar:has(.logout-form) .logout-form button { padding-inline: 8px; }
.ctl-navbar:has(.logout-form) .ctl-navbar__mobile { display: block; }

@media (max-width: 1500px) {
  .ctl-navbar {
    grid-template-columns: 190px minmax(0, 1fr) auto auto;
    gap: 10px;
    padding-inline: 16px;
  }
  .ctl-navbar__public { gap: 11px; }
  .ctl-navbar__public a { font-size: .59rem; letter-spacing: .075em; }
  .ctl-navbar__public .ctl-navbar__link--secondary { display: none; }
  .ctl-navbar__tools { gap: 6px; }
  .ctl-navbar__tools .ctl-navbar__tool:not(.ctl-navbar__tool--primary) { display: none; }
  .ctl-navbar__tool, .ctl-navbar .logout-form button { padding-inline: 8px; }
  .ctl-navbar__mobile { display: block; }
}
@media (max-width: 1320px) {
  .ctl-navbar { grid-template-columns: minmax(168px, auto) minmax(0, 1fr) auto auto; }
  .ctl-navbar__public { gap: 13px; }
  .ctl-navbar__public a { font-size: .61rem; }
  .ctl-navbar__tools .ctl-navbar__tool:not(.ctl-navbar__tool--primary), .ctl-navbar__tools .theme-switcher, .ctl-navbar__tools .language-switcher { display: none; }
  .ctl-navbar__mobile { display: block; }
}
@media (max-width: 1080px) {
  .ctl-navbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ctl-navbar__public { display: none; }
}
@media (max-width: 820px) {
  html { scroll-padding-top: 68px; }
  .page-shell, .premium-shell, .ctl-shell, .home-premium .premium-shell { width: min(100% - 24px, var(--ctl-content)); }
  .ctl-navbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-height: 66px; padding-inline: 12px; }
  .ctl-navbar__public, .ctl-navbar__tools { display: none; }
  .ctl-navbar__mobile-login {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--ctl-bronze) 58%, transparent);
    color: var(--ctl-bronze-bright);
    background: rgba(181, 120, 45, .08);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .ctl-navbar__mobile { display: block; }
  .ctl-brand__crest { width: 38px; height: 38px; }
  .ctl-brand__copy strong { font-size: 1rem; }
  .ctl-brand__copy small { font-size: .5rem; }
  .ctl-dock { right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; justify-content: space-around; transform: none; }
  .ctl-dock a { width: 40px; height: 40px; }
  .ctl-dock__label { display: none; }
  .profile-topbar { display: none; }
  .ctl-footer, .footer { flex-direction: column; align-items: flex-start; padding-bottom: 86px; }
  .table-scroll, .ranking-table-wrap, .command-table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
}
@media (max-width: 520px) {
  .page-shell, .premium-shell, .ctl-shell, .home-premium .premium-shell { width: min(100% - 16px, var(--ctl-content)); }
  .ctl-brand__copy small { max-width: 165px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 390px) {
  .ctl-brand { gap: 9px; }
  .ctl-brand__copy small { display: none; }
  .ctl-navbar__mobile-login { padding-inline: 8px; font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ctl-navbar { backdrop-filter: none; }
}