/* ============================================================================
   vespa-esmigration-reader: the reading modes of "Elasticsearch to Vespa
   migration brief". doc.css is the shared design system and is byte-identical
   across every reader. Everything this document needs that the others do not
   is here. One mode is new to the factory: spine. The panel is the discovery
   reader's, the same classes and rules, so the series reads as one.
   ========================================================================= */

:root{
  --split-gap:clamp(1.75rem,4vw,4.5rem);
  /* EQUAL INSETS. Every framed box takes ONE of these on all four sides. */
  --pp:clamp(1.25rem,1rem + 1.4vw,2.25rem);
}

.prose p,.em-items p,.em-res p,.em-pull p{overflow-wrap:break-word}
p,li,figcaption{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
.em-nowrap{white-space:nowrap}

.figcap{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;line-height:1.5;
  color:var(--on-ground-soft);max-width:48rem;
}

/* LINKS ON A LIGHT GROUND ARE INK, NOT THE LINK BLUE (#4A86E8 is 3.58:1 on
   white). Ink keeps doc.css's underline. On ink the links are doc.css green. */
.act--paper .prose a,.act--mist .prose a,
.act--paper .link,.act--mist .link,.dv-panel .link{color:var(--ink)}
.link:focus-visible,.sp-link:focus-visible,.em-cta__a:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}

/* ============================== the diagram =============================== */
/* Two layouts. Wide from 48rem (the act is at least 691px wide there, so a
   16-unit label is 11.06px at the least), tall below (15 units of 360). */
.dfig{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-width:0}
.dfig__art svg{width:100%;height:auto}
.dg{border-radius:14px}
.dg--tall{display:none}
@media (max-width:47.99rem){
  .dg--wide{display:none}
  .dg--tall{display:block;max-width:28rem;margin-inline:auto}
}
@media (max-width:47.99rem) and (orientation:landscape) and (max-height:30rem){
  .dg--tall{max-width:24rem}
}
.em-fig{margin-block:calc(var(--u)*2)}

