/* App surfaces — booking, portals, admin. Extends system.css, never redefines tokens. */

.page{max-width:var(--maxw); margin:0 auto; padding:132px 5vw 0}
.page-head{max-width:60ch}
.page-head h1{font-size:clamp(2.2rem,6vw,4.4rem); margin-top:20px; line-height:.94}
.lede{margin:22px 0 0; color:var(--text-dim); font-weight:300; font-size:clamp(15px,1.4vw,18px)}
.muted{color:var(--text-dim)}
.hint{margin:12px 0 0; font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); line-height:1.7}
.hint.err{color:#E5796B}
.hint.ok{color:var(--amber)}

/* ---------- panels ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:26px; margin-top:22px;
}
.panel-title{
  display:flex; align-items:baseline; gap:13px;
  font-size:clamp(1.05rem,2vw,1.35rem); margin-bottom:22px;
}
.panel-title .step{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--amber);
}
.booking{margin-top:38px}

/* ---------- room picker ---------- */
.room-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:12px}
.room-opt{
  position:relative; display:block; border:1px solid var(--line); border-radius:3px;
  background:var(--surface-2); padding:15px 16px; cursor:pointer;
}
.room-opt:hover{border-color:var(--amber-deep)}
.room-opt input{position:absolute; opacity:0; pointer-events:none}
.room-opt .rn{font-size:14px; font-weight:600}
.room-opt .rs{font-family:var(--font-mono); font-size:10.5px; color:var(--amber); margin-top:4px; letter-spacing:.08em}
.room-opt .rd{font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); margin-top:6px; line-height:1.6}
.room-opt:has(input:checked){border-color:var(--amber); background:rgba(224,163,74,.07)}
.room-opt:has(input:focus-visible){outline:2px solid var(--amber); outline-offset:2px}

/* ---------- calendar ---------- */
.cal{border:1px solid var(--line); border-radius:3px; background:var(--surface-2); padding:16px; max-width:430px}
.cal-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.cal-month{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-on-dark);
}
.cal-nav{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  width:32px; height:32px; border-radius:3px; cursor:pointer; font-size:14px;
}
.cal-nav:hover:not(:disabled){color:var(--amber); border-color:var(--amber-deep)}
.cal-nav:disabled{opacity:.3; cursor:not-allowed}
.cal-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px;
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint); text-align:center;
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-day{
  aspect-ratio:1; display:grid; place-items:center; border-radius:3px;
  background:transparent; border:1px solid transparent; color:var(--text-on-dark);
  font-size:13px; font-variant-numeric:tabular-nums; cursor:pointer;
}
.cal-day:hover:not(:disabled){border-color:var(--amber-deep)}
.cal-day:disabled{color:var(--text-faint); opacity:.35; cursor:not-allowed}
.cal-day.today{border-color:var(--line); font-weight:600}
.cal-day.sel{background:var(--amber); color:#0E1014; font-weight:600; border-color:var(--amber)}
.cal-day.blank{cursor:default; pointer-events:none}

.when-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px}
.when-row .field{flex:1 1 190px}

/* ---------- fields ---------- */
.field{display:block; margin-top:16px}
.field-label{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:7px;
}
.field-label .opt{color:var(--text-faint); letter-spacing:.06em; text-transform:none}
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-deep); color:var(--text-on-dark);
  border:1px solid var(--line); border-radius:3px; padding:12px 13px;
  font-family:var(--font-body); font-size:15px; line-height:1.5;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--amber);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 18px}

.submit-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:26px}
button.btn{font-family:var(--font-body); cursor:pointer}
button.btn:disabled{opacity:.5; cursor:not-allowed; filter:none}

/* ---------- confirmation ---------- */
.done{
  margin-top:38px; padding:40px 30px; border:1px solid var(--amber-deep);
  border-radius:4px; background:var(--surface);
}
.done h2{font-size:clamp(1.5rem,3.4vw,2.3rem); margin-top:16px; color:var(--amber)}
.done .btn{margin-top:24px}

/* ---------- map ---------- */
.map-wrap{
  margin-top:34px; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface-2);
}
#map{height:420px; width:100%; background:var(--surface-2)}
.leaflet-container{background:var(--surface-2) !important; font-family:var(--font-body) !important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--surface) !important; color:var(--text-on-dark) !important;
  border:1px solid var(--line-warm) !important; border-radius:3px !important;
}
.leaflet-popup-content{margin:12px 14px !important; font-size:13px !important}
.leaflet-popup-content b{font-size:14px}
.leaflet-popup-content .mono{
  display:block; margin-top:5px; font-family:var(--font-mono);
  font-size:11px; color:var(--text-dim);
}
.leaflet-popup-content a{color:var(--amber)}
.leaflet-control-attribution{
  background:rgba(8,9,12,.8) !important; color:var(--text-faint) !important; font-size:9px !important;
}
.leaflet-control-attribution a{color:var(--text-dim) !important}
.map-pin{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--amber); color:#0E1014; font-family:var(--font-display);
  font-size:12px; border:2px solid #0E1014; box-shadow:0 3px 10px rgba(0,0,0,.6);
}

@media (max-width:700px){
  .page{padding-top:104px}
  .panel{padding:20px 17px}
  .cal{max-width:100%}
  #map{height:320px}
}

/* iOS standalone: keep content clear of the notch and home indicator */
@supports (padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .site-footer{padding-bottom:max(64px, calc(40px + env(safe-area-inset-bottom)))}
}

/* ---------- client portal ---------- */
.acct-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:34px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.acct-row .btn{margin-left:auto}
.acct-name{font-size:16px; font-weight:600}
.acct-mail{font-size:11.5px; color:var(--text-dim); margin-top:3px}

h2.sub{
  font-size:clamp(1.1rem,2.2vw,1.5rem); margin:44px 0 16px;
  color:var(--text-on-dark);
}
.booking-list{display:flex; flex-direction:column; gap:12px}

.bcard{
  display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:18px 20px;
}
.bcard-main{flex:1 1 260px; min-width:0}
.bcard-room{font-size:15px; font-weight:600; letter-spacing:-.01em}
.bcard-when{font-size:11.5px; color:var(--amber); margin-top:5px; letter-spacing:.05em}
.bcard-studio{font-size:11px; color:var(--text-dim); margin-top:4px}
.bcard-eng{font-size:11px; color:var(--text-dim); margin-top:6px}
.bcard-eng b{color:var(--text-on-dark); font-weight:600}
.bcard-notes{
  margin-top:10px; font-size:13px; color:var(--text-dim);
  font-weight:300; line-height:1.6;
}
.bcard-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  margin-left:auto;
}
.btn.small{padding:9px 15px; font-size:12.5px}

.pill{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:4px 10px; border-radius:2px;
  border:1px solid var(--line); color:var(--text-dim); white-space:nowrap;
}
.pill.confirmed{border-color:var(--amber-deep); color:var(--amber)}
.pill.pending{border-color:#4A4128; color:#C9A063}
.pill.cancelled{border-color:#4A2A28; color:#E5796B}
.pill.completed{border-color:var(--line); color:var(--text-faint)}

@media (max-width:640px){
  .bcard-side{align-items:flex-start; margin-left:0; flex-direction:row; width:100%}
}