/* The product's look: an Apple-style layer loaded AFTER app.css on every page (base.html). It restyles
   through the existing design tokens and class names, so one file changes every screen. app.css keeps the
   structure; this file owns colour, type, shape and chrome.

   Author: Selman Selman @ Engineered Leads
   Rules applied (apple-design skill, App/dashboard mode): one blue accent used only for actions and
   links; near-monochrome neutrals; depth from colour steps instead of borders and shadows; a short
   type scale with no 10-11px uppercase labels; pill buttons; 44px primary controls; calm status chips.

   Deliberate deviation: Selman's 2026-07-10 direction was "sharp, system-button, not consumer-
   rounded". He reversed it on 2026-10-22 and made this the only look. */

:root {
	--ea-primary: #0071e3;
	--ea-primary-down: #0077ed;
	--ea-primary-active: #006edb;
	--ea-ink: #1d1d1f;
	--ea-muted: #6e6e73;
	--ea-line: rgba(0, 0, 0, .1);
	--ea-line-mid: rgba(0, 0, 0, .1);
	--ea-line-soft: rgba(0, 0, 0, .06);
	--ea-bg: #f5f5f7;
	--ea-page: #f5f5f7;
	--ea-ok: #248a3d;
	--ea-warn: #b25000;
	--ea-danger: #d70015;
	--ea-r-card: 18px;
	--ea-r-panel: 18px;
	--ea-r-btn: 980px;
	--ea-r-input: 10px;
	--ea-shadow-panel: none;
	--ea-shadow-card: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08);
	--ea-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ea-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
	--ea-focus-ring: 0 0 0 4px rgba(0, 113, 227, .35);

	--ap-fill: rgba(120, 120, 128, .12);
	--ap-fill-hover: rgba(120, 120, 128, .2);
	--ap-text-3: #86868b;
	--ap-link: #0066cc;
	--ap-material: rgba(251, 251, 253, .78);
}

body {
	background: var(--ea-page);
	font-size: 14px;
	letter-spacing: -.006em;
	line-height: 1.5;
	font-feature-settings: "ss01", "cv11";
}
a { color: var(--ap-link); }
a:not([class]) { text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }

