/* What the working site needs beyond the design's own styles (site.css,
   untouched): messages after an action, forms around the design's buttons,
   and the "coming soon" page. Only the design's tokens are used. */

.note--error { background: var(--danger-quiet); color: var(--danger-text); }
.flash { margin-block-end: var(--s-4); }
.flash:empty { display: none; }

/* A link that is not ready yet (the sign-in link while it is being made). */
a.btn[aria-disabled='true'] { opacity: .6; cursor: progress; }

/* The design's buttons, each inside its own form. */
.issue > form, .row > form, .acct__menu > form { display: contents; }
.mnav__panel > form { margin-block-start: var(--s-4); }
.inline-form { display: inline; }
.inline-form button { font: inherit; }

.drop [data-file-name] { font-size: 13px; color: var(--text-muted); direction: ltr; unicode-bidi: isolate; }

/* The live site before launch. */
.soon { min-height: 100vh; display: grid; place-items: center; padding: var(--s-8) var(--s-4); text-align: center; }
.soon__card { max-width: 560px; display: grid; gap: var(--s-4); justify-items: center; }
.soon .logo { font-size: 32px; }

/* The owner's articles. */
.post-cover { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; border-radius: var(--r-card, 24px); }
.post-meta { color: var(--text-muted); font-size: 15px; }
.posts { display: grid; gap: var(--s-6); }
.posts .card { display: grid; gap: var(--s-2); }

/* Screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* A long address in a narrow card breaks anywhere, not after its last slash alone. */
.acc-grid .code > span:first-child, .card > .code > span:first-child { overflow-wrap: anywhere; min-width: 0; }

/* The design's muted grey, a shade darker in the light theme only: 4.3:1 on
   the page background is under WCAG AA's 4.5:1 for small text (Lighthouse,
   mobile). 4.7:1 or more on every light background the design uses. */
html:not([data-theme='dark']) { --text-muted: #646B7D; }
/* The logo's "neow" likewise, in the design's own green for text
   (--proof-text): the bright --proof is 2.5:1 on the light page, under the
   3:1 even large bold text needs. The dark theme keeps --proof (6:1). */
html:not([data-theme='dark']) .logo b { color: var(--proof-text); }