/* ═══════════════════════════════════════════════════════════════════════════
   INKWELL V2 COMPONENT CONTRACTS — canonical, loads LAST, wins every war.
   Source of truth: builds/ui-pass-2026-07/ mockups (Adam-approved).
   Rule: one component per section. When a component lives here, ALL older
   strata definitions for it are dead letters — do not patch them, patch HERE.
   Created 2026-07-02 after the spot-fix method failed (5 competing strata).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: BUTTONS — one family, four voices.
   Primary (teal solid) · Gray (quiet neutral) · Sophy (ghost coral)
   · Danger (red). Per mockup: radius 10px, Manrope 700, calm motion.
   ───────────────────────────────────────────────────────────────── */
.btn,
button.btn {
  font-family: var(--body-font) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  padding: 0.7em 1.5em !important;
  border: 1.5px solid transparent !important;
  background: var(--btn-primary) !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover {
  background: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}
.btn:disabled {
  opacity: 0.45 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Gray — ONE gray, both themes, always visible against its page */
.btn.btn-gray,
.btn-gray {
  background: var(--btn-secondary) !important;
  color: var(--font-secondary) !important;
  border: 1.5px solid var(--border-medium) !important;
}
.btn.btn-gray:hover,
.btn-gray:hover {
  background: var(--btn-secondary-hover) !important;
  color: var(--font-main) !important;
  transform: translateY(-1px);
}

/* Sophy — the mockup ghost. Coral line + coral text, fills on hover.
   Never a slab. This is her voice everywhere she acts. */
.btn.btn-sophy,
.btn-sophy {
  background: transparent !important;
  color: var(--accent-sophy) !important;
  border: 1.5px solid var(--accent-sophy) !important;
  box-shadow: none !important;
}
.btn.btn-sophy:hover,
.btn-sophy:hover {
  background: var(--accent-sophy) !important;
  color: #241512 !important;
  border-color: var(--accent-sophy) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme='dark'] .btn-sophy {
  color: var(--accent-sophy-light) !important;
  border-color: var(--accent-sophy) !important;
}
html[data-theme='dark'] .btn-sophy:hover {
  color: #241512 !important;
}

/* Danger stays red, same chassis */
.btn.btn-danger,
.btn-danger {
  background: var(--btn-danger) !important;
  color: #fff !important;
}
.btn.btn-danger:hover,
.btn-danger:hover { background: var(--btn-danger-hover) !important; }

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: TOP SWITCHER — the app's spine. Depth, not flatness.
   ───────────────────────────────────────────────────────────────── */
.app-tabs {
  display: inline-flex !important;
  gap: 0.3em !important;
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 999px !important;
  padding: 0.35em !important;
  box-shadow: inset 0 1px 3px rgba(16, 27, 25, 0.07), var(--shadow-sm) !important;
}
html[data-theme='dark'] .app-tabs {
  background: var(--bg-muted) !important;
  border-color: var(--border-light) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}
.app-tabs .tab-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  background: transparent !important;
  color: var(--font-muted) !important;
  border: none !important;
  padding: 0.6em 1.4em !important;
  border-radius: 999px !important;
  font-family: var(--body-font) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer;
  transition: all 0.22s ease !important;
  box-shadow: none !important;
}
.app-tabs .tab-button svg { width: 15px; height: 15px; }
.app-tabs .tab-button:hover {
  color: var(--font-main) !important;
  transform: none !important;
}
.app-tabs .tab-button.active {
  background: linear-gradient(160deg, var(--brand-primary), #1F565E) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(42, 105, 114, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-theme='dark'] .app-tabs .tab-button.active {
  background: linear-gradient(160deg, #2A6972, #1B454C) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: PILLS — quiet selectors, one voice. Active state must
   survive dark theme (was washing out: dark override painted all
   .grat-pill backgrounds; contract pins it).
   ───────────────────────────────────────────────────────────────── */
.grat-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45em;
  padding: 0.6em 1.25em !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--border-medium) !important;
  background: transparent !important;
  color: var(--font-secondary) !important;
  font-family: var(--body-font) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.grat-pill:hover {
  border-color: var(--brand-primary) !important;
  color: var(--font-main) !important;
}
.grat-pill.active {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme='dark'] .grat-pill.active {
  background: var(--btn-primary) !important;   /* deep teal, not washed light */
  border-color: var(--btn-primary) !important;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: SOPHY — VERBATIM PORT of mockup-a-ink-and-light.html
   (Adam-approved reference). Do not re-derive; edit the mockup, then
   re-port. Orb at 28px per Adam's sizing call.
   ───────────────────────────────────────────────────────────────── */
.sophy-row,
.sophy-block {
  background: linear-gradient(90deg, rgba(212, 148, 137, 0.14), transparent 70%) !important;
  border: 1px solid rgba(212, 148, 137, 0.25) !important;
  border-radius: 14px !important;
  padding: 1rem 1.75rem !important;
}
.sophy-row { display: flex !important; align-items: center !important; gap: 1rem !important; margin: 0.75em 0 1em !important; }
.sophy-block { margin: 0.75em 0 1.25em !important; }
.sophy-block .sophy-row {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.9em !important;
}
.sophy-orb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #E6A497, #D49489 60%, #B27568) !important;
  animation: sophyPresence 3.2s ease-in-out infinite alternate !important;
}
@keyframes sophyPresence {
  from { box-shadow: 0 0 6px 0 rgba(212, 148, 137, 0.14); }
  to   { box-shadow: 0 0 22px 4px rgba(212, 148, 137, 0.45); }
}
.sophy-row-txt { flex: 1; text-align: left; }
/* Mockup .who — coral label, exact */
.sophy-row-who,
html[data-theme='dark'] body .sophy-block .sophy-row-who {
  color: #D49489 !important;
  font-family: var(--body-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
/* Mockup .line — BONE serif italic, never teal. Max-specificity pin. */
.sophy-row-line,
html body .sophy-block .sophy-row-line,
html[data-theme='dark'] body .sophy-block .sophy-row-line {
  color: var(--font-main) !important;
  font-family: var(--serif-font) !important;
  font-style: italic !important;
  font-size: 1.02rem !important;
  line-height: 1.5;
}
/* Inputs inside her block: neutral card field, coral only on focus (mockup had
   no teal anywhere near her) */
html body .sophy-block .ai-input {
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-medium) !important;
  color: var(--font-main) !important;
  -webkit-text-fill-color: var(--font-main) !important;
  caret-color: var(--font-main) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
/* Dark: her field is WARM ink with coral-tinted stroke — the cool
   card/border tokens read teal inside her coral block (root cause of
   the 15-round war; no rogue painter, our own neutral was cool). */
html[data-theme='dark'] body .sophy-block .ai-input,
html[data-theme='dark'] body .sophy-block input#promptTopic,
html[data-theme='dark'] body .sophy-block .ai-input#promptTopic {
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #1D1917 !important;
  border: 1.5px solid rgba(212, 148, 137, 0.32) !important;
  color: var(--font-main) !important;
  -webkit-text-fill-color: var(--font-main) !important;
  caret-color: #D49489 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
html body .sophy-block .ai-input:focus,
html[data-theme='dark'] body .sophy-block .ai-input:focus,
html[data-theme='dark'] body .sophy-block input#promptTopic:focus {
  border-color: #D49489 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 148, 137, 0.18) !important;
}
html body .sophy-block input::placeholder,
html[data-theme='dark'] body .sophy-block input::placeholder {
  color: var(--font-muted) !important;
  -webkit-text-fill-color: var(--font-muted) !important;
}
html body .sophy-block label,
html[data-theme='dark'] body .sophy-block label { color: var(--font-secondary) !important; }
.sophy-check input { accent-color: #D49489; }
/* Text + placeholder ID-strength pin — app strata used .ai-input#promptTopic
   ID rules that outgun class selectors; match the weight to win forever. */
html[data-theme='dark'] body .sophy-block .ai-input#promptTopic,
html[data-theme='dark'] body .sophy-block input#promptTopic {
  color: var(--font-main) !important;
  -webkit-text-fill-color: var(--font-main) !important;
  background: #1D1917 !important;
}
html[data-theme='dark'] body .sophy-block .ai-input#promptTopic::placeholder,
html[data-theme='dark'] body .sophy-block .ai-input#promptTopic::-webkit-input-placeholder {
  color: var(--font-muted) !important;
  -webkit-text-fill-color: var(--font-muted) !important;
}
/* Sophy's coral checkbox law — both themes. The global teal checkbox rules
   (app.html ~3030/3060, dark uses brand-secondary) stop at her door. */
html body .sophy-check input[type='checkbox'],
html[data-theme='dark'] body .sophy-check input[type='checkbox'] {
  accent-color: #D49489 !important;
  border-color: rgba(212, 148, 137, 0.55) !important;
  background-color: transparent !important;
}
html body .sophy-check input[type='checkbox']:checked,
html[data-theme='dark'] body .sophy-check input[type='checkbox']:checked {
  accent-color: #D49489 !important;
  background-color: #D49489 !important;
  border-color: #D49489 !important;
}
html body .sophy-check input[type='checkbox']:hover,
html[data-theme='dark'] body .sophy-check input[type='checkbox']:hover {
  border-color: #D49489 !important;
  transform: none !important;
}
html body .sophy-check input[type='checkbox']:focus,
html[data-theme='dark'] body .sophy-check input[type='checkbox']:focus {
  outline: 2px solid rgba(212, 148, 137, 0.4) !important;
  border-color: #D49489 !important;
}
/* Her outputs share the tint */
.sophy-info,
.sophy-block .sophy-info {
  background: rgba(212, 148, 137, 0.10) !important;
  border: none !important;
  border-left: 3px solid #D49489 !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--font-main) !important;
  box-shadow: none !important;
  margin-top: 0.75em !important;
}
.sophy-info:empty { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: CARD — one surface language, app-wide (mockup .sheet).
   Light: white on lift ground, hairline stroke. Dark: raised ink-2,
   deep soft shadow. Sections SNAP into this; never invent per-surface.
   ───────────────────────────────────────────────────────────────── */
.iw-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
  padding: 1.75rem !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme='dark'] .iw-card {
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.8) !important;
}
@media (max-width: 640px) { .iw-card { padding: 1.1rem !important; } }

/* Divider voice: one hairline, generous air */
.workflow-divider {
  border: none !important;
  height: 1px !important;
  background: var(--border-light) !important;
  margin: 2.25rem 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: CALENDAR — theme-token colors, both themes.
   ───────────────────────────────────────────────────────────────── */
/* Nav row: chevrons flanking the month, one line */
.iw-cal-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5em !important;
  margin-bottom: 0.75em !important;
}
#calMonthTitle {
  font-family: var(--title-font) !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: var(--font-main) !important;
  min-width: 9.5em;
  text-align: center;
}
.iw-cal-nav-btn {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border-medium) !important;
  background: transparent !important;
  color: var(--font-secondary) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  padding: 0 0 2px 0 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}
