@charset "UTF-8";
/* ==========================================================================
   BUILT & LAUNCHED — Ask the Fleet
   Loaded only by /ask.php, /ask-new.php, /question.php and the two admin
   screens, in the manner of dock.css and vessel-likes.css.

   IT INTRODUCES NO COLOUR AND NO TYPEFACE. Every value below is a token from
   section 01 of site.css — the same navy, the same brass, the same Cormorant
   and Inter, the same 2px radius and the same two shadows. A help desk that
   looked like a different website would be a different website, and this one
   in particular must not look like a forum: no bright accent, no vote arrows,
   no avatar wall, no rounded-corner reply bubbles.

   THE OUTCOME IS THE ONLY THING ON THE PAGE THAT GETS A FRAME. That is the
   whole visual argument. Answers are set as prose with a hairline above them;
   the documented outcome is set on cream, inside a brass rule, above them all.
   A reader glancing at a question page should see what happened before they
   see anything else, including any number.

   Mobile-first, like the rest of the sheet: every breakpoint is min-width, and
   the two-column layout only exists from 64em. Below that the feed is the page
   and the side modules follow it, which is the right reading order — you came
   for the questions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The two columns
   -------------------------------------------------------------------------- */

.ask-layout {
  display: grid;
  gap: var(--space-7);
  /* minmax(0, 1fr), never the default `auto`: a long unbroken tag or a
     placename in a byline would otherwise refuse to shrink and push the
     column wider than the viewport. The same note as dock.css. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64em) {
  .ask-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
  .ask-layout__aside { position: sticky; top: var(--scroll-offset, 5.5rem); }
  /* The question page's side column is short and its main column is very
     long, so sticking it would leave a pane of white for most of the scroll. */
  .ask-layout--question .ask-layout__aside { position: static; }
}

.ask-layout__main { min-width: 0; }
.ask-layout__aside { min-width: 0; }

/* --------------------------------------------------------------------------
   The head
   -------------------------------------------------------------------------- */

.ask-view-blurb {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--gray-text);
  font-size: var(--text-sm);
}

.ask-views { margin-bottom: var(--space-4); }

.ask-narrowed {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--brass-hairline);
  border-bottom: 1px solid var(--brass-hairline);
}

.ask-narrowed__title {
  font-size: var(--text-xl);
  margin: var(--space-2) 0 var(--space-2);
}

.ask-narrowed__blurb { color: var(--gray-text); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   Status labels

   NEVER COLOUR ALONE. Each carries its word, and the sentence explaining it is
   in `title` and in a visually-hidden span beside it. The tones below only
   reinforce something already written down.
   -------------------------------------------------------------------------- */

.ask-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.ask-label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gray-text);
  background: transparent;
}

.ask-label--brass { color: var(--brass-text); border-color: var(--brass); }
.ask-label--navy  { color: var(--navy); border-color: var(--navy-hairline); }
.ask-label--wood  { color: var(--wood); border-color: rgba(128, 85, 47, 0.4); }
.ask-label--quiet { color: var(--gray-text); }

/* --------------------------------------------------------------------------
   A question card
   -------------------------------------------------------------------------- */

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

.ask-feed__item + .ask-feed__item { margin-top: var(--space-5); }

.ask-card {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-lift), border-color var(--transition);
}

.ask-card:hover { box-shadow: var(--shadow-lift); border-color: var(--brass-hairline); }

@media (min-width: 40em) {
  .ask-card { grid-template-columns: 8rem minmax(0, 1fr); align-items: start; }
  .ask-card:not(:has(.ask-card__frame)) { grid-template-columns: minmax(0, 1fr); }
}

/* A brass edge on the ones that ended in something. It is reinforcement, not
   information: BUILDER TESTED is printed as a word inside the card. */
.ask-card--tested { border-left: 3px solid var(--brass); }
.ask-card--solved { border-left: 3px solid var(--brass-hairline); }

.ask-card__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ivory);
  aspect-ratio: 4 / 3;
}

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

.ask-card__body { min-width: 0; }

.ask-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.ask-card__link { text-decoration: none; color: var(--navy); }
.ask-card__link:hover { color: var(--brass-text); text-decoration: underline; }

.ask-card__excerpt {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ask-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--gray-text);
}

