/* Enhaus tools. Tokens lifted verbatim from enhaus-site/app/globals.css so this reads as the
   same company. If the main site's palette moves, move these with it. */

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --bg: #f7f4ee;
  --fg: #0e0e0f;
  --muted: #5c5c5c;
  --accent: #7a6c4a;
  --line: #e2ddd3;
  --panel: #fffdf9;
  --good: #2f6b4f;
  --warn: #8a5a20;
}

:root[data-theme='dark'] {
  --bg: #0a0a0b;
  --fg: #ededed;
  --muted: #8a8a8a;
  --accent: #d4cbb8;
  --line: #1e1e21;
  --panel: #101012;
  --good: #7fc0a0;
  --warn: #d8b070;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a0a0b;
    --fg: #ededed;
    --muted: #8a8a8a;
    --accent: #d4cbb8;
    --line: #1e1e21;
    --panel: #101012;
    --good: #7fc0a0;
    --warn: #d8b070;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'ss02', 'cv01';
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; }

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  z-index: 50;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-decoration: none;
  font-weight: 600;
}
.wordmark .dim { color: var(--muted); }

.topbar .spacer { flex: 1; }

.ghost {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ghost:hover { color: var(--fg); border-color: var(--accent); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px 96px; }

.hero { padding: 56px 0 36px; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.hero p { color: var(--muted); max-width: 62ch; margin: 0; font-size: 16px; }

/* ---------- layout ---------- */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 52px;
  align-items: start;
  padding-top: 40px;
}
@media (max-width: 1020px) {
  .columns { grid-template-columns: 1fr; gap: 32px; }
}

/* The results column is far taller than any viewport, so making the whole column sticky pins it
   and puts its lower cards permanently out of reach. Stick only the headline card instead: the
   rate follows you down the column while everything below it stays scrollable. */
@media (min-width: 1021px) {
  .results > .card:first-child {
    position: sticky;
    top: 84px;
    z-index: 10;
    /* Cards below scroll underneath this one and share its background, so without a shadow the
       two read as a single confusing surface. */
    box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.5);
  }
}

/* On a narrow screen the results sit below a very long input column, so a number that updates
   live is a number nobody can see. This pins the headline to the bottom of the viewport, which is
   the only way the live total means anything on a phone. */
.livebar { display: none; }
@media (max-width: 1020px) {
  .livebar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
  }
  body { padding-bottom: 76px; }
}
.livebar .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.livebar .v { font-family: var(--font-mono); font-size: 21px; color: var(--accent); margin-left: auto; }
.livebar .sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ---------- input sections ---------- */

.section { border-top: 1px solid var(--line); padding: 30px 0; }
.section:first-child { border-top: none; padding-top: 0; }

.section > h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  font-weight: 600;
}
.section > .note { color: var(--muted); font-size: 13px; margin: 0 0 22px; max-width: 60ch; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grid.one { grid-template-columns: 1fr; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 500; }
.field .hint { font-size: 12px; color: var(--muted); line-height: 1.4; }

.control { position: relative; display: flex; align-items: center; }
.control .prefix, .control .suffix {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.control .prefix { left: 12px; }
.control .suffix { right: 12px; }

input[type='number'], input[type='text'], select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}
.control.has-prefix input { padding-left: 26px; }
.control.has-suffix input { padding-right: 34px; }

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type='number'] { -moz-appearance: textfield; }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  font-family: var(--font-sans);
}

/* switches */
.switch { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 3px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  flex: none;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid transparent;
  position: relative;
  transition: background 140ms ease;
  margin-top: 1px;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform 140ms ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.switch .label { font-size: 13px; }
.switch .label small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }

/* slider */
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.slider-head .value { font-family: var(--font-mono); font-size: 18px; color: var(--accent); }
input[type='range'] {
  width: 100%;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  margin: 12px 0 4px;
}
input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); cursor: grab;
}
.scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}

/* running day tally */
.tally {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  background: var(--panel);
}
.tally div {
  flex: 1 1 0;
  min-width: 108px;
  padding: 13px 15px;
  border-right: 1px solid var(--line);
}
.tally div:last-child { border-right: none; }
.tally .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px;
}
.tally .v { font-family: var(--font-mono); font-size: 19px; }
.tally .v.hi { color: var(--accent); }

/* expense rows */
.rows { display: flex; flex-direction: column; gap: 9px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 148px 34px; gap: 9px; align-items: center; }
.row .kill {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  height: 38px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.row .kill:hover { color: var(--fg); border-color: var(--accent); }
.row-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.add {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
.add:hover { color: var(--accent); border-color: var(--accent); }
.row-total { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-left: auto; }
.row-total b { color: var(--fg); font-weight: 500; }

.callout {
  border-left: 2px solid var(--accent);
  padding: 3px 0 3px 14px;
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 64ch;
}

details.holidays { margin-top: 16px; }
details.holidays summary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted); cursor: pointer; text-transform: uppercase;
}
details.holidays summary:hover { color: var(--accent); }
.holiday-list {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 5px 20px;
}
.holiday-list li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line);
}
.holiday-list .d { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
.holiday-list .shifted { color: var(--warn); }

/* ---------- results ---------- */

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 26px;
  margin-bottom: 18px;
}
.card > h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px; font-weight: 600;
}

