/* Copyright (c) 2026 LandmarkLouie. Award-polish layer — additive & reversible.
 * Loaded LAST. Enforces the design-tokens vocabulary across components that
 * were styled ad-hoc. Safe: no layout-structure overrides, only feel + a
 * canonical pill/empty-state/skeleton system for components to adopt. To revert,
 * remove the single <link> for this file in index.html.
 */

/* ── #12 Tabular numerals — money/metrics align in columns ───────────────── */
.home-kpi .hk-val,
.cs-kpi .value,
.num, td.r, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── #11 Micro-interactions: button press + focus-visible ────────────────── */
button, .btn { transition: transform .08s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, a:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold, #c9a84c);
  outline-offset: 2px;
}

/* ── #9 / #7 Canonical urgency + status pill system (for adoption) ───────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  text-transform: none; letter-spacing: .01em;
}
.pill--critical { background: #fee2e2; color: #991b1b; }
.pill--warning  { background: #fef3c7; color: #92400e; }
.pill--ok       { background: #dcfce7; color: #166534; }
.pill--info     { background: #dbeafe; color: #1e40af; }
.pill--neutral  { background: #eef1f6; color: #475569; }
.pill--brand    { background: rgba(201,168,76,.16); color: var(--color-gold-text, #8a6520); }

/* ── #13 Empty-state component (for adoption across blank screens) ───────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; color: var(--color-ink-2, #475569);
}
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; opacity: .9; }
.empty-state .es-title { font-size: 15px; font-weight: 700; color: var(--color-ink, #1a1a2e); margin-bottom: 6px; }
.empty-state .es-msg { font-size: 13px; max-width: 360px; line-height: 1.5; margin-bottom: 16px; }
.empty-state .es-cta {
  background: var(--gradient-gold, #8a6520); color: #fff; border: none;
  padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer;
}

/* ── #11 Skeleton loading shimmer (opt-in: add class="skeleton") ─────────── */
@keyframes ll-shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
.skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #e2e8f0 37%, #eef1f6 63%);
  background-size: 720px 100%; animation: ll-shimmer 1.3s infinite linear;
  border-radius: 8px; min-height: 14px; color: transparent !important;
}
.skeleton-card { height: 92px; border-radius: 12px; }

/* ── Success flash (add/remove class="just-saved" to confirm a save) ─────── */
@keyframes ll-flash { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 100% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
.just-saved { animation: ll-flash .8s ease-out 1; }

/* ── #5 Four Square — the iconic 2×2 worksheet, on-screen ────────────────── */
.fsq-wrap { margin: 6px 0 18px; }
.fsq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: #0d1b2a; border: 3px solid #0d1b2a; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,29,69,.10));
}
.fsq-cell { background: #fff; padding: 16px 18px; min-height: 92px; display: flex; flex-direction: column; }
.fsq-cell .fsq-hd { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.fsq-cell .fsq-val { font-size: 25px; font-weight: 800; color: #0d1b2a; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fsq-cell .fsq-sub { font-size: 11px; color: #64748b; margin-top: 3px; }
.fsq-price .fsq-hd { color: #2563eb; }
.fsq-trade .fsq-hd { color: #16a34a; }
.fsq-down  .fsq-hd { color: #a67c32; }
.fsq-pay   .fsq-hd { color: #dc2626; }
.fsq-pay   .fsq-val { color: #dc2626; }

/* ── #3 Chat-landing quick-action chips — richer card grid ───────────────── */
.qa-chip {
  text-align: left; padding: 14px; background: #fff;
  border: 1px solid #e5e9f0; border-radius: 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.qa-chip:hover { transform: translateY(-2px); border-color: var(--color-gold, #c9a84c); box-shadow: 0 6px 18px rgba(201,168,76,.18); }

/* ── #14 Dismissible-banner helper: collapse animation when .is-collapsed ── */
.aged-banner, .alert-banner { transition: max-height .25s ease, opacity .2s ease, padding .2s ease; overflow: hidden; }
.aged-banner.is-collapsed, .alert-banner.is-collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; }