/* ─────────────────────────────────────────────────────────────────────────
   The Integrated Auto Solutions dashboard, reproduced for the marketing site.

   Shared by index.html (automated tour) and product.html (free exploration),
   so the two can never drift apart. Tokens, type scale and components are
   lifted from car-deal-brain/index.html rather than approximated.

   Scoped to .ias-dash, never :root, because each host page keeps its own
   site palette for the nav, hero and footer around this.

   All data rendered through these styles is invented — see dashboard.js.
   ───────────────────────────────────────────────────────────────────────── */

.ias-dash {
  --bg: #15130f;
  --surface: #1c1a15;
  --surface2: #23201a;
  --border: #3a352b;
  --dtext: #ece6d8;
  --muted: #9b9384;
  --accent: #c2775c;
  --accent-bg: rgba(194, 119, 92, 0.12);
  --green: #85a878;
  --green-bg: rgba(133, 168, 120, 0.12);
  --amber: #c9a05a;
  --amber-bg: rgba(201, 160, 90, 0.12);
  --red: #b8695a;
  --red-bg: rgba(184, 105, 90, 0.12);
  --dradius: 3px;

  position: relative;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  background: var(--bg);
  color: var(--dtext);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 560px;
  overflow: hidden;
}
.ias-dash *, .ias-dash *::before, .ias-dash *::after { box-sizing: border-box; }
.ias-dash .mono { font-family: 'IBM Plex Mono', monospace; }
.ias-dash .srf { font-family: 'Source Serif 4', serif; }

/* In tour mode nothing is clickable, so don't imply otherwise. */
.ias-dash.is-tour, .ias-dash.is-tour * { cursor: default !important; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.d-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.d-brand { padding: 17px 17px 15px; border-bottom: 1px solid var(--border); }
.d-brand-name {
  font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.2px; line-height: 1.25;
}
.d-brand-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 5px;
}
.d-nav { padding-top: 15px; flex: 1; }
.d-group { margin-bottom: 17px; }
.d-group-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0 17px; margin-bottom: 5px;
}
.d-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; border-left: 2px solid transparent; padding: 8px 17px;
  font-size: 12.5px; color: var(--muted); font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.is-live .d-item { cursor: pointer; }
.is-live .d-item:not(.is-off):hover { color: var(--dtext); background: var(--surface2); }
.d-item.is-on {
  background: var(--surface2); border-left-color: var(--accent);
  color: var(--accent); font-weight: 500;
}
.d-item.is-off { opacity: 0.4; }
.is-live .d-item.is-off { cursor: not-allowed; }
.d-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.d-side-foot {
  padding: 13px 17px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}

/* ── Header ────────────────────────────────────────────────────────────── */
.d-main { min-width: 0; display: flex; flex-direction: column; }
.d-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.d-title { font-family: 'Source Serif 4', serif; font-size: 18px; font-weight: 600; line-height: 1.2; }
.d-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px;
}
.d-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-stamp { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); }
.d-stamp.ok { color: var(--green); }
.d-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--dtext);
  padding: 6px 11px; border-radius: 7px; font-size: 12.5px; font-family: inherit;
  transition: background 0.15s;
}
.is-live .d-btn { cursor: pointer; }
.is-live .d-btn:hover { background: var(--border); }
.d-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.d-body { padding: 20px; flex: 1; overflow: hidden; }

/* Compact mode — used by the home page's tour so the whole thing fits on a
   laptop screen without scrolling the page. The dashboard gets a fixed height
   and its body scrolls internally, which is what the real app does anyway once
   a dealer has more than a few deals. The tour scrolls its own target into
   view before pointing at it (see tour.js). */
/* Sized so the whole section — heading, panel, caption bar — still lands
   inside a 900px laptop viewport. Bigger than it was; the auto-scroll is what
   makes the extra content reachable, not extra height. */
.ias-dash.is-compact { height: clamp(400px, 57vh, 600px); min-height: 0; }
/* Try It gets more room than the tour: the visitor is reading and clicking at
   their own pace rather than being shown one thing at a time. */
.ias-dash.is-roomy { height: clamp(500px, 76vh, 840px); min-height: 0; }
.ias-dash.is-roomy .d-main { min-height: 0; }
.ias-dash.is-roomy .d-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ias-dash.is-roomy .d-side { overflow-y: auto; }
.ias-dash.is-roomy .d-body::-webkit-scrollbar { width: 8px; }
.ias-dash.is-roomy .d-body::-webkit-scrollbar-track { background: transparent; }
.ias-dash.is-roomy .d-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; border: 2px solid var(--bg); }

