/* buildindex.trade — design system.
   Identity: warm near-black ground, lime accent, Bricolage Grotesque.
   Structure comes from spacing and surfaces; rules are reserved for the nav,
   table rows, input edges, and the landing's statement. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  /* surfaces */
  --ground: #0b0c0c;
  --ground-veil: rgba(11, 12, 12, 0.82);
  --panel: #141615;
  --panel-hover: #1a1d1b;
  --line: #262a28;
  --line-soft: #1e2220;
  --line-strong: #383d3a;

  /* ink */
  --ink: #f2f0e9;
  --muted: #9aa09a;
  --faint: #737973;

  /* accents */
  --accent: #d7ff52;
  --accent-dark: #c2e94a;
  --accent-ink: #12130f;
  --accent-soft: rgba(215, 255, 82, 0.1);
  --error: #ff8b78;
  --error-soft: rgba(255, 139, 120, 0.12);
  --warning: #ffc857;
  --warning-soft: rgba(255, 200, 87, 0.1);

  /* type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-xl: clamp(1.9rem, 1.35rem + 2.4vw, 2.75rem);
  --tracking-caps: 0.08em;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* shape */
  --radius: 6px;
  --radius-sm: 4px;
  --width: 66rem;
  --gutter: 1.5rem;
}

/* ------------------------------------------------------------------ base */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout */

nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ground-veil);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: min(100% - var(--gutter) * 2, var(--width));
  min-height: 3.5rem;
  margin-inline: auto;
}
.brand {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.nav-inner > form {
  margin: 0;
}
.nav-links a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    color 120ms ease,
    background 120ms ease;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a[aria-current="page"] {
  background: var(--panel);
  color: var(--ink);
}
.nav-links form {
  margin: 0 0 0 var(--space-2);
}
main {
  width: min(100% - var(--gutter) * 2, var(--width));
  margin-inline: auto;
  padding: var(--space-6) 0 var(--space-8);
  animation: settle 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

footer {
  width: min(100% - var(--gutter) * 2, var(--width));
  margin-inline: auto;
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xs);
}
footer p {
  max-width: 70ch;
  margin: 0;
}
footer strong {
  color: var(--muted);
}

/* ------------------------------------------------------------ typography */

h1,
h2,
h3 {
  margin: 0;
}
h1 {
  max-width: 24ch;
  font-size: var(--text-xl);
  font-stretch: 92%;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h2 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--text-base);
  font-weight: 600;
}
.intro {
  max-width: 56ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.count {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-7) 0 var(--space-4);
}
.section-head h2 {
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.section-head .meta {
  color: var(--faint);
}

/* --------------------------------------------------------------- buttons */

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}
.button:hover,
button:hover {
  background: var(--accent-dark);
}
.button.secondary,
button.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.button.secondary:hover,
button.secondary:hover {
  background: var(--panel-hover);
  border-color: var(--faint);
}
tr.muted td:not(:first-child) {
  opacity: 0.5; /* unchecked allocation rows */
}
.button.danger,
button.danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
}
.button.danger:hover,
button.danger:hover {
  background: var(--error-soft);
  border-color: var(--error);
}
.button.small,
button.small {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}
button:disabled {
  pointer-events: none;
  opacity: 0.45;
}
button[aria-busy="true"]::before {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: spin 700ms linear infinite;
}
.actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.actions.end {
  justify-content: flex-end;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* ----------------------------------------------------------------- forms */

form {
  margin: 0;
}
label {
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
input:not([type="checkbox"], [type="radio"]),
select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}
input::placeholder {
  color: var(--faint);
}
input:not([type="checkbox"], [type="radio"]):hover,
select:hover {
  border-color: var(--line-strong);
}
input:not([type="checkbox"], [type="radio"]):focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 120ms ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.9;
}
input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.fields {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  margin: var(--space-4) 0;
}
.narrow {
  max-width: 22rem;
}
.fields.wide {
  max-width: 34rem;
}
/* a form revealed by a section-head action reads as part of that section */
.pie-create {
  margin-bottom: var(--space-5);
}
.pie-create[hidden] {
  display: none;
}
.pie-create .fields {
  margin-top: 0;
}
#weights-form .fields {
  grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 1.5fr);
}
#weights-form .fields.run {
  grid-template-columns: minmax(8.5rem, 12rem) auto;
}
/* The halal check is the holdings table's toolbar: tolerance and action on the
   left, the verdict on the right, all read against the table below. */
