/* Page layout shared by the financial views, account and administration.
   Keep intrinsic field and caption widths from deciding the grid columns. */
:root body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
:root body > main { flex: 1 0 auto; width: 100%; }
:root body > footer {
  flex: 0 0 auto;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 24px 5%;
  gap: 16px;
}
:root body > footer > span { min-width: 0; overflow-wrap: anywhere; }
:root body:is(.auth-pending, .recovery-mode) > footer { display: none !important; }

/* Two shared rows: logo and account actions, then signature and small controls. */
:root body > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 8px 5%;
}
:root body > header > .brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
:root body > header > .brand .horizon-logo {
  width: 142.9px;
  max-width: 100%;
  height: 43px;
  object-fit: contain;
  object-position: 0% 50%;
}
:root body > header > .tagline {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  max-width: calc(100% - 88px);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
:root body > header > .identity {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding-bottom: 0;
}
:root body > header > .header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
:root body > header > .header-meta > .header-beta { flex: 0 0 auto; }
:root body > header > .header-meta > .header-beta > summary { padding: 0; }
@media (min-width: 701px) and (pointer: fine) {
  :root body > header > .header-meta > .header-beta > summary { min-height: 28px; }
  :root body > header > .header-meta > .language-control { height: 28px; min-height: 28px; }
}

:root main :is(.view, .panel, form, aside, label, input, select, textarea,
  .panel-head, .panel-head > *, .section-heading > *, .profile-sidebar > *) {
  min-width: 0;
}
:root main :is(input, select, textarea) { max-width: 100%; }
:root main :is(.profile-fields, .position-fields, .profile-choices, .admin-panels) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root main .position-layout {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}
:root main .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root main .lower-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
:root main .scenario-edit-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
:root main .admin-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root main .admin-panels .admin-metrics { grid-template-columns: minmax(0, 1fr); }
:root main :is(.panel-head, .decision-head, .quality-heading) {
  flex-wrap: wrap;
  gap: 12px;
}
:root main .panel-head :is(h2, h3) { margin: 0; }
:root main .panel-head > :is(h2, h3, div) { flex: 1 1 240px; }

/* Group page actions so a wrapped row remains aligned and captions stay readable. */
:root main .heading-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 1 auto;
}
:root main button:is(.primary, .outline, .small, .text, .calendar-trigger):not(.mobile-icon-command),
:root main button:is(.primary, .outline, .small, .text, .calendar-trigger):not(.mobile-icon-command) :is(.command-caption, .command-full, .command-short) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
:root main button > .command-caption { overflow: visible; }

/* A date caption and its value are separate lines, with room for long values. */
:root label:has(> input.calendar-source):not(.chart-choice) {
  display: grid;
  align-content: start;
  gap: 8px;
}
:root label:has(> input.calendar-source):not(.chart-choice) > .calendar-trigger { margin: 0; }
:root button.calendar-trigger, :root button.calendar-trigger > span {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}
:root button.calendar-trigger > span { flex: 1 1 0; }
:root .range-fields { flex: 1 1 480px; gap: 16px; }
:root .range-fields > label { flex: 1 1 220px; max-width: 100%; }
:root main :is(.decision-controls, .audit-controls, .admin-toolbar) { align-items: end; }
:root main :is(.decision-controls, .audit-controls, .admin-toolbar) > label {
  min-width: 0;
  flex: 0 1 220px;
}
:root main .scenario-save-form > label { min-width: 0; flex: 1 1 260px; }
:root main .scenario-save-form > button { min-width: 0; flex: 0 1 auto; }
:root main .admin-toolbar > button { flex: 0 1 auto; }