/* While the tour is auto-scrolling a view, hide the scrollbar — a thumb
   sliding on its own looks like the page is being dragged. */
.ias-dash.is-scanning .d-body { scrollbar-width: none; }
.ias-dash.is-scanning .d-body::-webkit-scrollbar { width: 0; }
/* min-height:0 on BOTH the column and the pane is what actually makes this
   scroll. A flex child defaults to min-height:auto, so .d-body grows to fit
   its content, scrollHeight equals clientHeight, overflow-y:auto does nothing
   and the content spills past the panel instead. */
.ias-dash.is-compact .d-main { min-height: 0; }
.ias-dash.is-compact .d-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ias-dash.is-compact .d-side { overflow-y: auto; }
/* A hairline scrollbar rather than the OS default, which is a pale slab on a
   dark panel and reads as a rendering fault. */
.ias-dash.is-compact .d-body::-webkit-scrollbar { width: 8px; }
.ias-dash.is-compact .d-body::-webkit-scrollbar-track { background: transparent; }
.ias-dash.is-compact .d-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px;
  border: 2px solid var(--bg);
}
.ias-dash.is-compact .d-body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Tour mode is not scrollable by hand ───────────────────────────────
   The tour drives its own scrolling — it walks each view top to bottom and
   brings its next target into view before pointing at it. A visitor
   scrolling at the same time is two hands on the same wheel: the panel
   jumps back the moment the next step measures its target.

   `overflow: hidden` stops the wheel, the trackpad and touch, but leaves
   `scrollTop` and `scrollTo()` working, which is all the tour uses. Scoped
   to .is-tour, NOT to .is-compact — the Try It page shares that height class
   and there the visitor is the one driving, so it must stay scrollable.

   Must come after the .is-compact rules above: same specificity, so source
   order is what decides.

   Paused is the exception. Once the tour has stopped there is no second hand
   on the wheel, and being unable to scroll back to something you paused
   specifically to read is just a locked door. tour.js adds .is-unlocked on
   pause and takes it off on resume.

   scrollbar-gutter keeps the space reserved in both states, so the content
   does not shift sideways the moment the scrollbar appears. */
.ias-dash.is-tour .d-body { overflow: hidden; scrollbar-gutter: stable; }
.ias-dash.is-tour.is-unlocked .d-body { overflow-y: auto; }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.d-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--dradius); padding: 14px 16px; }
.d-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
.d-stat-val { font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 600; line-height: 1.1; }
.d-stat-val.green { color: var(--green); }
.d-stat-val.amber { color: var(--amber); }
.d-stat-val.red { color: var(--red); }

/* ── Search + pipeline controls ────────────────────────────────────────── */
.d-search {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px;
  width: 100%; font-family: inherit;
}
.d-search::placeholder { color: var(--muted); }
.d-search:focus { outline: none; border-color: var(--accent); }

.d-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 13px; }
.d-bar-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.d-bar-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--dradius); overflow: hidden; }
.d-seg button {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 13px;
  border: none; background: transparent; color: var(--muted); transition: all 0.15s;
}
.d-seg button + button { border-left: 1px solid var(--border); }
.d-seg button.is-on { background: var(--surface2); color: var(--accent); }
.is-live .d-seg button { cursor: pointer; }
.d-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.d-tab {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 20px; color: var(--muted); background: transparent; transition: all 0.18s;
}
.is-live .d-tab { cursor: pointer; }
.is-live .d-tab:hover { color: var(--dtext); }
.d-tab.is-on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.d-tab:focus-visible, .d-seg button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ── Deal cards ────────────────────────────────────────────────────────── */
.d-deals { display: flex; flex-direction: column; gap: 10px; }
.d-deal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--dradius);
  padding: 15px 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; align-items: start; transition: border-color 0.15s, opacity 0.25s, transform 0.25s;
}
.is-live .d-deal:hover { border-color: #4a4335; }
.d-deal.hot { border-left: 4px solid var(--green); }
.d-deal.medium { border-left: 4px solid var(--amber); }
.d-deal.caution { border-left: 4px solid var(--red); }
.d-deal.is-going { opacity: 0; transform: translateX(24px); }
.d-tier {
  font-size: 9.5px; padding: 3px 8px; border-radius: 3px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; display: inline-block;
  margin-bottom: 7px; background: transparent; border: 1px solid;
}
.t-high { color: var(--green); border-color: var(--green); }
.t-quick { color: var(--accent); border-color: var(--accent); }
.t-std { color: var(--amber); border-color: var(--amber); }
.t-thin { color: var(--red); border-color: var(--red); }
.d-deal-title {
  font-family: 'Source Serif 4', serif; font-size: 16px; font-weight: 600;
  margin-bottom: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.d-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase;
  letter-spacing: 0.04em; border: 1px solid; background: transparent;
}
.d-pill.new { background: var(--accent); border-color: var(--accent); color: #fff; }
.d-pill.fit-hot { color: var(--green); border-color: var(--green); }
.d-pill.fit-mid { color: var(--amber); border-color: var(--amber); }
.d-pill.fit-low { color: var(--muted); border-color: var(--border); }
.d-pill.star { color: var(--amber); border-color: var(--amber); }
.d-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); margin-bottom: 9px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.d-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; padding: 2px 7px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em;
  background: transparent; border: 1px solid;
}
.c-green { color: var(--green); border-color: var(--green); }
.c-amber { color: var(--amber); border-color: var(--amber); }
.c-red { color: var(--red); border-color: var(--red); }