.ask-card__sep { color: var(--brass-hairline); }
.ask-card__category { color: var(--gray-text); }

.ask-card--compact { padding: var(--space-4); }
.ask-card--compact .ask-card__title { font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   Context chips — the vessel, the design, the phase, the tags
   -------------------------------------------------------------------------- */

.ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.ask-chip { margin: 0; }

.ask-chip__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  background: var(--ivory);
  font-size: var(--text-xs);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

a.ask-chip__link:hover { background: var(--brass-soft); border-color: var(--brass); }

.ask-chip__note {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

.ask-chip__count { color: var(--gray-text); font-variant-numeric: tabular-nums; }
.ask-chip--tag .ask-chip__link { background: transparent; }

/* --------------------------------------------------------------------------
   The question page
   -------------------------------------------------------------------------- */

.ask-question__title { margin-bottom: var(--space-4); }

.ask-question__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.ask-question__byline-text { display: flex; flex-direction: column; gap: 0.15rem; }
.ask-question__asker { font-size: var(--text-sm); }
.ask-question__dates { font-size: var(--text-xs); color: var(--gray-text); }
.ask-question__edited { color: var(--gray-text); }

.ask-question__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--brass-hairline);
}

.ask-question__follow-note,
.ask-question__report,
.ask-question__moderate {
  font-size: var(--text-xs);
  color: var(--gray-text);
}

.ask-question__body {
  font-size: var(--text-lg);
  line-height: 1.75;
  max-width: 40em;
}

.ask-question__body p { margin-bottom: var(--space-4); }

.ask-facts {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--ivory);
  border-left: 2px solid var(--brass-hairline);
}

.ask-facts dt {
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

.ask-facts dd { margin: 0.15rem 0 var(--space-3); }
.ask-facts dd:last-child { margin-bottom: 0; }

.ask-duplicate {
  padding: var(--space-5) 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--brass-hairline);
}

.ask-duplicate__text { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.ask-duplicate__note { font-size: var(--text-xs); color: var(--gray-text); margin: var(--space-3) 0 0; }

/* --------------------------------------------------------------------------
   Photographs
   -------------------------------------------------------------------------- */

.ask-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
}

.ask-gallery__item { margin: 0; }

.ask-gallery__link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
  background: var(--ivory);
}

.ask-gallery__link img { width: 100%; height: auto; display: block; }

.ask-gallery__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--gray-text);
  line-height: 1.5;
}

.ask-video {
  position: relative;
  margin: var(--space-5) 0;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
}

.ask-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   THE OUTCOME

   The one framed block on the page, and the only one set on cream inside a
   brass rule. Everything else on a question page is prose with a hairline.
   -------------------------------------------------------------------------- */

.ask-outcome {
  margin: var(--space-7) 0;
  background: var(--cream);
  border: 1px solid var(--brass-hairline);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.ask-outcome--tested { border-top-width: 4px; }

.ask-outcome__inner { padding: var(--space-6) var(--space-5); }

@media (min-width: 40em) {
  .ask-outcome__inner { padding: var(--space-7) var(--space-6); }
}

.ask-outcome__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: var(--space-2) 0 var(--space-2);
}

.ask-outcome__note { color: var(--gray-text); font-size: var(--text-sm); margin-bottom: var(--space-5); }

.ask-outcome__heading {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0 0 var(--space-2);
}

.ask-outcome__answer { margin-bottom: var(--space-6); }

.ask-outcome__quote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--brass-hairline);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--ink);
}

.ask-outcome__attrib {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
}

.ask-outcome__jump { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

.ask-outcome__record { padding-top: var(--space-5); border-top: 1px solid var(--brass-hairline); }

.ask-outcome__text {
  font-size: var(--text-lg);
  line-height: 1.75;
  max-width: 40em;
}

.ask-outcome__date { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--gray-text); }

.ask-outcome__prompt {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  background: var(--ivory);
  border-left: 2px solid var(--brass);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Answers
   -------------------------------------------------------------------------- */

.ask-answers { margin-top: var(--space-8); }

.ask-answers__head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--brass-hairline);
  margin-bottom: var(--space-5);
}

