/*
 * Adaptive FI Simulator — cross-cutting styles.
 *
 * This stylesheet covers the design tokens (colors, radii), the page
 * shell, and generic form-field / table / utility primitives that are
 * shared across more than one component file. Styling that is specific
 * to a single component's own markup lives inline in that component's
 * `<style>` block instead, referencing these tokens rather than
 * repeating literal colors/radii, so each component file stays
 * self-contained while still sharing one visual language.
 *
 * Loaded only on the Adaptive FI Simulator page via `headExtra` in
 * `src/ssg/index.ts`, not globally from the shared site layout.
 */

:root {
  /* Accent / brand colors */
  --afi-blue: #2563eb;
  --afi-chart-band-outer: #2563eb0a;
  --afi-chart-band-middle: #2563eb0e;
  --afi-chart-band-inner: #2563eb18;
  --afi-chart-percentile-line: #2563eb66;
  --afi-chart-median-line: #2563ebd9;
  --afi-chart-contingency-line: #b45309cc;
  --afi-chart-contingency-fill: #d977060d;
  --afi-chart-failure-line: #b91c1cd9;
  --afi-chart-failure-fill: #b91c1c0d;
  --afi-chart-path-0: var(--afi-chart-path-failed);
  --afi-chart-path-1: #942e5026;
  --afi-chart-path-2: #6f408426;
  --afi-chart-path-3: #4a51b726;
  --afi-chart-path-4: #2563eb26;
  --afi-chart-path-failed: #b91c1c26;
  --afi-indigo: #4f46e5;
  --afi-green: #059669;
  --afi-yellow: #b7791f;
  --afi-red: #dc2626;

  /* Neutral text colors, darkest to lightest */
  --afi-ink: #111827;
  --afi-text: #334155;
  --afi-text-strong: #475569;
  --afi-muted: #64748b;

  /* Neutral surfaces and borders */
  --afi-surface: #ffffff;
  --afi-surface-muted: #f8fafc;
  --afi-tree-tint: var(--afi-blue);
  --afi-tree-base: 1%;
  --afi-tree-step: 4%;
  --afi-tree-max-shade: 17%;
  --afi-line: #e2e8f0;
  --afi-border: #cbd5e1;

  /* Semantic status colors (background / border / text per status) */
  --afi-info-bg: #eff6ff;
  --afi-info-border: #dbeafe;
  --afi-info-text: #1e3a8a;
  --afi-error-bg: #fef2f2;
  --afi-error-border: #fecaca;
  --afi-error-text: #991b1b;
  --afi-warning-bg: #fffbeb;
  --afi-warning-border: #fde68a;
  --afi-warning-text: #78350f;
  --afi-success-bg: #dcfce7;
  --afi-success-text: #047857;

  /* Corner radii, from smallest to largest */
  --afi-radius-sm: 10px;
  --afi-radius-md: 12px;
  --afi-radius-box: 16px;
  --afi-radius-lg: 18px;
  --afi-radius-xl: 22px;
  --afi-radius-pill: 999px;
}

[hidden] {
  display: none !important;
}

/* Page shell */

body {
  background:
    radial-gradient(circle at 20% 0%, var(--afi-info-border) 0, var(--afi-surface-muted) 24rem),
    linear-gradient(180deg, var(--afi-surface-muted), var(--afi-surface));
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body > div {
  border: 0 !important;
  max-width: 1280px !important;
}

.afi-app {
  color: var(--afi-ink);
  margin-top: -0.25rem;
}

accountmenu .menu {
  z-index: 2001;
}

/* Generic utilities */

.afi-muted {
  color: var(--afi-muted);
}

.afi-help-text {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.afi-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
}

.afi-table td,
.afi-table th {
  border-bottom: 1px solid var(--afi-line);
  padding: 0.7rem;
  text-align: left;
}

/* Generic button primitives, shared by editor row controls
   (rules-editor.ts and portfolio-editor.ts) */

.afi-icon-button {
  margin: 0;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid transparent;
  border-radius: var(--afi-radius-sm);
  background: var(--afi-surface);
  color: var(--afi-muted);
  font: inherit;
  cursor: pointer;
}

.afi-add-row {
  justify-self: start;
  margin-top: 0.45rem;
  border: 1px solid var(--afi-border);
  border-radius: var(--afi-radius-sm);
  padding: 0.42rem 0.65rem;
  background: var(--afi-surface);
  color: var(--afi-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.afi-add-plus {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.15rem 0.7rem;
  border-width: 2px;
  border-color: var(--afi-text-strong);
  border-radius: var(--afi-radius-md);
  background: var(--afi-surface-muted);
  color: var(--afi-ink);
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
}

/* Form field primitives, shared by the NumberInput component and the
   raw rules/portfolio editor table inputs/selects */

.afi-form {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 16.5rem;
  column-gap: 1rem;
  row-gap: 0.55rem;
  align-items: center;
  margin-top: 0.8rem;
}

.afi-form-two {
  grid-template-columns:
    minmax(13rem, 1fr) 16.5rem minmax(13rem, 1fr)
    16.5rem;
}

.afi-input-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 0.55rem;
  padding: 0.75rem 0 0.9rem;
  border-top: 1px solid var(--afi-line);
}

.afi-input-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.afi-input-group h4 {
  grid-column: 1 / -1;
  margin: 0 0 0.1rem;
  color: var(--afi-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.afi-input-group .afi-form {
  grid-column: 1 / -1;
  margin-top: 0;
}

.afi-row {
  display: contents;
  width: auto;
}

.afi-row > span:first-child {
  font-size: 0.93rem;
  color: var(--afi-text);
}

.afi-field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 16.5rem;
  border: 1px solid var(--afi-border);
  border-radius: var(--afi-radius-md);
  background: var(--afi-surface);
  overflow: hidden;
}

/* Composite fields own the focus frame: child outlines would be clipped by
   the rounded overflow boundary. Keep it inside the field even in scroll areas. */
.afi-field:focus-within {
  outline: 2px solid var(--afi-blue);
  outline-offset: -2px;
}

.afi-field > input,
.afi-field > select {
  margin: 0;
  align-self: stretch;
}

.afi-field > input:focus,
.afi-field > select:focus {
  outline: none;
  background-color: var(--afi-info-bg);
}

/* Contain wide plan tables so focusing a field cannot scroll the whole card. */
.afi-editor {
  max-width: 100%;
  overflow-x: auto;
}

/* Replacement-rent field shared by planned and contingency editors. */
.afi-house-sale-rent label {
  display: grid;
  gap: .3rem;
  width: auto;
  max-width: none;
}
.afi-house-sale-rent label > span {
  font-size: .8rem;
  color: var(--afi-muted);
}
.afi-house-sale-rent p {
  margin: .35rem 0 0;
  font-size: .75rem;
  white-space: normal;
  line-height: 1.35;
  color: var(--afi-muted);
}

.afi-affix {
  display: inline-block;
  color: var(--afi-muted);
  background: var(--afi-surface-muted);
  padding: 0.62rem 0.65rem;
  border-right: 1px solid var(--afi-line);
  font-weight: 700;
}

.afi-affix.suffix {
  border-left: 1px solid var(--afi-line);
  border-right: 0;
}

.afi-row input,
.afi-row select,
.afi-row textarea,
.afi-field input,
.afi-field select,
.afi-editor-table input,
.afi-editor-table select,
.afi-holding-row input,
.afi-holding-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--afi-border);
  border-radius: var(--afi-radius-md);
  background-color: var(--afi-surface);
  color: var(--afi-ink);
  font: inherit;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.afi-row select,
.afi-field select,
.afi-editor-table select,
.afi-holding-row select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--afi-muted) 50%),
    linear-gradient(135deg, var(--afi-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.7rem) 50%;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-right: 1.55rem;
  text-align: left;
}