/* Risk is a marker on a track, exactly as the product draws it. A filled bar
   would read as "more is better", which is backwards for a risk score. */
.d-risk { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.d-risk-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; min-width: 50px; }
.d-risk-label.green { color: var(--green); }
.d-risk-label.amber { color: var(--amber); }
.d-risk-label.red { color: var(--red); }
.d-risk-label.dim { color: var(--muted); }
.d-gauge { flex: 1; height: 12px; position: relative; min-width: 50px; }
.d-gauge::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--border); }
.d-gauge i { position: absolute; top: 2px; width: 1px; height: 7px; background: var(--dtext); transform: translateX(-1px); }

.d-ai {
  font-size: 11.5px; color: var(--muted); line-height: 1.6; padding: 9px 11px;
  background: var(--surface2); border-radius: 7px;
  border-left: 2px solid var(--accent); margin-bottom: 10px;
}
.d-acts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.d-act {
  font-size: 11.5px; padding: 6px 11px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--dtext);
  font-family: inherit; transition: background 0.15s;
}
.is-live .d-act { cursor: pointer; }
.is-live .d-act:hover { background: var(--surface2); }
.d-act.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.is-live .d-act.primary:hover { background: #a5654d; }
.d-act.danger { color: var(--red); border-color: var(--red-bg); }
.is-live .d-act.danger:hover { background: var(--red-bg); }
.d-act.fav.is-on { color: var(--amber); border-color: var(--amber); }
.d-act.done { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.d-act:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.d-price { text-align: right; min-width: 142px; }
.d-price-big { font-family: 'Source Serif 4', serif; font-size: 25px; font-weight: 700; color: var(--green); line-height: 1; }
.d-price-cap { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 3px 0 9px; }
.d-price-row { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.d-price-gross { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--green); }
.d-price-gross.amber { color: var(--amber); }

/* ── Ledger view ───────────────────────────────────────────────────────── */
.d-ledger { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.d-ledger th {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.d-ledger th.num, .d-ledger td.num { text-align: right; }
.d-ledger td { padding: 10px; border-bottom: 1px solid var(--border); }
.is-live .d-ledger tbody tr { cursor: pointer; }
.is-live .d-ledger tbody tr:hover { background: var(--surface); }
.d-led-bar { display: block; width: 3px; height: 26px; border-radius: 2px; }
.d-led-bar.hot { background: var(--green); }
.d-led-bar.medium { background: var(--amber); }
.d-led-bar.caution { background: var(--red); }
.d-led-veh { font-family: 'Source Serif 4', serif; font-size: 14px; font-weight: 600; }
.d-led-src { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }
.d-ledger td.num { font-family: 'IBM Plex Mono', monospace; }
.d-ledger .gp { color: var(--green); font-weight: 600; }
.d-ledger .gp.amber { color: var(--amber); }
.d-ledger .rk.hot { color: var(--green); }
.d-ledger .rk.medium { color: var(--amber); }
.d-ledger .rk.caution { color: var(--red); }

/* ── Generic rows (My Deals, Training Data) ────────────────────────────── */
.d-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px;
  align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--dradius); padding: 12px 15px; margin-bottom: 8px;
}
.d-row-veh { font-family: 'Source Serif 4', serif; font-size: 14.5px; font-weight: 600; }
.d-row-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.d-row-num { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted); }
.d-row-strong { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--green); }

