/*
 * Member pages -- v5 §4.2 mobile criteria.
 *
 * No horizontal scroll at 320px, tap targets at least 44px, base font at least
 * 16px (below which iOS auto-zooms form controls and breaks the layout it just
 * zoomed into), portrait primary with landscape not breaking.
 */

:root {
    --ink: #1c2733;
    --muted: #55606c;
    --line: #d4dae0;
    --page: #ffffff;
    --accent: #10467d;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* v5 §4.2: base font at least 16px. */
    font-size: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    /* v5 §4.2: nothing may overflow the viewport at 320px. */
    overflow-wrap: break-word;
}

img, table, pre {
    max-width: 100%;
}

.site-header,
.site-footer,
#content {
    /* 320px less two 16px gutters leaves the content 288px wide. */
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem;
}

/*
 * The name and the home link share one row, the link to the right. Stacked,
 * the link costs a line of vertical space on every page for one word, which at
 * 320px is space the content needs. It wraps to a second line only if the two
 * cannot fit, which is the old behaviour rather than a break.
 */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.site-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.site-nav {
    margin: 0;
}

#content h1 {
    font-size: 1.375rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

#content h2 {
    font-size: 1.125rem;
    margin: 1.5rem 0 0.5rem;
}

#content p {
    margin: 0 0 1rem;
}

.lede {
    font-size: 1.0625rem;
    color: var(--ink);
}

.muted {
    color: var(--muted);
}

a {
    color: var(--accent);
}

/* v5 §4.2: tap targets at least 44px. A mis-tap on a ballot is a wrong vote. */
a,
button,
input[type="submit"],
input[type="radio"],
input[type="checkbox"],
label.choice {
    min-height: 44px;
}

a,
label.choice {
    display: inline-block;
    padding: 0.5rem 0;
}

button,
input[type="submit"] {
    display: inline-block;
    min-width: 44px;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
}

/*
 * v5 §4.2: browsers do not inherit page typography into form controls, so a
 * member page that sets only a body font still auto-zooms on iOS.
 */
input,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
    max-width: 100%;
}

input[type="text"],
input[type="search"],
select {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--page);
}

textarea {
    width: 100%;
    /* v5 §9.2: the biography runs to 2500 characters. */
    min-height: 11rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--page);
}

label {
    display: inline-block;
    padding: 0.25rem 0;
}

.error {
    padding: 0.75rem;
    border: 1px solid #a3202a;
    border-radius: 4px;
    color: #7c1820;
}

.mark {
    display: block;
    color: var(--muted);
    font-size: 0.9375rem;
}

/*
 * An act is separated from the act beside it, not merely sized
 * (`ui-ux-standards.md`, Public Member Action Flows). Two acts on one
 * nomination row read as a single link when they sit side by side, and on an
 * accepted row they are the member's only irreversible acts. The 44px floor is
 * already carried by `a` above, so this is separation and not size.
 */
a.act {
    display: block;
    margin: 0.5rem 0;
    font-weight: 600;
}

/*
 * The ballot (v5 §10, §10.1, §4.2).
 *
 * v5 §4.2 names one interaction that must be got right deliberately: on the
 * review screen the unselected-item indicator and the inactive submit control
 * must be visible together at 320px. The review screen therefore runs Your
 * votes, the bylaw amendment, then Confirm and submit, with nothing bulky
 * between the last two, so the amendment's "Not yet marked" and the disabled
 * button are on screen together. `.confirm` is the submit section alone: it
 * once began at the amendment, which made every element after the amendment's
 * own content read as the amendment's rather than the ballot's.
 */

fieldset.contest {
    margin: 0 0 1.25rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 4px;
}

fieldset.contest legend {
    padding: 0 0.375rem;
    font-weight: 600;
}

/* v5 §4.2: radio buttons especially -- a mis-tap on a ballot is a wrong vote. */
label.choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.25rem;
    border-top: 1px solid var(--line);
}

label.choice:first-of-type {
    border-top: 0;
}

label.choice input[type="radio"] {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    flex: 0 0 auto;
}

/* v5 §9.6: a candidate who left after voting opened, in their slot and not selectable. */
.choice-gone {
    margin: 0;
    padding: 0.625rem 0.25rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
}

details.bio {
    margin: 0 0 0.5rem 2rem;
    color: var(--muted);
}

details.bio summary {
    min-height: 44px;
    padding: 0.625rem 0;
    cursor: pointer;
}

.summary {
    padding: 0.625rem 0.75rem;
    border-left: 4px solid var(--line);
}

.summary-title {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.summary-choice {
    margin: 0;
    font-weight: 600;
}

/* v5 §10.1: unselected contests are highlighted so the skip is deliberate. */
.summary.unselected {
    border-left-color: #b26a00;
    background: #fdf6ec;
}

.needed {
    display: block;
    margin: 0.375rem 0 0;
    color: #7a4600;
    font-weight: 600;
}

/*
 * The review screen's three named sections. The divider is what separates them,
 * so no section needs a box of its own and the run from the amendment to the
 * submit control stays short (v5 §4.2).
 */
.review .section {
    margin: 1.5rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.review .section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/*
 * The results and summary pages: a light rule above each seat and each
 * section, the review screen's divider reused, because a heading alone does
 * not separate items on a phone.
 */
.result,
h2.divide {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

/* v5 §4.2: the submit control, directly below the amendment's indicator. */
.confirm {
    margin-top: 0.75rem;
}

.confirm p:last-child {
    margin-bottom: 0;
}

button[disabled] {
    border-color: var(--line);
    background: var(--line);
    color: var(--muted);
    cursor: not-allowed;
}

button.secondary {
    border-color: var(--accent);
    background: var(--page);
    color: var(--accent);
}

/* v5 §11: the raw receipt, shown once and nowhere else. */
.receipt code {
    display: inline-block;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f5f7f9;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    word-break: break-all;
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9375rem;
}

.site-footer p {
    margin: 0;
}

/* v5 §4.2: the contact address is read and tapped, so it keeps the base
   font; the tap target comes from the `a` rule above. */
.site-footer .contact {
    margin-top: 0.5rem;
    font-size: 1rem;
}

/*
 * Printing. A member who wants their own copy of the amendment takes it from
 * the browser: v5 §15.3 writes no report to disk and build guide §2 writes
 * nothing to `storage/`, so what prints is the locked `amendments` row itself
 * rather than a copy of it that could drift from what R19 attests to.
 *
 * The site header, the site footer and the navigation links drop, so the text
 * page prints as the amendment and nothing else.
 */
@media print {
    .site-header,
    .site-footer,
    .exit,
    .site-nav {
        display: none;
    }

    #content {
        max-width: none;
        padding: 0;
    }

    /* A link's target is worth nothing on paper, and the text carries none. */
    a {
        color: inherit;
        text-decoration: none;
    }
}