/* src/styles/fortune.css
 *
 * The Fortune Financial look. Loaded LAST, after the shared sheets, so it can
 * re-point their tokens (--bg, --accent ...) at the Fortune palette: the sign-in
 * card, buttons and inputs that still use those classes become gold on obsidian
 * without editing the shared sheets.
 *
 * THE PALETTE. Five colours and nothing else. Every neutral below is one of
 * these mixed with transparency (color-mix / rgba of the same values), so the
 * page has no stray hue:
 *
 *   --ff-obsidian       #070605   page background
 *   --ff-deep-gold      #A56A1B   borders, rules, warning edge (decoration; too dark for small text)
 *   --ff-polished-gold  #E1B55D   primary accent: buttons, active states, figures
 *   --ff-soft-gold      #F2D493   headings accent, warnings text
 *   --ff-warm-white     #F5F0E5   body text
 */

:root {
  --ff-obsidian: #070605;
  --ff-deep-gold: #A56A1B;
  --ff-polished-gold: #E1B55D;
  --ff-soft-gold: #F2D493;
  --ff-warm-white: #F5F0E5;

  /* Derived neutrals: the palette, thinned. */
  --ff-text-dim: color-mix(in srgb, var(--ff-warm-white) 74%, transparent);
  --ff-text-faint: color-mix(in srgb, var(--ff-warm-white) 58%, transparent);
  --ff-surface: color-mix(in srgb, var(--ff-warm-white) 4%, var(--ff-obsidian));
  --ff-surface-2: color-mix(in srgb, var(--ff-warm-white) 7%, var(--ff-obsidian));
  --ff-line: color-mix(in srgb, var(--ff-polished-gold) 22%, transparent);
  --ff-line-strong: color-mix(in srgb, var(--ff-polished-gold) 45%, transparent);
  --ff-glow: color-mix(in srgb, var(--ff-polished-gold) 14%, transparent);

  /* The shared sheets' tokens, re-pointed so nothing legacy shows another hue. */
  --bg: var(--ff-obsidian);
  --bg-elev: var(--ff-surface);
  --card: color-mix(in srgb, var(--ff-warm-white) 3%, transparent);
  --card-hover: color-mix(in srgb, var(--ff-warm-white) 6%, transparent);
  --hairline: var(--ff-line);
  --hairline-strong: var(--ff-line-strong);
  --text: var(--ff-warm-white);
  --text-dim: var(--ff-text-dim);
  --text-faint: var(--ff-text-faint);
  --accent: var(--ff-polished-gold);
  --accent-2: var(--ff-soft-gold);
  --accent-glow: color-mix(in srgb, var(--ff-polished-gold) 40%, transparent);
  --pos: var(--ff-soft-gold);
  --neg: var(--ff-deep-gold);
  --accent-fill: var(--ff-polished-gold);
  --accent-fill-2: var(--ff-deep-gold);
  --table-frozen-bg: var(--ff-surface);
  --table-frozen-bg-hover: var(--ff-surface-2);
}

html { color-scheme: dark; }
body { background: var(--ff-obsidian); color: var(--ff-warm-white); }
:focus-visible { outline: 2px solid var(--ff-soft-gold); outline-offset: 2px; }

/* ------------------------------------------------ sign-in and state cards */

/* The shared background glows were periwinkle; here they are one soft gold wash. */
.app-bg {
  background: radial-gradient(60% 45% at 50% -5%, var(--ff-glow), transparent 65%);
}
.app-grid { display: none; }

.auth-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ff-warm-white) 5%, transparent), color-mix(in srgb, var(--ff-warm-white) 1%, transparent));
  border: 1px solid var(--ff-line-strong);
  border-radius: 18px;
  box-shadow: 0 40px 80px -40px var(--ff-obsidian), inset 0 1px color-mix(in srgb, var(--ff-polished-gold) 25%, transparent);
}
.auth-card .auth-brand { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.auth-card .auth-brand-text { align-items: center; }
.auth-brand-sub { color: var(--ff-text-dim); }
.ff-lockup { display: block; width: min(240px, 70%); height: auto; border-radius: 10px; mix-blend-mode: lighten; }
.auth-title { color: var(--ff-soft-gold); }
.auth-link:hover { color: var(--ff-soft-gold); }
.auth-err {
  color: var(--ff-soft-gold);
  background: color-mix(in srgb, var(--ff-deep-gold) 18%, transparent);
  border: 1px solid var(--ff-deep-gold);
}

.btn-primary {
  color: var(--ff-obsidian);
  background: linear-gradient(180deg, var(--ff-soft-gold), var(--ff-polished-gold));
  box-shadow: 0 6px 18px -8px var(--accent-glow);
}
.btn-primary:disabled { opacity: .5; }
.field-input { background: color-mix(in srgb, var(--ff-obsidian) 70%, transparent); color: var(--ff-warm-white); border-color: var(--ff-line); }
.field-input:focus { border-color: var(--ff-polished-gold); }

/* ------------------------------------------------------------- app frame */

.ff-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--ff-obsidian);
  color: var(--ff-warm-white);
  font-size: 14px;
  line-height: 1.5;
}

