/* ==========================================================================
   Timeline — styles.css
   All visual styling for the app. Organized top-to-bottom in the order
   things appear on screen: page header, filters, chapters/events, the
   inline edit form, the manage-labels modal, then accessibility rules
   that apply across all of the above.
   ========================================================================== */

/* --- Design tokens & reset ---------------------------------------------- */
:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f4f2ed;
  --border: #e2ded4;
  --border-strong: #cfc9ba;
  --text-primary: #2c2c2a;
  --text-secondary: #5f5e5a;
  --text-muted: #888780;
  --radius: 8px;
}
* { box-sizing: border-box; }

/* --- Page layout & header -------------------------------------------------
   body is a flex column at least one full screen tall (min-height, not
   height — unlike the homepage, Timeline's page IS allowed to scroll as
   a whole once there's enough content, this just controls the footer).
   .page-content (everything except the footer) grows to fill any leftover
   space, which pushes the footer down to the bottom of the screen when
   there isn't much content yet. Once there's enough content to fill the
   screen on its own, .page-content simply stops growing and the footer
   sits right after it and scrolls normally, like any other page. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2.5rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-content { flex: 1 0 auto; }
.page-header { margin: 0 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Site name, same small quiet label used at the top of the homepage —
   sits on the same row as the toolbar buttons, above the title. It's a
   link back to the homepage, styled to look like plain text until you
   hover it (an underline appears), rather than a typical blue link. */
