/* TYLOLFEN HOT: blue packaging, fresh lemon accents, light reading surfaces. */
:root {
  color-scheme: light;
  --navy: #0b57a8;
  --teal: #0865ba;
  --orange: #ffdc45;
  --ink: #183f62;
  --muted: #506d83;
  --border: #cfdfeb;
  --bg: #f2f9fd;
  --white: #fff;
  --lemon: #ffdc45;
  --lemon-soft: #fff8d5;
  --sky: #e8f4ff;
  --chart-accent: #a57100;
}
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 92% 4%, #fff9d8 0, transparent 36%),
    linear-gradient(145deg, #edf7ff 0%, #f8fcff 60%, #fffdf1 100%);
  background-attachment: fixed;
  accent-color: var(--teal);
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: #174f96;
}
.sidebar {
  background: linear-gradient(170deg, #116dc2 0%, #0958ac 65%, #074b95 100%);
  border-right: 1px solid #074b95;
  color: #fff;
}
.sidebar .brand { margin-bottom: 2px; }
.market-label { color: #e2f2ff; }
.sidebar-foot { color: #e2f2ff; border-top: 1px solid #4b8bd0; margin-top: auto; }
.sidebar-foot b { color: #fff2a4; }
.nav { color: #fff; border: 1px solid transparent; border-radius: 10px; }
.nav:hover { background: #064589; }
.sidebar button:focus-visible { outline-color: #fff1a8; }
.nav.active {
  background: var(--lemon);
  color: #123f70;
  font-weight: 700;
  border: 1px solid #f5d543;
  border-left: 3px solid #fff4ac;
}
.secondary { border-color: #7793aa; color: #18548b; border-radius: 9px; }
.secondary:hover { background: var(--sky); border-color: var(--teal); }
.primary {
  background: var(--lemon);
  color: #173f69;
  border: 1px solid #927200;
  border-radius: 9px;
  box-shadow: 0 3px 0 #e1b924;
}
.primary:hover { background: #ffe874; }
.primary:active { box-shadow: none; }
.context-bar { background: var(--sky); border-left-color: var(--teal); border-radius: 8px; }
.context-bar b { color: #075699; }
.training-pill { color: var(--muted); }
.metrics article, .panel, .empty, .auth-card {
  border-radius: 14px;
  box-shadow: 0 5px 20px #225c8610;
}
.metrics article { border-top: 3px solid #b7d9f2; }
.metrics article:last-child { border-top-color: var(--lemon); }
.metrics strong { color: #0e589b; }
.panel-head > span, .source-badge { background: var(--sky); color: #075699; }
input, textarea, select { background: #fcfeff; border-color: #7793aa; }
.rounds .done { background: var(--lemon-soft); color: #735700; border-color: #a78c20; }
.rounds .current { background: var(--teal); color: #fff; }
.forecast-panel {
  background: linear-gradient(150deg, #e6f3ff 0%, #f2f9ff 75%, #fff8d5 100%);
  color: var(--ink);
  border: 1px solid #b5d6ee;
  border-radius: 14px;
}
.forecast-panel .eyebrow { color: #075ca6; }
.forecast-value { color: #0e589b; }
.forecast-value span, .forecast-panel p:not(.eyebrow), .forecast-panel small,
.range-labels { color: var(--muted); }
.range-track { background: #c6def1; }
.range-track span { background: var(--teal); }
.finance-list > div { color: var(--muted); }
.finance-list strong { color: var(--ink); }
.finance-list > div:last-child { color: var(--ink); border-top-color: #b5cfe2; }
.highlight-row { background: var(--lemon-soft); }
td { border-bottom-color: #e1ebf2; }
.callout { background: var(--sky); border-left-color: var(--teal); }
.callout.warning { background: var(--lemon-soft); border-left-color: #9f7700; }
.result-grid > div, .annual-compare > div, .formula { background: #eef7ff; }
.result-grid > div:last-child { background: var(--lemon-soft); }
.tag, .year-badge { background: var(--lemon-soft); color: #6d5300; }
.pipeline > div { background: var(--sky); border-top-color: var(--teal); }
.pipeline > div:last-child { background: var(--lemon-soft); border-top-color: #a57100; }
.market-tabs button { border-color: #7793aa; }
.season-row > div { background: #e1edf7; }
.season-row > div > span { background: #83b1db; }
.season-row.selected > div > span { background: var(--teal); }
.legend .orange:before { background: var(--chart-accent); }
.completed { color: #fff2a4; }
#status:not(:empty) { background: #e8f5ec; color: #195636; }
#status.error-status { background: #fff0eb; color: #9e3521; }
#auth { max-width: 590px; margin-top: 5vh; }
.auth-brand {
  background: #0866b2;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 20px;
  border: 0;
}
.auth-brand .logo-frame { max-width: none; margin: 0; --logo-ratio: 5.4; --logo-image-top: -36%; }
.sidebar .logo-frame { border-radius: 7px; }
.auth-card { border-top: 5px solid var(--lemon); }
.auth-tabs button { background: #edf6ff; border: 1px solid #7793aa; border-radius: 9px; }
.auth-tabs button.selected { background: var(--teal); border-color: var(--teal); color: #fff; }
.show-password input { accent-color: var(--teal); }
@supports not (accent-color: #0865ba) {
  .show-password { position: relative; }
  .show-password input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .show-password span { padding-left: 28px; }
  .show-password span::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 2px solid #0865ba; border-radius: 3px; }
  .show-password input:checked + span::before { background: #0865ba; }
  .show-password input:checked + span::after { content: '✓'; position: absolute; left: 3px; top: 0; color: white; font-weight: 700; }
  .show-password input:focus-visible + span::before { outline: 3px solid #174f96; outline-offset: 3px; }
}
.logo-frame { position: relative; width: 100%; overflow: hidden; aspect-ratio: var(--logo-ratio, 5.9); }
.logo-frame .brand-logo {
  position: absolute;
  max-width: none;
  width: var(--logo-image-width, 100%);
  height: auto;
  top: var(--logo-image-top, -44%);
  left: var(--logo-image-left, 0);
}
@media (max-width: 700px) {
  .sidebar { border-bottom: 4px solid var(--lemon); border-right: 0; }
  .sidebar .brand { max-width: 290px; }
  .sidebar .logo-frame .brand-logo { width: var(--logo-image-width, 100%); }
  .nav.active { border: 1px solid #f5d543; border-bottom: 2px solid #fff4ac; }
  #auth { margin-top: 12px; }
  .auth-brand { padding: 0; border-radius: 14px; }
}
@media (forced-colors: active) {
  :root { --ink: CanvasText; --muted: CanvasText; --border: CanvasText; --teal: LinkText; --bg: Canvas; }
  .sidebar, .auth-brand, .forecast-panel, .auth-card, .panel, .metrics article,
  .context-bar, .callout, .result-grid > div, .annual-compare > div { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .nav, .market-label, .sidebar-foot, .sidebar-foot b, .forecast-value,
  .metrics strong { color: CanvasText; }
  .nav.active, .auth-tabs button.selected { background: Highlight; color: HighlightText; border-color: Highlight; }
  .primary, .secondary, input, textarea, select { border: 1px solid ButtonText; }
  .primary { background: ButtonFace; color: ButtonText; }
}


/* Preserve the brand while allowing pointer and keyboard activation. */
button.logo-trigger { display:block; width:100%; padding:0; border:0; font:inherit; cursor:pointer; touch-action:manipulation; }
button.logo-trigger:focus-visible { outline:3px solid #ffd739; outline-offset:4px; }