/* =========================================================================
   THE SITE OUTSIDE THE APP.

   Eleven pages, and before this file did this job they had four navigation
   systems between them and three footers. index.html had `.nav`; answers,
   creator and the changelog had `.pnav`; privacy, terms, the Impressum and the
   extension page had `.lnav`; about.html and login.html had no header at all.
   Three of the eleven had a footer. None of the four headers had a mobile
   menu: below 900px the links were set to `display:none` and nothing replaced
   them, so on a phone the only way off the landing page was the footer.

   One header, one footer, one set of containers, one type ramp, on every page.
   The page-specific styling that follows builds on that rather than restating
   it, and legal.css keeps the long-form typography it already had right.

   Loaded last on every page, so it wins over the app stylesheet those pages
   also pull in.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The box model, stated here rather than borrowed.

   This file is the site's stylesheet and it cannot assume the app's is loaded
   beside it. changelog.html does not load sailyn.css, and sailyn.css is where
   `* { box-sizing: border-box; margin: 0 }` lives, so on that one page every
   container computed content-box with the browser's default body margin: the
   shared header and footer were 25px wider than the viewport at every width
   below 1280, and the page scrolled sideways.

   A shared component that only works when another stylesheet happens to be
   present is not shared, it is coupled.
   ------------------------------------------------------------------------- */

*, *::before, *::after{ box-sizing: border-box; }
body{ margin: 0; }

/* -------------------------------------------------------------------------
   The shell.

   Two measures and one gutter. Layout uses --shell-w; anything you read a
   sentence at a time uses --measure-w, because prose stops being readable
   somewhere past 75 characters however much room is going spare. The gutter
   clears a notch when the phone is on its side.
   ------------------------------------------------------------------------- */

.shell{
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-left), var(--safe-right));
}
.shell--measure{ max-width: var(--measure-w); }
.shell--wide{ max-width: 1360px; }

/* Long-form body copy, wherever it appears. */
.measure{ max-width: var(--measure-w); }

/* The vertical rhythm of a page. One step between sections, one bigger step
   where the subject changes. */
.section{ padding-block: var(--space-7); }
.section + .section{ border-top: 1px solid var(--line-soft); }
.section--lead{ padding-top: var(--space-7); border-top: 0; }
.section--quiet{ padding-block: var(--space-6); }

@media (min-width: 900px){
  .section{ padding-block: calc(var(--space-7) * 1.5); }
  .section--quiet{ padding-block: var(--space-7); }
}

/* A section's own head: an eyebrow naming the subject, a heading, and a line
   saying why it is here. The eyebrow is what lets a heading be a heading
   rather than also having to carry the category. */
