/* Ubay-Ubay artist call (pin bundle submissions)
   EDIT: Colors, fonts, sizes, and spacing are set once in :root below.
   Change a value there and it updates everywhere on both pages.
   Colors and fonts follow the Ubay-Ubay brand kit.
   The layout is one centered column under a small sticky header. Wider
   screens only get a bigger headline and more space between sections. */

/* Brand font, hosted in assets/fonts/.
   Agrandir: Pangram Pangram, web license held by the org. */
@font-face {
  font-family: "Agrandir";
  src: url("assets/fonts/agrandir-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Agrandir";
  src: url("assets/fonts/agrandir-textbold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Agrandir Grand";
  src: url("assets/fonts/agrandir-grandheavy.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* Brand colors (from the brand kit) */
  --color-cream: #f6f1e7;
  --color-navy: #2b2c49;
  --color-coral: #eb6648;
  --color-pink: #f055b1;
  --color-violet: #8c5eff;
  --color-green: #749e25;

  /* How the colors are used */
  --color-page: var(--color-cream);
  --color-surface: #fffdf8;           /* letter box, inputs, pin faces */
  --color-well: #ede5d6;              /* table header, template outside area */
  --color-line: #ddd5c6;              /* thin divider lines */
  --color-control: #7a7b93;           /* input and outlined button borders */
  --color-text: var(--color-navy);
  --color-text-2: #5a5b73;            /* small text, hints, placeholders */
  --color-ink: var(--color-navy);     /* the pin drawings */
  --color-accent: var(--color-navy);  /* main button and links */
  --color-accent-hover: #1f2036;
  --color-accent-active: #15162a;
  --color-focus: var(--color-violet); /* keyboard focus ring */
  --color-error: #c62828;

  /* Pin template colors. Match these to the real template file. */
  --color-template-red: #d62828;
  --color-template-gray: #8f8f8f;
  --color-template-green: #1e8a4c;
  --color-red-text: #ff6b6b;          /* the words "red line" on navy (the template red is too dark there) */
  --color-highlight: #ff8acb;         /* highlighted words on navy: the 1. Design 4 pins bullet labels and the deadline (brand pink, lightened to read on navy) */

  /* Fonts */
  --font-body: "Agrandir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-headline: "Agrandir Grand", "Agrandir", Arial, sans-serif;  /* big poster headline */
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Text sizes. The whole site uses only these four. */
  --size-title: 36px;             /* page title (48px on wide screens) */
  --size-heading: 28px;           /* section titles */
  --size-body: 17px;              /* normal text, buttons, inputs */
  --size-small: 14px;             /* small text, hints, footer */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --column: 560px;                /* width of the one column */
  --gutter: 16px;                 /* space at the left and right screen edges */
  --section-gap: 64px;            /* space at the top of each section */
  --section-end: 32px;            /* space at the bottom of each section */
  --radius-control: 6px;
  --radius-panel: 8px;
  --header-height: 48px;          /* the sticky header at the top */
  --page-width: 900px;            /* width of the centered sheet the whole site sits on */
  --color-backdrop: var(--color-coral);  /* brand orange, the same as "3. What you earn", around the sheet */
  --card-gap: 12px;               /* sand space above the header, below the footer, and at the sides */
  --radius-card: 12px;            /* rounded outer corners of the sheet */
}

@media (min-width: 720px) {
  :root {
    --size-title: 48px;
    --gutter: 32px;
    --section-gap: 96px;
    --section-end: 48px;
  }
}


/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-backdrop);
}

body {
  margin: 0;
  background: var(--color-backdrop);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
}

/* The centered sheet everything sits on, like a Google Form. The sections
   join up with no gaps. Only the sheet's outer corners are rounded: the top
   of the header and the bottom of the footer. */
.page {
  container-type: inline-size;
  max-width: calc(var(--page-width) + 2 * var(--card-gap));
  margin: 0 auto;
  padding: 0 var(--card-gap) var(--card-gap);
}

main {
  background: var(--color-page);
}

/* Links to a part of the page stop below the sticky header */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-body);
  font-size: var(--size-title);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

/* Zone titles: "The guidelines", "How to join" */
h2 {
  font-family: var(--font-body);
  font-size: var(--size-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* Topic titles inside the guidelines */
h3 {
  font-family: var(--font-body);
  font-size: var(--size-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: var(--size-small);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The one centered column every section sits in */
.column {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.small,
.hint {
  color: var(--color-text-2);
  font-size: var(--size-small);
  line-height: 1.5;
}

/* Anything not decided yet */
.tbd {
  color: var(--color-text-2);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-page);
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-2);
}


/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-cream);
}

.button-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-cream);
}