/* ── Notes ─────────────────────────────────────────────────────────────── */
.d-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.d-note-col-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 9px;
}
.d-note {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--dradius);
  padding: 11px 13px; margin-bottom: 8px;
}
.d-note-date { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted); margin-bottom: 5px; }
.d-note-text { font-size: 12.5px; line-height: 1.6; }
.d-compose {
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--dradius); padding: 13px; color: var(--muted); font-size: 12.5px;
}

/* ── Run Status ────────────────────────────────────────────────────────── */
.d-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.d-status-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--dradius); padding: 15px 17px; }
.d-status-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 9px; }
.d-status-ind { display: flex; align-items: center; gap: 9px; }
.d-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.d-status-dot.amber { background: var(--amber); }
.d-status-dot.muted { background: var(--muted); }
.d-status-text { font-size: 14px; font-weight: 500; }
.d-status-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

/* ── Admin ─────────────────────────────────────────────────────────────── */
.d-admin-warn {
  background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber);
  border-radius: var(--dradius); padding: 10px 13px; font-size: 12px; margin-bottom: 14px;
}
.d-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--dradius); padding: 16px 18px; margin-bottom: 12px; }
.d-card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.d-card-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 13px; line-height: 1.5; }
.d-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 12.5px; }
.d-field-val { font-family: 'IBM Plex Mono', monospace; color: var(--accent); }

/* ── Report drawer ─────────────────────────────────────────────────────── */
.d-scrim {
  position: absolute; inset: 0; background: rgba(10, 9, 7, 0.62);
  opacity: 0; pointer-events: none; transition: opacity 0.32s; z-index: 8;
}
.d-scrim.is-on { opacity: 1; }
.is-live .d-scrim.is-on { pointer-events: auto; cursor: pointer; }
.d-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(410px, 82%);
  background: var(--surface); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
  z-index: 9; overflow-y: auto; padding: 18px 20px;
}
.d-drawer.is-on { transform: none; }
.d-dr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.d-dr-title { font-family: 'Source Serif 4', serif; font-size: 16px; font-weight: 600; line-height: 1.3; }
.d-dr-x { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px; font-family: inherit; }
.is-live .d-dr-x { cursor: pointer; }
.is-live .d-dr-x:hover { color: var(--dtext); }
.d-dr-sec {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 7px;
}
.d-dr-line {
  display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.d-dr-line > span:last-child { font-family: 'IBM Plex Mono', monospace; color: var(--muted); }
.d-dr-line b { font-family: 'IBM Plex Mono', monospace; color: var(--green); font-weight: 700; }

/* ── The tour cursor ───────────────────────────────────────────────────── */
.d-cursor {
  position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none;
  opacity: 0;
  /* A long ease-out reads as a hand moving and settling; the old curve
     accelerated out of the gate and stopped dead. */
  transition: opacity 0.3s, transform 0.86s cubic-bezier(.22, .68, .24, 1);
  will-change: transform;
}
.d-cursor.is-on { opacity: 1; }
.d-cursor svg { display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }
/* Centred on the pointer TIP (0,0), not on the svg box — the tip is what the
   viewer reads as "here", so that is where a click should appear to land. */
.d-cursor-ring {
  position: absolute; top: -17px; left: -17px; width: 34px; height: 34px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0; transform: scale(0.35); pointer-events: none;
}
/* The ripple leaves FROM the tip, which is where a real click lands, and the
   arrow dips into it. Together with .is-tour-press on the target these are
   the whole click: contact, recoil, and the thing reacting. */
.d-cursor.is-tap .d-cursor-ring { animation: dTap 0.5s cubic-bezier(.2, .6, .3, 1); }
.d-cursor.is-tap svg { transform: translate(1px, 1px) scale(0.88); transition: transform 0.11s; }
@keyframes dTap {
  0%   { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.6); }
}
/* A soft halo under the pointer so it stays findable against the dark UI. */
.d-cursor-glow {
  position: absolute; top: -25px; left: -25px; width: 50px; height: 50px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(194, 119, 92, 0.22) 0%, rgba(194, 119, 92, 0) 68%);
}

/* ── What the tour is pointing at ──────────────────────────────────────
   The tour marks its target by giving that element the state a real pointer
   would give it, instead of drawing a rectangle near it.

   This replaced a separately positioned box. That box could never match the
   element's own corner radius, padding or shape, which is why it read as
   bolted on rather than as part of the UI — and because it lived in the
   panel's coordinate space it had to be re-measured every time the body
   scrolled or the window resized. A class on the element inherits all of
   that geometry for free and moves with it.

   `box-shadow` rather than `outline` or `border`: it follows border-radius,
   costs no layout, and can carry both the crisp edge and the soft halo in
   one property. */
