:root {
  color-scheme: light;

  --font-sans: MiSans, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --color-canvas: oklch(0.985 0.006 80);
  --color-surface: oklch(0.995 0.003 80);
  --color-surface-subtle: oklch(0.963 0.008 255);
  --color-surface-selected: oklch(0.935 0.025 275);
  --color-text-primary: oklch(0.265 0.018 255);
  --color-text-secondary: oklch(0.475 0.018 255);
  --color-text-muted: oklch(0.62 0.014 255);
  --color-border-subtle: oklch(0.895 0.01 255);
  --color-border-strong: oklch(0.785 0.02 255);
  --color-accent-primary: oklch(0.545 0.095 278);
  --color-accent-strong: oklch(0.465 0.105 278);
  --color-accent-soft: oklch(0.925 0.03 278);
  --color-event-normal-bg: oklch(0.925 0.025 250);
  --color-event-normal-text: oklch(0.345 0.04 250);
  --color-event-important-bg: oklch(0.905 0.045 278);
  --color-event-important-text: oklch(0.39 0.085 278);
  --color-danger: oklch(0.555 0.125 25);
  --color-danger-strong: oklch(0.48 0.13 25);
  --color-danger-soft: oklch(0.935 0.035 25);
  --color-warning: oklch(0.62 0.105 72);
  --color-warning-text: oklch(0.39 0.075 65);
  --color-warning-soft: oklch(0.95 0.04 85);
  --color-success: oklch(0.515 0.095 155);
  --color-success-text: oklch(0.36 0.075 155);
  --color-success-soft: oklch(0.94 0.03 155);
  --color-focus-ring: oklch(0.6 0.115 278);
  --color-scrim: oklch(0.22 0.015 255 / 0.34);
  --color-shadow-raised: oklch(0.265 0.018 255 / 0.08);
  --color-shadow-overlay: oklch(0.265 0.018 255 / 0.14);
  --color-projection-stripe: oklch(0.545 0.095 278 / 0.14);

  --text-meta: 0.75rem;
  --line-meta: 1.125rem;
  --text-label: 0.8125rem;
  --line-label: 1.25rem;
  --text-body: 0.875rem;
  --line-body: 1.375rem;
  --text-body-mobile: 1rem;
  --line-body-mobile: 1.5rem;
  --text-heading: 1.125rem;
  --line-heading: 1.625rem;
  --text-title: 1.5rem;
  --line-title: 2rem;
  --text-display: 1.75rem;
  --line-display: 2.25rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-10: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999rem;

  --border-thin: 0.0625rem;
  --border-state: 0.125rem;
  --focus-gap: 0.125rem;
  --shadow-raised: 0 0.5rem 1.5rem var(--color-shadow-raised);
  --shadow-overlay: 0 1.125rem 3rem var(--color-shadow-overlay);

  --motion-fast: 160ms;
  --motion-standard: 220ms;
  --motion-enter: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --control-size: 2.5rem;
  --touch-target: 2.75rem;
  --nav-wide: 13.5rem;
  --nav-compact: 4.5rem;
  --rail-wide: 20rem;
  --rail-compact: 18rem;
  --shell-gap: 1rem;
  --shell-padding: 1rem;
  --mobile-padding: 0.75rem;
  --mobile-nav-height: 4.5rem;
  --toolbar-height: 3.5rem;
  --calendar-header-height: 3.25rem;
  --all-day-height: 2.5rem;
  --time-axis-width: 3.5rem;
  --calendar-hour-height: 4rem;
  --calendar-slot-height: 2rem;
  --calendar-hours: 17;
  --calendar-body-height: calc(var(--calendar-hour-height) * var(--calendar-hours));
  --calendar-min-width: 48rem;
  --event-gutter: 0.25rem;
  --event-min-height: 1.75rem;
  --drawer-width: clamp(20rem, 42vw, 26.25rem);
  --toast-width: 22rem;
  --icon-size: 1.25rem;
  --brand-mark-size: 2.25rem;
  --empty-icon-size: 2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  height: 100%;
  background: var(--color-canvas);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

body {
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
}

button,
textarea,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: var(--border-state) solid var(--color-focus-ring);
  outline-offset: var(--focus-gap);
}

button:disabled {
  cursor: not-allowed;
}