#halal-form {
  align-items: flex-end;
}
#halal-form label {
  flex: 1 1 14rem;
  max-width: 24rem;
}
#halal-summary {
  margin-left: auto;
  line-height: 2.5rem; /* matches the control height so the text centers with the button */
  font-variant-numeric: tabular-nums;
}
#halal-summary strong {
  color: var(--error);
  font-weight: 600;
}
#halal-summary.ok {
  color: var(--accent);
}
/* the button's own display rule would otherwise beat the hidden attribute */
#halal-remove[hidden] {
  display: none;
}
#etf-form .fields {
  grid-template-columns: minmax(9rem, 0.8fr) minmax(16rem, 1.6fr) auto;
}
#index-options .fields {
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.7fr) auto;
}
#scan-dialog,
#etf-dialog,
#pick-dialog,
#missing-dialog {
  width: min(100% - var(--gutter) * 2, 44rem);
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
}
#scan-dialog::backdrop,
#etf-dialog::backdrop,
#pick-dialog::backdrop,
#missing-dialog::backdrop {
  background: var(--ground-veil);
  backdrop-filter: blur(4px);
}
.dialog-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}
.dialog-body .section-head {
  margin: 0;
}
.dialog-body .fields {
  margin: 0;
}
.scan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
}
/* button.scan-choice outranks the global button rules (inline-flex, nowrap). */
button.scan-choice {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  align-content: start;
  min-height: 0;
  padding: var(--space-4);
  border-color: var(--line);
  background: var(--panel);
  text-align: left;
  white-space: normal;
}
button.scan-choice:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
button.scan-choice strong {
  font-size: var(--text-base);
  font-weight: 600;
}
button.scan-choice span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
}
.dialog-body .meta strong {
  color: var(--ink);
}
.weight-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3);
  max-height: 18rem;
  overflow: auto;
}
.weight-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-variant-numeric: tabular-nums;
}
.weight-card strong {
  font-weight: 600;
}
.weight-card span {
  color: var(--muted);
  font-size: var(--text-sm);
}
#pie-form .credentials {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 44rem;
}
#pie-form .credential-actions {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------- panels */

