/* Shared cards, forms, buttons, stamps, lists, and alerts. */
.card {
  padding: 1.25rem;
  border-radius: 0;
  background: var(--panel);
  border: 2px solid var(--text);
  margin-bottom: 1.25rem;
}

/* Breathing room when a page puts the shared hero (main/_hero.html) directly above a
   card -- e.g. Sign Up, Sign Up Confirmation. .moss-line itself has no margin-bottom
   (landing's own next sibling is a .section, which brings its own 2.1rem margin-top). */
.moss-line + .card {
  margin-top: 1.5rem;
}

/* Card title stamp straddles the card's own top edge instead of sitting inside it --
   pulled up by roughly its own height so it reads as stamped onto the card. */
.card h2 {
  margin: 0 0 0.85rem;
}

/* Base h1. landing.css intentionally replaces it inside .moss-line. */
h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 6vw, 1.75rem);
  line-height: 1.25;
  color: var(--accent);
  font-family: 'Rajdhani', 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Section headings are editorial labels, not lifecycle stamps.  Stamps remain reserved
   for durable state (past/cancelled/role) in the components that need them. */
h2 {
  display: block;
  width: auto;
  font-size: 1.15rem;
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action-contrast);
  font-family: 'Rajdhani', 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: none;
}

p {
  color: var(--muted);
  line-height: 1.5;
  /* Reset the uppercase links inherit into (thread-row/vid-row/entry wrap a <p> teaser
     inside an <a>) -- prose stays sentence case regardless of what it's nested inside. */
  text-transform: none;
}

label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

.label-row label {
  margin: 0;
}

.label-row a {
  font-size: 0.85rem;
  white-space: nowrap;
}

input, textarea, select {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.15rem;
  border: 1px solid var(--accent-dim);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  outline: none;
}

/* Show invalid styling only after the user has interacted with a field. */
input:invalid, textarea:invalid {
  box-shadow: none;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--accent);
}

/* Real user-facing checkboxes/radios (not the hidden ones used as JS-free toggle state
   for menus/tabs/details elsewhere) -- recolor the native control to match the theme
   accent rather than leaving the browser-default check, per native-controls-first. */
input[type="checkbox"]:not([hidden]), input[type="radio"]:not([hidden]) {
  width: auto;
  accent-color: var(--accent);
}

/* Keep browser-autofilled fields on the active theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* --- Composer: the one shape for every surface where a member posts text -------------
   Event discussion comments, replies to a reply, their edit forms, and the inbox's New
   Message box. The box you type in owns a full line; the button sits in an actions row
   under it, right-aligned.

   The reply forms used to put the button in a flex row *beside* the textarea, which at
   384px left a cramped little text box next to a squeezed "Post" (feedback #133, #134) --
   and the inbox's own composer never did that, so the two never matched. Below 30rem the
   row stacks and both controls go full width, primary on top (column-reverse, so the DOM
   can keep Cancel-then-Save order for a keyboard). */
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.composer-actions > button,
.composer-actions > .btn {
  margin: 0;
}

@media (max-width: 30rem) {
  .composer-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .composer-actions > * {
    width: 100%;
  }
}

/* Rejected-form feedback: the summary callout at the top of a form, plus the marking on
   each bad input and the message under it. Written sitewide rather than auth-only so any
   form that posts back with per-field errors gets the same shape -- the auth forms are
   just the first to do it (see auth/_form_fields.html). */
.field-error,
.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.field-hint {
  color: var(--muted);
}

.field-error {
  color: var(--error);
  font-weight: 600;
}

/* Marked by the server on a rejected post, not by :invalid -- a username that's taken, or
   an email that already has an account, is perfectly well-formed input that no browser can
   know is wrong. Colour isn't the only signal (WCAG 1.4.1): the border also thickens, the
   message sits under the field, and the summary above the form repeats it. */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 7%, var(--field-bg));
}

.form-errors {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--error);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
}

.form-errors-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 700;
}

.form-errors ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}

.form-errors li + li {
  margin-top: 0.25rem;
}

.form-errors a {
  color: inherit;
  font-weight: 700;
}

.auth-card-primary {
  background: var(--panel-2);
  border-color: var(--panel-2);
}

.auth-card-primary h1,
.auth-card-primary h2,
.auth-card-primary p,
.auth-card-primary label,
.auth-card-primary summary {
  color: var(--accent-contrast);
}

.auth-card-primary input,
.auth-card-primary textarea {
  /* Literal white, not the sitewide --field-bg -- reviewer's ask was specifically
     for more contrast against this dark card, not a sitewide input-color change
     (that would touch every form on the site: Events, Discussions, Admin). Text
     color is a literal dark ink too, not var(--text) -- var(--text) is near-white in
     the (currently disabled, see profiles.routes.THEMES_ENABLED) alt themes, which
     would put white text on this literal-white field once those come back. */
  background: #fff;
  color: #18271e;
}

.auth-card-primary form > button[type="submit"] {
  width: 100%;
}

