/* =====================================================================
   Design step 1 · Calm  (experience plan, "Graphite Ledger")
   ---------------------------------------------------------------------
   Loaded after app.css when the design level is 1 or more (base.html).
   Colour, depth and motion only; type is step 2, pills and tables step 3.

     graphite neutrals   everything structural
     one blue            action, focus, selection, links
     semantic colour     a loan's state, overdue, a loss: never decoration
     gold                the brand mark only (D15), never data or chrome

   Every rule is keyed on html[data-ds], which base.html sets with the
   level, so its specificity beats the accent presets and their light
   re-cuts in app.css whatever the source order.

   Never touched: static/afp-logo.css, .afp-*, .brand-lockup, .brand-mark,
   .rf-word, .v-word, html[data-afp-settled], the sign-in sequence.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
/* Screen only: printing keeps app.css's print tokens (dark ink on white
   paper), which these would otherwise outrank. */
@media screen {
html[data-ds]:not([data-theme="light"]) {
  --bg:            #0b0d12;
  --rail:          #0d1015;
  --surface:       #101318;
  --surface2:      #151920;
  --surface3:      #1b2029;
  --surface4:      #232935;
  --card:          #101318;
  --border:        #1f242d;
  --border-bright: #2b313c;
  --row-line:      #191d25;

  --text:          #e8eaee;   /* 15.5:1 on --surface */
  --text-mid:      #aab1bd;   /*  8.6:1 */
  --text-dim:      #858d9b;   /*  5.6:1 */
  --dim:           #858d9b;
  --scroll-thumb:  #5c6473;

  /* One blue, for action, focus, selection and links. */
  --emerald:       #6f9cf6;   /* ink on graphite: 6.9:1 on --surface */
  --emerald-dim:   #2f66de;
  --emerald-muted: #1a2a4a;
  --emerald-glow:  rgba(111,156,246,.08);
  --emerald-glow2: rgba(111,156,246,.14);
  --btn-fill-a:    #2f66de;   /* white on it: 5.2:1 */
  --btn-fill-b:    #2f66de;   /* flat: no gradient */
  --on-accent:     #ffffff;
  --primary:       #6f9cf6;
  --focus:         #6f9cf6;

  --red:           #ec6e62;
  --amber:         #e3a548;
  --blue:          #6f9cf6;   /* info is the accent: no second blue */
  --purple:        #a596f5;
  --success:       #45b98d;
  --success-glow:  rgba(69,185,141,.10);
  --success-glow2: rgba(69,185,141,.14);

  /* Gold leaves the data layer (D15): money and chrome go to ink. */
  --gold:          #e8eaee;
  --gold-dim:      #aab1bd;
  --gold-glow:     rgba(255,255,255,.035);
  --gold-glow2:    rgba(255,255,255,.06);
  --gold-grad2:    #e8eaee;
  --on-gold:       #0b0d12;

  --zebra:         transparent;
  --head-band:     transparent;
  --row-hover:     rgba(255,255,255,.028);
  --wash-weak:     rgba(255,255,255,.02);
  --wash:          rgba(255,255,255,.035);
  --wash-strong:   rgba(255,255,255,.06);

  /* Depth is a surface step plus a hairline; shadows only on floating layers. */
  --shadow-card:   none;
  --shadow-hero:   none;
  --shadow-glow:   none;
  --inner-hi:      transparent;
  --card-hover-shadow: none;
  --statcard-hover-shadow: none;
  --head-shadow:   0 1px 0 #2b313c;
  --shadow-raise:  0 0 0 1px #2b313c, 0 12px 32px -8px rgba(0,0,0,.6);

  /* Credit-state ramp, re-cut for graphite (same hues). */
  --st-perform:#45b98d; --st-perform-weak:rgba(69,185,141,.12);
  --st-30:#d2b04f;      --st-30-weak:rgba(210,176,79,.12);
  --st-60:#e3923e;      --st-60-weak:rgba(227,146,62,.12);
  --st-90:#ec6e62;      --st-90-weak:rgba(236,110,98,.12);
  --st-fc:#e86a78;      --st-fc-weak:rgba(232,106,120,.12);
  --st-reo:#a596f5;     --st-reo-weak:rgba(165,150,245,.12);
  --st-bk:#9aa3b5;      --st-bk-weak:rgba(154,163,181,.12);

  /* Module colours go quiet: the nav already says where you are. */
  --vault-color: #6f9cf6; --ams-color: #6f9cf6; --crm-color: #6f9cf6; --intel-color: #6f9cf6;
  --re-color: #6f9cf6;    --hecm-color: #6f9cf6; --agmt-color: #6f9cf6; --rental-color: #e8eaee;
  --vault-glow: rgba(255,255,255,.035); --ams-glow: rgba(255,255,255,.035);
  --crm-glow: rgba(255,255,255,.035);   --intel-glow: rgba(255,255,255,.035);
  --re-glow: rgba(255,255,255,.035);    --hecm-glow: rgba(255,255,255,.035);
  --agmt-glow: rgba(255,255,255,.035);  --rental-glow: rgba(255,255,255,.035);
  --rental-line: #2b313c;

  --chart-grid:    rgba(255,255,255,.06);
  --transition:    .12s cubic-bezier(.2,0,0,1);
  --spring:        cubic-bezier(0,0,.2,1);
}

html[data-ds][data-theme="light"] {
  --bg:            #f5f6f8;
  --rail:          #f9fafb;
  --surface:       #ffffff;
  --surface2:      #f7f8fa;
  --surface3:      #eef0f3;
  --surface4:      #e4e7ec;
  --card:          #ffffff;
  --border:        #e3e6eb;
  --border-bright: #d0d5dd;
  --row-line:      #eceef2;

  --text:          #14171d;
  --text-mid:      #454d5b;   /* 8.5:1 on white */
  --text-dim:      #646c7a;   /* 5.3:1 */
  --dim:           #646c7a;
  --scroll-thumb:  #8a919d;

  --emerald:       #2457d4;   /* 6.2:1 on white, and white on it */
  --emerald-dim:   #1d47b3;
  --emerald-muted: #e5ebfa;
  --emerald-glow:  rgba(36,87,212,.06);
  --emerald-glow2: rgba(36,87,212,.10);
  --btn-fill-a:    #2457d4;
  --btn-fill-b:    #2457d4;
  --on-accent:     #ffffff;
  --primary:       #2457d4;
  --focus:         #2457d4;

  --red:           #c0362c;
  --amber:         #a2560c;
  --blue:          #2457d4;
  --purple:        #5b45c8;
  --success:       #0f7a52;
  --success-glow:  rgba(15,122,82,.08);
  --success-glow2: rgba(15,122,82,.12);

  --gold:          #14171d;
  --gold-dim:      #454d5b;
  --gold-glow:     rgba(0,0,0,.03);
  --gold-glow2:    rgba(0,0,0,.05);
  --gold-grad2:    #14171d;
  --on-gold:       #ffffff;

  --zebra:         transparent;
  --head-band:     transparent;
  --row-hover:     #f7f8fa;
  --wash-weak:     rgba(16,24,40,.02);
  --wash:          rgba(16,24,40,.035);
  --wash-strong:   rgba(16,24,40,.055);

  --shadow-card:   0 1px 2px rgba(16,24,40,.04);
  --shadow-hero:   none;
  --shadow-glow:   none;
  --inner-hi:      transparent;
  --card-hover-shadow: 0 1px 2px rgba(16,24,40,.04);
  --statcard-hover-shadow: none;
  --head-shadow:   0 1px 0 #d0d5dd;
  --shadow-raise:  0 0 0 1px rgba(16,24,40,.08), 0 12px 32px -8px rgba(16,24,40,.18);

  --st-perform:#0f7a52; --st-perform-weak:rgba(15,122,82,.10);
  --st-30:#80611a;      --st-30-weak:rgba(128,97,26,.10);
  --st-60:#a2560c;      --st-60-weak:rgba(162,86,12,.10);
  --st-90:#c0362c;      --st-90-weak:rgba(192,54,44,.09);
  --st-fc:#b4233c;      --st-fc-weak:rgba(180,35,60,.09);
  --st-reo:#5b45c8;     --st-reo-weak:rgba(91,69,200,.10);
  --st-bk:#536079;      --st-bk-weak:rgba(83,96,121,.10);

  --vault-color: #2457d4; --ams-color: #2457d4; --crm-color: #2457d4; --intel-color: #2457d4;
  --re-color: #2457d4;    --hecm-color: #2457d4; --agmt-color: #2457d4; --rental-color: #14171d;
  --vault-glow: rgba(16,24,40,.035); --ams-glow: rgba(16,24,40,.035);
  --crm-glow: rgba(16,24,40,.035);   --intel-glow: rgba(16,24,40,.035);
  --re-glow: rgba(16,24,40,.035);    --hecm-glow: rgba(16,24,40,.035);
  --agmt-glow: rgba(16,24,40,.035);  --rental-glow: rgba(16,24,40,.035);
  --rental-line: #d0d5dd;

  --chart-grid:    rgba(16,24,40,.06);
}
}

