/* Classie homepage — CSS for expanded signature artifacts (artifacts2.jsx). */

/* shared tool monogram tile */
.tool-tile{width:34px;height:34px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:600;font-size:12px;color:var(--tint);
  background:var(--bg-raised);border:1px solid var(--border-default);letter-spacing:-.02em;}

/* ═══════════ ① CHALLENGE FAN ═══════════ */
.fan{width:100%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:18px;
  box-shadow:var(--shadow-chrome);padding:16px 18px 22px;overflow:hidden;}
.fan-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border-quiet);padding-bottom:14px;margin-bottom:6px;}
.fan-tab{font-family:var(--f-satoshi);font-size:13px;font-weight:600;color:var(--fg-tertiary);background:transparent;
  border:none;border-radius:8px;padding:8px 13px;cursor:pointer;transition:all .16s var(--ease-out);white-space:nowrap;}
.fan-tab:hover{color:var(--fg-secondary);background:var(--bg-raised);}
.fan-tab.on{color:var(--brand-primary-hover);background:var(--brand-primary-10);box-shadow:inset 0 0 0 1px var(--brand-primary-16);}
.fan-stage{position:relative;width:100%;aspect-ratio:720/540;}
.fan-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fan-axis{stroke:var(--border-default);stroke-width:1;stroke-dasharray:2 5;}
.fan-edge{fill:none;stroke:var(--brand-primary);stroke-width:1.3;stroke-dasharray:4 6;opacity:.5;animation:fan-march 1s linear infinite;}
.fan-edge.amber{stroke:var(--warning);opacity:.7;}
.fan-edge.faint{opacity:.28;animation:none;stroke-dasharray:2 5;}
@keyframes fan-march{to{stroke-dashoffset:-20;}}
.fan-dot{fill:var(--brand-primary);filter:drop-shadow(0 0 4px var(--brand-primary));}
.fan-dot.amber{fill:var(--warning);filter:drop-shadow(0 0 4px var(--warning));}
.fan-src{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;}
.fan-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:600;font-size:14px;color:#dbeeff;
  background:radial-gradient(circle at 32% 28%,#0e3a72,#081943 70%);
  border:1px solid var(--brand-primary-16);box-shadow:0 0 0 4px rgba(0,173,255,.05);}
.fan-src-t{font-family:var(--f-mono);font-size:10px;color:var(--fg-tertiary);white-space:nowrap;}
.fan-verdict{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:11px;font-weight:600;padding:6px 11px;border-radius:7px;white-space:nowrap;
  background:var(--bg-base);border:1px solid var(--border-default);}
.fan-verdict.cy{color:var(--brand-primary-hover);border-color:var(--brand-primary);background:var(--brand-primary-10);}
.fan-verdict.mint{color:var(--accent-mint);border-color:rgba(107,255,206,.4);background:rgba(107,255,206,.08);}
.fan-verdict.rose{color:var(--danger);border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.08);}
.fan-verdict.amber{color:var(--warning);border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.08);}
.fan-bubble{position:absolute;left:50%;transform:translateX(-50%);width:min(70%,420px);
  background:var(--bg-base);border:1px solid var(--border-default);border-radius:11px;padding:12px 15px;
  font-size:13px;line-height:1.42;color:var(--fg-secondary);box-shadow:var(--shadow-card);}
.fan-bubble-tag{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:var(--brand-primary-hover);margin-bottom:6px;}
.fan-tool{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--bg-base);border:1px solid var(--border-default);border-radius:11px;padding:11px 9px 9px;min-width:96px;box-shadow:var(--shadow-card);}
.fan-tool-n{font-size:11.5px;color:var(--fg-secondary);font-weight:500;white-space:nowrap;}

/* ═══════════ ② TOOL INVENTORY ═══════════ */
.inv{width:100%;background:var(--bg-base);border:1px solid var(--border-default);border-radius:16px;padding:18px;box-shadow:var(--shadow-card);}
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.inv-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;padding:16px 14px;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);}
.inv-card.approved{border-color:rgba(107,255,206,.4);box-shadow:0 0 0 1px rgba(107,255,206,.12);}
.inv-card.shadow{opacity:.62;}
.inv-badge{position:absolute;top:-9px;left:12px;display:inline-flex;align-items:center;gap:4px;
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.08em;padding:3px 7px;border-radius:5px;}
.inv-badge.ok{background:var(--accent-mint);color:#04231a;}
.inv-badge.sh{background:var(--warning);color:#1a1206;}
.inv-name{font-size:13px;color:var(--fg-primary);font-weight:500;}

/* ═══════════ ③ ARCH STACK ═══════════ */
.arch{width:100%;display:flex;flex-direction:column;align-items:center;gap:0;}
.arch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;}
.arch-node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;
  background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;
  font-size:12.5px;color:var(--fg-secondary);font-weight:500;text-align:center;color:var(--fg-tertiary);}
