.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: var(--space-4);
  padding: 0 max(1rem, calc((100% - 75rem) / 2));
  border-bottom: 0;
  background: color-mix(in oklch, var(--background) 82%, transparent);
  backdrop-filter: blur(1.25rem);
}
.topbar::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 0.25rem;
  background-image: linear-gradient(
    90deg,
    var(--secondary) 0 5%,
    transparent 5% 13%,
    var(--primary) 13% 46%,
    transparent 46% 70%,
    var(--cyber) 70% 71%,
    transparent 71% 91%,
    var(--primary) 91% 100%
  );
  content: '';
  opacity: 0.8;
}
.wordmark { display: inline-flex; align-items: center; flex: none; min-height: 2.5rem; font-family: var(--display); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.025em; }
.brand-mark { flex: none; margin-right: var(--space-2); }
.wordmark span + span { margin-left: 0.28ch; color: var(--primary-text); }
.nav { display: none; align-items: center; gap: var(--space-1); }
.nav-auth-links { display: contents; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--space-2) var(--space-3); color: var(--muted-foreground); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: color 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:not(.btn-primary)::after { position: absolute; right: var(--space-3); bottom: 0.3rem; left: var(--space-3); height: 2px; background: var(--primary); content: ''; transform: scaleX(0); transform-origin: left; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--foreground); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.nav .nav-quiet { color: var(--subtle-foreground); }
.nav .nav-quiet::after { background: var(--border); }
.nav .btn-primary, .nav .btn-primary:hover { border-color: transparent; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-foreground); box-shadow: none; }
.menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; min-height: 2.5rem; border: 0; border-radius: var(--radius-sm); padding: 0; background: var(--surface-interactive); color: var(--foreground); cursor: pointer; }
.menu-trigger svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 0.9rem; font-weight: 650; white-space: nowrap; transition: background 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.theme-toggle:hover { background: var(--surface-interactive); color: var(--foreground); }
.theme-toggle-icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--primary-text); }
.theme-toggle-label { display: none; }
.theme-switch { position: relative; flex: none; width: 2rem; height: 1.125rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-sunken); transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.theme-switch span { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--muted-foreground); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.theme-toggle[aria-pressed='true'] .theme-switch { border-color: var(--primary); background: var(--primary); }
.theme-toggle[aria-pressed='true'] .theme-switch span { background: var(--primary-foreground); transform: translateX(0.875rem); }

.btn, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  background: var(--surface-translucent);
  color: var(--foreground);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover, .icon-button:hover { border-color: var(--primary-border-hover); background: var(--surface-hover); }
.btn:active, .icon-button:active { transform: translateY(1px) scale(0.985); }
.btn-primary { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--glow-primary); transform: translateY(-0.125rem); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted-foreground); }
.btn-big { min-height: 3rem; padding-inline: var(--space-5); }
.icon-button { min-height: 2.5rem; padding: var(--space-2) var(--space-3); background: transparent; color: var(--muted-foreground); }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  background: var(--surface-sunken);
  color: var(--foreground);
  line-height: 1.35;
  transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
input::placeholder, textarea::placeholder { color: var(--subtle-foreground); }
input:hover, select:hover, textarea:hover { border-color: var(--primary-border); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid var(--ring); outline-offset: 2px; }
input[type='range'] { padding: 0; accent-color: var(--primary); }
input[type='checkbox'] { width: auto; accent-color: var(--primary); }

.stack-form { display: grid; gap: var(--space-4); }
.stack-form label { display: grid; gap: var(--space-2); color: var(--foreground); font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; }
.stack-form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.stack-form legend { padding-inline: var(--space-1); color: var(--muted-foreground); font-size: 0.85rem; font-weight: 650; }
.stack-form .check { display: flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-weight: 500; }
.stack-form output { color: var(--primary); font-family: var(--mono); }
.form-page { max-width: 40rem; margin-inline: auto; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-panel); }

