/* ==========================================================================
   Medspa_Theme — Timeline layouts (20).

   GROUND RULE: any child painting a background restates its foreground tokens.
   BLUSH RULE: on var(--blush), accent -> var(--coral-dk) and secondary -> var(--body).
   ========================================================================== */

.msvc-timeline{
  --tl-bg:var(--white);--tl-fg:var(--ink);--tl-fg2:var(--body);--tl-fg3:var(--muted);
  --tl-line:var(--border);--tl-accent:var(--coral-ink);--tl-card:#fff;
  --tl-chip-bg:var(--blush);--tl-chip-fg:var(--coral-dk);--tl-ok:#186246;
  background:var(--tl-bg);color:var(--tl-fg2);padding-top:var(--gap);padding-bottom:var(--gap);display:block;
}
.msvc-timeline.t-white{--tl-bg:var(--white)}
.msvc-timeline.t-cream{--tl-bg:var(--cream)}
.msvc-timeline.t-sand{--tl-bg:var(--sand)}
.msvc-timeline.t-blush{--tl-bg:var(--blush);--tl-accent:var(--coral-dk);--tl-fg3:var(--body)}
.msvc-timeline.t-ink{
  --tl-bg:var(--ink);--tl-fg:#fff;--tl-fg2:var(--on-dark);--tl-fg3:var(--on-dark);
  --tl-line:var(--border-lt);--tl-accent:var(--nude);--tl-card:var(--dark);
  --tl-chip-bg:color-mix(in srgb,var(--coral) 22%,transparent);--tl-chip-fg:#f7b0ae;--tl-ok:#7fcfa8;
}
.msvc-timeline .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.msvc-timeline .msvc-eyebrow{font-family:var(--fb);font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tl-accent);display:inline-flex;align-items:center;gap:10px}
.msvc-timeline .msvc-eyebrow::before{content:'';width:28px;height:2px;background:currentColor;flex:none}
.msvc-timeline .msvc-eyebrow.c{justify-content:center}
.msvc-timeline .msvc-eyebrow.lt{color:var(--nude)}
.msvc-timeline h2{font-family:var(--fd);font-weight:400;color:var(--tl-fg);font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.1;letter-spacing:-.01em;margin:12px 0 0}
.msvc-timeline h2 .ita{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--tl-accent)}
.msvc-timeline h3{color:var(--tl-fg)}
.msvc-timeline p{color:var(--tl-fg2)}
.tl-head{margin-bottom:34px}.tl-head.ctr{text-align:center}
.tl-summary{font-size:.96rem;line-height:1.8;max-width:74ch;margin:-10px 0 30px;color:var(--tl-fg2)}
.tl-summary p{margin:0 0 .75em}.tl-summary p:last-child{margin-bottom:0}
.tl-summary strong{color:var(--tl-fg);font-weight:600}
.tl-summary.lead{font-size:1rem}
.tl-note{font-size:.82rem;color:var(--tl-fg3)!important;margin:24px 0 0;padding-left:16px;border-left:2px solid var(--nude);max-width:72ch}
.tl-book{margin-top:18px}
.tl-when{font-family:var(--fd);font-size:1.1rem;color:var(--tl-fg);line-height:1.1}
.tl-tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-accent);margin-top:5px}
.tl-what{font-size:.88rem;line-height:1.68;margin:10px 0 0;color:var(--tl-fg2)}
.tl-grid{display:grid;gap:18px}.tl-grid.four{grid-template-columns:repeat(4,1fr)}
.tl-compact .tl-what{font-size:.84rem}

/* Cards that paint their own ground. */
.tl-card,.tl-display-card,.tl-dark-card,.tl-photo-card,.tl-planner,.tl-intensity,.tl-warnings{
  --tl-fg:var(--ink);--tl-fg2:var(--body);--tl-fg3:var(--muted);--tl-accent:var(--coral-ink);
  --tl-line:var(--border);--tl-chip-bg:var(--blush);--tl-chip-fg:var(--coral-dk);
  background:#fff;color:var(--tl-fg2);border:1px solid var(--tl-line);border-radius:var(--rl)
}
.msvc-timeline.t-ink :is(.tl-card,.tl-display-card,.tl-photo-card,.tl-planner,.tl-intensity,.tl-warnings){
  --tl-fg:#fff;--tl-fg2:var(--on-dark);--tl-fg3:var(--on-dark);--tl-accent:var(--nude);
  --tl-line:var(--border-lt);--tl-chip-bg:color-mix(in srgb,var(--coral) 22%,transparent);--tl-chip-fg:#f7b0ae;background:var(--dark)
}
.tl-card{padding:24px}

