/* ──────────────────────────────────────────────────────────────────────────
   components.css
   Extracted from inline `style="..."` attributes on the auth pages:
     login.html · register.html · forgot_password.html · invite_accept.html

   Naming convention:
     - `u-*`   utility class (single-purpose, used in many places)
     - `c-*`   component class (a styled named widget — modal, banner, etc.)

   Each rule mirrors an existing inline declaration verbatim so that
   replacing `style="..."` with the matching class produces ZERO visual
   change. Consolidation/cleanup is a separate, later step.
   ────────────────────────────────────────────────────────────────────── */


/* ── Icon sizing utilities ──────────────────────────────────────────────── */
.u-icon-12       { width: 12px; height: 12px; vertical-align: middle; }
.u-icon-13       { width: 13px; height: 13px; }
.u-icon-14       { width: 14px; height: 14px; }
.u-icon-14-fixed { width: 14px; height: 14px; flex-shrink: 0; }
.u-icon-15       { width: 15px; height: 15px; }
.u-icon-15-spin  { width: 15px; height: 15px; animation: spin 1s linear infinite; }
.u-icon-16       { width: 16px; height: 16px; }
.u-icon-16-spin  { width: 16px; height: 16px; animation: spin 1s linear infinite; }
.u-icon-22-accent{ width: 22px; height: 22px; color: var(--text-accent); }
.u-icon-28       { width: 28px; height: 28px; }


/* ── Color utilities ────────────────────────────────────────────────────── */
.u-color-accent       { color: var(--text-accent); }
.u-color-primary      { color: var(--text-primary); }
.u-color-border-strong{ color: var(--border-strong); }
.u-bg-accent          { background: var(--text-accent); }
.u-bg-red             { background: #EF4444; }


/* ── Layout utilities ───────────────────────────────────────────────────── */
.u-flex-1             { flex: 1; }
.u-position-relative  { position: relative; }
.u-position-absolute  { position: absolute; }
.u-justify-center     { justify-content: center; }
.u-text-center        { text-align: center; }


/* ── Spacing utilities ──────────────────────────────────────────────────── */
.u-mb-085             { margin-bottom: 0.85rem; }
.u-mb-1               { margin-bottom: 1rem; }
.u-mb-125             { margin-bottom: 1.25rem; }
.u-mb-085-rel         { margin-bottom: 0.85rem; position: relative; }
.u-mb-125-rel         { margin-bottom: 1.25rem; position: relative; }
.u-mt-125             { margin-top: 1.25rem; }


/* ── Typography utilities (one-off sizes/weights from auth pages) ───────── */
.u-text-tm-sup {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 700;
}
.u-text-065      { font-size: 0.65rem; }
.u-text-072-muted{ font-size: 0.72rem; color: var(--text-muted); }
.u-text-078-center { text-align: center; font-size: 0.78rem; }
.u-text-090-heading{
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-heading);
}
.u-text-110 {
  font-size: 1.1rem;
  line-height: 1.1;
}

.u-eyebrow-accent {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 0.35rem;
}

.u-text-display-1rem {
  font-family: var(--fb);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.2;
  color: var(--ta);
}

.u-mast-subnote {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  font-family: var(--font-body);
  font-weight: 300;
}


/* ── Link utilities ─────────────────────────────────────────────────────── */
.u-link-bare {
  text-decoration: none;
}
.u-link-center-bare {
  text-decoration: none;
  text-align: center;
  justify-content: center;
}
.u-text-center-justify {
  text-align: center;
  justify-content: center;
}


/* ── Form helpers (inputs that hold a trailing button — eye toggle etc.) ─ */
.u-input-pad-right     { padding-right: 2.5rem; }
.u-input-pad-right-lg  { padding-right: 2.75rem; }

/* "Reveal password" button glued to the right edge of an input ----------- */
.c-input-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* Older variant on invite_accept.html — slightly different right offset --- */
.c-input-eye-btn--alt {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}


/* ── Modal/overlay shells ───────────────────────────────────────────────── */
.c-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.c-modal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  max-width: 460px;
  width: 100%;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.c-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.c-modal-icon-amber {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.c-modal-icon-amber-svg {
  width: 18px;
  height: 18px;
  color: #F59E0B;
}

.c-modal-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
}

.c-modal-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.c-modal-body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}

.c-modal-actions {
  display: flex;
  gap: 0.75rem;
}


/* ── Bottom-fixed footer strip ──────────────────────────────────────────── */
.c-footer-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.73rem;
  z-index: 10;
}

/* Footer link with subtle hover — replaces the old onmouseover JS pattern */
.c-footer-link {
  color: var(--text-muted);
  text-decoration: none;
}
.c-footer-link:hover {
  color: var(--text-accent);
}


/* ── Auth-page panels and banners ───────────────────────────────────────── */
.u-panel-narrow {
  max-width: 420px;
}

