/* Cup Code Council. Scoped to avoid leaking into the public site. */
.cc-council {
  --council-ink-soft: color-mix(in srgb, var(--text-primary) 74%, var(--text-muted));
  --council-brand-soft: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
  --council-brand-border: color-mix(in srgb, var(--brand-primary) 32%, var(--border));
  --council-info: #397b9c;
  --council-info-soft: color-mix(in srgb, var(--council-info) 12%, var(--surface));
  --council-on-brand: #07131d;
  color: var(--text-primary);
}

.cc-council *,
.cc-council *::before,
.cc-council *::after {
  box-sizing: border-box;
}

.cc-council a:focus-visible,
.cc-council button:focus-visible,
.cc-council input:focus-visible,
.cc-council select:focus-visible,
.cc-council textarea:focus-visible,
.cc-council summary:focus-visible {
  outline: 3px solid var(--focus, #73b44d);
  outline-offset: 3px;
}

.cc-council [tabindex="-1"]:focus {
  outline: none;
}

.cc-council .cc-stepper-card h2[tabindex="-1"]:focus,
.cc-council #comments-title:focus {
  border-radius: 6px;
  outline: 3px solid var(--focus, #73b44d);
  outline-offset: 5px;
}

.cc-council .button {
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.cc-council .button-primary {
  color: var(--council-on-brand);
}

.cc-council .text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
}

.cc-council img,
.cc-council video {
  max-width: 100%;
}

/* app.css offsets anchors by the header alone, but a council page carries a
   sticky sub-nav beneath it. Without this the error-summary links scroll the
   field they point at to a position hidden behind that bar, so following the
   link shows the wrong field. Scoped with :has so only council pages pay. */
:root:has(.cc-council-nav) {
  scroll-padding-block-start: calc(var(--header-height, 80px) + 74px);
}

.cc-council-nav {
  position: sticky;
  z-index: 35;
  inset-block-start: var(--header-height, 80px);
  border-block-end: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(16px);
}

.cc-council-nav__scroll {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: 16px;
  scroll-snap-type: inline proximity;
}

.cc-council-nav__scroll::-webkit-scrollbar {
  display: none;
}

.cc-council-nav a {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 14px;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  scroll-snap-align: start;
}

.cc-council-nav a:hover,
.cc-council-nav a[aria-current="page"] {
  color: var(--brand-primary);
  background: var(--council-brand-soft);
}

.cc-council-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(54px, 8vw, 100px) clamp(44px, 6vw, 76px);
  border-block-end: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 31%),
    linear-gradient(145deg, var(--background), var(--background-soft));
}

[dir="rtl"] .cc-council-hero {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 31%),
    linear-gradient(145deg, var(--background), var(--background-soft));
}

.cc-council-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: end;
  gap: clamp(28px, 5vw, 68px);
}

.cc-council-hero__copy {
  max-width: 780px;
}

.cc-council-hero h1 {
  max-width: 13ch;
  margin: 14px 0 18px;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

html[lang="en"] .cc-council-hero h1 {
  max-width: 15ch;
}

.cc-council-hero__summary {
  max-width: 62ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.9;
}

.cc-council-actions,
.cc-inline-actions {
  display: flex;
  margin-block-start: 26px;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-council-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-start: 28px;
  padding: 7px;
  gap: 8px;
  border: 1px solid var(--council-brand-border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.cc-council-search__field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.cc-council-search__field > i {
  margin-inline-start: 10px;
  font-size: 22px;
}

.cc-council-search input {
  width: 100%;
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

.cc-council-pulse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(22px, 4vw, 34px);
  gap: 18px;
  border: 1px solid var(--council-brand-border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-primary));
  box-shadow: var(--shadow-medium);
}

.cc-council-pulse-panel {
  display: grid;
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  gap: 18px;
  border: 1px solid var(--council-brand-border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-primary));
  box-shadow: var(--shadow-medium);
}

.cc-council-pulse-panel .cc-council-pulse {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cc-council-pulse-visual {
  display: grid;
  width: 100%;
  min-width: 0;
  height: clamp(180px, 20vw, 240px);
  place-items: center;
}

.cc-council-pulse-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgb(16 24 31 / 14%));
}

.cc-council-pulse__item {
  min-width: 0;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-soft);
}

.cc-council-pulse__item strong {
  display: block;
  margin-block-end: 5px;
  font-family: "Sora", "Alexandria", sans-serif;
  font-size: clamp(25px, 4vw, 36px);
}

.cc-council-pulse__item span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.cc-council-shell {
  padding-block: clamp(52px, 7vw, 88px);
}

