/* =================================================================
   LOCAL FONTS — commented out until the files are in assets/fonts/.
   See assets/fonts/README.txt. Uncommenting this block with the files
   missing is harmless: the browser skips a face it cannot fetch.
   =================================================================
@font-face{font-family:'Jost';src:url('fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Serif Gujarati';src:url('fonts/noto-gujarati-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Gujarati';src:url('fonts/noto-sans-gujarati-400.woff2') format('woff2');font-weight:400;font-display:swap}
   ================================================================= */

/* pale bar = money falling due, solid = money received */
.trend-bars .due{background:rgba(169,134,63,.45)}

/* a second, darker bar inside a kpi track, for "of which" comparisons */
.kpi-track{position:relative}
.kpi-track b{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:99px;display:block}

/* ---------------- the search box in the masthead ---------------- */
.topsearch{flex:1 1 180px;min-width:0;max-width:280px}
.topsearch input{
  width:100%;min-height:40px;padding:8px 12px;font-size:14px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:999px;color:var(--cream);
}
.topsearch input::placeholder{color:rgba(244,239,228,.5)}
.topsearch input:focus{outline:2px solid var(--gold);outline-offset:1px;background:rgba(255,255,255,.12)}
@media (max-width:719px){
  .topsearch{order:9;flex:1 1 100%;max-width:none;margin-top:8px}
  .topsearch input{min-height:46px;font-size:16px}
}

/* The Karmvir Group — CRM layer.
   style.css sets the palette and the form controls. This file only adds
   what the sales side needs: a scrolling tab bar, data cards that fold
   into tables on a wide screen, and the printed stationery. */

/* ---------------- tab bar that scrolls on a phone ----------------
   Ten sections do not fit across a phone. The strip scrolls sideways,
   which only works if people can tell that it does — so the right edge
   fades out while there is more to reach, and the tab you are on is
   scrolled into view on load. min-width:0 is what stops a long strip
   from widening the whole page instead of scrolling inside itself. */
.tabs-wrap{position:relative;background:rgba(35,33,30,.94);border-bottom:1px solid var(--line)}
.tabs-wrap::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(to right,rgba(35,33,30,0),rgba(35,33,30,.96));
  opacity:1;transition:opacity .2s;
}
.tabs-wrap.at-end::after{opacity:0}
.tabs{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex-wrap:nowrap;
  min-width:0;max-width:100%;
  border-bottom:none;background:transparent;
  scroll-behavior:smooth;
}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:13px 15px;white-space:nowrap}

/* ---------------- buttons that sit on the dark page ----------------
   .sheet is a light card, but the page behind it is charcoal — body is
   var(--ink), which is why .page-head h1 is cream. A button dropped
   straight onto the page rather than into a sheet is therefore on a dark
   surface, and both defaults break there: the secondary is ink text on
   transparent, so it vanishes into the background, and the ink-filled
   primary loses its edges against an identical ink page.

   Only two containers do this — the .head-row at the top of a page and
   the .print-bar above a printed sheet — so the inverse treatment is
   scoped to them rather than applied to .btn everywhere.

   Order matters below: every one of these also carries .btn, so the
   plain rule comes first and the variants override it in turn. */
