:root {
  --black: #111111;
  --white: #fafafa;
  --paper: #f1ede4;
  --yellow: #f5d600;
  --red: #e63329;
  --blue: #1c4ed8;
  --green: #1faa3f;
  --grey: #d9d9d9;
  --grey-2: #ececec;
  --muted: #7a7a7a;
  --approved-bg: #effaf1;
  --draft-text: #3a3a3a;
  --backdrop: rgba(17, 17, 17, 0.55);
  color-scheme: light;
}

/* Dark theme: invert paper / surface / ink, brighten accents for contrast,
   keep yellow as-is. Specific selectors below restore the "always-dark"
   topbar, footer, and label-style pills, plus dark text on yellow and
   light text on red/blue/green. */
[data-theme="dark"] {
  --black: #ededed;
  --white: #18181a;
  --paper: #0e0e10;
  --red: #ff5046;
  --blue: #6b8eff;
  --green: #34c759;
  --grey: #2a2a2c;
  --grey-2: #242426;
  --muted: #8a8a8a;
  --approved-bg: #102016;
  --draft-text: #aaaaaa;
  --backdrop: rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--black);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--black);
  color: var(--white);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 4px solid var(--yellow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shape {
  display: inline-block;
  width: 18px;
  height: 18px;
}

.shape--circle {
  background: var(--red);
  border-radius: 50%;
}

.shape--square {
  background: var(--yellow);
}

.shape--triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 18px solid var(--blue);
}

.brand-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-title .slash {
  color: var(--yellow);
  margin: 0 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.me {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--grey);
}