.button-primary:active {
  background: var(--color-accent-active);
}

.button-secondary {
  background: var(--color-page);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-control);
}

.button-secondary:hover {
  background: var(--color-well);
  color: var(--color-text);
}

.button-secondary:active {
  background: var(--color-line);
}

.button-ghost {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button-ghost:hover {
  background: var(--color-well);
}

.button-block {
  width: 100%;
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.button[aria-disabled="true"] {
  pointer-events: none;
}


/* ---------- Header (stays at the top while scrolling) ----------
   At the top of the page there is a small gap above it. Once you scroll,
   it sticks flush to the top of the screen, and script.js adds .is-stuck so its
   top corners go square. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: var(--card-gap);
}

.site-header.is-stuck p {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.site-header p {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-height);
  margin: 0;
  padding: var(--space-2) var(--gutter);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-page);
  box-shadow: inset 0 -1px 0 var(--color-line);
  font-size: var(--size-small);
  line-height: 1.4;
  text-align: center;
}

/* The UBAY-UBAY wordmark reads like a word in the sentence. Its cream
   background matches the page, so it blends in. */
.site-header-logo {
  display: block;
  height: 16px;
  width: auto;
}

/* The logo opens a short description of Ubay-Ubay: on hover (computers),
   or on tap (phones, where script.js adds .is-open). */
.logo-tip {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  vertical-align: -2px;
}

.logo-tip-trigger {
  display: block;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed var(--color-control);  /* hints that it can be opened */
  border-radius: 0;
  background: none;
  cursor: help;
}

.logo-tip-text {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  z-index: 6;
  width: max-content;
  max-width: min(280px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--color-navy);
  color: var(--color-cream);
  font-size: var(--size-small);
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
  pointer-events: none;
}

.logo-tip:hover .logo-tip-text,
.logo-tip:focus-within .logo-tip-text,
.logo-tip.is-open .logo-tip-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


/* ---------- Intro ---------- */

/* The opening: heading, box, arrow, and the picture. It has no bottom padding,
   so the picture sits right on top of the navy guidelines section. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-16) var(--gutter) 0;
  background: var(--color-page);
  text-align: center;
}

/* MAKE YOUR OWN / BUTTON PIN, always exactly two lines, in the regular Agrandir
   title style. "MAKE YOUR OWN" is about 8.6 letter-heights wide in this font, so the
   size is the sheet width divided by 8.9 (cqw = 1% of the sheet's width). It stops
   growing at 88px. The first line is a fallback for old browsers that don't know cqw. */
.hero-title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-body);
  font-size: min(88px, calc((100vw - 2 * var(--gutter)) / 8.9));
  font-size: min(88px, calc((100cqw - 2 * var(--gutter)) / 8.9));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-title span {
  display: block;
  white-space: nowrap;
}

/* The box and the arrow are one link to the guidelines */
.hero-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

/* Navy box with cream text */
.hero-box {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-control);
  background: var(--color-navy);
  color: var(--color-cream);
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 150ms ease-out;
}

.hero-cta:hover {
  color: var(--color-text);
}

.hero-cta:hover .hero-box {
  background: var(--color-accent-hover);
}

.hero-cta:active .hero-box {
  background: var(--color-accent-active);
}

.hero-arrow {
  display: block;
}

/* The invitation at the top of the navy guidelines section.
   The first line uses the full sheet width and a smaller size so it fits on
   one line on computers. On phones it wraps. */
.invite {
  padding: 0 var(--gutter);
  text-align: center;
}

