/* familing's page styles, loaded after web-ui's baseline (Pico 2.1.1,
   classless). Colours are Pico's own variables, which carry light and dark
   values, so there is no palette here and dark mode needs nothing of ours.
   Muted text inside a card uses --pico-secondary: Pico's --pico-muted-color
   on a dark card is 4.4:1, under AA.
   Templates stay classless; a class is added only where plain HTML cannot
   say it (form.inline, button.link, .chip, details.switcher,
   details.react-any, and Django's message tags on .messages li). A line that holds a <form> is a <div>, never a <p>:
   the HTML parser closes the <p> at the <form>. */

/* Accessibility: the skip link, hidden labels, the focus ring, motion. */
.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; z-index: 10; background: var(--pico-background-color); color: var(--pico-primary); }
.skip:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--pico-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Messages after a redirect: a box with a thick left edge, red for an
   error, green for a success; the words say which, not the colour alone. */
.messages { padding: 0; }
.messages li { list-style: none; margin: 0 0 .5rem; padding: .6rem 1rem; border: 1px solid var(--pico-muted-border-color); border-left: .4rem solid var(--pico-primary); border-radius: var(--pico-border-radius); }
.messages li.error { border-left-color: var(--pico-del-color); }
.messages li.success { border-left-color: var(--pico-ins-color); }

/* A reading width, not Pico's 1450px container. */
body > header, body > main { max-width: 48rem; }
@media (max-width: 52rem) { body > header, body > main { padding-left: 1rem; padding-right: 1rem; } }

/* Header: brand on the left; family, account and Log out on the right;
   under them the section tabs, a row of links with a thin rule, the
   current one underlined thick in the primary colour. It wraps on a
   phone. */
body > header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding-bottom: 0; }
body > header a { text-decoration: none; }
body > header > a:first-child { font-weight: 700; font-size: 1.25rem; color: var(--pico-h1-color); }
body > header nav { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 1.5rem; border-bottom: 1px solid var(--pico-muted-border-color); }
body > header nav a { display: inline-block; padding: .5rem 0; margin-bottom: -1px; border-bottom: 3px solid transparent; }
body > header .spacer { flex: 1; }
body > header form { margin: 0; }
/* Log out is a POST form, so a <button>; it reads as a link like the
   account beside it, on the same line. */
body > header > form button[type=submit] { width: auto; margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; --pico-background-color: transparent; --pico-color: var(--pico-primary); }
body > header > form button[type=submit]:is(:hover, :focus) { --pico-background-color: transparent; --pico-color: var(--pico-primary-hover); }
/* The section you are on. */
body > header nav a[aria-current=page] { color: var(--pico-h1-color); font-weight: 600; border-bottom-color: var(--pico-primary); }

/* The family picker: a dropdown under its summary, its caret turning at
   once; switcher.js closes it on a click outside and on Escape. */
details.switcher { position: relative; margin: 0; }
details.switcher summary { line-height: inherit; }
details.switcher summary::after { float: none; display: inline-block; vertical-align: middle; transition: none; }
details.switcher[open] > summary { margin-bottom: 0; }
details.switcher ul { position: absolute; right: 0; z-index: 1; margin: .25rem 0 0; padding: .25rem 0; list-style: none; white-space: nowrap; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow); }
details.switcher li { list-style: none; margin: 0; }
details.switcher form { margin: 0; }
details.switcher :is(a, button) { display: block; width: 100%; padding: .4rem .8rem; margin: 0; text-align: left; font-size: 1rem; border: 0; border-radius: 0; --pico-background-color: transparent; --pico-color: var(--pico-color); }
details.switcher :is(a, button):is(:hover, :focus) { --pico-background-color: var(--pico-primary-focus); background: var(--pico-primary-focus); }

/* A form that sits in a line of text, with a button its own width. */
form.inline { display: inline; margin: 0; }
form.inline button { width: auto; margin: 0 0 0 .25rem; padding: .25rem .75rem; font-size: .875rem; }

/* The low-key delete and close. */
button.link { width: auto; margin: 0 0 0 .25rem; padding: 0; border: 0; font-size: .875rem; text-decoration: underline; --pico-background-color: transparent; --pico-color: var(--pico-secondary); }
button.link:is(:hover, :focus) { --pico-background-color: transparent; --pico-color: var(--pico-primary); }

