/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Dark theme colors - default theme */
  --background-primary: linear-gradient(
    135deg,
    hsl(240, 12%, 3%) 0%,
    hsl(245, 15%, 5%) 25%,
    hsl(250, 10%, 4%) 75%,
    hsl(240, 8%, 2%) 100%
  );
  --background-secondary: rgba(255, 255, 255, 0.01);
  --background-tertiary: rgba(255, 255, 255, 0.04);
  --input-background: rgba(255, 255, 255, 0.06);
  
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);
  
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  
  --accent-primary: #4A72F5;
  --accent-primary-hover: #5B80F6;
  --accent-secondary: #3D9A8B;
  --accent-secondary-text: white;

  /* Mood rating colors (1-5) */
  --mood-1: #FF6B6B;  /* Vibrant coral red */
  --mood-2: #FFA07A;  /* Warm light salmon */
  --mood-3: #FFD93D;  /* Bright golden yellow */
  --mood-4: #95D5B2;  /* Fresh mint green */
  --mood-5: #2ECC71;  /* Vivid emerald green */
  
  /* Spacing system */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* Light theme */
[data-theme="light"] {
  --background-primary: linear-gradient(
    180deg,
    rgb(252, 252, 252) 0%,
    rgb(248, 248, 248) 100%
  );
  --background-secondary: rgba(0, 0, 0, 0.02);
  --background-tertiary: rgba(0, 0, 0, 0.03);
  --input-background: white;
  
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.16);
  
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.66);
  --text-tertiary: rgba(0, 0, 0, 0.45);

  /* Table overrides for light theme */
  table {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  th {
    background: rgba(0, 0, 0, 0.01);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.45);
    font-weight: 500;
  }

  td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.7);
  }

  tr:hover {
    background: rgba(0, 0, 0, 0.01);
  }

  tr:hover td {
    color: rgba(0, 0, 0, 0.9);
  }

  /* Button overrides for light theme */
  .button-secondary {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
  }
  
  .button-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
  }

}

/* Theme toggle switch styles */
.theme-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.theme-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-tertiary);
  border: 1px solid var(--border-color);
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-primary);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: white;
}

/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--background-primary);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 0;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;  
  color: var(--text-primary);

}

a:hover {
  color: var(--accent-primary);
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* Typography */
h1 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-md);
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-secondary);
}

/* Button System */
.button {
  height: 32px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.button:hover {
  background: var(--background-secondary);
  border-color: var(--border-color-hover);
}

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

.button-primary:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: white;
}

