/* Meetings (#visits), ops lane: the appointment book (moved from shell/ui/views/visits.css). */
/* "needs marking" and clashes are people's work, not the AI: a muted red, never the AI amber (DESIGN.md) */
.vb{--vb-mark:color-mix(in srgb,var(--bad) 80%,var(--ink))}
/* Site visits: an appointment book. Ruled hour lines, mono times in a left gutter, visits as slips you can pick up. */
.vb{max-width:1200px;margin:0 auto;padding:0 var(--s5) var(--s6)}
.vb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0 0 var(--s4)}
.vb-nav{display:flex;align-items:center;gap:var(--s1)}
.vb-prev svg,.vb-mc header .btn:first-child svg{transform:rotate(180deg)}
.vb-range{font-size:12px;color:var(--muted);margin-left:var(--s1);white-space:nowrap}
.vb-f select{height:28px;font-size:12px;min-width:132px}
.vb-tools .vb-f:first-of-type{margin-left:auto}

.vb-grid{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:var(--s5);align-items:start}
.vb-days{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}

/* a day column: the page of the book */
.vb-col{min-width:0}
.vb-colh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s2);border-bottom:3px double var(--line-2)}
.vb-colh h2{margin:0;font:600 20px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.vb-colh .vb-date{font:500 12px var(--mono);color:var(--muted);letter-spacing:0;margin-left:6px}
.vb-n{font-size:11px;color:var(--muted)}
.vb-hours{margin:var(--s2) 0 var(--s2);font-size:12px;color:var(--muted)}
.vb-hours.closed{color:var(--muted)}
.vb-book{position:relative}
.vb-hr{display:grid;grid-template-columns:32px minmax(0,1fr);border-top:1px solid var(--line);min-height:28px}
.vb-hr:last-child{border-bottom:1px solid var(--line)}
.vb-hr.out{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--ink) 3.5%,transparent) 6px 7px)}
.vb-h{font-size:11px;color:var(--faint);padding-top:6px}
.vb-hr.has .vb-h{color:var(--ink-2)}
.vb-slot{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) 0}
.vb-hr:not(.has) .vb-slot{padding:0}
.vb-now{position:absolute;left:0;right:0;top:calc(var(--top)*100%);border-top:1px solid var(--bad);font-size:10px;color:var(--bad);padding-left:34px;line-height:14px;pointer-events:none}
.vb-none{margin:var(--s3) 0;padding:var(--s4);border:1px dashed var(--line-2);border-radius:var(--r);font-size:13px;color:var(--muted)}

