/* Calendar 1c — "Large Numeral"
   Calm, monochrome, grid-precise. Light theme. Helvetica. */

:root {
  --cal-bg: #f3f2ee;
  --cal-surface: #ffffff;
  --cal-ink: #111111;
  --cal-ink-inverse: #ffffff;
  --cal-muted: #86857f;
  --cal-faint: #a3a29c;
  --cal-out: #c2c1bb;
  --cal-line: #e6e5e0;
  --cal-line-soft: #f0efeb;
  --cal-today: #e7e6e1;
  --cal-chip: #e3e2dc;
  --cal-dock: rgba(228, 227, 222, .88);

  /* calendar colours: fill / text / meta / dot / week-track */
  --work-bg: #111111;   --work-fg: #ffffff; --work-sub: rgba(255,255,255,.62); --work-dot: #111111; --work-track: #111111;
  --personal-bg: #ffffff; --personal-fg: #111111; --personal-sub: #86857f; --personal-dot: #a4a39d; --personal-track: #a9a8a2;
  --health-bg: #e3e2dc; --health-fg: #111111; --health-sub: #6f6e68; --health-dot: #cfcec8; --health-track: #d4d3cd;

  --cal-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --r-panel: 28px;
  --r-card: 24px;
  --r-row: 22px;
  --r-event: 20px;
  --r-strip: 18px;
  --r-block: 16px;
  --r-pill: 999px;

  /* timeline geometry */
  --tl-start: 7;   /* first hour shown */
  --tl-end: 22;    /* last hour shown */
  --tl-hour: 62px; /* height of one hour in day view */
}

/* ---------- Shell ---------- */
.cal-device {
  position: relative; width: 390px; height: 844px; flex: none;
  border-radius: 50px; overflow: hidden;
  box-shadow: 0 0 0 9px #161616, 0 40px 70px -30px rgba(0,0,0,.45);
}
.cal-app {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: var(--cal-bg); color: var(--cal-ink);
  font-family: var(--cal-font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.cal-app *, .cal-app *::before, .cal-app *::after { box-sizing: border-box; }
.cal-app button { font: inherit; color: inherit; cursor: pointer; border: none; padding: 0; background: none; }

.cal-statusbar {
  flex: none; height: 54px; padding: 4px 30px 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 600;
}
.cal-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 122px; height: 35px; border-radius: 20px; background: #0b0b0b; z-index: 5; }
.cal-home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 136px; height: 5px; border-radius: 3px; background: var(--cal-ink); z-index: 5; }

.cal-content { flex: 1; min-height: 0; overflow: auto; padding: 22px 14px 130px; scrollbar-width: none; }
.cal-content::-webkit-scrollbar { display: none; }
.cal-stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Header: the large numeral ---------- */
.cal-header { flex: none; padding: 18px 22px 0; display: flex; align-items: flex-end; justify-content: space-between; }
.cal-date { display: flex; align-items: flex-end; gap: 12px; }
.cal-date-num { font-size: 92px; font-weight: 300; letter-spacing: -.065em; line-height: .78; margin-left: -4px; }
.cal-date-meta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 1px; }
.cal-date-dow { font-size: 17px; font-weight: 600; }
.cal-date-month { font-size: 14px; color: var(--cal-muted); }
.cal-nav { display: flex; gap: 8px; }
.cal-icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--cal-surface) !important; font-size: 18px; display: flex; align-items: center; justify-content: center; }

/* ---------- Week strip (Day + List views) ---------- */
.cal-strip { flex: none; display: flex; gap: 4px; padding: 22px 14px 4px; }
.cal-strip-day {
  flex: 1; height: 62px; border-radius: var(--r-strip);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.cal-strip-day small { font-size: 11px; opacity: .55; }
.cal-strip-day b { font-size: 17px; font-weight: 500; }
.cal-strip-day.is-today { background: var(--cal-today); }
.cal-strip-day.is-selected { background: var(--cal-ink); color: var(--cal-ink-inverse); }

/* ---------- Panel + section headings ---------- */
.cal-panel { background: var(--cal-surface); border-radius: var(--r-panel); padding: 16px 10px 10px; }
.cal-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 14px; font-size: 15px; font-weight: 600; }
.cal-pill-btn { background: var(--cal-line-soft) !important; border-radius: var(--r-pill); padding: 6px 12px !important; font-size: 12px; font-weight: 500; }
.cal-section-head { display: flex; justify-content: space-between; padding: 22px 8px 10px; font-size: 13px; color: var(--cal-muted); }
.cal-section-head strong { color: var(--cal-ink); font-weight: 600; }

/* ---------- Month ---------- */
.cal-month-dow, .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-dow { text-align: center; font-size: 11px; color: #9a9993; padding-bottom: 6px; }
.cal-day { width: 100%; height: 48px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cal-day > span {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500;
}
.cal-day.is-out > span { color: var(--cal-out); }
.cal-day.is-today > span { background: var(--cal-today); }
.cal-day.is-selected > span { background: var(--cal-ink); color: var(--cal-ink-inverse); }
.cal-dots { font-style: normal; display: flex; gap: 2px; height: 4px; }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--work-dot); }
.cal-dot.personal { background: var(--personal-dot); }
.cal-dot.health { background: var(--health-dot); }

