/* YouMail calendar, send later and the shared modal.
 *
 * The calendar reads as a ruled planner sheet: hairline rules, condensed tabular numerals, and the
 * highlighter swash from the sidebar marking today. Events are ink tabs with a coloured edge.
 * Week view places events on a 48-row grid (half hours) with generated classes, because the CSP
 * forbids inline styles.
 */

/* ---------- modal ---------- */

.modal-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); animation: fade .18s; }
.modal {
    position: fixed; z-index: 91; left: 50%; top: 8vh; transform: translateX(-50%); width: min(560px, calc(100vw - 24px));
    max-height: 84vh; display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-float);
    box-shadow: var(--shadow-float); border-top: 4px solid var(--hl); animation: modal-in .22s var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px 22px; }
.modal-head h2 { margin: 0; flex: 1; font-size: 18px; }
.modal-body { padding: 8px 22px 6px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px 22px; border-top: 1px solid var(--rule); }

/* ---------- event editor ---------- */

.event-editor .from-mail { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.when-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.when-grid .row { margin-top: 6px; }
.when-grid input[type=date] { min-width: 0; flex: 1.4; }
.when-grid input[type=time] { min-width: 0; flex: 1; }
.reminders { border: 0; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.reminders legend { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.reminder-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.reminders .btn { justify-self: start; }
.reminders p { margin: 0; }
.colors { display: flex; gap: 8px; margin: 4px 0 8px; }
.swatch-btn { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--sheet); box-shadow: 0 0 0 1px var(--rule-strong); cursor: pointer; padding: 0; }
.swatch-btn.on { box-shadow: 0 0 0 2px var(--ink); }

/* event colours */
.c-ink { --ev: var(--ink); }
.c-hl { --ev: #d9b800; }
.c-slate { --ev: var(--slate); }
.c-ok { --ev: var(--ok); }
.c-stamp { --ev: var(--stamp); }
.swatch-btn.c-ink, .swatch.c-ink { background: var(--ink); }
.swatch-btn.c-hl, .swatch.c-hl { background: var(--hl); }
.swatch-btn.c-slate, .swatch.c-slate { background: var(--slate); }
.swatch-btn.c-ok, .swatch.c-ok { background: var(--ok); }
.swatch-btn.c-stamp, .swatch.c-stamp { background: var(--stamp); }

/* ---------- calendar page ---------- */

.calendar-page { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; }
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-head h1 { margin: 0; min-width: 210px; font-stretch: var(--wide); }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-head .segmented { margin: 0; }
.cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; min-height: 0; }
.cal-body.agenda { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.month { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); overflow: hidden; }
.month-days, .month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-days span { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--rule-strong); }
.month-week + .month-week { border-top: 1px solid var(--rule); }
.day { min-height: 104px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: default; min-width: 0; transition: background .12s; }
.day + .day { border-left: 1px solid var(--rule); }
.day:hover { background: var(--sheet-2); }
.day.other { background: color-mix(in srgb, var(--paper) 55%, var(--sheet)); }
.day.other .day-num { color: var(--faint); }
.day.selected { box-shadow: inset 0 0 0 2px var(--ink); }
.day-num {
    align-self: flex-start; font-stretch: var(--narrow); font-weight: 650; font-variant-numeric: tabular-nums; font-size: 13px;
    padding: 1px 6px; margin: 0 0 2px -2px; border-radius: 2px; line-height: 18px;
}
.day.today .day-num, .week-day.today strong, .agenda-day h2.today .d {
    color: var(--on-hl); background: linear-gradient(100deg, transparent 0 2px, var(--hl) 2px calc(100% - 2px), transparent calc(100% - 2px));
}
.ev-chip {
    display: flex; gap: 5px; align-items: baseline; width: 100%; min-width: 0; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-size: 12px; line-height: 17px; padding: 1px 6px 1px 6px; border-radius: 3px; color: var(--ink);
    background: color-mix(in srgb, var(--ev) 11%, transparent); box-shadow: inset 2px 0 0 var(--ev);
}
.ev-chip:hover { background: color-mix(in srgb, var(--ev) 20%, transparent); }
.ev-chip.all-day { background: var(--ev); color: var(--sheet); box-shadow: none; font-weight: 600; }
.ev-chip.all-day.c-hl { color: var(--on-hl); }
.ev-time { font-stretch: var(--narrow); font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0; }
.ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.more { font-size: 11.5px; color: var(--muted); padding-left: 6px; }

.day-panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: 16px 16px 14px; position: sticky; top: 0; }
.day-panel h2 { display: flex; flex-direction: column; margin: 0 0 12px; font-size: 20px; font-stretch: var(--wide); }
.day-panel h2 span { font-size: 13px; color: var(--muted); font-stretch: normal; font-weight: 560; }
.day-list, .agenda-day ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.agenda-item {
    display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: none; text-align: left; font: inherit;
    padding: 7px 10px; border-radius: var(--r-control); cursor: pointer; box-shadow: inset 3px 0 0 var(--ev);
}
.agenda-item:hover { background: var(--sheet-2); }
.agenda-item .ev-time { min-width: 46px; }
.agenda-item .ev-title { flex: 1; }
.ev-where { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

.agenda { display: grid; gap: 4px; }
.agenda-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.agenda-day h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); font-weight: 560; }
.agenda-day h2 .d { font-size: 26px; font-weight: 780; font-stretch: var(--narrow); color: var(--ink); font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 2px; }
.agenda-day ul { margin: 0; }