/* Reaction and "I'm interested" pills; .mine is the user's own. */
form.inline button.chip { width: auto; margin: 0 .25rem .25rem 0; padding: .15rem .65rem; font-size: .9rem; border-radius: 1rem; --pico-background-color: transparent; --pico-border-color: var(--pico-muted-border-color); --pico-color: var(--pico-color); }
form.inline button.chip:is(:hover, :focus) { --pico-background-color: transparent; --pico-border-color: var(--pico-primary); --pico-color: var(--pico-color); }
form.inline button.chip.mine, form.inline button.chip.mine:is(:hover, :focus) { --pico-background-color: var(--pico-primary-focus); --pico-border-color: var(--pico-primary); }
/* A post's "+": a chip that opens a one-emoji input and React, inline. */
details.react-any { display: inline-block; margin: 0; vertical-align: top; }
details.react-any > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin: 0 .25rem .25rem 0; padding: .15rem .65rem; font-size: .9rem; line-height: inherit; border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; }
details.react-any > summary:is(:hover, :focus) { border-color: var(--pico-primary); }
details.react-any > summary::after { display: none; }
details.react-any[open] { display: inline-flex; align-items: flex-start; }
details.react-any form { display: inline-flex; gap: .25rem; align-items: center; margin: 0; }
details.react-any input { width: 5rem; margin: 0; padding: .15rem .5rem; height: auto; }
details.react-any button { width: auto; margin: 0; padding: .15rem .65rem; font-size: .9rem; }

/* Cards: posts and ideas are Pico's <article>. */
:is(.post, .idea) .meta { margin: 0 0 .5rem; font-size: .875rem; color: var(--pico-secondary); }
:is(.post, .idea) .meta strong { color: var(--pico-color); }
:is(.post, .idea) .title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; color: var(--pico-h2-color); }
.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }
:is(.post, .idea) .body { margin-bottom: .75rem; }
.post .reactions { margin: 0 0 .5rem; }
.post .reply { margin: .5rem 0; padding: .25rem 0 .25rem .75rem; border-left: 3px solid var(--pico-muted-border-color); }
.post .reply strong { font-size: .875rem; }
.idea .who { margin-left: .25rem; font-size: .875rem; color: var(--pico-secondary); }

/* The reply form: the editor takes its own row; under it the file input
   and its captions, Reply beside them; stacked on a narrow phone. */
.reply-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .75rem 0 0; }
.reply-form .reply-text { flex: 1 1 100%; min-width: 0; }
.reply-form .reply-files { flex: 1; min-width: 0; }
.reply-form .reply-files label { font-size: .875rem; }
.reply-form .reply-files input[type=file] { margin-bottom: 0; }
.reply-form button[type=submit] { width: auto; margin: 0; }
@media (max-width: 30rem) { .reply-form { flex-direction: column; align-items: stretch; } .reply-form button[type=submit] { width: 100%; } }
.post .reply .attachments { margin: .5rem 0 0; }
/* A post's Reply opener: a summary that reads as a link, no caret; its form under it. */
.post > details { margin: .5rem 0 0; --pico-accordion-open-summary-color: var(--pico-primary); }
.post > details > summary { display: inline-block; line-height: inherit; font-size: .875rem; color: var(--pico-primary); text-decoration: underline; }
.post > details > summary:is(:hover, :focus) { color: var(--pico-primary-hover); }
.post > details > summary::after { display: none; }
.post > details[open] > summary { margin-bottom: .5rem; }
.post > details .reply-form { margin-top: 0; }

/* Post and Add idea: their own width at the form's end, as Reply is;
   full width on a narrow phone. */
:is(.feed > form, .idea-form) > button[type=submit] { display: block; width: auto; margin-left: auto; }
@media (max-width: 30rem) { :is(.feed > form, .idea-form) > button[type=submit] { width: 100%; } }

/* An editor can be dragged taller, as a textarea can. The idea's
   details start taller than its one-line title. */
trix-editor { resize: vertical; overflow: auto; }
.idea-form trix-editor { min-height: 7rem; }
/* The @ suggestions mention.js puts flush under the editor being typed in. */
#mention-list { margin: -1px 0 .5rem; padding: 0; list-style: none; border: 1px solid var(--pico-muted-border-color); border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius); background: var(--pico-background-color); }
#mention-list li { display: flex; align-items: center; min-height: 24px; margin: 0; padding: .25rem .75rem; list-style: none; cursor: pointer; }
#mention-list li:hover { color: var(--pico-primary-hover); }
#mention-list li[aria-selected=true] { background: var(--pico-primary-focus); }

/* The idea form's date pair, shown only while "Has dates" is ticked; the
   server ignores the pair when it is not. */
.dates { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.dates label { flex: 1 1 12rem; }
.idea-form:not(:has([name=has_dates]:checked)) .dates { display: none; }

/* Photos and video on a card: the card's width at most, never a fixed
   height, so they shrink with the page and at 200% zoom. Caption boxes
   stack under the file input. */
.attachments { margin: 0 0 .75rem; }
.attachments :is(img, video) { display: block; max-width: 100%; height: auto; margin: 0 0 .5rem; border-radius: var(--pico-border-radius); }
.attachments p { margin: 0 0 .5rem; font-size: .875rem; color: var(--pico-secondary); }
.captions label { font-size: .875rem; }