/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* BestPath design tokens — Direction A (Quiet Editorial) */
:root {
  /* Surfaces */
  --bp-paper:      #ffffff;
  --bp-surface:    #f8f7f3;
  --bp-surface-2:  #efece4;

  /* Ink */
  --bp-ink:        #1a1a1a;
  --bp-ink-2:      #3d3d3d;
  --bp-ink-muted:  #6b6b6b;
  --bp-ink-subtle: #9a9a9a;

  /* Lines */
  --bp-rule:       rgba(0,0,0,0.12);
  --bp-rule-soft:  rgba(0,0,0,0.06);

  /* Accent — logo blue, deepened to AA against white */
  --bp-accent:     #1d4f7a;
  --bp-accent-ink: #ffffff;
  --bp-accent-soft:#e6eef5;

  /* Highlight — logo orange. Brand decoration; one moment per view. */
  --bp-highlight:      #e89826;
  --bp-highlight-ink:  #1a1a1a;
  --bp-highlight-soft: #fbecd2;

  /* Roles */
  --bp-success:    #2d6a4f;
  --bp-warning:    #a8660f;
  --bp-danger:     #8c2a1c;
  --bp-info:       #2b4d7a;

  /* Status tints */
  --bp-tint-done:        #e4ede6;
  --bp-tint-active:      #f0ebdd;
  --bp-tint-warning:     #fbeed0;
  --bp-tint-danger:      #f6ddd6;
  --bp-tint-info:        #dde6f0;
  --bp-tint-ink-done:    #1f4432;
  --bp-tint-ink-active:  #6b4f15;
  --bp-tint-ink-warning: #7a4805;
  --bp-tint-ink-danger:  #5e1c11;
  --bp-tint-ink-info:    #1e3a5f;

  /* Type */
  --bp-display-family: 'Lora', Georgia, serif;
  --bp-display-weight: 500;
  --bp-serif-family:   'Newsreader', Georgia, serif;
  --bp-body-family:    'Inter', system-ui, sans-serif;
  --bp-mono-family:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --bp-r-sm:   4px;
  --bp-r-md:   8px;
  --bp-r-lg:   14px;
  --bp-r-pill: 999px;

  /* Spacing */
  --bp-s-1: 4px;  --bp-s-2: 8px;  --bp-s-3: 12px;
  --bp-s-4: 16px; --bp-s-5: 24px; --bp-s-6: 32px;
  --bp-s-7: 48px; --bp-s-8: 64px;

  /* Page width — the ONLY place a page-container width is declared.
     Every top-level page container reads one of these three; no surface hard-codes
     a max-width. The three tiers are kept separate even though they currently hold
     the same value, because they are three different *decisions* — collapsing them
     to one token would lose which surfaces are dashboards and which are reading
     columns, and a future narrowing would become another codebase-wide sweep
     instead of a one-line edit here.

       --bp-w-page   wide hubs and dense tables (journey, search execution, imports)
       --bp-w-stage  stage dashboards and transition screens (was 960px)
       --bp-w-read   coach / chat / prose columns (was 760px)

     Unified to 1200px 2026-07-27 after the width study
     (docs/Design/mockups/page-width-study.html). To take dashboards back down,
     set --bp-w-stage: 960px here and nothing else changes. Same for --bp-w-read
     at 760px, which is the measure-bound tier: prose runs ~150 characters per
     line at 1200px, against a comfortable 45-75. */
  --bp-w-page:  1200px;
  --bp-w-stage: 1200px;
  --bp-w-read:  1200px;

  /* Stacking order — the ONLY place a z-index is declared. Pick the rung by what
     the element IS; never invent a number. The gaps between rungs are deliberate
     so a one-off can slot between two layers without a renumber.

       --bp-z-base    behind a sibling (a ::before rule under its own node)
       --bp-z-raised  above a sibling pseudo-element
       --bp-z-sticky  in-page sticky affordances that scroll with content
       --bp-z-chrome  app chrome: .app-bar, .site-header
       --bp-z-docked  sticky bars that must clear the chrome
       --bp-z-drawer  the non-modal drawer layer (.bp-drawer) — over the page and
                      its chrome, but UNDER the modal layer, because the page it
                      sits over stays live and a real modal must still take over
                      from it (DECISIONS §5.10.2)
       --bp-z-modal   the modal layer and its scrim
       --bp-z-top     legacy "always wins" rung — see the warning below

     If you reach for a number bigger than the top rung, the answer is a new rung
     here, not a bigger number in a feature stylesheet. That is how 9999 happened.

     WARNING on --bp-z-top: it holds 9999 because the older `.modal-overlay` in
     components.css (still live — feedbacks/_form, shared/_modal) escalated to beat
     the newer `.modal` at 1000. Two modal systems coexist; until they are
     reconciled the value is preserved rather than "fixed", because lowering it in
     a refactor could reorder a real overlay. Do NOT reach for this rung for new
     work — it exists to name an outlier, not to bless it. */
  --bp-z-base:    0;
  --bp-z-raised:  1;
  --bp-z-sticky:  20;
  --bp-z-chrome:  50;
  --bp-z-docked:  100;
  --bp-z-drawer:  500;
  --bp-z-modal:   1000;
  --bp-z-top:     9999;

  /* Motion */
  --bp-easing:   cubic-bezier(.2,.6,.2,1);
  --bp-dur-fast: 120ms;
  --bp-dur-med:  200ms;

  /* Legacy aliases — forward to --bp-* so feature stylesheets not yet migrated keep working */
  --bg:                  var(--bp-paper);
  --panel:               var(--bp-surface);
  --text:                var(--bp-ink);
  --muted:               var(--bp-ink-muted);
  --border:              var(--bp-rule);
  --primary:             var(--bp-accent);
  --primary-600:         var(--bp-accent);
  --success:             var(--bp-success);
  --danger:              var(--bp-danger);
  --color-border:        var(--bp-rule);
  --color-border-subtle: var(--bp-rule-soft);
  --color-text:          var(--bp-ink);
  --color-text-muted:    var(--bp-ink-muted);
  --color-text-slate:    var(--bp-ink-2);
  --color-link:          var(--bp-accent);
  --radius-sm:           var(--bp-r-md);
  --radius-md:           var(--bp-r-lg);
  --radius-lg:           var(--bp-r-lg);

  /* Font sizes — no --bp-* equivalent; kept for feature stylesheet compat */
  --fs-xs:   .875rem;
  --fs-sm:   .95rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* Enforce the HTML spec: the [hidden] attribute must suppress display even when
   author stylesheets set an explicit display value on the element (e.g. btn classes). */
[hidden] {
  display: none !important;
}

/* Global element/link defaults */
a { color: var(--bp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Shared utilities */
.form-field { display: grid; gap: .25rem; }
.input { font-size: 1.15rem; line-height: 1.35; }

/* Layout utilities */
.row-sm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; gap: .5rem; flex-wrap: wrap; }
.stack-xs { display: grid; gap: .25rem; }
.stack-sm { display: grid; gap: .5rem; }

/* Unified form control visuals */
.form-control,
input.input,
textarea.input,
.date-selects select {
  padding: .5rem .65rem;
  font-size: 1.05rem;
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  color: var(--bp-ink);
  outline: none;
}
.form-control:focus,
input.input:focus,
textarea.input:focus,
.date-selects select:focus {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}

/* Unified card component applied to existing card-like classes */
.card,
.section-card,
.we-card,
.auth-card {
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  padding: 1rem;
  box-shadow: none;
}
.card--raised { box-shadow: none; }
.card--tight { padding: .75rem; }
.card--lg { padding: 1.5rem; border-radius: var(--bp-r-lg); }

/* Coach Feedback layout helpers */
.coach-feedback-layout {
  display: grid;
  gap: 0.75rem;
}

/* Keep the feedback form visible while data below scrolls.
   NOTE: no view or controller references this class as of 2026-07-27 — it looks
   like dead CSS. Left in place (a refactor is the wrong PR to delete from), but
   it is a candidate for removal. Its z-index was a literal 10; the sticky rung is
   20, and adopting it is inert precisely because nothing renders the class. */
.feedback-form-sticky {
  position: sticky;
  top: 0;
  z-index: var(--bp-z-sticky);
  background: var(--bp-paper);
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bp-rule);
}

/* Make the included data area scroll independently when long */
.feedback-included-scroll {
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Section cards to differentiate tables on coach feedback index */
.section-card { margin-bottom: 1rem; }
.section-card h1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: var(--fs-lg);
}
.section-help {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--bp-ink-muted);
  font-size: var(--fs-sm);
}
/* Emphasis variants */
.section-warning {
  background: var(--bp-tint-warning);
  border-left: 4px solid var(--bp-warning);
}
.section-neutral {
  background: var(--bp-surface);
  border-left: 4px solid var(--bp-ink-subtle);
}