/* MeasurePath drafting-paper design system. */
:root,
:host,
.mp-root {
  color-scheme: light;
  --mp-paper: #F6F5F0;
  --mp-surface: #ECEAE2;
  --mp-well: #FCFBF9;
  --mp-border: #D8D4C8;
  --mp-input-border: #C7C2B4;
  --mp-ink: #1C1B18;
  --mp-muted: #605E57;
  --mp-accent: #C85A32;
  --mp-success: #2E5A44;
  --mp-grid: #E2DFD5;
  --mp-radius: 4px;
  --mp-radius-sm: 2px;
  --mp-radius-lg: 6px;
  --mp-font-body: Arial, Helvetica, sans-serif;
  --mp-font-heading: "MP Newsreader", Georgia, "Times New Roman", serif;
  --mp-font-mono: "MP Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* Compatibility aliases: retire them as existing declarations are migrated. */
  --paper: var(--mp-paper);
  --canvas: var(--mp-paper);
  --surface: var(--mp-surface);
  --white: var(--mp-well);
  --ink: var(--mp-ink);
  --text: var(--mp-ink);
  --muted: var(--mp-muted);
  --soft-text: var(--mp-muted);
  --line: var(--mp-border);
  --border: var(--mp-border);
  --green: var(--mp-success);
  --rust: var(--mp-accent);
  --lime: var(--mp-surface);
  --radius: var(--mp-radius);
  --shadow: none;
  --mp-text: var(--mp-ink);
  --mp-green: var(--mp-success);
  --mp-line: var(--mp-border);
  --mp-soft: var(--mp-surface);
  --mp-white: var(--mp-well);
}

body, .mp-root, .mp-start {
  background: var(--mp-paper);
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
}
h1, h2, .mp-intro h1, .mp-start h1,
.mp-hero h1, .house-copy h2, .house-picker-links .house-copy h2 {
  color: var(--mp-ink);
  font-family: var(--mp-font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
h3, .mp-panel-title, .mp-result-heading {
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero-description, .mp-muted, .hint, .mp-disclaimer,
.mp-space-breakdown p, .mp-space-row small, .mp-start p {
  color: var(--mp-muted);
}

/* Utility vocabulary for any new presentation markup. */
.mp-paper { background: var(--mp-paper); }
.mp-sheet { background: var(--mp-surface); border: 1px solid var(--mp-border); }
.mp-well { background: var(--mp-well); }
.mp-hairline { border-block-start: 1px solid var(--mp-border); }
.mp-muted-text { color: var(--mp-muted); }
.mp-numeric {
  font-family: var(--mp-font-mono);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

/* Matte cards. Replace the old declarations in each owning stylesheet. */
.inputs, .results, .hero-workspace, .mp-tool-card, .link-card,
.account-panel, .history-card, .cloud-save, .measurement-figure,
.house-stage, .house-links a, .mp-panel, .mp-center, .mp-room-card,
.mp-scope-card, .mp-space-breakdown, .mp-result-bignum {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: none;
  backdrop-filter: none;
}
.mp-tool-card:hover, .mp-hero .hero-cta:hover,
.house-picker-links .house-links a:hover,
.house-picker-links .house-links a:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--mp-ink);
}
.mp-hero, .mp-hero .house-stage {
  background: var(--mp-paper);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: none;
}
.mp-hero::before { content: none; }
.hero-proof span, .mp-hero .hero-kicker, .house-picker-links .house-links a,
.mp-scope-pills label, .mp-segment, .mp-segment button, .mp-top-button,
.mp-canvas-tabs button, .mp-mode, .mp-coordinate-chip, .mp-viewport-pill {
  border-radius: var(--mp-radius-sm);
  box-shadow: none;
  background: var(--mp-surface);
  color: var(--mp-ink);
}
.mp-top, .mp-site-links, .mp-canvas-top {
  background: var(--mp-paper);
  border-color: var(--mp-border);
  box-shadow: none;
  backdrop-filter: none;
}

/* Text-sized controls remain carbon. Oxide communicates selection through edges. */
button, .quiet-cta, .mp-outline {
  background: var(--mp-well);
  color: var(--mp-ink);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: none;
  transition: background-color 120ms, border-color 120ms;
}
button:hover, .mp-outline:hover { border-color: var(--mp-ink); }
button[aria-pressed="true"], .mp-mode.active,
.mp-segment button.is-on, .mp-inspector-tabs button.active,
.mp-scope-pills label:has(input:checked) {
  color: var(--mp-ink);
  background: var(--mp-well);
  border-color: var(--mp-accent);
  box-shadow: none;
}
.hero-cta, .mp-hero .hero-cta, .nav nav .nav-cta,
.mp-export, .mp-start button, .mp-primary {
  background: var(--mp-accent);
  color: var(--mp-well);
  border: 1px solid var(--mp-accent);
  border-radius: var(--mp-radius);
  box-shadow: none;
  font: 700 1.1875rem/1.25 var(--mp-font-body);
  min-block-size: 44px;
  transform: none;
}
.hero-cta:hover, .mp-hero .hero-cta:hover, .nav nav .nav-cta:hover,
.mp-export:hover, .mp-start button:hover, .mp-primary:hover {
  background: var(--mp-accent);
  color: var(--mp-well);
  border-color: var(--mp-ink);
  box-shadow: none;
  transform: none;
}
:focus-visible {
  outline: 2px solid var(--mp-ink);
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--mp-accent); }
.mp-auto, .mp-synced, .mp-checkline { color: var(--mp-success); }
.status-dot, .mp-synced > span { background: var(--mp-success); }

/* Measurement and ledger type, including inputmode-based legacy calculator inputs. */
input, select, textarea {
  font-family: var(--mp-font-mono);
  font-variant-numeric: lining-nums tabular-nums;
}
input:not([type]), input[type="number"], input[inputmode="decimal"],
input[inputmode="numeric"], .mp-unit, .unit,
.hero-kicker, .section-index, .tool-number, .tool-type, .mp-smallcap,
.dimension-strip, .mp-units, .mp-mode-index, .mp-coordinate-chip,
.mp-bottom-stats, .mp-amount-line strong, .mp-detail-rows strong,
.mp-result-hero > strong, .mp-result-bignum strong,
.mp-space-row small, .mp-scope-rollup strong, .mp-formula,
.big-result, .cost-total, .workspace-answer strong, .material-breakdown td {
  font-family: var(--mp-font-mono);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea, .mp-field input, .mp-field select {
  background: var(--mp-well);
  color: var(--mp-ink);
  border: 1px solid var(--mp-input-border);
  border-radius: var(--mp-radius-sm);
  box-shadow: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--mp-ink); }

/* Reuse existing unit spans without changing unit text or input event handlers. */
.mp-field:has(> input[type="number"]), .calc-field:has(> input) { position: relative; }
.mp-field:has(> input[type="number"]) > span > small,
.calc-field:has(> input) > .unit {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-end: 12px;
  font: 400 0.75rem/1 var(--mp-font-mono);
  color: var(--mp-muted);
  pointer-events: none;
}
.mp-field:has(> span > small) > input[type="number"],
.calc-field:has(> .unit) > input { padding-inline-end: 2.75rem; }

.mp-result-hero > strong, .mp-result-bignum strong, .mp-amount-line strong,
.mp-scope-rollup strong, .mp-detail-rows strong { font-weight: 600; }

/* Opt-in wrapper for older fields whose units are currently plain label text. */
.mp-input-well { display: block; position: relative; }
.mp-input-well > input { inline-size: 100%; padding-inline-end: 5rem; }
.mp-input-well > .mp-unit {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--mp-muted);
  pointer-events: none;
}