.iw-cal-nav-btn:hover {
  border-color: var(--brand-primary) !important;
  color: var(--font-main) !important;
  transform: translateY(-1px);
}

/* The grid: no cage lines — air, discs, and one quiet ring */
#calendarContainer table.iw-cal {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}
#calendarContainer .iw-cal th {
  font-family: var(--body-font) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--font-muted) !important;
  padding: 0.4em 0 0.9em !important;
  border: none !important;
  background: none !important;
}
#calendarContainer .iw-cal td {
  padding: 0.18em 0 !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
  cursor: pointer;
}
#calendarContainer .iw-cal-day {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.35em !important;
  height: 2.35em !important;
  border-radius: 50% !important;
  font-family: var(--body-font) !important;
  font-size: 0.92rem !important;
  color: var(--font-secondary) !important;
  border: 1.5px solid transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#calendarContainer .iw-cal td:hover .iw-cal-day {
  background: var(--bg-muted) !important;
  color: var(--font-main) !important;
}
/* Entry day: solid teal disc, white number */
#calendarContainer .iw-cal-day.has-entry {
  background: #2A6972 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
#calendarContainer .iw-cal td:hover .iw-cal-day.has-entry { background: #1E8A99 !important; }
html[data-theme='dark'] #calendarContainer .iw-cal-day.has-entry { background: #2A6972 !important; }
html[data-theme='dark'] #calendarContainer .iw-cal td:hover .iw-cal-day.has-entry { background: #35818C !important; }
/* Today: thin bright ring (stacks with the disc) */
#calendarContainer .iw-cal-day.is-today { border-color: var(--brand-secondary) !important; }
/* Selected date (mobile tap): quiet ring + lift */
#calendarContainer .iw-cal td.selected .iw-cal-day {
  border-color: var(--brand-secondary) !important;
  background: var(--bg-muted) !important;
}
#calendarContainer .iw-cal td.selected .iw-cal-day.has-entry { background: #1E8A99 !important; }
@media (max-width: 640px) {
  #calendarContainer .iw-cal-day { width: 2.6em !important; height: 2.6em !important; font-size: 1rem !important; }
  #calendarContainer table.iw-cal { max-width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: FEEL CHECK — five quiet dots. A feel, never a score.
   ───────────────────────────────────────────────────────────────── */
.feel-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
  padding: 0.55em 0.9em;
  margin: 0 0 1em 0;
  background: var(--bg-muted);
  border-radius: 10px;
}
.feel-q { font-family: var(--body-font); font-size: 0.86rem; color: var(--font-secondary); }
.feel-scale { display: inline-flex; align-items: center; gap: 0.35em; }
.feel-end { font-size: 0.7rem; color: var(--font-muted); }
.feel-dot {
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--font-secondary);
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.feel-dot:hover { border-color: var(--brand-primary); }
.feel-dot.sel { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.feel-skip { font-size: 0.7rem; color: var(--font-muted); font-style: italic; margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────
   SURFACE: the writing field is WRITING — serif, generous, alive.
   Your words are the product; they should look like words, not form data.
   ───────────────────────────────────────────────────────────────── */
#journal, textarea#journal,
html[data-theme='dark'] #journal {
  font-family: var(--serif-font) !important;
  font-size: 1.06rem !important;
  line-height: 1.7 !important;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: COACH MARK — one sentence, anchored to the thing itself.
   The entire onboarding voice: quiet, pointed, dismissible.
   ───────────────────────────────────────────────────────────────── */
.coach-mark {
  position: absolute;
  z-index: 10500;
  max-width: 270px;
  background: var(--bg-card);
  color: var(--font-main);
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.45);
  padding: 0.8em 1em;
  font-family: var(--body-font);
  font-size: 0.9rem;
  line-height: 1.5;
  animation: coachIn 0.35s ease both;
}
.coach-mark button {
  display: block;
  margin-top: 0.55em;
  background: transparent;
  border: none;
  color: var(--brand-primary);
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.coach-mark button:hover { color: var(--brand-secondary); }
@keyframes coachIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: VALUES PLANNER — tap-rows for the sort/rank/choose steps.
   ───────────────────────────────────────────────────────────────── */
#plannerCard .vp-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.6em !important;
  padding: 0.5em 0.8em !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 10px !important;
  margin-bottom: 0.35em !important;
  cursor: pointer;
  background: var(--bg-card) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#plannerCard .vp-row:hover { border-color: var(--border-medium) !important; }
#plannerCard .vp-row.sel {
  border-color: var(--brand-primary) !important;
  background: var(--info-bg, rgba(95, 179, 191, 0.08)) !important;
}
#plannerCard .vp-name {
  font-family: var(--body-font) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: var(--font-main) !important;
  white-space: nowrap;
}
#plannerCard .vp-def {
  font-family: var(--body-font) !important;
  font-size: 0.8rem !important;
  color: var(--font-muted) !important;
}
#plannerCard .vp-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.5em !important;
  height: 1.5em !important;
  border-radius: 50% !important;
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  flex-shrink: 0;
}
#plannerCard .vp-row:not(.sel) .vp-rank { background: var(--bg-muted) !important; color: transparent !important; }
#plannerCard textarea, #plannerCard input[type='text'] {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-medium) !important;
  border-radius: 10px !important;
  color: var(--font-main) !important;
  padding: 0.7em 0.9em !important;
  font-family: var(--body-font) !important;
}
#plannerCard textarea:focus, #plannerCard input[type='text']:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(95, 179, 191, 0.15) !important;
  outline: none !important;
}
#plannerCard #vpVision { font-family: var(--serif-font) !important; font-size: 1rem !important; line-height: 1.6 !important; }

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: MODAL CHROME — one backdrop, one panel voice, 18 modals.
   Bespoke modals carry inline overlay/panel styles; ID lists + !important
   outrank them (same law as the calendar). Info-family fixed at source.
   ───────────────────────────────────────────────────────────────── */
