/* =========================================================================
   VENDORED. Do not edit this file.

   Source: asset_effect/src/adealia/view/static/adealia-tokens.css
   Vendored 2026-08-16. Copied byte for byte apart from this header.

   WHY A COPY: the two products live in separate repositories with no shared
   build. A package is the right answer eventually and is not free; a copy
   works today and the cost — that the two drift — is recorded rather than
   discovered later. See planning/reports/01-ui-ux-review.md §7.3.

   ONE EDIT, report 190 (27 September 2026): the Google Fonts @import and the
   three font stacks below. Everything else is still the byte-for-byte copy.

   HOW TO CHANGE IT: you do not. Load order is
       adealia-tokens.css  →  components.css  →  app.css
   so anything this project needs differently is redeclared downstream, where
   the divergence is visible next to its reason. `components.css` §1 is the
   list of every value we deliberately disagree with.

   TWO VALUES IN HERE ARE KNOWN TO BE WRONG, and are overridden downstream:
     --ink-4  #8B9AAC   2.87:1 as text — fails AA. app.css corrects it.
     --line-1 #DFD9CE   1.40:1 as a control edge. app.css adds --line-input.
   Both are corrected here-in-this-project only. If this file is ever turned
   into a shared package, those two are the merge conflict, and ours are the
   ones that pass.
   =========================================================================

   Adealia.ai — Foundations
   Color tokens, type tokens, semantic classes.
   Import this once at the root of any Adealia surface.

   Aesthetic: warm, editorial, data-forward. Warm paper canvas, navy
   authority, steel-slate UI, and ONE attention color — copper amber —
   reserved for the primary CTA and key highlights.

   ── The 60/30/10 rule (read before adding color) ────────────────────────
     60%  --warm-paper / --ink-navy   canvas + nav + headings
     30%  --steel-slate               secondary text, UI, surfaces
     10%  --copper-amber              THE CTA color. One per view. Nothing else.

   --signal-green is DATA ONLY (grades, confidence, success). --action-blue is
   INFORMATIONAL LINKS ONLY — never a button. If you reach for amber for a
   second button on a screen, you want --btn--secondary instead.

   ── Contrast (WCAG AA — validated, do not "fix" these by eye) ───────────
   The brand hues are FILL colors; they fail as text. Every one has a paired
   -deep variant that passes on paper. Known-bad pairs, for the record:
     white on --copper-amber  3.10:1  ✗   → the CTA uses --copper-cta 5.06:1
     --copper-amber on paper  2.82:1  ✗   → use --copper-deep  4.60:1
     --signal-green on paper  3.12:1  ✗   → use --green-deep   5.90:1
     --action-blue  on paper  4.12:1  ✗   → use --blue-deep    5.92:1
   The CTA is solid --copper-cta + WHITE text, and its hover DARKENS
   (--copper-press, 6.13:1). Lightening it to #B9682C drops white to 4.13:1 ✗.
   ========================================================================= */

/* THE @import THAT WAS HERE IS GONE — report 190, the one edit to this copy.
   It downloaded Space Grotesk, IBM Plex Sans and IBM Plex Mono on every page
   and nothing in this product draws any of them; `app.css` loads the one
   family the product uses. The three stacks below name that family too, so
   no rule can fall back into a face that is no longer requested. */