.invite-lead {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.invite-body {
  max-width: var(--column);
  margin: var(--space-6) auto 0;
}

.invite-scroll {
  margin: var(--space-6) 0 0;
  margin-bottom: 0;
  color: var(--color-text-2);
}

/* "a button pin bundle" in the invitation */
.underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The small down arrow beside "Scroll down to see the guidelines" */
.invite-scroll-arrow {
  display: inline-block;
  margin-left: var(--space-1);
  vertical-align: -3px;
}

/* The picture under the arrow.
   It shows whole, never cropped, at its own shape.
   It sits right on top of the navy section, so its bottom corners are square. */
.hero-image {
  position: relative;
  width: 100%;
  max-width: var(--column);
  margin: var(--space-8) 0 0;
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

/* ---------- Zones: cream, navy, cream, navy ----------
   Intro (cream), guidelines (navy), how to join (cream), footer (navy). */

.zone {
  padding: var(--section-gap) 0 var(--section-end);
  text-align: center;
}

/* No extra gap after the last line of a section */
.topic > :last-child,
.zone > .column > :last-child {
  margin-bottom: 0;
}

.zone-head {
  margin-bottom: var(--space-4);
  padding: 0 var(--gutter);
}

/* "THE GUIDELINES" and "HOW TO JOIN": almost as big as the MAKE YOUR OWN BUTTON PIN
   heading, on one line. THE GUIDELINES is about 8.1 letter-heights wide, so the size
   is the sheet width divided by 8.4. */
.guidelines-title,
.join-title {
  font-size: min(48px, calc((100vw - 2 * var(--gutter)) / 8.4));
  font-size: min(76px, calc((100cqw - 2 * var(--gutter)) / 8.4));
  line-height: 1.05;
  white-space: nowrap;
}

/* The navy invitation band: the same space above and below its text */
.zone-invite {
  padding: var(--space-16) 0;
}

/* Pin Template on a deep purple band with cream text. It's the brand violet,
   darkened so cream text reads clearly (5.5:1). Red text can't be read on purple,
   so "red line" stays cream with a red dashed underline, like the template line. */
.zone-template {
  padding: var(--space-16) 0;
}

.zone-navy.zone-template {
  background: #6c3fe0;
}

.zone-template .text-red {
  color: var(--color-cream);
  text-decoration: underline dashed var(--color-red-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.zone-template .topic {
  padding-top: 0;
}

.zone-head p {
  margin: 0;
}

/* Each numbered topic in the guidelines */
.topic {
  padding-top: var(--space-12);
}

/* The line between guideline topics runs the full width of the sheet */
.band-divider {
  height: 0;
  margin: var(--space-12) 0 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

/* How to join: a little more room between its title and the steps */
.zone-join h2 {
  margin-bottom: var(--space-6);
}

/* Navy zones. Text turns cream, and the line, hint, and panel colors are
   redefined here so everything inside (rows, tables, placeholders) switches to its light version automatically.
   The drawings keep their own light backgrounds and navy text. */
.zone-navy {
  --color-line: rgba(246, 241, 231, 0.2);
  --color-text-2: #c9cadb;
  --color-well: rgba(246, 241, 231, 0.1);
  background: var(--color-navy);
  color: var(--color-cream);
}

/* Guidelines 1 and 2: cream with navy text. The pink and red words get darker
   versions here, because the light ones made for navy are too faint on cream. */
.zone-guide {
  --color-highlight: #c42d86;
  --color-red-text: #c62828;
  background: var(--color-page);
}

.zone-navy a:not(.button) {
  color: var(--color-cream);
}

.zone-navy .button-secondary {
  background: transparent;
  color: var(--color-cream);
  box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.6);
}

.zone-navy .button-secondary:hover {
  background: rgba(246, 241, 231, 0.1);
  color: var(--color-cream);
}

/* Lists inside a centered section read left to right */
.list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  text-align: left;
}

.list li + li {
  margin-top: var(--space-2);
}


/* ---------- Guidelines content ---------- */

/* 1. Design 4 pins: the text on the left, the sample card on the right, both
   lined up on their centers inside a centered 760px block.
   Phones (sheet narrower than 640px): everything is centered and stacked,
   with the sample card last. */
.topic-wide {
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  max-width: 760px;
  margin: 0 auto;
}

@container (min-width: 640px) {
  .bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: var(--space-12);
    align-items: center;
  }
}

.bento-text {
  text-align: left;
}

/* Phones: everything is centered, in page order: the lines, the PNG line,
   "See example", then the sample card with its backcard caption. */
@container (max-width: 639.98px) {
  .bento {
    gap: var(--space-12);
  }

  .bento-text {
    text-align: center;
  }

  /* Each pink label sits on its own line, as a small heading over its sentence */
  .bento-lines strong {
    display: block;
  }

  .bento-lines p + p {
    margin-top: var(--space-6);
  }

  .bento-extra-items {
    gap: var(--space-6);
  }
}

/* "Design 4 pins" title: the same pink as its highlighted words */
.bento-text h3 {
  margin-bottom: var(--space-4);
  color: var(--color-highlight);
}

/* The lines under "Design 4 pins": plain sentences, no bullets, a space between each. */
.bento-lines p {
  margin: 0;
}

.bento-lines p + p {
  margin-top: var(--space-4);
}

/* "Send each pin as a PNG, 1000 x 1000 px.": a separate line under the list,
   always on one line. It is about 19.2 letter-heights wide, so on phones the
   size shrinks with the sheet; it stops growing at 20px. */
.bento-sub {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-size: min(20px, calc((100vw - 2 * var(--card-gap) - 2 * var(--gutter)) / 19.6));
  font-size: min(20px, calc((100cqw - 2 * var(--gutter)) / 19.6));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.bento-sample {
  display: flex;
  justify-content: center;
}

/* The extra information right under "See example".
   Same size as the lines above, quieter gray, each pink label on its own line. */
.bento-extra {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.bento-extra-items {
  display: grid;
  gap: var(--space-4);
}

.bento-extra-items p {
  margin: 0;
  color: var(--color-text-2);
}

.bento-extra-items strong {
  display: block;
}

/* "Deadline:" reads navy; the pink labels stay pink */
.bento-extra-items strong:not(.text-highlight) {
  color: var(--color-text);
}

.sample-image {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-panel);
}

/* "See example": a button with a small preview that appears on hover
   (computers only). Clicking or tapping opens the dialog. */
.example-trigger {
  position: relative;
  display: inline-block;
  margin-top: var(--space-6);
}

.example-open {
  gap: var(--space-2);
  cursor: pointer;
}

.example-peek {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: 3;
  width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
  pointer-events: none;
}

.example-peek img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}

@media (hover: hover) and (pointer: fine) {
  .example-trigger:hover .example-peek {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* The example picture on top of the page */
.example-dialog {
  width: min(480px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-4));
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-page);
  color: var(--color-text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04), 0 16px 24px -8px rgba(0, 0, 0, 0.06);
}

.example-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.example-dialog-inner {
  padding: var(--space-4);
  text-align: center;
}

.example-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.example-dialog-title {
  margin: 0;
  font-weight: 700;
  text-align: left;
}

.example-dialog-head form {
  margin: 0;
}

.example-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.example-dialog-close:hover {
  background: var(--color-well);
}

.example-dialog img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 180px);
  margin: 0 auto;
  border-radius: var(--radius-panel);
}

