/* Report Template Styles v1 — hyperide.github.io/reports/shared */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--card:#161b22;--border:#30363d;
  --text:#c9d1d9;--text-dim:#8b949e;
  --accent1:#58a6ff;--accent2:#bc8cff;
  --green:#3fb950;--red:#f85149;--yellow:#d29922;--orange:#db6d28;
}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:var(--accent1);text-decoration:none}a:hover{text-decoration:underline}
code,pre,.mono{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.9em}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Header ── */
.report-header{padding:48px 0 32px;border-bottom:1px solid var(--border)}
.report-header h1{font-size:2rem;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.report-header .subtitle{margin-top:8px;color:var(--text-dim)}
.report-header .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.875rem;color:var(--text-dim)}
.report-header .meta a{color:var(--accent1)}

/* ── Motivation ── */
.motivation-block{margin:28px 0 0;padding:20px 24px;background:rgba(88,166,255,.04);border:1px solid rgba(88,166,255,.15);border-radius:12px;font-size:.9rem;color:var(--text-dim);line-height:1.7}
.motivation-block strong{color:var(--text)}
.motivation-block ul{margin:8px 0 0 20px}
.motivation-block li{margin:4px 0}

/* ── Badges ── */
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.75rem;font-weight:600}
.badge-feat{background:rgba(56,139,253,.15);color:var(--accent1)}
.badge-fix{background:rgba(63,185,80,.15);color:var(--green)}
.badge-refactor{background:rgba(188,140,255,.15);color:var(--accent2)}
.badge-docs{background:rgba(139,148,158,.15);color:var(--text-dim)}
.badge-p1{background:rgba(248,81,73,.2);color:var(--red)}
.badge-p2{background:rgba(210,153,34,.2);color:var(--yellow)}
.badge-p3{background:rgba(63,185,80,.2);color:var(--green)}
.badge-resolved{background:rgba(63,185,80,.2);color:var(--green)}
.badge-accepted{background:rgba(56,139,253,.15);color:var(--accent1)}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin:16px 0;backdrop-filter:blur(8px)}
.card h3{margin-bottom:12px;font-size:1.1rem}

