/* Mulch Practice — Loam (default) + Dusk (optional dark theme, `[data-theme="dusk"]`) */

@import url("tokens.css");

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--mp-canvas);
  color: var(--mp-ink);
}
.hidden { display: none !important; }

.login-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.login-form {
  width: 100%;
  max-width: 320px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--mp-surface);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-float);
}
.login-form h1 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.brand-mark { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.login-form input, .login-form button { padding: 0.6rem; font-size: 1rem; }
.error { color: var(--mp-danger); font-size: 0.9rem; min-height: 1.2em; }
/* Requirement stated up front rather than only as an error after the fact.
   Negative top margin pulls it against the field it describes, out of the
   form's default 0.75rem flex gap. */
.field-hint { font-size: 0.8rem; color: var(--mp-ink-soft); margin: -0.35rem 0 0; }
.legal-links { font-size: 0.78rem; color: var(--mp-ink-soft); text-align: center; margin: 0; }
.legal-links a { color: var(--mp-accent); }

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.app-header {
  flex-shrink: 0;
  background: var(--mp-surface);
  color: var(--mp-ink);
  border-bottom: 1px solid var(--mp-line);
  padding: 0.75rem 1.15rem;
  display: flex;
  align-items: center;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 0.49rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.app-brand .brand-mark { width: 2.4rem; height: 2.4rem; }
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.sidebar {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  border-left: 1px solid var(--mp-line);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  gap: 1.5rem;
}
.sidebar-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; line-height: 1.4; opacity: 0.9;
}
.sidebar-section { display: flex; flex-direction: column; gap: 0.6rem; }
.sidebar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-ink-faint);
  margin-bottom: 0.15rem;
}
.sidebar-btn {
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  border-radius: var(--mp-radius);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--mp-ink);
  text-align: left;
}
.sidebar-btn.secondary { background: transparent; color: var(--mp-ink-soft); }
.sidebar-btn.highlight { background: var(--mp-accent); color: var(--mp-accent-ink); font-weight: 600; }
.sidebar-btn.growth-secondary { background: var(--mp-accent-tint); color: var(--mp-accent-tint-ink); }
.sidebar-btn:hover { filter: brightness(1.08); }
.sidebar-btn:not(.highlight):not(.growth-secondary):not(.growth-btn):not(.weekly-btn):hover { background: var(--mp-line); }
.usage-summary {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--mp-ink-soft);
  padding: 0 0.1rem;
  white-space: pre-line;
}
.logout {
  background: transparent;
  color: var(--mp-ink-soft);
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--mp-radius);
  cursor: pointer;
  flex-shrink: 0;
}

/* Settings dropdown — a lightweight popover, not a modal */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 100%;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-float);
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  gap: 0.15rem;
  z-index: 20;
}
.dropdown-item {
  background: none;
  border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 5px;
  font-size: 0.88rem;
  color: var(--mp-ink);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--mp-accent-tint); }
a.dropdown-item { text-decoration: none; display: block; }

/* Divider between per-conversation actions (Start New / Session Actions)
   and app-level navigation (Settings / Admin / Growth Reflections) below. */
