/* =========================================================================
   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.

   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 ✗.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

: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: 'Space Grotesk', 'Geist', 'Public Sans', Arial, sans-serif;
  --font-sans:   'IBM Plex Sans', 'Geist', 'Public Sans', Arial, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* 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); }