/* 2 / 3 / 19 rails. */
.tl-rail.horizontal{position:relative;grid-template-columns:repeat(4,1fr);display:grid;gap:20px;padding-top:42px}
.tl-rail.horizontal::before{content:'';position:absolute;top:8px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--coral-dk),#8a4a24,#7a4a35,var(--tl-ok))}
.tl-rail.horizontal .tl-rail-step{position:relative;text-align:center}
.tl-rail.horizontal .tl-rail-step::before{content:'';position:absolute;top:-41px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--coral-btn);box-shadow:0 0 0 2px var(--tl-bg)}
.tl-rail.horizontal .tl-rail-step:last-child::before{background:var(--tl-ok)}
.tl-rail.vertical{position:relative;padding-left:30px}
.tl-rail.vertical::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--coral-dk),#8a4a24,#7a4a35,var(--tl-ok))}
.tl-rail.vertical .tl-rail-step{position:relative;padding-bottom:26px}
.tl-rail.vertical .tl-rail-step:last-child{padding-bottom:0}
.tl-rail.vertical .tl-rail-step::before{content:'';position:absolute;left:-30px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--tl-bg);border:2px solid var(--coral-btn)}
.tl-rail.vertical .tl-rail-step:last-child::before{border-color:var(--tl-ok)}
.tl-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,68px);align-items:start}

/* 4 answer-first. */
.tl-lines .tl-line-card{position:relative;padding-top:18px;border-top:1.5px solid var(--tl-line)}
.tl-lines .tl-line-card::before{content:'';position:absolute;top:-1.5px;left:0;width:36px;height:1.5px;background:var(--coral-btn)}