.sec-head{ margin-bottom: var(--space-6); max-width: var(--measure-w); }
.sec-eyebrow{
  display: block;
  font-size: var(--fs-1); font-weight: var(--fw-hi); color: var(--ink-mute);
  letter-spacing: var(--track-label); text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.sec-title{
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight: var(--fw-med); line-height: 1.12;
  letter-spacing: var(--track-title); color: var(--ink);
  text-wrap: balance;
}
.sec-line{
  margin-top: var(--space-4);
  font-size: var(--fs-4); line-height: 1.6; color: var(--ink-soft);
  text-wrap: pretty;
}


/* =========================================================================
   THE HEADER.

   One row on every width. Brand at the leading edge, links in the middle on a
   wide screen, actions at the trailing edge. The actions never wrap: they were
   in a `flex-wrap: wrap` container, so between about 900 and 1050 pixels the
   theme control, Sign in and the primary button reflowed onto a second line
   and the header changed height as the window moved. That is the up-and-down
   the header was doing.
   ========================================================================= */

.sitehead{
  position: sticky; top: 0; z-index: 60;
  padding-top: var(--safe-top);
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
/* The rule appears once the page has moved, so a header at rest is not a bar
   drawn across the top of a design that has not started yet. */
.sitehead.is-stuck{ border-bottom-color: var(--line); }

.sitehead-in{
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 64px;
}

.sitebrand{
  display: flex; align-items: center; gap: var(--space-2);
  flex: 0 0 auto; white-space: nowrap; color: var(--ink);
  /* A hit area, not just a logo. It was the height of its 26px icon, which is
     a link on every page of the site that a thumb cannot reliably hit. */
  min-height: 44px;
}
.sitebrand:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }
.sitebrand img{ width: 26px; height: 26px; border-radius: var(--r-control); display: block; }
.sitebrand-name{
  font-family: var(--display); font-size: var(--fs-5); font-weight: var(--fw-hi);
  letter-spacing: -0.02em; line-height: 1;
}
.sitebrand .beta{
  font-size: var(--fs-1); font-weight: var(--fw-hi); color: var(--ink-mute);
  letter-spacing: var(--track-label); text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px var(--space-2); line-height: 1.4;
}

/* The links take the space that is going, and give it back first. */
.sitenav{
  display: flex; align-items: center; gap: var(--space-5);
  margin-inline: auto;
  min-width: 0;
}
.sitenav a{
  font-size: var(--fs-2); font-weight: var(--fw-med); color: var(--ink-mute);
  white-space: nowrap;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sitenav a:hover{ color: var(--ink); }
.sitenav a.on{ color: var(--ink); border-bottom-color: var(--accent); }
.sitenav a:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }

.siteacts{
  display: flex; align-items: center; gap: var(--space-3);
  flex: 0 0 auto;
  /* Never wrap. This is the header's height, and a header that changes height
     as the window moves is the single most noticeable layout fault a site can
     have. */
  flex-wrap: nowrap; white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Site buttons.

   Two ranks and nothing else. Primary is the one thing to do on the page;
   ghost is everything else. Sized to the same height so a row of them has one
   baseline, which is what the header was missing.
   ------------------------------------------------------------------------- */

.sbtn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding-inline: var(--space-4);
  border-radius: var(--r-control);
  font-size: var(--fs-3); font-weight: var(--fw-med); line-height: 1;
  border: 1px solid transparent; background: none; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.sbtn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.sbtn:active{ transform: translateY(1px); }

.sbtn--primary{
  background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-hi);
  border-color: var(--accent);
}
.sbtn--primary:hover{ background: var(--accent-deep); border-color: var(--accent-deep); }

.sbtn--ghost{ color: var(--ink-soft); border-color: var(--line); }
.sbtn--ghost:hover{ color: var(--ink); border-color: var(--line-strong); background: var(--line-soft); }

/* Quiet enough to sit beside a primary without competing, still visibly a
   control. Sign in is this. */
.sbtn--quiet{ color: var(--ink-soft); }
.sbtn--quiet:hover{ color: var(--ink); background: var(--line-soft); }

.sbtn--lg{ min-height: 48px; padding-inline: var(--space-6); font-size: var(--fs-4); }
.sbtn--block{ display: flex; width: 100%; }

/* The theme control, matched to the button height so the header has one row. */
.sitehead .themebtn{
  width: 40px; height: 40px; border-radius: var(--r-control);
  display: grid; place-items: center;
  color: var(--ink-mute); background: none; border: 1px solid var(--line);
  cursor: pointer; flex: 0 0 auto;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.sitehead .themebtn:hover{ color: var(--ink); background: var(--line-soft); }
.sitehead .themebtn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.sitehead .themebtn svg{ width: 17px; height: 17px; display: block; }

/* -------------------------------------------------------------------------
   The mobile menu.

   A real one. Below the breakpoint the links used to be set to display:none
   with nothing in their place, so a phone had the brand, Sign in and the
   primary button and no route to any other page on the site except through the
   footer. This is a disclosure button and a panel, it traps nothing, it closes
   on Escape and on any link, and it clears the notch at the top and the home
   indicator at the bottom.
   ------------------------------------------------------------------------- */

.menubtn{
  display: none;
  width: 40px; height: 40px; border-radius: var(--r-control);
  place-items: center; flex: 0 0 auto;
  color: var(--ink-soft); background: none; border: 1px solid var(--line);
  cursor: pointer;
}
.menubtn:hover{ color: var(--ink); background: var(--line-soft); }
.menubtn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.menubtn svg{ width: 20px; height: 20px; display: block; }

/* A sibling of the header, not a child of it.
 *
 * .sitehead carries a backdrop-filter, and an element with a filter or a
 * backdrop-filter becomes the containing block for its position:fixed
 * descendants. Inside the header, this panel's `top` and `bottom` therefore
 * resolved against a 64px bar rather than against the viewport, and the mobile
 * menu opened as a 57px sliver with everything in it out of reach. */
.menupanel{
  position: fixed;
  top: calc(var(--safe-top) + 64px);
  left: 0; right: 0;
  bottom: 0;
  z-index: 59;
  display: none;
  flex-direction: column;
  padding: var(--space-5) max(var(--gutter), var(--safe-left), var(--safe-right))
           calc(var(--safe-bottom) + var(--space-6));
  background: var(--ground);
  border-top: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}
.menupanel.open{ display: flex; }
/* The links scroll; the two things you came for do not.
   Five links at a comfortable 57px each plus three full-width controls is
   taller than a 390 by 760 phone, and Open Sailyn was the item that fell off
   the end. Same rule as the sheets: what finishes the job is pinned. */
.menu-links{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.menu-links::-webkit-scrollbar{ display: none; }
.menupanel a{
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--fs-4); font-weight: var(--fw-med); color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.menupanel a:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.menu-acts{
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Six links since Downloads joined them (founder, 5 October), so between the
   menu's breakpoint and a wide screen they sit closer rather than running
   under the controls on the right. */
@media (max-width: 1239px){
  .sitenav{ gap: var(--space-3); }
}
@media (max-width: 979px){
  .sitenav{ display: none; }
  .menubtn{ display: grid; }
  /* Sign in moves into the menu on a phone. The primary stays in the header,
     because it is the one control on the site that must never be more than one
     tap away. */
  .siteacts .sbtn--quiet{ display: none; }
}
@media (max-width: 620px){
  /* And so does the language switcher, for exactly the same reason the theme
     control gives below: site.js builds one into the header and a second into
     the menu, so hiding the header copy loses nothing.
   *
   * It never had this rule because it arrived after the header's own
   * arithmetic was written, and it is the last item in .siteacts, so it is the
   * one that runs off the edge. On a 320-point phone the header was brand,
   * theme, Open Sailyn, menu and a language button with no room left, and the
   * language button was clipped rather than wrapped: it sat half outside the
   * screen with no way to reach the other half. */
  .sitehead .siteacts > .langsel{ display: none; }
}
@media (min-width: 980px){
  html:not(.nav-tight) .menupanel{ display: none !important; }
}
/* The links do not fit beside the controls, in this language at this width
   (site.js wireFit), so the header is the phone's: the menu button, with the
   links and Sign in inside it. French with six links does not fit at any
   desktop width, and a breakpoint per language is a guess that goes stale. */
.nav-tight .sitenav{ display: none; }
.nav-tight .menubtn{ display: grid; }
.nav-tight .siteacts .sbtn--quiet{ display: none; }
.nav-tight .siteacts{ margin-left: auto; }
@media (max-width: 460px){
  /* At this width the label is the first thing to give, not the button. */
  .sitebrand .beta{ display: none; }
  .sitehead-in{ gap: var(--space-2); }
  .sbtn{ padding-inline: var(--space-3); }
}
@media (max-width: 380px){
  /* The narrowest phones still in use are 320 points across. Brand, theme,
     Open Sailyn and the menu control do not fit on one row there, and the
     header would rather lose the theme control, which is also in the menu,
     than lose the one button the whole site is pointing at. */
  .sitehead .siteacts > .themebtn{ display: none; }
  .sitebrand-name{ font-size: var(--fs-4); }
}
/* Inside the menu it is a full-width control like the two above it, not a
   36px square. */
.menu-theme{ justify-content: center; }
.menu-theme svg{ width: 18px; height: 18px; }
@media (min-width: 980px){ .menu-theme{ display: none; } }

/* When the panel is open the page behind it must not scroll under it. */
body.menu-open{ overflow: hidden; }


/* =========================================================================
   THE FOOTER.

   It was eleven links in one flat column with the copyright line wedged
   between Impressum and Contact. Four groups now, named for what somebody is
   looking for rather than for how the files are organised, and the legal line
   is a row of its own under a rule.
   ========================================================================= */

.sitefoot{
  border-top: 1px solid var(--line);
  padding-top: var(--space-7);
  padding-bottom: calc(var(--safe-bottom) + var(--space-7));
  margin-top: var(--space-7);
}
.sitefoot-in{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px){
  .sitefoot-in{ grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6) var(--space-5); }
}
@media (min-width: 980px){
  .sitefoot-in{ grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
}

.foot-id{ max-width: 42ch; }
.foot-brand{
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--display); font-size: var(--fs-5); font-weight: var(--fw-hi); color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: var(--space-3);
}
.foot-brand img{ width: 22px; height: 22px; border-radius: var(--r-control); }
.foot-tag{
  font-size: var(--fs-2); font-weight: var(--fw-med); color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.foot-note{ font-size: var(--fs-2); color: var(--ink-mute); line-height: 1.6; }

.foot-col h3{
  font-size: var(--fs-1); font-weight: var(--fw-hi); color: var(--ink-mute);
  letter-spacing: var(--track-label); text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.foot-col a{
  display: block;
  font-size: var(--fs-2); color: var(--ink-soft); line-height: 1.5;
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.foot-col a:hover{ color: var(--ink); }
.foot-col a:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }

.foot-legal{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-1); color: var(--ink-mute);
}
.foot-legal a{ color: var(--ink-mute); }
.foot-legal a:hover{ color: var(--ink-soft); }
/* Every language this page exists in, as plain links a crawler can follow
   (build/locales.js writes them). Pushed to the row's far end. */
.foot-langs{ display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-left: auto; }
.foot-langs:empty{ display: none; }
.foot-langs a[aria-current="page"]{ color: var(--ink-soft); }

/* On a phone the columns stack, and two of them per row is more useful than
   one long ladder of headings. */
@media (max-width: 699px){
  .sitefoot-in{ grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); }
  .foot-id{ grid-column: 1 / -1; }
}


/* =========================================================================
   PROSE.

   The long-form pages had their type in legal.css and it was right. What they
   did not have was a shared reading measure or a heading that knew where a
   section started. This is applied by adding .prose to the container; legal.css
   keeps `.legal` for the documents themselves.
   ========================================================================= */

.prose{ max-width: var(--measure-w); }
.prose > * + *{ margin-top: var(--space-4); }
.prose h2{
  font-size: var(--fs-5); font-weight: var(--fw-med); color: var(--ink);
  letter-spacing: var(--track-title); line-height: 1.2;
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  text-wrap: balance;
}
.prose h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3{
  font-size: var(--fs-4); font-weight: var(--fw-med); color: var(--ink);
  margin-top: var(--space-6);
}
.prose p{ font-size: var(--fs-3); line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.prose a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--line-strong); }
.prose a:hover{ text-decoration-color: var(--ink); }
.prose ul, .prose ol{ padding-left: var(--space-5); }
.prose li{ font-size: var(--fs-3); line-height: 1.7; color: var(--ink-soft); margin-top: var(--space-2); }
.prose b, .prose strong{ color: var(--ink); font-weight: var(--fw-hi); }


/* =========================================================================
   PAGE HEADS.

   Every page opens the same way: what this is, in one line, over a rule.
   ========================================================================= */

.pagehead{ padding-top: var(--space-7); padding-bottom: var(--space-6); }
.pagehead h1{
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  font-weight: var(--fw-med); line-height: 1.05;
  letter-spacing: var(--track-title); color: var(--ink);
  text-wrap: balance;
}
.pagehead .pagehead-sub{
  margin-top: var(--space-4);
  font-size: var(--fs-4); line-height: 1.6; color: var(--ink-soft);
  max-width: var(--measure-w); text-wrap: pretty;
}
.pagehead .pagehead-meta{
  margin-top: var(--space-4);
  font-size: var(--fs-2); color: var(--ink-mute);
}


/* =========================================================================
   THE CHANGELOG.

   A release is a run of content under a rule with its date and its title on
   the rule, not a card. Ten cards down a page is ten boxes; ten rules is a
   list of releases, which is what it is.
   ========================================================================= */

.log{ max-width: 78ch; }

.page .rel,
.wrap.page .rel{
  background: none; border: none; border-radius: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-6);
  margin-bottom: 0;
}
.log > .rel:first-child{ border-top: 0; padding-top: 0; }

.page .rel-h,
.wrap.page .rel-h{
  display: flex; align-items: baseline; gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  padding-bottom: 0; margin-bottom: var(--space-4);
  border-bottom: 0;
}
.page .rel-d{
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-2); color: var(--ink-mute);
  flex: 0 0 auto;
}
.page .rel-t{
  font-size: var(--fs-4); font-weight: var(--fw-med); color: var(--ink);
  letter-spacing: -0.01em; flex: 1 1 24ch; min-width: 0;
}