.example-dialog .small {
  margin: var(--space-3) 0 0;
}

/* Keeps a short phrase on one line, like "1000 x 1000 px." */
.nowrap {
  white-space: nowrap;
}

/* 1. The bullet labels and the deadline in colored text */
.text-highlight {
  color: var(--color-highlight);
}

/* 2. "red line" in red */
.text-red {
  color: var(--color-red-text);
}

/* 3 and 4. Full-width orange and pink bands with navy text.
   The line, hint, and panel colors are reset to navy versions here, so the
   table, rows, and placeholders inside read correctly on the color. */
.zone-color {
  --color-line: rgba(43, 44, 73, 0.25);
  --color-text-2: var(--color-navy);
  --color-well: rgba(43, 44, 73, 0.08);
  color: var(--color-navy);
}

/* 3. What you earn: the brand green, a step lighter so navy text reads clearly (5.5:1) */
.zone-green { background: #8bb33a; }
.zone-pink { background: var(--color-pink); }

/* The band's own padding already spaces the topic */
.zone-color .topic {
  padding-top: 0;
}

.zone-color h3 {
  margin-bottom: var(--space-4);
}

/* Pin Template, What you earn, FAQ: big headings, a little smaller than
   THE GUIDELINES. "WHAT YOU EARN" is about 8.5 letter-heights wide, so the size
   is the sheet width divided by 8.8, up to 64px. The FAQ title wraps to two lines. */
h3.section-title {
  font-size: min(40px, calc((100vw - 2 * var(--gutter)) / 8.8));
  font-size: min(64px, calc((100cqw - 2 * var(--gutter)) / 8.8));
  line-height: 1.05;
  margin-bottom: var(--space-6);
  /* Use the full width of the sheet, not just the narrow text column */
  margin-right: min(0px, calc((100% - (100cqw - 2 * var(--gutter))) / 2));
  margin-left: min(0px, calc((100% - (100cqw - 2 * var(--gutter))) / 2));
}

.zone-color .table-wrap {
  margin-bottom: var(--space-4);
  text-align: left;
}

.zone-color td,
.zone-color .small {
  font-weight: 700;
}

.zone-color .more-list {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- The pin template picture with labels ---------- */

.template-diagram {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: var(--space-6) auto;
  font-family: var(--font-body);
}

/* Shading drawn over the picture: dark = not visible, light = side of the pin */
/* The outer ring that will not show: white with red diagonal lines */
.zone-shade-hidden {
  fill: url(#hatch-not-visible);
}

.zone-shade-side {
  fill: var(--color-navy);
  fill-opacity: 0.12;
}

/* Labels outside the pin follow the text color of the band (cream on navy) */
.diagram-callout {
  color: currentColor;
}

.diagram-callout line {
  stroke: currentColor;
  stroke-width: 3;
}

.diagram-callout circle {
  fill: currentColor;
  stroke: var(--color-navy);
  stroke-width: 3;
}

.diagram-callout text {
  fill: currentColor;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Labels inside the white front of the pin */
/* "your art goes here" in the middle of the pin */
.diagram-front-note {
  fill: var(--color-navy);
  font-size: 34px;
  font-weight: 700;
}


/* ---------- Good to know: folded rows ---------- */

.more-list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  text-align: left;
}

.more {
  border-bottom: 1px solid var(--color-line);
}

.more summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.more summary::-webkit-details-marker {
  display: none;
}

/* The small arrow. Points right when closed, down when open. */
.more summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 var(--space-1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms ease-out;
}

.more[open] summary::before {
  transform: rotate(45deg);
}

.more summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.more-body {
  padding: 0 0 var(--space-6) var(--space-8);
}

.more-body > :last-child {
  margin-bottom: 0;
}

/* Price table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
}

thead .num {
  white-space: normal;
}

th,
td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}

th:first-child,
td:first-child {
  padding-left: var(--space-3);
}

th:last-child,
td:last-child {
  padding-right: var(--space-3);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

thead th {
  background: var(--color-well);
  color: var(--color-text-2);
  font-size: var(--size-small);
  font-weight: 700;
}

tbody th {
  font-weight: 700;
}

.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* ---------- How to join ---------- */

.steps {
  display: grid;
  gap: var(--space-3);
  max-width: 440px;
  margin: var(--space-6) auto var(--space-8);
  padding-left: var(--space-6);
  text-align: left;
}

.steps li::marker {
  font-weight: 700;
}


/* ---------- Sign-up page ---------- */

.signup {
  padding-bottom: var(--section-gap);
}

.back {
  margin: 0;
  padding: var(--space-4) 0 var(--space-8);
  font-size: var(--size-small);
}

.back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.signup h1,
.signup-intro {
  text-align: center;
}

/* The wide headline font needs a smaller size to fit this longer title on phones */
.signup h1 {
  font-size: var(--size-heading);
}

@media (min-width: 720px) {
  .signup h1 {
    font-size: var(--size-title);
  }
}

.signup-intro {
  margin-bottom: var(--space-8);
}

.letter {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.letter-heading {
  font-weight: 700;
}

.letter h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.letter > :last-child {
  margin-bottom: 0;
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.field .hint {
  margin: calc(-1 * var(--space-1)) 0 0;
}

label,
.label {
  margin: 0;
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover {
  border-color: var(--color-text-2);
}

.check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: var(--space-8) 0;
}

.check input {
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.check label {
  font-weight: 400;
  cursor: pointer;
}

/* The signature pad: a canvas. touch-action: none lets a finger draw instead of scrolling the page. */
.signature-box {
  display: block;
  width: 100%;
  height: 160px;
  border: 1px dashed var(--color-control);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  touch-action: none;
  cursor: crosshair;
}

.signature-actions {
  margin: 0;
}

/* Lines "Clear signature" up with the edge of the box above it */
.signature-actions .button-ghost {
  margin-left: calc(-1 * var(--space-3));
}

/* The sign-up page sits on a wider sheet. On computers the letter and the form
   sit side by side, and the letter panel is exactly as tall as the form, so both
   end at "Sign and send". Phones and small windows stack them. */
.page-wide {
  --page-width: 1120px;
}

.signup-column {
  max-width: calc(1040px + 2 * var(--gutter));
}

.signup .signup-intro,
.signup .test-note {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@container (min-width: 900px) {
  .signup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .signup-letter-col {
    position: relative;
    min-height: 480px;
  }

  .signup-letter-col .letter {
    position: absolute;
    inset: 0;
    max-height: none;
    margin-bottom: 0;
  }
}

/* Problems to fix: red text under the field, and a red border on the field */
.field-error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1.5;
}

.field-error:empty {
  display: none;
}

.check .field-error {
  grid-column: 2;
}

input[aria-invalid="true"],
input[aria-invalid="true"]:hover,
.signature-box[aria-invalid="true"] {
  border-color: var(--color-error);
}

.check input[aria-invalid="true"] {
  outline: 2px solid var(--color-error);
  outline-offset: 1px;
}

.form-status {
  margin-top: var(--space-3);
  text-align: center;
}

.form-status.is-error {
  color: var(--color-error);
  font-weight: 700;
}

/* "Test mode" line under the intro. Delete it in sign-up.html when the letter is final. */
.test-note {
  margin: calc(-1 * var(--space-4)) 0 var(--space-8);
  color: var(--color-error);
  font-size: var(--size-small);
  font-weight: 700;
  text-align: center;
}

/* Shown after the letter is sent */
.signup-done[hidden] {
  display: none;
}

.signup-done {
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.signup-done:focus {
  outline: none;
}

.done-title {
  margin-bottom: var(--space-4);
}

.done-summary {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) 0;
  font-size: var(--size-small);
}

.done-summary > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-3);
}

.done-summary dt {
  color: var(--color-text-2);
}

.done-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


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

.site-footer {
  padding: var(--space-12) 0 var(--section-end);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-navy);
  color: #c9cadb;
  font-size: var(--size-small);
  line-height: 1.5;
  text-align: center;
}

.site-footer a {
  color: var(--color-cream);
}

.site-footer p {
  margin: 0;
}

.footer-logo {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto var(--space-6);
}

.site-footer .footer-title {
  margin-bottom: var(--space-3);
  color: var(--color-cream);
  font-size: var(--size-body);
  font-weight: 700;
}

/* Label on the left, contact on the right */
.footer-contacts {
  display: grid;
  gap: var(--space-2);
  max-width: 380px;
  margin: 0 auto;
  font-size: var(--size-body);
  text-align: left;
}

.footer-contacts > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-3);
}

.footer-contacts dt {
  font-size: var(--size-small);
  padding-top: 2px;
}

.footer-contacts dd {
  margin: 0;
  color: var(--color-cream);
  overflow-wrap: anywhere;
}

.footer-note {
  color: #c9cadb;
  font-size: var(--size-small);
}

.site-footer .footer-credit {
  max-width: 380px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(246, 241, 231, 0.2);
}

/* "Staff login": the quietest thing on the page */
.site-footer .footer-staff {
  margin: var(--space-2) 0 0;
  font-size: 12px;
}

.site-footer .footer-staff a {
  color: #9a9bb3;
  text-decoration-color: rgba(154, 155, 179, 0.5);
}

.site-footer .footer-staff a:hover {
  color: var(--color-cream);
}


/* ---------- Scroll animations ----------
   Turned on by the small script in the <head> of index.html (class "js-reveal").
   Parts with class="reveal" fade in and rise slightly the first time they
   scroll into view. The sample bundle picture also grows in slightly. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.2, 0, 0, 1);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}



/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* The thank-you popup after signing. It reuses the example popup's frame. */
.thanks-dialog .example-dialog-inner {
  padding: var(--space-6);
  text-align: left;
}

.thanks-dialog .example-dialog-title {
  font-size: var(--size-heading);
  line-height: 1.1;
}

.thanks-dialog .example-dialog-head {
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

/* The X lines up with the first line of the title */
.thanks-dialog .example-dialog-close {
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
}

.thanks-dialog .example-dialog-inner > p {
  margin: 0 0 var(--space-4);
}

.thanks-dialog .example-dialog-inner > form:last-child {
  margin: var(--space-6) 0 0;
}


/* ---------- Upload page (upload.html) ---------- */

.upload-section {
  margin-bottom: var(--space-12);
}

.upload-title {
  font-size: var(--size-body);
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

.upload-section > .hint {
  margin: 0 0 var(--space-6);
}

.upload-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

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

.upload-mine {
  margin: 0;
}

/* The 5 file pickers: square tiles that show the picked picture */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.slot {
  position: relative;
  display: grid;
  gap: var(--space-1);
  font-weight: 400;
  cursor: pointer;
}

/* The real file input sits invisibly over the tile, so tapping anywhere opens the picker */
.slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.slot-preview {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px dashed var(--color-control);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.slot-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slot:hover .slot-preview {
  border-color: var(--color-text);
}

.slot:focus-within .slot-preview {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.slot.is-ready .slot-preview,
.slot.is-sent .slot-preview {
  border-style: solid;
}

.slot.is-error .slot-preview {
  border: 1px solid var(--color-error);
}

.slot-name {
  font-size: var(--size-small);
  font-weight: 700;
}

.slot-state {
  color: var(--color-text-2);
  font-size: var(--size-small);
  line-height: 1.3;
}

.slot.is-error .slot-state {
  color: var(--color-error);
  font-weight: 700;
}

input[type="file"] {
  max-width: 100%;
  font: inherit;
  font-size: var(--size-small);
}

input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-control);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

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


/* ---------- Staff page (admin.html) ----------
   A full-screen work page: a navy top bar, 4 count tiles that are also filters,
   a search box, and one row per sign-up that opens to show details and designs. */

/* Text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The staff page fills the screen in cream, with no orange edges */
html:has(body.staff),
body.staff {
  background: var(--color-page);
}

.staff-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--space-6);
  background: var(--color-navy);
  color: var(--color-cream);
}

.staff-brand {
  display: inline-flex;
}

.staff-brand img {
  display: block;
  width: auto;
  height: 36px;
}

.staff-top-label {
  padding-left: var(--space-4);
  border-left: 1px solid rgba(246, 241, 231, 0.3);
  font-weight: 700;
}

.staff-top-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--size-small);
}

