:root { color-scheme: light; --ink: #20364b; --line: #ccd5df; --accent: #235d85; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f6fa; color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
header, main { max-width: 1120px; margin: auto; padding: 1.5rem; }
header { padding-bottom: 0; }
nav, .actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
nav { justify-content: space-between; }
h1 { margin: 1rem 0 .3rem; } h2 { font-size: 1.05rem; } h3 { margin: .3rem 0; }
a { color: #18567f; } a:hover { text-decoration-thickness: 2px; }
button, .file-label { border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: .65rem .85rem; border-radius: .4rem; font: inherit; font-weight: 650; cursor: pointer; }
.secondary, .file-label { background: #fff; color: var(--accent); } .danger { background: #fff; color: #962b2b; border-color: #962b2b; }
button:disabled { opacity: .55; cursor: wait; }
input, textarea { width: 100%; border: 1px solid #94a5b8; padding: .65rem; border-radius: .35rem; font: inherit; background: #fff; color: var(--ink); }
textarea { resize: vertical; }
input[type=file] { padding: .5rem; }
label { display: grid; gap: .3rem; margin: .9rem 0; font-weight: 600; }
.file-label { position: relative; margin: 0; } .file-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.help, .optional { font-size: .85rem; font-weight: 400; color: #4b5e71; }
.workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.5rem; }
aside, form, details, .preview { background: white; border: 1px solid var(--line); border-radius: .6rem; padding: 1.2rem; }
aside { align-self: start; } summary { cursor: pointer; font-weight: 700; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { font-size: 1.25rem; font-weight: 750; }
#status { padding: .8rem; background: #e4edf6; border-radius: .4rem; overflow-wrap: anywhere; }
#status.error { background: #ffe9e6; color: #842b22; }
#draft-notice { padding: .8rem; background: #fff3c9; }
#entries button { display: block; width: 100%; text-align: left; margin: .5rem 0; background: #fff; color: var(--ink); border-color: var(--line); overflow-wrap: anywhere; }
#entries button[aria-current=true] { background: #e4edf6; border-color: var(--accent); }
#entries small { display: block; font-weight: 400; }
.preview { margin-top: 1.2rem; } .preview article { display: flex; gap: 1rem; align-items: flex-start; }
.preview img { width: 140px; height: 140px; object-fit: contain; background: #f3f6fa; }
.preview article > div { min-width: 0; overflow-wrap: anywhere; }
#preview-caption { white-space: pre-line; } #preview-links { display: flex; flex-wrap: wrap; gap: .8rem; }
:focus-visible { outline: 3px solid #c27009; outline-offset: 3px; }
[hidden] { display: none !important; }
@media(max-width: 700px) { .workspace { grid-template-columns: 1fr; } header, main { padding: 1rem; } #entries { max-height: 220px; overflow-y: auto; } .preview article { flex-direction: column; } }