/* week */
.week { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); overflow: hidden; }
.week-head, .week-allday, .week-grid { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.week-head { border-bottom: 1px solid var(--rule); }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; cursor: pointer; padding: 8px 0 6px; font: inherit; color: var(--muted); font-size: 12px; }
.week-day strong { font-size: 20px; color: var(--ink); font-stretch: var(--narrow); font-variant-numeric: tabular-nums; padding: 0 5px; border-radius: 2px; }
.week-allday { border-bottom: 1px solid var(--rule-strong); min-height: 30px; }
.week-allday .gutter { align-self: center; text-align: right; padding-right: 6px; font-size: 11px; }
.allday-cell { padding: 3px; display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.week-grid { max-height: 62vh; overflow-y: auto; }
.hours { display: grid; grid-template-rows: repeat(24, 44px); }
.hour { font-size: 11px; color: var(--faint); text-align: right; padding-right: 6px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.week-col {
    position: relative; display: grid; grid-template-rows: repeat(48, 22px); grid-template-columns: repeat(12, minmax(0, 1fr));
    border-left: 1px solid var(--rule);
    background-image: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 44px);
}
.week-col.today { background-color: var(--hl-wash); }
.ev-block {
    grid-column: 1 / 13; margin: 1px 2px; padding: 2px 6px; border: 0; border-radius: 4px; overflow: hidden; text-align: left; cursor: pointer;
    font: inherit; font-size: 12px; line-height: 15px; display: flex; flex-direction: column; color: var(--ink);
    background: color-mix(in srgb, var(--ev) 16%, var(--sheet)); box-shadow: inset 3px 0 0 var(--ev); z-index: 1;
}
.ev-block:hover { background: color-mix(in srgb, var(--ev) 26%, var(--sheet)); }
.ev-block .ev-where { max-width: none; font-size: 11.5px; }
.l1-0 { grid-column: 1 / 13; }
.l2-0 { grid-column: 1 / 7; } .l2-1 { grid-column: 7 / 13; }
.l3-0 { grid-column: 1 / 5; } .l3-1 { grid-column: 5 / 9; } .l3-2 { grid-column: 9 / 13; }
.l4-0 { grid-column: 1 / 4; } .l4-1 { grid-column: 4 / 7; } .l4-2 { grid-column: 7 / 10; } .l4-3 { grid-column: 10 / 13; }
.now-line { grid-column: 1 / 13; height: 2px; background: var(--stamp); align-self: start; z-index: 2; pointer-events: none; }
.at-0 { grid-row-start: 1; }
.at-1 { grid-row-start: 2; }
.at-2 { grid-row-start: 3; }
.at-3 { grid-row-start: 4; }
.at-4 { grid-row-start: 5; }
.at-5 { grid-row-start: 6; }
.at-6 { grid-row-start: 7; }
.at-7 { grid-row-start: 8; }
.at-8 { grid-row-start: 9; }
.at-9 { grid-row-start: 10; }
.at-10 { grid-row-start: 11; }
.at-11 { grid-row-start: 12; }
.at-12 { grid-row-start: 13; }
.at-13 { grid-row-start: 14; }
.at-14 { grid-row-start: 15; }
.at-15 { grid-row-start: 16; }
.at-16 { grid-row-start: 17; }
.at-17 { grid-row-start: 18; }
.at-18 { grid-row-start: 19; }
.at-19 { grid-row-start: 20; }
.at-20 { grid-row-start: 21; }
.at-21 { grid-row-start: 22; }
.at-22 { grid-row-start: 23; }
.at-23 { grid-row-start: 24; }
.at-24 { grid-row-start: 25; }
.at-25 { grid-row-start: 26; }
.at-26 { grid-row-start: 27; }
.at-27 { grid-row-start: 28; }
.at-28 { grid-row-start: 29; }
.at-29 { grid-row-start: 30; }
.at-30 { grid-row-start: 31; }
.at-31 { grid-row-start: 32; }
.at-32 { grid-row-start: 33; }
.at-33 { grid-row-start: 34; }
.at-34 { grid-row-start: 35; }
.at-35 { grid-row-start: 36; }
.at-36 { grid-row-start: 37; }
.at-37 { grid-row-start: 38; }
.at-38 { grid-row-start: 39; }
.at-39 { grid-row-start: 40; }
.at-40 { grid-row-start: 41; }
.at-41 { grid-row-start: 42; }
.at-42 { grid-row-start: 43; }
.at-43 { grid-row-start: 44; }
.at-44 { grid-row-start: 45; }
.at-45 { grid-row-start: 46; }
.at-46 { grid-row-start: 47; }
.at-47 { grid-row-start: 48; }
.len-1 { grid-row-end: span 1; }
.len-2 { grid-row-end: span 2; }
.len-3 { grid-row-end: span 3; }
.len-4 { grid-row-end: span 4; }
.len-5 { grid-row-end: span 5; }
.len-6 { grid-row-end: span 6; }
.len-7 { grid-row-end: span 7; }
.len-8 { grid-row-end: span 8; }
.len-9 { grid-row-end: span 9; }
.len-10 { grid-row-end: span 10; }
.len-11 { grid-row-end: span 11; }
.len-12 { grid-row-end: span 12; }
.len-13 { grid-row-end: span 13; }
.len-14 { grid-row-end: span 14; }
.len-15 { grid-row-end: span 15; }
.len-16 { grid-row-end: span 16; }
.len-17 { grid-row-end: span 17; }
.len-18 { grid-row-end: span 18; }
.len-19 { grid-row-end: span 19; }
.len-20 { grid-row-end: span 20; }
.len-21 { grid-row-end: span 21; }
.len-22 { grid-row-end: span 22; }
.len-23 { grid-row-end: span 23; }
.len-24 { grid-row-end: span 24; }
.len-25 { grid-row-end: span 25; }
.len-26 { grid-row-end: span 26; }
.len-27 { grid-row-end: span 27; }
.len-28 { grid-row-end: span 28; }
.len-29 { grid-row-end: span 29; }
.len-30 { grid-row-end: span 30; }
.len-31 { grid-row-end: span 31; }
.len-32 { grid-row-end: span 32; }
.len-33 { grid-row-end: span 33; }
.len-34 { grid-row-end: span 34; }
.len-35 { grid-row-end: span 35; }
.len-36 { grid-row-end: span 36; }
.len-37 { grid-row-end: span 37; }
.len-38 { grid-row-end: span 38; }
.len-39 { grid-row-end: span 39; }
.len-40 { grid-row-end: span 40; }
.len-41 { grid-row-end: span 41; }
.len-42 { grid-row-end: span 42; }
.len-43 { grid-row-end: span 43; }
.len-44 { grid-row-end: span 44; }
.len-45 { grid-row-end: span 45; }
.len-46 { grid-row-end: span 46; }
.len-47 { grid-row-end: span 47; }
.len-48 { grid-row-end: span 48; }

/* event detail */
.event-detail .modal-head .swatch { width: 12px; height: 12px; border-radius: 3px; }
.detail-line { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; }
.detail-line .icon { margin-top: 2px; color: var(--slate); }
.detail-notes { white-space: pre-wrap; background: var(--sheet-2); border-radius: var(--r-control); padding: 10px 12px; margin: 10px 0; }

/* ---------- send later ---------- */

.send-group { position: relative; display: inline-flex; }
.send-group .send-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.send-group .send-later { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 9px; border-left: 1px solid color-mix(in srgb, var(--on-primary) 30%, transparent); }
.schedule-pop {
    position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 70; width: 350px; padding: 6px; display: grid; gap: 1px;
    background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-float); box-shadow: var(--shadow-float);
    transform-origin: bottom left; animation: menu-in .16s var(--ease-out);
}
.pop-title { font-size: 12.5px; font-weight: 650; color: var(--muted); padding: 6px 10px 4px; }
.schedule-option {
    display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; font: inherit; font-size: 13.5px;
    text-align: left; padding: 8px 10px; border-radius: var(--r-control); cursor: pointer; color: var(--ink);
}
.schedule-option:hover, .schedule-option:focus-visible { background: var(--sheet-2); }
.schedule-option .muted { font-stretch: var(--narrow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-custom .row { flex-wrap: nowrap; }
.schedule-custom input { min-width: 0; flex: 1; }
.schedule-custom { border-top: 1px solid var(--rule); margin-top: 4px; padding: 10px 10px 6px; }
.schedule-custom label { margin-bottom: 6px; font-size: 12.5px; }
.schedule-custom input { height: 30px; padding: 4px 8px !important; }

.scheduled-row { cursor: default; }
.scheduled-row .send-time { margin-left: auto; font-weight: 650; font-stretch: var(--narrow); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.scheduled-row.stuck .send-time { color: var(--stamp); }
.sched-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sched-actions input { width: auto; height: 28px; padding: 3px 8px !important; }

/* ---------- reader: add to calendar ---------- */

.cal-suggest {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 28px 4px; padding: 10px 10px 10px 12px;
    background: var(--hl-wash); border: 1px solid color-mix(in srgb, var(--hl) 55%, var(--rule)); border-radius: var(--r-sheet);
}
.cal-suggest-icon { color: var(--ink); margin-top: 3px; }
.cal-suggest .grow { display: grid; gap: 4px; }
.suggestion {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border: 0; background: none; font: inherit; text-align: left;
    padding: 4px 6px; margin: -2px -6px; border-radius: var(--r-control); cursor: pointer; color: var(--ink);
}
.suggestion:hover { background: color-mix(in srgb, var(--hl) 22%, transparent); }
.suggestion .what { color: var(--muted); font-size: 13px; }
.suggestion .when { font-weight: 650; }
.suggestion .add { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.in-calendar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

/* settings */
.notify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 16px; font-size: 13.5px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .cal-body { grid-template-columns: minmax(0, 1fr); }
    .day-panel { position: static; }
}
@media (max-width: 760px) {
    .cal-head h1 { min-width: 0; font-size: 22px; flex-basis: 100%; }
    .day { min-height: 64px; padding: 4px 3px; }
    .ev-chip .ev-time { display: none; }
    .ev-chip { font-size: 11px; padding: 0 4px; }
    .week-head, .week-allday, .week-grid { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
    .ev-block .ev-time, .ev-block .ev-where { display: none; }
    .agenda-day { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .when-grid, .reminder-row { grid-template-columns: minmax(0, 1fr); }
    .cal-suggest { margin: 0 18px 4px; }
    .modal { top: 4vh; max-height: 92vh; }
    .schedule-pop { left: auto; right: -60px; width: min(300px, calc(100vw - 24px)); }
}

/* Invitations in a message: what, when, who, and your answer. */
.invite { display: grid; gap: 6px; padding: 2px 0 6px; }
.invite + .invite { border-top: 1px solid var(--rule); padding-top: 8px; }
.invite-head { display: grid; gap: 1px; }
.invite-head strong { font-size: 14.5px; }
.invite-head .when { font-weight: 600; font-size: 13.5px; }
.rsvp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rsvp .btn.small { background: var(--sheet); }
.rsvp .btn.small.primary { background: var(--primary); }
.rsvp-note { margin: 0; }
.cal-note { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; flex-wrap: wrap; }
.cal-note .icon { color: var(--slate); }