/* v4 手機行事曆: the 同步到手機行事曆 settings page (assets/meow-v4-calendar.js).
   Sections: 1 header switch + badges · 2 status card · 3 calendar list · 4 include rows · 5 notes + remove. */

/* ── 1. Header switch, badges ── */
html.v4 .v4-switch.v4cs-onoff{margin-top:5px}
html.v4 .v4-switch[disabled]{opacity:.45;cursor:default}
html.v4 .v4cs-badge{flex:none;display:inline-flex;align-items:center;padding:2px 7px;border-radius:6px;border:1px solid var(--v4-ok-line);background:var(--v4-ok-bg);color:var(--v4-ok-ink);font-size:11px;line-height:16px;font-weight:700;white-space:nowrap}
html.v4 .v4cs-badge.off{border-color:var(--v4-tile-line);background:var(--v4-tile);color:var(--v4-muted)}
html.v4 .v4cs-badge.warn{border-color:var(--v4-warn-line);background:var(--v4-warn-bg);color:var(--v4-red-text)}
html.v4 [data-v4-sub="calendar-sync"] .v4-group-title{height:24px;margin:-2px 0;padding-top:4px}

/* ── 2. Status ── */
html.v4 .v4cs-status{gap:8px;overflow:hidden;min-height:150px}
html.v4 .v4cs-big{margin:0;padding-right:64px;font-size:30px;line-height:38px;font-weight:900;color:var(--v4-ink);white-space:nowrap}
html.v4 .v4cs-big.soft{font-family:var(--v4-serif);font-size:24px;line-height:34px;letter-spacing:.04em;color:var(--v4-title)}
html.v4 .v4cs-line{margin:0;padding-right:72px;font-size:13px;line-height:19px;font-weight:700;color:var(--v4-sub)}
html.v4 .v4cs-warn,html.v4 .v4cs-note{margin:0;padding-right:72px;font-size:12px;line-height:17px}
html.v4 .v4cs-warn{font-weight:700;color:var(--v4-red-text)}
html.v4 .v4cs-note{font-weight:500;color:var(--v4-muted)}
html.v4 .v4cs-actions{display:flex;gap:8px;padding:2px 80px 0 0}
html.v4 .v4cs-actions .v4-btn{min-width:120px}
html.v4 .v4cs-status>.v4cs-cat{position:absolute;right:6px;bottom:-1px;width:74px;height:85px;object-fit:contain;pointer-events:none}

/* ── 3. 寫進哪個行事曆 ── */
html.v4 .v4cs-list{padding:12px;gap:0}
html.v4 .v4cs-cal{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0;padding:8px 0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;min-width:0}
html.v4 .v4cs-cal[disabled]{cursor:default;opacity:.6}
html.v4 .v4cs-radio{position:relative;flex:none;width:22px;height:22px;border-radius:11px;border:2px solid var(--v4-tile-line);background:var(--v4-card)}
html.v4 .v4cs-radio.on{border-color:var(--v4-brown)}
html.v4 .v4cs-radio.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--v4-brown)}
html.v4 .v4cs-dot{flex:none;width:14px;height:14px;border-radius:5px;border:1px solid rgba(59,36,23,.22)}
html.v4 .v4cs-plus{flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:5px;border:1px dashed var(--v4-brown);color:var(--v4-brown);font-size:11px}
html.v4 .v4cs-plus .v4-ic{stroke-width:3}
html.v4 .v4cs-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
html.v4 .v4cs-txt>b{max-width:100%;font-size:15px;line-height:21px;font-weight:700;color:var(--v4-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 .v4cs-txt>small{max-width:100%;font-size:12px;line-height:17px;font-weight:400;color:var(--v4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 .v4cs-new .v4cs-txt>b{color:var(--v4-red-text)}
html.v4 .v4cs-wait{margin:0;padding:10px 2px;font-size:13px;line-height:19px;font-weight:500;color:var(--v4-muted)}
html.v4 .v4cs-hint{margin:-4px 6px 0;font-size:12px;line-height:17px;font-weight:500;color:var(--v4-muted)}

/* ── 4. 一起寫進去 ── */
html.v4 .v4cs-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;min-width:0}
html.v4 .v4cs-row .v4cs-txt>small{white-space:normal}

/* ── 4b. 上班前提醒 (leather segmented buttons, like 輪班鬧鐘's 提前多久響) ── */
html.v4 .v4cs-alarm{padding:12px;gap:10px}
html.v4 .v4cs-seg{display:flex;gap:5px}
html.v4 .v4cs-seg>button{position:relative;flex:1 1 0;min-width:0;height:40px;display:flex;align-items:center;justify-content:center;padding:0 2px;border-radius:11px;border:1px solid var(--v4-tile-line);background:var(--v4-tile);color:var(--v4-sub);font-family:var(--v4-sans);font-size:13px;line-height:18px;font-weight:700;white-space:nowrap;cursor:pointer}
html.v4 .v4cs-seg>button.on{border-color:#755136;background:linear-gradient(180deg,#986e51 0%,#8a5c3f 16%,#8a5c3f 84%,#906446 100%);box-shadow:0 6px 12px rgba(70,40,20,.2),0 3px 0 #5a3a26,inset 0 1px 0 rgba(255,255,255,.14);color:#fff7ec;font-family:var(--v4-serif);font-weight:900;text-shadow:0 1px 0 rgba(70,16,10,.45)}
html.v4 .v4cs-seg>button.on::before{content:"";position:absolute;inset:2.5px;border:1.2px dashed rgba(255,241,226,.55);border-radius:7.5px;pointer-events:none}
html.v4 .v4cs-desc{margin:0;font-size:12px;line-height:17px;font-weight:500;color:var(--v4-muted)}
html.v4 .v4cs-alarm .v4cs-hint{margin:0}

/* ── 5. Notes, remove ── */
html.v4 .v4cs-notes{gap:8px}
html.v4 .v4cs-notes .v4-desc{font-size:12px;line-height:18px;color:var(--v4-muted)}
html.v4 .v4-btn.v4cs-remove{height:46px;margin-top:2px}