.cc-council-shell--soft {
  border-block: 1px solid var(--border-soft);
  background: var(--background-soft);
}

.cc-council-heading {
  display: flex;
  margin-block-end: 24px;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
}

.cc-council-heading h1,
.cc-council-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(28px, 4vw, 42px);
}

.cc-council-heading p {
  max-width: 58ch;
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.cc-council-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
}

.cc-council-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.cc-council-grid > .cc-suggestion-card {
  grid-column: span 4;
}

.cc-council-grid--two > * {
  grid-column: span 6;
}

.cc-council-grid--four > * {
  grid-column: span 3;
}

.cc-suggestion-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 300px;
  grid-template-rows: auto auto 1fr auto;
  padding: 22px;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.cc-suggestion-card:hover,
.cc-suggestion-card:focus-within {
  z-index: 1;
  border-color: var(--council-brand-border);
  box-shadow: var(--shadow-medium);
  transform: translateY(-3px);
}

.cc-suggestion-card__top,
.cc-suggestion-card__meta,
.cc-suggestion-card__footer,
.cc-comment__meta,
.cc-decision-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-suggestion-card__top {
  justify-content: space-between;
}

.cc-suggestion-card__meta,
.cc-comment__meta,
.cc-decision-card__meta {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-suggestion-card h2,
.cc-suggestion-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.5;
}

.cc-suggestion-card h2 a,
.cc-suggestion-card h3 a {
  color: inherit;
  text-decoration: none;
}

.cc-stretched::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.cc-suggestion-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.cc-suggestion-card__footer {
  justify-content: space-between;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-soft);
}

.cc-suggestion-card__signals {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-muted);
  font-size: 12px;
}

.cc-suggestion-card__signals span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-chip,
.cc-status,
.cc-reason-badge,
.cc-project-badge,
.cc-badge {
  display: inline-flex;
  min-height: 28px;
  padding: 5px 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--background-soft);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.cc-status {
  border-color: var(--council-brand-border);
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-status[data-tone="info"] {
  border-color: color-mix(in srgb, var(--council-info) 36%, var(--border));
  background: var(--council-info-soft);
  color: var(--council-info);
}

.cc-status[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
  background: var(--warning-soft);
  color: var(--warning);
}

.cc-status[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--error) 32%, var(--border));
  background: var(--error-soft);
  color: var(--error);
}

.cc-status[data-tone="muted"] {
  border-color: var(--border-soft);
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.cc-reason-badge {
  border-color: transparent;
  background: transparent;
  color: var(--brand-primary);
}

.cc-vote-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 72px;
  min-height: 44px;
  padding: 7px 12px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--council-brand-border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--brand-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}

.cc-vote-button:hover,
.cc-vote-button[aria-pressed="true"],
.cc-vote-button.is-voted {
  background: var(--brand-primary);
  color: var(--council-on-brand);
}

.cc-vote-button:active {
  transform: scale(.97);
}

.cc-vote-button[disabled] {
  cursor: progress;
  opacity: .7;
}

.cc-council [aria-busy="true"] {
  cursor: progress;
}

.cc-council button[aria-busy="true"] {
  opacity: .72;
}

.cc-council [data-council-bookmark][aria-pressed="true"],
.cc-council [data-council-follow][aria-pressed="true"],
.cc-council [data-council-reaction][aria-pressed="true"] {
  border-color: var(--brand-primary);
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-tabs,
.cc-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cc-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  margin-block-end: 22px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--border-soft);
}

.cc-tabs::-webkit-scrollbar,
.cc-filter-chips::-webkit-scrollbar {
  display: none;
}

.cc-tabs a,
.cc-filter-chips a,
.cc-filter-chips button {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 14px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.cc-tabs a[aria-current="page"],
.cc-filter-chips a[aria-current="true"],
.cc-filter-chips button[aria-pressed="true"] {
  border-color: var(--brand-primary);
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, .8fr)) auto;
  margin-block-end: 18px;
  padding: 16px;
  align-items: end;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.cc-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

/* A <fieldset> carries the browser's own 2px groove border and inline padding.
   Left alone it draws a second box around the choice grid, inside a card that
   already has one. Groups semantics are wanted; the UA's frame is not. */
.cc-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cc-field label,
.cc-fieldset legend {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.cc-field input,
.cc-field select,
.cc-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  outline: 0;
  background: var(--background-soft);
  color: var(--text-primary);
  font: inherit;
}

.cc-field input[type="url"],
.cc-field input[type="email"],
.cc-field input[type="tel"] {
  direction: ltr;
  text-align: start;
}

.cc-field [aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-soft);
}

.cc-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.8;
}