/* Compensation is a multi-select toggle group; native checkboxes keep form semantics. */
.stack-form .compensation-picker { display: grid; gap: var(--space-3); }
.compensation-picker .form-help { margin: calc(var(--space-2) * -1) 0 0; }
.compensation-toggle-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.compensation-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; background: var(--surface-sunken); color: var(--muted-foreground); cursor: pointer; font-size: 0.86rem; font-weight: 650; transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.compensation-toggle:hover { border-color: var(--primary-border); color: var(--foreground); }
.compensation-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.compensation-indicator { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border: 1px solid var(--border); border-radius: 0.25rem; color: transparent; }
.compensation-indicator svg { width: 0.75rem; height: 0.75rem; }
.compensation-toggle:has(input:checked) { border-color: var(--primary-border); background: var(--primary-subtle); color: var(--primary-text); }
.compensation-toggle:has(input:checked) .compensation-indicator { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.compensation-toggle:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.timeline-field { display: grid; gap: var(--space-2); color: var(--foreground); font-size: 0.9rem; font-weight: 650; }
.timeline-field > label { display: inline-flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.timeline-field output { color: var(--primary-text); font-family: var(--mono); font-size: 0.82rem; font-weight: 600; }
.timeline-range { margin: var(--space-1) 0; cursor: pointer; }
.timeline-scale { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--subtle-foreground); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; }
.timeline-scale span:last-child { text-align: right; }

/* Chip input: shadcn-style tags with a native comma-separated fallback. */
.chip-field { display: grid; gap: var(--space-2); color: var(--foreground); font-size: 0.9rem; font-weight: 650; }
.chip-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.chip-label::after { color: var(--subtle-foreground); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; content: 'TAGS'; }
.chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; min-height: 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); background: var(--surface-sunken); transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.chip-input:focus-within { border-color: var(--primary); outline: 2px solid var(--ring); outline-offset: 2px; }
.chip-list { display: contents; }
.chip-input > [data-chip-value], .chip-entry { flex: 1 1 10rem; min-width: 8rem; border: 0; border-radius: 0; padding: var(--space-1); background: transparent; outline: 0; }
.chip-input .chip-entry:focus { border: 0; outline: 0; }
.chip-field.enhanced [data-chip-value] { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; border: 1px solid var(--primary-border); border-radius: 0.35rem; padding: 0.18rem 0.28rem 0.18rem 0.45rem; background: var(--primary-subtle); color: var(--primary-text); font-family: var(--mono); font-size: 0.78rem; line-height: 1.35; }
.chip-text { min-width: 0; overflow-wrap: anywhere; }
.chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: -0.55rem -0.6rem -0.55rem -0.15rem; border: 0; border-radius: 0.35rem; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.chip-remove:hover { background: var(--surface-hover); }
.chip-remove:focus-visible { outline-offset: 1px; }
.chip-remove svg { width: 0.8rem; height: 0.8rem; }

.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge { border: 1px solid var(--border); border-radius: 0; padding: 0.15rem 0.45rem; color: var(--muted-foreground); font-family: var(--mono); font-size: 0.75rem; overflow-wrap: anywhere; }
.badge-role { border-color: var(--primary-border); background: var(--primary-subtle); color: var(--primary-text); }
.badge-comp { border-style: dashed; }

/* Launch path: a lit progress strip with a glowing threshold marker. */
.runway { display: flex; align-items: center; gap: var(--space-3); }
.runway-track {
  position: relative;
  container-type: inline-size;
  flex: 1;
  height: 0.5rem;
  border-radius: 0.25rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 0.7rem, var(--border) 0.7rem 1.4rem) 50% 50% / 100% 1px no-repeat,
    var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.runway-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--runway-start), var(--primary));
  box-shadow: 0 0 0.8rem var(--runway-glow);
  transform-origin: left;
  animation: runway-light 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.runway-marker {
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--glow-primary);
  transform: translate(-50%, -50%);
  animation: threshold-on 240ms cubic-bezier(0.16, 1, 0.3, 1) 380ms backwards;
}
@keyframes runway-light { from { transform: scaleX(0); } }
@keyframes threshold-on { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } }
.runway-pct { min-width: 3.2ch; color: var(--primary-text); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; text-align: right; }
.runway-progress .runway-fill { animation: runway-progress-fill 1.1s cubic-bezier(0.16, 1, 0.3, 1) 320ms both; }
.runway-final-leg { position: absolute; inset: 0 0 0 var(--runway-start-position); border-radius: 0 0.25rem 0.25rem 0; background: linear-gradient(90deg, color-mix(in oklch, var(--success) 68%, var(--surface)), var(--success)); box-shadow: inset 1px 0 0 var(--success-border), 0 0 0.8rem var(--success-border); transform-origin: left; animation: runway-final-leg 760ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both; }
.runway-progress .runway-marker { left: var(--runway-start-position) !important; background: var(--success); box-shadow: 0 0 1.1rem var(--success-border); animation: runway-progress-marker 760ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both; }
.runway-progress .runway-pct { display: flex; align-items: center; justify-content: end; min-width: 8ch; height: 1.55em; gap: 0.3rem; line-height: 1; }
.runway-progress .runway-pct > span { position: static; }
.runway-pct-start { color: var(--muted-foreground); opacity: 1; animation: runway-pct-start 180ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both; }
.runway-pct-start::after { margin-left: 0.3rem; color: var(--success); content: '→'; }
.runway-pct-end { color: var(--success); opacity: 0; animation: runway-pct-end 180ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both; }
@keyframes runway-progress-fill { from { transform: scaleX(var(--runway-start-scale)); } to { transform: scaleX(1); } }
@keyframes runway-final-leg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes runway-progress-marker { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -50%) translateX(var(--runway-delta-distance)); } }
@keyframes runway-pct-start { to { opacity: 0.72; } }
@keyframes runway-pct-end { from { transform: translateX(-0.2rem); } to { opacity: 1; transform: translateX(0); } }