.btn {
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  padding: 8px 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.btn:hover {
  background: var(--white);
}

.btn:active {
  background: var(--red);
  color: var(--white);
}

.btn:disabled {
  background: var(--grey);
  color: var(--muted);
  cursor: wait;
}

.btn--settings {
  background: var(--white);
  color: var(--black);
}

.btn--settings:hover {
  background: var(--blue);
  color: var(--white);
}

.btn--theme {
  background: var(--white);
  color: var(--black);
  padding: 8px;
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

.btn--theme:hover {
  background: var(--yellow);
  color: var(--black);
}

.theme-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.theme-icon--sun {
  display: none;
}

[data-theme="dark"] .theme-icon--moon {
  display: none;
}

[data-theme="dark"] .theme-icon--sun {
  display: block;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0;
  padding: 16px 28px 0;
  border-bottom: 3px solid var(--black);
  background: var(--paper);
}

.tab {
  background: var(--black);
  color: var(--white);
  border: 3px solid var(--black);
  border-bottom: none;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  bottom: -3px;
  margin-right: -3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: background-color 80ms ease, color 80ms ease;
}

/* Yellow accent stripe on top: full-bleed on inactive tabs (the loud
   "click me to switch" state), collapsed on the active tab (the
   muted "you are here" state). The 6px height matches the column-title
   underline accents elsewhere, tying the inactive-tab marker into the
   same Bauhaus stripe vocabulary. */
.tab::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  height: 6px;
  background: var(--yellow);
  transition: height 80ms ease;
}

.tab:hover:not(.is-active) {
  background: var(--white);
  color: var(--black);
}

.tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tab.is-active {
  background: var(--grey-2);
  color: var(--black);
  z-index: 1;
}

.tab.is-active::before {
  height: 0;
}

.tab-count {
  background: var(--yellow);
  color: var(--black);
  padding: 2px 8px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.06em;
  min-width: 22px;
  text-align: center;
  display: inline-block;
  border: 1px solid var(--yellow);
}

.tab.is-active .tab-count {
  background: var(--black);
  color: var(--white);
  border-color: currentColor;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

/* The picker empty-state hides the tabs / heading / panels by toggling
   the standard `hidden` attribute. The defaults above (display: flex /
   block) beat the UA [hidden] rule, so we restate it explicitly here.
   Doing this rather than reaching for a custom class keeps tab toggling
   driven by one attribute the tab switcher already manages. */
.tabs[hidden],
.tab-panel[hidden],
.page-title[hidden] {
  display: none;
}

/* ---------- Page title (active-tab heading) ----------
   Sits between the tabs and the active panel. Mirrors the column-title
   stripe vocabulary -- bold uppercase wordmark with a fixed-width yellow
   accent stripe -- but at a "page" scale, anchoring whichever tab the
   user is currently on. The horizontal padding tracks the .tabs / .board
   pattern (28px desktop, 18px tablet, 14px mobile). */
.page-title {
  margin: 0;
  padding: 28px 28px 0;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.page-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  background: var(--yellow);
  margin-top: 12px;
}

/* ---------- Board ---------- */
.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  padding: 28px;
  align-items: start;
}

.board[hidden] {
  display: none;
}

.board--cols-1 {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.board--cols-2 {
  grid-template-columns: 1fr 1fr;
}

/* ---------- Empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 96px 24px 120px;
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.empty-state-mark {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.empty-state-mark .shape {
  width: 48px;
  height: 48px;
}

.empty-state-mark .shape--triangle {
  border-left-width: 28px;
  border-right-width: 28px;
  border-bottom-width: 48px;
}

.empty-state-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 56px;
  line-height: 1;
  border-bottom: 6px solid var(--yellow);
  padding-bottom: 8px;
}

.empty-state-sub {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Variant used when the viewer hasn't picked any repos yet. The
   container hosts the same `.settings-repo-list` checklist as the
   settings modal, so a fresh user can configure visibility right
   from the empty state without opening a dialog. The list is given
   a card-like frame so it reads as an actionable form, not just a
   continuation of the centred copy above it. */
.empty-state--picker {
  padding: 56px 24px 96px;
  gap: 14px;
}

.empty-state--picker .empty-state-sub {
  max-width: 480px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}

.empty-state-picker-card {
  width: min(520px, 100%);
  margin-top: 8px;
  background: var(--white);
  border: 3px solid var(--black);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  text-align: left;
}

.empty-state-picker-card .settings-empty {
  text-transform: uppercase;
}

.column {
  background: var(--white);
  border: 3px solid var(--black);
  padding: 18px;
  min-height: 60vh;
  /* As a CSS-grid item, .column defaults to min-width: auto = min-content,
     which lets descendants force the track wider than the 1fr we asked
     for. The .pr-stack inline tree (nodes with white-space: nowrap titles
     and inflexible "APPROVED"/"READY" badges) has a min-content well past
     a phone column, so without this the whole board would horizontally
     scroll on mobile. Anchoring the track lets the cards live inside the
     viewport and rely on their own overflow-hidden + ellipsis to clamp
     long titles. */
  min-width: 0;
}

.column--ready {
  border-left-width: 12px;
  border-left-color: var(--green);
}

.column--approved {
  border-width: 4px;
  border-color: var(--green);
  background: var(--approved-bg);
}

.column--approved .column-title {
  color: var(--green);
}

.column-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.column-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
  padding-bottom: 8px;
}

.column--progress .column-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 6px;
  background: var(--yellow);
}

.column--ready .column-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 6px;
  background: var(--green);
}

.column--approved .column-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--green);
}

.column-count {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  background: var(--black);
  color: var(--white);
  padding: 4px 8px;
}

.column-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.column-body:empty::before {
  content: "—";
  color: var(--muted);
  font-weight: 800;
  font-size: 28px;
  display: block;
  text-align: center;
  padding: 24px 0;
}

/* ---------- PR card ---------- */
.pr-card {
  background: var(--white);
  border: 3px solid var(--black);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.pr-card.is-ready {
  border: 4px solid var(--green);
}

.pr-card.is-draft {
  background: var(--grey);
  color: var(--draft-text);
}

.pr-card.is-draft .pr-title {
  color: var(--draft-text);
}

.pr-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pr-number {
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.pr-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 15px;
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.pr-title a,
a.pr-number {
  color: inherit;
  text-decoration: none;
}

.pr-title a:hover,
a.pr-number:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue);
}

a.pr-number:hover {
  color: var(--blue);
}

.pr-author {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
}

.pr-tag {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 2px 6px;
  border: 2px solid var(--black);
  background: var(--white);
}