.page .rel ul{ list-style: none; margin: 0; padding: 0; }
.page .rel li,
.wrap.page .rel li{
  position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3);
  font-size: var(--fs-3); line-height: 1.65; color: var(--ink-soft);
}
/* The kind, as a word rather than as a coloured dot you have to decode against
   a key. The key stays for the colour, and the word carries it for anyone who
   cannot see the colour at all. */
.page .rel li::before{
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
}
.page .rel li.new::before{ background: var(--accent); }
.page .rel li.fix::before{ background: var(--danger); }
.page .rel li.changed::before{ background: var(--tide); }

.page .tagkey{
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6); font-size: var(--fs-2); color: var(--ink-mute);
}
.page .tagkey span{ display: inline-flex; align-items: center; gap: var(--space-2); }
.page .tagkey i{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }


/* =========================================================================
   WHO BUILT IT, AND THE QUESTION PAGES.

   Same move: a question is a run of content under a rule, not a box. A page of
   boxed answers is a page that looks like a form.
   ========================================================================= */

.page .qa{
  background: none; border: none; border-radius: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-2);
  margin-bottom: 0;
  max-width: var(--measure-w);
}
.page .qa h2{
  font-size: var(--fs-4); font-weight: var(--fw-med); color: var(--ink);
  margin: 0 0 var(--space-3);
  padding-bottom: 0; border-bottom: 0;
  letter-spacing: -0.01em;
}
.page .qa p{ font-size: var(--fs-3); line-height: 1.7; color: var(--ink-soft); }
.page .qa p:last-child{ margin-bottom: 0; }
.page .qa ul{ margin-bottom: 0; }
.page .qa li{ padding-left: var(--space-4); position: relative; }
.page .qa li::before{
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-mute);
}
.page .qa .cta{ margin-top: var(--space-4); }

