:root {
  --question-card-noise: url("data:image/svg+xml,\
%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E\
%3Cfilter id='noise' x='0%25' y='0%25' width='100%25' height='100%25'%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='4' stitchTiles='stitch' result='turbulence'/%3E\
%3CfeColorMatrix type='saturate' values='0' in='turbulence' result='grey'/%3E\
%3CfeComponentTransfer in='grey'%3E\
%3CfeFuncR type='linear' slope='2.8' intercept='-0.85'/%3E\
%3CfeFuncG type='linear' slope='2.8' intercept='-0.85'/%3E\
%3CfeFuncB type='linear' slope='2.8' intercept='-0.85'/%3E\
%3CfeFuncA type='linear' slope='0.126' intercept='0'/%3E\
%3C/feComponentTransfer%3E\
%3C/filter%3E\
%3Crect width='100%25' height='100%25' fill='%23808080' filter='url(%23noise)'/%3E\
%3C/svg%3E");
}

.questionCard {
  display: block;
  overflow: hidden;
  padding: var(--card-pad);
  background-color: hsl(210, 22%, 99%);
  background-image:
    radial-gradient(ellipse, #fff 67%, #d5d5d5 145%), var(--question-card-noise);
  background-size:
    auto,
    48px 48px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sharp);
  box-shadow: 1px 1px 1px rgba(28, 25, 23, 0.08);
  align-self: stretch;
  width: 100%;
  max-width: none;
}

.questionCard,
.questionCardLink {
  text-decoration: none;
  color: inherit;
}

.questionCardLink {
  display: contents;
}

.questionCardBody {
  min-width: 0;
}

.questionAsker {
  margin-bottom: 0.75rem;
}

.questionAskerRow,
.questionAuthorRow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.questionAuthorRow {
  flex: 1;
}

.questionMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.3;
  white-space: nowrap;
}

.questionAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.questionAvatarPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.questionAuthorInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.questionAuthorName,
.questionAuthorHandle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.questionAuthorName {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.questionAuthorHandle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.questionContent {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.statusRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  width: 100%;
}

.askedOn,
.answeredStampText {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.answeredStampText {
  display: inline-block;
  transform: rotate(-3deg);
}

/* Clickable question cards */
.clickable {
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.clickable:hover {
  box-shadow: 4px 4px 4px rgba(28, 25, 23, 0.12);
}

.clickable:focus-within {
  box-shadow:
    3px 3px 3px rgba(28, 25, 23, 0.08),
    0 0 0 2px var(--color-primary);
}

.pendingText {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}

.unavailableAskerLabel {
  display: inline-block;
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.unavailableAskerText {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.5;
}