/* Calendar: calm cards on the shared band (styles.css: .wsBand, .wsHeader,
   .wsBody, .calmCard). Soft tints instead of hard borders; today and days with
   entries are marked clearly but gently. */
.calCard { display:grid; gap:12px; padding:20px 18px; min-width:0; }
.calCardHead .eyebrow, .calMonth .eyebrow { color:#6b8a7b; }
.calCardHead h2 { margin-top:5px; color:#173e38; font-size:20px; font-weight:650; letter-spacing:-.3px; }
.calCardHeadRow { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.calCard button { min-height:38px; padding:6px 14px; font-size:12.5px; font-weight:650; }

/* Month grid */
.calMonthHead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.calMonthHead h2 { color:#173e38; font-size:19px; font-weight:650; letter-spacing:-.2px; text-align:center; }
.calMonthHead button { display:grid; place-items:center; width:42px; min-height:42px; padding:0 0 3px; border-radius:50%; font-size:22px; line-height:1; }
.calWeekdays,.calGrid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; text-align:center; }
.calWeekdays span { color:#8a9c94; font-size:11px; font-weight:650; letter-spacing:.5px; }
.calCard .calDay { position:relative; display:grid; justify-items:center; align-content:start; gap:4px; min-height:48px; padding:6px 0 5px; border:0; border-radius:14px; background:transparent; box-shadow:none; color:#2b463e; font-size:14px; font-weight:550; }
.calCard .calDay:not(:disabled):active { transform:none; filter:none; background:#f1f6f3; }
.calDayNumber { display:grid; place-items:center; width:28px; height:28px; margin-top:-3px; border-radius:50%; }
.calCard .calDay.outside { color:#b3c0ba; }
.calCard .calDay:has(.dot) { color:#173e38; font-weight:700; }
.calCard .calDay.today .calDayNumber { background:#dcefe5; color:#17684e; font-weight:750; box-shadow:0 0 0 1.5px #9fcfb8; }
.calCard .calDay.selected { background:#f0f7f3; box-shadow:inset 0 0 0 1.5px #b9dcc9; }
.calCard .calDay.today.selected .calDayNumber { background:#2f7d60; color:#fff; box-shadow:none; }
.calDots { display:flex; gap:3px; height:6px; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; }
.dot.appointment { background:#45a080; }.dot.callback { background:#e2a64e; }
.calLegend { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-top:10px; border-top:1px solid #eef2ef; color:#6b8076; font-size:12px; }
.calLegend .dot + * { margin-right:8px; }
.calLegend .dot.callback { margin-left:10px; }
.calLegend button { margin-left:auto; }

/* Day and 14-day lists */
.calList { display:grid; gap:10px; }
.calEmpty { padding:6px 2px; color:#6f857b; font-size:13.5px; line-height:1.45; }
.calDayLabel { margin:10px 2px 0; color:#6b8a7b; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.calDayLabel:first-child { margin-top:0; }
.calEvent { display:grid; grid-template-columns:70px minmax(0, 1fr); gap:10px; padding:13px 14px 13px 15px; border:0; border-radius:16px; background:#f4f7f5; }
.calEvent.appointment { background:#eef7f2; box-shadow:inset 3px 0 0 #9fcfb8; }
.calEvent.callback { background:#fdf6ea; box-shadow:inset 3px 0 0 #ecc98a; }
.calEvent.past { opacity:.6; }
.calTime { display:grid; align-content:start; gap:2px; }
.calTime strong { color:#1f3a33; font-size:15px; font-weight:650; }
.calTime small { color:#6f857b; font-size:11px; line-height:1.3; }
.calBody { display:grid; gap:3px; min-width:0; }
.calKind { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.appointment .calKind { color:#2c7556; }.callback .calKind { color:#976519; }
.calName { color:#173e38; font-size:16px; font-weight:650; overflow-wrap:anywhere; }
.calMeta,.calAddress { color:#587068; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.calPhone { justify-self:start; max-width:100%; margin:4px 0 2px; padding:7px 13px; border-radius:999px; background:linear-gradient(135deg, #1c7658, #145c45); color:#fff; font-size:14px; font-weight:650; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 12px #17684e24; -webkit-tap-highlight-color:transparent; }

/* Storage not set up yet: a calm, informative card, not an error */
.calNotice { display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:14px; row-gap:4px; align-items:start; padding:18px; color:#587068; font-size:13.5px; line-height:1.5; }
.calNoticeIcon { grid-row:1 / span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:14px; background:#eaf4ee; color:#2c7556; }
.calNoticeIcon::before { content:""; width:20px; height:20px; background:currentColor; -webkit-mask:var(--cal-icon) center / contain no-repeat; mask:var(--cal-icon) center / contain no-repeat; }
.calNotice strong { align-self:center; color:#173e38; font-size:15.5px; font-weight:650; }
.calNotice code { padding:1px 5px; border-radius:6px; background:#f1f5f2; color:#40584f; font-size:12px; overflow-wrap:anywhere; }
.calendarPage { --cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }

.calFootnote { padding:2px 8px 6px; color:var(--page-ink); font-size:12px; line-height:1.55; }
.appointmentOutcome { display:grid; gap:14px; }.outcomeLead { margin:-6px 0 0; color:#587368; font-size:14px; }.outcomeFields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.outcomeFields label,.outcomeNotes { display:grid; gap:6px; color:#547166; font-size:12px; font-weight:650; }.outcomeFields input,.outcomeNotes textarea,.outcomeNotes select { width:100%; border:0; box-shadow:inset 0 0 0 1px #d8e5dd; border-radius:10px; background:#fbfdfc; color:#193f33; font:inherit; font-size:16px; padding:10px; }.outcomeNotes textarea { min-height:82px; resize:vertical; }.outcomeActions { display:flex; gap:10px; }.outcomeActions button { min-height:42px; padding:8px 13px; }.outcomeActions #saveOutcome { background:#17684e; color:#fff; }.outcomeStatus { min-height:20px; margin:0; color:#3d715b; font-size:13px; line-height:1.4; }.appointmentOutcomeButton { justify-self:start; margin-top:10px; min-height:34px; padding:5px 10px; border:0; border-radius:999px; background:#eaf4ee; color:#286348; font:inherit; font-size:12px; font-weight:650; }

@media (max-width: 360px) { .calCard { padding:18px 12px; } .calEvent { grid-template-columns:68px minmax(0, 1fr); gap:8px; padding:12px 11px 12px 13px; } .calTime strong { font-size:14px; white-space:nowrap; } }
/* Large text on a phone: time above the details so names, numbers and addresses keep the full width */
@media (max-width: 440px) { html[data-text-size] .calEvent { grid-template-columns:minmax(0, 1fr); gap:6px; } html[data-text-size] .calTime { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; } }