/* Deposition page. Everything else comes from city.css -- this only adds the
   three things that page needs and no other page has: the hero fact strip, the
   rate table, and the booking form. */

.heroside{display:flex;flex-direction:column;gap:.9rem}
.fact{border-left:3px solid var(--accent);padding:.15rem 0 .15rem .9rem}
.fact b{display:block;font-family:var(--fd);font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.fact span{display:block;font-size:.82rem;color:var(--mut);margin-top:.2rem}

/* Rates. ⚠️ Wrapped in its own scroll container -- a table is the one element
   that will push a phone layout sideways if left to its own devices. */
.rates{width:100%;border-collapse:collapse;margin:.4rem 0 1.2rem;display:block;overflow-x:auto}
.rates tr{border-bottom:1px solid var(--line)}
.rates th{text-align:left;font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);font-weight:400;padding:.85rem 1.2rem .85rem 0;
  vertical-align:top;white-space:nowrap}
.rates td{padding:.85rem 0;font-size:.95rem}
.rates td b{font-family:var(--fd);font-size:1.05rem}

.depoform{margin-top:.5rem;max-width:760px}
.depoform .row{display:flex;gap:1rem;flex-wrap:wrap}
.depoform label{flex:1 1 240px;display:block;margin-bottom:.9rem;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.depoform label.full{flex-basis:100%}
.depoform input,.depoform select,.depoform textarea{
  display:block;width:100%;margin-top:.4rem;padding:.6rem .7rem;
  font-family:var(--fb);font-size:.95rem;letter-spacing:normal;text-transform:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:3px}
.depoform input:focus,.depoform select:focus,.depoform textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.depoform textarea{resize:vertical}
.depoform .actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
/* The button is city.css's .btn.solid -- redefining it here would be a cascade
   collision for no gain, and the site should have one button. */
.depoform .hint{font-family:var(--fm);font-size:.7rem;color:var(--accent)}

.fallback{margin-top:1rem;display:none}
.fallback[open],.fallback.show{display:block}
.fallback summary{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);cursor:pointer}
.fallback pre{white-space:pre-wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:3px;padding:1rem;font-size:.85rem;margin-top:.7rem;overflow-x:auto}

@media(max-width:800px){
  .heroside{flex-direction:row;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem}
  .fact{flex:1 1 150px}
  .rates th{white-space:normal}
}