/* The default theme, "Agott" (id: parchment, so saved choices keep working): a faint plum paper in light mode and a deep plum (#1c141c) in dark mode,
   plum accents, and a green for written points that sits opposite plum on the colour wheel. */
:root {
  --is-dark: 0;
  --bg: #f8eff8;
  --surface: #fefafe;
  --ink: #2b1d2b;
  --muted: #745d74;
  --line: #e4d7e3;
  --line-strong: #cbb6ca;
  --accent: #7d3778;
  --accent-soft: #7d37781a;
  --band: #eee2ee;
  --band-2: #f3e9f3;
  --done: #52783b;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: var(--serif);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --is-dark: 1;
    --bg: #1c141c;
    --surface: #271c27;
    --ink: #f4eef4;
    --muted: #c3b3c3;
    --line: #332733;
    --line-strong: #584658;
    --accent: #ebb1e6;
    --accent-soft: #ebb1e622;
    --band: #140c14;
    --band-2: #170e17;
    --done: #addf92;
    --char-l: 72%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --is-dark: 1;
  --bg: #1c141c;
  --surface: #271c27;
  --ink: #f4eef4;
  --muted: #c3b3c3;
  --line: #332733;
  --line-strong: #584658;
  --accent: #ebb1e6;
  --accent-soft: #ebb1e622;
  --band: #140c14;
  --band-2: #170e17;
  --done: #addf92;
  --char-l: 72%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: calc(14px * var(--fs))/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted);
}
.icon-btn:hover { background: var(--accent-soft); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 8px;
  padding: 6px 12px;
}
.btn:hover { border-color: var(--accent); }
/* Main buttons. A theme can give them their own fill (--accent-fill), edge and text colour when its
   accent is too light to fill a button on a light page (Qifrey's light mode does this). */
.btn.primary { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill-edge, var(--accent-fill, var(--accent))); color: var(--on-accent, var(--bg)); }

/* ---- timeline list (shared) ---- */
.tl-empty { color: var(--muted); font-style: italic; font-family: var(--serif); padding: 8px 2px; }
.tl-list { list-style: none; margin: 0; padding: 4px 0 4px 22px; position: relative; }
.tl-list::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line-strong); border-radius: 2px;
}
.tl-section {
  margin: 14px 0 6px -22px; padding-left: 0;
  font-family: var(--serif); font-style: italic; color: var(--muted); font-size: calc(14px * var(--fs));
}
.tl-section span { background: var(--bg); padding-right: 8px; position: relative; }
.tl-section:first-child { margin-top: 0; }
.tl-event { position: relative; padding: 4px 0 12px; }
.tl-event::before {
  content: ""; position: absolute; left: -20px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 0 3px var(--bg);
}
.tl-event.major::before { width: 14px; height: 14px; left: -22px; top: 6px; }
.tl-event.major .tl-what { font-weight: 600; }
/* Major beats sit on a faint yellow highlight (--major-bg, set per theme in appearance.css),
   with a soft yellow edge so it holds its shape on tinted backgrounds. The star, bold text
   and bigger dot still mark it too, so it never relies on colour alone.
   The negative margin keeps the text lined up with the other events. */
.tl-event.major {
  margin: 2px 0 8px -8px; padding: 5px 9px 7px 7px; border-radius: 8px;
  background: var(--major-bg, color-mix(in srgb, var(--dot) 13%, transparent));
  border: 1px solid color-mix(in srgb, var(--major-edge, transparent) 60%, transparent);
}
.tl-event.major::before { left: -15px; top: 7px; }
/* On the yellow, the small "when" label keeps its character's colour but is blended toward the
   text colour, so it stays readable (at least 4.5:1) in every theme. */
.tl-event.major .tl-when { color: color-mix(in oklch, var(--dot) 55%, var(--ink)); }
.tl-event.major .tl-chip { color: color-mix(in oklch, var(--c) 50%, var(--ink)); }
.tl-when {
  font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dot);
}
.tl-what { font-family: var(--serif); font-size: calc(15px * var(--fs)); line-height: 1.35; }