/* year-ahead screens (Y3 3.6); ported from the board prototype; tokens only */
.tl{position:relative}
.tl-lanes{position:relative}
.tl-bar{position:absolute;border-radius:var(--r-small);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--accent-ink)}
.tl-line{z-index:1;position:absolute;width:1.5px;margin-left:-.75px;background:var(--text);box-shadow:0 0 0 1px var(--surface)}   /* a 1px gap in the card's colour: in the light theme --text and the current bars' --accent are one ink, the gap keeps the line seen across a bar */
.tl-dot{z-index:1;position:absolute;width:9px;height:9px;margin:0 0 0 -4.5px;border-radius:50%;background:var(--voice);box-shadow:0 0 0 1.5px var(--text)}
.tl-today{position:absolute;top:-6px;font:var(--t-meta);color:var(--text);white-space:nowrap}
.tl-months{position:absolute;left:0;right:0;height:14px}
.tl-m{position:absolute;transform:translateX(-50%);font:var(--t-tab);color:var(--muted)}
.tl-card{padding:16px}
.tl-legend{list-style:none;margin:var(--gap-m) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--gap-s);font:var(--t-sub);color:var(--muted)}
.tl-legend li{display:flex;gap:var(--gap-s);align-items:center}
.tl-legend .ic-lock{margin-left:auto;flex:none;display:inline-flex;color:var(--muted)}   /* review b2: the legend rows are locked like the rows below - one lock, at the row end */
.strip4{position:relative;height:4px;border-radius:var(--r-hair);background:var(--progress-off);margin-top:var(--gap-m)}
.strip4 i{position:absolute;top:0;bottom:0;border-radius:var(--r-hair)}
.strip4 b{position:absolute;top:-4px;width:1.5px;height:12px;margin-left:-.75px;background:var(--text)}
.now-pill{display:inline-block;padding:2px 10px;border-radius:var(--pill-r);background:var(--accent);color:var(--accent-ink);font:var(--t-meta);vertical-align:middle}   /* P4.1: the one «now» mark = sub.css .ah-now-pill, ink, never yellow (canon 229) */
.yr-h2{margin:var(--gap-xl) 0 0;font:var(--t-h2) !important;font-weight:700 !important;color:var(--text)}
.yr-lbl{margin:var(--gap-l) 0 0;font:var(--t-section);color:var(--muted)}
.yr-steps .step-do{font:var(--t-body)}
.yr-steps{margin-top:var(--gap-s)}
.yr-card2{margin-top:var(--gap-l);background:var(--surface);border-radius:var(--r-card);padding:16px}
.yr-card2 p{margin:0 0 var(--gap-m);font:var(--t-body)}
.yr-card2 p:last-child{margin-bottom:0}
.yr-card2 .yr-dh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap-s);font:var(--t-title);margin-bottom:var(--gap-m)}
.yr-card2 .yr-dh span{font:var(--t-meta);color:var(--muted);text-align:right}
.yr-card2 b{font-weight:700}
.tl-leg-row{display:flex;gap:var(--gap-s);align-items:center}
.sub-row{margin-top:var(--gap-xs);font:var(--t-row-sub);color:var(--muted)}
.prep-a{margin:0;font:var(--t-label)}
.prep-b{margin:var(--gap-xs) 0 0;font:var(--t-body)}
.tl-bar{background:var(--accent);font:var(--t-tab)}
.tl-bar.tl-past{background:var(--line-strong);color:var(--text)}
/* row 45 (P4.3): in the dark theme a bar is an outline on the card's own surface, not a white slab; its number takes the text colour. The legend line
   starts with the bar's number. Review b5: the today line is drawn over every bar (past bars included) and each number sits above the line on the
   bar's own fill (`background:inherit`), so the line shows on the bars and never crosses a digit. */
