/* Sign Windows calendar — Hairline, on top of board.css (tokens, nav, fields, pills, modal, toasts). */

:root{
  --slot:96px;                 /* every 30 minutes is its own box; the zoom sets the height (96 / 60 / 32px) */
  --hour:calc(2 * var(--slot));
  --q-line:#EEEBEF;            /* the half-hour hairline */
  --h-line:#DAD5DB;            /* the hour line: one step stronger */
  --gutter-w:56px;
  --a-sales:#5C6094;  --a-sales-tint:#EEEFF5;
  --a-survey:#476988; --a-survey-tint:#EAF0F5;
  --a-site:#8162A4;   --a-site-tint:#F2EEF7;
  --a-fit:#76D1B1;    --a-fit-tint:#E8F7F1;
  --a-other:#8E8891;  --a-other-tint:#F3F1F3;
}

.cal-page{min-height:100vh}
.cal-page .head{padding-bottom:0}

/* ---------- Toolbar ---------- */
.cal-tools{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 0}
.cal-nav{display:flex;align-items:center;gap:4px;min-width:0}
.cal-step{width:36px;height:36px;flex-basis:36px}
.cal-range{font-size:var(--t-body);font-weight:700;margin-left:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cal-right{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.cal-views .sort-opt{height:32px;padding:0 12px;font-size:var(--t-label)}
.person-count.is-zero{opacity:.5}

/* ---------- Main ---------- */
.cal{flex:1 0 auto;padding:0 var(--gutter) 32px;min-width:0}
.cal-empty{padding:40px 0;font-size:var(--t-label);color:var(--muted)}

/* ---------- Time grid (day + week) ---------- */
.tg-scroll{position:relative;overflow:auto;border-top:1px solid var(--line-strong);
  height:max(420px, calc(100dvh - 280px));overscroll-behavior:contain}
.tg{display:grid;grid-template-columns:var(--gutter-w) repeat(var(--days), minmax(var(--col-min, 0px), 1fr));min-width:100%}
.tg-corner,.tg-dh{position:sticky;top:0;z-index:6;background:var(--ground);border-bottom:1px solid var(--line-strong);height:56px}
.tg-corner{left:0;z-index:7}
.tg-dh{border:0;border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 10px;text-align:left;font:inherit;color:var(--ink)}
.tg-dh:hover{background:var(--lane)}
.tg-dow{font-size:var(--t-meta);color:var(--muted)}
.tg-dnum{font-size:var(--t-body);font-weight:500;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px}
.tg-dh.is-today .tg-dnum{font-weight:700}
.tg-dh.is-today .tg-dnum::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--coral)}
.tg-dcount{font-size:var(--t-meta);color:var(--muted);font-weight:400}