.page .lede{
  font-size: var(--fs-4); line-height: 1.6; color: var(--ink-soft);
  margin-bottom: var(--space-7); text-wrap: pretty; max-width: var(--measure-w);
}

.page{ padding-top: var(--space-5); }


/* =========================================================================
   RESPONSIVE AND SAFE AREAS, EVERYWHERE ON THE SITE.

   No page body scrolls sideways, whatever is in it. Anything that can be wider
   than its column scrolls inside itself.
   ========================================================================= */

.scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
img, svg, video{ max-width: 100%; }

@media (max-width: 520px){
  :root{ --gutter: var(--space-4); }
}

/* ---------- the language switcher ----------
   site.js builds this into .siteacts and the mobile menu on every public page,
   so it is styled once here rather than in each page's own <style>. */
.langsel{ position:relative; }
.langbtn{ display:flex; align-items:center; gap:var(--space-1);
          background:none; border:none; color:var(--ink-soft); cursor:pointer;
          padding:var(--space-2) var(--space-3); font-size:var(--fs-2);
          border-radius:var(--r-control); font-family:inherit; }
.langbtn:hover{ color:var(--ink); background:var(--line-soft); }
.langbtn svg{ width:14px; height:14px; }
.langbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.langmenu{ position:absolute; top:calc(100% + 4px); right:0; z-index:40;
           background:var(--surface-2); border:1px solid var(--line);
           border-radius:var(--r-control); padding:var(--space-1);
           min-width:180px; display:none; }