.pr-tag--draft {
  background: var(--black);
  color: var(--white);
}

/* The "Draft" pill is a button: clicking it flips the PR to
   "Ready for review". Visually matches .pr-tag--draft at rest so the
   tag's familiar shape is preserved; hover paints it green to telegraph
   the upcoming state change. */
.draft-button {
  display: inline-block;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 2px 6px;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
}

.draft-button:hover:not(:disabled) {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.draft-button:disabled {
  background: var(--grey);
  color: var(--muted);
  border-color: var(--grey);
  cursor: wait;
}

.draft-button.is-error {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.draft-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* status strip */
.pr-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* On desktop the row wrappers vanish: their children flow into the
   parent's flex line so visual layout is unchanged. The actions row
   (preview + merge) and the Linear row are deliberate exceptions:
   they each break onto their own line so the call-to-action strip
   and the ticket link never get crammed in next to the status pills.
   On mobile (below) all rows become real flex containers, giving us
   stacked rows. */
.pr-status-row {
  display: contents;
}

.pr-status-row--actions,
.pr-status-row--linear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
}

.checks {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--black);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.checks-label {
  background: var(--black);
  color: var(--white);
  padding: 4px 6px;
  text-transform: uppercase;
}

.checks-cell {
  padding: 4px 8px;
  border-left: 2px solid var(--black);
  min-width: 26px;
  text-align: center;
  background: var(--white);
}

.checks-cell--pass {
  background: var(--green);
  color: var(--white);
}

.checks-cell--pending {
  background: var(--yellow);
  color: var(--black);
}

.checks-cell--fail {
  background: var(--red);
  color: var(--white);
}

/* Tooltip-only affordance: when the failed cell has a title attribute
   (i.e. there are names to show on hover), give it the help cursor so
   the user knows the cell is hover-informative. Plain failed cells with
   no names attached keep the default cursor. */
.checks-cell--fail[title] {
  cursor: help;
}

.checks-cell--zero {
  background: var(--white);
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--black);
  padding: 4px 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--white);
}

/* Combined Comments pill — same shape as .checks: a label cap plus
   per-kind cells for the H (human) and B (bot) counts. */
.comments {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--black);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.comments-label {
  background: var(--black);
  color: var(--white);
  padding: 4px 6px;
  text-transform: uppercase;
}

.comments-cell {
  padding: 4px 8px;
  border-left: 2px solid var(--black);
  min-width: 26px;
  text-align: center;
  background: var(--white);
}

.comments-cell--human {
  background: var(--blue);
  color: var(--white);
}

.comments-cell--bot {
  background: var(--black);
  color: var(--white);
}

.comments-cell--zero {
  background: var(--white);
  color: var(--muted);
}

.chip--review {
  background: var(--blue);
  color: var(--white);
}

.chip--approved {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.review-request {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--black);
  padding: 4px 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--black);
  font-family: inherit;
  cursor: pointer;
}

.review-request:hover:not(:disabled) {
  background: var(--blue);
  color: var(--white);
}

.review-request:disabled {
  background: var(--grey);
  color: var(--muted);
  cursor: wait;
}

.review-request.is-error {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.review-request:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.merge-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--black);
  padding: 6px 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--white);
  font-family: inherit;
  cursor: pointer;
}

.merge-button:hover:not(:disabled):not(.is-merged) {
  background: var(--black);
  color: var(--yellow);
}

.merge-button:disabled {
  background: var(--grey);
  color: var(--muted);
  cursor: wait;
}

