/* Connect Calendar stage 2: the calendar screen (cal/calendar.js). Colours come from /sign/connect-sign.css. */
.cv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cv-bar h2 { font-size: 18px; margin: 0 8px 0 4px; min-width: 150px; }
.cv-bar .grow { flex: 1; }
.cv-bar .cv-arrow { font-size: 20px; line-height: 1; padding: 2px 10px 4px; }
.cv-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.cv-views button { border: 0; background: #fff; padding: 6px 12px; font-weight: 600; font-size: 13px; color: var(--muted); }
.cv-views button.on { background: var(--brand); color: var(--brand-on); }
.cv-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; font-size: 13px; }
.cv-panel > summary { padding: 10px 14px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cv-panel > summary .muted { font-weight: 400; font-size: 13px; }
.cv-panel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 32px; padding: 0 14px 14px; }
.cv-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 4px 0 6px; }
.cv-panel .acct { font-size: 12px; color: var(--muted); margin: 8px 0 2px; word-break: break-all; }
.cv-panel label.calrow { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; cursor: pointer; }
.cv-panel .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: 0 0 12px; margin-top: 3px; }
.cv-tag { font-size: 11px; color: var(--muted); font-weight: 400; }
.cv-panel .person { display: flex; align-items: center; gap: 6px; padding: 3px 0; max-width: 360px; }
.cv-panel .person button { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; margin-left: auto; }
.cv-panel select { max-width: 360px; }
.cv-panel .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cv-main { min-width: 0; }