/* ---------------------------------------------------------------------
   2. GROUND: a still, flat canvas (D14)
   --------------------------------------------------------------------- */
html[data-ds] body {
  background: var(--bg);
  background-image: none;
}
html[data-ds] body::before,
html[data-ds] .sidebar::before,
html[data-ds] .sidebar::after { display: none; animation: none; }

html[data-ds] .sidebar {
  background: var(--rail, var(--surface));
  border-right: 1px solid var(--border);
  box-shadow: none;
}
html[data-ds] #nav-bar {
  background: var(--emerald);
  box-shadow: none;
  height: 2px;
  animation: none;
}
html[data-ds] .secure-dot { animation: none; box-shadow: none; }

/* No entrance animation on every page: content is readable when it lands. */
html[data-ds] .main,
html[data-ds] .detail-hero { animation: none; }

/* ---------------------------------------------------------------------
   3. DECORATION OFF: gradient hairlines, glows, lifts, ripples
   --------------------------------------------------------------------- */
html[data-ds] .card::before,
html[data-ds] .stat-card::before,
html[data-ds] .ds-card::before,
html[data-ds] .topbar::after,
html[data-ds] .page-title::before,
html[data-ds] .premium-hero::before,
html[data-ds] .premium-hero::after,
html[data-ds] .detail-hero::before,
html[data-ds] .kpi-tile::before,
html[data-ds] .kpi-tile.kpi-lead::after,
html[data-ds] .section-title::after { display: none; }

