/*
* The Book of Shadows — /book-of-shadows, and the "keep this" control
* wherever it appears.
*
* Loaded only on the pages that need it (see templates/layout.php), the same
* way soundbar.css and lunar-calendar.css are.
*
* Every size here is in rem against the 18px root set in main.css. Do not
* hard-code a px font-size — that is how six pages drifted apart before the
* type scale was centralised.
*/
/* ── btn variants this page needs and main.css does not have ── */
.btn-ghost {
border-color: rgba(155,126,200,0.35);
color: var(--text-soft);
}
.btn-ghost:hover { border-color: var(--purple-mid); color: var(--purple-light); }
.btn-danger { border-color: rgba(196,78,78,0.38); color: #d79a9a; }
.btn-danger::before { background: rgba(196,78,78,0.06); }
.btn-danger:hover { border-color: #b35c5c; color: #e8b4b4; box-shadow: 0 0 30px rgba(196,78,78,0.08); }
/* ── The "keep this" control ── */
.book-save {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 2rem;
}
.book-save-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, rgba(155,126,200,0.1), rgba(155,126,200,0.03));
border: 1px solid rgba(155,126,200,0.35);
border-radius: 2px;
color: var(--text-soft);
cursor: pointer;
font-family: var(--font-sans, inherit);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.65rem 1.3rem;
transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.book-save-btn:hover {
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 0 24px rgba(196,164,78,0.1);
}
.book-save-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.book-save.is-saved .book-save-btn {
border-color: rgba(196,164,78,0.5);
color: var(--gold);
}
.book-save-icon { font-size: 0.95rem; line-height: 1; }
/* The inert version shown below Coven. Reads as a note, not a dead button. */
.book-save-locked {
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
gap: 0.5rem;
}
.book-save-locked a { color: var(--gold); }
.book-save-link { font-size: 0.78rem; color: var(--text-muted); }
.book-save-link:hover { color: var(--purple-light); }
/* ── The page ── */
.book-actions {
display: flex;
gap: 0.9rem;
justify-content: center;
flex-wrap: wrap;
margin: 2.2rem 0;
}
.book-filters {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 2.5rem;
}
.book-filter {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
border: 1px solid rgba(155,126,200,0.22);
border-radius: 2px;
padding: 0.4rem 0.85rem;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
transition: border-color 0.25s, color 0.25s;
}
.book-filter:hover { border-color: var(--purple-mid); color: var(--purple-light); }
.book-filter.is-on { border-color: rgba(196,164,78,0.5); color: var(--gold); }
.book-filter-n { font-size: 0.64rem; opacity: 0.65; }
.book-empty { text-align: center; margin: 3.5rem auto; max-width: 34rem; }
.book-empty-lead {
font-family: var(--font-display, inherit);
font-size: 1.15rem;
color: var(--purple-light);
margin-bottom: 0.9rem;
}
.book-empty p { color: var(--text-soft); line-height: 1.9; }
.book-empty a { color: var(--gold); }
.book-write { padding: 2rem; margin: 0 0 2.5rem; }
.book-write-title {
font-family: var(--font-display, inherit);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--purple-light);
margin-bottom: 1.5rem;
}
.book-write-body { min-height: 16rem; line-height: 1.8; resize: vertical; }
.book-write-buttons { display: flex; gap: 0.8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.book-counter {
font-size: 0.68rem;
letter-spacing: 0.1em;
color: var(--text-dim);
text-align: right;
margin: 0.35rem 0 0;
}
/* Over the limit. The server refuses it too, and says by how much. */
.book-counter.is-over { color: #d79a9a; }
/* ── One entry ── */
.book-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.book-entry { padding: 1.6rem 1.8rem; }
.book-entry-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.book-entry-kind {
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
border: 1px solid rgba(155,126,200,0.2);
border-radius: 2px;
padding: 0.22rem 0.5rem;
white-space: nowrap;
}
.book-entry-kind-spell_own,
.book-entry-kind-event { border-color: rgba(196,164,78,0.35); color: var(--gold); }
.book-entry-title {
font-family: var(--font-display, inherit);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 0;
}
.book-entry-title a { color: var(--text-primary); }
.book-entry-title a:hover { color: var(--gold); }
.book-entry-meta {
font-size: 0.78rem;
color: var(--text-muted);
margin: 0.6rem 0 0;
}
.book-entry-body {
margin-top: 1rem;
color: var(--text-soft);
line-height: 1.9;
white-space: normal;
}
.book-entry-intention { font-style: italic; }
/* A member's note. Set apart because it is their voice, not the site's. */
.book-entry-note {
margin-top: 1.1rem;
padding: 0.9rem 1.1rem;
border-left: 2px solid rgba(196,164,78,0.4);
background: rgba(196,164,78,0.04);
color: var(--text-soft);
line-height: 1.85;
font-size: 0.95rem;
}
.book-entry-tools { margin-top: 1.2rem; }
.book-entry-tools > summary {
cursor: pointer;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
list-style: none;
}
.book-entry-tools > summary::-webkit-details-marker { display: none; }
.book-entry-tools > summary::before { content: '+ '; color: var(--gold); }
.book-entry-tools[open] > summary::before { content: '\2212 '; }
.book-entry-tools > summary:hover { color: var(--purple-light); }
.book-entry-form {
margin-top: 1.3rem;
padding-top: 1.3rem;
border-top: 1px solid rgba(155,126,200,0.12);
}
.book-entry-form .form-input { margin-bottom: 0.6rem; }
.book-entry-form .form-hint { display: block; margin-top: 0.5rem; }
.book-entry-remove { border-top-color: rgba(196,78,78,0.15); }
/* ── A member's own entries inside a lunar-calendar cell ── */
/* Kept visually distinct from the moon events: the moon is the same for
everyone, this is only theirs. */
.calendar-day.has-mine { box-shadow: inset 0 0 0 1px rgba(196,164,78,0.28); }
.calendar-day-mine {
position: absolute;
bottom: 0.22rem;
right: 0.3rem;
font-size: 0.56rem;
line-height: 1;
letter-spacing: 0;
color: var(--gold);
}
.tooltip-mine-head {
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.3rem;
}
.tooltip-mine { font-size: 0.74rem; color: var(--text-soft); line-height: 1.6; }
@media (max-width: 768px) {
.book-entry { padding: 1.3rem 1.2rem; }
.book-write { padding: 1.4rem 1.2rem; }
.book-actions .btn { width: 100%; text-align: center; }
}
/* ── A saved sigil's picture ── */
.book-entry-sigil { margin: 1.2rem 0 0; }
/* Never wider than its column, and never wider than it needs to be.
min() rather than a bare max-width so a narrow phone gets the column width
and a desktop gets the 300px cap, with one declaration instead of a
breakpoint. height:auto keeps the square aspect whatever the width lands on.
The img also carries style="max-width:100%;height:auto" inline. That is not
redundancy for its own sake: the element has intrinsic width/height
attributes, so if this stylesheet is ever missing or stale the browser
renders it at full intrinsic size and the page scrolls sideways on a phone,
which is precisely what happened on 2026-10-05 from a cached book.css. */
.book-entry-sigil img {
display: block;
width: min(300px, 100%);
max-width: 100%;
height: auto;
border: 1px solid rgba(155,126,200,0.18);
background: var(--bg-deep);
}
.book-entry-sigil figcaption {
margin-top: 0.55rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.book-entry-sigil figcaption a { color: var(--gold); }
/* ── The lunar date picker ── */
.book-date { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.book-date .form-input { flex: 0 1 12rem; margin-bottom: 0; }
.book-moon-btn {
background: none;
border: 1px solid rgba(155,126,200,0.3);
border-radius: 2px;
color: var(--text-soft);
cursor: pointer;
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.5rem 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: border-color 0.25s, color 0.25s;
}
.book-moon-btn:hover { border-color: var(--gold); color: var(--gold); }
.book-moon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The one-line answer to "what is the moon doing then", shown once a date is
set so most members never need to open the grid at all. */
.book-date-phase {
width: 100%;
margin: 0.5rem 0 0;
font-size: 0.85rem;
color: var(--text-soft);
}
.book-date-phase .is-event { color: var(--gold); }
/* Inline, not a modal: a modal over a form is fiddly on a phone and risks
disturbing text the member has already typed. */
.book-moon-panel {
width: 100%;
margin-top: 0.9rem;
padding: 1rem;
border: 1px solid rgba(155,126,200,0.18);
background: rgba(10,6,20,0.6);
}
.book-moon-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.book-moon-title {
font-family: var(--font-display, inherit);
font-size: 0.95rem;
letter-spacing: 0.08em;
color: var(--purple-light);
}
.book-moon-nav {
background: none;
border: 1px solid rgba(155,126,200,0.25);
color: var(--text-soft);
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
padding: 0.35rem 0.6rem;
border-radius: 2px;
}
.book-moon-nav:hover { border-color: var(--purple-mid); color: var(--purple-light); }
.book-moon-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
}
.book-moon-dow span {
text-align: center;
font-size: 0.56rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.book-moon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.book-moon-cell {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
background: rgba(16,10,30,0.5);
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
color: var(--text-soft);
font-family: inherit;
padding: 0;
transition: border-color 0.2s, background 0.2s;
}
.book-moon-cell:hover { border-color: var(--gold); background: rgba(196,164,78,0.07); }
.book-moon-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.book-moon-cell.is-empty { background: none; cursor: default; }
.book-moon-cell.is-empty:hover { border-color: transparent; background: none; }
.book-moon-cell.is-chosen { border-color: var(--gold); background: rgba(196,164,78,0.14); }
.book-moon-cell.is-today { box-shadow: inset 0 0 0 1px rgba(155,126,200,0.45); }
/* A real new or full moon, from moon_events rather than the computed phase. */
.book-moon-cell.is-event { background: rgba(196,164,78,0.1); }
.book-moon-cell.is-petition { background: rgba(155,126,200,0.1); }
.book-moon-day { font-size: 0.68rem; line-height: 1; }
.book-moon-phase { font-size: 0.72rem; line-height: 1; }
.book-moon-key {
margin-top: 0.7rem;
font-size: 0.66rem;
color: var(--text-dim);
line-height: 1.7;
}
@media (max-width: 768px) {
.book-date .form-input { flex: 1 1 100%; }
.book-moon-phase { font-size: 0.62rem; }
}
/* Shown only when the sigil-image budget is most of the way used. */
.book-budget {
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
margin: 0 0 1.5rem;
}
/* ── Saving a sigil to a phone's photos ── */
/* The press-and-hold panel. Route 3 in book-sigil-save.js, and the floor that
always works: a long press on a real same-origin ![]()
offers "Add to
Photos" where a