/*
 * K27 shared page kit
 * Owner: CX5 / X1
 * Scope: Tony-facing Fresh pages listed in /fresh/review/pages.txt
 * Palette rule: navy on cream/white, cream/white on navy, navy on gold.
 */

@font-face {
  font-family: "K27 Lexend";
  src: url("fonts/Lexend-wght-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light !important;
  --k27-navy: #0b1f3a;
  --k27-gold: #d4a62a;
  --k27-cream: #fbf8f1;
  --k27-white: #ffffff;
  --k27-muted: #35465d;
  --k27-space-1: 8px;
  --k27-space-2: 16px;
  --k27-space-3: 24px;
  --k27-radius: 12px;
  --k27-max: 680px;

  /* Re-map common page tokens to the approved three-color system. */
  --navy: var(--k27-navy) !important;
  --navy2: var(--k27-navy) !important;
  --blue: var(--k27-navy) !important;
  --ink: var(--k27-navy) !important;
  --ink2: var(--k27-muted) !important;
  --muted: var(--k27-muted) !important;
  --mut: var(--k27-muted) !important;
  --paper: var(--k27-cream) !important;
  --page: var(--k27-cream) !important;
  --bg: var(--k27-cream) !important;
  --cream: var(--k27-cream) !important;
  --tile: var(--k27-white) !important;
  --soft: var(--k27-white) !important;
  --card: var(--k27-white) !important;
  --white: var(--k27-white) !important;
  --gold: var(--k27-gold) !important;
  --gold2: var(--k27-gold) !important;
  --yellow: var(--k27-gold) !important;
  --accent: var(--k27-gold) !important;
  --col: var(--k27-gold) !important;
  --columbia: var(--k27-gold) !important;
  --sky: var(--k27-gold) !important;
  --line: var(--k27-navy) !important;
  --focus: var(--k27-gold) !important;
  --ok: var(--k27-navy) !important;
  --green: var(--k27-navy) !important;
  --wait: var(--k27-navy) !important;
  --danger: var(--k27-navy) !important;
  --bad: var(--k27-navy) !important;
  --red: var(--k27-navy) !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}

html {
  overflow-x: hidden;
  background: var(--k27-cream) !important;
  color: var(--k27-navy) !important;
  scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100% !important;
  max-width: var(--k27-max) !important;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding-bottom: max(var(--k27-space-3), env(safe-area-inset-bottom, 0px));
  overflow-x: hidden !important;
  background: var(--k27-cream) !important;
  background-image: none !important;
  color: var(--k27-navy) !important;
  font-family: "K27 Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  text-rendering: optimizeLegibility;
}

body > :where(header, main, footer, section, nav, form, details, .wrap, .shell, .page, .app, .container, .bb, #list, #banner, #reply, #searchwrap) {
  width: 100% !important;
  max-width: var(--k27-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

:where(main, .wrap, .shell, .page, .container) {
  width: 100% !important;
  max-width: var(--k27-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: var(--k27-space-2) !important;
  padding-left: var(--k27-space-2) !important;
}

:where(section, article, details, [id]) {
  scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px));
}

:where(h1, h2, h3, h4, p, ul, ol, blockquote, figure) {
  margin-top: 0;
}

:where(h1, h2, h3, h4) {
  color: inherit !important;
  font-family: "K27 Lexend", "Atkinson Hyperlegible", system-ui, sans-serif !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: anywhere;
}

h1 { font-size: clamp(2rem, 8vw, 3.1rem) !important; }
h2 { font-size: clamp(1.45rem, 6vw, 2rem) !important; }
h3 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; }

:where(p, li, dd, dt, label, summary, figcaption, td, th) {
  overflow-wrap: anywhere;
}

:where(p, span, small, strong, b, em, label, li, dt, dd) {
  color: inherit !important;
}

small {
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}

a {
  color: var(--k27-navy) !important;
  font-weight: 800 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

:where(button, input, select, textarea, summary, .button, [role="button"]) {
  font-family: "K27 Lexend", "Atkinson Hyperlegible", system-ui, sans-serif !important;
  font-size: max(17px, 1em) !important;
  line-height: 1.3 !important;
}

:where(button, .button, .go, .open, .open-button, [role="button"]) {
  min-height: 48px;
  border: 2px solid var(--k27-navy) !important;
  border-radius: var(--k27-radius) !important;
  background-color: var(--k27-navy) !important;
  background-image: none !important;
  color: var(--k27-cream) !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

:where(button, .button, .go, .open, .open-button, [role="button"]) * {
  color: inherit !important;
}

:where(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: var(--k27-space-1) var(--k27-space-2) !important;
  border: 2px solid var(--k27-navy) !important;
  border-radius: var(--k27-radius) !important;
  background: var(--k27-white) !important;
  color: var(--k27-navy) !important;
}

textarea { min-height: 96px; }

::placeholder {
  color: var(--k27-muted) !important;
  opacity: 1 !important;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 4px solid var(--k27-gold) !important;
  outline-offset: 3px !important;
}

:where(.chip, .pill, .tag, .badge, .status, .status-pill, .ai, .dpbrand, .sigdp, .mac, .primary, .progress-fill, .check-button[aria-pressed="true"], .audio-button.playing, .pp1.on) {
  border-color: var(--k27-navy) !important;
  background-color: var(--k27-gold) !important;
  background-image: none !important;
  color: var(--k27-navy) !important;
}

/* Full-width page bars use the one approved reverse pair. */
:where(body > header, body footer, .hero, header.top, .site-header, .vbar, .wbar, .bb, .section-title, .titlebar, article > header, .layout > header, .level > header, .panel-head, .voice-head) {
  border-color: var(--k27-gold) !important;
  background-color: var(--k27-navy) !important;
  background-image: none !important;
  color: var(--k27-cream) !important;
}

:where(body > header, body footer, .hero, header.top, .site-header, .vbar, .wbar, .bb, .section-title, .titlebar, article > header, .layout > header, .level > header, .panel-head, .voice-head) :where(h1, h2, h3, h4, p, span, small, strong, b, a, label) {
  color: inherit !important;
}

:where(body > header, .hero, header.top, .site-header, .vbar, .wbar, .bb) :where(button, .button, .go, [role="button"]) {
  border-color: var(--k27-gold) !important;
  background-color: var(--k27-gold) !important;
  color: var(--k27-navy) !important;
}

.brand-strip {
  height: var(--k27-space-1) !important;
  background: var(--k27-gold) !important;
}

/* Every repeated content card gets a clear, non-overlapping gold top bar. */
:where(.card, .panel, .row, .layout, .level, .block, .box, .bubble, .bub, .acc, .pcard, .sqcard, .voice, .preview-card, .truth-card, .next-row, .notice, .boundary, .gate, .stage, .week, main > details, body > details:not(.dd), section > details) {
  margin-top: var(--k27-space-2);
  margin-bottom: var(--k27-space-2);
  border: 2px solid var(--k27-navy) !important;
  border-top: var(--k27-space-1) solid var(--k27-gold) !important;
  border-radius: var(--k27-radius) !important;
  background-color: var(--k27-white) !important;
  background-image: none !important;
  color: var(--k27-navy) !important;
  box-shadow: none !important;
}

:where(.card, .panel, .row, .layout, .level, .block, .box, .bubble, .bub, .acc, .pcard, .sqcard, .voice, .preview-card, .truth-card, .next-row, .notice, .boundary, .gate, .stage, .week, main > details, body > details:not(.dd), section > details) :where(p, span, small, strong, b, h1, h2, h3, h4, label, li) {
  color: inherit !important;
}

:where(.card, .panel, .layout, .level, .voice) > :where(header, .head, .title, .card-title),
:where(main > details, body > details:not(.dd), section > details) > summary {
  min-height: 48px;
  padding: var(--k27-space-1) var(--k27-space-2) !important;
  border: 0 !important;
  background-color: var(--k27-navy) !important;
  background-image: none !important;
  color: var(--k27-cream) !important;
}

:where(.card, .panel, .layout, .level, .voice) > :where(header, .head, .title, .card-title) *,
:where(main > details, body > details:not(.dd), section > details) > summary * {
  color: inherit !important;
}

:where(.good, .live, .local, .wait, .blocked, .danger, .stale, .done, .yes, .no, .a-plus, .admin, .coach, .family, .kid) {
  border-color: var(--k27-navy) !important;
  color: inherit !important;
}

:where(.good, .live, .local, .wait, .blocked, .danger, .stale, .done, .yes, .no, .a-plus) {
  background-color: var(--k27-white) !important;
  background-image: none !important;
}

/* The page is one reading column; repeated content grids stack inside it. */
:where(.compare-grid, .match-grid, .level-grid, .drill-grid, .do-grid, .truth, .stats, .cards4, .grid, .two) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--k27-space-2) !important;
}

:where(.list, .hub-list, .next-list, .levels, .voices, .routes, .links) {
  gap: var(--k27-space-2) !important;
}

:where(img, svg, video, canvas, iframe) {
  max-width: 100%;
}

img, video { height: auto; }

iframe {
  width: 100% !important;
  border: 2px solid var(--k27-navy) !important;
  border-radius: var(--k27-radius) !important;
  background: var(--k27-white) !important;
}

:where(.table-wrap, .compare-scroll) {
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid var(--k27-navy) !important;
  background: var(--k27-white) !important;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--k27-white) !important;
  color: var(--k27-navy) !important;
}

