/* Era by Eon - the home page, and only the home page.

   The console's own sheets are graphite over a fixed sunset (era.css); this is
   the dark pixel-art city the front door is drawn as. Everything here hangs off
   `body.retro`, so era.css keeps every other page exactly as it was and the two
   palettes never meet. Loaded after era.css, which it overrides rather than
   replaces: the sign-in dialog and the toasts app.js raises are still dressed
   by era.css when this page opens one.

   No third-party script or asset host survives the CSP, so the art is served
   from /assets, the icons are inline SVG, and the only remote origin is the
   Google font the whole site already uses. */

body.retro{
  --bg:#1b2531;
  /* The canvas the pixel art is played on, near-black so the art can be vivid
     against it the way a CRT is: the hero, the city section and the last word are
     printed on this, the rest of the sheet still on --bg. It is its own name
     rather than era.css's --ink, which is that sheet's foreground and is read by
     the sign-in dialog and the toasts this page also prints. */
  --canvas:#090c11;
  --panel:rgba(11,20,30,.55);
  --panel-solid:#232c3a;
  --edge:rgba(237,234,242,.18);
  --paper:#EDEAF2;
  --paper-2:#d8d2de;
  --paper-3:#ded8e4;
  --muted:#b9c0cb;
  --muted-2:#c6ccd6;
  --faint:#8a93a0;
  --ember:#DE6D2B;
  --ember-hi:#E28550;
  --ember-soft:#E0A87F;
  --ember-line:#CF8657;
  --on-ember:#02151E;
  /* The console's accent, repainted rather than left to cut across the art:
     era.css draws the scroll bar, the focus ring and its inputs in neon. */
  --orange:#DE6D2B;
  --action:#DE6D2B;
  --on-action:#02151E;
  --pixel:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --prose:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --wide:1160px;
  --ease:150ms ease-out;

  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--paper);
  /* Everything the page says is set in the sans: the monospace face is kept for
     the things that are read as data rather than as sentences - the kickers, the
     dates and counts, the commands, the nav. */
  font-family:var(--prose);
  font-size:15px;
  line-height:1.65;
}
/* The paper grain era.css lays over every sheet fights pixel art: a fractal
   noise over a 1:1 pixel grid is the one thing that makes it look resampled. */
body.retro::after{content:none}
body.retro a{color:var(--ember-soft);text-decoration:none;transition:color var(--ease)}
body.retro a:hover{color:var(--ember)}
body.retro img{display:block;max-width:100%}
/* Every piece of the art is drawn at its own resolution and blown up. */
body.retro img,.rl-art{image-rendering:pixelated}

.rl-page{min-height:100vh;background:var(--bg)}
.rl-wide{max-width:var(--wide);margin:0 auto;padding-left:32px;padding-right:32px}

/* ---------- hero: bare graphite, and nothing behind the words ---------- */
/* The sheet is allowed one piece of glowing pixel art and it spends it on the
   city below, so the hero is the canvas alone: the headline, the sentence and
   the two doors stand on unbroken near-black, which the city section continues. */
.rl-hero{position:relative;min-height:auto;background:var(--canvas)}

/* The second half of the test frame: the city section on the same near-black
   canvas, resolving back to the sheet's navy under the caption. */
.rl-crt{position:relative;background:var(--canvas)}
.rl-crt::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,12,17,0) 0%,var(--bg) 100%);
}
.rl-crt>*{position:relative;z-index:1}

/* The console's own nav (era.js), dressed for the art it stands on. It is the
   same markup every other sheet prints, so an account still gets its email, its
   pages and the menu that signs it out; only the palette is this page's. */