.cc-field input:hover,
.cc-field select:hover,
.cc-field textarea:hover,
.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
  border-color: var(--brand-primary);
  background: var(--surface);
}

.cc-field small,
.cc-form-note,
.cc-result-count {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.cc-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-error-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--error);
  font-size: 12px;
  font-weight: 600;
}

.cc-category-card,
.cc-decision-card,
.cc-challenge-card,
.cc-member-card,
.cc-info-card,
.cc-account-panel {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.cc-category-card,
.cc-member-card,
.cc-challenge-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
}

.cc-category-card__icon,
.cc-empty__icon,
.cc-member-avatar,
.cc-challenge-card__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--council-brand-border);
  border-radius: 16px;
  background: var(--council-brand-soft);
  color: var(--brand-primary);
  font-size: 25px;
}

.cc-category-card h3,
.cc-decision-card h3,
.cc-challenge-card h3,
.cc-member-card h3 {
  margin: 15px 0 8px;
  font-size: 20px;
}

.cc-category-card p,
.cc-decision-card p,
.cc-challenge-card p,
.cc-member-card p,
.cc-info-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.cc-category-card__count,
.cc-challenge-card__footer,
.cc-member-card__stats {
  display: flex;
  margin-block-start: auto;
  padding-block-start: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-block-start: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12px;
}

.cc-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 18px;
  /* Aligned to the first line, not the middle: against a three-line body a
     centred icon floats away from the heading it belongs to. */
  align-items: start;
  gap: 14px;
  border: 1px solid var(--council-brand-border);
  border-radius: 18px;
  background: var(--council-brand-soft);
}

.cc-notice > i {
  color: var(--brand-primary);
  font-size: 26px;
}

.cc-notice h2,
.cc-notice h3,
.cc-notice p {
  margin: 0;
}

.cc-notice h2,
.cc-notice h3 {
  margin-block-end: 4px;
  font-size: 16px;
}

.cc-notice p {
  color: var(--text-secondary);
  font-size: 13px;
  /* Roughly 70 characters. Across a full-width card the body ran past 150 and
     the eye loses the line it is on. */
  max-inline-size: 70ch;
}

/* A notice with no action leaves an empty third track and an off-centre body. */
.cc-notice:not(:has(> :nth-child(3))) {
  grid-template-columns: 42px minmax(0, 1fr);
}

.cc-notice--warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
  background: var(--warning-soft);
}

.cc-notice--warning > i {
  color: var(--warning);
}

.cc-notice--spaced-before,
.cc-spaced-block,
.cc-form-grid--spaced {
  margin-block-start: 20px;
}

.cc-notice--spaced-after {
  margin-block-end: 18px;
}

.cc-list-layout,
.cc-detail-layout,
.cc-member-layout,
.cc-challenge-layout,
.cc-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 24px;
}

.cc-list-stack,
.cc-detail-main,
.cc-detail-aside,
.cc-account-main,
.cc-account-sidebar {
  display: grid;
  gap: 18px;
}

.cc-list-stack .cc-suggestion-card {
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
}

.cc-list-stack .cc-suggestion-card__vote {
  grid-row: 1 / -1;
}

.cc-list-stack .cc-suggestion-card__top,
.cc-list-stack .cc-suggestion-card__body,
.cc-list-stack .cc-suggestion-card__footer {
  grid-column: 2;
}

.cc-detail-hero {
  padding-block: 48px;
  border-block-end: 1px solid var(--border-soft);
  background: var(--background-soft);
}

.cc-breadcrumbs {
  display: flex;
  margin-block-end: 22px;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 13px;
  flex-wrap: wrap;
}

.cc-breadcrumbs a {
  color: var(--text-secondary);
}

.cc-detail-hero h1 {
  max-width: 21ch;
  margin: 14px 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.2;
}

.cc-detail-hero__summary {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.85;
}

.cc-detail-hero__byline {
  display: flex;
  margin-block-start: 20px;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 13px;
  flex-wrap: wrap;
}

.cc-content-card {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}

.cc-content-card h2 {
  margin: 0 0 14px;
  font-size: 24px;
}

.cc-content-card p,
.cc-content-card li {
  color: var(--council-ink-soft);
  line-height: 1.95;
}

.cc-content-block + .cc-content-block {
  margin-block-start: 28px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--border-soft);
}

.cc-official-response {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--council-brand-border);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--council-brand-soft), var(--surface));
}

.cc-official-response__header {
  display: flex;
  margin-block-end: 16px;
  align-items: center;
  gap: 12px;
}

.cc-official-response__mark {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--brand-primary);
  color: var(--council-on-brand);
  font-size: 22px;
}

