/* ==========================================================================
   GSSMCS — membership application (apply.html)
   ========================================================================== */

body { min-height: 100vh; background-color: var(--color-surface); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.875rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) 0.875rem max(1.25rem, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid #e2e8f0cc;
  background-color: rgba(248, 250, 252, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.dark .app-header { background-color: rgba(7, 11, 20, 0.85); border-color: rgba(255, 255, 255, 0.08); }

.app-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.app-brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; flex-shrink: 0; }
.app-brand strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}
.app-brand small {
  display: none;
  margin-top: 0.125rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.app-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.app-header__signin { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.app-header__signin span { font-weight: 600; color: var(--color-sapphire); }
.app-header__signin:hover span { text-decoration: underline; text-underline-offset: 2px; }
html.dark .app-header__signin span { color: var(--color-accent); }
@media (max-width: 479px) {
  .app-header__signin { font-size: 0; }
  .app-header__signin span { font-size: 0.8125rem; }
}
@media (min-width: 640px) {
  .app-header { padding-left: 2rem; padding-right: 2rem; }
  .app-brand small { display: block; }
}

/* ---------- Layout ---------- */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.75rem 1rem max(3rem, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) { .app-shell { padding: 2.5rem 2rem 4rem; } }
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: 20rem minmax(0, 1fr); gap: 3rem; padding-top: 3.5rem; }
}

/* ---------- Sidebar ---------- */
.app-aside .label-micro { color: var(--color-accent); }
.app-aside__title {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.app-aside__lead { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }

.stepper, .app-checklist, .app-help { display: none; }

@media (min-width: 1024px) {
  .app-aside { position: sticky; top: 6.5rem; align-self: start; }
  .app-aside__title { font-size: 2.5rem; }
  .stepper, .app-checklist, .app-help { display: block; }
}

.stepper { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.stepper li { position: relative; counter-increment: step; }
.stepper li + li { margin-top: 0.25rem; }
.stepper li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 2.75rem;
  bottom: -0.25rem;
  width: 2px;
  border-radius: 1px;
  background-color: #e2e8f0;
}
html.dark .stepper li:not(:last-child)::after { background-color: rgba(255, 255, 255, 0.1); }
.stepper li.is-complete:not(:last-child)::after { background-color: var(--color-sapphire); }

.stepper button {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.875rem;
  text-align: left;
  cursor: default;
  transition: background-color 150ms;
}
.stepper li.is-complete button { cursor: pointer; }
.stepper li.is-complete button:hover { background-color: #e2e8f080; }
html.dark .stepper li.is-complete button:hover { background-color: rgba(255, 255, 255, 0.05); }

.stepper i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 2px solid #cbd5e1;
  background-color: var(--color-surface);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  transition: all 200ms;
}
.stepper i::before { content: counter(step); }
html.dark .stepper i { border-color: rgba(255, 255, 255, 0.2); }
.stepper li.is-current i {
  border-color: var(--color-sapphire);
  color: var(--color-sapphire);
  box-shadow: 0 0 0 4px rgb(25 84 236 / 0.12);
}
html.dark .stepper li.is-current i { box-shadow: 0 0 0 4px rgb(56 189 248 / 0.15); }
.stepper li.is-complete i { border-color: var(--color-sapphire); background-color: var(--color-sapphire); color: #fff; }
html.dark .stepper li.is-complete i { color: #070B14; }
.stepper li.is-complete i::before { content: "✓"; }

.stepper strong { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-text-muted); }
.stepper small { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--color-text-subtle); }
.stepper li.is-current strong,
.stepper li.is-complete strong { color: var(--color-primary); }

.app-checklist {
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: var(--color-surface-alt);
}
html.dark .app-checklist { border-color: rgba(255, 255, 255, 0.08); }
.app-checklist h2 { margin-bottom: 0.75rem; }
.app-checklist ul { display: flex; flex-direction: column; gap: 0.625rem; }
.app-checklist li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--color-text-main); }
.app-checklist li .icon { color: var(--color-sapphire); }
html.dark .app-checklist li .icon { color: var(--color-accent); }
.app-checklist p { margin-top: 0.875rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-subtle); }

.app-help {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-subtle);
}
.app-help .icon { display: inline; margin-right: 0.375rem; vertical-align: -2px; }
.app-help a { font-weight: 600; color: var(--color-sapphire); }
html.dark .app-help a { color: var(--color-accent); }