/* ── Sidebar: light material, rounded selected row ─────────────────────── */
.ea-side {
	background: var(--ap-material);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-right: 1px solid var(--ea-line);
}
.ea-side__brand { color: var(--ea-ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; padding: 22px 20px 6px; }
.ea-side__ws { color: var(--ea-muted); font-size: 13px; border-bottom: 0; margin-bottom: 8px; padding-bottom: 12px; }
.ea-wsswitch__btn { color: var(--ea-ink); }
.ea-wsswitch__btn:hover { color: var(--ea-primary); }
.ea-wsswitch__menu { background: #fff; border: 1px solid var(--ea-line); box-shadow: var(--ea-shadow-card); border-radius: 14px; }
.ea-wsswitch__menu a { color: var(--ea-ink); }
.ea-wsswitch__menu a small { color: var(--ap-text-3); }
.ea-wsswitch__menu a:hover { background: var(--ap-fill); color: var(--ea-ink); }
.ea-wsswitch__all { border-top-color: var(--ea-line); }

.ea-side__nav { padding: 0 10px; }
.ea-side__nav a {
	color: var(--ea-ink); font-size: 14px; font-weight: 400; padding: 7px 10px; margin: 1px 0;
	border-left: 0; border-radius: 8px; transition: background 160ms var(--ea-ease);
}
.ea-side__nav a:hover { background: var(--ap-fill); color: var(--ea-ink); }
.ea-side__nav a.is-active { background: var(--ap-fill-hover); color: var(--ea-ink); font-weight: 600; }
.ea-side__nav a .ea-side__icon { color: var(--ea-primary); }
.ea-side__nav a.is-active .ea-side__icon { color: var(--ea-primary); }
.ea-side__group {
	padding: 18px 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0;
	text-transform: none; color: var(--ap-text-3);
}
.ea-side__foot { border-top: 1px solid var(--ea-line); }
.ea-side__user { color: var(--ea-muted); }
.ea-side__signout { color: var(--ea-ink); }
.ea-side__signout:hover { color: var(--ea-primary); text-decoration: none; }

/* ── Top bar: material that floats over content ────────────────────────── */
.ea-top {
	background: var(--ap-material);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--ea-line);
	position: sticky; top: 0; z-index: 30; min-height: 56px;
}
.ea-top__crumb strong { font-weight: 600; }

/* ── Page ──────────────────────────────────────────────────────────────── */
.ea-page { max-width: 1320px; padding: 0 32px; }
.ea-pagehead { padding: 40px 0 24px; }
.ea-pagehead h1 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.ea-pagehead p { font-size: 15px; color: var(--ea-muted); margin-top: 6px; }

/* ── Surfaces: colour steps, no borders, no shadows ────────────────────── */
.ea-panel, .ea-stat, .ea-leadtally__card, .ea-row {
	background: #fff; border: 0; border-radius: 18px; box-shadow: none;
}
.ea-panel { padding: 24px 28px; margin-bottom: 20px; }
.ea-panel__title, .ea-section > h3 {
	font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: -.015em;
	color: var(--ea-ink); margin-bottom: 14px;
}
.ea-section { border-top-color: var(--ea-line-soft); }
.ea-row:hover { box-shadow: none; background: #fbfbfd; }
.ea-row__title { font-weight: 600; }

.ea-card { border: 0; border-radius: 22px; box-shadow: var(--ea-shadow-card); }
.ea-card__head, .ea-bar { background: none; border-bottom: 0; color: var(--ea-ink); }
.ea-card__title { color: var(--ea-ink); font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.ea-card__sub { color: var(--ea-muted); font-size: 15px; }
.ea-bar { background: var(--ap-material); border-bottom: 1px solid var(--ea-line); }

/* Callouts: a tinted fill, not a bar down the side. */
.ea-notes { border-left: 0; border-radius: 14px; background: var(--ap-fill); padding: 14px 18px; }
.ea-notes--warn { background: rgba(255, 159, 10, .14); color: #7a4300; border: 0; }
.ea-error { border: 0; border-radius: 14px; background: rgba(255, 59, 48, .1); }
.ea-success { border: 0; border-radius: 14px; background: rgba(52, 199, 89, .14); }
.ea-gate { border: 0; border-radius: 14px; background: rgba(255, 159, 10, .14); }

/* ── Forms: labels you read, controls you can hit ──────────────────────── */
.ea-field > span {
	font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
	color: var(--ea-muted); min-height: 0;
}
.ea-field input, .ea-field select, .ea-field textarea {
	min-height: 44px; padding: 10px 14px; font-size: 15px; letter-spacing: -.006em;
	border: 1px solid var(--ea-line); border-radius: 10px; background-color: #fff; box-shadow: none;
}
.ea-field textarea { min-height: 96px; }
.ea-field input:focus, .ea-field select:focus, .ea-field textarea:focus {
	border-color: var(--ea-primary); box-shadow: var(--ea-focus-ring);
}
.ea-field input::placeholder, .ea-field textarea::placeholder { color: var(--ap-text-3); }
.ea-field__hint { font-size: 13px; color: var(--ap-text-3); }
input[name="vin"] { letter-spacing: .04em; }

/* ── Buttons: pills; one filled, the rest quiet fills ──────────────────── */
.ea-btn {
	border: 0; border-radius: 980px; height: 36px; padding: 0 18px; font-size: 14px; font-weight: 500;
	letter-spacing: -.006em; transition: background 160ms var(--ea-ease), color 160ms var(--ea-ease);
}
.ea-btn--primary { height: 40px; font-weight: 500; }
.ea-btn--ghost { background: var(--ap-fill); color: var(--ea-ink); }
.ea-btn--ghost:hover { background: var(--ap-fill-hover); border: 0; }
.ea-btn--ghost:active { background: var(--ap-fill-hover); }
.ea-btn--dark { background: var(--ea-ink); }
.ea-btn--xl { height: 52px; font-size: 17px; }
.ea-btn--sm { height: 30px; padding: 0 14px; font-size: 13px; }
.ea-btn--primary:disabled { background: var(--ap-fill-hover); color: var(--ap-text-3); }

/* ── Tables: no box, quiet header, hairlines ───────────────────────────── */
.ea-table { border: 0; border-radius: 14px; background: #fff; font-size: 14px; }
.ea-table th {
	font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ap-text-3);
	background: #fff; padding: 12px 16px 8px; border-bottom: 1px solid var(--ea-line);
}
.ea-table td { padding: 12px 16px; border-bottom: 1px solid var(--ea-line-soft); }
.ea-table tbody tr:hover td { background: #fafafc; }
.ea-table th.is-sortable a:hover { color: var(--ea-primary); }

.ea-table thead th, .ea-panel .ea-table thead th, .ea-tablewrap--scroll .ea-table thead th {
	font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ap-text-3);
	background: #fff; padding: 12px 16px 8px; border-bottom: 1px solid var(--ea-line); box-shadow: none;
}
.ea-side__ws { line-height: 1.5; padding-top: 2px; overflow: visible; }
.ea-leadfilters { align-items: end; }
.ea-leadfilters .ea-field:last-child { flex-direction: row; gap: 8px; }
.ea-leadfilters .ea-field:last-child .ea-btn { height: 44px; margin: 0; flex: 1; }

/* ── Chips and pills: soft tint, sentence-case, no outline ─────────────── */
.ea-pill {
	text-transform: none;
	border-radius: 980px; padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0;
	border: 0;
}
.ea-pill--owner, .ea-pill--admin { background: rgba(0, 113, 227, .12); color: #0058b0; }
.ea-pill--member { background: var(--ap-fill); color: #515154; border: 0; }
.ea-pill--trial { background: rgba(255, 159, 10, .16); color: #8a4b00; }
.ea-pill--active { background: rgba(52, 199, 89, .16); color: #1d7a35; }
.ea-pill--locked { background: rgba(255, 59, 48, .12); color: #c1271d; }
.ea-src { border: 0; background: var(--ap-fill); color: #515154; font-weight: 500; font-size: 12px; }
.ea-src--ad { background: rgba(0, 113, 227, .12); color: #0058b0; }
.ea-age { border-radius: 980px; font-weight: 600; }

/* ── Numbers: the number is the headline, the label is a whisper ───────── */
.ea-leadtally { gap: 12px; }
.ea-leadtally__card { padding: 16px 18px; }
.ea-leadtally__card:hover { background: #fbfbfd; }
.ea-leadtally__card.is-on { box-shadow: inset 0 0 0 2px var(--ea-primary); }
.ea-leadtally__n { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.ea-leadtally__l { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ea-muted); margin-top: 4px; }
.ea-stat { padding: 16px 18px; }
.ea-stat__label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ea-stat__value { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.ea-rangebar a { border: 0; background: var(--ap-fill); font-weight: 500; }
.ea-rangebar a:hover { background: var(--ap-fill-hover); }
.ea-rangebar a.is-on { background: var(--ea-ink); color: #fff; }

/* ── Motion: explain, never decorate ───────────────────────────────────── */
a, button, .ea-leadtally__card, .ea-row { transition-timing-function: var(--ea-ease); }

.ea-nextstep input[type="text"], .ea-nextstep input[type="date"], .ea-nextstep select,
.ea-outside__form input { min-height: 44px; padding: 10px 14px; font-size: 15px; border-color: var(--ea-line); box-shadow: none; }
.ea-nextstep input:focus, .ea-nextstep select:focus, .ea-outside__form input:focus { box-shadow: var(--ea-focus-ring); }
.ea-nextstep__when .ea-btn { height: 36px; }

/* ── The appraisal report (record page) ────────────────────────────────────
   One idea per block: the suggested price is the headline; the ranges are quiet tiles under it. */
.ea-valstrip, .ea-market {
	border: 0; box-shadow: none; background: transparent; gap: 12px; overflow: visible;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ea-valstrip__cell, .ea-market__cell, .ea-market__hero {
	background: var(--ea-bg); border: 0; border-radius: 16px; box-shadow: none;
	padding: 18px 20px; min-width: 0;
}
.ea-valstrip__cell--hero, .ea-market__hero { background: rgba(0, 113, 227, .08); box-shadow: none; }
.ea-valstrip__label, .ea-market__label, .ea-market__cell span, .ea-value__label {
	font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ea-muted);
	margin-bottom: 6px;
}
.ea-valstrip__num, .ea-market__cell strong, .ea-value__num {
	font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1;
}
.ea-valstrip__num--range { font-size: 22px; line-height: 1.2; }
.ea-valstrip__num--brand, .ea-market__num { color: var(--ea-primary); font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
.ea-valstrip__sub, .ea-market__sub, .ea-value__meta, .ea-subline { font-size: 12px; color: var(--ap-text-3); }
.ea-market__cells { display: contents; }
.ea-market__bar, .ea-position { grid-column: 1 / -1; background: transparent; border: 0; padding: 4px 0 0; }
.ea-market__cell { border-left: 0; }
.ea-position__track { height: 4px; border-radius: 4px; background: var(--ap-fill-hover); }
.ea-position__marker { border-width: 3px; width: 18px; height: 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ea-position__tick { background: var(--ea-ink); width: 2px; }
.ea-position__labels { font-size: 12px; color: var(--ap-text-3); }
.ea-value, .ea-value--hero, .ea-value--accent {
	background: var(--ea-bg); border: 0; border-radius: 16px; box-shadow: none; color: var(--ea-ink);
}
.ea-value--hero { background: var(--ea-ink); color: #fff; }

/* Where it is in its life: a quiet step bar, not a ladder of badges. */
.ea-stepper li { font-size: 13px; font-weight: 500; }
.ea-stepper li span { width: 22px; height: 22px; border: 0; background: var(--ap-fill); font-size: 12px; font-weight: 600; }
.ea-stepper li::after { height: 2px; border-radius: 2px; background: var(--ap-fill-hover); }
.ea-stepper li.is-done span { background: var(--ea-ok); }
.ea-stepper li.is-active { color: var(--ea-ink); font-weight: 600; }
.ea-stepper li.is-active span { background: var(--ea-primary); color: #fff; box-shadow: none; }

/* Section tabs: a segmented control. */
.ea-secnav { background: var(--ap-fill); border: 0; border-radius: 12px; padding: 3px; box-shadow: none; gap: 2px; }
.ea-secnav a { border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--ea-ink); }
.ea-secnav a:hover { background: rgba(255, 255, 255, .6); color: var(--ea-ink); }
.ea-secnav a.is-on, .ea-secnav a[aria-current] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* In-panel tabs: an underline that follows the accent, nothing else. */
.ea-tabs { border-bottom-color: var(--ea-line); }
.ea-tab { font-size: 14px; font-weight: 500; letter-spacing: -.006em; }
.ea-tab[aria-selected="true"] { font-weight: 600; color: var(--ea-ink); border-bottom-color: var(--ea-primary); }

/* The side rail: the number first, the working under it. */
.ea-rail__price { font-size: 44px; font-weight: 600; letter-spacing: -.035em; }
.ea-rail__rows { border-top-color: var(--ea-line-soft); }
.ea-rail__row { font-size: 14px; color: var(--ea-muted); border-bottom-color: var(--ea-line-soft); padding: 11px 0; }
.ea-chip, .ea-chip--brand {
	border: 0; border-radius: 980px; background: var(--ap-fill); color: #515154; font-size: 12px;
	text-transform: none; letter-spacing: 0; padding: 4px 11px;
}
.ea-chip--brand { background: rgba(0, 113, 227, .12); color: #0058b0; }
.ea-chipbtn { border: 0; background: var(--ap-fill); border-radius: 980px; font-weight: 500; }
.ea-chipbtn[aria-pressed="true"] { background: rgba(0, 113, 227, .14); box-shadow: none; color: #0058b0; }

/* Two sticky bars must not fight: the section tabs sit just under the top bar. */
.ea-secnav { top: 64px; }
/* A range like $31,569–$34,053 wraps inside its tile instead of being clipped. */
.ea-valstrip__num, .ea-market__cell strong { white-space: normal; overflow-wrap: anywhere; }
.ea-valstrip, .ea-market { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ea-secnav { background: #e5e5ea; }
.ea-secnav { top: 57px; border-radius: 0 0 12px 12px; }

/* ── Phone width (checked in a 390px frame) ────────────────────────────── */
/* A pill never wraps its label onto two lines; the row of actions wraps instead. */
.ea-btn { white-space: nowrap; flex-shrink: 0; }
.ea-pagehead__actions { flex-wrap: wrap; }
/* The off-canvas sidebar keeps its shadow only while it is open; closed, it leaked a grey edge onto the page. */
@media (max-width: 900px) {
	.ea-side { box-shadow: none; }
	.ea-side.is-open { box-shadow: var(--ea-shadow-card); }
	.ea-pagehead h1 { font-size: 28px; }
}

/* ── Appraisal record on a phone: the worked number comes right after the summary ──
   The side panel (worked numbers, checklist, actions) used to stack under the whole report, so the
   number a rep actually works was a long scroll away and the Reopen button was at the very bottom.
   Both containers dissolve into one column and each block gets a place in the order:
   valuation summary, then the worked numbers, then the tabbed analysis and listings, then the rest. */
.ea-reopen { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ea-reopen .ea-btn { width: 100%; }
@media (max-width: 960px) {
	.ea-desk__work { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.ea-desk__main, .ea-desk__work > .ea-rail { display: contents; }
	.ea-desk__main > * { order: 3; }
	.ea-desk__main > .ea-notes:first-child { order: 0; }
	.ea-desk__main > #sec-numbers { order: 1; }
	.ea-desk__work > .ea-rail > .ea-panel { order: 4; }
	.ea-desk__work > .ea-rail > .ea-panel:first-child { order: 2; }
}

/* On a phone the valuation tiles go two across (hero full width), so the numbers below them are not a long scroll away. */
@media (max-width: 560px) {
	.ea-valstrip, .ea-market { grid-template-columns: 1fr 1fr; gap: 8px; }
	.ea-valstrip__cell, .ea-market__cell, .ea-market__hero { padding: 14px 14px; }
	.ea-valstrip__cell--hero, .ea-market__hero { grid-column: 1 / -1; }
	.ea-valstrip__num--range { font-size: 18px; }
	.ea-valstrip__num, .ea-market__cell strong { font-size: 22px; }
}