.cc-official-response h2,
.cc-official-response p {
  margin: 0;
}

.cc-official-response__meta {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-action-card,
.cc-status-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.cc-action-card__vote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cc-action-card__vote strong {
  display: block;
  font-family: "Sora", "Alexandria", sans-serif;
  font-size: 34px;
}

.cc-action-card__vote span {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-action-list {
  display: grid;
  margin-block-start: 18px;
  padding-block-start: 18px;
  gap: 8px;
  border-block-start: 1px solid var(--border-soft);
}

.cc-action-list .button,
.cc-action-list form,
.cc-action-list form .button {
  width: 100%;
}

.cc-progress-track {
  height: 9px;
  margin-block: 12px 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-secondary);
}

.cc-progress-track span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
}

.cc-progress-native {
  width: 100%;
  height: 9px;
  margin-block: 12px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: var(--surface-secondary);
  color: var(--brand-primary);
  accent-color: var(--brand-primary);
}

.cc-progress-native::-webkit-progress-bar {
  border-radius: 99px;
  background: var(--surface-secondary);
}

.cc-progress-native::-webkit-progress-value,
.cc-progress-native::-moz-progress-bar {
  border-radius: 99px;
  background: var(--brand-primary);
}

.cc-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cc-impact-grid div {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--background-soft);
}

.cc-impact-grid dt {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-impact-grid dd {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.cc-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.cc-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  padding-block-end: 24px;
  gap: 12px;
}

.cc-timeline li::before {
  position: absolute;
  inset-block: 21px 0;
  inset-inline-start: 10px;
  width: 1px;
  background: var(--border);
  content: "";
}

.cc-timeline li:last-child::before {
  display: none;
}

.cc-timeline__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--council-brand-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-primary);
  font-size: 12px;
}

.cc-timeline h3,
.cc-timeline p {
  margin: 0;
}

.cc-timeline h3 {
  font-size: 15px;
}

.cc-timeline p,
.cc-timeline time {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-comment-list {
  display: grid;
  gap: 14px;
}

.cc-comment {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.cc-comment--official {
  border-color: var(--council-brand-border);
  background: var(--council-brand-soft);
}

/* Replies were stored as a thread and rendered as a flat list, so a reply sat
   several comments away from what it answered. One level of indentation, on the
   inline start so it follows the RTL default without a mirrored rule. */
.cc-comment-replies {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--border);
}

.cc-comment--reply {
  border-radius: 14px;
  padding: 14px;
}

.cc-comment__reply-marker {
  display: inline-flex;
  color: var(--text-muted);
}

.cc-comment.is-pending,
.council-comment.is-pending {
  opacity: .68;
}

.cc-comment.is-failed,
.council-comment.is-failed {
  border-color: var(--error);
  background: var(--error-soft);
}

.cc-comment__body {
  margin: 12px 0 0;
  color: var(--text-secondary);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.cc-reply-context {
  display: flex;
  min-height: 52px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--council-brand-border);
  border-radius: 13px;
  background: var(--council-brand-soft);
}

.cc-reply-context[hidden] {
  display: none;
}

.cc-reply-context p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.cc-comment__actions {
  display: flex;
  margin-block-start: 12px;
  gap: 7px;
  flex-wrap: wrap;
}

.cc-comment__actions button,
.cc-comment__actions a {
  display: inline-flex;
  min-height: 44px;
  padding: 6px 9px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cc-comment-reaction-count {
  display: inline-flex;
  min-height: 44px;
  padding: 6px 9px;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
}

.cc-comment__actions button:hover,
.cc-comment__actions a:hover {
  background: var(--surface-secondary);
  color: var(--brand-primary);
}

.cc-stepper-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.cc-stepper-nav {
  position: sticky;
  inset-block-start: calc(var(--header-height, 80px) + 80px);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.cc-stepper-nav ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
}

.cc-stepper-nav li {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 8px;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.cc-stepper-nav li > span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.cc-stepper-nav li.is-active,
.cc-stepper-nav li.is-complete {
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-stepper-nav li.is-active > span,
.cc-stepper-nav li.is-complete > span {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--council-on-brand);
}

.cc-stepper-progress {
  height: 7px;
  margin-block: 18px 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-secondary);
}

.cc-stepper-progress span {
  display: block;
  /* The fallback said 20% whatever step you were on, so a form resumed at step
     four showed a bar that contradicted the indicator beside it. The server now
     sets --progress from the real step and the script updates it from there. */
  width: var(--progress, 20%);
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transition: width 240ms ease;
}

.cc-stepper-card {
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.cc-stepper-card[hidden] {
  display: none;
}

.cc-stepper-card h2 {
  margin: 0 0 6px;
  font-size: 28px;
}

.cc-stepper-card > p {
  margin: 0 0 24px;
  color: var(--text-secondary);
}

.cc-proposal-choice-grid {
  display: grid;
  max-width: 1120px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 32px);
}

.cc-proposal-choice-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  flex-direction: column;
  gap: 22px;
}

.cc-proposal-choice-card__heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.cc-proposal-choice-card__heading .cc-category-card__icon {
  width: 52px;
  height: 52px;
  margin: 0;
}

.cc-proposal-choice-card__content {
  width: 100%;
  min-width: 0;
}

.cc-proposal-choice-card h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
}

