/* The printable sign at /sign/, loaded on that page only.

   The sign itself is a copy of the printed one made by _plan/tools/social/sign.py
   (kept in step by _plan/tools/sign-page.py), and these rules are that file's
   rules with three changes:
     1. scoped under .sign, so its reset and its sizes leave the site's own
        header and footer alone;
     2. every colour is a token, so .sign.bw can swap the whole palette at once,
        including the mark, the ticks and the neighbourhood badges, whose SVGs keep
        the print colours as attributes and are recoloured here by those values;
     3. two layouts. On a phone the sign reflows at a readable size, the column of
        endorsements under the names. From 52rem up it is the Letter sign: 7.5 by 10
        inches, 10.6pt type, everything else in em, so the screen previews the print.

   The black-and-white values are sign.py's own, rule widths included: its BW
   version draws heavier black rules where colour uses hairlines in a pale blue. */

.sign {
  --s-ink: #17456e;
  --s-deep: #0f2f4d;
  --s-gold: #f2b705;
  --s-label: #c93a1b;
  --s-muted: #5b7089;
  --s-rule: #c9d5e1;
  --s-box: #f2b705;
  --s-mark-hi: #f2b705;
  --s-mark-paper: #fdfdf8;
  --s-rule-race: 0.5pt;
  --s-rule-row: 0.5pt;
  --s-rule-foot: 0.5pt;
}
.sign.bw {
  --s-ink: #000000;
  --s-deep: #000000;
  --s-gold: #000000;
  --s-label: #000000;
  --s-muted: #333333;
  --s-rule: #000000;
  --s-box: #ffffff;
  --s-mark-hi: #ffffff;
  --s-mark-paper: #ffffff;
  --s-rule-race: 0.12em;
  --s-rule-row: 0.08em;
  --s-rule-foot: 0.08em;
}

