/* ============================================================
   ATTO XI — shared stylesheet for all public-facing pages.

   Design tokens are defined once here. Every later public page
   (edit.php, reviewer surfaces, static pages) links this file and
   uses the custom properties — never a second copy of the palette.

   No external fonts or CDNs: the host is assumed to have no
   outbound internet at runtime.
   ============================================================ */

:root {
    --ink:      #3F3B39;   /* charcoal — primary text, headings, structure */
    --ink-soft: #6B6663;   /* muted grey — secondary text, help text */
    --gold:     #D4A13C;   /* amber accent — buttons, links, focus, header rule */
    --gold-dk:  #B8862C;   /* darker gold — button hover/active */
    --bg:       #FFFFFF;   /* page background */
    --bg-soft:  #F7F5F2;   /* subtle panel background for the form card */
    --line:     #E4DFD9;   /* hairline borders */
    --error:    #B23A3A;   /* validation errors */
    --done:     #4A7A52;   /* muted green — a scored/completed item */
    --done-bg:  #F2F7F2;   /* its very light background wash */
    --done-line:#CFE0D1;   /* its border */

    --measure:  46rem;     /* readable line length */
    --radius:   4px;
    --shadow:   0 1px 2px rgba(63, 59, 57, .05);

    color-scheme: light;
}

/* ---------- reset-ish ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- layout ---------- */

.wrap { max-width: var(--measure); margin: 0 auto; }

.site-header {
    padding: 2.5rem 0 0;
    text-align: center;
}

.site-header img.logo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
}

.site-header .rule {
    border: 0;
    height: 2px;
    background: var(--gold);
    width: 4rem;
    margin: 1.75rem auto 0;
}

.conference-line {
    margin: 1.25rem 0 0;
    color: var(--ink-soft);
    font-size: .95rem;
    text-align: center;
}

.conference-line strong { color: var(--ink); font-weight: 600; }

main { margin-top: 2.5rem; }

/* ---------- typography ---------- */

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0 0 .75rem;
}

h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 2rem 0 .5rem;
}

p { margin: 0 0 1rem; }

.lede { color: var(--ink-soft); }

a { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.muted { color: var(--ink-soft); font-size: .9rem; }

code, .mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
}

/* ---------- panels ---------- */

.card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.notice h1 { margin-bottom: .5rem; }
.notice p:last-child { margin-bottom: 0; }

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

.field { margin: 0 0 1.5rem; }
.field:last-of-type { margin-bottom: 0; }

label.label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
}

.req { color: var(--gold-dk); font-weight: 400; }

.help {
    display: block;
    color: var(--ink-soft);
    font-size: .875rem;
    margin: -.1rem 0 .45rem;
}

input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
    display: block;
    width: 100%;
    padding: .7rem .75rem;          /* comfortably tappable */
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
        linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: right 1.05rem center, right .8rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

input[type="file"] { padding: .55rem; background: var(--bg); }

textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.5;
}

/* Live character counter under a textarea. Advisory: the server enforces the
   limit, so `over` only tells the submitter what is about to be refused. */
.counter {
    display: block;
    text-align: right;
    color: var(--ink-soft);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    margin-top: .3rem;
}

.counter.over { color: var(--error); font-weight: 600; }

/* Stored prose rendered as stored: escaped by e(), wrapped here rather than
   turned into markup by nl2br. */
.prewrap { white-space: pre-wrap; }

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* checkbox rows */

.check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 0 1.1rem;
}

.check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .22rem 0 0;
    accent-color: var(--gold-dk);
}

.check label { font-size: .95rem; }
.check .help { margin: .2rem 0 0; }

/* validation */

.field.has-error input,
.field.has-error select { border-color: var(--error); }

.error {
    display: block;
    color: var(--error);
    font-size: .875rem;
    margin-top: .35rem;
}

.error[hidden] {
    display: none;
}

.error-summary {
    border: 1px solid var(--error);
    border-left: 3px solid var(--error);
    border-radius: var(--radius);
    background: #FCF6F6;
    padding: 1rem 1.25rem;
    margin: 0 0 1.75rem;
}

.error-summary h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--error); }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary li { margin: .15rem 0; }
.error-summary a { color: var(--error); }

/* Cloudflare Turnstile widget (submit.php only). The iframe is 300x65 and
   draws its own frame, so this wrapper only supplies the rhythm of a field and
   the red outline on failure — the same cue every other field gives. */
.turnstile-field { margin-top: 1.5rem; }
.turnstile-field .cf-turnstile { min-height: 65px; }
.turnstile-field.has-error .cf-turnstile {
    outline: 2px solid var(--error);
    outline-offset: 2px;
    width: fit-content;
}

/* buttons */

.actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

button.primary,
button.withdraw-button {
    display: inline-block;
    padding: .8rem 1.9rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    cursor: pointer;
}

button.primary:hover  { background: var(--gold-dk); border-color: var(--gold-dk); }
button.primary:active { background: var(--gold-dk); border-color: var(--gold-dk); }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

/* ---------- locked (non-editable) fields ---------- */

.locked-value {
    display: block;
    padding: .7rem .75rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
}

.lock-hint {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg);
    color: var(--ink-soft);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: .1em;
}

/* ---------- saved / status banner ---------- */

.banner {
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0 0 1.75rem;
}

.banner h2 { margin: 0 0 .3rem; font-size: 1rem; }
.banner p:last-child { margin-bottom: 0; }

/* ---------- current file panel ---------- */

.filecard {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}

