/* Project-specific overrides on top of Pico.css. */

:root {
    --wine: #6e1423;
    --wine-dark: #1a1210;
    --gold: #cba135;
    --cream: #f7f3ec;
    /* Secondary text (bylines, dates, hints). 4.91:1 on cream, 5.43:1 on
       white cards -- WCAG AA needs 4.5:1. Was #7a6f64, 4.43:1 on cream. */
    --muted: #73685d;
}

body {
    margin: 0;
    background: var(--cream);
}

.container {
    max-width: 1100px;
}

/* Read by screen readers, not shown: the standard clip pattern
   (display: none or visibility: hidden would hide it from them too). */
.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;
}

/* ---- Skip link ----
   Off-screen until focused (the first Tab on any page), then shown over
   the top-left of the header. Moved off-screen rather than hidden with
   display: none, which would also remove it from the tab order. */

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    transform: translateY(-200%);
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    background: var(--gold);
    color: var(--wine-dark);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    transform: none;
}

/* ---- Keyboard focus ----
   One ring for everything you can Tab to that isn't a form field: a
   solid 2px outline, 2px out. Replaces Pico's ring, a half-transparent
   blue box-shadow (1.7:1 on cream, 2.3:1 on the header; WCAG wants 3:1),
   which the cards' own box-shadow also replaced outright, leaving them
   with no visible focus at all. An outline isn't a box-shadow, so
   nothing here can cancel it that way. Wine on the light page (10.6:1
   on cream, 11.8:1 on white), gold on the dark header, footer and hero
   (7.6:1). Form fields keep Pico's focus: a solid blue border and ring,
   which already passes -- except file inputs, which have no border to
   turn blue: Pico's faint ring (1.4:1) was all they showed, so they get
   this ring too, around the button and file name together.
   :focus-visible, so a mouse click doesn't show it. The :is() list
   matches Pico's own button focus selector, which it has to outrank. */
:root {
    --focus-ring: var(--wine);
}

/* The skip link isn't inside the header but shows over it. */
.site-header,
.site-footer,
.hero,
.skip-link {
    --focus-ring: var(--gold);
}

/* The user dropdown's menu is a white panel inside the dark header. */
.site-nav .nav-dropdown-menu {
    --focus-ring: var(--wine);
}

