/* ══════════════════════════════════════════════════════════════════════════
   FISH KORAVI · CANONICAL DESIGN SYSTEM  (v1 · 2026-06)

   SOURCE OF TRUTH: SALTWATER HOME  (#tab-home in app.html)
   Every token below was extracted verbatim from the existing Saltwater Home
   implementation (.k-home-*, .k-gp-*, .k-bl-*, .k-where-*, .k-target-*,
   .k-water-score-card, .fk-koravi-conditions). Nothing was reinterpreted.

   ARCHITECTURE
     1. Canonical tokens            (:root)
     2. Water-type accent layer     (body.fk-saltwater / body.fk-freshwater)
     3. Legacy → canonical aliases  (compatibility layer, removable later)
     4. Shared primitives           (.k-card / .k-btn / .k-pill / .k-input …)
     5. Adoption layer              (legacy classes re-pointed to primitives)
     6. Navigation + mode switch
     7. Responsive

   This file loads LAST so it is the single place that decides visual language.
   Do not add page-specific or component-specific colour values anywhere else.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · CANONICAL TOKENS ══════════════════════════════════════════════════ */
:root {
  /* ── Surfaces (from .k-home-* section shells) ── */
  --k-bg:             #030A14;
  --k-surface:        linear-gradient(135deg, rgba(26,159,181,0.12), rgba(6,30,47,0.60));
  --k-surface-warm:   linear-gradient(135deg, rgba(244,162,40,0.08), rgba(6,30,47,0.60));
  --k-surface-solid:  rgba(8,20,34,0.85);
  --k-cell:           rgba(6,30,47,0.70);
  --k-cell-2:         rgba(10,47,71,0.55);
  --k-inset:          rgba(3,16,28,0.55);
  --k-hairline:       rgba(255,255,255,0.03);

  /* ── Brand palette (the ONLY colours in the product) ── */
  --k-teal:       #16B3C7;
  --k-teal-2:     #2dd4bf;
  --k-cyan:       #4DE3FF;
  --k-cyan-2:     #22d3ee;
  --k-gold:       #FCB548;
  --k-gold-deep:  #F0952F;
  --k-gold-lt:    #FFD27A;
  --k-amber:      #E9A93F;
  --k-amber-lt:   #F7C978;
  --k-amber-deep: #B57D1E;

  /* ── Semantic accent (overridden per water type in §2) ── */
  --k-accent:             var(--k-cyan);
  --k-accent-2:           var(--k-teal);
  --k-accent-tint:        rgba(77,227,255,0.10);
  --k-accent-soft:        rgba(77,227,255,0.16);
  --k-accent-line:        rgba(77,227,255,0.22);
  --k-accent-line-strong: rgba(77,227,255,0.40);
  --k-accent-ink:         #04121F;
  --k-highlight:          var(--k-gold);
  --k-highlight-line:     rgba(244,162,40,0.26);

  /* ── Text ── */
  --k-text:    #F5FBFF;
  --k-text-2:  rgba(230,245,255,0.85);
  --k-text-3:  rgba(230,245,255,0.62);
  --k-text-4:  rgba(230,245,255,0.55);
  --k-dim:     #7d95a8;

  /* ── Lines ── */
  --k-line:        rgba(77,227,255,0.15);
  --k-line-2:      rgba(77,227,255,0.22);
  --k-line-strong: rgba(77,227,255,0.40);
  --k-line-soft:   rgba(255,255,255,0.06);

  /* ── Status ── */
  --k-success: #2ee6a0;
  --k-warning: #FCB548;
  --k-error:   #f87171;
  --k-danger:  #f2555a;

  /* ── Radius ── */
  --k-r-xs:   8px;
  --k-r-sm:  10px;
  --k-r-md:  12px;
  --k-r-lg:  14px;
  --k-r-xl:  18px;
  --k-r-2xl: 22px;
  --k-r-pill: 999px;

  /* ── Spacing ── */
  --k-s-1:  4px;
  --k-s-2:  6px;
  --k-s-3:  8px;
  --k-s-4: 10px;
  --k-s-5: 12px;
  --k-s-6: 14px;
  --k-s-7: 18px;
  --k-s-8: 20px;
  --k-s-9: 26px;

  /* ── Type ── */
  --k-font-head: 'Oswald', sans-serif;
  --k-font-body: 'Manrope', 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --k-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --k-fz-eyebrow: 0.72rem;   --k-ls-eyebrow: 2.5px;
  --k-fz-label:   0.62rem;   --k-ls-label:   2px;
  --k-fz-sub:     0.78rem;
  --k-fz-body:    0.86rem;
  --k-fz-value:   0.92rem;
  --k-fz-title:   1.1rem;
  --k-fz-hero:    1.9rem;

  /* ── Elevation ── */
  --k-elev-1:   0 4px 24px rgba(0,0,0,0.35);
  --k-elev-2:   inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 40px -20px rgba(0,0,0,0.60);
  --k-elev-pop: 0 14px 40px rgba(0,0,0,0.50);

  /* ── Motion ── */
  --k-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --k-t-fast: 0.15s;
  --k-t:      0.22s;

  /* ── Layout ── */
  --k-container: 960px;

  /* ── Water-type accent defaults (see §2) ── */
  --k-mode:      var(--k-cyan);
  --k-mode-2:    var(--k-teal);
  --k-mode-tint: rgba(77,227,255,0.10);
  --k-mode-soft: rgba(77,227,255,0.18);
  --k-mode-line: rgba(77,227,255,0.28);
  --k-mode-ink:  #04121F;
}


/* ══ 2 · WATER-TYPE ACCENT LAYER ═══════════════════════════════════════════
   Shared foundation, one semantic accent swap.
   Saltwater = teal/cyan.   Freshwater = amber/gold.
   The dark navy foundation, typography, cards, spacing and navigation
   component are identical on both. Only the accent changes.
   ═══════════════════════════════════════════════════════════════════════════ */
body.fk-saltwater {
  --k-mode:             var(--k-cyan);
  --k-mode-2:           var(--k-teal);
  --k-mode-tint:        rgba(77,227,255,0.10);
  --k-mode-soft:        rgba(77,227,255,0.18);
  --k-mode-line:        rgba(77,227,255,0.28);
  --k-mode-ink:         #04121F;
}
body.fk-freshwater {
  --k-mode:             var(--k-amber);
  --k-mode-2:           var(--k-amber-deep);
  --k-mode-tint:        rgba(233,169,63,0.10);
  --k-mode-soft:        rgba(233,169,63,0.18);
  --k-mode-line:        rgba(233,169,63,0.30);
  --k-mode-ink:         #221402;

  /* Legacy freshwater "green" identity → premium amber (semantic remap) */
  --fresh:        #E9A93F !important;
  --fresh-lt:     #F7C978 !important;
  --fresh-dark:   #B57D1E !important;
  --fresh-border: rgba(233,169,63,0.24) !important;
  --fkmf-green:   #E9A93F !important;
}


/* ══ 3 · LEGACY → CANONICAL ALIAS LAYER ════════════════════════════════════
   Historic component-scoped token sets are re-pointed at the canonical
   palette so the whole product inherits Saltwater Home in one place instead
   of hundreds of one-off overrides. Mapping is SEMANTIC, not name-based.

     legacy accent/teal   → --k-teal-2   (#2dd4bf, Home's accent)
     legacy cyan          → --k-cyan-2   (#22d3ee)
     legacy gold/amber    → --k-gold     (#FCB548, Home's highlight)
     legacy primary text  → --k-text
     legacy secondary text→ --k-dim
     legacy panel/surface → Home panel values
     legacy hairline      → --k-line
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root-level legacy names (declared in each page's inline <style>) */
:root {
  --gold:       var(--k-gold) !important;
  --sun:        var(--k-gold) !important;
  --text-muted: var(--k-dim)  !important;
}

/* Koravi Guide card */
.fk-guide-card {
  --fg-teal:  var(--k-teal-2) !important;
  --fg-cyan:  var(--k-cyan-2) !important;
  --fg-text:  var(--k-text)   !important;
  --fg-dim:   var(--k-dim)    !important;
  --fg-panel: #0b1826         !important;
}

/* Fishing Window Predictor */
.fk-wp-card {
  --wp-teal:  var(--k-teal-2) !important;
  --wp-cyan:  var(--k-cyan-2) !important;
  --wp-text:  var(--k-text)   !important;
  --wp-dim:   var(--k-dim)    !important;
  --wp-panel: #0b1826         !important;
  --wp-gold:  var(--k-gold)   !important;
}

/* Koravi Conditions */
.fk-koravi-conditions {
  --fkc-teal: var(--k-teal-2) !important;
  --fkc-cyan: var(--k-cyan-2) !important;
  --fkc-gold: var(--k-gold)   !important;
  --fkc-text: var(--k-text)   !important;
  --fkc-dim:  var(--k-dim)    !important;
  --fkc-line: var(--k-line-2) !important;
}

