/* Diary components for room sites (build.mjs, only when content exports DIARY). Loaded after base.css and before
   the site's theme.css, and built only from the shared theme tokens, so every diary takes its site's colours and
   fonts. A theme may set --diary-font (e.g. a handwriting face added to SITE.fontsHref) for the entry text. */

.d-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.d-entry { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .d-split, .d-entry { grid-template-columns: minmax(0, 1fr); } }

/* The written page: a panel in the site's palette, edged in its accent colour. */
.d-page {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ochre);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px) clamp(20px, 4vw, 48px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.d-page p { font-family: var(--diary-font, var(--body)); font-size: 1.08rem; line-height: 1.75; margin: 0 0 1.1em; color: var(--text); }
.d-page h2 { margin-top: 6px; }
.d-page .d-dateline { font-family: var(--display); color: var(--ochre); text-align: right; margin-bottom: 1.2em; }
.d-page .d-sign { font-family: var(--display); color: var(--ochre-soft); text-align: right; font-size: 1.3rem; margin: 0; }

/* Out-of-character box beside an entry. */
.d-box { background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--ochre); border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); position: sticky; top: 90px; }
@media (max-width: 900px) { .d-box { position: static; } }
.d-box h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.d-box h3 { margin: 16px 0 8px; font-size: 1.05rem; }
.d-box .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 18px; }
.d-box .btn-row { margin: 6px 0 10px; }

/* Archive lists (diary page and home). */
.d-archive { list-style: none; margin: 0; padding: 0; display: grid; }
.d-archive li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.d-archive a { display: grid; gap: 4px; text-decoration: none; color: var(--text); }
.d-archive time { font-family: var(--display); color: var(--ochre); font-size: .95rem; letter-spacing: .04em; }
.d-archive strong { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; }
.d-archive a:hover strong { color: var(--ochre-soft); }
.d-archive span { display: block; color: var(--muted); font-size: .95rem; margin-top: 4px; }
.d-home { max-width: 860px; margin-bottom: 18px; }
.d-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.d-years a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 700; }
.d-year { margin-bottom: 36px; scroll-margin-top: 90px; }
.d-about { scroll-margin-top: 90px; }
.d-about > h3 { margin-top: 26px; }

.d-pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; font-weight: 700; }
.d-pager a { text-decoration: none; }

/* Rival diarists (DIARY.authors): each card names its diarist; a radio filter on the archive shows one diarist's
   entries (pure CSS: li.d-a1…d-a3 follow the order of DIARY.authors, after the "every diarist" button). */
.d-archive .d-by { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.d-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.d-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-filter label { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.d-filter input:checked + label { background: var(--ochre); border-color: var(--ochre); color: var(--bg, #000); }
.d-filter input:focus-visible + label { outline: 2px solid var(--ochre-soft); outline-offset: 2px; }
.d-split:has(.d-filter input:nth-of-type(2):checked) .d-archive li:not(.d-a1),
.d-split:has(.d-filter input:nth-of-type(3):checked) .d-archive li:not(.d-a2),
.d-split:has(.d-filter input:nth-of-type(4):checked) .d-archive li:not(.d-a3) { display: none; }
.d-diarist { scroll-margin-top: 90px; }
.d-diarist + .d-diarist { margin-top: 36px; }
.d-reply { margin: 1.4em 0 0; font-weight: 700; }