:where(th, td) {
  padding: var(--k27-space-1) !important;
  border: 1px solid var(--k27-navy) !important;
  background: var(--k27-white) !important;
  color: var(--k27-navy) !important;
  text-align: left;
}

/* Sticky bars stay in normal flow; bottom controls no longer cover content. */
:where(.toolbar, .tabs, .stick, .wrap > .bar, .site-header, header.top, .vbar, .bb) {
  position: sticky !important;
  top: env(safe-area-inset-top, 0px) !important;
  right: auto !important;
  left: auto !important;
  z-index: 20 !important;
  max-width: var(--k27-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  background-color: var(--k27-cream) !important;
  background-image: none !important;
}

:where(.site-header, header.top, .vbar, .bb) {
  background-color: var(--k27-navy) !important;
  color: var(--k27-cream) !important;
}

:where(.toolbar, .tabs, .stick, .wrap > .bar) {
  background-color: var(--k27-cream) !important;
  color: var(--k27-navy) !important;
}

:where(.toolbar, .tabs, .stick, .wrap > .bar) :where(h1, h2, h3, h4, p, span, small, strong, b, a, label) {
  color: inherit !important;
}

:where(#tabs, #wt, #latest, #walkcap, #helper, .alltoggle, .easy-toggle) {
  position: static !important;
  inset: auto !important;
  width: calc(100% - 32px) !important;
  max-width: calc(var(--k27-max) - 32px) !important;
  margin: var(--k27-space-2) auto !important;
  transform: none !important;
}

#tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: var(--k27-space-1) !important;
  border: 2px solid var(--k27-navy) !important;
  border-top: var(--k27-space-1) solid var(--k27-gold) !important;
  background: var(--k27-white) !important;
}