.head-row > .btn,
.print-bar > .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.head-row > .btn:hover,
.print-bar > .btn:hover{background:#E6C583;border-color:#E6C583;color:var(--ink)}
.head-row > .btn-ghost,
.print-bar > .btn-ghost{background:transparent;color:var(--cream);border-color:rgba(217,180,108,.45)}
.head-row > .btn-ghost:hover,
.print-bar > .btn-ghost:hover{background:rgba(217,180,108,.16);color:var(--gold);border-color:var(--gold)}
.head-row > .btn-out,
.print-bar > .btn-out{background:var(--maroon);border-color:var(--maroon);color:#fff}
.head-row > .wa-btn,
.print-bar > .wa-btn{background:#1B7D45;border-color:#1B7D45;color:#fff}

/* ---------------- link-buttons keep their own colour ----------------
   An <a class="btn"> sitting inside a block that styles bare anchors —
   .flash a, for one — loses its label, because `.flash a` is a more
   specific selector than `.btn-ghost` and quietly repaints the text.
   On a bordered button that leaves an outline with nothing in it.
   Naming the tag here matches that specificity and, coming later,
   wins. The double selector covers anything nested deeper. */
a.btn,.flash a.btn{color:var(--gold)}
a.btn-ghost,.flash a.btn-ghost{color:var(--ink)}
a.btn-out,.flash a.btn-out,
a.wa-btn,.flash a.wa-btn,
a.btn-wa,.flash a.btn-wa{color:#fff}   /* btn-wa is the log book's own green button */
.btn-ghost:hover{background:var(--cream);border-color:var(--brass)}

/* ---------------- KPI bars ----------------
   Proportions drawn with divs. The figure beside each bar is the real
   answer; the bar is only there so the shape is readable at a glance,
   which is what a dashboard is for. */
.kpi-bar{
  display:flex;width:100%;max-width:100%;min-width:0;height:20px;border-radius:99px;overflow:hidden;
  background:#e3dbc9;margin-bottom:12px;
}
.kpi-bar i{display:block;height:100%;min-width:2px;max-width:100%}
.kpi-bar .kpi-in{background:var(--green)}
.kpi-key{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--muted)}
.kpi-key i{
  width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;
  vertical-align:-1px;
}

.kpi-row{display:flex;align-items:center;max-width:100%;min-width:0;gap:12px;margin-bottom:9px}
.kpi-label{flex:0 0 34%;font-size:13.5px;line-height:1.3}
.kpi-track{flex:1;max-width:100%;height:14px;border-radius:99px;background:#ece5d6;overflow:hidden;min-width:60px}
.kpi-track i,.kpi-track b{display:block;max-width:100%;height:100%;background:var(--brass);border-radius:99px}
.kpi-track .kpi-out{background:var(--maroon)}
.kpi-val{
  flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:13.5px;
  min-width:88px;text-align:right;
}
@media (max-width:719px){
  /* Put the label/value above the track. Three fixed-width flex items
     cannot fit reliably on a 320px phone, especially with large amounts. */
  .kpi-row{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:5px 10px;align-items:end;margin-bottom:14px;
  }
  .kpi-label{grid-column:1;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
  .kpi-val{
    grid-column:2;min-width:0;max-width:48vw;font-size:12.5px;
    line-height:1.3;overflow-wrap:anywhere;
  }
  .kpi-track{grid-column:1/-1;width:100%;min-width:0;height:12px}
}

/* A line where less arrived than was billed. Marked, not hidden — the
   approver should see the shortfall before deciding to pay. */
.short-row{background:rgba(126,44,52,.07)}
.short-row .it-amt{color:var(--maroon)}

/* ---------------- six months of in and out ----------------
   Two bars a month, drawn with nothing but divs — the point is the
   shape of the year, not a figure you could read off an axis, and the
   exact numbers are one tap away on the tiles above. */
.trend{display:flex;gap:10px;align-items:flex-end;height:150px}
.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.trend-bars{
  flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center;
  border-bottom:1px solid var(--rule);
}
.trend-bars i{
  display:block;width:46%;max-width:26px;border-radius:3px 3px 0 0;min-height:2px;
}
.trend-bars .in{background:var(--green)}
.trend-bars .out{background:var(--maroon)}
.trend-col span{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------------- a grid cell holding only a button ----------------
   Bottom-aligning the cell looks right until a neighbour carries help
   text under its input: the row grows, and the button sinks below the
   inputs it is supposed to sit level with. So instead of aligning to the
   bottom of the row, the cell carries an invisible stand-in for the
   label the other cells have, and the button lands exactly where an
   input would. Hidden on a phone, where the grid is one column and
   there is nothing to line up with. */
.f-act{display:flex;flex-direction:column;justify-content:flex-start}
.f-act .lbl{visibility:hidden}
.f-act .btn{width:100%}
@media (max-width:719px){ .f-act .lbl{display:none} }

/* ---------------- two grid widths style.css does not carry ---------------- */
.f-2,.f-5{grid-column:span 12}

/* ---------------- page furniture ---------------- */
.head-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head-row .page-head{margin-bottom:0;flex:1;min-width:220px}
.head-row .btn{flex:none}

.sheet + .sheet{margin-top:18px}
.sheet-head.with-act{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:0}
.sheet-head.with-act > div:first-child{flex:1;min-width:180px}
.sheet-head.with-act .btn{flex:none}

.section-rule{
  margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--rule);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
}
.sheet-body > .section-rule:first-child{margin-top:0}

/* ---------------- summary tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.tile{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;color:var(--cream);text-decoration:none;display:block;
}
.tile b{
  display:block;font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1.1;
  color:var(--gold);font-variant-numeric:tabular-nums;word-break:break-word;
}
.tile span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.6;display:block;margin-top:3px}
.tile small{display:block;font-size:12px;opacity:.55;margin-top:5px}
a.tile:active{border-color:var(--gold)}
.tile-bad b{color:#E28A8A}
.tile-ok b{color:#8FC08A}

/* ---------------- filter bar ---------------- */
.filters{
  padding:14px;background:#f0ebdf;border-bottom:1px solid var(--rule);
  display:grid;gap:10px;grid-template-columns:1fr;
}
.filters label{margin-bottom:4px}
.filters .go{display:flex;gap:8px}
.filters .go .btn{flex:1}
.filters input,.filters select{min-height:46px;padding:11px}

/* ---------------- record cards → ledger rows ---------------- */
.rows{}
.row-card{padding:15px 14px;border-bottom:1px solid var(--rule);display:block;position:relative}
.row-card:last-child{border-bottom:none}
.row-card:nth-child(even){background:rgba(169,134,63,.045)}
.row-top{display:flex;align-items:flex-start;gap:10px}
.row-top .pill{margin-left:auto;flex:none}
.row-title{
  font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.2;
  color:var(--ink);text-decoration:none;display:block;
}
a.row-title{border-bottom:1px solid var(--line)}
.row-sub{font-size:13px;color:var(--muted);display:block;margin-top:1px}
.row-facts{
  display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:14px;color:#5f594f;
}
.row-facts i{font-style:normal;color:#8a8377;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:block}
.row-facts b{font-weight:500;font-variant-numeric:tabular-nums}
.row-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.row-acts .btn,.row-acts form{flex:1;min-width:120px}
.row-acts form{display:flex}
.row-acts form .btn{width:100%}
.wa-drop{position:relative}
.row-acts .wa-drop{flex:1 0 100%}
.wa-drop > summary{list-style:none;width:100%;cursor:pointer}
.wa-drop > summary::-webkit-details-marker{display:none}
.wa-drop > div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.wa-drop > div .btn{flex:1;min-width:140px}
.wa-drop > div form{flex:1;min-width:140px;display:flex}
.wa-drop > div form .btn{width:100%}

/* money, always right-aligned and always tabular */
.amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.amt-big{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--ink)}
.right{text-align:right}

/* ---------------- status pills ---------------- */
.pill-ok{color:var(--green);border-color:rgba(79,122,74,.45);background:rgba(79,122,74,.1)}
.pill-warn{color:#8a6516;border-color:rgba(169,134,63,.5);background:rgba(217,180,108,.16)}
.pill-bad{color:var(--maroon);border-color:rgba(126,44,52,.4);background:rgba(126,44,52,.08)}
.pill-mute{color:var(--muted);border-color:#cfc7b6;background:#f1ece1}

/* ---------------- plain data table (units, schedule) ---------------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl th{
  text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--ink);white-space:nowrap;
}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tbody tr:nth-child(even){background:rgba(169,134,63,.045)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{padding:12px;border-top:2px solid var(--ink);font-weight:500;background:#f0ebdf}
.tbl input,.tbl select{min-height:40px;padding:8px 10px;font-size:14px}

/* ---------------- unit grid ---------------- */
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.unit{
  border:1px solid #d5cec0;border-radius:var(--r);background:#fff;padding:9px 8px;
  text-align:center;text-decoration:none;color:var(--ink);display:block;
}
.unit b{display:block;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.unit span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.unit-available{border-color:rgba(79,122,74,.5);background:rgba(79,122,74,.07)}
.unit-hold{border-color:var(--brass);background:rgba(217,180,108,.18)}
.unit-booked{border-color:var(--brass);background:rgba(217,180,108,.3)}
.unit-sold{border-color:#c6bda9;background:#e9e3d4;color:var(--muted)}
.unit-cancelled{border-color:rgba(126,44,52,.4);background:rgba(126,44,52,.08)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:13px;height:13px;border-radius:3px;border:1px solid #d5cec0;display:inline-block}

/* ---------------- galleries and file chips ---------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.gallery figure{margin:0;position:relative}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  border:1px solid #d5cec0;background:#efe9dd;display:block;
}
.gallery figcaption{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.gallery .kill{
  position:absolute;top:5px;right:5px;width:28px;height:28px;min-height:0;padding:0;
  border-radius:50%;font-size:15px;line-height:1;background:rgba(35,33,30,.86);
  border:none;color:var(--gold);cursor:pointer;
}

.filelist{display:grid;gap:8px}
.filechip{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border:1px solid #d5cec0;border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink);
}
.filechip .ico{
  width:34px;height:34px;flex:none;border-radius:var(--r);background:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:10px;
  letter-spacing:.06em;color:var(--brass);border:1px solid var(--line);
}
.filechip b{font-weight:400;font-size:14.5px;display:block;line-height:1.3;word-break:break-word}
.filechip small{color:var(--muted);font-size:11.5px}
.filechip .grow{flex:1;min-width:0}

/* the file input, dressed up */
.drop{
  border:1px dashed var(--brass);border-radius:var(--r);background:rgba(169,134,63,.07);
  padding:14px;text-align:center;
}
.drop input[type=file]{
  border:none;background:transparent;padding:0;min-height:0;font-size:14px;
  width:100%;text-align:center;
}
.drop p{margin:0 0 8px;font-size:13px;color:var(--muted)}

/* ---------------- instalment builder ---------------- */
.plan-rows{display:grid;gap:8px}
.plan-row{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;border:1px solid #e0d9c9;border-radius:var(--r);background:#fff}
.plan-row .kill{background:transparent;border:1px solid #d5cec0;color:var(--maroon);border-radius:var(--r);min-height:44px;cursor:pointer;font:inherit;font-size:12px}

/* ---------------- customer / booking summary strip ---------------- */
.summary{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  padding:15px;background:var(--cream);border-bottom:1px solid var(--rule);
}
.summary div small{
  display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a8377;margin-bottom:2px;
}
.summary div b{font-weight:400;font-size:15.5px;font-variant-numeric:tabular-nums;word-break:break-word}

/* progress bar for collections */
.bar{
  display:block;width:100%;max-width:100%;min-width:0;height:7px;
  border-radius:99px;background:#e3dbc9;overflow:hidden;margin-top:8px;
}
.bar i{display:block;max-width:100%;height:100%;background:var(--brass)}
.bar-ok i{background:var(--green)}

/* ---------------- little bits ---------------- */
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.inline-form > *{flex:1;min-width:130px}
.inline-form .btn{flex:0 0 auto}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.stack{display:grid;gap:14px}
.chips-sm label{font-size:13px;padding:9px 13px;min-height:40px}
.tag{
  display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--line);border-radius:999px;padding:3px 9px;
}
.wa-btn{background:#1B7D45;border-color:#1B7D45;color:#fff}
.wa-btn:active{background:#155F34}

/* The "this is a sales lead" tick-box on the visitor form. Made a panel
   rather than a bare checkbox because it is a decision, not a detail —
   and because the whole panel is then the tap target. */
.leadbox{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px;
  border:1px dashed var(--brass);background:rgba(169,134,63,.07);
  border-radius:var(--r);padding:14px;margin:0;
}
.leadbox input{width:24px;height:24px;flex:none;margin:1px 0 0}
.leadbox b{display:block;font-weight:400;font-size:15.5px;margin-bottom:2px}
.leadbox span{font-size:12.5px;color:var(--muted);line-height:1.5}
.leadbox:has(input:checked){background:rgba(79,122,74,.09);border-style:solid;border-color:var(--green)}

/* A bare checkbox in a table cell is a 13px target. Wrapping it in a
   label that fills the cell means the whole cell toggles it, on a phone
   and with a mouse, and it costs nothing in markup. */
.tickcell label{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;cursor:pointer;margin:0;
}
.warnbox{
  border-left:3px solid var(--maroon);background:rgba(126,44,52,.06);
  padding:12px 14px;border-radius:var(--r);font-size:14px;margin-bottom:14px;
}
.okbox{
  border-left:3px solid var(--green);background:rgba(79,122,74,.08);
  padding:12px 14px;border-radius:var(--r);font-size:14px;margin-bottom:14px;
}

/* Quick receipt: large tap targets and an inline search result list make the
   customer → booking path practical with one hand on a phone. */
.quick-receipt-form,.quick-receipt-success{max-width:900px;margin-left:auto;margin-right:auto}
.quick-customer-search{position:relative}
.lookup-results{
  display:grid;gap:1px;margin-top:6px;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--paper);box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.lookup-choice{
  width:100%;min-height:56px;padding:10px 13px;border:0;border-bottom:1px solid var(--rule);
  background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.lookup-choice:last-child{border-bottom:0}
.lookup-choice:active,.lookup-choice:focus{background:#f4eddd;outline:none}
.lookup-choice b{display:block;font-weight:500}
.lookup-choice span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.quick-booking-summary{
  padding:14px 16px;border:1px solid rgba(79,122,74,.38);border-radius:var(--r);
  background:rgba(79,122,74,.07)
}
.quick-booking-summary b,.quick-booking-summary span{display:block}
.quick-booking-summary span{margin-top:4px;color:#5f6659;font-size:13px}
.receipt-success-amount{
  margin:0 0 14px;font-family:'Cormorant Garamond',serif;font-size:42px;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums
}
.quick-receipt-actions{flex-wrap:wrap}
.quick-receipt-actions .btn{min-width:150px}

/* ---------------- tablet / desktop ---------------- */
@media (min-width:720px){
  .f-2{grid-column:span 2}
  .f-5{grid-column:span 5}
  .tabs{max-width:1120px;margin:0 auto;overflow:visible}
  .tabs-wrap::after{display:none}   /* nothing to scroll once there is room */
  .tiles{grid-template-columns:repeat(4,1fr);gap:14px}
  .filters{padding:18px 24px;grid-template-columns:repeat(4,1fr);align-items:end}
  .filters .go{grid-column:span 4}
  .filters .go .btn{flex:none}
  .summary{grid-template-columns:repeat(4,1fr);padding:18px 24px;gap:18px}
  .plan-row{grid-template-columns:2fr 1fr 1fr auto;align-items:end}
  .row-card{
    display:grid;grid-template-columns:1.5fr 1.2fr 1fr 230px;gap:16px;
    align-items:start;padding:16px 24px;
  }
  .row-card:hover{background:rgba(169,134,63,.11)}
  .row-top{display:block}
  .row-top .pill{margin:6px 0 0}
  .row-facts{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
  .row-acts{margin-top:0;justify-content:flex-end}
  .row-acts .btn,.row-acts form{flex:none;min-width:0}
  .rows-head{
    display:grid;grid-template-columns:1.5fr 1.2fr 1fr 230px;gap:16px;
    padding:12px 24px;border-bottom:1px solid var(--ink);
    font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  }
  .row-card.wide2{grid-template-columns:1.6fr 1.4fr 200px}
  .rows-head.wide2{grid-template-columns:1.6fr 1.4fr 200px}
}
@media (max-width:719px){ .rows-head{display:none} }

/* =================================================================
   ON A PHONE
   Everything here is about the thumb and about iOS Safari, and none
   of it applies once there is room for a mouse.
   ================================================================= */
@media (max-width:719px){

  /* iOS Safari zooms the whole page the instant you focus a field whose
     text is under 16px, and it does not zoom back out. Every control the
     finger can land in is therefore 16px on a phone, whatever it is on a
     desktop, and 44px tall — the smallest target Apple will call
     reliable. .btn-sm is a compact button, not a small tap target. */
  .tbl input,.tbl select,.tbl textarea,
  .user-acts select,.pw-form input,.inline-edit input,.cam-pick,
  .drop input[type=file]{
    min-height:46px;font-size:16px;padding:10px 12px;
  }
  .btn-sm,.chips-sm label,.inline-edit .btn,.signout button{min-height:44px}

  /* A checkbox is drawn at about 13px by the browser. Scaling the box up
     keeps the native tick — and its accessibility behaviour — while
     giving the finger something it can actually hit. The label around it
     is what carries the full 44px, so the whole cell is the target. */
  .tbl input[type=checkbox],.tbl-stack input[type=checkbox]{
    width:24px;height:24px;min-height:24px;
  }

  /* The remove button on a gallery photo was a 28px dot. A 44px circle
     would swallow a thumbnail, so the visible dot stays small and an
     invisible ::after pad carries the target out to 46px. */
  .gallery .kill{width:38px;height:38px;font-size:19px}
  .gallery .kill::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px}

  /* The rights table on the staff screen carries a 520px floor and had
     no scroller around it, so it pushed the whole page sideways.
     Inherited from the log book, but it is broken on a phone either way. */
  .rights{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---- tables that are worked in, rather than read ----
     A ledger can scroll sideways; nobody minds. A table you type into is
     different — horizontal scrolling while editing is miserable, so
     these fold into one card per row, with the column heading carried
     down as a label beside each field. */
  .tbl-stack{min-width:0;display:block}
  .tbl-stack thead{display:none}
  .tbl-stack tbody,.tbl-stack tfoot{display:block}
  .tbl-stack tbody tr{
    display:block;background:#fff;border:1px solid #e0d9c9;
    border-radius:var(--r);padding:10px 12px;margin-bottom:10px;
  }
  .tbl-stack tbody tr:nth-child(even){background:#fff}
  .tbl-stack td{
    display:flex;align-items:center;gap:12px;
    border:none;padding:5px 0;text-align:left;
  }
  .tbl-stack td::before{
    content:attr(data-label);flex:0 0 40%;
    font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);line-height:1.3;
  }
  .tbl-stack td[data-label='']{padding-top:9px}
  .tbl-stack td[data-label='']::before{display:none}
  .tbl-stack td.num{text-align:left}
  .tbl-stack td > *{flex:1;min-width:0}
  .tbl-stack td > .btn{flex:1}
  .tbl-stack tfoot tr{display:block;padding:10px 12px;border-top:2px solid var(--ink)}
  .tbl-stack tfoot td{display:flex;justify-content:space-between;padding:3px 0}
  .tbl-stack tfoot td[colspan]::before{content:attr(data-label)}
}

/* =================================================================
   THE + BUTTON
   A phone is used standing up, one-handed, usually to start something
   rather than to read. This puts the four things worth starting within
   thumb reach. It never appears on a wider screen, where those actions
   are already buttons on the page.
   ================================================================= */
.fab-wrap,.fab-scrim{display:none}

@media (max-width:719px){
  .has-fab .wrap{padding-bottom:96px}     /* nothing hides under the button */

  .fab-wrap{
    display:block;position:fixed;z-index:40;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .fab{
    width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
    text-decoration:none;padding:0;
    background:var(--gold);color:var(--ink);
    font-size:34px;line-height:1;font-family:inherit;
    box-shadow:0 8px 22px rgba(0,0,0,.42);
    display:flex;align-items:center;justify-content:center;
    transition:transform .18s ease;
  }
  .fab span{display:block;margin-top:-3px}
  .fab[aria-expanded="true"]{transform:rotate(45deg)}

  /* The menu opens upward, because the thumb is at the bottom. */
  .fab-menu{
    position:absolute;right:0;bottom:72px;
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  }
  .fab-item{
    display:block;text-decoration:none;text-align:right;color:var(--gold);
    background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
    padding:11px 15px;min-width:190px;min-height:52px;
    box-shadow:0 6px 18px rgba(0,0,0,.38);
  }
  .fab-item b{display:block;color:var(--gold);font-weight:400;font-size:15.5px;line-height:1.25}
  .fab-item span{display:block;color:#b3ab9c;font-size:11.5px;margin-top:1px}
  .fab-item:active{border-color:var(--gold)}

  /* Dimming the page makes it obvious a tap anywhere closes the menu. */
  .fab-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(20,18,16,.5)}
  .fab-scrim[hidden],.fab-menu[hidden]{display:none}

  /* A sticky save bar and a floating button want the same corner. The
     save bar is the one the person is looking at, so the + gets out of
     the way while it is on screen. */
  .fab-wrap.stand-back{opacity:0;pointer-events:none;transform:translateY(8px)}
  .fab-wrap{transition:opacity .15s ease,transform .15s ease}
}

/* ---------------- Gujarati ----------------
   The interface fonts carry no Gujarati glyphs, so anything in the
   language has to say so. Setting lang="gu" as well as the class lets
   the browser shape conjuncts properly and lets a PDF export embed the
   right font — a deed printed with fallback glyphs is not usable. */
.gu{font-family:'Noto Sans Gujarati',sans-serif}
.paper .gu,.paper.gu{font-family:'Noto Serif Gujarati',serif;line-height:1.9}
.paper.gu .doc-title b{font-family:'Noto Serif Gujarati',serif}
textarea.deed-edit{font-size:16px;line-height:1.8;min-height:340px}   /* 16px or iOS zooms on focus */
textarea.deed-edit.gu{font-family:'Noto Sans Gujarati',sans-serif}

/* The body of a legal paper: generous leading, and paragraphs that do
   not break across a page mid-clause. */
.deed-body{font-size:14px;line-height:1.85;text-align:justify}
.deed-body p{margin:0 0 13px}
.paper.gu .deed-body{font-size:15px}

/* A merge field that could not be filled must be impossible to miss. */
.merge-blank{border-bottom:1px solid #999;color:#999}
.merge-miss{background:#ffe9e9;color:#7E2C34;border:1px solid #e2b6b6;border-radius:3px;padding:0 4px;font-size:.9em}

/* =================================================================
   PRINTED STATIONERY — receipts, booking letters, schedules.
   These pages open on screen looking like the paper they become.
   ================================================================= */
.paper{
  background:#fff;color:#1a1a1a;max-width:820px;margin:0 auto;
  padding:34px 30px 40px;border-radius:var(--r);box-shadow:var(--shadow);
  font-size:14px;line-height:1.55;font-family:Arial,Helvetica,sans-serif;
}
.paper h1,.paper h2,.paper h3{font-family:'Times New Roman',Times,serif;color:#1a1a1a}
.doc-head{border-bottom:2px solid var(--brass);padding-bottom:16px}
.dh-row{width:100%;border-collapse:collapse;table-layout:fixed}
.dh-row td{vertical-align:middle;padding:0}
.dh-logo{width:210px;padding-right:24px}
.doc-head img{height:62px;width:auto}
.doc-head .org b{display:block;font-family:'Times New Roman',Times,serif;font-size:26px;line-height:1.25}
.doc-head .org small{display:block;font-size:14px;color:#555;margin-top:6px;line-height:1.5}
.doc-title{
  text-align:center;margin:20px 0 18px;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;color:#7a6a44;
}
.doc-title b{
  display:block;font-family:'Times New Roman',Times,serif;font-size:27px;letter-spacing:.02em;
  text-transform:none;color:#1a1a1a;margin-bottom:3px;
}
/* A real table, not flex — booking no. flush left, receipt no. flush
   center, date flush right, always, instead of wherever "space-between"
   happens to land the middle item. */
.doc-meta{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:18px}
.doc-meta td{width:33.33%;vertical-align:top}
.doc-meta .dm-l{text-align:left}
.doc-meta .dm-c{text-align:center}
.doc-meta .dm-r{text-align:right}
.doc-meta b{font-variant-numeric:tabular-nums}

.kv{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:16px}
.kv th{
  text-align:left;width:170px;font-weight:400;color:#666;padding:7px 10px 7px 0;
  vertical-align:top;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.kv td{padding:7px 0;vertical-align:top;border-bottom:1px solid #eee}

.dtbl{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 18px}
.dtbl th{
  text-align:left;background:#f4efe4;border:1px solid #ddd6c5;padding:8px 10px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b5c3a;font-weight:500;
}
.dtbl td{border:1px solid #e6e0d2;padding:8px 10px;vertical-align:top}
.dtbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtbl tfoot td{background:#f4efe4;font-weight:500;border-color:#ddd6c5}

.amount-box{
  border:1px solid var(--brass);background:#faf6ec;border-radius:4px;
  padding:14px 16px;margin:16px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;align-items:center;
}
.amount-box small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7a6a44}
.amount-box .big{font-family:'Times New Roman',Times,serif;font-size:31px;line-height:1;font-variant-numeric:tabular-nums}
.amount-box .words{flex:1 0 100%;font-size:12.5px;font-style:italic;color:#555;border-top:1px dashed #d9cfae;padding-top:9px}

.terms{margin:0;padding-left:20px;font-size:12.5px;line-height:1.6}
.terms li{margin-bottom:6px}

/* Fixed-width signature lines, floated left/right — not flex:1, which
   stretched each half to ~50% of the page, making the underline far
   longer than an actual signature line should be. */
.signs{width:100%;border-collapse:collapse;margin-top:44px}
.signs td{width:50%;vertical-align:top;font-size:12px;color:#555}
.sig-line{display:inline-block;width:200px;height:0;border-top:1px solid #999;margin-bottom:7px}
.doc-foot{
  clear:both;margin-top:26px;padding-top:12px;border-top:1px solid #e6e0d2;
  font-size:11px;color:#888;text-align:center;line-height:1.5;
}
.print-bar{
  max-width:820px;margin:0 auto 14px;display:flex;gap:10px;flex-wrap:wrap;
}
.print-bar .btn{flex:1;min-width:130px}
.doc-more{flex:1 0 100%;position:relative}
.doc-more > summary{list-style:none;width:100%;cursor:pointer}
.doc-more > summary::-webkit-details-marker{display:none}
.doc-more > div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2)}

@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff !important}
  .masthead,.tabs,.tabs-wrap,.print-bar,.flash,.page-head{display:none !important}
  .fab-wrap,.fab-scrim,.fab-menu{display:none !important}   /* never on paper */
  .wrap{max-width:none;padding:0;margin:0}
  .paper{box-shadow:none;border-radius:0;max-width:none;margin:0;padding:0;font-size:12px}
  .doc-head img{height:54px}
  .dtbl{page-break-inside:auto}
  .dtbl tr{page-break-inside:avoid}
  .terms,.signs{page-break-inside:avoid}
  .deed-body p{page-break-inside:avoid}
  .merge-miss{background:#ffe9e9 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#000;text-decoration:none}
}

/* ---------------- the WhatsApp picker on a customer row ----------------
   A <details> rather than a script: it opens on a tap, closes on the
   next one, and works with the keyboard without anyone writing that. */
.wa-pick{position:relative;display:inline-block}
.wa-pick summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.wa-pick summary::-webkit-details-marker{display:none}
.wa-menu{
  position:absolute;z-index:30;left:0;top:calc(100% + 6px);min-width:250px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 10px 26px rgba(0,0,0,.18);overflow:hidden;
}
.wa-menu a{
  display:block;padding:11px 14px;text-decoration:none;
  border-bottom:1px solid var(--rule);min-height:52px;
}
.wa-menu a:last-child{border-bottom:none}
.wa-menu a:hover,.wa-menu a:focus{background:#f3ede1}
.wa-menu b{display:block;font-weight:400;font-size:15px;color:var(--ink)}
.wa-menu span{display:block;font-size:12px;color:#6f6656;margin-top:1px}

/* On a phone the row is narrow, so the menu takes the width it needs
   and opens toward the middle rather than off the edge of the screen. */
@media (max-width:719px){
  .wa-menu{left:auto;right:0;min-width:min(300px,80vw)}
}

/* =================================================================
   SIDE DRAWER
   The sections used to run across the top. On a phone that row either
   wrapped onto two lines or scrolled sideways with half of it off the
   edge — you had to know a tab was there to go looking for it. Down the
   side, every section is visible at once and the page keeps its full
   width for the thing you actually came to read.

   Under 1024px it slides in over the page. Above that it simply stays
   open, because there is room for it and a menu you must open first is
   an extra tap for no reason.
   ================================================================= */

.menu-btn{
  flex:0 0 auto;width:44px;height:44px;margin-right:2px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  cursor:pointer;padding:0;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--gold);border-radius:2px}
.menu-btn:hover{border-color:var(--gold)}

.drawer{
  position:fixed;top:0;left:0;bottom:0;width:262px;z-index:60;
  background:var(--ink-2);border-right:1px solid var(--line);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);transition:transform .22s ease;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.drawer.open{transform:none}

.drawer-head{
  padding:18px 20px 14px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.drawer-head b{
  display:block;font-family:'Cormorant Garamond',serif;font-size:20px;
  font-weight:500;color:var(--gold);line-height:1.2;
}
.drawer-head span{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:3px;
}

.drawer a{
  display:block;padding:13px 20px;min-height:50px;
  color:#cfc7b8;text-decoration:none;font-size:15.5px;
  border-left:3px solid transparent;
}
.drawer a:hover,.drawer a:focus{background:rgba(217,180,108,.10);color:var(--gold)}
.drawer a.on{
  background:rgba(217,180,108,.16);color:var(--gold);border-left-color:var(--gold);
}

.drawer-scrim{
  position:fixed;inset:0;z-index:59;background:rgba(20,18,16,.55);
}
.drawer-scrim[hidden]{display:none}

/* Wide enough to keep it open all the time. */
@media (min-width:1024px){
  .menu-btn{display:none}
  .drawer{transform:none;z-index:20;padding-top:0}
  .drawer-scrim{display:none !important}
  .has-drawer .masthead-in{padding-left:calc(262px + 22px)}
  .has-drawer .wrap{margin-left:262px}
}

/* The old tab strip is gone; nothing should reserve space for it. */
.tabs,.tabs-wrap{display:none !important}

@media print{
  .drawer,.drawer-scrim,.menu-btn{display:none !important}
  .has-drawer .wrap,.has-drawer .masthead-in{margin-left:0 !important;padding-left:0 !important}
}

/* ---------------- the portal footer ----------------
   The company's name, address and how to reach them, on every page of
   the portal. A buyer looking at a balance should not have to hunt for
   the phone number. */
.portal-foot{
  margin-top:34px;border-top:1px solid var(--rule);
  background:var(--ink-2);color:#b3ab9c;
}
.portal-foot-in{
  max-width:var(--page);margin:0 auto;
  padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  display:grid;gap:16px 34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  font-size:13.5px;line-height:1.7;
}
.portal-foot b{
  display:block;color:var(--gold);font-family:'Cormorant Garamond',serif;
  font-size:19px;font-weight:500;margin-bottom:3px;
}
.portal-foot span{display:block}
.portal-foot a{color:#cfc7b8;text-decoration:none;border-bottom:1px solid rgba(207,199,184,.35)}
.portal-foot a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.portal-foot-end{font-size:12px;color:#8d8577}

/* The button must not sit on top of the footer's last line. */
.has-fab .portal-foot-in{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:720px){
  .has-fab .portal-foot-in{padding-bottom:22px}
}

@media print{ .portal-foot{display:none} }

/* =================================================================
   FINANCIAL DASHBOARD
   Three short panels replace the former stack of charts and lists. The
   numbers remain links, so detail is one tap away without living here.
   ================================================================= */
.dashboard-filters{
  border-radius:var(--r);margin-bottom:18px;
  grid-template-columns:minmax(180px,2fr) minmax(170px,1fr) auto;
  align-items:end;
}
.dashboard-filters .go{min-width:90px}
.finance-overview{margin-bottom:18px}
.finance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin-bottom:18px}
.finance-panel{min-width:0}
.finance-panel .sheet-head{padding-bottom:15px;border-bottom:1px solid var(--rule)}
.finance-panel .sheet-head h2{
  margin-top:3px;color:var(--brass);font-size:28px;line-height:1.1;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.finance-kicker{
  display:block;color:var(--muted);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;
}
.money-list{display:grid}
.money-list > a,.money-list > div{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  min-height:54px;padding:11px 16px;border-bottom:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
}
.money-list > a:hover,.money-list > a:focus{background:#f5efe3}
.money-list > :last-child{border-bottom:0}
.money-list span{min-width:0;color:#665f54;font-size:13px}
.money-list b{
  flex:0 1 auto;min-width:0;text-align:right;font-size:14px;font-weight:500;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.money-list .money-total{background:#f1ebdd;border-top:1px solid var(--brass)}
.money-list .money-total span,.money-list .money-total b{color:var(--ink);font-weight:600}
.attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.attention-card{
  display:block;min-width:0;padding:14px 15px;border:1px solid var(--line);
  border-left:3px solid var(--brass);border-radius:var(--r);background:var(--paper);
  color:var(--ink);text-decoration:none;
}
.attention-card span{
  display:block;color:var(--muted);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
}
.attention-card b{
  display:block;margin-top:3px;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.attention-card small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px}
.attention-card.is-urgent{border-left-color:var(--maroon);background:#fff8f6}
.attention-card.is-urgent b{color:var(--maroon)}
.attention-card.is-clear{border-left-color:var(--green)}
.attention-card.is-clear b{color:var(--green)}

@media (max-width:899px){
  .finance-grid{grid-template-columns:1fr}
  .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .dashboard-filters{grid-template-columns:1fr 1fr;padding:12px}
  .dashboard-filters .go{grid-column:1/-1;min-width:0}
  .dashboard-filters .go:empty{display:none}
  .finance-head p{font-size:13px}
  .finance-overview{grid-template-columns:1fr 1fr}
  .finance-overview .tile{padding:13px 11px}
  .finance-overview .tile b{font-size:23px}
  .finance-grid{gap:12px}
  .finance-panel .sheet-head h2{font-size:25px}
  .money-list > a,.money-list > div{min-height:52px;padding:10px 14px}
  .money-list b{font-size:13.5px}
  .attention-grid{grid-template-columns:1fr;gap:9px}
  .attention-card{padding:12px 14px}
}

/* =================================================================
   2026 MOBILE WORKFLOW UPGRADE
   Shared navigation, compact filters, guided forms and readable document
   previews. Print rules remain isolated so the A4 output is unchanged.
   ================================================================= */

.drawer-group{
  display:block;padding:14px 20px 5px;color:#817a6e;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;
}
.drawer-account{margin:18px 16px 0;padding:15px 4px 0;border-top:1px solid var(--line);color:var(--cream)}
.drawer-account b{display:block;font-size:14px;font-weight:400}
.drawer-account span{display:block;color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.drawer-account form{margin-top:10px}
.drawer-account button{
  width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r);
  background:transparent;color:var(--cream);font:inherit;cursor:pointer;
}
.mobile-dock{display:none}

/* Active-filter chips are added by the shared script from non-empty controls. */
.filter-summary{display:none}
.filter-chip{
  display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(169,134,63,.42);background:#faf6ec;color:#6b5c3a;
  font-size:12px;text-decoration:none;
}
.filter-mobile-head{display:none}

/* Guided form stepper. Without JavaScript every panel remains visible. */
.form-stepper{
  display:none;gap:8px;margin:0 0 16px;padding:5px;overflow-x:auto;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:var(--r);
  scrollbar-width:none;
}
.form-stepper::-webkit-scrollbar{display:none}
.form-stepper button{
  flex:1 0 auto;min-height:44px;padding:8px 13px;border:0;border-radius:4px;
  background:transparent;color:#aaa296;font:inherit;font-size:12px;cursor:pointer;
}
.form-stepper button b{display:inline-block;margin-right:6px;color:var(--gold)}
.form-stepper button.on{background:var(--paper);color:var(--ink)}
.form-stepper button.done{color:#9dc198}
.step-actions{display:none}
.booking-review{
  padding:14px 16px;border:1px solid rgba(79,122,74,.4);border-radius:var(--r);
  background:rgba(79,122,74,.07);
}
.booking-review b{display:block;font-weight:500;margin-bottom:4px}
.booking-review span{display:block;color:#5f6659;font-size:13.5px;white-space:pre-line}
.advanced-fields{border:1px solid var(--rule);border-radius:var(--r);background:#f8f4ea}
.advanced-fields > summary{
  min-height:48px;padding:12px 14px;cursor:pointer;list-style:none;color:var(--brass);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.advanced-fields > summary::-webkit-details-marker{display:none}
.advanced-fields > summary::after{content:' +';float:right}
.advanced-fields[open] > summary::after{content:' -'}
.advanced-fields > .grid{padding:4px 14px 14px}

/* Sticky section links on long record screens. */
.record-tabs{
  position:sticky;top:72px;z-index:19;display:flex;gap:4px;overflow-x:auto;
  margin:0 0 14px;padding:6px;background:rgba(35,33,30,.96);
  border:1px solid var(--line);border-radius:var(--r);scrollbar-width:none;
}
.record-tabs::-webkit-scrollbar{display:none}
.record-tabs a{
  flex:0 0 auto;min-height:40px;padding:9px 13px;border-radius:4px;color:#c7c0b4;
  text-decoration:none;font-size:12px;white-space:nowrap;
}
.record-tabs a:hover,.record-tabs a:focus{background:rgba(217,180,108,.12);color:var(--gold)}

@media (max-width:719px){
  /* Keep the masthead one clean row; account and sign-out live in the drawer. */
  .masthead-in{flex-wrap:nowrap;padding:8px 12px}
  .masthead img{height:34px;max-width:142px;object-fit:contain}
  .has-drawer .masthead .clock,.has-drawer .masthead .whoami,.has-drawer .masthead .signout{display:none}
  .topsearch{order:0;margin:0 0 0 auto;flex:1;max-width:190px}
  .topsearch input{min-height:40px;height:40px;padding:7px 11px;font-size:16px}
  .wrap{padding:14px 12px calc(96px + env(safe-area-inset-bottom))}
  .has-fab .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

  .mobile-dock{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    min-height:66px;padding:5px 5px calc(5px + env(safe-area-inset-bottom));
    background:rgba(35,33,30,.98);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.22);
  }
  .mobile-dock a,.mobile-dock button{
    flex:1;min-width:0;min-height:54px;border:0;background:transparent;color:#a9a195;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font:inherit;font-size:9.5px;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  }
  .mobile-dock .on{color:var(--gold)}
  .dock-icon{width:22px;height:18px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}
  [data-page="dashboard"] .dock-icon::before{content:'▦';font-size:18px}
  [data-page="customers"] .dock-icon::before{content:'○○';letter-spacing:-4px;margin-left:-3px}
  [data-page="bookings"] .dock-icon::before{content:'◇';font-size:20px}
  [data-page="payments"] .dock-icon::before{content:'₹';font-size:17px}
  [data-page="more"] .dock-icon::before{content:'•••';letter-spacing:1px}
  .fab-wrap{bottom:calc(78px + env(safe-area-inset-bottom))}
  .actions{bottom:calc(65px + env(safe-area-inset-bottom));padding-bottom:12px}

  /* Inline min-width attributes previously defeated the card conversion. */
  .tbl-stack{min-width:0 !important;width:100% !important}
  .tbl-wrap:has(.tbl-stack){overflow-x:visible}
  .tbl-stack td::before{flex-basis:34%}
  .tbl-stack td[data-label=""]{justify-content:flex-end}
  .tbl-stack td[data-label=""] > form,.tbl-stack td[data-label=""] > .btn{flex:1}

  .row-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 14px}
  .row-facts > div{min-width:0}
  .row-facts b{display:block;overflow-wrap:anywhere}
  .row-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .row-acts .btn,.row-acts form,.row-acts details{min-width:0;width:100%}
  .row-acts summary.btn{width:100%}

  /* Search stays immediate; secondary filters collapse behind one button. */
  .filters{padding:12px}
  .filters.enhanced{display:grid;grid-template-columns:1fr auto;align-items:end}
  .filters.enhanced > div:first-child{display:block;grid-column:1}
  .filters.enhanced > div:not(:first-child){display:none}
  .filters.enhanced.filters-open{grid-template-columns:1fr}
  .filters.enhanced.filters-open > div{display:block}
  .filters.enhanced > .filter-mobile-head{display:flex;grid-column:2;align-items:flex-end}
  .filters-open .filter-mobile-head{grid-column:1;grid-row:auto}
  .filter-mobile-head button{min-height:46px;padding:10px 14px}
  .filter-summary{display:flex;gap:7px;flex-wrap:wrap;padding:0 12px 12px;background:#f0ebdf}
  .filter-summary:empty{display:none}

  .form-stepper{display:flex;position:sticky;top:61px;z-index:18}
  .guided-form.js-guided > .form-step{display:none}
  .guided-form.js-guided > .form-step.on{display:block}
  .guided-form.js-guided .form-step.on{animation:stepIn .16s ease-out}
  .guided-form.js-guided .form-step .actions{display:none}
  .step-actions{
    position:sticky;bottom:calc(65px + env(safe-area-inset-bottom));z-index:17;
    display:flex;gap:9px;margin:14px 0 0;padding:10px;background:var(--paper);
    border:1px solid var(--rule);box-shadow:0 -6px 18px rgba(0,0,0,.12);
  }
  .step-actions .btn{flex:1}
  @keyframes stepIn{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none}}

  .record-tabs{top:61px;margin-left:-2px;margin-right:-2px}

  /* A readable document preview on a phone; @media print below restores A4. */
  .print-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .print-bar .btn{min-width:0;width:100%;padding:10px 8px;letter-spacing:.06em}
  .print-bar .doc-more{grid-column:1/-1}
  .paper{width:100%;max-width:100%;padding:20px 15px 26px;font-size:13px;overflow:hidden}
  .dh-logo{width:150px;padding-right:16px}
  .doc-head img{height:42px;width:auto}
  .doc-head .org b{font-size:20px;overflow-wrap:anywhere}
  .doc-head .org small{font-size:12px;overflow-wrap:anywhere}
  .doc-title{margin:15px 0 13px;letter-spacing:.18em;font-size:10px}
  .doc-title b{font-size:23px}
  .doc-meta{font-size:10.5px}
  .kv th{width:38%;font-size:10px;padding-right:8px}
  .kv td{overflow-wrap:anywhere}
  .amount-box{padding:12px;gap:11px}
  .amount-box .big{font-size:25px}
  .signs{margin-top:36px}
  .signs td{font-size:11px}
  .sig-line{width:140px}
  .doc-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px}
  .doc-table-scroll .dtbl{min-width:610px;margin:0}
  .doc-table-scroll::after{content:'Swipe to see all columns';display:block;color:#8a8377;font-size:10px;text-align:right;padding-top:4px}
  .doc-table-scroll:has(.doc-ledger){overflow:visible}
  .doc-table-scroll:has(.doc-ledger)::after{display:none}
  .doc-ledger{display:block;min-width:0 !important}
  .doc-ledger thead{display:none}
  .doc-ledger tbody,.doc-ledger tfoot{display:block}
  .doc-ledger tbody tr{display:block;border:1px solid #e2dccf;border-radius:4px;padding:8px 10px;margin-bottom:9px}
  .doc-ledger td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;text-align:right}
  .doc-ledger td::before{content:attr(data-label);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#77716a;text-align:left}
  .doc-ledger td[data-label=""]::before{display:none}
  .doc-ledger tfoot tr{display:block;border-top:2px solid var(--brass);padding-top:7px}
  .doc-ledger tfoot td{display:flex;justify-content:space-between;border:0;padding:4px 0}
}

@media (min-width:720px){
  .drawer-account{display:none}
  .form-stepper{max-width:820px}
}

/* A 720px tablet is not wide enough for four ledger columns plus actions.
   Keep the readable card treatment until a true desktop width is available. */
@media (min-width:720px) and (max-width:899px){
  .rows-head{display:none}
  .row-card{display:block;padding:17px 20px}
  .row-top{display:flex}
  .row-top .pill{margin-left:auto}
  .row-facts{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
  .row-acts{justify-content:flex-start;margin-top:12px}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters .go{grid-column:span 2}
}

@media print{
  .mobile-dock,.form-stepper,.step-actions,.record-tabs,.filter-mobile-head,.filter-summary{display:none !important}
  .doc-table-scroll{overflow:visible !important;margin:0 !important}
  .doc-table-scroll::after{display:none !important}
  .doc-table-scroll .dtbl{min-width:0 !important}
  .doc-ledger{display:table !important}
  .doc-ledger thead{display:table-header-group !important}
  .doc-ledger tbody{display:table-row-group !important}
  .doc-ledger tfoot{display:table-footer-group !important}
  .doc-ledger tr{display:table-row !important;border:0 !important;padding:0 !important}
  .doc-ledger td{display:table-cell !important;text-align:inherit}
  .doc-ledger td.num{text-align:right !important}
  .doc-ledger td::before{display:none !important}
}

/* =================================================================
   CUSTOMER PORTAL — public discovery + My Karmvir mobile navigation
   ================================================================= */
.portal-body{min-width:0;overflow-x:hidden}
.portal-body svg{display:block;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.portal-body .masthead-in{max-width:1120px;flex-wrap:nowrap}
.portal-brand{min-width:0}
.portal-body .whoami{margin-left:auto}
.portal-head-login{
  margin-left:auto;padding:8px 14px;border:1px solid rgba(217,180,108,.48);border-radius:999px;
  color:var(--gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.portal-head-login:hover{background:rgba(217,180,108,.12)}

.portal-desktop-nav{display:none;background:rgba(46,43,38,.96);border-bottom:1px solid var(--line)}
.portal-desktop-nav > div{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:0 18px}
.portal-desktop-nav a{
  padding:12px 15px;color:#bdb5a8;text-decoration:none;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:2px solid transparent;
}
.portal-desktop-nav a:hover,.portal-desktop-nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.portal-wrap{max-width:1120px}

.portal-hero{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:18px;
  margin:8px 0 34px;
}
.portal-hero-copy,.portal-login-intro{
  position:relative;overflow:hidden;padding:clamp(28px,5vw,64px);border:1px solid var(--line);
  border-radius:10px;background:
    radial-gradient(circle at 86% 15%,rgba(217,180,108,.18),transparent 34%),
    linear-gradient(145deg,#302d28,#211f1c);color:var(--cream);
}
.portal-hero-copy::after,.portal-login-intro::after{
  content:'';position:absolute;width:280px;height:280px;right:-145px;bottom:-170px;
  border:1px solid rgba(217,180,108,.22);border-radius:50%;box-shadow:0 0 0 42px rgba(217,180,108,.035);
}
.portal-hero .eyebrow,.portal-login-intro .eyebrow{color:var(--gold)}
.portal-hero h1{max-width:700px;margin:8px 0 14px;font-size:clamp(43px,6.2vw,74px);line-height:.94;color:var(--cream)}
.portal-hero-copy > p{max-width:650px;margin:0;color:#c9c2b5;font-size:clamp(15px,2vw,18px)}
.portal-hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.portal-hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.portal-hero-actions .btn svg{width:18px;height:18px}
.portal-hero-actions .btn-ghost{color:var(--cream);border-color:rgba(217,180,108,.45)}
.portal-hero-actions .btn-ghost:hover{background:rgba(217,180,108,.12);color:var(--gold)}
.portal-hero-facts{position:relative;z-index:1;display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.portal-hero-facts span{color:#aaa295;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.portal-hero-facts b{display:block;color:var(--gold);font:600 24px/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:0;text-transform:none}

.portal-account-callout{
  display:flex;flex-direction:column;justify-content:center;padding:28px;border-radius:10px;
  background:var(--paper);box-shadow:var(--shadow);border-top:3px solid var(--gold);
}
.portal-account-icon{
  display:grid;place-items:center;width:58px;height:58px;margin-bottom:20px;border-radius:50%;
  background:var(--ink);color:var(--gold);box-shadow:0 0 0 6px rgba(217,180,108,.15);
}
.portal-account-icon svg{width:28px;height:28px}
.portal-account-callout h2{font-size:34px;line-height:1.05;margin:5px 0 10px}
.portal-account-callout p{color:var(--muted);font-size:14px;margin:0 0 22px}
.portal-text-link{display:block;margin-top:13px;color:var(--brass);font-size:12px;text-align:center}

.portal-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 15px}
.portal-section-head h2{color:var(--cream);font-size:35px;line-height:1}
.portal-section-head .eyebrow{color:var(--gold)}
.portal-section-head > a{display:flex;align-items:center;gap:7px;color:var(--gold);font-size:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.1em}
.portal-section-head > a svg{width:17px;height:17px}
.portal-page-head{margin-top:10px}

.portal-project-list{display:grid;gap:17px}
.portal-project-card{
  display:grid;grid-template-columns:minmax(260px,36%) minmax(0,1fr);min-width:0;overflow:hidden;
  background:var(--paper);border:1px solid rgba(217,180,108,.18);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.2);
}
.portal-project-photo{position:relative;min-height:250px;background:#dad3c5;overflow:hidden}
.portal-project-photo > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.portal-project-card:hover .portal-project-photo > img{transform:scale(1.025)}
.portal-project-placeholder{height:100%;min-height:250px;display:grid;place-items:center;align-content:center;gap:10px;background:linear-gradient(145deg,#ebe4d6,#d9d0c1);color:#80776a;font-size:12px}
.portal-project-placeholder img{width:145px;max-width:60%;filter:grayscale(1);opacity:.55}
.portal-project-status{position:absolute;left:13px;top:13px;padding:6px 10px;border-radius:999px;background:rgba(35,33,30,.88);color:var(--gold);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.portal-project-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(20px,4vw,36px)}
.portal-project-kicker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.portal-project-kicker span{padding:4px 8px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;color:var(--brass);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.portal-project-copy h2{font-size:clamp(28px,4vw,40px);line-height:1.05;overflow-wrap:anywhere}
.portal-project-copy > p{margin:10px 0 0;color:var(--muted);font-size:14px}
.portal-project-facts{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.portal-project-facts span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.portal-project-facts b{display:block;color:var(--ink);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.portal-project-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.portal-project-actions .btn{min-width:125px}
.portal-project-card.compact{grid-template-columns:minmax(220px,31%) minmax(0,1fr)}
.portal-project-card.compact .portal-project-photo{min-height:205px}

.portal-login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,440px);gap:18px;align-items:stretch;margin:14px auto 30px;max-width:960px}
.portal-login-intro{display:flex;flex-direction:column;justify-content:center}
.portal-login-intro h1{color:var(--cream);font-size:clamp(48px,7vw,70px);line-height:1;margin:8px 0 12px}
.portal-login-intro p{color:#c8c0b3;max-width:520px}
.portal-login-intro ul{position:relative;z-index:1;list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;color:#d8d0c3;font-size:13px}
.portal-login-intro li::before{content:'✓';color:var(--gold);margin-right:9px}
.portal-login-card{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.portal-login-actions{position:static!important;display:grid;grid-template-columns:1fr;margin-top:20px;padding:0;background:transparent;box-shadow:none}
.portal-login-help{padding:15px 20px;border-top:1px solid var(--rule);color:var(--muted);font-size:11px;line-height:1.5}

.portal-social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portal-social-card{display:flex;flex-direction:column;min-width:0;padding:24px;background:var(--paper);border-radius:10px;border-top:4px solid var(--brass);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.portal-social-card.fb{border-top-color:#1877f2}.portal-social-card.ig{border-top-color:#c13584}.portal-social-card.yt{border-top-color:#e62117}
.portal-social-mark{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:14px;background:var(--ink);color:var(--gold);font:600 28px/1 'Cormorant Garamond',serif}
.portal-social-card h2{font-size:31px;line-height:1.1;margin:4px 0 8px}.portal-social-card p{margin:0;color:var(--muted);font-size:13.5px}
.portal-social-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto;padding-top:23px}.portal-social-actions .btn{min-width:0;padding-left:12px;padding-right:12px}
.portal-share-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:18px;padding:22px 25px;background:linear-gradient(135deg,#332f2a,#211f1c);border:1px solid var(--line);border-radius:10px;color:var(--cream)}
.portal-share-banner > span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(217,180,108,.13);color:var(--gold)}
.portal-share-banner > span svg{width:24px;height:24px}.portal-share-banner h2{font-size:27px}.portal-share-banner p{margin:0;color:#aca497;font-size:13px}

.portal-mobile-nav{display:none}
.portal-body .summary > div{min-width:0;overflow:hidden}
.portal-body .summary .bar{width:100%!important;max-width:100%!important;overflow:hidden}
.portal-body .summary .bar i{max-width:100%!important}

@media (min-width:720px){
  .portal-desktop-nav{display:block}
}

@media (max-width:719px){
  .portal-body .masthead-in{padding:8px 12px}
  .portal-body .masthead img{height:35px;max-width:150px}
  .portal-body .whoami{display:none}
  .portal-body .signout{margin-left:auto}
  .portal-head-login{padding:7px 10px;font-size:9px}
  .portal-wrap{padding:14px 12px calc(114px + env(safe-area-inset-bottom))}
  .portal-foot-in{padding-bottom:calc(106px + env(safe-area-inset-bottom))}

  .portal-hero{grid-template-columns:1fr;margin-top:2px;margin-bottom:28px}
  .portal-hero-copy,.portal-login-intro{padding:29px 22px}
  .portal-hero h1{font-size:45px}
  .portal-hero-actions{display:grid;grid-template-columns:1fr}
  .portal-hero-actions .btn{width:100%}
  .portal-hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .portal-hero-facts span{font-size:8.5px;line-height:1.35}.portal-hero-facts b{font-size:20px}
  .portal-account-callout{padding:23px}
  .portal-section-head h2{font-size:30px}.portal-section-head > a{font-size:10px}

  .portal-project-card,.portal-project-card.compact{grid-template-columns:1fr}
  .portal-project-photo,.portal-project-card.compact .portal-project-photo{min-height:0;aspect-ratio:16/9}
  .portal-project-placeholder{min-height:0;aspect-ratio:16/9}
  .portal-project-copy{padding:20px}
  .portal-project-copy h2{font-size:31px}
  .portal-project-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .portal-project-actions{display:grid;grid-template-columns:1fr 1fr}
  .portal-project-actions .btn{min-width:0;width:100%;padding-left:8px;padding-right:8px}

  .portal-login-layout{grid-template-columns:1fr;margin-top:2px}
  .portal-login-intro h1{font-size:48px}.portal-login-intro .portal-account-icon{margin-bottom:18px}
  .portal-login-card{width:100%}

  .portal-social-grid{grid-template-columns:1fr}
  .portal-social-card{padding:21px}
  .portal-share-banner{grid-template-columns:auto minmax(0,1fr)}
  .portal-share-banner .btn{grid-column:1/-1;width:100%}

  .portal-mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;height:74px;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));background:rgba(35,33,30,.98);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.28);
  }
  .portal-mobile-nav a{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#9e9689;text-decoration:none;font-size:9px;line-height:1.05;text-align:center;
  }
  .portal-mobile-nav a > span{display:grid;place-items:center;width:28px;height:28px}
  .portal-mobile-nav a svg{width:21px;height:21px}.portal-mobile-nav a b{font-weight:400;white-space:nowrap}
  .portal-mobile-nav a.on{color:var(--gold)}
  .portal-mobile-nav .portal-nav-main{color:var(--gold)}
  .portal-mobile-nav .portal-nav-main > span{
    width:54px;height:54px;margin-top:-24px;border-radius:50%;background:var(--gold);color:var(--ink);
    border:5px solid var(--ink);box-shadow:0 -4px 14px rgba(0,0,0,.32);
  }
  .portal-mobile-nav .portal-nav-main svg{width:25px;height:25px}
  .portal-mobile-nav .portal-nav-main b{margin-top:-5px;font-size:9.5px}

  .portal-body .actions{bottom:calc(74px + env(safe-area-inset-bottom))}
  .portal-body .portal-login-actions{bottom:auto}
}

@media (max-width:380px){
  .portal-mobile-nav a{font-size:8px}.portal-mobile-nav .portal-nav-main b{font-size:8.5px}
  .portal-hero h1{font-size:39px}.portal-hero-copy{padding-left:18px;padding-right:18px}
}

@media print{
  .portal-desktop-nav,.portal-mobile-nav,.portal-share-banner{display:none!important}
  .portal-body .portal-wrap{padding:0!important}
}

/* Admin control for choosing the small, customer-facing unit selection. */
.portal-add-unit-check{padding:8px 10px;min-height:50px}
.portal-add-unit-check input{width:21px;height:21px}
.portal-add-unit-check span span{display:block}
.portal-unit-admin{padding:16px;border:1px solid rgba(169,134,63,.35);border-radius:var(--r);background:#f7f1e5}
.portal-unit-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.portal-unit-admin-head > div > b{display:block;font-weight:500;font-size:16px}
.portal-unit-admin-head > div > span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.portal-picker-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.portal-unit-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:7px;max-height:360px;overflow-y:auto;padding:2px}
.portal-unit-picker input{position:absolute;opacity:0;width:1px;height:1px}
.portal-unit-picker label{
  position:relative;display:block;min-width:0;padding:10px 8px;border:1px solid #cec5b5;border-radius:5px;
  background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;
}
.portal-unit-picker label:hover{border-color:var(--brass);transform:translateY(-1px)}
.portal-unit-picker label b{display:block;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.portal-unit-picker label span{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.portal-unit-picker input:checked + label{background:var(--ink);border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.portal-unit-picker input:checked + label span{color:#c9c0b2}
.portal-unit-picker input:checked + label::after{content:'✓';position:absolute;right:5px;top:3px;color:var(--gold);font-size:10px}
.portal-unit-picker input:focus-visible + label{outline:2px solid var(--brass);outline-offset:2px}
.portal-picker-save{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;padding-top:13px;border-top:1px solid var(--rule)}
.portal-picker-save span{font-size:12px;color:var(--muted)}
.portal-picker-save span b{color:var(--ink);font-size:16px}
.unit.unit-portal{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--gold)}
.unit small{display:block;margin-top:5px;color:var(--green);font-size:8px;letter-spacing:.08em;text-transform:uppercase}

/* Visual availability inside each public project card. */
.portal-units-visual{margin-top:17px;padding-top:14px;border-top:1px solid var(--rule)}
.portal-units-visual-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:9px}
.portal-units-visual-head b{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.portal-units-visual-head span{color:var(--muted);font-size:10px}
.portal-unit-grid-public{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;max-height:260px;overflow-y:auto;padding:1px}
.portal-unit-grid-public a{
  min-width:0;padding:8px 6px;border:1px solid rgba(79,122,74,.38);border-radius:5px;
  background:rgba(79,122,74,.07);color:var(--ink);text-align:center;text-decoration:none;
}
.portal-unit-grid-public a:hover,.portal-unit-grid-public a:focus{border-color:var(--green);background:rgba(79,122,74,.14)}
.portal-unit-grid-public a b{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.portal-unit-grid-public a span{display:block;color:var(--muted);font-size:9.5px;margin-top:1px}
.portal-unit-grid-public .portal-unit-more{background:var(--cream);border-color:var(--brass);color:var(--brass)}

@media (max-width:719px){
  .portal-unit-admin{padding:13px}
  .portal-unit-admin-head{align-items:center}
  .portal-picker-tools{display:grid;grid-template-columns:1fr 1fr}
  .portal-picker-tools .btn{min-width:0;padding:8px 6px}
  .portal-unit-picker{grid-template-columns:repeat(3,minmax(0,1fr));max-height:330px}
  .portal-picker-save{align-items:stretch;flex-direction:column}
  .portal-picker-save .btn{width:100%}
  .portal-unit-grid-public{grid-template-columns:repeat(3,minmax(0,1fr));max-height:240px}
  .portal-units-visual-head{align-items:flex-start;flex-direction:column;gap:1px}
}

@media print{
  .portal-unit-admin,.portal-units-visual{display:none!important}
}