/* Olytis · Meditation journal: the "Write what came" button, the entry box and the journal list.
   Colours come from each page family's own names, which every theme (rose, dark, garden, egypt, agora) already re-maps:
   Chamber (--text, --gold-bright, --r-card …) and the plain pages (--text, --heading, --panel, --btn …). Literal values are fallbacks only.
   Sized for easy reading: 19-21 px text, 52-60 px tall buttons. Link this sheet BEFORE /assets/olytis-themes.css. */
html[data-sec=chamber] {
  --mj-ink: var(--text, #e4d6bc); --mj-muted: var(--text-muted, #a99f8b); --mj-head: var(--gold-bright, #d4b84a); --mj-trim: var(--gold, #b8962e);
  --mj-line: var(--border, rgba(184,150,46,.42)); --mj-panel: var(--r-card, var(--bg-chamber, #100a24)); --mj-well: var(--r-well, rgba(0,0,0,.28));
  --mj-btn: var(--gold-bright, #d4b84a); --mj-btn-fg: var(--bg-chamber, #100a24); --mj-tint: var(--glow-soft, rgba(184,150,46,.12));
  --mj-font-head: var(--display, "Cinzel", Georgia, serif); --mj-font: var(--serif, "EB Garamond", Georgia, serif);
}
html:not([data-sec=chamber]) {
  --mj-ink: var(--text, #0B1A33); --mj-muted: var(--muted, #4E4A55); --mj-head: var(--heading, #8E4F53); --mj-trim: var(--gold, #7E5A2E);
  --mj-line: var(--line, rgba(158,113,60,.55)); --mj-panel: var(--panel, #FBF6EC); --mj-well: var(--well, var(--input-bg, #FFFDF8));
  --mj-btn: var(--btn, var(--heading, #8E4F53)); --mj-btn-fg: var(--btn-fg, #FFFFFF); --mj-tint: var(--tint, rgba(201,137,138,.12));
  --mj-font-head: "Cinzel", Georgia, serif; --mj-font: "EB Garamond", Georgia, serif;
}

/* the button under each meditation */
.mj-cta { margin: 1.1rem 0 0.4rem; padding: 0.95rem 1rem 0.7rem; border: 1px solid var(--mj-line); background: var(--mj-tint); text-align: center; }
.mj-cta-k { margin: 0 0 0.55rem !important; font-family: var(--mj-font) !important; font-size: 1.02rem !important; line-height: 1.45 !important; color: var(--mj-ink) !important; font-style: italic; }
.mj-write { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; max-width: 26rem; min-height: 60px; padding: 0.7rem 1.4rem;
  border: 2px solid var(--mj-btn); border-radius: 6px; background: var(--mj-btn); color: var(--mj-btn-fg); cursor: pointer;
  font-family: var(--mj-font-head); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.mj-write:hover { filter: brightness(1.07); }
.mj-write:focus-visible, .mj-btn:focus-visible, .mj-dlg :is(select, input, textarea):focus-visible, .mj-linkbtn:focus-visible { outline: 3px solid var(--mj-head); outline-offset: 3px; }
.mj-ico { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.mj-see { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 48px; margin-top: 0.35rem; padding: 0 0.3rem; font-family: var(--mj-font); font-size: 1.05rem;
  color: var(--mj-head) !important; text-decoration: underline; text-underline-offset: 3px; }
html.embed-med .mj-cta, html.embed-med .mj-toplink { display: none !important; }

/* the entry box */
.mj-dlg { width: min(42rem, calc(100vw - 1.2rem)); max-height: calc(100dvh - 1.2rem); padding: 0; border: 1px solid var(--mj-line); border-radius: 8px;
  background: var(--mj-panel); color: var(--mj-ink); box-shadow: 0 18px 60px rgba(0,0,0,.35); font-family: var(--mj-font); }
.mj-dlg::backdrop { background: rgba(8, 6, 20, 0.55); }
.mj-dlg-in { padding: 1.3rem 1.4rem 1.2rem; }
.mj-k { margin: 0 0 0.2rem; font-family: var(--mj-font-head); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mj-trim); }
.mj-h { margin: 0 0 0.9rem; font-family: var(--mj-font-head); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.05em; color: var(--mj-head); line-height: 1.2; }
.mj-meta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.mj-f { display: flex; flex-direction: column; gap: 0.25rem; font-size: 1rem; color: var(--mj-muted); }
.mj-f > span { font-family: var(--mj-font-head); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mj-trim); }
.mj-dlg select, .mj-dlg input, .mj-dlg textarea, .mj-tools select { width: 100%; min-height: 50px; padding: 0.5rem 0.65rem; border: 1px solid var(--mj-line); border-radius: 6px;
  background: var(--mj-well); color: var(--mj-ink); font: 1.1rem/1.4 var(--mj-font); }
.mj-dlg textarea { min-height: 11rem; resize: vertical; font-size: 1.22rem; line-height: 1.55; padding: 0.7rem 0.8rem; }
.mj-dlg textarea::placeholder { color: var(--mj-muted); opacity: 0.85; }
.mj-prompt { margin: 0 0 0.7rem; padding: 0.6rem 0.85rem; border-left: 3px solid var(--mj-trim); background: var(--mj-tint); font-size: 1.15rem; line-height: 1.5; font-style: italic; color: var(--mj-ink); }
.mj-pk { font-style: normal; font-family: var(--mj-font-head); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mj-trim); margin-right: 0.35rem; }
.mj-tf { margin-bottom: 0.3rem; }
.mj-need { margin: 0.4rem 0 0; font-size: 1.05rem; color: var(--mj-head); font-weight: 600; }
.mj-draft { margin: 0.4rem 0 0; font-size: 1rem; color: var(--mj-muted); font-style: italic; }
.mj-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.mj-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0.55rem 1.3rem; border: 1px solid var(--mj-line); border-radius: 6px;
  background: var(--mj-well); color: var(--mj-ink); font: 600 1.1rem/1.2 var(--mj-font); cursor: pointer; text-decoration: none; }
.mj-btn:hover { border-color: var(--mj-head); }
.mj-btn.mj-primary { background: var(--mj-btn); border-color: var(--mj-btn); color: var(--mj-btn-fg); font-family: var(--mj-font-head); letter-spacing: 0.05em; flex: 1 1 12rem; }
.mj-btn.mj-danger { background: #9B2C2C; border-color: #9B2C2C; color: #FFFFFF; }
.mj-btn.mj-small { min-height: 48px; padding: 0.4rem 1rem; font-size: 1.02rem; }
.mj-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.mj-where { margin: 0.85rem 0 0; font-size: 1rem; color: var(--mj-muted); }
.mj-grow { margin: 0.35rem 0 0; font-size: 1rem; color: var(--mj-muted); }
.mj-grow a, .mj-growp a { color: var(--mj-head); font-weight: 600; text-underline-offset: 3px; }
.mj-done { outline: none; }
.mj-done-t { font-size: 1.2rem; line-height: 1.55; margin: 0 0 0.3rem; }
.mj-btn[hidden], .mj-dlg [hidden] { display: none !important; }
@media (max-width: 560px) {
  .mj-dlg { width: calc(100vw - 0.8rem); max-height: calc(100dvh - 0.8rem); }
  .mj-dlg-in { padding: 1rem 0.95rem 1rem; }
  .mj-meta { grid-template-columns: 1fr; }
  .mj-h { font-size: 1.4rem; }
  .mj-acts .mj-btn { flex: 1 1 100%; }
}

/* the journal page list */
.mj-tools { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; align-items: flex-end; margin: 0 0 1rem; }
.mj-tools .mj-f { flex: 1 1 16rem; }
.mj-tools .mj-btn { flex: 0 0 auto; }
.mj-status { margin: 0.2rem 0 0.4rem; font-size: 1.02rem; color: var(--mj-muted); }
.mj-status.mj-warn { color: var(--mj-head); }
.mj-growp { margin: 0 0 0.4rem; font-size: 1.02rem; color: var(--mj-muted); }
.mj-hidden { margin: 0 0 0.4rem; font-size: 1rem; color: var(--mj-muted); font-style: italic; }
.mj-countline { margin: 0 0 0.6rem; font-size: 1rem; color: var(--mj-muted); }
.mj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mj-entry { padding: 1rem 1.1rem 0.85rem; border: 1px solid var(--mj-line); background: var(--mj-panel); border-radius: 6px; scroll-margin-top: calc(var(--onav-h, 64px) + 20px); }
.mj-entry.mj-flash { box-shadow: 0 0 0 3px var(--mj-head); }
.mj-e-head { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.mj-e-head time { font-family: var(--mj-font-head); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--mj-trim); }
.mj-e-med { font-size: 1.05rem; font-style: italic; color: var(--mj-muted); }
.mj-e-med a { color: var(--mj-head); }
.mj-e-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.2rem; line-height: 1.6; color: var(--mj-ink); }
.mj-e-acts, .mj-confirm { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; align-items: center; }
.mj-confirm p { flex: 1 1 100%; margin: 0; font-weight: 600; font-size: 1.08rem; color: var(--mj-ink); }
.mj-empty { font-size: 1.15rem; line-height: 1.6; padding: 1rem 0; }
.mj-linkbtn { background: none; border: 0; padding: 0; color: var(--mj-head); font: inherit; text-decoration: underline; cursor: pointer; }
@media print { .mj-tools, .mj-e-acts, .mj-growp, .mj-status { display: none !important; } }
.mj-toplink [data-mj-count]:not(:empty) { margin-left: 0.3em; }
@media (max-width: 560px) {
  .mj-tools #mjNew { order: 1; flex: 1 1 40%; }
  .mj-tools #mjExport { order: 2; flex: 1 1 40%; }
  .mj-tools .mj-f { order: 3; flex: 1 1 100%; }
  .mj-entry { padding: 0.85rem 0.85rem 0.75rem; }
  .mj-e-head time { font-size: 0.9rem; }
}

/* moon-phase journaling (v2): the Moon page, the Chamber's Moon card and the journal's Moon filter */
.mj-moonline { margin: -0.3rem 0 0.7rem; font-family: var(--mj-font-head); font-size: 1.08rem; letter-spacing: 0.04em; color: var(--mj-head); }
.mj-kinds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; }
.mj-chip { min-height: 48px; padding: 0.35rem 1rem; border: 1px solid var(--mj-line); border-radius: 999px; background: var(--mj-panel); color: var(--mj-ink);
  font-family: var(--mj-font-head); font-size: 0.98rem; letter-spacing: 0.05em; cursor: pointer; }
.mj-chip[aria-pressed="true"] { background: var(--mj-btn); border-color: var(--mj-btn); color: var(--mj-btn-fg); }
.mj-chip:focus-visible { outline: 3px solid var(--mj-head); outline-offset: 3px; }
.mj-chip-n { opacity: 0.8; font-size: 0.9em; }
.mj-entry.mj-moon { border-left: 4px solid var(--mj-trim); }
.mj-cta.mj-moon-cta { margin-top: 1rem; }
.mj-phase-li { margin-bottom: 0.7rem; }
.mj-write-sm { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; margin: 0.3rem 0 0; padding: 0.35rem 1rem; border: 1px solid var(--mj-btn);
  border-radius: 6px; background: transparent; color: var(--mj-head); font-family: var(--mj-font-head); font-size: 1rem; letter-spacing: 0.04em; cursor: pointer; }
.mj-write-sm:hover { background: var(--mj-tint); }
.mj-write-sm:focus-visible { outline: 3px solid var(--mj-head); outline-offset: 3px; }
.mj-write-sm [data-mj-count]:not(:empty) { margin-left: 0.2em; font-size: 0.9em; }