#settings-section {
  border-top: 1px solid var(--mp-line);
  padding-top: 1rem;
}
.growth-btn {
  background: var(--mp-accent-tint);
  color: var(--mp-accent-tint-ink);
  font-weight: 600;
}
.growth-btn-described {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.growth-btn-title { font-weight: 600; }
.growth-btn-desc {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--mp-accent-tint-ink);
  line-height: 1.35;
  white-space: normal;
}
.growth-btn:hover { filter: brightness(1.12); }
.weekly-btn {
  background: var(--mp-clay-tint);
  color: var(--mp-clay-tint-ink);
  font-weight: 600;
}
.weekly-btn-described {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.weekly-btn-title { font-weight: 600; }
.weekly-btn-desc {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--mp-clay-tint-ink);
  line-height: 1.35;
  white-space: normal;
}
.weekly-btn:hover { filter: brightness(1.12); }

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.growth-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--mp-line);
  background: var(--mp-surface);
}
.growth-back-btn {
  background: none;
  border: none;
  color: var(--mp-accent);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0;
}
.growth-title { font-weight: 600; color: var(--mp-ink); }
.growth-context-summary { font-size: 0.8rem; color: var(--mp-ink-soft); margin-left: auto; }
.export-csv-btn {
  margin-left: auto;
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.export-csv-btn:hover { background: var(--mp-accent-tint); }
.header-action-btn {
  margin-left: auto;
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.header-action-btn:hover { background: var(--mp-accent-tint); }
.weekly-learnings-toolbar {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--mp-line);
  background: var(--mp-surface);
}
.weekly-learnings-toolbar input[type="text"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  font-size: 0.9rem;
  font-family: inherit;
}
.empty-state { color: var(--mp-ink-soft); text-align: center; margin-top: 3rem; }
.session-banner {
  background: #fff3cd;
  color: #664d03;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #ffe69c;
}
.session-banner button {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}
.phi-reminder {
  font-size: 0.75rem;
  color: var(--mp-ink-soft);
  text-align: center;
  margin: 0;
  padding: 0.4rem 1.5rem;
  border-top: 1px solid var(--mp-line);
  background: var(--mp-surface-sunk);
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
#growth-messages { background: var(--mp-canvas-reflect); }
#weekly-learnings-list { background: var(--mp-canvas-reflect); }
.message {
  max-width: 70ch;
  margin-bottom: 1.25rem;
  white-space: pre-wrap;
  line-height: 1.5;
}
.message.user { margin-left: auto; background: var(--mp-user-bubble); color: var(--mp-user-ink); padding: 0.75rem 1rem; border-radius: var(--mp-radius); }
.message.assistant { background: var(--mp-surface); padding: 0.75rem 1rem; border-radius: var(--mp-radius); border: 1px solid var(--mp-line); position: relative; }
.message-ts {
  font-size: 0.7rem;
  color: var(--mp-ink-soft);
  margin-top: 0.35rem;
  white-space: nowrap;
}
.message.user .message-ts { text-align: right; }
.message-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.copy-btn {
  font-size: 0.75rem;
  cursor: pointer;
  background: var(--mp-accent-tint);
  color: var(--mp-accent-tint-ink);
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}
.system-note {
  font-size: 0.8rem;
  color: var(--mp-ink-soft);
  text-align: center;
  font-style: italic;
  margin: -0.5rem 0 1.25rem;
}

.save-nudge {
  color: var(--mp-ink-soft);
}

.save-nudge button {
  font: inherit;
  font-style: normal;
  cursor: pointer;
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: 4px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.save-nudge button:disabled {
  opacity: 0.6;
  cursor: default;
}
.typing-dots { display: inline-flex; gap: 4px; padding: 0.2rem 0; }
.typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mp-ink-faint);
  animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
.message-form {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--mp-line);
  background: var(--mp-surface);
}
.message-form textarea {
  flex: 1;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  resize: none;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  font-family: inherit;
}
.message-form button {
  padding: 0 1rem;
  border-radius: var(--mp-radius);
  border: none;
}
#mic-btn, #growth-mic-btn {
  font-size: 1.05rem;
  padding: 0 0.7rem;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  cursor: pointer;
}
#mic-btn.recording, #growth-mic-btn.recording {
  background: var(--mp-danger);
  color: var(--mp-danger-ink);
  animation: pulse 1.4s ease-in-out infinite;
}
#mic-btn:disabled, #growth-mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.composer-save-btn {
  font-size: 0.9rem;
  padding: 0 0.9rem;
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  font-weight: 600;
  border: none;
  border-radius: var(--mp-radius);
  cursor: pointer;
  white-space: nowrap;
}
.composer-save-btn:hover { filter: brightness(1.1); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 69, 58, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(224, 69, 58, 0); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--mp-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal {
  position: relative;
  background: var(--mp-surface);
  padding: 1.75rem;
  border-radius: var(--mp-radius-lg);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.modal-close-x {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--mp-radius);
  cursor: pointer;
  color: var(--mp-ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
}
.modal-close-x:hover { background: var(--mp-surface-sunk); color: var(--mp-ink); }
.modal h2 { padding-right: 1.75rem; }
/* Without this, flexbox shrinks fields (textareas, selects) to fit the
   max-height above instead of leaving them full-size and scrolling the
   modal itself — the intended behavior when content overflows. */
.modal > * {
  flex-shrink: 0;
}
.modal h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.modal label { font-size: 0.85rem; font-weight: 600; color: var(--mp-ink); }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; flex-shrink: 0; }
.modal textarea { padding: 0.6rem; font-size: 0.95rem; font-family: inherit; resize: vertical; }
.modal select { padding: 0.6rem; font-size: 0.95rem; font-family: inherit; }
.modal input[type="text"], .modal input[type="date"] { padding: 0.6rem; font-size: 0.95rem; font-family: inherit; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); }
#weekly-learning-retrieval-step, #weekly-learning-form-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.weekly-retrieval-entry {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--mp-clay-tint);
  border-radius: var(--mp-radius);
  padding: 1rem 1.1rem;
}
.weekly-retrieval-number { font-weight: 700; color: var(--mp-ink-soft); }
.weekly-retrieval-title { font-weight: 600; color: var(--mp-ink); }
.weekly-retrieval-body {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  color: var(--mp-ink);
  white-space: pre-wrap;
}
.weekly-learning-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.weekly-learning-date-row label { margin: 0; }
.weekly-learning-date-row input[type="date"] { flex-shrink: 0; }
.weekly-word-count { font-size: 0.8rem; color: var(--mp-ink-soft); text-align: right; margin: 0; }
.weekly-word-count-warn { color: var(--mp-clay); font-weight: 600; }
.weekly-edit-form { display: flex; flex-direction: column; gap: 0.6rem; }
.weekly-edit-form label { font-size: 0.8rem; font-weight: 600; color: var(--mp-ink); }
.weekly-edit-form input[type="text"], .weekly-edit-form input[type="date"], .weekly-edit-form textarea {
  padding: 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
#invite-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
#invite-link-row label { width: 100%; }
#invite-link-row input { flex: 1; min-width: 0; }
#invite-link-row button { padding: 0.5rem 1rem; cursor: pointer; border-radius: var(--mp-radius); border: none; }
.modal-hint { font-size: 0.8rem; color: var(--mp-ink-soft); margin: 0; }
.modal-hint-divider { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mp-line); }
.help-link {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mp-ink);
  text-decoration: none;
  background: var(--mp-surface-sunk);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.85rem 1rem;
  text-align: center;
}
.help-link:hover { background: var(--mp-accent-tint); }
.modal ul { margin: 0; padding-left: 1.25rem; font-size: 0.9rem; }
.modal li { margin-bottom: 0.5rem; }
.modal li:last-child { margin-bottom: 0; }
.modal-actions { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.modal-actions button { padding: 0.5rem 1rem; cursor: pointer; border-radius: var(--mp-radius); border: none; }
#save-focus-btn, #save-note-settings-btn, #apply-note-options-btn { background: var(--mp-accent); color: var(--mp-accent-ink); }
.modal-actions .secondary, #invite-link-row .secondary { background: var(--mp-surface-sunk); color: var(--mp-ink); }
#save-focus-btn:disabled, #profile-save-close-btn:disabled,
#save-note-settings-btn:disabled, #note-settings-save-close-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-status { font-size: 0.85rem; color: var(--mp-accent-tint-ink); min-height: 1.2em; margin: 0; }
.modal-close-confirm {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffe69c;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.25rem;
}
.modal-close-confirm p { margin: 0 0 0.6rem; font-size: 0.85rem; }
.modal-close-confirm .modal-actions { margin-top: 0; flex-wrap: wrap; }
.modal-close-confirm .modal-actions button { font-size: 0.85rem; padding: 0.4rem 0.75rem; }

.reflection-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 70ch;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.admin-summary-panel {
  max-width: 70ch;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-summary-panel:empty { display: none; }
.admin-summary-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  padding: 0.9rem 1.1rem;
}
.admin-summary-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-ink-soft);
  font-weight: 600;
}
.admin-pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-pill {
  font-size: 0.78rem;
  color: var(--mp-ink);
  background: var(--mp-surface-sunk);
  border-radius: 5px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}
