:root {
  /* colours */
  --white: #ffffff;
  --page: #f6f8fa;
  --text: #1f2a37;
  --text-secondary: #5c6b7a;
  --primary: #4fbfff;
  --secondary: #2bc48a;
  --fill: #eaf5fd; /* pale blue behind hovers and active states */

  /* translation-status ramp (grey to gold to blue to green), drawn from the parrot logo */
  --status-machine: #f0c050;
  --status-machine-fill: #fdf3d6;
  --status-machine-text: #8a6a12;
  --status-translated: #4090c0;
  --status-translated-text: #2f6a94;

  /* lines */
  --border: #e6ecf1;

  /* states */
  --empty-cell-text: #c3ccd6;
  --error-text: #d93025;
  --error-background: #fce8e6;
  --error-border: #fad2cf;

  /* diff highlight */
  --diff-added: #2bc48a;
  --diff-removed: #d1495b;

  /* elevation and focus */
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 3px rgba(79, 191, 255, 0.25);

  /* radii */
  --radius-sm: 0.375rem;
  --radius: 1rem;
  --radius-pill: 100vmax;

  /* spacing scale (rem at 16px root) */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 4rem;      /* 64px */

  /* approximate height of the fixed header+toolbar chrome, used for scrollable regions */
  --chrome-height: 10rem;

  /* sidebar width */
  --sidebar-width: 20rem;

  /* width of the plural form label column, sized to fit "other" */
  --plural-label-width: 3.5rem;
}

/* Hide Alpine-managed elements until Alpine initialises, preventing a flash of all columns. */
[x-cloak] {
  display: none !important;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font-family:
    "Noto Sans",
    -apple-system,
    system-ui,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--text);
  background: var(--page);
  font-size: 87.5%; /* 14px at default 16px root, respects user font preferences */
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.inverted {
  color: var(--white);
}

header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.875rem var(--space-5);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  object-fit: contain;
  display: block;
}
h1 {
  font-size: 1.125rem;
  margin: 0;
  font-weight: 700;
}
.spacer {
  flex: 1;
}
.nav-link {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
}
.nav-link:hover {
  color: var(--primary);
}

.filter {
  padding: var(--space-2) 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font: inherit;
}

.filter-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-group .filter[type="date"] {
  color: var(--text-secondary);
}
select.filter {
  padding-right: 2rem;
}

/* Compound pill: a toggle button fused to a select as one control. */
.filter-compound {
  display: inline-flex;
}
.filter-compound select.filter {
  border-left: 0;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.filter-compound-toggle {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: var(--space-2) 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
}
.filter-compound-toggle:hover:not(:disabled) {
  color: var(--text);
}
.filter-compound-toggle:disabled {
  opacity: 0.35;
  cursor: default;
}
.filter-compound-toggle.on {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--fill);
}

/* Quick filter: show only keys flagged as needing attention. Red when on, with
   the same hollow ring glyph as the item-page toggle and the grid marker. */
.attention-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: var(--space-2) 0.875rem;
  font: inherit;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
}
.attention-filter:hover {
  color: var(--error-text);
  border-color: var(--error-border);
}
.attention-filter.on {
  background: var(--error-background);
  border-color: var(--error-border);
  color: var(--error-text);
}

.segmented {
  display: inline-flex;
  background: var(--fill);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
}
.segmented button.active {
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-raised);
}

.toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4) var(--space-5) var(--space-1);
  flex-wrap: wrap;
}
.toolbar label {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toggle {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: var(--space-1) 0.625rem;
  font: inherit;
  cursor: pointer;
}
.toggle.on {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--fill);
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) 2.125rem var(--space-2) 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font: inherit;
  color: var(--text);
  cursor: pointer;
  background: var(--white)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 0.75rem center;
}
select:hover {
  border-color: var(--primary);
}
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.grid-wrap {
  overflow: auto;
  max-height: calc(100vh - var(--chrome-height));
  margin: 0.75rem var(--space-5) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-small);
}
table.grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
table.grid th,
table.grid td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0.6875rem var(--space-4);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  min-width: 10rem;
  max-width: none;
  vertical-align: top;
}
table.grid tbody tr:last-child td {
  border-bottom: 0;
}
table.grid thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
.sort-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  font: inherit;
  color: var(--text-secondary);
  opacity: 0.45;
}
.sort-btn:hover {
  opacity: 1;
}
.sort-btn::after {
  content: "\2195";
}
th.sort-asc .sort-btn::after {
  content: "\2191";
}
th.sort-desc .sort-btn::after {
  content: "\2193";
}
th.sort-asc .sort-btn,
th.sort-desc .sort-btn {
  opacity: 1;
  color: var(--primary);
}