/* Fishing Score water-fill card */
.k-water-score-card {
  --kws-teal:   var(--k-teal-2)   !important;
  --kws-gold:   var(--k-gold)     !important;
  --kws-panel:  #061831           !important;
  --kws-panel2: #0a1f3d           !important;
  --kws-line:   var(--k-line-2)   !important;
}

/* My Fishing (both water types) */
:root,
body.fk-saltwater #tab-myfishing,
body.fk-freshwater #tab-myfishing {
  --mf-teal:   var(--k-teal-2)  !important;
  --mf-teal2:  var(--k-teal)    !important;
  --mf-gold:   var(--k-gold)    !important;
  --mf-panel:  #061831          !important;
  --mf-panel2: #0a1f3d          !important;
  --mf-line:   var(--k-line-2)  !important;
  --mf-text:   var(--k-text)    !important;
  --mf-muted:  var(--k-dim)     !important;
  --mf-red:    var(--k-danger)  !important;
  --fkmf-teal: var(--k-teal-2)  !important;
  --fkmf-cyan: var(--k-cyan-2)  !important;
  --fkmf-gold: var(--k-gold)    !important;
  --fkmf-text: var(--k-text)    !important;
  --fkmf-dim:  var(--k-dim)     !important;
  --fkmf-line: var(--k-line-2)  !important;
}


/* ══ 4 · SHARED PRIMITIVES ═════════════════════════════════════════════════ */

/* ── 4.1 Card ─────────────────────────────────────────────────────────────
   Extracted from Home's .k-home-where / .k-home-gameplan shell. */
.k-card {
  position: relative;
  max-width: var(--k-container);
  margin: 0 auto var(--k-s-7);
  padding: var(--k-s-8);
  background: var(--k-surface);
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r-xl);
  box-shadow: var(--k-elev-2);
  overflow: hidden;
  text-align: left;
}
.k-card--warm  { background: var(--k-surface-warm); border-color: var(--k-highlight-line); }
.k-card--solid { background: var(--k-surface-solid); }
.k-card--flush { margin-bottom: 0; }
.k-card > * { position: relative; z-index: 1; }

/* Inner data cell (Home .k-gp-cell / .k-bl-reco-row) */
.k-cell {
  padding: var(--k-s-6) var(--k-s-7);
  border-radius: var(--k-r-md);
  background: var(--k-cell);
  border: 1px solid var(--k-line);
}
.k-cell-label {
  display: block;
  font-family: var(--k-font-head);
  font-size: var(--k-fz-label);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-accent);
  margin-bottom: var(--k-s-2);
}
.k-cell-value { font-size: var(--k-fz-value); color: var(--k-text); font-weight: 500; line-height: 1.45; }

/* ── 4.2 Section header (Home .k-gp-head / .k-bl-head) ────────────────── */
.k-sec-head { margin-bottom: var(--k-s-6); text-align: left; }
.k-sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-2);
  font-family: var(--k-font-head);
  font-size: var(--k-fz-eyebrow);
  letter-spacing: var(--k-ls-eyebrow);
  text-transform: uppercase;
  color: var(--k-accent);
}
.k-sec-eyebrow--warm { color: var(--k-highlight); }
.k-sec-eyebrow svg { width: 13px; height: 13px; flex-shrink: 0; }
.k-sec-sub { font-size: var(--k-fz-sub); color: var(--k-text-4); margin-top: var(--k-s-1); line-height: 1.5; }
.k-sec-title {
  font-family: var(--k-font-head);
  font-size: var(--k-fz-title);
  font-weight: 600;
  color: var(--k-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── 4.3 Buttons (Home .k-bl-btn / .k-gp-cta / .k-where-btn) ───────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-3);
  min-height: 44px;
  padding: 13px var(--k-s-7);
  border-radius: var(--k-r-md);
  border: 1px solid var(--k-line-strong);
  background: var(--k-cell-2);
  color: #EAFBFF;
  font-family: var(--k-font-head);
  font-size: 0.76rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--k-t) ease, border-color var(--k-t) ease,
              transform var(--k-t-fast) ease, box-shadow var(--k-t) ease, color var(--k-t) ease;
}
.k-btn:hover { transform: translateY(-1px); border-color: var(--k-accent-line-strong); background: var(--k-accent-soft); }
.k-btn:active { transform: translateY(0) scale(0.985); }
.k-btn:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.k-btn[disabled], .k-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.k-btn.is-loading { opacity: 0.7; pointer-events: none; }

.k-btn--primary {
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep));
  border-color: transparent;
  color: #2a1500;
  font-weight: 600;
  box-shadow: 0 10px 28px -12px rgba(252,181,72,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.k-btn--primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)); }
.k-btn--accent {
  background: linear-gradient(135deg, var(--k-accent-soft), var(--k-accent-tint));
  border-color: var(--k-accent-line-strong);
  color: #EAFBFF;
}
.k-btn--ghost { background: transparent; border-color: var(--k-line-2); }
.k-btn--block { width: 100%; }
.k-btn--sm { min-height: 36px; padding: 9px 15px; font-size: 0.7rem; letter-spacing: 1.2px; }
.k-btn--pill { border-radius: var(--k-r-pill); }

/* ── 4.4 Pill / tag / chip (Home .k-gp-also-chip) ──────────────────────── */
.k-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-2);
  font-family: var(--k-font-body);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--k-r-pill);
  background: var(--k-accent-tint);
  border: 1px solid var(--k-accent-line);
  color: #EAFBFF;
  white-space: nowrap;
}
.k-pill--warm { background: rgba(252,181,72,0.10); border-color: rgba(252,181,72,0.30); color: var(--k-gold); }
.k-pill--mode { background: var(--k-mode-tint); border-color: var(--k-mode-line); color: var(--k-mode); }
.k-pill--ok   { background: rgba(46,230,160,0.12); border-color: rgba(46,230,160,0.30); color: var(--k-success); }
.k-pill--bad  { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.30); color: var(--k-error); }

/* ── 4.5 Inputs / selects (Home .fk-ts-input) ──────────────────────────── */
.k-input, .k-select {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px var(--k-s-6);
  background: var(--k-cell);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  color: var(--k-text);
  font-family: var(--k-font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--k-t) ease, box-shadow var(--k-t) ease;
}
.k-input::placeholder { color: rgba(230,245,255,0.42); }
.k-input:focus, .k-select:focus {
  border-color: var(--k-accent);
  box-shadow: 0 0 0 3px var(--k-accent-tint);
}
.k-input[disabled], .k-select[disabled] { opacity: 0.5; cursor: not-allowed; }
.k-field-label {
  display: block;
  font-family: var(--k-font-head);
  font-size: var(--k-fz-label);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-dim);
  margin-bottom: var(--k-s-3);
}

/* ── 4.6 States: loading / empty / error ───────────────────────────────── */
@keyframes k-ds-shimmer { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }
.k-loading, .k-skel {
  border-radius: var(--k-r-sm);
  background: linear-gradient(90deg, rgba(77,227,255,0.06), rgba(77,227,255,0.14), rgba(77,227,255,0.06));
  animation: k-ds-shimmer 1.6s ease-in-out infinite;
  min-height: 1.2em;
  color: transparent !important;
}
.k-loading-text {
  font-family: var(--k-font-head);
  font-size: var(--k-fz-label);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-dim);
}
.k-empty {
  padding: var(--k-s-7);
  border-radius: var(--k-r-md);
  background: var(--k-inset);
  border: 1px dashed var(--k-line-2);
  color: var(--k-text-4);
  font-size: var(--k-fz-body);
  line-height: 1.55;
  text-align: left;
}
.k-error {
  padding: var(--k-s-5) var(--k-s-6);
  border-radius: var(--k-r-md);
  background: rgba(242,85,90,0.08);
  border: 1px solid rgba(242,85,90,0.28);
  border-left: 3px solid var(--k-danger);
  color: #ffdcdc;
  font-size: var(--k-fz-body);
  line-height: 1.5;
}

/* ── 4.7 Modal / dialog ────────────────────────────────────────────────── */
.k-modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2,8,20,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: var(--k-s-7);
}
.k-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #0a1f3d, #061831);
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r-2xl);
  box-shadow: var(--k-elev-pop);
  padding: var(--k-s-9) var(--k-s-8);
  text-align: left;
}