.button-primary:disabled {
  background: var(--background-tertiary);
  border-color: var(--border-color);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.button-primary:disabled:hover {
  background: var(--background-tertiary);
  border-color: var(--border-color);
}

/* Disabled link buttons (rendered as spans) */
.button-primary.disabled {
  background: var(--background-tertiary);
  border-color: var(--border-color);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.button-primary.disabled:hover {
  background: var(--background-tertiary);
  border-color: var(--border-color);
}

/* Secondary - Ghost button with border */
.button-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.button-secondary.disabled {
  background: var(--background-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.button-secondary.disabled:hover {
  background: var(--background-tertiary);
}

/* Tertiary - Smaller, minimal button */
.button-tertiary {
  padding: 0 var(--space-sm);
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.button-tertiary:hover {
  background: var(--background-secondary);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.button.button-tertiary.deactivated {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Select System - Inline selects that match button height */
.select {
  height: 32px;
  padding: 0 32px 0 12px;
  font-size: 0.875rem;
  font-weight: 400;
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all 0.2s ease;
}

.select:hover {
  background-color: var(--background-secondary);
  border-color: var(--border-color-hover);
}

.select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Forms */
.form-group {
  margin-bottom: var(--space-md);
  position: relative;
}

.form-label {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.875rem;
  transition: all 0.15s ease;
  pointer-events: none;
}

.form-input, .form-select {
  width: 100%;
  padding: var(--space-md);
  background-color: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  height: 42px;
  transition: all 0.2s ease;
  max-width: 500px;
}

textarea.form-input {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

.form-input:hover, .form-select:hover {
  border-color: var(--border-color-hover);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(74, 114, 245, 0.2);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

/* Hide label when input is focused or has content */
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  opacity: 0;
}

.page-title {
  margin: 0;
}

/* Phones: tighter page gutters */
@media (max-width: 768px) {
  .container {
    padding: var(--space-xl) var(--space-sm);
  }
}

/* Shared Layout Components */
.narrow-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.pill {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  gap: var(--space-md);
}

.page-header h1 {
  margin: 0;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-xl) 0;
}

.page-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-title-group .page-title {
  margin-bottom: 0;
}

.entry-meta-inline {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Page header controls (filters, buttons, the "•••" menu): one spacing
   everywhere, matching the Entries toolbar */
.header-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.word-count-inline,
.round-indicator {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.button-tertiary {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.button-tertiary:hover {
  background: var(--background-tertiary);
  color: var(--text-secondary);
}

.button-ghost {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-ghost:hover {
  background: var(--background-tertiary);
  color: var(--text-secondary);
}

.button-ghost.deactivated {
  opacity: 0.3;
  pointer-events: none;
}

.button-ghost i {
  width: 14px;
  height: 14px;
}

/* Icon button - square button with icon only */
.button-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-icon:hover {
  background: var(--background-secondary);
  border-color: var(--border-color-hover);
  color: var(--text-primary);
}

.button-icon.deactivated {
  opacity: 0.3;
  pointer-events: none;
}

.button-icon i,
.button-icon svg {
  width: 12px !important;
  height: 12px !important;
}

.inline-form {
  display: inline;
}

.header-actions .inline-form {
  margin-right: 6px;
}

/* Shared Form Elements */
.form-select {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  padding-right: 36px;
  background-color: rgb(20, 20, 20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  appearance: none;
}

.form-select:hover {
  border-color: var(--border-color-hover);
}

.form-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(74, 114, 245, 0.2);
}

/* Light theme override */
[data-theme="light"] .form-select {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(0,0,0,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Shared Mood Selector */
.mood-selector {
  display: flex;
  gap: 2px;
  font-size: 0.75rem;
}

.mood-radio {
  display: none;
}

.mood-dot {
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  opacity: 0.7;
  user-select: none;
  text-shadow: none;
}

/* Mood colors based on level */
[data-mood="1"] .mood-dot.filled { color: var(--mood-1); opacity: 1; }
[data-mood="2"] .mood-dot.filled { color: var(--mood-2); opacity: 1; }
[data-mood="3"] .mood-dot.filled { color: var(--mood-3); opacity: 1; }
[data-mood="4"] .mood-dot.filled { color: var(--mood-4); opacity: 1; }
[data-mood="5"] .mood-dot.filled { color: var(--mood-5); opacity: 1; }

.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
  background: var(--background-tertiary);
  color: var(--text-tertiary);
}

.activity-pill:hover {
  border-color: var(--border-color-hover);
  background: var(--background-secondary);
}

/* Shared Editor Styles */
.journal-entry-editor {
  width: 100%;
  min-height: 200px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.9375rem;
  font-family: inherit;
  resize: none;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

.journal-entry-editor:focus {
  outline: none;
}

/* TipTap Editor Heading Styles */
.journal-entry-editor h1,
.journal-entry-editor h2,
.journal-entry-editor h3 {
  margin-top: 1.25em;
  margin-bottom: 0.25em;
  font-weight: 600;
  line-height: 1.3;
}

.journal-entry-editor h1 {
  font-size: 1.875em;
}

.journal-entry-editor h2 {
  font-size: 1.5em;
}

.journal-entry-editor h3 {
  font-size: 1.25em;
}

.journal-entry-editor h1:first-child,
.journal-entry-editor h2:first-child,
.journal-entry-editor h3:first-child {
  margin-top: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .narrow-page {
    padding: var(--space-lg) var(--space-sm);
  }

  h1 {
    font-size: 1.25rem;
  }

  table {
    border-radius: 0;
    border-left: none;
    border-right: none;
    font-size: 0.8125rem; /* Slightly smaller font on mobile */
  }

  th, td {
    padding: var(--space-sm);
    min-width: 100px; /* Ensure columns don't get too narrow */
  }

}

/* Markdown Content */
.markdown {
  color: var(--text-secondary);
  line-height: 1.6;
}

.markdown h2 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-color);
}

.markdown h2:first-child {
  margin-top: 0;
}

.markdown p {
  margin-bottom: var(--space-md);
}

.markdown ul {
  margin: var(--space-lg) 0;
  padding-left: var(--space-xl);
}

.markdown li {
  margin-bottom: var(--space-xs);
}

.markdown li:last-child {
  margin-bottom: 0;
}

.markdown strong {
  color: var(--text-primary);
  font-weight: 500;
}

.entries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0;
  outline: 1px solid var(--border-color);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

thead {
  background: var(--background-tertiary);
  position: sticky;
  top: 0;
  z-index: 1;
}

thead tr:hover {
  background: transparent;
}

th {
  text-align: left;
  padding: var(--space-md);
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

tbody tr {
  cursor: pointer;
  transition: all 0.1s ease;
  opacity: 0.7;
}

tbody tr:hover {
  background-color: var(--background-tertiary);
  opacity: 1;
}

tbody tr:hover td {
  color: #e5e7eb;
}

tr:last-child td {
  border-bottom: none;
}

td {
  padding: var(--space-md);
  color: #6b7280;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.4;
  font-size: 0.875rem;
  font-weight: 400;
  vertical-align: middle;
  text-align: center;
}

/* Light theme overrides */
[data-theme="light"] table {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] thead {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] tbody tr:hover {
  background: rgba(0, 0, 0, 0.01);
}

[data-theme="light"] tbody tr:hover td {
  color: rgba(0, 0, 0, 0.9);
}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Auth pages styling - Linear-inspired centered layout */
body.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl);
  padding-top: 20vh;
}

.auth-container {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

.auth-logo {
  margin-bottom: var(--space-xl);
}

.auth-logo img {
  width: 48px;
  height: 48px;
}

.auth-container h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: var(--space-xl);
  color: var(--text-primary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Unified form inputs in auth context - use .form-input and .button classes with full-width override */
.auth-container .form-input,
.auth-container .button {
  width: 100%;
}

.auth-container .form-input {
  padding: 12px 14px;
}

.auth-input-group {
  text-align: left;
}

.auth-field-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--color-error, #ef4444);
}

.auth-field-error.hidden {
  display: none;
}

.auth-container .form-input.field-error {
  border-color: var(--color-error, #ef4444);
}

.auth-container .form-input.field-error:focus {
  border-color: var(--color-error, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.auth-footer {
  color: var(--text-secondary);
  font-size: 14px;
}

.auth-footer a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
}

.auth-footer a:hover {
  color: var(--accent-primary);
}

.auth-status {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1rem;
  color: var(--text-secondary);
}

.auth-status.error {
  color: var(--color-error, #ef4444);
}

.auth-status.hidden {
  display: none;
}

.auth-returning-email {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

/* Auth sections and toggle links */
.auth-section {
  margin-top: var(--space-lg);
}

.auth-toggle-section {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.auth-toggle-link {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.auth-toggle-link:hover {
  color: var(--accent-primary);
}

/* Settings Passkey Styles */
.settings-status {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

.settings-status.error {
  color: var(--color-error, #ef4444);
}

.settings-status.hidden {
  display: none;
}

.alert {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  margin-bottom: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  max-width: 400px;
  z-index: 1000;
  backdrop-filter: blur(8px);
  animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1),
             fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) 5.7s forwards;
  transform-origin: bottom;
}

@keyframes slideIn {
  from {
    transform: translateY(16px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(8px) scale(0.98);
    opacity: 0;
  }
}

.alert-success {
  border: 1px solid rgba(46, 160, 67, 0.2);
  border-left: 4px solid #2EA043;
}

.alert-error {
  border: 1px solid rgba(248, 81, 73, 0.2);
  border-left: 4px solid #F85149;
}

.form-input {
  padding: var(--space-md);
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  height: 42px;
}

textarea.form-input {
  height: auto;
  min-height: 80px;
}

select.form-input {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] select.form-input {
  color: rgba(0, 0, 0, 0.87);
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(0,0,0,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select.form-input option {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

.form-input:hover, .form-select:hover {
  border-color: var(--border-color-hover);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(74, 114, 245, 0.2);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

/* Light theme overrides */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select {
  background-color: rgba(0, 0, 0, 0.05);
}

.radio-card {
  position: relative;
  padding: var(--space-md);
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-card:hover {
  background: var(--background-secondary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.radio-card.selected {
  background: rgba(74, 114, 245, 0.1);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[data-theme="light"] .radio-card {
  background-color: white;
}

[data-theme="light"] .radio-card:hover {
  background-color: rgba(74, 114, 245, 0.02);
}

[data-theme="light"] .radio-card.selected {
  background-color: rgba(74, 114, 245, 0.05);
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

/* On card-free pages: no box, just the message */
.empty-state.empty-state-flat {
  min-height: 0;
  margin: var(--space-xl) 0 var(--space-md);
  background: none;
  border: none;
}

.empty-state-flat .empty-state-icon {
  color: var(--accent-primary);
  opacity: 0.9;
}

.empty-state-content {
  text-align: center;
  max-width: 320px;
  padding: var(--space-2xl);
}

.empty-state-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--text-tertiary);
  opacity: 0.6;
}

.empty-state h3 {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

.empty-state p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.empty-state p:has(+ .button),
.empty-state p + .button {
  margin-top: var(--space-lg);
}

.empty-state .button {
  min-width: 140px;
}

/* Light theme overrides */
[data-theme="light"] .empty-state {
  background: white;
}

.habit-icons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.habit-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 10px;
  color: var(--text-tertiary);
  opacity: 0.7;
  line-height: 0;
}

.habit-icon-button i {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.habit-icon-button i[data-lucide] {
  opacity: 1;
}

.habit-icon-button:hover {
  opacity: 1;
  color: var(--text-secondary);
}

.habit-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Habit selected states - both CSS :checked and server-rendered .completed */
.habit-icon-button.boolean-habit.completed,
.habit-icon-button.boolean-habit:has(.habit-checkbox:checked) {
  color: var(--accent-primary) !important;
  opacity: 1 !important;
}

.habit-icon-button.boolean-habit.completed i,
.habit-icon-button.boolean-habit:has(.habit-checkbox:checked) i,
.habit-icon-button.boolean-habit .habit-checkbox:checked + i {
  color: var(--accent-primary) !important;
}

@media (max-width: 768px) {

  
  .mood-selector {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
  }

  
  .habit-icons {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  /* Align nudge controls and button horizontally on mobile */
  .nudge-controls {
    align-items: flex-start;
    margin-top: 0;
  }

}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-tertiary);
  border-radius: 20px;
  transition: .2s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .2s;
}

.toggle-input:checked + .toggle-slider {
  background-color: var(--accent-primary);
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

/* Add responsive adjustments for mobile */
@media (max-width: 768px) {
  .alert {
    bottom: var(--space-md);
    right: var(--space-md);
    left: var(--space-md);
    max-width: none;
    padding: var(--space-md);
  }
}

.nudge-text {
  margin-top: var(--space-md);
  margin-bottom: 0;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: opacity 0.3s ease;
  opacity: 0; /* Start hidden */
  min-height: 3rem; /* Reserve space to prevent layout shift */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nudge-text-content {
  flex: 1;
}

.nudge-rating {
  display: inline-flex;
  gap: 4px;
  margin-left: var(--space-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.nudge-text:hover .nudge-rating:not(.rated),
.nudge-rating.visible:not(.rated) {
  opacity: 0.35;
}

.nudge-rate-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-tertiary);
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.nudge-rate-btn:hover {
  opacity: 1;
  color: var(--text-secondary);
}

.nudge-rating.rated {
  opacity: 1;
  pointer-events: none;
}

.nudge-rating.rated .nudge-rate-btn:not(.selected) {
  opacity: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.nudge-rating.rated .nudge-rate-btn.selected {
  opacity: 0.5;
  color: var(--text-secondary);
  cursor: default;
}

.error-message {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.2);
  border-radius: var(--radius-sm);
  color: #F85149;
  font-size: 0.875rem;
}

/* Nudge controls styles */
.nudge-controls {
  margin-top: var(--space-md);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nudge-area {
  margin-top: var(--space-lg);
  min-height: 24px;
}

.nudge-countdown {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nudge-countdown.active {
  opacity: 1;
}

.nudge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: opacity 0.3s ease;
}

.nudge-dot.dimmed {
  opacity: 0.15;
}

/* Loading state: wave starts from dimmed, creating smooth transition */
.nudge-countdown.loading .nudge-dot {
  opacity: 0.15;
  animation: nudge-wave 1.4s ease-in-out infinite;
}

.nudge-countdown.loading .nudge-dot[data-dot="0"] { animation-delay: 0s; }
.nudge-countdown.loading .nudge-dot[data-dot="1"] { animation-delay: 0.12s; }
.nudge-countdown.loading .nudge-dot[data-dot="2"] { animation-delay: 0.24s; }
.nudge-countdown.loading .nudge-dot[data-dot="3"] { animation-delay: 0.36s; }
.nudge-countdown.loading .nudge-dot[data-dot="4"] { animation-delay: 0.48s; }

@keyframes nudge-wave {
  0%, 100% {
    opacity: 0.15;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 0.15;
  }
}

.nudge-area .nudge-text {
  margin-top: var(--space-sm);
}

/* Why the fallback nudge is showing (no key, monthly limit, API error) */
.nudge-reason {
  /* Pull up into the nudge text's reserved min-height so the two read as one block */
  margin: calc(var(--space-sm) * -1) 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.nudge-reason a {
  color: inherit;
  text-decoration: underline;
}

.nudge-reason a:hover {
  color: var(--text-secondary);
}

.toggle-switch-small {
  transform: scale(0.8);
}

/* Table column widths to prevent layout shifts */
th:nth-child(1), td:nth-child(1) { /* Date column */
  min-width: 120px;
  width: 120px;
}

th:nth-child(2), td:nth-child(2) { /* Type column */
  min-width: 60px;
  width: 60px;
}

/* Words column alignment - left align title and content */
th:nth-child(4), td:nth-child(4) { /* Words column */
  text-align: left;
  width: 100px;
  min-width: 80px;
}

/* Mood column - left align and consistent width */
th:nth-child(5), td:nth-child(5) { /* Mood column */
  width: 100px;
  min-width: 80px;
  text-align: left;
}

/* Habits column - consistent width with other columns */
th:nth-child(6), td:nth-child(6) { /* Habits column */
  width: 120px;
  min-width: 100px;
}

/* Habits column header - left aligned */
th:nth-child(6) { /* Habits column header */
  text-align: left;
}

/* Habits column content - center aligned for icons */
td:nth-child(6) { /* Habits column content */
  text-align: center;
}

/* ===========================================
   Entries Page - Combined Search & Entries
   =========================================== */
.entries-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.entries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.entries-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  margin: 0;
}

/* Entries Toolbar */
.entries-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Icon Button - base style for toolbar icons */
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.icon-button:hover {
  background: var(--background-secondary);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.icon-button i,
.icon-button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Inline Search - expandable search input */
.inline-search {
  display: flex;
  align-items: center;
  position: relative;
}

.inline-search-input {
  width: 0;
  height: 32px;
  padding: 0;
  font-size: 0.875rem;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  opacity: 0;
  transition: width 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
}

.inline-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.inline-search-input::placeholder {
  color: var(--text-tertiary);
}

.inline-search.expanded .inline-search-input {
  width: 160px;
  padding: 0 var(--space-sm);
  opacity: 1;
  margin-right: var(--space-xs);
}

.inline-search .icon-button {
  position: relative;
  z-index: 1;
}

.inline-search.expanded .icon-button {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.search-results-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Entries Grid */
.entries-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.load-more-container {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.load-more-button {
  min-width: 160px;
}

/* Entry Card */
.entry-card {
  display: block;
  padding: var(--space-lg) var(--space-xl);
  text-decoration: none;
  color: inherit;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entry-card:hover {
  border-color: var(--border-color-hover, var(--text-tertiary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.entry-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  min-height: 22px;
}

.entry-card-date {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

.entry-card-draft {
  opacity: 0.7;
  border-style: dashed;
}

.entry-card-draft-pill {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--background-tertiary, rgba(128, 128, 128, 0.12));
  border-radius: var(--radius-sm, 3px);
}

.entry-card-content {
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: opacity 0.15s ease;
}

.entry-card-mood {
  display: flex;
  gap: 2px;
}

.entry-card-mood .mood-dot {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.entry-card-mood .mood-dot.filled {
  color: var(--accent-primary);
}

.entry-card-habits {
  display: flex;
  gap: 4px;
  align-items: center;
}

.entry-card-habit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  transition: all 0.15s ease;
}

.entry-card-habit-icon.completed {
  color: var(--text-primary);
}

.entry-card-habit-icon svg,
.entry-card-habit-icon i {
  width: 14px;
  height: 14px;
}

/* Light theme overrides */
[data-theme="light"] .search-input {
  background: white;
}

[data-theme="light"] .entry-card {
  background: white;
}

[data-theme="light"] .entry-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 768px) {
  .entries-page {
    padding: var(--space-lg) var(--space-sm);
  }

  .entries-toolbar {
    gap: var(--space-xs);
  }

  .inline-search.expanded .inline-search-input {
    width: 120px;
  }
}

/* ===========================================
   Settings Page - Linear-style Layout
   =========================================== */

/* Override container styles when settings layout is present */
.container:has(.settings-layout) {
  max-width: none;
  padding: 0;
  margin: 0;
}

.settings-layout {
  display: flex;
  min-height: 100vh;
}

/* Settings Sidebar */
.settings-sidebar {
  width: 240px;
  flex-shrink: 0;
  /* Top padding clears the app sidebar's toggle icon */
  padding: 64px var(--space-lg) var(--space-xl);
  border-right: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Extend sidebar border to connect with nav */
.settings-sidebar::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1px;
  height: 1px;
  background: var(--border-color);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.settings-nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-nav-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 0 var(--space-sm);
  margin-bottom: var(--space-xs);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

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

.settings-nav-item.active {
  color: var(--text-primary);
  background: var(--background-tertiary);
}

.settings-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.settings-nav-item.active svg,
.settings-nav-item:hover svg {
  opacity: 1;
}

/* Settings Content Area */
.settings-layout > turbo-frame {
  flex: 1;
  display: flex;
}

.settings-content {
  flex: 1;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
}

.settings-section {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  animation: settingsFadeIn 0.2s ease;
}

@keyframes settingsFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-section.hidden {
  display: none;
}

.settings-section-header {
  margin-bottom: var(--space-lg);
}

.settings-section-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.02em;
}

.settings-section-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

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

.settings-section-header-row .button {
  flex-shrink: 0;
}

.settings-section-header-row .button svg {
  margin-right: var(--space-xs);
}

/* Settings Card */
.settings-card {
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.settings-card-flush {
  padding: 0;
  overflow: hidden;
}

/* Settings Item */
.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.settings-item.stacked {
  flex-direction: column;
  align-items: flex-start;
}

.settings-item-info {
  flex: 1;
}

.settings-item-info h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.settings-item-info p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Settings Forms */
.settings-inline-form {
  width: 100%;
  margin-top: var(--space-md);
}

.settings-form-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.settings-form-row .form-input {
  flex: 1;
  max-width: none;
}

.settings-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.settings-form-actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-end;
}

/* Settings Table (used for habits, nudges, etc.) */
.settings-table {
  display: flex;
  flex-direction: column;
}

.settings-table-row-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-color);
}

.settings-table-row-link:last-child {
  border-bottom: none;
}

.settings-table-row-link:hover {
  background: var(--background-tertiary);
}

.settings-table-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--background-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settings-table-row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-table-row-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
}

.settings-table-row-description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-table-row-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.settings-table-row-link:hover .settings-table-row-arrow {
  color: var(--text-secondary);
}

/* Settings table row with radio selection */
.settings-table-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.settings-table-row:last-child {
  border-bottom: none;
}

.settings-table-row-radio {
  padding-left: var(--space-lg);
  flex-shrink: 0;
}

.radio-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.radio-indicator:hover {
  border-color: var(--accent-primary);
}

.radio-indicator.selected {
  border-color: var(--accent-primary);
  cursor: default;
}

.radio-indicator .radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}

.radio-indicator:hover .radio-dot {
  background: var(--accent-primary);
  opacity: 0.4;
}

.radio-indicator.selected .radio-dot {
  background: var(--accent-primary);
  opacity: 1;
}

.settings-table-row-link-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
  transition: background 0.15s ease;
}

.settings-table-row:hover {
  background: var(--background-tertiary);
}

/* Settings Entity Form */
.settings-entity-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.settings-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.entity-form-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.settings-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-form-field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-form-field .field-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.settings-form-field .form-input {
  max-width: none;
  width: 100%;
}

/* Tiptap editor in settings forms - styled like a form input */
.settings-form-field [data-controller="tiptap"] {
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form-field [data-controller="tiptap"]:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(74, 114, 245, 0.2);
}

.settings-form-field [data-controller="tiptap"]:hover {
  border-color: var(--border-color-hover);
}

.settings-form-field [data-controller="tiptap"]:focus-within:hover {
  border-color: var(--accent-primary);
}

.settings-form-field .journal-entry-editor {
  min-height: 120px;
  padding: 0;
}

/* Settings Form Actions Bar */
.settings-form-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-lg);
}

.settings-form-actions-left {
  display: flex;
  gap: var(--space-sm);
}

.settings-form-actions-right {
  display: flex;
  gap: var(--space-sm);
}

.active-nudge-note {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Settings Error Card */
.settings-error-card {
  background: rgba(248, 81, 73, 0.05);
  border-color: rgba(248, 81, 73, 0.2);
}

.settings-error-card .error-messages h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #F85149;
  margin: 0 0 var(--space-sm);
}

.settings-error-card .error-messages ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.settings-error-card .error-messages li {
  font-size: 0.8125rem;
  color: #F85149;
  margin-bottom: var(--space-xs);
}

/* Light theme overrides */
[data-theme="light"] .settings-table-row-link:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .settings-table-row-icon {
  background: rgba(0, 0, 0, 0.04);
}

/* Responsive Settings Form */
@media (max-width: 768px) {
  .settings-form-actions-bar {
    flex-direction: column-reverse;
    gap: var(--space-md);
  }

  .settings-form-actions-left,
  .settings-form-actions-right {
    width: 100%;
  }

  .settings-form-actions-left .button,
  .settings-form-actions-right .button {
    flex: 1;
    justify-content: center;
  }
}

/* Settings Row (for export/import/nudges style lists) */
.settings-rows {
  display: flex;
  flex-direction: column;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-row-info h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.settings-row-info p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.settings-row-action {
  flex-shrink: 0;
}

/* Inline form inputs for settings rows */
.settings-row-action .form-input-inline {
  min-width: 280px;
  max-width: 360px;
  text-align: left;
  background: var(--input-background);
}

.settings-row-action form {
  display: inline-block;
}

/* Expandable content within settings cards */
.settings-expand-content {
  padding: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.settings-expand-content .settings-form-fields {
  margin-bottom: var(--space-lg);
}

.settings-expand-content .settings-form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: 0;
}

/* Settings Empty State */
.settings-empty-state {
  text-align: center;
  padding: var(--space-xl);
}

.settings-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--text-tertiary);
}

.settings-empty-state h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.settings-empty-state p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
}

/* Passkeys list spacing */
#passkeys-list {
  margin-top: var(--space-lg);
}

/* Tooltip styles */
.tooltip-container {
  position: relative;
  display: inline-flex;
  cursor: default;
  margin-right: var(--space-sm);
}

.tooltip-container .tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-sm) var(--space-md);
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tooltip-container .tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-color);
}

.tooltip-container .tooltip-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--background-primary);
  z-index: 1;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.tooltip-content a {
  color: var(--text-accent);
  text-decoration: underline;
}

.tooltip-content a:hover {
  color: var(--text-primary);
}

/* Light theme overrides for Settings */
[data-theme="light"] .settings-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .settings-sidebar {
  border-right-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .settings-nav-item:hover,
[data-theme="light"] .settings-nav-item.active {
  background: rgba(0, 0, 0, 0.03);
}

/* Responsive Settings - All mobile styles consolidated here */
@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
  }

  /* Consistent content padding for all settings pages */
  .settings-content {
    padding: var(--space-md);
  }

  .settings-section {
    max-width: none;
    margin: 0;
  }

  .settings-section-header h2 {
    font-size: 1.25rem;
  }

  .settings-section-description {
    font-size: 0.8125rem;
  }

  .settings-section-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .settings-section-header-row .button {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }

  /* Settings rows - stack on mobile */
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }

  .settings-row-action {
    width: 100%;
  }

  .settings-row-action .button {
    width: 100%;
    justify-content: center;
  }

  .settings-row-action .form-select {
    width: 100%;
  }

  /* Settings forms */
  .settings-form-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .settings-form-row .form-input {
    width: 100%;
    max-width: none;
  }

  .settings-form-row .button {
    width: 100%;
    justify-content: center;
  }

  .settings-inline-form .settings-form-row {
    flex-direction: column;
  }

  .settings-item.stacked .settings-form-row {
    flex-direction: column;
  }

  .settings-form-field .form-input {
    max-width: none;
  }

  /* Settings table rows */
  .settings-table-row-link {
    padding: var(--space-sm);
  }

  .settings-table-row-name {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-table-row-description {
    font-size: 0.75rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Prevent table overflow */
  .settings-table {
    width: 100%;
    overflow: hidden;
  }

  .settings-card-flush {
    overflow: hidden;
  }

  /* Ensure content doesn't overflow */
  .settings-table-row-content {
    overflow: hidden;
  }

  /* Ensure settings section fills width */
  .settings-section {
    width: 100%;
  }

  /* Settings cards - full width, reduce border radius */
  .settings-card {
    border-radius: var(--radius-md);
    width: 100%;
  }

  /* All form inputs in settings - full width */
  .settings-section .form-input,
  .settings-section .form-select {
    width: 100%;
    max-width: none;
  }

  /* Settings table with radio - compact padding */
  .settings-table-row {
    flex-wrap: wrap;
  }

  .settings-table-row-radio {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  }

  .settings-table-row-link-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-sm);
  }

  .settings-table-row-content {
    min-width: 0;
  }

  .settings-table-row-arrow {
    margin-left: auto;
  }

  /* Form actions - full width button */
  .settings-form-actions {
    width: 100%;
  }

  .settings-form-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================
   Inline Nudge Management in Settings
   =========================================== */

/* Secondary section header for nudges list */
.settings-section-header-secondary {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.settings-section-header-secondary h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.01em;
}

/* Nudges list */
.nudges-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Danger button variant */
.button-danger {
  color: #F85149;
}

.button-danger:hover {
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #F85149;
}

/* ==========================================
   Focus Mode - Distraction-free writing
   ========================================== */

/* Elements that fade during focus mode */
.sidebar-toggle,
.page-header,
[data-focus-mode-target="fadeOut"] {
  transition: opacity 2.5s ease;
}

/* Subtle fade - not fully invisible */
.focus-mode-hidden {
  opacity: 0.08 !important;
  pointer-events: none;
}

/* Status and Context Badges */
.status-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--mood-5);
}

.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--mood-1);
}

.context-badges {
  display: flex;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.context-badges .badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  background: var(--background-tertiary);
  color: var(--text-tertiary);
}

/* Call Type Badges */
.call-type-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 500;
}

.call-type-nudge {
  background: rgba(74, 114, 245, 0.15);
  color: var(--accent-primary);
}

.call-type-memory_extraction {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.call-type-analysis {
  background: rgba(34, 197, 94, 0.15);
  color: var(--mood-5);
}

.call-type-other {
  background: var(--background-tertiary);
  color: var(--text-tertiary);
}

/* Table Cell Helpers */
.truncate-cell {
  max-width: 400px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================================
   Mobile Optimizations for 375px and below
   =========================================== */

/* Entry List Page - Mobile Fixes */
@media (max-width: 480px) {
  .entries-page {
    padding: var(--space-md) var(--space-sm);
  }

  .entries-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
  }

  .entries-toolbar {
    gap: 4px;
  }

  .entries-toolbar .button-primary {
    padding: 0 var(--space-sm);
    font-size: 0.8125rem;
  }

  .inline-search.expanded .inline-search-input {
    width: 100px;
  }

  /* Entry cards spacing */
  .entries-grid {
    gap: var(--space-sm);
  }

  .entry-card {
    padding: var(--space-md) var(--space-lg);
  }

  .entry-card-header {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .entry-card-habits {
    flex-wrap: wrap;
  }
}

/* New Entry Page - Mobile Fixes
   768px matches the header's mobile breakpoint; phones with a small
   display-size setting report viewports well above 480 (e.g. 485). */
@media (max-width: 768px) {
  .narrow-page {
    padding: var(--space-md) var(--space-sm);
  }

  /* Page header: title on the left, controls on the right; controls wrap
     under the title only when there isn't room */
  .narrow-page .page-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .page-title-group {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page-title {
    font-size: 1.25rem;
  }

  /* Entry meta inline - stack on very small screens */
  .entry-meta-inline {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Word count hidden on small mobile */
  .word-count-inline {
    display: none;
  }

  /* Header actions - left aligned above date (for show page) */
  .narrow-page .header-actions {
    justify-content: flex-start;
    gap: var(--space-sm);
  }

  /* For new entry page - nudge select + Complete pinned to the bottom
     of the screen (thumb zone), with a gradient and blur */
  .narrow-page .header-actions:has(.select) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md)
             calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--background-primary);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-color);
  }

  /* Keep the nudge area readable above the fixed bottom bar */
  .narrow-page:has(.header-actions .select) {
    padding-bottom: 96px;
  }

  /* Focus mode fades .page-header while typing, but the bottom action
     bar lives inside it and touch devices have no mousemove to bring
     it back - keep the bar usable and fade only the title/meta */
  .narrow-page .page-header .page-title-group {
    transition: opacity 2.5s ease;
  }

  .narrow-page .page-header.focus-mode-hidden {
    opacity: 1 !important;
    pointer-events: auto;
  }

  .narrow-page .page-header.focus-mode-hidden .page-title-group {
    opacity: 0.08;
    pointer-events: none;
  }

  /* De-emphasized: quiet ghost dropdown, sized to its content */
  .narrow-page .header-actions .select {
    flex: 0 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 22px 0 6px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background-color: transparent;
    border-color: transparent;
    background-position: right 4px center;
  }

  .narrow-page .header-actions .button {
    flex-shrink: 0;
  }

  /* Mood selector - finger-sized dots */
  .mood-selector {
    gap: 6px;
  }

  .mood-dot {
    font-size: 1.25rem;
    line-height: 1;
  }

  /* Habit icons - finger-sized tap targets */
  .habit-icons {
    gap: 6px;
  }

  .habit-icon-button {
    width: 28px;
    height: 28px;
  }

  .habit-icon-button i {
    width: 20px;
    height: 20px;
  }
}

/* Very small screens (320px) */
@media (max-width: 360px) {
  /* Even more compact settings nav */
  .settings-nav-item {
    padding: var(--space-xs) 6px;
    font-size: 0.6875rem;
  }

  .settings-nav-item svg {
    width: 12px;
    height: 12px;
  }

  /* Entry header - compact toolbar */
  .entries-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .entries-toolbar .button-primary {
    flex: 1;
  }

  /* New entry header - even more compact */
  .narrow-page .header-actions {
    flex-direction: column;
  }

  .narrow-page .header-actions .select {
    width: 100%;
  }

  .narrow-page .header-actions .button {
    width: 100%;
    justify-content: center;
  }

  /* Hide habit icons on very small screens if more than 3 */
  .habit-icons .habit-icon-button:nth-child(n+4) {
    display: none;
  }

  .habit-icons::after {
    content: attr(data-more);
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    display: none;
  }
}

/* Fix for journal entry show page on mobile */
@media (max-width: 480px) {
  .journal-entry-editor {
    min-height: 150px;
  }}

/* Fix alert position on mobile */
@media (max-width: 480px) {
  .alert {
    bottom: var(--space-sm);
    right: var(--space-sm);
    left: var(--space-sm);
    max-width: none;
    font-size: 0.8125rem;
  }
}

/* Authentication forms - mobile adjustments */
@media (max-width: 480px) {
  .auth-main {
    padding: var(--space-lg);
  }
}

.review-card {
  display: block;
  padding: var(--space-lg) var(--space-xl);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.review-card:hover {
  border-color: var(--border-color-hover, var(--text-tertiary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.review-card-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  text-transform: capitalize;
}

.inline-form {
  display: inline;
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Legacy plans can carry headings and paragraphs inside their goal doc */

.plan-card .plan-goals h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}

.plan-card .plan-goals h2,
.plan-card .plan-goals h3 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.25em;
  margin-bottom: 0.25em;
}

.plan-card .plan-goals h2 {
  font-size: 1.5em;
}

.plan-card .plan-goals h3 {
  font-size: 1.25em;
}

.plan-card .plan-goals h1:first-child,
.plan-card .plan-goals h2:first-child,
.plan-card .plan-goals h3:first-child {
  margin-top: 0;
}

.plan-card .plan-goals p {
  margin-top: 0;
  margin-bottom: 1em;
  line-height: 1.6;
}

.plan-card .plan-goals ul,
.plan-card .plan-goals ol {
  margin-top: 0;
  margin-bottom: 1em;
  padding-left: var(--space-lg);
  line-height: 1.6;
}

/* Goals list with checkboxes (plans/_goals), shared by plan and review pages */
.plan-goals ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin: var(--space-md) 0;
}

/* One goal row, Todoist-style (goals/_goal), used by every
   goal list: plan and review pages and the Checkpoints plans. Font size
   comes from the list, so the check scales with it. */
.goal-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 var(--space-sm);
  margin: var(--space-xs) 0;
  line-height: 1.65;
}

.goal-check {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  /* centre the circle on the first line of text */
  margin-top: calc((1lh - 18px) / 2);
  cursor: pointer;
}

.goal-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.goal-check-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--text-tertiary);
  border-radius: 50%;
  color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.goal-check-circle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover shows the tick faintly, as a hint of what a click does */
.goal-check:hover .goal-check-circle {
  border-color: var(--text-secondary);
  color: var(--text-tertiary);
}

.goal-check-input:focus-visible + .goal-check-circle {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.goal-item.checked .goal-check-circle,
.goal-check-input:checked + .goal-check-circle {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
  color: #0b0b0f;
}

[data-theme="light"] .goal-item.checked .goal-check-circle,
[data-theme="light"] .goal-check-input:checked + .goal-check-circle {
  color: #fff;
}

/* The goal text is a button so it can open the edit box; strip the
   chrome so it still reads as plain text */
.goal-item .goal-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.goal-item .goal-text:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* A goal's menu has no button: a right-click opens it at the pointer
   (menu#openAt). The rest of the row opens the goal editor. */
.goal-item > .menu {
  width: 0;
  margin: 0;
}

.goal-item > .menu > .menu-trigger {
  display: none;
}

.menu-panel.menu-panel-at {
  position: fixed;
  right: auto;
}

.goal-item:not([draggable="true"]):not(.goal-item-draft):not(.goal-item-pending) {
  cursor: pointer;
}

.goal-item.checked .goal-text {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

/* "Check my plan" notes: muted marginalia under the goal, dismissible */
.goal-note {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: calc(-1 * var(--space-xs)) 0 var(--space-xs) calc(18px + var(--space-sm));
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.goal-note-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 var(--space-xs);
  min-width: 28px;
  min-height: 28px;
  font: inherit;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}

.goal-note-dismiss:hover {
  color: var(--text-primary);
}

/* Wide screens: notes sit in the right margin, beside their goal */
@media (min-width: 1280px) {
  .plan-goals .goal-item {
    position: relative;
  }

  .goal-note {
    position: absolute;
    left: calc(100% + var(--space-lg));
    top: 0;
    width: 200px;
    margin: 0;
    flex-basis: auto;
  }
}

.plan-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.plan-check-pending {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.plan-check-pending .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  margin: 0;
}

.plan-check-error {
  color: #ef4444;
}

@media (max-width: 768px) {
  .goal-note-dismiss {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Interview transcript (shared/_interview_transcript): a card whose
   questions and answers stay collapsed until opened */
.interview-transcript > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.interview-transcript > summary::-webkit-details-marker {
  display: none;
}

.interview-transcript > summary::before {
  content: "›";
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.interview-transcript[open] > summary::before {
  transform: rotate(90deg);
}

.interview-transcript > summary:hover {
  color: var(--text-primary);
}

.interview-round {
  margin-top: var(--space-md);
}

.interview-round-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.qa-pair {
  margin-bottom: var(--space-md);
}

.qa-pair:last-child {
  margin-bottom: 0;
}

.qa-question {
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.qa-answer {
  color: var(--text-secondary);
  margin: 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 2px solid var(--border-color);
}

.goal-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  min-height: 44px;
}

.goal-add:hover {
  color: var(--text-primary);
}

.goal-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--primary, var(--text-primary));
  font-size: 1.125rem;
  line-height: 1;
}

.content-section-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.content-section-body p {
  margin: 0 0 var(--space-md) 0;
}

.content-section-body h1,
.content-section-body h2,
.content-section-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-xs) 0;
  color: var(--text-primary);
}

.content-section-body ul,
.content-section-body ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg);
}

/* Rich text lists wrap each item in a paragraph; keep items close */
.content-section-body li > p {
  margin: 0;
}

.content-section-body li + li {
  margin-top: var(--space-xs);
}

.content-section-body > :first-child {
  margin-top: 0;
}

.content-section-body > :last-child {
  margin-bottom: 0;
}

/* ========================================
   Admin Panel Styles
   ======================================== */

/* Admin Layout with Sidebar */
.container:has(.admin-layout) {
  max-width: none;
  padding: 0;
  margin: 0;
}

.admin-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

/* Admin Sidebar */
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: var(--space-xl) var(--space-lg);
  /* Align left padding with nav-container */
  padding-left: calc(2.5vw + var(--space-md) - var(--space-sm));
  border-right: 1px solid var(--border-color);
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.admin-sidebar::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1px;
  height: calc(100% + 2px);
  background: var(--border-color);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.admin-nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.admin-nav-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  padding: 0 0.75rem;
  margin-bottom: var(--space-xs);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

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

.admin-nav-item.active {
  color: var(--text-primary);
  background: var(--background-tertiary);
}

.admin-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.admin-nav-item.active svg,
.admin-nav-item:hover svg {
  opacity: 1;
}

/* Admin Content Area */
.admin-content {
  flex: 1;
  padding: var(--space-xl) var(--space-xl);
  min-width: 0;
}

.admin-content-header {
  margin-bottom: var(--space-lg);
}

.admin-content-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.admin-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.admin-breadcrumb {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--text-primary);
}

/* Admin Search */
.admin-search {
  margin-bottom: var(--space-lg);
}

.admin-search .search-form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.admin-search .search-input {
  flex: 1;
  max-width: 400px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: var(--input-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.admin-search .search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.admin-search .search-input::placeholder {
  color: var(--text-tertiary);
}

/* Admin Card */
.admin-card {
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Admin Card Forms - use static labels, not floating */
.admin-card .form-label {
  position: static;
  transform: none;
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}

/* Admin Detail Grid */
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.admin-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.admin-detail-label,
.admin-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.admin-detail-value {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

/* Admin Actions */
.admin-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Admin Tables */
.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.admin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}

.admin-table tr {
  transition: background 0.15s ease;
}

.admin-table tr[data-link] {
  cursor: pointer;
}

.admin-table tr:hover {
  background: var(--background-tertiary);
}

.admin-table tr:hover td {
  color: var(--text-primary);
}

/* Admin Empty State */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-tertiary);
}

.admin-empty-state svg {
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.admin-empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.admin-empty-state p {
  font-size: 0.875rem;
  max-width: 300px;
  margin-bottom: var(--space-lg);
}

/* Admin Monthly Cards */
.admin-monthly-cards {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
}

.admin-monthly-card {
  flex: 0 0 auto;
  min-width: 140px;
  padding: var(--space-md);
  background: var(--background-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.admin-monthly-card.active {
  border-color: var(--accent-primary);
  background: rgba(74, 114, 245, 0.1);
}

.admin-monthly-card-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xs);
}

.admin-monthly-card-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.admin-monthly-card-meta {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

/* Admin Filters */
.admin-filters {
  margin-bottom: var(--space-lg);
}

.admin-filter-form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* Admin Detail Navigation */
.admin-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.admin-detail-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-decoration: none;
}

.admin-back-link:hover {
  color: var(--text-primary);
}

.admin-position {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.admin-nav-arrows {
  display: flex;
  gap: 0.25rem;
}

.admin-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--background-tertiary);
  transition: all 0.15s ease;
  text-decoration: none;
}

.admin-nav-arrow:hover {
  background: var(--input-background);
  color: var(--text-primary);
}

.admin-nav-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Admin Detail Meta */
.admin-detail-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Inconsolata', monospace;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.admin-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--mood-1);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.admin-section {
  margin-bottom: 1.25rem;
}

.admin-output {
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-style: italic;
  padding: 0.5rem 0.75rem;
  background: var(--background-tertiary);
  border-left: 2px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.admin-prompts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.admin-prompt-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-prompt {
  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--background-tertiary);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* Admin Context Details */
.admin-context-details {
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.admin-context-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.admin-context-summary:hover {
  color: var(--text-primary);
}

.admin-context-badges {
  display: flex;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

.admin-context-badges span {
  padding: 0.125rem 0.375rem;
  background: var(--background-tertiary);
  border-radius: var(--radius-sm);
}

.admin-context-content {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

.admin-context-item {
  margin-bottom: 1rem;
}

.admin-context-item:last-child {
  margin-bottom: 0;
}

.admin-context-pre {
  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--background-tertiary);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
}

.admin-context-list {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.admin-context-list strong {
  color: var(--text-primary);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  background: var(--background-tertiary);
  color: var(--text-secondary);
}

.status-badge.status-success {
  background: rgba(46, 204, 113, 0.15);
  color: var(--mood-5);
}

.status-badge.status-error {
  background: rgba(255, 107, 107, 0.15);
  color: var(--mood-1);
}

/* Admin Responsive */
@media (max-width: 1000px) {
  .admin-prompts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
    padding-left: 1rem;
  }

  .admin-sidebar::before {
    display: none;
  }

  .admin-nav {
    flex-direction: row;
    gap: var(--space-lg);
    overflow-x: auto;
  }

  .admin-nav-section {
    flex-direction: row;
    gap: var(--space-sm);
  }

  .admin-nav-title {
    display: none;
  }

  .admin-nav-item {
    white-space: nowrap;
  }

  .admin-content {
    padding: var(--space-lg);
  }

  .admin-search .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-search .search-input {
    max-width: none;
  }

  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   Plan Cascade (Checkpoints page)
   =========================================== */
/* The plan card (plans/_goals): the one way a plan is shown. Framed on
   its own; on the card-free Plans page and single-review pages it renders
   flat (.plan-flat). */
.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-xl);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  line-height: 1.55;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-card:hover {
  border-color: var(--border-color-hover, var(--text-tertiary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.plan-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-right: calc(-1 * var(--space-sm));
}

.plan-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 22px;
  color: inherit;
  text-decoration: none;
}

.plan-card-label,
.plan-card-period,
.section-label,
.section-meta {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.plan-card-label,
.section-label {
  white-space: nowrap;
  color: var(--text-secondary);
}

a.plan-card-head:hover .plan-card-label,
a.plan-card-head:hover .plan-card-period {
  color: var(--text-primary);
}

.plan-card-count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.plan-card .plan-goals ul[data-type="taskList"] {
  margin: var(--space-sm) 0 0;
}

.plan-card .goal-item {
  margin: 6px 0;
  line-height: 1.55;
}

/* "+ Add goal" takes exactly one goal row's space (a line plus the row
   gap), so the empty row that replaces it moves nothing. Padding with
   matching negative margins keeps a larger tap area. */
.plan-card > .goal-add {
  align-self: flex-start;
  min-height: 0;
  height: calc(0.9375rem * 1.55 + 16px);
  margin: -8px 0 -2px;
  padding: 8px 0;
  font-size: 0.875rem;
  line-height: calc(0.9375rem * 1.55);
}

.plan-card-note {
  margin: var(--space-sm) 0 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.plan-card .plan-check {
  margin-top: var(--space-md);
}

[data-theme="light"] .plan-card,
[data-theme="light"] .card {
  background: white;
}

[data-theme="light"] .plan-card:hover,
@media (max-width: 768px) {
  .plan-card {
    padding: var(--space-md) var(--space-lg);
  }
}

/* Goals edited in place (goals controller): the text becomes an input in
   the same spot, and "+ Add goal" becomes an empty goal row, so nothing
   around it moves. The input inherits the row's type and line height. */
.goal-inline-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: block;
  resize: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  line-height: inherit;
  color: var(--text-primary);
  caret-color: var(--accent-primary);
}

/* List rows are flex, so hidden needs saying */
[data-goal] [data-goal-text][hidden],
.goal-add[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  /* 16px stops iOS zooming the page when the input gets focus */
  .goal-inline-input {
    font-size: 16px;
  }
}

/* In-between states (shared/_status_message): a plain section like every
   other, with a small spinner beside the status line */
.status-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--text-primary);
}

.status-line .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  margin: 0;
  flex-shrink: 0;
}

.status-detail-line {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.status-section-error .status-line {
  color: #ef4444;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.status-actions .inline-form {
  display: inline;
}

/* The "•••" menu (shared/_menu, MenuHelper). The trigger shows on hover of
   the nearest .menu-host, like Todoist's task menu; it is always visible on
   touch screens, in page headers and while open. */
.menu {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.menu-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.menu-trigger:hover,
.menu-open .menu-trigger {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .menu-trigger:hover,
[data-theme="light"] .menu-open .menu-trigger {
  background: rgba(0, 0, 0, 0.05);
}

@media (hover: hover) {
  .menu-host .menu-trigger {
    opacity: 0;
  }

  .menu-host:hover .menu-trigger,
  .menu-host:focus-within .menu-trigger {
    opacity: 1;
  }

  /* Hosts nest (goal rows inside a plan card): only the hovered one shows */
  .menu-host:hover .menu-host:not(:hover):not(:focus-within) .menu-trigger {
    opacity: 0;
  }

  .menu-open > .menu-trigger {
    opacity: 1 !important;
  }
}

.menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  padding: var(--space-xs);
  background: #16171f;
  border: 1px solid var(--border-color-hover);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
}

[data-theme="light"] .menu-panel {
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.menu-form {
  display: block;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 34px;
  padding: 6px var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

[data-theme="light"] .menu-item:hover,
[data-theme="light"] .menu-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

.menu-item-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.menu-item-danger,
.menu-item-danger .menu-item-icon {
  color: #ef4444;
}

.menu-item-disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-item-disabled:hover {
  background: transparent;
}

.menu-separator {
  height: 1px;
  margin: var(--space-xs) calc(-1 * var(--space-xs));
  background: var(--border-color);
}

@media (max-width: 768px) {
  .menu-trigger {
    width: 44px;
    height: 44px;
  }

  .menu-item {
    min-height: 44px;
  }
}

/* Plans and Reviews lists (plans/index, reviews/index): header buttons,
   then sections of cards with a cadence filter (shared/_cadence_filter) */
.list-next {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.list-section {
  margin-top: var(--space-xl);
}

.page-header + .list-section {
  margin-top: 0;
}

.list-filter {
  display: flex;
}

.list-none {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.review-card-meta,
.review-card-goals {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.review-card-state {
  color: var(--accent-primary);
}

.review-card-goals {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* App sidebar (shared/_sidebar), modelled on Todoist's: hidden behind the
   toggle icon at the top left. Wide screens push the page over while it is
   open; phones slide it over the page with a backdrop. State is the
   `sidebar-open` class on <html> (sidebar controller). */
:root {
  --sidebar-width: 260px;
  --sidebar-background: #111218;
  --tab-bar-height: 56px;
}

[data-theme="light"] {
  --sidebar-background: #f7f6f3;
}

.sidebar-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: left 0.2s ease, color 0.15s ease, background-color 0.15s ease, opacity 2.5s ease;
}

.sidebar-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Open: the toggle sits at the sidebar's top right, as in Todoist */
.sidebar-open .sidebar-toggle {
  left: calc(var(--sidebar-width) - 44px);
}

.app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  padding: 12px var(--space-sm) var(--space-md);
  background: var(--sidebar-background);
  border-right: 1px solid var(--border-color);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
}

.sidebar-open .app-sidebar {
  transform: none;
  visibility: visible;
}

.sidebar-top {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 44px var(--space-md) var(--space-sm);
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.sidebar-brand:hover {
  color: var(--text-primary);
}

.sidebar-brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.sidebar-nav,
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-bottom {
  margin-top: auto;
}

.sidebar-form {
  margin: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 36px;
  padding: 6px var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sidebar-link.active {
  background: rgba(0, 0, 0, 0.07);
}

.sidebar-link-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.sidebar-link.active .sidebar-link-icon {
  color: var(--accent-primary);
}

.sidebar-link-label {
  flex: 1;
}

.sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.sidebar-backdrop {
  display: none;
}

/* Wide screens: the open sidebar pushes the page over */
@media (min-width: 900px) {
  body {
    transition: padding-left 0.2s ease;
  }

  /* Only where there is a sidebar: the login page has none, though the
     class stays on from the last session */
  .sidebar-open body:has(.app-sidebar) {
    padding-left: var(--sidebar-width);
  }
}

/* Phones and small windows: no sidebar; the tab bar (shared/_tab_bar, at
   the end of this file) is the navigation, and the page keeps clear of it */
@media (max-width: 899px) {
  .sidebar-toggle,
  .app-sidebar,
  .sidebar-backdrop {
    display: none;
  }

  body:has(.tab-bar) {
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* Keyboard hints beside the sidebar links (G then E/P/R) */
.sidebar-kbd {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar-link:hover .sidebar-kbd,
.sidebar-link:focus-visible .sidebar-kbd {
  opacity: 1;
}

.sidebar-kbd kbd {
  min-width: 18px;
  padding: 1px 4px;
  border: 1px solid var(--border-color-hover);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-tertiary);
}

@media (hover: none) {
  .sidebar-kbd {
    display: none;
  }
}

/* Single-item pages (a review, a legacy plan) are card-free: plain
   sections (shared/_section and flat plan cards) divided by hairlines */
.section-stack {
  display: flex;
  flex-direction: column;
}

.section-stack > * {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-color);
}

.section-stack > :first-child {
  padding-top: var(--space-sm);
  border-top: none;
}

/* A flat plan inside a section-stack wrapper takes the wrapper's spacing */
.section-stack .plan-card.plan-flat {
  padding: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
  font: inherit;
}

.section-body {
  margin-top: var(--space-sm);
}

.section-body > :first-child {
  margin-top: 0;
}

.section-body > :last-child {
  margin-bottom: 0;
}

/* The review writing page is card-free, like a new entry: the period's
   entries and goals keep their layout but lose their frames, and a hairline
   separates them from the editor */
.writing-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.writing-page .entry-card,
.writing-page .plan-card,
[data-theme="light"] .writing-page .entry-card,
[data-theme="light"] .writing-page .plan-card {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.writing-context + .review-entry-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

/* Custom dropdown (shared/_picker): the "•••" menu's panel with a check on
   the chosen option. :icon is a square toolbar button, :inline shows the
   chosen text and a chevron, :field fills a form row. */
.picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background-tertiary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.picker-trigger:hover:not(:disabled),
.menu-open > .picker-trigger {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.picker-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.picker-icon .picker-trigger {
  width: 32px;
  padding: 0;
}

.picker.active .picker-trigger {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.picker-chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.picker-field {
  display: flex;
  width: 100%;
}

.picker-field .picker-trigger {
  width: 100%;
  height: 42px;
  justify-content: space-between;
  padding: 0 var(--space-md);
  font-size: 0.9375rem;
  color: var(--text-primary);
  border-radius: var(--radius-md);
}

.picker-field .picker-panel {
  left: 0;
  right: auto;
  width: 100%;
}

.picker-option {
  justify-content: space-between;
}

.picker-check {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent-primary);
  visibility: hidden;
}

.picker-option[aria-selected="true"] .picker-check {
  visibility: visible;
}

@media (max-width: 768px) {
  .picker-trigger {
    min-height: 36px;
  }
}

/* Quiet show/hide link on a list (e.g. earlier plans) */
.list-toggle {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-decoration: none;
}

.list-toggle:hover {
  color: var(--text-primary);
}

/* A new goal shows at once, before the server saves it; it can't be
   edited until then */
.goal-item-pending .goal-text {
  cursor: default;
}

/* A full entry's date links to the entry (the card itself doesn't) */
a.entry-card-date {
  text-decoration: none;
}

a.entry-card-date:hover {
  color: var(--text-primary);
}

/* --- Goal records: a row's body, second line and fields (goals/_goal) --- */

/* Text on top; date, repeat rule and the goal it serves underneath, quieter */
.goal-item .goal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.goal-item .goal-body > .goal-text,
.goal-item .goal-body > .goal-inline-input {
  flex: none;
  width: 100%;
}

.goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-sm);
  margin-top: 1px;
}

.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

button.goal-chip {
  cursor: pointer;
}

button.goal-chip:hover {
  color: var(--text-primary);
}

.goal-due-today {
  color: var(--accent-primary);
}

.goal-due-overdue,
.goal-due-slipped {
  color: var(--color-error, #ef4444);
}

.goal-meta {
  max-width: 100%;
}

/* The goal it serves: one line, cut short with an ellipsis */
.goal-parent {
  min-width: 0;
  max-width: 100%;
}

.goal-chip-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goal-notes {
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.goal-item.checked .goal-meta,
.goal-item.checked .goal-notes {
  opacity: 0.6;
}

.goal-item .goal-field-small {
  font-size: 0.8125rem;
  margin-top: 2px;
}

.goal-notes-input {
  width: 100%;
  resize: vertical;
}

/* --- Goal notes: a row shows the first line (goals/_goal); the editor
   shows them all (goals/_editor) --- */

/* The first line only, quieter, cut short with an ellipsis; a click opens
   the editor */
.goal-notes-summary {
  max-width: 100%;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-tertiary);
  cursor: pointer;
}

.goal-item.checked .goal-notes-summary {
  opacity: 0.6;
}

/* Every line, with links; long addresses wrap instead of widening the
   page */
.goal-notes-body {
  overflow-wrap: anywhere;
}

.goal-notes-body p,
.goal-notes-body ul,
.goal-notes-body ol {
  margin: 0;
}

.goal-notes-body p + p,
.goal-notes-body p + ul,
.goal-notes-body p + ol,
.goal-notes-body ul + p,
.goal-notes-body ol + p {
  margin-top: var(--space-xs);
}

.goal-notes-body ul,
.goal-notes-body ol {
  padding-left: 1.25em;
}

.goal-notes-body a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.goal-notes-body code {
  font-size: 0.75rem;
}

/* A goal that is only a web address: one line, opened from "Open link" */
.goal-item .goal-text-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

a.goal-chip {
  text-decoration: none;
}

a.goal-chip:hover {
  color: var(--text-primary);
}


/* "Serves a … goal": the goals one cadence up, as a short list */
.goal-parent-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: var(--space-xs) 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--border-color);
}

.goal-parent-heading {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.goal-parent-choice {
  padding: 2px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.goal-parent-choice:hover,
.goal-parent-choice.current {
  color: var(--text-primary);
}

.goal-parent-cancel {
  color: var(--text-tertiary);
}

/* --- The Plans page: cadence tabs, card-free sections --- */

.plan-tabs {
  display: flex;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.plan-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.plan-tab:hover {
  color: var(--text-primary);
}

.plan-tab.active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}

.plan-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
}

/* A plan on the Plans page is a plain section, not a card */
.plan-card.plan-flat,
.plan-card.plan-flat:hover {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* --- Todoist-style lists: each plan tab's timeline. A bold heading over a hairline, rows divided by hairlines with
   room around the text, and a wide gap between groups. --- */

.plan-timeline {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.day-group,
.plan-timeline > .plan-card.plan-flat {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
}

.day-group-label,
.plan-timeline .plan-card-top {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-color);
}

.day-group-label,
.plan-timeline .plan-card-label {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.plan-timeline .plan-card-period {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

.day-group-other .day-group-label {
  color: var(--text-secondary);
}

.day-group-overdue .day-group-label {
  color: var(--color-error, #ef4444);
}

.plan-timeline .plan-goals ul[data-type="taskList"] {
  margin: 0;
}

.plan-timeline .goal-item {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

.plan-timeline .goal-meta {
  margin-top: 4px;
}

.plan-timeline .goal-notes {
  margin-top: 3px;
}

/* "+ Add" is a row of its own, the same height as a one-line goal */
.day-group > .goal-add,
.plan-timeline .plan-card > .goal-add {
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.day-group > .goal-add:hover,
.plan-timeline .plan-card > .goal-add:hover {
  color: var(--accent-primary);
}

.plan-timeline .plan-check {
  margin-top: var(--space-sm);
}

.plan-timeline > .list-none,
.plan-timeline > .list-next {
  margin: -24px 0 0;
}

/* The Week tab: each week reads day by day under its heading. Day
   headings sit one step below the week's, each over its own hairline. */
.plan-timeline .plan-flat > .day-group {
  margin-top: 22px;
}

.plan-timeline .plan-flat > .day-group > .day-group-label {
  padding-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.plan-timeline .plan-flat > .day-group-today > .day-group-label {
  color: var(--text-primary);
}

.plan-timeline .plan-flat > .day-group-overdue > .day-group-label {
  color: var(--color-error, #ef4444);
}

/* Dragging a goal to another place or day */
.goal-item[draggable="true"] {
  cursor: grab;
}

.goal-item-dragging {
  opacity: 0.4;
}

/* Where a dragged goal will land: a thin line over the hairline between
   rows. It has no height, so the rows don't move while it moves. */
.goal-drop-line {
  position: relative;
  height: 0;
  list-style: none;
  pointer-events: none;
}

.goal-drop-line::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--text-tertiary);
}

/* --- Quick add (goals/_quick_add) --- */

.quick-add {
  width: min(560px, calc(100vw - 32px));
  margin: 15vh auto auto;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  /* Frosted: the page shows through only as a blur, never as text */
  background: rgba(22, 23, 31, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .quick-add {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.quick-add::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.quick-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.quick-add-row .date-highlight {
  flex: 1;
  min-width: 0;
}

.quick-add-input {
  width: 100%;
  padding: var(--space-sm) 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  outline: none;
}

/* Phones only: Enter is not obvious on a touch keyboard */
.quick-add-submit {
  display: none;
}

.quick-add-hint {
  margin: var(--space-xs) 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.sidebar-quick-add {
  margin-bottom: var(--space-sm);
}

.goal-error {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--color-error, #ef4444);
}

/* --- The unlock page (unlocks/show) for locked pages --- */

.unlock-page {
  display: flex;
  justify-content: center;
  padding-top: 12vh;
}

.unlock-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.unlock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.unlock-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.unlock-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.unlock-status {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.unlock-status.error {
  color: var(--color-error, #ef4444);
}

.unlock-password {
  width: 100%;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.unlock-password > summary {
  cursor: pointer;
  list-style: none;
}

.unlock-password > summary::-webkit-details-marker {
  display: none;
}

.unlock-password form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.sidebar-lock {
  display: inline-flex;
  margin-left: 2px;
  color: var(--text-tertiary);
}

/* --- Ticking a goal (goals controller celebrate): the check bounces and a
   faint ring spreads from it; with done goals hidden the row then folds
   away. Still for people who ask for less motion. --- */

.goal-check-circle {
  position: relative;
  /* Positioned for the ring, it would sit over the hidden checkbox */
  pointer-events: none;
}

.goal-item-popping .goal-check-circle {
  animation: goal-pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.goal-item-popping .goal-check-circle::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent-primary);
  animation: goal-ring 0.45s ease-out forwards;
  pointer-events: none;
}

@keyframes goal-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes goal-ring {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}

.goal-item.goal-item-leaving {
  overflow: hidden;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-width: 0 !important;
  transition: height 0.26s ease, opacity 0.2s ease, padding 0.26s ease;
}

@media (prefers-reduced-motion: reduce) {
  .goal-item-popping .goal-check-circle,
  .goal-item-popping .goal-check-circle::after {
    animation: none;
  }

  .goal-item.goal-item-leaving {
    transition: none;
  }
}

/* Settings > API tokens */
.api-token-reveal {
  margin-bottom: 1.5rem;
  border-color: var(--text-accent);
}

.api-token-value {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.api-token-value code {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.api-token-prefix {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

.api-token-scopes {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: 0 0 var(--space-lg) 0;
}

.api-token-scopes legend {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0 var(--space-sm);
  margin-left: var(--space-md);
}

.api-token-locked {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-left: var(--space-xs);
}

/* --- Light mode: no blue highlights on the goal lists; hovers darken the
   grey instead --- */
[data-theme="light"] .day-group > .goal-add:hover,
[data-theme="light"] .plan-timeline .plan-card > .goal-add:hover,
[data-theme="light"] .goal-add:hover {
  color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .goal-due-today {
  color: var(--text-secondary);
}

[data-theme="light"] .goal-check-input:focus-visible + .goal-check-circle,
[data-theme="light"] .goal-item .goal-text:focus-visible {
  outline-color: var(--text-tertiary);
}

[data-theme="light"] .goal-inline-input {
  caret-color: var(--text-primary);
}

[data-theme="light"] .goal-item-popping .goal-check-circle::after {
  border-color: var(--text-tertiary);
}

/* --- The date menu (lib/date_menu): quick choices over a month --- */

.menu-panel.date-menu {
  position: fixed;
  right: auto;
  z-index: 1000;
  width: 264px;
  min-width: 0;
}

.date-menu-item .date-menu-label {
  flex: 1;
}

.date-menu-hint {
  margin-left: var(--space-md);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.date-menu-item.selected {
  font-weight: 600;
}

.date-menu-calendar {
  padding: var(--space-xs) var(--space-xs) 2px;
}

.date-menu-month {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 600;
}

.date-menu-month > span {
  flex: 1;
}

.date-menu-nav {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}

.date-menu-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.date-menu-weekday {
  padding: 2px 0;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.date-menu-day {
  height: 30px;
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  cursor: pointer;
}

.date-menu-day.past {
  color: var(--text-tertiary);
}

.date-menu-day.today {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--border-color-hover);
}

.date-menu-nav:hover,
.date-menu-day:hover {
  background: rgba(255, 255, 255, 0.06);
}

.date-menu-day.selected {
  background: var(--text-primary);
  color: #0b0b0f;
}

[data-theme="light"] .date-menu-nav:hover,
[data-theme="light"] .date-menu-day:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .date-menu-day.selected {
  color: #fff;
}

/* --- The date found in a title as it is typed, highlighted in place
   (lib/date_highlight): a copy of the text behind the field, its text
   invisible, its date words marked --- */

.date-highlight {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

.date-highlight > textarea,
.date-highlight > input {
  position: relative;
  z-index: 1;
  background: transparent;
}

.date-highlight-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  color: transparent;
  overflow-wrap: break-word;
  pointer-events: none;
}

.date-highlight-backdrop mark {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
  color: transparent;
}

[data-theme="light"] .date-highlight-backdrop mark {
  background: rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.09);
}

/* --- Several goals selected (goal-selection controller) --- */

.goal-item-selected {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -8px 0 0 rgba(255, 255, 255, 0.05), 8px 0 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .goal-item-selected {
  background: rgba(0, 0, 0, 0.045);
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.045), 8px 0 0 rgba(0, 0, 0, 0.045);
}

/* The bar and the undo toast float over the bottom of the page */
.goal-selection-bar,
.goal-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: calc(100vw - 32px);
  padding: 6px 6px 6px var(--space-md);
  border: 1px solid var(--border-color-hover);
  border-radius: 10px;
  background: #16171f;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-size: 0.875rem;
  color: var(--text-primary);
  transform: translateX(-50%);
}

[data-theme="light"] .goal-selection-bar,
[data-theme="light"] .goal-toast {
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.goal-selection-bar.busy {
  opacity: 0.6;
  pointer-events: none;
}

.goal-selection-count {
  margin-right: var(--space-sm);
  white-space: nowrap;
  color: var(--text-secondary);
}

.goal-selection-action,
.goal-selection-close,
.goal-toast-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  white-space: nowrap;
  color: var(--text-primary);
  cursor: pointer;
}

.goal-selection-danger {
  color: #ef4444;
}

.goal-selection-action:hover,
.goal-selection-close:hover,
.goal-toast-undo:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .goal-selection-action:hover,
[data-theme="light"] .goal-selection-close:hover,
[data-theme="light"] .goal-toast-undo:hover {
  background: rgba(0, 0, 0, 0.05);
}

.goal-toast-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goal-toast-undo {
  font-weight: 600;
}

/* --- The goal editor (goals/_editor_dialog, goal-editor controller),
   Todoist-style: the goal on the left, its date and parent on the right --- */

.goal-editor {
  width: min(860px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 64px));
  margin: 10vh auto auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-color-hover);
  border-radius: 12px;
  background: #16171f;
  color: var(--text-primary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .goal-editor {
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.goal-editor::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.goal-editor-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 12px 10px var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.goal-editor-where {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.goal-editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.goal-editor-icon:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

[data-theme="light"] .goal-editor-icon:hover {
  background: rgba(0, 0, 0, 0.05);
}

.goal-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  min-height: 320px;
}

.goal-editor-main {
  padding: var(--space-lg);
}

.goal-editor-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.goal-editor-title-row .goal-check {
  margin-top: calc((1.35 * 1.25rem - 18px) / 2 + 1px);
}

.goal-editor-title-row .goal-check.checked .goal-check-circle {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
  color: #0b0b0f;
}

[data-theme="light"] .goal-editor-title-row .goal-check.checked .goal-check-circle {
  color: #fff;
}

.goal-editor-title,
.goal-editor-notes-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
}

.goal-editor-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.goal-editor-title-row > .date-highlight {
  flex: 1;
}

.goal-editor-notes {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-left: 1px;
}

.goal-editor-notes-icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  margin-top: 3px;
  color: var(--text-tertiary);
}

.goal-editor-notes-field {
  flex: 1;
  min-width: 0;
}

.goal-editor-notes-input,
.goal-editor-notes-view {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.goal-editor-notes-input::placeholder {
  color: var(--text-tertiary);
}

.goal-editor-notes-view {
  color: var(--text-secondary);
  cursor: text;
}

.goal-editor-notes-view[hidden],
.goal-editor-notes-input[hidden] {
  display: none;
}

.goal-editor-error {
  margin: var(--space-md) 0 0;
  font-size: 0.8125rem;
  color: var(--color-error, #ef4444);
}

.goal-editor-side {
  padding: var(--space-md);
  border-left: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.015);
}

[data-theme="light"] .goal-editor-side {
  background: rgba(0, 0, 0, 0.02);
}

.goal-editor-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-sm) var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.goal-editor-field + .goal-editor-field {
  padding-top: var(--space-md);
}

.goal-editor-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.goal-editor-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-left: -6px;
  padding: 4px 6px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.goal-editor-value > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goal-editor-value:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .goal-editor-value:hover {
  background: rgba(0, 0, 0, 0.05);
}

.goal-editor-value.goal-due-overdue,
.goal-editor-value.goal-due-slipped {
  color: var(--color-error, #ef4444);
}

.goal-editor-repeat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.goal-editor-repeat[hidden],
.goal-editor-choices[hidden] {
  display: none;
}

.goal-editor-choices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.goal-editor-none {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* Phones: one column, the date and parent under the goal */
@media (max-width: 640px) {
  .goal-editor {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
  }

  .goal-editor-body {
    grid-template-columns: 1fr;
  }

  .goal-editor-side {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
}

/* --- Phones: flat colours, no page titles, the tab bar and the "+" ---
   (shared/_tab_bar; the sidebar rules above hide the sidebar). The tab
   bar is the only navigation under 900px, in the browser and in the
   Android app alike. */

@media (max-width: 899px) {
  /* One flat colour, so the phone's own bars (painted by the app shell
     from the theme-color meta) and the page read as one surface. A fixed
     gradient also scrolls badly on Android. */
  :root {
    --background-primary: #070709;
  }

  [data-theme="light"] {
    --background-primary: #fcfcfc;
  }

  body {
    background-attachment: scroll;
  }

  /* No toggle icon to keep clear of: the page starts near the top */
  .container,
  .narrow-page {
    padding-top: var(--space-md);
  }

  .narrow-page.plans-page {
    padding-top: var(--space-xs);
  }

  /* The active tab names the list pages; an item page keeps its title
     (an entry's date, a review's period) */
  .plans-page .page-header .page-title,
  .reviews-page .page-header .page-title,
  .entries-header h1 {
    display: none;
  }

  .page-header {
    margin-bottom: var(--space-md);
  }

  .entries-header {
    justify-content: flex-end;
    margin-bottom: var(--space-lg);
  }

  /* Plans: the cadence tabs sit at the top, centred, with the "•••" at
     the row's right edge */
  .plans-page {
    position: relative;
  }

  .plans-page .page-header {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-sm);
    margin: 0;
  }

  .plans-page .plan-tabs {
    justify-content: center;
    gap: var(--space-md);
    padding: 0 36px;
  }

  .tab-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* The page's own colour, so the strip the app shell paints under the
       phone's navigation bar reads as part of the tab bar */
    background: var(--background-primary);
    border-top: 1px solid var(--border-color);
  }

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .tab-bar-item:hover {
    color: var(--text-secondary);
  }

  .tab-bar-item.active {
    color: var(--text-primary);
  }

  .tab-bar-item.active .nav-icon {
    color: var(--accent-primary);
  }

  .tab-bar-icon {
    position: relative;
    display: inline-flex;
  }

  .tab-bar-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--background-primary);
  }

  .tab-bar-label {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .top-edge {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 58;
    height: 1px;
    background: var(--border-color-hover);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .scrolled .top-edge {
    opacity: 1;
  }

  .quick-add-fab {
    position: fixed;
    right: var(--page-gutter, var(--space-md));
    bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-md));
    z-index: 59;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .quick-add-fab:active {
    background: var(--accent-primary-hover);
  }

  /* Writing: the keyboard is up, so the bar and the "+" get out of the way
     (sidebar controller sets keyboard-open on <html>). The entry page has
     its own bar along the bottom (nudge and Complete, above), so there the
     tab bar stays away altogether: the page is left by Complete or back. */
  .keyboard-open .tab-bar,
  .keyboard-open .quick-add-fab,
  body:has(.narrow-page .header-actions .select) .tab-bar,
  body:has(.narrow-page .header-actions .select) .quick-add-fab {
    display: none;
  }

  body:has(.narrow-page .header-actions .select) {
    padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  .tab-bar,
  .quick-add-fab,
  .top-edge {
    display: none;
  }
}

/* The Android app has a native tab bar under the page (native-app on
   <html>, set by the layout when the app's bridge is there), so the
   page's own is not shown and the "+" sits just above the bottom edge */
.native-app .tab-bar {
  display: none;
}

.native-app body:has(.tab-bar) {
  padding-bottom: 0;
}

.native-app .quick-add-fab {
  bottom: var(--space-md);
}

/* Phones: quick add is a sheet along the bottom, above the keyboard
   (viewport interactive-widget=resizes-content), opaque, with an Add
   button; no blur, which Android WebViews draw badly */
@media (max-width: 640px) {
  .quick-add {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--border-color-hover);
    border-radius: 16px 16px 0 0;
    background: #16171f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  }

  [data-theme="light"] .quick-add {
    background: #fff;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.12);
  }

  .quick-add-input {
    font-size: 1.0625rem;
  }

  .quick-add-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    cursor: pointer;
  }

  .quick-add-hint-keys {
    display: none;
  }

  /* The goal editor fills the screen; its bottom clears the phone's bar */
  .goal-editor {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* --- Settings as nested pages (settings/index, settings/_back) ---
   The list page: sections in groups, as rows with a chevron, Log out at
   the end. On phones (under 900px, where the app sidebar gives way to the
   tab bar) the settings sidebar goes too: the list is the Settings tab,
   each section is a page of its own, and "Settings" at its top leads
   back. Wide screens keep the sidebar and never show the back link. */

.settings-index-group {
  margin-bottom: var(--space-lg);
}

.settings-index-title {
  display: block;
  margin: 0 0 var(--space-xs);
  padding: 0 var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.settings-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--background-secondary);
  overflow: hidden;
}

.settings-index-list > li + li {
  border-top: 1px solid var(--border-color);
}

.settings-index-form {
  margin: 0;
}

.settings-index-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-index-item:hover {
  background: var(--background-tertiary);
  color: var(--text-primary);
}

.settings-index-item .nav-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.settings-index-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-index-label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.settings-index-hint {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.settings-index-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-tertiary);
}

.settings-index-logout {
  color: var(--color-error, #ef4444);
}

.settings-index-logout .nav-icon {
  color: inherit;
}

/* The way back from a section: phones only */
.settings-back {
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0 0 var(--space-sm) -6px;
  padding: 6px 8px 6px 4px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: none;
}

.settings-back:hover {
  color: var(--accent-primary-hover);
}

.settings-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 899px) {
  .settings-sidebar {
    display: none;
  }

  .settings-back {
    display: inline-flex;
  }

  .settings-layout {
    min-height: 0;
  }

  .settings-content {
    padding: var(--space-md) var(--space-sm);
  }
}

/* --- Sub-tasks in the goal editor (goals/_subtask) --- */

.goal-editor-subtasks {
  margin-top: var(--space-lg);
  padding-left: calc(18px + var(--space-sm));
}

.goal-editor-subtasks-head {
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.goal-editor-subtasks-head > span {
  margin-left: 4px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.goal-editor-subtasks-head[hidden] {
  display: none;
}

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

.subtask {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

.subtask[hidden] {
  display: none;
}

.subtask .goal-check {
  margin-top: calc((1.5em - 18px) / 2);
}

.subtask-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.subtask.checked .subtask-text {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.subtask.checked .goal-check-circle {
  background: var(--text-tertiary);
  border-color: var(--text-tertiary);
  color: #0b0b0f;
}

[data-theme="light"] .subtask.checked .goal-check-circle {
  color: #fff;
}

.subtask-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  opacity: 0;
  cursor: pointer;
}

.subtask:hover .subtask-delete,
.subtask-delete:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .subtask-delete {
    opacity: 1;
  }
}

.subtask-delete:hover {
  color: var(--text-primary);
}

.goal-add.subtask-add {
  min-height: 0;
  margin-top: 0;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.goal-add.subtask-add[hidden] {
  display: none;
}

/* --- Phones: one page frame for every tab ---
   The same top offset and side gutter on Plans, Entries, Reviews and
   Settings, and a first row of the same height (the cadence tabs, the
   Entries toolbar, the Reviews filter, the Settings heading), so the
   tabs read as one app. Wrappers nested inside .container add nothing. */
@media (max-width: 899px) {
  :root {
    --page-top: 16px;
    --page-gutter: 20px;
    --page-row: 40px;
  }

  .container {
    padding: var(--page-top) var(--page-gutter) var(--space-xl);
  }

  .narrow-page,
  .narrow-page.plans-page,
  .entries-page {
    padding: 0;
  }

  .container:has(.settings-layout) {
    padding: 0;
  }

  .settings-content {
    padding: var(--page-top) var(--page-gutter) var(--space-xl);
  }

  .page-header,
  .entries-header {
    min-height: var(--page-row);
    align-items: center;
    margin-bottom: var(--space-md);
  }

  .plans-page .page-header {
    top: 0;
    right: 0;
    margin: 0;
  }

  .plans-page .plan-tabs {
    min-height: var(--page-row);
    margin: 0 0 var(--space-md);
  }

  .settings-section-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--page-row);
    margin-bottom: var(--space-md);
  }

  .settings-section-header h2 {
    margin: 0;
    line-height: 1.2;
  }

  .settings-section-description {
    margin: 2px 0 0;
  }
}

/* --- The Entries and Reviews lists as flat rows, like Plans ---
   No card box at any width: rows divided by hairlines at the page gutter,
   no background, no corner radius, no shadow, so the text of all four
   pages lines up. A hover lifts the row's label, like a plan's heading. */
.entries-grid {
  gap: 0;
}

.entries-grid .entry-card,
.entries-grid .review-card {
  padding: var(--space-lg) 0;
  font-weight: 400; /* the row is a link, but reads like a goal row, not a link */
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.entries-grid > :first-child {
  padding-top: 0;
}

.entries-grid .entry-card:hover,
.entries-grid .review-card:hover {
  border-color: var(--border-color);
  box-shadow: none;
}

.entries-grid .entry-card:hover .entry-card-date,
.entries-grid .review-card:hover .entry-card-date {
  color: var(--text-secondary);
}

.entries-grid .entry-card-draft {
  border-bottom-style: dashed;
}

/* --- Phones: the Entries toolbar's controls at one height; the Settings
   list needs no heading (the tab names it) --- */
@media (max-width: 899px) {
  .entries-toolbar .icon-button,
  .entries-toolbar .button,
  .entries-toolbar .picker-trigger,
  .header-actions .button,
  .header-actions .picker-trigger {
    height: 36px;
  }

  .entries-toolbar .icon-button {
    width: 36px;
  }

  .settings-index > .settings-section-header {
    display: none;
  }
}

/* --- Phones: an entry or a review as a page of its own ---
   Title row: the date or the period on the left, the actions (previous,
   next, "•••") on the right, at the page's first-row height. Under it the
   entry's meta (mood, habits, words) over a hairline, so nothing floats.
   The body reads at the list's size and weight. --- */
@media (max-width: 899px) {
  .page-header .page-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: var(--page-row);
    letter-spacing: -0.01em;
  }

  /* Title and actions on the first row, the meta row full width under
     them: the title group's children become the header's own */
  .page-header:has(.entry-meta-inline) {
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-md);
  }

  .page-header:has(.entry-meta-inline) .page-title-group {
    display: contents;
  }

  .page-header:has(.entry-meta-inline) .page-title {
    flex: 1;
    min-width: 0;
  }

  .page-header .entry-meta-inline {
    order: 3;
    width: 100%;
    gap: var(--space-md);
    margin-top: 2px;
  }

  /* Bigger beats and habit marks for a thumb */
  .page-header .mood-selector {
    gap: 5px;
    font-size: 0.9375rem;
  }

  .page-header .habit-icon-button {
    width: 24px;
    height: 24px;
  }

  .page-header .habit-icon-button svg {
    width: 17px;
    height: 17px;
  }

  .header-actions .button-icon {
    width: 36px;
    height: 36px;
  }

  .header-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  /* The back gesture and the browser's back do this */
  .page-header .header-actions .button-tertiary {
    display: none;
  }

  /* Over the editor's own style block (shared/_tiptap_editor), which the
     page loads after this sheet */
  .narrow-page .journal-entry-editor,
  .narrow-page .content-section-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
  }

  .narrow-page .journal-entry-editor {
    padding-top: var(--space-xs);
  }
}