.langmenu.open{ display:block; }
.langopt{ display:block; width:100%; text-align:left; background:none;
          border:none; padding:var(--space-2) var(--space-3);
          font-size:var(--fs-2); color:var(--ink); cursor:pointer;
          border-radius:var(--r-control); font-family:inherit; }
.langopt:hover{ background:var(--line-soft); }
.langopt.active{ color:var(--accent); font-weight:var(--fw-hi); }
.langopt:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.langopt-name{ display:block; }
.langopt-endo{ display:block; font-size:var(--fs-1); color:var(--ink-mute);
               font-weight:var(--fw-body); }
.langopt.active .langopt-endo{ color:var(--ink-soft); }
/* ---------- who wrote a page, and when (Task 11.10) ----------
   One quiet line under a content page's opening: the author, linked to his
   page, and when the page was published and last changed. Numbers are dates
   here, not figures, so they stay in the text face. */
.byline{ margin:var(--space-2) 0 0; font-size:var(--fs-2); color:var(--ink-mute); }
.byline a{ color:var(--ink-soft); }
/* Who wrote it, under the byline (build/dates.js). */
.byline-bio{ margin:var(--space-1) 0 0; font-size:var(--fs-2); color:var(--ink-mute); max-width:66ch; }
.byline-bio a{ color:var(--ink-soft); }
/* Where the page sits: Sailyn > Articles > this page (build/dates.js). */
.crumbs{ margin:0 0 var(--space-3); font-size:var(--fs-2); color:var(--ink-mute); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-2); list-style:none; margin:0; padding:0; }
/* .legal draws a dot before every li and indents it; a trail is not a list
   to read down, so both are undone here and the separator is text. */