.admin-summary-card.highlight { background: var(--mp-accent-tint); border-color: var(--mp-accent); }
.admin-summary-card.highlight .stat { font-size: 1.3rem; font-weight: 700; color: var(--mp-accent); }
.admin-summary-card.highlight .stat-label { font-size: 0.85rem; color: var(--mp-accent-tint-ink); margin-top: 0.15rem; }
.reflection-item {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-surface);
}
.reflection-item-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  font: inherit;
  text-align: left;
}
.reflection-item-date { font-size: 0.75rem; color: var(--mp-ink-soft); flex-shrink: 0; }
.reflection-item-kind {
  font-size: 0.7rem;
  color: var(--mp-ink-soft);
  background: var(--mp-surface-sunk);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
}
.reflection-item-kind.error-badge, .admin-pill.error-badge { color: var(--mp-danger); background: var(--mp-danger-tint); }
.user-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--mp-danger);
  background: var(--mp-danger-tint);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.user-delete-btn:hover { background: var(--mp-danger-tint); filter: brightness(0.95); }
.user-delete-btn:disabled { opacity: 0.5; cursor: default; }
.signup-invite-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--mp-accent-tint-ink);
  background: var(--mp-accent-tint);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.signup-invite-btn:hover { filter: brightness(0.97); }
