/* Summit Pines Pricing Tool */

:root {
  color-scheme: light dark;

  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --border: #e0ddd6;
  --border-strong: #c9c5bb;
  --text: #1d2321;
  --text-2: #5d6763;
  --text-3: #8a938e;

  --accent: #1f5d4c;
  --accent-soft: #e6efeb;
  --accent-text: #164034;
  --accent-on: #ffffff;

  --warn: #8a5a12;
  --warn-soft: #fbf1de;
  --danger: #9c2f24;
  --danger-soft: #fbe9e6;
  --ok: #2c6a45;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(20, 26, 24, 0.06), 0 4px 12px rgba(20, 26, 24, 0.04);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Price composition bar. Five hues that stay apart in both themes. */
  --seg-cogs: #1f5d4c;
  --seg-adders: #4d8c6f;
  --seg-freight: #7fa9a0;
  --seg-tariffs: #b4835a;
  --seg-margin: #c9c5bb;
}

/* Dark tokens apply in two situations: the viewer's system is dark and they
   have not forced light, or they have explicitly chosen dark. Both selectors
   carry the same token list so neither state can fall through to light values
   on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141917;
    --surface: #1b211f;
    --surface-2: #202725;
    --border: #2e3633;
    --border-strong: #414b47;
    --text: #e8eae8;
    --text-2: #a3ada9;
    --text-3: #77827d;

    --accent: #5fbb9c;
    --accent-soft: #1d2f29;
    --accent-text: #8fd4ba;
    --accent-on: #10201b;

    --warn: #d9ab63;
    --warn-soft: #2d2618;
    --danger: #e08a7e;
    --danger-soft: #2e1c19;
    --ok: #6cc294;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);

    --seg-cogs: #4fae8f;
    --seg-adders: #6cc39f;
    --seg-freight: #86b6b0;
    --seg-tariffs: #c99a6e;
    --seg-margin: #4b5652;
  }
}

:root[data-theme="dark"] {
    --bg: #141917;
    --surface: #1b211f;
    --surface-2: #202725;
    --border: #2e3633;
    --border-strong: #414b47;
    --text: #e8eae8;
    --text-2: #a3ada9;
    --text-3: #77827d;

    --accent: #5fbb9c;
    --accent-soft: #1d2f29;
    --accent-text: #8fd4ba;
    --accent-on: #10201b;

    --warn: #d9ab63;
    --warn-soft: #2d2618;
    --danger: #e08a7e;
    --danger-soft: #2e1c19;
    --ok: #6cc294;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);

    --seg-cogs: #4fae8f;
    --seg-adders: #6cc39f;
    --seg-freight: #86b6b0;
    --seg-tariffs: #c99a6e;
    --seg-margin: #4b5652;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
p { margin: 0 0 12px; color: var(--text-2); }
a { color: var(--accent); }

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

.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 0 8px; }
.brand .mark { display: flex; align-items: center; gap: 9px; }
.brand svg { flex: none; }
.brand .name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.brand .sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 12px 8px 5px; }
.nav a {
  display: block; padding: 7px 8px; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-size: 13px;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 550; }

.source-chip {
  margin-top: auto; padding: 9px 10px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-2); line-height: 1.4;
}
.source-chip strong { color: var(--text); display: block; font-size: 12px; }
.source-chip.dirty { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

.main { min-width: 0; padding: 22px 26px 60px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.page-head .lede { color: var(--text-2); margin: 4px 0 18px; max-width: 68ch; }

/* ----------------------------------------------------------------- cards  */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.grid-2 { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
/* On a phone the nav becomes a wrapping row of chips rather than a column
   that fills the first screen before any content appears. */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; padding: 12px; gap: 10px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 5px; }
  .nav-group { display: none; }
  .nav a { padding: 5px 10px; border: 1px solid var(--border); }
  .source-chip { margin-top: 0; }
  .main { padding: 16px; }
  .price-hero { gap: 16px; }
  .price-hero .big { font-size: 28px; }
}

/* --------------------------------------------------------------- controls */

label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }

input, select, textarea, button {
  font: inherit; color: inherit;
}
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 7px 9px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

.btn {
  padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 13px; white-space: nowrap;
}
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 550; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: var(--border-strong); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input[type="text"], .toolbar select { width: auto; min-width: 150px; }

/* ---------------------------------------------------------------- tables  */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3); padding: 9px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2);
  position: sticky; top: 0; z-index: 1;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono, th.mono { font-family: var(--mono); font-size: 12px; }
td input, td select { padding: 4px 6px; font-size: 13px; min-width: 70px; }
td input[type="number"] { text-align: right; }

.empty { padding: 28px 16px; text-align: center; color: var(--text-3); }

/* ------------------------------------------------------------- breakdown  */

.price-hero { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; }
.price-hero .big { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.price-hero .stat { min-width: 96px; }
.price-hero .stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.price-hero .stat .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }

.breakdown td:first-child { width: 55%; }
.breakdown tr.group td {
  background: var(--surface-2); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3); font-weight: 600; padding: 7px 12px;
}
.breakdown tr.subtotal td { font-weight: 600; }
.breakdown tr.total td { font-weight: 650; border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.breakdown tr.emphasis td { color: var(--accent-text); }
.breakdown .detail { color: var(--text-3); font-size: 12px; }
.breakdown tr.muted td { color: var(--text-3); }
.breakdown .indent { padding-left: 26px; }

.bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; display: flex; margin-top: 12px; }
.bar span { display: block; height: 100%; }
.bar-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.bar-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ---------------------------------------------------------------- notices */

.notice { padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; margin-bottom: 12px; }
.notice.info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.notice.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.tag {
  display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px;
  border: 1px solid var(--border-strong); color: var(--text-2); background: var(--surface-2);
  white-space: nowrap;
}
.tag.ok { color: var(--ok); border-color: var(--ok); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.danger { color: var(--danger); border-color: var(--danger); }
.tag.accent { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }

.opt-group { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.opt-group:first-child { border-top: 0; padding-top: 0; }
.opt-group h3 { margin-bottom: 6px; }
.opt {
  display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; cursor: pointer;
}
.opt input { margin-top: 2px; flex: none; }
.opt .label { flex: 1; }
.opt .label .n { display: block; }
.opt .label .d { display: block; font-size: 12px; color: var(--text-3); }
.opt .amt { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12px; white-space: nowrap; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.footnote { font-size: 12px; color: var(--text-3); margin-top: 10px; }

/* Sign-in sits alone on the page, so it gets a narrow measure and some air
   rather than the full-width grid the working screens use. */
.signin-wrap { max-width: 420px; margin: 6vh auto 0; }