/* time grid (day and week) */
.tg { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tg-x { overflow-x: auto; }
.tg-head, .tg-allday, .tg-inner { display: grid; grid-template-columns: 56px repeat(var(--n), minmax(var(--minw, 90px), 1fr)); }
.tg-head > div { padding: 6px 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tg-head > div:first-child, .tg-allday > div:first-child { border-left: 0; }
.tg-head .num { display: block; font-size: 18px; color: var(--ink); }
.tg-head .today .num { color: var(--brand-on); background: var(--brand); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; }
.tg-head .who { font-size: 13px; color: var(--ink); }
.tg-allday > div { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2px; min-height: 26px; }
.tg-allday .lbl { font-size: 11px; color: var(--muted); padding: 6px 4px; text-align: right; }
.tg-scroll { height: calc(100vh - 290px); min-height: 420px; overflow-y: auto; position: relative; }
.tg-times > div { height: var(--hh); font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.tg-col { position: relative; height: calc(var(--hh) * 24); border-left: 1px solid var(--line); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc(var(--hh) / 2)); }
.tg-col.off { background-color: #FAFAFA; }
/* Today, in the views that show more than one day: a light tint down its column (or cell, or list heading). */
.tg-col.today, .tg-allday > div.today { background-color: var(--brand-tint); }
.tg-head > div.tint { background: var(--brand-tint); }
/* Side by side: one column per calendar; a calendar's later columns get a lighter divider inside its day. */
.cv-views button.on.dark { background: var(--chrome, #1F2937); color: #fff; }
.tg-head .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.tg-head > div.src { font-weight: 600; }
.tg-head > div.src .d-block { display: block; font-weight: 400; }
.tg-head > div.src.small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 4px 6px; }
.tg-days > div { border-bottom-color: transparent; }
.tg.side .tg-head > div.sub, .tg.side .tg-allday > div.sub, .tg.side .tg-col.sub { border-left: 1px dashed #E5E7EB; }
.tg.side .tg-head > div.people, .tg.side .tg-allday > div.people, .tg.side .tg-col.people { border-left: 2px solid var(--line); }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: #E11D48; z-index: 4; pointer-events: none; }
.ce { position: absolute; border-radius: 6px; padding: 2px 5px; font-size: 12px; line-height: 1.25; overflow: hidden; cursor: pointer; z-index: 2;
  background: color-mix(in srgb, var(--c) 16%, #fff); border-left: 4px solid var(--c); color: #1A1A1A; }
.ce:hover { z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ce b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce .t { color: #444; font-size: 11px; }
.ce.tent, .chip.tent { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #fff) 0 6px, #fff 6px 10px); }
.ce.declined, .chip.declined { opacity: .55; text-decoration: line-through; }
.ce.free, .chip.free { background: #fff; border: 1px dashed var(--c); border-left: 4px solid var(--c); }
.ce.booked, .chip.booked { border-left-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ce.claim, .chip.claim { background: var(--brand-tint); border: 1px dashed var(--brand); border-left: 4px dashed var(--brand); }
.ce.busy-other { background: color-mix(in srgb, var(--c) 10%, #fff); border-left-color: var(--c); cursor: default; }
/* A colleague's meeting in with yours (combined Work week and Week): lighter, dashed, so yours stand out. */
.ce.busy-other.faded { opacity: .8; border-left-style: dashed; background: color-mix(in srgb, var(--c) 7%, #fff); }
/* Each colleague keeps their own colour; Away is a stronger tint and Tentative is striped, both labelled. */
.ce.busy-other.oof { background: color-mix(in srgb, var(--c) 20%, #fff); }
.ce.busy-other.tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, #fff) 0 6px, #fff 6px 10px); }
.bk.os { background: #475569; color: #fff; }
.cv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; margin: 6px 0 8px; }
.cv-legend .lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 4px; font: inherit; color: inherit; cursor: pointer; }
.cv-legend .lg:hover { background: rgba(0, 0, 0, .05); }
.cv-legend .lg:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cv-legend .lg.off { opacity: .45; text-decoration: line-through; }
.bk { display: inline-block; font-size: 10px; font-weight: 700; color: var(--brand-on); background: var(--brand); border-radius: 4px; padding: 0 4px; margin-right: 3px; vertical-align: 1px; }

/* month */
.mg { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mg-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mg-row.h > div { padding: 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.mg-cell { min-height: 108px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px; cursor: pointer; min-width: 0; }
.mg-cell:nth-child(7n+1) { border-left: 0; }
.mg-cell.other { background: #FAFAFA; }
.mg-cell .d { font-size: 12px; font-weight: 600; display: inline-block; min-width: 22px; text-align: center; border-radius: 11px; }
.mg-cell.today { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--brand); }
.mg-cell.today .d { background: var(--brand); color: var(--brand-on); }
.chip { display: block; font-size: 11px; border-radius: 4px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  background: color-mix(in srgb, var(--c) 16%, #fff); border-left: 3px solid var(--c); }
.more { font-size: 11px; font-weight: 600; color: var(--brand-ink); margin-top: 2px; background: none; border: 0; padding: 0 4px; }

/* list */
.lv { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lv-day { padding: 8px 14px; background: #FAFAFA; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); }
.lv-day.today { background: var(--brand-tint); color: var(--brand-ink); }
.lv-item { display: grid; grid-template-columns: 140px 12px 1fr; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.lv-item:hover { background: var(--brand-tint); }
.lv-item .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lv-item .sub { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .lv-item { grid-template-columns: 1fr; } .lv-item .sw { display: none; } }

/* event card + editor */
.ev-h { display: flex; gap: 8px; align-items: flex-start; }
.ev-h .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--c); margin-top: 6px; flex: 0 0 14px; }
.ev-sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; font-size: 14px; }
.ev-people li { list-style: none; padding: 2px 0; }
.ev-people { padding-left: 0; margin: 0; }
.rsp { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 0 7px; margin-left: 4px; background: #EEE; color: #444; }
.rsp.accepted, .rsp.organizer { background: var(--ok-bg); color: var(--ok); }
.rsp.declined { background: #FDE2E2; color: #B42318; }
.rsp.tentative { background: #FEF3C7; color: #92400E; }
.booking-box { background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 45%, #fff); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.lead-g { display: flex; align-items: center; gap: 10px; }
.lead-g > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ed-lead { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.ans { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; font-size: 13px; margin-top: 6px; }
.ans dt { color: var(--muted); font-weight: 500; }
.ans dd { margin: 0; word-break: break-word; }
.modal-card.wide { max-width: 900px; padding: 24px; }
.ed-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.ed-col { min-width: 0; display: flex; flex-direction: column; }
.ed-col .ed-notes { flex: 1 1 auto; min-height: 110px; }
.ed-foot { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 760px) { .ed-cols { grid-template-columns: minmax(0, 1fr); } .ed-col .ed-notes { min-height: 0; } }
.ed-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
/* Scheduling helper (owner 2026-10-14): each invitee's status, and a day strip of everyone's busy times. */
.ed-who { list-style: none; margin: 6px 0 0; padding: 0; }
.ed-who li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #EEF0F3; font-size: 14px; }
.ed-who .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-who .det { font-size: 12px; color: var(--muted); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-who button { border: 0; background: none; color: #666; font-size: 16px; line-height: 1; padding: 2px 6px; }
.stp { border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stp.free { background: #E6F4EA; color: #1E7B34; } .stp.busy { background: #FDE7E5; color: #B42318; }
.stp.tentative { background: #FEF3C7; color: #92400E; } .stp.oof { background: #EDE9FE; color: #5B21B6; }
.stp.unknown, .stp.wait { background: #F1F1F1; color: #5B636B; }
.ed-sum { font-size: 13px; font-weight: 600; margin-top: 6px; } .ed-sum.bad { color: #B42318; } .ed-sum.ok { color: #1E7B34; }
.hs { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.hs-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); height: 30px; border-top: 1px solid #EEF0F3; }
.hs-row.hs-head { height: 22px; border-top: 0; }
.hs-name { padding: 6px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-line { position: relative; cursor: pointer; background: repeating-linear-gradient(90deg, #EEF0F3 0 1px, transparent 1px calc(100% / var(--h, 12))); }
.hs-head .hs-line { cursor: default; background: none; }
.hs-line.nosee { background: repeating-linear-gradient(135deg, #F7F7F8 0 6px, #EFEFF1 6px 12px); }
.hs-hr { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.hs-b { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; padding: 3px 5px; box-sizing: border-box; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.hs-b.busy, .hs-legend i.busy { background: #F8B4AE; } .hs-b.tentative, .hs-legend i.tentative { background: #FCD34D; }
.hs-b.oof, .hs-legend i.oof { background: #C4B5FD; } .hs-b.workingElsewhere { background: #BAE6FD; }
.hs-legend i.nosee { background: #F1F1F1; border: 1px solid #D0D5DB; }
.hs-sel { position: absolute; top: 0; bottom: 0; box-sizing: border-box; background: rgba(18, 214, 107, .14); border-left: 2px solid #12D66B; border-right: 2px solid #12D66B; pointer-events: none; }
.hs-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.hs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 760px) { .hs-row { grid-template-columns: 90px minmax(0, 1fr); } .hs-name { padding: 6px; font-size: 12px; } }
/* Repeat (owner 2026-10-15): No repeat | Daily | Monthly | Yearly, then that kind's choices. */
.ed-rep { display: flex; flex-direction: column; gap: 8px; }
.ed-rep .form-label { margin-bottom: 0; }
.rp-seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rp-seg button { flex: 1 1 0; border: 0; background: #fff; height: 34px; font-weight: 600; font-size: 13px; color: var(--muted); }
.rp-seg button + button { border-left: 1px solid var(--line); }
.rp-seg button.on { background: var(--chrome, #2A2D31); color: #fff; }
.rp-days { display: flex; gap: 5px; }
.rp-days button { flex: 1 1 0; height: 36px; border-radius: 8px; border: 1px solid #D0D5DB; background: #fff; font-weight: 600; font-size: 13px; padding: 0; }
.rp-days button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.rp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-top: 6px; }
.rp-line .form-check-input { margin: 0; }
.rp-auto { width: auto; display: inline-block; }
.rp-link { border: 0; background: none; padding: 0; color: var(--brand-ink, #0B7A3E); font-weight: 600; font-size: 13px; }
.rp-sum { background: var(--brand-tint); color: var(--brand-ink, #0B7A3E); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; margin-top: 8px; }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ed-chips span { background: #F1F1F1; border-radius: 99px; padding: 2px 4px 2px 10px; font-size: 13px; }
.ed-chips button { border: 0; background: none; color: #666; font-size: 15px; line-height: 1; }

/* Add to leads: the line-of-business pick */
.lead-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.lead-lines label { display: flex; gap: 8px; align-items: center; padding: 6px 0; cursor: pointer; font-size: 15px; }