:root {
  /* The palette: calm, clear, focused, alive, and a warm light. */
  --navy: #0f2f5c;
  --blue: #3a7bc8;
  --sky: #9fd0ef;
  --mist: #dbe8f0;
  --sun: #f7e6bf;

  --bg: #f3f7fb;
  --text: #13294b;
  --muted: #5f7189;
  --border: #d7e2ec;
  --card: rgba(255, 255, 255, 0.85);
  --card-edge: #dfe8f1;
  --field: #fff;
  --heading: var(--navy);
  --accent: var(--blue);
  --button: var(--navy);
  --button-hover: #1d4a85;
  --error: #c2414f;
  --positive: #3f9a6b;
  --neutral: #3a7bc8;
  --negative: #d0566a;
  --positive-tint: #e4f3ea;
  --neutral-tint: #e3eefa;
  --negative-tint: #fbe6e9;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 150 C200 60 380 220 600 130 S1000 40 1200 120' stroke='%239fd0ef' stroke-width='2' opacity='.7'/%3E%3Cpath d='M0 180 C220 110 420 240 640 160 S1020 90 1200 160' stroke='%233a7bc8' stroke-width='1.5' opacity='.35'/%3E%3Cpath d='M0 120 C240 190 460 60 700 140 S1040 200 1200 100' stroke='%239fd0ef' stroke-width='1' opacity='.6'/%3E%3Cpath d='M0 200 C260 160 480 250 720 190 S1060 150 1200 200' stroke='%23f7e6bf' stroke-width='2' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --sky-glow: linear-gradient(180deg, #e8f1f9 0%, #f3f7fb 45%, #fbf6ea 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1a30;
    --text: #e3ecf6;
    --muted: #93a7c0;
    --border: #253d5c;
    --card: rgba(16, 38, 68, 0.85);
    --card-edge: rgba(159, 208, 239, 0.18);
    --field: rgba(255, 255, 255, 0.06);
      --heading: #eaf2fb;
    --accent: var(--sky);
    --button: #3a7bc8;
    --button-hover: #5590d4;
    --error: #f08a96;
    --positive: #5cbf8b;
    --neutral: #5d9be0;
    --negative: #e57386;
    --positive-tint: rgba(92, 191, 139, 0.14);
    --neutral-tint: rgba(93, 155, 224, 0.16);
    --negative-tint: rgba(229, 115, 134, 0.15);
    --sky-glow: linear-gradient(180deg, #0f2f5c 0%, #0a1a30 55%, #0a1a30 100%);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* The sky behind the page, edge to edge however wide the window is. */
html { min-height: 100%; background: var(--sky-glow) var(--bg); }

body {
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  max-width: 40rem;
  min-height: 100vh;
  /* A few strands of moving water under the header. */
  background: var(--waves) center 3rem / 140% 9rem no-repeat;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 0;
}

.wordmark span { color: var(--blue); }

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 4.5rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

header a { text-decoration: none; font-size: 0.95rem; }

header nav { display: flex; gap: 1.25rem; }

/* Each section floats on the water as a soft card. */
main, #signin, #unreachable {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 1.5rem;
  padding: 1rem;
}

@media (min-width: 30rem) {
  main, #signin, #unreachable { padding: 1.25rem; }
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  cursor: pointer;
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 3rem;
  min-height: 0;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--border);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s;
}

.switch input::before {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.switch input:checked { background: var(--blue); }

.switch input:checked::before { transform: translateX(1.25rem); }

.switch input:disabled { opacity: 0.5; }

.hint { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 1rem; }

#days a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}

#days li { padding: 0; }

#days li { border-bottom: 0; }

#days a { flex-wrap: wrap; row-gap: 0.35rem; padding: 0.6rem 0; }

#days .sentiment-bar { flex-basis: 100%; }

#day-sentiment { margin-bottom: 0.5rem; }

#days .count, #none { color: var(--muted); }

#day h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--heading);
  margin: 1rem 0 0.75rem;
}

.mood { font-size: 0.75rem; margin-left: 0.5rem; }

.mood.negative { color: var(--negative); }

.mood.neutral { color: var(--neutral); }

.mood.positive { color: var(--positive); }

form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }

label { font-weight: 500; color: var(--heading); }

input, button {
  min-height: 44px;
  font: inherit;
  border-radius: 14px;
}

input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  background: var(--field);
  color: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder { color: var(--muted); opacity: 0.8; }

input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 208, 239, 0.45); }