:root {
  /* -----------------------------------------------------------------------
     BRAND — the canonical palette. Everything below is derived from these.
     ----------------------------------------------------------------------- */
  --ink-navy:      #1A2547;  /* primary: nav, headings, authority sections */
  --warm-paper:    #F6F4EF;  /* light canvas */
  --steel-slate:   #33475B;  /* secondary text, UI, surfaces */
  --copper-amber:  #D97A34;  /* THE CTA color — primary buttons + key highlights */
  --signal-green:  #1F9D74;  /* data/status only — grades, confidence, success */
  --action-blue:   #2F6DF6;  /* informational links only — never the primary CTA */

  /* THE primary-CTA fill. Solid, with WHITE text — 5.06:1. Raw
     --copper-amber cannot take white text (3.10:1), so the CTA lives here.
     Same value as --copper-deep by coincidence, kept as its own name because
     the ROLE differs: --copper-cta is a button fill, --copper-deep is ink. */
  --copper-cta:    #A85A22;
  --copper-press:  #94501E;  /* CTA hover/active — DARKER; white stays 6.13:1 */

  /* Text-safe partners for the fill hues above (see contrast note in header) */
  --copper-deep:   #A85A22;  /* amber-family TEXT/borders on paper — 4.60:1 */
  --copper-lift:   #E08A45;  /* lighter amber — tints/accents on navy only */
  --green-deep:    #0F6B4F;  /* green TEXT on paper — 5.90:1 */
  --blue-deep:     #1B54D0;  /* link TEXT on paper — 5.92:1 */

  --navy-soft:     #2A335A;  /* navy hover/active depth */
  --navy-deep:     #11173A;  /* navy surface (email header, footer) */

  /* -----------------------------------------------------------------------
     LEGACY BRAND ALIASES
     Kept so existing markup keeps working; only the VALUES moved. `--peach`
     is historical — it is the link/accent slot, now action-blue.
     ----------------------------------------------------------------------- */
  --navy:        var(--ink-navy);
  --peach:       var(--action-blue);
  --peach-soft:  #C3D5FB;
  --peach-deep:  var(--blue-deep);

  /* -----------------------------------------------------------------------
     NEUTRALS — warm-tinted slate, tuned to sit on warm paper
     ----------------------------------------------------------------------- */
  --ink-1:       var(--ink-navy);  /* primary text + headings — 13.65:1 */
  --ink-2:       var(--steel-slate);  /* secondary text — 8.71:1 */
  /* Tertiary is validated against the DARKEST surface it lands on
     (--surface-2, not paper): 5.28:1 there, 5.77:1 on paper. An earlier
     #5C6F86 passed on paper but fell to 4.29:1 on sunken tiles. */
  --ink-3:       #4F6178;
  --ink-4:       #8B9AAC;  /* placeholder / disabled — decorative only */

  --line-1:      #DFD9CE;  /* default border, divider — warm */
  --line-2:      #EBE7DE;  /* subtle divider */
  --line-3:      #CBC3B4;  /* emphasized border */

  --surface-1:   var(--warm-paper);  /* page paper */
  --surface-2:   #EDEAE3;  /* sunken card, metric tile — warm neutral */
  --surface-3:   #FFFFFF;  /* raised card */
  --surface-4:   var(--navy-deep);  /* navy surface (email header, footer) */

  /* -----------------------------------------------------------------------
     SEMANTIC PALETTE — data/status. Load-bearing: property grade badges
     (A/B/C/D-F) and parcel flags depend on these hues.
     Every bg/fg pair below is validated ≥5.6:1. Use them as
     `--ok-bg`/`--ok-fg`/`--ok-dot` triplets; do NOT mint new tints.
     Green = signal-green family. Amber warn = copper family. Info = blue.
     ----------------------------------------------------------------------- */

  /* Grade A / success / approve — signal-green */
  --ok-bg:       #E3F2EA;
  --ok-fg:       var(--green-deep);   /* 5.61:1 on --ok-bg */
  --ok-dot:      var(--signal-green);
  --ok-bg-hover: #C4E6D6;

  /* Grade B / good adjacency */
  --good-bg:     #EAF1E0;
  --good-fg:     #33581B;             /* 7.11:1 on --good-bg */
  --good-dot:    #3B6D11;

  /* LOW confidence / Grade C / amber warn — copper family */
  --warn-bg:     #FAEBDA;
  --warn-fg:     #7A3D10;             /* 7.18:1 on --warn-bg */
  --warn-dot:    var(--copper-amber);

  /* GLA discrepancy / Grade D-F / alert */
  --alert-bg:    #F9E9E3;
  --alert-fg:    #7A2E14;             /* 7.98:1 on --alert-bg */
  --alert-dot:   #A33F1D;

  /* Info / parcel / distance chip — action-blue */
  --info-bg:     #E7F0FB;
  --info-fg:     #1B4E86;             /* 7.36:1 on --info-bg */
  --info-dot:    var(--action-blue);

  /* Neutral tan — LOW confidence. Deliberately NOT the amber --warn-*
     family: amber is the CTA color, and a status chip wearing it teaches
     people that amber sometimes means "information" instead of "click me".
     Do not reuse this for anything that isn't a muted, non-actionable
     status — it is the one chip with no hue signal. */
  --muted-bg:    #ECE7DF;
  --muted-fg:    #6B6257;             /* 4.86:1 on --muted-bg */
  --muted-dot:   #8A7F70;

  /* -----------------------------------------------------------------------
     TYPE
     Display: Space Grotesk — geometric, a little idiosyncratic, not a
     system stack and not Inter. Body/UI: IBM Plex Sans. Numerals: IBM Plex
     Mono, because this product is read as data.
     ----------------------------------------------------------------------- */
  --font-display: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-sans:   'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-mono:   var(--font-sans);   /* report 190: one family; figures use tabular-nums */

  /* Type scale — 1.25 ratio from a 15px body, rounded to whole px. */
  --fs-display:  44px;
  --fs-h1:       32px;
  --fs-h2:       24px;
  --fs-h3:       18px;
  --fs-body-lg:  17px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;

  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-normal:   1.55;   /* body — brief calls for 1.5–1.6 */

  --tracking-eyebrow: 0.08em;
  --tracking-display: -0.02em;

  /* Weight: 700 is spent ONLY on --fs-display. Everything else tops out
     at 600, which is what keeps the display level feeling like an event. */
  --weight-display: 700;
  --weight-heading: 600;
  --weight-medium:  500;
  --weight-body:    400;

  /* -----------------------------------------------------------------------
     SPACING — 4px base scale
     ----------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  --pad-card-y: 1rem;       /* 16px */
  --pad-card-x: 1.25rem;    /* 20px */

  /* -----------------------------------------------------------------------
     RADII — tightened from the old 16px "Apple" corners. Buttons/controls
     sit at 9px per the brief; nothing but badges/dots is a pill.
     ----------------------------------------------------------------------- */
  --radius-sm:   9px;   /* small controls (buttons, inputs, selects) */
  --radius-md:   10px;  /* metric tiles, medium surfaces */
  --radius-lg:   14px;  /* cards */
  --radius-pill: 999px; /* badges + dots ONLY — never buttons */

  /* -----------------------------------------------------------------------
     BORDERS
     ----------------------------------------------------------------------- */
  --border-hairline: 0.5px solid var(--line-1);
  --border-default:  1px solid var(--line-1);
  --border-strong:   1px solid var(--line-3);

  /* -----------------------------------------------------------------------
     SHADOWS — warm-tinted (navy-based, never neutral black). Border-first.
     ----------------------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(26, 37, 71, 0.02), 0 1px 3px rgba(26, 37, 71, 0.07);
  --shadow-2: 0 6px 20px rgba(26, 37, 71, 0.09);
  --shadow-cta: 0 1px 2px rgba(76, 38, 10, 0.22), 0 2px 8px rgba(168, 90, 34, 0.26);
  --shadow-focus: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--action-blue);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    100ms;
  --dur-base:    160ms;
  --dur-slow:    200ms;

  /* -----------------------------------------------------------------------
     ICON SIZES
     ----------------------------------------------------------------------- */
  --icon-sm:    14px;
  --icon-md:    16px;
  --icon-lg:    20px;

  /* -----------------------------------------------------------------------
     LEGACY/CROSS-COMPAT TOKENS
     The reference card uses Anthropic-style --color-* names. Alias them here
     so we can paste reference HTML into Adealia surfaces without rewriting.
     ----------------------------------------------------------------------- */
  --color-background-primary:   var(--surface-3);
  --color-background-secondary: var(--surface-2);
  --color-background-tertiary:  var(--line-2);
  --color-text-primary:         var(--ink-1);
  --color-text-secondary:       var(--ink-2);
  --color-text-tertiary:        var(--ink-3);
  --color-text-success:         var(--ok-fg);
  --color-border-secondary:     var(--line-1);
  --color-border-tertiary:      var(--line-2);
  --border-radius-md:           var(--radius-md);
  --border-radius-lg:           var(--radius-lg);
}