.arch-node svg{color:var(--fg-secondary);}
.arch-node span{color:var(--fg-secondary);}
.arch-conns{display:grid;grid-template-columns:repeat(3,1fr);width:70%;height:26px;}
.arch-conns i{justify-self:center;width:1px;background:repeating-linear-gradient(var(--border-strong) 0 3px,transparent 3px 7px);}
.arch-bar{width:100%;background:linear-gradient(180deg,var(--brand-primary-16),rgba(0,173,255,.04));
  border:1px solid var(--brand-primary);border-radius:16px;padding:18px;box-shadow:0 12px 40px -12px rgba(0,173,255,.4);}
.arch-bar-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.arch-bar-brand span{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--fg-primary);}
.arch-bar-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--brand-primary-hover);margin-left:auto;}
.arch-bar-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.arch-tile{display:flex;align-items:center;gap:11px;background:var(--bg-base);border:1px solid var(--border-default);border-radius:11px;padding:13px;}
.arch-tile-ico{width:32px;height:32px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--brand-primary-10);color:var(--brand-primary);border:1px solid var(--brand-primary-16);}
.arch-tile-t{font-size:14px;font-weight:600;color:var(--fg-primary);font-family:var(--f-display);}
.arch-tile-d{font-size:11px;color:var(--fg-tertiary);margin-top:2px;}
@media(max-width:560px){.arch-bar-tiles{grid-template-columns:1fr;}.arch-tile-d{display:none;}}

/* ═══════════ ④ INTERVENTION GRAPH ═══════════ */
.ig{width:100%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:16px;padding:22px;box-shadow:var(--shadow-card);}
.ig-cloud{position:relative;width:100%;aspect-ratio:3/2;max-height:280px;}
.ig-svg{position:absolute;inset:0;width:100%;height:100%;}
.ig-edge{stroke:var(--brand-primary);stroke-width:.5;stroke-dasharray:1.5 2;opacity:.4;animation:fan-march 1.4s linear infinite;}
.ig-sat{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-base);border:1px solid var(--border-default);color:var(--fg-tertiary);box-shadow:var(--shadow-card);}
.ig-core{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
  background:var(--brand-primary);color:#041420;font-family:var(--f-display);font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:12px;box-shadow:0 0 0 6px rgba(0,173,255,.12),0 14px 40px -10px rgba(0,173,255,.6);white-space:nowrap;}
.ig-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--border-quiet);}
.ig-chip{font-family:var(--f-mono);font-size:12px;color:var(--fg-tertiary);background:var(--bg-raised);
  border:1px solid var(--border-quiet);border-radius:7px;padding:8px 13px;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);}
.ig-chip.on{color:var(--brand-primary-hover);background:var(--brand-primary-10);border-color:var(--brand-primary-16);font-weight:600;}

/* ═══════════ ⑤ TRACE TIMELINE ═══════════ */
.trace{width:100%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;}
.trace-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-quiet);font-family:var(--f-mono);}
.trace-title{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;color:var(--fg-secondary);font-weight:600;}
.trace-id{font-size:11px;color:var(--fg-tertiary);}
.trace-body{display:grid;grid-template-columns:1.15fr .95fr;}
.trace-list{padding:14px 8px 14px 20px;display:flex;flex-direction:column;}
.trace-row{display:flex;align-items:center;gap:11px;padding:9px 0;position:relative;font-family:var(--f-mono);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);}
.trace-row::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:1px;background:var(--border-quiet);}
.trace-row:first-child::before{top:50%;}
.trace-row:last-child::before{bottom:50%;}
.trace-time{font-size:10.5px;color:var(--fg-muted);width:46px;flex:none;}
.trace-ico{position:relative;z-index:1;width:26px;height:26px;flex:none;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--bg-base);border:1px solid var(--border-default);color:var(--brand-primary-hover);}
.trace-k{font-size:13px;color:var(--fg-primary);font-weight:500;font-family:var(--f-satoshi);}
.trace-tag{font-family:var(--f-mono);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:5px;letter-spacing:.03em;margin-left:auto;
  background:var(--bg-raised);color:var(--fg-tertiary);}