/* ── Summary Cards ── */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:32px 0}
.summary-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.summary-card .value{font-size:2.2rem;font-weight:700;color:#e6edf3}
.summary-card .label{font-size:.85rem;color:var(--text-dim);margin-top:4px}
.summary-card.green .value{color:var(--green)}
.summary-card.red .value{color:var(--red)}
.summary-card:hover{border-color:var(--accent1);transform:translateY(-2px)}

/* ── Sections ── */
section,.report-section{padding:32px 0}
section h2,.report-section h2{font-size:1.6rem;font-weight:700;margin-bottom:24px;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:8px}
.product-header{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;color:#e6edf3;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #21262d;-webkit-text-fill-color:initial;background:none}
.product-header .emoji{font-size:1.3rem}

/* ── Product Changes ── */
.change-item{padding:16px 20px;border-left:3px solid var(--accent1);margin:12px 0;background:rgba(22,27,34,.8);border-radius:0 8px 8px 0}
.change-item.improvement{border-left-color:var(--accent2)}
.change-item.fix{border-left-color:var(--green)}
.change-item h4{font-size:.95rem;margin-bottom:6px}
.change-item p{font-size:.85rem;color:var(--text-dim)}
.change-item .files{font-size:.75rem;color:var(--text-dim);margin-top:8px;font-family:'SF Mono',monospace;display:flex;flex-wrap:wrap;gap:4px 12px}
.change-item .files a{color:var(--accent1);font-size:.75rem}
.change-item .files a:hover{color:var(--accent2)}

/* ── Architecture SVG ── */
.arch-container{overflow-x:auto;margin:16px 0}
.arch-container svg{max-width:100%}
.arch-node{cursor:default}
.arch-node rect{transition:filter .2s}
.arch-node:hover rect{filter:brightness(1.3)}
.arch-container [data-href]{cursor:pointer;transition:filter .2s}
.arch-container [data-href]:hover{filter:brightness(1.3)}
.arch-tooltip{
  position:absolute;background:transparent;
  border-radius:8px;padding:0;font-size:.8rem;max-width:340px;
  opacity:0;transition:opacity .15s;z-index:100;
  pointer-events:none;
}
.arch-tooltip>div{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.arch-tooltip.visible{opacity:1;pointer-events:auto}

/* ── File Impact ── */
.file-group{margin:12px 0}
.file-group-header{font-size:.9rem;font-weight:600;padding:8px 12px;background:rgba(48,54,61,.5);border-radius:8px 8px 0 0;cursor:pointer;display:flex;align-items:center;gap:8px}
.file-group-header:hover{background:rgba(48,54,61,.8)}
.file-group-header .arrow{transition:transform .2s;display:inline-block}
.file-group-header .arrow.open{transform:rotate(90deg)}
.file-group-items{display:none}
.file-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 24px;font-size:.8rem;font-family:'SF Mono',monospace;border-left:1px solid var(--border)}
.file-item a{color:var(--text)}
.file-item a:hover{color:var(--accent1)}
.file-stat{display:flex;gap:4px;margin-left:auto;font-size:.75rem}
.file-stat .add{color:var(--green)}
.file-stat .del{color:var(--red)}
.file-badge{font-size:.65rem;padding:1px 6px;border-radius:4px;font-weight:600}
.file-badge.new{background:rgba(63,185,80,.2);color:var(--green)}
.file-badge.modified{background:rgba(56,139,253,.15);color:var(--accent1)}
.file-badge.deleted{background:rgba(248,81,73,.2);color:var(--red)}

/* ── Findings ── */
.finding-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.finding-filters button{background:var(--card);border:1px solid var(--border);color:var(--text-dim);padding:4px 14px;border-radius:16px;cursor:pointer;font-size:.8rem;transition:all .2s}
.finding-filters button:hover,.finding-filters button.active{border-color:var(--accent1);color:var(--accent1)}
.finding-card{margin:12px 0;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.finding-header{padding:12px 16px;background:var(--card);cursor:pointer;display:flex;align-items:center;gap:10px;font-size:.9rem}
.finding-header:hover{background:rgba(22,27,34,.9)}
.finding-body{padding:16px;background:rgba(13,17,23,.8);display:none;font-size:.85rem}
.finding-body.open{display:block}
.diff-block{background:#161b22;border-radius:6px;padding:12px;margin:8px 0;font-size:.8rem;overflow-x:auto}
.diff-block .diff-header{font-size:.75rem;color:var(--text-dim);margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px}
.diff-line-del{color:var(--red);background:rgba(248,81,73,.1);padding:1px 4px;display:block}
.diff-line-add{color:var(--green);background:rgba(63,185,80,.1);padding:1px 4px;display:block}

/* ── Timeline ── */
.timeline-wrap{overflow-x:auto;padding:20px 0}
.timeline{display:flex;align-items:flex-start;gap:0;min-width:max-content;position:relative;padding:40px 20px 20px}
.timeline::before{content:'';position:absolute;top:52px;left:20px;right:20px;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));border-radius:1px}
.timeline-item{display:flex;flex-direction:column;align-items:center;width:120px;position:relative;cursor:pointer}
.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--accent1);border:2px solid var(--bg);position:relative;z-index:1;transition:transform .2s,box-shadow .2s}
.timeline-item:hover .timeline-dot{transform:scale(1.4);box-shadow:0 0 12px rgba(88,166,255,.5)}
.timeline-sha{font-size:.72rem;color:var(--accent1);margin-top:8px}
.timeline-msg{font-size:.72rem;color:var(--text-dim);text-align:center;margin-top:4px;max-width:110px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.timeline-tooltip{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);background:rgba(13,17,23,.95);border:1px solid var(--accent1);border-radius:8px;padding:10px 14px;font-size:.78rem;color:var(--text);opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;z-index:10;backdrop-filter:blur(8px)}
.timeline-item:hover .timeline-tooltip{opacity:1}

/* ── Codex Review ── */
.codex-round{margin:16px 0}
.codex-round-header{padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:12px 12px 0 0}
.codex-round-header h3{margin:0 0 8px;font-size:1.05rem}
.codex-round-header .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.codex-round-items{border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;overflow:hidden}
.codex-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.85rem;border-bottom:1px solid var(--border);cursor:pointer}
.codex-item:last-child{border-bottom:none}
.codex-item:hover{background:rgba(22,27,34,.6)}
.codex-item .title{flex:1}
.codex-detail{display:none;padding:10px 16px 14px;font-size:.8rem;color:var(--text-dim);background:rgba(13,17,23,.5);border-bottom:1px solid var(--border)}
.codex-detail.open{display:block}
.codex-detail a{font-size:.8rem}

/* ── ADR ── */
.adr-card{margin:12px 0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.adr-header{padding:12px 16px;background:var(--card);cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.adr-header:hover{background:rgba(22,27,34,.9)}
.adr-body{padding:16px;display:none;font-size:.85rem}
.adr-body.open{display:block}
.adr-body dt{color:var(--accent1);font-weight:600;margin-top:12px}
.adr-body dd{margin-left:16px;color:var(--text-dim)}

/* ── Fade-in ── */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.fade-in.visible{opacity:1;transform:none}

/* ── SVG animation ── */
@keyframes dash{to{stroke-dashoffset:-16}}