/* Page-local to "Seeing your time": the dashboard miniature, one dark Wrapped
   chapter, the saved-recap tiles, the Reflect chat and the weekday bars.
   Ported verbatim from `Seeing Your Time.html`'s <style> block — only the
   standalone-shell rules (`.snav`, `.sfoot`, `.doc`, `.app`) are dropped, since
   `base.css` + `article.css` own that chrome here. */

/* a miniature of the real dashboard — 12-column grid, cards spanning
   3 / 6 / 12 of it, exactly as SIZE_COLS does in the app. */
.dashmini { border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-xl); background: var(--tmb-surface-soft); overflow: hidden; }
.dm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--tmb-surface); border-bottom: 1px solid var(--tmb-border); }
.dm-t { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; color: var(--tmb-fg-1); }
.dm-add { font-size: 10.5px; font-weight: 700; color: var(--tmb-brand-light-to); border: 1px solid var(--tmb-border); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.dm-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 12px; }
.dm-c { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: 12px; }
.dm-c.s { grid-column: span 3; } .dm-c.m { grid-column: span 6; } .dm-c.l { grid-column: span 12; }
.dm-c s { text-decoration: none; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tmb-fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-c b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--tmb-fg-1); font-variant-numeric: tabular-nums; line-height: 1; }
.dm-donut { width: 74px; height: 74px; margin: 4px auto 2px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--tmb-block-focus) 0 45%, var(--tmb-block-work) 45% 72%, var(--tmb-block-break) 72% 88%, var(--tmb-block-move) 88% 100%); }
.dm-donut::after { content: ""; width: 40px; height: 40px; border-radius: 50%; background: var(--tmb-surface); }
.dm-spark { display: flex; align-items: flex-end; gap: 4px; height: 74px; margin-top: 4px; }
.dm-spark i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--tmb-grad-light); }
.dm-heat { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.dm-heat i { width: 11px; height: 11px; border-radius: 3px; background: var(--tmb-block-empty); }
.dm-heat i.l1 { background: rgba(0,159,255,.22) } .dm-heat i.l2 { background: rgba(0,159,255,.45) }
.dm-heat i.l3 { background: rgba(0,159,255,.7) }  .dm-heat i.l4 { background: var(--tmb-brand-light-to) }

/* one chapter of a generated Wrapped. The real thing is a run of full-bleed
   scroll-snapped chapters alternating light and dark; this is one of the dark
   ones, at article scale. */
.wsample-fig { padding: 0 !important; overflow: hidden; }
.wsample { background: var(--tmb-brand-dark-from); color: #fff; position: relative; overflow: hidden; }
.wsample::before { content: ""; position: absolute; top: -40%; right: -12%; width: 320px; height: 320px; border-radius: 50%; background: var(--tmb-brand-light-from); opacity: .2; filter: blur(80px); }
.ws-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ws-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; }
.ws-brand img { width: 22px; height: 22px; border-radius: 7px; }
.ws-eb { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(219,234,254,.62); text-align: right; }
.ws-body { position: relative; padding: 30px 22px 26px; }
.ws-kick { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tmb-brand-light-from); }
.ws-head { font-family: var(--tmb-font-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 12px 0 0; }
.ws-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.ws-r { display: grid; grid-template-columns: 62px 1fr 44px 34px; gap: 12px; align-items: center; }
.ws-n { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.9); }
.ws-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ws-bar i { display: block; height: 100%; border-radius: 999px; }
.ws-bar i.focus { background: linear-gradient(90deg,#00bfff,#7dd3fc) } .ws-bar i.work { background: #4f7fd4 }
.ws-bar i.break { background: linear-gradient(90deg,#a855f7,#c084fc) } .ws-bar i.move { background: #22c55e }
.ws-bar i.meal { background: #f59e0b }
.ws-v { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ws-p { font-size: 11.5px; font-weight: 600; color: rgba(219,234,254,.6); text-align: right; font-variant-numeric: tabular-nums; }
.ws-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 22px; border-top: 1px solid rgba(255,255,255,.1); }
.ws-dots { display: inline-flex; gap: 5px; }
.ws-dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); }
.ws-dots i.on { width: 18px; background: var(--tmb-brand-light-from); }
.ws-pg { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(219,234,254,.55); font-variant-numeric: tabular-nums; }
.wsample + .cap { padding: 0 22px 18px; margin-top: 16px !important; }

/* the Wrapped hub's saved-recap tiles */
.wrapmini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wm-c { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-lg); box-shadow: var(--tmb-shadow-xs); }
.wm-k { align-self: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tmb-brand-light-to); background: rgba(0,159,255,.1); border-radius: 999px; padding: 3px 8px; }
.wm-c b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--tmb-fg-1); }
.wm-c s { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--tmb-fg-3); font-variant-numeric: tabular-nums; }

/* reflect chat */
.chatmini { margin: 24px 0 0; padding: 22px; background: var(--tmb-brand-dark-from); border-radius: var(--tmb-radius-2xl); box-shadow: var(--tmb-shadow-md); max-width: 66ch; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.chatmini .glow { position: absolute; top: -30%; right: -10%; width: 220px; height: 220px; background: var(--tmb-brand-light-from); opacity: .22; filter: blur(70px); border-radius: 50%; }
.chatmini .cm-msg { position: relative; z-index: 1; padding: 13px 16px; border-radius: 17px; font-size: 14px; line-height: 1.5; max-width: 88%; }
.chatmini .them { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-bottom-left-radius: 5px; align-self: flex-start; color: rgba(255,255,255,.92); }
.chatmini .me { background: var(--tmb-brand-light-from); border-bottom-right-radius: 5px; align-self: flex-end; color: #fff; font-weight: 600; }
.barmini { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.barmini span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.barmini i { display: block; width: 100%; flex: 1; border-radius: 7px 7px 3px 3px; background: var(--tmb-grad-light); box-shadow: var(--tmb-glow-brand-sm); }
.barmini b { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tmb-fg-4); }

@media (max-width: 720px) {
  .barmini { height: 108px; gap: 7px; }
  .wrapmini { grid-template-columns: 1fr; }
  .ws-head { font-size: 25px; }
  .ws-body { padding: 22px 16px 20px; }
  .ws-top, .ws-foot { padding: 12px 16px; }
  .ws-r { grid-template-columns: 50px 1fr 38px; gap: 9px; }
  .ws-p { display: none; }
  .wsample + .cap { padding: 0 16px 15px; }
  /* 3-of-12 tiles are unreadable at phone width: KPIs go two-up, every wider
     card takes the full row. The labels are the real dashboard's, so they lose
     tracking and a little size rather than getting shortened — "TIME TRACKED ·
     30D" needs 104px of the 92px a span-6 tile allows. */
  .dm-grid { gap: 6px; padding: 9px; }
  .dm-c { padding: 9px; }
  .dm-c.s { grid-column: span 6; } .dm-c.m { grid-column: span 12; }
  .dm-c s { font-size: 8px; letter-spacing: .02em; }
  .dm-c b { font-size: 16px; }
  .dm-heat i { width: 9px; height: 9px; }
}