.ask-answers__title { margin: 0; font-size: var(--text-xl); }
.ask-answers__blurb { margin: var(--space-2) 0 0; color: var(--gray-text); font-size: var(--text-sm); }

.ask-answers__list { list-style: none; margin: 0; padding: 0; }
.ask-answers__item + .ask-answers__item { margin-top: var(--space-6); }

.ask-answer { padding-bottom: var(--space-5); border-bottom: 1px solid var(--navy-hairline); }

.ask-answer--selected {
  padding: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--brass-hairline);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}

.ask-answer--hidden { opacity: 0.72; }

.ask-answer__mark { margin: 0 0 var(--space-3); }

.ask-answer__withheld {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--ivory);
  border-left: 2px solid var(--wood);
  font-size: var(--text-sm);
}

.ask-answer__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.ask-answer__byline { min-width: 0; }
.ask-answer__author { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.ask-answer__meta { margin: 0.15rem 0 0; font-size: var(--text-xs); color: var(--gray-text); }
.ask-answer__edited { color: var(--gray-text); }

.ask-answer__body { font-size: var(--text-base); line-height: 1.75; max-width: 40em; }
.ask-answer__body p { margin-bottom: var(--space-4); }

.ask-answer__foot { margin-top: var(--space-4); }

.ask-answer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ask-answer__edit,
.ask-answer__report,
.ask-answer__moderate {
  font-size: var(--text-xs);
  color: var(--gray-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--brass-hairline);
  font-family: var(--font-sans);
}

.ask-answer__moderate:hover { color: var(--brass-text); }

.ask-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--brass-hairline);
  border-radius: 50%;
  background: var(--ivory);
}

.ask-avatar--lg { width: 3rem; height: 3rem; }
.ask-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ask-avatar__initials {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--brass-text);
}

/* The experience row. Facts, set small and quiet — never a score, and styled
   so it can never be mistaken for one. */
.ask-experience {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs);
  color: var(--brass-text);
}

.ask-experience__sep { color: var(--brass-hairline); }

/* --------------------------------------------------------------------------
   Helpful acknowledgments

   A button, not a vote. No arrow, no score column, no rank. There is no
   downvote in the schema and there is no style for one here.
   -------------------------------------------------------------------------- */

.ask-helpful {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.ask-helpful:hover { border-color: var(--brass); color: var(--brass-text); }
.ask-helpful.is-marked { background: var(--brass-soft); border-color: var(--brass); color: var(--brass-text); }
.ask-helpful--static { border-style: dashed; cursor: default; }
.ask-helpful__count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Clarification replies — one level, and it looks like one level
   -------------------------------------------------------------------------- */

.ask-comments { margin-top: var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--brass-hairline); }
.ask-comments__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.ask-comment + .ask-comment { margin-top: var(--space-3); }
.ask-comment__body { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.ask-comment__meta { margin: 0.15rem 0 0; font-size: var(--text-xs); color: var(--gray-text); }
.ask-comments__more { margin: 0 0 var(--space-3); font-size: var(--text-xs); }

.ask-comments__compose summary {
  font-size: var(--text-xs);
  color: var(--gray-text);
  cursor: pointer;
}

.ask-comments__compose[open] summary { margin-bottom: var(--space-3); }
.ask-comments__compose .textarea { margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   Composing
   -------------------------------------------------------------------------- */

.ask-compose,
.ask-author-tools {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

.ask-author-tools { border-top: 3px solid var(--brass); }
.ask-compose__intro { margin-bottom: var(--space-5); }
.ask-compose__intro h2 { margin-bottom: var(--space-2); }
.ask-compose__textarea { min-height: 12rem; }
.ask-author-tools__blurb { max-width: 44em; color: var(--ink-muted); }

.ask-compose__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ask-compose__note { font-size: var(--text-xs); color: var(--gray-text); max-width: 32em; }
.ask-author-tools__secondary { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--brass-hairline); }

.ask-closed,
.ask-needs-info {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--ivory);
  border-left: 2px solid var(--brass-hairline);
  font-size: var(--text-sm);
}

.ask-inline-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }

/* The honeypot. Off-screen rather than display:none — a field that is
   display:none is a field some bots know to skip. */
.ask-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The ask form
   -------------------------------------------------------------------------- */

.ask-form__step {
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
  background: var(--cream);
}