.staff-top-user[hidden] {
  display: none;
}

.staff-top-name {
  margin-right: var(--space-2);
  color: #c9cadb;
}

.staff-top-name strong {
  color: var(--color-cream);
}

.staff-top-button {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(246, 241, 231, 0.35);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-cream);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.staff-top-button:hover {
  background: rgba(246, 241, 231, 0.1);
}

.staff-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* Log in */
.staff-login {
  max-width: 420px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.staff-login-title,
.staff-title {
  margin-bottom: var(--space-2);
  font-size: var(--size-heading);
}

.staff-title {
  margin-bottom: var(--space-6);
}

.staff-login .form {
  margin-top: var(--space-6);
}

.staff-login-back {
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* The 4 count tiles. The one that is on has a navy outline. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-tile {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 120ms ease-out;
}

.stat-tile:hover {
  box-shadow: inset 0 0 0 1px var(--color-control);
}

.stat-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--color-navy);
}

.stat-label {
  font-size: var(--size-small);
  font-weight: 700;
}

.stat-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-note {
  color: var(--color-text-2);
  font-size: 13px;
  line-height: 1.4;
}

.stat-tile.is-late .stat-note {
  color: var(--color-error);
  font-weight: 700;
}

/* Search and "Showing 3 of 8" */
.staff-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-2);
}