:is(a, summary, button, [type="submit"], [type="button"], [type="reset"], [role="button"]):focus-visible,
.site-nav .nav-dropdown summary:focus-visible,
input[type="file"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

/* Fills the hero to its edges, and .hero clips overflow: an outside
   ring would be cut off, so draw it inside. */
.hero-featured:focus-visible {
    outline-offset: -4px;
}

/* ---- Header / nav ---- */

.site-header {
    background: var(--wine-dark);
    padding-block: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Unconditional, not just under the mobile breakpoint below -- the
       previous version only wrapped under 700px, so anywhere between
       "narrow enough to overflow" and 700px the nav had nowhere to go
       but off the right edge of the screen. Wrapping at every width
       means it degrades gracefully instead of overflowing at all. */
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-block: 0;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Qualified with .site-nav (not just .nav-links) to out-specificity
   Pico's own built-in `nav ul` styling -- Pico applies a gap of its own
   plus a negative margin-inline-start on the first <ul> in a <nav> (to
   flush its first item against the container edge), and that selector
   ties or beats a single class on specificity, silently overriding
   `gap`/`margin` here and pushing content outside the nav's own box.
   Found by measuring actual computed styles, not by reading Pico's
   source -- getComputedStyle showed margin-left: -10px and the wrong
   gap despite this rule setting both explicitly. */
.site-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Not flex-grow: 1 -- that forced both the left and right lists to
       stretch to equal widths regardless of actual content, which is
       exactly what overflowed once the two sides became asymmetric
       (fewer items on the right than the left). Sizing to natural
       content and letting .site-nav's justify-content: space-between
       push them to the edges keeps the brand roughly centered without
       ever forcing either side wider than it needs to be. */
    flex-grow: 0;
    /* flex-shrink: 0 matters just as much as flex-grow: 0 here. Nav
       link text has white-space: nowrap (so labels never break mid-
       word), which sets each item's min-content width to its full
       label width. With the default flex-shrink: 1, the browser tried
       to shrink this list below that floor to fit the row -- and
       rather than wrapping, it let the excess silently overflow past
       the edge of the page instead (a real, if subtle, browser
       behavior: the wrap decision is made before shrinking is forced
       below min-content, so overflow can happen with no visible
       wrap). Refusing to shrink below content size forces .site-nav's
       own flex-wrap to actually trigger and drop this list to its own
       line instead. */
    flex-shrink: 0;
}

.nav-links.nav-right {
    justify-content: flex-end;
    align-items: center;
}

.nav-links a {
    color: var(--cream);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-user {
    color: var(--cream);
    /* .site-nav sets the Playfair Display serif for the whole nav (the
       brand wordmark wants it); this is plain account-menu text and
       inherited that along with everything else in the nav, so it
       needs to opt back out explicitly. Reusing Pico's own sans stack
       rather than hardcoding a duplicate one -- "the default sans
       font" means Pico's default, not a second guess at it. */
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.85rem;
    /* A long name is cut off with "...". The name and the caret (Pico's
       floated ::after, below) used to share one truncated box, so a
       name filling it pushed the caret onto a line of its own. Now the
       name is cut off in its own span, and the summary is a flex row
       (`.site-nav .nav-dropdown summary`; a flex item ignores float),
       so the caret always sits beside it. The width covers both, so
       it's 1.5rem more than the 12rem the name alone had, to show as
       much of a long name as before. */
    max-width: 13.5rem;
}

.nav-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Nav dropdown (Reviews / Groups / Log Out, under the username) ----
   A native <details>/<summary> disclosure -- no JS, works with keyboard
   and screen readers for free.

   Every selector here is qualified with .site-nav (not just the plain
   class), the same fix as .nav-links above and for the same reason:
   Pico.css ships an actual "nav > details" dropdown component with its
   own opinions (a horizontal flex layout on the menu <ul>, link-blue
   summary text, its own spacing) and a plain single-class selector
   ties or loses to it on specificity. Confirmed by inspecting computed
   styles in a browser, not by reading Pico's source. */

.site-nav .nav-dropdown {
    position: relative;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.site-nav .nav-dropdown summary {
    display: inline-flex; /* name and caret side by side; see .nav-user */
    align-items: center;
    cursor: pointer;
    list-style: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    /* !important: Pico's built-in nav-dropdown summary color still won
       out even at 2-class specificity -- same reason the rest of this
       file already reaches for !important on .signup-btn/.outline-btn
       text color, so following that existing convention here too. */
    color: var(--cream) !important;
}

.site-nav .nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.site-nav .nav-dropdown summary::after {
    content: "\25BE"; /* small caret, hints there's a menu without JS */
    /* The same caret, with empty alt text: otherwise screen readers can
       include it in the menu's name ("Scan Owner black down-pointing
       small triangle"). Browsers that don't know the "/ alt" syntax
       ignore this line and keep the one above. */
    content: "\25BE" / "";
    color: var(--gold);
    font-size: 0.7rem;
    /* Pico draws its own grey chevron here as a background image, which
       showed up alongside the caret. Its rotation stays: the caret
       points right when the menu is closed, down when it's open. It
       turns about the centre of Pico's 1rem box, so the caret is centred
       in that box, or it would swing low when closed. */
    background-image: none;
    line-height: 1rem;
    text-align: center;
    flex-shrink: 0; /* never squeezed by a long name (see .nav-user) */
}

.site-nav .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    /* Pico's nav ul defaults to align-items: center (fine for its own
       horizontal nav row, wrong once flex-direction is column here --
       it centered each <li> instead of letting it stretch full width,
       which visually looked like centered text instead of a normal
       left-aligned dropdown list). */
    align-items: stretch;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    z-index: 20;
    min-width: 10rem;
    list-style: none;
    margin-inline: 0;
    padding: 0.4rem 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.site-nav .nav-dropdown-menu li {
    /* Pico gives nav <li> its own padding, compensated by a matching
       negative margin it also puts on an <a>/<button> child so the
       visible text still lines up -- but that compensation is keyed to
       those specific tags, and the Log Out item's child is a <form>
       wrapping a button, not a bare <a>/<button>, so it never got the
       compensating margin and sat inset from the other items. Zeroing
       the <li> padding outright removes the need for any compensation,
       so every item (link or form) aligns the same way regardless of
       markup. */
    margin: 0;
    padding: 0;
}

.site-nav .nav-dropdown-menu a,
.site-nav .nav-dropdown-menu .link-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 1rem;
    color: var(--wine-dark);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    text-align: left;
    white-space: nowrap;
}

.site-nav .nav-dropdown-menu a:hover,
.site-nav .nav-dropdown-menu .link-btn:hover {
    background: var(--cream);
    color: var(--wine);
}

.site-nav .nav-dropdown-menu .logout-form {
    display: block;
}

.brand {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    padding-inline: 1rem;
    flex-shrink: 0; /* same reasoning as .nav-links -- see there */
    letter-spacing: 0.03em;
}

/* ---- Buttons ----
   Three styles, used site-wide (on <button>s and on links styled as
   buttons):
   - .signup-btn, gold: the main action of a page or form, what you came
     to do (Save Review, Log In, Post comment, Invite, Sign Up, Log a
     wine). One per form or page.
   - .outline-btn, wine outline: every other action, the destructive
     ones included (Preview, Edit group, More Reviews, Delete this
     review, Leave group, Decline); they don't look different, each
     destructive one asks to confirm.
   - .link-btn-dark, small underlined text: actions repeated down a
     list (edit or delete a comment, remove a member).
   (.link-btn is Log Out, made to look like the menu links around it.)
   The file inputs' "Choose File" button is the browser's own, and gets
   the outline style below. */

.signup-btn {
    background: var(--gold);
    color: var(--wine-dark) !important;
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    /* Pico.css gives bare <button> elements a bottom margin for vertical
       form rhythm, but not <a role="button">. Both are used with this
       class, so reset it here rather than in every place that pairs
       the two -- otherwise a <button class="signup-btn"> sits visibly
       lower than an <a class="signup-btn"> next to it. */
    margin: 0;
}

.signup-btn:hover {
    background: #b8912e;
}

.outline-btn {
    border: 1px solid var(--wine);
    color: var(--wine) !important;
    background: transparent;
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    margin: 0; /* see .signup-btn */
}

.outline-btn:hover {
    background: var(--wine);
    color: var(--cream) !important;
}

/* The "Choose File" button of a file input, as .outline-btn. It had
   Pico's blue-grey "secondary" button look, the only button outside the
   scheme above. */
input[type="file"]::file-selector-button {
    border: 1px solid var(--wine);
    color: var(--wine);
    background: transparent;
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    box-shadow: none;
}

input[type="file"]::file-selector-button:hover {
    background: var(--wine);
    color: var(--cream);
}

/* Links that look like buttons ("Sign Up", "Log a wine", "More
   Articles", ...). They used to get their button look from Pico via
   role="button", which also made screen readers announce them as
   buttons although they navigate like links (and, unlike a button, don't
   respond to Space). The role is gone; these are the Pico button
   declarations they relied on, so they look exactly as before --
   checked by diffing computed styles in a browser, rest/hover/focus. */
a.signup-btn,
a.outline-btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    user-select: none;
    transition: background-color var(--pico-transition), border-color var(--pico-transition),
                color var(--pico-transition), box-shadow var(--pico-transition);
}

/* .outline-btn sets its own border; .signup-btn had Pico's. */
a.signup-btn {
    border: var(--pico-border-width) solid var(--pico-primary-border);
}

a.signup-btn:is(:hover, :focus) {
    border-color: var(--pico-primary-hover-border);
}

/* In the nav, Pico's "nav li [role=button]" padding used to override
   .signup-btn's own. */
.site-nav a.signup-btn {
    padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}

/* Pico pads body > main top and bottom; the hero and every page section
   already set their own spacing, and <main> is only there as a landmark. */
body > main {
    padding-block: 0;
}

/* ---- Hero ---- */

.hero {
    position: relative;
    width: 100%;
    height: min(60vh, 520px);
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

/* Tagline overlay, pinned to the top of the hero image -- the mirror
   image of .hero-featured below, which is pinned to the bottom. Both
   can be visible at once (e.g. a featured article with a long excerpt);
   see the phone/tablet notes below for how that's kept from colliding. */
.hero-intro {
    position: absolute;
    inset: 0 0 auto 0;
    padding: 1.75rem 1.5rem 3rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
    text-align: center;
}

.hero-intro h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: var(--cream);
    font-size: 2rem;
    margin: 0 0 0.5rem;
}

.hero-intro p {
    max-width: 42rem;
    margin-inline: auto;
    color: var(--cream);
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Short viewports (small phones, or any phone in landscape -- .hero's
   height is capped at 60vh, so this is a height problem, not a width
   one) don't have room for both the tagline paragraph up top *and* a
   featured article's title+excerpt at the bottom without the two
   colliding. Confirmed by screenshotting real phone sizes: a 390x844
   phone had room to spare, a 375x667 one had the two overlays
   overlapping outright. Dropping the paragraph and keeping just the
   title is enough to clear it at every size tested down to 360x740. */
@media (max-height: 750px) {
    .hero-intro p {
        display: none;
    }
    .hero-intro {
        padding-bottom: 1.25rem;
    }
}

/* A phone in landscape is the extreme case: .hero's own height caps out
   around 225-235px there (60vh of a ~375-390px-tall viewport), which is
   too little room even for just the title on top of a featured article's
   own overlay -- confirmed still touching/crowded at 844x390 and 667x375
   with only the rule above applied. The tagline is pure decoration with
   no action attached to it (unlike .hero-featured, an actual link to
   real content), so it's the one that gives way entirely here. */
@media (max-height: 450px) {
    .hero-intro {
        display: none;
    }
}

.hero-featured {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 1.5rem 2rem 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    text-decoration: none;
}

.hero-featured-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.hero-featured-title {
    display: block;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    color: var(--cream);
}

.hero-featured-blurb {
    display: block;
    max-width: 36rem;
    margin-top: 0.4rem;
    color: var(--cream);
    font-size: 0.95rem;
    line-height: 1.5;
    /* Slightly translucent rather than full cream -- keeps the title the
       clear visual anchor of the overlay instead of competing with it. */
    opacity: 0.85;
}

.hero-featured:hover .hero-featured-title {
    color: var(--gold);
}

/* A single centered "see more" link below a homepage preview section
   (e.g. Guest Reviews) -- generic enough to reuse for other sections
   later, not tied to any one of them by name. */
.section-more {
    text-align: center;
    margin-top: 2rem;
}

/* Empty-state text in a homepage preview section (e.g. "no reviews
   yet") -- same generic-reuse reasoning as .section-more above. */
.section-empty {
    text-align: center;
    color: var(--muted);
}

/* ---- Feature grid ---- */

.features {
    padding-block: 1rem 3rem;
}

.eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    color: var(--wine);
    margin-bottom: 1.5rem;
}

/* Text-only, deliberately -- an earlier version used a photo per box,
   but stacked under the hero and the Guest Reviews/Articles preview
   grids below (both already image-heavy), it read as too busy. */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.explore-item {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.explore-item h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    color: var(--wine-dark);
    margin: 0 0 0.5rem;
}

.explore-item p {
    font-size: 0.9rem;
    color: #4a4038;
    margin: 0;
}

.explore-item:hover h2 {
    color: var(--wine);
}

@media (max-width: 700px) {
    .site-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    .site-nav .nav-links {
        flex: none;
        justify-content: center;
    }
    .explore-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Flash messages ---- */

.flash-messages {
    padding-top: 1rem;
}

.flash {
    padding: 0.6rem 1rem;
    border-radius: 3px;
    font-size: 0.9rem;
}

.flash-success {
    background: #e6f0e6;
    color: #2b5a2b;
}

.flash-danger {
    background: #f5e2e2;
    color: var(--wine);
}

/* ---- Auth forms ---- */

.auth-section {
    padding-block: 3rem 4rem;
}

.auth-container {
    max-width: 26rem;
}

.auth-container h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: var(--wine-dark);
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-container label {
    font-size: 0.85rem;
}

.field-error {
    color: var(--wine);
    font-size: 0.85rem;
    margin-top: -0.75rem;
}

.auth-container button[type="submit"] {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
}

.auth-switch {
    text-align: center;
    font-size: 0.9rem;
}

/* Honeypot field — off-screen for real users, still reachable/fillable by
   basic bots that don't render CSS. Not display:none (some bots skip
   those) or visibility:hidden. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ---- Nav logout button (styled to match the surrounding <a> links) ---- */

.logout-form {
    display: inline;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0; /* Pico's default button margin-bottom otherwise leaks in -- see .signup-btn */
    color: var(--cream);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.link-btn:hover {
    color: var(--gold);
}

/* ---- Articles: shared page layout ---- */

.page-section {
    padding-block: 2.5rem 4rem;
}

.page-section h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: var(--wine-dark);
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.article-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.search-form input[type="search"] {
    min-width: 16rem;
}

/* ---- Article / Review / Group list / search results ---- */

.article-list,
.review-list,
.group-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.article-card,
.review-card,
.group-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.group-card {
    padding: 1rem;
}

.group-card h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    color: var(--wine-dark);
    margin: 0 0 0.4rem;
}

.group-card p {
    font-size: 0.9rem;
    color: #4a4038;
    margin: 0 0 0.5rem;
}

.article-card img,
.review-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.article-card-body,
.review-card-body {
    padding: 1rem;
}

.article-card-body h2,
.review-card-body h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    color: var(--wine-dark);
    margin: 0 0 0.4rem;
}

.article-card-body p,
.review-card-body p {
    font-size: 0.9rem;
    color: #4a4038;
    margin: 0 0 0.5rem;
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

/* ---- Article detail ---- */

.article-detail h1 {
    margin-bottom: 0.25rem;
}

.article-cover {
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    border-radius: 4px;
    margin-block: 1.5rem;
}

.markdown-body {
    max-width: 42rem;
    line-height: 1.7;
    color: #2e2620;
}

.markdown-body img {
    max-width: 100%;
    border-radius: 4px;
}

/* ---- Review comments ---- */

.comments {
    max-width: 42rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e4dcd0;
}

.comment-group + .comment-group {
    margin-top: 2rem;
}

.comment-group h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.comment-list li {
    list-style: none; /* see .member-list li */
    padding-block: 0.6rem;
    border-bottom: 1px solid #efe9df;
}

.comment-meta {
    margin-bottom: 0.25rem;
}

.comment-author {
    font-weight: 600;
}

.comment-meta .inline-form {
    margin-top: 0;
}

.comment-body {
    margin: 0;
    white-space: pre-line; /* plain text: keep the writer's line breaks */
    overflow-wrap: anywhere; /* a long pasted URL mustn't widen the page */
}

.comment-form label {
    font-size: 0.85rem;
}

.comment-form textarea {
    margin-bottom: 0.5rem;
}

.comment-form button {
    width: auto;
}

/* ---- Article create/edit form ---- */

.article-form label {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
}

/* "Share with groups" on the review form: a fieldset + legend for
   screen readers, made to look exactly like the labels above it. The
   label's top margin moves to the fieldset (a legend's own top margin
   doesn't push the box down the way a label's does), and Pico's
   fieldset bottom margin goes, since the checkbox list already
   spaces the button below. */
.article-form .share-groups {
    margin: 1rem 0 0;
}

.article-form .share-groups legend {
    font-size: 0.85rem;
    margin-bottom: calc(var(--pico-spacing) * 0.375); /* Pico's label value; its legend's is 0.5 */
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
}

.form-grid label {
    margin-top: 1rem;
}

.delete-form {
    margin-top: 2rem;
}

.editor-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.preview-pane {
    border: 1px solid #ddd4c8;
    border-radius: 4px;
    padding: 1rem;
    min-height: 20rem;
    background: #fff;
}

@media (max-width: 800px) {
    .editor-preview-grid {
        grid-template-columns: 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Guest review invites ---- */

/* The share link is one long unbroken string (about 95 characters on
   the live site), so on a phone it pushed the page wider than the
   screen. Let it break anywhere; it's copied, not read. */
.invite-link {
    overflow-wrap: anywhere;
}

/* ---- Groups ---- */

.pending-invites {
    background: #fff;
    border: 1px solid #ddd4c8;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1.5rem;
}

.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
}

.invite-row + .invite-row {
    border-top: 1px solid #eee3d6;
}

.invite-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.invite-actions form {
    /* Flex items are blockified regardless of `display` here, so this
       isn't doing layout work -- the actual alignment fix is the
       margin reset on .signup-btn/.outline-btn above. Kept because the
       form itself still needs to not add its own block-level gap. */
    display: inline;
    margin: 0;
}

.member-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 2rem;
}

.member-list li {
    /* list-style: none on the <ul> alone doesn't suppress Pico's marker
       on the <li> itself (same issue as .checkbox-list) -- without this,
       the bullet renders out in the left margin since there's no
       padding-left to give it room. */
    list-style: none;
    padding-block: 0.4rem;
    padding-left: 1rem;
}

.inline-form {
    display: inline-flex;
    flex-wrap: wrap; /* label above the box when the row doesn't fit (phones) */
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* Pico.css gives <input>/<button> a bottom margin for vertical rhythm
   in normal stacked forms -- wrong here, where they're meant to sit
   side by side in one row. Without this, an input with that leftover
   margin has a taller margin box than an adjacent zero-margin button,
   so align-items: center centers them on different boxes and they
   don't visually line up (same root cause as the .signup-btn fix). */
.inline-form input {
    margin: 0;
    /* Never squeezed below a usable width to make room for the label;
       the row wraps instead (see flex-wrap above), and on that new line
       the box grows to fill it. */
    flex: 1 1 12rem;
    min-width: 0; /* a size="40" box would otherwise overflow a 320px phone */
}

/* Pico makes submit buttons width: 100%. Unwrapped, flex shrank that
   down to fit the row; now that the row can wrap, it would push the
   button onto a line of its own, full width. */
.inline-form button {
    width: auto;
}

/* Same margin reason for the label sitting in the row (group invite,
   guest-review invite): Pico gives <label> a bottom margin too. */
.inline-form label {
    margin: 0;
}

.link-btn-dark {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0 0.5rem; /* Pico's default button margin-bottom otherwise leaks in -- see .signup-btn */
    color: var(--wine);
    text-decoration: underline;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Checkbox list for "share with groups" (WTForms ListWidget output) */
.checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.checkbox-list li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.2rem;
}

.checkbox-list input {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin: 0;
}

.checkbox-list label {
    margin: 0;
}

/* ---- Footer ---- */

.site-footer {
    background: var(--wine-dark);
    color: #b8ada3;
    text-align: center;
    padding-block: 1.25rem;
    font-size: 0.85rem;
}

/* Pico sets its own `color` directly on <p>, which -- being an explicit
   property, not an inherited one -- wins over .site-footer's color
   above regardless of specificity. Confirmed via getComputedStyle: the
   footer text was actually rendering as rgb(55, 60, 68), a dark slate
   barely different from the near-black background (~1.7:1 contrast),
   not the #b8ada3 (~8.4:1) the source implied. Same class of bug as
   Pico's nav ul/details overrides elsewhere in this file -- re-asserting
   the color directly on the <p> is the fix, not picking a new color. */
.site-footer p {
    color: #b8ada3;
}