/* ── 4.8 Mode switch (Saltwater ⇄ Freshwater) ──────────────────────────── */
.k-mode-switch, .saltwater-link {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(180deg, var(--k-mode-soft), var(--k-mode-tint)) !important;
  border: 1px solid var(--k-mode-line) !important;
  border-radius: var(--k-r-pill) !important;
  padding: 10px 20px !important;
  min-height: 40px;
  color: var(--k-mode) !important;
  text-decoration: none !important;
  cursor: pointer; white-space: nowrap;
  font-family: var(--k-font-head) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: background var(--k-t) ease, border-color var(--k-t) ease,
              transform var(--k-t-fast) ease, box-shadow var(--k-t) ease, color var(--k-t) ease !important;
}
.k-mode-switch svg, .saltwater-link svg { opacity: 0.9; flex-shrink: 0; }
.k-mode-switch:hover, .saltwater-link:hover {
  transform: translateY(-1px);
  border-color: var(--k-mode) !important;
  color: var(--k-text) !important;
  box-shadow: 0 8px 22px -8px var(--k-mode-soft), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.k-mode-switch:active, .saltwater-link:active { transform: translateY(0) scale(0.98); }
.k-mode-switch:focus-visible, .saltwater-link:focus-visible { outline: 2px solid var(--k-mode); outline-offset: 3px; }


/* ══ 5 · ADOPTION LAYER ════════════════════════════════════════════════════
   Legacy classes used across Koravi Guide / Explore / My Fishing / License /
   Community are re-pointed at the primitives above. This is what removes the
   "built by different developers" feel without touching any markup or JS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5.0 Neutralise the legacy "GLOBAL CENTERING PASS" ─────────────────────
   koravi-refined.css §"GLOBAL CENTERING PASS 1–3" belongs to an older design
   era and is the single biggest reason other tabs do not read like Home.
   Home is left-aligned, so content alignment is reset here. Layout centering
   (auto side margins on section wrappers) is intentionally left in place. */
.report-section,
.tab-header-title, .tab-header-sub,
.tab-content .card > h2,
.tab-content .card > .card-title,
.tab-content .card > p,
.tab-content .card > .section-tip,
.tab-content .card > label,
.tab-content .card > .form-label,
.tab-content .card > .disclaimer,
.ai-tool-section-label, .ai-target-label, .rig-label, .field-group-label,
.ai-species-grid, .target-pills, .rig-technique-pills, .rig-species-pills,
.species-filter-tabs,
.section-tip, .section-hint, .helper-text,
.card .subtitle, .card > small,
.species-modal-content, .spot-modal,
#tab-license label {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.report-section > *,
.species-modal-content > *, .spot-modal > * { margin-left: 0; margin-right: 0; }
.card > button:only-child,
.card > .btn-primary:only-child,
.card > .btn-sun:only-child,
.card > .btn-outline:only-child { margin-left: 0 !important; margin-right: 0 !important; justify-content: center; }
.card > div[style*="display:flex"],
.card > div[style*="display: flex"] { justify-content: flex-start !important; }
#report-date { text-align: left !important; margin: var(--k-s-5) 0 var(--k-s-8) 0 !important; }
#report-content { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
.report-section .report-label { justify-content: flex-start !important; }

/* ── 5.1 Every legacy .card becomes the canonical Home card ────────────── */
.tab-content .card,
.tab-content .report-section,
.tab-content .ai-card,
.tab-content .info-card {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-xl) !important;
  box-shadow: var(--k-elev-2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-align: left !important;
  padding: var(--k-s-8) !important;
}
.tab-content .card:hover,
.tab-content .ai-card:hover,
.tab-content .info-card:hover {
  transform: none !important;
  border-color: var(--k-line-strong) !important;
  box-shadow: var(--k-elev-2) !important;
}
/* Home has no decorative bar on its sections — remove it everywhere. */
.tab-content .card::before,
.tab-content .report-section::before,
.tab-content .ai-card::before,
#tab-myfishing > .section-wrap > .card::before,
#tab-myfishing > .section-wrap > .report-section::before,
body.fk-saltwater #tab-myfishing > .section-wrap > .card::before,
body.fk-freshwater #tab-myfishing > .section-wrap > .card::before,
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section::before,
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: none !important;
}

/* Section width matches Home's 960px reading measure */
.tab-content .section-wrap { max-width: 1000px !important; margin: 0 auto !important; padding: var(--k-s-8) var(--k-s-7) !important; }

/* ── 5.2 Legacy card headings become Home section eyebrows ─────────────── */
.tab-content .card > h2,
.tab-content .card h2,
.tab-content .ai-card > h3,
.tab-content .report-section > h2 {
  display: flex !important;
  align-items: center !important;
  gap: var(--k-s-2) !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: var(--k-ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--k-accent) !important;
  border: none !important;
  padding-left: 0 !important;
  margin: 0 0 var(--k-s-1) 0 !important;
}
.tab-content .card > h2::before,
.tab-content .card h2::before { display: none !important; content: none !important; }
.tab-content .card h2 .h2-icon,
.tab-content .card h2 > svg {
  width: 13px !important; height: 13px !important;
  margin-right: 0 !important;
  color: var(--k-accent) !important;
  stroke: var(--k-accent) !important;
  flex-shrink: 0;
}
.tab-content .section-tip {
  font-size: var(--k-fz-sub) !important;
  color: var(--k-text-4) !important;
  text-align: left !important;
  margin: var(--k-s-1) 0 var(--k-s-7) 0 !important;
  line-height: 1.5 !important;
  max-width: 62ch;
}

/* Kill the legacy force-centering layer — Home reads left-aligned. */
#tab-explore .card,
#tab-explore .section-wrap > .card,
#tab-license .card,
#tab-myfishing .card,
#tab-reports .card,
#tab-explore .bait-shop-finder,
#tab-explore .nautical-chart,
#tab-explore .species-search-wrap { text-align: left !important; }
#tab-explore input[type="text"],
#baitshop-input,
#tab-license select,
#tab-license input,
#tab-license .state-info,
#tab-license .who-needs-license,
#tab-license .license-disclaimer { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
#tab-explore .card > div:has(> input + button),
#tab-explore .card > div:has(> button),
#tab-explore .card > div[style*="flex"] { justify-content: flex-start !important; }
#tab-license .state-info,
#tab-license .who-needs-license { text-align: left !important; }
#tab-license .state-info h3,
#tab-license .who-needs-license h3,
#tab-license .state-info .state-name { text-align: left !important; }
#tab-myfishing .catch-log-field label,
#tab-myfishing .k-habitat-label,
#tab-myfishing .k-habitat-row,
#tab-myfishing .k-habitat-chips { text-align: left !important; justify-content: flex-start !important; }
#tab-myfishing .report-section { text-align: left !important; }
#tab-myfishing .report-section #report-date { margin-left: 0 !important; margin-right: 0 !important; }
#tab-myfishing #report-content { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
#tab-myfishing .catch-log-grid,
#tab-myfishing .catch-form,
#tab-myfishing form { justify-content: flex-start !important; justify-items: stretch !important; }
#tab-myfishing .catch-upload-area,
#tab-myfishing .add-photo,
#tab-myfishing #log-btn,
#tab-myfishing .btn-primary,
#tab-myfishing .btn-sun { margin-left: 0 !important; margin-right: 0 !important; }

/* ── 5.3 Tab page headers align with Home's typographic hierarchy ─────── */
.tab-header-banner {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 30px var(--k-s-7) 0 !important;
  text-align: left !important;
}
.tab-header-eyebrow {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--k-accent) !important;
  margin-bottom: var(--k-s-2) !important;
}
.tab-header-title {
  font-family: var(--k-font-head) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: var(--k-text) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.tab-header-sub {
  font-size: var(--k-fz-sub) !important;
  color: var(--k-text-4) !important;
  margin-top: var(--k-s-2) !important;
  line-height: 1.55 !important;
  max-width: 62ch;
}

/* ── 5.4 Buttons across the product ───────────────────────────────────── */
.btn-primary, button.btn-primary, .btn-sun, a.btn-sun,
.baitshop-search-btn, #baitshop-search, #chat-send,
#lake-search-btn, .buy-license-btn {
  border-radius: var(--k-r-md) !important;
  min-height: 44px;
  padding: 13px var(--k-s-7) !important;
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)) !important;
  border: 1px solid transparent !important;
  color: #2a1500 !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 28px -12px rgba(252,181,72,0.55), inset 0 1px 0 rgba(255,255,255,0.35) !important;
  transition: filter var(--k-t) ease, transform var(--k-t-fast) ease !important;
}
.btn-primary:hover, button.btn-primary:hover, .btn-sun:hover,
#baitshop-search:hover, #chat-send:hover, #lake-search-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary svg, .btn-sun svg, #baitshop-search svg, #chat-send svg { stroke: #2a1500 !important; }
.btn-primary[disabled], .btn-sun[disabled] { opacity: 0.5 !important; filter: none !important; }

#baitshop-gps, #lake-gps-btn, .btn-secondary, .btn-ghost {
  border-radius: var(--k-r-md) !important;
  min-height: 44px;
  padding: 13px var(--k-s-7) !important;
  background: var(--k-cell-2) !important;
  border: 1px solid var(--k-line-strong) !important;
  color: #EAFBFF !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.76rem !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background var(--k-t) ease, border-color var(--k-t) ease, transform var(--k-t-fast) ease !important;
}
#baitshop-gps:hover, #lake-gps-btn:hover, .btn-secondary:hover {
  background: var(--k-accent-soft) !important;
  border-color: var(--k-accent-line-strong) !important;
  transform: translateY(-1px);
}