.merge-button.is-error {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.merge-button.is-merged {
  background: var(--black);
  color: var(--green);
  cursor: default;
}

.merge-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.chip-key {
  font-weight: 900;
}

.preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preview-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.preview-copy {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  cursor: pointer;
  flex-shrink: 0;
}

.preview-copy:hover {
  background: var(--yellow);
}

.preview-copy:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.preview-copy.is-copied {
  background: var(--green);
  color: var(--white);
}

.preview-copy .icon {
  width: 14px;
  height: 14px;
  display: block;
}

.preview-copy .icon--check {
  display: none;
}

.preview-copy.is-copied .icon--copy {
  display: none;
}

.preview-copy.is-copied .icon--check {
  display: block;
}

.preview--live {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.preview--pending {
  color: var(--muted);
}

.linear-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.linear-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.conflicts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--black);
  padding: 4px 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conflicts-bang {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: var(--white);
  color: var(--red);
  font-weight: 900;
}

/* ---------- Reviewing tab ---------- */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.reviews-list:empty::before {
  content: "";
}

.review-row {
  background: var(--white);
  border: 3px solid var(--black);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.review-row.is-draft {
  background: var(--grey);
  color: var(--draft-text);
}

.review-row.is-draft .review-title {
  color: var(--draft-text);
}

.review-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.review-number {
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.review-number:hover {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.review-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
  line-height: 1.3;
}

.review-title a {
  color: inherit;
  text-decoration: none;
}

.review-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue);
}

.review-repo {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--grey-2);
  padding: 2px 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.review-author {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
}

.review-requested-at {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.review-requested-at::before {
  content: "\00B7";
  margin-right: 8px;
  color: var(--grey);
}

.review-requested-relative {
  color: var(--black);
  font-weight: 800;
}

.review-row.is-draft .review-requested-relative {
  color: var(--draft-text);
}

.review-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---------- Ignored cards ---------- */
.pr-card.is-ignored,
.review-row.is-ignored {
  display: none;
}

/* ---------- Manually-reviewed toggle ----------
   Small outlined pill that lives at the end of the PR header (or in the
   review-row's meta strip). Pure client-side marker -- the server never
   sees it. Pressed state flips it green so the marker reads at a glance,
   and the host card/row gets .is-manually-reviewed which dims and
   strikes through the title to push it visually out of the way without
   hiding it (unlike the per-repo ignore which removes the card). */
.reviewed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 2px 6px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  margin-left: auto;
}

.reviewed-toggle-check {
  font-size: 12px;
  line-height: 1;
  opacity: 0.35;
}

.reviewed-toggle:hover {
  background: var(--grey-2);
}

.reviewed-toggle[aria-pressed="true"] {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.reviewed-toggle[aria-pressed="true"] .reviewed-toggle-check {
  opacity: 1;
}

.reviewed-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.pr-card.is-manually-reviewed,
.review-row.is-manually-reviewed {
  opacity: 0.55;
}

.pr-card.is-manually-reviewed:hover,
.review-row.is-manually-reviewed:hover {
  opacity: 1;
}

/* ---------- Stacked PRs ----------
   Each stacked card carries the same inline tree so a reader can locate
   the rest of the stack without leaving the card. The "self" row is
   bolded; siblings show a small column badge so it's obvious when the
   stack is split across IN PROGRESS / READY / APPROVED. The badge
   palette mirrors the column-title accents above:
   - progress -> yellow (matches .column--progress)
   - ready    -> green outline (matches .column--ready)
   - approved -> solid green  (matches .column--approved) */
.pr-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  background: var(--grey-2);
  border: 2px solid var(--black);
  font-size: 12px;
}

.pr-stack-label {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted);
}

.pr-stack-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pr-stack-node {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pr-stack-prefix {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--muted);
  white-space: pre;
  font-size: 12px;
  flex: 0 0 auto;
}

.pr-stack-link {
  font-weight: 800;
  color: var(--muted);
  text-decoration: none;
  flex: 0 0 auto;
}

.pr-stack-link:hover {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.pr-stack-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--draft-text);
}

.pr-stack-node.is-self .pr-stack-link,
.pr-stack-node.is-self .pr-stack-title {
  color: var(--black);
  font-weight: 800;
}

.pr-stack-node.is-self {
  background: var(--white);
  margin: 0 -4px;
  padding: 2px 4px;
}

.pr-stack-col {
  display: inline-block;
  flex: 0 0 auto;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 1px 6px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
}

.pr-stack-col--progress {
  background: var(--yellow);
  color: var(--black);
}

.pr-stack-col--ready {
  background: var(--white);
  border-color: var(--green);
  color: var(--green);
}

