/*
 * css/pages/fund.css: /fund and /fund/<id> (SPEC 12 C4). Tokens only (css/tokens.css); components from css/site.css.
 * Sections: shared (chips, progress bar, mono), /fund head and flow, band, list and cards, how and FAQ, the create
 * dialog, the fund page (head, progress, action panels, history and backers).
 */

/* ------------------------------------------------------------------------------------------------ shared */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.chip--won { color: var(--accent); background: var(--accent-tint); border-color: var(--accent-line); }
.chip--won .icon, .chip--danger .icon { width: 14px; height: 14px; stroke-width: 1.75; }

/* progress bar: a hairline gauge with quarter ticks */
.fbar {
  position: relative; height: 6px; border-radius: var(--r-pill); overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--line-strong) calc(25% - .5px), var(--line-strong) calc(25% + .5px), transparent calc(25% + .5px),
      transparent calc(50% - .5px), var(--line-strong) calc(50% - .5px), var(--line-strong) calc(50% + .5px), transparent calc(50% + .5px),
      transparent calc(75% - .5px), var(--line-strong) calc(75% - .5px), var(--line-strong) calc(75% + .5px), transparent calc(75% + .5px)),
    var(--panel-2);
}
.fbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); }
.fbar--active i { box-shadow: 0 0 12px var(--glow); }
.fbar--succeeded i { background: var(--accent); box-shadow: 0 0 14px var(--glow); }
.fbar--failed i, .fbar--cancelled i { background: var(--line-input); }
.fbar--big { height: 10px; }

/* ------------------------------------------------------------------------------------------------ /fund head */
.fund-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: end;
  padding-block: calc(var(--section) * .75) calc(var(--section) * .45);
}
.fund-head__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.fund-head__copy .kicker { margin-bottom: -6px; }
.fund-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.fund-flow {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; counter-reset: none;
}
.fund-flow li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--panel); min-width: 0; }
.fund-flow__n { font: 600 12px/1.4 var(--font-mono); letter-spacing: .12em; color: var(--accent); }
.fund-flow__t { font: 400 24px/1.1 var(--font-display); color: var(--text); letter-spacing: 0; }
.fund-flow__d { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
@media (min-width: 1024px) {
  .fund-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
  .fund-flow { align-self: end; }
}

/* ------------------------------------------------------------------------------------------------ band */
.fund-band-wrap { display: flex; flex-direction: column; gap: 10px; }
.fund-band dd .laurel { gap: 8px; }
.fund-band__note { align-self: flex-end; }
@media (max-width: 819px) { .fund-band__note { align-self: flex-start; } }
/* one column on small phones: label left, value right, so the four figures stay one screen */
@media (max-width: 399px) {
  .fund-band > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; }
  .fund-band dd { margin-top: 0; text-align: right; font-size: 16px; }
}

/* ------------------------------------------------------------------------------------------------ list */
.fund-list { padding-block: calc(var(--section) * .55) var(--section); }
.fund-list__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 24px; }
.fund-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; max-width: 100%; }
.fund-bar__filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fund-bar__filter::-webkit-scrollbar { display: none; }
.fund-bar__filter .seg { flex-wrap: nowrap; }
.fund-bar__sort { display: flex; align-items: center; gap: 10px; }
.fund-bar__sort .select { width: auto; min-width: 168px; height: 42px; font-size: 15px; }
@media (max-width: 639px) {
  .fund-bar { width: 100%; }
  .fund-bar__filter { width: 100%; }
  .fund-bar__filter .seg { width: max-content; min-width: 100%; }
  .fund-bar__filter .seg button { flex: 1 0 auto; padding: 0 12px; }
  .fund-bar__sort { width: 100%; }
  .fund-bar__sort .select { flex: 1; height: 44px; }
}

.fund-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .fund-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fund-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fund-grid.is-state { grid-template-columns: minmax(0, 1fr); }
.fund-grid.is-state > .state { max-width: 720px; }
.fund-list__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.fund-list__foot .note:empty { display: none; }

