: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.8);
  --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, #cfe2f4 0%, #e6eff8 35%, #f3f6f9 65%, #f8f1e2 100%);
  /* Water along the bottom of the window: soft bands of blue, with bright lines through them. */
  --waves-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C220 70 420 210 640 130 S1020 60 1200 120 V300 H0Z' fill='%239fd0ef' opacity='.4'/%3E%3Cpath d='M0 190 C240 130 460 250 700 180 S1060 120 1200 170 V300 H0Z' fill='%233a7bc8' opacity='.16'/%3E%3Cpath d='M0 240 C260 200 500 290 760 230 S1080 200 1200 230 V300 H0Z' fill='%233a7bc8' opacity='.2'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 150 C220 80 420 220 640 140 S1020 70 1200 130' stroke='%23fff' stroke-width='1.5' opacity='.8'/%3E%3Cpath d='M0 205 C240 145 460 265 700 195 S1060 135 1200 185' stroke='%23fff' stroke-width='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1a30;
    --text: #e3ecf6;
    --muted: #93a7c0;
    --border: #253d5c;
    --card: rgba(16, 38, 68, 0.78);
    --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(--waves-deep) center bottom / 160% 14rem no-repeat, 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, .wordmark {
  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); }

/* The same header on every page: the name, linking home, and who's signed in on one line, then a link to each
   section. */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.75rem;
  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; }

.wordmark a { color: inherit; font-size: inherit; }

header nav { display: flex; gap: 1.25rem; flex-basis: 100%; }

/* Six sections fit on one line on narrow phones, spread across the width. */
@media (max-width: 420px) {
  header nav { gap: 0.4rem; justify-content: space-between; }
  header nav a { font-size: 0.82rem; }
}

/* The section you're in. */
header nav a[aria-current='page'] { color: var(--heading); font-weight: 600; }

/* Who's signed in and Sign out, at the right of the name. The email is cut short when it's too long to fit. */
header .account { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: baseline; gap: 0.75rem; }

#signed-in-as {
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--muted);
}

/* A page's own heading, between the header and the page. */
header + h1 { margin: -3rem 0 1.5rem; }

/* Each section floats on the water as a soft card. */
/* Cards float on the sky, the water just showing through. No blur or shadow: WebKit paints them too slowly, and the
   tests' clicks time out waiting. */
main, #intro, #signin, #signup, #forgot, #reset, #unreachable {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 1.5rem;
  padding: 1rem;
}


@media (min-width: 30rem) {
  main, #intro, #signin, #signup, #forgot, #reset, #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; }

/* A short note at the top of the screen, over the page, like "Saved." */
.toast {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
.toast[hidden] { display: none; }

#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%; }

#categories { margin-bottom: 1.5rem; }
#category-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#category-list .count { color: var(--muted); }
#category-list .rename { margin-left: auto; }
#category-list .error { flex-basis: 100%; }
#category-list form { display: flex; flex-direction: row; gap: 0.4rem; align-items: center; flex: 1; margin: 0; }
#category-list input { flex: 1; min-width: 0; }
#category-list 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);
}
#day .category { color: var(--muted); font-size: 0.75rem; }

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

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

#day h2, #category-view 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, textarea, button {
  min-height: 44px;
  font: inherit;
  border-radius: 14px;
}

input, textarea {
  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, textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 208, 239, 0.45); }

/* On dark, the glow alone is easy to miss: a solid ring and a lighter field show where typing goes. */
@media (prefers-color-scheme: dark) {
  input:focus, textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; background: rgba(255, 255, 255, 0.1); }
}

#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;
}

/* Each further section is set apart from the one above it. */
#change-password, #export, #delete-account {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#export h2, #export .hint, #export .error,
#delete-account h2, #delete-account .hint, #delete-account .error,
#change-password h2, #change-password .hint, #change-password .error { margin: 0; }

#delete-account label, #change-password label { font-size: 0.9rem; }