.pr-stack-col--approved {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* When every PR in a stack lands in the same column, the inline tree
   on each card is redundant -- the relationship is obvious if we just
   stack the cards literally. JS wraps those cards in a .pr-stack-group
   (root first, children in pre-order), and each child gets a left
   indent proportional to its --stack-depth so the chain reads at a
   glance. The wrapper's gap is tighter than the column's gap so the
   cards feel attached instead of merely adjacent. */
.pr-stack-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pr-card.is-stack-co-column {
  margin-left: calc(var(--stack-depth, 0) * 28px);
}

@media (max-width: 640px) {
  /* Phones don't have the horizontal room to spare 28px per level --
     halve it so a depth-2 child still leaves a usable card width. */
  .pr-card.is-stack-co-column {
    margin-left: calc(var(--stack-depth, 0) * 14px);
  }
}

/* ---------- Settings modal ---------- */
.settings-modal {
  padding: 0;
  border: 4px solid var(--black);
  background: var(--white);
  color: var(--black);
  width: min(520px, 92vw);
  max-height: 78vh;
  font-family: inherit;
}

.settings-modal::backdrop {
  background: var(--backdrop);
}

.settings-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--black);
  color: var(--white);
  padding: 14px 18px;
  border-bottom: 4px solid var(--yellow);
}

.settings-modal-header .brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-modal-titles {
  flex: 1;
  min-width: 0;
}

.settings-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-modal-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--yellow);
  text-transform: uppercase;
}

.settings-modal-close {
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-family: inherit;
}

.settings-modal-close:hover {
  background: var(--red);
  color: var(--white);
}

.settings-section {
  padding: 16px 18px;
  border-bottom: 3px solid var(--grey-2);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-section-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.settings-section-hint strong {
  color: var(--black);
}

.settings-reviewer-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--black);
  background: var(--white);
  padding: 6px 10px;
}

.settings-reviewer-at {
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.settings-reviewer-input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--black);
  min-width: 0;
  padding: 2px 0;
}

.settings-reviewer-input input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.settings-reviewer-status {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.settings-reviewer-status.is-saving {
  color: var(--blue);
}

.settings-reviewer-status.is-saved {
  color: var(--green);
}

.settings-reviewer-status.is-error {
  color: var(--red);
}

.settings-modal-body {
  max-height: calc(78vh - 140px);
  overflow-y: auto;
  padding: 8px 0;
}

.settings-repo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-row {
  border-bottom: 2px solid var(--grey-2);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

.settings-row label:hover {
  background: var(--grey-2);
}

.settings-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--black);
  background: var(--white);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.settings-row input[type="checkbox"]:checked {
  background: var(--red);
}

.settings-row input[type="checkbox"]:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
}

.settings-repo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-count {
  background: var(--black);
  color: var(--white);
  padding: 2px 8px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.settings-empty {
  padding: 20px 18px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.settings-modal-footer {
  border-top: 2px solid var(--grey-2);
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- Footer "last updated" tab ---------- */
.footer-meta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 8px 18px;
  border: 3px solid var(--black);
  border-bottom: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 10;
  min-width: 220px;
  text-align: center;
}

.footer-meta:empty {
  display: none;
}

.footer-meta .last-updated-relative {
  color: var(--yellow);
  margin-left: 4px;
}

.board {
  padding-bottom: 64px;
}

/* iOS safe-area for the fixed footer tab on devices with home indicator. */
@supports (padding: max(0px)) {
  .footer-meta {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .board {
    padding-bottom: max(64px, calc(48px + env(safe-area-inset-bottom)));
  }
}

/* Reduce double-tap zoom delay on touch buttons. */
.btn,
.review-request,
.draft-button,
.preview-copy,
.settings-modal-close,
.settings-row input[type="checkbox"] {
  touch-action: manipulation;
}

/* ---------- Error banner ---------- */
.error-banner {
  margin: 18px 28px 0;
  border: 3px solid var(--black);
  background: var(--yellow);
  color: var(--black);
}

.error-banner[hidden] {
  display: none;
}

.error-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.error-banner-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--black);
  color: var(--yellow);
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
}

.error-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.error-banner-text strong {
  font-weight: 900;
}

.error-banner-hint {
  font-weight: 700;
  margin-left: 6px;
}

.error-banner-relative {
  font-weight: 900;
}

@media (max-width: 640px) {
  .error-banner {
    margin: 12px 14px 0;
    border-width: 2px;
  }
  .error-banner-inner {
    padding: 10px 12px;
    gap: 10px;
  }
  .error-banner-text {
    font-size: 12px;
  }
}

/* ---------- Dark theme overrides ----------
   The variable swap above flips paper/surface/ink across the app. These
   rules pin contrast for the few spots where a naive swap would break:
   - The topbar, footer tab, and "label" pills stay dark with light text
     in both modes (brand identity).
   - Yellow accents always get dark text.
   - Red / blue / green accents always get light text.
*/
[data-theme="dark"] .topbar,
[data-theme="dark"] .footer-meta,
[data-theme="dark"] .settings-modal-header,
[data-theme="dark"] .column-count,
[data-theme="dark"] .checks-label,
[data-theme="dark"] .comments-label,
[data-theme="dark"] .comments-cell--bot,
[data-theme="dark"] .pr-tag--draft,
[data-theme="dark"] .draft-button,
[data-theme="dark"] .settings-count {
  background: #111111;
  color: #fafafa;
}

[data-theme="dark"] .draft-button {
  border-color: #111111;
}

[data-theme="dark"] .draft-button:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: #fafafa;
}