.legal .crumbs li{ padding:0; font-size:var(--fs-2); line-height:1.5; color:var(--ink-mute); }
.legal .crumbs li::before{ content:none; }
.legal .crumbs li + li::before{ content:"/"; position:static; display:inline; width:auto; height:auto;
  background:none; border-radius:0; margin-right:var(--space-2); color:var(--ink-mute); }
.crumbs a{ color:var(--ink-soft); }
.crumbs [aria-current="page"]{ color:var(--ink-mute); }

/* ---------- read this page in your language? (Task 11.5) ----------
   One line under the header, drawn by site.js only when this page has a copy
   in the browser's language. A notice is content, so it is a hairline on one
   edge and no fill; the offer is a text link and No thanks a quiet button. */
.langoffer{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4);
            padding:var(--space-2) var(--space-4); border-bottom:1px solid var(--line);
            font-size:var(--fs-2); color:var(--ink-soft); }
.langoffer p{ margin:0; }
.langoffer-go{ color:var(--accent); font-weight:var(--fw-med); }
.langoffer-no{ background:none; border:none; padding:var(--space-1) var(--space-2); margin-left:auto;
               color:var(--ink-mute); font:inherit; cursor:pointer; border-radius:var(--r-control); }
.langoffer-no:hover{ color:var(--ink); background:var(--line-soft); }
.langoffer a:focus-visible, .langoffer-no:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* In the mobile menu the dropdown has room to open downwards into the sheet. */
.menu-acts .langsel{ width:100%; }
.menu-acts .langbtn{ width:100%; justify-content:center; }
.menu-acts .langmenu{ position:static; width:100%; margin-top:var(--space-1); }

/* The comparison table on the three "Sailyn vs" pages (legal.css's .ltable).
   Its labels are sentences, so they wrap; on a phone the table becomes rows,
   and each cell is named by the product it describes. */
.vs-table td:first-child{ white-space:normal; width:30%; }
.vs-table td[data-h]{ width:35%; }
.vs-src{ margin:0 0 var(--space-4); font-size:var(--fs-2); color:var(--ink-mute); }
.vs-src cite{ font-style:normal; }
.vs-src a{ color:var(--ink-soft); }
@media (max-width:620px){
  .vs-table td:first-child, .vs-table td[data-h]{ width:100%; }
  .vs-table td[data-h]::before{ content:attr(data-h); display:block; font-size:var(--fs-1);
    font-weight:var(--fw-med); color:var(--ink-mute); letter-spacing:.05em; text-transform:uppercase; }
}

/* A numbered method: the number is the point, so it replaces the dot. */
.page .qa ol.qa-steps{ list-style:none; counter-reset:step; margin:0 0 var(--space-4); padding:0; }
.page .qa ol.qa-steps li{ counter-increment:step; padding-left:var(--space-6); }
.page .qa ol.qa-steps li::before{ content:counter(step); width:auto; height:auto; border-radius:0;
  background:none; top:0; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-weight:var(--fw-med); color:var(--ink-mute); }
/* A source under the claim it supports: author, year, journal, linked. */
.page .qa .qa-src{ font-size:var(--fs-1); line-height:1.6; color:var(--ink-mute); margin-top:calc(-1 * var(--space-2)); }
.page .qa .qa-src cite{ font-style:normal; }
.page .qa .qa-src a{ color:var(--ink-soft); }

/* An entry on an alternatives page: the product's name, what it is, and
   who it suits, led by a short label. */
.page .qa.alt-opt h3{ margin-top:0; }
.page .qa .alt-fit strong{ font-weight:var(--fw-med); color:var(--ink); }