.fund-card { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 24px; }
.fund-card--sk { min-height: 250px; }
.fund-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fund-card__id { font: 500 12px/1 var(--font-mono); color: var(--faint); letter-spacing: .04em; }
.fund-card__title {
  font: 700 19px/1.3 var(--font-body); letter-spacing: -0.01em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; unicode-bidi: isolate; min-height: 2.6em;
}
.fund-card__agent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; color: var(--dim); }
.fund-card__agent .mono { font-size: 13px; }
.fund-card__k { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fund-card__role { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.fund-card__progress { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
.fund-card__nums { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 13.5px/1.4 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.fund-card__nums strong { font-weight: 600; font-size: 15px; color: var(--text); }
.fund-card__pct { color: var(--accent); font-weight: 600; white-space: nowrap; }
.fund-card--failed .fund-card__pct, .fund-card--cancelled .fund-card__pct { color: var(--muted); }
.fund-card__meta { list-style: none; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.fund-card__meta li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--body); min-width: 0; }
.fund-card__meta .icon { color: var(--muted); flex: none; }

/* ------------------------------------------------------------------------------------------------ how, FAQ */
.fund-how__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 820px; }
.fund-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .fund-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fund-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fund-step { display: flex; flex-direction: column; gap: 12px; }
.fund-step .kicker { margin-bottom: 2px; }
.fund-step .h3 { font-size: 20px; }
.fund-faq .h2--s { margin-bottom: 28px; }
.fund-faq .faq { max-width: 880px; }

/* ------------------------------------------------------------------------------------------------ create dialog */
.fc { display: flex; flex-direction: column; gap: 18px; }
.fc-intro { font-size: 14.5px; color: var(--muted); }
.fc-mono { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0; }
.fc-mine { align-self: flex-start; min-height: 32px; font-size: 14px; }
.fc-count { font: 500 12px/1 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-count.is-over { color: var(--danger); }
.fc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 560px) { .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-local:empty { display: none; }
.fc-local { margin-top: 8px; }
.fc-review { padding: 16px 18px; border-radius: var(--r3); background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.fc-review__title { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.fc-review__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fc-review__list li { font-size: 14px; line-height: 1.5; color: var(--dim); padding-left: 18px; position: relative; }
.fc-review__list li::before { content: "/"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); }
.fc-sum { display: flex; flex-direction: column; gap: 8px; }
.fc-sum div { display: flex; justify-content: space-between; gap: 16px; }
.fc-sum dt { font: 600 11px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
.fc-sum dd { font-size: 14px; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.fc-sum dd.mono { font-size: 13px; }
.fc input[type="datetime-local"] { font-family: var(--font-mono); font-size: 16px; }

/* ------------------------------------------------------------------------------------------------ fund page: head */
.fd { padding-block: 28px var(--section); display: flex; flex-direction: column; gap: 28px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.crumbs li { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--accent); font-family: var(--font-mono); }
.crumbs a { color: var(--dim); min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 819px) { .crumbs a { min-height: 44px; } }

.fd-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 980px; }
.fd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 24px; }
.fd-id { font: 500 12.5px/1 var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.fd-started { font: 400 12.5px/1 var(--font-mono); color: var(--faint); }
.fd-title {
  font: 800 clamp(28px, 3.4vw, 44px)/1.12 var(--font-body); letter-spacing: -0.025em; color: var(--text);
  overflow-wrap: anywhere; unicode-bidi: isolate; max-width: 32ch;
}
.fd-hidden { max-width: 70ch; }
.fd-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14.5px; }
.fd-link__a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); min-height: 32px; }
.fd-link__a.is-text { color: var(--dim); }
a.fd-link__a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fd-link__url { font: 400 13px/1.5 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.fd-link__note { font-size: 13px; color: var(--faint); }
.fd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; color: var(--body); }
.fd-addr { color: var(--dim); font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.fd-addr:hover { color: var(--accent); }
.fd-dot { color: var(--faint); padding-inline: 2px; }
@media (max-width: 819px) { .fd-link__a, .fd-meta .fd-addr { min-height: 44px; display: inline-flex; align-items: center; } }

/* ------------------------------------------------------------------------------------------------ fund page: grid */
.fd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1024px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: 24px 32px; }
  .fd-side { position: sticky; top: calc(var(--header-h) + 20px); }
}
.fd-grid.is-state { grid-template-columns: minmax(0, 1fr); }
.fd-grid.is-state .fd-progress { background: none; border: 0; padding: 0; box-shadow: none; max-width: 720px; }

.fd-progress { display: flex; flex-direction: column; gap: 6px; }
.fd-raised { margin-top: 6px; }
.fd-raised .stat { overflow-wrap: anywhere; }
.fd-of { font-size: 16px; color: var(--body); }
.fd-bar { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.fd-bar .fbar { flex: 1; }
.fd-pct { font: 600 15px/1 var(--font-mono); color: var(--accent); min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.fd-state { margin-top: 16px; font-size: 15px; color: var(--dim); }
.fd-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden;
}
@media (min-width: 640px) { .fd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-fact { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 6px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.fd-fact dt { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fd-fact dd { font: 600 15px/1.35 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 4px; }
.fd-fact__sub { font: 400 12px/1.45 var(--font-mono); color: var(--faint); }

/* ------------------------------------------------------------------------------------------------ fund page: panels */
.fd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fd-panel { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.fd-panel__title { font: 700 20px/1.3 var(--font-body); letter-spacing: -0.01em; color: var(--text); }
.fd-panel__sub { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.fd-panel--back { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-tint), var(--panel) 46%); }
.fd-panel--wallet { padding: 0; border: 0; background: none; }
.fd-panel--wallet .state { width: 100%; }
.fd-big { font: 600 18px/1.35 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.fd-line { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fd-line--warn { color: var(--dim); padding-left: 12px; border-left: 2px solid var(--warn); }
.fd-quote { font: 500 13px/1.5 var(--font-mono); color: var(--accent); }
.fd-quote:empty { display: none; }
.fd-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fd-actions .btn { flex: 1 1 auto; }
.fd-mono { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0; }
.fd-panel .state { padding: 16px; }
.fd-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none;
  min-height: 44px; font-weight: 600; font-size: 15px; color: var(--text);
}
.fd-more summary::-webkit-details-marker { display: none; }
.fd-more summary .icon { color: var(--muted); transition: transform var(--t2) var(--ease-out); }
.fd-more[open] summary .icon { transform: rotate(180deg); }
.fd-more__body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.fd-panel--role { padding-block: 12px; }
.fd-pending { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14.5px; color: var(--body); }

/* ------------------------------------------------------------------------------------------------ fund page: records */
.fd-below { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.fd-tabpanel { padding-top: 20px; }
.fd-events { list-style: none; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); overflow: hidden; }
.fd-ev {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px;
  padding: 12px 16px; border-top: 1px solid var(--line-row); min-height: 52px;
}
.fd-ev:first-child { border-top: 0; }
.fd-ev__age { font: 500 12px/1.4 var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.fd-ev__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.fd-ev__label { font-size: 14.5px; color: var(--dim); }
.fd-ev__amt { font: 500 13px/1.4 var(--font-mono); color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-ev__tx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-height: 32px; }
.fd-ev__tx:hover { color: var(--accent); }
@media (max-width: 639px) {
  .fd-ev { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .fd-ev__age { grid-column: 1; grid-row: 2; }
  .fd-ev__what { grid-column: 1; grid-row: 1; }
  .fd-ev__amt { grid-column: 2; grid-row: 1; }
  .fd-ev__tx { grid-column: 2; grid-row: 2; justify-self: end; min-height: 44px; min-width: 44px; justify-content: flex-end; }
  .fd-ev__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.fd-you { margin-left: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: var(--r-pill); padding: 4px 8px; }
.fd-more-row { display: flex; justify-content: center; margin-top: 16px; }
.fd-source { margin-top: 4px; }