/* Exact route UI stylesheet from rust_app/templates/calendar.html.tera. Keep in sync. */
:root {
      --cal-bg: #0d1119;
      --cal-panel: #151c29;
      --cal-panel-strong: #1c2636;
      --cal-line: rgba(148, 163, 184, .24);
      --cal-line-strong: rgba(148, 163, 184, .42);
      --cal-text: #f4f7ff;
      --cal-muted: #b2bfd4;
      --cal-soft: #8190a9;
      --cal-accent: #7890ff;
      --cal-accent-strong: #a9b8ff;
      --cal-ok: #25c08a;
      --cal-warn: #e4a72b;
      --cal-danger: #ef6378;
      --cal-event: #7c8cff;
      --cal-task: #22b997;
      --cal-radius: 18px;
      --cal-shadow: 0 22px 70px rgba(0, 0, 0, .28);
    }

    * { box-sizing: border-box; }
    body.calendar-page {
      min-height: 100vh;
      margin: 0;
      background:
        radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--cal-accent) 22%, transparent), transparent 34rem),
        radial-gradient(circle at 91% 8%, color-mix(in srgb, var(--cal-task) 12%, transparent), transparent 30rem),
        var(--cal-bg);
      color: var(--cal-text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    button, input, textarea, select { font: inherit; }
    button, .calendar-button {
      min-height: 44px;
      border: 1px solid transparent;
      border-radius: 13px;
      padding: 9px 13px;
      color: #fff;
      background: var(--cal-accent);
      font-weight: 820;
      cursor: pointer;
    }
    button:hover, .calendar-button:hover { filter: brightness(1.08); }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
      outline: 3px solid var(--cal-accent-strong);
      outline-offset: 3px;
    }
    button.secondary, .calendar-button.secondary {
      border-color: var(--cal-line-strong);
      color: var(--cal-text);
      background: var(--cal-panel-strong);
    }
    button.danger { background: var(--cal-danger); }
    button:disabled { cursor: not-allowed; opacity: .56; }
    input, textarea, select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--cal-line-strong);
      border-radius: 12px;
      padding: 10px 11px;
      color: var(--cal-text);
      background: var(--cal-panel-strong);
    }
    textarea { min-height: 92px; resize: vertical; }
    label { display: grid; gap: 6px; color: var(--cal-muted); font-size: .84rem; font-weight: 760; }
    a { color: var(--cal-accent-strong); }
    .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

    .calendar-shell {
      width: min(1760px, 100%);
      margin: 0 auto;
      padding: clamp(12px, 2vw, 26px);
      display: grid;
      gap: 16px;
    }
    .calendar-hero {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: clamp(12px, 2vw, 18px);
      border: 1px solid var(--cal-line);
      border-radius: calc(var(--cal-radius) + 6px);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--cal-accent) 16%, var(--cal-panel)), var(--cal-panel) 58%, color-mix(in srgb, var(--cal-task) 9%, var(--cal-panel)));
      box-shadow: var(--cal-shadow);
    }
    .calendar-hero::after {
      content: '';
      position: absolute;
      inset: auto -5rem -8rem auto;
      width: 18rem;
      height: 18rem;
      border: 1px solid color-mix(in srgb, var(--cal-accent) 32%, transparent);
      border-radius: 50%;
      box-shadow: 0 0 0 2.8rem color-mix(in srgb, var(--cal-accent) 5%, transparent), 0 0 0 5.6rem color-mix(in srgb, var(--cal-task) 4%, transparent);
      pointer-events: none;
    }
    .calendar-hero-copy { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 5px; max-width: 82ch; margin: 0; }
    .calendar-interaction-hint { margin: 0; color: var(--cal-muted); font-size: .78rem; line-height: 1.4; }
    .calendar-timezone { min-width: 0; color: var(--cal-soft); font-size: .76rem; white-space: nowrap; }
    .calendar-hero-actions { position: relative; z-index: 1; display: flex; gap: 9px; flex-wrap: wrap; justify-content: end; }

    .planning-switcher {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--cal-line);
      border-radius: 15px;
      background: color-mix(in srgb, var(--cal-panel-strong) 88%, transparent);
    }
    .planning-switcher a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      border-radius: 11px;
      color: var(--cal-muted);
      font-weight: 850;
      text-decoration: none;
    }
    .planning-switcher a[aria-current="page"] {
      border: 1px solid color-mix(in srgb, #d6ddff 56%, transparent);
      color: #fff !important;
      background: linear-gradient(135deg, #596bd3, #4456bf) !important;
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--cal-accent-strong) 28%, transparent),
        0 10px 24px color-mix(in srgb, #263274 42%, transparent),
        inset 0 1px 0 rgb(255 255 255 / .24);
      text-shadow: 0 1px 1px rgb(12 19 62 / .42);
    }
    .planning-switcher a[aria-current="page"]:hover { filter: brightness(1.08); }

    .calendar-control-stack {
      --calendar-compact-controls-height: 52px;
      display: grid;
      gap: 12px;
    }
    .calendar-toolbar {
      display: grid;
      grid-template-columns: auto minmax(12rem, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      min-block-size: var(--calendar-compact-controls-height);
      padding: 6px 12px;
      border: 1px solid var(--cal-line);
      border-radius: var(--cal-radius);
      background: color-mix(in srgb, var(--cal-panel) 94%, transparent);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
      backdrop-filter: blur(18px);
    }
    .calendar-nav-buttons, .calendar-view-buttons { display: flex; gap: 6px; }
    .calendar-nav-buttons button { min-width: 44px; min-height: 40px; padding-block: 6px; padding-inline: 11px; }
    #calendar-range-title { margin: 0; text-align: center; font-size: clamp(1.05rem, 2vw, 1.45rem); letter-spacing: -.02em; }
    .calendar-view-buttons { padding: 2px 4px; border-radius: 14px; background: var(--cal-panel-strong); }
    .calendar-view-buttons button { min-height: 36px; padding: 5px 11px; color: var(--cal-muted); background: transparent; }
    .calendar-view-buttons button[aria-pressed="true"] { color: #fff; background: var(--cal-accent); }
    #calendar-arrange { min-height: 40px; padding-block: 6px; }
    .calendar-workspace {
      --calendar-task-tray-morph-duration: 360ms;
      display: grid;
      grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      transition: grid-template-columns var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1);
    }
    .calendar-task-tray {
      position: sticky;
      top: 12px;
      display: grid;
      gap: 12px;
      min-width: 0;
      inline-size: 100%;
      max-height: calc(100vh - 24px);
      padding: 14px;
      border: 1px solid var(--cal-line);
      border-radius: var(--cal-radius);
      background: var(--cal-panel);
      box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
      transition:
        inline-size var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1),
        padding var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1),
        border-radius var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1),
        box-shadow var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1),
        background-color var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1),
        transform var(--calendar-task-tray-morph-duration) cubic-bezier(.22, .8, .2, 1);
      transform: translateX(0);
    }
    .calendar-task-tray-topline { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
    .calendar-task-tray-head {
      min-width: 0;
      display: grid;
      gap: 5px;
      overflow: hidden;
      transition:
        max-inline-size 300ms cubic-bezier(.22, .8, .2, 1),
        max-block-size 300ms cubic-bezier(.22, .8, .2, 1),
        opacity 170ms ease,
        transform 300ms cubic-bezier(.22, .8, .2, 1);
    }
    .calendar-task-tray-head h2 { margin: 0; font-size: 1.02rem; }
    .calendar-task-tray-head p { margin: 0; color: var(--cal-muted); font-size: .8rem; line-height: 1.45; }
    .calendar-task-tray-toggle {
      flex: 0 0 44px;
      width: 44px;
      min-height: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 7px;
      border-radius: 12px;
      transition:
        flex-basis 360ms cubic-bezier(.22, .8, .2, 1),
        width 360ms cubic-bezier(.22, .8, .2, 1),
        height 360ms cubic-bezier(.22, .8, .2, 1),
        min-height 360ms cubic-bezier(.22, .8, .2, 1),
        padding 360ms cubic-bezier(.22, .8, .2, 1),
        border-radius 360ms cubic-bezier(.22, .8, .2, 1),
        transform 360ms cubic-bezier(.22, .8, .2, 1);
    }
    .calendar-task-tray-toggle svg { width: 18px; height: 18px; transition: transform 300ms cubic-bezier(.22, .8, .2, 1); }
    .calendar-task-tray-toggle-rail-label { display: none; color: var(--cal-muted); font-size: .7rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
    .calendar-task-tray-content-shell { min-width: 0; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 360ms cubic-bezier(.22, .8, .2, 1); }
    .calendar-task-tray-content {
      min-width: 0;
      min-height: 0;
      display: grid;
      gap: 12px;
      overflow: hidden;
      opacity: 1;
      transform: translateX(0) scale(1);
      transition: opacity 170ms ease, transform 300ms cubic-bezier(.22, .8, .2, 1);
    }
    .calendar-task-tray-content > :is(label, input, .calendar-task-list, .calendar-button, .calendar-federation-panel) {
      transform-origin: left center;
      transition: opacity 180ms ease, transform 180ms cubic-bezier(.22, .8, .2, 1);
    }
    .calendar-task-list { min-height: 5rem; display: grid; align-content: start; gap: 9px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
    .calendar-task-card {
      display: grid;
      gap: 8px;
      padding: 11px;
      border: 1px dashed color-mix(in srgb, var(--cal-task) 65%, var(--cal-line));
      border-inline-start: 5px solid var(--cal-task);
      border-radius: 14px;
      color: var(--cal-text);
      background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--cal-task) 8%, transparent) 0 8px, transparent 8px 16px),
        var(--cal-panel-strong);
    }
    .calendar-task-card[draggable="true"] { cursor: grab; }
    .calendar-task-card.is-dragging { opacity: .52; }
    .calendar-task-card strong { overflow-wrap: anywhere; }
    .calendar-task-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; color: var(--cal-muted); font-size: .75rem; }
    .calendar-task-actions { display: flex; gap: 7px; }
    .calendar-task-actions button { flex: 1 1 auto; min-height: 40px; padding: 7px 9px; }
    .calendar-federation-panel {
      padding: 10px;
      border: 1px solid var(--cal-line);
      border-radius: 14px;
      background: color-mix(in srgb, var(--cal-panel-strong) 74%, var(--cal-panel));
    }
    .calendar-federation-panel summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .82rem; font-weight: 850; }
    .calendar-federation-panel p { margin: 8px 0; color: var(--cal-muted); font-size: .76rem; line-height: 1.45; }
    .calendar-federation-status { min-height: 20px; color: var(--cal-muted); font-size: .75rem; font-weight: 760; }
    .calendar-federation-status[data-state="error"] { color: var(--cal-danger); }
    .calendar-federation-status[data-state="ok"] { color: var(--cal-ok); }

    /*
     * On desktop the full tray keeps its familiar expanded geometry. When
     * collapsed, its 48px touch target shifts into the shell-side gutter so
     * the Week/Day grid can use the recovered column space.
     */
    @media (min-width: 1041px) {
      .calendar-workspace {
        --calendar-task-tray-sticky-top: calc(74px + env(safe-area-inset-top, 0px));
      }
      .calendar-task-tray {
        top: var(--calendar-task-tray-sticky-top);
        align-self: start;
        z-index: 2;
        max-height: calc(100dvh - var(--calendar-task-tray-sticky-top) - 12px);
      }
      .calendar-workspace[data-task-tray-collapsed="true"] {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 14px;
        /* The full collapse takes the same 360ms as expansion: a brief
           content squish leads the rail morph rather than cutting away. */
        transition-duration: 280ms;
        transition-delay: 80ms;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] {
        --calendar-task-tray-rail-height: clamp(12rem, calc(100vh - var(--calendar-task-tray-sticky-top) - 12px), calc(100vh - 24px));
        --calendar-task-tray-rail-height: clamp(12rem, calc(100dvh - var(--calendar-task-tray-sticky-top) - 12px), calc(100dvh - 24px));
        inline-size: 48px;
        block-size: var(--calendar-task-tray-rail-height);
        min-block-size: var(--calendar-task-tray-rail-height);
        max-block-size: var(--calendar-task-tray-rail-height);
        padding: 0;
        gap: 0;
        overflow: hidden;
        border-radius: 14px;
        border-color: color-mix(in srgb, var(--cal-accent-strong) 46%, var(--cal-line));
        border-inline-end-color: color-mix(in srgb, var(--cal-accent-strong) 68%, var(--cal-line-strong));
        background:
          linear-gradient(90deg,
            color-mix(in srgb, var(--cal-accent) 62%, var(--cal-panel)) 0%,
            color-mix(in srgb, var(--cal-accent) 50%, var(--cal-panel-strong)) 48%,
            color-mix(in srgb, var(--cal-accent-strong) 28%, var(--cal-panel-strong)) 100%);
        box-shadow:
          0 12px 30px rgba(0, 0, 0, .16),
          7px 0 16px color-mix(in srgb, var(--cal-accent) 14%, transparent),
          inset -1px 0 0 color-mix(in srgb, #fff 24%, transparent),
          inset 1px 0 0 color-mix(in srgb, #fff 12%, transparent);
        transform: translateX(-12px);
        transition-duration: 280ms;
        transition-delay: 80ms;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-topline { block-size: 100%; min-block-size: 100%; align-items: stretch; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-head {
        max-inline-size: 0;
        max-block-size: 0;
        opacity: 0;
        transform: translateX(-12px) scale(.94);
        pointer-events: none;
        transition-duration: 280ms, 280ms, 200ms, 240ms;
        transition-delay: 80ms, 80ms, 0ms, 0ms;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content-shell {
        grid-template-rows: 0fr;
        transition-duration: 240ms;
        transition-delay: 120ms;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content {
        opacity: 0;
        transform: translateX(-12px) scale(.96);
        pointer-events: none;
        transition: opacity 80ms ease 280ms, transform 300ms cubic-bezier(.22, .8, .2, 1);
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > :is(label, input, .calendar-task-list, .calendar-button, .calendar-federation-panel) {
        opacity: 0;
        transform: translateX(-10px) scale(.94, .9);
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > label { transition-delay: 0ms, 0ms; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > input { transition-delay: 35ms, 35ms; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > .calendar-task-list { transition-delay: 70ms, 70ms; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > .calendar-button { transition-delay: 105ms, 105ms; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content > .calendar-federation-panel { transition-delay: 140ms, 140ms; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle {
        transition-duration: 280ms, 280ms, 280ms, 280ms, 280ms, 280ms, 280ms;
        transition-delay: 80ms, 80ms, 80ms, 80ms, 80ms, 80ms, 80ms;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle {
        flex-basis: 100%;
        width: 100%;
        min-width: 44px;
        height: auto;
        min-height: calc(var(--calendar-task-tray-rail-height) - 2px);
        padding: 8px 3px;
        border-color: transparent;
        border-radius: 13px;
        background: transparent;
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
        align-content: center;
        gap: 0;
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle svg { display: none; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle-rail-label {
        display: inline-block;
        color: color-mix(in srgb, var(--cal-text) 94%, var(--cal-accent-strong));
        font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
        font-size: .9rem;
        font-weight: 850;
        letter-spacing: .085em;
        line-height: 1.1;
        text-transform: uppercase;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* A softened outline and a leftward, fading title-card shadow keep
           the vertical label polished without sacrificing readability. */
        -webkit-text-stroke: .18px color-mix(in srgb, var(--cal-panel) 82%, transparent);
        text-shadow:
          -1px 0 0 color-mix(in srgb, var(--cal-panel) 62%, transparent),
          -2px 0 2px color-mix(in srgb, var(--cal-panel) 50%, transparent),
          -4px 0 4px color-mix(in srgb, var(--cal-panel) 38%, transparent),
          -8px 0 9px color-mix(in srgb, var(--cal-panel) 25%, transparent),
          -14px 0 16px color-mix(in srgb, var(--cal-panel) 13%, transparent),
          0 1px 0 color-mix(in srgb, #fff 18%, transparent);
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle:focus-visible { outline-offset: -3px; }
    }

    .calendar-main { min-width: 0; display: grid; gap: 14px; }
    .calendar-surface {
      min-width: 0;
      overflow: auto;
      border: 1px solid var(--cal-line);
      border-radius: var(--cal-radius);
      background: var(--cal-panel);
      box-shadow: 0 18px 52px rgba(0, 0, 0, .2);
    }
    .calendar-loading { min-height: 32rem; display: grid; place-items: center; color: var(--cal-muted); }

    .calendar-month-grid {
      min-width: 780px;
      display: grid;
      grid-template-columns: repeat(7, minmax(105px, 1fr));
    }
    .calendar-weekday {
      position: sticky;
      top: 0;
      z-index: 4;
      min-height: 42px;
      display: grid;
      place-items: center;
      border-bottom: 1px solid var(--cal-line);
      color: var(--cal-muted);
      background: color-mix(in srgb, var(--cal-panel-strong) 95%, transparent);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .calendar-day {
      min-height: 142px;
      display: grid;
      align-content: start;
      gap: 7px;
      padding: 8px;
      border-inline-end: 1px solid var(--cal-line);
      border-bottom: 1px solid var(--cal-line);
      background: color-mix(in srgb, var(--cal-panel) 96%, transparent);
    }
    .calendar-day:nth-child(7n) { border-inline-end: 0; }
    .calendar-day.is-outside { color: var(--cal-soft); background: color-mix(in srgb, var(--cal-bg) 48%, var(--cal-panel)); }
    .calendar-day.is-today { position: relative; z-index: 1; box-shadow: none; }
    .calendar-day.is-today::after { content: ''; position: absolute; inset: 0; z-index: 1; box-sizing: border-box; border: 2px solid var(--cal-accent); pointer-events: none; }
    .calendar-day.is-drag-over, [data-calendar-drop-target].is-drag-over { background: color-mix(in srgb, var(--cal-accent) 18%, var(--cal-panel)); box-shadow: inset 0 0 0 3px var(--cal-accent); }
    .calendar-day-number {
      justify-self: start;
      min-width: 38px;
      min-height: 38px;
      padding: 5px;
      border-radius: 999px;
      color: inherit;
      background: transparent;
      font-variant-numeric: tabular-nums;
    }
    .calendar-day.is-today .calendar-day-number { color: #fff; background: var(--cal-accent); }
    .calendar-day-items { display: grid; gap: 5px; }
    [data-calendar-context]:focus-visible {
      outline: 3px solid var(--cal-accent-strong);
      outline-offset: -3px;
    }

    .calendar-time-view { min-width: 760px; display: grid; gap: 0; }
    .calendar-time-days { display: grid; grid-template-columns: repeat(var(--calendar-days, 1), minmax(210px, 1fr)); }
    .calendar-time-day { min-width: 0; border-inline-end: 1px solid var(--cal-line); }
    .calendar-time-day:last-child { border-inline-end: 0; }
    .calendar-time-day-head {
      position: sticky;
      top: 0;
      z-index: 4;
      display: grid;
      gap: 3px;
      min-height: 60px;
      place-content: center;
      border-bottom: 1px solid var(--cal-line);
      background: color-mix(in srgb, var(--cal-panel-strong) 96%, transparent);
      text-align: center;
    }
    .calendar-time-day-head strong { font-size: .9rem; }
    .calendar-time-day-head span { color: var(--cal-muted); font-size: .76rem; }
    .calendar-all-day-lane { min-height: 62px; display: grid; align-content: start; gap: 5px; padding: 7px; border-bottom: 2px solid var(--cal-line-strong); }
    .calendar-time-hour-grid { position: relative; --calendar-hour-height: 76px; }
    .calendar-hour {
      position: relative;
      height: var(--calendar-hour-height, 76px);
      display: grid;
      align-content: start;
      gap: 5px;
      padding: 7px 7px 7px 48px;
      border-bottom: 1px solid var(--cal-line);
    }
    .calendar-hour-label { position: absolute; inset: 7px auto auto 7px; color: var(--cal-soft); font-size: .7rem; font-variant-numeric: tabular-nums; }
    .calendar-time-entry {
      position: absolute;
      z-index: 2;
      inset-inline-start: calc(48px + (100% - 55px) * var(--lane-index, 0) / var(--lane-count, 1));
      inline-size: calc((100% - 55px) / var(--lane-count, 1) - 5px);
      top: calc(var(--entry-start, 0) * var(--calendar-hour-height, 76px));
      block-size: max(24px, calc(var(--entry-duration, 1) * var(--calendar-hour-height, 76px) - 4px));
      align-content: start;
      overflow: hidden;
    }
    .calendar-time-drop-ghost {
      position: absolute;
      z-index: 3;
      inset-inline-start: 48px;
      inset-inline-end: 12px;
      display: grid;
      align-content: start;
      gap: 2px;
      padding: 6px 9px;
      border: 2px dashed var(--cal-accent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--cal-accent) 13%, var(--cal-panel-strong));
      box-shadow:
        inset 0 3px 0 0 var(--cal-accent),
        0 12px 28px rgba(0, 0, 0, .32);
      color: var(--cal-text);
      pointer-events: none;
      transition: top .08s linear, height .08s linear;
    }
    .calendar-time-drop-ghost-time { font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .015em; }
    .calendar-time-drop-ghost-hint { color: var(--cal-muted); font-size: .63rem; font-weight: 750; }
    .calendar-surface.calendar-pointer-dragging,
    .calendar-surface.calendar-pointer-dragging * { cursor: grabbing !important; }

    .calendar-entry {
      --entry-color: var(--cal-event);
      min-width: 0;
      display: grid;
      gap: 3px;
      padding: 7px 8px;
      border: 1px solid color-mix(in srgb, var(--entry-color) 64%, var(--cal-line));
      border-inline-start: 5px solid var(--entry-color);
      border-radius: 10px;
      color: var(--cal-text);
      background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--entry-color) 10%, transparent) 0 7px, transparent 7px 14px),
        color-mix(in srgb, var(--entry-color) 14%, var(--cal-panel-strong));
      font-size: .76rem;
      line-height: 1.25;
      text-align: start;
      text-decoration: none;
      overflow: hidden;
    }
    button.calendar-entry { width: 100%; min-height: 0; cursor: pointer; }
    .calendar-entry[data-kind="task_block"] { --entry-color: var(--cal-task); border-style: dashed; }
    .calendar-entry-kind { color: color-mix(in srgb, var(--entry-color) 72%, var(--cal-text)); font-size: .65rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    .calendar-entry-title { font-weight: 850; overflow-wrap: anywhere; }
    .calendar-entry-time { color: var(--cal-muted); font-size: .68rem; }
    .calendar-entry-continuation { color: var(--cal-muted); font-size: .65rem; font-weight: 800; }
    .calendar-entry[draggable="true"] { cursor: grab; }
    .calendar-entry.is-dragging { opacity: .4; filter: saturate(.6); }

    .calendar-agenda-panel {
      position: relative;
      display: grid;
      gap: 10px;
      min-block-size: var(--calendar-compact-controls-height, 52px);
      padding: 8px 12px;
      border: 1px solid var(--cal-line);
      border-radius: var(--cal-radius);
      background: var(--cal-panel);
    }
    .calendar-agenda-panel summary {
      /* State-independent so the title never snaps between open and closed. */
      min-height: 40px; display: flex; align-items: center; justify-content: space-between;
      gap: 12px; cursor: pointer; color: var(--cal-text); font-weight: 900; list-style: none;
    }
    .calendar-agenda-panel summary::-webkit-details-marker { display: none; }
    .calendar-agenda-panel summary:focus-visible { outline: 3px solid var(--cal-accent); outline-offset: 4px; border-radius: 9px; }
    .calendar-agenda-title { display: inline-flex; align-items: baseline; gap: 6px; }
    .calendar-agenda-indicator { display: inline-flex; align-items: center; gap: 9px; color: var(--cal-muted); font-size: .6rem; font-weight: 800; white-space: nowrap; }
    @keyframes calendar-agenda-flip-open { from { background-position: 0% 0; } to { background-position: 100% 0; } }
    @keyframes calendar-agenda-flip-close { from { background-position: 100% 0; } to { background-position: 0% 0; } }
    /* Sized from the sprite's 128x77 frame so the art never distorts. */
    .calendar-agenda-flip { display: inline-block; flex: 0 0 auto; inline-size: 3.1rem; block-size: calc(3.1rem * 77 / 128); line-height: 0; background: url("/static/branding/accordion_flip_sprite.png") 0% 0 / 2600% 100% no-repeat; }
    .calendar-agenda-panel[open] .calendar-agenda-flip { background-position: 100% 0; }
    .calendar-agenda-panel[data-flip-dir="open"] .calendar-agenda-flip { animation: calendar-agenda-flip-open 0.45s steps(25) forwards; }
    .calendar-agenda-panel[data-flip-dir="close"] .calendar-agenda-flip { animation: calendar-agenda-flip-close 0.35s steps(25) forwards; }
    @media (prefers-reduced-motion: reduce) { .calendar-agenda-panel[data-flip-dir] .calendar-agenda-flip { animation: none; } }
    html[data-a11y-reduce-motion="true"] .calendar-agenda-flip { animation: none !important; }
    /* Padding stays 8px/12px in both states so the summary never shifts. */
    .calendar-agenda-panel[open] { padding: 8px 12px; }
    .calendar-agenda-panel[open] summary { min-height: 40px; }
    .calendar-agenda { display: grid; gap: 8px; }
    .calendar-agenda-day { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 10px; padding-top: 10px; border-top: 1px solid var(--cal-line); }
    .calendar-agenda-date { color: var(--cal-muted); font-size: .82rem; font-weight: 850; }
    .calendar-agenda-items { display: grid; gap: 7px; }
    @keyframes calendar-agenda-row-roll {
      from { opacity: 0; transform: translateX(-10px) scaleY(.86); clip-path: inset(0 100% 0 0); }
      to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    }
    @keyframes calendar-agenda-block-roll {
      from { opacity: 0; transform: translateX(-8px) scaleY(.9); clip-path: inset(0 100% 0 0); }
      to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    }
    @keyframes calendar-agenda-empty-roll {
      from { opacity: 0; transform: scaleX(.9); clip-path: inset(0 100% 0 0); }
      to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    }
    @media (min-width: 1041px) {
      .calendar-agenda-panel[open] .calendar-agenda-day {
        transform-origin: left center;
        animation: calendar-agenda-row-roll .3s cubic-bezier(.22, .9, .28, 1) both;
        animation-delay: calc(var(--agenda-row-index, 0) * .05s);
      }
      .calendar-agenda-panel[open] .calendar-agenda-day .calendar-agenda-items > * {
        transform-origin: left center;
        animation: calendar-agenda-block-roll .28s cubic-bezier(.22, .9, .28, 1) both;
        animation-delay: calc((var(--agenda-row-index, 0) * .05s) + (var(--agenda-item-index, 0) * .045s));
      }
      .calendar-agenda-panel[open] .calendar-empty {
        transform-origin: left center;
        animation: calendar-agenda-empty-roll .32s cubic-bezier(.22, .9, .28, 1) both;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .calendar-agenda-panel[open] .calendar-agenda-day,
      .calendar-agenda-panel[open] .calendar-agenda-day .calendar-agenda-items > *,
      .calendar-agenda-panel[open] .calendar-empty { animation: none !important; }
    }
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[open] .calendar-agenda-day,
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[open] .calendar-agenda-day .calendar-agenda-items > *,
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[open] .calendar-empty { animation: none !important; }

    /* Close choreography — mirrors rust_app/templates/calendar.html.tera.
       <details> hides content the instant [open] drops, so the demo summary
       click is intercepted to hold the panel open while the fold plays.
       Placed after the open rules on purpose: during the close [open] is still
       true, so source order is what lets the fold win. */
    /* Not width-gated: the icon flip plays at every width, so gating the fold
       on desktop left phone with no exit animation -- content vanished while
       the icon was still flipping. Reduced motion still falls through to a
       native close. */
    @media (prefers-reduced-motion: no-preference) {
      .calendar-agenda-collapse {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows .21s cubic-bezier(.4, 0, .2, 1) .14s;
      }
      .calendar-agenda-collapse > * { min-height: 0; overflow: hidden; }
      .calendar-agenda-panel[data-agenda-closing="true"] .calendar-agenda-collapse { grid-template-rows: 0fr; }
      @keyframes calendar-agenda-row-fold {
        from { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
        to { opacity: 0; transform: translateX(-12px) scaleY(.72); clip-path: inset(0 100% 0 0); }
      }
      @keyframes calendar-agenda-block-fold {
        from { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
        to { opacity: 0; transform: translateX(-10px) scaleY(.7); clip-path: inset(0 100% 0 0); }
      }
      @keyframes calendar-agenda-fold-sheen {
        0% { opacity: .5; transform: scaleX(.18); }
        55% { opacity: .28; transform: scaleX(.62); }
        100% { opacity: 0; transform: scaleX(1); }
      }
      .calendar-agenda-panel[data-agenda-closing="true"] .calendar-agenda-day {
        transform-origin: left center;
        animation: calendar-agenda-row-fold .16s cubic-bezier(.4, 0, .2, 1) both;
        animation-delay: calc(var(--agenda-fold-order, 0) * .035s);
      }
      .calendar-agenda-panel[data-agenda-closing="true"] .calendar-agenda-day .calendar-agenda-items > * {
        transform-origin: left center;
        animation: calendar-agenda-block-fold .15s cubic-bezier(.4, 0, .2, 1) both;
        animation-delay: calc((var(--agenda-fold-order, 0) * .035s) + (var(--agenda-item-index, 0) * .018s));
      }
      @keyframes calendar-agenda-empty-fold {
        from { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
        to { opacity: 0; transform: scaleX(.92); clip-path: inset(0 100% 0 0); }
      }
      .calendar-agenda-panel[data-agenda-closing="true"] .calendar-empty {
        transform-origin: left center;
        animation: calendar-agenda-empty-fold .18s cubic-bezier(.4, 0, .2, 1) both;
      }
      .calendar-agenda-panel[data-agenda-closing="true"]::after {
        content: "";
        position: absolute;
        inset-inline: 12px;
        top: 50%;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--cal-accent), transparent);
        transform-origin: left center;
        pointer-events: none;
        z-index: 1;
        animation: calendar-agenda-fold-sheen .35s cubic-bezier(.4, 0, .2, 1) both;
      }
      .calendar-agenda-panel[data-agenda-closing="true"] { overflow: hidden; }
    }
    html[data-a11y-reduce-motion="true"] .calendar-agenda-collapse { transition: none !important; }
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[data-agenda-closing="true"]::after { animation: none !important; }
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[data-agenda-closing="true"] .calendar-agenda-day,
    html[data-a11y-reduce-motion="true"] .calendar-agenda-panel[data-agenda-closing="true"] .calendar-agenda-day .calendar-agenda-items > * { animation: none !important; }

    .calendar-empty { min-height: 90px; display: grid; place-items: center; padding: 18px; border: 1px dashed var(--cal-line-strong); border-radius: 14px; color: var(--cal-muted); text-align: center; }

    dialog.calendar-dialog {
      position: fixed;
      inset: 0;
      margin: auto;
      width: min(620px, calc(100vw - 24px));
      height: fit-content;
      max-height: min(88vh, 840px);
      overflow: auto;
      padding: 0;
      border: 1px solid var(--cal-line-strong);
      border-radius: 22px;
      color: var(--cal-text);
      background: var(--cal-panel);
      box-shadow: 0 32px 100px rgba(0, 0, 0, .58);
    }
    dialog.calendar-dialog::backdrop { background: rgba(2, 6, 16, .76); backdrop-filter: blur(6px); }
    #calendar-task-dialog.calendar-time-picker-open {
      width: min(760px, calc(100vw - 24px));
      max-height: min(92vh, 920px);
    }
    .calendar-dialog-form { display: grid; gap: 14px; padding: 18px; }
    .calendar-dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
    .calendar-dialog-head h2 { margin: 0; font-size: 1.35rem; }
    .calendar-dialog-head p { margin: 4px 0 0; color: var(--cal-muted); line-height: 1.45; }
    .calendar-dialog-close { min-width: 44px; padding: 7px; }
    .calendar-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .calendar-form-span { grid-column: 1 / -1; }
    .calendar-check-row { display: flex; align-items: center; gap: 9px; min-height: 44px; }
    .calendar-check-row input { width: 22px; min-height: 22px; }
    .calendar-invite-picker { display: grid; gap: 7px; }
    .calendar-invite-picker[hidden] { display: none; }
    .calendar-invite-picker > label { font-weight: 760; }
    .calendar-invite-help { margin: 0; color: var(--cal-muted); font-size: .78rem; line-height: 1.4; }
    .calendar-invite-results { display: grid; gap: 5px; max-height: 11rem; overflow-y: auto; }
    .calendar-invite-results:empty { display: none; }
    .calendar-invite-result {
      display: flex; align-items: center; min-height: 38px; width: 100%; text-align: left;
      border: 1px solid var(--cal-line); border-radius: 10px; background: var(--cal-panel-strong);
      color: var(--cal-text); padding: 8px 10px; font: inherit; cursor: pointer;
    }
    .calendar-invite-result:hover, .calendar-invite-result:focus-visible { border-color: var(--cal-accent); outline: none; }
    .calendar-invitees { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2px; }
    .calendar-invite-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cal-line-strong); border-radius: 999px; padding: 3px 5px 3px 9px; background: color-mix(in srgb, var(--cal-accent) 14%, var(--cal-panel)); }
    .calendar-invite-chip button { min-width: 28px; min-height: 28px; padding: 1px 5px; border-radius: 999px; }
    .calendar-pq-boundary { margin: 0; color: var(--cal-muted); font-size: .77rem; line-height: 1.4; }
    .calendar-dialog-actions { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
    .calendar-dialog-actions-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .calendar-dialog-error { min-height: 20px; color: var(--cal-danger); font-size: .82rem; font-weight: 760; }
    .calendar-time-picker-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--cal-text);
      background: var(--cal-panel-strong);
      text-align: start;
    }
    .calendar-time-picker-trigger-time { font-variant-numeric: tabular-nums; }
    .calendar-time-picker-trigger-icon { width: 20px; height: 20px; flex: 0 0 auto; opacity: .8; }
    .calendar-time-picker-popover {
      position: relative;
      z-index: 8;
      display: grid;
      align-content: start;
      gap: 15px;
      overflow: auto;
      padding: clamp(16px, 3vw, 24px);
      border: 1px solid color-mix(in srgb, var(--cal-accent-strong) 54%, var(--cal-line));
      border-radius: inherit;
      color: var(--cal-text);
      background:
        radial-gradient(circle at 50% -14%, color-mix(in srgb, var(--cal-accent) 22%, transparent), transparent 17rem),
        color-mix(in srgb, var(--cal-panel) 96%, #070b13);
      box-shadow: 0 28px 78px rgba(0, 0, 0, .52);
    }
    .calendar-time-picker-popover[hidden] { display: none; }
    /* The start-time picker replaces the task form, so hide the inert form and
       let the picker size the dialog to its full height instead of scrolling. */
    #calendar-task-dialog > form[inert] { display: none; }
    .calendar-time-picker-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
    .calendar-time-picker-head h3 { margin: 0; font-size: 1.16rem; }
    .calendar-time-picker-head p { margin: 4px 0 0; color: var(--cal-muted); font-size: .85rem; line-height: 1.45; }
    .calendar-time-picker-current { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
    .calendar-time-picker-current button {
      min-height: 58px;
      padding: 8px 12px;
      font-size: clamp(1.55rem, 6vw, 2.1rem);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .calendar-time-picker-current button[aria-pressed="true"] {
      color: var(--cal-text);
      border-color: color-mix(in srgb, var(--cal-task) 72%, var(--cal-text));
      background: linear-gradient(135deg, color-mix(in srgb, var(--cal-task) 78%, #0b2925), color-mix(in srgb, var(--cal-task) 54%, var(--cal-panel-strong)));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-task) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--cal-text) 22%, transparent);
    }
    .calendar-time-picker-separator { font-size: 2rem; font-weight: 900; line-height: 1; }
    .calendar-time-picker-stage { margin: 0; color: var(--cal-muted); font-size: .88rem; font-weight: 800; text-align: center; }
    .calendar-analog-clock {
      position: relative;
      width: min(100%, 400px);
      aspect-ratio: 1;
      margin: 0 auto;
      touch-action: none;
      user-select: none;
      border: 1px solid color-mix(in srgb, var(--cal-accent-strong) 28%, var(--cal-line));
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cal-accent) 12%, var(--cal-panel-strong)) 0 17%, transparent 17.5%),
        color-mix(in srgb, var(--cal-panel-strong) 96%, #090d16);
      box-shadow: inset 0 0 0 16px color-mix(in srgb, var(--cal-panel) 60%, transparent);
    }
    .calendar-analog-clock::after {
      content: '';
      position: absolute;
      inset: 18%;
      border: 1px solid color-mix(in srgb, var(--cal-line-strong) 72%, transparent);
      border-radius: 50%;
      pointer-events: none;
    }
    .calendar-analog-clock-options { position: absolute; inset: 0; z-index: 2; }
    .calendar-analog-clock-minute-ticks { position: absolute; z-index: 1; inset: 0; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .calendar-analog-clock[data-picker-mode="minute"] .calendar-analog-clock-minute-ticks { opacity: 1; }
    .calendar-analog-clock-minute-tick {
      position: absolute;
      width: 2px;
      height: 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--cal-line-strong) 78%, transparent);
      transform: translate(-50%, -50%);
    }
    .calendar-analog-clock-minute-tick.is-five { height: 11px; background: color-mix(in srgb, var(--cal-text) 66%, var(--cal-line)); }
    .calendar-analog-clock-minute-tick.is-quarter { width: 3px; height: 17px; background: var(--cal-text); }
    .calendar-analog-clock-option {
      position: absolute;
      z-index: 3;
      width: 44px;
      min-width: 44px;
      min-height: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      color: var(--cal-text);
      background: transparent;
      font-size: .88rem;
      font-variant-numeric: tabular-nums;
      transform: translate(-50%, -50%);
      transition: opacity .2s ease, transform .2s ease, background-color .16s ease, box-shadow .16s ease;
    }
    .calendar-analog-clock-option[data-clock-ring="inner"] { width: 38px; min-width: 38px; min-height: 38px; height: 38px; font-size: .76rem; }
    .calendar-analog-clock-option.is-entering { opacity: 0; transform: translate(-50%, -50%) scale(.52); }
    .calendar-analog-clock.is-transitioning-to-minute .calendar-analog-clock-option.is-hour-option:not(.is-retained) { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
    .calendar-analog-clock.is-transitioning-to-minute .calendar-analog-clock-option.is-hour-option.is-retained { z-index: 4; pointer-events: none; }
    .calendar-analog-clock-option[aria-pressed="true"] { background: var(--cal-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cal-accent) 24%, transparent); }
    .calendar-analog-clock-option.is-hour-option[aria-pressed="true"] {
      color: var(--cal-text);
      border-color: color-mix(in srgb, var(--cal-task) 82%, var(--cal-text));
      background: color-mix(in srgb, var(--cal-task) 76%, #0b2925);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cal-task) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--cal-text) 24%, transparent);
    }
    .calendar-analog-clock-center { position: absolute; z-index: 5; inset: 50% auto auto 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--cal-accent-strong); transform: translate(-50%, -50%); pointer-events: none; }
    .calendar-analog-clock-hand {
      position: absolute;
      z-index: 1;
      inset: calc(50% - var(--calendar-clock-hand-length, 39%)) auto auto calc(50% - 1px);
      width: 2px;
      height: var(--calendar-clock-hand-length, 39%);
      border-radius: 999px;
      background: var(--cal-accent-strong);
      transform-origin: 50% 100%;
      pointer-events: none;
    }
    .calendar-analog-clock-hand::after { display: none; }
    .calendar-analog-clock[data-picker-mode="hour"] .calendar-analog-clock-hand { opacity: .64; }
    .calendar-analog-clock[data-picker-mode="minute"] { cursor: grab; }
    .calendar-analog-clock.is-minute-dragging { cursor: grabbing; }
    .calendar-time-picker-footer { display: grid; grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr); align-items: end; gap: 14px; }
    .calendar-time-picker-manual { width: 100%; max-width: 13rem; justify-self: start; text-align: start; }
    .calendar-time-picker-actions { display: flex; justify-content: end; gap: 8px; flex-wrap: wrap; }
    .calendar-security-boundary {
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--cal-warn) 68%, var(--cal-line));
      border-radius: 14px;
      color: var(--cal-text);
      background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--cal-warn) 8%, transparent) 0 7px, transparent 7px 14px),
        color-mix(in srgb, var(--cal-warn) 9%, var(--cal-panel-strong));
      line-height: 1.48;
    }
    .calendar-security-boundary strong { display: block; margin-bottom: 3px; color: color-mix(in srgb, var(--cal-warn) 80%, var(--cal-text)); }

    .calendar-context-menu {
      position: fixed;
      z-index: 1200;
      width: min(310px, calc(100vw - 16px));
      max-height: min(70vh, 520px);
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--cal-line-strong);
      border-radius: 16px;
      color: var(--cal-text);
      background: color-mix(in srgb, var(--cal-panel-strong) 96%, transparent);
      box-shadow: 0 24px 72px rgba(0, 0, 0, .52);
      backdrop-filter: blur(20px);
    }
    .calendar-context-menu[hidden] { display: none; }
    .calendar-context-title {
      margin: 2px 4px 7px;
      padding: 4px 6px 9px;
      border-bottom: 1px solid var(--cal-line);
      color: var(--cal-muted);
      font-size: .76rem;
      font-weight: 850;
      line-height: 1.35;
    }
    .calendar-context-actions { display: grid; gap: 3px; }
    .calendar-context-action {
      width: 100%;
      min-height: 44px;
      display: grid;
      grid-template-columns: 1.6rem minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      border-color: transparent;
      padding: 9px 10px;
      color: var(--cal-text);
      background: transparent;
      text-align: start;
    }
    .calendar-context-action:hover,
    .calendar-context-action:focus-visible { background: color-mix(in srgb, var(--cal-accent) 18%, var(--cal-panel-strong)); }
    .calendar-context-action[data-danger="true"] { color: color-mix(in srgb, var(--cal-danger) 76%, var(--cal-text)); }
    .calendar-context-icon { text-align: center; }

    @media (pointer: coarse) {
      [data-calendar-context] { -webkit-touch-callout: none; }
    }

    @media (max-width: 1040px) {
      .calendar-workspace { grid-template-columns: 1fr; }
      .calendar-task-tray { position: static; max-height: none; }
      .calendar-task-tray-toggle { display: none; }
      .calendar-task-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-height: 22rem; }
      .calendar-toolbar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    }
    @media (max-width: 760px) {
      .calendar-shell { padding: 10px 10px calc(10px + var(--pc-mobile-nav-reserve, 92px)); }
      .calendar-hero { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
      .calendar-hero-actions { justify-content: start; }
      .calendar-timezone { white-space: normal; }
      .planning-switcher { width: 100%; }
      .planning-switcher a { flex: 1 1 50%; }
      .calendar-toolbar { grid-template-columns: 1fr; padding: 12px; }
      .calendar-nav-buttons, .calendar-view-buttons { justify-content: center; }
      .calendar-nav-buttons button, #calendar-arrange { min-height: 44px; }
      .calendar-view-buttons { padding: 4px; }
      .calendar-view-buttons button { min-height: 40px; padding: 7px 11px; }
      #calendar-range-title { order: -1; }
      .calendar-view-buttons button { flex: 1 1 auto; }
      .calendar-task-tray { padding: 12px; }
      .calendar-task-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82vw, 1fr); grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
      .calendar-task-card { scroll-snap-align: start; }
      /* The agenda opening shrinks the grid so both fit on screen. Without a
         transition this was an instant ~140px reflow of the whole surface on
         tap, which read as the page lagging behind the gesture. */
      .calendar-surface {
        max-height: 68vh;
        transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
      }
      @media (prefers-reduced-motion: reduce) { .calendar-surface { transition: none; } }
      html[data-a11y-reduce-motion="true"] .calendar-surface { transition: none !important; }
      .calendar-month-grid { min-width: 700px; }
      .calendar-time-view { min-width: 660px; }
      .calendar-control-stack:has(.calendar-agenda-panel[open]) ~ .calendar-workspace .calendar-surface { max-height: 50vh; }
      .calendar-agenda-day { grid-template-columns: 1fr; }
      .calendar-form-grid { grid-template-columns: 1fr; }
      .calendar-form-span { grid-column: auto; }
      .calendar-time-picker-footer { grid-template-columns: 1fr; gap: 10px; }
      .calendar-time-picker-manual { max-width: none; }
    }
    @media (pointer: coarse) {
      .calendar-agenda-panel:not([open]) summary { min-height: 40px; }
    }

    /*
     * Keep the primary calendar usable at phone widths. Day view fills the
     * viewport, while Week view becomes a horizontal sequence of readable
     * day columns instead of shrinking seven columns into an unusable grid.
     */
    @media (max-width: 600px) {
      .calendar-shell {
        gap: 10px;
        padding-left: max(6px, env(safe-area-inset-left));
        padding-right: max(6px, env(safe-area-inset-right));
      }
      .calendar-hero {
        gap: 8px;
        padding: 10px;
        border-radius: 16px;
      }
      .calendar-hero-copy { display: grid; gap: 3px; }
      .calendar-interaction-hint { font-size: .72rem; }
      .calendar-timezone { font-size: .7rem; }
      .calendar-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        gap: 7px;
      }
      .planning-switcher { min-width: 0; }
      .planning-switcher a { min-width: 0; padding-inline: 10px; }
      #calendar-new-event { min-width: 6.6rem; padding-inline: 10px; white-space: nowrap; }

      .calendar-control-stack { gap: 8px; }
      .calendar-agenda-panel { padding-inline: 10px; border-radius: 14px; }
      .calendar-agenda-panel[open] { padding: 10px; }
      .calendar-agenda-indicator { font-size: .55rem; }
      .calendar-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title title"
          "navigation arrange"
          "views views";
        gap: 8px;
        padding: 9px;
        border-radius: 14px;
      }
      #calendar-range-title {
        grid-area: title;
        order: initial;
        min-width: 0;
        font-size: 1.05rem;
        overflow-wrap: anywhere;
      }
      .calendar-nav-buttons {
        grid-area: navigation;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-width: 0;
      }
      .calendar-nav-buttons button { min-width: 0; padding-inline: 8px; }
      .calendar-view-buttons {
        grid-area: views;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
      }
      .calendar-view-buttons button { min-width: 0; padding-inline: 7px; }
      #calendar-arrange { grid-area: arrange; min-width: 5.5rem; padding-inline: 9px; }

      .calendar-workspace { gap: 10px; }
      .calendar-task-tray { border-radius: 16px; }
      .calendar-task-tray-toggle { display: grid; }
      .calendar-task-tray-toggle svg { transform: rotate(90deg); }
      .calendar-task-tray-head p { font-size: .75rem; }
      .calendar-task-tray[data-task-tray-collapsed="true"] {
        gap: 0;
        padding: 8px 10px;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-topline {
        align-items: center;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-head p { display: none; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content-shell { grid-template-rows: 0fr; }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-content {
        overflow: hidden;
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
      }
      .calendar-task-tray[data-task-tray-collapsed="true"] .calendar-task-tray-toggle svg { transform: rotate(-90deg); }
      .calendar-task-list {
        grid-auto-columns: minmax(min(86vw, 21rem), 1fr);
        scroll-padding-inline: 2px;
      }

      .calendar-surface {
        max-height: 68dvh;
        border-radius: 14px;
        overscroll-behavior: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
      }
      .calendar-month-grid {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }
      .calendar-weekday {
        min-height: 36px;
        font-size: .66rem;
        letter-spacing: .04em;
      }
      .calendar-day {
        min-width: 0;
        min-height: 104px;
        gap: 4px;
        padding: 3px;
      }
      .calendar-day-number { width: 100%; min-width: 0; min-height: 44px; padding-inline: 2px; }
      .calendar-month-grid .calendar-entry {
        min-height: 34px;
        gap: 2px;
        padding: 4px 2px;
        border-inline-start-width: 3px;
        border-radius: 8px;
      }
      .calendar-month-grid .calendar-entry-kind,
      .calendar-month-grid .calendar-entry-time,
      .calendar-month-grid .calendar-entry-continuation { display: none; }
      .calendar-month-grid .calendar-entry-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: .68rem;
        line-height: 1.15;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .calendar-time-view { min-width: 0; }
      .calendar-time-days {
        grid-template-columns: repeat(var(--calendar-days, 1), minmax(min(78vw, 280px), 1fr));
      }
      .calendar-time-day { scroll-snap-align: start; }
      .calendar-time-day-head { min-height: 54px; }
      .calendar-all-day-lane { min-height: 56px; }

      dialog.calendar-dialog,
      #calendar-task-dialog.calendar-time-picker-open {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 18px;
      }
      .calendar-dialog-form { gap: 12px; padding: 14px; }
      .calendar-dialog-head { gap: 8px; }
      .calendar-dialog-head h2 { font-size: 1.2rem; }
      .calendar-dialog-head p { font-size: .8rem; }
      .calendar-dialog-actions { display: grid; width: 100%; }
      .calendar-dialog-actions > .calendar-button,
      .calendar-dialog-actions > button { width: 100%; text-align: center; }
      .calendar-dialog-actions-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }
      .calendar-dialog-actions-group > * { min-width: 0; }
      .calendar-time-picker-popover { gap: 11px; padding: 14px; }
      .calendar-time-picker-current button { min-height: 52px; }
      .calendar-analog-clock { width: min(100%, 310px, calc(100dvh - 285px)); }
      .calendar-time-picker-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .calendar-workspace,
      .calendar-task-tray,
      .calendar-task-tray-head,
      .calendar-task-tray-toggle,
      .calendar-task-tray-toggle svg,
      .calendar-task-tray-content-shell,
      .calendar-task-tray-content,
      .calendar-task-tray-content > * { transition-duration: .01ms !important; }
    }
    html[data-a11y-reduce-motion="true"] .calendar-workspace,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-head,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-toggle,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-toggle svg,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-content-shell,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-content,
    html[data-a11y-reduce-motion="true"] .calendar-task-tray-content > * { transition-duration: .01ms !important; }