/* ============================================================
   helloPapa UI: the bento grid and the progress widgets (docs/10 §4, Phase 2).
   Shared by the landing page and the profile preview (account.html):
   rank ladder, mastery bars, passport stamps, weekly streak, events.
   Link ui/tokens.css and ui/ui.css first. Tokens only, never a raw colour.
   ============================================================ */

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.tile .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tile h3{font-size:24px;letter-spacing:-.025em;line-height:1.15;margin:14px 0 8px;font-weight:700}
.tile p{color:var(--ink-2);font-size:15.5px;max-width:30em}
.tile.inverse p{color:var(--on-inverse-2)}
.tile.sm h3{font-size:20px}
.tile.sm p{font-size:15px}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.row-2{grid-row:span 2}

/* progress */
.ladder{margin-top:18px}
.ladder li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);color:var(--ink-3);font-weight:600}
.ladder li.done{color:var(--ink-2)}
.ladder li.now{color:var(--ink)}
.ladder .dot{width:12px;height:12px;border-radius:50%;background:var(--surface-2);margin-left:6px}
.ladder li.done .dot{background:var(--herb-text)}
.ladder li.now .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ladder .xp{grid-column:2/-1;margin-top:-2px}
.mast{margin-top:18px;display:grid;gap:14px}
.mast div{display:grid;grid-template-columns:170px 1fr 40px;gap:14px;align-items:center;font-weight:600;font-size:15px}
.mast em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--ink-3);text-align:right}
.stamps{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.stamps span{width:60px;height:60px;border-radius:50%;border:2px dashed currentColor;display:grid;place-items:center;font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.04em}
.stamps .got{color:var(--accent-text);transform:rotate(-8deg)}
.stamps .no{color:var(--line-2)}
.week{display:flex;gap:8px;margin-top:18px}
.week i{flex:1;height:40px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--on-herb)}
.week i.on{background:var(--herb)}
.week i.fz{background:repeating-linear-gradient(135deg,var(--freeze-soft) 0 6px,var(--freeze) 6px 12px)}
.week .icon{width:16px;height:16px;stroke-width:3}
.events{margin-top:16px}
.events li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.events li span{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .span-3,.span-4{grid-column:span 6}
  .span-5,.span-7,.span-8{grid-column:span 12}
  .row-2{grid-row:auto}
}
@media (max-width:600px){
  .span-3,.span-4{grid-column:span 12}
  .mast div{grid-template-columns:1fr 40px}
  .mast div .bar{grid-column:1/-1;order:3}
}