/* ---------- Event card ---------- */
.cal-event {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-radius: var(--r-event); padding: 14px 16px;
  background: var(--work-bg); color: var(--work-fg); --sub: var(--work-sub);
}
.cal-event.personal { background: var(--personal-bg); color: var(--personal-fg); --sub: var(--personal-sub); }
.cal-event.health { background: var(--health-bg); color: var(--health-fg); --sub: var(--health-sub); }
.cal-event-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-event-title { font-size: 15px; font-weight: 500; }
.cal-event-meta { font-size: 12px; color: var(--sub); }
.cal-event-time { font-size: 13px; font-weight: 500; flex: none; }

/* ---------- Week: horizontal day-tracks ----------
   Blocks use --s / --e (decimal hours, e.g. 9.5 = 09:30). */
.cal-week-axis { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 0 14px 4px; }
.cal-week-axis > div { display: flex; justify-content: space-between; font-size: 10px; color: #9a9993; }
.cal-week-row {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px;
  background: var(--cal-surface); border-radius: var(--r-row); padding: 12px 14px;
  --track: var(--cal-bg); --sub: var(--cal-muted);
}
.cal-week-row.is-selected { background: var(--cal-ink); color: var(--cal-ink-inverse); --track: rgba(255,255,255,.1); --sub: rgba(255,255,255,.6); }
.cal-week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-week-day small { font-size: 11px; color: var(--sub); }
.cal-week-day b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.cal-track { position: relative; height: 30px; border-radius: 9px; background: var(--track); }
.cal-block {
  position: absolute; top: 4px; bottom: 4px; border-radius: 5px;
  left: calc((var(--s) - var(--tl-start)) / (var(--tl-end) - var(--tl-start)) * 100%);
  width: calc((var(--e) - var(--s)) / (var(--tl-end) - var(--tl-start)) * 100%);
  background: var(--work-track);
}
.cal-block.personal { background: var(--personal-track); }
.cal-block.health { background: var(--health-track); }
.cal-week-row.is-selected .cal-block { background: #fff; }
.cal-week-row.is-selected .cal-block.personal { background: rgba(255,255,255,.55); }
.cal-week-row.is-selected .cal-block.health { background: rgba(255,255,255,.3); }

/* ---------- Day: timeline ----------
   Hours use --h; events use --s / --e (decimal hours). */
.cal-timeline { position: relative; height: calc((var(--tl-end) - var(--tl-start)) * var(--tl-hour) + 12px); margin: 20px 0 130px; }
.cal-hour {
  position: absolute; left: 0; right: 0; height: 12px;
  top: calc((var(--h) - var(--tl-start)) * var(--tl-hour) - 6px);
  display: flex; align-items: center; gap: 10px;
}
.cal-hour span { width: 40px; text-align: right; font-size: 11px; color: var(--cal-faint); }
.cal-hour::after { content: ""; flex: 1; height: 1px; background: var(--cal-line); }
.cal-lane { position: absolute; left: 58px; right: 16px; top: 0; bottom: 0; }
.cal-tl-event {
  position: absolute; left: 0; right: 0; overflow: hidden;
  top: calc((var(--s) - var(--tl-start)) * var(--tl-hour));
  height: max(16px, calc((var(--e) - var(--s)) * var(--tl-hour) - 2px));
  border-radius: var(--r-block); padding: 9px 14px;
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--work-bg); color: var(--work-fg); --sub: var(--work-sub);
}
.cal-tl-event.personal { background: var(--personal-bg); color: var(--personal-fg); --sub: var(--personal-sub); }
.cal-tl-event.health { background: var(--health-bg); color: var(--health-fg); --sub: var(--health-sub); }
.cal-tl-event .cal-event-title { font-size: 14px; line-height: 1.15; }
.cal-tl-event .cal-event-meta, .cal-tl-event .cal-event-time { font-size: 11px; font-weight: 400; color: var(--sub); }
.cal-tl-event.is-short { padding: 0 14px; align-items: center; min-height: 22px; }
.cal-tl-event.is-short .cal-event-title { font-size: 12px; }
.cal-now {
  position: absolute; left: -6px; right: 0; height: 2px; margin-top: -1px; border-radius: 1px; z-index: 2;
  top: calc((var(--s) - var(--tl-start)) * var(--tl-hour)); background: var(--cal-ink);
}
.cal-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cal-ink); }

/* ---------- List / agenda ---------- */
.cal-agenda { display: flex; flex-direction: column; gap: 10px; }
.cal-agenda-card { background: var(--cal-surface); border-radius: var(--r-card); padding: 16px 18px 6px; }
.cal-agenda-card h3 { margin: 0; font-size: 13px; font-weight: 600; padding-bottom: 6px; }
.cal-agenda-item { display: grid; grid-template-columns: 12px 50px 1fr; align-items: center; padding: 10px 0; border-top: 1px solid var(--cal-line-soft); }
.cal-agenda-item .cal-dot { width: 6px; height: 6px; }
.cal-agenda-item time { font-size: 13px; color: var(--cal-muted); }
.cal-agenda-item span { font-size: 15px; font-weight: 500; }

/* ---------- Dock: segmented control + add ---------- */
.cal-dock { position: absolute; left: 16px; right: 16px; bottom: 30px; display: flex; gap: 10px; align-items: center; z-index: 4; }
.cal-segmented { flex: 1; display: flex; padding: 4px; background: var(--cal-dock); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--r-pill); }
.cal-seg { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: #6f6e68 !important; }
.cal-seg.is-active { background: var(--cal-surface) !important; color: var(--cal-ink) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cal-fab { width: 52px; height: 52px; flex: none; border-radius: 50% !important; background: var(--cal-ink) !important; color: var(--cal-ink-inverse) !important; font-size: 26px; font-weight: 300; line-height: 1; }