/* 5 calendar. */
.tl-calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px;margin-top:30px}
.tl-day{
  --tl-fg:var(--ink);--tl-fg2:var(--body);--tl-line:var(--border);--tl-dot:var(--ink);
  border:1px solid var(--tl-line);border-radius:10px;padding:14px 8px;text-align:center;background:#fff;
  min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--tl-fg2)
}
.tl-day.s-red{background:#fff0ed;border-color:#e8aaa6;--tl-dot:var(--coral-dk)}
.tl-day.s-bronze{background:#f8ede5;border-color:#d8b49c;--tl-dot:#8a4a24}
.tl-day.s-peel{background:#f7eee9;border-color:#d8b7a7;--tl-dot:#7a4a35}
.tl-day.s-glow{background:#edf7f2;border-color:#9bc7b3;--tl-dot:#186246}
.tl-day-n{font-family:var(--fd);font-size:1.15rem;color:var(--tl-fg)}
.tl-day-dot{width:11px;height:11px;border-radius:50%;background:var(--tl-dot)}
.tl-day-label{font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tl-fg2);line-height:1.3}
.tl-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:.76rem;color:var(--tl-fg2)}
.tl-key span{display:inline-flex;align-items:center;gap:7px}.tl-key i{width:11px;height:11px;border-radius:50%;background:var(--ink)}
.tl-key i.s-red{background:var(--coral-dk)}.tl-key i.s-bronze{background:#8a4a24}.tl-key i.s-peel{background:#7a4a35}.tl-key i.s-glow{background:#186246}

/* 6 / 20 downtime bar. */
.tl-barwrap{margin-top:30px}.tl-bar{min-height:52px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--tl-line)}
.tl-seg{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.7rem;font-weight:700;line-height:1.3;color:#fff;padding:8px 10px;flex:1}
.tl-seg.red{background:var(--coral-dk);flex:2}.tl-seg.bronze{background:#8a4a24}.tl-seg.peel{background:#7a4a35;flex:2}.tl-seg.glow{background:#186246;flex:2}.tl-seg.neutral{background:var(--ink)}
.tl-scale{display:flex;margin-top:8px;font-size:.7rem;color:var(--tl-fg3)}.tl-scale span{flex:1}.tl-scale span:nth-child(2){text-align:center}.tl-scale span:last-child{text-align:right}
.tl-callout{
  --tl-fg:var(--ink);--tl-fg2:var(--body);--tl-fg3:var(--body);--tl-accent:var(--coral-dk);
  background:var(--blush);border-radius:var(--rl);padding:22px 26px;margin-top:26px;color:var(--tl-fg2)
}
.tl-callout .tl-note{margin:0;color:var(--tl-fg2)!important;border-color:var(--coral-dk)}

/* 7 display cards. */
.tl-display-card{overflow:hidden}.tl-display-head{padding:18px;background:var(--sand);border-bottom:1px solid var(--border);--tl-fg:var(--ink);--tl-fg2:var(--body);--tl-accent:var(--coral-dk)}
.tl-display-day{font-family:var(--fd);font-size:1.5rem;color:var(--tl-fg);line-height:1}.tl-display-body{padding:20px}.tl-display-body .tl-what{margin:0}

/* 8 accordion. */
.tl-accordion{max-width:860px;margin-inline:auto}.tl-accordion .tl-head{text-align:center}
.tl-accordion details{border-bottom:1px solid var(--tl-line)}.tl-accordion details:first-of-type{border-top:1px solid var(--tl-line)}
.tl-accordion summary{list-style:none;cursor:pointer;padding:18px 0;min-height:48px;display:flex;align-items:center;gap:16px;font-family:var(--fs);font-weight:600;color:var(--tl-fg)}
.tl-accordion summary::-webkit-details-marker{display:none}.tl-pm{margin-left:auto;color:var(--tl-accent);font-size:1.3rem;transition:transform .25s}.tl-accordion details[open] .tl-pm{transform:rotate(45deg)}
.tl-answer{padding:0 0 18px;font-size:.88rem;line-height:1.75}.tl-answer p{margin:0}

/* 9 / 14 hairlines. */
.tl-hairline{display:grid;grid-template-columns:.34fr .66fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--tl-line);align-items:baseline}.tl-hairline:first-child{border-top:1px solid var(--tl-line)}
.tl-minimal{max-width:76ch}.tl-min-row{display:grid;grid-template-columns:.32fr .68fr;gap:26px;padding:18px 0;border-bottom:1px solid var(--tl-line);align-items:baseline}.tl-min-row:first-child{border-top:1px solid var(--tl-line)}
.tl-min-row .tl-what,.tl-hairline .tl-what{margin:0}

/* 10 numbered. */
.tl-number{position:relative;padding-top:46px}.tl-num{position:absolute;top:0;left:0;font-family:var(--fd);font-size:2.2rem;color:var(--tl-accent);line-height:1}.tl-number .tl-step{padding-top:4px}

/* 11 notched frame. */
.tl-notch{
  --tl-fg:var(--ink);--tl-fg2:var(--body);--tl-fg3:var(--muted);--tl-accent:var(--coral-ink);--tl-line:var(--border);
  background:#fff;border:1px solid var(--ink);padding:clamp(28px,4vw,50px);position:relative;color:var(--tl-fg2);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))
}
.tl-notch::before{content:'';position:absolute;inset:8px;border:1px solid var(--tl-line);pointer-events:none;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.tl-notch-in{position:relative}.tl-notch-step{padding-top:18px;border-top:1px solid var(--tl-line)}

/* 12 planner. */
.tl-planner{padding:clamp(24px,3vw,34px);margin-top:28px}
.tl-planner-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}.tl-planner-row label{font-size:.84rem;font-weight:600;color:var(--tl-fg)}
.tl-planner select{font-family:var(--fb);font-size:.86rem;padding:11px 14px;min-height:44px;border:1px solid var(--tl-line);border-radius:var(--r);background:var(--tl-card);color:var(--tl-fg)}
.tl-planner-output{background:var(--cream);border-radius:10px;padding:20px 22px;font-size:.94rem;color:var(--ink);min-height:62px}
.tl-planner-strip{display:flex;gap:6px;margin-top:18px}.tl-planner-strip span{flex:1;height:8px;border-radius:100px;background:var(--line)}
.tl-planner[data-status="caution"] .tl-planner-strip span:nth-child(-n+1){background:var(--coral-dk)}
.tl-planner[data-status="tight"] .tl-planner-strip span:nth-child(-n+2){background:#8a4a24}
.tl-planner[data-status="good"] .tl-planner-strip span:nth-child(-n+3){background:#186246}
.tl-planner[data-status="ideal"] .tl-planner-strip span{background:#186246}
.tl-12 .tl-compact{margin-top:28px}

/* 13 intensity. */
.tl-intensity{padding:26px}.tl-intensity label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tl-fg);display:block;margin-bottom:14px}
.tl-intensity-range{width:100%;accent-color:var(--coral-btn);min-height:44px}.tl-intensity-ends{display:flex;justify-content:space-between;gap:16px;font-size:.74rem;color:var(--tl-fg3)}
.tl-intensity-read{margin-top:20px;padding-top:18px;border-top:1px solid var(--tl-line)}.tl-intensity-k{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-accent)}
.tl-intensity-v{font-family:var(--fd);font-size:1.6rem;color:var(--tl-fg);margin-top:4px}.tl-intensity-d{font-size:.84rem;line-height:1.65;margin:8px 0 0}

/* 15 photos. */
.tl-photo-card{padding:14px}.tl-photo{aspect-ratio:1;border-radius:calc(var(--rl) - 5px);width:100%;object-fit:cover;margin-bottom:16px}.tl-photo-card .tl-step{padding:0 6px 8px}

/* 16 full bleed: both grounds restate their tokens. */
.msvc-timeline.tl-16{padding:0;background:none}
.tl-16-top{--tl-fg:#fff;--tl-fg2:var(--on-dark);--tl-fg3:var(--on-dark);--tl-accent:var(--nude);--tl-line:var(--border-lt);background:var(--ink);color:var(--tl-fg2);padding:clamp(38px,5vw,66px) var(--pad)}
.tl-16-bottom{--tl-fg:var(--ink);--tl-fg2:var(--body);--tl-fg3:var(--muted);--tl-accent:var(--coral-ink);--tl-line:var(--border);background:var(--cream);color:var(--tl-fg2);padding:clamp(32px,4vw,54px) var(--pad)}
.tl-16-in{max-width:var(--max);margin-inline:auto}.tl-16-top .tl-16-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}.tl-16-top .tl-head{margin:0}.tl-16-top .tl-summary{margin:0}

/* 17 editorial. */
.tl-editorial article{margin-bottom:24px}.tl-editorial article:last-child{margin-bottom:0}.tl-editorial h3{font-family:var(--fs);font-style:italic;font-weight:600;font-size:1.12rem;color:var(--tl-accent);margin-bottom:5px}.tl-editorial p{margin:0;font-size:.9rem;line-height:1.8}

/* 18 forced dark. */
.msvc-timeline.tl-18{--tl-bg:var(--ink);--tl-fg:#fff;--tl-fg2:var(--on-dark);--tl-fg3:var(--on-dark);--tl-line:var(--border-lt);--tl-accent:var(--nude);background:var(--ink);color:var(--tl-fg2)}
.tl-dark-card{--tl-fg:#fff;--tl-fg2:var(--on-dark);--tl-fg3:var(--on-dark);--tl-accent:var(--nude);--tl-line:var(--border-lt);background:rgba(255,255,255,.05);padding:24px}

/* 19 warnings. */
.tl-warning-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,60px);align-items:start}
.tl-warnings{padding:26px}.tl-warnings h3{font-size:1.02rem;margin-bottom:14px}.tl-warnings ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}.tl-warnings li{font-size:.86rem;line-height:1.62;padding-left:27px;position:relative;color:var(--tl-fg2)}
.tl-warnings li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--coral-dk) 12%,transparent)}.tl-warnings li::after{content:'';position:absolute;left:5px;top:12px;width:7px;height:2px;background:var(--coral-dk)}.tl-warnings strong{color:var(--tl-fg)}