body.retro .rl-nav{
  position:relative;z-index:20;max-width:var(--wide);margin:0 auto;padding:24px 32px;
  background:none;border:0;box-shadow:none;gap:24px;font-family:var(--pixel);
}
body.retro .rl-nav .brand{font-family:var(--pixel);font-weight:700;font-size:26px;letter-spacing:-.5px;color:var(--paper)}
body.retro .rl-nav .navlink{font-family:var(--pixel);font-size:12px;letter-spacing:.12em;color:var(--paper-2)}
body.retro .rl-nav .navlink:hover{color:#fff}
body.retro .rl-nav .navlink.on{color:var(--ember-soft)}
/* The links follow the wordmark on this sheet rather than centring between it
   and the side, which is where the design puts them. */
@media(min-width:768px){body.retro .rl-nav .nav-links{margin-left:14px;margin-right:auto;gap:22px}}
body.retro .rl-nav .nav-links{border-top-color:var(--edge)}
body.retro .rl-nav .nav-side{gap:16px}
/* Written against the element as well as the class: this sheet paints its links
   that way, and a class alone would lose to it and print the label in the fill
   it is standing on. */
body.retro .rl-nav .nav-side a.btn-cta,body.retro .rl-nav .nav-side a.btn-cta:hover{color:var(--on-action)}
body.retro .rl-nav .nav-side button.btn{
  background:rgba(20,20,32,.4);color:var(--paper);border:1px solid var(--edge);border-radius:8px;
  box-shadow:none;
}
body.retro .rl-nav .nav-side button.btn:hover{background:rgba(20,20,32,.62);color:#fff;transform:none;box-shadow:none}
body.retro .rl-nav .nav-side button.btn:active{transform:none}
body.retro .account-dropdown{background:#202936;border:1px solid var(--edge);border-radius:8px;box-shadow:0 12px 28px -12px rgba(0,0,0,.8)}
body.retro .account-dropdown a,body.retro .account-dropdown button{font-family:var(--pixel);color:var(--paper-2);border-radius:6px}
body.retro .account-dropdown a:hover,body.retro .account-dropdown button:hover{background:rgba(222,109,43,.16);color:var(--ember-soft)}

.rl-hero-copy{position:relative;z-index:1;max-width:var(--wide);margin:0 auto;padding:84px 32px 96px}
.rl-h1{
  font-weight:700;font-size:clamp(30px,4vw,48px);line-height:1.3;letter-spacing:-1px;
  margin:0;max-width:700px;color:var(--paper);
}
.rl-hero-lead{
  font-size:14.5px;line-height:1.95;color:var(--paper-3);max-width:108ch;margin:30px 0 46px;
}
.rl-hero-sub{display:flex;align-items:flex-start;gap:10px;font-family:var(--pixel);font-size:12px;line-height:1.7;font-weight:400;color:var(--ember);margin:32px 0 0 4px}
.rl-hero-sub .rl-seal{
  width:16px;height:16px;flex:none;margin-top:.2em;
  fill:none;stroke:var(--ember);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;
}
.rl-dot{color:var(--ember)}
.rl-doors{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* The badge sits beside the door on one row, wrapping under it on narrow screens;
   it carries an ember mark so it reads as a claim. */
.rl-note{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.rl-note li{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--pixel);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--paper-2);padding:8px 14px;border-radius:999px;
  border:1px solid rgba(222,109,43,.35);background:rgba(222,109,43,.08);
}
.rl-note li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none;
}

/* ---------- buttons: colour moves, nothing lifts ---------- */
.rl-btn{
  display:inline-flex;align-items:center;gap:10px;font-size:14.5px;
  padding:13px 24px;border-radius:8px;cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
/* Prefixed with the body class: a link's own colour above is written against an
   element and a class, so a class alone would lose to it and paint the label in
   the fill it is standing on. */
body.retro .rl-btn{background:var(--ember);color:var(--on-ember);font-weight:700;border:1px solid rgba(2,21,30,.4);box-shadow:0 2px 0 rgba(2,21,30,.45)}
body.retro .rl-btn:hover{background:var(--ember-hi);color:var(--on-ember)}
/* The secondary door beside a primary one: outlined, not filled. */
body.retro .rl-btn.rl-btn-ghost{background:transparent;color:var(--paper);border-color:var(--edge);box-shadow:none}
body.retro .rl-btn.rl-btn-ghost:hover{background:transparent;color:var(--paper);border-color:var(--ember-line)}
.rl-btn.sm{font-size:13.5px;padding:10px 20px;white-space:nowrap}

/* ---------- the note a driven browser is shown ---------- */
/* Printed on the canvas rather than the sheet: a driven browser is shown this
   note between the hero and the city, and it would otherwise cut a navy strip
   across the one unbroken near-black both of them stand on. */
.rl-agent{background:var(--canvas);padding-top:40px;padding-bottom:16px;display:flex;flex-direction:column;gap:12px}
.rl-agent p{font-size:13px;line-height:1.75;color:var(--muted-2);max-width:880px;margin:0}

/* ---------- research partners: a row of frames under the hero ---------- */
/* Printed on the hero's canvas, the full width of the sheet, so the hero runs on
   into it. A slot is the dashed tile the coming-soon strip draws; a partner not
   yet announced is a padlock in it, low enough in contrast to read as held. */
.rl-partners{padding:24px 0 88px}
.rl-partners .rl-eyebrow{display:block;text-align:center}
.rl-partners-sub{margin:8px 0 20px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft)}
.rl-partners-sub[hidden]+.rl-partners-grid{margin-top:28px}
.rl-partners-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.rl-partners-grid li{
  flex:0 0 calc((100% - 6*16px)/7);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:1px dashed var(--rule);border-radius:12px;transition:border-color var(--ease),background var(--ease);
}
.rl-partners-grid li:hover{border-color:rgba(222,109,43,.45)}
.rl-partners-grid a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.rl-partners-grid li img{
  height:auto;max-width:80%;max-height:60%;object-fit:contain;image-rendering:auto;visibility:hidden;
  filter:grayscale(1) brightness(0) invert(1);opacity:.72;transition:filter var(--ease),opacity var(--ease);
}
.rl-partners-grid li img.is-sized{visibility:visible}
.rl-partners-grid li:hover img{filter:none;opacity:1}
.rl-partners-locked{background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(237,234,242,.025) 6px 7px)}
.rl-partners-lock{width:24px;height:24px;fill:var(--ink-soft);opacity:.28;shape-rendering:crispEdges}
@media(max-width:860px){.rl-partners-grid li{flex-basis:calc((100% - 3*16px)/4)}}
@media(max-width:480px){.rl-partners-grid{gap:12px}.rl-partners-grid li{flex-basis:calc((100% - 2*12px)/3)}}
@media(max-width:720px){.rl-partners{padding:16px 0 56px}}

/* ---------- the systems diagram ---------- */
/* Clean background between the hero's horizon and the city the page is about,
   so the far skyline reads as distance and this one stays the centrepiece. */
.rl-diagram{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(320px,3.1fr) minmax(150px,.8fr);gap:40px;align-items:center;margin-top:64px;margin-bottom:32px}
.rl-col{display:flex;flex-direction:column;gap:16px}
.rl-tile{
  display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:12.5px;
  border:1px solid var(--edge);border-radius:12px;background:var(--panel);
  transition:border-color var(--ease),background var(--ease);
}
.rl-tile:hover{border-color:rgba(222,109,43,.5);background:rgba(11,20,30,.75)}
.rl-chip{width:10px;height:10px;border-radius:3px;flex:none}
/* The art carries its own edge, so no frame is drawn around it. The screen
   blend and the grade sit here rather than on the image, so the patch below
   composites with the art first and the two go onto the canvas as one. */
.rl-frame{
  position:relative;overflow:hidden;
  mix-blend-mode:screen;filter:saturate(1.25) contrast(1.5);
}
/* The art is the design's own file, and it carries a plaque reading YOUR
   SIMULATED COMPANY across x 138-256, y 48-124 of its 386x200 - the heading the
   page now prints above the art. Two more copies of the same file cover it, each
   slid sideways by 118 of its own pixels: one brings the city from the plaque's
   left, one from its right, and they meet under its middle. Nothing moves
   vertically, so the ground, the kerbs and the horizon run through unbroken, and
   each copy's own plaque lands outside the window it is feathered into. */
.rl-frame::before,.rl-frame::after{
  content:"";position:absolute;top:0;bottom:0;pointer-events:none;
  background:url("assets/city.png?v=7") 0 0/100% 100% no-repeat;
  image-rendering:pixelated;
}
.rl-frame::before{
  left:30.57%;right:-30.57%;
  -webkit-mask-image:radial-gradient(22% 34% at 14% 43%,#000 60%,transparent 100%);
  mask-image:radial-gradient(22% 34% at 14% 43%,#000 60%,transparent 100%);
}
.rl-frame::after{
  left:-30.57%;right:30.57%;
  -webkit-mask-image:radial-gradient(24% 34% at 86% 43%,#000 60%,transparent 100%);
  mask-image:radial-gradient(24% 34% at 86% 43%,#000 60%,transparent 100%);
}
/* Under the whole diagram rather than under the art, so the sentence has the
   sheet's width and stays on one line. */
.rl-caption{margin:30px 0 0;text-align:center;font-size:12.5px;line-height:1.7;color:var(--muted)}
/* The art is printed on its own dark sky, lighter than this canvas, so it is
   screened onto it - the sky falls away into the black and the lit windows are
   what is left - and faded out on every side so no rectangle survives.
   The fade is on the frame, so the patch fades with the art it covers. */
.rl-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:386/200}
.rl-frame{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%),
              linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%),
             linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* The systems still being built: the same tile, drawn open. */
.rl-soons{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:16px}
.rl-soon{border-style:dashed;background:none;color:var(--faint);letter-spacing:.04em;flex:none}
.rl-soon:hover{border-color:rgba(222,109,43,.45);background:none;color:var(--muted)}
/* The strip runs one full copy of the fleet out of frame while its twin takes
   its place, so the loop has no seam and no end. It is faded at both edges
   rather than cut, and it holds still for a reader who asked for stillness. */
.rl-strip{
  width:100%;overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.rl-track{display:flex;width:max-content;animation:rl-marquee var(--run,60s) linear infinite}
.rl-strip:hover .rl-track{animation-play-state:paused}
.rl-run{display:flex;gap:14px;padding-right:14px}
@keyframes rl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .rl-track{animation:none}
  .rl-strip{overflow-x:auto}
}

/* ---------- getting started: two paths, four things they both end in ---------- */
/* Every kicker on the sheet stands the same distance off what it names. */
.rl-flowhead,.rl-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:52px}
/* The console asks the questions; the terminal takes the same answers as flags.
   Two boxes of equal weight, because either one gets the reader a company - the
   left is the one without an install, so it is the one the page reads first. */
.rl-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
.rl-path{
  display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px;
  border:1px solid var(--edge);border-radius:12px;background:var(--panel);
}
.rl-nodeno{font-family:var(--pixel);font-size:11px;letter-spacing:2.5px;color:var(--ember);font-weight:700}
.rl-path h3{font-weight:700;font-size:15px;margin:0;color:var(--paper)}
/* One body per box, growing to fill it, so both doors stand on the same line. */
.rl-pathbody{display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.rl-pathlead{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
/* The terminal's three steps: a label, then the command it names. */
.rl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rl-steps>li{display:flex;flex-direction:column;gap:8px}
.rl-step{font-family:var(--pixel);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.rl-stephead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.rl-clients{display:flex;flex-wrap:wrap;gap:4px}
.rl-clients [role=tab]{
  font-family:var(--pixel);font-size:10.5px;letter-spacing:1px;
  padding:4px 10px;border-radius:999px;border:1px solid transparent;background:none;
  color:var(--faint);cursor:pointer;transition:color var(--ease),border-color var(--ease);
}
.rl-clients [role=tab]:hover{color:var(--paper)}
.rl-clients [role=tab][aria-selected=true]{color:var(--paper);border-color:var(--edge)}
/* The four client commands share one cell, so the box is as tall as the tallest
   of them whichever is showing, and switching moves nothing below it. */
.rl-clientcmds{display:grid}
.rl-clientcmds>.rl-cmd{grid-area:1/1;width:100%}
.rl-clientcmds>.rl-cmd[aria-hidden=true]{visibility:hidden;pointer-events:none}
.rl-pathnote{margin:0;font-size:12.5px;line-height:1.6;color:var(--faint)}
.rl-pathnote code{font-size:11px}
/* The five questions, named in the face they are answered in: data, so mono. */
.rl-asks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:2px 0 0;padding:0}
.rl-asks li{
  font-family:var(--pixel);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--edge);border-radius:999px;padding:5px 11px;
}
/* Both doors sit on the floor of their box, whatever stands above them. */
.rl-path .rl-btn{align-self:flex-start;margin-top:auto}
/* Label and command on one row, under the terminal column: the label never
   wraps, so the command reads as the end of the sentence. */
.rl-flowfoot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:28px 0 0;font-size:12.5px;color:var(--muted);
  width:calc(50% - 14px);margin-left:auto;
}
.rl-flowfoot>span{
  white-space:nowrap;
  font-family:var(--pixel);font-size:11.5px;letter-spacing:1.2px;
}
/* The block is the copy target - `.cmds.copy` in era.css already reset the
   button - and it is a plain code block: text on a darker ground, no frame of
   its own and no decoration beyond the word that says it can be taken. */
body.retro .rl-cmd{
  display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-height:74px;box-sizing:border-box;
  font-family:var(--pixel);font-size:11.5px;line-height:1.7;color:var(--muted-2);
  background:rgba(4,10,17,.62);border-radius:8px;
  transition:color var(--ease);
}
body.retro .rl-cmd:hover{color:var(--paper)}
body.retro .rl-cmd>span{padding-left:14px;text-indent:-14px}
body.retro .rl-cmd .tag-copy{
  align-self:flex-start;margin-top:auto;padding:0;text-indent:0;
  font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  background:none;border:0;border-radius:0;
  color:var(--ember-soft);opacity:.6;transition:opacity var(--ease);
}
body.retro .rl-cmd:hover .tag-copy,body.retro .rl-cmd:focus-visible .tag-copy{opacity:1}
body.retro .rl-cmd.done .tag-copy{background:none;color:var(--ember);opacity:1}
body.retro .rl-cmd.warn .tag-copy{background:none;color:#ff8f6b;opacity:1}
/* Sized to the command rather than to the line it sits on, but free to shrink
   and wrap once the line is a phone wide. */
body.retro .rl-cmd-inline{flex:0 1 auto;width:auto;max-width:100%;min-height:0;flex-direction:row;align-items:center;gap:12px;padding:10px 14px}
body.retro .rl-cmd-inline>span:first-child{min-width:0}
body.retro .rl-cmd-inline>span{padding-left:0;text-indent:0}
body.retro .rl-cmd-inline .tag-copy{align-self:center;margin-top:0}

/* ---------- the data set ---------- */
.rl-h2{font-weight:700;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.5px;margin:0 0 14px;color:var(--paper)}
/* ---------- proof strip: five glyphs, four of them doors to their panels ---------- */
/* No cards: a hairline over the row and hairlines between the columns, so the
   ember glyphs are the only thing on the graphite that is not type. */
.rl-facts .rl-eyebrow{display:block;margin-bottom:16px}
.rl-factgrid{
  --hair:rgba(255,255,255,.08);
  list-style:none;margin:0;padding:40px 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.rl-factgrid li{border-left:1px solid var(--hair)}
.rl-factgrid li:first-child{border-left:0}
body.retro .rl-factgrid a{
  display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:0 4px 0 24px;
  text-decoration:none;color:var(--paper);
}
.rl-factgrid li:first-child a{padding-left:0}
.rl-glyph{
  width:20px;height:20px;flex:none;margin-bottom:12px;
  fill:none;stroke:var(--ember);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;
}
.rl-factgrid h3{font-weight:500;font-size:15px;line-height:1.35;margin:0;color:rgba(255,255,255,.88);transition:color var(--ease)}
.rl-factgrid a:hover h3,.rl-factgrid a:focus-visible h3{color:#fff}
.rl-factgrid .rl-pathlead{margin-top:6px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
@media(max-width:1160px){
  .rl-factgrid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .rl-factgrid li{border-left:0}
  .rl-factgrid li:nth-child(n+3){border-top:1px solid var(--hair);padding-top:32px;margin-top:32px}
  body.retro .rl-factgrid li a{padding-left:0}
  body.retro .rl-factgrid li:nth-child(odd) a{padding-right:32px}
  .rl-factgrid li:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:560px){
  .rl-factgrid{grid-template-columns:1fr}
  .rl-factgrid li:last-child:nth-child(odd){grid-column:auto}
  .rl-factgrid li:nth-child(n+2){border-top:1px solid var(--hair);padding-top:32px;margin-top:32px}
  body.retro .rl-factgrid li:nth-child(n) a{padding-right:0}
}

/* The name of the thing the art is of, said above the art instead of over it,
   quietly: a label, not a headline, so the city stays the thing being looked at. */
.rl-kicker-mid{
  margin:0;text-align:center;font-family:var(--pixel);font-weight:500;
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint);
}
.rl-prose{font-size:15.5px;line-height:1.75;color:var(--muted-2);max-width:880px;margin:0 0 48px}

/* ---------- the evidence carousel ---------- */
/* A scroll container with snap points, not a slider: the browser already moves a
   scroll container on a swipe, a wheel and the arrow keys, so the buttons and
   dots drive `scrollTo` and nothing else re-implements panning. Everything is
   named `rl-c*` to stay clear of the flow chart's `rl-chain`/`rl-node` and of
   `.rl-dot`, which is the orange full stop in the headlines. */
/* No box around the rail: the panels float on the page and the row carries the
   label, so the only frame a reader sees is the panel being read. */
.rl-carousel .rl-panel-head{margin-bottom:14px}
.rl-carousel .rl-h2{margin-bottom:32px}
.rl-crail{
  /* A panel is short of the rail, so the one before and the one after it are
     both in view and the rail reads as a rail. */
  display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:20px;
  /* The panels' widths are a share of the rail, and a percentage on a grid item
     in an auto track would resolve against the track it is sizing, so the share
     is carried here in a length the panels can read. */
  --w:min(660px,72vw);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* The dots are the position indicator; a scrollbar under the panels would be
     a second one, drawn by the platform. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* Room for the panels' shadows to fall. */
  padding:8px 2px 14px;
  /* A grid track is as tall as its tallest cell, so the rail would stand at the
     height of the tallest of the six and leave the controls that far below a
     short panel. `--panel`, written by the controller, is the height of the
     panel being read, so the controls follow it and a taller neighbour is cut at
     the bottom of the rail as it already is at either side. The track keeps its
     full height behind that, so what is left over is hidden rather than turned
     into a second thing to scroll. `--panel` is a panel's own height, so it is
     the rail's content box: the room the shadows fall into sits outside it. */
  box-sizing:content-box;height:var(--panel,auto);overflow-y:hidden;
}
.rl-crail::-webkit-scrollbar{display:none}
/* The rail can be dragged, so it says so to a mouse. */
.rl-crail{cursor:grab}
.rl-crail:active{cursor:grabbing}
.rl-crail:focus-visible{outline:2px solid var(--ember);outline-offset:6px;border-radius:12px}
.rl-cslide{
  /* One card is one size. `--card`, written by the controller, is the tallest
     panel's own height, and it is a floor rather than a height so a panel that
     outgrows it - a rewrapped line, a webfont swapping in - pushes the floor up
     instead of being cut off by it. A panel is still as tall as what it says
     when it is the tallest one. */
  scroll-snap-align:center;min-width:0;align-self:start;min-height:var(--card,0);
  width:var(--w);
  display:flex;flex-direction:column;gap:14px;
  padding:26px 26px 28px;
  border:1px solid rgba(237,234,242,.09);border-radius:16px;
  background:linear-gradient(180deg,rgba(237,234,242,.05),rgba(237,234,242,.015));
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  /* A panel either side of the middle is legible enough to say what is coming
     and set back far enough not to compete with what is being read. */
  opacity:.5;transform:scale(.965);
  transition:opacity var(--ease),transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.rl-cslide.is-at{
  opacity:1;transform:none;
  border-color:rgba(254,92,0,.3);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}
.rl-cno{font-size:11px;letter-spacing:2.5px;color:var(--ember);font-weight:700}
.rl-cslide h3{font-weight:700;font-size:clamp(16px,1.6vw,19px);line-height:1.4;margin:0;color:var(--paper)}
.rl-clead{font-family:var(--prose);font-size:14.5px;line-height:1.7;color:var(--muted-2);margin:0;max-width:760px}
.rl-cnote{font-size:11.5px;line-height:1.7;color:var(--faint);margin:auto 0 0}
/* The note and its control share the panel's last row, the control at the end of
   it: inline, it landed mid sentence and broke the measure. */
.rl-cnoterow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 16px;margin:auto 0 0}
.rl-cnoterow .rl-cnote{flex:1 1 380px;margin:0}
/* Long ids break rather than widen a panel, but an ordinary word keeps its
   spelling: `break-word` splits "Enterprise" on a phone, `anywhere` does not. */
.rl-cslide code{font-family:var(--mono);font-size:.92em;color:var(--ember-soft);overflow-wrap:break-word}

/* The panels' figures. Anything carrying a sentence is laid out rather than
   drawn, so it wraps and keeps its font size on a phone instead of shrinking with
   a viewBox; the two figures that are really data - the clock heatmap and the
   reference curves - are built by the controller from the same numbers the
   generator draws from, so a figure cannot quietly stop matching the code. */

/* A small figure legend used on several panels: the number, then the sentence it
   stands for, so the panel reads the same to somebody who cannot see its weight. */
.rl-cfacts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rl-cfacts li{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr);align-items:baseline;gap:12px}
.rl-cfacts b{
  font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--ember);
  letter-spacing:-.01em;
}
.rl-cfacts span{font-size:11.5px;line-height:1.65;color:var(--muted)}
.rl-cfacts-tight{gap:6px}

/* 01 - the clock. A readout of the hour being written, then the week filling in
   under it: the time is read, not decorated, so it sits above the grid at full
   contrast rather than washed out behind the cells. */
.rl-cclock{
  display:grid;gap:12px;
  padding:14px 14px 12px;border:1px solid var(--edge);border-radius:12px;
  background:rgba(4,10,17,.55);
}
.rl-cclock-face{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:16px;row-gap:8px;
}
.rl-cclock-face b{
  font-family:var(--mono);font-size:clamp(34px,5.6vw,48px);font-weight:700;line-height:1;
  color:var(--paper);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.rl-cclock-when{display:grid;gap:3px;min-width:0}
.rl-cclock-when i{
  font-style:normal;font-family:var(--mono);font-size:13px;letter-spacing:.22em;
  color:var(--ember);text-transform:uppercase;
}
.rl-cclock-when em{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--muted-2)}
/* How far through the week the readout is, so the elapsing is legible before a
   reader has watched the grid long enough to see it. */
.rl-cclock-run{
  grid-column:1/-1;height:3px;border-radius:2px;
  background:rgba(237,234,242,.08);overflow:hidden;
}
.rl-cclock-run i{
  display:block;height:100%;width:var(--run,0%);
  background:var(--ember);transition:width 220ms linear;
}
/* 24 columns, 7 rows, one cell per hour of the week. `--i` is that hour's share
   of the busiest hour of the week; `is-on` is an hour the running clock has
   already been through. */
.rl-cheat{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;position:relative}
.rl-cheat i{
  aspect-ratio:1;border-radius:2px;
  background:rgba(237,234,242,calc(.03 + var(--i,0) * .05));
  box-shadow:inset 0 0 0 1px rgba(237,234,242,.04);
  transition:background 220ms ease-out,box-shadow 220ms ease-out;
}
.rl-cheat i.is-on{background:rgba(254,92,0,calc(.06 + var(--i,0) * .82))}
.rl-cheat i.is-now{box-shadow:inset 0 0 0 1px var(--paper),0 0 10px rgba(254,92,0,.55)}
.rl-cclock-say{
  margin:0;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted-2);
  display:flex;flex-wrap:wrap;gap:4px 14px;
}
.rl-cclock-say i{font-style:normal;color:var(--faint)}

/* 02 - one person. The person in the middle, the four facets around them; the
   spacing carries that they are sides of it, with nothing drawn between. The
   middle is a fixed column rather than a share of the panel: the facets are the
   part that needs the width, and a wide middle left them four characters to a
   line and the panel twice the height of its neighbours. */
.rl-cperson{
  display:grid;grid-template-columns:minmax(0,1fr) 162px minmax(0,1fr);
  grid-template-rows:auto auto;align-items:start;gap:26px 28px;
}
/* Unboxed: the four sides sit on the panel itself, held apart by the gap alone,
   so the turning figure is the only object in the scene. */
.rl-cpfacet{display:grid;gap:7px;padding:2px 0}
.rl-cpfacet p{margin:0;font-size:11px;line-height:1.65;color:var(--muted)}
.rl-cpfacet p b{color:var(--paper-2);font-weight:700}
.rl-cpk{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ember)}
.rl-cpcore{
  grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;
  position:relative;display:grid;gap:9px;justify-items:center;text-align:center;
}
/* The figure itself: a turning wire body, sized here and drawn to that size by
   the script, which reads the box back off the element. */
.rl-cpfig{display:block;width:158px;height:176px}
.rl-cpcore figcaption{display:grid;gap:3px}
.rl-cpcore b{font-size:13px;color:var(--paper)}
.rl-cpcore span{font-size:10.5px;color:var(--muted-2)}
/* The same person as each system publishes her, along the foot of the panel: a
   chip per system, so the six copies read as six things rather than as a table,
   and the row wraps rather than scrolling. */
.rl-cpwhere{display:grid;gap:9px;margin:22px 0 0}
.rl-cpwhere ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.rl-cpwhere li{
  display:flex;align-items:baseline;gap:7px;
  padding:4px 9px;border:1px solid var(--edge);border-radius:6px;
  background:rgba(237,234,242,.03);
}
.rl-cpwhere b{font-size:10px;font-weight:700;color:var(--paper-2)}
.rl-cpwhere li span{font-family:var(--mono);font-size:9.5px;color:var(--muted);word-break:break-all}
.rl-cpwhere p{margin:0;font-size:10.5px;line-height:1.6;color:var(--muted)}
/* The key is the point of the row, so it is printed whole. */
.rl-cpwhere p b{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--ember);word-break:break-all}
.rl-cladder{display:grid;gap:4px}
.rl-cltrack{display:flex;gap:4px}
.rl-cltrack i{
  flex:1 1 0;text-align:center;font-style:normal;font-family:var(--mono);font-size:10px;
  padding:5px 0;border:1px solid var(--edge);border-radius:5px;color:var(--muted);
  background:rgba(237,234,242,.03);
}
.rl-cltrack i.is-at{border-color:var(--ember);background:rgba(254,92,0,.2);color:var(--paper)}
.rl-cltrack i.is-peer{border-color:var(--ember-line);color:var(--ember-soft)}
.rl-cpmoves{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rl-cpmoves li{
  /* Stacked rather than two columns: the facets are a third of the panel wide,
     and a label beside a value there leaves four characters a line. */
  display:grid;gap:1px;padding-left:12px;position:relative;
}
/* One pip per event, on a rail: a history rather than a list. */
.rl-cpmoves li::before{
  content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;
  background:var(--ember);
}
.rl-cpmoves li:not(:last-child)::after{
  content:"";position:absolute;left:4px;top:11px;bottom:-5px;width:1px;background:rgba(254,92,0,.3);
}
.rl-cpmoves b{font-size:11px;color:var(--paper-2)}
.rl-cpmoves span{font-size:10.5px;line-height:1.5;color:var(--muted)}
.rl-cpleft{list-style:none;margin:0;padding:0;display:grid;gap:7px}
/* A ring per share, in a fixed column, so the four arcs stand under each other
   and the amounts compare on sight. */
.rl-cpleft li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center}
.rl-cpleft span{font-size:11px;line-height:1.5;color:var(--muted)}
.rl-cring{display:block;width:38px;height:38px;overflow:visible}
.rl-cring circle{fill:none;stroke-width:4}
.rl-cring-track{stroke:rgba(237,234,242,.08)}
/* From the top rather than from three o'clock, which is where an arc is read
   from. */