/* A ruled takeoff sheet. Leaders are decoration, never generated prices or copy. */
.results, .mp-results { background: var(--mp-well); }
.mp-result-hero, .workspace-answer {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-border);
  border-block-start: 3px solid var(--mp-accent);
  border-radius: var(--mp-radius-sm);
  box-shadow: none;
}
.mp-result-hero > strong, .workspace-answer strong { color: var(--mp-ink); }
.mp-result-sub, .workspace-answer span, .workspace-answer p,
.workspace-answer small { color: var(--mp-muted); border-color: var(--mp-border); }
.mp-amount-line, .mp-ledger-row { display: flex; gap: 10px; color: var(--mp-muted); }
.mp-amount-line > span:first-child, .mp-ledger-row > :first-child {
  display: flex; align-items: baseline; gap: 8px; flex: 1; min-inline-size: 0;
}
.mp-amount-line > span:first-child::after, .mp-ledger-row > :first-child::after {
  content: ""; flex: 1; border-block-end: 1px dotted var(--mp-border);
}
.mp-amount-line > strong, .mp-ledger-row > :last-child {
  color: var(--mp-ink); text-align: end; flex: none;
}
.mp-space-row, .mp-scope-rollup > div, th, td { border-color: var(--mp-border); }

/* Drafting grid: CSS frame + existing SVG; opaque WebGL needs renderer styling. */
.mp-drafting-grid, .mp-viewport {
  background-color: var(--mp-paper);
  background-image:
    linear-gradient(to right, var(--mp-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mp-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mp-2d > rect:first-of-type { fill: var(--mp-paper); }
.mp-2d #mp-plan-grid path { stroke: var(--mp-grid); }
.mp-2d > g[filter] { filter: none; }
.mp-2d text { font-family: var(--mp-font-mono); fill: var(--mp-ink); }

@media (prefers-reduced-motion: reduce) {
  button, a, input, select, textarea { transition: none; }
}
@media print {
  .mp-results, .results, .mp-print-sheet { background: var(--mp-paper); color: var(--mp-ink); }
}

.mp-viewport-noise{background:none}
.mp-bottom-stats small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;min-height:2.8em}
.mp-field:has(>span>small) input[type=number],.calc-field:has(>.unit) input{appearance:textfield}
.mp-field:has(>span>small) input::-webkit-inner-spin-button,.calc-field:has(>.unit) input::-webkit-inner-spin-button{appearance:none;margin:0}
.mp-hero h1 em{color:var(--mp-accent)}
.mp-input-well input,.mp-field input,.mp-field select{font-family:var(--mp-font-mono);font-variant-numeric:tabular-nums}
.mp-coordinate-chip,.mp-viewport-pill,.mp-toast{background:var(--mp-well);color:var(--mp-ink);border:1px solid var(--mp-border)}
.mp-coordinate-chip{font-size:10px}.mp-scope-pills label:has(input:checked){border-color:var(--mp-accent)}
.mp-field input[type=checkbox],.mp-field input[type=radio]{background:initial;accent-color:var(--mp-accent)}

/* Override presentation-only inline preset styles without touching calculator scripts. */
.preset-strip button{border-radius:var(--mp-radius-sm)!important;background:var(--mp-well)!important;border:1px solid var(--mp-border)!important;color:var(--mp-ink)}