:root { color-scheme: light; font-family: var(--skin-font, system-ui, sans-serif); color: var(--skin-text, #183b38); background: var(--skin-background, #f5f3ed); }
body { margin: 0; }
main { max-width: 48rem; margin: auto; padding: clamp(1.5rem, 6vw, 5rem); }
.eyebrow { letter-spacing: .08em; font-size: .85rem; }
h1 { font-size: clamp(2rem, 7vw, 4rem); line-height: 1.15; margin: 2rem 0; }
p { line-height: 1.65; }
section { margin-top: 3rem; padding: 1.5rem; border: 1px solid #acbdb5; border-radius: 1rem; background: var(--skin-surface, #ffffff); }
h2 { font-size: 1.25rem; margin-top: 0; }
[hidden] { display: none !important; }
label { display: block; margin: 1rem 0; }
input, textarea, button { font: inherit; box-sizing: border-box; }
input, textarea { width: 100%; padding: .75rem; border: 1px solid #688c80; border-radius: .4rem; display: block; margin-top: .4rem; }
button { padding: .75rem 1rem; background: var(--skin-primary, #1c5a4e); border: 1px solid #1c5a4e; color: var(--skin-primary_text, #ffffff); border-radius: .5rem; cursor: pointer; }
button.secondary { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #b36c18; outline-offset: 3px; }
.actions, header { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
header { justify-content: space-between; }
article { margin: .75rem 0; }
article button { width: 100%; text-align: left; }
.small { font-size: .85rem; }
#notice { min-height: 1.7rem; }
dialog { max-width: 36rem; width: calc(100% - 3rem); border: 1px solid #688c80; border-radius: 1rem; padding: 1.5rem; box-sizing: border-box; }
dialog::backdrop { background: rgb(0 0 0 / 82%); }
dialog form { display: flex; flex-direction: column; gap: .9rem; width: 100%; margin: 0; }
dialog form label { margin: .25rem 0 -.4rem; }
dialog form input, dialog form textarea, dialog form select { margin: 0; min-width: 0; font-size: max(1rem, 16px); }
dialog textarea { min-height: 8rem; resize: vertical; }
dialog #module-commands { display: flex; flex-direction: column; align-items: stretch; margin: 1.5rem 0 .5rem; }
dialog .dialog-close { position: sticky; top: -1rem; z-index: 1; align-items: flex-end; padding: .5rem 0; margin-bottom: 1rem; background: var(--skin-surface, #fff); }
dialog .dialog-close button { min-height: 44px; }
dialog { position: fixed; top: calc(var(--viewport-top, 0px) + 12px); bottom: auto; margin: 0 auto; max-height: calc(var(--viewport-height, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 2px solid var(--skin-primary, #1c5a4e); box-shadow: 0 1.5rem 5rem #000b; }
body:has(dialog[open]) { overflow: hidden; }
dialog h2 { line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 480px) { dialog { width: calc(100% - 1rem); } }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }

select { font: inherit; width: 100%; padding: .75rem; margin-top: .4rem; }
input[type="checkbox"] { width: auto; display: inline-block; margin-left: .5rem; }

dialog { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }
input, textarea, select { background: var(--skin-surface, #ffffff); color: var(--skin-text, #183b38); }

#content-image{max-width:100%;height:auto;border-radius:.5rem}

#actions { margin: 1rem 0; }
#audio-controls { margin: 1.25rem 0; }
#audio-controls button { margin: .25rem .25rem .25rem 0; }
#moderation { margin: 1.25rem 0; padding: 1rem; border: 1px solid #acbdb5; border-radius: .75rem; }
#moderation summary { cursor: pointer; font-weight: bold; min-height: 1.5rem; }
#moderation summary:focus-visible { outline: 3px solid #b36c18; outline-offset: 3px; }
@media (max-width: 480px) {
  main { padding: 1rem; }
  h1 { font-size: 2rem; margin: 1.25rem 0; }
  section { margin-top: 1.5rem; padding: 1rem; }
}

#detail-cards .content-card { margin: 1rem 0; padding: 1rem; border: 2px solid var(--skin-primary, #1c5a4e); border-left-width: 6px; border-radius: .65rem; background: var(--skin-background, #f5f3ed); }
.content-card h3 { margin: 0 0 .75rem; font-size: 1rem; }
.content-card p { margin: 0; }
#detail-cards:not(:empty) + #content-image[hidden] ~ #module-commands { border-top: 1px solid #acbdb5; padding-top: 1rem; }

/* Focused notes reserve space for the editor and both actions above the keyboard. */
#detail.editing-note[open] { display: flex; flex-direction: column; height: min(28rem, calc(var(--viewport-height, 100dvh) - 24px)); overflow: hidden; gap: .5rem; }
#detail.editing-note > #detail-title,
#detail.editing-note > #detail-body,
#detail.editing-note > #detail-cards { display: none; }
#detail.editing-note .dialog-close { position: static; flex: 0 0 auto; padding: 0; margin: 0; }
#detail.editing-note #module-commands { flex: 1; min-height: 0; margin: 0; padding: 0; border: 0; }
#detail.editing-note .note-editor { flex: 1; min-height: 0; gap: .75rem; }
#detail.editing-note .note-editor label { margin: 0; }
#detail.editing-note .note-editor textarea { flex: 1; min-height: 3rem; height: auto; resize: none; }
#detail.editing-note .note-editor button { flex-shrink: 0; min-height: 44px; }