/* ── 5.5 Inputs / selects across the product ──────────────────────────── */
.tab-content input[type="text"],
.tab-content input[type="search"],
.tab-content input[type="number"],
.tab-content input[type="date"],
.tab-content input[type="email"],
.tab-content textarea,
.tab-content select {
  background: var(--k-cell) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-md) !important;
  color: var(--k-text) !important;
  font-family: var(--k-font-body) !important;
  font-size: 0.9rem !important;
  padding: 12px var(--k-s-6) !important;
  min-height: 46px;
  outline: none !important;
  transition: border-color var(--k-t) ease, box-shadow var(--k-t) ease !important;
}
.tab-content textarea { min-height: 92px; }
.tab-content input:focus, .tab-content textarea:focus, .tab-content select:focus {
  border-color: var(--k-accent) !important;
  box-shadow: 0 0 0 3px var(--k-accent-tint) !important;
}
.tab-content input::placeholder, .tab-content textarea::placeholder { color: rgba(230,245,255,0.42) !important; }
.tab-content label { color: var(--k-dim) !important; }
.tab-content .catch-log-field label,
.tab-content .k-habitat-label {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: var(--k-ls-label) !important;
  text-transform: uppercase !important;
  color: var(--k-dim) !important;
}

/* ── 5.6 Chips / filter pills (Explore map, patterns, feed tabs) ──────── */
.fk-chip, .pattern-tab-btn, .k-feed-tab, .species-filter-tab {
  border-radius: var(--k-r-pill) !important;
  background: var(--k-accent-tint) !important;
  border: 1px solid var(--k-accent-line) !important;
  color: #EAFBFF !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.7rem !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  padding: 8px var(--k-s-6) !important;
  min-height: 34px;
  cursor: pointer;
  transition: background var(--k-t) ease, border-color var(--k-t) ease, transform var(--k-t-fast) ease !important;
}
.fk-chip:hover, .pattern-tab-btn:hover, .k-feed-tab:hover, .species-filter-tab:hover {
  transform: translateY(-1px);
  border-color: var(--k-accent-line-strong) !important;
}
.fk-chip.active, .pattern-tab-btn.active, .k-feed-tab.active, .species-filter-tab.active {
  background: var(--k-mode-soft) !important;
  border-color: var(--k-mode) !important;
  color: var(--k-mode) !important;
}
/* Category dots: brand palette only (was a rainbow of unrelated hues) */
.fk-chip .fk-chip-dot {
  background: var(--k-accent) !important;
  color: var(--k-accent) !important;
  box-shadow: 0 0 6px currentColor;
}
.fk-chip[data-cat="reef"] .fk-chip-dot,
.fk-chip[data-cat="pier"] .fk-chip-dot,
.fk-chip[data-cat="beach"] .fk-chip-dot,
.fk-chip[data-cat="bridge"] .fk-chip-dot { background: var(--k-gold) !important; color: var(--k-gold) !important; }
.fk-chip[data-cat="wreck"] .fk-chip-dot,
.fk-chip[data-cat="offshore"] .fk-chip-dot,
.fk-chip[data-cat="ledge"] .fk-chip-dot { background: var(--k-teal-2) !important; color: var(--k-teal-2) !important; }
.fk-chip[data-cat="saved"] .fk-chip-dot { background: #fff !important; color: #fff !important; }

/* Search fields with a leading icon keep room for it */
.fk-map-search input,
.fk-map-search #fk-map-search-input { padding-left: 40px !important; }
.fk-map-search-icon { color: var(--k-dim) !important; }
.fk-map-search-results,
.fk-salt-suggest,
.fk-ts-results {
  background: #07293f !important;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-md) !important;
  box-shadow: var(--k-elev-pop) !important;
}

/* ── 5.7 Premium gates & subscription cards (injected by JS) ──────────── */
.fk-pc-lock {
  border-radius: var(--k-r-xl) !important;
  background: var(--k-surface-warm) !important;
  border: 1px solid var(--k-highlight-line) !important;
  padding: var(--k-s-8) !important;
  text-align: left !important;
}
.fk-pc-lock::before { display: none !important; content: none !important; }
.fk-pc-lock-inner { align-items: flex-start !important; text-align: left !important; }
.fk-pc-lock-eyebrow {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: var(--k-ls-label) !important;
  text-transform: uppercase !important;
  color: var(--k-gold) !important;
}
.fk-pc-lock-title {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-title) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--k-text) !important;
}
.fk-pc-lock-lede { font-size: var(--k-fz-body) !important; color: var(--k-text-3) !important; line-height: 1.55 !important; }
.fk-pc-lock-cta, .fk-sub-card button.fk-sub-primary {
  align-self: flex-start !important;
  border-radius: var(--k-r-md) !important;
  min-height: 44px;
  padding: 12px var(--k-s-8) !important;
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)) !important;
  border: 1px solid transparent !important;
  color: #2a1500 !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 28px -12px rgba(252,181,72,0.55), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.fk-sub-card {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-xl) !important;
  padding: var(--k-s-8) !important;
  text-align: left !important;
  box-shadow: var(--k-elev-2) !important;
}
.fk-sub-card .fk-sub-title {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: var(--k-ls-label) !important;
  text-transform: uppercase !important;
  color: var(--k-gold) !important;
}
.fk-sub-card .fk-sub-status {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-title) !important;
  color: var(--k-text) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.fk-sub-card .fk-sub-meta { font-size: var(--k-fz-sub) !important; color: var(--k-text-4) !important; }
.fk-sub-card .fk-sub-actions { justify-content: flex-start !important; }
.fk-sub-card button {
  border-radius: var(--k-r-md) !important;
  min-height: 42px;
  background: var(--k-cell-2) !important;
  border: 1px solid var(--k-line-strong) !important;
  color: #EAFBFF !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.72rem !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
}

/* Premium component internals → brand palette */
.fk-pc-eyebrow, .fk-pc-bait-match { color: var(--k-accent) !important; }
.fk-pc-reasons li::before { color: var(--k-accent) !important; }
.fk-pc-window-dot.hi { background: var(--k-accent) !important; box-shadow: 0 0 12px var(--k-accent-line-strong) !important; }
.fk-pc-window-dot.mid { background: var(--k-gold) !important; box-shadow: 0 0 8px rgba(252,181,72,0.5) !important; }
.fk-pc-window-dot.lo { background: var(--k-dim) !important; }
.fk-pc-recommend { border-left-color: var(--k-accent) !important; background: var(--k-accent-tint) !important; }
.fk-pc-score { text-shadow: 0 0 20px var(--k-accent-tint) !important; }
.fk-pc-bait-medal.gold { background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold)) !important; color: #2a1500 !important; }

/* ── 5.8 Community feed + water-type pills ────────────────────────────── */
.k-comm-card, .k-feed-card {
  background: var(--k-cell) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-lg) !important;
}
.k-wt-pill, .k-comm-wt {
  font-family: var(--k-font-head) !important;
  border-radius: var(--k-r-pill) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.k-wt-saltwater, .k-comm-wt.salt {
  background: rgba(77,227,255,0.14) !important;
  color: var(--k-cyan) !important;
  border: 1px solid rgba(77,227,255,0.40) !important;
}
.k-wt-freshwater, .k-comm-wt.fresh {
  background: rgba(233,169,63,0.14) !important;
  color: var(--k-amber-lt) !important;
  border: 1px solid rgba(233,169,63,0.40) !important;
}
.k-comm-view, .k-feed-link { color: var(--k-accent) !important; }

/* ── 5.9 Status / badge semantics unified ─────────────────────────────── */.badge-good, .legal-yes, .open-yes { color: var(--k-success) !important; }
.badge-good, .legal-yes {
  background: rgba(46,230,160,0.12) !important;
  border: 1px solid rgba(46,230,160,0.28) !important;
  border-radius: var(--k-r-pill) !important;
}
.badge-warn { color: var(--k-gold) !important; background: rgba(252,181,72,0.12) !important; border: 1px solid rgba(252,181,72,0.28) !important; }
.badge-bad, .legal-no, .open-no { color: var(--k-error) !important; }

/* ── 5.10 My Fishing — retire the bespoke overhaul's competing typography ─   The 2026-05 My Fishing pass introduced its own fonts (Space Grotesk /
   IBM Plex Mono), centred headings and a teal CTA. Those are re-pointed at
   the canonical Home language here (same specificity, declared later). */
/* Card shells on both water types use the shared foundation hairline */
body.fk-saltwater #tab-myfishing > .section-wrap > .card,
body.fk-freshwater #tab-myfishing > .section-wrap > .card,
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section,
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line-2) !important;
  border-top: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-xl) !important;
  box-shadow: var(--k-elev-2) !important;
  padding: var(--k-s-8) !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card::after,
body.fk-freshwater #tab-myfishing > .section-wrap > .card::after,
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section::after,
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section::after { display: none !important; content: none !important; }