.rl-cring-arc{stroke:var(--ember);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.rl-cring-read{
  fill:var(--paper);font-family:var(--mono);font-size:11px;
  text-anchor:middle;dominant-baseline:central;
}

/* The year as an amount: one mark per day of leave, sick days in the colder ink
   the scorecard uses for its second run. */
.rl-cyear{display:grid;gap:7px}
.rl-cyrow{display:grid;gap:4px}
.rl-cyk{font-size:11px;color:var(--muted)}
.rl-cyk b{font-family:var(--mono);font-size:12.5px;color:var(--paper);margin-right:4px}
.rl-cypips{display:flex;flex-wrap:wrap;gap:3px}
.rl-cypips i{width:8px;height:8px;border-radius:2px;background:var(--ember)}
.rl-cyrow.is-sick .rl-cypips i{background:rgba(127,179,200,.65)}

/* 03 - the shapes. One column per distribution: the caption states the shape and
   its parameters, the bars are that density evaluated in the browser, and the
   source label says whether the number is measured, structural or a judgement. */
/* The three columns share their rows, so a caption that wraps to two lines in one
   column and one in another still leaves all three curves standing on the same
   line. */
.rl-cdists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:8px 16px}
.rl-cdist{margin:0;display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
.rl-cdist figcaption{display:grid;gap:2px}
.rl-cdist figcaption b{font-size:11.5px;color:var(--paper)}
.rl-cdist figcaption span{font-family:var(--mono);font-size:10px;color:var(--muted)}
/* The source label stands over its sentence rather than inside it: the labels
   are different lengths, and inline they each started their column's prose at a
   different place. */
.rl-cdist p{margin:0;display:grid;justify-items:start;gap:5px;font-size:10.5px;line-height:1.6;color:var(--muted)}
.rl-cbars{
  position:relative;
  display:flex;align-items:flex-end;gap:1px;height:78px;
  padding:0 2px;border-bottom:1px solid rgba(237,234,242,.18);
}
/* The density the bars are drawn against, over the bars rather than behind them:
   a histogram short of its own curve has to read as short of it. */
.rl-cref{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rl-cref polyline{fill:none;stroke:rgba(237,234,242,.4);stroke-width:1;vector-effect:non-scaling-stroke}
/* How many draws are in the bars, and what they came out at: the histogram's
   own median, not the table's, so a reader can watch them meet. */
.rl-cdrawn{
  min-height:1em;font-family:var(--mono);font-size:9.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.rl-cagain{
  flex:none;padding:3px 9px;
  border:1px solid rgba(254,92,0,.5);border-radius:5px;background:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ember);cursor:pointer;
}
.rl-cagain:hover{background:rgba(254,92,0,.12)}
.rl-cagain:disabled{opacity:.45;cursor:default}
.rl-cbars i{
  /* A share of the chart's own height, so the bars follow it when the narrow
     stylesheet makes the chart shorter. A bar is set from script every frame it
     grows, so the height is not transitioned - the frames are the animation. */
  flex:1 1 0;min-width:0;height:calc(5% + var(--h,0) * 95%);
  background:linear-gradient(180deg,var(--ember),rgba(254,92,0,.35));
  border-radius:1px 1px 0 0;
}
/* The tail is the point of these shapes, so it is drawn in the accent's softer
   tone rather than left to disappear into the axis. */
.rl-cbars i.is-tail{background:linear-gradient(180deg,rgba(240,168,104,.85),rgba(240,168,104,.25))}
.rl-caxis{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.rl-caxis i{font-style:normal}
.rl-csrc{
  display:inline-block;padding:1px 6px;border-radius:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid currentColor;
}
.rl-csrc-ind{color:var(--ember-soft)}
.rl-csrc-str{color:#7fb3c8}
.rl-csrc-est{color:var(--muted)}

/* 04 - the burst. Thirty days of a queue with one day standing out of it, and
   that day opened up into the tickets it is made of. */
.rl-cburst{display:grid;gap:14px}
.rl-cspike{
  display:flex;align-items:flex-end;gap:2px;height:88px;
  padding:0 2px;border-bottom:1px solid rgba(237,234,242,.18);
}
.rl-cspike i{
  flex:1 1 0;min-width:0;height:calc(4% + var(--h,0) * 96%);border-radius:1px 1px 0 0;
  background:rgba(237,234,242,.22);
}
.rl-cspike i.is-burst{background:var(--ember);box-shadow:0 0 14px rgba(254,92,0,.5)}
/* The month is read a day at a time on first sight: a day the sweep has not
   reached yet sits back, and stays lit once it has. The armed class is set from
   script, so without it - no script, or a reader who has not scrolled here -
   every day and every ticket is simply there. */
.rl-cspike i{opacity:1;transition:opacity .18s linear}
.rl-cspike.is-armed i{opacity:.3}
.rl-cspike.is-armed i.is-lit{opacity:1}
.rl-cfiled.is-armed li{opacity:0;transform:translateY(5px);transition:opacity .28s ease-out,transform .28s ease-out}
.rl-cfiled.is-armed li.is-in{opacity:1;transform:none}
.rl-cfiled{display:grid;gap:8px}
.rl-cfiled-head{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.rl-cfiled ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rl-cfiled li{
  display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;align-items:baseline;gap:12px;
  padding:8px 11px;border:1px solid var(--edge);border-left:3px solid rgba(254,92,0,.55);
  border-radius:0 8px 8px 0;background:rgba(4,10,17,.55);
}
.rl-cwho{display:grid;gap:1px;font-size:11px;color:var(--paper-2)}
.rl-cwho i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.rl-cwhat2{font-size:11px;line-height:1.55;color:var(--muted-2)}
.rl-cpri{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;border:1px solid currentColor;
}
.rl-cpri-urg{color:var(--ember)}
.rl-cpri-hi{color:var(--ember-soft)}
.rl-cpri-nor{color:var(--muted)}

/* 05 - deliberate mess. The value as it was, the value as it was left, and the
   manifest that says which of the two an evaluation is looking at. */
.rl-cmess{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
/* `align-content` so a row is the height of the value in it: the manifest beside
   it is the taller column, and a stretched grid would spread that over the five
   rows as padding. */
.rl-cdiff{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.rl-cdiff li{
  /* The kind is a 9.5px label, so it is sized in px: 7em of the row's own 16px
     font left the two values 79px each, a word to a line, and "placeholder" with
     its letter-spacing needs 78 of the 80 it is given here. */
  display:grid;grid-template-columns:minmax(0,80px) minmax(0,1fr) minmax(0,1fr);
  align-items:baseline;gap:8px;
  padding:8px 10px;border:1px solid var(--edge);border-radius:8px;background:rgba(4,10,17,.55);
}
.rl-cdk{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.rl-cdb{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(237,234,242,.3)}
/* The value the estate is actually left holding, boxed so trailing whitespace is
   visible as the defect it is. */
.rl-cda{
  font-family:var(--mono);font-size:10.5px;color:var(--ember-soft);
  background:rgba(254,92,0,.1);border-radius:3px;padding:1px 4px;
  overflow-wrap:break-word;
}
.rl-cdose{display:grid;gap:10px;align-content:start}
/* The dose against its cap: the fill is written from script as the defects land
   and stops at 30%, with the cap drawn as a line it cannot pass. */
.rl-ccap{display:grid;gap:5px}
.rl-ccapbar{
  position:relative;height:5px;border-radius:3px;overflow:hidden;
  background:rgba(237,234,242,.1);
}
.rl-ccapbar i{
  display:block;height:100%;width:calc(var(--fill,0) * 100%);
  background:linear-gradient(90deg,rgba(254,92,0,.55),var(--ember));
}
/* The cap itself, at 30% of the column. */
.rl-ccapbar::after{
  content:'';position:absolute;top:-1px;bottom:-1px;left:30%;
  width:1px;background:rgba(237,234,242,.55);
}
.rl-ccapsay{font-family:var(--mono);font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums}
/* Dosing, when script is running it: a row is clean until its defect lands. */
.rl-cdiff.is-armed .rl-cdb{text-decoration:none;color:var(--paper)}
.rl-cdiff.is-armed .rl-cda{opacity:0;transform:translateX(-5px);transition:opacity .3s ease-out,transform .3s ease-out}
.rl-cdiff.is-armed li.is-dosed .rl-cdb{text-decoration:line-through;color:var(--muted)}
.rl-cdiff.is-armed li.is-dosed .rl-cda{opacity:1;transform:none}
.rl-cmanifest{
  display:grid;gap:8px;align-content:start;padding:13px 14px;
  border:1px solid var(--edge);border-radius:10px;background:rgba(4,10,17,.5);
}
.rl-cmanifest p{margin:0;font-size:11px;line-height:1.65;color:var(--muted)}

/* 06 - the estate. Two columns to one point: what kinds of system and content the
   same company is projected into, and how much of each one tenant at the top size
   tier holds. The bars are a share of the largest count beside them, so the column
   reads as an amount before it is read as six numbers. */
.rl-cestate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.rl-cmodes,.rl-cvols{
  display:grid;gap:9px;align-content:start;padding:13px 14px;
  border:1px solid var(--edge);border-radius:10px;background:rgba(4,10,17,.5);
}
.rl-cmodes ul,.rl-cvols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
/* The family over the systems in it: inline, the five names each started at a
   different place and the column stopped reading as a list of families. */
.rl-cmodes li{display:grid;gap:2px}
.rl-cmodes b{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--paper)}
.rl-cmodes li span{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
/* Name, bar, count. The count is what is being read, so it keeps its own column
   and the figures line up under each other. */
.rl-cvols li{display:grid;grid-template-columns:minmax(0,76px) minmax(0,1fr) 56px;align-items:center;gap:9px}
.rl-cvols i{font-style:normal;font-size:10.5px;color:var(--muted-2)}
.rl-cvols li span{height:7px;border-radius:4px;background:rgba(237,234,242,.06);overflow:hidden}
.rl-cvols li span::after{content:'';display:block;height:100%;width:calc(var(--v,0) * 100%);background:var(--ember)}
.rl-cvols em{
  font-style:normal;font-family:var(--mono);font-size:12.5px;text-align:right;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.rl-cvols p{margin:2px 0 0;font-size:11px;line-height:1.65;color:var(--muted)}

/* 08 - live over MCP. One call on the wire on the left, four systems answering
   theirs on the right; the dot is the one thing that moves, and it says the
   system is running rather than read off a file. */
.rl-clive{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.rl-clivecall{
  display:grid;gap:9px;align-content:start;padding:13px 14px;
  border:1px solid var(--edge);border-radius:10px;background:rgba(4,10,17,.5);
}
.rl-clivereq{
  margin:0;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--muted);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.rl-clivereq i{font-style:normal;color:var(--faint)}
.rl-clivereq b{font-weight:600;color:var(--ember-soft)}
.rl-clivecall p{margin:0;font-size:11px;line-height:1.65;color:var(--muted)}
.rl-clivesys{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rl-clivesys .rl-tile{
  display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:4px 10px;padding:10px 13px;
}
.rl-clivesys b{font-size:12.5px;font-weight:600;color:var(--paper)}
.rl-clivesys code,.rl-clivesys samp{grid-column:2 / -1;font-family:var(--mono);font-size:10.5px;line-height:1.5;overflow-wrap:anywhere}
.rl-clivesys samp{color:var(--muted)}
.rl-clivedot{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7fd3a0;
}
.rl-clivedot::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#4cc38a;
  box-shadow:0 0 0 0 rgba(76,195,138,.55);animation:rl-live 2s ease-out infinite;
}
.rl-clivesys li:nth-child(2) .rl-clivedot::before{animation-delay:.5s}
.rl-clivesys li:nth-child(3) .rl-clivedot::before{animation-delay:1s}
.rl-clivesys li:nth-child(4) .rl-clivedot::before{animation-delay:1.5s}
@keyframes rl-live{
  0%{box-shadow:0 0 0 0 rgba(76,195,138,.55)}
  70%{box-shadow:0 0 0 6px rgba(76,195,138,0)}
  100%{box-shadow:0 0 0 0 rgba(76,195,138,0)}
}

/* 07 - the scorecard. Every figure here is written by the script from the
   published board, so the panel is empty until that board arrives. Two
   bars to a measure: the generator as it ships, and the same generator with the
   fidelity work off underneath it. */
.rl-cdet{display:grid;gap:13px}
.rl-cduel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.rl-cduelrow{
  display:grid;gap:5px;padding:11px 13px;
  border:1px solid var(--edge);border-radius:10px;background:rgba(4,10,17,.5);
}
.rl-cduelbar{display:grid;grid-template-columns:56px minmax(0,1fr) 46px;gap:8px;align-items:center}
.rl-cduelbar i{font-style:normal;font-size:10px;color:var(--muted-2)}
.rl-cduelbar span{height:7px;border-radius:4px;background:rgba(237,234,242,.06);overflow:hidden}
.rl-cduelbar b{display:block;height:100%;background:var(--ember)}
.rl-cduelbar em{font-style:normal;font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--paper)}
/* The run with the work off is the same measure in a colder ink, so the pair
   reads as before and after rather than as two unrelated numbers. */
.rl-cduelbar.is-off b{background:rgba(127,179,200,.55)}
.rl-cduelbar.is-off em,.rl-cduelbar.is-off i{color:var(--muted)}
/* The six axes are one strip of paired columns rather than six labelled rows:
   the shape of the pair is the point, and the numbers behind it are on the sheet
   the panel links to. */
.rl-caxrows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rl-caxcol{display:grid;grid-template-rows:78px auto auto;gap:6px;justify-items:center}
.rl-caxpair{display:flex;align-items:flex-end;gap:4px;height:100%}
.rl-caxpair i{width:9px;border-radius:3px 3px 0 0;background:var(--ember);min-height:2px}
.rl-caxpair i.is-off{background:rgba(127,179,200,.5)}
.rl-caxcol b{font-size:10px;font-weight:500;color:var(--muted);text-align:center}
.rl-caxcol em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--paper)}
.rl-ctellsay{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted-2)}

/* The controls: prev, the dots, next - and a line naming the panel in view for a
   reader who cannot see which dot is filled. */
.rl-cfoot{display:flex;align-items:center;gap:12px;margin-top:14px}
.rl-cdots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin:0 auto}
body.retro .rl-cbtn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:10px 16px;font-family:var(--pixel);font-size:11.5px;letter-spacing:.08em;
  color:var(--paper-2);background:rgba(20,20,32,.45);
  border:1px solid var(--edge);border-radius:8px;cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background var(--ease);
}
body.retro .rl-cbtn:hover:not(:disabled){border-color:var(--ember-line);color:var(--paper);background:rgba(20,20,32,.7)}
body.retro .rl-cbtn:disabled{opacity:.4;cursor:default}
/* A dot reads as 11px and is pressed as 30px: the button is the target and the
   mark it draws is the ::after, so a thumb has something to aim at. */
body.retro .rl-cdot{
  width:30px;height:30px;padding:0;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;border-radius:50%;
}
body.retro .rl-cdot::after{
  content:"";width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(237,234,242,.45);
  transition:background var(--ease),border-color var(--ease),transform var(--ease);
}
body.retro .rl-cdot:hover::after{border-color:var(--ember-line)}
body.retro .rl-cdot:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
body.retro .rl-cdot[aria-current="true"]::after{background:var(--ember);border-color:var(--ember);transform:scale(1.15)}
.rl-cstatus{margin:8px 0 0;text-align:center;font-size:11px;letter-spacing:1.5px;color:var(--faint)}

@media(max-width:720px){
  /* Narrower still on a phone, so an edge of both neighbours shows. */
  .rl-crail{gap:12px}
  .rl-cslide{width:84vw;padding:20px}
  .rl-cfoot{flex-wrap:wrap;justify-content:center;gap:8px}
  .rl-cdots{order:-1;width:100%}
  /* The clock keeps its 24 columns - an hour of the week is the figure - so the
     cells come down to the width instead, and the readout stacks. */
  .rl-cclock{padding:12px 10px 10px}
  .rl-cclock-face{grid-template-columns:minmax(0,1fr)}
  .rl-cheat{gap:1px}
  /* One curve at a time rather than three thumbnails nobody can read. */
  .rl-cdists{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:18px}
  .rl-cdist{grid-row:auto;grid-template-rows:none;gap:8px}
  .rl-cbars{height:70px}
  /* 9.5px reads on a desktop legend and does not on a phone. */
  .rl-caxis,.rl-csrc,.rl-cpri,.rl-cdk{font-size:10.5px}
  /* The person and their facets stack, with the person at the top of them. */
  .rl-cperson{grid-template-columns:minmax(0,1fr);gap:10px}
  .rl-cpcore{grid-column:1;grid-row:auto;order:-1}
  .rl-cpmoves li,.rl-cfacts li{grid-template-columns:minmax(0,1fr);gap:1px}
  /* Three axes to a row on a phone: six columns leaves each name a word wide. */
  .rl-caxrows{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  /* A ticket's account, its subject and its priority read down rather than
     across, so no subject is squeezed into a two-word column. */
  .rl-cfiled li{grid-template-columns:minmax(0,1fr);gap:5px}
  .rl-cpri{justify-self:start}
  .rl-cmess{grid-template-columns:minmax(0,1fr);gap:14px}
  /* The kinds over the volumes on a phone: two columns left every file store on
     a line of its own. */
  .rl-cestate{grid-template-columns:minmax(0,1fr);gap:14px}
  .rl-clive{grid-template-columns:minmax(0,1fr);gap:14px}
  .rl-cdiff li{grid-template-columns:minmax(0,1fr);gap:3px}
  .rl-cdb{justify-self:start}
  .rl-cda{justify-self:start}
}
@media(max-width:560px){
  /* A panel on a phone is its kicker, its heading, its lead and its figure. The
     footnotes, the identity dump and the fact legends are the wordiest, least
     load-bearing parts and stood a panel a screen and a half tall. */
  .rl-carousel .rl-cslide .rl-cnote,
  .rl-carousel .rl-cnoterow .rl-cnote,
  .rl-carousel .rl-cpwhere,
  .rl-carousel .rl-cfacts{display:none}
}
@media(max-width:720px){
  /* Every card one size: the lead held to three lines and one figure to a
     panel, the one that carries its claim; the rest is for a wider screen. */
  .rl-carousel .rl-clead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .rl-carousel .rl-cpfacet,
  .rl-carousel .rl-cdist:nth-child(n+2),
  .rl-carousel .rl-cslide .rl-cnoterow,
  .rl-carousel .rl-cfiled li:nth-child(n+2),
  .rl-carousel .rl-cdiff li:nth-child(n+4),
  .rl-carousel .rl-ccap,
  .rl-carousel .rl-cmanifest,
  .rl-carousel .rl-cmodes,
  .rl-carousel .rl-cdet > :not(.rl-cduel),
  .rl-carousel .rl-clivecall,
  .rl-carousel .rl-clivesys li:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
  .rl-crail{scroll-behavior:auto}
  /* The clock stands at one representative hour instead of running. */
  .rl-cheat i,.rl-cclock-run i{transition:none}
  /* The setting back of the neighbours stays, the movement of it does not. */
  .rl-cslide{transition:none;transform:none}
  .rl-clivedot::before{animation:none}
}

/* ---------- company history ---------- */
.rl-panel{border:1px solid var(--edge);border-radius:16px;background:var(--panel);padding:40px 40px 46px}
.rl-eyebrow{font-family:var(--pixel);font-size:11.5px;letter-spacing:2.5px;color:var(--ember);font-weight:700}
.rl-aside{font-family:var(--pixel);font-size:10.5px;letter-spacing:1.5px;color:var(--faint);margin-left:auto}
.rl-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
/* A rail per cell rather than one line under the row: the grid wraps, and a
   single absolute rail would run off the end of the first row and under the
   second. The last cell in a row carries no rail for the same reason. */
.rl-when{position:relative;padding:0 34px 0 0}
.rl-when::before{content:"";position:absolute;left:12px;right:0;top:5px;height:2px;background:rgba(222,109,43,.4)}
.rl-when:last-child{padding-right:0}
.rl-when:last-child::before{content:none}
/* The line the beats hang off is the only warm thing in the panel: the pips and
   the dates are read as marks on it rather than as six more accents. */
.rl-pip{width:12px;height:12px;border-radius:50%;background:var(--muted);border:2px solid var(--panel);position:relative;margin-bottom:14px}
.rl-date{font-family:var(--pixel);font-size:11.5px;color:var(--muted-2);font-weight:700;margin-bottom:6px}
.rl-what{font-size:12.5px;font-weight:600;margin-bottom:10px}
.rl-sys{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11px;color:var(--muted-2)}
.rl-sys .rl-chip{width:8px;height:8px;border-radius:2px}
.rl-detail{font-size:11px;color:var(--faint);line-height:1.6}

/* ---------- the last word, on graphite ---------- */
/* The same near-black the sheet opens on, faded up out of the navy so the band
   arrives without an edge: the sentence and the door carry it, not a picture. */
.rl-lake{position:relative;background:var(--canvas)}
.rl-lake::before,.rl-lake::after{
  content:"";position:absolute;left:0;right:0;height:120px;pointer-events:none;
}
.rl-lake::before{top:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(9,12,17,0) 100%)}
.rl-lake::after{bottom:0;background:linear-gradient(180deg,rgba(9,12,17,0) 0%,var(--bg) 100%)}
.rl-lake-copy{position:relative;max-width:760px;margin:0 auto;padding:120px 32px 112px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.rl-lake-copy h2{
  font-weight:700;font-size:clamp(22px,3vw,32px);letter-spacing:-.5px;line-height:1.4;margin:0;
  color:var(--paper);
}
.rl-lake-copy .rl-dot{color:var(--ember-soft)}

/* ---------- the console's footer ---------- */
/* The pages a reader goes looking for - terms, privacy, fidelity, the inbox -
   are the same ones era.js prints on every other sheet; the sheet's paper,
   border and drop shadow come off, and the page keeps its own dark. */
body.retro footer.sheet{
  background:var(--bg);border:0;box-shadow:none;margin:0 auto;
  max-width:var(--wide);padding:34px 32px 44px;gap:20px;
}
body.retro footer.sheet .brand{font-family:var(--pixel);font-weight:700;font-size:19px;color:var(--paper-2)}
body.retro footer.sheet .navlink{font-family:var(--pixel);font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
body.retro footer.sheet .navlink:hover{color:var(--ember)}
/* The rule over the disclaimer runs the width the page's content holds, from the
   wordmark's own edge to the far side of the row above it. */
body.retro .foot-note{
  position:relative;border-top:1px solid var(--edge);padding-top:20px;max-width:none;
  font-family:var(--pixel);font-size:11.5px;line-height:1.7;color:var(--faint);opacity:1;
}
/* The wordmark opens the row and the pages follow it, the community glyph
   closing the group rather than the row. Signed out there is no glyph, and an
   empty slot would take the place the last link should hold. */
body.retro footer.sheet #foot-community:empty{display:none}
body.retro footer.sheet .foot-links{flex:1;justify-content:flex-end;gap:12px 32px;margin:0}
@media(min-width:768px){body.retro footer.sheet .foot-top{gap:32px}}

/* ---------- narrow ---------- */
/* The terminal box has to print its longest argument: `.nb` holds a path on one
   line, and under about this width half the row is narrower than that path, so
   the two paths stack - console first, since it is the one without an install. */
@media(max-width:1060px){
  .rl-paths{grid-template-columns:1fr;gap:20px}
  .rl-flowfoot{width:auto;margin-left:0}
}
/* Narrow, the two columns of tiles become one even 2-up grid around the city:
   Slack moves below it so neither bunch ends on a lone, full-width tile. */
@media(max-width:860px){
  .rl-diagram{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rl-col{display:contents}
  .rl-frame{grid-column:1/-1;order:1;margin:20px 0}
  .rl-col:first-child .rl-tile:last-child,.rl-col:last-child .rl-tile{order:2}
}
@media(max-width:720px){
  .rl-wide,.rl-hero-copy,.rl-lake-copy{padding-left:20px;padding-right:20px}
  body.retro .rl-nav,body.retro footer.sheet{padding-left:20px;padding-right:20px}
  body.retro .rl-nav{gap:14px}
  .rl-panel{padding:24px 20px 28px}
  /* The note under the heading starts at the panel's edge once it wraps. */
  .rl-panel-head{margin-bottom:28px;gap:8px}
  .rl-aside{margin-left:0;flex-basis:100%}
  /* Narrow, the history runs down the panel: a pip and its date on the rail,
     the beat beside them, so every date, title and system starts on one line. */
  .rl-timeline{grid-template-columns:minmax(0,1fr)}
  .rl-when{display:grid;grid-template-columns:12px 56px minmax(0,1fr);column-gap:12px;align-items:start;padding:0 0 24px}
  .rl-when:last-child{padding-bottom:0}
  .rl-when::before{left:5px;right:auto;top:10px;bottom:-4px;width:2px;height:auto}
  .rl-pip{grid-area:1/1;margin:3px 0 0}
  .rl-date{grid-area:1/2;margin:0;line-height:18px;white-space:nowrap}
  .rl-what{grid-area:1/3;margin:0 0 6px;line-height:18px}
  .rl-sys{grid-area:2/3}
  .rl-detail{grid-area:3/3}
  .rl-hero-copy{padding-top:52px;padding-bottom:72px}
  .rl-doors{align-items:flex-start}
}
@media(max-width:360px){
  /* Too narrow for the date beside the beat: it sits above it on the rail. */
  .rl-when{grid-template-columns:12px minmax(0,1fr)}
  .rl-date{grid-area:1/2;margin-bottom:4px}
  .rl-what{grid-area:2/2}
  .rl-sys{grid-area:3/2}
  .rl-detail{grid-area:4/2}
}
/* The phone nav's steps are era.css's; this sheet's own sizes for the wordmark
   and the gaps would otherwise outrank them. */
@media(max-width:767px){
  body.retro .rl-nav{column-gap:var(--nav-gap);row-gap:0}
  body.retro .rl-nav .brand{font-size:var(--nav-brand)}
  body.retro .rl-nav .nav-side{gap:var(--nav-side-gap)}
  body.retro .rl-nav .nav-links .navlink{font-size:13px}
  body.retro .rl-nav .nav-toggle{color:var(--paper);border-color:var(--edge)}
  body.retro footer.sheet .foot-links{justify-content:start;gap:14px 24px}
}
@media(max-width:350px){
  body.retro .rl-nav{padding-left:16px;padding-right:16px}
  body.retro footer.sheet .foot-links{column-gap:14px}
}
@media(prefers-reduced-motion:reduce){
  body.retro *{transition:none!important}
}