.staff-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
  color: var(--color-text-2);
  font-weight: 400;
}

.staff-search svg {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.staff-search input {
  min-height: 44px;
  padding-left: 40px;
  font-size: var(--size-small);
}

.staff-showing {
  margin: 0 0 0 auto;
}

.admin-status {
  min-height: 1.5em;
  margin: 0 0 var(--space-3);
  text-align: left;
}

.small.is-error {
  color: var(--color-error);
  font-weight: 700;
}

/* The list: one bordered table, a row per artist */
.srows {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.srows:has(.staff-empty) {
  border: 0;
  background: none;
}

.srow-titles,
.srow-head {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1.1fr) minmax(150px, 1.4fr) 72px 104px 72px 20px;
  gap: var(--space-4);
  align-items: center;
  padding: 0 var(--space-6);
}

.srow-titles {
  min-height: 40px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-well);
  color: var(--color-text-2);
  font-size: 12px;
  font-weight: 700;
}

.srow + .srow {
  border-top: 1px solid var(--color-line);
}

.srow-head {
  width: 100%;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.srow-head:hover,
.srow.is-open .srow-head {
  background: rgba(43, 44, 73, 0.04);
}

.srow-head:focus-visible {
  outline-offset: -2px;
}

.srow-artist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.srow-artist strong {
  overflow-wrap: anywhere;
}

.srow-full,
.srow-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srow-email {
  color: var(--color-text-2);
}

.srow-date,
.srow-wait {
  font-variant-numeric: tabular-nums;
}

.srow-wait.is-late {
  color: var(--color-error);
  font-weight: 700;
}

.srow-chevron {
  display: inline-flex;
  color: var(--color-text-2);
  transition: transform 150ms ease-out;
}

.srow.is-open .srow-chevron {
  transform: rotate(180deg);
}

.srow-body {
  padding: var(--space-2) var(--space-6) var(--space-6);
  background: rgba(43, 44, 73, 0.04);
}

.srow-body[hidden] {
  display: none;
}

/* Grey placeholder rows while the list loads */
.srow-skeleton {
  height: 56px;
  margin: var(--space-3) var(--space-6);
  border-radius: var(--radius-control);
  background: var(--color-well);
}

.srow-skeleton + .srow-skeleton {
  border-top: 0;
}

/* Phones: each row becomes two lines, artist and status on top, name and wait below */
@media (max-width: 760px) {
  .staff-top {
    padding: var(--space-2) var(--space-4);
  }

  .staff-top-name {
    display: none;
  }

  .staff-main {
    padding: var(--space-6) var(--space-4) var(--space-12);
  }

  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .stat-tile {
    padding: var(--space-3) var(--space-4);
  }

  .stat-value {
    font-size: 32px;
  }

  .staff-showing {
    margin-left: 0;
  }

  .srow-titles {
    display: none;
  }

  .srow-head {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    grid-template-areas:
      "artist status chevron"
      "full wait chevron";
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .srow-artist { grid-area: artist; }
  .srow-full { grid-area: full; color: var(--color-text-2); font-size: var(--size-small); }
  .srow-status { grid-area: status; justify-self: end; }
  .srow-wait { grid-area: wait; justify-self: end; font-size: var(--size-small); }
  .srow-chevron { grid-area: chevron; }

  .srow-email,
  .srow-date {
    display: none;
  }

  .srow-body {
    padding: var(--space-2) var(--space-4) var(--space-6);
  }
}

/* Details inside an open row */
.staff-details {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--size-small);
}

.staff-details > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: var(--space-3);
}