#loginModal, #signupModal, #goodbyeModal, #userSettingsModal,
#deleteConfirmModal, #editEntryModal, #aboutInkwellModal,
#periodInsightsModal, #manifestDataModal, #reflectionDataModal,
#whatsNewModal, #deleteAccountModal, .onboarding-modal,
.info-modal-overlay {
  background: rgba(12, 18, 19, 0.72) !important;
  backdrop-filter: blur(4px) !important;
}

/* Panels: the card language, everywhere a box floats */
#loginModal .card-block, #signupModal .card-block,
#goodbyeModal .card-block, #userSettingsModal .card-block,
#deleteConfirmModal > div > div, #editEntryModal > div > div,
#aboutInkwellModal > div > div, #periodInsightsModal > div > div,
#manifestDataModal > div > div, #reflectionDataModal > div > div,
#whatsNewModal > div > div, #deleteAccountModal > div > div,
.onboarding-content {
  background: var(--bg-card) !important;
  color: var(--font-secondary) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 16px !important;
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme='dark'] #loginModal .card-block,
html[data-theme='dark'] #signupModal .card-block,
html[data-theme='dark'] #goodbyeModal .card-block,
html[data-theme='dark'] #userSettingsModal .card-block {
  box-shadow: 0 32px 90px -20px rgba(0, 0, 0, 0.85) !important;
}

