:root{
  color-scheme:dark;

  --pine:#1F3D2B;
  --pine-deep:#0F2116;
  --pine-2:#17301F;
  --pine-3:#1E3D28;

  --bone:#F7F3EA;
  --bone-dim:#DCD8CB;
  --sage:#AEC2AB;
  --sage-dim:#8CA189;

  --ochre:#D89A3C;
  --ochre-dk:#A96F1C;
  --cedar:#B0764F;
  --red:#D06A55;
  --mint:#9FD3A8;

  --line:rgba(247,243,234,.13);
  --line-2:rgba(247,243,234,.22);
  --glass:rgba(23,48,31,.66);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:8px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--pine-deep);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}

/* forest backdrop — same photograph as the marketing site, heavily shaded */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url("/ponderosa.jpg") center 30%/cover no-repeat;
  opacity:.40;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(75% 55% at 18% 28%, rgba(6,16,12,.50) 0%, rgba(6,16,12,.22) 62%, rgba(6,16,12,.08) 100%),
    linear-gradient(180deg, rgba(9,20,14,.86) 0%, rgba(9,20,14,.91) 45%, rgba(9,20,14,.95) 100%);
}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.15}
a{color:inherit}
img,svg{max-width:100%;display:block}
button{font:inherit}
::selection{background:var(--ochre);color:#1B1206}

/* ── login ─────────────────────────────────────────────── */
.login-wrap{min-height:100svh;display:grid;place-items:center;padding:24px}
.login-card{
  width:min(410px,100%);
  background:rgba(19,40,27,.74);
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:34px;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.login-card .mark{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.login-card .mark svg{width:42px;height:42px;flex:none}
.login-card .mark b{font-family:var(--serif);font-size:1.42rem;display:block;color:var(--bone)}
.login-card .mark span{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--sage-dim)}
.login-card h1{font-size:1.7rem;margin-bottom:6px;color:var(--bone)}
.login-card p.sub{margin:0 0 24px;color:var(--sage);font-size:.92rem;line-height:1.5}
.login-card .fine{margin-top:22px;font-size:.76rem;color:var(--sage-dim);text-align:center}

/* ── shell ─────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:30;color:var(--bone);
  background:linear-gradient(180deg,rgba(39,73,47,.97),rgba(23,48,31,.97));
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.top .row{width:min(1180px,94vw);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:17px 0}
.brand{display:flex;align-items:center;gap:13px;color:var(--bone);text-decoration:none}
.brand svg{width:42px;height:42px;flex:none}
.brand b{font-family:var(--serif);font-size:1.42rem;display:block;letter-spacing:.01em}
.brand span{display:block;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sage-dim);margin-top:1px}
.top .who{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--sage)}
.top .who button{background:rgba(247,243,234,.04);border:1px solid var(--line-2);
  color:var(--bone);border-radius:var(--radius);padding:6px 12px;cursor:pointer}
.top .who button:hover{background:rgba(247,243,234,.12)}

@media(max-width:560px){
  .top .row{padding:13px 0}
  .brand{gap:10px}
  .brand svg{width:34px;height:34px}
  .brand b{font-size:1.18rem}
  .brand span{display:none}
  nav.tabs{top:61px}
}

nav.tabs{
  position:sticky;top:77px;z-index:20;
  background:rgba(12,26,18,.84);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
nav.tabs .row{width:min(1180px,94vw);margin-inline:auto;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none}
nav.tabs .row::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 14px;font-size:.86rem;font-weight:600;color:var(--sage);cursor:pointer;
  white-space:nowrap}
nav.tabs button:hover{color:var(--bone)}
nav.tabs button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--ochre)}

main{width:min(1180px,94vw);margin-inline:auto;padding:30px 0 90px}
.panel{display:none}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panel.active{animation:none}}

/* ── headings ──────────────────────────────────────────── */
.sec-head{max-width:66ch;margin-bottom:24px}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ochre);margin:0 0 6px}
.sec-head h1{font-size:clamp(2rem,4vw,3rem);color:var(--bone)}
.sec-head p{margin:9px 0 0;color:var(--sage);font-size:.96rem;line-height:1.55}