.staff-details dt {
  color: var(--color-text-2);
}

.staff-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.tag {
  padding: 2px var(--space-2);
  border-radius: 9999px;
  background: var(--color-well);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.tag-accepted {
  background: rgba(116, 158, 37, 0.22);
}

.tag-declined {
  color: var(--color-text-2);
}

.tag-new {
  background: rgba(235, 102, 72, 0.18);
}

.tag-test {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-error);
  color: var(--color-error);
}

.button-small {
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-small);
}

.staff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.staff-actions .button {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: 15px;
}

.staff-decided {
  flex-basis: 100%;
  margin: 0;
}

.staff-replied {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  margin-left: auto;
  font-size: var(--size-small);
  cursor: pointer;
}

.staff-replied input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.staff-uploads {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.staff-upload-line {
  margin: 0 0 var(--space-2);
  font-size: var(--size-small);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-3);
}

.thumbs:not(:empty) {
  margin: var(--space-3) 0 var(--space-4);
}

.thumb {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

.thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-page);
}

.thumb:hover img {
  border-color: var(--color-control);
}

.thumb-skeleton {
  aspect-ratio: 1;
  border-radius: var(--radius-panel);
  background: var(--color-well);
  cursor: default;
}

.thumb-caption {
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.staff-empty {
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  text-align: center;
}

.staff-empty-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* Staff page filter bar: search and 5 dropdowns on one even row */
.staff-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}

