/* Derived from the approved codex/desktop-admin-figma-redesign WCC tokens. */
:root { --canvas:#fff; --surface-soft:#f7f8f9; --ink:#223228; --muted:rgba(34,50,40,.72); --line:rgba(34,50,40,.12); --accent:#1f5d42; --accent-deep:#1f5d42; --shadow:0 8px 28px rgba(25,22,19,.05); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.5 Urbanist,Arial,sans-serif; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,.subscription-link { min-height:44px; border:1px solid var(--line); border-radius:14px; padding:9px 16px; background:#fff; color:var(--ink); cursor:pointer; font-weight:700; }
button:hover,.subscription-link:hover { background:var(--surface-soft); border-color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.primary { background:var(--accent-deep); color:white; }
.primary:hover { background:var(--accent); color:white; }
h1,h2,h3 { font-family:Urbanist,Arial,sans-serif; line-height:1.15; margin:0; }
h1 { font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-.025em; }
h2 { font-size:24px; }
h3 { font-size:18px; }
p { margin:8px 0 0; }
.calendar-app { padding:24px; max-width:1600px; margin:auto; min-width:0; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.intro>p:last-child { color:var(--muted); margin-top:12px; }
.toolbar,.period-toolbar,.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.toolbar { margin:0 0 24px; }
.actions { gap:8px; }
.segmented { display:flex; padding:4px; border:1px solid var(--line); background:var(--surface-soft); border-radius:18px; gap:4px; }
.segmented button { border-color:transparent; background:transparent; }
.segmented button[aria-pressed=true] { background:var(--accent-deep); color:#fff; }
.period-toolbar { margin-bottom:8px; }
.period-toolbar nav { display:flex; gap:8px; }
#previous,#next { font-size:24px; line-height:1; min-width:44px; padding:6px 12px; }
.calendar-status { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:8px 0 16px; color:var(--muted); font-size:13px; }
.calendar-status p { margin:0; }
#refresh { min-height:36px; font-size:13px; padding:5px 12px; }
#calendar { min-height:200px; }
.month { border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.weekdays { background:var(--surface-soft); text-align:center; font-size:12px; font-weight:700; }
.weekdays span { padding:12px 4px; }
.month-day { border-top:1px solid var(--line); border-right:1px solid var(--line); padding:8px; min-height:150px; min-width:0; }
.month-day:nth-child(7n) { border-right:0; }
.month-day.is-muted { background:#fafbf9; }
.day-number { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; width:30px; height:30px; margin-bottom:6px; font-size:13px; }
.is-today .day-number { background:var(--accent-deep); color:white; }
.is-muted .day-number { color:var(--muted); }
.event { display:block; width:100%; min-width:0; text-align:left; border:1px solid var(--line); border-left:4px solid var(--event-color); border-radius:14px; padding:12px 16px; background:var(--surface-soft); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; font-weight:400; cursor:pointer; }
.event.is-all-day { border-top:2px solid var(--event-color); }
.event:hover { background:#edf2e9; }
.event-title { display:block; font-weight:700; }
.event-meta { display:block; font-size:13px; color:var(--muted); margin-top:4px; }
.month-day .event { font-size:12px; padding:6px; margin-bottom:4px; border-radius:8px; min-height:44px; }
.month-day .event-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.month-day .event-meta { font-size:11px; }
.month-day .event-source { display:none; }
.more { display:block; margin-top:4px; width:100%; font-size:12px; padding:6px; }
.day-group { display:grid; grid-template-columns:130px minmax(0,1fr); gap:24px; padding:20px 0; border-top:1px solid var(--line); }
.day-group h3 { padding-top:10px; font-size:18px; }
.day-events { display:grid; gap:8px; min-width:0; }
.week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.week .day-group { display:block; border-top:0; border-right:1px solid var(--line); padding:12px 8px; }
.week .day-group:last-child { border-right:0; }
.week h3 { padding:0 0 16px; font-size:16px; }
.week .event { padding:10px 8px; font-size:13px; }
.empty { padding:24px 16px; color:var(--muted); background:var(--surface-soft); border-radius:18px; }
.week .empty { padding:12px 0; font-size:12px; background:transparent; }
.timezone { color:var(--muted); font-size:12px; margin-top:16px; }
dialog { color:var(--ink); width:min(620px,calc(100% - 24px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 44px rgba(25,22,19,.12); padding:24px; overflow:auto; }
dialog::backdrop { background:rgba(34,50,40,.3); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dialog-header button { flex-shrink:0; padding:6px 12px; font-size:24px; }
dialog>p { color:var(--muted); margin:16px 0; }
.source-row { display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 0; cursor:pointer; }
.source-row input { accent-color:var(--accent); width:20px; height:20px; }
.source-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; background:var(--event-color); }
.done { margin-top:16px; width:100%; }
.subscription-row { border-top:1px solid var(--line); padding:16px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.subscription-row strong { flex:1 1 180px; }
.subscription-link { display:inline-flex; align-items:center; text-decoration:none; }
#manual-copy { display:grid; gap:8px; }
#manual-copy input { min-width:0; width:100%; padding:12px; border:1px solid var(--line); border-radius:14px; }
#event-dialog section { margin-top:24px; }
#event-dialog p { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:900px) { .week { display:block; } .week .day-group { display:grid; grid-template-columns:100px minmax(0,1fr); border-right:0; border-top:1px solid var(--line); padding:16px; } .week .day-group:first-child { border-top:0; } .week h3 { padding:8px 0; } }
@media(max-width:600px) {
 .calendar-app { padding:16px 12px; }
 .toolbar { gap:12px; margin:0 0 20px; }
 .actions { width:100%; }
 .actions button { flex:1 1 130px; padding:9px 10px; font-size:13px; }
 .period-toolbar { gap:12px; }
 .period-toolbar h2 { font-size:22px; }
 .day-group { grid-template-columns:1fr; gap:12px; padding:16px 0; }
 .day-group h3 { padding:0; }
 .month { border-radius:14px; }
 .month-day { padding:3px; min-height:100px; }
 .day-number { font-size:12px; width:26px; height:26px; }
 .month-day .event { font-size:11px; padding:4px 2px; border-left-width:3px; border-radius:6px; }
 .month-day .event-meta { display:none; }
 .more { font-size:11px; padding:4px 0; }
 dialog { padding:16px; }
 .dialog-header h2 { font-size:22px; }
 .week .day-group { grid-template-columns:1fr; gap:8px; }
}