/* ── cards & form ──────────────────────────────────────── */
.card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  margin-bottom:18px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.card > h2{font-size:1.14rem;margin-bottom:2px;color:var(--bone)}
.card > p.hint{margin:3px 0 16px;color:var(--sage);font-size:.82rem}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field:last-child{margin-bottom:0}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage)}
.field .help{font-size:.76rem;color:var(--sage-dim);line-height:1.45}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field input[type=password],.field input[type=search],.field input[type=number],
.field select,.field textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:rgba(8,19,13,.72);color:var(--bone);
  font:inherit;font-size:.95rem;
}
.field input::placeholder,.field textarea::placeholder{color:var(--sage-dim)}
.field textarea{resize:vertical;min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--ochre);outline-offset:1px;border-color:var(--ochre)}
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px #0b1c12 inset;
  caret-color:var(--bone);
}
.field input:disabled{opacity:.55;cursor:not-allowed}
.field .money{position:relative}
.field .money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--sage);font-size:.9rem;pointer-events:none}
.field .money input{padding-left:26px}

.switch{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-top:1px solid var(--line)}
.switch:first-of-type{border-top:0}
.switch input{width:18px;height:18px;margin-top:2px;accent-color:var(--ochre);flex:none}
.switch .txt b{display:block;font-size:.92rem;font-weight:600;color:var(--bone)}
.switch .txt span{display:block;font-size:.78rem;color:var(--sage);line-height:1.45;margin-top:1px}

/* ── actions ───────────────────────────────────────────── */
.actions{
  position:sticky;bottom:0;z-index:10;display:flex;align-items:center;
  justify-content:flex-end;gap:12px;padding:14px 0;
  background:linear-gradient(180deg,rgba(15,33,22,0),rgba(15,33,22,.96) 45%);
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius);padding:10px 18px;font-weight:700;font-size:.9rem;
  cursor:pointer;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--ochre);color:#1B1206;box-shadow:0 2px 0 var(--ochre-dk)}
.btn-primary:hover{background:#E6A94A}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ochre-dk)}
.btn-primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:rgba(247,243,234,.03);color:var(--bone);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(247,243,234,.10)}
.btn-danger{background:transparent;color:#E9A392;border-color:rgba(208,106,85,.45)}
.btn-danger:hover{background:rgba(208,106,85,.12)}

.dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--ochre);
  display:none;margin-right:auto;box-shadow:0 0 8px rgba(216,154,60,.7)}
.dirty .dirty-dot{display:block}

