/* Group → Calendar: Mom's appointments (2026-10-08, Porchlight 3.0w). */

#cal-q { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: var(--t-md); color: var(--ink);
         background: var(--paper); border: 1px solid var(--silver-1); border-radius: 999px; padding: 10px 16px; min-height: 44px; }
#cal-q:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#cal-tools[hidden], #cal-past[hidden], .cal-noemail[hidden] { display: none; }
.cal-noemail { margin: 0 0 var(--s-3); }
.cal-tick { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-base); color: var(--ink);
            min-height: 44px; margin-bottom: 4px; }
.cal-tick input { width: 22px; height: 22px; accent-color: var(--pink); flex: 0 0 auto; }

.cal-day { margin-bottom: var(--s-3); }
.cal-dayh { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
            color: var(--rose); margin: var(--s-4) 0 var(--s-1); }
.cal-item { display: flex; gap: var(--s-3); width: 100%; text-align: left; font: inherit; color: var(--ink);
            background: none; border: none; border-bottom: 1px solid var(--hair); padding: var(--s-3) 0; min-height: 44px; cursor: pointer; }
.cal-item:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cal-time { flex: 0 0 5.2em; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-title { font-size: var(--t-md); font-weight: 500; overflow-wrap: anywhere; }
.cal-bell { width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; fill: none;
            stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-sub { font-size: var(--t-sm); color: var(--muted); overflow-wrap: anywhere; }
.cal-mom { align-self: flex-start; font-size: var(--t-xs); font-weight: 600; color: var(--rose);
           background: var(--pink-lo); border-radius: 999px; padding: 2px 8px; margin-top: 2px; }
#cal-past { margin: var(--s-3) 0; }

.cal-form { display: flex; flex-direction: column; gap: var(--s-2); }
.cal-form .prefs-note { margin: 0; }
.cal-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
.cal-field input, .cal-field textarea {
  font: inherit; font-size: var(--t-base); color: var(--ink); background: var(--paper); box-sizing: border-box; width: 100%;
  border: 1px solid var(--silver-1); border-radius: 12px; padding: 8px 10px; min-height: 44px; min-width: 0; }
.cal-field textarea { resize: vertical; }
.cal-field input:disabled, .cal-field textarea:disabled { opacity: 1; background: var(--silver-2); }
.cal-when { display: flex; gap: var(--s-3); align-items: flex-end; }
.cal-when .cal-field { flex: 1; }
.cal-form .send { margin: var(--s-2) 0; }