/* ============================================================================
   Sand Point Platform — typography
   ----------------------------------------------------------------------------
   The platform had drifted to ten different font stacks. Roughly thirty places
   hardcoded `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`, which
   bypasses Inter entirely, so half the interface rendered in Inter and half in
   whatever the OS default happened to be. waterfall.html was the worst case:
   it declared --sandpoint-font:'Inter' but never actually loaded Inter in its real
   <head>, so the entire Asset Management module fell back to the system face.
   Mixed faces at mixed weights is most of what reads as "unfinished" in a
   product like this.

   This file is the single source of truth. Load it LAST so it wins over the
   inline <style> blocks without needing every one of them rewritten.

   What makes finance software look like finance software, in order of effect:
     1. Numbers that line up. Proportional digits make a column of figures
        ragged; tabular lining figures make it a table. This is the big one.
     2. One face, used consistently, with restraint in the weight range.
     3. Slightly tightened tracking on headings; slightly loosened on the small
        uppercase labels that carry section names.
     4. Real typographic minus for negatives, so (1,234) and -1,234 align.
   ========================================================================== */

:root {
  --sandpoint-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  /* Was a real monospace stack ('SF Mono' etc). .met-val (every KPI/stat
     number platform-wide), .mono, .num, .figure, and anything named with
     "mono" all render with font-family:var(--mono) — that made every
     headline number look like a different typeface from a plain table cell
     (like Leasing's Rent column, which has no override and just inherits
     Inter). Aliasing --mono to --sandpoint-font makes every one of those
     identical to the rest of the platform in this one place, without
     touching the tabular-nums alignment rules below, which apply just as
     well to Inter as to a monospace face. */
  --mono: var(--sandpoint-font);
}

/* ── 1. One face everywhere ─────────────────────────────────────────────────
   The catch-all below deliberately does NOT touch anything that opted into the
   mono stack, icon fonts, or the Leaflet map surface, which ships its own. */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
table, th, td, label, p, div, span, a, li {
  font-family: var(--sandpoint-font);
}

code, pre, kbd, samp,
.mono, .num, .figure,
[class*="mono"] {
  font-family: var(--mono);
}

/* Leaflet draws its own controls and attribution; leave them alone. */
.leaflet-container, .leaflet-container * { font-family: var(--sandpoint-font); }

/* ── 2. Tabular figures ─────────────────────────────────────────────────────
   Every number that sits in a column gets fixed-width lining digits so decimal
   points stack. Applied to table cells wholesale rather than to a class,
   because financial figures in this codebase are written a dozen different
   ways and a class-based approach would miss most of them. */
table, th, td,
.mono, .num, .figure, .right,
input[type="number"], input[inputmode="decimal"],
.stat, .stat-value, .metric, .metric-value,
.kpi, .kpi-value, .badge {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'ss01' 1, 'cv05' 1;
}

/* Right-aligned numeric columns read better very slightly tracked out — it
   stops long figures from looking cramped against the cell edge. */
td.right, th.right, .mono.right {
  letter-spacing: 0.01em;
}

/* ── 3. Headings and labels ────────────────────────────────────────────────
   Inter is optically a touch wide at display sizes; institutional interfaces
   pull headings in slightly. The small uppercase section labels go the other
   way, since uppercase needs air to stay legible. */
h1, h2, h3, .tracker-title, .card-title, .page-title, .brand {
  letter-spacing: -0.014em;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
}
h1 { letter-spacing: -0.02em; }

.sec-label, .dp-label, .section-label, .eyebrow,
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"] {
  letter-spacing: 0.062em;
  font-weight: 600;
}

/* ── 4. Body copy ──────────────────────────────────────────────────────────
   Antialiasing off by default on macOS makes Inter look heavy and slightly
   blurry at UI sizes; the two hints below are what most design systems ship. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tables are dense here; a marginally taller line makes long rows scannable
   without changing any row heights that are set explicitly. */
td, th { line-height: 1.45; }

/* Inputs inherited the browser default face in a few places, which is the most
   obvious single tell that a screen was assembled rather than designed. */
input, select, textarea, button {
  font-size: inherit;
  letter-spacing: inherit;
}