[data-theme="dark"] .draft-button.is-error {
  background: var(--red);
  border-color: var(--red);
  color: #fafafa;
}

[data-theme="dark"] .footer-meta {
  border-color: #111111;
}

[data-theme="dark"] .me {
  color: #d9d9d9;
}

[data-theme="dark"] .btn--settings,
[data-theme="dark"] .btn--theme {
  background: #ededed;
  color: #111111;
  border-color: #111111;
}

[data-theme="dark"] .btn--theme:hover {
  background: var(--yellow);
  color: #111111;
}

[data-theme="dark"] .btn:hover {
  background: #ededed;
}

/* Always-dark text on yellow */
[data-theme="dark"] .btn,
[data-theme="dark"] .checks-cell--pending,
[data-theme="dark"] .review-request,
[data-theme="dark"] .settings-modal-close,
[data-theme="dark"] .preview-copy:hover,
[data-theme="dark"] .error-banner {
  color: #111111;
}

[data-theme="dark"] .error-banner {
  border-color: #111111;
}

[data-theme="dark"] .error-banner-icon {
  background: #111111;
  color: var(--yellow);
}

/* Always-light text on red / blue / green */
[data-theme="dark"] .btn:active,
[data-theme="dark"] .btn--settings:hover,
[data-theme="dark"] .checks-cell--pass,
[data-theme="dark"] .checks-cell--fail,
[data-theme="dark"] .comments-cell--human,
[data-theme="dark"] .chip--review,
[data-theme="dark"] .chip--approved,
[data-theme="dark"] .review-request:hover:not(:disabled),
[data-theme="dark"] .review-request.is-error,
[data-theme="dark"] .merge-button,
[data-theme="dark"] .merge-button.is-error,
[data-theme="dark"] .preview-copy.is-copied,
[data-theme="dark"] .conflicts,
[data-theme="dark"] .settings-modal-close:hover {
  color: #fafafa;
}

/* Merge button "ink" hover/merged states need a dark bg in dark mode
   (since var(--black) inverts to light). */
[data-theme="dark"] .merge-button:hover:not(:disabled):not(.is-merged) {
  background: #111111;
  color: var(--yellow);
}

[data-theme="dark"] .merge-button.is-merged {
  background: #111111;
  color: var(--green);
}

/* Inner check-mark dot on the settings checkbox stays light on red. */
[data-theme="dark"] .settings-row input[type="checkbox"]:checked::after {
  background: #fafafa;
}

/* ---------- Tablet: collapse to single column ---------- */
@media (max-width: 800px) {
  .board {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }
  .column {
    padding: 14px;
  }
  .reviews-list {
    padding: 18px;
  }
  .page-title {
    padding: 22px 18px 0;
    font-size: 28px;
  }
}