/* ===========================================================================
   BASE
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-1);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--peach-soft); color: var(--navy); }

/* ===========================================================================
   TYPE — semantic classes
   =========================================================================== */

.adl-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--weight-display);   /* the ONLY 700 in the system */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
  margin: 0;
}

.adl-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
  margin: 0;
}

.adl-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0;
}

.adl-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-heading);
  line-height: var(--lh-snug);
  color: var(--ink-1);
  margin: 0;
}

.adl-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-normal);
  color: var(--ink-1);
  margin: 0;
}

.adl-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink-1);
  margin: 0;
}

.adl-small  { font-size: var(--fs-small);   color: var(--ink-2); }
.adl-caption{ font-size: var(--fs-caption); color: var(--ink-3); }

.adl-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.adl-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* Inline brand-accent — the ".ai" treatment. Copper-deep, not amber:
   amber text on paper is 2.82:1 and fails. */
.adl-accent { color: var(--copper-deep); font-weight: inherit; }

/* Informational link. Blue is for links; it is never a button. */
.adl-link {
  color: var(--blue-deep);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.adl-link:hover { text-decoration: underline; }

/* ===========================================================================
   BRAND MARK — the house outline. This replaces the sparkle "AI" glyph;
   the assistant is branded with the house, same as the rest of the product.
   Usage: .adl-mark on an <svg> that contains the house path.
   =========================================================================== */

.adl-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--copper-deep);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.adl-mark--lg { width: 32px; height: 32px; }
.adl-mark--reverse { color: var(--copper-amber); }  /* on navy — 4.85:1 */

