/* ===================================================================
   Beige glass — surfaces, motion, and the overview
   =================================================================== */

.glass, .card, .btn-soft, .iconbtn, .xp-pill, .search-wrap, .banner, .topbar-wrap {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}

.card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.55);
}
.card-tap { transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s ease; }
.card-tap:hover { transform: translateY(-4px); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.7); background: rgba(255,255,255,.66); }
.card-tap:active { transform: scale(.985); transition-duration: .12s; }

/* header: full-bleed, sticky, frosted */
.topbar-wrap {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 239, 231, .55);
  border-bottom: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 1px 0 var(--line-2);
}
.topbar { max-width: 1180px; margin: 0 auto; padding: 12px 24px; }
.topnav button { transition: color .25s ease, background-color .3s var(--ease), transform .35s var(--ease); }
.topnav button:hover { background: rgba(255,255,255,.55); }
.topnav button:active { transform: scale(.95); }
.topnav button[aria-current="page"] { background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(43,38,32,.06); }
.xp-pill, .iconbtn { background: rgba(255,255,255,.5); border: 1px solid var(--glass-border); }

/* buttons: iOS press */
.btn { transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .25s ease, color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); transition-duration: .12s; }
.btn-primary { background: var(--ink); color: #FFF8EF; box-shadow: 0 2px 4px rgba(43,38,32,.18), 0 10px 26px rgba(43,38,32,.2); }
.btn-primary:hover { background: #3A342D; box-shadow: 0 4px 8px rgba(43,38,32,.16), 0 18px 36px rgba(43,38,32,.24); }
.btn-primary:active { box-shadow: 0 1px 3px rgba(43,38,32,.22); }
.btn-soft { background: rgba(255,255,255,.52); border: 1px solid var(--glass-border); color: var(--ink); box-shadow: 0 1px 2px rgba(43,38,32,.05), 0 6px 16px rgba(43,38,32,.05); }
.btn-soft:hover { background: rgba(255,255,255,.7); box-shadow: 0 3px 6px rgba(43,38,32,.06), 0 14px 30px rgba(43,38,32,.09); }
.btn-mint { box-shadow: 0 2px 4px rgba(37,148,95,.14), 0 10px 24px rgba(37,148,95,.18); }
.btn-mint:hover { background: #B9D6C2; }
.node { transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease), width .3s var(--ease), height .3s var(--ease), background-color .3s ease; }
.node-cell:hover .node { transform: scale(1.1); }
.chip, .option, .ref-chip { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s ease, opacity .25s ease; }
.pip { transition: background-color .35s ease, width .35s var(--ease); }
.search-wrap { border: 1px solid var(--glass-border); }
.banner { border: 1px solid rgba(255,255,255,.5); }

/* view + stagger entrances */
.view-enter { animation: rise .55s var(--ease) both; }
.stagger > * { animation: rise .7s var(--ease) both; }
.stagger > :nth-child(2) { animation-delay: .04s; }
.stagger > :nth-child(3) { animation-delay: .08s; }
.stagger > :nth-child(4) { animation-delay: .12s; }
.stagger > :nth-child(5) { animation-delay: .16s; }
.stagger > :nth-child(6) { animation-delay: .2s; }
.stagger > :nth-child(7) { animation-delay: .24s; }
.stagger > :nth-child(8) { animation-delay: .28s; }
.stagger > :nth-child(n+9) { animation-delay: .32s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- overview ---------- */
.ov-hero { display: flex; align-items: center; gap: 40px; margin-top: 22px; }
.donut-wrap { position: relative; width: 224px; height: 224px; flex-shrink: 0; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 20; transition: stroke-dasharray .95s var(--ease), stroke-width .3s var(--ease), opacity .3s ease; cursor: default; }
.donut circle.track { stroke: var(--chart-none); }
.donut circle.seg:hover, .donut circle.seg:focus-visible, .donut circle.seg.hot { stroke-width: 26; outline: 0; }
.donut.dim circle.seg:not(.hot) { opacity: .35; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.donut-num { font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.donut-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 6px; letter-spacing: .02em; max-width: 120px; line-height: 1.3; }
.legend { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; }
.legend-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; width: 100%;
  background: transparent; border-radius: 14px; cursor: default; font-family: inherit; text-align: left;
  transition: background-color .3s ease, transform .35s var(--ease);
}
.legend-row:hover, .legend-row.hot { background: rgba(255,255,255,.55); }
.legend-sw { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.legend-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.legend-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.legend-n { margin-left: auto; font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.legend-n small { font-size: 12.5px; font-weight: 600; color: var(--faint); margin-left: 4px; letter-spacing: 0; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.stat { padding: 20px 22px; }
.stat-n { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-n small { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; margin-left: 4px; }
.stat-l { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 8px; }

.parts-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.part-row { display: flex; flex-direction: column; gap: 8px; }
.part-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.part-row-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.part-row-nums { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { display: flex; gap: 2px; height: 9px; border-radius: 999px; overflow: hidden; background: var(--chart-none); }
.bar span { display: block; height: 100%; transition: width .9s var(--ease); }
.bar .b-code { background: var(--chart-code); }
.bar .b-read { background: var(--chart-read); }

.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; padding: 9px 13px 9px 10px; border-radius: 12px; color: var(--ink-2);
  background: rgba(255,255,255,.5); border: 1px solid var(--glass-border);
  transition: transform .35s var(--ease), background-color .25s ease, box-shadow .35s var(--ease);
}
.skill-chip:hover { transform: translateY(-2px); background: rgba(255,255,255,.75); box-shadow: 0 6px 16px rgba(43,38,32,.08); }
.skill-chip:active { transform: scale(.96); }
.skill-chip .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

@media (max-width: 760px) {
  .ov-hero { flex-direction: column; gap: 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-n small { display: block; margin: 6px 0 0; }
  .skills { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .tabbar { background: rgba(244,239,231,.72); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid rgba(255,255,255,.5); }
  .tabbar button { transition: background-color .3s ease, transform .35s var(--ease); }
  .tabbar button[aria-current="page"] { background: rgba(255,255,255,.75); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .view-enter, .stagger > * { animation: none; }
}