/* Auth fields: calm in BOTH themes. Kills the inline gradient/glow/backdrop
   painters (light) and outranks any dark stratum stragglers. The 80s called;
   they can keep the glow. */
#loginModal input, #signupModal input, #userSettingsModal input,
html[data-theme='dark'] #loginModal input,
html[data-theme='dark'] #signupModal input,
html[data-theme='dark'] #userSettingsModal input {
  background: var(--bg-card) !important;
  color: var(--font-main) !important;
  border: 1.5px solid var(--border-medium) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  caret-color: var(--font-main) !important;
}
#loginModal input:focus, #signupModal input:focus, #userSettingsModal input:focus,
html[data-theme='dark'] #loginModal input:focus,
html[data-theme='dark'] #signupModal input:focus,
html[data-theme='dark'] #userSettingsModal input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(95, 179, 191, 0.15) !important;
  outline: none !important;
}
#loginModal input::placeholder, #signupModal input::placeholder,
html[data-theme='dark'] #loginModal input::placeholder,
html[data-theme='dark'] #signupModal input::placeholder {
  color: var(--font-muted) !important;
  -webkit-text-fill-color: var(--font-muted) !important;
}

/* Modal titles: the serif speaks */
#loginModal h2, #signupModal h2, #goodbyeModal h2, #userSettingsModal h2,
#deleteConfirmModal h2, #editEntryModal h2, #aboutInkwellModal h2,
#periodInsightsModal h2, #manifestDataModal h2, #reflectionDataModal h2,
#whatsNewModal h2, #deleteAccountModal h2 {
  font-family: var(--title-font) !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: MANIFEST / WISH — one method, one card. Step names are
   eyebrows, fields are calm, the runway card tracks quietly below.
   ───────────────────────────────────────────────────────────────── */
