/* Start from a reel (WF-104): the home tile above the budget box and the source card on Ideas and Plan. The tile is a reversed block. */
:root{--reel:var(--navy-deep);--reel-ink:var(--cream-text);--reel-sub:var(--cream-text);--reel-pill:var(--cream-text);--reel-pill-ink:var(--navy-deep);--reel-soft:var(--cream);--reel-line:var(--hairline);--reel-text:var(--accent-ink)}
.reel-home{margin:10px 0 0}
.reel-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px 10px 16px;border-radius:var(--radius-card);background:var(--reel);color:var(--reel-ink);text-decoration:none;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.reel-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-pop)}
.reel-tile:focus-visible{outline:3px solid var(--reel-sub);outline-offset:3px}
.reel-tile-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.reel-tile-title{font:900 clamp(16px,4.2vw,19px)/1.2 var(--font-head);letter-spacing:-.02em}
.reel-tile-sub{font-size:13px;line-height:1.35;color:var(--reel-sub)}
.reel-tile-pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--radius-pill);background:var(--reel-pill);color:var(--reel-pill-ink);font-weight:800;font-size:14px;white-space:nowrap}
@media(max-width:380px){.reel-tile{flex-wrap:wrap}.reel-tile-pill{margin-left:auto}}
.reel-source{position:relative;margin:10px 0 12px;padding:12px 14px;border:1px solid var(--reel-line);border-radius:var(--radius-sm);background:var(--reel-soft);color:var(--ink)}
.reel-source-line{margin:0;font-weight:800;font-size:14px;color:var(--reel-text)}
.reel-source-mark{display:inline-block;margin-right:6px;font-size:11px}
.reel-source-excerpt{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel-source-link{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:800;font-size:14px;color:var(--reel-text);text-underline-offset:2px}
.reel-source-hide{position:absolute;top:4px;right:4px;min-height:var(--tap)}
@media(prefers-reduced-motion:reduce){.reel-tile{transition:none}.reel-tile:hover{transform:none}}