body.tabbed { padding-bottom: var(--k27-space-3) !important; }

/* Decorative layers caused overlaps and added no task information. */
:where(.hero::after, .tree::before, .vbox::after, .fx, .spark, .ball, .confetti, .balloon, .arrow::after, .stick::before) {
  display: none !important;
}

:where(.pcard .pic .pb, .vbox .big, .sqcard .badge) {
  position: static !important;
  inset: auto !important;
  margin: var(--k27-space-2) !important;
  transform: none !important;
}

:where(.pop, .bubble, .talk, .r3-coach-player) {
  position: static !important;
  inset: auto !important;
  width: auto;
  max-width: 100% !important;
  margin: var(--k27-space-1) auto !important;
  transform: none !important;
}

.vc-logos {
  display: flex !important;
  align-items: center !important;
  gap: var(--k27-space-1) !important;
}

.vc-logos img {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.pcard .pic,
.vbox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Intentional dialogs/dropdowns remain overlays, but are viewport-safe. */
:where(#searchwrap, .bb .ddp) {
  right: var(--k27-space-1) !important;
  left: var(--k27-space-1) !important;
  width: auto !important;
  max-width: calc(var(--k27-max) - 16px) !important;
  max-height: calc(100dvh - 96px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: auto !important;
  border: 2px solid var(--k27-navy) !important;
  background: var(--k27-white) !important;
  color: var(--k27-navy) !important;
}

#txs .txb {
  width: 100% !important;
  max-width: var(--k27-max) !important;
  max-height: calc(100dvh - var(--k27-space-3)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: auto !important;
  background: var(--k27-cream) !important;
  color: var(--k27-navy) !important;
}

/* Former inline presentation rules now live in the kit. */
.dotw {
  display: flex;
  flex: 0 0 auto;
  width: 14px;
  justify-content: center;
}

#dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--k27-gold) !important;
}

.chip[data-f="tony"] i,
.chip[data-f="dp"] i {
  background: var(--k27-navy) !important;
}

#side {
  flex: 0 0 auto;
  max-height: 38vh;
  padding: var(--k27-space-1) !important;
  overflow: auto;
  border-top-color: var(--k27-gold) !important;
  background: var(--k27-white) !important;
}

#side > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  color: var(--k27-cream) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

.prog img {
  flex: none;
  width: auto;
  height: 32px;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--k27-navy) !important;
}

#pnum { color: inherit !important; }

#sqVid {
  width: 100% !important;
  margin: var(--k27-space-2) 0 0 !important;
}

@media (max-width: 480px) {
  body { font-size: 17px !important; }

  :where(main, .wrap, .shell, .page, .container) {
    padding-right: var(--k27-space-1) !important;
    padding-left: var(--k27-space-1) !important;
  }

  :where(.spaces, .tabs, .toolbar, .walk-controls, .sqctl, .row2, .vc-setting-grid, .filters, .actions) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.ctr, .toplinks, .headcontrols, .cardtools, .actions, .filters) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--k27-space-1) !important;
  }

  :where(.ctr, .toplinks, .headcontrols, .cardtools, .actions, .filters) > * {
    flex: 1 1 140px;
  }

  .section-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}