.manifest-eyebrow,
#manifestTab .wish-section h2 {
  font-family: var(--body-font) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  text-align: left !important;
  margin: 0 0 0.9em 0 !important;
}
#manifestTab .wish-section textarea {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-medium) !important;
  border-radius: 10px !important;
  color: var(--font-main) !important;
  font-family: var(--serif-font) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  padding: 0.85em 1em !important;
  box-shadow: none !important;
}
#manifestTab .wish-section textarea:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(95, 179, 191, 0.15) !important;
  outline: none !important;
}
#manifestTab .wish-timeline-select {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-medium) !important;
  border-radius: 10px !important;
  color: var(--font-main) !important;
  font-family: var(--body-font) !important;
  font-size: 0.95rem !important;
  padding: 0.5em 0.9em !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#manifestTab .wish-timeline-label { color: var(--font-secondary) !important; }
#manifestTab #wishProgressMessage { color: var(--font-muted) !important; }

/* ─────────────────────────────────────────────────────────────────
   COMPONENT: ENTRY CARD — the journal's memory, one voice everywhere.
   All three views (day click, list, search) render via
   createPastEntryCard, so this contract IS the entry design.
   ───────────────────────────────────────────────────────────────── */
.entry-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
  padding: 1.4rem 1.6rem !important;
  margin-bottom: 1.25em !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  color: var(--font-main) !important;
  transition: box-shadow 0.2s ease;
}
.entry-card:hover { box-shadow: var(--shadow-md) !important; }
html[data-theme='dark'] .entry-card,
html[data-theme='dark'] .entry-card.dark-theme-entry {
  box-shadow: 0 16px 44px -28px rgba(0, 0, 0, 0.75) !important;
}
/* Date: quiet caps eyebrow */
.entry-card .entry-date,
.entry-card .fixed-dark-date {
  font-family: var(--body-font) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--font-muted) !important;
  margin-bottom: 0.9em !important;
}
/* Your words: the serif, the brightest thing on the card */
.entry-card .entry-text {
  font-family: var(--serif-font) !important;
  font-size: 1.02rem !important;
  color: var(--font-main) !important;
  line-height: 1.7 !important;
  white-space: pre-wrap;
}
/* Toggles: quiet text links, not buttons */
.entry-card .toggle-button {
  background: transparent !important;
  border: none !important;
  color: var(--brand-primary) !important;
  font-family: var(--body-font) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 0.15em 0 !important;
  margin: 0 1em 0.4em 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}
