/* Shared design system for every docs/*.html page. Refines (doesn't
   replace) the original warm parchment/maroon serif look: tighter
   spacing, a two-tier shadow scale, consistent radii, and subtle motion
   on cards/rows/buttons. Each page still links this file and keeps only
   what's genuinely unique to it (print stylesheet, heatmap grid, etc.)
   in its own small inline <style> block -- see individual pages.

   Pages that need a different reading width than the 480px default set
   `--content-width` in a tiny inline <style> block before this file, or
   directly on <body style="--content-width: 560px">. */

:root {
  --content-width: 480px;
  --accent: #7a2331;
  --accent-soft: #9c3a4d;
  --accent-dark: #5e1a26;
  --bg: #f6f1e8;
  --card: #fffdfa;
  --ink: #2a2119;
  --muted: #8a7d6a;
  --border: #e8ddc9;
  --border-soft: #f0e8d8;
  --ring: rgba(122, 35, 49, 0.14);
  --shadow-sm: 0 1px 2px rgba(42, 33, 20, 0.05), 0 4px 10px -6px rgba(42, 33, 20, 0.12);
  --shadow-md: 0 2px 4px rgba(42, 33, 20, 0.06), 0 14px 30px -10px rgba(42, 33, 20, 0.22);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Lets native form controls / scrollbars pick a matching light-or-dark
     rendering on their own, ahead of (and in addition to) the custom
     tokens below -- avoids a light-chrome flash around dark content. */
  color-scheme: light dark;
}

/* Follows the OS/browser setting, not a page toggle -- this is a
   nighttime app (Night Examen, Night Prayers are the last things you
   touch before bed) so it should already be dark by then instead of
   asking. Only the tokens that actually need to flip are redefined
   here; everything built from them (cards, buttons, inputs, the
   accordion, the heatmap) follows automatically. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #d97b8a;
    --accent-soft: #e59aa5;
    --accent-dark: #c25f70;
    --bg: #17130f;
    --card: #221c16;
    --ink: #ece4d6;
    --muted: #9b8f79;
    --border: #3a3226;
    --border-soft: #2a2419;
    --ring: rgba(217, 123, 138, 0.22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 18px 56px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Header block (photo, eyebrow, title, lede) ---------- */

.brand { text-align: center; margin-bottom: 14px; }
.brand img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent); box-shadow: var(--shadow-sm);
}
.eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft); text-align: center; margin: 12px 0 0;
}
h1 { font-size: 25px; font-weight: 400; text-align: center; margin: 6px 0 10px; letter-spacing: 0.01em; }
h2 { font-size: 19px; font-weight: 400; text-align: center; margin: 40px 0 8px; letter-spacing: 0.01em; }

.lede, .subhead, .quote {
  font-size: 12.5px; line-height: 1.6; color: var(--muted); font-style: italic;
  text-align: center; margin: 0 auto 28px; max-width: 380px;
}
.quote a {
  display: block; margin-top: 6px; color: var(--accent); font-style: normal;
  text-decoration: none; border-bottom: 1px dotted var(--accent-soft);
}

.card-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 26px 2px 10px; }

/* ---------- Card ---------- */

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 4px 20px;
  animation: fade-rise 0.35s var(--ease) both;
}
.card:empty { display: none; }
.card--tight { padding: 4px 6px; }
.card--pad { padding: 20px; }

/* ---------- Buttons ---------- */

.btn {
  font-family: Georgia, serif; font-size: 14px; border: none; border-radius: var(--radius-sm);
  padding: 10px 16px; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    transform 0.1s var(--ease), border-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -4px rgba(122, 35, 49, 0.4); }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); box-shadow: 0 8px 20px -4px rgba(122, 35, 49, 0.48); }

.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent-soft); color: var(--accent); }

.btn-ghost {
  background: transparent; color: var(--accent); border: 1.5px dashed var(--border);
  border-radius: var(--radius-md); font-size: 13px; padding: 10px 16px;
}
.btn-ghost:hover:not(:disabled) { border-color: var(--accent-soft); color: var(--accent-soft); }

.btn-pill {
  font-size: 12px; color: var(--accent); background: var(--card); border: 1px solid var(--accent-soft);
  border-radius: 20px; padding: 5px 12px;
}
.btn-pill:hover:not(:disabled) { background: var(--accent); color: #fff; }

.btn-circle {
  width: 27px; height: 27px; padding: 0; border-radius: 50%; text-align: center;
  line-height: 1; font-size: 14px; flex: none;
}
.btn-circle.filled { background: var(--accent); color: #fff; border: none; }
.btn-circle.outline { background: var(--card); color: var(--muted); border: 1px solid var(--border); font-size: 15px; }
.btn-circle.outline:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-soft); }