.ias-dash .is-tour-aim {
  position: relative;
  z-index: 3;
  border-radius: 4px;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(194, 119, 92, 0.15);
  filter: brightness(1.12);
  transition: box-shadow 0.24s ease, filter 0.24s ease;
}

/* The press. A hover that never changes on the click reads as a diagram; a
   real click drives the thing it lands on. Held for the length of the tap
   ripple below so the two are obviously the same event. */
.ias-dash .is-tour-press {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px rgba(194, 119, 92, 0.24);
  filter: brightness(1.3);
  transition: box-shadow 0.09s ease, filter 0.09s ease;
}

/* Small targets — the Fit pill, the filter chips — get a hairline and no
   halo. The full treatment is sized for a button or a row; on a 50x20 pill
   a 5px glow is wider than the thing it is drawing attention to, so it stops
   reading as emphasis and starts reading as a rendering fault. tour.js
   measures the element and adds this class; see setAim(). */
.ias-dash .is-tour-aim.is-tour-small {
  box-shadow: 0 0 0 1px var(--accent);
  filter: brightness(1.06);
}
.ias-dash .is-tour-press.is-tour-small {
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 3px rgba(194, 119, 92, 0.2);
  filter: brightness(1.16);
}

/* A view fades up as it ARRIVES — on a genuine navigation, and only then.
   This used to be unscoped (`.d-body > *`), so every filter click, every
   search keystroke and every Ledger/Cards toggle re-ran a fade-and-slide on
   the whole body. That is what made an in-place change read as a page
   reload. dashboard.js adds .is-entering for the length of the animation and
   takes it off again. */
@keyframes dViewIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.d-body.is-entering > * { animation: dViewIn 0.42s cubic-bezier(.22, .68, .24, 1) both; }

/* Ledger <-> Cards. Opacity only, no movement: the toolbar above it does not
   budge, so the two shapes of the list simply cross over each other. */
@keyframes dSwapIn { from { opacity: 0; } to { opacity: 1; } }
.d-list.is-swapping > * { animation: dSwapIn 0.24s ease both; }

/* ── Responsive — mirrors the product's own collapse ───────────────────── */
@media (max-width: 1000px) {
  .ias-dash { grid-template-columns: 1fr; min-height: 0; }
  /* The sidebar becomes a horizontal strip that is wider than the phone, and
     it does scroll — but nothing said so. Touch devices hide scrollbars, so a
     short fade on the trailing edge is the only cue a thumb gets that there
     are more tabs past Admin. */
  .d-side { flex-direction: row; align-items: center; gap: 12px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--border); padding: 10px 14px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .d-side::-webkit-scrollbar { height: 3px; }
  .d-side::-webkit-scrollbar-track { background: transparent; }
  .d-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .d-brand { border-bottom: none; padding: 0 14px 0 0; border-right: 1px solid var(--border); white-space: nowrap; }
  .d-nav { padding-top: 0; display: flex; align-items: center; gap: 12px; }
  .d-group { margin-bottom: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .d-group-label { padding: 0; margin-bottom: 0; }
  .d-item { width: auto; padding: 6px 10px; border-left: none;
    border-bottom: 2px solid transparent; border-radius: 3px; white-space: nowrap; }
  .d-item.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
  .d-side-foot { display: none; }
  .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-deal { grid-template-columns: 1fr; }
  .d-price { text-align: left; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; min-width: 0; }
  .d-price-cap { display: none; }
  .d-price-big, .d-price-row, .d-price-gross { margin-bottom: 0; }
  .d-notes { grid-template-columns: 1fr; }
  .d-status-grid { grid-template-columns: 1fr; }
  /* No pointer to imitate on a touch screen, and an arrow drifting over the
     UI reads as a bug. The tour still runs; it just narrates without it. */
  .d-cursor, .d-spot { display: none; }
}
@media (max-width: 640px) {
  .d-body { padding: 15px; }
  .d-head { padding: 11px 14px; }
  .d-stats { grid-template-columns: 1fr; }
  .d-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  .d-row-num { grid-column: 1; }
  .d-ledger th:nth-child(4), .d-ledger td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ias-dash *, .ias-dash *::before { transition: none !important; animation: none !important; }
  .d-cursor, .d-spot { display: none; }
}