/* Filter bar: always-visible control strip. */
.filterbar {
  position: relative;
  z-index: 10;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: color-mix(in oklch, var(--surface) 78%, transparent);
  backdrop-filter: blur(0.75rem);
}
.filterbar::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 0.2rem;
  background: var(--secondary);
  box-shadow: 0 0 0.8rem rgb(196 30 58 / 0.22);
  content: '';
}
.filterbar form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter-search { position: relative; flex: 1 1 14rem; min-width: 11rem; }
.filter-search svg { position: absolute; top: 50%; left: 0.7rem; width: 1rem; height: 1rem; color: var(--subtle-foreground); pointer-events: none; transform: translateY(-50%); }
.filter-search input { min-height: 2.5rem; padding: 0.5rem 0.75rem 0.5rem 2.2rem; background: var(--surface-sunken); }
.filter-clear { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.5rem; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--muted-foreground); font-size: 0.85rem; font-weight: 650; }
.filter-clear:hover { background: var(--surface-interactive); color: var(--foreground); }
.filterbar.enhanced .filter-apply { display: none; }

/* Select: shadcn-style trigger + popover listbox (progressive enhancement over native select). */
.select { position: relative; flex: 0 1 auto; }
.select select { min-height: 2.5rem; padding-block: 0.5rem; }
.select.enhanced select { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); border: 0; padding: 0; overflow: hidden; white-space: nowrap; }
.select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.5rem;
  min-width: 9.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem 0.5rem 0.75rem;
  background: var(--surface-sunken);
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.select-trigger:hover { border-color: var(--primary-border); }
.select-trigger[aria-expanded='true'] { border-color: var(--primary); }
.select-trigger .select-label { color: var(--subtle-foreground); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.select-trigger .select-value { overflow: hidden; max-width: 11rem; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .select-value[data-placeholder] { color: var(--muted-foreground); }
.select-trigger svg { flex: none; width: 1rem; height: 1rem; color: var(--subtle-foreground); transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.select-trigger[aria-expanded='true'] svg { transform: rotate(180deg); }
.select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  left: 0;
  display: none;
  min-width: max(100%, 12rem);
  max-height: 18rem;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  overflow: auto;
  list-style: none;
  background: var(--surface-raised);
  box-shadow: var(--shadow-float);
}
.select-menu[data-open] { display: block; transform-origin: top; animation: menu-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-radius: calc(var(--radius-sm) - 0.15rem);
  padding: 0.45rem 0.6rem;
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.9rem;
}
.select-option:hover, .select-option[data-active] { background: var(--surface-interactive); }
.select-option[aria-selected='true'] { color: var(--primary-text); }
.select-option .select-check { flex: none; width: 1rem; height: 1rem; color: var(--primary); opacity: 0; }
.select-option[aria-selected='true'] .select-check { opacity: 1; }

/* Sheet: full-height side panel sliding in from the right, with animated backdrop.
   Uses transitions + @starting-style/allow-discrete so both open and close animate. */
.sheet {
  position: fixed;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(100vw - 3rem, 26rem);
  height: 100dvb;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-block: 0;
  border-right: 0;
  border-radius: 0;
  padding: 0;
  background: var(--surface-raised);
  color: var(--foreground);
  box-shadow: var(--shadow-float);
  transform: translateX(100%);
  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    display 320ms allow-discrete,
    overlay 320ms allow-discrete;
}
.sheet[open] { transform: translateX(0); }
@starting-style { .sheet[open] { transform: translateX(100%); } }
.sheet::backdrop { background: var(--surface-backdrop); backdrop-filter: blur(0.25rem); opacity: 0; transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1), display 320ms allow-discrete, overlay 320ms allow-discrete; }
.sheet[open]::backdrop { opacity: 1; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
.sheet-head { display: flex; flex: none; align-items: start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
.sheet-head h2 { margin-top: var(--space-1); }
.sheet-form { flex: 1; align-content: start; min-height: 0; overflow: auto; padding: var(--space-6); }
.sheet-actions { display: flex; justify-content: end; gap: var(--space-2); margin-top: var(--space-2); }
.btn-destructive { border-color: color-mix(in oklch, var(--destructive), var(--border) 45%); color: var(--destructive); }
.btn-destructive:hover { border-color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 88%); }
.nav-sheet { display: grid; align-content: start; align-items: stretch; flex: 1; gap: var(--space-1); overflow: auto; padding: var(--space-3); }
.nav-sheet a { border-radius: var(--radius-sm); padding: var(--space-3); }
.nav-sheet a:not(.btn-primary):hover { background: var(--surface-interactive); }
.nav-sheet .btn-primary { margin-top: var(--space-3); }
.nav-sheet .theme-toggle { justify-content: start; width: 100%; padding: var(--space-3); }
.nav-sheet .theme-toggle-label { display: inline; }
.nav-sheet .theme-switch { margin-left: auto; }

.toast-region { position: fixed; z-index: 40; right: var(--space-4); bottom: var(--space-4); width: min(calc(100% - 2rem), 24rem); pointer-events: none; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: 1px solid var(--primary-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface-raised); box-shadow: var(--shadow-float); color: var(--foreground); pointer-events: auto; animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.toast-success::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--primary); box-shadow: var(--glow-primary); content: ''; }
.toast span { flex: 1; font-size: 0.9rem; font-weight: 650; }
.toast button { min-width: 2.5rem; min-height: 2.5rem; border: 0; padding: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 0.75rem; }

.footer { position: relative; display: grid; place-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); border-top: 0; color: var(--subtle-foreground); font-size: 0.85rem; text-align: center; }
.footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.25rem;
  background-image: linear-gradient(
    90deg,
    transparent 0 8%,
    var(--cyber) 8% 9%,
    transparent 9% 34%,
    var(--primary) 34% 82%,
    transparent 82% 90%,
    var(--secondary) 90% 100%
  );
  content: '';
  opacity: 0.55;
}
.footer-tagline, .footer-location, .footer-attributions, .footer-badge { display: inline-flex; align-items: center; }
.footer-tagline { flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.footer-location, .footer-badge { gap: var(--space-1); font-family: var(--mono); font-size: 0.78rem; }
.footer-attributions { flex-wrap: nowrap; justify-content: center; gap: var(--space-2); }
.footer-badge { min-height: 2.5rem; border: 1px solid var(--border); border-radius: 0; padding: 0.35rem 0.7rem; transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.footer-badge:hover { border-color: var(--primary); color: var(--foreground); }
.eu-acc-badge { padding-block: 0.4rem; }
:root[data-theme='light'] .eu-acc-badge { border-color: #050510; background: #050510; }
.eu-acc-logo { width: 4.6rem; height: auto; }
.location-pin { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.codex-icon { display: inline-flex; font-size: 0.95rem; }

@keyframes toast-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-0.3rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 48rem) { .nav { display: flex; } .menu-trigger { display: none; } }
@media (max-width: 44rem) { .select { flex: 1 1 100%; } .select-trigger { width: 100%; } .filter-search { flex-basis: 100%; } }

/* Avatar: an initials tile with the photo layered over it. When Gravatar 404s
   the image hides itself and the tile below is what you see. */
.avatar {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  width: var(--avatar-size, 2.5rem);
  height: var(--avatar-size, 2.5rem);
  border-radius: 50%;
  background: linear-gradient(155deg, var(--avatar-surface-start), var(--avatar-surface-end));
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar-initials {
  color: var(--primary-text);
  font-family: var(--display);
  font-size: calc(var(--avatar-size, 2.5rem) * 0.38);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  user-select: none;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  animation: avatar-reveal 260ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.avatar-img[hidden] { display: none; }
/* `hidden` has to beat the .btn display rule, which is a class and wins on specificity. */
.btn[hidden] { display: none !important; }
@keyframes avatar-reveal { from { opacity: 0; transform: scale(1.08); } }

.nav-profile { gap: var(--space-2); }
.nav-profile .avatar { box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav-profile:hover .avatar,
.nav-profile[aria-current='page'] .avatar { box-shadow: inset 0 0 0 1px var(--primary-border), var(--glow-primary); }