/* a visit slip */
.vb-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);align-items:start;padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--act);border-radius:var(--r)}
.vb-card.st-unmarked{border-left-color:var(--vb-mark);border-left-style:dashed}
.vb-card.st-attended{border-left-color:var(--good)}
.vb-card.st-no-show{border-left-color:var(--bad)}
.vb-card.st-cancelled{border-left-color:var(--line-2);opacity:.62}
.vb-card.st-cancelled .vb-name{text-decoration:line-through}
.vb-c1{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vb-time{font:500 15px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.stamp.warn{border-color:color-mix(in srgb,var(--vb-mark) 45%,transparent);color:var(--vb-mark)}
.stamp.mute{color:var(--muted)}
.vb-c2{min-width:0}
.vb-c2 p{margin:0}
.vb-who{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.vb-name{font:600 14px/1.3 var(--body);color:var(--ink);text-align:left}
.vb-where{font-size:12px;color:var(--muted);margin-top:2px!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vb-sp{color:var(--act)}
.vb-units{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px!important}
.vb-k{font:600 10px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.vb-unit{position:relative;height:24px;padding:0 6px;border:1px solid var(--line-2);border-radius:3px;background:none;font-size:11px;color:var(--ink-2);cursor:pointer}
.vb-unit::after{content:"";position:absolute;inset:-5px -2px}
.vb-unit:hover{border-color:var(--act);color:var(--act)}
.vb-clash{display:flex;align-items:center;gap:6px;margin-top:6px!important;font-size:12px;color:var(--vb-mark)}
.vb-clash svg{width:14px;height:14px;flex:none}
.vb-rems{list-style:none;margin:var(--s2) 0 0;padding:var(--s2) 0 0;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:4px var(--s3)}
.vb-rem{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.vb-rem .vb-tick{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);font-size:10px;flex:none}
.vb-rem.sent{color:var(--ink-2)}
.vb-rem.sent .vb-tick{border-color:var(--good);background:var(--good);color:#fff}
.vb-rem.sent .vb-tick svg{width:10px;height:10px}
.vb-rem.off{color:var(--ink-2)}
.vb-rem.off svg{width:14px;height:14px}
.vb-rem.off .vb-tick{border-style:dashed}
.vb-note{margin-top:6px!important;font-size:12px;color:var(--muted)}
/* actions sit in a compact row under the details, so the details keep the card's full width */
.vb-acts{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:var(--s2);border-top:1px solid var(--line)}
.vb-acts .btn{justify-content:center}

/* week: a duty grid, a lane per salesperson */
.vw-wrap{overflow-x:auto;border-top:3px double var(--line-2)}
.vw{width:100%;border-collapse:collapse;table-layout:fixed;min-width:760px}
.vw th,.vw td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;padding:var(--s2)}
.vw th:last-child,.vw td:last-child{border-right:0}
.vw thead th{font-weight:400;text-align:left;padding:var(--s2)}
.vw-lane-h,.vw-lane{width:124px}
.vw-lane{font:600 12px var(--body);color:var(--act);text-align:left}
.vw-dh{display:flex;align-items:baseline;gap:6px;background:none;border:0;padding:0;font:500 12px var(--body);color:var(--muted);cursor:pointer}
.vw-dh b{font:600 18px var(--display);color:var(--ink)}
.vw thead th.is-today .vw-dh b{color:var(--act)}
.vw thead th.is-today{box-shadow:inset 0 -2px 0 var(--act)}
.vw-dn{font-size:10px;color:var(--muted)}
.vw-cell{height:64px}
.vw-cell.closed{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--ink) 3.5%,transparent) 6px 7px)}
.vw-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;margin-bottom:4px;padding:4px 6px;border:1px solid var(--line);border-left:3px solid var(--act);border-radius:4px;background:var(--surface);font:500 12px/1.2 var(--body);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vw-chip .mono{font-size:11px;color:var(--muted)}
.vw-chip .vw-n{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vw-chip.st-unmarked{border-left-color:var(--vb-mark);border-left-style:dashed}
.vw-chip.st-attended{border-left-color:var(--good)}
.vw-chip.st-no-show{border-left-color:var(--bad)}
.vw-chip.clash{border-color:color-mix(in srgb,var(--vb-mark) 55%,transparent)}
.vw-chip:hover{border-color:var(--act)}
.vw-flag{margin-left:auto;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--vb-mark)}
.vw-list{display:none}
.vb-strip{display:none}

/* month: a small calendar to jump */
.vb-mc{position:sticky;top:var(--s4);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.vb-mc header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.vb-mc header b{font:600 14px var(--display)}
.mc-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mc-w{font:600 10px var(--body);color:var(--faint);text-align:center;padding:2px 0}
.mc-d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:30px;border:0;border-radius:4px;background:none;font:500 12px var(--mono);color:var(--ink-2);cursor:pointer}
.mc-d i{position:absolute;bottom:2px;font-style:normal;font-size:8px;line-height:1;letter-spacing:-1px;color:var(--act)}
.mc-d:hover{background:var(--hover)}
.mc-d.today span{color:var(--act);font-weight:700}
.mc-d.on{background:var(--act);color:var(--on-act)}
.mc-d.on i,.mc-d.on.today span{color:var(--on-act)}
.mc-k{margin:var(--s2) 0 0;font-size:11px;color:var(--muted)}
.mc-k i{font-style:normal;color:var(--act)}
.vb-ro{margin-top:var(--s4);font-size:12px;color:var(--muted)}

@media (max-width:1100px){
  .vb-grid{grid-template-columns:minmax(0,1fr)}
  /* below desktop the month grid gives way to the two-week day strip, so the agenda starts above the fold */
  .vb-mc{display:none}
  .vb-days{grid-template-columns:1fr}
  .vb-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--s4)) var(--s4);padding:0 var(--s4) 2px}
  .vb-strip::-webkit-scrollbar{display:none}
  .vs-d{flex:0 0 48px;display:flex;flex-direction:column;align-items:center;gap:2px;height:64px;justify-content:center;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:500 11px var(--body);color:var(--muted);cursor:pointer}
  .vs-d b{font:600 17px var(--display);color:var(--ink)}
  .vs-d i{font-style:normal;font-size:9px;line-height:8px;height:8px;color:var(--act)}
  .vs-d.today b{color:var(--act)}
  .vs-d.on{background:var(--act);border-color:var(--act);color:var(--on-act)}
  .vs-d.on b,.vs-d.on i{color:var(--on-act)}
}
@media (max-width:1100px) and (min-width:761px){.vb-days{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .vb{padding:0 var(--s4) var(--s6)}
  .vb-tools .vb-f:first-of-type{margin-left:0}
  .vb-f{flex:1 1 140px}.vb-f select{width:100%;height:40px}
  .vb-card{grid-template-columns:max-content minmax(0,1fr)}
  .vb-acts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .vb-acts .btn{flex:1 1 auto;height:40px}
  .vb-time{font-size:14px}
  .vw-wrap{display:none}
  .vw-list{display:block;list-style:none;margin:0;padding:0;border-top:3px double var(--line-2)}
  .vw-list li{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
  .vw-lh{display:flex;align-items:baseline;gap:var(--s2);width:100%;min-height:40px;background:none;border:0;padding:0;font:600 14px var(--body);color:var(--ink);text-align:left;cursor:pointer}
  .vw-lh .mono{font-size:11px;color:var(--muted);font-weight:500}
  .vw-lh .vw-dn{margin-left:auto}
  .vw-li{margin:4px 0 0;font-size:13px;padding-left:var(--s2);border-left:3px solid var(--act)}
  .vw-li.st-unmarked{border-left-color:var(--vb-mark);border-left-style:dashed}
  .vw-li.st-attended{border-left-color:var(--good)}
  .vw-li.st-no-show{border-left-color:var(--bad)}
  .vw-li .mono{font-size:11px;color:var(--muted)}
}

/* meeting types: a quiet type label under the time; office and out-visits get a different slip edge pattern */
.vb-kind{font:500 11px/1.2 var(--body);color:var(--muted);letter-spacing:.01em}
.vb-card.k-office,.vb-card.k-out{border-left-style:double;border-left-width:4px}
.vw-k{font:500 10px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.vb-card.flash{animation:vbflash 1.6s ease-out}
@keyframes vbflash{0%,40%{box-shadow:0 0 0 2px var(--act)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.vb-card.flash{animation:none;box-shadow:0 0 0 2px var(--act)}}
.vb-frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.vb-err{margin:var(--s2) 0 0;color:var(--bad);font-size:13px}
.vb-ttl{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.vb-with{display:flex;gap:6px;align-items:baseline;margin:4px 0 0;font-size:12px;color:var(--ink-2)}
.vb-card.k-internal.st-booked{border-left-color:var(--line-2);border-left-style:solid}
.vb-card.k-internal .vb-name{font-weight:600}

/* the week chip: time and type on one line, the name gets the full width */
.vw-t{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.vw-t .vw-k{font-size:9px;letter-spacing:0}
/* phone-only pieces stay out of the desktop layout */
.vb-ftog,.vb-fab,.vb-nowrow{display:none}

@media (max-width:760px){
  /* toolbar: view switch and day nav on one row; filters fold behind one button */
  .vb-tools{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:center}
  .vb-tools .seg{flex:none;flex-wrap:nowrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .vb-tools .seg button{min-height:44px;padding:0 12px}
  .vb-nav{display:flex;align-items:center;gap:4px;justify-self:center}
  .vb-nav .btn{height:44px}
  .vb-nav .btn.icon{width:44px}
  .vb-range{display:none}
  .vb-tools .vb-ftog{display:inline-flex;height:44px;min-height:44px;gap:6px}
  .vb-ftog.on{border-color:var(--act);color:var(--act)}
  /* New meeting: a thumb-reach button above the tab bar instead of a header button */
  .vb .phead [data-act="meetNew"]{display:none}
  .vb .vb-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:30;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));height:52px;padding:0 20px 0 16px;border:0;border-radius:26px;background:var(--act);color:var(--on-act);font:600 15px var(--body);box-shadow:0 6px 20px -6px color-mix(in srgb,var(--ink) 45%,transparent);cursor:pointer}
  .vb-fab svg{width:20px;height:20px}
  .vb{padding-bottom:calc(var(--s6) + 64px)}
  /* agenda: only hours that hold a meeting, with "now" as a row in time order */
  .vb-hr:not(.has){display:none}
  .modal :is(#mtl,#mp){height:44px;font-size:16px}
  .vb-hr,.vb-hr.out{grid-template-columns:minmax(0,1fr);background:none}
  .vb-h{display:none}  /* each card carries its time; the hour gutter only cost width */
  .vb-now{display:none}
  .vb-nowrow{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0;font-size:11px;color:var(--bad)}
  .vb-nowrow::after{content:"";flex:1;height:1px;background:var(--bad)}
  /* week list: each meeting a full-height row */
  .vw-li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-height:44px;margin:0;padding:var(--s1) 0 var(--s1) var(--s2)}
  .vw-li+.vw-li{border-top:1px solid var(--line)}
}
@media (min-width:761px) and (max-width:1100px){.vb-strip{margin:0 0 var(--s4);padding:0 0 2px}}

/* ml-critic round 1 (MT1, MT3, MT5, MT6, MT11) */
.vw-empty{padding:var(--s2) 0;font-size:12px;color:var(--muted);list-style:none}
.vs-today b{font:600 13px var(--body)}
@media (max-width:1100px){.vw-chip .vw-n{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
@media (max-width:760px){
  .vb-tools{grid-template-columns:auto 1fr auto}
  .vb-tools .vb-f{display:none}           /* filters live in a sheet on the phone */
  .vb-v-day .vb-nav{display:none}          /* in Day, the strip is the date control */
  .vb-tools .vb-ftog{grid-column:3}
  .vb-where{display:block;-webkit-line-clamp:unset}
  .vb-spw{display:none}
  .vb-sp{display:block}
  /* MT1: a tighter header so the first meeting sits near the top */
  .vb-tools{margin-bottom:var(--s2)}
  .vb-strip{margin-bottom:var(--s2)}
  .vs-d{height:52px}
  .vb-colh{padding-bottom:4px}
  .vb-hours{margin:2px 0 6px}
}

/* phone bar: replaces the page head, toolbar and day tiles at ≤600 (emil-polish: first meeting ≤160) */
.vb-pbar{display:none}
@media (max-width:760px){
  .vb>.phead,.vb>.vb-tools,.vb>.vb-strip{display:none}
  .vb-pbar{display:block;margin:0 0 var(--s2)}
  .vb-prow{display:flex;align-items:center;gap:2px;height:44px}
  .vb-pn{width:44px;height:44px;flex:none}
  .vb-plab{flex:1;min-width:0;height:44px;display:flex;align-items:baseline;justify-content:center;gap:5px;border:0;background:none;color:var(--ink);font:600 15px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:0 4px;line-height:44px}
  .vb-plab .mono{font:500 12px var(--mono);color:var(--muted)}
  .vb-plab.is-cur{cursor:default}
  .vb-prow .seg{flex:0 0 auto;width:auto;max-width:none;margin-left:4px;overflow:visible;-webkit-mask-image:none;mask-image:none;flex-wrap:nowrap}
  .vb-prow .seg button{min-height:36px;padding:0 9px}
  .vb-plab b{flex:none}
  .vb-plab .mono{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .vb-pchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:4px calc(-1*var(--s4)) 0;padding:0 var(--s4)}
  .vb-pchips::-webkit-scrollbar{display:none}
  .vb-pc{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font:500 12px var(--body);color:var(--ink-2);white-space:nowrap}
  .vb-pc .mono{font-weight:600;color:var(--ink)}
  button.vb-pc{position:relative;cursor:pointer;border-color:var(--line-2);color:var(--ink)}
  button.vb-pc::after{content:"";position:absolute;inset:-6px -2px}
  .vb-pc.on{border-color:var(--act);color:var(--act)}
  .vb-pc.warn{border-color:color-mix(in srgb,var(--vb-mark) 45%,transparent);color:var(--vb-mark)}
  .vb-pc.warn .mono{color:var(--vb-mark)}
  .vb-pc.mute{color:var(--muted)}
  /* the bar names the first day and its office hours, so its column header steps aside */
  .vb:not(.is-week) .vb-days>.vb-col:first-child>:is(.vb-colh,.vb-hours){display:none}
  .vb-hr,.vb-hr:last-child{border:0}
  .vb-none{padding:var(--s2) 0;border:0;background:none;font-size:13px}
}

/* phone-critic round 1: the top-bar "+" is New meeting (core page-action slot), an empty day is one quiet line, the chip strip shows it scrolls */
@media (max-width:760px){
  .vb-nonex{display:none}
  .vb-none{margin:0 0 var(--s2);padding:6px 0;font-size:13px;color:var(--muted)}
  .vb-days{gap:var(--s3)}
  .vb-pchips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
}
@media (max-width:760px){
  .vb-none{margin:0;padding:2px 0 4px}
  .vb-colh{padding:0 0 2px;border-bottom-width:1px}
  .vb-colh h2 .vb-rel{font-size:17px}
  .vb-hours{margin:2px 0 6px;font-size:12px}
}
/* phone-critic round 2: the office hours sit on the day header's line, in place of the count */
@media (max-width:760px){
  .vb-col{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s2)}
  .vb-col>*{grid-column:1/-1}
  .vb-col>.vb-colh{grid-column:1;border-bottom:0}
  .vb-col>.vb-colh .vb-n{display:none}
  .vb-col>.vb-hours{grid-column:2;grid-row:1;margin:0 0 4px;white-space:nowrap}
  .vb-col>.vb-book,.vb-col>.vb-none{border-top:1px solid var(--line-2);padding-top:6px}
}
/* MT17: below desktop the place line wraps in full instead of clamping */
@media (max-width:1100px){.vb-where{display:block;-webkit-line-clamp:unset;overflow:visible}}