button:not(:disabled) {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: var(--border-thin) !important;
  height: var(--border-thin) !important;
  padding: 0 !important;
  margin: calc(var(--border-thin) * -1) !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text-primary);
  color: var(--color-surface);
  transform: translateY(calc(-100% - var(--space-8)));
  transition: transform var(--motion-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--nav-wide) minmax(0, 1fr) var(--rail-wide);
  gap: var(--shell-gap);
  width: 100%;
  height: 100dvh;
  padding: var(--shell-padding);
}

.primary-nav,
.right-rail,
.assistant-panel,
.calendar-frame {
  border: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface);
}

.primary-nav {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.brand {
  display: flex;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  flex: none;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-primary);
  color: var(--color-surface);
}

.brand__mark .icon {
  width: var(--space-5);
  height: var(--space-5);
  stroke-width: 1.9;
}

.brand__name {
  overflow: hidden;
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-heading);
  white-space: nowrap;
}

.primary-nav__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-label);
  text-align: left;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.nav-item:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.nav-item:active {
  background: var(--color-surface-selected);
}

.nav-item.is-current {
  background: var(--color-surface-selected);
  color: var(--color-accent-strong);
}

.nav-item__count {
  display: inline-grid;
  min-width: var(--space-5);
  height: var(--space-5);
  place-items: center;
  margin-left: auto;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.primary-nav__settings {
  margin-top: auto;
}

.main-content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.calendar-toolbar {
  display: flex;
  min-height: var(--toolbar-height);
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-1);
}

.eyebrow {
  margin: 0 0 var(--space-0-5);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-meta);
  letter-spacing: 0.08em;
}

.calendar-toolbar h1,
.detail-drawer h2,
.right-rail__mobile-header h2 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-title);
  letter-spacing: 0;
}

.calendar-toolbar__actions,
.view-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-button,
.button,
.text-button,
.quick-examples button {
  border: 0;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.icon-button {
  position: relative;
  display: inline-grid;
  width: var(--control-size);
  height: var(--control-size);
  flex: none;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
}

.icon-button:hover:not(:disabled) {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.icon-button:active:not(:disabled),
.button:active:not(:disabled) {
  transform: translateY(var(--border-thin));
}

.icon-button:disabled {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.icon-button__count {
  position: absolute;
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-1) * -1);
  display: grid;
  min-width: var(--space-5);
  height: var(--space-5);
  place-items: center;
  padding-inline: var(--space-1);
  border: var(--border-state) solid var(--color-canvas);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.mobile-history-entry {
  display: none;
}

.button {
  display: inline-flex;
  min-height: var(--control-size);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-label);
  white-space: nowrap;
}

.button--primary {
  background: var(--color-accent-primary);
  color: var(--color-surface);
}

.button--primary:hover:not(:disabled) {
  background: var(--color-accent-strong);
}

.button--quiet {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.button--quiet:hover:not(:disabled),
.button--quiet.is-selected {
  background: var(--color-surface-selected);
  color: var(--color-accent-strong);
}

.button--danger {
  background: var(--color-danger);
  color: var(--color-surface);
}

.button--danger:hover:not(:disabled) {
  background: var(--color-danger-strong);
}

.button:disabled {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.text-button {
  display: inline-flex;
  min-height: var(--control-size);
  align-items: center;
  padding: var(--space-1) 0;
  background: transparent;
  color: var(--color-accent-strong);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-label);
}

.text-button:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.assistant-panel {
  position: relative;
  z-index: 4;
  flex: none;
  padding: var(--space-4);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.assistant-panel__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.assistant-panel__heading label {
  font-weight: var(--font-weight-semibold);
}

.character-count {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.character-count.is-near-limit {
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
}

.assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: end;
}

.assistant-composer textarea {
  width: 100%;
  min-height: var(--control-size);
  max-height: 8.5rem;
  resize: none;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-text-primary);
  line-height: var(--line-body);
}

.assistant-composer textarea::placeholder {
  color: var(--color-text-muted);
}

.assistant-composer textarea:focus {
  border-color: var(--color-accent-primary);
}

.assistant-composer__cancel {
  grid-column: 3;
}

.field-hint,
.field-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__conflicts {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.field-hint {
  color: var(--color-text-secondary);
}

.field-error {
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-state) solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-text-primary);
}

.quick-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.quick-examples button {
  min-height: var(--control-size);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.quick-examples button:hover {
  background: var(--color-surface-selected);
  color: var(--color-accent-strong);
}

.assistant-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-accent-strong);
  font-size: var(--text-label);
  line-height: var(--line-label);
}