.tl-bn{position:relative;z-index:2;background:inherit;font-weight:inherit;line-height:.8}   /* a backing shorter than the bar's inside, so the dark outline stays whole */
[data-theme="dark"] .tl-bar{background:var(--surface);box-shadow:inset 0 0 0 var(--bw-state) var(--accent);color:var(--text)}
[data-theme="dark"] .tl-bar.tl-past{background:var(--surface);box-shadow:inset 0 0 0 var(--bw-state) var(--line-strong);color:var(--muted)}
.tl-n{flex:none;min-width:var(--gap-l);font:var(--t-label);color:var(--text);font-variant-numeric:tabular-nums}
.tl-today-r{transform:translateX(-100%);margin-left:4px}
.yr-lbl-in{margin:0 0 var(--gap-m);font:var(--t-section);color:var(--muted)}
.yr-dh-main{font:var(--t-title);color:var(--text);text-align:left}
.yr-card2 .yr-dh-col{flex-direction:column;gap:2px}
.yr-card2 .yr-dh-col span:last-child{text-align:left}
.yr-when{font:var(--t-row-sub)}

/* Y4 sale: the card in the my-chart tab, the offer screen (tokens only) */
.yr-card{display:flex;align-items:center;gap:var(--gap-s);margin-top:var(--gap-l);padding:16px;cursor:pointer}
.yr-card .yr-main{flex:1;min-width:0}
.yr-title{margin:0;font:var(--t-row)}
.yr-sub{margin:2px 0 0;font:var(--t-row-sub);color:var(--muted)}
.yr-meta{margin:var(--gap-s) 0 0;font:var(--t-caption);color:var(--muted)}
.yr-card .icon{flex:none;color:var(--muted)}
.yr-offer-meta{margin-top:var(--gap-l)}
.yr-offer-meta .meta{margin:0}
/* Y4 4.4 the reveal: the bars are drawn period by period (year.js adds .drawn), the today marker and its word appear with the done line */
.year-reveal .tl-bar{opacity:0;transform:scaleX(.15);transform-origin:left center;transition:opacity 300ms var(--ease-out),transform 500ms var(--ease-out)}
.year-reveal .tl-bar.drawn{opacity:1;transform:none}
.year-reveal .yr-today-mark{visibility:hidden}
.year-reveal.yr-done .yr-today-mark{visibility:visible}
@media (prefers-reduced-motion: reduce){.year-reveal .tl-bar{transition:none}}
/* P2.6 (canon №348): the year card's price - the year pay page's own stack (pay.css .pl-now/.pl-was/.pl-pill/.pay-price-old), no button */
.yr-price{margin-top:var(--gap-l)}
.yr-price .pl-now{margin:0}
.yr-price .pay-price-amount{font:var(--t-price);letter-spacing:var(--ls-display);color:var(--text);font-variant-numeric:tabular-nums}
.yr-price .pl-was{display:flex;align-items:center;margin:0;font:var(--t-label);color:var(--muted)}
.yr-price .pl-pill{margin-left:8px;padding:3px 6px;border-radius:var(--r-tag);background:var(--voice);color:var(--voice-ink);font:var(--t-tab)}
.yr-price .pay-price-old{position:relative;display:inline-block;text-decoration:none;font-variant-numeric:tabular-nums}
.yr-price .pay-price-old::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--bw-state);background:var(--text)}
.yr-price .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yr-price + .yr-offer-meta{margin-top:var(--gap-m)}
/* row 47 (P4.3): the December year card (M2) is a small year card - the title at card-title size, then the twelve months of the year it sells
   as the timeline axis prints them, on one hairline (no bars: nothing is computed before the offer opens, and no yellow, №105) */
.yr-card[data-year-card^="december"] .yr-title{font:var(--t-title)}
.yr-months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:var(--gap-m);padding-top:var(--gap-s);border-top:var(--bw-state) solid var(--progress-off)}
.yr-m{font:var(--t-tab);font-style:normal;color:var(--muted);text-align:center}