:root {
  /* This app is always dark, never adapts to system light mode — tells the
     browser to render native form control chrome (date-picker icon, etc.)
     in its dark variant instead of a near-invisible dark-on-dark default. */
  color-scheme: dark;
  --bg: #0D0F12;
  --panel: #16181C;
  --border: #2C2C2A;
  --border-light: #444441;
  --accent-green: #4ADE80;
  --accent-warning: #F5A623;
  --text-primary: #E8E8E8;
  --text-secondary: #888780;
  --warm: #E8748A;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hidden {
  display: none !important;
}

/* Generic elements (used by the post-login stub page) */

.title {
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 2rem;
}

.btn-enter {
  background: transparent;
  color: var(--accent-green);
  border: 1px solid var(--border-light);
  padding: 0.75rem 2rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}

.btn-enter:hover {
  border-color: var(--accent-green);
}

a.btn-enter {
  display: inline-block;
  text-decoration: none;
  margin-top: 0.75rem;
}

/* Matrix rain background */

#matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}

/* Name selection: sits on top of the rain */

.name-select-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.name-select-caption {
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.15);
}

/* Only the top-level caption on the letter-field screen needs fixed
   positioning now that .name-select-layer isn't a flex container.
   #welcome-back also uses .name-select-caption but lives inside
   .terminal's normal flow — this selector must not touch it. */
#name-select > .name-select-caption {
  position: fixed;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
}

/* Individually positioned letters camouflaged in the rain. Deliberately
   matches the canvas rain's glyph rendering exactly: plain generic
   monospace (not the JetBrains Mono webfont used elsewhere on the
   page), same 16px size as gate.js's FONT_SIZE/ctx.font, same green.
   No glow, no bold, no pointer cursor — anything that makes it look
   "clickable" defeats the point. */
.letter-target {
  position: fixed;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #4ADE80;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: text-shadow 0.12s ease-out;
}

/* Brief, subtle confirmation on a correct in-order click — meant to
   read as indistinguishable from the rain's own flicker to onlookers. */
.letter-target.flash {
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.85);
}

/* Gate: browser-chrome frame */

.browser-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #1B1D22;
  border-bottom: 1px solid var(--border);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #E5534B; }
