:root {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f6f6;
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --border-subtle: #e5e5e5;
  --border-control: #b9b9b9;
  --border-control-strong: #9e9e9e;
  --accent: #6b7280;
  --focus-glow: rgba(107, 114, 128, 0.2);
  --state-error-border: #b45353;
  --state-error-glow: rgba(180, 83, 83, 0.2);
  --state-error-text: #8a3f3f;
  --text-placeholder: #7a7a7a;
  --button-bg: #ffffff;
  --button-bg-hover: #f2f2f2;
  --field-bg: #ffffff;
  --field-bg-hover: #fcfcfc;
  --timeline-type-bg: #efefef;
  --timeline-type-text: #4a4a4a;
  --timeline-type-border: #d6d6d6;
  --timeline-milestone-border: #6b7280;

  --font-family-base: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-size-title: 1.25rem;
  --font-size-label: 0.75rem;
  --font-size-body: 0.95rem;
  --font-size-meta: 0.75rem;
  --line-height-body: 1.6;
  --line-height-tight: 1.35;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --radius-1: 6px;
  --radius-2: 8px;
  --size-control-min-height: 44px;
  --size-focus-ring: 3px;
  --size-textarea-min-height: 120px;
  --size-textarea-min-height-mobile: 96px;
  --size-composer-mobile-reserve: 208px;
  --duration-fast: 180ms;
  --duration-normal: 220ms;
  --duration-stagger-step: 40ms;
  --easing-standard: ease-out;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --text-primary: #eaeaea;
  --text-secondary: #a1a1a1;
  --border-subtle: #2a2a2a;
  --border-control: #4a4a4a;
  --border-control-strong: #666666;
  --accent: #9ca3af;
  --focus-glow: rgba(156, 163, 175, 0.22);
  --state-error-text: #d19c9c;
  --text-placeholder: #8d8d8d;
  --button-bg: #141414;
  --button-bg-hover: #202020;
  --field-bg: #141414;
  --field-bg-hover: #1a1a1a;
  --timeline-type-bg: #202020;
  --timeline-type-text: #d3d3d3;
  --timeline-type-border: #3b3b3b;
  --timeline-milestone-border: #9ca3af;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition:
    background-color var(--duration-normal) var(--easing-standard),
    color var(--duration-normal) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: var(--line-height-tight);
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-title);
}

p {
  margin: 0;
}

small,
.meta {
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
}

label {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: 500;
  color: var(--text-secondary);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-min-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-1);
  background: var(--button-bg);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

button:hover,
.btn:hover {
  background: var(--button-bg-hover);
}

.btn-outline {
  border-color: var(--border-control);
}

.btn-text {
  border-color: transparent;
  background: transparent;
  padding-inline: var(--space-2);
}

.btn-text:hover {
  border-color: transparent;
}

input,
textarea,
select,
.input,
.textarea {
  width: 100%;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-1);
  background: var(--field-bg);
  padding: var(--space-2) var(--space-3);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

input:hover,
textarea:hover,
select:hover,
.input:hover,
.textarea:hover {
  border-color: var(--border-control-strong);
  background: var(--field-bg-hover);
}

textarea {
  min-height: var(--size-textarea-min-height);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--size-focus-ring) var(--focus-glow);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.btn[aria-disabled="true"],
.input:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-secondary);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
.input.is-error,
.textarea.is-error {
  border-color: var(--state-error-border);
}

input[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
.input.is-error:focus-visible,
.textarea.is-error:focus-visible {
  box-shadow: 0 0 0 var(--size-focus-ring) var(--state-error-glow);
}

.field {
  width: 100%;
}

.field-note {
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
}

.field-error {
  font-size: var(--font-size-meta);
  color: var(--state-error-text);
}

.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  background: var(--bg-secondary);
  padding: var(--space-3);
}

.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-entry {
  position: relative;
}

.motion-enabled .timeline-entry {
  opacity: 0;
  transform: translateY(6px);
}

.motion-enabled .timeline-entry.entry-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-normal) var(--easing-standard) var(--entry-stagger, 0ms),
    transform var(--duration-normal) var(--easing-standard) var(--entry-stagger, 0ms);
}

.entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.entry-type {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--timeline-type-border);
  border-radius: 999px;
  background: var(--timeline-type-bg);
  color: var(--timeline-type-text);
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 1;
  padding: 3px 8px;
}

.entry-type-milestone {
  border-color: var(--timeline-milestone-border);
  color: var(--timeline-milestone-border);
}

.entry-content {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.entry-time,
.entry-meta {
  color: var(--text-secondary);
}

.entry-milestone {
  border-left: 3px solid var(--timeline-milestone-border);
  padding-left: calc(var(--space-3) - 2px);
}

/* Reusable motion classes for future modal usage (no modal UI introduced here). */
.modal-backdrop {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
}

.modal-backdrop.modal-enter-active,
.modal-backdrop.modal-exit {
  opacity: 1;
}

.modal-panel {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-normal) var(--easing-standard),
    transform var(--duration-normal) var(--easing-standard);
}

.modal-panel.modal-enter-active,
.modal-panel.modal-exit {
  opacity: 1;
  transform: translateY(0);
}

.app-shell {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-primary);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) 0;
}

.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.app-main {
  padding-top: var(--space-4);
}

.composer-zone {
  margin-top: var(--space-4);
}

.composer {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  background: var(--bg-primary);
  padding: var(--space-3);
}

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

@media (max-width: 767px) {
  .app-shell {
    padding-bottom: calc(var(--size-composer-mobile-reserve) + env(safe-area-inset-bottom));
  }

  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .header-row .btn {
    align-self: flex-start;
  }

  .composer-zone {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    margin-top: 0;
    padding: var(--space-2) var(--space-3)
      calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-primary);
  }

  .composer {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  .composer-actions {
    grid-template-columns: 1fr;
  }

  .composer-actions button {
    width: 100%;
  }

  .composer textarea {
    min-height: var(--size-textarea-min-height-mobile);
  }

  .entry-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

@media (max-width: 420px) {
  .app-shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .composer-zone {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .composer {
    padding: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .motion-enabled .timeline-entry {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .app-shell {
    padding: var(--space-4);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
  }
}

.stack-1 > * + * {
  margin-top: var(--space-1);
}

.stack-2 > * + * {
  margin-top: var(--space-2);
}

.stack-3 > * + * {
  margin-top: var(--space-3);
}

.stack-4 > * + * {
  margin-top: var(--space-4);
}

.stack-5 > * + * {
  margin-top: var(--space-5);
}

.stack-6 > * + * {
  margin-top: var(--space-6);
}