/* Red, since there's no undo. */
#delete-account-button { background: var(--error); }

#delete-account-button:disabled { opacity: 0.4; }

#deleted, #changed, #feedback-sent { margin: 0; color: var(--muted); }

#feedback-text { resize: vertical; line-height: 1.5; }

#feedback .error { margin: 0; }

#feedback-button:disabled { opacity: 0.4; }

/* Off while it asks, or shows its check. */
#save:disabled { opacity: 0.4; }

#password-hint { margin: -0.25rem 0 0; }

/* A button that reads as a link, like Sign out in the header. */
button.link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Quiet buttons: for switching between signing in, signing up and resetting a password. They read as links, under the
   main button, with a full-size place to tap. */
.quiet {
  align-self: center;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
  background: none;
  color: var(--accent);
  border: 0;
  font-size: 0.95rem;
  font-weight: 400;
}

/* Two of them side by side. */
.quiet-links { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.quiet-links .quiet { margin-top: 0; }

/* 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; }

  .quiet:hover:not(:disabled) { background: none; text-decoration: underline; }

  button.link:hover:not(:disabled) { background: none; text-decoration: underline; }

  #delete-account-button:hover:not(:disabled) { background: var(--error); filter: brightness(1.12); }

  .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; }

/* What a page says when it has nothing to show: quiet, centered. */
.empty { text-align: center; color: var(--muted); margin: 1.5rem 0; }
.notice { margin: 0; }

#loading, #verifying { 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; }

/* A thought's category: a quiet tag, tapped to change it; ✎ beside it, at the right, under delete. */
.tags { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.tags .category { flex: 1 1 auto; min-width: 0; }
button.edit {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 400;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.category button, .words-form 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);
  border-radius: 999px;
}
.category form, .words-form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
/* 16px, so iPhones don't zoom in when one is focused. The same height, so they line up. */
.category input, .category select, .words-form input { flex: 1 1 10rem; min-width: 0; height: 2.5rem; min-height: 0; font-size: 1rem; padding: 0 0.75rem; }
/* The list looks like the site's other fields, not the browser's own, with its own arrow. */
.category select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8ea6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  padding-right: 2.25rem;
  color: inherit;
  font-family: inherit;
}

/* Always one line: on the narrowest phones the buttons get tighter instead of wrapping. */
.sentiment { display: flex; gap: 0.4rem; }

.sentiment button { white-space: nowrap; }

@media (max-width: 360px) {
  .controls button, .sentiment button { padding: 0 0.4rem; }
  #log-sentiment button { flex: 1 1 0; min-width: 0; padding: 0 0.3rem; }
  .controls .sentiment { gap: 0.15rem; }
}

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

/* Each wears its sentiment's shape (see "Usable without color" below), in its own color, white once picked. */
.sentiment button::before {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.4em;
  background: currentColor;
  border-radius: 50%;
  vertical-align: 0.02em;
}

.controls .sentiment { gap: 0.25rem; }

.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 {
  position: relative;
  display: flex;
  gap: 2px;
  height: 6rem;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

/* Grid lines across the bars' track (above the times below them), each labeled at the left. */
.chart .grid { position: absolute; top: 0; right: 0; bottom: 1rem; left: 0; pointer-events: none; }

.chart .gridline { position: absolute; left: 1.5rem; right: 0; margin-bottom: -1px; border-top: 1px solid var(--border); }

.chart .tick {
  position: absolute;
  left: 0;
  width: 1.1rem;
  transform: translateY(50%);
  text-align: right;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.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; }

/* Spread from edge to edge, so the first and last days sit under their dates however few there are. */
#trend-bars {
  position: relative;
  display: flex;
  justify-content: space-between;
  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: 12px;
  border-radius: 6px;
  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); }

