*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#F6F5F1;color:#1E2622;font-family:'Jost',sans-serif;overflow-x:hidden}
.wrap{max-width:1360px;margin:0 auto;padding:0 48px}

nav{background:#F6F5F1;border-bottom:1px solid #D8D6CB;position:sticky;top:0;z-index:100}
.nav-inner{max-width:1360px;margin:0 auto;padding:0 48px;height:64px;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:32px;height:32px;background:#2F4739;border-radius:3px;display:flex;align-items:center;justify-content:center;color:white;font-size:13px;flex-shrink:0}
.logo-name{font-family:'Spectral',serif;font-size:19px;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:#6E7269;text-decoration:none;transition:color .3s}
.nav-links a:hover{color:#B0663C}
.nav-cta{padding:10px 22px;background:#2F4739;color:white;border:none;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;white-space:nowrap}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#2F4739}

/* HERO */
.hero{display:grid;grid-template-columns:45% 55%;min-height:90vh;max-height:860px}
.hero-img{position:relative;overflow:hidden;order:2}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;bottom:28px;left:28px;background:#F6F5F1;padding:14px 18px;border-radius:2px;box-shadow:0 10px 36px rgba(30,38,34,.22)}
.badge-num{font-family:'Spectral',serif;font-size:26px;font-weight:600;color:#2F4739}
.badge-txt{font-size:11px;color:#6E7269;margin-top:2px}
.hero-right{background:#EAE8E0;display:flex;flex-direction:column;justify-content:center;padding:56px 48px;order:1}
.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#B0663C;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:2px;background:#B0663C}
h1{font-family:'Spectral',serif;font-size:clamp(32px,4vw,52px);line-height:1.08;margin-bottom:16px;font-weight:400}
h1 em{font-style:italic;color:#2F4739}
.hdesc{font-size:15px;line-height:1.8;color:#6E7269;max-width:390px;margin-bottom:24px;font-weight:300}
.specs{display:flex;border:1.5px solid #D8D6CB;border-radius:2px;overflow:hidden;margin-bottom:24px;background:#F6F5F1}
.spec{flex:1;padding:12px 8px;text-align:center;border-right:1.5px solid #D8D6CB}
.spec:last-child{border-right:none}
.sv{font-family:'Spectral',serif;font-size:20px;font-weight:600}
.sl{font-size:10px;color:#6E7269;margin-top:2px}
.hbtns{display:flex;gap:10px;flex-wrap:wrap}
.btn-p{padding:13px 26px;background:#2F4739;color:white;border:none;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;transition:background .3s}
.btn-p:hover{background:#1E3226}
.btn-s{padding:13px 26px;background:transparent;color:#B0663C;border:2px solid #B0663C;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;transition:all .3s}
.btn-s:hover{background:#B0663C;color:white}

/* PLACEHOLDER NOTICE — delete this block and .phnote when real photos are in */
.phnote{background:#B0663C;color:#fff;text-align:center;font-size:12px;letter-spacing:1px;padding:9px 20px}

/* GALLERY */
.gallery{display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-rows:260px 260px;gap:3px}
.gc{overflow:hidden;position:relative;cursor:pointer}
.gc:last-child{grid-column:3;grid-row:1/span 2}
.gc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gc:hover img{transform:scale(1.04)}
.gc-lbl{position:absolute;bottom:10px;left:10px;background:#F6F5F1;padding:4px 12px;font-size:11px;font-weight:500;border-radius:1px}

/* DETAILS */
.details{padding:80px 0}
.details-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start}
.sec-lbl{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#B0663C;font-weight:500;margin-bottom:10px}
.sec-ttl{font-family:'Spectral',serif;font-size:38px;line-height:1.12;margin-bottom:14px;font-weight:400}
.sec-ttl em{font-style:italic}
.sec-body{font-size:15px;line-height:1.8;color:#6E7269;font-weight:300}
.sec-body p{margin-bottom:12px}
.amenlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.amen{display:flex;align-items:center;gap:8px;font-size:14px}
.amen::before{content:'';width:6px;height:6px;background:#B0663C;flex-shrink:0}
.info-card{background:#2F4739;color:#EAE8E0;padding:24px;border-radius:2px;margin-bottom:16px}
.ic-ttl{font-family:'Spectral',serif;font-size:20px;margin-bottom:14px;color:#fff}
.ic-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:8px 0;border-bottom:1px solid rgba(234,232,224,.18)}
.ic-row:last-child{border-bottom:none}
.ic-row span:last-child{font-weight:500;color:#fff;text-align:right}
.rules-card{background:#EAE8E0;border:1.5px solid #D8D6CB;padding:22px;border-radius:2px}
.rc-ttl{font-family:'Spectral',serif;font-size:19px;margin-bottom:12px}
.rc-list{list-style:none;font-size:13.5px;line-height:1.55;color:#4A5148}
.rc-list li{padding:6px 0 6px 18px;position:relative;border-bottom:1px solid #D8D6CB}
.rc-list li:last-child{border-bottom:none}
.rc-list li::before{content:'·';position:absolute;left:5px;color:#B0663C;font-weight:700;font-size:18px;line-height:1.1}

/* RATES */
.rates{background:#EAE8E0;padding:76px 0}
.rates-inner{display:grid;grid-template-columns:.9fr 1.2fr;gap:56px;align-items:start}
.rate-tbl{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;overflow:hidden}
.rt-row{display:grid;grid-template-columns:1.15fr .7fr 1fr;gap:10px;padding:16px 20px;border-bottom:1.5px solid #D8D6CB;align-items:center}
.rt-row:last-child{border-bottom:none}
.rt-row.head{background:#2F4739;color:#EAE8E0;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px}
.rt-row.active{background:#EAE8E0;box-shadow:inset 3px 0 0 #B0663C}
.rt-now{display:inline-block;margin-left:8px;background:#B0663C;color:#fff;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;padding:3px 7px;border-radius:2px;vertical-align:middle}
.rt-season{font-family:'Spectral',serif;font-size:17px;font-weight:600}
.rt-sub{font-size:11.5px;color:#6E7269;margin-top:2px}
.rt-rate{font-family:'Spectral',serif;font-size:22px;font-weight:600;color:#B0663C}
.rt-min{font-size:13px;color:#6E7269}
.rate-fine{margin-top:18px;font-size:13.5px;line-height:1.75;color:#6E7269;font-weight:300}
.rate-fine strong{color:#1E2622;font-weight:500}
.snowbird{margin-top:18px;background:#2F4739;color:#EAE8E0;padding:18px 20px;border-radius:2px}
.sb-ttl{font-family:'Spectral',serif;font-size:17px;color:#fff;margin-bottom:5px}
.sb-txt{font-size:13px;line-height:1.65;color:rgba(234,232,224,.8);font-weight:300}
.sb-rate{font-family:'Spectral',serif;font-size:30px;font-weight:600;color:#fff;line-height:1.1;margin:2px 0 7px}
.sb-rate small{font-size:14px;font-weight:400;color:rgba(234,232,224,.75);font-family:'Jost',sans-serif}
#snowbirdCall{margin-top:8px;color:#D9A87C}

/* SPECIALS */
.specials{background:#2F4739;color:#EAE8E0;padding:70px 0}
.specials .sec-lbl{color:#D9A87C}
.specials .sec-ttl{color:#fff}
.specials .sec-ttl em{color:#D9A87C}
.sp-intro{font-size:15px;color:rgba(234,232,224,.72);font-weight:300;max-width:580px;margin-top:4px;line-height:1.75}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:20px;margin-top:30px}
.spcard{background:#EAE8E0;color:#1E2622;border-radius:2px;padding:24px;border-left:4px solid #B0663C;display:flex;flex-direction:column}
.spcard.match{box-shadow:0 0 0 2px #D9A87C}
.sp-tag{align-self:flex-start;background:#B0663C;color:#fff;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;padding:5px 10px;border-radius:2px;margin-bottom:13px}
.sp-tag.info{background:#2F4739}
.sp-ttl{font-family:'Spectral',serif;font-size:21px;margin-bottom:9px;line-height:1.2}
.sp-blurb{font-size:14px;line-height:1.65;color:#6E7269;font-weight:300;margin-bottom:14px;flex:1}
.sp-meta{font-size:12px;color:#8A8F85;border-top:1px solid #D8D6CB;padding-top:11px;line-height:1.5}
.sp-match{display:block;margin-top:7px;color:#B0663C;font-weight:500}
.prow.disc span:last-child{color:#B0663C;font-weight:500}

/* AREA */
.area{padding:76px 0;background:#F6F5F1}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
.acard{background:#EAE8E0;border:1.5px solid #D8D6CB;padding:24px;border-radius:2px}
.ac-eyebrow{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#B0663C;font-weight:500;margin-bottom:8px}
.ac-ttl{font-family:'Spectral',serif;font-size:21px;margin-bottom:12px}
.ac-list{list-style:none;font-size:13.5px;line-height:1.6;color:#6E7269}
.ac-list li{padding:7px 0;border-bottom:1px solid #D8D6CB}
.ac-list li:last-child{border-bottom:none}
.ac-list b{color:#1E2622;font-weight:500;display:block;font-size:14px}

/* BOOKING */
.booking{background:#EAE8E0;padding:80px 0}
.booking-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
.rate-row{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.rate-big{font-family:'Spectral',serif;font-size:50px;font-weight:600;color:#2F4739}
.rate-u{font-size:14px;color:#6E7269}
.rate-note{font-size:13.5px;color:#6E7269;margin-top:8px;line-height:1.7}
.bk-img{border-radius:2px;overflow:hidden;margin-top:22px}
.bk-img img{width:100%;height:240px;object-fit:cover;display:block}

/* AVAILABILITY CALENDAR */
.cal{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;margin-top:24px;overflow:hidden}
.cal-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1.5px solid #D8D6CB;background:#2F4739}
.cal-nav{width:30px;height:30px;border:1px solid rgba(234,232,224,.4);background:transparent;color:#EAE8E0;font-size:16px;line-height:1;cursor:pointer;border-radius:2px;font-family:'Jost',sans-serif;transition:all .2s;flex-shrink:0}
.cal-nav:hover:not(:disabled){background:#EAE8E0;color:#2F4739}
.cal-nav:disabled{opacity:.28;cursor:not-allowed}
.cal-title{font-family:'Spectral',serif;font-size:15px;color:#fff;letter-spacing:.3px}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:0}
.calm{padding:14px 16px 16px;border-right:1.5px solid #D8D6CB}
.calm:last-child{border-right:none}
.calm-name{font-family:'Spectral',serif;font-size:15px;font-weight:600;text-align:center;margin-bottom:10px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-dow span{text-align:center;font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#8A8F85}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:2px;color:#1E2622;cursor:pointer;transition:background .15s;user-select:none}
.d:hover:not(.na):not(.booked){background:#D8D6CB}
.d.pad{visibility:hidden;cursor:default}
.d.na{color:#C2C0B6;cursor:not-allowed;text-decoration:line-through}
/* Booked nights stay clickable — they can still be a departure day, since the
   guest leaves in the morning before the next arrival. */
.d.booked{background:#E4E0D6;color:#A9A79C;text-decoration:line-through}
.d.rng{background:#D9CBBA;border-radius:0}
.d.start,.d.end{background:#2F4739;color:#fff;font-weight:500}
.d.start:hover,.d.end:hover{background:#2F4739}
.cal-key{display:flex;gap:14px;flex-wrap:wrap;padding:11px 16px;border-top:1.5px solid #D8D6CB;background:#EAE8E0;font-size:11px;color:#6E7269}
.cal-key i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.k-free{background:#F6F5F1;border:1px solid #D8D6CB}
.k-booked{background:#E4E0D6}
.k-sel{background:#2F4739}
.cal-hint{padding:10px 16px;font-size:12px;color:#B0663C;border-top:1.5px solid #D8D6CB;min-height:0;line-height:1.5}
.book-form{background:#F6F5F1;padding:32px;border-radius:2px;box-shadow:0 6px 36px rgba(30,38,34,.10)}
.bf-head{font-family:'Spectral',serif;font-size:24px;margin-bottom:20px;padding-bottom:14px;border-bottom:1.5px solid #D8D6CB}
.flbl{display:block;font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#B0663C;margin-bottom:5px}
.finput{width:100%;padding:11px 13px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:14px;font-family:'Jost',sans-serif;outline:none;transition:border-color .3s;background:white;color:#1E2622;appearance:none}
.finput:focus{border-color:#2F4739}
.finput option{background:white}
.fgrp{margin-bottom:13px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
.pbox{background:#EAE8E0;border-radius:2px;padding:15px;margin:8px 0 14px}
.prow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;color:#6E7269}
.prow.empty{color:#8A8F85;font-style:italic;justify-content:center;padding:10px 0}
.prow.tot{font-weight:600;color:#1E2622;font-size:14.5px;border-top:1.5px solid #D8D6CB;padding-top:9px;margin-top:5px}
.prow.tot span:last-child{color:#B0663C}
.prow.due{font-weight:600;color:#1E2622;font-size:14px;background:#F6F5F1;margin:8px -15px -15px;padding:11px 15px;border-top:1.5px solid #D8D6CB}
.prow.bal{font-size:12.5px;color:#6E7269;background:#F6F5F1;margin:0 -15px -15px;padding:0 15px 11px}
.bkmsg{font-size:12.5px;line-height:1.6;color:#B0663C;margin-bottom:12px;min-height:0}
.card-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin-bottom:13px}
.btn-pay{width:100%;background:#2F4739;color:white;border:none;border-radius:2px;padding:14px;font-size:15px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;transition:background .3s}
.btn-pay:hover:not(:disabled){background:#1E3226}
.btn-pay:disabled{background:#A9AFA5;cursor:not-allowed}
.pay-note{text-align:center;font-size:11px;color:#6E7269;margin-top:9px;line-height:1.6}
.pay-note.ok{color:#2F4739;font-weight:500}

/* HOUSE RULES GATE */
.modal-ov{position:fixed;inset:0;background:rgba(30,38,34,.62);backdrop-filter:blur(3px);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.modal-ov.open{display:flex}
.modal{background:#F6F5F1;border-radius:2px;max-width:560px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(30,38,34,.4)}
.m-head{padding:26px 30px 18px;border-bottom:1.5px solid #D8D6CB;flex-shrink:0}
.m-eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#B0663C;font-weight:500;margin-bottom:8px}
.m-ttl{font-family:'Spectral',serif;font-size:26px;font-weight:400;line-height:1.15}
.m-sub{font-size:13.5px;color:#6E7269;margin-top:8px;line-height:1.6;font-weight:300}
.m-body{padding:22px 30px;overflow-y:auto;flex:1}
.m-sec{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#B0663C;font-weight:500;margin:0 0 10px}
.m-sec+.m-sec{margin-top:22px}
.m-rules{list-style:none;margin-bottom:4px}
.m-rules li{font-size:14px;color:#1E2622;padding:9px 0 9px 24px;position:relative;border-bottom:1px solid #D8D6CB;line-height:1.5}
.m-rules li:last-child{border-bottom:none}
.m-rules li::before{content:'';position:absolute;left:4px;top:15px;width:7px;height:7px;background:#B0663C}
.m-terms{background:#EAE8E0;border-radius:2px;padding:16px 18px;margin-top:22px}
.m-cancel{font-size:13.5px;line-height:1.7;color:#4A5148;background:#EAE8E0;border-left:3px solid #B0663C;padding:14px 16px}
.m-cancel b{color:#1E2622;font-weight:600}
.m-trow{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:#6E7269;padding:6px 0;line-height:1.5}
.m-trow span:last-child{color:#1E2622;font-weight:500;text-align:right;white-space:nowrap}
.m-foot{padding:20px 30px 26px;border-top:1.5px solid #D8D6CB;flex-shrink:0;background:#EAE8E0}
.m-hold{font-size:12.5px;letter-spacing:.4px;color:#2F4739;background:#F6F5F1;border-left:3px solid #B0663C;padding:9px 12px;margin-bottom:14px;font-variant-numeric:tabular-nums}
.m-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-bottom:18px}
.m-check input{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:#2F4739;cursor:pointer}
.m-check span{font-size:13.5px;line-height:1.55;color:#1E2622}
.m-actions{display:flex;gap:10px}
.m-btn-back{padding:13px 22px;background:transparent;color:#6E7269;border:1.5px solid #D8D6CB;border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;transition:all .3s}
.m-btn-back:hover{border-color:#6E7269;color:#1E2622}
.m-btn-go{flex:1;padding:13px 22px;background:#2F4739;color:white;border:none;border-radius:2px;font-size:14.5px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif;transition:background .3s}
.m-btn-go:hover:not(:disabled){background:#1E3226}
.m-btn-go:disabled{background:#A9AFA5;cursor:not-allowed}

footer{background:#1E2622;color:rgba(234,232,224,.55);padding:44px 48px}
.footer-inner{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.flogo{font-family:'Spectral',serif;font-size:20px;color:#EAE8E0}
.faddr{font-size:12.5px;line-height:1.6;margin-top:5px}
.flinks{display:flex;gap:22px;flex-wrap:wrap}
.flinks a{font-size:13px;color:rgba(234,232,224,.4);text-decoration:none;transition:color .3s}
.flinks a:hover{color:#EAE8E0}
.fphone{font-size:14px;color:#EAE8E0}

/* ── MOBILE ── */
@media(max-width:900px){
  .area-grid{grid-template-columns:1fr}
  .rates-inner{grid-template-columns:1fr;gap:34px}
  .cal-months{grid-template-columns:1fr}
  .calm{border-right:none;border-bottom:1.5px solid #D8D6CB}
  .calm:last-child{border-bottom:none}
}
@media(max-width:768px){
  .wrap{padding:0 20px}
  .nav-inner{padding:0 20px}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;background:#F6F5F1;padding:20px;gap:16px;border-bottom:1px solid #D8D6CB;z-index:200}
  .hamburger{display:flex}
  .logo-name{font-size:17px}
  .hero{grid-template-columns:1fr;min-height:auto;max-height:none}
  .hero-img{height:55vw;min-height:260px;order:1}
  .hero-right{padding:32px 20px;order:2}
  .hdesc{max-width:100%}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:180px 180px}
  .gc:last-child{grid-column:span 2;grid-row:auto}
  .details-inner{grid-template-columns:1fr;gap:36px}
  .details,.rates,.area{padding:52px 0}
  .amenlist{grid-template-columns:1fr 1fr}
  .booking{padding:52px 0}
  .booking-inner{grid-template-columns:1fr}
  .bk-img{display:none}
  footer{padding:32px 20px}
  .footer-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .specs{flex-wrap:wrap}
  .spec{min-width:50%;border-bottom:1.5px solid #D8D6CB}
  .hbtns{flex-direction:column}
  .btn-p,.btn-s{width:100%;text-align:center}
  .card-row{grid-template-columns:1fr 1fr}
  .card-row .finput:first-child{grid-column:span 2}
  .rt-row{grid-template-columns:1fr auto;gap:6px}
  .rt-row .rt-min{grid-column:1/-1;font-size:12px}
  .rt-row.head{display:none}
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
   Built for a non-technical owner: plain labels, big targets,
   one Save per screen, and no jargon anywhere on screen.
   ══════════════════════════════════════════════════════════════ */

/* Login */
.adm-gate{position:fixed;inset:0;background:rgba(30,38,34,.72);backdrop-filter:blur(4px);z-index:900;display:none;align-items:center;justify-content:center;padding:24px}
.adm-gate.open{display:flex}
.adm-login{background:#F6F5F1;border-radius:3px;padding:34px;width:100%;max-width:390px;box-shadow:0 26px 70px rgba(30,38,34,.45)}
.adm-login h3{font-family:'Spectral',serif;font-size:25px;font-weight:400;margin-bottom:6px}
.adm-login p{font-size:13.5px;color:#6E7269;margin-bottom:22px;line-height:1.6}
.adm-err{background:#F6E3DC;border-left:3px solid #B0663C;color:#8C4A28;font-size:13px;padding:10px 13px;margin-bottom:14px;line-height:1.5;display:none}
.adm-err.show{display:block}

/* Shell */
.adm{position:fixed;inset:0;background:#F6F5F1;z-index:880;display:none;flex-direction:column}
.adm.open{display:flex}
.adm-top{background:#2F4739;color:#EAE8E0;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:14px}
.adm-brand{font-family:'Spectral',serif;font-size:18px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-who{font-size:12px;color:rgba(234,232,224,.62);margin-left:auto;white-space:nowrap}
.adm-out{background:transparent;border:1px solid rgba(234,232,224,.45);color:#EAE8E0;padding:8px 15px;border-radius:2px;font-size:13px;cursor:pointer;font-family:'Jost',sans-serif;white-space:nowrap}
.adm-out:hover{background:#EAE8E0;color:#2F4739}
.adm-body{flex:1;display:flex;overflow:hidden}
.adm-tabs{width:210px;background:#EAE8E0;border-right:1.5px solid #D8D6CB;padding:14px 0;flex-shrink:0;overflow-y:auto}
.adm-tab{display:block;width:100%;text-align:left;background:transparent;border:none;padding:13px 20px;font-size:15px;color:#4A5148;cursor:pointer;font-family:'Jost',sans-serif;border-left:3px solid transparent}
.adm-tab:hover{background:#DEDCD2}
.adm-tab.on{background:#F6F5F1;border-left-color:#B0663C;color:#1E2622;font-weight:500}
.adm-main{flex:1;overflow-y:auto;padding:28px 32px 80px}
.adm-h{font-family:'Spectral',serif;font-size:29px;font-weight:400;margin-bottom:6px}
.adm-sub{font-size:14px;color:#6E7269;margin-bottom:26px;line-height:1.65;max-width:640px}
.adm-sec{max-width:760px;margin-bottom:34px}
.adm-sec-h{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#B0663C;font-weight:500;margin-bottom:14px;padding-bottom:8px;border-bottom:1.5px solid #D8D6CB}

/* Fields */
.af{margin-bottom:16px}
.af label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:#1E2622}
.af .hint{font-size:12px;color:#8A8F85;margin-bottom:6px;line-height:1.5}
.af input,.af textarea,.af select{width:100%;padding:11px 13px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:14.5px;font-family:'Jost',sans-serif;background:#fff;color:#1E2622;outline:none}
.af input:focus,.af textarea:focus,.af select:focus{border-color:#2F4739}
.af textarea{min-height:96px;resize:vertical;line-height:1.6}
.af-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.af-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.af-inline{display:flex;align-items:center;gap:9px}
.af-inline input[type=checkbox]{width:19px;height:19px;accent-color:#2F4739;cursor:pointer;flex-shrink:0}
.af-inline label{margin:0;font-weight:400}

/* Buttons */
.abtn{background:#2F4739;color:#fff;border:none;padding:12px 24px;border-radius:2px;font-size:14.5px;font-weight:500;cursor:pointer;font-family:'Jost',sans-serif}
.abtn:hover:not(:disabled){background:#1E3226}
.abtn:disabled{background:#A9AFA5;cursor:not-allowed}
.abtn.ghost{background:transparent;color:#6E7269;border:1.5px solid #D8D6CB}
.abtn.ghost:hover{border-color:#6E7269;color:#1E2622;background:transparent}
.abtn.danger{background:transparent;color:#A8442A;border:1.5px solid #E0C4B8;padding:8px 15px;font-size:13px}
.abtn.danger:hover{background:#A8442A;color:#fff;border-color:#A8442A}
.abtn.sm{padding:8px 15px;font-size:13px}
.adm-save{background:#F6F5F1;border-top:1.5px solid #D8D6CB;padding:18px 0 4px;margin-top:26px;display:flex;align-items:center;gap:14px}
.adm-flash{font-size:13.5px;color:#2F4739;font-weight:500;opacity:0;transition:opacity .25s}
.adm-flash.show{opacity:1}

/* Repeating rows (bookings, specials, photos) */
.arow{background:#EAE8E0;border:1.5px solid #D8D6CB;border-radius:2px;padding:16px;margin-bottom:12px}
.arow-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:4px}
.arow-t{font-family:'Spectral',serif;font-size:17px}
.arow-m{font-size:13px;color:#6E7269;line-height:1.6}
.pill{display:inline-block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:4px 9px;border-radius:2px;margin-right:6px}
.pill.guest{background:#2F4739;color:#fff}
.pill.owner{background:#B0663C;color:#fff}
.pill.maintenance{background:#6E7269;color:#fff}
.pill.off{background:#D8D6CB;color:#6E7269}
.pill.on{background:#2F4739;color:#fff}
.aempty{color:#8A8F85;font-size:14px;font-style:italic;padding:18px 0}
.awarn{background:#F6E3DC;border-left:3px solid #B0663C;padding:12px 15px;font-size:13.5px;color:#8C4A28;line-height:1.6;margin-bottom:16px}
.anote{background:#EAE8E0;border-left:3px solid #2F4739;padding:12px 15px;font-size:13.5px;color:#4A5148;line-height:1.6;margin-bottom:18px}

/* Photo grid */
.apics{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.apic{border:1.5px solid #D8D6CB;border-radius:2px;overflow:hidden;background:#EAE8E0}
.apic-img{height:104px;background:#D8D6CB;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8A8F85}
.apic-img img{width:100%;height:100%;object-fit:cover;display:block}
.apic-b{padding:10px}
.apic-b input{width:100%;padding:7px 9px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:12.5px;font-family:'Jost',sans-serif;margin-bottom:6px}

.adm-hidden{display:none !important}

@media(max-width:768px){
  .adm-body{flex-direction:column}
  /* A sideways-scrolling tab strip hides its own tabs — Reports sat off-screen
     and looked like it didn't exist. A grid shows every tab at once. */
  /* One row that scrolls, with the selected tab pulled to the middle. Two rows
     ate the screen; a grid of nine was worse. */
  .adm-tabs{width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    background:#EAE8E0;border-right:none;border-bottom:1.5px solid #D8D6CB;padding:0;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .adm-tabs::-webkit-scrollbar{display:none}
  /* width:auto matters: the desktop rule sets width:100%, which made every tab
     the full width of the strip and left exactly one visible. */
  .adm-tab{white-space:nowrap;flex:0 0 auto;width:auto;border-left:none;
    border-bottom:3px solid transparent;padding:14px 16px;text-align:center;
    background:transparent;font-size:13.5px}
  .adm-tab.on{background:#F6F5F1;border-left-color:transparent;border-bottom-color:#B0663C;
    box-shadow:none;font-weight:500}
  .adm-tab .t-long{display:none}
  .adm-tab .t-short{display:inline}
  .adm-tab.on{border-left-color:transparent;background:#F6F5F1;
    box-shadow:inset 0 -3px 0 #B0663C;font-weight:500}
  .adm-main{padding:20px 18px 90px}
  .adm-h{font-size:24px}
  .af-row,.af-row3{grid-template-columns:1fr}
  .adm-brand{font-size:15px}
  .adm-who{display:none}
}


/* ══════════ INSTALL PROMPT ══════════ */
.pwa-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:700;background:#2F4739;color:#EAE8E0;
  border-radius:3px;padding:16px 18px;display:none;align-items:center;justify-content:space-between;
  gap:16px;box-shadow:0 14px 40px rgba(30,38,34,.4);max-width:520px;margin:0 auto}
.pwa-bar.show{display:flex}
.pwa-t{font-family:'Spectral',serif;font-size:17px;color:#fff}
.pwa-s{font-size:12.5px;color:rgba(234,232,224,.7);margin-top:3px;line-height:1.5}
.pwa-btns{display:flex;gap:8px;flex-shrink:0}
.pwa-bar .abtn{background:#B0663C}
.pwa-bar .abtn:hover{background:#95522E}
.pwa-bar .abtn.ghost{background:transparent;color:rgba(234,232,224,.75);border-color:rgba(234,232,224,.35)}
@media(max-width:560px){ .pwa-bar{flex-direction:column;align-items:stretch} .pwa-btns .abtn{flex:1} }


/* ══════════ TEST MODE ══════════ */
.testbar{display:none;background:#B0663C;color:#fff;text-align:center;font-size:13.5px;
  line-height:1.5;padding:11px 20px;position:sticky;top:0;z-index:400;letter-spacing:.2px}
.testbar.show{display:block}
.testbar strong{font-weight:600}
body.testing nav{top:0}
.pill.test{background:#B0663C;color:#fff}
.adm-mode{background:#B0663C;color:#fff;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;margin-left:10px}

/* ══════════ REPORTS ══════════ */
.rp-tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1.5px solid #D8D6CB}
.rp-tbl th{background:#2F4739;color:#EAE8E0;text-align:left;padding:9px 11px;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;font-weight:500;white-space:nowrap}
.rp-tbl td{padding:9px 11px;border-bottom:1px solid #E4E0D6;white-space:nowrap}
.rp-tbl tr:last-child td{border-bottom:none}
.rp-tbl tbody tr:nth-child(even){background:#F6F5F1}

.vis-list{margin-top:16px;border:1.5px solid #D8D6CB;border-radius:2px;overflow:hidden}
.vis-row{display:grid;grid-template-columns:132px 1fr 46px;gap:12px;align-items:center;
  padding:7px 13px;font-size:12.5px;border-bottom:1px solid #E4E0D6}
.vis-row:last-child{border-bottom:none}
.vis-row:nth-child(even){background:#F6F5F1}
.vis-row span:last-child{text-align:right;font-weight:500}
.vis-bar{display:block;background:#E4E0D6;height:8px;border-radius:4px;overflow:hidden}
.vis-bar i{display:block;height:100%;background:#B0663C}

/* Save as PDF: the browser's own print dialog, with everything else hidden. */
@media print{
  body.printing-report .adm-tabs,
  body.printing-report .adm-top,
  body.printing-report #rpCsv,
  body.printing-report #rpPrint,
  body.printing-report .adm-sec:last-child,
  body.printing-report .af-row3,
  body.printing-report .af-inline,
  body.printing-report .testbar{display:none !important}
  body.printing-report .adm{position:static;display:block}
  body.printing-report .adm-main{overflow:visible;padding:0}
  body.printing-report .rp-tbl{border-color:#999;font-size:11px}
  body.printing-report .rp-tbl th{background:#eee !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.printing-report .pbox{border:1px solid #999;background:#fff}
  @page{margin:16mm}
}

/* ══════════ MOBILE WIDTH CONTAINMENT ══════════
   A flex item defaults to min-width:auto, meaning it refuses to shrink below its
   content. One wide control — a date input, on the Calendar tab — was enough to
   push the whole panel wider than the phone and make the page scroll sideways.
   min-width:0 lets these actually shrink; max-width:100% stops any single
   control from being the one that decides the panel's width. */
.adm, .adm-body, .adm-main, .adm-tabs { min-width: 0; }
.adm-main { max-width: 100%; }
.adm-sec, .arow, .af, .af-row, .af-row3, .pbox { min-width: 0; max-width: 100%; }
.af input, .af select, .af textarea, .apic-b input { max-width: 100%; min-width: 0; }

/* Date and number fields have their own ideas about intrinsic width on iOS. */
.af input[type="date"], .af input[type="number"] { -webkit-appearance: none; appearance: none; }

/* Long emails and notes wrap instead of stretching their row. */
.arow, .arow-m, .adm-sub, .anote, .hint { overflow-wrap: anywhere; }

/* The report table is the one thing allowed to be wide — it scrolls on its own. */
.rp-tbl { min-width: 0; }


/* ══════════ VISITORS, ALWAYS IN SIGHT ══════════
   Pinned under the tabs on a desktop, and in the top bar on a phone where the
   tabs become a scrolling strip and anything inside them scrolls out of view. */
.adm-nav{width:210px;background:#EAE8E0;border-right:1.5px solid #D8D6CB;flex-shrink:0;
  display:flex;flex-direction:column;min-height:0}
.adm-nav .adm-tabs{width:100%;border-right:none;flex:1}
.adm-visits{border-top:1.5px solid #D8D6CB;padding:16px 20px;background:#E4E0D6}
.adm-visits-h{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:#8A8F85;margin-bottom:9px}
.adm-visits-big{font-family:'Spectral',serif;font-size:27px;font-weight:600;color:#2F4739;line-height:1}
.adm-visits-sub{font-size:11.5px;color:#6E7269;margin-top:5px;line-height:1.5}
.adm-visits-top{display:none;margin-left:auto;text-align:right;font-size:11.5px;
  color:rgba(234,232,224,.75);line-height:1.35;white-space:nowrap}
.adm-visits-top b{display:block;font-family:'Spectral',serif;font-size:17px;color:#fff;font-weight:600}

@media(max-width:768px){
  .adm-nav{width:100%;border-right:none;border-bottom:1.5px solid #D8D6CB;flex-direction:column}
  .adm-visits{display:none}          /* would scroll away with the tab strip */
  .adm-visits-top{display:block}
  .adm-who{display:none}
}

/* ══════════ REPORT CARDS & BOOKING STATES ══════════ */
.rp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-top:8px}
.rp-card{background:#EAE8E0;border-left:4px solid #2F4739;padding:15px 16px;border-radius:2px}
.rp-card span{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#6E7269}
.rp-card b{display:block;font-family:'Spectral',serif;font-size:26px;font-weight:600;color:#1E2622;margin-top:6px;line-height:1}
.rp-card i{display:block;font-size:11.5px;color:#8A8F85;font-style:normal;margin-top:5px}

/* Whoever is in the condo right now should be the easiest thing to find. */
.arow.here-now{border-left:4px solid #2F4739;background:#F2F0E8}
.when{display:inline-block;background:#D8D6CB;color:#4A5148;font-size:11px;padding:2px 8px;border-radius:10px;margin-left:6px}
.arow.here-now .when{background:#2F4739;color:#fff}
.arow-m a{color:#B0663C;text-decoration:none}
.arow-m a:hover{text-decoration:underline}


/* ══════════ CONTACT BLOCK ══════════ */
.fcontact{text-align:right}
.fowner{font-family:'Spectral',serif;font-size:15px;color:#EAE8E0;margin-bottom:3px}
.femail{font-size:12.5px;margin-top:2px}
.femail a{color:rgba(234,232,224,.55);text-decoration:none}
.femail a:hover{color:#EAE8E0}
.contact-hidden{font-size:12.5px;color:rgba(234,232,224,.45);font-style:italic}
@media(max-width:768px){ .fcontact{text-align:center} }

/* ══════════ TEST MODE TOGGLE ══════════ */
.adm-toggle{display:flex;align-items:center;gap:14px;background:#EAE8E0;border:1.5px solid #D8D6CB;
  border-radius:2px;padding:16px 18px;margin-bottom:16px}
.adm-toggle.on{background:#F6E3DC;border-color:#B0663C}
.adm-toggle-txt{flex:1;min-width:0}
.adm-toggle-t{font-family:'Spectral',serif;font-size:18px;margin-bottom:3px}
.adm-toggle-s{font-size:12.5px;color:#6E7269;line-height:1.5}
.switch{position:relative;width:58px;height:32px;flex-shrink:0;cursor:pointer;border:none;
  background:#A9AFA5;border-radius:16px;transition:background .2s;padding:0}
.switch.on{background:#B0663C}
.switch i{position:absolute;top:3px;left:3px;width:26px;height:26px;background:#fff;border-radius:50%;
  transition:transform .2s;display:block}
.switch.on i{transform:translateX(26px)}


/* Full tab names on a desktop, short ones on a phone so eight fit in two rows. */
.t-short{display:none}
.t-long{display:inline}


/* ══════════ ADMIN SCROLLING ══════════
   A flex child defaults to min-height:auto — it refuses to be shorter than its
   content, so it never becomes a scroll container and the panel simply couldn't
   be scrolled on a phone. min-height:0 is what makes overflow-y actually work. */
.adm-body{min-height:0}
.adm-main{min-height:0;-webkit-overflow-scrolling:touch}
.adm-nav{min-height:0;flex-shrink:0}

/* Pull-to-refresh doesn't exist inside a fixed overlay, so there's a button. */
.adm-refresh{background:transparent;border:1px solid rgba(234,232,224,.45);color:#EAE8E0;
  width:34px;height:34px;border-radius:2px;cursor:pointer;font-size:15px;line-height:1;flex-shrink:0}
.adm-refresh:hover{background:#EAE8E0;color:#2F4739}
.adm-refresh.spin{animation:adm-spin .7s linear infinite}
@keyframes adm-spin{to{transform:rotate(360deg)}}

/* ══════════ TEST FLAG ON EVERY SECTION ══════════ */
.adm-testflag{background:#F6E3DC;border-left:4px solid #B0663C;color:#8C4A28;padding:13px 16px;
  margin-bottom:22px;font-size:13.5px;line-height:1.6;border-radius:2px}
.adm-testflag strong{color:#7A3C1E}
.adm-testflag-go{background:#B0663C;color:#fff;border:none;padding:5px 12px;border-radius:2px;
  font-size:12.5px;cursor:pointer;font-family:'Jost',sans-serif;margin-left:6px}
.adm-testflag-go:hover{background:#95522E}

.rp-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.arow-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.no-price{margin-top:6px;color:#A8442A;font-style:italic}
.ed-form{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:16px;margin-top:12px;width:100%}

/* A Save that belongs to one field sits with it, not pinned to the screen. */
.save-inline{display:flex;align-items:center;gap:14px;margin-top:4px}


/* ══════════ FIELD WIDTHS ══════════
   Full-width inputs on a wide monitor are mostly empty space, and a text box
   the width of the screen makes short answers look like they want an essay.
   Each field is capped at a comfortable reading width instead. */
.af input, .af select { max-width: 420px; }
.af textarea { max-width: 640px; }
.af-row, .af-row3 { max-width: 660px; }
.af-row .af input, .af-row .af select,
.af-row3 .af input, .af-row3 .af select { max-width: 100%; }
.adm-sec { max-width: 720px; }
.adm-sub, .anote, .adm-toggle { max-width: 660px; }
.pbox, .adm-save, .save-inline { max-width: 640px; }
.arow { max-width: 720px; }

/* Fee rows: name, amount, taxed, remove — on one line where there's room. */
.fee-row{display:grid;grid-template-columns:1fr 110px auto auto;gap:10px;align-items:center;
  margin-bottom:9px;max-width:660px}
.fee-row input[type=text],.fee-row input[type=number]{padding:10px 12px;border:1.5px solid #D8D6CB;
  border-radius:2px;font-size:14px;font-family:'Jost',sans-serif;background:#fff;width:100%}
.fee-tax{display:flex;align-items:center;gap:6px;font-size:13px;color:#6E7269;white-space:nowrap}
.fee-tax input{width:18px;height:18px;accent-color:#2F4739;cursor:pointer}
@media(max-width:768px){
  .fee-row{grid-template-columns:1fr 90px;gap:8px}
  .fee-tax{grid-column:1}
  .fee-row .abtn.danger{grid-column:2;justify-self:end}
  .af input,.af select,.af textarea,.af-row,.af-row3,.adm-sec,.pbox,.arow{max-width:100%}
}

/* ══════════ ASSOCIATION RULES ══════════ */
.rc-more{font-size:12.5px;line-height:1.6;color:#6E7269;margin-top:14px;padding-top:13px;border-top:1px solid #D8D6CB}
.linkish{background:none;border:none;padding:0;font:inherit;color:#B0663C;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:#8C4A28}
.modal-wide{max-width:680px}
.hoa-item{padding:13px 0;border-bottom:1px solid #D8D6CB;display:grid;grid-template-columns:30px 1fr;gap:12px}
.hoa-item:last-child{border-bottom:none}
.hoa-n{font-family:'Spectral',serif;font-size:16px;font-weight:600;color:#B0663C}
.hoa-t{font-weight:500;font-size:14px;margin-bottom:3px}
.hoa-x{font-size:13.5px;line-height:1.65;color:#4A5148}
.hoa-foot{margin-top:20px;padding:15px 17px;background:#EAE8E0;border-left:3px solid #2F4739;
  font-size:13px;line-height:1.65;color:#4A5148;border-radius:2px}
.hoa-foot a{color:#B0663C}
/* Inside checkout the list is boxed so the page doesn't become endless. */
.hoa-scroll{max-height:220px;overflow-y:auto;border:1.5px solid #D8D6CB;border-radius:2px;
  padding:4px 14px;background:#F6F5F1;-webkit-overflow-scrolling:touch}
.hoa-scroll .hoa-item{padding:10px 0}
.hoa-scroll .hoa-x{font-size:12.5px}

/* ══════════ SIGNATURE ══════════ */
.sign-box{margin-top:14px;background:#EAE8E0;border:1.5px solid #D8D6CB;border-radius:2px;padding:15px 16px}
.sign-input{font-family:'Spectral',serif !important;font-size:20px !important;font-style:italic;
  background:#fff !important;border-bottom:2px solid #2F4739 !important}
.sign-note{font-size:11.5px;color:#6E7269;margin-top:9px;line-height:1.55}
.signed-line{font-family:'Spectral',serif;font-style:italic;font-size:17px;color:#1E2622}

/* ══════════ LEGAL CITATIONS ══════════ */
.legal-ref{background:#EAE8E0;border-left:3px solid #2F4739;padding:11px 14px;border-radius:2px;
  margin-top:10px;font-size:12.5px;line-height:1.6;max-width:660px}
.legal-cite{display:block;font-family:'Spectral',serif;font-size:14px;color:#1E2622}
.legal-note{display:block;color:#6E7269;margin:3px 0 5px}
.legal-ref a{color:#B0663C;text-decoration:none;font-weight:500}
.legal-ref a:hover{text-decoration:underline}

.fee-block{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:14px;
  margin-bottom:12px;max-width:660px}
.fee-block .fee-row{margin-bottom:0}
.fee-kind{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.fee-kind label{font-size:12.5px;color:#6E7269}
.fee-kind select{padding:7px 10px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:13px;
  font-family:'Jost',sans-serif;background:#fff}

/* ══════════ TAX EDITOR ══════════ */
.tax-block{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:14px;
  margin-bottom:12px;max-width:660px}
.tax-row{display:grid;grid-template-columns:1fr 84px auto auto;gap:10px;align-items:center}
.tax-pct-sign{color:#6E7269;font-size:14px}
.tax-block input[type=text],.tax-block input[type=number]{padding:10px 12px;border:1.5px solid #D8D6CB;
  border-radius:2px;font-size:14px;font-family:'Jost',sans-serif;background:#fff;width:100%}
.tax-note{margin-top:10px}
.tax-ref{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.tax-ref label{font-size:12.5px;color:#6E7269;white-space:nowrap}
.tax-ref select{padding:7px 10px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:13px;
  font-family:'Jost',sans-serif;background:#fff;flex:1;min-width:180px}
@media(max-width:768px){ .tax-row{grid-template-columns:1fr 70px auto} .tax-row .abtn.danger{grid-column:1/-1;justify-self:start} }

/* Inputs in a row line up even when one field carries a hint and another doesn't. */
.af-row, .af-row3 { align-items: end; }
.af-row .af, .af-row3 .af { display: flex; flex-direction: column; }
.af-row .af input, .af-row .af select,
.af-row3 .af input, .af-row3 .af select { margin-top: auto; }

.legal-what{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:#B0663C;font-weight:500;margin-bottom:3px}

/* Two contacts, two purposes — the association for the property, the owner for the unit. */
.hoa-contacts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hoa-contact-h{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#B0663C;
  font-weight:500;margin-bottom:6px}
.hoa-contact-b{font-size:12.5px;line-height:1.7;color:#4A5148}
.hoa-contact-b strong{color:#1E2622}
@media(max-width:560px){ .hoa-contacts{grid-template-columns:1fr;gap:16px} }

/* ══════════ AROUND THE AREA ══════════ */
.ac-meta{display:block;font-size:11.5px;color:#8A8F85;margin-top:3px}
.ac-tel{display:inline-block;font-size:12.5px;color:#B0663C;text-decoration:none;margin-top:2px}
.ac-tel:hover{text-decoration:underline}
.ac-more{margin-top:12px;padding-top:10px;border-top:1px solid #D8D6CB;font-size:11px;
  letter-spacing:.6px;text-transform:uppercase;color:#8A8F85}
.ac-list{transition:opacity .25s}
.ac-list.fading{opacity:.25}
@media(prefers-reduced-motion:reduce){ .ac-list{transition:none} .ac-list.fading{opacity:1} }

/* ══════════ AREA EDITOR ══════════ */
.area-item{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:14px;
  margin-bottom:12px;max-width:720px}
.area-item-top{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-bottom:9px}
.area-item input[type=text]{padding:10px 12px;border:1.5px solid #D8D6CB;border-radius:2px;
  font-size:14px;font-family:'Jost',sans-serif;background:#fff;width:100%}
.area-item .af-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;max-width:100%}
.ai-live{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#6E7269;white-space:nowrap}
.ai-live input{width:17px;height:17px;accent-color:#2F4739;cursor:pointer}
.ai-season{margin-top:11px;padding-top:11px;border-top:1px solid #D8D6CB}
.ai-months{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ai-m{display:flex;align-items:center;gap:4px;font-size:12px;color:#4A5148;background:#EAE8E0;
  padding:4px 8px;border-radius:2px;cursor:pointer}
.ai-m input{width:14px;height:14px;accent-color:#B0663C;cursor:pointer}
@media(max-width:768px){
  .area-item .af-row3{grid-template-columns:1fr}
  .area-item-top{grid-template-columns:1fr;gap:8px}
}

/* The Act that makes the signature above mean something. */
.sign-legal{font-size:11.5px;line-height:1.65;color:#6E7269;margin-top:11px;padding-top:11px;
  border-top:1px solid #D8D6CB}

/* ══════════ DIALOGS ══════════
   Above everything, including the admin panel, since it's answering a question
   raised there. */
.ask-ov{z-index:950}
.modal-narrow{max-width:440px}
.modal-narrow .m-sub{font-size:14.5px;color:#4A5148;line-height:1.65}
.m-btn-go.danger-btn{background:#A8442A}
.m-btn-go.danger-btn:hover:not(:disabled){background:#8C3520}

/* Folded away until "Edit Details" — only the two switches he actually flips
   stay on show. Inputs are hidden, not removed, so saving still reads them. */
.area-item.collapsed .ai-detail{display:none}
.area-item-flags{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.ai-months-sum{font-size:11.5px;letter-spacing:.4px;color:#6E7269;background:#EAE8E0;
  padding:3px 9px;border-radius:2px;white-space:nowrap}
.area-item.is-off{opacity:.6;border-style:dashed}
.area-item.is-off .ai-name{color:#8A8F85;font-style:italic}
.ai-detail{margin-top:12px;padding-top:12px;border-top:1px solid #D8D6CB}
.ai-season{margin-top:11px;padding-top:0;border-top:none}

/* The daily work sits at the top; everything from Reports down is pushed to the
   foot of the sidebar, directly above the visitor count. margin-top:auto eats
   the empty space between them rather than leaving a gap in the middle. */
/* Desktop only. Unscoped, this beat the phone's row layout on specificity — it
   is written later in the file and names one more class — and the tabs stacked
   into a vertical list that shoved the panel down the screen. Landscape looked
   fine only because the window was then wide enough to be a desktop. */
@media(min-width:769px){
  .adm-nav .adm-tabs{display:flex;flex-direction:column}
  .adm-tab.group-start{margin-top:auto;border-top:1.5px solid #D8D6CB;padding-top:15px}
}
@media(max-width:768px){
  .adm-nav .adm-tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto}
}
@media(max-width:768px){
  .adm-tab.group-start{margin-top:0;border-top:none;padding-top:14px;
    border-left:1.5px solid #D8D6CB;margin-left:6px;padding-left:20px}
}

/* Long unbroken text (a pasted URL, a reference code) sets a minimum width that
   nothing can shrink, and that alone can make a tab draggable sideways. */
.adm-main, .adm-main a, .adm-sec, .anote, .hint, .arow-m, .adm-sub{overflow-wrap:anywhere}

/* ══════════ MAINTENANCE ══════════
   Takes the booking form's place, so nobody fills in a form that can't be sent.
   The calendar beside it stays: knowing which dates are free is still useful. */
.adm-testflag.maint{background:#F6E3DC;border-left-color:#8C4A28;color:#8C4A28}
.cal-days .d.noarrive{color:#C0BEB4;background:repeating-linear-gradient(45deg,transparent,transparent 3px,#EFEDE6 3px,#EFEDE6 6px);cursor:not-allowed}
.k-noarrive{background:repeating-linear-gradient(45deg,transparent,transparent 2px,#D8D6CB 2px,#D8D6CB 4px);border:1px solid #D8D6CB}
.setup-ov{position:fixed;inset:0;background:rgba(30,38,34,.78);backdrop-filter:blur(4px);z-index:920;
  display:none;align-items:center;justify-content:center;padding:22px}
.setup-ov.open{display:flex}
.setup{background:#F6F5F1;border-radius:3px;width:100%;max-width:540px;max-height:92vh;display:flex;
  flex-direction:column;overflow:hidden}
.setup-head{padding:28px 30px 20px;border-bottom:1.5px solid #E4E2DA}
.setup-progress{display:flex;gap:6px;margin-bottom:16px}
.setup-progress i{height:3px;flex:1;background:#DEDCD2;border-radius:2px}
.setup-progress i.on{background:#B0663C}
.setup-progress i.done{background:#2F4739}
.setup-step{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:#8A8F85;margin-bottom:9px}
.setup-ttl{font-family:'Spectral',serif;font-size:25px;font-weight:600;color:#1E2622;line-height:1.25}
.setup-blurb{font-size:14px;line-height:1.7;color:#4A5148;margin-top:10px}
.setup-body{padding:22px 30px;overflow-y:auto;flex:1;min-height:0}
.setup-foot{padding:18px 30px 22px;border-top:1.5px solid #E4E2DA;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
@media(max-width:640px){
  .setup-head{padding:22px 20px 16px} .setup-body{padding:18px 20px} .setup-foot{padding:16px 20px}
  .setup-ttl{font-size:22px}
  .setup-foot .abtn{min-height:38px}
}
.aud{border-bottom:1px solid #E4E2DA;padding:13px 0}
.aud:last-child{border-bottom:none}
.aud-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.aud-h span:first-child{font-weight:500;color:#1E2622;font-size:14px}
.aud-w{font-size:12px;color:#8A8F85;white-space:nowrap}
.aud-c{font-size:12.5px;color:#4A5148;margin-top:5px;padding-left:12px;border-left:2px solid #D8D6CB}
.aud-c b{color:#2F4739;font-weight:500}
.mt-card{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:30px 28px}
.mt-eyebrow{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:#B0663C;margin-bottom:12px}
.mt-ttl{font-family:'Spectral',serif;font-size:27px;font-weight:600;color:#1E2622;margin-bottom:14px;line-height:1.25}
.mt-body{font-size:14.5px;line-height:1.75;color:#4A5148;margin-bottom:14px}
.mt-contact{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.mt-btn{background:#2F4739;color:#F6F5F1;text-decoration:none;padding:13px 22px;border-radius:2px;
  font-size:14px;letter-spacing:.4px}
.mt-btn.ghost{background:transparent;color:#2F4739;border:1.5px solid #2F4739}
.testbar.maint{background:#8C4A28}
.testbar.preview{display:block;background:#2F4739}
@media(max-width:640px){ .mt-card{padding:24px 20px} .mt-ttl{font-size:23px} }

/* ══════════ ON A PHONE, EVERY CONTROL IS BIG ENOUGH TO HIT ══════════
   From an audit of all eleven tabs at 390px: buttons and links under about
   34px tall are hard to hit accurately, and 10px labels are hard to read at
   arm's length. Nothing here changes the layout on a desktop. */
@media(max-width:768px){
  .adm-main .abtn, .adm-main button:not(.switch):not(.rv-star){min-height:36px}
  .adm-testflag-go{min-height:36px;padding:8px 14px}
  .switch{min-height:34px}
  .tax-ref a, .legal-ref a, .adm-main a{display:inline-block;padding:7px 0;min-height:32px}
  .adm-sec-h{font-size:12px}
  .pill, .when, .rp-card span, .rp-card i{font-size:12px}
  .legal-what{font-size:11.5px}
  th{font-size:11px}

  /* A tax reads the same way a fee does: what it's called, then the number and
     its % sign together, then Remove. The bare "%" stranded on a line of its
     own was the giveaway that the grid had run out of room. */
  .tax-row{grid-template-columns:110px auto 1fr;gap:8px 10px;align-items:center}
  .tax-label{grid-column:1 / -1}
  .tax-pct{grid-column:1}
  .tax-pct-sign{grid-column:2;justify-self:start}
  .tax-row .abtn.danger{grid-column:3;justify-self:end}

  /* The whole label is the target, not just the 19px box. */
  .af-inline label, .ai-live, .fee-tax{min-height:34px;display:flex;align-items:center;gap:8px}
}

/* ══════════ NO SIDEWAYS DRAG ══════════
   The panel is a fixed overlay and there is nothing in it to pan to, so a
   sideways drag should do nothing at all. Reported on the rates tab, which I
   could not reproduce on any emulated screen from 320px up — so rather than
   guess at the cause, the panel is now built so it cannot happen: horizontal
   overflow is clipped, and a drag across the content is treated as a vertical
   gesture. The report tables opt back in, since those genuinely are wider than
   a phone and are meant to be scrolled. */
.adm{overflow-x:hidden}
@media(max-width:768px){
  .adm-body, .adm-main{overflow-x:hidden;overscroll-behavior-x:contain;touch-action:pan-y}
  .rp-scroll{overflow-x:auto;touch-action:auto;-webkit-overflow-scrolling:touch}
}

/* ══════════ TOUCH KEYBOARDS ══════════
   Safari on iOS zooms the page in whenever you tap a form field whose text is
   under 16px, and once it has zoomed, the page can be dragged left and right.
   Reported as "the rates tab scrolls sideways" — it has more fields than any
   other tab, so it is where you meet it first. Nothing there is too wide; the
   browser was zooming. 16px is the threshold, so 16px it is. */
@media (hover:none) and (pointer:coarse) {
  /* The attribute selectors are deliberate: .tax-block input[type=text] and its
     neighbors set 14px with a specificity this rule has to match to beat. */
  .adm input, .adm select, .adm textarea,
  .af input, .af select, .af textarea,
  .fee-row input[type=text], .fee-row input[type=number],
  .tax-block input[type=text], .tax-block input[type=number],
  .area-item input[type=text],
  .tax-block select, .tax-ref select, .tax-label, .finput { font-size:16px }
}

/* ══════════ REVIEWS ══════════ */
.reviews{background:#EAE8E0;padding:76px 0}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rv-score{text-align:right}
.rv-score-big{font-family:'Spectral',serif;font-size:44px;font-weight:600;color:#2F4739;line-height:1}
.rv-score-stars{color:#B0663C;letter-spacing:3px;font-size:15px;margin-top:4px}
.rv-score-n{font-size:12px;color:#6E7269;margin-top:3px}
/* Three at a time, sliding on their own. A plain scroller rather than a widget:
   it still works with a finger, a trackpad, or the keyboard if the timer is off. */
.rv-track{display:flex;gap:20px;margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.rv-track::-webkit-scrollbar{display:none}
.rv-track:focus-visible{outline:2px solid #2F5D50;outline-offset:4px}
.rv-track > .rv-card{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start}
@media (max-width:900px){ .rv-track > .rv-card{flex-basis:calc((100% - 20px) / 2)} }
@media (max-width:640px){ .rv-track > .rv-card{flex-basis:100%} }
@media (prefers-reduced-motion:reduce){ .rv-track{scroll-behavior:auto} }
.req{color:#B0663C;font-size:11px;letter-spacing:.5px;text-transform:uppercase;margin-left:4px}
.rv-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.rv-dot{width:7px;height:7px;border-radius:50%;background:#C7C4B7;border:0;padding:0;cursor:pointer}
.rv-dot.on{background:#2F5D50}
.rv-card{background:#F6F5F1;border:1.5px solid #D8D6CB;border-radius:2px;padding:22px;display:flex;flex-direction:column}
.rv-card-stars{color:#B0663C;letter-spacing:2px;margin-bottom:10px}
.rv-card-text{font-size:14.5px;line-height:1.7;color:#4A5148;flex:1}
.rv-card-who{font-size:12.5px;color:#6E7269;margin-top:14px;padding-top:12px;border-top:1px solid #D8D6CB}
.rv-card-who strong{color:#1E2622}

.rv-stars{display:flex;gap:6px}
.rv-star{background:none;border:none;font-size:32px;line-height:1;cursor:pointer;color:#D8D6CB;padding:0 2px}
.rv-star.lit{color:#B0663C}
.rv-star-label{font-size:12.5px;color:#6E7269;margin-top:7px;min-height:18px}
.rv-pending{background:#F6E3DC;border-left:3px solid #B0663C;padding:11px 14px;font-size:13px;
  color:#8C4A28;line-height:1.6;margin-top:12px;border-radius:2px}
@media(max-width:768px){ .rv-head{flex-direction:column;align-items:flex-start} .rv-score{text-align:left} }

/* Cancelling: a link in the footer, quiet but findable. */
.flink{font-size:13px;color:rgba(234,232,224,.4);text-decoration:none}
.flink:hover{color:#EAE8E0}
.cx-fig{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:8px 0;color:#4A5148}
.cx-fig:last-child{border-top:1.5px solid #D8D6CB;margin-top:6px;padding-top:11px;font-weight:600;color:#1E2622}
.cx-fig span:last-child{white-space:nowrap}

/* Fee rows gained a dollars/percent selector. */
.fee-row{grid-template-columns:1fr 92px 96px auto auto}
.fee-mode{padding:10px 8px;border:1.5px solid #D8D6CB;border-radius:2px;font-size:13px;
  font-family:'Jost',sans-serif;background:#fff}
.fee-explain{margin-top:9px}
/* On a phone a fee reads as three lines: what it's called, how much and in what
   units, then the tax box and Remove. The amount and its dollars/percent
   selector belong together on one line — split across two rows they read as
   unrelated fields. */
@media(max-width:768px){
  .fee-row{grid-template-columns:110px 1fr;gap:8px 10px}
  .fee-label{grid-column:1 / -1}
  .fee-amount{grid-column:1}
  .fee-mode{grid-column:2;justify-self:stretch}
  .fee-tax{grid-column:1}
  .fee-row .abtn.danger{grid-column:2;justify-self:end}
}