.c-info-card-accent {
  background: rgba(201, 163, 82, 0.07);
  border: 1px solid rgba(201, 163, 82, 0.2);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.c-card-icon-accent {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201, 163, 82, 0.1);
  border: 1px solid rgba(201, 163, 82, 0.25);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
}

.c-otp-input {
  letter-spacing: 0.25em;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  text-align: center;
}

.c-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.35rem;
}

/* "Success" green callout shown after a registration step ----------------- */
.c-success-card {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.c-success-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}

.c-success-card-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #22C55E;
}

.c-success-card-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

/* Code/token display row — eyebrow label + monospace value + copy btn ----- */
.c-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-void);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
}

.c-token-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.c-token-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-accent);
  flex: 1;
  font-weight: 600;
}

.c-token-copy-btn {
  background: rgba(201, 163, 82, 0.10);
  border: 1px solid rgba(71, 142, 255, 0.25);
  border-radius: var(--radius-sm);
  color: var(--text-accent);
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.c-token-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* Reusable inline italic note used inside auth panels --------------------- */
.c-italic-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-style: italic;
  padding: 0.75rem;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.5rem;
}

.c-mono-mini {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-accent);
}


/* ── Misc one-offs from the auth flow ───────────────────────────────────── */
.u-hidden-mb-1     { display: none; margin-bottom: 1rem; }
.u-bottom-meta-text{
  margin-top: 1rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.u-text-center-mb-125 {
  text-align: center;
  margin-bottom: 1.25rem;
}


/* ──────────────────────────────────────────────────────────────────────────
   Brand block
   ──────────────────────────────────────────────────────────────────────────
   Used by the {{ brand_block(...) }} Jinja macro in templates/_brand.html.
   Single source of styling for the icon + name + tagline cluster across the
   whole app. Tweak here and every page picks it up.

   Theme knobs (override per theme by changing these CSS variables):
     --brand-grad-start   : gradient stop 1
     --brand-grad-end     : gradient stop 2
     --brand-glyph-cut    : "cut-out" colour inside the logo (the F notch)
     --brand-name-color   : wordmark colour (defaults to the page's accent)
     --brand-tagline-color: tagline colour (defaults to muted)
     --brand-icon-size    : icon width/height (default 28px)
   ────────────────────────────────────────────────────────────────────── */

:root {
  --brand-grad-start:    #D4A574;     /* FDS-3 dark_style — icon top (golden bronze) */
  --brand-grad-mid:      #D4A574;     /* FDS-3 dark_style — icon middle (flat-bright top per spec) */
  --brand-grad-end:      #6B4520;     /* FDS-3 dark_style — icon bottom (deep golden bronze) */
  --brand-glyph-cut:     var(--bg-elevated, #ffffff);
  --brand-name-color:    #D4A574;     /* FDS-3 dark_style — wordmark golden bronze */
  --brand-tagline-color: #7B7596;     /* FDS-3 dark_style — tagline warm slate */
  --brand-icon-size:     28px;
}

/* The wrapper inherits .reg-card-brand from main.css for layout
   (display:flex, align-items:center, gap:8px). We only add brand-specific
   stuff here. */
.brand-block {
  /* nothing extra at base; variants and parents tune from here */
}

.brand-block .brand-icon {
  display: inline-flex;
  width: var(--brand-icon-size);
  height: var(--brand-icon-size);
  flex-shrink: 0;
}

.brand-block .brand-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-block .brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-block .brand-name {
  font-family: var(--fb, var(--font-display));
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--brand-name-color);
}

.brand-block .brand-tm {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 700;
}

.brand-block .brand-tagline {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--brand-tagline-color);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Variants ─────────────────────────────────────────────────────────── */

/* The default: top-nav usage (login, register, home, legal, demo, etc.) */
.brand-block--nav {
  --brand-icon-size: 44px;
}
.brand-block--nav .brand-name {
  font-size: 2rem;
}
.brand-block--nav .brand-tagline {
  font-size: 0.5rem;
}

/* Inside an auth/registration card — match nav size for visual consistency. */
.brand-block--card {
  --brand-icon-size: 44px;
}
.brand-block--card .brand-name {
  font-size: 2rem;
}
.brand-block--card .brand-tagline {
  font-size: 0.5rem;
}

/* Sidebar — tight, smaller, no tagline if you opt out via show_tagline=false */
.brand-block--sidebar {
  --brand-icon-size: 24px;
}
.brand-block--sidebar .brand-name {
  font-size: 0.95rem;
}
.brand-block--sidebar .brand-tagline {
  font-size: 0.6rem;
}

/* ─── In-app sidebar variant ─────────────────────────────────────────────
   DESIGNED FOR: the sidebar of authenticated dashboard pages (app_base.html).
   USED BY: brand_block(variant='inapp', show_tagline=false) inside .sidebar.
   INTENT:
     - Logo + wordmark only — no tagline (the user has already seen the
       marketing tagline; in-app context doesn't need it again).
     - Icon and wordmark sized to occupy ~60% of the 60px nav-h row,
       leaving ~12px breathing room top/bottom. Looks intentionally
       grounded rather than centred-with-extra-empty-space.
   IF YOU WANT TO TUNE THIS DESIGN:
     - All in-app sidebar brand styling lives in this block.
     - Edit icon size via --brand-icon-size below.
     - Edit wordmark size via .brand-name font-size below.
     - The tagline is hidden defensively so the design doesn't break
       even if a future caller passes show_tagline=true by mistake.
   ──────────────────────────────────────────────────────────────────── */
.brand-block--inapp {
  --brand-icon-size: 28px;
}
.brand-block--inapp .brand-text {
  height: var(--brand-icon-size);
  justify-content: center;
}
.brand-block--inapp .brand-name {
  font-size: 1.75rem;
  line-height: 1;
  /* iBrand's font metrics position visible glyphs in the upper half of
     the em-box. translateY nudges the glyphs down to optical centre with
     the icon. Tune this value if the wordmark's vertical alignment looks
     off after a font update. */
  transform: translateY(3px);
}
.brand-block--inapp .brand-tagline {
  display: none;
}

/* ─── In-app sidebar variant WITH TAGLINE ────────────────────────────────
   DESIGNED FOR: the sidebar of authenticated dashboard pages (app_base.html)
                 when you want the tagline visible below the brand row.
   USED BY: brand_block(variant='inapp-tag', show_tagline=false)
            paired with a sibling <div class="sidebar-tagline-row">.

   LAYOUT (two rows in markup, see app_base.html):
     Row 1 — .sidebar-brand-row (44px, height set in main.css):
       Icon (28px) + wordmark "friskr™" (1.75rem iBrand)
     Row 2 — .sidebar-tagline-row (sibling div, styled below):
       "RISK INTELLIGENCE EXPERT" (0.4rem JetBrains Mono uppercase)
       Pulled up via negative margin to feel attached to the brand row.

   The brand-block visual rules (icon size, wordmark size, alignment)
   match .brand-block--inapp exactly. Only the markup pairing differs:
   --inapp-tag is meant to be paired with a separate tagline row in the
   sidebar markup; --inapp is meant to stand alone.

   IF YOU WANT TO TUNE THIS DESIGN:
     - Brand-block sizes here.
     - Tagline row styling: .sidebar-tagline-row block below.
     - Brand row height: .sidebar-brand-row in main.css (currently 44px
       when followed by .sidebar-tagline-row).
     - To switch back to no-tagline design: change variant='inapp-tag'
       to variant='inapp' in app_base.html and remove the
       <div class="sidebar-tagline-row"> sibling element.
   ──────────────────────────────────────────────────────────────────── */
.brand-block--inapp-tag {
  --brand-icon-size: 28px;
}
.brand-block--inapp-tag .brand-text {
  height: var(--brand-icon-size);
  justify-content: center;
}
.brand-block--inapp-tag .brand-name {
  font-size: 1.75rem;
  line-height: 1;
  /* iBrand's font metrics position visible glyphs in the upper half of
     the em-box. translateY nudges the glyphs down to optical centre with
     the icon. Tune this value if the wordmark's vertical alignment looks
     off after a font update. */
  transform: translateY(3px);
}
.brand-block--inapp-tag .brand-tagline {
  /* Tagline is rendered as a sibling .sidebar-tagline-row, not inside
     the brand-block. This rule defends against accidental inline render
     if a caller passes show_tagline=true. */
  display: none;
}

/* ─── Sidebar tagline row ─────────────────────────────────────────────────
   DESIGNED FOR: rendering directly below .sidebar-brand-row when the
   --inapp-tag brand variant is in use. Pulled up 6px via negative margin
   so the tagline sits visually attached to the wordmark above (Option C
   compact layout).
   ──────────────────────────────────────────────────────────────────── */
.sidebar-tagline-row {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.4rem;
  color: var(--brand-tagline-color, var(--text-muted));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 1.2rem 8px;
  margin-top: -6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

/* Compact — for footers or breadcrumb-style usage */
.brand-block--compact {
  --brand-icon-size: 18px;
  gap: 6px;
}
.brand-block--compact .brand-name {
  font-size: 0.85rem;
}
.brand-block--compact .brand-tagline {
  display: none;
}

/* ── Per-theme overrides ─────────────────────────────────────────────────
   :root above defines the dark-theme defaults. Light theme overrides those.
   No separate dark override needed since dark = :root defaults.       */

[data-theme="light"], .theme-light {
  --brand-grad-start:    #B36230;     /* FDS-3 light — icon top (medium bronze) */
  --brand-grad-mid:      #B36230;     /* FDS-3 light — icon middle (flat-bright top per spec) */
  --brand-grad-end:      #5A2810;     /* FDS-3 light — icon bottom (deep bronze) */
  --brand-glyph-cut:     #ffffff;
  --brand-name-color:    #8E4818;     /* FDS-3 light — wordmark deep bronze */
  --brand-tagline-color: #5C5048;     /* FDS-3 light — tagline warm slate */
}