.assistant-result {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.assistant-result__title {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--line-heading);
}

.assistant-result__text {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.assistant-result__list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.assistant-result__candidates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.assistant-composer__mic.is-listening {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.assistant-conversation {
  max-height: 16rem;
  overflow-y: auto;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  scrollbar-gutter: stable;
}

.assistant-conversation__messages {
  display: grid;
  gap: var(--space-2);
}

.conversation-message {
  display: grid;
  max-width: 80%;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  animation: card-enter var(--motion-standard) var(--ease-standard) both;
}

.conversation-message--user {
  justify-self: end;
  border-color: transparent;
  background: var(--color-surface-selected);
}

.conversation-message__speaker {
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.conversation-message__body {
  margin: 0;
  overflow-wrap: anywhere;
}

.conversation-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.conversation-quick-reply {
  min-height: 2.25rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
}

.conversation-quick-reply:hover,
.conversation-quick-reply:focus-visible {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-strong);
}

.progress-mark {
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-state) solid var(--color-accent-soft);
  border-top-color: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  animation: progress-spin 900ms linear infinite;
}

@keyframes progress-spin {
  to { transform: rotate(1turn); }
}

.calendar-section {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.calendar-section__heading {
  display: flex;
  min-height: var(--control-size);
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.calendar-section__heading h2 {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-heading);
}

.calendar-alert,
.network-banner {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--text-label);
  line-height: var(--line-label);
}

.calendar-alert {
  display: flex;
  margin-bottom: var(--space-2);
}

.calendar-alert__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-alert .text-button {
  color: inherit;
}

.network-banner {
  position: fixed;
  z-index: 90;
  top: var(--space-3);
  left: 50%;
  display: flex;
  max-width: calc(100vw - var(--space-6));
  transform: translateX(-50%);
  box-shadow: var(--shadow-raised);
}

.calendar-frame {
  position: relative;
  min-width: 0;
  min-height: 18rem;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
}

.calendar-grid {
  min-width: var(--calendar-min-width);
  background: var(--color-surface);
}

.calendar-grid__header,
.calendar-grid__body {
  display: grid;
  grid-template-columns: var(--time-axis-width) repeat(7, minmax(0, 1fr));
}

.calendar-grid__header {
  position: sticky;
  z-index: 6;
  top: 0;
  height: var(--calendar-header-height);
  border-bottom: var(--border-thin) solid var(--color-border-strong);
  background: var(--color-surface);
}

.calendar-grid__all-day {
  position: sticky;
  z-index: 5;
  top: var(--calendar-header-height);
  display: grid;
  grid-template-columns: var(--time-axis-width) repeat(7, minmax(0, 1fr));
  min-height: var(--all-day-height);
  border-bottom: var(--border-thin) solid var(--color-border-strong);
  background: var(--color-surface);
}

.calendar-grid__all-day-label,
.calendar-grid__all-day-cell {
  min-width: 0;
  padding: var(--space-1);
  border-right: var(--border-thin) solid var(--color-border-subtle);
}

.calendar-grid__all-day-label {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.calendar-grid__all-day-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.calendar-grid__all-day-cell.is-today {
  background: var(--color-surface-selected);
}

.all-day-event {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-0-5) var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-event-normal-bg);
  color: var(--color-event-normal-text);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-meta);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-day-event:hover {
  box-shadow: var(--shadow-raised);
}

.calendar-grid__corner,
.calendar-day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--border-thin) solid var(--color-border-subtle);
}

.calendar-grid__corner {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.calendar-day-header {
  flex-direction: column;
  border: 0;
  border-right: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.calendar-day-header strong {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-label);
}

.calendar-day-header span {
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.calendar-day-header.is-today {
  background: var(--color-surface-selected);
  color: var(--color-accent-strong);
}

.calendar-day-header__today {
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-accent-primary);
  color: var(--color-surface);
}

.calendar-grid__body {
  position: relative;
  height: var(--calendar-body-height);
}

.calendar-time-axis {
  position: relative;
  height: var(--calendar-body-height);
  border-right: var(--border-thin) solid var(--color-border-strong);
  background: var(--color-surface);
}

.calendar-time-label {
  position: absolute;
  left: 0;
  width: 100%;
  padding-right: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
  text-align: right;
  transform: translateY(calc(var(--line-meta) * -0.5));
}

.calendar-day {
  position: relative;
  display: grid;
  grid-template-rows: repeat(34, var(--calendar-slot-height));
  height: var(--calendar-body-height);
  border-right: var(--border-thin) solid var(--color-border-subtle);
}

.calendar-day.is-today {
  background: var(--color-surface-selected);
}

.calendar-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--calendar-slot-height);
  padding: 0;
  border: 0;
  border-bottom: var(--border-thin) dotted var(--color-border-subtle);
  background: transparent;
  color: transparent;
}

