/* Oranco internal portal — standalone, deliberately not the marketing site. */
:root{
  --orange:#F0965B; --orange-600:#E2761F; --orange-tint:#FDF2E9;
  --orange-700:#C25F12;
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B;
  --bg:#FFFFFF; --bg-2:#F5F5F7; --hair:#D2D2D7;
  /* Success and danger. These were referenced all over this file — the Yes/No
     stage buttons, the danger buttons, the import confirmations — and never
     defined, so every one of them has been rendering with no background and
     inherited text colour. Same values the field app has always used, so the
     two surfaces finally agree. */
  --green:#1B7742; --green-bg:#E7F4EC; --red:#C4231A; --red-bg:#FDECEC;
  --r-sm:12px; --r-md:18px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.45; letter-spacing:-.015em; -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
h1,h2{margin:0; font-weight:600; letter-spacing:-.02em}
p{margin:0}
code{font-size:.9em; background:var(--bg-2); padding:1px 5px; border-radius:5px}
.wrap{width:100%; max-width:1024px; margin-inline:auto; padding-inline:22px}

.portal-header{position:sticky; top:0; z-index:10; background:var(--ink); color:#fff}
.portal-header .bar{display:flex; align-items:center; height:52px; gap:14px}
.portal-header img{height:15px; width:auto; filter:brightness(0) invert(1); opacity:.9}
.portal-badge{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  background:var(--orange-600); border-radius:4px; padding:3px 7px;
}
.portal-header nav{display:flex; gap:20px; margin-left:auto; font-size:.82rem}
.portal-header nav a{color:rgba(255,255,255,.66); text-decoration:none}
.portal-header nav a:hover{color:#fff}
.portal-header nav a[aria-current]{color:#fff}
@media (max-width:620px){ .portal-header nav{display:none} }

main{padding:40px 0 80px}
h1{font-size:1.8rem}
.sub{color:var(--ink-2); margin-top:6px; font-size:.97rem}
.notice{
  margin-top:24px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--orange-tint); border-left:3px solid var(--orange-600); font-size:.92rem;
}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:28px}
.card{
  background:var(--bg-2); border-radius:var(--r-md); padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:6px; min-height:136px;
}
.card h2{font-size:1rem}
.card p{font-size:.89rem; color:var(--ink-2)}
.card .stub{
  margin-top:auto; padding-top:10px; border-top:1px dashed var(--hair);
  font-size:.77rem; color:var(--ink-3);
}
footer{border-top:1px solid var(--hair); padding:20px 0 40px; font-size:.78rem; color:var(--ink-3)}

/* ---------- login ---------- */
.login-body{background:var(--bg-2); min-height:100vh; display:flex}
.login-wrap{margin:auto; width:100%; padding:32px 22px}
.login-card{
  background:#fff; border-radius:20px; padding:38px 34px 32px; max-width:400px; margin:0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.08);
}
.login-logo{width:120px; height:auto}
.login-kicker{margin-top:18px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.login-card h1{margin-top:4px; font-size:1.6rem}
.field{margin-top:18px}
.field label{display:block; font-size:.82rem; color:var(--ink-2); margin-bottom:6px}
.field input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--hair);
  font:inherit; background:#fff; transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--orange-600); box-shadow:0 0 0 4px rgba(240,150,91,.2)}
.login-error{
  margin-top:16px; padding:11px 13px; border-radius:10px; font-size:.88rem;
  background:#FDECEC; color:#B3261E; border-left:3px solid #D70015;
}
.btn{
  width:100%; margin-top:22px; padding:13px 20px; border:none; border-radius:980px;
  background:var(--orange-600); color:#fff; font:inherit; font-weight:500; cursor:pointer;
  transition:background .18s;
}
.btn:hover:not(:disabled){background:#C25F12}
.btn:disabled{opacity:.5; cursor:not-allowed}
.login-foot{margin-top:18px; text-align:center; font-size:.78rem; color:var(--ink-3)}

/* ---------- header / tabs ---------- */
.header-right{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:.8rem}
/* Settings hangs off here rather than the tab row: it is a place you go once
   and then rarely, and it was taking a slot beside the work. */
.gear{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
  color:rgba(255,255,255,.62); transition:color .15s, background .15s}
.gear:hover{color:#fff; background:rgba(255,255,255,.12)}
.gear svg{display:block}
.who{color:rgba(255,255,255,.6)}
.signout{color:rgba(255,255,255,.85); text-decoration:none}
.signout:hover{color:#fff; text-decoration:underline}
@media (max-width:560px){ .who{display:none} }

.tabs{background:#fff; border-bottom:1px solid var(--hair); position:sticky; top:52px; z-index:9}
.tabs-row{display:flex; gap:4px; overflow-x:auto}
.tab{
  border:none; background:none; font:inherit; font-size:.88rem; color:var(--ink-2);
  padding:14px 14px 12px; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); font-weight:500; border-bottom-color:var(--orange-600)}

.panel{display:none}
.panel.active{display:block}
main{padding:32px 0 80px}
h1{font-size:1.7rem; font-weight:600}
.sub{color:var(--ink-2); margin-top:4px; font-size:.94rem}
.placeholder-banner{
  margin-bottom:24px; padding:9px 13px; border-radius:8px; font-size:.82rem;
  background:var(--orange-tint); color:#7A4310; border-left:3px solid var(--orange-600);
}

/* ---------- metrics ---------- */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:24px}
.metric{background:var(--bg-2); border-radius:14px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:3px}
.metric.accent{background:var(--ink); color:#fff}
.metric .label{font-size:.78rem; color:var(--ink-2)}
.metric.accent .label{color:rgba(255,255,255,.62)}
.metric .value{font-size:1.75rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.metric .foot{font-size:.75rem; color:var(--ink-3); margin-top:2px}
.metric.accent .foot{color:rgba(255,255,255,.55)}

/* ---------- cards / split ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:16px; margin-top:16px}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.card{background:var(--bg-2); border-radius:16px; padding:20px}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.card-head h2{font-size:1rem}
.card-note{font-size:.78rem; color:var(--ink-3)}

/* ---------- map ---------- */
.map{background:#fff; border-radius:12px; padding:8px}
.map svg{width:100%; height:auto; display:block; aspect-ratio:108/92}
.map-label{font-size:2.6px; fill:#6E6E73; font-family:inherit}
.map-legend{list-style:none; margin:14px 0 0; padding:0; font-size:.83rem}
.map-legend li{display:flex; align-items:center; gap:9px; padding:6px 2px; border-bottom:1px solid rgba(0,0,0,.06)}
.map-legend li:last-child{border-bottom:none}
.map-legend .dot{width:7px; height:7px; border-radius:50%; background:var(--orange-600); flex:none}
.map-legend .nm{flex:1}
.map-legend .ct{color:var(--ink-2)}
.map-legend .rv{color:var(--ink-3); min-width:64px; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- table ---------- */
.table{width:100%; border-collapse:collapse; font-size:.86rem; background:#fff; border-radius:12px; overflow:hidden}
.table th{text-align:left; font-weight:500; color:var(--ink-2); font-size:.78rem; padding:10px 12px; background:#FAFAFB}
.table td{padding:11px 12px; border-top:1px solid rgba(0,0,0,.06); vertical-align:top}
.table td small{display:block; color:var(--ink-3); font-size:.76rem; margin-top:1px}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.pill{font-size:.72rem; padding:3px 8px; border-radius:980px; white-space:nowrap}
.pill.done{background:#E7F4EC; color:#1B7742}
.pill.booked{background:var(--orange-tint); color:#8A4A11}

.stub-box{
  margin-top:22px; padding:26px; border-radius:14px; background:var(--bg-2);
  color:var(--ink-2); font-size:.92rem; text-align:center;
}
/* ---------- sub tabs ---------- */
/* Wraps rather than scrolling out of sight: a tab nobody can see is a
   feature nobody knows exists. */
.subtabs{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px;
  border-bottom:1px solid var(--hair)}
.subtab{
  border:none; background:none; font:inherit; font-size:.86rem; color:var(--ink-2);
  padding:9px 13px; border-radius:8px 8px 0 0; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subtab:hover{color:var(--ink); background:var(--bg-2)}
.subtab[aria-selected="true"]{color:var(--ink); font-weight:500; border-bottom-color:var(--orange-600)}
.subtab .count{
  display:inline-block; margin-left:5px; background:var(--bg-2); color:var(--ink-2);
  border-radius:980px; padding:1px 7px; font-size:.72rem;
}
.subpanel{display:none; margin-top:18px}
.subpanel.active{display:block}
.split.knock{grid-template-columns:1.15fr .85fr}
.card.mt{margin-top:20px}
.form-card{max-width:620px}

/* ---------- map / pins ---------- */
.knock-map{cursor:crosshair}
.knock-map svg{aspect-ratio:108/92}
.map-note{margin-top:10px; font-size:.75rem; color:var(--ink-3)}
.pin path{filter:drop-shadow(0 .4px .6px rgba(0,0,0,.35))}

/* ---------- forms ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }
.checks{display:flex; flex-wrap:wrap; gap:7px}
.check{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:980px;
  background:#fff; border:1px solid var(--hair); font-size:.85rem; cursor:pointer; user-select:none;
}
.check:hover{border-color:var(--ink-3)}
.check input{margin:0; accent-color:var(--orange-600)}
.check:has(input:checked){background:var(--orange-tint); border-color:var(--orange-600)}
.form-actions{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap}
.form-actions .btn{width:auto; margin-top:0; padding:10px 18px; font-size:.88rem}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--hair)}
.btn-ghost:hover:not(:disabled){background:var(--bg-2)}
.btn-plain{background:none; color:var(--ink-2); padding:10px 12px}
.btn-plain:hover:not(:disabled){background:var(--bg-2); color:var(--ink)}
.form-error{
  margin-top:14px; padding:10px 12px; border-radius:9px; font-size:.85rem;
  background:#FDECEC; color:#B3261E; border-left:3px solid #D70015;
}
.form-saved{
  margin-top:14px; padding:10px 12px; border-radius:9px; font-size:.85rem;
  background:#E7F4EC; color:#14603A; border-left:3px solid #1B7742;
}

/* ---------- lists ---------- */
.empty{padding:26px; text-align:center; color:var(--ink-3); font-size:.9rem}
.table .svc{color:var(--ink-2); font-size:.82rem}
.row-actions{text-align:right; white-space:nowrap}
.mini{
  border:1px solid var(--hair); background:#fff; border-radius:7px; padding:4px 9px;
  font:inherit; font-size:.76rem; color:var(--ink); cursor:pointer; margin-left:5px;
}
.mini:hover:not(:disabled){background:var(--bg-2)}
.mini:disabled{opacity:.5; cursor:default}

/* ---------- spreadsheet import ---------- */
.import-help{font-size:.86rem; color:var(--ink-2); margin-bottom:14px; line-height:1.5}
#importFile{
  display:block; width:100%; font:inherit; font-size:.88rem; padding:14px;
  border:1.5px dashed var(--hair); border-radius:12px; background:#fff; cursor:pointer;
}
#importFile:hover{border-color:var(--orange-600); background:var(--orange-tint)}
.import-note{margin:14px 0; font-size:.87rem; color:var(--ink-2)}
.import-note.ok{color:var(--green, #1B7742); font-weight:500}
.import-note.bad{color:#B3261E; font-weight:500}
#importPreview .table{margin-top:6px}
#importPreview .btn{width:auto; margin-top:16px; padding:11px 22px}
.empty-row{text-align:center; color:var(--ink-3); padding:18px !important}
.map-legend em{color:var(--ink-3); font-style:normal; font-size:.9em}

/* ---------- real map ---------- */
.map.gmap{height:420px; padding:0; border-radius:12px; overflow:hidden; background:var(--bg-2)}
.map.gmap > div{height:100%}
.gm-card{font-family:inherit; font-size:.86rem; line-height:1.45; min-width:170px}
.gm-card strong{display:block; margin-bottom:3px}
.gm-card .svc{color:#6E6E73; margin-top:4px}
.gm-card .val{margin-top:6px; font-weight:600}
.city-label{text-shadow:0 1px 3px rgba(0,0,0,.65)}

/* ---------- editable table ---------- */
.edit-table td.cell{cursor:text; position:relative; transition:background .15s}
.edit-table td.cell:hover{background:#FFF6EF}
.edit-table td.cell:focus{outline:2px solid var(--orange-600); outline-offset:-2px}
.edit-table td.cell .blank{color:var(--ink-3)}
.edit-table td.saving{background:#FFF6EF}
.edit-table td.saved{background:#E7F4EC}
.edit-table td.failed{background:#FDECEC}
.cell-input{
  width:100%; font:inherit; font-size:.86rem; padding:4px 6px; margin:-4px -6px;
  border:1px solid var(--orange-600); border-radius:6px; background:#fff;
}
.cell-input:focus{outline:none; box-shadow:0 0 0 3px rgba(240,150,91,.22)}
.table-hint{margin-top:10px; font-size:.78rem; color:var(--ink-3)}

/* ---------- embedded in the field app ----------
   The app supplies its own bar and back button, so the portal's own
   header comes off and the tabs move to the top. */
body.embed .portal-header{display:none}
body.embed .tabs{top:0; border-top:none}
body.embed main{padding-top:0}
body.embed .wrap{padding-left:16px; padding-right:16px}
body.embed .metrics{grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
body.embed .card{overflow-x:auto}
body.embed .table{min-width:520px}

/* ---------- maps ---------- */
.map{min-height:420px}
.map-nokey{
  height:100%; min-height:220px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; text-align:center; padding:28px 20px;
  background:var(--bg-2); border-radius:12px; color:var(--ink-2);
}
.map-nokey strong{color:var(--ink); font-size:.95rem}
.map-nokey span{font-size:.82rem; max-width:34ch; line-height:1.5}
.map-nokey code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em;
  background:#fff; padding:1px 5px; border-radius:5px; border:1px solid var(--hair);
}

/* ---------- calendar ---------- */
.cal-nav{display:flex; align-items:center; gap:8px}
.cal-nav h2{min-width:11ch}
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:14px;
}
.cal-head{
  text-align:center; font-size:.7rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.04em; text-transform:uppercase; padding-bottom:4px;
}
.cal-cell{
  appearance:none; border:1px solid transparent; background:var(--bg-2); font:inherit;
  border-radius:9px; aspect-ratio:1; padding:6px; position:relative; cursor:default;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  color:var(--ink-3);
}
.cal-cell.empty{background:none}
.cal-cell .d{font-size:.78rem; font-variant-numeric:tabular-nums}
.cal-cell.has{background:#fff; color:var(--ink); cursor:pointer; border-color:var(--hair)}
.cal-cell.has:hover{border-color:var(--orange)}
.cal-cell.today .d{
  color:#fff; background:var(--ink); border-radius:50%;
  width:19px; height:19px; display:grid; place-items:center; margin:-2px 0 0 -2px;
}
.cal-cell.picked{border-color:var(--orange-600); box-shadow:inset 0 0 0 1px var(--orange-600)}
.cal-cell .n{
  align-self:flex-end; background:var(--orange-600); color:#fff;
  font-size:.72rem; font-weight:600; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; display:grid; place-items:center;
}
@media (max-width:560px){
  .cal-cell{padding:4px; border-radius:7px}
  .cal-cell .d{font-size:.7rem}
  .cal-cell .n{font-size:.66rem; min-width:16px; height:16px}
}

.stops{list-style:none; margin:14px 0 0; padding:0; counter-reset:stop}
.stops li{
  counter-increment:stop; display:grid; align-items:baseline; gap:2px 10px;
  grid-template-columns:26px 1fr auto; padding:9px 2px;
  border-bottom:1px solid rgba(0,0,0,.06); font-size:.85rem;
}
.stops li:last-child{border-bottom:none}
.stops li::before{
  content:counter(stop); grid-row:1 / span 2; align-self:center;
  width:22px; height:22px; border-radius:50%; background:var(--orange-600); color:#fff;
  font-size:.72rem; font-weight:700; display:grid; place-items:center;
}
.stops .who{font-weight:600}
.stops .amt{font-variant-numeric:tabular-nums; font-weight:600; grid-row:1 / span 2; align-self:center}
.stops .addr, .stops .svc{grid-column:2; color:var(--ink-2); font-size:.78rem}
.stops li.done .who{text-decoration:line-through; color:var(--ink-3)}

/* ---------- serviced toggle ---------- */
.yn{
  appearance:none; border:none; font:inherit; cursor:pointer;
  font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px;
}
.yn.yes{background:var(--green-bg); color:var(--green)}
.yn.no{background:var(--red-bg); color:var(--red)}
.yn:disabled{opacity:.5}

/* ---------- receipt form ---------- */
.rc-summary{
  background:var(--bg-2); border-radius:10px; padding:10px 12px; margin-bottom:14px;
  font-size:.82rem; color:var(--ink-2); line-height:1.55;
}
.field.half{max-width:180px}
.field select{
  width:100%; font:inherit; font-size:.92rem; padding:9px 11px;
  border:1px solid var(--hair); border-radius:9px; background:#fff; color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 8l3-3.5' fill='none' stroke='%236E6E73' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
  padding-right:30px;
}
.field select:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint)}
.form-ok{color:var(--green); font-size:.82rem; margin-top:10px}

/* ---------- calendar: month left, map right ---------- */
.cal-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){ .cal-split{grid-template-columns:1fr} }
.cal-split .map-card{position:sticky; top:104px; display:flex; flex-direction:column; min-height:520px}
.cal-split .map.fill{flex:1; padding:0; border-radius:12px; overflow:hidden; background:var(--bg-2); min-height:0}
.cal-split .map.fill > div{height:100%}
body.embed .cal-split .map-card{position:static}

/* ---------- table toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap}
/* label, not .tool. Every toolbar in this portal wraps its select in a bare
   <label> or <span>, so the styling written for `.tool select` had never once
   applied to any of them and all nine rendered as raw platform selects. */
.toolbar label,
.tool{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-2)}

/* A pop-up button, the way the platform draws one: a hairline rounded rect,
   one hairline of shadow to lift it off the page, and the paired chevrons that
   mean "this opens a menu" rather than the single one that means "this expands
   downward". The menu itself stays native — on a phone that is the system
   picker, which is the right control and not one worth rebuilding. */
.toolbar select, .tool select{
  font:inherit; font-size:.82rem; font-weight:500; padding:6px 27px 6px 11px; color:var(--ink);
  border:1px solid var(--hair); border-radius:8px; background-color:#fff; appearance:none;
  box-shadow:0 1px 1.5px rgba(0,0,0,.05); cursor:pointer; line-height:1.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M3.2 6.6 6 3.8l2.8 2.8M3.2 9.4 6 12.2l2.8-2.8' fill='none' stroke='%23E2761F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:11px 15px;
  transition:border-color .15s, box-shadow .15s;
}
.toolbar select:hover, .tool select:hover{border-color:#BDBDC4}
.toolbar select:focus, .tool select:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint);
}
.tool-count{margin-left:auto; font-size:.78rem; color:var(--ink-3)}

/* ---------- status ---------- */
.yn.off{background:var(--bg-2); color:var(--ink-3); text-decoration:line-through}

/* ---------- destructive row action ---------- */
.mini.danger{color:var(--red)}
.mini.danger:hover{background:var(--red-bg); border-color:var(--red-bg)}

/* ---------- document links in the customer table ---------- */
.docbtn{
  appearance:none; border:1px solid var(--hair); background:#fff; font:inherit;
  font-size:.7rem; font-weight:600; color:var(--ink-2); cursor:pointer;
  padding:3px 8px; border-radius:7px;
}
.docbtn:hover{border-color:var(--orange); color:var(--orange-700)}

/* ---------- fold-away generators ---------- */
.card-head .mini.go{margin-left:auto}
.mini.go.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.drawer{
  border:1px solid var(--hair); border-radius:12px; padding:16px;
  margin:0 0 18px; background:#FCFCFD;
}
.drawer[hidden]{display:none}

/* ---------- status that doubles as a document link ---------- */
.stagepair{display:inline-flex; align-items:center; gap:3px}
.yn.link{cursor:pointer; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.yn.link:hover{filter:brightness(.94)}
.cyc{
  appearance:none; border:none; background:none; cursor:pointer;
  color:var(--ink-3); font-size:.9rem; line-height:1; padding:2px 4px; border-radius:5px;
}
.cyc:hover{background:var(--bg-2); color:var(--ink)}
.stops .timing{grid-column:2; color:var(--orange-700); font-size:.75rem; font-weight:500}

/* The seller picker on the sign-in card. */
.login-card select{
  width:100%; font:inherit; font-size:1rem;
  padding:11px 12px; border:1px solid var(--hair); border-radius:10px;
  background:#fff; color:var(--ink); appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px;
}
.login-card select:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint)}
.field-hint{margin-top:6px; font-size:.78rem; color:var(--ink-3); line-height:1.4}

/* ---- sales analytics ---- */
.funnel{list-style:none; margin:0; padding:0}
.funnel li{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--hair)}
.funnel li:last-child{border-bottom:0}
.funnel .fl{flex:none; width:104px; font-size:.83rem; color:var(--ink-2)}
.funnel .fbar{flex:1; height:8px; border-radius:999px; background:var(--bg-2); overflow:hidden}
.funnel .fbar i{display:block; height:100%; border-radius:999px; background:var(--ink-3)}
.funnel .fbar i.yes{background:var(--green)}
.funnel .fbar i.off{background:var(--orange)}
.funnel .fbar i.no{background:var(--red)}
.funnel .fn{flex:none; width:36px; text-align:right; font-weight:600; font-size:.85rem;
            font-variant-numeric:tabular-nums}
.funnel .fp{flex:none; width:40px; text-align:right; font-size:.78rem; color:var(--ink-3);
            font-variant-numeric:tabular-nums}

/* One bar per day, with the sold share filled in darker inside it. */
.daybars{list-style:none; display:flex; align-items:flex-end; gap:6px;
         height:150px; margin:0; padding:4px 0 0}
.daybars li{flex:1; min-width:0; display:flex; flex-direction:column;
            align-items:center; justify-content:flex-end; height:100%}
/* The bar is the doors; the darker fill inside it is the share that sold.
   The bar used to be --bg-2, which is very nearly the card behind it, so the
   only thing visible was the small sold portion and the chart read as a row of
   stubs however many doors the day actually had. */
.daybars .db{width:100%; max-width:26px; background:var(--orange-tint); border-radius:4px 4px 0 0;
             display:flex; align-items:flex-end; overflow:hidden}
.daybars .db i{display:block; width:100%; background:var(--orange-600); border-radius:4px 4px 0 0}
.daybars .dl{margin-top:6px; font-size:.66rem; color:var(--ink-3); white-space:nowrap}
.daybars .empty-row{flex:1; align-self:center}
tr.muted-row td{color:var(--ink-3)}

/* The hour / day / location switcher in a card head. */
.card-head .seg{display:flex; gap:2px; padding:2px; background:var(--bg-2); border-radius:999px}
.card-head .seg button{
  border:0; background:none; font:inherit; font-size:.75rem; font-weight:600;
  color:var(--ink-2); padding:5px 12px; border-radius:999px;
}
.card-head .seg button[aria-pressed="true"]{background:#fff; color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.1)}
/* Objection labels are long enough to need the room. */
.funnel .fl.wide{width:190px}

/* ---- hiring ---- */
.approw{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  border:0; background:none; font:inherit; padding:14px 2px;
  border-bottom:1px solid var(--hair);
}
.approw:last-child{border-bottom:0}
.approw:hover{background:var(--bg-2)}
.approw .grow{flex:1; min-width:0}
.approw .t{display:block; font-weight:600; font-size:.95rem}
.approw .s{display:block; color:var(--ink-2); font-size:.8rem; margin-top:2px}
.approw .when{flex:none; color:var(--ink-3); font-size:.78rem; white-space:nowrap}
.approw .yn{flex:none}

.drawer-scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:40}
.drawer-scrim[hidden]{display:none}
.hiredrawer{
  position:fixed; top:0; right:0; bottom:0; width:min(480px,100%); z-index:41;
  background:var(--bg); border-left:1px solid var(--hair);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.32,.72,0,1);
  box-shadow:-8px 0 28px rgba(0,0,0,.1);
}
.hiredrawer.open{transform:translateX(0)}
.hiredrawer[hidden]{display:none}
.hiredrawer-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px 14px; border-bottom:1px solid var(--hair)}
.hiredrawer-head h2{font-size:1.15rem}
.hiredrawer-head p{color:var(--ink-2); font-size:.82rem; margin-top:2px}
.hiredrawer-body{flex:1; overflow-y:auto; padding:18px 22px}
.hiredrawer-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair); background:var(--bg-2)}
.hiredrawer-foot label{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-2)}
.hiredrawer-foot .btn{margin:0}
.hdfacts{margin:0 0 18px}
.hdrow{display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--hair)}
.hdrow dt{flex:none; width:130px; font-size:.82rem; color:var(--ink-2)}
.hdrow dd{flex:1; min-width:0; margin:0; font-size:.88rem; word-break:break-word}
.hdrow dd small{color:var(--ink-3)}
.hdh{font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);
  margin:22px 0 8px}
.hdfit{font-size:.9rem; line-height:1.6; white-space:pre-wrap; color:var(--ink)}
.hiredrawer textarea{width:100%; font:inherit; font-size:.9rem; padding:10px 12px;
  border:1px solid var(--hair); border-radius:10px; resize:vertical}
.hiredrawer textarea:focus{outline:none; border-color:var(--orange)}
@media (max-width:560px){
  .hiredrawer{width:100%}
  .hdrow{flex-direction:column; gap:2px}
  .hdrow dt{width:auto}
}

/* Who sent them. Sits under the name rather than taking a column that would
   be empty on nearly every row. */
.reffrom{display:block; color:var(--ink-3); font-size:.72rem; font-weight:400; margin-top:1px}

/* ---- the knocking chart, with an axis ----
   A bar chart with no axis is a row of shapes: you can see that Tuesday was
   busier than Monday and not by how much. */
.chartwrap{display:grid; grid-template-columns:auto 34px 1fr; align-items:stretch; gap:0 8px}
.axislabel{
  writing-mode:vertical-rl; transform:rotate(180deg);
  align-self:center; font-size:.72rem; color:var(--ink-3); letter-spacing:.02em;
  padding-bottom:22px;
}
.yaxis{
  display:flex; flex-direction:column; justify-content:space-between;
  height:150px; text-align:right; font-size:.7rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.yaxis span{line-height:1; transform:translateY(-50%)}
.yaxis span:last-child{transform:translateY(0)}
.plot{position:relative}
.gridlines{position:absolute; inset:0 0 auto 0; height:150px;
  display:flex; flex-direction:column; justify-content:space-between; pointer-events:none}
.gridlines i{display:block; height:1px; background:var(--hair); opacity:.7}
.plot .daybars{position:relative; z-index:1}
/* the count above each bar, so a short bar still says what it is */
.daybars .dn{font-size:.68rem; color:var(--ink-2); font-variant-numeric:tabular-nums;
  order:-1; margin-bottom:3px}
.daybars li{justify-content:flex-end}

/* Which colour means what, under the chart. */
.chartkey{display:flex; gap:16px; margin-top:10px; font-size:.72rem; color:var(--ink-3)}
.chartkey span{display:inline-flex; align-items:center; gap:6px}
.chartkey i{width:10px; height:10px; border-radius:3px; display:inline-block}
.chartkey .k-doors{background:var(--orange-tint); box-shadow:inset 0 0 0 1px var(--hair)}
.chartkey .k-sold{background:var(--orange-600)}

/* ---- rep details ---- */
/* The names behind the numbers on the By rep row. Five buckets that wrap into
   as many columns as the card is wide, because with two reps this is short and
   with eight it should not become a single long ribbon. */
/* The table scrolls in its own box. Without a min-width it compressed until
   it could not and then overflowed the card, taking the last column — the
   details button — off the edge where nothing could reach it. */
.tablescroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tablescroll .table{min-width:780px}

.repdetail{margin-top:12px; background:var(--bg-2); border-radius:var(--r-sm)}
.repdetail h3{margin:0; padding:13px 14px 0; font-size:.9rem}
.repdet{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px 22px; padding:12px 14px 16px}
.repdet section{min-width:0}
.repdet h4{display:flex; align-items:center; gap:7px; margin:0 0 7px;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.repdet h4 .n{font-size:.78rem; letter-spacing:0; color:var(--ink-2); font-weight:700}
.repdet ul{list-style:none; margin:0; padding:0}
.repdet li{display:flex; align-items:baseline; gap:8px; padding:4px 0;
  border-bottom:1px solid var(--hair); font-size:.82rem}
.repdet li:last-child{border-bottom:0}
.repdet .lnk{flex:none; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--ink);
  cursor:pointer; text-align:left}
.repdet .lnk:hover{color:var(--orange-600); text-decoration:underline}
.repdet .lnk.off{cursor:default; color:var(--ink-3); font-weight:500}
.repdet .w{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-3); font-size:.76rem}
.repdet .s{flex:none; color:var(--ink-2); font-size:.76rem; font-variant-numeric:tabular-nums}
.repdet .none{margin:0; color:var(--ink-3); font-size:.78rem}
.repdet .repdetnote{grid-column:1/-1; margin:2px 0 0; padding-top:10px;
  border-top:1px solid var(--hair); color:var(--ink-3); font-size:.74rem; line-height:1.5}

/* Arriving from Show details, the person you asked for should be obvious for
   a moment and then get out of the way. */
@keyframes custfound{from{background:var(--orange-tint)} to{background:transparent}}
tr.found > td{animation:custfound 2.4s ease-out}

/* ---- website analytics ---- */
/* "Worth knowing" is a sentence and a number, not a proportion, so the row
   gives the sentence the width and the number room enough for "28 of 31"
   without folding it onto a second line. */
#webHealth .fl{width:auto; flex:1; color:var(--ink); font-size:.85rem}
#webHealth .fn{width:auto; min-width:70px; white-space:nowrap}
#webHealth .wk.no .fn{color:var(--red)}
#webHealth .wk.yes .fn{color:var(--green)}
/* Source names are longer than a rep's name; let them have the room. */
#webSources .fl{width:150px}
#webSources .fp{width:62px}
#webFunnel .fl{width:132px}
#webFunnel .fp{width:52px}

/* ---- api connections ---- */
.conncard{margin-bottom:10px; padding:14px 16px}
.connhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:6px}
.connhead h2{display:flex; align-items:center; gap:8px; margin:0; font-size:.95rem}
.connvendor{color:var(--ink-3); font-size:.76rem}
.conncard .connwhat{font-size:.85rem; color:var(--ink-2); margin:0 0 5px}
.conncard .conngone{font-size:.79rem; color:var(--ink-3); margin:0 0 3px}
.conncard .conngone b{color:var(--ink-2); font-weight:600}
.connfoot{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:10px}
.connnote{font-size:.76rem; color:var(--ink-3)}
.connresult{font-size:.79rem; color:var(--ink-2)}
.connresult.good{color:var(--green)}
.connresult.bad{color:var(--red)}
/* A status pill. It has been written into the markup in three places since
   Text settings shipped and never had a rule anywhere, so "edited" and "off"
   have been rendering as bare words in the middle of a heading. */
.tag{display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px; vertical-align:middle;
  background:var(--bg-2); color:var(--ink-3)}
.tag.saved{background:var(--green-bg); color:var(--green)}
.tag.off{background:var(--bg-2); color:var(--ink-3)}

/* ---- onboarding ----
   One person at a time: a list of hires, a profile, the paperwork hanging off
   it, and what has come back. Everything here reuses the card the rest of the
   portal is built from; what is new is the shapes inside it. */
/* .btn is width:100% for the login form. In a toolbar it is a button. */
.toolbar .btn{width:auto; margin:0; padding:9px 18px; font-size:.88rem}
.obhead{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:18px 0 4px}

.obrows{display:flex; flex-direction:column}
.obrow{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font:inherit; background:transparent; border:0; border-top:1px solid var(--hair);
  padding:13px 2px; cursor:pointer; transition:background .15s;
}
.obrows > .obrow:first-child{border-top:0}
.obrow:hover{background:var(--bg-2)}
.obrow .t{display:block; font-size:.95rem; font-weight:560; color:var(--ink)}
.obrow .s{display:block; font-size:.8rem; color:var(--ink-3)}

/* The terms, laid out so the pay rate is impossible to miss before the letter
   that states it is sent. */
.obfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px 20px; margin-top:16px}
.obfacts dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3)}
.obfacts dd{margin:2px 0 0; font-size:.95rem; color:var(--ink)}
.obnote{margin-top:16px; color:var(--ink-3); font-size:.78rem; line-height:1.5}
.obnote code{font-size:.95em; word-break:break-all}

.obdocs, .obmail{display:flex; flex-direction:column; margin-top:6px}
.obdoc{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--hair); padding:12px 2px}
.obdocs > .obdoc:first-child, .obmail > .obdoc:first-child{border-top:0}
.obdoc .t{display:block; font-size:.92rem; font-weight:560}
.obdoc .s{display:block; font-size:.78rem; color:var(--ink-3)}
.obdoc .mini{text-decoration:none}

.obform{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.obform .field{margin-top:16px; max-width:none}
.obform .field.full{grid-column:1 / -1}
.obform textarea{
  width:100%; font:inherit; font-size:.95rem; line-height:1.45; color:var(--ink);
  background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:10px 12px; resize:vertical;
}
.obform textarea:focus{outline:none; border-color:var(--orange-600);
  box-shadow:0 0 0 4px rgba(240,150,91,.2)}
.obform select{width:100%}
.fhint{display:block; margin-top:5px; font-size:.76rem; color:var(--ink-3)}

@media (max-width:620px){
  .obform{grid-template-columns:1fr}
}

/* ---- HR to-do ---- */
.todoprogress{display:flex; align-items:center; gap:12px; margin:16px 0 14px}
.todobar{flex:1; height:8px; background:var(--bg-2); border-radius:999px; overflow:hidden}
.todobar i{display:block; height:100%; width:0; background:var(--orange-600);
  border-radius:999px; transition:width .25s}
.todocount{font-size:.78rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .todobar i{transition:none} }

.todogroup{margin-bottom:10px; padding:14px 16px}
.todophase{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--hair); padding-bottom:8px; margin-bottom:2px}
.todophase h2{margin:0; font-size:.95rem}
.todowhen{font-size:.74rem; font-weight:600; color:var(--ink-3); white-space:nowrap}
.todoitems{list-style:none; margin:0; padding:0}
.todoitems li{border-bottom:1px solid var(--hair)}
.todoitems li:last-child{border-bottom:0}
.todoitems label{display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start;
  padding:11px 2px; cursor:pointer}
.todoitems input[type=checkbox]{width:19px; height:19px; margin:1px 0 0;
  accent-color:var(--orange-600); cursor:pointer}
.todot{font-weight:600; font-size:.88rem; color:var(--ink)}
.todotag{margin-left:7px; background:var(--orange-tint); color:#9A4E10}
.todod{display:block; color:var(--ink-2); font-size:.82rem; line-height:1.5; margin-top:2px}
.todod a{color:var(--orange-600)}
.todoby{display:block; color:var(--ink-3); font-size:.72rem; margin-top:3px}
.todoby:empty{display:none}
/* Struck through, but still readable — a done item is still a record. */
.todoitems li.checked .todot{text-decoration:line-through; color:var(--ink-3)}
.todofoot{color:var(--ink-3); font-size:.76rem; margin-top:14px}

/* ---- sales cadence ----
   Two lines across the page, and nothing on them but the timing.

   Everything else has been taken off: the preview of the wording, the edited
   and message counts, the notes beside each heading, the placeholder legend
   under the box. The chart is the screen; the wording is what a tap opens. If
   a line is too wide for the window it scrolls sideways rather than wrapping,
   because a wrapped flow chart puts an arrow at the end of a row pointing at
   nothing, which is what the first version of this did. */
.cgroup{margin-top:30px}
.cgroup > .chead{font-size:1.06rem; margin:0 0 13px}

/* A line wider than the window scrolls sideways. That is invisible unless
   something says so, so the right edge fades while there is more to the right
   of it and clears once you reach the end. */
.cflowbox{position:relative}
.cflowbox::before, .cflowbox::after{
  content:''; position:absolute; top:0; bottom:4px; width:44px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.cflowbox::before{left:0;
  background:linear-gradient(270deg, rgba(255,255,255,0), var(--bg) 72%)}
.cflowbox::after{right:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--bg) 72%)}
.cflowbox.cless::before{opacity:1}
.cflowbox.cmore::after{opacity:1}
.cflow{
  list-style:none; margin:0; padding:2px 2px 4px; display:flex; align-items:center;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cflow::-webkit-scrollbar{display:none}

.cstep{position:relative; flex:0 0 auto; display:flex; align-items:center}
.cstep + .cstep{padding-left:26px}
/* The arrow into this step: a rule and a chevron, both drawn in the padding
   so they belong to the step they point at and cannot end up orphaned. */
.cstep + .cstep::before{
  content:''; position:absolute; left:8px; top:50%; width:14px; height:1.5px;
  background:var(--hair); transform:translateY(-50%);
}
.cstep + .cstep::after{
  content:''; position:absolute; left:17px; top:50%; width:6px; height:6px;
  border-top:1.5px solid var(--hair); border-right:1.5px solid var(--hair);
  transform:translateY(-50%) rotate(45deg);
}

.cstep > button, .cstep.cstate{
  display:flex; align-items:center; gap:7px; min-height:44px; padding:0 14px;
  font:inherit; font-size:.855rem; font-weight:560; letter-spacing:-.012em;
  color:var(--ink); background:var(--bg-2); border:1px solid transparent;
  border-radius:12px; white-space:nowrap; cursor:pointer; -webkit-appearance:none;
  transition:background .15s, border-color .15s, color .15s;
}
.cstep > button:hover{background:var(--hair)}
.cstep.copen > button, .cstep.copen > button:hover{
  background:var(--orange-tint); border-color:var(--orange); color:var(--orange-700);
}
/* The one step that comes back round. */
.cstep.cloop > button{border:1px dashed var(--hair)}
.cstep.cloop.copen > button{border-style:solid; border-color:var(--orange)}
/* Nothing is sent here, so it opens nothing. */
.cstep.cstate{cursor:default; background:transparent; border:1px dashed var(--hair);
  color:var(--ink-3); font-weight:500}
.cstep.cstart{border-color:var(--green); background:var(--green-bg); color:var(--green)}

.cstep.coff > button{color:var(--ink-3)}
.coffmark{font-size:.72rem; font-weight:500; color:var(--ink-3)}
.cloading{padding:13px 2px; color:var(--ink-3); font-size:.85rem}
.cfoot{margin-top:14px; color:var(--ink-3); font-size:.78rem}

/* ---- the editor, under the line it belongs to ----
   One at a time, and only what it takes to change the wording: the message,
   what fires it, the box, and Save. */
.ceditor:empty{display:none}
.ceditor{margin-top:14px}
.txtcard{background:var(--bg-2); border-radius:var(--r-md); padding:16px 18px}
.txthead{display:flex; flex-direction:column; gap:1px; margin-bottom:9px}
.txthead h2{margin:0; font-size:.92rem; font-weight:600}
.txtcard .txtwhen{color:var(--ink-3); font-size:.76rem; margin:0}
.txtbody{
  width:100%; font:inherit; font-size:.89rem; line-height:1.5; color:var(--ink);
  background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:10px 12px; resize:vertical; min-height:56px; overflow:hidden;
}
.txtbody:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint)}
.txtcard.dirty .txtbody{border-color:var(--orange)}
.txtcard.refused .txtbody{border-color:var(--red)}

/* A refusal must never be mistakable for a save. It used to lose on
   specificity to `.card p` and print in the same grey, at the same size, as
   every caption — it read as a hint, the wording sat unsaved, and a reload
   brought the default back, which from the outside is exactly "my edits
   revert". It owns its own block. */
.txtcard .txterr{
  margin:10px 0 0; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--red-bg); color:var(--red); font-size:.82rem; line-height:1.45;
}
.txtcard .txterr b{font-weight:700}

.txtactions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
/* .btn is width:100% for the login form; in this row it is a button. */
.txtactions .btn{width:auto; margin:0; min-width:92px; padding:8px 18px; font-size:.85rem}
.txtspacer{flex:1}
.txtstate{font-size:.78rem; font-weight:600}
.txtstate[data-state="ok"]{color:var(--green)}
.txtstate[data-state="bad"]{color:var(--red)}
.txtstate[data-state="dirty"]{color:var(--orange-600)}
.txtstate[data-state="busy"]{color:var(--ink-3); font-weight:500}

@media (max-width:560px){
  .cstep > button, .cstep.cstate{min-height:42px; padding:0 13px; font-size:.84rem}
  .cstep + .cstep{padding-left:23px}
  .cstep + .cstep::before{left:5px; width:11px}
  .cstep + .cstep::after{left:13px}
  .txtcard{padding:14px 15px}
  .txtactions .btn{flex:1}
}

/* Where a row is going once Customer info is next drawn. It stays put until
   then, because status cycles on click and moving somebody on the first press
   left them mid-cycle in a tab nobody was looking at. */
.moves{display:inline-block; margin-left:6px; font-size:.68rem; font-weight:600;
  color:var(--orange-600); white-space:nowrap; vertical-align:middle}