/* ---------- Mobile: tighten chrome and bump touch targets ---------- */
@media (max-width: 640px) {
  .topbar {
    padding: 12px 14px;
    gap: 10px;
    border-bottom-width: 3px;
  }
  .brand {
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .brand-mark {
    gap: 6px;
  }
  .shape {
    width: 14px;
    height: 14px;
  }
  .shape--triangle {
    border-left-width: 8px;
    border-right-width: 8px;
    border-bottom-width: 14px;
  }
  .brand-title {
    font-size: 17px;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions {
    gap: 8px;
  }
  .me {
    display: none;
  }
  .btn {
    padding: 10px 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    min-height: 40px;
  }
  .btn--theme {
    padding: 0;
    width: 40px;
    min-width: 40px;
  }

  .page-title {
    padding: 18px 14px 0;
    font-size: 22px;
  }
  .page-title::after {
    width: 72px;
    height: 4px;
    margin-top: 8px;
  }

  .tabs {
    padding: 12px 14px 0;
    border-bottom-width: 2px;
  }
  .tab {
    padding: 9px 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    border-width: 2px;
    bottom: -2px;
    margin-right: -2px;
  }
  .tab::before {
    left: -2px;
    right: -2px;
    top: -2px;
    height: 5px;
  }
  .tab.is-active::before {
    height: 0;
  }
  .tab-count {
    font-size: 10px;
    padding: 2px 6px;
  }

  .board {
    padding: 14px;
    gap: 14px;
  }
  .reviews-list {
    padding: 14px;
    gap: 10px;
  }
  .review-row {
    padding: 10px 12px;
    gap: 10px;
    border-width: 2px;
  }
  .review-title {
    font-size: 13px;
    flex: 1 1 100%;
  }
  .review-main {
    gap: 8px;
  }
  .review-meta {
    gap: 6px;
    flex-wrap: wrap;
  }
  .column {
    padding: 12px;
    border-width: 2px;
    min-height: 0;
  }
  .column--ready {
    border-left-width: 8px;
  }
  .column-title {
    font-size: 16px;
  }
  .column-header {
    margin-bottom: 12px;
  }

  .pr-card {
    padding: 12px;
    border-width: 2px;
  }
  .pr-card.is-ready {
    border-width: 3px;
  }

  /* Mobile pr-head: title gets its own row, number + author justify
     across the second row (draft tag, if present, sits after author). */
  .pr-head {
    row-gap: 4px;
  }
  .pr-head .pr-title {
    order: -1;
    flex: 1 0 100%;
    font-size: 14px;
  }
  .pr-head .pr-number {
    margin-right: auto;
  }

  /* Stacked rows on mobile: each .pr-status-row becomes its own flex
     line. Order matches semantic grouping in the template:
       row 1 = checks + conflicts
       row 2 = comment chips + R chip/button
       row 3 = preview link + copy, merge button
       row 4 = Linear ticket link (only when one is detected). */
  .pr-status {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .pr-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    min-height: 40px;
  }
  .pr-status-row:empty {
    display: none;
  }
  .pr-status-row--actions,
  .pr-status-row--linear {
    justify-content: flex-start;
    /* Reset the desktop "force own line" basis -- on mobile each row
       is its own stacked line via flex-direction: column already, and a
       percentage main-axis basis in a column flex with indefinite
       height is poorly specified across browsers. */
    flex-basis: auto;
  }

  /* Uniform 40px height for every interactive element in the strip. */
  .checks,
  .comments,
  .chip,
  .conflicts,
  .review-request,
  .preview-copy,
  .merge-button,
  .preview,
  .linear-link {
    height: 40px;
    box-sizing: border-box;
  }
  /* For simple text chips, centre vertically. .checks is itself a flex
     container of cells; it must KEEP align-items: stretch so the cells
     fill the full pill height (otherwise their background colours only
     paint the content's intrinsic height). */
  .chip,
  .conflicts,
  .review-request,
  .merge-button {
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }
  .checks-cell,
  .checks-label,
  .comments-cell,
  .comments-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .preview-copy {
    width: 40px;
  }
  .preview-copy .icon {
    width: 18px;
    height: 18px;
  }
  .preview-group {
    height: 40px;
    align-items: center;
  }
  .merge-button {
    padding: 0 16px;
    font-size: 13px;
    margin-left: auto;
  }

  /* Push the "Request review" button (only its un-clicked, button form
     -- not the post-click chip) onto its own wrapped line below the
     Comments pill. The approved / requested chips stay inline. */
  .review-request {
    flex: 1 0 100%;
    justify-content: center;
  }

  /* Settings modal: near-fullscreen sheet on phones. */
  .settings-modal {
    width: 96vw;
    max-height: 88vh;
    border-width: 3px;
  }
  .settings-modal-header {
    padding: 12px 14px;
    gap: 10px;
    border-bottom-width: 3px;
  }
  .settings-modal-title {
    font-size: 16px;
  }
  .settings-modal-body {
    max-height: calc(88vh - 130px);
  }
  .settings-row label {
    padding: 14px 14px;
    font-size: 14px;
    gap: 14px;
  }
  .settings-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .settings-row input[type="checkbox"]:checked::after {
    width: 10px;
    height: 10px;
  }
  .settings-modal-close {
    width: 36px;
    height: 36px;
  }

  /* Compact "last updated" tab. */
  .footer-meta {
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
    min-width: 0;
    border-width: 2px;
  }

  /* Smaller empty-state on phones. */
  .empty-state {
    padding: 56px 20px 96px;
    gap: 14px;
  }
  .empty-state-mark .shape {
    width: 32px;
    height: 32px;
  }
  .empty-state-mark .shape--triangle {
    border-left-width: 18px;
    border-right-width: 18px;
    border-bottom-width: 32px;
  }
  .empty-state-title {
    font-size: 36px;
    border-bottom-width: 4px;
  }
  .empty-state-sub {
    font-size: 12px;
  }
}

/* ---------- Very narrow phones (<= 380px): drop button text to icon. */
@media (max-width: 380px) {
  .btn--settings {
    font-size: 0;
    padding: 10px;
    min-width: 40px;
  }
  .btn--settings::before {
    content: "\2699"; /* gear */
    font-size: 18px;
  }
  .btn--refresh {
    font-size: 0;
    padding: 10px;
    min-width: 40px;
  }
  .btn--refresh::before {
    content: "\21BB"; /* clockwise arrow */
    font-size: 18px;
    font-weight: 900;
  }
  .brand-title {
    font-size: 15px;
  }
}

/* ---------- Auth pages (login + OAuth error) ---------- */
.auth-page,
.auth-error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--paper);
}