html[data-ds] .card,
html[data-ds] .stat-card,
html[data-ds] .ds-card,
html[data-ds] .kpi-tile,
html[data-ds] .myday-card,
html[data-ds] .chart-card {
  box-shadow: var(--shadow-card);
  background-image: none;
}
html[data-ds] .card:hover,
html[data-ds] .stat-card:hover,
html[data-ds] .stat-card.gold-card:hover,
html[data-ds] .stat-card.em-card:hover,
html[data-ds] .stat-card.amb-card:hover,
html[data-ds] .ds-card:hover,
html[data-ds] .hover-lift:hover,
html[data-ds] .tb-card:hover,
html[data-ds] .dash-stats > a:hover .ds-card {
  transform: none;
  box-shadow: var(--shadow-card);
}
/* A card that is a link says so with its border, never a lift or a glow. */
html[data-ds] a.stat-card:hover,
html[data-ds] a.card:hover,
html[data-ds] .dash-stats > a:hover .ds-card { border-color: var(--border-bright); }

html[data-ds] .premium-hero,
html[data-ds] .detail-hero {
  background: var(--surface);
  background-image: none;
  box-shadow: var(--shadow-card);
}
html[data-ds] .hero-progress-fill { background: var(--emerald); }
/* Gold rails on cards become hairlines: gold belongs to the logo (D15). */
html[data-ds] .myday-card { border-left: 1px solid var(--border); }

/* One-colour page titles (D13): the accent marks what you can click. */
html[data-ds] .page-title span { color: inherit; }
html[data-ds] .asset-sticky { background: var(--surface); background-image: none; box-shadow: none; }

/* Chips and IDs are not buttons: no glow when the pointer passes. */
html[data-ds] .badge:hover,
html[data-ds] .loan-id:hover,
html[data-ds] .nav-active-dot,
html[data-ds] .lc-label.current { box-shadow: none; }
html[data-ds] .divider { background: var(--border); }

/* ---------------------------------------------------------------------
   4. BUTTONS: flat fills, a colour step on hover, no movement
   --------------------------------------------------------------------- */
html[data-ds] .btn {
  background: var(--btn-fill-a);
  color: #ffffff;
  box-shadow: none;
  filter: none;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}