table.grid td.key,
table.grid th.key {
  position: sticky;
  left: 0;
  background: var(--white);
  font-weight: 600;
  padding-left: 1.25rem;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  width: 20%;
  min-width: 12.5rem;
  max-width: none;
  border-right: 1px solid var(--border);
  z-index: 1;
}
table.grid thead th.key {
  z-index: 3;
}
/* Persistent link from a key cell to its item detail page; 44x44 tap target. */
.key-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.key-open:hover {
  color: var(--primary);
  background: var(--fill);
  text-decoration: none;
}
.key-open:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
table.grid.mode-edit {
  table-layout: fixed;
}
table.grid.mode-edit th,
table.grid.mode-edit td {
  width: 28%;
  min-width: 0;
  max-width: none;
}
table.grid.mode-edit th.key,
table.grid.mode-edit td.key {
  width: 16%;
  white-space: normal;
  max-width: none;
}
table.grid.mode-edit th.comment,
table.grid.mode-edit td.comment {
  width: 28%;
}
.edit-forms {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
table.grid tbody tr:hover td {
  background: var(--fill);
}
.badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-draft { background-color: var(--border); color: var(--text-secondary); }
.badge-machine { background-color: var(--status-machine-fill); color: var(--status-machine-text); }
.badge-translated { background-color: var(--fill); color: var(--status-translated-text); }
.badge-validated { background-color: var(--secondary); color: var(--white); }

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-2);
  border-radius: 50%;
  vertical-align: middle;
}

/* Needs-attention toggle on the item page. */
.btn-attention {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  margin-top: var(--space-3);
}
.btn-attention.on {
  background: var(--error-background);
  border-color: var(--error-border);
  color: var(--error-text);
}

/* Hollow red ring: the toggle's glyph and the flagged-key marker in the grid. */
.attention-ring {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  flex: none;
}
table.grid td.key .attention-ring {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--space-2);
  border-color: var(--error-text);
}
.status-dot.st-draft { background-color: var(--border); }
.status-dot.st-machine { background-color: var(--status-machine); }
.status-dot.st-translated { background-color: var(--status-translated); }
.status-dot.st-validated { background-color: var(--secondary); }

.status-legend {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-1) var(--space-5) var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.status-legend span {
  display: inline-flex;
  align-items: center;
}
.status-legend .status-dot {
  width: 0.75rem;
  height: 0.75rem;
}
.status-legend .count {
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}
.grid-count {
  padding: var(--space-1) var(--space-5) var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.status-select {
  margin-left: var(--space-1);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
}
.empty {
  color: var(--empty-cell-text);
}
.removed {
  color: var(--diff-removed);
  text-decoration: line-through;
}

.cell-input,
.cell-area {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: transparent;
}
.cell-input {
  min-width: 10rem;
  padding: var(--space-1) 0.375rem;
}
.cell-area {
  min-height: 2.125rem;
  padding: 0.375rem var(--space-2);
  line-height: 1.35;
  resize: vertical;
  field-sizing: content;
}
.cell-input:hover,
.cell-area:hover {
  border-color: var(--text-secondary);
  background: var(--border);
}
.cell-input:focus,
.cell-area:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--fill);
}
.cell-input[readonly] {
  color: var(--text-secondary);
  cursor: default;
}

.item {
  margin: var(--space-5) auto;
  padding: 0 var(--space-5);
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) 1.125rem;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-small);
}
.card h2 {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
}
.loc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}
.loc-row:last-child {
  border-bottom: 0;
}
.loc-code {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-weight: 700;
  color: var(--text-secondary);
  padding-top: 0.5em;
}
.loc-code .badge {
  margin-left: 0;
}
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.history li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}
.history-change {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.history .rel {
  color: var(--secondary);
  font-weight: 700;
  border-bottom: 0;
}
.btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  cursor: pointer;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-secondary {
  background: var(--secondary);
  color: var(--white);
}
.btn-danger {
  background: var(--error-text);
  color: var(--white);
}

.danger-zone {
  border: 1px solid var(--error-border);
  background: var(--error-background);
}
.danger-zone p {
  margin: 0 0 var(--space-3);
  color: var(--error-text);
  font-size: 0.875rem;
}

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: var(--space-4);
  margin: var(--space-5) var(--space-6);
}
.sidebar {
  position: sticky;
  top: var(--space-4);
  align-self: start;
}
.tr-grid {
  columns: 2;
  column-gap: var(--space-5);
  column-rule: 1px solid var(--border);
}
.comment-area {
  width: 100%;
  min-height: 4.375rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 0.625rem;
  font: inherit;
  color: var(--text);
}
.comment-area:hover {
  border-color: var(--text-secondary);
  background: var(--border);
}
.comment-area:focus {
  outline: none;
  border-color: var(--primary);
}
.sidebar .history li {
  display: block;
  padding: var(--space-2) 0;
}
.sidebar .history li:last-child {
  border-bottom: 0;
}
@keyframes historyRollDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sidebar .history li:first-child {
  animation: historyRollDown 220ms ease-out;
}
.sidebar .history .h-meta {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}
.sidebar .history .rel {
  color: var(--secondary);
  font-weight: 700;
}