.adl-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-heading);
  letter-spacing: -0.02em;
  color: var(--navy);
  text-decoration: none;
}

/* ===========================================================================
   CARDS
   =========================================================================== */

.adl-card {
  background: var(--surface-3);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--pad-card-y) var(--pad-card-x);
  box-shadow: var(--shadow-1);
}
.adl-card--sunken {
  background: var(--surface-2);
  box-shadow: none;
}
.adl-card--flat {
  box-shadow: none;
}

/* ===========================================================================
   BUTTONS
   Exactly ONE --primary (copper) per view. Everything else is --secondary.
   =========================================================================== */

.adl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) linear,
    color      var(--dur-fast) linear,
    transform  var(--dur-base) var(--ease-out);
}
.adl-btn:active { transform: translateY(1px); }
.adl-btn:focus-visible {
  outline: 2px solid var(--action-blue);
  outline-offset: 2px;
}
.adl-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* THE CTA — one per view. Solid --copper-cta + white text = 5.06:1, and the
   fill clears the warm-paper canvas at 4.60:1 so it needs no border to read
   as a control. Navy and blue are NOT primary CTAs: navy is the utility
   solid, blue is links. */
.adl-btn--primary {
  background: var(--copper-cta);
  color: #FFFFFF;
  border-color: transparent;
  font-weight: var(--weight-heading);
  box-shadow: var(--shadow-cta);
}
/* Hover DARKENS (white stays 6.13:1). Lightening it would drop white text
   to 4.13:1 — the opposite of the old amber+navy-ink button. */
.adl-btn--primary:hover { background: var(--copper-press); color: #FFFFFF; }

/* Secondary = outline/navy. */
.adl-btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.adl-btn--secondary:hover { background: var(--navy); color: var(--surface-3); }

.adl-btn--approve {
  background: var(--ok-bg);
  color: var(--ok-fg);
  border-color: var(--ok-dot);
}
.adl-btn--approve:hover { background: var(--ok-bg-hover); }

.adl-btn--ghost {
  background: var(--surface-3);
  color: var(--ink-2);
  border-color: var(--line-1);
}
.adl-btn--ghost:hover { background: var(--surface-2); color: var(--ink-1); }

.adl-btn--reject {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line-1);
}
.adl-btn--reject:hover { background: var(--line-2); }

/* ===========================================================================
   BADGES
   =========================================================================== */

.adl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.adl-badge--ok    { background: var(--ok-bg);    color: var(--ok-fg); }
.adl-badge--good  { background: var(--good-bg);  color: var(--good-fg); }
.adl-badge--warn  { background: var(--warn-bg);  color: var(--warn-fg); }
.adl-badge--alert { background: var(--alert-bg); color: var(--alert-fg); }
.adl-badge--info  { background: var(--info-bg);  color: var(--info-fg); }
/* Muted, non-actionable status (LOW confidence). See --muted-* above. */
.adl-badge--muted { background: var(--muted-bg); color: var(--muted-fg); }

/* ===========================================================================
   DATA CHIPS — the visual hero. Grade / confidence / AIV.
   These are the loudest thing on a listing card BY DESIGN: the product's
   pitch is the number, so the number gets the ink.
   =========================================================================== */

/* Grade chip — a big letter in a signal-tinted square. */
.adl-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}
.adl-grade--a { background: var(--ok-bg);    color: var(--ok-fg);    border: 1px solid var(--ok-dot); }
.adl-grade--b { background: var(--good-bg);  color: var(--good-fg);  border: 1px solid var(--good-dot); }
.adl-grade--c { background: var(--warn-bg);  color: var(--warn-fg);  border: 1px solid var(--warn-dot); }
.adl-grade--d { background: var(--alert-bg); color: var(--alert-fg); border: 1px solid var(--alert-dot); }
.adl-grade--f { background: var(--alert-bg); color: var(--alert-fg); border: 1px solid var(--alert-dot); }