.tg-gutter{position:sticky;left:0;z-index:5;background:var(--ground);height:calc(24 * var(--hour))}
.tg-hour{position:absolute;right:8px;transform:translateY(-50%);font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.tg-col{position:relative;height:calc(24 * var(--hour));border-left:1px solid var(--line);cursor:cell;
  background:
    repeating-linear-gradient(to bottom, var(--h-line) 0 1px, transparent 1px var(--hour)),
    repeating-linear-gradient(to bottom, var(--q-line) 0 1px, transparent 1px var(--slot));}
.tg-col::before,.tg-col::after{content:"";position:absolute;left:0;right:0;background:rgba(251,250,251,.75);pointer-events:none}
.tg-col::before{top:0;height:calc(7 * var(--hour))}
.tg-col::after{top:calc(20 * var(--hour));bottom:0}
.tg-col.is-today{background-color:#FCFCFE}
.tg-col.is-drop{background-color:#F6F7FB}
.now-line{position:absolute;left:-1px;right:0;height:2px;background:var(--coral);z-index:4;pointer-events:none}
.now-line::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:4px;background:var(--coral)}
/* The time now, a small coral pill at the left end of the line */
.now-time{position:absolute;left:2px;top:1px;transform:translateY(-50%);height:18px;padding:0 6px;border-radius:9px;
  background:var(--coral);color:#fff;font-size:11px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums;
  white-space:nowrap;box-shadow:0 0 0 2px #fff}

/* ---------- Items ---------- */
.ev{position:absolute;z-index:2;min-height:22px;border:0;border-radius:var(--r-chip);padding:3px 6px 3px 8px;
  text-align:left;font:inherit;color:var(--ink);overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;gap:1px;line-height:1.2;touch-action:manipulation}
.ev:hover{z-index:3;box-shadow:var(--shadow-button)}
.ev:focus-visible{outline:2px solid var(--blue);outline-offset:1px;z-index:3}
.ev-line{display:flex;align-items:center;gap:5px;min-width:0;font-size:var(--t-meta);white-space:nowrap}
.ev-time{font-variant-numeric:tabular-nums;color:var(--muted);flex:0 0 auto}
.ev-title{font-size:var(--t-meta);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-sub{font-size:var(--t-meta);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-who{margin-left:auto;flex:0 0 auto;height:16px;min-width:16px;padding:0 4px;border-radius:3px;background:rgba(255,255,255,.75);
  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em;color:var(--ink)}
.ev.is-tall .ev-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* call-back: a compact white chip with a phone */
.ev-cb{background:#fff;border:1px solid var(--line-strong);padding:2px 6px}
.ev-cb .ev-who{background:var(--sunken)}
.ev-cb.is-overdue{border-left:3px solid var(--overdue)}
.ev-cb.is-overdue .ev-time{color:var(--overdue);font-weight:500}
.ph{flex:0 0 12px;width:12px;height:12px;background:no-repeat center/12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23476988' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}

/* appointment: tinted fill by kind, a stronger left edge */
.ev-ap{border-left:3px solid var(--k);background:var(--kt)}
.k-sales_visit{--k:var(--a-sales);--kt:var(--a-sales-tint)}
.k-survey{--k:var(--a-survey);--kt:var(--a-survey-tint)}
.k-site_visit{--k:var(--a-site);--kt:var(--a-site-tint)}
.k-fitting{--k:var(--a-fit);--kt:var(--a-fit-tint)}
.k-other{--k:var(--a-other);--kt:var(--a-other-tint)}
.ev.is-cancelled{opacity:.5}
.ev.is-cancelled .ev-title,.ev.is-cancelled .ev-sub{text-decoration:line-through}
.ev.is-no_show{opacity:.65}
.ev.is-no_show .ev-title::after{content:" · no-show";font-weight:400;color:var(--muted)}
.tick{flex:0 0 12px;width:12px;height:12px;border-radius:6px;background:var(--k, var(--check,#476988)) no-repeat center/8px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E")}

/* Resize grips: the bottom edge changes the length, the top edge the start. Call-backs have none. */
.ev-resize{position:absolute;left:0;right:0;height:7px;cursor:ns-resize;z-index:1}
.ev-resize-top{top:0}
.ev-resize-bottom{bottom:0}
.ev-resize::after{content:"";position:absolute;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--k);opacity:0;transition:opacity .12s}
.ev-resize-top::after{top:1px}
.ev-resize-bottom::after{bottom:1px;opacity:.3}
.ev-ap:hover .ev-resize::after{opacity:.55}
.ev-ap .ev-resize:hover::after,.ev.is-dragging .ev-resize::after{opacity:1}
.ev-ap:hover .ev-resize:hover{background:rgba(255,255,255,.35)}
.ev-cb{cursor:grab}

/* The half-hour box under the mouse, a dragged-out range, and the time a drag will land on */
.tg-hover{position:absolute;left:2px;right:2px;height:calc(var(--slot) - 1px);margin-top:1px;border-radius:var(--r-chip);
  background:var(--choice-rest);box-shadow:inset 0 0 0 1px var(--choice-active);pointer-events:none;z-index:1;
  display:flex;align-items:center;padding:0 6px;font-size:var(--t-meta);color:var(--choice-rest-ink);font-variant-numeric:tabular-nums}
.tg-sel{position:absolute;left:2px;right:2px;margin-top:1px;border-radius:var(--r-chip);background:rgba(71,89,252,.09);
  box-shadow:inset 0 0 0 2px var(--blue);pointer-events:none;z-index:3;padding:3px 8px;
  display:flex;flex-direction:column;gap:1px;line-height:1.2;overflow:hidden;font-variant-numeric:tabular-nums}
.tg-sel-time{font-size:var(--t-meta);font-weight:700;color:#1B2A9E;white-space:nowrap}
.tg-sel-dur{font-size:var(--t-meta);color:#1B2A9E}
.ev-tip{position:absolute;left:4px;z-index:9;pointer-events:none;transform:translateY(calc(-100% - 3px));
  background:var(--ink);color:#fff;font-size:var(--t-meta);font-weight:500;padding:3px 7px;border-radius:var(--r-chip);
  white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-menu)}
.cal.is-selecting,.cal.is-selecting *{cursor:ns-resize !important}
.ev.is-dragging{z-index:8;box-shadow:var(--shadow-menu);opacity:.92;cursor:grabbing;pointer-events:none}
.ev.is-saving{opacity:.7}
.cal.is-dragging,.cal.is-dragging *{cursor:grabbing !important}
.cal.is-resizing,.cal.is-resizing *{cursor:ns-resize !important}

/* ---------- Month ---------- */
.m-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.m-dow{font-size:var(--t-meta);color:var(--muted);padding:8px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line-strong)}
.m-cell{min-height:118px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer}
.m-cell:hover{background:var(--lane)}
.m-cell.is-out{background:#FDFDFD}
.m-cell.is-out .m-num{color:var(--placeholder)}
.m-cell.is-drop{background:#F4F6F8}
.m-num{align-self:flex-start;border:0;background:none;padding:2px 6px;border-radius:var(--r-chip);font:inherit;font-size:var(--t-label);
  font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--ink)}
.m-num:hover{background:var(--sunken)}
.m-cell.is-today .m-num{background:var(--ink);color:#fff;font-weight:700}
.m-ev{position:relative;display:flex;align-items:center;gap:5px;height:22px;padding:0 6px;border-radius:var(--r-chip);
  flex-direction:row;min-height:0;width:100%}
.m-ev{font-size:var(--t-meta)}
.m-ev .ev-title{flex:1}
.m-more{align-self:flex-start;border:0;background:none;padding:2px 6px;font:inherit;font-size:var(--t-meta);font-weight:500;color:var(--muted);cursor:pointer;border-radius:var(--r-chip)}
.m-more:hover{background:var(--sunken);color:var(--ink)}

/* ---------- Agenda ---------- */
.ag{max-width:980px}
.ag-day{border-top:1px solid var(--line-strong);padding:14px 0 6px}
.ag-day:first-child{border-top:0}
.ag-head{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.ag-head h3{font-size:var(--t-label);font-weight:700}
.ag-head .ag-sub{font-size:var(--t-meta);color:var(--muted)}
.ag-head.is-today h3::after{content:"Today";margin-left:8px;padding:2px 6px;border-radius:var(--r-chip);background:var(--ink);color:#fff;font-size:var(--t-meta);font-weight:700;vertical-align:1px}
.ag-list{list-style:none;margin:0;padding:0}
.ag-list li + li{border-top:1px solid var(--line)}
.ag-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 8px 6px 0;border:0;background:none;text-align:left;
  font:inherit;color:var(--ink);cursor:pointer;border-radius:var(--r-field)}
.ag-row:hover{background:var(--lane)}
.ag-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ag-time{flex:0 0 96px;font-size:var(--t-label);font-variant-numeric:tabular-nums;padding-left:8px}
.ag-row.is-overdue .ag-time{color:var(--overdue);font-weight:500}
.ag-mark{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-field);display:inline-flex;align-items:center;justify-content:center;background:var(--k);color:#fff;font-size:var(--t-meta);font-weight:700}
.ag-mark.is-cb{background:var(--sunken)}
.ag-mark.is-cb .ph{width:16px;height:16px;background-size:16px;flex-basis:16px}
.ag-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.ag-title{font-size:var(--t-body);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ag-contact{font-size:var(--t-label);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.ag-kind{flex:0 0 auto;font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.ag-who{flex:0 0 auto;font-size:var(--t-label);white-space:nowrap}
.ag-row.is-cancelled{opacity:.5}
.ag-row.is-cancelled .ag-title{text-decoration:line-through}
.ag-row.is-no_show{opacity:.65}
.ag-title .tick{margin-right:6px;vertical-align:-1px}

/* ---------- Dialogs ---------- */
.modal-wrap.is-centred{align-items:center}
.ap{width:min(640px,100%)}
.ap .modal-head{margin-bottom:10px}
.ap-id{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ap-kind{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-chip);color:#fff;background:var(--k);font-size:var(--t-chip);font-weight:500}
.ap-kind.k-fitting{color:#10392B}
.ap-title{font-size:var(--t-form);font-weight:700;line-height:1.15;outline:0;overflow-wrap:anywhere}
.ap-when{margin:6px 0 0;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.ap-contact{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:16px 0 4px;padding:12px 14px;border-radius:var(--r);background:var(--lane)}
.ap-contact-main{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-width:0}
.ap-contact-name{font-size:var(--t-body);font-weight:500}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:16px}
.ap-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.map-link{font-size:var(--t-meta);font-weight:500;color:var(--blue);text-decoration:none;margin-bottom:7px}
.map-link:hover{text-decoration:underline}
.ap-actions{margin-top:8px}
.ap-secondary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-danger-text{background:transparent;color:var(--coral);font-weight:700;margin-left:auto}
.btn-danger-text:hover{background:var(--coral-tint, #FDF0F2)}
.state-chip.is-done{background:#E8F7F1;color:#10392B}
.state-chip.is-cancelled{background:var(--overdue-tint);color:var(--overdue)}
.state-chip.is-no_show{background:#FFF3ED;color:#BD4E10}

.cs{position:relative}
.cs-pop{min-width:0}
.cs-picked{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px 6px 10px;border-radius:var(--r-field);background:var(--lane)}
.cs-picked .gs-main{flex:1;min-width:0}
.who-row{display:flex;gap:8px}
.who-row .field{flex:1}
.modal .pills{margin-top:0}
.modal form > .pills + .label,.modal form > .two + .label,.modal form > .cs + .label,.modal form > .cs-picked + .label,.modal form > .who-row + .label{margin-top:18px}
#nKind .pill span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;background:var(--k);vertical-align:1px}

/* New appointment: the head and the black button stay put, the fields scroll between them. */
#newWrap.modal-wrap{align-items:center;padding:24px 16px}
.new-ap{display:flex;flex-direction:column;max-height:calc(100dvh - 48px);padding:0;overflow:hidden}
.new-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.new-ap .modal-head{flex:0 0 auto;padding:22px 28px 0;margin-bottom:14px}
.new-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 28px 16px;overscroll-behavior:contain}
.new-body > .label{margin-top:18px}
.new-body > .label:first-child{margin-top:0}
.new-files{min-width:0}
.new-foot{flex:0 0 auto;padding:12px 28px 22px;border-top:1px solid var(--line)}
.new-foot .btn-form{margin-top:0}

/* Files on an appointment */
.ap-files{margin-top:20px}
.ap-files-head{font-size:var(--t-label);font-weight:700;margin:0 0 8px}
.ap-files-head span{font-weight:400;color:var(--muted)}
.ap-files[hidden]{display:none}

/* The paperclip on an appointment with files */
.ev-clip{flex:0 0 auto;display:inline-flex;align-items:center;gap:1px;font-size:10px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ev-clip svg{flex:0 0 11px}
.ag-title .ev-clip{margin-left:8px;font-size:var(--t-meta);vertical-align:1px}

/* A toast with a Retry button takes clicks (the plain ones don't, see below). */
.cal-page .toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(560px, calc(100vw - 32px))}
.toast-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-act{flex:0 0 auto;height:32px;padding:0 12px;border:0;border-radius:var(--r-field);background:rgba(255,255,255,.2);color:#fff;
  font:inherit;font-weight:700;cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.3)}
.toast-x{flex:0 0 28px;width:28px;height:28px;border:0;border-radius:var(--r-field);background:transparent;color:#fff;font-size:var(--t-form);line-height:1;cursor:pointer}
.toast-act:focus-visible,.toast-x:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ---------- Narrow ---------- */
@media (max-width:900px){
  .cal-tools{align-items:flex-start}
}
@media (max-width:640px){
  .cal{padding:0 var(--gutter) 24px}
  :root{--gutter-w:44px}
  .cal-tools{flex-direction:column;align-items:stretch;gap:10px}
  .cal-right{justify-content:space-between}
  .cal-range{font-size:var(--t-label);margin-left:6px;overflow:hidden;text-overflow:ellipsis}
  .tg.is-week{--col-min:92px}
  .tg-scroll{margin:0 calc(-1 * var(--gutter));height:max(380px, calc(100dvh - 330px))}
  .m-grid{margin:0 calc(-1 * var(--gutter))}
  .m-cell{min-height:72px;padding:3px}
  .m-ev{padding:0 3px}
  .m-ev .ev-time,.m-ev .ev-who,.m-ev .ph{display:none}
  .m-num{font-size:var(--t-meta)}
  .ag-time{flex-basis:64px;font-size:var(--t-chip)}
  .ag-main{flex-direction:column;gap:0}
  .ag-title{font-size:var(--t-label);max-width:100%}
  .ag-contact{font-size:var(--t-meta);max-width:100%}
  .ag-kind{display:none}
  .ap-grid{grid-template-columns:1fr}
  .btn-danger-text{margin-left:0}
}
@media (max-width:760px){
  #newWrap.modal-wrap{padding:0;align-items:stretch}
  .new-ap{height:100dvh;max-height:100dvh;min-height:0;border-radius:0;padding:0}
  .new-ap .modal-head{padding:16px 16px 0}
  .new-body{padding:2px 16px 16px}
  .new-foot{padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
}

/* Toasts here carry no buttons, so they never block a drop or a resize underneath. */
.cal-page .toast{pointer-events:none}

/* A call-back's card, opened over the calendar (the board page in embed mode, in a frame). */
.cardframe-wrap{position:fixed;inset:0;z-index:58;background:var(--backdrop)}
.cardframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:light}

/* ---------- Zoom: a half hour is 96px (Large), 60px or 32px; labels on the hour (bold) and :30 ---------- */
.tg-hour.is-hour{font-weight:700;color:var(--ink)}
.tg-hour.is-half{font-size:11px;color:var(--muted);opacity:.8}
.cal-zoom .sort-opt{height:32px;padding:0 12px;font-size:var(--t-label)}
.ev.is-stack{gap:2px;padding-top:5px}
.ev.is-stack .ev-line{font-size:var(--t-meta)}
.ev.is-stack .ev-title-line{font-size:var(--t-label);font-weight:500;line-height:1.2;flex:0 0 auto}
.ev.is-stack .ev-sub{flex:0 0 auto}
.ev.is-stack .ev-who-line{font-weight:500;color:var(--ink)}
@keyframes ev-flash{0%,100%{box-shadow:0 0 0 0 rgba(71,89,252,0)}30%,70%{box-shadow:0 0 0 3px rgba(71,89,252,.55)}}
.ev.is-flash,.m-ev.is-flash,.ag-row.is-flash{animation:ev-flash 1.1s ease-in-out 2;z-index:4}
.ev{-webkit-touch-callout:none}

/* ---------- Header actions ---------- */
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- Booking for …: the bar under the header ---------- */
.book-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  margin:0 var(--gutter) 8px;padding:10px 8px 10px 16px;border-radius:var(--r);background:#EEF0FE;color:#1B2A9E}
.book-main{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0;flex:1 1 auto;font-size:var(--t-label)}
.book-name{font-weight:700;color:#10196B}
.book-phone{font-variant-numeric:tabular-nums}
.book-kinds{display:flex;gap:6px;flex-wrap:wrap}
.book-kinds .pill{height:30px;background:#fff}
.book-kinds .pill::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;background:var(--k)}
.book-kinds .pill[aria-pressed="true"]{background:var(--choice-active)}
.book-x{color:#1B2A9E}
.book-x:hover{background:rgba(71,89,252,.12)}
body.is-booking .tg-col{cursor:copy}

/* ---------- Picked appointments + their action bar ---------- */
.ev.is-picked,.m-ev.is-picked,.ag-row.is-picked{box-shadow:inset 0 0 0 2px var(--ink)}
.pick-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 16px;border-radius:12px;background:#fff;box-shadow:var(--shadow-menu);max-width:calc(100vw - 32px)}
.pick-count{font-size:var(--t-label);font-weight:500;white-space:nowrap}

/* ---------- Right-click menu ---------- */
.ctx{position:fixed;z-index:62;min-width:200px;max-width:280px;padding:6px;background:#fff;border-radius:10px;box-shadow:var(--shadow-menu);
  display:flex;flex-direction:column}
.ctx-item{height:36px;border:0;background:none;border-radius:var(--r-field);padding:0 12px;text-align:left;font:inherit;
  font-size:var(--t-label);font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-item:hover,.ctx-item:focus{background:var(--sunken);outline:none}
.ctx-item:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.ctx-item.is-danger{color:var(--coral);font-weight:700}
.ctx-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---------- Texts on an appointment ---------- */
.ap-texts{margin-top:20px}
.ap-texts-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ap-texts-top .ap-files-head{margin:0}
.ap-texts-list{list-style:none;margin:0;padding:0}
.ap-text{padding:8px 0;border-top:1px solid var(--line)}
.ap-text-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-text-status{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--r-chip);font-size:var(--t-meta);font-weight:500;
  background:var(--sunken);color:var(--muted)}
.ap-text-status.is-sent{background:#ECFDF7;color:#05643F}
.ap-text-status.is-blocked-trial-{background:#FFF3ED;color:#9A3F0D}
.ap-text-status.is-failed,.ap-text-status.is-invalid-number{background:#FDF2F3;color:#B53042}
.ap-text-meta{font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.ap-text-body{margin:4px 0 0;font-size:var(--t-label);line-height:1.35;overflow-wrap:anywhere}
.ap-text-none{font-size:var(--t-label);color:var(--muted);padding:4px 0}

@media (max-width:640px){
  .book-bar{margin:0 0 8px;border-radius:0;padding-left:var(--gutter)}
  .pick-bar{left:16px;right:16px;transform:none;bottom:16px}
  .pick-count{margin-right:auto}
  .cal-zoom .sort-opt{padding:0 8px}
}

/* ---------- Jumped-to item: pulses, then a faint highlight for a few seconds ---------- */
@keyframes ev-focus{0%,100%{box-shadow:0 0 0 0 rgba(231,108,122,0);background-image:none}
  25%,75%{box-shadow:0 0 0 3px var(--coral);background-image:linear-gradient(rgba(231,108,122,.14),rgba(231,108,122,.14))}}
.is-focus-pulse{animation:ev-focus .6s ease-in-out 3;z-index:5}
.is-focus-glow{box-shadow:0 0 0 2px rgba(231,108,122,.45);background-image:linear-gradient(rgba(231,108,122,.07),rgba(231,108,122,.07));
  transition:box-shadow .6s}
.ev.is-focus-pulse,.ev.is-focus-glow{z-index:5}
/* Dates that jump to the calendar */
.date-link{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;border-radius:3px}
.date-link:hover{text-decoration-color:currentColor}
.date-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Type chips: which kinds show, on every view ---------- */
.type-chips{display:flex;align-items:center;gap:6px;padding:12px 0 0;overflow-x:auto;scrollbar-width:none;flex-wrap:wrap}
.type-chips::-webkit-scrollbar{display:none}
.tchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:16px;flex:0 0 auto;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong);font:inherit;font-size:var(--t-label);color:var(--muted);cursor:pointer;white-space:nowrap}
.tchip:hover{color:var(--ink)}
.tchip[aria-pressed="true"]{background:var(--choice-active);box-shadow:none;color:var(--choice-active-ink);font-weight:500}
.tchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tchip-dot{width:9px;height:9px;border-radius:3px;background:var(--k);flex:0 0 auto}
.tchip.is-cb .tchip-dot{background:#fff;box-shadow:inset 0 0 0 1.5px var(--muted)}
.tchip[aria-pressed="false"] .tchip-dot{opacity:.45}
.tchip-n{font-size:var(--t-meta);font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400}
.tchip-n.is-zero{opacity:.6}
.tchip-sep{width:1px;height:20px;background:var(--line-strong);margin:0 4px;flex:0 0 auto}
/* Done appointments are faded unless "Cancelled/done" is on */
body:not(.show-closed) .ev.ev-ap.is-done,body:not(.show-closed) .ag-row.is-done{opacity:.55}
@media (max-width:640px){
  .type-chips{flex-wrap:nowrap;margin:0 calc(-1 * var(--gutter));padding:10px var(--gutter) 0}
}

/* ---------- Nearby hint (static/nearby.js, compact) ---------- */
.n-nearby{margin-top:8px;padding:8px 10px;border-radius:var(--r-field);background:var(--lane)}
.n-nearby + .label{margin-top:18px}
.book-near{flex:1 1 100%;min-width:0}
.book-near .fun-pick{background:#fff}