.afi-row input,
.afi-row select,
.afi-row textarea,
.afi-field input,
.afi-field select {
  border: 0;
  border-radius: 0;
}

.afi-row input,
.afi-row textarea,
.afi-field input[inputmode="numeric"] {
  text-align: right;
}

.afi-field select[data-cadence-k] {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  padding-left: 0.45rem;
  padding-right: 1rem;
  border-left: 1px solid var(--afi-line);
  color: var(--afi-text-strong);
  font-weight: 750;
  text-align: left;
  background-position:
    calc(100% - 0.65rem) 50%,
    calc(100% - 0.45rem) 50%;
  background-size: 0.24rem 0.24rem, 0.24rem 0.24rem;
}

/* Two label/control pairs need about 1,060px including the page/card gutters.
   Use one pair before the phone layout rather than clipping the second pair. */
@media (max-width: 1100px) {
  .afi-form-two {
    grid-template-columns: minmax(0, 1fr) 16.5rem;
  }
}

@media (max-width: 850px) {
  .afi-form,
  .afi-form-two {
    display: block;
  }

  .afi-row {
    display: block;
    margin: 0.8rem 0;
  }

  .afi-row > span:first-child {
    display: block;
    width: auto;
    padding: 0 0 0.3rem;
  }

  .afi-field {
    display: flex;
    width: 100%;
  }

  .afi-row input {
    width: 100%;
    flex: 1;
  }
}

/* The same editable record is a row on desktop and a disclosure on mobile. */
.afi-plan-entry-heading { display: none; }
@media (max-width: 1000px) {
  .afi-editor .afi-plan-table,
  .afi-editor .afi-contingency-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .afi-plan-table > thead, .afi-plan-table > colgroup,
  .afi-contingency-table > thead, .afi-contingency-table > colgroup { display: none; }
  .afi-plan-entry {
    display: block;
    border: 1px solid var(--afi-line);
    border-radius: var(--afi-radius-box);
    margin-bottom: .75rem;
    min-width: 0;
    overflow: hidden;
  }
  .afi-plan-entry > .afi-plan-entry-heading { display: block; }
  .afi-plan-entry-heading > td { display: block; padding: 0; }
  .afi-plan-entry-toggle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: .85rem;
    border: 0;
    background: var(--afi-surface-muted);
    color: var(--afi-text-strong);
    font: inherit;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
  }
  .afi-plan-entry-toggle::before { content: '▸ '; }
  .afi-plan-entry[data-expanded="true"] .afi-plan-entry-toggle::before { content: '▾ '; }
  .afi-plan-entry-toggle:focus-visible { outline: 2px solid var(--afi-blue); outline-offset: -2px; }
  .afi-plan-entry > .afi-plan-entry-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: .6rem;
    padding: .75rem;
  }
  .afi-plan-entry-fields > td { display: block; min-width: 0; padding: 0; }
  .afi-plan-entry .afi-icon-button { min-width: 2.75rem; min-height: 2.75rem; }
  .afi-plan-entry-fields > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    color: var(--afi-muted);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .25rem;
  }
  .afi-editor .afi-plan-entry td .afi-field { min-width: 0; width: 100%; }
  .afi-plan-entry > .afi-plan-detail-row { display: block; }
  .afi-plan-entry > .afi-plan-detail-row > td { display: block; }
  .afi-plan-entry[data-expanded="false"] > tr:not(.afi-plan-entry-heading) { display: none; }
}