/* ── dashboard ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px;margin-bottom:18px}
@media(max-width:460px){.stats{grid-template-columns:1fr}}
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(247,243,234,.07),rgba(247,243,234,.028));
  border:1px solid var(--line);border-radius:12px;padding:17px 18px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--ochre),var(--cedar))}
.stat .eyebrow{font-size:.64rem;letter-spacing:.12em;white-space:nowrap}
.stat b{display:block;font-family:var(--serif);font-size:1.85rem;line-height:1.08;
  letter-spacing:-.02em;color:var(--bone);margin:7px 0 3px;white-space:nowrap}
.stat .sub{font-size:.75rem;color:var(--sage);line-height:1.35}

.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:920px){.dash-cols{grid-template-columns:1fr}}

table.mini{width:100%;border-collapse:collapse;font-size:.92rem}
table.mini th{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;color:var(--sage-dim);font-weight:700;padding:0 0 8px}
table.mini td{padding:9px 0;border-top:1px solid var(--line);vertical-align:top;color:var(--bone)}
table.mini th.right,table.mini td.right{text-align:right}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:560px}

.card-tools{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:12px;margin-bottom:12px}
.card-tools .btn{padding:7px 13px;font-size:.82rem}
.export-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px}
.export-bar .btn{padding:7px 13px;font-size:.82rem}
.export-bar .muted{margin-right:2px}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--line-2);color:var(--sage)}
.pill.occupied,.pill.active{color:var(--mint);border-color:rgba(159,211,168,.35);
  background:rgba(159,211,168,.08)}
.pill.maintenance,.pill.hold{color:#E9A392;border-color:rgba(208,106,85,.32);
  background:rgba(208,106,85,.07)}
.pill.vacant,.pill.past{color:var(--sage-dim);background:rgba(247,243,234,.04)}

.linkish{background:none;border:0;padding:0;color:#E9C583;font:inherit;font-weight:600;
  cursor:pointer;text-align:left;text-decoration:underline;
  text-decoration-color:rgba(233,197,131,.35);text-underline-offset:3px}
.linkish:hover{text-decoration-color:var(--ochre)}

.ledger-head{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:16px;margin-bottom:16px}
.ledger-actions{display:flex;align-items:flex-end;gap:14px}
.ledger-actions .btn{padding:7px 13px;font-size:.82rem;margin-bottom:2px}
.ledger-sum{text-align:right}
.ledger-sum b{display:block;font-family:var(--serif);font-size:1.8rem;line-height:1.1;margin-top:2px}
.right{text-align:right}
.muted{color:var(--sage);font-size:.88rem;margin:0}

ul.feed{list-style:none;margin:0;padding:0}
ul.feed li{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-top:1px solid var(--line)}
ul.feed li:first-child{border-top:0}
.feed-main{min-width:0;flex:1;display:flex;flex-direction:column}
.feed-main b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--bone)}
.feed-main .muted{font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-amt{font-variant-numeric:tabular-nums;font-size:.92rem;font-weight:700;white-space:nowrap}
.feed-amt.in{color:var(--mint)}
.feed-amt.out{color:var(--sage)}

.bars{display:flex;align-items:flex-end;gap:clamp(10px,3vw,28px);
  min-height:176px;padding:8px 4px 0;position:relative}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bar-stack{display:flex;align-items:flex-end;justify-content:center;gap:4px;
  height:134px;width:100%}
.bar{display:block;width:16px;border-radius:3px 3px 0 0;min-height:3px}
.bar.billed{background:linear-gradient(180deg,#E6A94A,var(--ochre-dk))}
.bar.collected{background:linear-gradient(180deg,#A7D8AE,#5E9C6A)}
.bar-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-dim)}
.legend{position:absolute;top:4px;right:6px;display:flex;gap:16px}
.legend .key{font-size:.74rem;color:var(--sage);display:inline-flex;align-items:center;gap:6px}
.legend .key::before{content:"";width:9px;height:9px;border-radius:2px;display:inline-block}
.legend .key.billed::before{background:var(--ochre)}
.legend .key.collected::before{background:#8FBF8A}

.notice{background:rgba(216,154,60,.13);border:1px solid rgba(216,154,60,.4);
  color:#F1DCB4;border-radius:8px;padding:11px 14px;font-size:.86rem;margin-bottom:16px}

/* payments */
.link-out{margin-top:8px;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:6px;background:rgba(8,19,13,.72);font-size:.8rem;word-break:break-all}
.link-out a{color:#E9C583;text-decoration:none}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid var(--line)}
.pay-row:first-child{border-top:0}
.pay-main{flex:1;min-width:160px;display:flex;flex-direction:column}
.pay-main b{font-size:.92rem;color:var(--bone)}
.pay-main .muted{font-size:.76rem}
.pay-amt{font-variant-numeric:tabular-nums;font-weight:700;color:var(--bone)}
.pay-actions{display:flex;gap:8px;width:100%}
.pay-actions .btn{padding:7px 12px;font-size:.8rem}
@media(min-width:680px){.pay-actions{width:auto}}

.sim-amount{font-family:var(--serif);font-size:2.7rem;line-height:1.05;
  color:var(--bone);margin:10px 0 2px;letter-spacing:-.02em}
.paid-mark{display:flex;justify-content:center;margin-bottom:18px}

.placeholder{padding:56px 24px;text-align:center;color:var(--sage);
  border:1px dashed var(--line-2);border-radius:12px;background:rgba(247,243,234,.025)}
.placeholder b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--bone);margin-bottom:5px}
.placeholder code{background:rgba(247,243,234,.09);color:#E9C583}

/* ── misc ──────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:#22452F;color:var(--bone);padding:12px 18px;border-radius:9px;
  border:1px solid rgba(216,154,60,.45);
  font-size:.88rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#4A241C;border-color:rgba(208,106,85,.6)}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:rgba(247,243,234,.08);padding:1px 5px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