.calendar-slot:nth-child(even) {
  border-bottom-style: solid;
}

.calendar-slot:hover,
.calendar-slot:focus-visible {
  background: var(--color-accent-soft);
}

.calendar-slot::after {
  position: absolute;
  inset: var(--space-1);
  display: grid;
  place-items: center;
  color: var(--color-accent-strong);
  content: "添加日程";
  font-size: var(--text-meta);
  line-height: var(--line-meta);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.calendar-slot:hover::after,
.calendar-slot:focus-visible::after {
  opacity: 1;
}

.calendar-events-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.calendar-event {
  position: absolute;
  left: var(--event-gutter);
  width: calc(100% - (var(--event-gutter) * 2));
  min-height: var(--event-min-height);
  overflow: hidden;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-left: var(--space-1) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-event-normal-bg);
  color: var(--color-event-normal-text);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
  text-align: left;
  pointer-events: auto;
  transition:
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    outline-color var(--motion-fast) var(--ease-standard);
}

.calendar-event:hover,
.calendar-event:focus-visible {
  z-index: 5;
  overflow: visible;
  box-shadow: var(--shadow-raised);
}

.calendar-event.is-important {
  border-left-color: var(--color-accent-primary);
  background: var(--color-event-important-bg);
  color: var(--color-event-important-text);
}

.calendar-event.is-urgent {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-text-primary);
}

.calendar-event.is-temporary {
  border: var(--border-state) dashed currentColor;
}

.calendar-event.is-completed {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.calendar-event.is-completed .calendar-event__title {
  text-decoration: line-through;
}

.calendar-event.has-conflict {
  outline: var(--border-state) solid var(--color-warning);
  outline-offset: calc(var(--border-state) * -1);
}

.calendar-event.is-projection {
  border: var(--border-state) dashed var(--color-accent-primary);
  background-color: var(--color-accent-soft);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent var(--space-2),
    var(--color-projection-stripe) var(--space-2),
    var(--color-projection-stripe) var(--space-3)
  );
  color: var(--color-accent-strong);
  animation: projection-enter var(--motion-enter) var(--ease-standard) both;
}

@keyframes projection-enter {
  from {
    opacity: 0.8;
    transform: translateY(var(--space-2));
  }
}

.calendar-event__meta,
.calendar-event__title {
  display: block;
  overflow: hidden;
}

.calendar-event__meta {
  font-family: var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-event__title {
  display: -webkit-box;
  font-weight: var(--font-weight-semibold);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-event__flags {
  display: inline-flex;
  gap: var(--space-1);
  margin-right: var(--space-1);
}

.calendar-event__flags .icon {
  width: var(--space-3);
  height: var(--space-3);
  stroke-width: 2;
}

.calendar-now-line {
  position: absolute;
  z-index: 4;
  left: 0;
  width: 100%;
  height: var(--border-state);
  background: var(--color-accent-primary);
  pointer-events: none;
}

.calendar-now-line::before {
  position: absolute;
  top: calc(var(--space-1) * -1);
  left: calc(var(--space-1) * -1);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
  content: "";
}

.calendar-loading {
  position: absolute;
  z-index: 8;
  inset: var(--calendar-header-height) 0 0;
  display: grid;
  place-items: start center;
  padding-top: var(--space-8);
  background: var(--color-surface);
}

.calendar-skeleton {
  display: grid;
  width: min(70%, 34rem);
  gap: var(--space-4);
}

.calendar-skeleton span,
.compact-skeleton span {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  animation: skeleton-pulse 1.4s ease-in-out infinite alternate;
}

.calendar-skeleton span {
  height: var(--space-10);
}

.calendar-skeleton span:nth-child(2) {
  width: 78%;
  margin-left: 15%;
  animation-delay: 140ms;
}

.calendar-skeleton span:nth-child(3) {
  width: 62%;
  margin-left: 6%;
  animation-delay: 280ms;
}

@keyframes skeleton-pulse {
  to { opacity: 0.48; }
}

.calendar-empty {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(22rem, calc(100% - var(--space-8)));
  padding: var(--space-5);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-raised);
}

.empty-icon {
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  fill: none;
  stroke: var(--color-accent-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-empty h3,
.compact-empty p,
.utility-placeholder h2 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-body);
}

.calendar-empty p,
.utility-placeholder p {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--color-text-secondary);
}