.ff-topbar { display: none; }

.ff-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  background: var(--ff-surface);
  border-right: 1px solid var(--ff-line);
}

.ff-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ff-brand-crown { display: block; height: 27px; width: auto; border-radius: 4px; mix-blend-mode: lighten; }
.ff-brand-name { font-family: Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--ff-soft-gold); white-space: nowrap; }

.ff-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.ff-sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ff-text-dim);
  text-decoration: none;
  border: 1px solid transparent;
}
.ff-sidebar nav a:hover { color: var(--ff-warm-white); background: var(--card-hover); }
.ff-sidebar nav a.active {
  color: var(--ff-polished-gold);
  background: var(--ff-glow);
  border-color: var(--ff-line-strong);
  font-weight: 600;
}

.ff-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ff-who { color: var(--ff-text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ff-main { min-width: 0; padding: 24px clamp(16px, 3vw, 36px) 64px; }

.ff-button, .ff-chip, .ff-menu-button {
  font: inherit;
  font-size: 13px;
  color: var(--ff-warm-white);
  background: transparent;
  border: 1px solid var(--ff-line-strong);
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
}
.ff-button:hover, .ff-chip:hover, .ff-menu-button:hover { background: var(--card-hover); }
.ff-button:disabled { opacity: .5; cursor: not-allowed; }
.ff-chip.active { color: var(--ff-obsidian); background: var(--ff-polished-gold); border-color: var(--ff-polished-gold); font-weight: 600; }

/* ----------------------------------------------------------- range + banners */

.ff-toolbar { margin-bottom: 16px; }
.ff-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ff-range-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-range-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ff-range-custom label { display: inline-flex; align-items: center; gap: 6px; color: var(--ff-text-dim); font-size: 13px; }
.ff-range-custom input {
  font: inherit;
  color: var(--ff-warm-white);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line-strong);
  border-radius: 8px;
  padding: 6px 8px;
  color-scheme: dark;
}
.ff-range-problem { color: var(--ff-soft-gold); }

.ff-banners { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ff-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ff-polished-gold);
  background: var(--ff-glow);
  color: var(--ff-warm-white);
}
.ff-banner strong { color: var(--ff-soft-gold); }
.ff-banner-sample { border-width: 2px; }
.ff-banner-warn { border-color: var(--ff-deep-gold); background: color-mix(in srgb, var(--ff-deep-gold) 22%, transparent); }
.ff-banner-block { border-width: 2px; border-color: var(--ff-deep-gold); background: color-mix(in srgb, var(--ff-deep-gold) 34%, var(--ff-obsidian)); }
.ff-banner-block strong { color: var(--ff-warm-white); }

.ff-state { padding: 40px 20px; text-align: center; border: 1px dashed var(--ff-line-strong); border-radius: 14px; }
.ff-state h2 { color: var(--ff-soft-gold); font-size: 18px; margin-bottom: 6px; }
.ff-state p { color: var(--ff-text-dim); margin-bottom: 14px; overflow-wrap: anywhere; }
.ff-body.is-loading { opacity: .55; transition: opacity .15s; }

/* ------------------------------------------------------------- page pieces */

.ff-pagehead { margin-bottom: 18px; }
.ff-pagehead h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 26px; color: var(--ff-soft-gold); letter-spacing: .01em; }
.ff-pagehead p { color: var(--ff-text-dim); margin-top: 2px; }

