/* Faith Minute — the feedback board at /feedback.
 *
 * Loaded after `home.css`, which it leans on for everything shared: the
 * palette, the type, the masthead, the footer, the paper grain. Only what is
 * particular to a board lives here — the two columns, the composer, a post
 * and its votes.
 *
 * The board is one long cream page rather than alternating bands. The bands
 * are the landing page's argument, made once; this is a place to read a list
 * and press things in, and changing the ground under a list of posts would be
 * decoration doing no work.
 */

/* ---- the two grounds ---------------------------------------------------- */

/* The landing page is pinned to cream: its bands alternate, and that sequence
 * is the art direction. This page has no sequence to protect — it is a list
 * you sit with — so it gets the switch instead, and the app's dark palette
 * behind it, token for token.
 *
 * The switch, not the system: `prefers-color-scheme` is not consulted, because
 * a reader who presses the button on this page has said something more
 * specific than their laptop did at sunset. `feedback.html` reads the choice
 * back before the first paint.
 */

:root[data-theme='dark'] {
  color-scheme: dark;

  --background: #1a1817;
  --surface: #221f1a;
  --sand: #2f2b28;
  --border: #322d27;
  --text: #fcf9f6;
  --text-secondary: #9c948e;
  --text-muted: #8a837d;
  --accent: #7c90b8;
  --accent-counter: #d98c4a;
  --on-inverted: #221f1a;
  --track: #2f2b28;
  --callout: rgba(124, 144, 184, 0.1);
  --chip: rgba(124, 144, 184, 0.3);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* The bar wears the ground the page does not. On cream it is the near-black
 * of the app's dark theme; on near-black it is the cream. It is the one thing
 * on the page that is always the other thing, which is what makes the switch
 * legible before you have read the word on it. */
:root {
  --bar: #1a1817;
  --bar-ink: #fcf9f6;
  --bar-line: #322d27;
}

:root[data-theme='dark'] {
  --bar: #fbf8f3;
  --bar-ink: #221f1a;
  --bar-line: #dcd6cc;
}

.masthead {
  background: var(--bar);
  background: color-mix(in srgb, var(--bar) 70%, transparent);
  border-color: var(--bar-line);
  color: var(--bar-ink);
}

.masthead .brand {
  color: var(--bar-ink);
}

/* One of the two marks, whichever the bar is not. */
.mark-on-light,
:root[data-theme='dark'] .mark-on-dark {
  display: none;
}

:root[data-theme='dark'] .mark-on-light {
  display: block;
}

.mark-on-dark {
  display: block;
}

/* The way back, for a reader who came here from the page rather than from a
 * link someone sent them. The mark does the same thing, but a mark is a thing
 * you have to already know is a link. */
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--bar-ink);
  font-size: 0.9375rem;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.nav-back:hover {
  opacity: 1;
}

.nav-back svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 30rem) {
  .nav-back {
    /* The arrow alone. The bar is not wide enough for both this and the
     * switch once the words are on them. */
    font-size: 0;
    gap: 0;
  }

  .nav-back svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* ---- the switch --------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--bar-ink) 30%, transparent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--bar-ink);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--bar-ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--bar-ink) 55%, transparent);
}

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
}

/* The icon shows what pressing it would do, not what is on. */
.theme-sun {
  display: none;
}

:root[data-theme='dark'] .theme-sun {
  display: block;
}

:root[data-theme='dark'] .theme-moon {
  display: none;
}

@media (max-width: 30rem) {
  .theme-word {
    display: none;
  }

  .theme-toggle {
    padding: 0.45rem;
  }
}

/* ---- the page ----------------------------------------------------------- */

/* The masthead is sticky, so it still takes its 88px out of the flow before
 * this padding starts. 8rem on top of that left the title most of a screen
 * below the bar. */
.board-page {
  padding: 3.5rem 0 var(--band);
}

.page-title {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(2.2rem, 5vw, 3rem);
}