#description { min-height: 52px; font-size: 1.05rem; }

button {
  border: 0;
  border-radius: 999px;
  padding: 0 1.5rem;
  background: var(--button);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, filter 0.15s;
}

/* Only with a mouse: on phones a tap would leave the button looking hovered. */
@media (hover: hover) {
  button:hover:not(:disabled) { background: var(--button-hover); cursor: pointer; }

  .controls button:hover:not(:disabled):not([aria-pressed='true']),
  .sentiment button:hover:not(:disabled):not([aria-pressed='true']) { background: var(--border); color: var(--text); }

  .sentiment button[aria-pressed='true']:hover { filter: brightness(1.12); }
}

.error { color: var(--error); margin: 0; }

#loading { color: var(--muted); text-align: center; }

#unreachable { display: flex; flex-direction: column; gap: 0.75rem; }

#patterns-error { margin-bottom: 1.5rem; }

ul { list-style: none; margin: 0; padding: 0; }

li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

li p { margin: 0.25rem 0 0; }

li .head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.controls { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.controls button, .sentiment button {
  min-height: 32px;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 400;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

#log-sentiment button { min-height: 40px; padding: 0 1rem; font-size: 0.9rem; }

button.delete { min-width: 32px; padding: 0; }

.sentiment { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Each sentiment wears its own color, faintly until it's picked. */
.sentiment button { border-color: transparent; }

.sentiment button::before {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.4em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: 0.02em;
}

.sentiment button[aria-pressed='true']::before { background: currentColor; }

/* Each thought's row is narrow on a phone, so its buttons go without the dot. */
.controls .sentiment { gap: 0.25rem; }

.controls .sentiment button::before { content: none; }

.sentiment button[value='negative'] { background: var(--negative-tint); color: var(--negative); }

.sentiment button[value='neutral'] { background: var(--neutral-tint); color: var(--neutral); }

.sentiment button[value='positive'] { background: var(--positive-tint); color: var(--positive); }

.sentiment button:disabled { opacity: 0.5; }

.sentiment button[aria-pressed='true'] { color: #fff; border-color: transparent; }

.sentiment button[value='negative'][aria-pressed='true'] { background: var(--negative); }

.sentiment button[value='neutral'][aria-pressed='true'] { background: var(--neutral); }

.sentiment button[value='positive'][aria-pressed='true'] { background: var(--positive); }

h2 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

#graphs {
  margin-bottom: 1.25rem;
  padding: 0.25rem 1rem;
  border-radius: 1.1rem;
  background: var(--field);
  border: 1px solid var(--border);
}

summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::before { content: '▸'; color: var(--muted); font-size: 0.8em; }

#graphs[open] summary::before { content: '▾'; }

#graphs[open] summary { margin-bottom: 0.5rem; }

.chart {
  display: flex;
  gap: 2px;
  height: 6rem;
  margin-bottom: 1.25rem;
}

.bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
}

.bar span { line-height: 1rem; min-height: 1rem; white-space: nowrap; }

.track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.fill {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.bar .fill span { flex: 0 1 0; min-height: 0; line-height: 0; }

.fill .unanalyzed, .legend .unanalyzed::before { background: var(--border); }

.fill .positive, .legend .positive::before { background: var(--positive); }

.fill .neutral, .legend .neutral::before { background: var(--neutral); }

.fill .negative, .legend .negative::before { background: var(--negative); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.legend span { display: flex; align-items: center; gap: 0.35rem; }

.legend span::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; }

#trend { margin-bottom: 1.25rem; }

#trend-bars {
  position: relative;
  display: flex;
  gap: 2px;
  height: 10rem;
}

#trend-bars .zero {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--muted);
  opacity: 0.5;
  z-index: 1;
}

#trend-bars .day { position: relative; flex: 1; min-width: 0; max-width: 2rem; }

#trend-bars .stack {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
}

#trend-bars .stack span { flex: 0 1 0; min-height: 0; }

#trend-bars .positive { background: var(--positive); }

#trend-bars .neutral { background: var(--neutral); }

#trend-bars .negative { background: var(--negative); }

.trend-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

li .none { color: var(--muted); font-style: italic; }

time { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.sentiment-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}

#today { margin: 0 0 1.25rem; }

.sentiment-bar span { flex: 0 1 0; }

.sentiment-bar .negative { background: var(--negative); }

.sentiment-bar .neutral { background: var(--neutral); }

.sentiment-bar .positive { background: var(--positive); }