/* 20 event note. */
.tl-20 .tl-compact{margin-top:28px}.tl-event-note{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;border-top:1px solid var(--tl-line);margin-top:30px;padding-top:24px}.tl-event-note p{font-size:.88rem;max-width:70ch;margin:0;color:var(--tl-fg2)}

@media(max-width:1000px){
  .tl-grid.four,.tl-rail.horizontal,.tl-16-bottom .tl-grid{grid-template-columns:1fr 1fr}
  .tl-rail.horizontal::before{display:none}.tl-rail.horizontal{padding-top:0}
  .tl-rail.horizontal .tl-rail-step{text-align:left;padding-left:24px;border-left:2px solid var(--tl-line);padding-bottom:20px}
  .tl-rail.horizontal .tl-rail-step::before{top:4px;left:-7px;box-shadow:none}
}
@media(max-width:900px){
  .tl-split,.tl-warning-grid,.tl-16-top .tl-16-in{grid-template-columns:1fr}
}
@media(max-width:700px){
  .tl-hairline,.tl-min-row{grid-template-columns:1fr;gap:7px}
  .tl-bar{display:grid;height:auto}.tl-seg{min-height:44px}.tl-scale{display:none}
}
@media(max-width:600px){
  .tl-grid.four,.tl-rail.horizontal,.tl-16-bottom .tl-grid{grid-template-columns:1fr}
  .tl-calendar{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.tl-pm{transition:none}}