html[data-ds] .btn::after { display: none; }
html[data-ds] .btn:hover { background: var(--emerald-dim); box-shadow: none; filter: none; transform: none; }
html[data-ds][data-theme="light"] .btn:hover { background: #1d47b3; }
html[data-ds] .btn:active { transform: none; filter: none; box-shadow: none; }

html[data-ds] .btn-ghost,
html[data-ds] .btn-gold {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-bright);
}
html[data-ds] .btn-ghost:hover,
html[data-ds] .btn-gold:hover {
  background: var(--surface2);
  border-color: var(--border-bright);
  color: var(--text);
  box-shadow: none;
  filter: none;
}
html[data-ds] .btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--border-bright);
}
html[data-ds] .btn-danger:hover { background: var(--st-90-weak); border-color: var(--red); color: var(--red); }

/* Row buttons are secondary: one primary per page, not one per row. */
html[data-ds] .data-table td .btn:not(.btn-ghost):not(.btn-danger) {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-bright);
}
html[data-ds] .data-table td .btn:not(.btn-ghost):not(.btn-danger):hover { background: var(--surface2); }

html[data-ds] .help-btn,
html[data-ds] .sidebar-toggle,
html[data-ds] .btn-theme {
  box-shadow: none;
  background: var(--surface2);
  border: 1px solid var(--border-bright);
  color: var(--text-mid);
}
html[data-ds] .help-btn:hover,
html[data-ds] .help-btn.active,
html[data-ds] .sidebar-toggle:hover,
html[data-ds] .btn-theme:hover {
  background: var(--surface3);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------------------------------------
   5. FIELDS: one calm focus ring
   --------------------------------------------------------------------- */
html[data-ds] .form-control,
html[data-ds] input[type="text"], html[data-ds] input[type="search"],
html[data-ds] input[type="email"], html[data-ds] input[type="number"],
html[data-ds] input[type="date"], html[data-ds] input[type="password"],
html[data-ds] input[type="tel"], html[data-ds] input[type="url"],
html[data-ds] select, html[data-ds] textarea {
  background-color: var(--surface);
  border-color: var(--border-bright);
}
html[data-ds] input:focus, html[data-ds] select:focus,
html[data-ds] textarea:focus, html[data-ds] .form-control:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow2);
  outline: none;
}

/* ---------------------------------------------------------------------
   6. NAVIGATION: neutral active state, no rails, glows or gradients
   --------------------------------------------------------------------- */
html[data-ds] .nav-link:hover { background: var(--wash); color: var(--text); }
html[data-ds] .nav-link.active,
html[data-ds][data-theme="light"] .nav-link.active {
  background: var(--surface3);
  background-image: none;
  border-left-color: transparent;
  color: var(--text);
  box-shadow: none;
}
html[data-ds] .nav-active-dot { background: var(--emerald); }
html[data-ds] .nav-label,
html[data-ds] .nav-label.vault-label, html[data-ds] .nav-label.ams-label,
html[data-ds] .nav-label.crm-label, html[data-ds] .nav-label.intel-label,
html[data-ds] .nav-label.re-label, html[data-ds] .nav-label.hecm-label,
html[data-ds] .nav-label.agmt-label, html[data-ds] .nav-label.rental-label { color: var(--text-dim); }
html[data-ds] .nav-label::before { display: none; }
html[data-ds] .tab-btn.active { border-bottom-color: var(--text); }

/* ---------------------------------------------------------------------
   7. FLOATING LAYERS: one popover depth, no blur
   --------------------------------------------------------------------- */
html[data-ds] .toast,
html[data-ds] .tn-panel,
html[data-ds] .am-menu-list,
html[data-ds] .file-more-menu,
html[data-ds] #cmd-box {
  box-shadow: var(--shadow-raise);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------------------
   8. MOTION: colour and opacity only, short
   --------------------------------------------------------------------- */
html[data-ds] .nav-link,
html[data-ds] .tab-btn,
html[data-ds] .filter-btn,
html[data-ds] .card,
html[data-ds] .stat-card { transition: background-color .12s, border-color .12s, color .12s; }

/* Page changes: the rail stays put and the content cross-fades in 120 ms
   (Q-02). The browser does it between pages, with no script; app.js skips
   its own transition when a design step is on. */
@view-transition { navigation: auto; }
@keyframes ds-fade-out { to { opacity: 0; } }
@keyframes ds-fade-in { from { opacity: 0; } }
::view-transition-old(root) { animation: 120ms linear both ds-fade-out; }
::view-transition-new(root) { animation: 120ms linear both ds-fade-in; }
html[data-ds] .sidebar { view-transition-name: rail; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}