/* ---------- Mobile progress ---------- */
.app-progress { margin-bottom: 1rem; }
.app-progress__text { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.app-progress__text span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
.app-progress__text strong { font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.app-progress__bar { height: 0.375rem; overflow: hidden; border-radius: 9999px; background-color: #e2e8f0; }
html.dark .app-progress__bar { background-color: rgba(255, 255, 255, 0.1); }
.app-progress__bar i {
  display: block;
  height: 100%;
  width: 16.66%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, #39A7FF, var(--color-sapphire));
  transition: width 500ms var(--ease-out-expo);
}
@media (min-width: 1024px) { .app-progress { display: none; } }

/* ---------- Draft notice ---------- */
.app-draft {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid #bfdbfe;
  background-color: #eff6ff;
  font-size: 0.8125rem;
  color: #1e3a8a;
}
.app-draft .icon { color: var(--color-sapphire); }
.app-draft span { flex: 1; }
.app-draft button { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
html.dark .app-draft { border-color: rgba(56, 189, 248, 0.25); background-color: rgba(56, 189, 248, 0.08); color: #bae6fd; }
html.dark .app-draft .icon { color: var(--color-accent); }

/* ---------- Card ---------- */
.app-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  box-shadow: 0 25px 60px -15px rgba(12, 34, 64, 0.1);
}
html.dark .app-card { border-color: rgba(255, 255, 255, 0.1); background-color: #0D1627; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5); }
@media (min-width: 640px) { .app-card { padding: 2.5rem; } }

.app-step { margin: 0; padding: 0; border: 0; min-width: 0; animation: step-in 450ms var(--ease-out-expo); }
@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.app-step__head { display: block; width: 100%; padding: 0; margin-bottom: 1.75rem; }
.app-step__head > span { display: block; }
.app-step__head .label-micro { color: var(--color-accent); }
.app-step__title {
  margin-top: 0.375rem;
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.app-step__lead { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }
@media (min-width: 640px) { .app-step__title { font-size: 2rem; } }

/* ---------- Fields ---------- */
.app-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
  .app-span-2 { grid-column: span 2 / span 2; }
}

.app-field { min-width: 0; }
.app-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.app-label em { font-style: normal; color: var(--color-crimson); }
html.dark .app-label { color: rgba(255, 255, 255, 0.8); }
.app-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.app-input {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  background-color: #fff;
  color: var(--color-text-main);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 150ms, box-shadow 150ms;
}
.app-input::placeholder { color: #94a3b8; }
.app-input:focus {
  outline: none;
  border-color: var(--color-sapphire);
  box-shadow: 0 0 0 3px rgb(25 84 236 / 0.15);
}
.app-input--mono { font-family: var(--font-mono); letter-spacing: 0.06em; }
select.app-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  cursor: pointer;
}
input[type="date"].app-input { appearance: none; -webkit-appearance: none; }
html.dark .app-input { border-color: rgba(255, 255, 255, 0.15); background-color: #070B14; color: #fff; color-scheme: dark; }
html.dark .app-input::placeholder { color: rgba(255, 255, 255, 0.3); }
html.dark .app-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(56 189 248 / 0.18); }

.app-field.is-invalid .app-input { border-color: var(--color-crimson); }
.app-field.is-invalid .app-input:focus { box-shadow: 0 0 0 3px rgb(181 18 68 / 0.15); }

.app-hint { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-subtle); }
.app-hint[data-acct-hint] { color: #b45309; }
html.dark .app-hint[data-acct-hint] { color: #fbbf24; }
.app-error {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-crimson);
}
.app-error:not(:empty) { display: block; }
html.dark .app-error { color: #fb7185; }

.app-input-wrap { position: relative; }
.app-input-wrap .app-input { padding-right: 2.75rem; }
.app-reveal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  color: var(--color-text-subtle);
}
.app-reveal:hover { color: var(--color-primary); }

/* Password strength */
.strength { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; }
.strength i { flex: 1; height: 0.25rem; border-radius: 9999px; background-color: #e2e8f0; transition: background-color 200ms; }
html.dark .strength i { background-color: rgba(255, 255, 255, 0.1); }
.strength span { min-width: 4.5rem; margin-left: 0.5rem; text-align: right; font-size: 0.6875rem; font-weight: 600; color: var(--color-text-subtle); }
.strength[data-level="1"] i:nth-child(-n+1) { background-color: #e11d48; }
.strength[data-level="2"] i:nth-child(-n+2) { background-color: #f59e0b; }
.strength[data-level="3"] i:nth-child(-n+3) { background-color: #10b981; }
.strength[data-level="4"] i:nth-child(-n+4) { background-color: #059669; }

/* Checkboxes */
.app-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  cursor: pointer;
}
.app-check input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--color-sapphire);
  cursor: pointer;
}
.app-check a { font-weight: 600; color: var(--color-sapphire); text-decoration: underline; text-underline-offset: 2px; }
html.dark .app-check { color: rgba(255, 255, 255, 0.75); }
html.dark .app-check a { color: var(--color-accent); }
.app-check--inline { font-size: 0.75rem; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; }
.app-check--inline input { width: 0.9375rem; height: 0.9375rem; margin: 0; }

/* Notes, dividers, alerts */
.app-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background-color: #ecfdf5;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #065f46;
}
.app-note .icon { margin-top: 0.125rem; color: #059669; }
html.dark .app-note { background-color: rgba(16, 185, 129, 0.1); color: #a7f3d0; }
html.dark .app-note .icon { color: #34d399; }

.app-divider { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }
.app-divider::before,
.app-divider::after { content: ""; flex: 1; border-top: 1px solid #e2e8f0; }
html.dark .app-divider::before,
html.dark .app-divider::after { border-color: rgba(255, 255, 255, 0.1); }
.app-divider span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-subtle); }

.app-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 0.875rem;
  border: 1px solid #fecdd3;
  background-color: #fff1f2;
  color: #9f1239;
}
.app-alert p { font-size: 0.875rem; line-height: 1.55; font-weight: 500; white-space: pre-line; }
.app-alert .icon { margin-top: 0.125rem; }
html.dark .app-alert { border-color: rgba(244, 63, 94, 0.3); background-color: rgba(244, 63, 94, 0.08); color: #fda4af; }

/* ---------- Review ---------- */
.review { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; }
.review__section {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: var(--color-surface-alt);
}
html.dark .review__section { border-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.03); }
.review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.review__head h3 { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); }
.review__head button { font-size: 0.75rem; font-weight: 600; color: var(--color-sapphire); }
.review__head button:hover { text-decoration: underline; text-underline-offset: 2px; }
html.dark .review__head button { color: var(--color-accent); }
.review dl { display: grid; grid-template-columns: 1fr; gap: 0.625rem 1.5rem; margin: 0; }
@media (min-width: 640px) { .review dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.review dd { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--color-text-main); overflow-wrap: anywhere; }
.review dd.is-empty { color: var(--color-text-subtle); font-weight: 400; }
.app-consents { display: flex; flex-direction: column; gap: 0.875rem; }
.app-consents .app-error { margin-top: -0.5rem; padding-left: 1.875rem; }

/* ---------- Navigation ---------- */
.app-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}
html.dark .app-nav { border-color: rgba(255, 255, 255, 0.08); }
.app-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background-color 150ms, color 150ms;
}
.app-back:hover { background-color: #e2e8f080; color: var(--color-primary); }
html.dark .app-back:hover { background-color: rgba(255, 255, 255, 0.06); }
.app-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #059669;
}
html.dark .app-saved { color: #34d399; }
.app-next { width: auto; margin-left: auto; padding: 0.875rem 1.5rem; }
.app-next:disabled { opacity: 0.7; cursor: not-allowed; }
@media (max-width: 479px) {
  .app-saved { display: none; }
  .app-next { flex: 1; }
}

/* ---------- Success ---------- */
.app-done { text-align: center; }
.app-done:focus { outline: none; }
.app-done__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  background-color: #d1fae5;
  color: #059669;
  animation: pop 600ms var(--ease-out-expo);
}
.app-done__badge .icon { width: 2.25rem; height: 2.25rem; }
html.dark .app-done__badge { background-color: rgba(16, 185, 129, 0.15); color: #34d399; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.app-done .label-micro { color: #059669; }
.app-done__title {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-primary);
}
.app-done__lead { max-width: 30rem; margin: 0.75rem auto 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }
.app-done__ref {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 1rem;
  border: 1px dashed #cbd5e1;
  background-color: var(--color-surface-alt);
}
.app-done__ref small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); }
.app-done__ref strong { font-size: 1.25rem; letter-spacing: 0.08em; color: var(--color-primary); }
html.dark .app-done__ref { border-color: rgba(255, 255, 255, 0.15); }

.timeline { max-width: 26rem; margin: 2rem auto 0; padding: 0; list-style: none; text-align: left; }
.timeline li { position: relative; padding: 0 0 1.25rem 2rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.3125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  border: 2px solid #cbd5e1;
  background-color: var(--color-surface);
}
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 1.25rem;
  bottom: 0.125rem;
  width: 2px;
  background-color: #e2e8f0;
}
html.dark .timeline li::before { border-color: rgba(255, 255, 255, 0.2); }
html.dark .timeline li:not(:last-child)::after { background-color: rgba(255, 255, 255, 0.1); }
.timeline li.is-done::before { border-color: #059669; background-color: #059669; }
.timeline strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.timeline span { display: block; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }

.app-done__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.app-done__actions .btn-primary { width: auto; padding: 0.875rem 1.75rem; }
.app-done__link { font-size: 0.875rem; font-weight: 600; color: var(--color-sapphire); }
html.dark .app-done__link { color: var(--color-accent); }

.app-footnote { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--color-text-subtle); }

/* ---------- Inline retry for options loaded from Passion ---------- */

.app-alert--inline { margin-top: 0; padding: 0.75rem 1rem; }
.app-alert--inline p { font-size: 0.8125rem; }
.app-alert--inline button { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

select.app-input:disabled { opacity: 0.7; cursor: wait; }

/* "Already applied?" link to verify.html (sidebar, also shown on phones) */
.app-aside__track {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.app-aside__track .icon { color: var(--color-sapphire); }
.app-aside__track strong { font-weight: 600; color: var(--color-sapphire); }
.app-aside__track:hover strong { text-decoration: underline; text-underline-offset: 2px; }
html.dark .app-aside__track .icon,
html.dark .app-aside__track strong { color: var(--color-accent); }