.letterhead {
  font-size: 12px; color: var(--text-muted); margin: 0;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.letterhead:hover { border-bottom-color: var(--text-muted); }
h1 {
  font-size: 22px; font-weight: 500; margin: 0 0 4px; outline: none; cursor: text;
  border-bottom: 1px solid transparent; display: inline-block;
}
h1:hover { border-bottom-color: var(--border-strong); }
h1:focus { border-bottom-color: var(--text-secondary); }
.subtitle { font-size: 13px; color: var(--text-muted); margin: 0 0 1.25rem; }
.divider { border: none; border-top: 0.5px solid var(--border); margin: 0 0 1.5rem; }

/* --- Toolbar buttons ------------------------------------------------------ */
.toolbar {
  display: flex; gap: 4px; flex-shrink: 0;
}
button {
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 6px;
  border: 0.5px solid var(--border-strong); background: var(--surface);
  color: var(--text-primary); cursor: pointer;
}
button:hover { background: var(--surface-2); }
button.primary { background: #2c2c2a; color: #fff; border-color: #2c2c2a; }
button.primary:hover { background: #444441; }

/* --- Theme filters --------------------------------------------------------- */
.filters-header { margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.filters-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; }
.filters-subtitle { font-size: 12px; color: var(--text-muted); margin: 0; }
#filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2rem; }
.filter-chip {
  font-size: 12px; padding: 4px 10px 4px 8px; display: inline-flex; align-items: center;
  gap: 6px; border-radius: 6px; background: var(--surface); cursor: pointer;
}
.manage-tag-btn {
  width: 24px; height: 24px; padding: 0; border: none; background: none; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; font-size: 14px;
}
.manage-tag-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* Empty "no labels yet" state — same size as a real tag chip (.filter-chip
   above), but with the quick-add row's tinted background and no border
   instead of a plain white chip, and a "+" instead of a color dot, so it
   clearly reads as "add one" rather than an existing tag. Still just
   opens the manage-labels popup on click. */
.filters-empty {
  background: var(--surface-2);
  border: none;
}
.filters-empty:hover { background: #ede9df; }
.filters-empty-plus { color: var(--text-muted); font-size: 12px; line-height: 1; flex-shrink: 0; }
.filters-empty-text { color: var(--text-muted); } /* matches the "Add an event" placeholder color exactly */

/* --- Chapters & drag-and-drop indicators ----------------------------------- */
.chapter-block { margin-bottom: 2.25rem; }
.chapter-header {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  cursor: pointer; margin-bottom: 10px;
  margin-left: -24px; padding-left: 24px;
}
.chapter-header-text { flex: 1; }
.chapter-header .name {
  font-size: 17px; font-weight: 600; color: var(--text-primary);
  border-bottom: 1px solid transparent; outline: none; cursor: text;
}
.chapter-header .name:hover { border-bottom-color: var(--border-strong); }
.chapter-header .name:focus { border-bottom-color: var(--text-secondary); }
.chapter-header .name:empty::before { content: attr(data-placeholder); color: var(--text-muted); font-weight: 500; }
.chapter-header .range {
  font-size: 12px; color: var(--text-muted); margin-left: 9px;
  border-bottom: 1px solid transparent; outline: none; cursor: text;
}
.chapter-header .range:hover { border-bottom-color: var(--border-strong); }
.chapter-header .range:focus { border-bottom-color: var(--text-secondary); }
.chapter-header .range:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.chapter-actions { display: flex; gap: 4px; flex-shrink: 0; visibility: hidden; }
.chapter-header:hover .chapter-actions { visibility: visible; }

.chapter-body { padding-left: 15px; border-left: 1px solid var(--border); }

.drag-handle {
  position: absolute; top: 50%; transform: translateY(-50%); width: 16px;
  visibility: hidden; cursor: grab; color: var(--text-muted); font-size: 13px;
  text-align: center; user-select: none;
}
.chapter-header .drag-handle { left: 4px; }
.event-row .drag-handle { left: 8px; }
.chapter-header:hover .drag-handle, .event-row:hover .drag-handle { visibility: visible; }
.drag-handle:active { cursor: grabbing; }
.dragging { opacity: 0.4; }
.drag-over-before { box-shadow: inset 0 2px 0 0 var(--text-primary); }
.drag-over-after { box-shadow: inset 0 -2px 0 0 var(--text-primary); }
.filter-chip.drag-over-before { box-shadow: inset 2px 0 0 0 var(--text-primary); }
.filter-chip.drag-over-after { box-shadow: inset -2px 0 0 0 var(--text-primary); }

/* --- Quick-add row ---------------------------------------------------------- */
.quick-add-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 8px;
  background: var(--surface-2); border-radius: 6px; margin-top: 4px;
}
.quick-add-row:focus-within { background: #ede9df; }
.quick-add-plus { width: 16px; text-align: center; color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.quick-add-input {
  flex: 1; border: none; background: none; font-size: 14px; font-family: inherit;
  padding: 3px 0; color: var(--text-primary);
}
.quick-add-input:focus { outline: none; }
.quick-add-input::placeholder { color: var(--text-muted); }

/* --- Tag autocomplete dropdown ---------------------------------------------- */
.tag-suggest-dropdown {
  display: none; position: absolute; top: 100%; left: 22px; right: 0; margin-top: 3px;
  background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); max-height: 168px; overflow-y: auto; z-index: 8;
}
.tag-suggest-dropdown.open { display: block; }
.tag-suggest-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 12px;
  color: var(--text-primary); cursor: pointer;
}
.tag-suggest-item.active, .tag-suggest-item:hover { background: var(--surface-2); }
.tag-suggest-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* --- Event rows -------------------------------------------------------------- */
.event-row {
  position: relative;
  padding: 6px 12px 6px 32px; border-bottom: 0.5px solid var(--border); cursor: pointer;
}
.event-row:last-of-type { border-bottom: none; }
.event-row:hover { background: var(--surface-2); }
.event-top { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; }
.event-title { font-size: 14px; font-weight: 400; color: var(--text-primary); min-width: 0; overflow-wrap: break-word; }
.event-top-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 100px; }
.event-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; margin-right: 100px; }
.row-actions {
  position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px;
  visibility: hidden; background: var(--surface-2); border-radius: 5px;
}
.event-row:hover .row-actions { visibility: visible; }
.icon-btn {
  width: 24px; height: 24px; padding: 0; border-radius: 5px; border: none;
  background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn.danger:hover { color: #a32d2d; }

.event-description {
  font-size: 13px; color: var(--text-secondary); margin-top: 9px; padding-top: 9px;
  border-top: 0.5px dashed var(--border-strong); white-space: pre-wrap; margin-right: 100px;
}
.event-description.empty { color: var(--text-muted); font-style: italic; }

/* --- Inline edit form ---------------------------------------------------------- */
.event-row.editing { cursor: default; background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 12px; }
.event-row.editing:hover { background: var(--surface); }
.inline-input {
  width: 100%; padding: 7px 9px; font-size: 13px; border: 0.5px solid var(--border-strong);
  border-radius: 6px; font-family: inherit; background: var(--surface); margin-bottom: 8px;
}
textarea.inline-input { min-height: 56px; resize: vertical; line-height: 1.4; }
.inline-row-2 { display: flex; gap: 8px; margin-bottom: 8px; }
.inline-row-2 .inline-date { flex: 1.2; margin-bottom: 0; }
.inline-row-2 .inline-chapter { flex: 1; margin-bottom: 0; padding: 7px 9px; font-size: 13px; border: 0.5px solid var(--border-strong); border-radius: 6px; font-family: inherit; background: var(--surface); }
.inline-ongoing { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.inline-ongoing input { margin: 0; }
.inline-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }

.empty-note { font-size: 13px; color: var(--text-muted); padding: 4px 0 4px 4px; }
#timeline { padding-bottom: 28px; }

/* --- Manage labels modal --------------------------------------------------------- */
#manage-tags-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  align-items: center; justify-content: center; z-index: 10;
}
#manage-tags-modal {
  position: relative;
  background: var(--surface); border-radius: 12px; padding: 1.5rem; width: 92%;
  max-width: 420px; max-height: 85vh; overflow-y: auto;
}
#manage-tags-modal h2 { font-size: 16px; font-weight: 500; margin: 0 0 1rem; }
.modal-close-btn {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; padding: 0;
  border: none; background: none; border-radius: 5px; color: var(--text-muted);
  font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal-close-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-picker .tag-pill-choice {
  font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px;
  cursor: pointer; user-select: none; line-height: 1.4;
}

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.5rem; }
.swatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 8px 6px; margin-top: 6px; justify-items: center;
}
.swatch {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
}
.swatch.selected { border-color: var(--text-primary); }