.reflection-item-headline {
  flex: 1;
  font-size: 0.9rem;
  color: var(--mp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reflection-item-edited-note { font-size: 0.75rem; color: var(--mp-ink-soft); font-style: italic; flex-shrink: 0; }
.reflection-item-caret { flex-shrink: 0; color: var(--mp-ink-soft); font-size: 0.8rem; }
.reflection-item-body { padding: 0 0.9rem 0.9rem; border-top: 1px solid var(--mp-surface-sunk); padding-top: 0.75rem; }
.reflection-text { margin: 0; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; }
.reflection-edit-textarea { width: 100%; padding: 0.6rem; font-size: 0.9rem; font-family: inherit; resize: vertical; box-sizing: border-box; }
.reflection-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.reflection-actions button { padding: 0.35rem 0.75rem; font-size: 0.8rem; cursor: pointer; border-radius: var(--mp-radius); border: none; }
.reflection-edit-btn, .reflection-save-btn { background: var(--mp-accent); color: var(--mp-accent-ink); }
.reflection-cancel-btn { background: var(--mp-surface-sunk); color: var(--mp-ink); }
.reflection-history-status { font-size: 0.85rem; color: var(--mp-accent-tint-ink); text-align: center; min-height: 1.2em; }
.reflections-empty { color: var(--mp-ink-soft); text-align: center; margin: 1.5rem 0; font-size: 0.9rem; }
/* .reflection-history-list caps at 70ch, which is a reading measure meant
   for the two prose lists that share the class (saved reflections, weekly
   learnings). A row of email + pill + dates + buttons isn't prose, and at
   70ch the dates were being truncated while most of the window sat empty.
   Capped rather than unbounded so rows don't stretch into an
   email-hard-left / buttons-hard-right layout on a wide monitor. */
#users-list { max-width: 1100px; }
#users-list .reflection-item-header { cursor: default; }
/* The email is the identity in this list, so it holds its width and the
   timestamps give way instead — .reflection-item-date is flex-shrink:0
   globally, which squeezed the flexible headline down to nothing here. */
#users-list .reflection-item-headline { flex: 0 1 auto; font-weight: 600; }
#users-list .reflection-item-date {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Neutral third action alongside the green Invite and red Delete. Only
   .signup-invite-btn / .user-delete-btn carry margin-left:auto, so in a
   two-button row the coloured one goes first and floats the pair right. */
.signup-dismiss-btn {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--mp-ink-soft);
  background: var(--mp-surface-sunk);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.signup-dismiss-btn:hover { filter: brightness(0.97); }
.signup-dismiss-btn:disabled { opacity: 0.5; cursor: default; }
.reflection-item.is-dismissed .reflection-item-headline { color: var(--mp-ink-soft); }
.list-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-ink-soft);
  margin: 1.5rem 0 0.6rem;
  padding: 0 0.1rem;
}

/* --- Stats view (admin) ---------------------------------------------------
   Wider than the 70ch reading measure for the same reason #users-list is:
   these are data rows, not prose. Uses the existing palette rather than
   introducing chart colours — greens for the app's own accents, the clay
   tone for warnings, and grey for everything that's context rather than a
   number worth reading. */
.stats-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.stats-section { margin-bottom: 2.25rem; }
.stats-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--mp-ink);
}
/* The explanatory line under each heading. Deliberately full-width prose at a
   reading measure even though the tables beside it are wider — it's the one
   thing on the page that is actually sentences. */
.stats-blurb {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--mp-ink-soft);
  line-height: 1.45;
  max-width: 68ch;
}
.stats-subhead {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-ink-soft);
  margin: 1.1rem 0 0.5rem;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  padding: 0.9rem 1.1rem;
}
.stat-card-value { font-size: 1.5rem; font-weight: 700; color: var(--mp-accent); line-height: 1.1; }
.stat-card-label { font-size: 0.85rem; color: var(--mp-ink-soft); margin-top: 0.25rem; }
.stat-card-note { font-size: 0.75rem; color: var(--mp-ink-soft); margin-top: 0.15rem; }

/* Percentiles as a row of labelled figures rather than a table: five numbers
   read at a glance, and the median is weighted because it's the one people
   actually anchor on. */