.filecard .filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    word-break: break-all;
}

.filecard .filemeta { color: var(--ink-soft); font-size: .85rem; margin: .3rem 0 0; }

/* ---------- completed (scored) review item ---------- */

.card.done {
    background: var(--done-bg);
    border-color: var(--done-line);
}

.card.done h2 { color: var(--ink); }

.done-tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border: 1px solid var(--done-line);
    border-radius: 2px;
    background: #fff;
    color: var(--done);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- confirmation ---------- */

.ref-box {
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.ref-box .ref-label {
    display: block;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .4rem;
}

.ref-box .ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
}

dl.summary { margin: 1.5rem 0 0; }
dl.summary dt {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 1rem;
}
dl.summary dd { margin: .15rem 0 0; }

.link-box {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin: .5rem 0 0;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
}

/* ---------- footer ---------- */

.site-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .875rem;
    text-align: center;
}

.site-footer p { margin: .25rem 0; }

/* ---------- responsive ---------- */

@media (max-width: 32rem) {
    body { padding: 0 1rem 3rem; }
    .site-header { padding-top: 1.75rem; }
    .site-header img.logo { max-width: 260px; }
    .card { padding: 1.25rem; }
    h1 { font-size: 1.3rem; }
    button.primary { width: 100%; }
}

@media print {
    body { padding: 0; }
    .site-header .rule { background: var(--ink); }
    .card, .notice, .ref-box { box-shadow: none; }
}

/* ============================================================
   Reviewer worklist (review.php)

   The public chrome is a narrow reading column, which is right for
   forms and confirmations but wastes a desktop when a reviewer is
   working through a stack of abstracts. This section widens only
   that page and lays the cards out to reduce scrolling.
   ============================================================ */

.review-wide {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* The public wrapper caps width for readability; opt this page out. */
body:has(.review-wide) .wrap { max-width: none; padding: 0 1.5rem; }

/* Prose inside the wide page keeps a readable measure. */
.review-wide > h1,
.review-wide > .lede,
.review-wide > .muted,
.review-wide > .banner,
.review-wide > .notice,
.review-wide > .error-summary { max-width: 62rem; }

.review-progress {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.review-progress .ref { font-size: 1.15rem; }

h2.review-section {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
    margin: 2rem 0 .75rem;
    font-size: 1.05rem;
}

.count-pill {
    font-size: .8rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    letter-spacing: .02em;
}

/* Two columns on a desktop, one on anything narrower. */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.review-card { padding: 1.25rem 1.4rem; }
.review-card .card-meta { margin: 0 0 .35rem; font-size: .85rem; }
.review-card .card-title { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.review-card .card-pdf { margin: .6rem 0 1rem; }

.review-card .synopsis {
    margin: 0 0 .6rem;
    padding-left: .8rem;
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.55;
}

.tag-new,
.tag-fmt {
    display: inline-block;
    padding: 0 .4rem;
    white-space: nowrap;
    border: 1px solid var(--gold-dk);
    border-radius: 2px;
    background: var(--bg);
    color: var(--gold-dk);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: .08em;
}

/* The presentation-format tag sits on every card, so it stays quieter than the
   novelty tag, which is the exception. Charcoal for a talk candidate, hairline
   grey for poster only — no new colour. */
.tag-fmt { border-color: var(--line); color: var(--ink-soft); }
.tag-fmt.is-talk { border-color: var(--ink); color: var(--ink); }

.score-row {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .75rem;
}

.score-row select { width: auto; min-width: 9rem; }
.score-row button.primary { padding: .55rem 1.4rem; white-space: nowrap; }

.review-card textarea {
    display: block;
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
}

.review-card textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The requirement, made visible the moment an extreme score is picked. */
form.comment-required textarea { border-color: var(--gold-dk); background: #FFFDF8; }
form.comment-required .help { color: var(--gold-dk); font-weight: 600; }

.review-card.has-error { border-color: var(--error); }
.review-card .error:empty { display: none; }

/* Completed work: present, de-emphasised, collapsible. */
details.review-done > summary { cursor: pointer; list-style: none; }
details.review-done > summary::-webkit-details-marker { display: none; }
details.review-done > summary h2::after {
    content: " ▸";
    color: var(--ink-soft);
    font-weight: 400;
}
details.review-done[open] > summary h2::after { content: " ▾"; }
details.review-done .review-card { opacity: .85; }
details.review-done .count-pill { background: var(--done); }

@media (max-width: 40rem) {
    body:has(.review-wide) .wrap { padding: 0 1rem; }
    .review-grid { grid-template-columns: 1fr; gap: .75rem; }
    .score-row { flex-wrap: wrap; }
}

/* --- reviewer: in-place save confirmation -------------------------------- */
/* A revision keeps the reviewer on the card they were editing, so the
   confirmation has to be visible right there rather than at the top. */
.saved-inline {
    align-self: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--done);
    white-space: nowrap;
}
.saved-inline::before { content: "\2713\00a0"; }

.card.review-card.just-saved {
    border-color: var(--done-line);
    box-shadow: 0 0 0 2px var(--done-bg);
}

/* Deliberate destructive action, separate from saving the submission. */
.submission-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .75rem;
}
.submission-actions .withdraw-button { margin-left: auto; }

button.withdraw-button {
    background: var(--error);
    border: 1px solid var(--error);
    color: #fff;
}
button.withdraw-button:hover { filter: brightness(.85); }
button.withdraw-button:focus-visible { outline: 3px solid var(--error); outline-offset: 3px; }