.cc-proposal-choice-card p {
  max-width: 42ch;
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.8;
  word-break: normal;
  overflow-wrap: break-word;
}

.cc-proposal-choice-card__features {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 11px;
}

.cc-proposal-choice-card__features li {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.cc-proposal-choice-card__features i {
  margin-block-start: 2px;
  color: var(--brand-primary);
  font-size: 19px;
}

.cc-proposal-choice-card > .button {
  width: 100%;
  min-height: 48px;
  margin-block-start: auto;
}

.cc-proposal-wizard {
  width: 100%;
  max-width: 1168px;
  margin-inline: auto;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
}

.cc-proposal-wizard__steps,
.cc-proposal-wizard [data-council-step] {
  min-width: 0;
}

.cc-proposal-fields {
  display: grid;
  gap: 20px;
}

.cc-proposal-wizard .cc-field label,
.cc-proposal-wizard .cc-fieldset legend {
  font-size: 14px;
}

.cc-proposal-wizard .cc-field small,
.cc-proposal-wizard .cc-form-note {
  font-size: 13px;
}

.cc-proposal-consent-option {
  position: relative;
  min-width: 0;
}

.cc-checkbox--proposal-consent {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border-color: var(--border);
  border-radius: 14px;
  background: var(--background-soft);
  line-height: 1.7;
}

.cc-checkbox--proposal-consent:hover {
  border-color: var(--brand-primary);
  background: var(--council-brand-soft);
}

.cc-checkbox--proposal-consent.has-error {
  border-color: var(--error);
  background: var(--error-soft);
}

.cc-checkbox--proposal-consent strong,
.cc-checkbox--proposal-consent small {
  display: block;
}

.cc-checkbox--proposal-consent small {
  margin-block-start: 3px;
  color: var(--text-muted);
  font-weight: 400;
}

.cc-proposal-consent-option .cc-checkbox-policy-links {
  margin-block-start: 2px;
  margin-inline-start: 35px;
}

.cc-character-counter {
  color: var(--text-muted);
  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cc-character-counter.is-warning {
  color: var(--warning);
  font-weight: 700;
}

.cc-character-counter.is-limit {
  color: var(--error);
  font-weight: 700;
}

.cc-proposal-captcha {
  display: grid;
  margin-block-start: 22px;
  gap: 10px;
}

.cc-proposal-review-grid > div:nth-child(n) {
  min-width: 0;
}

.cc-proposal-review-grid > div:nth-child(n + 5) {
  grid-column: 1 / -1;
}

.cc-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cc-choice {
  position: relative;
  display: grid;
  min-height: 110px;
  padding: 16px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background-soft);
  cursor: pointer;
}

.cc-choice:hover,
.cc-choice:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--council-brand-soft);
}

.cc-choice input {
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  accent-color: var(--brand-primary);
}

.cc-choice strong,
.cc-choice small {
  display: block;
}

.cc-choice small {
  margin-block-start: 4px;
  color: var(--text-muted);
  line-height: 1.55;
}

.cc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cc-form-grid .cc-field--wide {
  grid-column: 1 / -1;
}

.cc-dropzone {
  display: grid;
  min-height: 170px;
  padding: 24px;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--council-brand-border);
  border-radius: 18px;
  background: var(--background-soft);
}

.cc-dropzone i {
  color: var(--brand-primary);
  font-size: 32px;
}

.cc-similar-list {
  display: grid;
  margin-block-start: 20px;
  gap: 9px;
}

/* The server renders .cc-similar-item and the live lookup renders
   .council-similar-item. They described the same row with different numbers, so
   the list changed shape depending on which arrived first. One rule now. */
.cc-similar-item,
.council-similar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--background-soft);
}

.cc-similar-item a,
.council-similar-item a {
  color: var(--text-primary);
  font-weight: 700;
}

.cc-similar-item > span,
.council-similar-item > span {
  color: var(--text-muted);
  font-size: 12px;
}

