:root {
  --ink: #2b241c;
  --paper: #fdfaf4;
  --accent: #a8442f;
  --line: #ddd3c2;
  --muted: #7a7266;
  --surface: #ffffff;
  font-family: Georgia, "Iowan Old Style", serif;
}

/* No explicit choice stored -> follow the OS/browser preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece4d8;
    --paper: #201b16;
    --accent: #c96b4a;
    --line: #4a4038;
    --muted: #b3a596;
    --surface: #2a241e;
  }
}

/* Explicit choice (via the toggle) always wins over system preference. */
:root[data-theme="dark"] {
  --ink: #ece4d8;
  --paper: #201b16;
  --accent: #c96b4a;
  --line: #4a4038;
  --muted: #b3a596;
  --surface: #2a241e;
}

/* Bootstrap (loaded via CDN on pages that use it) reads these variables for
   its own base styles, so this is the one place it needs to be told about
   the site's palette/typeface — everything else below re-points individual
   Bootstrap *component* variables (--bs-btn-*, list-group, form-control,
   etc.) at the palette directly, since Bootstrap's compiled CSS bakes its
   default blue into those rather than deriving them from --bs-primary. */
:root {
  --bs-body-font-family: Georgia, "Iowan Old Style", serif;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
  --bs-primary: var(--accent);
}

.navbar {
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}
.navbar-brand { color: var(--ink); }
.navbar-brand:hover { color: var(--ink); }
.navbar .nav-link { color: var(--accent); font-weight: bold; }
.navbar .nav-link:hover, .navbar .nav-link:focus { opacity: 0.8; }
.navbar-toggler { color: var(--ink); border-color: var(--line); }
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
/* currentColor inside an SVG referenced via url() in background-image does
   NOT resolve against the element's CSS color (that trick only works for
   inline SVG or mask-image) — it renders black regardless of theme. So the
   icon color is baked into the data URI directly, once per theme value,
   same as --ink itself is duplicated below rather than derived. */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232b241c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ece4d8' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}
:root[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ece4d8' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-primary, .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-bg: transparent; }
.btn-primary:hover, .btn-primary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus { filter: brightness(0.92); }
.btn-primary:focus, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}

.form-control, .form-select, .input-group-text {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}

.list-group-item { background: var(--paper); color: var(--ink); border-color: var(--line); }

* { box-sizing: border-box; }
/* Several component rules below set `display` directly on `button`/`.btn`
   etc., which (being author CSS) outranks the browser's default
   `[hidden] { display: none }` regardless of selector specificity — so a
   hidden button/element would still render. Force it here instead. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}
#theme-toggle svg { width: 18px; height: 18px; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

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

/* Bootstrap's headings default to a lighter weight than the browser's UA
   bold — keep the site's bolder serif look now that bootstrap.css is loaded
   on every page. */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

.form-label { font-weight: bold; }

.favorites-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.favorites-filter input[type=checkbox] { margin: 0; accent-color: var(--accent); }
.favorites-filter:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.favorites-filter label { margin: 0; font-weight: bold; cursor: pointer; }

.recipe-list { list-style: none; padding: 0; margin: 0; }
.recipe-list .list-group-item { min-height: 88px; }
.recipe-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.recipe-thumb-placeholder { background: var(--surface); border: 1px solid var(--line); }
.recipe-content { flex: 1 1 auto; min-width: 0; }
.recipe-list a.title { font-size: 1.15rem; font-weight: bold; text-decoration: none; display: block; }
.recipe-list .meta { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }
.recipe-list .tags { font-size: 0.85rem; color: var(--accent); margin-top: 0.2rem; }

.empty-state { color: var(--muted); padding: 2rem 0; text-align: center; }

.favorite-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.favorite-btn:hover { opacity: 0.7; }
.favorite-badge { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }
/* Right-aligned, vertically centered by the row's own flex layout
   (.list-group-item is display:flex; align-items:center). */