.entry-card .toggle-button:hover {
  color: var(--brand-secondary) !important;
  text-decoration: underline;
  background: transparent !important;
}
/* Sophy's toggles speak coral (Show Prompt / Show Reflection);
   manifest toggle stays teal — that data is yours, not hers. */
.entry-card .toggle-button.sophy-toggle { color: #C96F5E !important; }
html[data-theme='dark'] .entry-card .toggle-button.sophy-toggle { color: #D49489 !important; }
.entry-card .toggle-button.sophy-toggle:hover { color: #E6A497 !important; }
/* Tucked content: neutral by default */
.entry-card .toggle-content {
  background: var(--bg-muted) !important;
  border: none !important;
  border-left: 3px solid var(--brand-primary) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 0.85em 1em !important;
  margin-bottom: 0.9em !important;
  color: var(--font-secondary) !important;
  font-size: 0.92rem !important;
}
/* Sophy-touched content wears her coral — prompt, reflection, note */
.entry-card .toggle-content.sophy-tinted,
.entry-card .entry-note.sophy-tinted {
  background: rgba(212, 148, 137, 0.08) !important;
  border: none !important;
  border-left: 3px solid #D49489 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 0.85em 1em !important;
  margin-bottom: 0.9em !important;
  color: var(--font-secondary) !important;
  font-size: 0.92rem !important;
}
/* Actions: quiet until needed; Delete warns on approach */
.entry-card .btn {
  background: transparent !important;
  color: var(--font-secondary) !important;
  border: 1.5px solid var(--border-medium) !important;
  font-size: 0.82rem !important;
  padding: 0.45em 1.1em !important;
  box-shadow: none !important;
}
.entry-card .btn:hover {
  background: var(--bg-muted) !important;
  color: var(--font-main) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: none !important;
}
.entry-card .btn-gray:hover {
  border-color: var(--btn-danger) !important;
  color: var(--btn-danger) !important;
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────
   SURFACE: dark gets quiet linen so the ink isn't a void.
   Two ultra-faint crosshatch lines — texture you feel, not see.
   ───────────────────────────────────────────────────────────────── */
html[data-theme='dark'] body {
  background-color: #111A1C !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(237, 231, 220, 0.016) 0px, rgba(237, 231, 220, 0.016) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(237, 231, 220, 0.012) 0px, rgba(237, 231, 220, 0.012) 1px, transparent 1px, transparent 3px) !important;
}