/* Layout: app shell — top bar, step tabs, one working panel at a time; two columns on wide screens */
:root {
  --bg: #f2f4ee; --surface: #ffffff; --sunk: #e8ece3; --ink: #18261d; --muted: #5a6a5f; --line: #d5ddd2;
  --accent: #2c6a43; --accent-2: #e2a530; --accent-ink: #ffffff; --ok: #2b7a4b; --warn: #a8571b; --bad: #b3261e;
  --ok-bg: #e3f1e7; --warn-bg: #fbeedd; --bad-bg: #f8e1df;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 10px; --shadow: 0 1px 2px rgba(20, 40, 25, .06), 0 4px 18px rgba(20, 40, 25, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1511; --surface: #16201a; --sunk: #1d2a22; --ink: #e4ebe5; --muted: #98a99e; --line: #2a392f;
    --accent: #69bd87; --accent-2: #f0bc52; --accent-ink: #0b1a10; --ok: #6cc28c; --warn: #f0a35e; --bad: #f28b82;
    --ok-bg: #18301f; --warn-bg: #33240f; --bad-bg: #3a1a18; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1511; --surface: #16201a; --sunk: #1d2a22; --ink: #e4ebe5; --muted: #98a99e; --line: #2a392f;
  --accent: #69bd87; --accent-2: #f0bc52; --accent-ink: #0b1a10; --ok: #6cc28c; --warn: #f0a35e; --bad: #f28b82;
  --ok-bg: #18301f; --warn-bg: #33240f; --bad-bg: #3a1a18; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.08rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); }
img, canvas { max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1320px; margin: 0 auto; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg { flex: none; }
.brand b { font-family: var(--display); font-size: 1.12rem; letter-spacing: -0.01em; }
.brand span { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.1; }
.proj { display: flex; gap: 8px; align-items: center; min-width: 0; }
.proj select { max-width: 220px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 1320px; margin: 0 auto; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; border: 0; background: none; color: var(--muted); font: 600 0.88rem var(--body); padding: 10px 12px 11px; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.tab .n { font-size: 0.7rem; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sunk); color: var(--muted); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab[aria-selected="true"] .n { background: var(--accent); color: var(--accent-ink); }

main { max-width: 1320px; margin: 0 auto; padding-block: 22px 60px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.view { display: grid; gap: 18px; }
.view-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.view-head p { max-width: 62ch; color: var(--muted); margin-top: 4px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0; }
.panel.tight { padding: 12px; }
.cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .cols { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); align-items: start; } .cols.even { grid-template-columns: 1fr 1fr; } }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid-form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- form controls ---------- */
label.f { display: grid; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--muted); min-width: 0; }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=search], input[type=password], select, textarea {
  font: 500 0.95rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.check { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 650 0.9rem var(--body); border-radius: 8px; padding: 9px 14px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 6px 10px; font-size: 0.82rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.seg { display: inline-flex; background: var(--sunk); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 650 0.84rem var(--body); padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- chips, badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 0.86rem; background: var(--sunk); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note b { font-weight: 700; }

/* ---------- canvases ---------- */
.stage { position: relative; border-radius: var(--r); overflow: hidden; background: #111; line-height: 0; touch-action: none; user-select: none; }
.stage canvas { width: 100%; height: auto; display: block; }
.stage.drawing { cursor: crosshair; outline: 3px solid #ff6b3d; }
.ba { position: relative; border-radius: var(--r); overflow: hidden; background: #111; line-height: 0; user-select: none; touch-action: pan-y; }
.ba canvas { width: 100%; height: auto; display: block; }
.ba .after { position: absolute; inset: 0; }
.ba .after canvas { width: 100%; height: 100%; }
.ba .handle { position: absolute; top: 0; bottom: 0; width: 0; border-left: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.ba .knob { position: absolute; top: 50%; left: -21px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); color: #1c2b21; font: 700 14px var(--body); line-height: 1; }
.ba .tag { position: absolute; top: 12px; font: 700 0.72rem var(--body); letter-spacing: .08em; text-transform: uppercase; background: rgba(10,20,14,.72); color: #fff; padding: 4px 9px; border-radius: 6px; line-height: 1.3; }
.ba .tag.l { left: 12px; } .ba .tag.r { right: 12px; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.side { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.side figure { margin: 0; display: grid; gap: 6px; }
.side figcaption { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.side canvas { width: 100%; border-radius: 8px; }
@media (max-width: 640px) { .side { grid-template-columns: 1fr; } }

/* photo strip */
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.thumb { flex: none; width: 120px; border: 2px solid transparent; border-radius: 9px; padding: 0; background: var(--sunk); cursor: pointer; overflow: hidden; text-align: left; color: var(--ink); font: inherit; }
.thumb img { display: block; width: 100%; height: 76px; object-fit: cover; }
.thumb span { display: block; font-size: 0.74rem; font-weight: 650; padding: 4px 7px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb[aria-pressed="true"] { border-color: var(--accent); }
.thumb.add { display: grid; place-items: center; height: 104px; border: 2px dashed var(--line); background: transparent; color: var(--muted); font-weight: 650; font-size: 0.8rem; text-align: center; padding: 6px; }

/* bed cards */
.bed { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: grid; gap: 10px; background: var(--surface); }
.bed[aria-current="true"] { border-color: var(--accent-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 35%, transparent); }
.bed-head { display: flex; gap: 8px; align-items: center; }
.bed-head input { font-weight: 700; }
.bed-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; border: 1px solid rgba(0,0,0,.15); }

/* style chooser */
.styles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.style-card { appearance: none; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 10px 12px; cursor: pointer; color: var(--ink); font: inherit; display: grid; gap: 3px; }
.style-card b { font-family: var(--display); font-size: 0.98rem; }
.style-card small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.style-card[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.options { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { appearance: none; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.opt canvas { display: block; width: 100%; height: auto; }
.opt div { padding: 7px 9px; display: flex; justify-content: space-between; gap: 6px; font-size: 0.8rem; font-weight: 650; flex-wrap: wrap; }
.opt[aria-pressed="true"] { border-color: var(--accent); }
@media (max-width: 520px) { .options { grid-template-columns: 1fr 1fr 1fr; } .opt div { font-size: 0.7rem; } }

/* plant rows in design */
.plantrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.plantrow:first-of-type { border-top: 0; }
.plantrow select { font-size: 0.86rem; padding: 6px 8px; }
.plantrow .meta { font-size: 0.76rem; color: var(--muted); }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.r, th.r { text-align: right; }
tfoot td { font-weight: 750; border-bottom: 0; }
td input[type=number] { width: 76px; padding: 5px 7px; }
.prod { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.prod .pic { width: 40px; height: 40px; border-radius: 8px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--sunk); }
.prod .pic img { width: 100%; height: 100%; object-fit: cover; }

/* big figures */
.figs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fig { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface); display: grid; gap: 2px; }
.fig .v { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fig .k { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.fig.hl { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* budget meter */
.meter { height: 10px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.meter.over i { background: var(--bad); }

/* library */
.lib { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pcard { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.pcard canvas { width: 100%; height: 120px; display: block; background: linear-gradient(var(--sunk), color-mix(in srgb, var(--sunk) 60%, #8a6a45)); }
.pcard .body { padding: 12px; display: grid; gap: 8px; align-content: start; }
.pcard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 0.8rem; }
.pcard dt { color: var(--muted); font-weight: 600; }
.pcard dd { margin: 0; }
.pcard i { color: var(--muted); font-size: 0.85rem; }

/* value chart */
.vchart svg { width: 100%; height: auto; display: block; }
.scen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.scen .fig .v { font-size: 1.4rem; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: 0.9rem; z-index: 50; max-width: calc(100% - 32px); box-shadow: var(--shadow); }

/* analysis */
.analysis ul { margin: 4px 0 0; padding-left: 18px; }
.analysis li { margin: 2px 0; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } * { transition: none !important; } }

/* projects dashboard */
.projects { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pj { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; display: grid; }
.pj .ph { aspect-ratio: 3 / 2; background: var(--sunk); max-width: 100%; }
.pj .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj .b { padding: 12px; display: grid; gap: 6px; }
.pj[aria-current="true"] { border-color: var(--accent); }

footer.site { max-width: 1320px; margin: 0 auto; padding-block: 0 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); color: var(--muted); font-size: 0.78rem; }
.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none; } h2 { font-size: 1.3rem; } .panel { padding: 14px; } }
@media (max-width: 640px) {
  .styles { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .styles::-webkit-scrollbar { display: none; }
  .style-card { flex: none; width: 170px; }
  .topbar-inner { padding-block: 8px; }
  .brand span { display: none; }
}