.ff-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ff-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  border-radius: 14px;
}
.ff-kpi-gold { border-color: var(--ff-line-strong); background: linear-gradient(180deg, var(--ff-glow), var(--ff-surface)); }
.ff-kpi-label { color: var(--ff-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ff-kpi-value { font-size: 26px; font-weight: 650; color: var(--ff-polished-gold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ff-kpi.is-unavailable .ff-kpi-value { font-size: 18px; font-weight: 500; color: var(--ff-text-dim); }
.ff-kpi.is-partial .ff-kpi-value, .ff-kpi.is-none .ff-kpi-value { color: var(--ff-soft-gold); }
.ff-kpi-note { color: var(--ff-text-faint); font-size: 12px; line-height: 1.4; }
.ff-kpi-extra { color: var(--ff-soft-gold); }

.ff-panel {
  margin-bottom: 20px;
  padding: 18px;
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  border-radius: 16px;
  min-width: 0;
}
.ff-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ff-panel-head h2 { font-size: 16px; color: var(--ff-soft-gold); }
.ff-panel-head p { color: var(--ff-text-dim); font-size: 13px; margin-top: 2px; }

.ff-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.ff-empty { padding: 24px; text-align: center; color: var(--ff-text-dim); }
.ff-empty h3 { color: var(--ff-warm-white); font-size: 15px; }
.ff-unavailable-note strong, .ff-unavailable-line { color: var(--ff-text-dim); }
.ff-unavailable-note span { display: block; color: var(--ff-text-faint); font-size: 13px; }

.ff-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ff-line-strong);
  color: var(--ff-warm-white);
  font-size: 12px;
  text-transform: capitalize;
}
.ff-tag-gold { color: var(--ff-obsidian); background: var(--ff-polished-gold); border-color: var(--ff-polished-gold); font-weight: 600; }
.ff-tag-warn { color: var(--ff-soft-gold); border-color: var(--ff-deep-gold); background: color-mix(in srgb, var(--ff-deep-gold) 25%, transparent); }

/* Tables scroll inside their own box so the page never scrolls sideways. */
.ff-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--ff-line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.ff-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 13px; }
.ff-table th, .ff-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ff-line); vertical-align: top; }
.ff-table th { color: var(--ff-text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; background: var(--ff-surface-2); }
.ff-table td.num, .ff-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ff-table tbody tr:last-child td { border-bottom: 0; }
.ff-table tbody tr:hover td { background: var(--card-hover); }

/* Bars (funnel and placement). */
.ff-bars { display: flex; flex-direction: column; gap: 12px; }
.ff-bar { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ff-bar-label { color: var(--ff-warm-white); }
.ff-bar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ff-warm-white) 10%, transparent); overflow: hidden; }
.ff-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ff-deep-gold), var(--ff-polished-gold)); border-radius: 999px; }
.ff-bar-value { color: var(--ff-polished-gold); font-variant-numeric: tabular-nums; text-align: right; }
.ff-bar-note { display: block; color: var(--ff-text-faint); font-size: 12px; margin-top: 2px; }
.ff-cohort-total { color: var(--ff-text-dim); }

/* ---------------------------------------------------------------- pipeline */

.ff-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ff-text-dim); margin: 0 0 8px; }
.ff-stage-group { margin-bottom: 18px; }
.ff-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ff-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  color: var(--ff-warm-white);
  padding: 14px;
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  cursor: pointer;
  min-width: 0;
}
.ff-stage:hover { border-color: var(--ff-line-strong); }
.ff-stage.selected { border-color: var(--ff-polished-gold); background: var(--ff-glow); }
.ff-stage-number { color: var(--ff-deep-gold); font-size: 12px; font-weight: 700; }
.ff-stage strong { font-size: 26px; color: var(--ff-polished-gold); font-variant-numeric: tabular-nums; }
.ff-stage-name { font-weight: 600; }
.ff-stage small { color: var(--ff-text-faint); }

/* ------------------------------------------------------------ connections */

.ff-connections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ff-connection { padding: 16px; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 14px; min-width: 0; }
.ff-connection header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ff-connection h3 { font-size: 15px; color: var(--ff-soft-gold); }
.ff-connection p { color: var(--ff-text-dim); font-size: 13px; margin-bottom: 10px; }
.ff-connection dl, .ff-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.ff-connection dt, .ff-details dt { color: var(--ff-text-faint); }
.ff-connection dd, .ff-details dd { overflow-wrap: anywhere; }
.ff-need { margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ff-line-strong); color: var(--ff-warm-white); }
.ff-need strong { color: var(--ff-soft-gold); }

/* ------------------------------------------------------------------ phones */

@media (max-width: 860px) {
  .ff-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .ff-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ff-surface);
    border-bottom: 1px solid var(--ff-line);
  }
  .ff-sidebar { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--ff-line); }
  .ff-app.menu-open .ff-sidebar { display: flex; }
  .ff-sidebar-brand { display: none; }
  .ff-sidebar-foot { margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; }
  .ff-main { padding: 16px 16px 48px; }
  .ff-two { grid-template-columns: minmax(0, 1fr); }
  .ff-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ff-kpi-value { font-size: 22px; }
  .ff-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ff-bar-track { grid-column: 1 / -1; order: 3; }
  .ff-pagehead h1 { font-size: 22px; }
}