.board-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 56rem) {
  .board-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the shared card --------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* ---- who you are ------------------------------------------------------- */

.board-side {
  display: grid;
  gap: 1.5rem;
  /* Follows the reader down the list on a screen tall enough to hold it. */
  position: sticky;
  top: 7rem;
}

@media (max-width: 56rem) {
  .board-side {
    position: static;
  }
}

.auth {
  padding: 1.25rem;
}

.auth-lead {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.auth-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.auth-error {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-small);
  background: rgba(139, 56, 56, 0.12);
  color: #8b3838;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.field {
  display: block;
  margin-bottom: 0.75rem;
}

.field span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

input,
textarea,
select {
  font: inherit;
  color: var(--text);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 0.55rem 0.7rem;
  width: 100%;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- buttons ----------------------------------------------------------- */

/* The app's primary button: the text colour as a fill, the page's background
 * read back as the label. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--background);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.9;
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-quiet {
  width: auto;
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

/* The two ways out of the code screen, side by side rather than stacked —
 * they are alternatives to each other, not steps. */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.link-button {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button:disabled {
  color: var(--text-muted);
  text-decoration: none;
  cursor: default;
}

/* ---- the two boards ---------------------------------------------------- */

.boards {
  display: grid;
  gap: 0.15rem;
}

.side-label {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.board-link {
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.board-link:hover {
  color: var(--text);
}

.board-link.is-current {
  background: var(--track);
  color: var(--text);
  font-weight: 500;
}

.side-foot {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.side-foot a {
  color: var(--accent);
}

/* ---- collections (ours) ------------------------------------------------ */

/* Filed, not published: this whole block is hidden unless the account signed
 * in is one of ours, and the rows behind it come back empty for anyone else
 * even when it is not. It reads as part of the sidebar rather than as a panel
 * bolted onto it — a second list of places to look, under the first. */
/* Both of these set `display`, which beats the browser's own `[hidden]` rule
 * on specificity. Without this the sidebar block would sit there for every
 * reader and every filing menu would be open at once. */
.collections[hidden],
.collection-menu[hidden] {
  display: none;
}

.collections {
  display: grid;
  gap: 0.15rem;
  justify-items: start;
  margin-top: 1.5rem;
}

.collection-list {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.collection-link {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  /* A collection can be called anything, and something long should push the
   * board about no more than something short. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.collection-link:hover {
  color: var(--text);
}

.collection-link.is-current {
  background: var(--track);
  color: var(--text);
  font-weight: 500;
}

/* Kept quiet until the row is under the cursor: it is a delete, and a column
 * of them down the sidebar would be the loudest thing on the page. */
.collection-drop {
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.collection-row:hover .collection-drop,
.collection-drop:focus-visible {
  opacity: 1;
}

.collection-drop:hover {
  color: #8b3838;
}

/* ---- the board --------------------------------------------------------- */

.board-main {
  display: grid;
  gap: 1.25rem;
}

.board-main h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.composer {
  padding: 1.25rem;
}

.composer-title {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.composer-title::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.composer-label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.composer-details {
  resize: vertical;
}

/* ---- pictures ----------------------------------------------------------- */

/* What is attached but not yet posted. Square thumbnails, because a row of
 * them at their own aspect ratios reads as a mess rather than as a set. */
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.attachments:empty {
  display: none;
}

.attachment {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment button {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 24, 23, 0.72);
  color: #fcf9f6;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.attachment button:hover {
  background: rgba(26, 24, 23, 0.9);
}

.button-icon {
  padding: 0.55rem;
}

.button-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* On a post. Bigger than the composer's, because here they are the point. */
.post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.post-images a {
  display: block;
  width: 7rem;
  height: 7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.post-images a:hover {
  border-color: var(--accent);
}

.post-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.composer-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.composer-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.composer-actions .button {
  width: auto;
}

/* ---- the list ---------------------------------------------------------- */

/* No `overflow: hidden` here, tempting as it is for the toolbar's rule: the
 * pickers' lists hang out of this card and would be cut off at its edge. The
 * rows inside have no corners of their own to clip anyway. */
.board-list {
  position: relative;
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- the pickers -------------------------------------------------------- */

/* A `<select>` and its own list, rather than the native one. The popup a
 * browser draws is the operating system's: square corners, a hard blue bar on
 * the selected row, and nothing about it reachable from a stylesheet. This is
 * the same control with the list drawn by the page, so the selected row can be
 * the accent at a wash and the corners can be the app's own. */
.picker {
  position: relative;
}

.picker-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.3;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.picker-button:hover,
.picker-button[aria-expanded='true'] {
  border-color: var(--accent);
}

.picker-button svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.picker-button[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.picker-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.picker-list li {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.picker-list li:hover {
  background: var(--track);
  color: var(--text);
}

/* The chosen one, in the accent at a wash — light orange on the cream page,
 * and the slate the dark palette swaps it for on the other. */
.picker-list li[aria-selected='true'] {
  background: var(--chip);
  color: var(--text);
  font-weight: 500;
}

.toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 12rem;
  margin-left: auto;
}

.toolbar-search svg {
  position: absolute;
  left: 0.7rem;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

.toolbar-search input {
  padding-left: 2.1rem;
  font-size: 0.875rem;
}

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.posts-state {
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
}

.post + .post {
  border-top: 1px solid var(--border);
}

/* The arrow and its tally, as one control. Pressing it a second time takes
 * the vote back, which is what `aria-pressed` is there to say. */
.vote {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  align-self: start;
  min-width: 2.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--background);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.vote:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

.vote:disabled {
  cursor: not-allowed;
}

.vote[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--callout);
  color: var(--accent);
}

.vote svg {
  width: 0.85rem;
  height: 0.85rem;
}

.vote-count {
  font-weight: 500;
}

.post-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.post-details {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ---- shut and open ------------------------------------------------------ */

/* A board is a list you scan before it is a thing you read. Shut, a post is
 * its title, two lines of what it is about and who asked — enough to know
 * whether it is yours. Open, it is the whole of it: the rest of the words,
 * the pictures, and the comments under them. */
.post-body {
  cursor: pointer;
}

.post.is-open .post-body {
  cursor: default;
}

.post:not(.is-open) .post-details {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The pictures are the weight on the row. Two posts with four screenshots
 * each would be the whole screen before a third one is reached. */
.post:not(.is-open) .post-images {
  display: none;
}

/* The one control that says out loud what the row does, for a reader who is
 * not going to discover it by pressing the paragraph. */
.post-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}

.post-toggle svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 0.2s ease;
}

.post.is-open .post-toggle svg {
  transform: rotate(180deg);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.post-meta button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.post-meta button:hover {
  color: var(--text);
}

/* ---- the strip only we see --------------------------------------------- */

/* Under the meta, inside the post, marked off by a dashed rule: everything
 * above it is the post as the board shows it, everything on it is ours. The
 * dashes rather than a solid line because it is not a section of the post —
 * it is the page admitting who is reading it. */
.admin-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-status select {
  width: auto;
  padding: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}

.admin-filing {
  position: relative;
}

.admin-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 18rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.admin-file:hover,
.admin-file[aria-expanded='true'] {
  border-color: var(--accent);
  color: var(--text);
}

.admin-file svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

/* Over the post rather than inside its flow: a menu that pushes the comments
 * down every time it opens makes the list jump under the hand. */
.collection-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  gap: 0.1rem;
  min-width: 13rem;
  max-height: 15rem;
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.collection-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.collection-option:hover {
  background: var(--track);
  color: var(--text);
}

/* The tick is always there, holding its own width, so the names line up
 * whether or not the post is in that collection. */
.collection-option .tick {
  flex: none;
  width: 0.9rem;
  color: var(--accent);
  visibility: hidden;
}

.collection-option[aria-pressed='true'] {
  color: var(--text);
}

.collection-option[aria-pressed='true'] .tick {
  visibility: visible;
}

.collection-add {
  margin-top: 0.1rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--accent);
}

.collection-empty {
  padding: 0.4rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Only the statuses we set by hand show a chip. `open` is where every post
 * starts, and a chip saying so on every row would say nothing. */
.status-chip {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-complete {
  background: rgba(62, 113, 53, 0.15);
  color: #3e7135;
}

.status-declined {
  background: rgba(139, 56, 56, 0.12);
  color: #8b3838;
}

/* ---- asking first ------------------------------------------------------- */

.modal {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

.modal::backdrop {
  background: rgba(26, 24, 23, 0.45);
  backdrop-filter: blur(2px);
}

.modal-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.modal-body {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* The dialogs that ask for a word rather than a yes: the field wants air
 * under the heading that the confirm box's paragraph brings with it. */
.modal form {
  margin-top: 1.25rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.modal-actions .button {
  width: auto;
}

/* The one button on the site that undoes something. It says so in the app's
 * own red — the colour a wrong quiz answer is marked in — rather than in the
 * accent, which everywhere else means "press me". */
.button-danger {
  background: #8b3838;
  color: #fcf9f6;
}

/* ---- comments ---------------------------------------------------------- */

.thread {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.comment + .comment {
  margin-top: 0.9rem;
}

/* An answer from us, marked so it is legible as one before it is read: the
 * accent down the left edge, the name in it, and the word Team on the end for
 * anyone who cannot see the colour. */
.comment-team {
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-small);
  background: var(--callout);
}

.comment-team .comment-head strong {
  color: var(--accent);
  font-weight: 700;
}

.team-badge {
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.comment-head {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.comment-head strong {
  color: var(--text);
  font-weight: 600;
}

/* At the end of the line the comment is already signed and dated, in the same
 * muted grey, so it reads as part of that line rather than as a button sitting
 * on the reply. Red only under the cursor, where the press is about to be. */
/* Beside the byline it takes the name out of, in the same muted grey as the
 * rest of the line. Not red: nothing is being destroyed here — the comment
 * stays, and only the signature goes. */
.comment-forget {
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.comment-forget:hover {
  color: var(--text);
}

.comment-drop {
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.comment-drop:hover {
  color: #8b3838;
}

.comment-body {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ---- what can be done to a comment ------------------------------------- */

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* The vote arrow again, in miniature and lying on its side: pressed is liked,
 * and the heart fills rather than changing shape. */
.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.comment-like:hover:not(:disabled) {
  border-color: var(--border);
  color: var(--text);
}

.comment-like:disabled {
  cursor: not-allowed;
}

.comment-like[aria-pressed='true'] {
  background: var(--callout);
  color: var(--accent);
}

.comment-like svg {
  width: 0.85rem;
  height: 0.85rem;
}

.comment-like[aria-pressed='true'] svg {
  fill: currentColor;
}

.comment-reply {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.comment-reply:hover {
  color: var(--text);
}

/* ---- answers to a comment ---------------------------------------------- */

/* One level deep and marked by the line down its left, which is the only
 * thing saying these belong to the comment above rather than to the post. The
 * indent is small on purpose: threads that step in a centimetre a time run off
 * the side of a phone by the third one, and there is no third one here. */
.comment-replies {
  margin-top: 0.9rem;
  margin-left: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border);
}

.comment-replies .comment + .comment {
  margin-top: 0.9rem;
}

/* A reply inside a team comment would otherwise take the accent line as its
 * own; it is answering us, not part of us. */
.comment-team .comment-replies {
  border-left-color: var(--border);
}

.comment-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Under the comment it answers rather than at the foot of the thread, so the
 * indent is what says which one is being replied to. */
.comment-form-reply {
  margin-top: 0.75rem;
  margin-left: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}

.comment-form textarea {
  rows: 1;
  min-height: 2.6rem;
  resize: vertical;
}

.comment-form .button {
  width: auto;
  align-self: flex-end;
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .comment-form {
    flex-direction: column;
  }

  .comment-form .button {
    width: 100%;
    align-self: stretch;
  }
}