.auth-card,
.auth-error {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 3px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  padding: 36px 28px 28px;
  text-align: center;
}

.brand-mark--large .shape {
  width: 28px;
  height: 28px;
}

.brand-mark--large .shape--triangle {
  border-left-width: 17px;
  border-right-width: 17px;
  border-bottom-width: 28px;
}

.auth-card .brand-mark--large {
  gap: 12px;
}

.auth-title {
  margin: 18px 0 8px;
  font-size: 30px;
}

.auth-tagline {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
}

.btn--signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  background: var(--black);
  color: var(--white);
}

.btn--signin:hover {
  background: var(--blue);
  color: var(--white);
}

.btn--signin:active {
  background: var(--red);
  color: var(--white);
}

.signin-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.auth-scopes {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-scopes code {
  background: var(--grey-2);
  border: 1px solid var(--grey);
  padding: 0 4px;
  font-size: 11px;
}

.auth-footer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
}

.auth-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.auth-footer a:hover {
  color: var(--black);
}

.auth-error h1 {
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.auth-error-msg {
  margin: 0 0 24px;
  color: var(--red);
  font-weight: 600;
}

.auth-error .btn {
  text-decoration: none;
  display: inline-block;
}

.auth-error-ref {
  margin: 22px 0 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Topbar user chip + sign-out ---------- */
.btn--signout {
  background: var(--white);
  color: var(--black);
}

.btn--signout:hover {
  background: var(--red);
  color: var(--white);
}

.me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.me-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: var(--grey);
}