.council-similar-list {
  display: grid;
  gap: 9px;
}

.council-similar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--background-soft);
}

.council-similar-item a {
  color: var(--text-primary);
  font-weight: 700;
}

.council-similar-item span {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-similar-message {
  display: flex;
  min-height: 58px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--background-soft);
}

.cc-similar-item h3,
.cc-similar-item p {
  margin: 0;
}

.cc-similar-item h3 {
  font-size: 14px;
}

.cc-similar-item p {
  margin-block-start: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.cc-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cc-review-grid > div {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--background-soft);
}

.cc-review-grid dt {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-review-grid dd {
  margin: 5px 0 0;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* The problem and solution can each be thousands of characters. Reprinted in
     full they push the Publish button off the screen the step exists to end on,
     so a long answer scrolls inside its own cell. */
  max-block-size: 220px;
  overflow-y: auto;
}

/* The long-form answers take the full row; a two-word area does not need half
   the grid. */
.cc-review-grid > div:nth-child(n + 5) {
  grid-column: 1 / -1;
}

.cc-roadmap-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(260px, 1fr));
  padding-block-end: 10px;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
}

.cc-roadmap-column {
  min-width: 260px;
  padding: 14px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--background-soft);
}

.cc-roadmap-column__header {
  display: flex;
  margin-block-end: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cc-roadmap-column__header h2 {
  margin: 0;
  font-size: 15px;
}

.cc-roadmap-column__items {
  display: grid;
  gap: 10px;
}

.cc-roadmap-item {
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.cc-roadmap-item h3,
.cc-roadmap-item p {
  margin: 0;
}

.cc-roadmap-item h3 {
  margin-block: 9px 6px;
  font-size: 14px;
  line-height: 1.55;
}

.cc-roadmap-item p {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-member-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(22px, 4vw, 34px);
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}

.cc-member-avatar--large {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  font-size: 34px;
}

.cc-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cc-member-hero h1,
.cc-member-hero p {
  margin: 0;
}

.cc-member-hero p {
  margin-block-start: 6px;
  color: var(--text-secondary);
}

.cc-member-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cc-member-stats div {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--background-soft);
}

.cc-member-stats dt {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-member-stats dd {
  margin: 4px 0 0;
  font-family: "Sora", "Alexandria", sans-serif;
  font-size: 23px;
  font-weight: 700;
}

.cc-badge-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-badge {
  min-height: 44px;
  padding-inline: 12px;
  border-color: var(--council-brand-border);
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-challenge-hero {
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--council-brand-border);
  border-radius: 28px;
  background: linear-gradient(145deg, var(--council-brand-soft), var(--surface));
}

.cc-challenge-hero h1 {
  max-width: 17ch;
  margin: 12px 0;
  font-size: clamp(36px, 5vw, 56px);
}

.cc-challenge-hero p {
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.85;
}

.cc-account-sidebar {
  position: sticky;
  inset-block-start: calc(var(--header-height, 80px) + 80px);
}

.cc-account-menu {
  display: grid;
  padding: 10px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.cc-account-menu a {
  display: flex;
  min-height: 44px;
  padding: 9px 11px;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cc-account-menu a:hover,
.cc-account-menu a[aria-current="page"] {
  background: var(--council-brand-soft);
  color: var(--brand-primary);
}

.cc-notification-item,
.cc-activity-item,
.cc-report-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 16px;
  align-items: start;
  gap: 12px;
  border-block-end: 1px solid var(--border-soft);
}

.cc-notification-item:last-child,
.cc-activity-item:last-child,
.cc-report-item:last-child {
  border-block-end: 0;
}

.cc-notification-item.is-unread {
  border-inline-start: 3px solid var(--brand-primary);
  background: var(--council-brand-soft);
}

.cc-notification-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--council-brand-soft);
  color: var(--brand-primary);
  font-size: 20px;
}

.cc-notification-item h2,
.cc-notification-item p,
.cc-activity-item h2,
.cc-activity-item p,
.cc-report-item h2,
.cc-report-item p {
  margin: 0;
}

.cc-notification-item h2,
.cc-activity-item h2,
.cc-report-item h2 {
  font-size: 14px;
}

.cc-notification-item p,
.cc-activity-item p,
.cc-report-item p {
  margin-block-start: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.cc-notification-item time,
.cc-activity-item time,
.cc-report-item time {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-pagination {
  display: flex;
  margin-block-start: 26px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cc-pagination a,
.cc-pagination span {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-secondary);
  text-decoration: none;
}

.cc-pagination [aria-current="page"] {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--council-on-brand);
}

.cc-empty,
.cc-error-state {
  display: grid;
  min-height: 300px;
  padding: 32px;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}

.cc-empty h2,
.cc-empty h3,
.cc-error-state h2,
.cc-error-state h3 {
  margin: 16px 0 6px;
  font-size: 22px;
}

.cc-empty p,
.cc-error-state p {
  max-width: 48ch;
  margin: 0;
  color: var(--text-secondary);
}

.cc-empty .button,
.cc-error-state .button {
  margin-block-start: 18px;
}

.cc-empty--compact {
  min-height: 160px;
  padding: 18px;
}

.cc-info-card > img,
.cc-info-card > video {
  display: block;
  width: 100%;
  max-height: 360px;
  margin-block-end: 16px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-secondary);
}

.cc-account-panel > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
}