body.fk-saltwater #tab-myfishing .card > h2,
body.fk-freshwater #tab-myfishing .card > h2,
body.fk-saltwater #tab-myfishing .card h2,
body.fk-freshwater #tab-myfishing .card h2 {
  display: flex !important;
  align-items: center !important;
  gap: var(--k-s-2) !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: var(--k-ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--k-accent) !important;
  padding-left: 0 !important;
  border: none !important;
  margin: 0 0 var(--k-s-1) 0 !important;
}
body.fk-saltwater #tab-myfishing .card > h2::before,
body.fk-freshwater #tab-myfishing .card > h2::before,
body.fk-saltwater #tab-myfishing .card h2::before,
body.fk-freshwater #tab-myfishing .card h2::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}
body.fk-saltwater #tab-myfishing .card .section-tip,
body.fk-freshwater #tab-myfishing .card .section-tip {
  font-family: var(--k-font-body) !important;
  font-size: var(--k-fz-sub) !important;
  color: var(--k-text-4) !important;
  text-align: left !important;
  margin: var(--k-s-1) 0 var(--k-s-7) 0 !important;
}
body.fk-saltwater #tab-myfishing .report-section,
body.fk-freshwater #tab-myfishing .report-section { text-align: left !important; }
body.fk-saltwater #tab-myfishing .report-section .report-label,
body.fk-freshwater #tab-myfishing .report-section .report-label {
  display: inline-flex !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-eyebrow) !important;
  letter-spacing: var(--k-ls-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--k-accent) !important;
  margin: 0 0 var(--k-s-5) 0 !important;
  text-align: left !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-date,
body.fk-freshwater #tab-myfishing .report-section #report-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--k-s-3) !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 8px var(--k-s-7) !important;
  border-radius: var(--k-r-pill) !important;
  background: rgba(252,181,72,0.08) !important;
  border: 1px solid rgba(252,181,72,0.30) !important;
  color: var(--k-gold) !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.8rem !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
  margin: 0 0 var(--k-s-8) 0 !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-btn,
body.fk-freshwater #tab-myfishing .report-section #report-btn {
  border-radius: var(--k-r-md) !important;
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)) !important;
  color: #2a1500 !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 28px -12px rgba(252,181,72,0.55), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
body.fk-saltwater #tab-myfishing #report-content,
body.fk-freshwater #tab-myfishing #report-content {
  margin: var(--k-s-7) 0 0 0 !important;
  max-width: 100% !important;
  background: var(--k-inset) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-md) !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-label,
body.fk-freshwater #tab-myfishing .k-habitat-label {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: var(--k-ls-label) !important;
  text-transform: uppercase !important;
  color: var(--k-dim) !important;
  text-align: left !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chips,
body.fk-freshwater #tab-myfishing .k-habitat-chips { justify-content: flex-start !important; }
/* Log This Catch → canonical gold primary (was a teal gradient) */
body.fk-saltwater #tab-myfishing #log-catch-btn,
body.fk-freshwater #tab-myfishing #log-catch-btn,
body.fk-saltwater #tab-myfishing .btn-sun,
body.fk-freshwater #tab-myfishing .btn-sun {
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)) !important;
  border: 1px solid transparent !important;
  border-radius: var(--k-r-md) !important;
  color: #2a1500 !important;
  font-family: var(--k-font-head) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 28px -12px rgba(252,181,72,0.55), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
body.fk-saltwater #tab-myfishing #log-catch-btn svg,
body.fk-freshwater #tab-myfishing #log-catch-btn svg { stroke: #2a1500 !important; }
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="text-align:center"]:has(> #log-catch-btn),
body.fk-freshwater #tab-myfishing > .section-wrap > .card > div[style*="text-align:center"]:has(> #log-catch-btn) {
  text-align: left !important;
}
/* Empty states + pattern chips */
body.fk-saltwater #tab-myfishing .pb-card,
body.fk-freshwater #tab-myfishing .pb-card {
  background: var(--k-cell) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-md) !important;
}
body.fk-saltwater #tab-myfishing .pb-label,
body.fk-freshwater #tab-myfishing .pb-label {
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-label) !important;
  letter-spacing: var(--k-ls-label) !important;
  color: var(--k-accent) !important;
}
body.fk-saltwater #tab-myfishing .pattern-tab-btn.active,
body.fk-freshwater #tab-myfishing .pattern-tab-btn.active {
  background: var(--k-mode-soft) !important;
  border-color: var(--k-mode) !important;
  color: var(--k-mode) !important;
}


/* ══ 6 · NAVIGATION ════════════════════════════════════════════════════════
   One nav component for both water types. Per-tab accents stay strictly
   inside the brand palette (cyan/teal for discovery, gold for
   commerce/records). No purple, no unrelated orange, no arbitrary hues.
   ═══════════════════════════════════════════════════════════════════════════ */
#main-nav {
  background: rgba(3,10,20,0.96) !important;
  border-bottom: 1px solid var(--k-line-2) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.55) !important;
}
.nav-tab {
  border-bottom: 2px solid transparent !important;
  transition: background var(--k-t) ease, border-color var(--k-t) ease !important;
}
.nav-tab:hover { background: var(--k-mode-tint) !important; }
.nav-icon-svg { color: var(--k-dim) !important; }
.nav-tab .nav-icon-svg, .nav-tab .nav-label { color: var(--k-dim) !important; opacity: 1 !important; }
/* Restrained active treatment — a single hairline underline, no neon glow */
.nav-tab.active::before, .nav-tab.active::after,
#main-nav .nav-tab.active::before, #main-nav .nav-tab.active::after {
  display: none !important; content: none !important;
}
.nav-tab.active .nav-icon-svg,
#main-nav .nav-tab.active .nav-icon-svg { filter: none !important; transform: none !important; }
.nav-tab.active .nav-label,
#main-nav .nav-tab.active .nav-label { text-shadow: none !important; font-weight: 600 !important; }
#main-nav .nav-tab.active { border-bottom-width: 2px !important; }
.nav-label {
  font-family: var(--k-font-head) !important;
  font-size: 0.6rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--k-dim) !important;
}
/* Active — water-type accent by default */
#main-nav .nav-tab.active,
.nav-tab.active { border-bottom-color: var(--k-mode) !important; background: var(--k-mode-tint) !important; color: var(--k-mode) !important; }
#main-nav .nav-tab.active .nav-icon-svg, #main-nav .nav-tab.active .nav-label,
.nav-tab.active .nav-icon-svg, .nav-tab.active .nav-label { color: var(--k-mode) !important; }
/* Semantic differentiation, brand palette only */
#main-nav .nav-tab[data-tab="ai"].active,
.nav-tab[data-tab="ai"].active { border-bottom-color: var(--k-teal-2) !important; background: rgba(45,212,191,0.09) !important; }
#main-nav .nav-tab[data-tab="ai"].active .nav-icon-svg,
#main-nav .nav-tab[data-tab="ai"].active .nav-label,
.nav-tab[data-tab="ai"].active .nav-icon-svg,
.nav-tab[data-tab="ai"].active .nav-label { color: var(--k-teal-2) !important; }
#main-nav .nav-tab[data-tab="reports"].active,
#main-nav .nav-tab[data-tab="license"].active,
#main-nav .nav-tab[data-tab="myfishing"].active,
.nav-tab[data-tab="reports"].active,
.nav-tab[data-tab="license"].active,
.nav-tab[data-tab="myfishing"].active { border-bottom-color: var(--k-gold) !important; background: rgba(252,181,72,0.09) !important; }
#main-nav .nav-tab[data-tab="reports"].active .nav-icon-svg,
#main-nav .nav-tab[data-tab="reports"].active .nav-label,
#main-nav .nav-tab[data-tab="license"].active .nav-icon-svg,
#main-nav .nav-tab[data-tab="license"].active .nav-label,
#main-nav .nav-tab[data-tab="myfishing"].active .nav-icon-svg,
#main-nav .nav-tab[data-tab="myfishing"].active .nav-label,
.nav-tab[data-tab="reports"].active .nav-icon-svg,
.nav-tab[data-tab="reports"].active .nav-label,
.nav-tab[data-tab="license"].active .nav-icon-svg,
.nav-tab[data-tab="license"].active .nav-label,
.nav-tab[data-tab="myfishing"].active .nav-icon-svg,
.nav-tab[data-tab="myfishing"].active .nav-label { color: var(--k-gold) !important; }
.nav-tab:focus-visible { outline: 2px solid var(--k-mode); outline-offset: -2px; }


/* ══ 7 · FRESHWATER ACCENT APPLICATION ═════════════════════════════════════
   Same foundation as Saltwater; the amber accent marks water-type identity:
   mode badge, active states, score highlights, target species, prime windows.
   Teal/cyan is retained for structure so Freshwater does not become "all gold".
   ═══════════════════════════════════════════════════════════════════════════ */
