/* =====================================================================
   168 Tower Bridge Road reservations — additions to the CW design system (app.css)
   ===================================================================== */
.tb-logo{display:block;width:100%;height:auto;color:var(--orange)}
.side .brand .logo-full{width:112px}
.side .brand .logo-full .tb-logo{width:112px}
.side .brand .logo-sym{display:none}
.side .brand .logo-sym .tb-logo{width:34px}
.who{margin-top:auto;padding:14px 6px 2px;font-size:11.5px;color:#A9A395;border-top:1px solid rgba(255,255,255,.08)}
.who .nm{color:#E6E1D3;font-weight:500;font-size:12.5px}
.who .linkbtn{color:#A9A395;font-size:11.5px;margin-top:2px}
.who .linkbtn:hover{color:#fff}
.grp{--g:var(--orange);--g-lite:var(--orange)}
.navbadge{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;background:var(--orange);color:#000;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.money{font-variant-numeric:tabular-nums;font-weight:500}
.bad{color:var(--err)}
code{font:12px ui-monospace,Menlo,monospace;background:var(--surface-3);padding:1px 5px;border-radius:4px}

/* ---- sign-in screens ---------------------------------------------------- */
body.authpage{background:var(--black);color:var(--beige)}
.authwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;gap:18px}
.authbrand{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center}
.authbrand .tb-logo{width:132px}
.authbrand b{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-top:8px}
.authbrand span{font-size:12px;color:#A9A395}
.authcard{width:100%;max-width:400px;background:var(--surface);color:var(--ink);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--shadow-lg)}
.authcard h1{font-size:23px;font-weight:300;letter-spacing:-.01em;margin-bottom:16px}
.authcard h1::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--brand);margin-top:10px}
.authfoot{font-size:11.5px;color:#7B766A;margin:0}
.btn.big{height:40px;font-size:14px;border-radius:9px;width:100%}
.btn.big .ico{width:16px;height:16px}
.codein{font-size:26px;letter-spacing:.35em;text-align:center;height:52px;font-variant-numeric:tabular-nums}
.authcard .alert{font-size:12.5px}

/* ---- calendar ------------------------------------------------------------- */
.calsplit{grid-template-columns:minmax(0,1fr) 340px}
.unitseg span{padding:6px 12px;font-size:12.5px;white-space:nowrap}
.calsplit .card-h{flex-wrap:wrap}
.monthnav{display:flex;gap:6px;align-items:center}
.months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.month h3{font-size:17px;font-weight:300;text-align:center;margin:0 0 10px;letter-spacing:-.005em}
.dow,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.dow span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);text-align:center;padding-bottom:4px;font-weight:500}
.day{position:relative;aspect-ratio:1/.9;min-height:42px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font:500 13px var(--font);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;transition:background .1s,border-color .1s}
.day.blank{visibility:hidden}
.day:disabled{cursor:default}
.day.free:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint)}
.day.busy{background:var(--surface-3);color:var(--faint);border-color:transparent}
.day.past{background:transparent;border-color:transparent;color:var(--faint);opacity:.55}
.day.closed{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(112,111,111,.16) 5px 6px);border-color:transparent;color:var(--faint)}
.day.mine{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.day.mine_req{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.day.today .n{box-shadow:0 2px 0 var(--brand);}
.day.out-only{border-style:dashed;border-color:var(--brand);background:var(--surface)}
.day.out-only:hover{background:var(--brand-tint)}
.day.in-range{background:var(--brand-tint);border-color:var(--brand)}
.day.sel,.day.sel:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#000}
.day.ohbusy{cursor:pointer}
.day.ohbusy:hover{border-color:var(--dgrey);color:var(--ink-2)}
.legend-cal{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:14px 0 4px;padding:0;font-size:12px;color:var(--mut)}
.legend-cal li{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line-2)}
.sw.free{background:var(--surface)}.sw.busy{background:var(--surface-3);border-color:transparent}
.sw.mine{background:var(--ok-bg);border-color:var(--ok-line)}.sw.mine_req{background:var(--warn-bg);border-color:var(--warn-line)}
.sw.closed{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(112,111,111,.35) 3px 4px)}

.quote{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:2px 0 12px}
.qrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:2px 0}
.qrow span{color:var(--mut)}
.qrow.total{border-top:1px dashed var(--line-2);margin-top:4px;padding-top:6px}
.qrow.total b{font-size:19px;font-weight:300}
.qerr{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:var(--err)}
.qerr:empty{display:none}
.bumpbox{margin-top:8px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-line);padding:8px 10px;border-radius:8px;color:var(--ink);font-weight:400}
.bumpbox input{margin-top:3px}

/* ---- bookings --------------------------------------------------------------- */
.flushlist{padding:0}
.bk-item{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none!important}
.bk-item:last-child{border-bottom:0}
.bk-item:hover{background:var(--surface-2)}
.bk-main b{display:block;font-weight:500}
.bk-side{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.subh{font-size:12.5px;font-weight:700;margin:18px 0 8px}
.paym{margin-top:8px}
.paym h4{margin:0 0 4px}
.payd{white-space:normal;font-size:13px;line-height:1.5;word-break:break-word}
.payform{margin-top:6px}
.keytext{background:var(--lo-bg);border:1px solid var(--lo-line);border-left:4px solid var(--lo);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.hist{list-style:none;margin:0;padding:0;font-size:13px}
.hist li{display:flex;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.hist li:last-child{border-bottom:0}
.hist .when{flex:none;width:118px;color:var(--mut);font-size:12px}
.approve-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.approve-row input{flex:1 1 220px;min-width:0;height:30px}
.reqitem{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.reqitem:last-child{border-bottom:0}
.reqhead{display:flex;justify-content:space-between;gap:10px}
.copyrow{display:flex;gap:8px;margin-top:8px}
.copyrow input{font-size:12px}
.viewseg a{padding:5px 12px}
.userstable td{padding:6px 10px}
.userstable input:not([type=checkbox]),.userstable select{height:28px;font-size:12.5px}
.userstable tr.off td{opacity:.55}

/* ---- the flat -------------------------------------------------------------------- */
.addr{font-style:normal;font-size:16px;line-height:1.5;font-weight:500}
.prose{font-size:14px;line-height:1.65;max-width:68ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--surface-3)}
.gallery figcaption{font-size:12px;color:var(--mut);margin-top:4px}
.photoadmin{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:10px}
.pa{border:1px solid var(--line);border-radius:10px;padding:8px;display:grid;gap:6px;background:var(--surface-2)}
.pa img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px}
.pa input{height:28px;font-size:12.5px}
.pa-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:10px}
.lightbox img{max-width:min(96vw,1400px);max-height:84vh;border-radius:8px}
.lightbox p{color:#fff;margin:0;font-size:13px}
.lightbox button{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;padding:7px 12px;cursor:pointer}

/* ---- narrow screens ---------------------------------------------------------------- */
@media (max-width:1180px){
  .months{grid-template-columns:minmax(0,1fr)}
  .month.second{display:none}
}
@media (max-width:1000px){
  .calsplit{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .side .brand .logo-full{display:none}
  .side .brand .logo-sym{display:block}
  .who{margin:0 0 0 auto;padding:0 4px;border:0;display:flex;gap:10px;align-items:center;white-space:nowrap;flex:none}
  .who .nm{display:none}
  .who div:nth-child(2){display:none}
  .grp .glabel{display:none}
  .grp{border-left-width:1px}
}
@media (max-width:560px){
  .day{min-height:40px}
  .authcard{padding:22px 18px}
  .hist .when{width:92px}
}