/* Row action buttons, shared verbatim by today.html's and history.html's
   generated rows (mark done / undo / remove task). */
button.mark {
  flex: none; font-family: Georgia, serif; font-size: 12px; color: var(--accent);
  background: var(--card); border: 1px solid var(--accent-soft); border-radius: 20px;
  padding: 5px 12px; cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
button.mark:hover:not(:disabled) { background: var(--accent); color: #fff; }
button.mark:disabled { opacity: 0.4; }
button.check {
  flex: none; width: 26px; height: 26px; text-align: center; color: #fff;
  background: var(--accent); font-size: 14px; border: none; border-radius: 50%;
  padding: 0; cursor: pointer;
}
button.delete-task {
  flex: none; width: 26px; height: 26px; text-align: center; color: var(--muted);
  font-size: 18px; line-height: 1; background: var(--card); border: 1px solid var(--border);
  border-radius: 50%; padding: 0; cursor: pointer; transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
button.delete-task:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-soft); }

/* ---------- Inputs ---------- */

input[type=time], input[type=text], input[type=date], input[type=url], select {
  font-family: Georgia, serif;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
input[type=time]:focus, input[type=text]:focus, input[type=date]:focus, input[type=url]:focus, select:focus {
  outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--ring);
}
input:disabled { background: var(--border-soft); color: var(--muted); }
select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239c3a4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
/* The caret above is a literal (non-var) SVG data URI baked to the light
   --accent-soft, since a background-image can't reference a CSS custom
   property -- without this override it'd render nearly invisible against
   a dark <select>. */
@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e59aa5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Labeled field row, used by forms with several stacked inputs
   (settings.html, tonight.html). */
.field { padding: 18px 0; border-bottom: 1px solid var(--border); }
.field:last-child, .field:last-of-type { border-bottom: none; }
.field label.name { display: block; font-size: 16px; margin-bottom: 10px; }
.field .hint { font-size: 12px; color: var(--muted); font-style: italic; margin: -6px 0 10px; }
.field input, .field select { width: 100%; }

/* ---------- Generic list row (settings.html's recurring tasks / links,
   easy to reuse anywhere else a "label + meta + action buttons" row is
   needed) ---------- */

.item-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s var(--ease);
}
.item-row:last-child { border-bottom: none; }
.item-row .info { flex: 1; min-width: 0; }
.item-row .info .label { font-size: 15px; display: block; }
.item-row .info .meta {
  font-size: 12px; color: var(--muted); display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-row .row-buttons { display: flex; gap: 6px; flex: none; }
.item-row.clickable { cursor: pointer; border-radius: var(--radius-sm); }
.item-row.clickable:hover { background: var(--border-soft); }

/* ---------- Drag-to-reorder handle (today.html/checkin.html rows, see
   assets/reorder.js) ---------- */

.drag-handle {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px; cursor: grab;
  /* Without this the browser tries to scroll the page on the same touch
     gesture reorder.js is using to drag -- the two fight each other on
     mobile without it. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.dragging { box-shadow: var(--shadow-md); background: var(--card); border-radius: var(--radius-sm); cursor: grabbing; }

/* ---------- Accordion (settings.html's General / Recurring Tasks /
   Links sections) ---------- */

.accordion {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 16px;
  animation: fade-rise 0.35s var(--ease) both;
}
.accordion:first-of-type { margin-top: 0; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 18px 20px; background: none; border: none; cursor: pointer;
  font-family: Georgia, serif; text-align: left; color: var(--ink);
}
.accordion-header .heading-text .title { font-size: 16px; display: block; }
.accordion-header .heading-text .subtitle { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.accordion-header .chevron { flex: none; color: var(--muted); font-size: 13px; transition: transform 0.25s var(--ease); }
.accordion.open .accordion-header .chevron { transform: rotate(90deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.accordion-body-inner { padding: 0 20px 20px; }

/* ---------- Status / empty-state text ---------- */

#status, .status-text { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 16px; min-height: 18px; }
#empty, .empty-text { text-align: center; font-size: 14px; color: var(--muted); padding: 24px 0; }
.row-loading { padding: 20px 0; text-align: center; font-size: 13px; color: var(--muted); }

.cf-turnstile { margin-top: 22px; display: flex; justify-content: center; }

/* ---------- Bottom nav row ---------- */

.quick-links { text-align: center; margin-top: 28px; font-size: 13px; }
.quick-links a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-soft); transition: color 0.15s var(--ease); }
.quick-links a:hover { color: var(--accent-dark); }
.quick-links .sep { color: var(--border); margin: 0 10px; }