body.fk-freshwater .k-hero-mode-badge,
body.fk-freshwater .k-mode-badge,
body.fk-freshwater .k-region-badge { color: var(--k-amber) !important; border-color: rgba(233,169,63,0.40) !important; background: rgba(233,169,63,0.12) !important; }
body.fk-freshwater .tide-low { color: var(--k-amber-lt) !important; }
body.fk-freshwater .k-gp-hero-activity.is-high { color: var(--k-amber) !important; }
body.fk-freshwater .k-gp-hero-activity.is-high .k-gp-activity-dot { background: var(--k-amber) !important; }
body.fk-freshwater .cat-accent-bass::before,
body.fk-freshwater .cat-accent-trout::before,
body.fk-freshwater .cat-accent-pike::before,
body.fk-freshwater .cat-accent-all::before,
body.fk-freshwater .cat-accent-panfish::before,
body.fk-freshwater .cat-accent-catfish::before,
body.fk-freshwater .cat-accent-walleye::before { display: none !important; }
/* Freshwater location status strip + stats → amber identity (was green) */
body.fk-freshwater .k-stat-value,
body.fk-freshwater .k-status-cta,
body.fk-freshwater .k-status-retry { color: var(--k-amber) !important; }
body.fk-freshwater .k-status-cta { border: 1px dashed rgba(233,169,63,0.42) !important; }
body.fk-freshwater .k-status-cta:hover { background: rgba(233,169,63,0.08) !important; }
body.fk-freshwater .k-status-dot { background: var(--k-amber) !important; box-shadow: 0 0 0 4px rgba(233,169,63,0.16) !important; }
body.fk-freshwater .nav-tab:hover { background: rgba(233,169,63,0.08) !important; }


/* ══ 7b · BAIT & LURE SELECTOR — retire the purple sub-theme ══════════════
   The Lure Selector shipped with a violet accent (#C7A6FF / #B085FF) that
   belongs to no other part of the product. It now uses the canonical gold
   highlight, while the Bait Selector keeps the canonical cyan. ═══════════ */
.k-premium-card { border-radius: var(--k-r-2xl) !important; }
.k-premium-card::before { border-radius: var(--k-r-2xl) !important; }
.k-premium-card.k-premium-lure::before {
  background: linear-gradient(140deg, rgba(252,181,72,0.30), rgba(252,181,72,0) 40%, rgba(252,181,72,0) 60%, rgba(252,181,72,0.20)) !important;
}
.k-premium-card.k-premium-lure:hover {
  box-shadow: 0 0 0 1px rgba(252,181,72,0.20), 0 36px 90px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.k-premium-lure .k-premium-title-em,
.k-premium-lure .k-cond-icon,
.k-premium-lure .k-premium-section-label { color: var(--k-gold) !important; }
.k-premium-lure .k-cond { border-color: rgba(252,181,72,0.18) !important; }
.k-premium-lure .k-premium-hero-icon { color: var(--k-gold) !important; border-color: rgba(252,181,72,0.30) !important; }
.k-premium-card.k-premium-lure #lure-btn,
.k-premium-card.k-premium-lure .k-premium-cta {
  color: #2a1500 !important;
  background: linear-gradient(135deg, var(--k-gold-lt), var(--k-gold) 55%, var(--k-gold-deep)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 14px 34px -14px rgba(252,181,72,0.65) !important;
}
/* Section labels and pill rows follow Home's left-aligned hierarchy */
.k-premium-section-label {
  text-align: left !important;
  font-family: var(--k-font-head) !important;
  font-size: var(--k-fz-eyebrow) !important;
  letter-spacing: var(--k-ls-eyebrow) !important;
  color: var(--k-accent) !important;
}
.k-premium-pills-wrap .target-pills,
.k-premium-pills-wrap #bait-target-pills,
.k-premium-pills-wrap #lure-target-pills { justify-content: flex-start !important; }
.k-premium-title { font-family: var(--k-font-head) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
.k-premium-sub { color: var(--k-text-3) !important; }


/* ══ 8 · RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .k-card { padding: var(--k-s-7); border-radius: var(--k-r-lg); }
  .tab-content .card,
  .tab-content .report-section,
  .tab-content .ai-card { padding: var(--k-s-7) var(--k-s-6) !important; border-radius: var(--k-r-lg) !important; }
  .tab-content .section-wrap { padding: var(--k-s-6) var(--k-s-4) !important; }
  .tab-header-banner { padding: 24px var(--k-s-6) 0 !important; }
  .tab-header-title { font-size: 1.35rem !important; }
}
@media (max-width: 520px) {
  .k-btn, .btn-primary, .btn-sun, #baitshop-gps, #lake-gps-btn { width: 100%; }
  .k-btn--inline { width: auto; }
  .k-modal { max-width: 100%; padding: var(--k-s-8) var(--k-s-7); border-radius: var(--k-r-xl); }
  .tab-header-title { font-size: 1.25rem !important; }
  .k-sec-eyebrow { font-size: 0.68rem; letter-spacing: 2px; }
  .fk-chip, .pattern-tab-btn, .k-feed-tab { min-height: 36px; }
  .tab-content .card h2 { font-size: 0.68rem !important; letter-spacing: 2px !important; }
}
/* Touch targets */
@media (hover: none) {
  .k-btn, .btn-primary, .btn-sun, .fk-chip, .nav-tab, .k-mode-switch, .saltwater-link { min-height: 44px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-mode-switch, .saltwater-link, .fk-chip, .nav-tab { transition: none !important; }
  .k-btn:hover, .k-mode-switch:hover, .saltwater-link:hover, .fk-chip:hover { transform: none !important; }
}

/* ── §6 Mobile alignment pass ─────────────────────────────────────────
   Fixes cramped/clipped rows at phone widths: the active-location line
   was ellipsized ("Gu…") next to the location CTA, the mode-switch pill
   was centered while every other location action is left-aligned, and
   the Window Predictor stat values were clipped in a 3-up grid. */
@media (max-width: 560px) {
  .k-status-strip { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .k-status-left { width: 100%; }
  .k-status-loc { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .k-status-right { width: 100%; justify-content: flex-start !important; flex-wrap: wrap; }
  .k-status-cta { width: 100%; }
  .k-loc-block .saltwater-link { align-self: flex-start !important; }
  .k-region-row { justify-content: flex-start !important; }
  .k-hero-auth { flex-direction: column; align-items: flex-start; }
  .fk-wp-strip { grid-template-columns: 1fr !important; }
  .fk-wp-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; }
  .fk-wp-stat-val { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .fk-wp-stat-lbl { margin-top: 0 !important; }
}

/* ══ 6b · MOBILE BOTTOM NAVIGATION — Fish Koravi premium tab bar ══════════
   Floating navy card that matches the app's premium section aesthetic:
   layered depth, hairline cyan light-line, restrained accent on the active
   tab, secondary-but-legible inactive tabs, full safe-area handling.
   Structure, tabs, labels and behaviour are unchanged. */
@media (max-width: 720px) {
  #main-nav {
    position: fixed !important;
    left: 10px !important; right: 10px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    top: auto !important;
    z-index: 900 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 3px !important;
    padding: 7px 7px 8px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(12,30,46,0.92) 0%, rgba(5,17,29,0.96) 100%) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    border: 1px solid rgba(77,227,255,0.13) !important;
    box-shadow:
      0 22px 48px -16px rgba(0,0,0,0.88),
      0 2px 0 rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.055) !important;
    overflow: visible !important;
  }
  /* Hairline "water line" across the top edge of the bar */
  #main-nav::after {
    content: '';
    position: absolute; top: -1px; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77,227,255,0.42), transparent);
    border-radius: 1px; pointer-events: none;
  }

  #main-nav .nav-tab {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 52px !important;
    padding: 8px 2px 7px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .12s ease !important;
  }
  #main-nav .nav-tab:active { transform: scale(0.96) !important; }

  #main-nav .nav-tab .nav-icon-svg {
    width: 22px !important; height: 22px !important;
    stroke-width: 1.75 !important;
    color: rgba(150,188,212,0.66) !important;
    filter: none !important;
    transition: color .2s ease, transform .2s ease, filter .2s ease !important;
  }
  #main-nav .nav-tab .nav-label {
    font-family: var(--k-font-head) !important;
    font-size: 0.545rem !important;
    font-weight: 500 !important;
    letter-spacing: 1.15px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    color: rgba(150,188,212,0.66) !important;
    transition: color .2s ease, opacity .2s ease !important;
  }

  /* ── Active: cyan-tinted card + hairline border + top accent pill ── */
  #main-nav .nav-tab.active {
    background:
      linear-gradient(180deg, rgba(77,227,255,0.14) 0%, rgba(77,227,255,0.045) 100%) !important;
    border-color: rgba(77,227,255,0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 6px 18px -10px rgba(77,227,255,0.55) !important;
  }
  #main-nav .nav-tab.active::before {
    content: '' !important; display: block !important;
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 2.5px; border-radius: 2px;
    background: var(--k-cyan);
    box-shadow: 0 0 10px rgba(77,227,255,0.6);
  }
  #main-nav .nav-tab.active .nav-icon-svg {
    color: var(--k-cyan) !important;
    stroke-width: 2 !important;
    transform: translateY(-0.5px) !important;
  }
  #main-nav .nav-tab.active .nav-label {
    color: var(--k-cyan) !important;
    font-weight: 600 !important;
    letter-spacing: 1.25px !important;
  }

  /* Freshwater keeps its amber identity; records/commerce tabs stay gold */
  body.fk-freshwater #main-nav .nav-tab.active {
    background: linear-gradient(180deg, rgba(233,169,63,0.15) 0%, rgba(233,169,63,0.05) 100%) !important;
    border-color: rgba(233,169,63,0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 18px -10px rgba(233,169,63,0.5) !important;
  }
  body.fk-freshwater #main-nav .nav-tab.active::before {
    background: var(--k-amber, #E9A93F) !important; box-shadow: 0 0 10px rgba(233,169,63,0.55) !important;
  }
  body.fk-freshwater #main-nav .nav-tab.active .nav-icon-svg,
  body.fk-freshwater #main-nav .nav-tab.active .nav-label {
    color: var(--k-amber, #E9A93F) !important;
  }
  body #main-nav .nav-tab[data-tab="myfishing"].active,
  body #main-nav .nav-tab[data-tab="license"].active {
    background: linear-gradient(180deg, rgba(252,181,72,0.15) 0%, rgba(252,181,72,0.05) 100%) !important;
    border-color: rgba(252,181,72,0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 18px -10px rgba(252,181,72,0.5) !important;
  }
  body #main-nav .nav-tab[data-tab="myfishing"].active::before,
  body #main-nav .nav-tab[data-tab="license"].active::before {
    background: var(--k-gold) !important; box-shadow: 0 0 10px rgba(252,181,72,0.55) !important;
  }
  body #main-nav .nav-tab[data-tab="myfishing"].active .nav-icon-svg,
  body #main-nav .nav-tab[data-tab="myfishing"].active .nav-label,
  body #main-nav .nav-tab[data-tab="license"].active .nav-icon-svg,
  body #main-nav .nav-tab[data-tab="license"].active .nav-label { color: var(--k-gold) !important; }

  /* Koravi Guide shares the water-type accent on the mobile bar (overrides
     the §6 desktop-era teal treatment) */
  #main-nav .nav-tab[data-tab="ai"].active {
    background: linear-gradient(180deg, rgba(77,227,255,0.14) 0%, rgba(77,227,255,0.045) 100%) !important;
    border-color: rgba(77,227,255,0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 18px -10px rgba(77,227,255,0.55) !important;
  }
  #main-nav .nav-tab[data-tab="ai"].active .nav-icon-svg,
  #main-nav .nav-tab[data-tab="ai"].active .nav-label { color: var(--k-cyan) !important; }
  body.fk-freshwater #main-nav .nav-tab[data-tab="ai"].active {
    background: linear-gradient(180deg, rgba(233,169,63,0.15) 0%, rgba(233,169,63,0.05) 100%) !important;
    border-color: rgba(233,169,63,0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 18px -10px rgba(233,169,63,0.5) !important;
  }
  body.fk-freshwater #main-nav .nav-tab[data-tab="ai"].active .nav-icon-svg,
  body.fk-freshwater #main-nav .nav-tab[data-tab="ai"].active .nav-label { color: var(--k-amber, #E9A93F) !important; }
  #main-nav .nav-tab:focus-visible {
    outline: 2px solid var(--k-cyan) !important; outline-offset: -3px !important;
  }

  /* Content clearance for the floating bar */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Narrow phones: keep the longest label ("Koravi Guide") un-clipped */