.staff-filters .staff-search {
  max-width: none;
}

.filter-field select {
  width: 100%;
}

@media (max-width: 1100px) {
  .staff-filters {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .staff-filters .staff-search {
    grid-column: 1 / -1;
  }
}

.filter-field {
  display: grid;
  gap: var(--space-1);
  font-weight: 400;
}

.filter-field > span {
  color: var(--color-text-2);
  font-size: 12px;
  font-weight: 700;
}

.filter-field select {
  min-height: 44px;
  padding: 0 36px 0 var(--space-3);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-control);
  /* The small down arrow, drawn in navy */
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232b2c49' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--color-text);
  font: inherit;
  font-size: var(--size-small);
  appearance: none;
  cursor: pointer;
}

.filter-field select:hover {
  border-color: var(--color-text-2);
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--size-small);
  font-weight: 400;
  cursor: pointer;
}

.filter-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.staff-tools {
  margin: 0 0 var(--space-2);
}

.staff-tools .staff-showing {
  flex: 1 1 auto;
  margin: 0;
}

.staff-tools .button[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .staff-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-tools .staff-showing {
    flex-basis: 100%;
  }
}

/* The signed letter popup: the PDF pages, stacked, in a scrolling grey well */
.letter-dialog {
  width: min(760px, calc(100vw - 2 * var(--space-4)));
}

.letter-dialog .example-dialog-inner {
  text-align: left;
}

.letter-dialog .example-dialog-head {
  margin-bottom: var(--space-2);
}

.letter-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.letter-pages {
  display: grid;
  gap: var(--space-3);
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  padding: var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--color-well);
}

.letter-pages > p {
  margin: 0;
}

.letter-page {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  background: #fff;
}