.segmented.sm button {
  padding: 3px 0.625rem;
  font-size: 0.75rem;
}
.plural-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.plural-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.plural-form[hidden] {
  display: none;
}
.plural-form {
  display: grid;
  grid-template-columns: var(--plural-label-width) minmax(0, 1fr);
  align-items: baseline;
}
.plural-form + .plural-form {
  border-top: 1px solid var(--border);
}
.plural-label {
  align-self: stretch;
  padding: 0.375rem var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
  background: var(--page);
  cursor: default;
}
.plural-form.missing .plural-label {
  color: var(--status-machine-text);
}
.plural-form .cell-area {
  border: 0;
  border-radius: 0;
  resize: none;
}
.plural-text {
  padding: 0.375rem var(--space-2);
}
.plural-warning {
  grid-column: 2;
  padding: 0 var(--space-2) 0.375rem;
}
.plural-warning,
.plural-error {
  margin: 0;
  color: var(--error-text);
  font-size: 0.75rem;
}
.plural-add {
  display: none;
  gap: var(--space-2);
}
.plural-editor:focus-within .plural-add {
  display: flex;
}
.plural-add-form {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.plural-add-form:hover {
  color: var(--text);
}
/* Each line takes its direction from its first letter, so "%lld ملف" keeps the
   placeholder in order; an empty field follows dir. */
[dir="rtl"],
[dir="rtl"]::placeholder {
  unicode-bidi: plaintext;
}
.cell-area::placeholder {
  color: var(--empty-cell-text);
}

.centered-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.form-card {
  width: min(20rem, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
.form-card .logo {
  width: 2.5rem;
  height: 2.5rem;
}
.form-card h1 {
  font-size: 1.25rem;
  margin: var(--space-1) 0 var(--space-2);
}
.form-card .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-card .field span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-card input {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 0.625rem var(--space-3);
  border-radius: var(--radius-sm);
  font: inherit;
}
.form-card input:focus {
  outline: none;
  border-color: var(--primary);
}
.form-card .btn {
  margin-top: var(--space-1);
  padding: 0.625rem;
}
.form-card .invite-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-card .field-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.form-card .invite-locales {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.form-card .invite-locales legend {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.form-card .locale-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.btn-google:hover {
  border-color: var(--primary);
  background: var(--fill);
}
.btn-google svg {
  width: 1.125rem;
  height: 1.125rem;
}
.btn-plain {
  background: var(--white);
  color: var(--text);
}
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.form-card.link-card {
  width: min(26rem, 100%);
}
.link-card .google-identity {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}
.link-card .google-identity strong {
  color: var(--text);
}
.link-card .link-form,
.link-card .skip-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.link-card .skip-form {
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.link-card .skip-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.link-card .skip-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.claim-list {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.claim-list legend {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.claim-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.claim-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--fill);
}
.claim-option .claim-name {
  font-weight: 600;
}
.claim-option .claim-username {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.item.users {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.user-list {
  width: min(48rem, 100%);
  margin-inline: auto;
  overflow-x: auto;
}
.user-list table {
  width: 100%;
  border-collapse: collapse;
}
.user-list th,
.user-list td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.user-list th {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-list tbody tr:last-child td {
  border-bottom: 0;
}
.user-list td.field-note,
.user-list .account-actions .field-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.user-list .account-actions {
  white-space: nowrap;
}
.user-list .account-actions .field-note {
  margin-right: var(--space-2);
}

.error-message,
.success-message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}
.error-message {
  color: var(--error-text);
  background-color: var(--error-background);
  border: 1px solid var(--error-border);
}
.success-message {
  color: var(--white);
  background-color: var(--secondary);
}
.no-release-note {
  padding: var(--space-3);
  color: var(--error-text);
  font-size: 0.875rem;
  font-weight: 500;
}