/* --------------------------------------------------------------------------
   Support — known-issues board, feedback form, FAQ
   -------------------------------------------------------------------------- */
.issue-board {
  display: grid;
  gap: 0.9rem;
  margin-block: 1.6rem;
}
.issue-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem 1.2rem;
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 1rem 1.3rem;
}
/* A light page lifts a card with a shadow where a dark page lifts it with a
   brighter fill. Without this the rows are cream on cream and the board reads
   as a run of sentences. --shadow-1 is already tuned per theme. */
[data-theme="daylight"] .issue-row {
  box-shadow: var(--shadow-1);
}
.issue-ref {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}
.issue-row p {
  margin: 0;
}
.issue-row .issue-meta {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The board region is filled by assets/js/board.js from /api/issues; it holds
   only a placeholder until the fetch answers. min-height reserves roughly one
   row so the FAQ below does not jump up and then back down as it lands. */
.issue-region {
  min-height: 7rem;
}
.issue-loading {
  margin-block: 1.6rem;
}

/* Board pages. 20 rows at a time, drawn by assets/js/board.js from one
   already-fetched list — see the note there on why paging is not an API. */
.issue-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block: 1.6rem;
}
.issue-pager .btn {
  padding: 0.7em 1.3em;
  font-size: 0.66rem;
}
.issue-pager .btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.issue-page-of {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.issue-empty {
  border: 1px dashed var(--bdr2);
  border-radius: 6px;
  padding: 1.6rem 1.5rem;
  margin-block: 1.6rem;
}
.issue-empty .mono {
  color: var(--green);
  display: block;
  margin-bottom: 0.4rem;
}
.issue-empty p {
  margin: 0;
  color: var(--muted);
}

/* feedback form (hidden until a host that can receive it is live) */
.feedback-form {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin-block: 1.4rem;
}
.feedback-form label {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--field-bg);
  border: 1px solid var(--field-bdr);
  border-radius: 4px;
  color: var(--field-fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  box-shadow: var(--field-shadow);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.feedback-form input::placeholder,
.feedback-form textarea::placeholder {
  color: var(--field-ph);
  opacity: 1;                     /* Firefox dims placeholders by default */
}
.feedback-form input:hover,
.feedback-form select:hover,
.feedback-form textarea:hover {
  border-color: var(--field-bdr-hover);
}
/* was `outline: none`, which cancelled the site-wide focus ring and left a
   1px colour swap as the only focus signal */
.feedback-form input:focus-visible,
.feedback-form select:focus-visible,
.feedback-form textarea:focus-visible {
  outline: 2px solid var(--field-bdr-focus);
  outline-offset: 1px;
  border-color: var(--field-bdr-focus);
  box-shadow: var(--field-shadow), var(--field-ring);
}
.feedback-form textarea {
  min-height: 8rem;
  resize: vertical;
}
/* Chrome autofill would otherwise repaint the field pale blue */
.feedback-form input:-webkit-autofill,
.feedback-form input:-webkit-autofill:hover,
.feedback-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--field-fg);
  caret-color: var(--field-fg);
  box-shadow: inset 0 0 0 100px var(--field-bg), var(--field-shadow);
}
/* Character counter — hidden until 80% of the limit (assets/js/report.js).
   Ordinary muted text; it turns to the warning colour only in the last 5%,
   so it informs rather than nags. */
.field-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: none;
}
.field-count.is-tight {
  color: var(--accent-2-ink);
}

.feedback-form .optional-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* FAQ */
.faq {
  display: grid;
  gap: 0.8rem;
  margin-block: 1.6rem;
}
.faq details {
  background: var(--paper);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.3rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--bright);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  margin-right: 0.7rem;
}
.faq details[open] summary::before {
  content: "−";
}
.faq details p {
  margin: 0;
  padding: 0 1.3rem 1.1rem 2.6rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Press assets
   -------------------------------------------------------------------------- */
.asset-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
  margin-block: 1.8rem;
}
.asset {
  background: var(--paper);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 1rem;
}
.asset img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--bdr);
  background: #16181f;
}
.asset figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.asset a {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  /* 57x18 before this, under the 24x24 the AA target-size rule asks for. The
     figcaption aligns on `baseline`, so vertical padding here grows the target
     without shifting the label beside it off its line. */
  padding-block: 0.35rem;
}
@media (pointer: coarse) {
  .asset a { padding-block: 0.75rem; }
}