/*
 * Winnow by MultiTasker - the MultiTasker LLC theme for this app.
 *
 * Loaded after app.css through BRAND_STYLESHEET. Deliberately unlayered: every
 * rule in app.css sits in a cascade layer, and unlayered CSS outranks all of
 * them without needing extra specificity. The flip side is that an unlayered
 * `.btn` would also beat the layered `.btn-secondary`, so primary buttons are
 * targeted with :not() rather than restyling .btn wholesale.
 *
 * Values are MultiTasker's, from BRAND.md in the multitasker-llc repo
 * (OptiTide's palette since 2026-09-19). Contrast ratios quoted are WCAG, on
 * the surface named:
 *
 *   navy        #0D1530  structure, body ink
 *   navy-2      #1A223F  dark-theme panels (cards)
 *   navy-deep   #080E1F  dark-theme page
 *   orange      #FF6A00  fills and rules only - 2.87:1 on white, never text
 *   orange-cta  #B34B00  anything with white on it - 5.35:1 (hover #A13A00 6.73:1)
 *   orange-ink  #C2410C  links and small text on white - 5.18:1
 *   orange-lift #FF8C3A  the orange that works on navy - 7.77:1
 *   canvas      #F7F7F8  light page ground
 *
 * The logo keeps its own navy #052554 (BRAND.md rule 1); nothing else uses it.
 */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --mt-navy: #0d1530;
  --mt-navy-2: #1a223f;
  --mt-navy-deep: #080e1f;
  --mt-orange: #ff6a00;
  --mt-orange-cta: #b34b00;
  --mt-orange-cta-hover: #a13a00;
  --mt-orange-lift: #ff8c3a;
  --mt-on-navy-strong: #e2e3e6;  /* 14.02:1 on navy */
  --mt-on-navy: #d3d5da;         /* 12.25:1 */
  --mt-on-navy-soft: #bbbdc5;    /*  9.60:1 */

  /* The app's own tokens, re-pointed. */
  --accent:      light-dark(#c2410c, #ff8c3a);
  --accent-ink:  light-dark(#ffffff, #0d1530);
  --accent-soft: light-dark(#fff6f0, #3a2418);

  --bg:        light-dark(#f7f7f8, #080e1f);
  --surface:   light-dark(#ffffff, #1a223f);
  --surface-2: light-dark(#f0f0f2, #282f4a);
  --border:    light-dark(#e6eaf2, #2c3452);
  /* Form-field edges are UI boundaries, so 3:1 - 3.44:1 on white, 3.67:1 on
     the dark panel. The stock grey was about 1.6:1. */
  --border-strong: light-dark(#868a97, #767a8c);

  --ink:   light-dark(#0d1530, #d6e2f0);  /* 17.99:1 / 11.90:1 on the dark panel */
  --ink-2: light-dark(#3d4a63, #a6bad4);  /*  8.90:1 /  7.88:1 */
  --ink-3: light-dark(#5e6e88, #93a9c6);  /*  5.17:1 /  6.49:1 */

  --green: light-dark(#0c6f4c, #6ee7a8);  /* the MultiTasker success green, 6.19:1 */

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
}

/* ------------------------------------------------------------- type - */

h1, h2, h3,
.stat-value,
.topbar strong,
.brand-name {
  font-family: var(--font-display);
  letter-spacing: -.015em;
}

h1, h2, h3 { font-weight: 700; }
.stat-value { font-weight: 700; }

/* ---------------------------------------------------------- buttons - */

/* Primary only. White on #FF6A00 is 2.87:1, so the CTA orange carries it. */
.btn:not(.btn-secondary, .btn-ghost, .btn-danger) {
  background: var(--mt-orange-cta);
  color: #ffffff;
}
.btn:not(.btn-secondary, .btn-ghost, .btn-danger):hover {
  background: var(--mt-orange-cta-hover);
  filter: none;
}

/* ---------------------------------------------------------- sidebar - */

/* Navy in both themes, like the portal nav strip on multitasker.llc, with
   the 3px orange rule as its top edge. */
.sidebar {
  background: var(--mt-navy);
  color: var(--mt-on-navy);
  border-inline-end: 1px solid light-dark(transparent, rgb(255 255 255 / .06));
  border-block-start: 3px solid var(--mt-orange);
}

.sidebar .brand {
  color: #ffffff;
  /* The mark's navy panels turn white on navy (BRAND.md: .band-navy). */
  --mark-navy: #ffffff;
  --mark-teal: var(--mt-orange);
}

.brand-name { font-weight: 700; font-size: 1.15rem; }
.sidebar .brand-byline { color: var(--mt-on-navy-soft); }

.sidebar .nav a { color: var(--mt-on-navy); }
.sidebar .nav a:hover { background: rgb(255 255 255 / .07); color: #ffffff; }
.sidebar .nav a[aria-current="page"] {
  background: rgb(255 106 0 / .14);   /* 6.64:1 for the lift orange on it */
  color: var(--mt-orange-lift);
  box-shadow: inset 3px 0 0 var(--mt-orange);
}
.sidebar :focus-visible { outline-color: var(--mt-orange-lift); }

.sidebar .nav-heading { color: var(--mt-on-navy-soft); }
.sidebar .sidebar-foot {
  color: var(--mt-on-navy-soft);
  border-block-start-color: rgb(255 255 255 / .1);
}

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

.topbar { background: light-dark(#ffffff, var(--mt-navy)); }
.topbar strong { font-weight: 700; font-size: 1.05rem; }

/* ------------------------------------------------------------- auth - */

.auth-head .brand {
  color: var(--ink);
  --mark-navy: light-dark(#052554, #ffffff);
  --mark-teal: var(--mt-orange);
}
.auth-head .brand.has-logo .brand-mark {
  inline-size: 40px; block-size: 40px; flex-basis: 40px;
}
.auth-head .brand-name { font-size: 1.55rem; }
.auth-head .brand-text { text-align: start; }

.auth-card > .card { border-block-start: 3px solid var(--mt-orange); }

/* ----------------------------------------------------------- footer - */

footer.app-foot { color: var(--ink-3); }

/* ----------------------------------------------------------- narrow - */

@media (max-width: 860px) {
  /* The sidebar becomes a top strip and the nav a row, so the current
     item's rule moves from its left edge to its bottom edge. */
  .sidebar .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mt-orange); }
  .sidebar .brand { padding-block-end: .75rem; }
}

/* --- The landing page a sequence links to (promo.css) -----------------------
 * Only tokens: promo.css owns the layout. Navy hero and top bar, the mark
 * reversed on navy, white only on #B34B00, links #C2410C on light and the
 * lifted orange on dark, and #FF6A00 for rules and fills, never for text.
 */
body.promo {
  --pr-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pr-font-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
  --pr-bg: #f7f7f8;
  --pr-surface: #ffffff;
  --pr-alt: #eef0f4;
  --pr-ink: #0d1530;
  --pr-muted: #4a5068;
  --pr-line: #d9dce3;
  --pr-link: #c2410c;
  --pr-cta: #b34b00;
  --pr-cta-hover: #a13a00;
  --pr-cta-ink: #ffffff;
  --pr-hero: #0d1530;
  --pr-hero-ink: #e2e3e6;
  --pr-hero-muted: #bbbdc5;
  --pr-accent: #ff6a00;
}

@media (prefers-color-scheme: dark) {
  body.promo {
    --pr-bg: #080e1f;
    --pr-surface: #1a223f;
    --pr-alt: #0f1730;
    --pr-ink: #e2e3e6;
    --pr-muted: #bbbdc5;
    --pr-line: #2b3456;
    --pr-link: #ff8c3a;
    --pr-cta-ink: #ffffff;
  }
}

body.promo .pr-eyebrow { color: var(--pr-link); }
body.promo .pr-hero .pr-eyebrow { color: #ff8c3a; }
body.promo .pr-top .pr-mark { --mark-navy: #ffffff; --mark-teal: var(--mt-orange); }
body.promo .pr-steps li::before { background: #0d1530; color: #e2e3e6; box-shadow: inset 0 0 0 2px #ff6a00; }