/* --accent (the sitewide link/orange) only clears 4.5:1 contrast against --bg/--panel,
   not against this card's dark --panel-2 fill (~2:1 measured) -- see the "Forgot
   password?" contrast finding. --action is the button-fill orange, verified ~4.6:1 on
   --panel-2 in the default theme -- NOT re-verified for the alt themes (ember/blue/dark
   measured as low as 2.77:1 here), which is fine only as long as they stay disabled;
   re-check this pairing per-theme before re-enabling any of them, see
   profiles.routes.THEMES_ENABLED. */
.auth-card-primary a:not(.btn) {
  color: var(--action);
  text-decoration: underline;
}
.auth-card-primary a:not(.btn):hover,
.auth-card-primary a:not(.btn):focus-visible {
  color: var(--action-hover);
}

/* Same contrast problem as the link colour above, one token over: --error is a deep red
   tuned for the light --bg/--panel surfaces and measures ~2:1 on this card's dark
   --panel-2 fill. This literal light red measures ~6:1 there, and every theme preset's
   --panel-2 is dark, so it holds if the alt themes are ever re-enabled. The input border
   goes the other way -- it sits on the card's literal-white field, so it needs a dark red. */
.auth-card-primary .form-errors,
.auth-card-primary .field-error {
  color: #ff9e90;
}

.auth-card-primary .form-errors {
  border-left-color: #ff9e90;
  background: rgba(255, 158, 144, 0.16);
}

.auth-card-primary input[aria-invalid="true"] {
  border-color: #b3382a;
  background: #fff4f1;
}

.auth-card-primary .field-hint {
  color: color-mix(in srgb, var(--accent-contrast) 70%, transparent);
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.2rem;
  border: 2px solid var(--text);
  background: var(--action);
  color: var(--action-contrast);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
}

button.secondary, .btn.secondary {
  background: var(--panel);
  border: 2px solid var(--accent);
  color: var(--accent);
}

button:hover, .btn:hover {
  background: var(--action-hover);
  text-decoration: none;
}

button.secondary:hover, .btn.secondary:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  text-decoration: none;
}

button.danger, .btn.danger {
  background: var(--error);
  border-color: var(--text);
  color: #fff;
}

/* The "hero CTA" look -- bigger, Rajdhani, borderless -- used for every primary sign-up/
   log-in action sitewide (header pill, landing hero, login/signup/reset submit), not just
   the landing page. Deliberately a different, louder component than plain `button, .btn`
   above, which stays the compact bordered look for ordinary/management actions (Events,
   Admin, discussions, etc.) -- this is only for the handful of "join/enter the site" CTAs. */
/* text-transform: none -- these override the sitewide `a:not(.btn) { text-transform:
   uppercase }` rule; unlike plain `.btn`, `.btn-primary`/`.btn-ghost` links (header Log
   In/Sign Up, hero CTAs) aren't exempted by that selector's class name, so without this
   they'd render all-caps -- wrong for both short labels and the longer auth-flow phrases
   ("Already have an account? Log In"). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 0.15rem;
  background: var(--action);
  color: var(--action-contrast);
  font-weight: 700;
  font-family: 'Rajdhani', 'Work Sans', sans-serif;
  letter-spacing: 0.03em;
  font-size: 1.02rem;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--action-hover); text-decoration: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--accent-dim);
  border-radius: 0.15rem;
  background: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--text); border-color: var(--muted); text-decoration: none; }

/* On a dark evergreen surface (the auth dark-card variant, or the landing hero dash),
   var(--muted)/var(--accent-dim) read as near-invisible against var(--panel-2) -- swap to
   the light-on-dark pairing there instead. */
.auth-card-primary .btn-ghost,
.moss-line.moss-line--evergreen .btn-ghost {
  border-color: var(--accent-contrast);
  color: var(--accent-contrast);
}
.auth-card-primary .btn-ghost:hover,
.auth-card-primary .btn-ghost:focus-visible,
.moss-line.moss-line--evergreen .btn-ghost:hover,
.moss-line.moss-line--evergreen .btn-ghost:focus-visible {
  color: var(--accent-contrast);
  border-color: var(--accent);
}

button.danger:hover, .btn.danger:hover {
  background: color-mix(in srgb, var(--error) 80%, black);
}

/* "Go look at more of this list elsewhere" link -- small, muted, right-aligned,
   arrow-suffixed. Same look as the landing page's own .moss-line-scoped .viewall
   (kept there for that page's bespoke markup) promoted to a global class so
   a "view the rest of this list" link can use the same minimal link instead of a full
   bordered button. */
/* Base view-all link. landing.css intentionally changes it inside .moss-line. */
.viewall {
  display: block;
  width: fit-content;
  margin: 0.6rem 0 0 auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.viewall:hover, .viewall:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.error-card {
  text-align: center;
  padding: 3rem 1.5rem;
}

.error-card h1 {
  color: var(--pop);
}

.error-actions {
  margin-top: 1rem;
}

.flash {
  padding: 1rem 1.25rem;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-left: 4px solid transparent;
}

.flash.error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--error);
  border-left-color: var(--error);
}

.flash.success {
  background: rgba(110, 231, 160, 0.15);
  color: var(--success);
  border-left-color: var(--success);
}

/* Checkbox rows. Was in media-controls.css, which held no media rules; this is an ordinary
   form control and belongs with the others. */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.65rem 0;
  color: var(--text);
  font-size: 0.9rem;
}

.checkbox-label input {
  width: auto;
}