.stats-distribution {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}
.stats-distribution > div { display: flex; flex-direction: column; }
.dist-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mp-ink-soft); }
.dist-value { font-size: 1rem; color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.dist-median .dist-value { font-weight: 700; color: var(--mp-accent); }

.stats-table-wrap { overflow-x: auto; }
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
}
.stats-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-ink-soft);
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--mp-line);
  white-space: nowrap;
}
.stats-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--mp-surface-sunk);
  color: var(--mp-ink);
}
.stats-table tr:last-child td { border-bottom: none; }
/* Tabular figures so digits line up column-wise — without this, comparing
   costs down a column means reading each one rather than seeing the shape. */
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table td.muted { color: var(--mp-ink-soft); }

.state-pill {
  font-size: 0.7rem;
  border-radius: 5px;
  padding: 0.12rem 0.45rem;
  white-space: nowrap;
}
.state-returning { background: var(--mp-accent-tint); color: var(--mp-accent-tint-ink); }
.state-used-once { background: var(--mp-clay-tint); color: var(--mp-clay-tint-ink); }
.state-never-used { background: var(--mp-danger-tint); color: var(--mp-danger-tint-ink); }

.stats-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.stats-bar-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; }
.stats-bar-label { flex: 0 0 4.5rem; color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; }
.stats-bar-track { flex: 1 1 0; height: 1.1rem; background: var(--mp-surface-sunk); border-radius: 3px; overflow: hidden; }
.stats-bar-fill { display: block; height: 100%; background: var(--mp-accent); }
/* Errors get the clay tone rather than the app's green. A rising green bar
   reads as a good number going up, which is the opposite of what an error
   count means. */
.stats-bars.bars-negative .stats-bar-fill { background: var(--mp-clay); }
.stats-bar-value { flex: 0 0 auto; color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The TTL verdict. Colour carries the answer, but the words do too — the
   sentence inside says "switch" or "stay" outright, so the meaning doesn't
   depend on distinguishing green from grey. */
.ttl-verdict {
  border: 1px solid var(--mp-line);
  border-left-width: 3px;
  border-radius: var(--mp-radius-lg);
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--mp-surface);
}
.ttl-verdict.ttl-stay { border-left-color: var(--mp-line); }
.ttl-verdict.ttl-switch { border-left-color: var(--mp-accent); background: var(--mp-accent-tint); }
.ttl-verdict-line { color: var(--mp-ink); font-size: 0.92rem; }
.ttl-verdict-detail { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--mp-ink-soft); line-height: 1.45; }
.ttl-verdict-detail.muted { color: var(--mp-ink-soft); }

.stats-caveat {
  font-size: 0.8rem;
  color: var(--mp-ink-soft);
  line-height: 1.5;
  background: var(--mp-surface-sunk);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.7rem 0.9rem;
  margin: 0.75rem 0 0;
}
.stats-warning {
  font-size: 0.82rem;
  color: var(--mp-clay-tint-ink);
  background: var(--mp-clay-tint);
  border: 1px solid var(--mp-clay);
  border-radius: var(--mp-radius);
  padding: 0.7rem 0.9rem;
  margin-top: 1rem;
  line-height: 1.5;
}
.stats-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--mp-ink); }
.stats-list li { margin-bottom: 0.25rem; }
.stats-footer { font-size: 0.75rem; color: var(--mp-ink-soft); text-align: center; margin: 2rem 0 1rem; }

/* --- Reports view (admin) -------------------------------------------------
   Shares the .stats-body/.stats-section/.stats-table kit built for Stats —
   see that block's own comment. Reports-specific additions below: the tab
   picker, the date input for Cost Reconciliation, and the duplicate-
   reflections side-by-side text layout. */
.reports-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
}
.reports-tab {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--mp-ink-soft);
  cursor: pointer;
}
.reports-tab.active { background: var(--mp-accent-tint); color: var(--mp-accent-tint-ink); border-color: var(--mp-accent-tint); }
.reports-date-input {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  color: var(--mp-ink);
  background: var(--mp-surface);
}

/* One flagged pair. The two full reflection texts sit side by side on a
   wide screen — the report exists so a human reads both and decides, so
   truncating either text or showing only one would defeat the point. */
.dup-pair {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.dup-pair-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--mp-ink-soft);
  margin-bottom: 0.6rem;
}
.dup-pair-texts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .dup-pair-texts { grid-template-columns: 1fr; }
}
.dup-text {
  background: var(--mp-surface-sunk);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: 0.65rem 0.8rem;
}
.dup-text-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--mp-ink-soft); margin-bottom: 0.35rem; }
.dup-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--mp-danger);
  background: var(--mp-danger-tint);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.dup-delete-btn:hover { filter: brightness(0.95); }
.dup-delete-btn:disabled { opacity: 0.5; cursor: default; }
.dup-text p { margin: 0; font-size: 0.85rem; color: var(--mp-ink); line-height: 1.5; }