/* Account: one editable column, one summary column; no third auto-placed item. */
:root #account .profile-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
}
:root #account .profile-heading { align-items: start; }
:root #account .profile-heading > div:first-child { flex: 1 1 480px; }
:root #account .profile-heading > .heading-actions { flex: 0 1 auto; }
:root #account .profile-sidebar { grid-template-columns: minmax(0, 1fr); }
:root #account .profile-sidebar > section:last-child { grid-column: auto; }
:root #account .profile-project { margin: 0; }
:root #account .purpose { display: block; }
:root #account .purpose-symbol { display: none; }
:root #account .purpose textarea { min-width: 0; }
:root #account .profile-save > p { flex-basis: 100%; }
:root #account .profile-save .sync-warning { color: #a82c32; }
:root main .view:focus-visible { outline: 3px solid #174f88; outline-offset: 4px; }
:root body > header .admin-open[aria-current=page] {
  background: #E7DCC8;
  border-color: #244B4A;
  color: #244B4A;
}

@media (min-width: 701px) {
  /* Move the whole timeline action group when space is scarce, never one button. */
  :root .journey-head { align-items: center; gap: 16px; }
  :root .journey-head .journey-identity { flex: 1 1 360px; }
  :root .journey-head .date-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    flex: 0 1 580px;
    width: 580px;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
  }
  :root .journey-head .date-actions .chart-choice {
    width: auto;
    min-width: 0;
    margin: 0;
  }
  :root .journey-head .date-actions > button { align-self: stretch; }
  :root #chartMetric { min-height: 44px; }
  :root #admin .admin-nav { flex-wrap: wrap; overflow-x: visible; }

  /* The account/admin commands share the first row, with no empty admin slot. */
  :root body > header > .identity {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
    align-items: center;
    gap: 8px;
    padding-bottom: 0;
    min-width: 0;
  }
  :root body > header > .identity:has(#adminOpen[hidden]) {
    grid-template-columns: repeat(2, max-content);
  }
  :root body > header > .identity > .mobile-icon-command { grid-row: 1; }
}
@media (max-width: 1000px) {
  :root main .position-layout { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
  :root main .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root main .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root #account .profile-layout { grid-template-columns: minmax(0, 1fr); }
  :root #account .profile-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root body > header { column-gap: 8px; }
  :root body > header > .brand .horizon-logo { width: 119.8px; height: 36.1px; }
  :root body > header > .tagline { font-size: 13px; }
  :root main :is(.position-layout, .position-fields, .settings-grid, .lower-grid,
    .scenario-edit-fields, .admin-panels) { grid-template-columns: minmax(0, 1fr); }
  :root #account .profile-sidebar { grid-template-columns: minmax(0, 1fr); }
  :root #account .profile-sidebar > section:last-child { grid-column: auto; }
  :root main .heading-actions { width: 100%; justify-content: flex-start; }
  :root main .heading-actions > button { flex: 1 1 180px; }
  :root main :is(.decision-controls, .audit-controls, .admin-toolbar) > label { flex: 1 1 180px; }
  :root main .admin-toolbar > button { flex: 1 1 180px; }
}
@media (max-width: 600px) {
  :root main :is(.profile-fields, .profile-choices, .admin-metrics) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  :root body > header > .brand .horizon-logo { width: 101.8px; height: 30.7px; }
  :root body > header > .tagline { font-size: 12px; }
}

/* Every wordmark uses a real alpha channel, including sign-in and recovery. */
:root .horizon-logo,
:root .welcome-brand img,
:root #authPreparing img,
:root .brand.image-brand,
:root .flow-wordmark {
  background: transparent;
}
:root .horizon-logo {
  margin: 0;
  padding: 0;
}
:root .auth-story > .horizon-logo,
:root #betaRecovery .horizon-logo {
  width: 142.9px;
  height: 43px;
  object-fit: contain;
  object-position: 0% 50%;
}
/* Account sections share the same vertical rhythm, including subscription. */
:root #account{--account-block-gap:24px}
:root #account>.profile-heading{margin-bottom:var(--account-block-gap)}
:root #account>.account-subscription{margin:0 0 var(--account-block-gap)}
:root #account .profile-layout,:root #account .profile-form,:root #account .profile-sidebar{gap:var(--account-block-gap)}
:root #account>.privacy-account,:root #account>.research-account{margin-top:var(--account-block-gap)}
:root #account .account-subscription h3{font-size:18px;font-weight:500;margin:0 0 12px}

:root .position-list-row{display:flex;align-items:center;gap:8px;min-width:0}:root .position-list-row>.position-choice{flex:1;min-width:0}:root .position-list-row>.position-remove{flex:0 0 auto;padding:10px;font-size:14px}

/* Give each row one flexible caption and a compact, consistently aligned action. */
:root .position-list-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px;align-items:center}
:root .position-list-row>.position-choice{width:100%;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
:root .position-list-row>.position-choice small{white-space:normal;line-height:1.5}
:root .position-list-row>.position-remove{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:7px;color:#65645B;background:transparent}
:root .position-list-row>.position-remove .ux-icon{width:18px;height:18px;margin:0;flex:none}
:root .position-list-row>.position-remove:hover,:root .position-list-row>.position-remove:focus-visible{color:#a82c32;background:#fff0f0}

:root .save-feedback{position:fixed;z-index:90;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:16px 18px;background:#F7F3EB;border:1px solid #D5C8B3;border-radius:12px;box-shadow:0 6px 30px #0002;color:#242D2A}
:root .save-feedback[hidden]{display:none}:root .save-feedback>div{min-width:0}:root .save-feedback strong{font-size:14px}:root .save-feedback p{margin:4px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}:root .save-mark{width:36px;height:36px;flex:0 0 36px;fill:#244B4A}:root .save-dismiss{align-self:flex-start;flex:none;width:44px;min-height:44px;padding:0;border:0;background:transparent;font-size:24px;color:#65645B}:root .save-feedback[data-state=saved] .save-mark{fill:#24603b}:root .save-feedback[data-state=error]{border-color:#a82c32}:root .save-feedback[data-state=pending] .save-mark path{animation:save-wave 1.2s ease-in-out infinite;transform-origin:center}:root .save-mark path:nth-child(2){animation-delay:.15s!important}:root .save-mark path:nth-child(3){animation-delay:.3s!important}
@keyframes save-wave{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -2px}}
@media(prefers-reduced-motion:reduce){:root .save-feedback .save-mark path{animation:none!important}}

:root .quick-variants{margin:18px 0;padding:12px 16px;border:1px solid #D5C8B3;border-radius:10px;background:#faf8f6}:root .quick-variants summary{font-size:14px;font-weight:600}:root .quick-variants p{font-size:14px;line-height:1.6}:root .quick-variant-choices{display:flex;gap:8px;flex-wrap:wrap}:root .quick-variant-choices button{white-space:normal!important}:root .quick-variant-status:not(:empty){padding:10px 0;color:#84252b}:root .quick-variant-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}:root .quick-variant-result svg{max-width:100%;overflow:hidden}@media(max-width:700px){:root .quick-variant-metrics{grid-template-columns:1fr;gap:0}}