.cc-account-panel[open] > summary {
  margin-block-end: 18px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--border-soft);
}

.council-undo {
  min-height: 44px;
}

.cc-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cc-skeleton-card {
  min-height: 290px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: var(--surface);
}

.cc-skeleton-line {
  height: 13px;
  margin-block-end: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--border-soft) 50%, var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: cc-council-skeleton 1.4s ease infinite;
}

.cc-skeleton-line:nth-child(2) {
  width: 82%;
}

.cc-skeleton-line:nth-child(3) {
  width: 60%;
}

@keyframes cc-council-skeleton {
  to { background-position: -200% 0; }
}

.cc-toast {
  position: fixed;
  z-index: 100;
  inset-inline-end: 18px;
  inset-block-end: 18px;
  display: flex;
  max-width: min(390px, calc(100% - 36px));
  padding: 14px 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--council-brand-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-medium);
}

.cc-toast[hidden] {
  display: none;
}

.cc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1100px) {
  .cc-council-grid > .cc-suggestion-card,
  .cc-council-grid--four > * {
    grid-column: span 6;
  }

  .cc-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-filter-panel .button {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .cc-council-nav {
    inset-block-start: 72px;
  }

  .cc-council-hero__grid,
  .cc-list-layout,
  .cc-detail-layout,
  .cc-member-layout,
  .cc-challenge-layout,
  .cc-account-layout,
  .cc-stepper-layout {
    grid-template-columns: 1fr;
  }

  .cc-proposal-choice-grid {
    max-width: 760px;
    grid-template-columns: 1fr;
  }

  .cc-council-pulse {
    max-width: 620px;
  }

  .cc-council-pulse-panel {
    width: 100%;
    max-width: 620px;
  }

  .cc-detail-aside,
  .cc-account-sidebar,
  .cc-stepper-nav {
    position: static;
  }

  .cc-stepper-nav ol {
    grid-template-columns: repeat(var(--step-count, 5), minmax(58px, 1fr));
  }

  .cc-stepper-nav li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .cc-stepper-nav li span + span {
    /* 12px is the platform's smallest readable size. 10px was below its own
       floor, and Arabic letterforms carry more detail than Latin at that size. */
    font-size: 12px;
  }

  .cc-member-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cc-member-hero > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .cc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: 2px;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
  }

  .cc-tabs::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .cc-council-hero {
    padding-block-start: 42px;
  }

  .cc-council-hero h1 {
    font-size: 40px;
  }

  .cc-council-search {
    grid-template-columns: 1fr;
  }

  .cc-council-search .button {
    width: 100%;
  }

  .cc-council-heading,
  .cc-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-council-heading {
    display: flex;
  }

  .cc-notice {
    display: flex;
  }

  .cc-council-grid > .cc-suggestion-card,
  .cc-council-grid--two > *,
  .cc-council-grid--four > * {
    grid-column: 1 / -1;
  }

  .cc-filter-panel,
  .cc-form-grid,
  .cc-choice-grid,
  .cc-review-grid,
  .cc-impact-grid,
  .cc-member-stats,
  .cc-skeleton-grid {
    grid-template-columns: 1fr;
  }

  .cc-list-stack .cc-suggestion-card {
    grid-template-columns: 1fr;
  }

  .cc-list-stack .cc-suggestion-card__vote,
  .cc-list-stack .cc-suggestion-card__top,
  .cc-list-stack .cc-suggestion-card__body,
  .cc-list-stack .cc-suggestion-card__footer {
    grid-column: 1;
    grid-row: auto;
  }

  .cc-list-stack .cc-suggestion-card__vote {
    order: 4;
  }

  .cc-list-stack .cc-vote-button {
    width: 100%;
  }

  .cc-form-grid .cc-field--wide {
    grid-column: auto;
  }

  /* A progress indicator you have to scroll sideways to read is not telling you
     where you are. At 375px the five labelled steps needed 480px, so the last
     two sat off-screen. The numbers fit easily on their own; the label belongs
     to the step you are actually on. */
  .cc-stepper-nav {
    overflow-x: visible;
  }

  .cc-stepper-nav ol {
    min-width: 0;
    grid-template-columns: repeat(var(--step-count, 5), 1fr);
  }

  .cc-stepper-nav li span + span {
    display: none;
  }

  .cc-stepper-nav li.is-active span + span {
    display: block;
  }

  .cc-proposal-wizard .cc-stepper-nav li.is-active span + span {
    display: none;
  }

  .cc-member-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cc-member-avatar--large {
    margin-inline: auto;
  }

  .cc-notification-item,
  .cc-activity-item,
  .cc-report-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cc-notification-item time,
  .cc-activity-item time,
  .cc-report-item time {
    grid-column: 2;
  }

  .cc-category-card__count,
  .cc-challenge-card__footer,
  .cc-member-card__stats,
  .cc-field__row,
  .cc-action-card__vote,
  .cc-reply-context {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cc-similar-item,
  .council-similar-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .cc-similar-message {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-inline-actions,
  .cc-council-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-inline-actions .button,
  .cc-council-actions .button {
    width: 100%;
  }

  .cc-proposal-choice-card__heading {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .cc-proposal-choice-card__heading .cc-category-card__icon {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 380px) {
  .cc-council-hero h1 {
    font-size: 36px;
  }

  .cc-detail-hero h1,
  .cc-challenge-hero h1 {
    font-size: 32px;
  }

  .cc-council-pulse {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .cc-suggestion-card,
  .cc-category-card,
  .cc-decision-card,
  .cc-challenge-card,
  .cc-member-card,
  .cc-info-card,
  .cc-account-panel,
  .cc-action-card,
  .cc-status-card,
  .cc-content-card,
  .cc-stepper-card {
    padding: 16px;
    border-radius: 17px;
  }

  .cc-notice,
  .cc-comment,
  .cc-empty,
  .cc-error-state {
    padding: 16px;
  }

  .cc-council-heading h1,
  .cc-council-heading h2 {
    font-size: 27px;
  }

  .cc-pagination {
    flex-wrap: wrap;
  }

  .cc-toast {
    inset-inline: 10px;
    inset-block-end: 10px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-council *,
  .cc-council *::before,
  .cc-council *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .cc-status,
  .cc-chip,
  .cc-vote-button,
  .cc-council-nav a[aria-current="page"] {
    border: 1px solid CanvasText;
  }
}

@media print {
  .cc-council-nav,
  .cc-vote-button,
  .cc-action-list,
  .cc-council-search,
  .cc-filter-panel {
    display: none !important;
  }

  .cc-suggestion-card,
  .cc-content-card,
  .cc-official-response {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Before council.js runs — or if it never arrives — the suggestion form is one
   long form rather than a wizard. Without this the six steps stay hidden
   behind a Next button that nothing is listening to, and the submit button is
   unreachable: the page loads and cannot be used. council.js removes
   is-no-js once it has the steps in hand. */
.cc-stepper-layout.is-no-js .cc-stepper-nav,
.cc-stepper-layout.is-no-js [data-council-next],
.cc-stepper-layout.is-no-js [data-council-back] {
    display: none;
}

/* Hiding the sidebar removes it as a grid item, so without this the form falls
   into the 250px track the sidebar used to occupy and every field renders in a
   column narrower than the words in it. */
.cc-stepper-layout.is-no-js {
    grid-template-columns: 1fr;
}

/* app.css hides [hidden] with !important, so revealing the steps has to answer
   in kind. It wins on specificity as well, which is what keeps this from
   leaking into the wizard once council.js takes the class off. */
.cc-stepper-layout.is-no-js [data-council-step][hidden] {
    display: block !important;
}


/* The consent and duplicate-check boxes sat flush against the block above and
   the buttons below, so each read as part of whichever it touched. */
.cc-stepper-card > .check-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block: 18px;
}

/* The notice, the error summary and the form ran together with nothing between
   them. */
.cc-council-shell .cc-notice + .cc-notice,
.cc-council-shell .cc-notice + .form-error-summary,
.cc-council-shell .cc-notice + .cc-stepper-layout,
.cc-council-shell .form-error-summary + .cc-stepper-layout {
    margin-block-start: 20px;
}

/* The error summary laid its heading beside the list rather than above it. */
.cc-council-shell .form-error-summary {
    display: block;
}

.cc-council-shell .form-error-summary h2 {
    margin-block-end: 8px;
}