/* ===== B. Timeline card ===== */
#timeline{--tc-a:#4A82F2;--tc-b:#1A4FD6;--tc-glow:rgba(26,79,214,.45);--tc-grid:color-mix(in srgb,var(--line) 85%,transparent)}
[data-theme=night] #timeline{--tc-a:#B3C9FB;--tc-b:#7395EC;--tc-glow:rgba(140,172,247,.45);--tc-grid:rgba(175,198,255,.10)}
#timeline .tl-time__wrap{padding-top:44px}
#timeline .tl-time__track{height:52px;margin-top:0;border-radius:16px;background-color:color-mix(in srgb,var(--subtle) 75%,var(--surface));background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 6px -2px rgba(15,34,55,.12)}
[data-theme=night] #timeline .tl-time__track{box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 8px -2px rgba(0,0,0,.5)}
#timeline-track>.tl-time__trip,#timeline-track>.sc-time-stay{top:9px;bottom:9px;min-width:6px;border:0;border-radius:9px;background:linear-gradient(180deg,var(--tc-a),var(--tc-b));box-shadow:0 6px 16px -6px var(--tc-glow),inset 0 1px 0 rgba(255,255,255,.35);transform-origin:left center;transition:filter .25s var(--ease-out),transform .25s var(--ease-out)}
#timeline-track>.tl-time__trip.uk-open{border-radius:9px 3px 3px 9px;background:repeating-linear-gradient(135deg,var(--tc-b) 0 5px,color-mix(in srgb,var(--tc-b) 40%,transparent) 5px 10px);box-shadow:inset -2px 0 0 var(--text),0 6px 16px -8px var(--tc-glow)}
#timeline-track>.is-hot{filter:brightness(1.12) saturate(1.1);transform:scaleY(1.14)}
.tl-example #timeline-track{opacity:.55}
#timeline .tl-time__mark{top:34px;height:72px;bottom:auto;width:2px;margin-left:-1px;border-radius:2px;background:var(--text);z-index:2}
#timeline .tl-time__mark::before{content:"";position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 18%,transparent)}
#timeline .tl-time__pin{top:0;padding:5px 11px;border-radius:999px;font-size:12px;line-height:1.3;font-weight:600;background:var(--text);color:var(--surface);box-shadow:0 8px 18px -10px rgba(15,34,55,.6)}
#timeline .tl-time__axis{margin-top:14px;height:22px}
#timeline .tl-time__axis span::before{content:"";position:absolute;top:-10px;left:50%;width:1px;height:6px;background:var(--muted);opacity:.55}
#timeline .tl-time__axis span:first-child::before{left:0}#timeline .tl-time__axis span:last-child::before{left:auto;right:0}
#timeline .tl-time__key{gap:8px;margin-top:16px}
#timeline .tl-time__key li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--subtle);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.2;color:var(--text)}
#timeline .tl-time__key i{margin:0;width:16px;height:10px;border-radius:4px}
#timeline .tl-time__key .k-pr{background:linear-gradient(180deg,var(--tc-a),var(--tc-b));box-shadow:0 3px 8px -3px var(--tc-glow)}
#timeline .tl-time__key .k-pre{background:repeating-linear-gradient(135deg,var(--tc-b) 0 3px,color-mix(in srgb,var(--tc-b) 40%,transparent) 3px 6px)}
#timeline .tl-time__key .uk-key-today,#timeline .tl-time__key .sc-today-key{width:3px!important;height:14px;border-radius:2px!important;background:var(--text)}
.tc-tip{position:absolute;z-index:4;left:0;top:0;padding:8px 12px;border-radius:12px;background:var(--text);color:var(--surface);font-size:13px;line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0;translate:0 4px;transition:opacity .18s var(--ease-out),translate .18s var(--ease-out);box-shadow:0 14px 28px -14px rgba(15,34,55,.6)}
.tc-tip b{display:block;font-weight:600}
.tc-tip.is-on{opacity:1;translate:0 0}
#timeline.tc-intro #timeline-track>*{animation:tc-grow .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes tc-grow{from{transform:scaleX(0);opacity:0}}
@media(max-width:640px){#timeline .tl-time__track{height:46px}#timeline .tl-time__mark{height:66px}#timeline .tl-time__key li{font-size:12.5px;padding:5px 10px 5px 8px}}
@media(prefers-reduced-motion:reduce){#timeline.tc-intro #timeline-track>*{animation:none!important}.tc-tip{transition:none}}

/* ===== B2. Presence timelines: presence = band, trips = cut-outs ===== */
#timeline.b2{--b2-a:#4A82F2;--b2-b:#1A4FD6;--b2-glow:rgba(26,79,214,.42);--b2-bg:color-mix(in srgb,var(--subtle) 75%,var(--surface));--b2-cut:color-mix(in srgb,var(--muted) 62%,transparent);--b2-etch:rgba(255,255,255,.34);--b2-warn:#D97706;--b2-warn-bg:#FFF3DF;--b2-warn-ink:#7A4300;--b2-track:56px;--b2-inset:10px}
[data-theme=night] #timeline.b2{--b2-a:#B3C9FB;--b2-b:#7395EC;--b2-glow:rgba(140,172,247,.4);--b2-etch:rgba(8,18,40,.3);--b2-warn:#F4B04F;--b2-warn-bg:#3B2A12;--b2-warn-ink:#FFD99A}
#timeline.b2 .tl-time__wrap{position:relative;padding-top:var(--b2-top,44px)}
#timeline.b2 .tl-time__track{height:var(--b2-track);margin-top:0;border-radius:18px;background:var(--b2-bg);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 6px -2px rgba(15,34,55,.12)}
[data-theme=night] #timeline.b2 .tl-time__track{box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 8px -2px rgba(0,0,0,.5)}
#timeline.b2 .tl-time__track>*{top:var(--b2-inset);bottom:var(--b2-inset);border-radius:12px;transform-origin:left center;transition:filter .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
#timeline.b2 .tl-time__track>:is(.tl-time__pr,.pr-time-present){background:linear-gradient(180deg,var(--b2-a),var(--b2-b));box-shadow:0 8px 18px -8px var(--b2-glow),inset 0 1px 0 rgba(255,255,255,.35)}
/* Canada: days before PR count half — hatched, lighter, outlined */
#timeline.b2 .tl-time__track>.tl-time__pre{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--b2-b) 46%,transparent) 0 5px,color-mix(in srgb,var(--b2-b) 16%,transparent) 5px 10px);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--b2-b) 50%,transparent)}
/* Future days (projected in the country): soft tint with a dashed edge */
#timeline.b2 .tl-time__track>:is(.pr-time-projected,.us-time-projected){background:linear-gradient(180deg,color-mix(in srgb,var(--b2-a) 26%,transparent),color-mix(in srgb,var(--b2-b) 18%,transparent));box-shadow:none;outline:1.5px dashed color-mix(in srgb,var(--b2-b) 55%,transparent);outline-offset:-1.5px}
[data-theme=night] #timeline.b2 .tl-time__track>:is(.pr-time-projected,.us-time-projected){background:color-mix(in srgb,var(--b2-a) 30%,transparent);outline-color:color-mix(in srgb,var(--b2-a) 60%,transparent)}
#timeline.b2 .tl-time__track>.b2-jr{border-top-right-radius:0;border-bottom-right-radius:0}
#timeline.b2 .tl-time__track>.b2-jl{border-top-left-radius:0;border-bottom-left-radius:0}
/* Trips: cut-outs through the band (track colour, dashed edge, a halo that separates them from the band) */
#timeline.b2 .tl-time__track>.tl-time__trip{top:calc(var(--b2-inset) - 4px);bottom:calc(var(--b2-inset) - 4px);min-width:6px;box-sizing:border-box;border-radius:8px;background:var(--b2-bg);border:1.5px dashed var(--b2-cut);box-shadow:0 0 0 2px var(--b2-bg);outline:0}
#timeline.b2 .tl-time__track>.tl-time__trip.us-time-risk{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--b2-warn) 34%,var(--b2-bg)) 0 4px,var(--b2-bg) 4px 8px);border:1.5px solid var(--b2-warn);box-shadow:0 0 0 2px var(--b2-bg),0 6px 16px -6px color-mix(in srgb,var(--b2-warn) 70%,transparent)}
#timeline.b2 .tl-time__track>.is-hot{filter:brightness(1.08) saturate(1.1)}
#timeline.b2 .tl-time__track>.tl-time__trip.is-hot{transform:scaleY(1.1);border-style:solid;border-color:var(--text)}
#timeline.b2 .tl-time__track>.tl-time__trip.us-time-risk.is-hot{border-color:var(--b2-warn)}
.b2-etch{position:absolute;z-index:1;pointer-events:none;background-repeat:no-repeat}
/* Marker lines (the page's own marks, restyled) and pills */
#timeline.b2 :is(.tl-time__mark,.pr-marker),#timeline.b2 .b2-line{position:absolute;z-index:2;top:calc(var(--b2-top,44px) - 8px)!important;bottom:auto!important;height:calc(var(--b2-track) + 16px)!important;width:2px!important;margin-left:-1px;border:0!important;border-radius:2px;background:var(--text)!important;transform:none!important;pointer-events:none}
#timeline.b2 :is(.tl-time__mark,.pr-marker,.b2-line)::before{content:"";position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:inherit;box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 16%,transparent)}
#timeline.b2 :is(#timeline-mark,.us-early,.b2-line--pr){background:var(--b2-b)!important}
#timeline.b2 :is(#timeline-mark,.us-early,.b2-line--pr)::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--b2-b) 22%,transparent)}
#timeline.b2 .pr-marker-return{background:repeating-linear-gradient(180deg,var(--b2-b) 0 5px,transparent 5px 9px)!important}
#timeline.b2 .pr-marker-return::before{background:var(--b2-b)}
#timeline.b2 #timeline-pin{visibility:hidden}
.b2-pins{position:absolute;z-index:3;left:0;right:0;top:0;height:0;pointer-events:none}
.b2-pill{position:absolute;top:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;background:var(--text);color:var(--surface);box-shadow:0 8px 18px -10px rgba(15,34,55,.6)}
.b2-pill svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.b2-pill--pr{background:linear-gradient(180deg,var(--b2-a),var(--b2-b));color:#fff}
[data-theme=night] .b2-pill--pr{color:#0B1F52}
.b2-pill--return,.b2-pill--early{background:var(--surface);color:var(--b2-b);box-shadow:inset 0 0 0 1.5px var(--b2-b),0 8px 18px -12px rgba(15,34,55,.5)}
.b2-pill--warn{background:var(--b2-warn-bg);color:var(--b2-warn-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b2-warn) 65%,transparent),0 8px 18px -12px color-mix(in srgb,var(--b2-warn) 80%,transparent)}
.tl-example .b2-pins,.tl-example .b2-line,.tl-example .b2-flags{opacity:.7}
.b2-flags{position:relative;height:0}
.b2-flags .b2-pill::before{content:"";position:absolute;top:-4px;left:var(--caret,50%);width:8px;height:8px;margin-left:-4px;background:inherit;box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--b2-warn) 65%,transparent);transform:rotate(45deg);border-radius:2px 0 0 0}
/* Ruler under the track: month ticks, taller year ticks, year labels where the page has none */
.b2-ruler{position:relative;height:12px;margin-top:6px}
.b2-ruler.has-years{height:26px}
.b2-ruler i{position:absolute;top:0;width:1px;height:4px;background:var(--muted);opacity:.38}
.b2-ruler i.y{height:9px;opacity:.8}
.b2-ruler b{position:absolute;top:11px;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#timeline.b2 .tl-time__axis{margin-top:2px}
#timeline.b2 .pr-axis{margin-top:2px}
/* Legend chips */
#timeline.b2 .tl-time__key{gap:8px;margin-top:16px}
#timeline.b2 .tl-time__key li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--subtle);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.2;color:var(--text)}
#timeline.b2 .tl-time__key i{margin:0;width:18px;height:10px;border-radius:4px;box-sizing:border-box}
#timeline.b2 .tl-time__key .k-pr{background:linear-gradient(180deg,var(--b2-a),var(--b2-b));box-shadow:0 3px 8px -3px var(--b2-glow)}
#timeline.b2 .tl-time__key .k-trip{background:var(--b2-bg);border:1.5px dashed var(--b2-cut);box-shadow:none}
.b2--canada .tl-time__key .k-pre{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--b2-b) 55%,transparent) 0 3px,color-mix(in srgb,var(--b2-b) 18%,transparent) 3px 6px)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b2-b) 50%,transparent)}
.b2--canada-pr .tl-time__key .k-pre,#timeline.b2 .tl-time__key .us-projected-key{background:color-mix(in srgb,var(--b2-a) 24%,transparent)!important;border:1.5px dashed color-mix(in srgb,var(--b2-b) 55%,transparent);box-shadow:none}
#timeline.b2 .tl-time__key .us-risk-key{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--b2-warn) 34%,var(--b2-bg)) 0 3px,var(--b2-bg) 3px 6px)!important;border:1.5px solid var(--b2-warn);box-shadow:none}
#timeline.b2 .tl-time__key :is(.pr-key-today,.us-today-key){width:3px!important;height:14px;border-radius:2px!important;background:var(--text)}
#timeline.b2 .tl-time__key .us-early-key{width:3px!important;height:14px;border-radius:2px!important;background:var(--b2-b)}
#timeline.b2 .tl-time__key .pr-key-return{width:3px!important;height:14px;border:0;border-radius:0!important;background:repeating-linear-gradient(180deg,var(--b2-b) 0 3px,transparent 3px 5px)}
/* Tooltip */
.b2-tip{position:absolute;z-index:5;left:0;top:0;width:max-content;max-width:min(320px,100%);padding:8px 12px;border-radius:12px;background:var(--text);color:var(--surface);font-size:13px;line-height:1.4;pointer-events:none;opacity:0;translate:0 4px;transition:opacity .18s var(--ease-out),translate .18s var(--ease-out);box-shadow:0 14px 28px -14px rgba(15,34,55,.6)}
.b2-tip b{display:block;font-weight:600}
.b2-tip span{display:block}
.b2-tip .w{margin-top:4px;padding-top:4px;border-top:1px solid color-mix(in srgb,var(--surface) 25%,transparent);color:color-mix(in srgb,var(--b2-warn) 55%,var(--surface))}
.b2-tip.is-on{opacity:1;translate:0 0}
/* One-time grow-in: band first, then the trips cut in */
#timeline.b2.b2-intro .tl-time__track>:not(.tl-time__trip){animation:b2-grow .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 140ms + 100ms)}
#timeline.b2.b2-intro .tl-time__track>.tl-time__trip{animation:b2-cut .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 520ms)}
#timeline.b2.b2-intro .b2-pill{animation:b2-pop .5s var(--ease-out) both;animation-delay:.75s}
@keyframes b2-grow{from{transform:scaleX(0);opacity:0}}
@keyframes b2-cut{from{transform:scaleY(0);opacity:0}}
@keyframes b2-pop{from{opacity:0;transform:translateY(6px)}}
@media(min-width:641px){.b2-ruler.dup-years{height:12px}.b2-ruler.dup-years b{display:none}}
@media(max-width:640px){
  #timeline.b2{--b2-track:48px;--b2-inset:8px}
  #timeline.b2 .tl-time__key li{font-size:12.5px;padding:5px 10px 5px 8px}
  .b2-pill{height:24px;padding:0 9px;font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){#timeline.b2.b2-intro *{animation:none!important}.b2-tip,#timeline.b2 .tl-time__track>*{transition:none}}

/* Keyboard targets retain the inset paint, with an outline inside the clipped track. */
#timeline .tl-time__track>[tabindex]{cursor:pointer}
#timeline .tl-time__track>[tabindex]:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.tc-tip{white-space:normal;width:max-content;max-width:min(320px,100%)}
/* The UK and Schengen windows always end on the date you check, so the "Today" pill sits at the right end: anchor it
   to that edge instead of centring it on the marker (centred, it hung ~8px outside the card on phones). */
#timeline .tl-time__pin{left:auto!important;right:-6px;transform:none!important}
/* A hidden timeline "Example" tag must not keep its row (it left an empty band above the heading). */
#timeline>.tl-example-tag[hidden]{display:none!important}