/* ---------- the page around it ---------- */
.sign-page { padding: 1.25rem 0 3rem; }
.sign-tools {
  max-width: 7.5in;
  margin: 0 auto 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.sign-mode, .sign-per-row {
  display: inline-flex;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.sign-mode button, .sign-per-row button {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 44px;
  padding: 0.5em 1em;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.sign-mode button + button, .sign-per-row button + button { border-left: 2px solid var(--ink); }
.sign-mode button[aria-pressed="true"], .sign-per-row button[aria-pressed="true"] { background: var(--marine); color: #fff; }
.sign-mode button:focus-visible, .sign-per-row button:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; }

/* Per page: one, two or four signs to a Letter page (5 October). The page
   previews one; two and four print from their PDFs, which sign.py lays out and
   measures, and a line under the switches says how to cut them. */
.sign-per { display: flex; align-items: center; gap: 0.6rem; }
.sign-per-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.sign-per-row button { display: inline-flex; align-items: center; gap: 0.3em; min-width: 44px; padding-inline: 0.8em; }
.sign-per-row svg { width: 1.15em; height: 1.15em; flex: none; }
.sign-per-note { flex: 1 1 100%; margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.sign-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Choose headline: a label over a row of previous, the list, next, so it reads
   as something to flip through. sign.js fills the list from the sign itself. */
.sign-pick { flex: 1 1 100%; min-width: 0; }
.sign-pick label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.sign-pick-row { display: flex; align-items: stretch; gap: 0.5rem; }
/* drawn by the page, not the phone: Safari on iPhone ignores the height of its own
   select, and a select sizes itself to its longest option unless told otherwise */
.sign-pick select {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;   /* grow into the row; WebKit will not shrink a select below its chosen option */
  height: 48px;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 2.2em 0 0.8em;
  overflow: hidden;   /* WebKit lets a long chosen option spill out and widen the page */
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231a2330' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--gold-tint);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.sign-step {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.sign-step svg { width: 22px; height: 22px; }
.sign-step:hover, .sign-pick select:hover { background-color: var(--gold); }
.sign-pick select:focus-visible, .sign-step:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }

/* The picker, the switch, Print and Save to photos need sign.js. Their space is kept from the first
   paint, so nothing below them jumps when the script arrives, and they stay
   invisible (and out of the accessibility tree) if it never does. */
.sign-tools:not(.ready) .sign-pick,
.sign-tools:not(.ready) .sign-mode,
.sign-tools:not(.ready) .sign-per,
.sign-tools:not(.ready) [data-sign-print],
.sign-tools:not(.ready) [data-sign-photo] { visibility: hidden; }

/* ---------- the sign ---------- */
.sign {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 7.5in;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--s-ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 13.5px + 0.6vw, 17px);
  line-height: 1.25;
}
.sign, .sign * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* the site's own heading, paragraph and list spacing stays outside the sign */
.sign :where(h1, h2, p, ol, ul, li) { margin: 0; padding: 0; }
.sign svg { max-width: none; }

.sign [fill="#17456e"] { fill: var(--s-ink); }
.sign [stroke="#17456e"] { stroke: var(--s-ink); }
.sign [fill="#f2b705"] { fill: var(--s-mark-hi); }
.sign [stroke="#f2b705"] { stroke: var(--s-mark-hi); }
.sign [fill="#fdfdf8"] { fill: var(--s-mark-paper); }
.sign [stroke="#fdfdf8"] { stroke: var(--s-mark-paper); }

/* the site has its own .band (a padded feature strip); none of that belongs here */
.sign .band { display: block; height: 0.9em; padding: 0; border: 0; background: var(--s-ink); position: relative; flex: none; }
.sign .band i { position: absolute; left: 0; top: 0; height: 0.9em; width: 24%; background: var(--s-gold); }
.sign .inner { flex: 1; display: flex; flex-direction: column; padding: 1.2em 1.1em 1.1em; }
.sign .lockup { display: flex; align-items: center; gap: 0.55em; }
.sign .lockup svg { width: 3em; height: 3em; flex: none; display: block; }
.sign .bt {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5em; line-height: 1; color: var(--s-ink); letter-spacing: 0.02em;
}
.sign .bt small {
  display: block; font-size: 0.42em; letter-spacing: 0.42em; color: var(--s-muted);
  font-weight: 700; margin-top: 0.25em;
}
.sign h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.92; letter-spacing: normal; color: var(--s-ink);
  font-size: 3.1em; margin-top: 0.45em; text-wrap: balance;
}
/* the versions not picked are hidden; a two-line headline steps down, as in sign.py */
.sign .sign-head[hidden] { display: none; }
/* on a phone "NEIGHBOURHOOD" alone is wider than the screen at 2.7em, so the
   long headline follows the screen width there (fits 320px) */
.sign h1.long { font-size: min(2.7em, 9vw); }
.sign .sub { font-size: 1.05em; line-height: 1.3; margin-top: 0.5em; color: var(--s-deep); }
/* section labels: heavy, large and underlined in their own colour, so they hold up in black and white */
.sign .race, .sign .also-label {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.4em; line-height: 1.1; color: var(--s-label);
  margin-top: 0.6em; padding-bottom: 0.22em; border-bottom: 0.16em solid var(--s-label);
  text-wrap: wrap;
}
.sign .also-label { letter-spacing: 0.03em; }
.sign .lists .col { display: flex; flex-direction: column; }
.sign .col ol:last-of-type { margin-bottom: 0.7em; }
@media (min-width: 52rem), print {
  .sign .col ol:last-of-type { margin-bottom: 1.8em; }   /* plenty of room under the last name, as on the printed sign */
}
.sign ol { list-style: none; }
.sign li { border-bottom: var(--s-rule-row) solid var(--s-rule); }
/* each row is a link to that candidate's reasons on /endorsements/ */
.sign .row { display: flex; align-items: center; gap: 0.9em; padding: 0.55em 0; color: inherit; text-decoration: none; }
.sign .row:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }
.sign .row:hover .last, .sign .row:focus-visible .last { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }
.sign .box {
  flex: none; width: 2.4em; height: 2.4em; border: 0.22em solid var(--s-ink);
  background: var(--s-box); position: relative;
}
.sign .box svg { position: absolute; left: -0.3em; top: -1em; width: 3.2em; height: 3.2em; display: block; }
.sign .name { display: flex; flex-direction: column; line-height: 1; }
.sign .first { font-size: 1.15em; color: var(--s-deep); margin-bottom: 0.12em; }
.sign .last {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 2.7em; letter-spacing: 0.02em; color: var(--s-ink);
}
.sign .go { flex: none; width: 1.3em; height: 1.3em; margin-left: auto; color: var(--s-muted); }

/* who else endorses the six: under the names on a phone, beside them on the sheet */
.sign .also { margin-top: 0.6em; display: flex; flex-direction: column; }
.sign .ff {
  display: flex; align-items: center; gap: 0.9em; padding: 0.65em 0;
  border-bottom: var(--s-rule-row) solid var(--s-rule);
}
.sign .ff-seal { flex: none; width: 6.4em; height: 6.4em; display: block; object-fit: contain; }
.sign.bw .ff-seal { filter: grayscale(1); }
.sign .ff-text b {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 2em; line-height: 0.95; letter-spacing: 0.01em; color: var(--s-ink);
}
.sign .ff-text span { display: block; font-size: 0.95em; line-height: 1.2; color: var(--s-deep); margin-top: 0.4em; }
.sign .groups { list-style: none; }
.sign .groups li { display: flex; align-items: center; gap: 0.7em; padding: 0.4em 0; }
.sign .gmark { flex: none; width: 2.6em; height: 2.6em; display: block; }
.sign .gname b {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.32em; line-height: 1; letter-spacing: 0.02em; color: var(--s-ink);
}
.sign .gname span {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 0.74em; line-height: 1; letter-spacing: 0.24em; color: var(--s-label); margin-top: 0.22em;
}
.sign .others { font-size: 1em; line-height: 1.25; color: var(--s-deep); margin-top: 0.55em; }
/* The QR code at the foot of that column opens this page. Nobody scans their own
   phone, so it shows only on the Letter-size preview and on paper. */
.sign .qr { display: none; }

.sign .votes { margin-top: 1.4em; padding-top: 0.7em; border-top: 0.3em solid var(--s-gold); }
.sign .also { margin-top: 1.2em; }
.sign .votes b {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.9em; line-height: 0.95; color: var(--s-ink); text-wrap: balance;
}
.sign .votes p { font-size: 1em; line-height: 1.3; margin-top: 0.35em; color: var(--s-deep); }
.sign .foot {
  margin-top: 0.8em; padding-top: 0.45em; border-top: var(--s-rule-foot) solid var(--s-rule);
  display: flex; flex-direction: column; gap: 0.1em;
}
.sign .url { font-family: var(--font-display); font-weight: 800; font-size: 1.35em; color: var(--s-ink); }
.sign .auth { font-size: 0.78em; line-height: 1.3; color: var(--s-deep); }

/* ---------- the Letter sign, on a wide screen and on paper (sign.py's sizes) ---------- */
@media (min-width: 52rem) {
  /* at least the Letter sheet, never clipped: the authorization line at the foot must always show */
  .sign { width: 7.5in; min-height: 10in; font-size: 10.6pt; }
  .sign .inner { padding: 1.2em 1.6em 1.1em; }
  .sign .votes { margin-top: auto; }
  .sign h1.long { font-size: 2.7em; }
  .sign .lists { display: flex; align-items: stretch; gap: 2em; }
  .sign .lists .col { flex: 1; min-width: 0; }
  .sign .also { flex: 0 0 24em; margin-top: 0; }
  .sign .ff-seal { width: 7.8em; height: 7.8em; }
  .sign .ff-text b { font-size: 2.15em; }
  .sign .groups li { padding: 0.34em 0; border-bottom: var(--s-rule-row) solid var(--s-rule); }
  .sign .gmark { width: 2.9em; height: 2.9em; }
  .sign .qr { display: block; flex: none; width: 15em; height: 15em; margin: auto 0; align-self: center; }
}

@media print {
  @page { size: letter; margin: 0.5in; }
  .sign-tools { display: none !important; }
  .sign-page { padding: 0; }
  .sign-page .container { width: auto; margin: 0; }
  /* the guide bar pads the body inline while it shows, and that padding
     would push a second, empty page out of the printer */
  html, body { background: #fff; padding: 0 !important; margin: 0; }
  /* No fixed page height: a browser that prints with smaller margins or its own
     header and footer still gets one page. Phones and Safari print the PDF instead
     (sign.js), which is the sign exactly. */
  .sign {
    width: auto; max-width: none; height: auto; min-height: 9in; margin: 0; border: 0;
    font-size: 9.8pt; break-inside: avoid;   /* about 9.1 in tall, room for a browser's own margins */
  }
  .sign .inner { padding: 1.2em 1.6em 1.1em; }
  .sign .votes { margin-top: auto; }
  .sign h1.long { font-size: 2.7em; }
  .sign .lists { display: flex; align-items: stretch; gap: 2em; }
  .sign .lists .col { flex: 1; min-width: 0; }
  .sign .also { flex: 0 0 24em; margin-top: 0; }
  .sign .ff-seal { width: 7.8em; height: 7.8em; }
  .sign .ff-text b { font-size: 2.15em; }
  .sign .groups li { padding: 0.34em 0; border-bottom: var(--s-rule-row) solid var(--s-rule); }
  .sign .gmark { width: 2.9em; height: 2.9em; }
  .sign .qr { display: block; flex: none; width: 15em; height: 15em; margin: auto 0; align-self: center; }
  .sign .go { display: none; }
  .sign a { color: inherit; text-decoration: none; }
}