/* A thought as a quiet row: a dot, its words, its time at the right. Tapping it opens its controls below. */
#thoughts li, #just-logged-list li, #category-thoughts li { padding: 0.15rem 0; }
button.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
}
button.row:disabled { opacity: 1; cursor: default; }
.row .dot { flex: none; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--mist); }
.row .dot.positive { background: var(--positive); }
.row .dot.neutral { background: var(--neutral); }
.row .dot.negative { background: var(--negative); }
/* One line, cut off with …, until the row is opened to show all its words. */
.row .words { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row[aria-expanded='true'] .words { white-space: normal; overflow-wrap: anywhere; }
.row .words.none { color: var(--muted); }
.row time { flex: none; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.panel { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0 0.5rem 1.4rem; }
.panel .controls { margin-left: 0; justify-content: space-between; }
@media (hover: hover) {
  button.row:hover:not(:disabled) { background: none; }
  button.row:hover:not(:disabled) .words { text-decoration: underline; text-decoration-color: var(--border); }
}

/* Insights: the share of each sentiment, as tiles. */
#tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.5rem; }
#tiles li { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.75rem 0.25rem; border: 0; border-radius: 1rem; }
#tiles strong { font-size: 1.35rem; font-weight: 600; }
#tiles span { font-size: 0.8rem; }
#tiles .positive { background: var(--positive-tint); color: var(--positive); }
#tiles .neutral { background: var(--neutral-tint); color: var(--neutral); }
#tiles .negative { background: var(--negative-tint); color: var(--negative); }

/* Common themes: each a bar as long as its count, against the most used. */
#category-list li.theme-head { display: flex; align-items: center; gap: 0.6rem; }
.theme-head a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); text-decoration: none; }
/* The ring: a pie with a hole, so it reads lighter. */
.theme-pie {
  width: 9rem;
  aspect-ratio: 1;
  margin: 0.5rem auto 1.25rem;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}
.swatch { flex: none; width: 0.65rem; height: 0.65rem; border-radius: 3px; }
#category-list .count { flex: none; min-width: 1.5rem; text-align: right; }
/* A category's name, at the top of its page: it reads as a heading, and tapping it renames it. */
#category-name .name {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--heading);
  font: inherit;
  text-align: left;
  text-decoration: underline dotted var(--border);
  text-underline-offset: 0.25em;
}
#category-name form { display: flex; flex-direction: row; gap: 0.4rem; align-items: center; margin: 0; }
#category-name input { flex: 1; min-width: 0; font-size: 1rem; }
#category-count { margin: -0.25rem 0 0.75rem; }

/* A first visit: what Pluckstream is, simply. */
#intro { display: flex; flex-direction: column; gap: 0.75rem; }
#intro .tagline { margin: 0; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
#intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--heading);
}
#intro p:not(.tagline) { margin: 0 0 0.5rem; color: var(--muted); }

/* Usable without color, as in grayscale: each sentiment has its own shape and its own pattern too. Positive points up
   and is solid, neutral is round and striped, negative points down and is crosshatched; a thought still waiting on
   analysis is a hollow ring. */
:root {
  --stripes: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 6px);
  --crosshatch: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 5px);
  --up: polygon(50% 0%, 100% 100%, 0% 100%);
  --down: polygon(0% 0%, 100% 0%, 50% 100%);
}
.sentiment-bar .neutral, .fill .neutral, #trend-bars .neutral { background-image: var(--stripes); }
.sentiment-bar .negative, .fill .negative, #trend-bars .negative { background-image: var(--crosshatch); }
.row .dot.positive, .legend .positive::before { clip-path: var(--up); border-radius: 0; width: 0.75rem; }
.row .dot.negative, .legend .negative::before { clip-path: var(--down); border-radius: 0; width: 0.75rem; }
.sentiment button[value='positive']::before { clip-path: var(--up); border-radius: 0; width: 0.7em; }
.sentiment button[value='negative']::before { clip-path: var(--down); border-radius: 0; width: 0.7em; }
.row .dot.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* For screen readers only: each page's heading (the header marks where you are) and labels the page shows otherwise. */
body > h1, .for-screen-readers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}