/* Confidence meter — HIGH/MEDIUM/LOW/NONE as filled ticks, not a word alone. */
.adl-conf { display: inline-flex; align-items: center; gap: 6px; }
.adl-conf__ticks { display: inline-flex; gap: 2px; }
.adl-conf__tick {
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: var(--line-3);
}
/* Confidence never uses amber — amber means "click me", not "somewhat sure".
   These mirror the chip variants: HIGH green, MEDIUM olive, LOW muted tan. */
.adl-conf__tick.is-on { background: var(--signal-green); }
.adl-conf--medium .adl-conf__tick.is-on { background: var(--good-dot); }
.adl-conf--low    .adl-conf__tick.is-on { background: var(--muted-dot); }
.adl-conf__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Money/valuation figure — AIV, ARV, list price. Mono + tabular so columns
   of dollars line up down a table. */
.adl-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--fs-h3);
  font-weight: var(--weight-medium);
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.adl-figure--lg  { font-size: var(--fs-h2); }
.adl-figure--up  { color: var(--green-deep); }
.adl-figure--key { color: var(--copper-deep); }  /* the one number that sells */

/* ===========================================================================
   METRIC TILE
   =========================================================================== */

.adl-metric {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.adl-metric__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.adl-metric__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--ink-1);
  margin: 0;
}
.adl-metric__sub   { font-size: var(--fs-eyebrow); color: var(--ink-3); margin: 2px 0 0; }

/* ===========================================================================
   INPUT
   =========================================================================== */

.adl-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink-1);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.adl-input::placeholder { color: var(--ink-4); }
.adl-input:hover { border-color: var(--line-3); }
.adl-input:focus {
  outline: none;
  border-color: var(--action-blue);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.15);
}

/* ===========================================================================
   FLAG ROW (parcel flags inside the property card)
   =========================================================================== */

.adl-flag-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--line-1);
  font-size: var(--fs-small);
}
.adl-flag-row:last-child { border-bottom: none; }
.adl-flag-icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.adl-dot { width: 8px; height: 8px; border-radius: 50%; }
.adl-flag-icon--ok    { background: var(--good-bg); }   .adl-dot--ok    { background: var(--good-dot); }
.adl-flag-icon--warn  { background: var(--warn-bg); }   .adl-dot--warn  { background: var(--warn-dot); }
.adl-flag-icon--alert { background: var(--alert-bg); }  .adl-dot--alert { background: var(--alert-dot); }
.adl-flag-icon--info  { background: var(--info-bg); }   .adl-dot--info  { background: var(--info-dot); }

/* ===========================================================================
   MOTION RESET
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   DEALSCOUT LAYOUT — page scaffold, sub-nav, table, filter pills.
   Composed only from existing tokens above. No new colors/tints.
   =========================================================================== */

.ds-page { max-width: 1180px; margin: 0 auto; padding: var(--pad-card-y) var(--pad-card-x); }
.ds-page-header { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; }
.ds-page-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
  margin: 0;
}

.ds-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line-1); margin: 0 0 20px; }
.ds-subnav-tab {
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--weight-medium);
  color: var(--ink-2); text-decoration: none; padding: 10px 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ds-subnav-tab:hover { color: var(--ink-1); }
.ds-subnav-tab.is-active { color: var(--navy); border-bottom-color: var(--copper-amber); }

.ds-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.ds-flag-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }

.ds-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.ds-filters label { font-size: var(--fs-caption); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.ds-filters select {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--ink-1);
  background: var(--surface-3); border: 1px solid var(--line-1);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.ds-filters .ds-filter-search { flex: 1; min-width: 220px; }

.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  text-align: left; font-size: var(--fs-eyebrow); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line-1);
}
.ds-table td { padding: 10px 12px; border-bottom: 0.5px solid var(--line-1); font-size: var(--fs-small); color: var(--ink-1); }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ds-table a { color: var(--blue-deep); text-decoration: none; font-weight: var(--weight-medium); }
.ds-table a:hover { text-decoration: underline; }
.ds-table-header { padding: 8px 12px; font-size: var(--fs-caption); color: var(--ink-3); }
.ds-table-footer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line-1); }
.ds-empty { padding: 40px 12px; text-align: center; color: var(--ink-3); }