/* ============================== 0 the cover =============================== */
.em-cover{justify-content:space-between;gap:calc(var(--u) * 3)}
.em-cover__mast{max-width:var(--max)}
.em-cover__h1{color:var(--paper);max-width:15ch}
/* The doc's own first sentence of its overview, quoted as the standfirst. */
.em-blurb{max-width:var(--max);margin-top:calc(var(--u) * 2);display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.em-blurb__p{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.35;letter-spacing:-.008em;color:var(--paper-72);max-width:34rem}
/* The seven steps as a shape: seven nodes on one line, the first lit.
   Decorative and aria-hidden, no text. */
.em-deco{width:min(19rem,72%);height:auto;overflow:visible}
.em-deco__l{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.5;vector-effect:non-scaling-stroke}
.em-deco__n{fill:var(--ink);stroke:rgba(255,255,255,.62);stroke-width:1.5;vector-effect:non-scaling-stroke}
.em-deco__n--on{fill:var(--green);stroke:var(--green)}
/* COVER MOTION (v2, the approved prototype): the line draws left to right, then
   each step lights green in turn (--k, its place, from the pipeline), and the
   seventh ends slightly larger. The line's pathLength="1" makes a dash of 1 the
   whole line at any width. Reduced motion shows the same final state at once. */
.em-deco__l{stroke-dasharray:1;stroke-dashoffset:1;animation:d-draw 1.6s cubic-bezier(.45,0,.2,1) forwards .5s}
.em-deco__n{animation:d-lit .35s ease forwards;animation-delay:calc(.5s + var(--k) * .26s)}
.em-deco__n:last-of-type{transform-box:fill-box;transform-origin:center;animation:d-lit .35s ease forwards calc(.5s + var(--k) * .26s),d-last .6s cubic-bezier(.22,1,.36,1) forwards calc(.5s + var(--k) * .26s)}
@keyframes d-draw{to{stroke-dashoffset:0}}
@keyframes d-lit{to{fill:var(--green);stroke:var(--green)}}
@keyframes d-last{50%{transform:scale(1.5)}to{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .em-deco__l{animation:none;stroke-dashoffset:0}
  .em-deco__n{animation:none;fill:var(--green);stroke:var(--green)}
  .em-deco__n:last-of-type{animation:none;transform:scale(1.25)}
}
/* ONE COMPOSED COLUMN ON A PORTRAIT PHONE (the agents reader's rule): the free
   height is shared above and below the column, never inside it. */
@media (max-width:47.99rem) and (orientation:portrait){
  .em-cover{justify-content:center}
}
/* A SHORT DESK SEES THE WHOLE COVER. */
@media (min-width:48rem) and (max-height:47.5rem) and (orientation:landscape) and (min-height:30.01rem){
  .em-cover{padding-block:calc(2.5rem + 2vh);gap:calc(var(--u) * 2)}
  .em-cover__mast{gap:calc(var(--u) * 2)}
  .em-cover__h1{font-size:min(var(--t-display), 10vh, 12vw)}
}
@media (orientation:landscape) and (max-height:30rem){
  .em-cover{padding-top:calc(3.4rem + var(--u));padding-bottom:calc(var(--u) * 2);gap:1.1rem}
  .em-cover .wordmark{height:1.5rem}
  .em-cover__mast{gap:1rem}
  .em-cover__h1{font-size:2.2rem;max-width:none}
  .em-blurb{margin-top:0;gap:calc(var(--u) * 1.5)}
  .em-blurb__p{font-size:1.05rem;line-height:1.4;max-width:none}
  .em-deco{width:min(14rem,50%)}
}

/* ============================== the parts ================================= */
/* A part: its head sticky beside its text from 64rem (doc.css .pillar). */
.parts{display:flex;flex-direction:column}
.part{border-top:1px solid var(--hair);padding-top:calc(var(--u)*4);margin-top:calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*4)}
@media (min-width:64rem){.part__head{align-self:start}}
.pillar__title{font-size:var(--t-section);line-height:1.2;margin-top:0}

/* ============================== 1 argument ================================ */
/* THE PULL QUOTE. Vinted's words, its label above it as the attribution and
   the link to the post, the colon leading into the quote as the doc sets it. */
.em-pull{border-left:3px solid var(--green);padding-left:calc(var(--u) * 2.5);max-width:44rem;display:flex;flex-direction:column;gap:calc(var(--u) * 1.5)}
.em-pull__by{font-family:var(--mono);font-size:max(.75rem,var(--t-mono));letter-spacing:.04em;line-height:1.5;color:var(--on-ground-soft)}
.em-pull__q{margin:0}
.em-pull__q p{font-family:var(--serif);font-size:clamp(1.08rem,.95rem + .55vw,1.42rem);line-height:1.6}

/* ============================== 2 turn ==================================== */
/* The plate: How Vespa handles these workloads, ONE padding on four sides. */
.em-plate{padding:var(--pp)}
.em-plate__p{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.38;letter-spacing:-.008em;color:var(--paper)}

/* ============================== 3 spine =================================== */
/* NEW MODE. The seven steps as the page's spine. On a desk (from 64rem) the
   steps sit in the page's text column and a step rail stands in the head
   column, sticky, naming all seven, the current one lit, under "Step n of 7"
   (spine.js toggles which). Below 64rem the rail is a plain index of the
   seven at the top of the steps, every entry a 44px target, and the marker
   moves into the page rail as its second line with seven ticks. */
.sp{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*3)}
@media (min-width:64rem){
  .sp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--split-gap);align-items:start}
  .sp-rail{position:sticky;top:clamp(4.5rem,12vh,7rem);align-self:start}
}
.sp-mark{display:none;font-family:var(--mono);font-size:max(.75rem,var(--t-mono));letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);margin-bottom:calc(var(--u)*1.5)}
@media (min-width:64rem){.sp[data-live] .sp-mark{display:block}}
.sp-list{display:flex;flex-direction:column;position:relative}
.sp-li{position:relative}
/* the spine itself: a hairline through the dots */
.sp-li::before{content:"";position:absolute;left:.4375rem;top:0;bottom:0;width:1px;background:var(--ink-14)}
.sp-li:first-child::before{top:50%}
.sp-li:last-child::before{bottom:50%}
.sp-link{
  position:relative;display:grid;grid-template-columns:1.5rem minmax(0,1fr);align-items:center;gap:.6rem;
  min-height:2.75rem;padding-block:.35rem;text-decoration:none;
  color:var(--on-ground-soft);font-size:var(--t-small);line-height:1.3;
}
.sp-dot{width:.875rem;height:.875rem;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink-38);position:relative;z-index:1}
.sp-link:hover .sp-t{text-decoration:underline;text-underline-offset:.18em}
.sp-li[data-state="done"] .sp-dot{background:var(--green-ink);border-color:var(--green-ink)}
.sp-li[data-state="now"] .sp-dot{background:var(--green);border-color:var(--green-ink);box-shadow:0 0 0 4px var(--green-22)}
.sp-li[data-state="now"] .sp-link{color:var(--ink);font-weight:600}
@media (min-width:64rem){
  .sp-link{min-height:0;padding-block:.5rem;font-size:var(--t-label)}
}
.sp-steps{display:flex;flex-direction:column;min-width:0}
.sp-step{display:flex;flex-direction:column;gap:calc(var(--u)*2);border-top:1px solid var(--hair);padding-block:calc(var(--u)*4)}
.sp-step:first-child{border-top:0;padding-top:0}
@media (max-width:63.99rem){.sp-step:first-child{border-top:1px solid var(--hair);padding-top:calc(var(--u)*4)}}
.sp-step__h{font-family:var(--sans-display);font-size:min(var(--t-section),1.9rem);line-height:1.2;letter-spacing:-.012em;font-weight:500}
.em-listblock{gap:calc(var(--u)*1.25)}
/* the next step's own rule closes a step's list: no second hairline under it */
.sp-step .register li:last-child{border-bottom:0}
/* the phone marker, the page rail's second line while the steps are on screen */
.sp-bar{display:none}
@media (max-width:63.99rem){
  .sp-bar[data-on]{
    display:flex;align-items:center;gap:calc(var(--u)*1.5);
    max-width:var(--max);margin:calc(var(--u)*.75) auto 0;
  }
}
.sp-bar__mark{font-family:var(--mono);font-size:max(.75rem,var(--t-mono));letter-spacing:.1em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.sp-bar__ticks{display:flex;gap:4px;flex:1 1 auto}
.sp-tick{display:block;flex:1 1 0;height:4px;border-radius:2px;background:var(--paper-14)}
.sp-tick[data-on="1"]{background:var(--green)}

/* ============================== 4 list ==================================== */
.em-lead{font-weight:500}
.register{display:flex;flex-direction:column}
.register li{border-top:1px solid var(--hair);padding:calc(var(--u)*1.25) 0}
.register li:last-child{border-bottom:1px solid var(--hair)}
/* a list item's own label ("Architecture:"), set apart IN PLACE, not bold
   markup: the doc bolds nothing */
.em-k{font-weight:600;color:var(--on-ground)}
.em-items p{font-size:var(--t-body);line-height:1.55}

/* ================================ panel =================================== */
/* THE DISCOVERY READER'S PANEL, its rules unchanged (vespa-discovery-reader
   modes.css), so the series' partner panels read as one component. The doc's
   own sidebar, its "[Panel]" marker: a framed box on the brand's mint tint
   under a green rule, at the act's full width, its heading and prose on the
   page's spine, one padding token on every side. The heading here keeps the
   doc's level, h3, at the size the discovery panel sets its h2. */
.dv-panelact{padding-block:calc(var(--shelf) * .75)}
.dv-panel{
  --pp:clamp(1.25rem,1rem + 2.6vw,3.25rem);
  display:flex;flex-direction:column;gap:calc(var(--u) * 3);
  background:var(--green-22);border-radius:16px;border-top:4px solid var(--green);
  padding:var(--pp);
}
@media (min-width:64rem){
  .dv-panel > .split{
    grid-template-columns:minmax(0,calc((100% + 2 * var(--pp) - var(--split-gap)) * 5 / 12 - var(--pp))) minmax(0,1fr);
  }
  .dv-panel .title{font-size:min(var(--t-section), 2.25rem)}
}
/* Under the split, as the discovery panel sets what it holds: the two
   services side by side from 48rem, each under its own rule, then the call to
   action. */
.em-services{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*2)}
@media (min-width:48rem){.em-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*3)}}
.em-services li{border-top:1px solid var(--ink-38);padding-top:calc(var(--u)*1.25)}
.em-services .link{font-weight:600}
/* the call to action: the doc's line as a button-like link, 44px or taller */
.em-cta{margin:0}
.em-cta__a{
  display:inline-flex;align-items:center;min-height:2.75rem;padding:.55em 1.15em;border-radius:10px;
  background:var(--green-ink);color:var(--paper);text-decoration:none;
  font-family:var(--sans-display);font-weight:500;font-size:var(--t-body);line-height:1.25;
}
.em-cta__a:hover{background:var(--ink)}
.em-cta--off{font-family:var(--sans-display);font-weight:500;font-size:var(--t-body)}