.dot-yellow { background: #F5A623; }
.dot-green { background: #4ADE80; }

.address-bar {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal {
  padding: 1.5rem;
}

/* Confirm dialog — a small Mac-style window (same chrome/dots as the gate),
   replacing the unstyleable native browser confirm() popup. */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
}

.confirm-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: 90%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.confirm-window-body {
  padding: 1.5rem;
}

.confirm-window-message {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.confirm-window-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.confirm-window-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.45rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
}

.confirm-window-cancel:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.confirm-window-confirm {
  border-color: #EF4444;
  color: #EF4444;
}

.confirm-window-confirm:hover {
  background: #EF4444;
  color: #fff;
}

.step label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.required-hint {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.step input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.step input[type="password"]:focus {
  outline: none;
  border-color: var(--accent-green);
}

/* Override the browser's own white/blue autofill highlight so a saved
   password doesn't break the dark terminal look. */
.step input[type="password"]:-webkit-autofill,
.step input[type="password"]:-webkit-autofill:hover,
.step input[type="password"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.step button {
  width: 100%;
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
}

.step button.link-button {
  width: auto;
  display: block;
  margin: 0.6rem auto 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-decoration: underline;
  padding: 0;
}

.step button.link-button:hover {
  color: var(--accent-green);
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pagination-controls button {
  width: auto;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.3rem 0.7rem;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
}

.pagination-controls button:hover:not(:disabled) {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.pagination-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

.otp-boxes {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.otp-box {
  width: 100%;
  aspect-ratio: 1;
  text-align: center;
  font-size: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: 4px;
  font-family: inherit;
}

.otp-box:focus {
  outline: none;
  border-color: var(--accent-green);
}

.error {
  color: var(--accent-warning);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.warning {
  color: var(--accent-warning);
  font-size: 0.9rem;
  text-align: center;
}

.access-log {
  border-top: 1px solid var(--border);
  padding: 0.6rem 1.5rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: #131519;
}

/* One-time "enable notifications" banner (see nav.js) — sits above the app
   nav on whichever page happens to load first after granting permission is
   still pending, and never reappears once enabled or dismissed. */
.push-permission-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

.push-permission-banner button {
  font-family: inherit;
  cursor: pointer;
}

.push-permission-banner button:first-of-type {
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  border-radius: 14px;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
}

.push-permission-banner button:first-of-type:hover {
  background: var(--accent-green);
  color: var(--bg);
}

.push-permission-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.3rem;
}

.push-permission-dismiss:hover {
  color: var(--accent-warning);
}

/* App nav (post-login pages) */

.app-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.app-nav-back {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
}

.app-nav-back:hover {
  color: var(--accent-green);
}

.app-nav-title {
  color: var(--text-primary);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  flex: 1;
  text-align: center;
}

.app-nav-logout {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
}

.app-nav-logout:hover {
  color: var(--accent-warning);
}

/* Dashboard's quick-links menu — a compact trigger in the header (same slot
   sub-pages use for "< back") instead of a row of tiles in the page body,
   which used to overflow on narrow screens. */
/* Webview doesn't get this at all — it keeps the inline tile grid in the
   page body instead (.dashboard-modules). Only shown once the layout
   switches to the tablet/mobile arrangement. */
.app-nav-menu-btn {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  cursor: pointer;
}

.app-nav-menu-btn:hover,
.app-nav-menu-btn.active {
  background: var(--accent-green);
  color: var(--bg);
}

.app-nav-menu-btn-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Menu button is a phone-only affordance — tablet width shows quick links
   inline instead (see app.js's tab layout), so the two never both appear. */
@media (max-width: 600px) {
  .app-nav-menu-btn {
    display: inline-flex;
  }
}

.app-nav-menu {
  position: absolute;
  top: 100%;
  left: 1.5rem;
  margin-top: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  min-width: 170px;
  overflow: hidden;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transform-origin: top left;
  animation: app-nav-menu-pop 0.15s ease-out;
}

@keyframes app-nav-menu-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav-menu { animation: none; }
}

.app-nav-menu a {
  display: block;
  padding: 0.8rem 1.1rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.app-nav-menu a:last-child {
  border-bottom: none;
}

.app-nav-menu a:hover {
  background: var(--bg);
  color: var(--accent-green);
}

/* Timeline page */

.timeline-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
}

.timeline-form-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.step input[type="text"],
.step input[type="date"],
.step textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  resize: vertical;
}

.step input[type="file"] {
  width: 100%;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.timeline-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.control-input,
.control-select {
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.5rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
}

.control-input {
  flex: 1;
  min-width: 140px;
}

.control-input:focus,
.control-select:focus {
  outline: none;
  border-color: var(--accent-green);
}

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tag-chip {
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 12px;
  cursor: pointer;
}

.tag-chip:hover {
  border-color: var(--accent-green);
}

.tag-chip.active {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.tag-input-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
}

.tag-input-box:focus-within {
  border-color: var(--accent-green);
}

.tag-input-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  background: var(--panel);
}

.tag-input-chip-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  line-height: 1;
}

.tag-input-chip-remove:hover {
  color: var(--accent-warning);
}

#entry-tags-input {
  flex: 1;
  min-width: 100px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.2rem;
}

#entry-tags-input:focus {
  outline: none;
}

.tag-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-top: 0.25rem;
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
}

.tag-suggestion-item {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}

.tag-suggestion-item:hover {
  background: var(--bg);
  color: var(--accent-green);
}

.timeline-loading {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 1rem 0;
}

/* Git-commit-log style: vertical rail with dot markers per entry */

.timeline-rail {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border);
}

.timeline-commit {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-commit::before {
  content: '';
  position: absolute;
  left: -1.55rem;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green);
  border: 2px solid var(--bg);
}

.timeline-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.timeline-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.timeline-description {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.existing-photos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.existing-photo-thumb {
  position: relative;
  width: 70px;
  height: 70px;
}

.existing-photo-thumb img,
.existing-photo-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

/* Higher specificity than .step button (which this button technically lives
   under, inside the form panel) is required here — .step button's width:100%,
   background:transparent, and border-radius:4px would otherwise win and this
   would render as a wide, transparent, square-cornered bar instead of a
   small solid circle, regardless of what's set below. */
.existing-photo-thumb .existing-photo-remove {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EF4444;
  border: none;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.existing-photo-thumb .existing-photo-remove:hover {
  background: #DC2626;
}

.timeline-commit {
  position: relative;
}

.timeline-kebab-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  opacity: 0.35;
}

.timeline-kebab-btn:hover,
.timeline-kebab-btn.active {
  opacity: 1;
  color: var(--accent-green);
}

.timeline-kebab-menu {
  position: absolute;
  top: 1.6rem;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  min-width: 100px;
  z-index: 10;
}

.timeline-kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.timeline-kebab-item:hover {
  background: var(--bg);
  color: var(--accent-green);
}

.timeline-kebab-item.timeline-kebab-delete:hover {
  color: var(--accent-warning);
}

.timeline-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.timeline-photo {
  display: block;
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.page-action-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.page-action-btn:hover {
  background: var(--accent-green);
  color: var(--bg);
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.attachment-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
}

.attachment-row img.attachment-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.attachment-icon {
  font-size: 1rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.attachment-label {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.attachment-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
}

.attachment-remove:hover {
  color: var(--accent-warning);
}

.journal-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.journal-attachment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.journal-attachment-image {
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

.journal-attachment-audio {
  width: 100%;
  max-width: 320px;
}

.journal-attachment-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 6px;
  display: block;
}

.journal-attachment-file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-green);
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  width: fit-content;
}

.journal-attachment-file-link:hover {
  border-color: var(--accent-green);
}

/* Journal: changelog / log-entry style */

.step select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.changelog-list {
  display: flex;
  flex-direction: column;
}

.changelog-entry {
  position: relative;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.changelog-entry:first-child {
  padding-top: 0;
}

.changelog-entry:last-child {
  border-bottom: none;
}

/* Goals: roadmap/backlog board grouped by life area */

.goals-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

.goals-form-panel {
  max-width: 480px;
}

.goals-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.goals-column {
  flex: 1 0 220px;
  min-width: 220px;
}

.goals-column-header {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.goal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

.goal-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.goal-meta {
  margin-bottom: 0.5rem;
}

.status-pill {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 0.6rem;
}

.status-pill-active {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.status-pill-done {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #0D0F12;
}

.status-pill-paused {
  border-color: var(--accent-warning);
  color: var(--accent-warning);
}

.goal-progress-notes {
  margin-bottom: 0.6rem;
}

.goal-progress-note {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

/* One joined bordered control (input + trailing button sharing an outer
   border) instead of two separate floating boxes with a gap between them —
   used for both the subtask-add and progress-note-add forms in the goal
   detail window. */
.inline-add-form {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.inline-add-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: var(--bg);
  color: var(--text-primary);
  padding: 0.45rem 0.6rem;
  font-family: inherit;
  font-size: 0.8rem;
}

.inline-add-form input:focus {
  outline: none;
}

/* div.inline-add-form button (not just .inline-add-form button) is required
   here — .step button's width:100% has the same specificity as a bare
   ".inline-add-form button" and, wherever this widget sits inside a .step
   (e.g. Gallery's quick-add-album box), would otherwise win on source order
   alone and blow the button up to fill the whole row while the input next to
   it gets squeezed to nothing. The extra "div" tips the specificity in this
   rule's favor unconditionally. */
div.inline-add-form button {
  flex: 0 0 auto;
  width: auto;
  border: none;
  border-left: 1px solid var(--border-light);
  background: transparent;
  color: var(--accent-green);
  padding: 0.45rem 0.8rem;
  font-family: inherit;
  cursor: pointer;
}

.inline-add-form button:hover {
  background: var(--accent-green);
  color: var(--bg);
}

.goal-progress-percent {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.6rem;
}

.goal-progress-bar-track {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.3rem;
}

.goal-progress-bar-fill {
  height: 100%;
  background: var(--accent-green);
}

/* Both of the Goals page's own add-triggers side by side, not stacked at
   different levels of the page — they're equally-weighted actions. */
.goals-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Someday: a lighter list above the life-area board — shared fun plans
   (watch/visit/do), not personal-growth goals, so no subtasks or weighted
   progress bar. Items reuse .goal-card's shell for visual consistency. */
.someday-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.someday-header-row .goals-column-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.someday-list {
  margin-bottom: 2rem;
}

.someday-checkbox-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.someday-checkbox-label input[type="checkbox"],
.dashboard-someday-preview input[type="checkbox"] {
  accent-color: var(--accent-green);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.someday-done {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.someday-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.category-tag {
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}

/* Goal detail window — same Mac-style chrome as the confirm dialog, larger. */

.goal-detail-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.goal-detail-body {
  padding: 1.5rem;
}

.goal-detail-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.goal-detail-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.goal-detail-section-header {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin: 1.25rem 0 0.75rem;
}

.goal-detail-close-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.subtask-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.subtask-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.subtask-row input[type="checkbox"] {
  accent-color: var(--accent-green);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.subtask-title {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.subtask-title.done {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.subtask-weight-input {
  width: 44px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.2rem;
  border-radius: 4px;
  text-align: center;
}

.subtask-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
}

.subtask-remove:hover {
  color: var(--accent-warning);
}

/* Gallery / Memories: flat grid, no lightbox glow/blur */

.gallery-page {
  max-width: 900px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.gallery-cell {
  position: relative;
  display: flex;
  flex-direction: column;
}

.album-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  border-radius: 12px;
  cursor: pointer;
}

.album-chip:hover {
  border-color: var(--accent-green);
}

.album-chip.active {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* Album filter strip — horizontally scrollable rather than wrapping, so a
   growing list of albums stays a single tidy row instead of eventually
   taking over the page. The "all" chip is pinned outside the scroll area
   since it's the one you reach for regardless of scroll position. */

.album-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.album-filter-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.album-filter-scroll::-webkit-scrollbar {
  display: none;
}

.album-filter-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: max-content;
}

.album-filter-track .album-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

.album-chip-all {
  flex-shrink: 0;
}

.album-scroll-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-scroll-btn:hover:not(:disabled) {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.album-scroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.album-chip-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  line-height: 1;
}

.album-chip-remove:hover {
  color: var(--accent-warning);
}

.album-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.album-picker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.album-picker-item input {
  margin: 0;
}

.album-picker-item.checked {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.album-quick-add {
  max-width: 260px;
  margin-bottom: 0.75rem;
}

.gallery-albums {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.gallery-meta {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.gallery-caption {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-top: 0.2rem;
}

.gallery-thumb-video {
  background: #000;
}

/* Lightbox — same Mac-style chrome as the confirm dialog / goal detail
   window, sized for viewing a photo or video up close and re-tagging its
   albums without leaving the view. */

.lightbox-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: 92%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.lightbox-body {
  padding: 1.5rem;
}

.lightbox-media-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.lightbox-media {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}

.lightbox-fullscreen-btn,
.lightbox-nav-btn {
  position: absolute;
  border: 1px solid var(--border-light);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lightbox-fullscreen-btn:hover,
.lightbox-nav-btn:hover:not(:disabled) {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.lightbox-fullscreen-btn {
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.lightbox-nav-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
}

.lightbox-nav-prev {
  left: 8px;
}

.lightbox-nav-next {
  right: 8px;
}

.lightbox-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.lightbox-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.lightbox-caption {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Dashboard */

/* Two-thirds/one-third page split (Facebook-style): everything you'd scroll
   through — hero, quick-journal, photos, quick links, journal — lives in the
   wider main column; goals get their own persistent sidebar next to it. */
.dashboard-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Webview and tablet/mobile get genuinely different structures, built by
   app.js (see renderDashboardLayout), not the same grid reordered by CSS —
   grid-template-areas forces shared row heights across both columns, which
   is exactly what made goals sit with a large gap under "how was your day?"
   instead of tight beneath it. Two independent columns (plain block flow,
   each stacking its own children via their own margins) avoids that. */
.dashboard-layout-desktop {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.dashboard-main,
.dashboard-sidebar {
  /* Grid items default to min-width: auto, which refuses to shrink a column
     below its content's natural minimum width — with fixed-size photo boxes
     inside, that forced the whole grid wider than the viewport on narrower
     screens instead of actually shrinking to fit. */
  min-width: 0;
}

.dashboard-sidebar {
  position: sticky;
  top: 1.5rem;
}

/* No layout rules needed here beyond being a plain block container — each
   block already carries its own margin-bottom, so spacing stays identical
   to the webview columns without duplicating it at the wrapper level. */
.dashboard-layout-mobile {
  display: block;
}

/* Dashboard hero — the first thing either of you sees after logging in.
   Contained to this one card so the rest of the app stays exactly as flat
   and quiet as it already was; only this landing moment gets an ambient
   background and a little motion. */

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
  background: var(--panel);
}

.hero-bg {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 28% 28%, rgba(232, 116, 138, 0.16), transparent 55%),
    radial-gradient(circle at 72% 68%, rgba(74, 222, 128, 0.10), transparent 55%);
  animation: hero-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, -3%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-greeting {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.4rem;
  color: var(--warm);
  margin-bottom: 1.25rem;
  animation: hero-fade-in 0.5s ease-out;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1.75rem;
}

.hero-counter-number {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.hero-counter-label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero-memory {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem;
  background: rgba(13, 15, 18, 0.4);
}

a.hero-memory:hover {
  border-color: var(--accent-green);
}

.hero-memory-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 0.6rem;
}

.hero-memory-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* One photo: sits beside the text instead of stretched full-width on top —
   a fixed letterboxed frame, never cropped or stretched. */
.hero-memory-content-split {
  flex-direction: row;
  align-items: flex-start;
}

.hero-memory-media-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-memory-content-split .hero-memory-media-wrap {
  flex: 0 0 auto;
}

/* object-fit: contain + a fixed box + a dark fill for the letterbox gaps —
   the whole photo always shows, never cropped, never stretched to fit. */
.hero-memory-media {
  display: block;
  width: 200px;
  height: 160px;
  object-fit: contain;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Multiple photos: a small row of thumbnails instead of one enlarged photo. */
.hero-memory-media-wrap-multi .hero-memory-media {
  width: 110px;
  height: 110px;
}

.hero-memory-text-col {
  flex: 1;
  min-width: 0;
}

@media (max-width: 560px) {
  .hero-memory-content-split {
    flex-direction: column;
  }

  .hero-memory-content-split .hero-memory-media {
    width: 100%;
  }
}

.hero-memory-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.hero-memory-text {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Birthday takeover — swaps in for the whole hero, only on the matching
   calendar date. Same palette as every other page; the confetti is the one
   deliberate flourish this app allows itself, and only for one day a year. */

.hero-birthday-mode {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.hero-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -12%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.85;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(420px) rotate(220deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece { display: none; }
}

.hero-birthday-heading {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 2rem;
  color: var(--warm);
  margin-bottom: 0.6rem;
}

.hero-birthday-message {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

.hero-birthday-counter {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

/* Quick links as inline tiles — the webview's own layout, unrelated to the
   tablet/mobile menu button below. Self-adapts to fewer columns on its own
   via auto-fit/minmax. app.js only ever places this element into the
   desktop structure — the mobile one leaves it out entirely in favor of
   the header's menu button. */
.dashboard-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.dashboard-module-tile {
  display: block;
  text-align: center;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.dashboard-module-tile:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.dashboard-section {
  margin-bottom: 2rem;
}

.dashboard-photos-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
}

.dashboard-photo-link {
  flex: 0 0 auto;
}

.dashboard-photo-thumb {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
}

.dashboard-photo-thumb:hover {
  border-color: var(--accent-green);
}

.dashboard-goals-preview,
.dashboard-someday-preview {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* "+" trigger for the someday quick-add popup — sits next to the section's
   own heading (see .someday-header-row), not a full-width button like the
   quick-journal one, since this section's action is meant to feel lighter. */
.dashboard-someday-add-btn {
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-someday-add-btn:hover {
  background: var(--accent-green);
  color: var(--bg);
}

.dashboard-goal-row {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

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

.dashboard-goal-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
}

.dashboard-goal-title {
  font-family: 'Fraunces', 'Lora', serif;
  color: var(--text-primary);
}

/* Quick journal prompt — sits at the top of the sidebar so it's the first
   thing next to the goals list. Clicking it opens the same fields as the
   Journal page's own add-entry form, just as a popup (Mac-style chrome,
   consistent with every other dialog in the app) rather than inline, since
   the sidebar column is too narrow to fit life-area + attachments comfortably. */

.quick-journal {
  margin-bottom: 2rem;
}

/* Green, not warm pink — pink is reserved for personal/emotional text (the
   greeting, the birthday heading), never for something clickable. Keeping
   this button green matches every other interactive element in the app, so
   it reads as a control instead of blending into the greeting above it. */
.quick-journal-toggle {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  padding: 0.7rem 1rem;
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
}

.quick-journal-toggle:hover {
  background: var(--accent-green);
  color: var(--bg);
}

.quick-journal-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: 92%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.quick-journal-window-body {
  padding: 1.5rem;
}

.quick-journal-window-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 1.3rem;
  color: var(--warm);
  margin-bottom: 1rem;
}

.quick-journal-window-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.quick-journal-window-save {
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  padding: 0.45rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
}

.quick-journal-window-save:hover {
  background: var(--accent-green);
  color: var(--bg);
}