/* ============================================================
   TUEPAC — Index / Economic engine modules
   tickers · economic pulse · TUEPAC Score · AI search ·
   switch & match · marketplace
   ============================================================ */

/* ---------- MARKET TICKER ---------- */
.eticker{ background:var(--blue-deep); color:#fff; overflow:hidden; display:flex; align-items:stretch; height:48px; border-bottom:1px solid var(--white-16); }
.eticker__pin{ flex:none; position:relative; z-index:2; display:flex; align-items:center; gap:9px; padding:0 18px; background:var(--blue); font-family:var(--sans); font-size:0.66rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; }
.eticker__pin .dot{ width:7px; height:7px; border-radius:50%; background:#6FE0A6; box-shadow:0 0 0 0 rgba(111,224,166,.6); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(111,224,166,.5);} 70%{ box-shadow:0 0 0 7px rgba(111,224,166,0);} 100%{ box-shadow:0 0 0 0 rgba(111,224,166,0);} }
.eticker__strip{ display:flex; align-items:center; gap:34px; white-space:nowrap; padding-left:28px; animation:etk 46s linear infinite; }
.eticker__item{ display:inline-flex; align-items:baseline; gap:9px; font-family:var(--sans); font-size:var(--fs-small); }
.eticker__item .sym{ font-weight:700; color:#fff; letter-spacing:0.02em; }
.eticker__item .val{ color:var(--white-72); font-variant-numeric:tabular-nums; }
.eticker__item .chg{ font-family:var(--mono); font-size:0.78rem; font-weight:600; font-variant-numeric:tabular-nums; }
.eticker__item .chg.up{ color:#6FE0A6; } .eticker__item .chg.dn{ color:#FF8FA3; }
@keyframes etk{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- INDEX HEADLINE (composite "stock") ---------- */
.index-hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:900px){ .index-hero{ grid-template-columns:1fr; } }
.index-quote{ }
.index-quote .label{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--white-72); }
.index-quote .value{ font-family:var(--serif); font-weight:700; font-size:clamp(3rem,6vw,5rem); color:#fff; line-height:1; letter-spacing:-0.02em; margin-top:8px; font-variant-numeric:tabular-nums; }
.index-quote .change{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-family:var(--mono); font-size:1.05rem; font-weight:600; }
.index-quote .change.up{ color:#6FE0A6; } .index-quote .change.dn{ color:#FF8FA3; }
.index-quote .change .pill{ background:rgba(111,224,166,.16); padding:3px 10px; border-radius:var(--r-pill); font-size:0.82rem; }
.index-quote .sub{ margin-top:16px; color:var(--white-72); font-size:var(--fs-small); max-width:46ch; }
/* sparkline */
.spark{ width:100%; height:120px; }
.spark path.line{ fill:none; stroke:#6FE0A6; stroke-width:2.5; }
.spark path.area{ fill:url(#sparkgrad); opacity:.5; }

/* index cards grid (per unit) */
.index-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .index-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .index-grid{ grid-template-columns:1fr 1fr; } }
.icard{ border:1px solid var(--mist); border-radius:var(--r-lg); background:#fff; padding:16px 18px; cursor:default; transition:box-shadow .18s, transform .18s; }
.icard:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.icard__sym{ font-family:var(--sans); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-45); }
.icard__name{ font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--blue); margin-top:2px; line-height:1.15; }
.icard__val{ font-family:var(--serif); font-weight:700; font-size:1.5rem; color:var(--ink); margin-top:10px; font-variant-numeric:tabular-nums; }
.icard__chg{ font-family:var(--mono); font-size:0.8rem; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; }
.icard__chg.up{ color:var(--green-grade); } .icard__chg.dn{ color:var(--red); }
.icard__spark{ height:30px; margin-top:8px; }

/* capacity strip */
.capacity{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--mist); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.capacity > div{ padding:22px 24px; border-right:1px solid var(--hairline); }
.capacity > div:last-child{ border-right:0; }
.capacity .n{ font-family:var(--serif); font-weight:700; font-size:2rem; color:var(--blue); line-height:1; }
.capacity .l{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-45); margin-top:8px; }
.capacity .d{ font-family:var(--mono); font-size:0.74rem; font-weight:600; color:var(--green-grade); margin-top:6px; }
@media (max-width:760px){ .capacity{ grid-template-columns:1fr 1fr; } .capacity > div:nth-child(2){ border-right:0; } }

/* recapture bars */
.recap{ display:flex; flex-direction:column; gap:14px; }
.recap__row{ }
.recap__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }
.recap__cat{ font-family:var(--sans); font-size:var(--fs-small); font-weight:600; color:var(--blue); }
.recap__amt{ font-family:var(--mono); font-size:0.82rem; color:var(--ink-60); font-variant-numeric:tabular-nums; }
.recap__track{ height:12px; border-radius:6px; background:var(--off); overflow:hidden; position:relative; }
.recap__leak{ position:absolute; inset:0; background:repeating-linear-gradient(45deg,#F1D6DC,#F1D6DC 6px,#F7E4E8 6px,#F7E4E8 12px); }
.recap__captured{ position:absolute; left:0; top:0; bottom:0; background:var(--blue); border-radius:6px; }
.recap__legend{ display:flex; gap:18px; font-size:0.76rem; color:var(--ink-45); margin-top:4px; }
.recap__legend i{ width:11px; height:11px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:middle; }

/* ---------- TUEPAC SCORE ---------- */
.scorehero{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
@media (max-width:680px){ .scorehero{ grid-template-columns:1fr; } }
.scorering{ position:relative; width:200px; height:200px; flex:none; }
.scorering svg{ transform:rotate(-90deg); }
.scorering__num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.scorering__num b{ font-family:var(--serif); font-weight:700; font-size:3.4rem; color:var(--blue); line-height:1; }
.scorering__num span{ font-family:var(--sans); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-45); margin-top:4px; }
.gradechip{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 9px; border-radius:8px; font-family:var(--serif); font-weight:700; font-size:1.05rem; color:#fff; }
.grade-a{ background:var(--green-grade); } .grade-b{ background:var(--blue); } .grade-c{ background:var(--gold-deep,#98691B); } .grade-d{ background:var(--red); }

.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:960px){ .tiers{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .tiers{ grid-template-columns:1fr; } }
.tier{ border:1px solid var(--mist); border-radius:var(--r-lg); background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.tier__head{ padding:16px 18px; border-bottom:1px solid var(--hairline); }
.tier__n{ font-family:var(--sans); font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-45); }
.tier__name{ font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--blue); margin-top:3px; }
.tier__score{ font-family:var(--mono); font-size:0.8rem; color:var(--ink-60); margin-top:6px; }
.tier__body{ padding:8px 18px 16px; display:flex; flex-direction:column; }
.check{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:var(--fs-small); }
.check:last-child{ border-bottom:0; }
.check__box{ width:18px; height:18px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.check__box.done{ background:var(--green-grade); color:#fff; }
.check__box.todo{ background:#fff; border:1.5px solid var(--mist); }
.check.is-todo{ color:var(--ink-60); }
.check b{ color:var(--blue); font-weight:600; }

/* resource cards */
.resource{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--mist); border-radius:var(--r-lg); padding:18px 20px; background:#fff; }
.resource__ic{ width:38px; height:38px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(10,49,97,.08); color:var(--blue); }
.resource h4{ font-family:var(--serif); font-size:1.08rem; font-weight:700; color:var(--blue); }
.resource p{ font-size:var(--fs-small); color:var(--ink-60); margin-top:4px; }

/* ---------- AI / LOCATION SEARCH ---------- */
.searchbar{ display:flex; gap:0; border:2px solid var(--blue); border-radius:var(--r-pill); overflow:hidden; background:#fff; box-shadow:var(--shadow-2); max-width:760px; }
.searchbar input{ flex:1; min-width:0; border:0; outline:none; font-family:var(--sans); font-size:var(--fs-body); padding:15px 22px; color:var(--ink); }
.searchbar .loc{ display:flex; align-items:center; gap:7px; border-left:1px solid var(--mist); padding:0 16px; font-size:var(--fs-small); color:var(--ink-60); white-space:nowrap; }
.searchbar .loc svg{ width:15px; height:15px; color:var(--red); }
.searchbar button{ border:0; background:var(--blue); color:#fff; padding:0 26px; font-family:var(--sans); font-weight:700; font-size:var(--fs-small); cursor:pointer; display:flex; align-items:center; gap:8px; }
.searchbar button:hover{ background:var(--blue-mid); }
.aichips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.aichip{ font-family:var(--sans); font-size:0.82rem; font-weight:600; color:var(--blue); background:#fff; border:1.5px solid var(--mist); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer; transition:.14s; white-space:nowrap; }
.aichip:hover{ border-color:var(--blue); }
.ai-note{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:0.8rem; color:var(--ink-60); background:rgba(10,49,97,.05); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 13px; }
.ai-note .sparkle{ color:var(--red); }

.result{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; border:1px solid var(--mist); border-radius:var(--r-lg); padding:18px 20px; background:#fff; transition:box-shadow .18s; }
.result:hover{ box-shadow:var(--shadow-2); }
.result__av{ width:54px; height:54px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.3rem; color:#fff; background:var(--blue); }
.result__name{ font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--blue); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.result__meta{ font-size:0.82rem; color:var(--ink-60); margin-top:3px; display:flex; gap:12px; flex-wrap:wrap; }
.result__match{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--green-grade); background:rgba(31,122,77,.1); padding:3px 9px; border-radius:var(--r-pill); }
.result__right{ text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.scorebadge{ display:inline-flex; align-items:baseline; gap:4px; font-family:var(--serif); font-weight:700; color:var(--blue); }
.scorebadge b{ font-size:1.4rem; } .scorebadge span{ font-size:0.72rem; color:var(--ink-45); }
@media (max-width:680px){ .result{ grid-template-columns:auto 1fr; } .result__right{ grid-column:2; align-items:flex-start; text-align:left; flex-direction:row; } }

/* ---------- SWITCH & MATCH ---------- */
.switch-cat{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; border:1px solid var(--mist); border-radius:var(--r-lg); padding:16px 20px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.switch-cat.on{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.switch-cat__ic{ width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--off); color:var(--blue); font-size:1.2rem; }
.switch-cat__name{ font-family:var(--serif); font-size:1.1rem; font-weight:700; color:var(--blue); }
.switch-cat__sub{ font-size:0.8rem; color:var(--ink-45); margin-top:2px; }
.switch-cat__toggle{ width:46px; height:26px; border-radius:var(--r-pill); background:var(--mist); position:relative; cursor:pointer; transition:.16s; flex:none; }
.switch-cat.on .switch-cat__toggle{ background:var(--blue); }
.switch-cat__toggle i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.16s; }
.switch-cat.on .switch-cat__toggle i{ left:23px; }
.match-result{ border:1px solid var(--mist); border-left:3px solid var(--green-grade); border-radius:var(--r); padding:16px 18px; background:var(--paper); display:flex; gap:14px; align-items:center; }

/* progress meter for spend */
.spendmeter{ background:var(--blue-deep); color:#fff; border-radius:var(--r-lg); padding:24px 26px; }
.spendmeter .big{ font-family:var(--serif); font-weight:700; font-size:2.4rem; color:#fff; line-height:1; }
.spendmeter .lbl{ font-size:var(--fs-small); color:var(--white-72); margin-top:8px; }
.spendmeter .track{ height:10px; border-radius:5px; background:var(--white-16); margin-top:16px; overflow:hidden; }
.spendmeter .track i{ display:block; height:100%; background:#6FE0A6; border-radius:5px; }

/* ---------- MARKETPLACE (coming soon) ---------- */
.mkt-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep,#98691B); background:rgba(190,138,44,.14); border:1px solid rgba(152,105,27,.3); padding:6px 14px; border-radius:var(--r-pill); }
.mkt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .mkt-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mkt-grid{ grid-template-columns:1fr 1fr; } }
.product{ border:1px solid var(--mist); border-radius:var(--r-lg); overflow:hidden; background:#fff; position:relative; }
.product__img{ aspect-ratio:1; background:linear-gradient(150deg,#e8edf3,#dfe6ee); position:relative; display:flex; align-items:center; justify-content:center; color:var(--mist); }
.product__img svg{ width:38px; height:38px; }
.product__body{ padding:14px 16px 18px; }
.product__name{ font-family:var(--serif); font-size:1.02rem; font-weight:700; color:var(--blue); line-height:1.2; }
.product__by{ font-size:0.76rem; color:var(--ink-45); margin-top:4px; }
.product__price{ font-family:var(--serif); font-weight:700; color:var(--ink); margin-top:8px; }
.product.locked{ filter:saturate(.5); }
.product.locked::after{ content:"Coming soon"; position:absolute; top:10px; right:10px; font-family:var(--sans); font-size:0.6rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-45); background:rgba(255,255,255,.92); border:1px solid var(--mist); padding:3px 8px; border-radius:var(--r-pill); }