@media (max-width: 410px) {
  #main-nav .nav-tab .nav-label { font-size: 0.465rem !important; letter-spacing: 0.35px !important; }
}
/* Small phones (≤370px): tighter bar, nothing clipped */
@media (max-width: 370px) {
  #main-nav { left: 8px !important; right: 8px !important; gap: 2px !important; padding: 6px 5px 7px !important; border-radius: 20px !important; }
  #main-nav .nav-tab { min-height: 48px !important; gap: 4px !important; border-radius: 14px !important; padding: 7px 1px 6px !important; }
  #main-nav .nav-tab .nav-icon-svg { width: 20px !important; height: 20px !important; }
  #main-nav .nav-tab .nav-label { font-size: 0.44rem !important; letter-spacing: 0.2px !important; }
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Large phones / small tablets in the mobile range: a touch more air */
@media (min-width: 480px) and (max-width: 720px) {
  #main-nav { left: 14px !important; right: 14px !important; padding: 8px 10px 9px !important; gap: 6px !important; }
  #main-nav .nav-tab { min-height: 56px !important; }
  #main-nav .nav-tab .nav-icon-svg { width: 23px !important; height: 23px !important; }
  #main-nav .nav-tab .nav-label { font-size: 0.58rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   §7 · EDITORIAL BRIEFING  (Home · both water types)
   Presentation layer for the Daily Fishing Briefing composed by
   fk-briefing.js. Surfaces the answer first and pushes complexity into
   disclosures. Typography and spacing carry the hierarchy — not boxes.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* spacing scale */
  --fk-s1: 4px;  --fk-s2: 8px;  --fk-s3: 12px; --fk-s4: 16px;
  --fk-s5: 24px; --fk-s6: 32px; --fk-s7: 44px; --fk-s8: 60px;
  /* radii */
  --fk-r-sm: 10px; --fk-r-md: 14px; --fk-r-lg: 20px; --fk-r-pill: 999px;
  /* surfaces + hairlines */
  --fk-surface: rgba(9, 20, 27, 0.72);
  --fk-hairline: rgba(255, 255, 255, 0.07);
  --fk-elev: 0 10px 30px -14px rgba(0, 0, 0, 0.75);
  /* accent is water-type aware */
  --fk-accent: var(--k-cyan, #4de3ff);
  --fk-ink: #eef7fb;
  --fk-ink-2: #a9c2d1;
  --fk-ink-3: #7d97a8;
  --fk-gold: #f4a228;
  --fk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.fk-freshwater { --fk-accent: var(--k-amber, #e9a93f); --fk-surface: rgba(10, 24, 16, 0.72); }

/* ── Briefing group ─────────────────────────────────────────────── */
#tab-home.fk-briefing-on { padding-top: var(--fk-s2); }
#tab-home .fk-brf {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--fk-s6) var(--fk-s5) 0;
}
#tab-home .fk-brf + .fk-brf { border-top: 1px solid var(--fk-hairline); margin-top: var(--fk-s6); }
#tab-home .fk-brf-head {
  display: flex; align-items: baseline; gap: var(--fk-s3);
  margin: 0 0 var(--fk-s4);
}
#tab-home .fk-brf-idx {
  font-family: 'Oswald', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 2px; color: var(--fk-accent); opacity: 0.75;
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
#tab-home .fk-brf-title {
  font-family: 'Oswald', sans-serif; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--fk-ink);
  margin: 0; line-height: 1.1;
}
#tab-home .fk-brf-title::before { content: none; }
#tab-home .fk-brf-sub {
  font-family: 'Source Sans 3', sans-serif; font-size: 0.8rem; line-height: 1.4;
  color: var(--fk-ink-3); margin: 3px 0 0;
}
#tab-home .fk-brf-body { display: flex; flex-direction: column; gap: var(--fk-s4); }

/* ── De-card: inside the briefing only the two heroes keep a surface ── */
#tab-home .fk-brf-body > .card,
#tab-home .fk-brf-body > .k-home-prime-window,
#tab-home .fk-brf-body > .k-home-where,
#tab-home .fk-brf-body > .k-home-baitlure,
#tab-home .fk-brf-body > .k-home-community,
#tab-home .fk-brf-body > .k-home-tools,
#tab-home .fk-brf-body > .fk-koravi-conditions,
#tab-home .fk-disc-panel > .card,
#tab-home .fk-disc-panel > .k-home-baitlure,
#tab-home .fk-disc-panel > .k-home-tools,
#tab-home .fk-disc-panel > .fk-koravi-conditions,
#tab-home .fk-disc-panel > #k-why-score {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
#tab-home .fk-brf-body > .card::before,
#tab-home .fk-brf-body > .card::after,
#tab-home .fk-brf-body > .k-home-prime-window::before,
#tab-home .fk-brf-body > .k-home-prime-window::after,
#tab-home .fk-brf-body > .k-home-community::before,
#tab-home .fk-brf-body > .k-home-community::after,
#tab-home .fk-brf-body > .k-home-where::before,
#tab-home .fk-brf-body > .k-home-where::after { display: none !important; }

/* The section's own duplicate heading is redundant under a briefing header */
#tab-home .fk-brf-body > * > .k-prime-eyebrow,
#tab-home .fk-brf-body > * > .k-where-eyebrow,
#tab-home .fk-brf-body > * > .k-comm-eyebrow,
#tab-home .fk-brf-body > * > .k-bl-eyebrow,
#tab-home .fk-brf-body > .k-home-where .k-where-head .k-where-title,
#tab-home .fk-brf-body > .k-home-community .k-comm-head .k-comm-title { display: none !important; }

