/* Shared theme stylesheet. Load after the page's existing CSS. */

/* ===== MOOD MODE: all page and box color roles ===== */
#site-mood-control {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9995;
  font: 15px/1.35 Arial, Helvetica, sans-serif;
}
#site-mood-control select {
  box-sizing: border-box;
  min-width: 145px;
  max-width: 100%;
  padding: 8px;
  border: 1px solid #b8b8b8;
  border-radius: 0;
  background: white;
  color: black;
  font: inherit;
  cursor: pointer;
}
#site-mood-control select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body[data-site-mood] { background-color: var(--mood-page); color: var(--mood-text); }
body[data-site-mood] a,
body[data-site-mood] a.content:link,
body[data-site-mood] a.content:visited { color: var(--mood-link); }
body[data-site-mood] a.content:hover { border-bottom-color: var(--mood-link); }
body[data-site-mood] strong,
body[data-site-mood] b { color: var(--mood-heading); }
body[data-site-mood] .today {
  background-color: var(--mood-page);
  color: var(--mood-text);
  border-color: var(--mood-border);
}
body[data-site-mood] .today a { color: var(--mood-link); }
body[data-site-mood] .quote-card,
body[data-site-mood] .quote-card.reading-preview,
body[data-site-mood] .quote-card.ghost-grid-card,
body[data-site-mood] .modal-content,
body[data-site-mood] #drag-widget {
  background-color: var(--mood-surface);
  color: var(--mood-surface-text);
  border-color: var(--mood-surface-border);
}
body[data-site-mood] .quote-card a,
body[data-site-mood] .quote-card a.content:link,
body[data-site-mood] .quote-card a.content:visited,
body[data-site-mood] .quote-card summary,
body[data-site-mood] .modal-content a,
body[data-site-mood] .modal-content .modal-close,
body[data-site-mood] #drag-widget a { color: var(--mood-surface-link); }
body[data-site-mood] .quote-card a.content:hover { border-bottom-color: var(--mood-surface-link); }
body[data-site-mood] .quote-card strong,
body[data-site-mood] .quote-card b,
body[data-site-mood] .modal-content strong,
body[data-site-mood] .modal-content b { color: var(--mood-surface-heading); }
body[data-site-mood] .modal-content .modal-title { color: var(--mood-surface-heading); }
body[data-site-mood] .ghost-grid-card input,
body[data-site-mood] .ghost-grid-card button,
body[data-site-mood] #drag-widget button {
  background-color: var(--mood-surface);
  color: var(--mood-surface-text);
  border-color: var(--mood-surface-border);
}
body[data-site-mood] .ghost-grid-card input::placeholder { color: var(--mood-surface-text); opacity: 1; }
body[data-site-mood] .ghost-grid-card input:focus-visible,
body[data-site-mood] .ghost-grid-card button:focus-visible,
body[data-site-mood] .ghost-grid-card summary:focus-visible { outline-color: var(--mood-surface-link); }
body[data-site-mood] #site-mood-control select {
  background-color: var(--mood-page);
  color: var(--mood-text);
  border-color: var(--mood-border);
}
body[data-site-mood] #audio-player {
  background-color: var(--mood-page);
  background-image: radial-gradient(var(--mood-accent) 1px, transparent 0);
  color: var(--mood-surface-text);
}
body[data-site-mood] #audio-player a { color: var(--mood-surface-link); }
body[data-site-mood] #audio-player strong { color: var(--mood-surface-heading); }
body[data-site-mood] #audio-player .audio-btn {
  background-color: var(--mood-audio-button-background, var(--mood-surface));
  color: var(--mood-audio-button-text, var(--mood-surface-text));
  border-color: var(--mood-audio-button-border, var(--mood-surface-border));
}
/* Photos and the grayscale timepiece keep their original appearance. */
@media (max-width: 700px) {
  #site-mood-control {
    position: static;
    display: flex;
    justify-content: flex-end;
    padding: 20px 16px 0;
    font-size: 14px;
  }
}

/* Empty cards preserve their grid space without showing a colored box. */
body[data-site-mood] .quote-card:has(> .quote-text:empty),
body[data-site-mood] .quote-card.grid-spacer {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Solid backing behind the audio track text masks the dotted pattern. */
body[data-site-mood] #audio-player .audio-title,
body[data-site-mood] #audio-player .audio-text {
  background-color: var(--mood-audio-text-background, var(--mood-page));
  color: var(--mood-audio-text-color, var(--mood-text));
}

/* Course of Life: keep its open layout, using page text and link roles. */
body[data-site-mood] .cv-page { background-color: var(--mood-page); color: var(--mood-text); }
body[data-site-mood] .cv-page a { color: var(--mood-link); }
body[data-site-mood] .cv-filter { color: var(--mood-text); }
body[data-site-mood] .cv-page strong,
body[data-site-mood] .cv-page b { color: var(--mood-heading); }

/* Archive of Today. */
body[data-site-mood] .today-archive { background-color: var(--mood-page); color: var(--mood-text); }
body[data-site-mood] .today-archive a { color: var(--mood-link); }
body[data-site-mood] .today-archive-title,
body[data-site-mood] .today-archive strong,
body[data-site-mood] .today-archive b { color: var(--mood-heading); }
body[data-site-mood] .today-archive-moment { border-color: var(--mood-border); }

/* Reading Log: the calendar cells use the box roles. */
body[data-site-mood] .reading-calendar { color: var(--mood-text); }
body[data-site-mood] .reading-calendar a,
body[data-site-mood] .reading-home { color: var(--mood-link); }
body[data-site-mood] .reading-calendar .reading-title { color: var(--mood-heading); }
body[data-site-mood] .reading-calendar .reading-year { color: var(--mood-text); background: transparent; }
body[data-site-mood] .reading-calendar .reading-year:hover { background-color: var(--mood-surface); color: var(--mood-surface-text); }
body[data-site-mood] .reading-calendar .modal-list { border-color: var(--mood-surface-border); }
body[data-site-mood] .reading-calendar .modal-list li {
  background-color: var(--mood-surface);
  color: var(--mood-surface-text);
  border-color: var(--mood-surface-border);
}
body[data-site-mood] .reading-calendar .modal-list li a { color: var(--mood-surface-link); }
body[data-site-mood] .reading-calendar .modal-list li strong,
body[data-site-mood] .reading-calendar .modal-list li b { color: var(--mood-surface-heading); }

/* Closed mode: inline text wrappers are created by mood-mode.js. */
body[data-site-mood="closed"] .redacted-text {
  background-color: currentColor;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}