.trace-tag.mint{background:rgba(107,255,206,.12);color:var(--accent-mint);}
.trace-tag.cy{background:var(--brand-primary-10);color:var(--brand-primary-hover);}
.trace-tag.amber{background:rgba(249,115,22,.14);color:var(--warning);}
.trace-detail{background:var(--bg-base);border-left:1px solid var(--border-quiet);padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.trace-d-h{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--fg-primary);}
.trace-d-row{display:flex;flex-direction:column;gap:2px;}
.trace-d-row span{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--fg-tertiary);text-transform:uppercase;}
.trace-d-row b{font-size:12.5px;color:var(--fg-secondary);font-weight:500;text-transform:none;line-height:1.35;overflow-wrap:anywhere;}
.trace-d-tags{display:flex;gap:7px;flex-wrap:wrap;}
.trace-d-tags .trace-tag{margin-left:0;}
.trace-d-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border-quiet);font-family:var(--f-mono);font-size:10px;color:var(--fg-muted);display:flex;align-items:center;gap:6px;}
@media(max-width:560px){.trace-body{grid-template-columns:1fr;}.trace-detail{border-left:none;border-top:1px solid var(--border-quiet);}}

/* ═══════════ ⑥ POLICY TABLE ═══════════ */
.pol-wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter);}
.pol{width:100%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:20px;box-shadow:var(--shadow-card);overflow:hidden;}
.pol-head{display:grid;grid-template-columns:2fr 1.1fr 1fr .6fr;gap:16px;padding:16px 28px;border-bottom:1px solid var(--border-default);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--fg-tertiary);}
.pol-row{display:grid;grid-template-columns:2fr 1.1fr 1fr .6fr;gap:16px;padding:22px 28px;align-items:center;
  border-bottom:1px solid var(--border-quiet);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),background .16s;}
.pol-row:last-child{border-bottom:none;}
.pol-row:hover{background:var(--bg-raised);}
.pol-name{display:flex;align-items:center;gap:13px;min-width:0;}
.pol-idx{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--fg-tertiary);border:1px solid var(--border-default);}
.pol-n{font-size:16px;color:var(--fg-primary);font-weight:500;line-height:1.25;}
.pol-d{font-size:13px;color:var(--fg-tertiary);margin-top:3px;line-height:1.3;}
.pol-chips{display:flex;gap:6px;flex-wrap:nowrap;}
.pol-chip{font-family:var(--f-mono);font-size:11px;color:var(--fg-secondary);background:var(--bg-base);
  border:1px solid var(--border-default);border-radius:6px;padding:4px 8px;white-space:nowrap;}
.pol-chip.g{font-weight:600;}
.pol-chip.g.dlp{color:var(--brand-primary-hover);border-color:var(--brand-primary-16);background:var(--brand-primary-10);}
.pol-chip.g.block{color:var(--danger);border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.08);}
.pol-chip.g.route{color:var(--accent-mint);border-color:rgba(107,255,206,.3);background:rgba(107,255,206,.08);}
@media(max-width:640px){.pol-head{display:none;}.pol-row{grid-template-columns:1fr;gap:10px;}}

/* ═══════════ reward stats band ═══════════ */
.reward{position:relative;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);
  background:linear-gradient(180deg,rgba(0,173,255,.05),transparent 50%);}
.reward .h2 .cy{color:var(--brand-primary);}
.reward-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;}
.reward-cell{border-top:1px solid var(--border-default);padding-top:24px;}
.reward-n{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,7vw,84px);line-height:.9;letter-spacing:-.04em;color:var(--fg-primary);}
.reward-l{font-size:15px;color:var(--fg-tertiary);margin-top:14px;max-width:240px;}
@media(max-width:720px){.reward-stats{grid-template-columns:1fr;gap:8px;}}

/* ═══════════ feature grid ═══════════ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--border-quiet);
  border:1px solid var(--border-quiet);border-radius:16px;overflow:hidden;}
.feat-card{background:var(--bg-base);padding:32px 28px;transition:background .2s var(--ease-out);}
.feat-card:hover{background:var(--bg-surface);}
.feat-ico{width:40px;height:40px;border-radius:10px;background:var(--brand-primary-10);border:1px solid var(--brand-primary-16);
  display:flex;align-items:center;justify-content:center;color:var(--brand-primary);margin-bottom:20px;}
.feat-h{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--fg-primary);letter-spacing:-.01em;margin:0;}
.feat-b{font-size:14.5px;line-height:1.55;color:var(--fg-tertiary);margin:11px 0 0;}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr;}}

/* motion-off coverage for new artifacts */
.motion-off .fan-edge,.motion-off .ig-edge,.motion-off .fan-dot,.motion-off .fan-dot.amber{animation:none !important;}
.motion-off .inv-card,.motion-off .ig-chip,.motion-off .trace-row,.motion-off .pol-row{opacity:1 !important;transform:none !important;}