.panel,
.notice {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.notice {
  /* max-width: 52rem; */
  color: var(--muted);
}
.notice.warning {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-color: var(--warning-soft);
  background: var(--warning-soft);
  color: var(--ink);
}
.notice.warning p {
  margin: 0;
}
.notice.warning i {
  color: var(--warning);
  font-size: 1.25rem;
  line-height: 1.4;
}
.attribution {
  margin: var(--space-3) 0 0;
}
.attribution a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    color 140ms ease,
    text-decoration-color 140ms ease;
}
.attribution a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.notice a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.notice a:hover {
  color: var(--accent-dark);
}
.stats {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.stat {
  display: grid;
  gap: var(--space-1);
}
.stat span {
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.stat strong {
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat small {
  margin-left: var(--space-1);
  color: var(--faint);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ---------------------------------------------------------------- outlook */

/* The two forward-looking facts about an index — when it next changes and what
   it pays — read as one instrument: a labelled figure, its supporting line, and
   for the rebalance, the report window it was derived from. */
.outlook {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  margin: var(--space-5) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.outlook-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.outlook-item + .outlook-item {
  border-left: 1px solid var(--line);
}
.outlook-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.outlook-label i {
  font-size: 0.95rem;
}
.outlook-body {
  display: grid;
  gap: var(--space-2);
}
.outlook-value {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.outlook-value.muted,
.outlook-value .muted {
  color: var(--muted);
  font-weight: 500;
}
.outlook-prefix {
  margin-right: 0.35em;
  color: var(--muted);
  font-weight: 500;
}
.outlook-detail {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.outlook-note {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.outlook-note[hidden] {
  display: none;
}
.outlook-action {
  display: flex;
  justify-content: flex-end;
}
.outlook-substat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
}
.outlook-substat span {
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.outlook-substat strong {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* the rebalance window: first statement to last, with the probable date marked */
.range {
  --at: 50%;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.range[hidden] {
  display: none;
}
.range-line {
  position: relative;
  height: 0.75rem;
}
.range-line::before {
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  content: "";
  transform: translateY(-50%);
}
.range-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--at);
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}
.range-mark {
  position: absolute;
  top: 50%;
  left: var(--at);
  box-sizing: content-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
/* the end of the line is the last statement, not another suggestion */
.range-end-mark {
  position: absolute;
  top: 50%;
  left: 100%;
  box-sizing: content-box;
  width: 0.4rem;
  height: 0.4rem;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: var(--panel);
  transform: translate(-50%, -50%);
}
.range.is-complete .range-end-mark {
  display: none;
}
.range-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .outlook {
    grid-template-columns: 1fr;
  }
  .outlook-item + .outlook-item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------- settings */

/* Account settings read as label + consequences on the left, the control on
   the right; at narrow widths the two stack. */
.settings {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.setting {
  display: grid;
  grid-template-columns: minmax(13rem, 20rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4) var(--space-6);
}
.setting-copy h2 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.setting-copy p {
  max-width: 42ch;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.setting-copy strong {
  color: var(--ink);
  font-weight: 600;
}
.setting-copy a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 140ms ease;
}
.setting-copy a:hover {
  color: var(--accent-dark);
}
.setting-copy a i {
  font-size: 0.95em;
}
.setting-form {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 38rem;
}
.setting-form .fields {
  margin: 0;
}
#keys-form .credentials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.credentials-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.credentials-status::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--faint);
  content: "";
}
.credentials-status[data-state="saved"] {
  color: var(--ink);
}
.credentials-status[data-state="saved"]::before {
  background: var(--accent);
}
@media (max-width: 800px) {
  .setting {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .setting-copy p {
    max-width: 60ch;
  }
}

/* ------------------------------------------------------------ index list */

.index-list {
  display: grid;
  gap: var(--space-2);
}
.index-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--panel);
  transition:
    background 140ms ease,
    border-color 140ms ease;
}
.index-row:hover {
  background: var(--panel-hover);
  border-color: var(--line);
}
.index-row h3 {
  margin: 0 0 var(--space-1);
}
.index-row h3 a {
  text-decoration: none;
}
.index-row h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.index-row .meta {
  color: var(--muted);
}
.row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-meta::after {
  content: "→";
  color: var(--faint);
  transition:
    color 140ms ease,
    transform 140ms ease;
}
.index-row:hover .row-meta::after {
  color: var(--accent);
  transform: translateX(2px);
}

/* ------------------------------------------------------- strategy cards */

.strategy-group {
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}
.strategy-group legend {
  padding: 0;
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.strategy-group > p {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
.strategy-category {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.strategy-options {
  display: grid;
  /* Fixed columns (not auto-fit) so a short row's cards match full rows. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .strategy-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .strategy-options {
    grid-template-columns: 1fr;
  }
}
.strategy-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.strategy-choice:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}
.strategy-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.strategy-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.strategy-choice input[type="radio"] {
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--ground);
  transition: border-color 120ms ease;
}
.strategy-choice input[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 120ms ease;
}
.strategy-choice input[type="radio"]:checked {
  border-color: var(--accent);
}
.strategy-choice input[type="radio"]:checked::before {
  transform: scale(1);
}
.strategy-choice strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
}
.strategy-choice span span {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* ---------------------------------------------------------------- tables */

.table-panel {
  overflow: auto;
  max-height: 34rem;
  /* no block padding: the sticky header carries its own top padding so that
     rows cannot scroll through a gap above it */
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th {
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-base);
}
tbody tr:last-child td {
  border-bottom: 0;
}
/* Flagged rows stay flagged while hovered, or the hover paint would wash the
   warning out from under the pointer. */
tr.non-halal td {
  background: var(--error-soft);
}
tr.non-halal:hover td {
  background: color-mix(in srgb, var(--error) 20%, transparent);
}
.badge {
  margin-left: var(--space-2);
  padding: 0.125rem var(--space-2);
  border: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr:hover td {
  background: var(--panel-hover);
}
/* The loading line where rows will be is not a row: left-aligned like the first
   column, and it spans every column, so the last-child cell rules must not claim it. */
tbody tr.placeholder td,
tbody tr.placeholder:hover td {
  width: auto;
  background: none;
  color: var(--muted);
  text-align: left;
}
.table-panel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}
th:first-child,
td:first-child {
  padding-left: 0;
}
th:last-child,
td:last-child {
  padding-right: 0;
}
td:last-child,
th:last-child,
.num {
  width: 9rem;
  text-align: right;
}
.holdings-table th:first-child,
.holdings-table td:first-child {
  width: 2.5rem;
}

/* ----------------------------------------------------------------- charts */

.chart-panel {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.chart-wrap {
  position: relative;
  height: 20rem;
}
@media (max-width: 720px) {
  .chart-wrap {
    height: 14rem;
  }
}

/* --------------------------------------------------------------- results */

.results {
  display: none;
  margin-top: var(--space-7);
}
.results.show {
  display: block;
}
.fund-name {
  margin: var(--space-3) 0 0;
  font-weight: 600;
}
.holdings-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.top-selections {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--muted);
}
.suggestions[hidden] {
  display: none;
}
.name-editor {
  display: grid;
  gap: var(--space-3);
  max-width: 30rem;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.name-editor[hidden] {
  display: none;
}
.name-editor .actions {
  justify-content: flex-end;
}

/* --------------------------------------------------------------- landing */

/* The statement: one dominant headline over a rule, a one-sentence deck, a
   single action, an example index, and the numbered pipeline. Rules carry
   the structure; surfaces stay quiet. */
.landing h1 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 1.1rem + 6.4vw, 5.25rem);
  font-stretch: 86%;
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.landing .rule {
  height: 1px;
  margin: var(--space-6) 0 0;
  border: 0;
  background: var(--line-strong);
}
.landing .deck {
  max-width: 58ch;
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.6;
}
.landing .actions {
  margin-top: var(--space-6);
}
.landing .actions .button {
  min-height: 2.75rem;
  padding: 0 var(--space-5);
}

/* the living example index: the caption carries the state controls, the table
   below it is the demonstration (see landing.js) */
.folio {
  margin: var(--space-7) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.statement-list .folio {
  margin-top: var(--space-5);
}
.folio figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.folio figcaption strong {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.demo-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.demo-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.demo-tabs button {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.demo-tabs button:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.demo-tabs button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}
.demo-toggle {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
}
.demo-toggle:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.demo-toggle i {
  font-size: 0.9rem;
}
.demo-meta {
  grid-column: 1 / -1;
}
.demo-meta .nowrap {
  white-space: nowrap;
}
.folio table {
  table-layout: fixed;
}
.folio th,
.folio td {
  padding: var(--space-2) var(--space-3);
}
.folio th {
  padding-top: var(--space-3);
}
.folio th:first-child,
.folio td:first-child {
  padding-left: var(--space-5);
}
.folio th:last-child,
.folio td:last-child {
  padding-right: var(--space-5);
}
.folio td {
  border-bottom: 1px solid var(--line-soft);
}
.folio tbody tr:last-child td {
  border-bottom: 0;
}
.folio tbody tr:hover td {
  background: none;
}
.folio th:first-child {
  width: 5.5rem;
}
.folio th.num {
  width: 42%;
  min-width: 12rem;
}
.folio-ticker {
  font-weight: 600;
}
.folio-company {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folio-weight {
  text-align: left;
  white-space: nowrap;
}
.folio-bar {
  display: inline-block;
  width: calc(100% - 6rem);
  vertical-align: middle;
}
/* The track spans the demo's fixed axis (14% for strategies, the largest
   published weight for funds), so bars stay comparable while states change.
   The 640ms here must match MOVE_MS in landing.js. */
.folio-bar i {
  display: block;
  width: 100%;
  height: 0.3rem;
  border-radius: 2px;
  background: var(--muted);
  transform: scaleX(var(--fill));
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.folio-weight .value {
  display: inline-block;
  width: 5rem;
  text-align: right;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
/* holdings a strategy cut: the row dims, the bar and value give way to the
   strategy's own reason */
.folio tbody tr.cut .folio-ticker,
.folio tbody tr.cut .folio-company {
  opacity: 0.55;
}
.folio tbody tr.cut .folio-bar,
.folio tbody tr.cut .value {
  display: none;
}
.folio .removed-note {
  display: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.folio tbody tr.cut .removed-note {
  display: inline;
}
.folio-attribution {
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
}

/* the pipeline */
.statement-list {
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.statement-list li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.statement-list .n {
  color: var(--faint);
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.statement-list h2 {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.statement-list p {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

/* The public answer to "what is this, and how does it work?". Kept in the
   same prose voice as the statement list so it reads as part of the page,
   not as an appended marketing block. */
.landing-about {
  margin-top: var(--space-8);
}
.landing-about h2 {
  max-width: 24ch;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.landing-about > p {
  max-width: 68ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
}
.landing-faq {
  display: grid;
  max-width: 68ch;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
}
.landing-faq > div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.landing-faq dt {
  font-weight: 600;
}
.landing-faq dd {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- toasts */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: grid;
  width: min(23rem, calc(100vw - 2rem));
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-4);
  /* the tone lives in the full border, not a side tab */
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  border-radius: var(--radius);
  background: var(--panel-hover);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
.toast.show {
  opacity: 1;
  transform: none;
}
.toast.error {
  border-color: color-mix(in srgb, var(--error) 60%, var(--line-strong));
  color: var(--error);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  :root {
    --gutter: 1.25rem;
  }
  main {
    padding-top: var(--space-5);
  }
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
  }
  .nav-links {
    grid-area: 2 / 1 / 3 / 3;
    flex-wrap: wrap;
    margin-left: 0;
  }
  .nav-inner > form {
    grid-area: 1 / 2 / 2 / 3;
  }
  .nav-links a {
    padding: var(--space-1) var(--space-2);
  }
  .fields,
  #weights-form .fields,
  #weights-form .fields.run,
  #etf-form .fields,
  #index-options .fields,
  #pie-form .credentials,
  #keys-form .credentials {
    grid-template-columns: 1fr;
  }
  .actions {
    width: 100%;
  }
  .actions > .button,
  .actions > button {
    flex: 1;
  }
  form > button {
    width: 100%;
  }
  .index-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
  .statement-list li {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3);
  }
  /* the caption stacks: title, then the state controls, then the meta line */
  .folio figcaption {
    grid-template-columns: 1fr;
  }
  .demo-controls {
    width: 100%;
    justify-content: space-between;
  }
  .demo-tabs button,
  .demo-toggle {
    min-height: 2rem;
  }
  .row-meta::after {
    content: none;
  }
  .table-panel {
    max-height: none;
    padding: 0 var(--space-3);
  }
  /* the verdict takes its own line under the full-width check button */
  #halal-summary {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  /* the example index drops company names before it lets the bars crowd */
  .folio th:nth-child(2),
  .folio td:nth-child(2) {
    display: none;
  }
  .folio th.num {
    width: auto;
    min-width: 0;
  }
}
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}