/* Heroes: score + game plan keep an elevated surface, restrained */
#tab-home .fk-brf[data-brf="today"] .fk-brf-body > *,
#tab-home .fk-brf[data-brf="what"] .fk-brf-body > .k-home-gameplan {
  background: var(--fk-surface) !important;
  border: 1px solid var(--fk-hairline) !important;
  border-radius: var(--fk-r-lg) !important;
  box-shadow: var(--fk-elev) !important;
  padding: var(--fk-s5) var(--fk-s4) !important;
  max-width: none !important;
  margin: 0 !important;
}
#tab-home .fk-brf[data-brf="today"] .fk-brf-body > .fk-disc {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
}

/* Score typography: the number dominates, the label gives context */
#tab-home .k-score-num,
#tab-home .kws-n { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
#tab-home .k-score-num { font-size: 3.4rem !important; line-height: 1 !important; }
#tab-home .k-score-status,
#tab-home .kws-title {
  font-family: 'Oswald', sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
}
#tab-home .kws-eyebrow, #tab-home .k-score-eyebrow { display: none !important; }

/* ── Disclosure (progressive disclosure primitive) ─────────────── */
#tab-home .fk-disc { border-top: 1px solid var(--fk-hairline); padding-top: var(--fk-s3); }
#tab-home .fk-disc-trig {
  display: flex; align-items: center; gap: var(--fk-s3);
  width: 100%; min-height: 48px; padding: var(--fk-s2) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--fk-ink); font-family: 'Oswald', sans-serif;
  font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase;
  transition: color 0.18s ease, opacity 0.18s ease;
}
#tab-home .fk-disc-trig:hover { color: var(--fk-accent); }
#tab-home .fk-disc-trig:active { opacity: 0.7; }
#tab-home .fk-disc-trig:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 3px; border-radius: 6px; }
#tab-home .fk-disc-label { flex: 0 0 auto; }
#tab-home .fk-disc-hint {
  flex: 1 1 auto; min-width: 0; font-family: 'Source Sans 3', sans-serif;
  font-size: 0.74rem; letter-spacing: 0; text-transform: none; color: var(--fk-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tab-home .fk-disc-chev {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--fk-accent);
  transition: transform 0.24s var(--fk-ease);
}
#tab-home .fk-disc.is-open .fk-disc-chev { transform: rotate(180deg); }
#tab-home .fk-disc-outer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--fk-ease);
}
#tab-home .fk-disc.is-open .fk-disc-outer { grid-template-rows: 1fr; }
#tab-home .fk-disc-panel {
  overflow: hidden; min-height: 0;
  opacity: 0; transition: opacity 0.2s ease 0.04s;
}
#tab-home .fk-disc.is-open .fk-disc-panel { opacity: 1; padding-top: var(--fk-s3); }
#tab-home .fk-disc-panel > * + * { margin-top: var(--fk-s5) !important; }

/* ── Pro tools: professional toolset, not an advertisement ─────── */
#tab-home .fk-brf[data-brf="pro"] .fk-brf-idx,
#tab-home .fk-brf[data-brf="pro"] .fk-brf-title { color: var(--fk-gold); }
#tab-home .fk-brf[data-brf="pro"] .fk-brf-body > * {
  border: 1px solid rgba(244, 162, 40, 0.22) !important;
  border-radius: var(--fk-r-md) !important;
  box-shadow: none !important;
}

/* ── Entrance motion (cheap: opacity + transform only) ─────────── */
#tab-home.fk-briefing-on .fk-brf {
  animation: fkBrfIn 0.42s var(--fk-ease) both;
}
#tab-home.fk-briefing-on .fk-brf:nth-of-type(2) { animation-delay: 0.04s; }
#tab-home.fk-briefing-on .fk-brf:nth-of-type(3) { animation-delay: 0.08s; }
#tab-home.fk-briefing-on .fk-brf:nth-of-type(4) { animation-delay: 0.12s; }
#tab-home.fk-briefing-on .fk-brf:nth-of-type(n+5) { animation-delay: 0.16s; }
@keyframes fkBrfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #tab-home.fk-briefing-on .fk-brf { animation: none; }
  #tab-home .fk-disc-outer, #tab-home .fk-disc-panel, #tab-home .fk-disc-chev { transition: none; }
}

/* ── Mobile-first spacing + thumb reach ───────────────────────── */
@media (max-width: 560px) {
  #tab-home .fk-brf { padding: var(--fk-s5) var(--fk-s4) 0; }
  #tab-home .fk-brf + .fk-brf { margin-top: var(--fk-s5); }
  #tab-home .fk-brf-title { font-size: 0.76rem; letter-spacing: 2.4px; }
  #tab-home .fk-brf-sub { font-size: 0.76rem; }
  #tab-home .k-score-num { font-size: 3rem !important; }
  #tab-home .fk-brf[data-brf="today"] .fk-brf-body > *,
  #tab-home .fk-brf[data-brf="what"] .fk-brf-body > .k-home-gameplan { padding: var(--fk-s4) var(--fk-s3) !important; }
  #tab-home .fk-disc-hint { display: none; }
  #tab-home .fk-disc-trig { justify-content: space-between; }
}

/* ── §7b · Dedupe: one heading per briefing section ─────────────── */
#tab-home.fk-briefing-on .k-gp-head,
#tab-home.fk-briefing-on .k-where-eyebrow,
#tab-home.fk-briefing-on .k-bl-head,
#tab-home.fk-briefing-on .k-prime-eyebrow,
#tab-home.fk-briefing-on .k-score-eyebrow,
#tab-home.fk-briefing-on .kws-eyebrow,
#tab-home.fk-briefing-on .k-comm-topbar .k-tools-eyebrow,
#tab-home.fk-briefing-on .k-comm-tagline,
#tab-home.fk-briefing-on #k-why-score .k-why-head,
#tab-home.fk-briefing-on .k-home-tools .k-tools-eyebrow { display: none !important; }

/* Prime window: status becomes the section's own inline verdict */
#tab-home.fk-briefing-on .k-prime-head { justify-content: flex-start !important; }
#tab-home.fk-briefing-on .k-prime-status {
  font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fk-accent);
}
/* Where: the CTA sits under the list, not above it */
#tab-home.fk-briefing-on .k-home-where { display: flex !important; flex-direction: column; }
#tab-home.fk-briefing-on .k-home-where .k-where-head { order: 2; margin: var(--fk-s3) 0 0 !important; }
#tab-home.fk-briefing-on .k-home-where .k-spots-list { order: 1; }
#tab-home.fk-briefing-on .k-comm-topbar { justify-content: flex-end !important; }

/* Score hero: the interpretation is typography, not a boxed pill */
#tab-home.fk-briefing-on .kws-title {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 var(--fk-s2) !important;
  font-family: 'Oswald', sans-serif !important; font-size: 1.05rem !important;
  letter-spacing: 2.4px !important; text-transform: uppercase !important;
  color: var(--fk-accent) !important; display: block !important;
}
#tab-home.fk-briefing-on .kws-desc {
  font-size: 0.86rem !important; line-height: 1.5 !important; color: var(--fk-ink-2) !important;
  margin: 0 0 var(--fk-s4) !important;
}

/* Target: the hero already names the species — the picker stays, the
   repeated read-outs collapse until the angler overrides the target. */
#tab-home.fk-briefing-on .fk-ts-wrap.fk-ts-same .fk-ts-rec,
#tab-home.fk-briefing-on .fk-ts-wrap.fk-ts-same .fk-ts-your { display: none !important; }
#tab-home.fk-briefing-on .fk-ts-wrap { padding-top: var(--fk-s2) !important; }

/* ── §7c · Nested-box cleanup + app-wide cohesion ───────────────── */
/* Pro slots and the Game Plan already carry their own surface — one box only */
#tab-home.fk-briefing-on .fk-brf[data-brf="pro"] .fk-brf-body > * {
  border: 0 !important; background: none !important; padding: 0 !important;
}
#tab-home.fk-briefing-on .fk-brf[data-brf="what"] .fk-brf-body > .k-home-gameplan {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}

/* Unified typography + rhythm for every tab (cards keep their own colour) */
#tab-home .card, #tab-ai .card, #tab-myfishing .card, #tab-explore .card, #tab-license .card {
  border-radius: var(--fk-r-lg);
}
.card > h2, .card h2:first-child {
  font-family: 'Oswald', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: var(--fk-s3);
}
.card h2 .h2-icon { width: 14px; height: 14px; }
.section-tip {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--fk-ink-3);
}
/* Consistent press + focus feedback on every control */
button:active, .btn-primary:active, .k-where-btn:active, .k-bl-btn:active,
.k-comm-view:active, .fk-loc-btn:active { transform: scale(0.985); }
button, .btn-primary { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--fk-accent); outline-offset: 2px;
}
@media (max-width: 560px) {
  .card > h2, .card h2:first-child { font-size: 0.8rem; letter-spacing: 2.4px; }
  /* comfortable tap targets everywhere */
  .card button, .card a.btn-primary, .k-bl-btn, .k-where-btn, .fk-loc-btn { min-height: 44px; }
}