.tag-manage-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.tag-manage-row:last-child { border-bottom: none; }
.tag-color-dot { width: 20px; height: 20px; border-radius: 50%; border: 0.5px solid var(--border-strong); padding: 0; cursor: pointer; flex-shrink: 0; }
.tag-manage-row input[type=text] { flex: 1; padding: 6px 9px; font-size: 13px; border: 0.5px solid var(--border-strong); border-radius: 6px; font-family: inherit; background: var(--surface); }
.tag-manage-swatches {
  display: none; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  gap: 7px 5px; margin: 8px 32px 8px 28px; justify-items: center;
}
.tag-manage-swatches.open { display: grid; }
.tag-manage-swatches .swatch { width: 18px; height: 18px; }
.swatch-custom {
  display: flex; align-items: center; justify-content: center;
  background: none; border-radius: 5px;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
}
.swatch-custom:hover { background: var(--surface-2); color: var(--text-primary); }

/* --- Footer -------------------------------------------------------------------
   Same footer as the homepage, but positioned differently: this one sits
   at the bottom of the screen when there's only a little content (a
   fresh, empty timeline), and simply scrolls along at the end of the
   page once there's enough content to fill the screen on its own — never
   fixed in place, so it can't ever sit on top of content. See the
   body/.page-content comment near the top of this file for how. */
footer {
  margin-top: 3.5rem;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0; /* stays full-size; .page-content is the one that grows/shrinks */
}
footer a {
  /* Browsers set their own blue link color directly on <a> elements,
     which wins over the color inherited from footer above — so it has
     to be overridden explicitly here, not just set on the parent. */
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
footer a:hover { border-bottom-color: var(--text-muted); }
footer p { margin: 0; }

/* --- Hidden helper elements -------------------------------------------------------- */
#file-input { display: none; }

/* ==========================================================================
   Accessibility & touch devices
   Everything above assumes a mouse (row actions and drag handles only
   appear on :hover). Touch screens have no hover, so this section makes
   those same controls visible by default on touch/coarse-pointer devices,
   with a bit more tap target padding — without changing how anything
   looks or behaves for mouse/trackpad users.
   ========================================================================== */
@media (hover: none) {
  .chapter-actions,
  .drag-handle,
  .row-actions {
    visibility: visible;
  }
  .icon-btn,
  .manage-tag-btn,
  .modal-close-btn {
    width: 44px;
    height: 44px;
  }
  .tag-color-dot {
    width: 32px;
    height: 32px;
  }
}

/* Respect the OS-level "reduce motion" setting for anyone who has it on. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}