/* Foundation details share the campaign's scoreboard language. */
#foundation-dialog{width:min(610px,calc(100vw - 32px));max-width:610px;max-height:calc(100dvh - 40px);padding:0;border:5px solid #263642;border-radius:7px;background:#041623;color:#edf4f6;box-shadow:0 3px 0 #0b1721,0 24px 70px #00122470;overflow:auto;font-family:var(--font-ui)}
#foundation-dialog::backdrop{background:#03182bb8;backdrop-filter:blur(5px)}
#foundation-dialog[open]{animation:detail-arrive .22s ease-out}
.detail-topline{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:linear-gradient(#243743,#13232f);border-bottom:1px solid #405361;font:700 11px var(--font-score);letter-spacing:.045em;color:#b6cfdd}
#foundation-dialog .dialog-close{position:static;display:grid;place-items:center;width:32px;height:32px;padding:0;background:#0d1e2b;border:1px solid #587080;border-radius:3px;color:#e6eff5;font:400 20px/1 Outfit;cursor:pointer}
#foundation-dialog .detail-identity{display:flex;align-items:center;gap:24px;padding:24px 28px;margin:0;background:var(--org-primary);color:var(--org-on-primary);border-bottom:4px solid var(--org-secondary)}
#foundation-dialog #detail-letters{font:700 64px/1 var(--font-display);letter-spacing:-.045em;color:inherit;flex-shrink:0}
#foundation-dialog #detail-name{font:800 28px/1.18 var(--font-display);color:inherit;letter-spacing:-.025em;margin:0;text-wrap:balance}
.detail-screen{padding:27px 28px 25px;background:radial-gradient(ellipse at 50% 0,#26465a55,transparent 70%),radial-gradient(circle,#8bc9e70c .6px,transparent .9px) 0 0/3px 3px,#031520;box-shadow:inset 0 3px 7px #0006}
.detail-label{display:block;font:700 12px/1.4 var(--font-score);letter-spacing:.03em;color:#a8c5d5}
.detail-led{font-family:var(--font-score);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.035em;background:radial-gradient(circle,currentColor .8px,transparent 1px) 0 0/2px 2px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.detail-scoreline{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:22px;align-items:center}
#detail-raised{display:block;font-size:clamp(38px,7vw,58px);line-height:1.18;color:#f0eadc;margin-top:7px;white-space:nowrap}
.detail-rank{border-left:1px solid #496271;padding-left:22px}
#detail-rank{display:block;font-size:40px;line-height:1.15;color:var(--detail-accent);margin:5px 0}
.detail-rank small{font-size:11px;color:#9db6c5;display:block}
.detail-goal{margin-top:24px}
.detail-goal-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12px;color:#acc6d4}
#detail-percent{font:700 22px var(--font-score);color:var(--detail-accent)}
#detail-goal{font:700 15px var(--font-score);color:#d6e6ee;margin-left:5px}
.detail-progress{height:12px;margin-top:9px;background:#152c3a;border:1px solid #354b59;overflow:hidden;mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}
#detail-fill{display:block;height:100%;background:var(--detail-accent);transition:width .8s ease}
#foundation-dialog .detail-stats{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;border-top:1px solid #36505e;margin:25px 0 0;padding:22px 0 0;text-align:left}
#foundation-dialog .detail-stats>div+div{border-left:1px solid #36505e;padding-left:24px}
#foundation-dialog .detail-stats strong{display:block;font-size:32px;line-height:1.25;color:#f0eadc;margin-top:6px}
#foundation-dialog .detail-stats strong small{font-size:20px;color:#9db6c5}
.detail-action{padding:18px 28px 22px;background:#0b202e;border-top:1px solid #344d5d}
#foundation-dialog #detail-give{width:100%;min-height:49px;border-radius:3px;background:var(--org-primary);color:var(--org-on-primary);border:1px solid color-mix(in srgb,var(--org-on-primary) 40%,var(--org-primary));font:700 15px var(--font-ui);padding:14px 18px;display:flex;justify-content:space-between;box-shadow:none}
#foundation-dialog #detail-give:hover{filter:brightness(1.12)}
#foundation-dialog button:focus-visible{outline:3px solid #b6efff;outline-offset:3px}
@keyframes detail-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){
 #foundation-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-width:4px}
 #foundation-dialog .detail-identity{gap:16px;padding:20px 18px}
 #foundation-dialog #detail-letters{font-size:46px}
 #foundation-dialog #detail-name{font-size:21px}
 .detail-screen{padding:22px 18px}
 .detail-scoreline{grid-template-columns:minmax(0,1fr) 77px;gap:12px}
 #detail-raised{font-size:clamp(29px,8.6vw,42px)}
 .detail-rank{padding-left:13px}#detail-rank{font-size:32px}
 .detail-label{font-size:10px}.detail-rank small{font-size:10px}
 .detail-goal-heading{font-size:11px}#detail-goal{font-size:13px}
 #foundation-dialog .detail-stats{gap:14px}#foundation-dialog .detail-stats>div+div{padding-left:15px}
 #foundation-dialog .detail-stats strong{font-size:28px}
 .detail-action{padding:16px 18px 19px}
}
@media(prefers-reduced-motion:reduce){#foundation-dialog[open]{animation:none}#detail-fill{transition:none}}

.detail-gift-count{display:block;color:#9db6c5;font:400 11px/1.4 var(--font-ui);margin-top:3px}
#detail-rank,#detail-percent{color:color-mix(in srgb,var(--detail-accent) 65%,white)}
#detail-fill{background:color-mix(in srgb,var(--detail-accent) 75%,white)}

/* One LED surface across identity, readout, rules, and action area. */
#foundation-dialog .detail-identity,
#foundation-dialog .detail-screen,
#foundation-dialog .detail-action{position:relative;isolation:isolate}
#foundation-dialog .detail-identity{background:linear-gradient(110deg,#ffffff0b,transparent 45%,#00000018),var(--org-primary)}
#foundation-dialog .detail-identity::after,
#foundation-dialog .detail-screen::after,
#foundation-dialog .detail-action::after{
 content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
 background:radial-gradient(circle at center,transparent .65px,#00101e80 .85px) 0 0/2.1px 2.1px;opacity:.5;
}
#foundation-dialog #detail-name,
#foundation-dialog #detail-letters,
#foundation-dialog #detail-percent,
#foundation-dialog #detail-goal{
 mask-image:radial-gradient(circle at 1px 1px,#000 .72px,#0003 1px);mask-size:2px 2px;
}
#foundation-dialog .detail-label,
#foundation-dialog .detail-rank small,
#foundation-dialog .detail-goal-heading,
#foundation-dialog .detail-gift-count,
#foundation-dialog #detail-give{
 text-shadow:none;
}
#foundation-dialog .detail-label,
#foundation-dialog .detail-rank small,
#foundation-dialog .detail-gift-count,
#foundation-dialog .detail-goal-heading>span,
#foundation-dialog .detail-button-label{
 mask-image:radial-gradient(circle at .9px .9px,#000 .65px,#0009 .9px);mask-size:1.8px 1.8px;
}
#foundation-dialog #detail-give{background:linear-gradient(#ffffff09,#00000012),var(--org-primary)}
#foundation-dialog #detail-give .detail-button-label{font:inherit;letter-spacing:inherit}
/* The close control is drawn in illuminated pixels, including its outline. */
#foundation-dialog .dialog-close{position:relative;border:0;border-radius:0;background:#091b28;font-size:0;box-shadow:inset 0 0 7px #0006}
#foundation-dialog .dialog-close::before{content:'';position:absolute;inset:0;border:1px solid #789aab;border-radius:2px;mask-image:radial-gradient(circle at 1px 1px,#000 .72px,transparent .95px);mask-size:2px 2px;pointer-events:none}
#foundation-dialog .dialog-close::after{content:'';position:absolute;inset:8px;background:radial-gradient(circle,#e6eff5 .75px,transparent 1px) 0 0/2px 2px;clip-path:polygon(0 10%,10% 0,50% 40%,90% 0,100% 10%,60% 50%,100% 90%,90% 100%,50% 60%,10% 100%,0 90%,40% 50%);filter:drop-shadow(0 0 1px #c8efff55);pointer-events:none}
#foundation-dialog .dialog-close:hover{background:#183343}
#foundation-dialog .dialog-close{inset:auto;flex-shrink:0}
/* Highlight only the terminal filled segment of the donation meter. */
#detail-fill{position:relative}
#detail-fill::after{content:'';position:absolute;inset:0 0 0 auto;width:var(--last-chip-width,6px);background:#f0eadc;animation:detail-chip-pulse 1.8s ease-in-out infinite}
@keyframes detail-chip-pulse{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#detail-fill::after{animation:none;opacity:.6}}
.motion-off #detail-fill::after{animation:none;opacity:.6}

/* Screen separators are discrete illuminated cells rather than solid borders. */
#foundation-dialog .detail-identity{border-image:repeating-linear-gradient(90deg,var(--org-secondary) 0 1.5px,transparent 1.5px 2.5px) 1}
#foundation-dialog .detail-rank{border-image:repeating-linear-gradient(180deg,#7895a6 0 1.5px,transparent 1.5px 2.5px) 1}
#foundation-dialog .detail-stats{border-image:repeating-linear-gradient(90deg,#7895a6 0 1.5px,transparent 1.5px 2.5px) 1}
#foundation-dialog .detail-stats>div+div{border-image:repeating-linear-gradient(180deg,#7895a6 0 1.5px,transparent 1.5px 2.5px) 1}
#foundation-dialog .detail-action{border-image:repeating-linear-gradient(90deg,#7895a6 0 1.5px,transparent 1.5px 2.5px) 1}
#foundation-dialog #detail-give{font-family:var(--font-score);font-weight:700}

/* Manual ranking switch, with a generous target and a small LED arrow. */
#foundation-dialog .detail-scoreline{grid-template-columns:minmax(0,1fr) 145px}
#foundation-dialog .detail-rank{position:relative;padding-right:30px}
#detail-rank-next{position:absolute;right:-7px;top:27px;width:36px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:2px;background:transparent;color:#c6e8ee;cursor:pointer}
#detail-rank-next span{font:700 24px/1 var(--font-score);mask-image:radial-gradient(circle at 1px 1px,#000 .75px,transparent 1px);mask-size:2px 2px}
#detail-rank-next:hover{background:#8ed5e516;color:#fff5dd}
@media(max-width:680px){#foundation-dialog .detail-scoreline{grid-template-columns:minmax(0,1fr) 110px}#foundation-dialog .detail-rank{padding-right:28px}#detail-rank-next{right:-8px;top:19px;width:34px}}

/* Individual sign letters, number reels, and moving separator lights. */
#foundation-dialog[open]{animation:none}
.fd-word{display:inline-block;white-space:nowrap}
.fd-letter,.fd-reel{display:inline-block;transform-origin:50% 50%;font:inherit;letter-spacing:inherit}
.fd-reel{background:radial-gradient(circle,currentColor .8px,transparent 1px) 0 0/2px 2px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.detail-stats{position:relative}
.fd-rule-light{position:absolute;top:-1px;width:10%;height:2px;background:repeating-linear-gradient(90deg,#f0eadc 0 1.5px,transparent 1.5px 2.5px);pointer-events:none;z-index:3}
.fd-rule-bottom{top:auto;bottom:-4px;height:4px}
#detail-fill{transition:none}

.fd-window{position:relative;overflow:hidden;vertical-align:bottom;background:none;-webkit-background-clip:initial;background-clip:initial}
.fd-scroll-digit{position:absolute;inset:0;display:block;font:inherit;line-height:inherit;background:radial-gradient(circle,currentColor .8px,transparent 1px) 0 0/2px 2px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;will-change:transform}

/* Fit complete cells; retain a full colored terminal cell beneath its pulse. */
.detail-progress{mask-image:repeating-linear-gradient(90deg,#000 0 var(--meter-cell,6px),transparent var(--meter-cell,6px) var(--meter-pitch,8px));mask-origin:content-box;mask-clip:content-box}
#detail-fill{width:var(--meter-fill-width,0px)!important}
#detail-fill::after{left:var(--chip-start,0px);right:auto;width:var(--chip-width,0px)}