/* ── 4b. Selects ───────────────────────────────────────────────────────────
   Left alone, a <select> renders with the operating system's own control:
   a grey bevel and a chunky arrow on Windows, a pill on macOS. So the same
   screen looked like two different products depending on the machine, and
   next to the flat bordered inputs the dropdowns read as the one piece of
   furniture nobody styled.

   The native appearance is removed and replaced with the same border, radius
   and background the text inputs already use, plus a chevron drawn as an
   inline SVG so it is identical everywhere. Sizes and colours are inherited
   rather than fixed, so the dense 11px selects inside tables stay dense.

   :not([multiple]):not([size]) deliberately excludes list boxes — those are
   scrolling lists, and a chevron on them would be a lie.                     */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;

  /* Room for the chevron so a long option never runs underneath it. */
  padding-right: 26px;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* The arrow is decoration; it shouldn't imply the control is usable when it
   isn't, and a disabled select should read as flat. */
select:not([multiple]):not([size]):disabled,
select:not([multiple]):not([size])[readonly] {
  background-image: none;
  padding-right: 10px;
  cursor: default;
  opacity: .7;
}

/* Focus should look the same on a select as on the inputs beside it. */
select:not([multiple]):not([size]):focus-visible {
  outline: 2px solid color-mix(in srgb, #1a4f8a 55%, transparent);
  outline-offset: 1px;
}

/* The dropdown list itself is drawn by the OS and is largely unstyleable, but
   the option rows do inherit these, which stops the open list from falling
   back to a serif or a different size on Windows. */
select option, select optgroup {
  font-family: var(--sandpoint-font);
  font-size: 13px;
  color: var(--text, #1a1a1a);
  background: var(--bg, #ffffff);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  select:not([multiple]):not([size]):focus-visible { outline-color: #1a4f8a; }
}

@media (prefers-color-scheme: dark) {
  /* Same chevron, lightened, so it doesn't disappear on a dark surface. */
  select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aeaeb2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ── 4c. Click-to-expand rows ──────────────────────────────────────────────
   The platform-wide editing pattern: click a record, it opens in place. No
   per-row "Edit" button — a button in every row is visual noise on a dense
   table, and the row itself is the larger, more obvious target.

   Cells that hold their own control (a delete button, a status dropdown)
   stop propagation so they still work without also toggling the row.        */
tr.sandpoint-rowedit { cursor: pointer; transition: background .12s ease; }
tr.sandpoint-rowedit:hover > td { background: color-mix(in srgb, #1a4f8a 4%, transparent); }
tr.sandpoint-rowedit[data-open="1"] > td {
  background: color-mix(in srgb, #1a4f8a 6%, transparent);
  font-weight: 600;
}
/* Keeps the open row visually attached to the panel it opened. */
tr.sandpoint-rowedit[data-open="1"] > td:first-child {
  box-shadow: inset 2px 0 0 #b87f28;
}
tr.sandpoint-rowedit-panel > td {
  background: var(--bg2, #f5f5f4);
  padding: 12px 14px 14px;
  border-bottom: 0.5px solid var(--border, #e5e7eb);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  tr.sandpoint-rowedit:hover > td { background: rgba(26, 79, 138, 0.04); }
  tr.sandpoint-rowedit[data-open="1"] > td { background: rgba(26, 79, 138, 0.06); }
}

/* A record modal docked into an expanded row. It is the same node the modal
   uses, so it has to shed the floating-dialog treatment — no shadow, no
   rounded card, no max-height scroll — and sit flush inside the table. */
.modal.sandpoint-modal-inline {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  max-height: none;
  width: 100%;
  margin: 0;
}
.modal.sandpoint-modal-inline > .modal-hdr {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0.5px solid var(--border, #e5e7eb);
}
/* The dialog's own close X is redundant inline — the row toggles it. */
.modal.sandpoint-modal-inline > .modal-hdr .close-btn { display: none; }
.modal.sandpoint-modal-inline > .modal-body {
  padding-left: 0;
  padding-right: 0;
  max-height: none;
  overflow: visible;
}
.modal.sandpoint-modal-inline > .modal-actions {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* ── 5. Negative numbers ───────────────────────────────────────────────────
   A hyphen-minus is narrower than a digit, so a column mixing positives and
   negatives loses alignment on the leading character. */
.neg, .negative, [data-negative="true"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── 6. Print ──────────────────────────────────────────────────────────────
   Investor statements print; keep figures tabular on paper too. */
@media print {
  body, table, th, td {
    font-family: var(--sandpoint-font);
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* ============================================================================
   SURFACES & SECTION SEPARATION
   ----------------------------------------------------------------------------
   The complaint, from a zoomed-out screenshot: on dense pages it is hard to see
   where one section ends and the next begins. The cause is that almost
   everything is white on white, separated only by hairline 0.5px borders. At
   100% zoom you can just about read the structure; at any distance it collapses
   into one continuous sheet.

   Three changes, in order of effect:
     1. Figure and ground. The page gets a faint tint and cards stay white, so
        a card reads as a distinct object rather than an area of the same paper.
     2. Section headers earn their place — darker, with a rule running to the
        right — instead of small grey uppercase floating above content.
     3. Rhythm. More space BETWEEN sections than within them, which is what
        actually communicates grouping.

   Deliberately conservative: no layout properties are touched (no widths,
   no flex/grid changes, no padding that would reflow a table). Only colour,
   border, shadow and vertical margin.
   ========================================================================== */

/* ── 1. Figure / ground ──────────────────────────────────────────────────── */
body {
  background: #f6f7f9;
}

.card,
.tbl-wrap,
.table-wrap,
.detail-panel,
.modal,
.pane > .card {
  background: #fff;
  border: 1px solid #e3e6ea;
  box-shadow: 0 1px 2px rgba(27,29,27, 0.04);
}

/* card-surface is the recessed variant — it should read as inset, not raised. */
.card-surface {
  background: #f0f2f5;
  border: 1px solid #e3e6ea;
  box-shadow: none;
}

/* ── 2. Section headers ──────────────────────────────────────────────────── */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  color: #535b53;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin: 34px 0 12px;
  padding: 5px 10px 5px 9px;
  border-left: 3px solid #b87f28;      /* the gold accent, thickened to register */

  /* A thin translucent band so a subsection reads as its own region rather
     than a caption floating above a card. Deliberately faint: colour-mixed
     from the existing gold accent at 5%, so it tints with the brand instead
     of introducing a new grey, and it sits over whatever surface it lands on
     rather than punching a hard block into the page. */
  background: linear-gradient(to right,
              color-mix(in srgb, #b87f28 7%, transparent),
              color-mix(in srgb, #b87f28 2%, transparent) 55%,
              transparent);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}

/* color-mix is well supported now but not universal; older engines would drop
   the background entirely and lose the band. This flat fallback is overridden
   by the rule above wherever color-mix parses. */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
  .sec-label { background: rgba(184,127,40, 0.05); }
}

/* The rule after the words is what makes a heading read as a divider rather
   than a caption. It fills whatever width is left. */
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #dfe3e8, rgba(223, 227, 232, 0));
}

.sec-label:first-child { margin-top: 0; }

/* ── 3. Rhythm ───────────────────────────────────────────────────────────── */
.card { margin-bottom: 14px; }

/* A card immediately after a section label belongs TO that label, so it sits
   tight; the next label then opens a clear gap. */
.sec-label + .card,
.sec-label + .card-surface,
.sec-label + .tbl-wrap,
.sec-label + .table-wrap { margin-top: 0; }

/* ── 4. Table legibility at a glance ─────────────────────────────────────── */
thead th {
  background: #f7f8fa;
  border-bottom: 1px solid #e3e6ea !important;
  color: #535b53;
  font-weight: 650;
}

tbody tr + tr td { border-top: 1px solid #f0f2f5; }

/* Zebra striping on long financial tables — the amortisation schedule is
   hundreds of rows and unstriped rows are genuinely hard to track across. */
.tbl-wrap tbody tr:nth-child(even) > td,
.table-wrap tbody tr:nth-child(even) > td { background: #fcfcfd; }

tbody tr:hover > td { background: #f4f7fb; }

tfoot td {
  background: #f7f8fa;
  border-top: 2px solid #dfe3e8 !important;
  font-weight: 650;
}

/* v35.4 — the colours above are light-mode values. In dark mode they turned
   the Distribution ledger's "Total to date" row into white cells with
   near-white text (1.05:1). Same rules, theme surfaces. Light mode is
   unchanged. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) thead th { background: var(--bg2); border-bottom-color: var(--border) !important; color: var(--text2); }
  html:not([data-theme="light"]) tbody tr + tr td { border-top-color: var(--border); }
  html:not([data-theme="light"]) .tbl-wrap tbody tr:nth-child(even) > td,
  html:not([data-theme="light"]) .table-wrap tbody tr:nth-child(even) > td { background: transparent; }
  html:not([data-theme="light"]) tbody tr:hover > td { background: var(--bg2); }
  html:not([data-theme="light"]) tfoot td { background: var(--bg2); border-top-color: var(--border2, var(--border)) !important; color: var(--text); }
}
html[data-theme="dark"] thead th { background: var(--bg2); border-bottom-color: var(--border) !important; color: var(--text2); }
html[data-theme="dark"] tbody tr + tr td { border-top-color: var(--border); }
html[data-theme="dark"] .tbl-wrap tbody tr:nth-child(even) > td,
html[data-theme="dark"] .table-wrap tbody tr:nth-child(even) > td { background: transparent; }
html[data-theme="dark"] tbody tr:hover > td { background: var(--bg2); }
html[data-theme="dark"] tfoot td { background: var(--bg2); border-top-color: var(--border2, var(--border)) !important; color: var(--text); }

/* ── 5. Panel headers ────────────────────────────────────────────────────── */
.tracker-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #eceff2;
  margin-bottom: 14px;
}
.tracker-title { font-size: 15px; font-weight: 650; color: #1b1d1b; }
.tracker-sub   { font-size: 12px; color: #667085; margin-top: 3px; }

/* Metric tiles need an edge or they float in the card. */
.met {
  background: #f8f9fb;
  border: 1px solid #eceff2;
  border-radius: 8px;
  padding: 10px 12px;
}
.met-lbl {
  font-size: 10px; font-weight: 650; color: #667085;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.met-val { font-weight: 650; color: #1b1d1b; }

/* ── 6. Dark mode opt-out ────────────────────────────────────────────────
   Everything above is light-specific. If a dark theme is ever switched on,
   these would fight it, so they stand down rather than half-apply. */
@media (prefers-color-scheme: dark) {
  body[data-theme="dark"] { background: inherit; }
  body[data-theme="dark"] .card,
  body[data-theme="dark"] .tbl-wrap,
  body[data-theme="dark"] .table-wrap { background: inherit; border-color: inherit; box-shadow: none; }
}

/* Print: strip the tint and the shadows, keep the structure. */
@media print {
  body { background: #fff; }
  .card, .tbl-wrap, .table-wrap { box-shadow: none; border-color: #ccc; }
  .tbl-wrap tbody tr:nth-child(even) > td,
  .table-wrap tbody tr:nth-child(even) > td { background: transparent; }
}

/* v33.13 — drag-to-reorder handle (sandpointDragHandle in sandpoint-shell.js) and the
   hover-only remove ✕ that replaced per-row ▲ ▼ 🗑 buttons. */
.sandpoint-drag{display:inline-flex;align-items:center;justify-content:center;width:14px;height:20px;flex-shrink:0;
  color:var(--text3,#9ca3af);cursor:grab;opacity:.35;border-radius:3px;touch-action:none;transition:opacity .12s}
[data-drag-row]:hover .sandpoint-drag,.sandpoint-drag:focus-visible{opacity:1}
.sandpoint-drag:focus-visible{outline:none;box-shadow:0 0 0 2px #b87f28}
body.sandpoint-is-dragging,body.sandpoint-is-dragging *{cursor:grabbing!important;user-select:none}
[data-drag-row].sandpoint-dragging{opacity:.45}
[data-drag-row].sandpoint-drop-before{box-shadow:inset 0 2px 0 #b87f28}
[data-drag-row].sandpoint-drop-after{box-shadow:inset 0 -2px 0 #b87f28}
.sandpoint-hover-x{all:unset;cursor:pointer;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;color:var(--text3,#9ca3af);font-size:12px;opacity:0;transition:opacity .12s,color .12s,background .12s}
[data-drag-row]:hover .sandpoint-hover-x,tr:hover > td .sandpoint-hover-x,.sandpoint-hover-x:focus-visible{opacity:1}
.sandpoint-hover-x:hover{color:var(--red-text,#b42318);background:color-mix(in srgb,#b42318 8%,transparent)}
@media (hover:none){.sandpoint-hover-x,.sandpoint-drag{opacity:.7}}