/* ============================================================
   6. Book View — an open book laid out on the page
   ============================================================ */

.book-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}

.open-book {
  --book-accent: #e9b0a8;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-top: 10px solid var(--book-accent);
  border-radius: 6px;
  box-shadow: 4px 6px 0 var(--ink);
  padding: 28px 32px 32px;
  margin-top: 8px;
}

.open-book-header {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--bg-page);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 14px 18px 16px;
  margin: -8px -4px 20px;
  text-align: center;
}
.open-book-header h1 {
  font-size: 1.6rem;
  margin: 0;
}
/* Title wrapped with prev/next arrows (e.g. Season book cycling).
   Uses the same .day-arrow buttons Today's Page uses for its date
   nav, so the two cycling UIs share the exact shape. */
.book-title-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.open-book-subtitle {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

.book-section {
  margin-bottom: 22px;
}
.book-section h2 {
  font-size: 1rem;
  margin: 0 0 14px;
  color: var(--ink);
  /* Seasonal chip for section headings inside books and week views */
  display: inline-block;
  background-color: var(--highlight);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 3px 10px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  letter-spacing: 0.03em;
}
.book-muted {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* Small action button used inside book pages */
.small-btn {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.8rem;
  background: var(--bg-page);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  margin-top: 6px;
}
.small-btn:hover { background: var(--highlight); }
.small-btn.danger:hover { background: #e9b0a8; }

/* Goals list */
.goals-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }

.season-quick-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}
.season-quick-actions .primary-btn {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--highlight, #fff2a8);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 8px 14px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.season-quick-actions .primary-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.season-quick-actions .primary-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.anchor-callout-section { margin-bottom: 18px; }
.anchor-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px dashed var(--ink);
  border-radius: 4px;
  background: var(--highlight, #fff2a8);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.anchor-callout + .anchor-callout { margin-top: 8px; }
.anchor-callout.is-holiday { background: #ffe3a8; border-style: solid; }
/* Ledger-sourced reminders use tinted backgrounds to telegraph
   direction at a glance: warm/red for outgoing bills, cool/green for
   incoming money. */
.anchor-callout--ledger-out { background: #fcdede; }
.anchor-callout--ledger-in  { background: #dff2e0; }
.anchor-row.is-holiday { background: #fff4d6; }
.anchor-callout-icon { font-size: 1.2rem; }
.anchor-callout-body { display: flex; flex-direction: column; flex: 1; }
.anchor-callout-label { font-weight: 700; font-size: 1rem; }
.anchor-callout-note { font-size: 0.85rem; opacity: 0.8; margin-top: 2px; }

.anchor-list { display: flex; flex-direction: column; gap: 8px; }
.anchor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper, #fbf7ee);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}
.anchor-row.is-past { opacity: 0.55; }
.anchor-row.is-today { background: var(--highlight, #fff2a8); }
.anchor-date {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 58px;
  letter-spacing: 0.02em;
}
.anchor-body { display: flex; flex-direction: column; flex: 1; }
.anchor-label { font-weight: 600; font-size: 0.95rem; }
.anchor-note { font-size: 0.82rem; opacity: 0.75; }
.anchor-marker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}

.domain-subsection { margin-bottom: 14px; }
.domain-subsection:last-child { margin-bottom: 0; }
.domain-subsection .today-subsection-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  opacity: 0.8;
}
/* Nested sub-headers inside a subcategory block sit tighter + smaller,
   since the subcategory header above them already draws the eye. */
.today-subsection-title--nested {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 4px 0 4px !important;
}

/* Subcategory block — the "chapter" within a book page. Each one groups
   all the goals that belong to one of the book's sections (e.g. Fresh Air
   inside Physical Health). */
.subcategory-block {
  margin: 0 0 22px;
  padding: 12px 14px 10px;
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
}
.subcategory-block:last-child { margin-bottom: 0; }
.subcategory-header {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  letter-spacing: 0.02em;
}
.subcategory-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 0 6px;
  border-bottom: 1.5px dashed var(--ink);
}
.subcategory-add {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: var(--bg-page);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  cursor: pointer;
  padding: 0;
}
.subcategory-add:hover { background: var(--highlight); }
.subcategory-add:active {
  transform: translate(1px, 1px);
  box-shadow: 0.5px 0.5px 0 var(--ink);
}

/* ==========================================================
   The Ledger — finance tracker page (balance, log, upcoming)
   ========================================================== */

.ledger-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--goal-finances);
  box-shadow: 3px 3px 0 var(--ink);
}
.ledger-balance-label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.ledger-balance-amount {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
}
.ledger-balance--neg .ledger-balance-amount { color: #a14040; }

/* Starting-balance editor: sits just below the balance card. Reads as
   a small "set your starting point" control rather than a main action. */
.ledger-starting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ledger-starting-label {
  font-family: 'Pixelify Sans', sans-serif;
  letter-spacing: 0.04em;
}
.ledger-starting-input {
  max-width: 110px;
  padding: 4px 6px;
  font-size: 0.9rem;
  text-align: right;
}

/* Quick-add form — a two-row layout: pills + amount + date on top,
   note + save on bottom. Kept dense so adding is fast. */
.ledger-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
}
.ledger-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ledger-amount-input { max-width: 120px; }
.ledger-note-input   { flex: 1; min-width: 160px; }

/* One row per ledger entry or upcoming item. */
.ledger-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ledger-row {
  /* Flex ledger-line layout: date pencil-mark on the left, direction
     arrow, note taking the middle, amount on the right in handwriting
     style. Reads left-to-right as a written entry, not a grid cell. */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--bg-page);
  font-size: 0.9rem;
}
.ledger-date {
  font-size: 0.78rem;
  opacity: 0.7;
  min-width: 48px;
  flex-shrink: 0;
}
.ledger-dir {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.1rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.ledger-row--in  .ledger-dir    { color: #3a7a3a; }
.ledger-row--out .ledger-dir    { color: #a14040; }
.ledger-row--in  .ledger-amount { color: #3a7a3a; font-weight: 600; }
.ledger-row--out .ledger-amount { color: #a14040; font-weight: 600; }
.ledger-amount {
  font-family: 'Pixelify Sans', sans-serif;
  min-width: 70px;
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.ledger-note {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}
/* Upcoming reminders read as "pencilled in, not yet" — dashed border
   and softened opacity distinguish them from completed entries without
   changing the data layout. */
.ledger-row--upcoming {
  border-style: dashed;
  border-width: 1.5px;
  opacity: 0.82;
  background: rgba(253, 246, 227, 0.55);
}

/* ==========================================================
   Inventory page — four simple sections (fridge, pantry,
   freezer, spice shelf). Each is a cream-bordered block with
   an add form and a list of items.
   ========================================================== */
.inventory-section {
  margin-bottom: 22px;
  padding: 14px 16px 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}
.inventory-section h2 {
  display: inline-block;
  background-color: var(--highlight);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 3px 10px;
  margin: 0 0 12px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.inventory-add {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 248, 230, 0.55);
}
.inventory-input {
  flex: 1;
  min-width: 0;
}
.inventory-input::placeholder {
  font-style: italic;
  color: var(--ink-soft);
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* "Make your own" row inside the Human Connection optional-sections
   panel. Sits below the three optional checkboxes as a 4th block. */
.settings-row--custom-sub {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-soft, rgba(0,0,0,0.25));
}
.settings-row--custom-sub .settings-row-label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 2px;
}
.settings-row--custom-sub .settings-row-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 2px 0 8px;
}

/* Custom Human Connection subcategory editor. One row per user-defined
   section with a delete button; add form sits above the list. */
.custom-sub-add {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.custom-sub-add input { flex: 1; }
.custom-sub-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--bg-page);
  font-size: 0.95rem;
}
.custom-sub-label {
  flex: 1;
}

.inventory-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.inventory-section-head h2 {
  margin: 0;
}
.inventory-section-reorder {
  display: inline-flex;
  gap: 2px;
}
.inventory-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--ink);
  /* Thick left stripe per section — painted by the per-section rules
     below. Feels like a bin label on a shelf, not a spreadsheet row. */
  border-left: 4px solid var(--ink);
  border-radius: 4px;
  background: var(--bg-page);
  font-size: 0.95rem;
}
.inventory-row-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.inventory-row--fridge     { border-left-color: #7aa9c7; }
.inventory-row--pantry     { border-left-color: #c9a562; }
.inventory-row--freezer    { border-left-color: #a6c6da; }
.inventory-row--spiceShelf { border-left-color: #c97a5a; }
.inventory-row--produce    { border-left-color: #8bad6e; }
.inventory-row--drinks     { border-left-color: #a68bc2; }
.inventory-row--other      { border-left-color: #b0a48c; }
.inventory-row--soon {
  background: #fff3c9;          /* gentle amber — within 3 days */
}
.inventory-row--overdue {
  background: #f3d4d0;          /* muted warning rose — past date */
  color: var(--ink-soft);
}
.inventory-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-datefield {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.inventory-datefield-label { white-space: nowrap; }
.inventory-useby-input {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  padding: 2px 4px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--bg-page);
  color: var(--ink);
  max-width: 130px;
}


/* Settings view — simple stacked sections with checkbox rows. */
.settings-section {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
}
.settings-section h3 {
  margin: 0 0 4px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
}
.settings-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  opacity: 0.75;
  font-style: italic;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}
.settings-row input[type="checkbox"] { cursor: pointer; }
.settings-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: default;
}
.settings-row--stacked > select { width: 100%; max-width: 360px; cursor: pointer; }

/* Per-season color-picker editor in Settings. One block per season,
   with a row of three color swatches (bg / accent / highlight) plus
   a reset button. */
.palette-editor {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: rgba(255,255,255,0.35);
}
.palette-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.palette-editor-title {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.palette-editor-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.palette-swatch-label {
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.palette-swatch input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.goal-row.is-archived { opacity: 0.55; }
.goal-row.is-archived .goal-text { text-decoration: line-through; }

.goal-row.is-callout {
  background: var(--highlight, #fff2a8);
  border-style: dashed;
}
.goal-row.is-callout.is-holiday { background: #ffe3a8; border-style: solid; }
.goal-callout-icon { font-size: 1rem; }

.week-day-group { margin-bottom: 14px; }
.week-day-group:last-child { margin-bottom: 0; }
.week-day-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, var(--ink));
  margin: 0 0 6px;
  opacity: 0.75;
}
.goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: opacity 0.2s ease, background 0.12s ease;
}
.goal-row:hover { background: rgba(0,0,0,0.04); }
.goal-row.is-done { opacity: 0.55; }
.goal-row.is-done .goal-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
/* Tiny sparkle after a completed goal's text — a small "well done" cue. */
.goal-row.is-done .goal-text::after {
  content: ' ✦';
  color: var(--book-accent, var(--accent));
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
  animation: goal-sparkle 0.4s ease-out;
}
@keyframes goal-sparkle {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(8deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
.goal-row input[type="checkbox"] { accent-color: var(--book-accent); width: 18px; height: 18px; flex-shrink: 0; }
.goal-row .goal-text { flex: 1; }

.goal-freq {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--ink-soft);
  background: var(--bg-page);
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  padding: 1px 6px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.goal-freq[data-freq="daily"]   { background: #ffe9a8; border-color: #b38a2b; color: #6b4a10; }
.goal-freq[data-freq="weekly"]  { background: #dcefe2; border-color: #5f8a6d; color: #2e4a38; }
.goal-freq[data-freq="onetime"] { background: #e8dcf0; border-color: #7a5e9c; color: #3a2858; }

/* Small icon button used for edit/delete on rows */
.row-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  line-height: 1;
}
.row-btn:hover {
  background: var(--bg-page);
  color: var(--ink);
  border-color: var(--ink);
}
/* Soft rose hover for destructive inline actions — delete ✕ buttons.
   At rest the button looks like any other .row-btn so it doesn't
   visually shout; the warmth only appears when the user reaches for it. */
.row-btn--danger:hover {
  background: #e9b0a8;
  color: var(--ink);
  border-color: var(--ink);
}
.row-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.row-btn:disabled:hover {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
.reorder-btn {
  padding: 2px 4px;
  font-size: 0.7rem;
}

/* Entries */
.entries-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
.entry-group-title {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 4px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.entry {
  border-left: 3px solid var(--book-accent);
  padding: 4px 0 4px 12px;
  margin-bottom: 8px;
}
.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.entry-date {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0;
}
.entry-actions {
  display: flex;
  gap: 4px;
}
.entry-text {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* DIY digest inputs */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.info-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
}
.info-row label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.info-row input {
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fdf6e3;        /* solid cream — no lined bleed-through */
  color: var(--ink);
}
.section-textarea {
  width: 100%;
  min-height: 90px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fdf6e3;        /* solid cream — no lined bleed-through */
  color: var(--ink);
  resize: vertical;
  line-height: 1.5;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.book-footer {
  border-top: 1px dashed var(--ink-soft);
  padding-top: 16px;
  margin-top: 18px;
  text-align: right;
}


/* --- Season book: 13-week index --------------------------------- */
.weeks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.week-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  text-align: left;
}
.week-row:hover { transform: translateY(-1px); box-shadow: 2px 4px 0 var(--ink); }
.week-row.is-current { border-color: var(--book-accent); box-shadow: 2px 2px 0 var(--book-accent); }
.week-row-num {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.95rem;
}
.week-row-range {
  color: var(--ink);
  font-size: 0.9rem;
}
.week-row-meta {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-style: italic;
}
.week-row-marker {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.65rem;
  color: var(--ink);
  background: var(--book-accent);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 1px 6px;
}
.week-row-check {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--book-accent, var(--ink));
  margin-left: 6px;
}
.week-row.is-complete { opacity: 0.75; }
.week-row.is-complete .week-row-num { text-decoration: line-through; }


/* --- Season week view: Mon-Sun day cards ------------------------ */
/* --- Day tabs: pixel game-menu buttons -------------------------- */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  background: var(--bg-page);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 8px 6px;
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  text-align: center;
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.12),
    inset  3px  3px 0 rgba(255,255,255,0.55),
    4px 4px 0 var(--ink);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.day-card:hover {
  transform: translate(-2px, -2px);
  background: var(--highlight);
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.15),
    inset  3px  3px 0 rgba(255,255,255,0.55),
    6px 6px 0 var(--ink);
}
.day-card:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset  3px  3px 0 rgba(0,0,0,0.2),
    inset -3px -3px 0 rgba(255,255,255,0.3),
    0 0 0 var(--ink);
}
.day-card.is-today {
  background: var(--highlight);
}
.day-card.is-future {
  background: var(--bg-page);
}

.day-card-letter {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.18);
}
.day-card-date {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.day-card-pip {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--accent);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.day-card-marker {
  position: absolute;
  top: -10px;
  left: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--highlight);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.week-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}



/* ============================================================
   Study Room archives drawer — little folder tucked below the
   shelf, shows books the user has filed away.
   ============================================================ */
.archive-drawer {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 8px 14px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: 'Pixelify Sans', sans-serif;
}
.archive-drawer summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 4px 2px;
  list-style: none;
}
.archive-drawer summary::-webkit-details-marker { display: none; }
.archive-drawer[open] summary { margin-bottom: 8px; }
/* Section subheading shown inside the Inventory archive drawer — one
   per source section (Fridge, Pantry, …) so archived items still read
   as "from where?" even after they're taken off the main list. */
.archive-group-title {
  margin: 10px 0 4px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}
.archive-group-title:first-child { margin-top: 0; }

/* ============================================================
   Archive flow — pixel-art "video game menu" styling.
   - Portal button: a chunky door/card shown on the Ledger page
     when archived items exist. Tapping it loads the season-select
     screen below.
   - Archive screen: full page shell (used by Ledger archive).
   - Archive tile grid: season cards on the select screen, like
     a save-file or level-select menu.
   ============================================================ */
.archive-portal {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--bg-page);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 16px;
  font-family: 'Pixelify Sans', sans-serif;
  cursor: pointer;
  text-align: left;
}
.archive-portal:hover  { background: var(--highlight); }
.archive-portal:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.archive-portal.is-empty { opacity: 0.65; }
.archive-portal.is-empty:hover { opacity: 1; }
.archive-portal-icon   { font-size: 1.4rem; }
.archive-portal-label  { display: flex; flex-direction: column; flex-grow: 1; gap: 2px; }
.archive-portal-title  { font-size: 1.05rem; }
.archive-portal-sub    { font-size: 0.8rem; color: var(--ink-soft); }
.archive-portal-arrow  { font-size: 1.1rem; }

.archive-screen {
  max-width: 780px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}
.archive-screen .shelf-view-header { margin-bottom: 24px; }

.archive-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.archive-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 6px;
  column-gap: 10px;
  align-items: center;
  background: var(--bg-page);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px;
  font-family: 'Pixelify Sans', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.archive-tile:hover {
  background: var(--highlight);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.archive-tile:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.archive-tile-title {
  grid-column: 1 / 2;
  grid-row: 1;
  font-size: 1.1rem;
  font-weight: 700;
}
.archive-tile-count {
  grid-column: 1 / 2;
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.archive-tile-stats {
  grid-column: 1 / 2;
  grid-row: 3;
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
}
.archive-tile-in  { color: #2e7d32; }
.archive-tile-out { color: #c62828; }
.archive-tile-arrow {
  grid-column: 2;
  grid-row: 1 / 4;
  font-size: 1.6rem;
  color: var(--ink);
}

/* Little pixel badge in the top-left of each tile indicating where
   the season sits relative to now. "now" gets a highlighted background
   so the current season pops out of the grid. */
.archive-tile-era {
  position: absolute;
  top: -3px;
  left: -3px;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  padding: 1px 8px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 3px 0 4px 0;
  text-transform: uppercase;
  color: var(--ink);
}
.archive-tile { position: relative; }
.archive-tile--now .archive-tile-era    { background: var(--highlight); }
.archive-tile--future .archive-tile-era { background: #e6e3f5; }
.archive-tile--past .archive-tile-era   { background: #f0ead8; }
.archive-tile--now { box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px var(--highlight); }
.archive-tile--now:hover { box-shadow: 4px 4px 0 var(--ink), 0 0 0 3px var(--highlight); }
.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.archive-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
}
.archive-item:hover { background: var(--highlight); }
.archive-item-title {
  font-size: 0.9rem;
  color: var(--ink);
}
.archive-item-type {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================================
   Season-week progress summary — small stats grid with pastel
   progress bars, shown between "This week" and "Daily aims".
   ============================================================ */
.week-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 4px 0;
}
.progress-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink);
}
.progress-stat-num {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.4rem;
  color: var(--ink);
}
.progress-stat-den {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-left: 2px;
}
.progress-stat-label {
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-transform: lowercase;
}
.progress-bar {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--book-accent, var(--accent));
  transition: width 0.25s ease;
}

/* Weekly-aim rep dots — small filled/empty circles for counter-style
   goals (e.g. "gym 4x this week"). */
.rep-row {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.rep-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.rep-dot:hover { transform: scale(1.1); }
.rep-dot.is-filled { background: var(--book-accent, var(--accent)); }
.rep-count {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-left: 2px;
}

/* Confetti burst — appears when every daily aim is checked off.
   Pure CSS, 36 pastel squares falling with a little drift and spin. */
.confetti-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  animation: confetti-fall 1.8s ease-in var(--delay, 0s) forwards;
  opacity: 0;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -40px, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% {
    transform: translate3d(var(--drift, 0), 105vh, 0) rotate(var(--spin, 360deg));
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-host { display: none; }
}

/* Empty-state notes — a tiny icon sits left of the muted italic text
   so blank sections feel gently decorated rather than bare. */
.empty-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.empty-icon {
  font-size: 1.1rem;
  display: inline-block;
  flex-shrink: 0;
}

/* Future days can't be checked off yet — dim the whole list a touch
   so it reads as "not yet" rather than broken. */
.goals-list.is-future-locked {
  opacity: 0.55;
}
.goals-list.is-future-locked input[type="checkbox"] {
  cursor: not-allowed;
}

/* Small chip next to a goal that's been scoped to a specific week. */
.goal-week-chip {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--ink);
  background: var(--bg-page);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}


/* ============================================================
   Review candle — sits at the end of the Seasons shelf
   ------------------------------------------------------------
   The whole unit (candle + sign) is one clickable element.
   `.is-lit` on the inner candle turns on a soft pulsing glow
   when a review is pending.
   ============================================================ */

.shelf-review {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;    /* candle (1st in DOM) at bottom, sign (2nd) floats at top */
  align-items: center;
  justify-content: space-between;    /* push sign to top, candle to bottom, empty space between */
  height: 150px;                     /* match .book height so it sits on the plank */
  padding: 0 10px 0 14px;
  margin-left: auto;                 /* push to the right end of the shelf */
  margin-bottom: -2px;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}
.shelf-review:hover { transform: translateY(-3px); }
.shelf-review:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Candle body (4 stacked spans: flame, wick, body, base). */
.shelf-candle {
  position: relative;
  width: 26px;                       /* widened to fit the brass saucer */
  height: 72px;
  display: flex;
  flex-direction: column;            /* flame on top, wick, body, base on the bottom */
  align-items: center;
  zoom: 1.2;                          /* 20% up on the small candle */
}
/* Brass candlestick saucer under the candle body */
.shelf-candle-base {
  width: 26px;
  height: 6px;
  margin-top: -1px;                  /* nestles under the body's bottom border */
  background: linear-gradient(to bottom, #b48a5a 0%, #8a6638 100%);
  border: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 3px 3px 4px 4px;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.25);
}
.shelf-candle-body {
  width: 19px;
  height: 48px;
  background: var(--candle-body-bg, linear-gradient(
    to right,
    #e8d4b2 0%, #f4e6c8 45%, #d6bf99 100%
  ));
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.1);
}
.shelf-candle-wick {
  width: 2px;
  height: 5px;
  background: var(--ink);
  margin-bottom: 0;
}
.shelf-candle-flame {
  width: 10px;
  height: 14px;
  margin-bottom: 1px;
  background: radial-gradient(
    ellipse at 50% 70%,
    #fff2a8 0%, #ffcf6a 50%, #f08a3a 100%
  );
  border: 2px solid var(--ink);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  opacity: 0.65;                     /* unlit: dim flame silhouette */
}
/* Lit: warm glow + gentle flicker. */
.shelf-candle.is-lit .shelf-candle-flame {
  opacity: 1;
  box-shadow:
    0 0 6px rgba(255, 190, 100, 0.85),
    0 0 14px rgba(255, 180, 90, 0.55),
    0 0 24px rgba(255, 160, 70, 0.35);
  animation: candle-flicker 2.4s ease-in-out infinite;
}
@keyframes candle-flicker {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  25%      { transform: scale(1.06, 0.96) translateY(-0.5px); }
  50%      { transform: scale(0.95, 1.05) translateY(0.3px); }
  75%      { transform: scale(1.04, 0.98) translateY(-0.2px); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-candle.is-lit .shelf-candle-flame { animation: none; }
}

/* White pixel-button sign that floats above the candle — styled to match
   the other app buttons (.small-btn / .primary-btn). The whole .shelf-review
   unit is the actual clickable target; the sign is the visible button face. */
.shelf-review-sign {
  position: relative;
  padding: 5px 12px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: background 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
.shelf-review:hover .shelf-review-sign {
  background: var(--highlight);
}
.shelf-review:active .shelf-review-sign {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.shelf-review-sign-text {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.05em;
}

/* The Ledger on the Life Goals shelf — a book styled exactly like the
   others (same size, same base overlap), pinned to the far right of the
   shelf via margin-left: auto. A small potted plant sits to its left
   inside the same group. */
.ledger-group {
  display: flex;
  align-items: flex-end;       /* both plant + book sit on the plank */
  gap: 10px;
  margin-left: auto;           /* pin to the right edge of the shelf */
}
/* No height override — .ledger-book inherits the default .book height
   so it lines up with the other books on the shelf. */

/* ==========================================================
   Shelf vignettes — pure-CSS decorative objects on shelves
   ========================================================== */

/* --- Potted plant (between Nutrition and The Ledger) --------------- */
.shelf-plant-decor {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 70px;
  /* zoom scales margins too, so declare a pre-zoom margin that lands
     at exactly -2px physical (same overlap as .book) post-zoom. */
  margin-bottom: calc(-2px / 2.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;          /* pot sinks to the bottom */
  flex-shrink: 0;
  pointer-events: none;               /* purely decorative */
  zoom: 2.6;
}
.plant-leaves {
  position: relative;
  width: 100%;
  height: 38px;
}
.plant-leaf {
  position: absolute;
  bottom: 0;
  background: var(--plant-leaf, #7fa764);
  border: 1.5px solid var(--ink);
  border-radius: 60% 60% 30% 30% / 80% 80% 30% 30%;
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.18);
}
.plant-leaf--center {
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 12px;
  height: 36px;
  background: var(--plant-leaf-center, #8cb870);
  z-index: 3;
}
.plant-leaf--left {
  left: 2px;
  transform: rotate(-22deg);
  width: 10px;
  height: 30px;
  z-index: 1;
}
.plant-leaf--right {
  right: 2px;
  transform: rotate(22deg);
  width: 10px;
  height: 30px;
  z-index: 2;
}
.plant-pot {
  position: relative;
  width: 26px;
  height: 24px;
  background: var(--plant-pot, linear-gradient(to bottom, #c37a5a 0%, #b26b4d 60%, #8f5238 100%));
  border: 2px solid var(--ink);
  border-radius: 2px 2px 4px 4px;
  /* Taper the bottom slightly to read as a classic plant pot. */
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.12);
}
.plant-pot-rim {
  position: absolute;
  top: 0;
  left: -3px;
  right: -3px;
  height: 5px;
  background: var(--plant-pot-rim, #8f5238);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.15);
}

/* --- Hanging mirror with "look forward" nameplate. Hangs on the wall
   above the Study Room shelf, positioned 28px NW of the desk mug.
   Toggleable via Settings > Visual style > The mirror. */
.shelf-mirror {
  position: absolute;
  bottom: 155px;                        /* 28px above the top of the (zoomed) mug, lowered so the whole mirror clears the shelf above */
  right: 160px;                         /* 28px left of the mug's left edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 4;
}
.shelf-mirror:hover .mirror-glass {
  filter: brightness(1.08);              /* subtle hover cue without giving the secret away */
}
.mirror-cord {
  display: block;
  width: 2px;
  height: 20px;
  background: var(--ink);
}
.mirror-frame {
  width: 84px;
  height: 114px;
  background: linear-gradient(135deg, #d6b46a 0%, #b68a3f 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 5px;
  box-shadow:
    2px 2px 0 var(--ink),
    inset -3px -3px 0 rgba(0,0,0,0.18),
    inset 3px 3px 0 rgba(255,255,255,0.25);
}
.mirror-glass {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e4f2f6 0%, #c6dfe7 45%, #9cc4d0 100%);
  border: 1px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 4px 5px 0 rgba(255,255,255,0.4);
}
.mirror-label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 2px 12px;
  margin-top: 4px;
  box-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* --- Desk globe (end of the Study Room shelf) ---------------------- */
.shelf-globe {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 95px;
  /* Counteract zoom scaling on margin so the physical overlap stays at -2px. */
  margin-bottom: calc(-2px / 2.56);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  pointer-events: none;
  zoom: 2.56;                      /* 1.6 × 1.6 — another 60% on top of the first */
}
.globe-sphere {
  position: relative;
  width: 36px;
  height: 36px;
  background: var(--globe-water, radial-gradient(
    circle at 30% 30%,
    #bfe0ee 0%, #86bad2 55%, #4f8ba6 100%
  ));
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset -3px -2px 0 rgba(0,0,0,0.15);
  overflow: hidden;
}
.globe-meridian {
  /* Horizontal equator line across the middle of the sphere. */
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,0,0,0.2);
  transform: translateY(-50%);
  border-radius: 2px;
}
.globe-continent {
  position: absolute;
  background: var(--globe-land, #7fa764);
  border-radius: 40% 50% 35% 55% / 55% 40% 60% 35%;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
}
.globe-continent--one {
  top: 6px;
  left: 6px;
  width: 10px;
  height: 8px;
}
.globe-continent--two {
  bottom: 5px;
  right: 5px;
  width: 12px;
  height: 9px;
}
/* Brass half-ring that cradles the sphere. */
.globe-stand {
  width: 42px;
  height: 10px;
  margin-top: -4px;
  background: transparent;
  border: 2px solid var(--ink);
  border-top: none;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background-color: #c49545;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
}
.globe-base {
  width: 30px;
  height: 8px;
  background: linear-gradient(to bottom, #b38a5f 0%, #8a6239 100%);
  border: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.15);
}

/* --- Desk mug (left of the desk globe) ----------------------------- */
.shelf-mug {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 78px;                          /* 30% taller than the pen cup */
  margin-left: auto;                     /* cluster mug + globe at the right end */
  margin-bottom: calc(-2px / 1.8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
  zoom: 1.8;                            /* match the pen cup's scale */
}
.mug-steam {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.mug-steam-wisp {
  width: 2px;
  height: 8px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--ink);
  border-radius: 2px;
  opacity: 0.75;
}
.mug-steam-wisp--l { transform: translateY(2px); }
/* Scoped to .shelf-mug so these rules don't clobber the winter
   seasonal mug icon, which reuses the same class names. */
.shelf-mug .mug-body {
  position: relative;
  width: 22px;
  height: 34px;                          /* 30% taller body */
  background: var(--mug-bg, #c4887a);   /* default dusty terracotta */
  border: 2px solid var(--ink);
  border-radius: 3px 3px 6px 6px;
  box-shadow:
    inset -3px 0 0 rgba(0,0,0,0.14),
    inset 2px 0 0 rgba(255,255,255,0.18);
}
.shelf-mug .mug-handle {
  position: absolute;
  left: -8px;
  top: 7px;
  width: 8px;
  height: 17px;                          /* scaled with body height */
  border: 2px solid var(--ink);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: transparent;
}
.shelf-mug .mug-rim {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}

/* Pending badge — little number floating above the candle. */
.shelf-review-dot {
  position: absolute;
  top: -4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}

/* Zoomed shelf variant sits a little taller alongside .book--large. */
.shelf-review--large {
  height: 260px;
  padding: 0 18px 0 22px;
  margin-left: auto;                 /* push to the right end of the zoomed shelf */
}
.shelf-review--large .shelf-candle {
  width: 48px;
  height: 180px;
}
.shelf-review--large .shelf-candle-base {
  width: 48px;
  height: 12px;
}
.shelf-review--large .shelf-candle-body {
  width: 34px;
  height: 132px;
}
.shelf-review--large .shelf-candle-wick {
  width: 4px;
  height: 7px;
}
.shelf-review--large .shelf-candle-flame {
  width: 17px;
  height: 24px;
}
.shelf-review--large .shelf-review-sign {
  padding: 6px 14px;
}
.shelf-review--large .shelf-review-sign-text {
  font-size: 0.9rem;
}
.shelf-review--large .shelf-review-dot {
  top: -2px;
  right: 6px;
  min-width: 22px;
  height: 22px;
  font-size: 0.85rem;
}


/* ============================================================
   Right-end shelf cluster — wraps the pen jar and the review
   candle (or "back to today" button) so they sit together at
   the right edge of the Seasons shelf instead of fighting each
   other for `margin-left: auto`.
   ============================================================ */
.shelf-end-cap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
/* Inside the wrapper the candle no longer needs to push itself right —
   the wrapper handles that. Cancel its own auto margin so the pen jar
   sits flush against it. */
.shelf-end-cap .shelf-review {
  margin-left: 0;
}
/* Used on future-year shelves in the Seasons room, where the review
   candle is reserved for the current year — instead, quietly stamp the
   end of the shelf with that year's number. */
.shelf-year-tag {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 1px;
  padding: 4px 8px;
  border: 2px dashed var(--ink-soft);
  border-radius: 4px;
  background: var(--bg-page);
}

/* ============================================================
   Year trophy — awarded at the end of retired past-year shelves.
   Tier (bronze / silver / gold) reflects how many days the user
   showed up in the library that year. The --metal variable drives
   every colored surface so the shape stays identical across tiers.
   ============================================================ */
.year-trophy {
  --metal: #b87333;         /* bronze default, overridden below */
  --metal-dark: #8a4f1f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}
.year-trophy--bronze { --metal: #c07a3a; --metal-dark: #7a4818; }
.year-trophy--silver { --metal: #c9c9cf; --metal-dark: #7d7d85; }
.year-trophy--gold   { --metal: #e8c33f; --metal-dark: #8a6a10; }

.year-trophy-cup {
  position: relative;
  width: 72px;
  height: 96px;
}
/* Cup body: a square-ish bowl tapering slightly toward the stem. */
.year-trophy-body {
  position: absolute;
  top: 4px;
  left: 10px;
  right: 10px;
  height: 50px;
  background: var(--metal);
  border: 3px solid var(--ink);
  border-radius: 6px 6px 24px 24px;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.14), 2px 2px 0 var(--ink);
}
/* Two curved handles, one on each side. */
.year-trophy-handle {
  position: absolute;
  top: 10px;
  width: 20px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: transparent;
}
.year-trophy-handle--left  { left: -8px;  border-right: none; }
.year-trophy-handle--right { right: -8px; border-left: none; }
/* Narrow stem between the cup and the base. Stem extends all the way
   down to meet the base so there's no visible gap in between. */
.year-trophy-stem {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 30px;
  background: var(--metal);
  border: 3px solid var(--ink);
}
/* Flat rectangular base. */
.year-trophy-base {
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 14px;
  background: var(--metal-dark);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink);
}
/* Small plaque under the trophy with the retired year number. */
.year-trophy-plaque {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 2px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0.8px;
}
/* Gold tier gets a faint sparkle halo so it reads as the top prize. */
.year-trophy--gold .year-trophy-body {
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.1),
              2px 2px 0 var(--ink),
              0 0 18px rgba(232,195,63,0.6);
}


/* ============================================================
   Pen jar — tall, narrow slate-blue rectangular jar with four
   colored pens poking out at varied heights and angles.
   Sits at the right end of the Seasons shelf, next to the candle.
   ============================================================ */
.shelf-pencup {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 60px;
  margin-bottom: calc(-2px / 1.8);
  flex-shrink: 0;
  pointer-events: none;
  zoom: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.pencup-pens {
  position: relative;
  width: 24px;
  height: 24px;
}
.pen {
  position: absolute;
  bottom: -2px;
  width: 3px;
  border: 1.5px solid var(--ink);
  border-radius: 1.5px 1.5px 0 0;
}
.pen--one   { left: 3px;  height: 18px; background: #c46d6d; transform: rotate(-9deg); transform-origin: bottom; }
.pen--two   { left: 10px; height: 23px; background: #4f8ba6; transform: rotate(2deg);  transform-origin: bottom; }
.pen--three { left: 17px; height: 15px; background: #b38a2b; transform: rotate(11deg); transform-origin: bottom; }
.pen--four  { left: 7px;  height: 12px; background: #7a5e9c; transform: rotate(-2deg); transform-origin: bottom; z-index: -1; }
.pencup-mug {
  position: relative;
  width: 24px;
  height: 38px;
  background: var(--pencup-bg, linear-gradient(to bottom, #d6dee8 0%, #b9c4d2 100%));
  border: 2px solid var(--ink);
  border-radius: 2px 2px 3px 3px;
  box-shadow:
    inset -3px 0 0 rgba(0,0,0,0.14),
    inset  2px 0 0 rgba(255,255,255,0.18);
}
.pencup-mug::before {
  /* rim highlight running along the top edge */
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}


/* ==========================================================
   Mobile — covers every book surface (open-book, season book,
   week view, finance, inventory, settings) at ≤480px.
   ========================================================== */
@media (max-width: 480px) {
  /* --- Open-book shell (every book, digest, finance, inventory) --- */
  .book-view { padding: 8px 10px; }
  .open-book { padding: 16px 14px; border-top-width: 6px; }
  .open-book-header h1 { font-size: 1.35rem; }
  .book-title-group .day-arrow {
    min-width: 40px;
    min-height: 40px;
    font-size: 1.2rem;
  }
  .back-btn { padding: 6px 10px; font-size: 0.85rem; }
  .book-section { padding: 12px 14px; margin-bottom: 12px; }
  .book-section h2 { font-size: 1rem; }

  /* --- Info grid + info rows (DIY book fields, "Author / Year / ...") --- */
  .info-row {
    display: block;
  }
  .info-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
  }
  .info-row input { width: 100%; }

  /* --- Goal rows: bigger checkbox hit area --- */
  .goal-row { padding: 6px 4px; }
  .goal-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .goal-domain-chip { font-size: 0.7rem; }

  /* --- Row-btn delete/edit: slightly bigger hit area --- */
  .row-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
  }

  /* --- Inline small-btn: ensure tap size, allow wrapping --- */
  .small-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* --- Season book (13-week grid) --- */
  .season-weeks {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
  }

  /* --- Week view (7 day cards) — 4 cards across, wraps to second row --- */
  .days-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .day-card { min-height: 64px; padding: 6px 4px; }
  .day-card-letter { font-size: 0.8rem; }
  .day-card-date { font-size: 0.7rem; }

  /* --- Finance / Ledger --- */
  .ledger-balance { padding: 14px 10px; }
  .ledger-balance-amount { font-size: 1.7rem; }
  .ledger-add-row { flex-wrap: wrap; gap: 6px; }
  .ledger-amount-input { max-width: none; flex: 1; min-width: 100px; }
  .ledger-note-input { flex-basis: 100%; }
  .ledger-row {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 8px;
  }
  .ledger-date { min-width: 42px; }
  .ledger-note { order: 5; flex-basis: 100%; }

  /* --- Inventory --- */
  .inventory-add { flex-wrap: wrap; gap: 6px; }
  .inventory-input { flex-basis: 100%; }
  .inventory-add .small-btn { flex: 1; }
  .inventory-row {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 8px 6px 6px;
  }
  .inventory-name { flex-basis: 100%; }
  .inventory-datefield { font-size: 0.72rem; }
  .inventory-useby-input { max-width: 110px; }

  /* --- Settings --- */
  .settings-section { padding: 12px 14px; }
  .settings-section h3 { font-size: 1rem; }
  .settings-row { gap: 8px; flex-wrap: wrap; }
  .palette-editor-row { gap: 10px; }
  .palette-swatch {
    font-size: 0.75rem;
  }
  .palette-swatch input[type="color"] {
    width: 40px;
    height: 32px;
  }

  /* --- Entries list (domain books, reflections) --- */
  .entry { padding: 4px 0 4px 10px; }
  .entry-header { flex-wrap: wrap; row-gap: 4px; }

  /* --- Archive portals (Seasons door, etc.) --- */
  .archive-portal { padding: 10px 12px; }
  .archive-portal-title { font-size: 1rem; }
}