/* ==========================================================================
   MDO — brand pack v1.3 (2026-10-06: mark "modules", wordmark MDO Property; v1.2 mark; v1.1 map; v1.0 2026-10-05)
   Subur Tiasa group top-level information system (the Property module).
   Family: Okra Sky (cool blue-grey ground, white panels, pale-blue fills,
   12px cards, pill chips, 1px lines, 140ms motion) — own face, own slots.

   Mark: "modules" (v1.3) — the Managing Director's Office as one desk over many
   modules: four rounded tiles in a 2x2 grid, three filled and the fourth (bottom
   right) an outline, the module you are in; action-ink on an action tile (rx 10 of 64).
   Wordmark: "MDO Property" (Property in accent-text, weight 500).
   Generated from these tokens by mdo/tools/icons.py; never redrawn by hand.

   SLOTS
     display face : Outfit 500/600            (OFL, self-hosted woff2)
     body face    : Source Sans 3 400/600     (OFL, self-hosted woff2)
     data face    : Source Code Pro 400       (OFL, self-hosted woff2)
     palette      : ground #F2F5F9 · surface #FFFFFF / #EEF2F7 / #E2E8F0
                    ink #1A1F29 / #3F4756 / #566070 · line #DFE5ED / #C3CCD8
                    accent (action/text) #1E24A8 "ultramarine"
                    accent fill #E3E6FB / ink #141A5E
                    good #1D6A3C · warn #8A4700 · bad #B0261E
     dark         : ground #0F141B · surface #171D26 · ink #E3E8F0
                    accent #8E93F5 · fill #262C6B
     shape        : radius 12px cards, 8px controls, pill chips; 1px lines;
                    no shadow (a 1px line separates panels)
     motion       : 140ms cubic-bezier(.2,0,0,1); none under reduced motion
     map (v1.1)   : land-cover categories for the map's "Colour by: Land cover"
                    (seven hues, one per eLASIS class; "unclear" uses --ink-3):
                    palm #2F7A2A · crop #7D6E00 · cleared #A3501E · forest #00727A
                    built #A3246B · water #1F6FB2 · mixed #6B3A9E
                    dark: #8FD486 #DCC95A #F2A779 #5FC8D0 #F28CC4 #86BDF2 #C9A4F0
                    --map-halo #FFFFFF in both themes (pin rings over imagery)

   ACCENT DISTANCE (CIEDE2000, computed 2026-10-05 against every accent /
   action hex in house/brand/*.css and okra.css, 18 values):
     #1E24A8 vs Okra Sky #1B58BE      = 15.8
     #1E24A8 nearest sibling          = 14.8 (okra Sky dark fill #1C4B77)
     dark #8E93F5 nearest sibling     = 13.4 (okra Sky dark #9BC3F5)
   Contrast: #1E24A8 on #FFFFFF 11.2:1, on ground 10.3:1;
             #8E93F5 on dark surface 5.4:1+.
   Fonts are not used by any other house/brand pack or okra.css.
   ========================================================================== */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/source-code-pro-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --font-display: "Outfit", "Source Sans 3", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-data: "Source Code Pro", monospace;

  --ground: #F2F5F9;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --surface-3: #E2E8F0;
  --ink: #1A1F29;
  --ink-2: #3F4756;
  --ink-3: #566070;
  --line: #DFE5ED;
  --line-2: #C3CCD8;

  --accent: #E3E6FB;        /* pale fill: chips, selected rows */
  --accent-ink: #141A5E;    /* text on the fill */
  --accent-text: #1E24A8;   /* links, active nav */
  --action: #1E24A8;        /* primary buttons */
  --action-ink: #FFFFFF;
  --focus: #1E24A8;

  --good: #1D6A3C; --good-soft: #DFF0E5;
  --warn: #8A4700; --warn-soft: #FAEAD6;
  --bad:  #B0261E; --bad-soft:  #FADFDD;

  /* recommendation colours (map pins, chips) */
  --rec-rent: #1E24A8;
  --rec-palm: #1D6A3C;
  --rec-develop: #6B3A9E;
  --rec-sell: #B0261E;
  --rec-hold: #7A5C00;
  --rec-keep: #006A73;
  --rec-pending: #5E6675;

  /* map: land cover categories (eLASIS field check) and the pin halo over imagery */
  --cover-palm: #2F7A2A;
  --cover-crop: #7D6E00;
  --cover-cleared: #A3501E;
  --cover-forest: #00727A;
  --cover-built: #A3246B;
  --cover-water: #1F6FB2;
  --cover-mixed: #6B3A9E;
  --map-halo: #FFFFFF;

  --radius: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --border: 1px;
  --shadow: none;
  --dur: 140ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F141B; --surface: #171D26; --surface-2: #1E2530; --surface-3: #27303C;
    --ink: #E3E8F0; --ink-2: #B7C0CD; --ink-3: #98A2B1;
    --line: #28303B; --line-2: #3A4350;
    --accent: #262C6B; --accent-ink: #E1E4FF; --accent-text: #8E93F5;
    --action: #8E93F5; --action-ink: #0B0F3D; --focus: #A9ADFF;
    --good: #7FD19B; --good-soft: #183A26;
    --warn: #F0B46A; --warn-soft: #3D2A12;
    --bad:  #F59C94; --bad-soft:  #43201E;
    --rec-rent: #8E93F5; --rec-palm: #7FD19B; --rec-develop: #C9A4F0; --rec-sell: #F59C94;
    --rec-hold: #E2C35A; --rec-keep: #5FC8D0; --rec-pending: #A3ACBA;
    --cover-palm: #8FD486; --cover-crop: #DCC95A; --cover-cleared: #F2A779; --cover-forest: #5FC8D0;
    --cover-built: #F28CC4; --cover-water: #86BDF2; --cover-mixed: #C9A4F0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F141B; --surface: #171D26; --surface-2: #1E2530; --surface-3: #27303C;
  --ink: #E3E8F0; --ink-2: #B7C0CD; --ink-3: #98A2B1;
  --line: #28303B; --line-2: #3A4350;
  --accent: #262C6B; --accent-ink: #E1E4FF; --accent-text: #8E93F5;
  --action: #8E93F5; --action-ink: #0B0F3D; --focus: #A9ADFF;
  --good: #7FD19B; --good-soft: #183A26;
  --warn: #F0B46A; --warn-soft: #3D2A12;
  --bad:  #F59C94; --bad-soft:  #43201E;
  --rec-rent: #8E93F5; --rec-palm: #7FD19B; --rec-develop: #C9A4F0; --rec-sell: #F59C94;
  --rec-hold: #E2C35A; --rec-keep: #5FC8D0; --rec-pending: #A3ACBA;
  --cover-palm: #8FD486; --cover-crop: #DCC95A; --cover-cleared: #F2A779; --cover-forest: #5FC8D0;
  --cover-built: #F28CC4; --cover-water: #86BDF2; --cover-mixed: #C9A4F0;
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; font-weight: 500; }
a { color: var(--accent-text); text-underline-offset: 2px; }
code, kbd, .data, .num { font-family: var(--font-data); font-size: .94em; font-variant-numeric: tabular-nums; }
small, .muted { color: var(--ink-3); font-size: .94rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---- components ---------------------------------------------------------- */
.card {
  background: var(--surface); border: var(--border) solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink);
  border: var(--border) solid transparent; font-size: .94rem; line-height: 1.6; white-space: nowrap;
}
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad  { background: var(--bad-soft);  color: var(--bad); }
.chip.quiet { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--radius-control);
  border: var(--border) solid var(--line-2); background: var(--surface); color: var(--ink);
  font: 600 1rem/1.2 var(--font-body); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.btn.primary:hover { filter: brightness(1.08); }
input, select, textarea {
  font: 400 1rem/1.4 var(--font-body); color: var(--ink); background: var(--surface);
  border: var(--border) solid var(--line-2); border-radius: var(--radius-control);
  padding: 8px 10px; min-height: 40px;
}
.table-wrap { overflow-x: auto; border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: var(--border) solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}