.headline { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.headline .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.headline .v {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 2px;
  color: var(--accent);
}
.headline .sub { font-size: 13px; color: var(--muted); }

.rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 22px; border-radius: 10px; overflow: hidden; }
.rates div { background: var(--panel); padding: 15px 10px; text-align: center; }
.rates .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.rates .v { font-family: var(--font-mono); font-size: 17px; }

/* the gap */
.gap-bars { display: flex; flex-direction: column; gap: 14px; }
.gap-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gap-row .name { font-size: 13px; }
.gap-row .name small { display: block; color: var(--muted); font-size: 11.5px; }
.gap-row .amt { font-family: var(--font-mono); font-size: 16px; }
.gap-row .bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
/* display:block matters: this is a span inside a block parent, so without it the box stays
   inline and silently ignores both width and height. */
.gap-row .fill { display: block; height: 100%; border-radius: 4px; transition: width 220ms ease; }
.gap-row.naive .fill { background: var(--muted); }
.gap-row.real .fill { background: var(--accent); }
.gap-verdict {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55;
}
.gap-verdict b { color: var(--accent); font-family: var(--font-mono); }

/* waterfall */
.flow { display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 20px; }
.flow span { display: block; transition: width 220ms ease; }

.lines { display: flex; flex-direction: column; }
.line {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.line:last-child { border-bottom: none; }
.line .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.line .n { flex: 1; min-width: 0; }
.line .n small { display: block; color: var(--muted); font-size: 11.5px; }
.line .a { font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; }
.line .p { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); width: 44px; text-align: right; }
.line.total { border-top: 1px solid var(--fg); border-bottom: none; margin-top: 5px; padding-top: 11px; }
.line.total .n { font-weight: 600; }
.line.total .a { font-size: 16px; color: var(--good); }
.line.sub .n { padding-left: 19px; color: var(--muted); font-size: 12.5px; }

/* quarterly */
.quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.quarters div { background: var(--panel); padding: 13px 8px; text-align: center; }
.quarters .q { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--accent); }
.quarters .amt { font-family: var(--font-mono); font-size: 14px; margin: 5px 0 3px; }
.quarters .when { font-size: 10.5px; color: var(--muted); }

.setaside {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.setaside .big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--warn); }
.setaside .right { text-align: right; font-size: 12.5px; color: var(--muted); }
.setaside .right b { display: block; font-family: var(--font-mono); font-size: 15px; color: var(--fg); font-weight: 400; }

/* salary compare */
.verdict {
  text-align: center; padding: 20px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.verdict .line1 { font-size: 13px; color: var(--muted); }
.verdict .line2 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1.14; margin: 9px 0; letter-spacing: -0.02em;
}
.verdict .line2 b { color: var(--accent); font-weight: 400; }
.verdict .line3 { font-size: 12.5px; color: var(--muted); }

.footnote { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0; }
.footnote + .footnote { margin-top: 9px; }

.disclaimer {
  border-top: 1px solid var(--line);
  margin-top: 40px; padding-top: 26px;
  font-size: 12.5px; color: var(--muted); line-height: 1.65; max-width: 78ch;
}
.disclaimer strong { color: var(--fg); font-weight: 500; }

.sitefoot {
  border-top: 1px solid var(--line);
  padding: 26px 28px 44px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
  display: flex; gap: 18px; flex-wrap: wrap; max-width: 1280px; margin: 40px auto 0;
}

/* ---------- tool index ---------- */

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; padding-top: 44px; }
.tool {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 26px; text-decoration: none; display: block;
  transition: border-color 140ms ease, transform 140ms ease;
}
.tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.tool p { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.tool .go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
.tool.soon { opacity: 0.5; pointer-events: none; }

/* ---------- small utilities ----------
   These exist so no page needs a style attribute, which lets the CSP drop unsafe-inline. */
.stack-tight { gap: 10px; }
.mb-lg { margin-bottom: 22px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 20px; }
.mt-xl { margin-top: 26px; }
.empty-bar { width: 0; }
.rule-strong { border-bottom: 1px solid var(--fg); }
.note-shift { border-bottom: none; }
.note-shift .d { font-size: 11px; }

/* Tone classes, so colour can be data-driven without a style attribute. */
.tone-muted  { background: var(--muted); }
.tone-warn   { background: var(--warn); }
.tone-accent { background: var(--accent); }
.tone-good   { background: var(--good); }