.ask-form__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--navy);
}

.ask-form__step-no {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--brass-text);
}

.ask-form__optional {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

.ask-form__note { color: var(--gray-text); font-size: var(--text-sm); }
.ask-form__note--quiet { font-style: italic; }
.ask-form__textarea { min-height: 16rem; }
.ask-form__prompts { margin: var(--space-2) 0 0 var(--space-4); padding: 0; }
.ask-form__prompts li { margin-bottom: 0.2rem; }

.ask-form__attached {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--ivory);
  border-left: 2px solid var(--brass);
  font-size: var(--text-sm);
}

.ask-form__media {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.ask-form__media img { border: 1px solid var(--navy-hairline); border-radius: var(--radius); }

.ask-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ask-form__safety { font-size: var(--text-xs); color: var(--gray-text); max-width: 44em; }

.field__required { font-size: var(--text-xs); color: var(--brass-text); font-weight: 400; }

/* Similar questions, filled by assets/js/ask.js. `hidden` is honoured
   explicitly because the display rule below would otherwise beat it. */
.ask-similar[hidden] { display: none; }

.ask-similar {
  display: block;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--ivory);
  border-left: 2px solid var(--brass);
}

.ask-similar__title { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.ask-similar__list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.ask-similar__list li { margin-bottom: var(--space-2); font-size: var(--text-sm); }
.ask-similar__state { font-size: var(--text-xs); color: var(--brass-text); }
.ask-similar__note { margin: 0; font-size: var(--text-xs); color: var(--gray-text); }

/* --------------------------------------------------------------------------
   Side modules
   -------------------------------------------------------------------------- */

.ask-module {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

.ask-module__title {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0 0 var(--space-2);
}

.ask-module__blurb { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--gray-text); line-height: 1.5; }
.ask-module__list { list-style: none; margin: 0; padding: 0; }
.ask-module__empty { font-size: var(--text-sm); color: var(--gray-text); margin: 0; }
.ask-module__more { margin: var(--space-3) 0 0; font-size: var(--text-xs); }

.ask-mini + .ask-mini { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--brass-hairline); }

.ask-mini__link { display: block; text-decoration: none; }
.ask-mini__title { display: block; font-size: var(--text-sm); line-height: 1.45; color: var(--navy); }
.ask-mini__link:hover .ask-mini__title { color: var(--brass-text); }
.ask-mini__note { display: block; margin-top: 0.15rem; font-size: var(--text-xs); color: var(--gray-text); }

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

.ask-categories__item + .ask-categories__item { border-top: 1px solid var(--brass-hairline); }

.ask-categories__item a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink);
}

.ask-categories__item a:hover { color: var(--brass-text); }
.ask-categories__item.is-current a { color: var(--brass-text); font-weight: 600; }
.ask-categories__count { color: var(--gray-text); font-variant-numeric: tabular-nums; }

.ask-guidance { margin: 0 0 0 var(--space-4); padding: 0; font-size: var(--text-xs); color: var(--gray-text); }
.ask-guidance li { margin-bottom: 0.3rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   The safety notice

   Quiet by design. It is on every question and every answer form, and a notice
   that shouts on every page is a notice people learn to look past.
   -------------------------------------------------------------------------- */

.ask-safety {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--ivory);
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
}

.ask-safety__topics { margin: var(--space-2) 0; font-size: var(--text-sm); font-weight: 600; }
.ask-safety__body { margin: 0; font-size: var(--text-xs); color: var(--gray-text); line-height: 1.6; }

/* --------------------------------------------------------------------------
   The sections on other pages
   -------------------------------------------------------------------------- */

.ask-vessel-section { padding: var(--space-8) 0; border-top: 1px solid var(--brass-hairline); }
.ask-vessel-section__actions { margin-top: var(--space-5); }
.ask-design-section .filter-bar { margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   Touch targets

   Every control on this page must be reachable with a thumb. 44px is the
   floor, applied where the control is otherwise set to text size.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .ask-helpful,
  .ask-answer__edit,
  .ask-answer__report,
  .ask-answer__moderate,
  .ask-comments__compose summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ask-card,
  .ask-chip__link,
  .ask-helpful {
    transition: none;
  }
}