.calendar-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.calendar-list__day + .calendar-list__day {
  margin-top: var(--space-5);
}

.calendar-list__day h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  line-height: var(--line-label);
}

.calendar-list__events {
  display: grid;
  gap: var(--space-2);
}

.today-execution__summary {
  margin: calc(var(--space-1) * -1) 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-label);
  line-height: var(--line-label);
}

.today-execution .rail-item {
  min-height: 4.5rem;
}

.today-execution__status {
  white-space: nowrap;
}

.today-execution__status.is-active {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.today-execution__status.is-finished {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.today-execution__status.is-pending {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

@media (max-width: 767px) {
  .calendar-section[data-home-view="today"] .mobile-day-strip {
    display: none;
  }
}

.mobile-day-strip,
.mobile-timeline,
.mobile-confirmation,
.mobile-nav {
  display: none;
}

.right-rail {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.right-rail__mobile-header {
  display: none;
}

.right-rail__content {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  scrollbar-gutter: stable;
}

.rail-section + .rail-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.rail-section__heading {
  display: flex;
  min-height: var(--space-7);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rail-section__heading h2 {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-label);
}

.rail-section__heading time {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.rail-section__description {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.rail-section__summary {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

#pendingActions {
  display: grid;
  gap: var(--space-3);
}

.button--full {
  width: 100%;
  margin-top: var(--space-3);
}

.status-badge {
  display: inline-grid;
  min-width: var(--space-6);
  height: var(--space-6);
  place-items: center;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-meta);
}

.status-badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.compact-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

.compact-empty p {
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.compact-skeleton {
  display: grid;
  gap: var(--space-2);
}

.compact-skeleton span {
  height: var(--space-10);
}

.rail-list {
  display: grid;
  gap: var(--space-2);
}

.rail-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  min-width: 0;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  text-align: left;
}

button.rail-item:hover {
  background: var(--color-surface-selected);
}

.rail-item__time {
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-meta);
  white-space: nowrap;
}

.rail-item__body {
  min-width: 0;
}

.rail-item__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-weight: var(--font-weight-medium);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rail-item__meta {
  margin: var(--space-0-5) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.rail-item__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
  white-space: nowrap;
}

.rail-item__status.is-success {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.rail-item__status.is-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.rail-item__status.is-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.rail-item__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
}

.rail-item__action {
  grid-column: 2 / -1;
  justify-self: start;
  min-height: var(--space-7);
}

.rail-section__retry {
  margin-top: var(--space-2);
}

.permission-card {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.permission-card.is-allowed {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.permission-card p {
  margin: 0;
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.permission-card .text-button {
  min-height: var(--space-7);
  color: inherit;
}

.pending-card {
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  animation: card-enter var(--motion-enter) var(--ease-standard) both;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

.pending-card__header,
.pending-card__body,
.pending-card__actions {
  padding: var(--space-3);
}

.pending-card.is-important {
  border-left: var(--space-1) solid var(--color-accent-strong);
  background: linear-gradient(
    90deg,
    var(--color-event-important-bg),
    var(--color-surface) 32%
  );
}

.pending-card.is-important .pending-card__header h3 {
  color: var(--color-event-important-text);
}

.pending-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.pending-card__header .icon {
  color: var(--color-accent-primary);
}

.pending-card__header h3 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-body);
}

.pending-card__header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__body {
  display: grid;
  gap: var(--space-3);
}

.pending-card__title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-heading);
  overflow-wrap: anywhere;
}

.pending-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.pending-card__fact {
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.pending-card__fact dt {
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__fact dd {
  margin: var(--space-0-5) 0 0;
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.pending-card__fact.is-time dd {
  font-family: var(--font-mono);
}

.pending-card__note {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border-left: var(--border-state) solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__defaults {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__preparation {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-card__preparation .icon {
  flex: none;
  color: var(--color-accent-strong);
}

.pending-card__inline,
.detail-inline-editor {
  display: grid;
  gap: var(--space-3);
}

.pending-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.pending-inline-field {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.pending-inline-field.is-wide {
  grid-column: 1 / -1;
}

.pending-inline-field__label {
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
}

.pending-inline-field__control {
  width: 100%;
  min-height: var(--control-size);
  padding: var(--space-2);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font: inherit;
}

.pending-inline-field.is-title .pending-inline-field__control {
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
}

.pending-inline-field__control:focus {
  border-color: var(--color-accent-primary);
}

.pending-inline-field.is-invalid .pending-inline-field__control {
  border-color: var(--color-danger);
}

.pending-inline-field__error {
  color: var(--color-danger);
  font-size: 0.78rem;
  line-height: 1.35;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: var(--control-size);
  padding: var(--space-0-5);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
}

.segmented-control__button {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
}

.segmented-control__button.is-selected {
  background: var(--color-surface-selected);
  color: var(--color-accent-strong);
  font-weight: var(--font-weight-semibold);
}

.pending-card__inline.is-saving,
.detail-inline-editor.is-saving {
  opacity: 0.72;
}

.pending-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.pending-card__error {
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-text-primary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.utility-placeholder {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.drawer-scrim {
  position: fixed;
  z-index: 70;
  inset: 0;
  background: var(--color-scrim);
}

.detail-drawer {
  position: fixed;
  z-index: 80;
  top: var(--shell-padding);
  right: var(--shell-padding);
  bottom: var(--shell-padding);
  display: flex;
  width: var(--drawer-width);
  max-width: calc(100vw - (var(--shell-padding) * 2));
  flex-direction: column;
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  transform: translateX(var(--space-4));
  visibility: hidden;
  transition:
    opacity var(--motion-enter) var(--ease-standard),
    transform var(--motion-enter) var(--ease-standard),
    visibility 0s linear var(--motion-enter);
}

.detail-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.detail-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.detail-drawer__content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.detail-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.detail-facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.detail-inline-editor {
  margin-bottom: var(--space-5);
}

.detail-facts--secondary {
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.detail-drawer.is-important {
  border-left: var(--space-1) solid var(--color-accent-strong);
}

.detail-facts__row {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.detail-facts dt {
  color: var(--color-text-secondary);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.detail-facts dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.detail-facts__row.is-time dd {
  font-family: var(--font-mono);
}

.detail-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.confirm-dialog {
  width: min(26rem, calc(100vw - var(--space-6)));
  padding: 0;
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-overlay);
}

.confirm-dialog::backdrop {
  background: var(--color-scrim);
}

.confirm-dialog form {
  padding: var(--space-6);
}

.confirm-dialog__icon {
  display: grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.confirm-dialog h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-heading);
  line-height: var(--line-heading);
}

.confirm-dialog p {
  margin: 0;
  color: var(--color-text-secondary);
}

.confirm-dialog__list {
  display: grid;
  max-height: min(18rem, 45vh);
  margin: 0;
  padding: 0 0 0 var(--space-5);
  overflow-y: auto;
  color: var(--color-text-secondary);
}

.confirm-dialog__list li + li {
  margin-top: var(--space-2);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.reminder-dialog {
  padding: var(--space-6);
}

.reminder-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.reminder-dialog__header .eyebrow {
  color: var(--color-accent-strong);
}

.reminder-dialog__facts {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.reminder-dialog__preparation {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--accent) 8%, white);
  color: var(--color-text-primary);
  line-height: 1.65;
}

.reminder-dialog__snooze {
  display: grid;
  gap: 0.45rem;
  margin-block: 1rem;
}

.reminder-dialog__snooze label {
  font-weight: 650;
}

.reminder-dialog__snooze select,
.reminder-dialog__snooze input,
.compact-select {
  min-height: 2.75rem;
  padding-inline: 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.rail-item.is-important,
.page-list__item.is-important,
.reminder-dialog.is-important {
  border-left: 4px solid var(--accent);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 44%
  );
}

.rail-item.is-important .rail-item__title,
.page-list__item.is-important .page-list__title,
.reminder-dialog.is-important h2 {
  font-weight: 760;
}

.reminder-dialog__facts > div {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: var(--space-3);
}

.reminder-dialog__facts dt {
  color: var(--color-text-secondary);
}

.reminder-dialog__facts dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.toast-region {
  position: fixed;
  z-index: 110;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  width: min(var(--toast-width), calc(100vw - var(--space-8)));
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
  animation: toast-enter var(--motion-standard) var(--ease-standard) both;
}

.toast.is-error {
  border-left: var(--space-1) solid var(--color-danger);
}

.toast.is-success {
  border-left: var(--space-1) solid var(--color-success);
}

.toast p {
  margin: 0;
}

.toast__action,
.toast__close {
  min-height: var(--space-7);
}

.toast__close {
  display: grid;
  width: var(--space-7);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
}

.toast__close .icon {
  width: var(--space-4);
  height: var(--space-4);
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

@media (max-width: 1439px) {
  .app-shell {
    grid-template-columns: var(--nav-compact) minmax(0, 1fr) var(--rail-compact);
  }

  .primary-nav {
    align-items: center;
    padding-inline: var(--space-2);
  }

  .brand {
    justify-content: center;
  }

  .brand__name,
  .nav-item > span:not(.nav-item__count) {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding-inline: 0;
  }

  .nav-item__count {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    margin: 0;
  }
}

@media (max-width: 1199px) {
  .app-shell {
    grid-template-columns: var(--nav-compact) minmax(0, 1fr);
  }

  .right-rail {
    position: fixed;
    z-index: 80;
    top: var(--shell-padding);
    right: var(--shell-padding);
    bottom: var(--shell-padding);
    width: var(--drawer-width);
    max-width: calc(100vw - (var(--shell-padding) * 2));
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transform: translateX(var(--space-4));
    visibility: hidden;
    transition:
      opacity var(--motion-enter) var(--ease-standard),
      transform var(--motion-enter) var(--ease-standard),
      visibility 0s linear var(--motion-enter);
  }

  .right-rail.is-open {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .right-rail__mobile-header {
    display: flex;
    flex: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
  }

  .toolbar-utility {
    display: inline-grid;
  }
}

@media (min-width: 1200px) {
  .toolbar-utility {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .calendar-event__meta {
    display: none;
  }

  .calendar-event {
    padding-inline: var(--space-1);
  }
}

@media (max-width: 767px) {
  :root {
    --calendar-min-width: 0;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: var(--text-body-mobile);
    line-height: var(--line-body-mobile);
  }

  body.has-open-drawer {
    overflow: hidden;
  }

  .app-shell {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding: 0;
  }

  .primary-nav {
    display: none;
  }

  .main-content {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    gap: var(--space-3);
    overflow-x: clip;
    padding: var(--mobile-padding) var(--mobile-padding) calc(var(--mobile-nav-height) + var(--space-5));
  }

  .calendar-toolbar {
    min-height: var(--touch-target);
    align-items: flex-start;
  }

  .calendar-toolbar h1 {
    font-size: var(--text-heading);
    line-height: var(--line-heading);
  }

  .calendar-toolbar__actions {
    gap: var(--space-1);
  }

  #todayButton,
  .view-actions,
  .calendar-section__heading h2,
  .toolbar-utility {
    display: none;
  }

  .mobile-history-entry {
    display: inline-grid;
  }

  .icon-button,
  .button {
    min-height: var(--touch-target);
  }

  .icon-button {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .assistant-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-3);
  }

  .assistant-panel form,
  .assistant-composer,
  .quick-examples {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .assistant-panel__heading label,
  .assistant-composer textarea,
  .button {
    font-size: var(--text-body-mobile);
    line-height: var(--line-body-mobile);
  }

  .assistant-composer {
    grid-template-columns: var(--touch-target) minmax(0, 1fr);
  }

  .assistant-composer textarea {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: calc(var(--touch-target) * 1.5);
  }

  .assistant-composer__mic {
    grid-column: 1;
  }

  .assistant-composer__submit,
  .assistant-composer__cancel {
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }

  .quick-examples > span {
    width: 100%;
  }

  .quick-examples button {
    min-height: var(--touch-target);
    min-width: 0;
    flex: 1 1 100%;
    padding-inline: var(--space-2);
    white-space: normal;
  }

  .mobile-confirmation {
    display: block;
  }

  .mobile-confirmation:empty {
    display: none;
  }

  .calendar-section {
    flex: none;
    min-height: 0;
  }

  .calendar-section__heading {
    min-height: 0;
  }

  .calendar-frame,
  .calendar-list {
    display: none;
  }

  .mobile-day-strip {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
    border: var(--border-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .mobile-day {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: var(--touch-target);
    place-items: center;
    padding: var(--space-1) 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .mobile-day strong {
    font-size: var(--text-label);
    line-height: var(--line-label);
  }

  .mobile-day.is-selected {
    background: var(--color-surface-selected);
    color: var(--color-accent-strong);
  }

  .mobile-day.is-today::after {
    position: absolute;
    top: var(--space-0-5);
    right: var(--space-0-5);
    color: var(--color-accent-strong);
    content: "今";
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .mobile-day__load {
    display: flex;
    height: var(--space-1);
    align-items: flex-end;
    gap: var(--space-0-5);
  }

  .mobile-day__load i {
    display: block;
    width: var(--space-1);
    height: var(--space-0-5);
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  .mobile-timeline {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
  }

  .mobile-timeline__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .mobile-timeline__heading h2 {
    margin: 0;
    font-size: var(--text-heading);
    line-height: var(--line-heading);
  }

  .mobile-timeline__heading span {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .timeline-list {
    position: relative;
    display: grid;
    gap: var(--space-3);
    margin-left: var(--space-5);
  }

  .timeline-list::before {
    position: absolute;
    top: var(--space-2);
    bottom: var(--space-2);
    left: calc(var(--space-5) * -1);
    width: var(--border-thin);
    background: var(--color-border-strong);
    content: "";
  }

  .timeline-event {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-3);
    border: 0;
    border-left: var(--space-1) solid var(--color-accent-primary);
    border-radius: var(--radius-md);
    background: var(--color-event-normal-bg);
    color: var(--color-event-normal-text);
    text-align: left;
  }

  .timeline-event::before {
    position: absolute;
    top: var(--space-4);
    left: calc((var(--space-5) + var(--space-3) + var(--space-0-5)) * -1);
    width: var(--space-2);
    height: var(--space-2);
    border: var(--border-state) solid var(--color-canvas);
    border-radius: var(--radius-pill);
    background: var(--color-accent-primary);
    box-shadow: 0 0 0 var(--border-thin) var(--color-accent-primary);
    content: "";
  }

  .timeline-event.is-projection {
    border: var(--border-state) dashed var(--color-accent-primary);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
  }

  .timeline-event__time {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-label);
    white-space: nowrap;
  }

  .timeline-event__title {
    font-weight: var(--font-weight-semibold);
  }

  .timeline-event__meta {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .timeline-empty {
    padding: var(--space-7) var(--space-4);
    border: var(--border-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
  }

  .timeline-empty h3 {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--text-body-mobile);
    line-height: var(--line-body-mobile);
  }

  .timeline-empty p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
  }

  .right-rail,
  .detail-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    transform: translateY(var(--space-6));
  }

  .right-rail.is-open,
  .detail-drawer.is-open {
    transform: translateY(0);
  }

  .right-rail__mobile-header {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .right-rail__content {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }

  .pending-card__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .pending-inline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pending-card__actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pending-card__actions .button--primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .mobile-nav {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom);
    border-top: var(--border-thin) solid var(--color-border-subtle);
    background: var(--color-surface);
    box-shadow: 0 calc(var(--space-2) * -1) var(--space-6) var(--color-shadow-raised);
  }

  .mobile-nav button {
    display: flex;
    min-width: 0;
    min-height: var(--touch-target);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-0-5);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .mobile-nav button.is-current {
    background: var(--color-surface-selected);
    color: var(--color-accent-strong);
  }

  .mobile-nav__icon {
    position: relative;
    display: inline-flex;
  }

  .mobile-nav__count {
    position: absolute;
    top: calc(var(--space-2) * -1);
    right: calc(var(--space-3) * -1);
    display: grid;
    min-width: var(--space-5);
    height: var(--space-5);
    place-items: center;
    padding-inline: var(--space-1);
    border: var(--border-thin) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-accent-primary);
    color: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: var(--line-meta);
  }

  .toast-region {
    right: var(--space-3);
    bottom: calc(var(--mobile-nav-height) + var(--space-3) + env(safe-area-inset-bottom));
    width: calc(100vw - var(--space-6));
  }

  .toast {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .toast__action {
    grid-column: 2;
    justify-self: start;
  }

  .toast__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
  }

  .network-banner {
    top: var(--space-2);
    width: calc(100vw - var(--space-4));
  }
}

@media (min-width: 1440px) {
  .app-shell {
    grid-template-columns: var(--nav-wide) minmax(52.5rem, 1fr) var(--rail-wide);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: var(--motion-fast) !important;
    transition-property: opacity, color, background-color, border-color !important;
    animation: none !important;
  }

  .progress-mark {
    border-color: var(--color-accent-primary);
    border-right-color: transparent;
  }
}