.recipe-list .favorite-btn, .recipe-list .favorite-badge { font-size: 1.4rem; }
.recipe-title-row { display: flex; align-items: center; gap: 0.6rem; }
.recipe-title-row .favorite-btn, .recipe-title-row .favorite-badge { font-size: 1.6rem; top: 0.22em; position: relative; }

.recipe-view h2 { font-size: 1.8rem; margin-bottom: 0.2rem; }
.recipe-photo { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 6px; margin: 0.75rem 0; }
.photo-preview { display: block; max-width: 240px; max-height: 240px; object-fit: cover; border-radius: 6px; margin: 0.5rem 0; }
.recipe-view .description { color: var(--muted); font-style: italic; margin-bottom: 1rem; }
.recipe-meta-row { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1rem 0; color: var(--muted); }
.recipe-meta-row div strong { color: var(--ink); display: block; }
.recipe-view h3 { border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; margin-top: 1.5rem; }
.recipe-view ul, .recipe-view ol { padding-left: 1.4rem; }
.recipe-view li { margin-bottom: 0.4rem; }

.recipe-notes { margin-top: 2rem; }
.notes-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.notes-list li { border-bottom: 1px solid var(--line); padding: 0.75rem 0; }
.notes-list .note-meta { color: var(--muted); font-size: 0.8rem; }
.notes-list .note-text { margin: 0.25rem 0 0; white-space: pre-wrap; }
.note-delete-btn { margin-top: 0.4rem; }

.shopping-category { margin-bottom: 1.5rem; break-inside: avoid; }
.shopping-category h3 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}
.shopping-category ul { list-style: none; padding: 0; margin: 0; }
.shopping-category li { padding: 0.3rem 0; }
.shopping-category li label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem; cursor: pointer; font-weight: normal; margin: 0; }
.shopping-category li.checked span { text-decoration: line-through; color: var(--muted); }
.shopping-item-source { color: var(--muted); font-size: 0.85rem; font-style: italic; }

table.planner {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
table.planner th, table.planner td {
  border: 1px solid var(--line);
  padding: 0.5rem;
  vertical-align: top;
  text-align: left;
}
table.planner th { background: var(--line); }
table.planner td.meal-cell { min-width: 130px; height: 70px; }
table.planner .slot-recipe { font-weight: bold; }
table.planner .slot-recipe a { color: var(--ink); text-decoration: none; }
table.planner .slot-edit-btn { margin-top: 0.35rem; }
table.planner td.meal-cell.made .slot-recipe,
table.planner td.meal-cell.made > div {
  text-decoration: line-through;
  color: var(--muted);
}

.made-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  cursor: pointer;
}
table.planner .made-toggle { margin-top: 0.5rem; }

.planner-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.planner-controls .week-label { font-weight: bold; }

.misc-section { margin-top: 2rem; }
.misc-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.misc-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.misc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
}
.misc-list li .made-toggle { margin: 0; }
.misc-list li.made span { text-decoration: line-through; color: var(--muted); }
.misc-delete-btn { flex-shrink: 0; }

.modal-content { background: var(--paper); color: var(--ink); border-color: var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 2rem 0; }
.feedback-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.dialog-status { color: var(--muted); font-size: 0.85rem; margin: 0.75rem 0 0; }

@media print {
  /* Force the light palette on every var(--...)-based color, not just body's
     own — otherwise anything styled via --muted/--ink/--line/--accent (note
     timestamps, the recipe description, table borders, etc.) keeps printing
     with dark-mode values when dark mode is active. !important is needed to
     beat :root[data-theme="dark"]'s higher specificity. */
  :root {
    --ink: #2b241c !important;
    --paper: #fdfaf4 !important;
    --accent: #a8442f !important;
    --line: #ddd3c2 !important;
    --muted: #7a7266 !important;
    --surface: #ffffff !important;
  }
  .no-print { display: none !important; }
  body { background: white; color: #2b241c; }
  main { max-width: 100%; padding: 0; }
  a { color: inherit; text-decoration: none; }
  table.planner th { background: white; }
}