/* ============================== 7 list ==================================== */
.em-res p{font-size:var(--t-small);line-height:1.5}
.em-res .em-k{display:block;font-family:var(--mono);font-weight:400;font-size:max(.75rem,var(--t-mono));letter-spacing:.06em;text-transform:uppercase;color:var(--on-ground-mute);margin-bottom:.2em}

/* ============================== 8 close =================================== */
.close__mark{height:3rem;width:3rem;align-self:flex-start}
.em-ask__cta{font-family:var(--sans-display);font-size:var(--t-deck)}

/* ============================ the type floor, last ======================== */
/* The shared --t-micro is 10.56px at its floor. Lifted here, last, so every
   rule above that sets these runs to it loses. doc.css stays byte-identical. */
.cover__foot,.colophon{font-size:max(.6875rem, var(--t-micro))}
.figcap{font-size:max(.75rem, var(--t-micro))}
/* HEADINGS WITH NO WORD ALONE: each heading's last two words are kept
   together by a span inside the one heading (doc_esmigration.hk). Act titles
   two steps down the series' scale in the 5fr head column; on phones the size
   follows the screen's width. */
.act .title{font-size:min(var(--t-title), 2.1rem, 2.7vw)}
@media (max-width:63.99rem){.act .title{font-size:min(var(--t-title), 2.4rem, 7vw)}}
@media (min-width:64rem){
  .pillar__title{font-size:min(var(--t-section), 1.75rem)}
}