/*
 * famtec browser check stylesheet
 *
 * The colour variables are not defined here. They come from
 * configs/palette.yaml and are inlined into the document head per request, so
 * the theme is right in the first paint and the accent of the current stage is
 * already resolved. This sheet only ever refers to --accent and never needs to
 * know which of the three stages it is dressing.
 *
 * Layout follows the "warmes Archiv" look of famtec.ch: warm paper tones,
 * a serif for headings, the system sans for running text, restrained depth.
 */

:root{
  --wrap:960px;
  --prose:680px;
}

*{box-sizing:border-box;}

html{
  /* Nothing here fixes a font size, so the browser setting keeps working. */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}

h1,h2,h3,.verdict-title{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-weight:600;
}

a{color:var(--accent-text);}
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* Out of the way until somebody tabs to it. Sighted mouse users scroll past
   the banner; keyboard users would otherwise walk through it on every page. */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:20;
  padding:10px 16px;
  background:var(--paper-raised);
  border:2px solid var(--accent);
  border-radius:0 0 8px 0;
}
.skip:focus{left:0;}

/* A target that takes focus must not then draw a ring around the whole page. */
main:focus{outline:none;}

/* ---------------------------------------------------------------------------
   State banner
   Present on every page. On the two stages that warn it follows while
   scrolling; on the safe one it scrolls away. The rule for that is set by the
   server, not here, because it belongs to the stage.
   --------------------------------------------------------------------------- */

.banner{
  display:flex;
  gap:11px;
  align-items:flex-start;
  justify-content:center;
  padding:14px 24px;
  text-align:center;
  background:var(--accent-soft);
  border-bottom:2px solid var(--accent);
}
body[data-sticky="yes"] .banner{
  position:sticky;
  top:0;
  z-index:5;
}
.banner .mark{flex-shrink:0; margin-top:2px;}
.banner-text{
  margin:0;
  max-width:760px;
  font-size:.95rem;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.hero{
  max-width:var(--wrap);
  margin:0 auto;
  padding:44px 24px 26px;
  text-align:center;
}
.hero.slim{padding:30px 24px 14px;}

.eyebrow{
  margin:0 0 10px;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-soft);
}
.eyebrow a{color:inherit; text-decoration:none;}
.eyebrow a:hover{text-decoration:underline;}

h1{
  margin:0 0 12px;
  font-size:clamp(1.6rem,4vw,2.3rem);
  letter-spacing:-.01em;
  text-shadow:var(--text-lift);
}
.hero.slim h1{font-size:clamp(1.35rem,3vw,1.75rem); margin-bottom:0;}

.subtitle{
  max-width:36rem;
  margin:0 auto;
  color:var(--ink-soft);
}

/* The introduction in the header. Narrow and quiet: it explains the page
   once, and after that it should be easy to fold away and easy to ignore. */
.intro{
  max-width:34rem;
  margin:16px auto 0;
  text-align:left;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:10px;
}
.intro > summary{
  cursor:pointer;
  padding:9px 14px;
  font-size:.85rem;
  font-weight:600;
  color:var(--accent-text);
  list-style:none;
}
.intro > summary::-webkit-details-marker{display:none;}
.intro > summary::before{content:"+ "; font-weight:700;}
.intro[open] > summary::before{content:"– ";}
.intro > summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:10px;}
.intro p{
  margin:0;
  padding:0 14px 12px;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Verdict card on the start page
   --------------------------------------------------------------------------- */

main{max-width:var(--wrap); margin:0 auto; padding:0 24px 20px;}

.verdict{
  max-width:var(--prose);
  margin:0 auto 26px;
  padding:26px 22px 24px;
  text-align:center;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:12px;
  box-shadow:var(--shadow-rest);
}
.verdict-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin:0 0 16px;
}
.verdict-title{font-size:1.2rem;}
.mark{display:inline-flex;}
.mark svg{display:block; color:var(--accent-text);}

/* The replica of an address bar. Deliberately neutral: it must not look like
   any particular browser, because a page element that imitates browser chrome
   is the very trick this site warns about. */
.urlbar{
  display:inline-flex;
  align-items:center;
  gap:9px;
  max-width:100%;
  margin:0 auto 8px;
  padding:9px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
}
.url{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.url .scheme{color:var(--accent-text); font-weight:600;}
.url .host{color:var(--ink-soft);}

.replica-note{
  margin:0 auto 16px;
  max-width:34rem;
  font-size:.8rem;
  color:var(--ink-soft);
}

.pointer,
.meaning{
  max-width:34rem;
  margin:0 auto;
}
.pointer{margin-bottom:12px;}
.meaning{color:var(--ink-soft);}

/* ---------------------------------------------------------------------------
   The path diagram
   Drawn rather than described: the three stages differ in what happens along
   the way, and a picture carries that in one look.
   --------------------------------------------------------------------------- */

.diagram{
  max-width:var(--prose);
  margin:0 auto 30px;
  padding:18px 10px 12px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  text-align:center;
}
.diagram svg{width:100%; height:auto; overflow:visible;}

.diagram .road{
  stroke:var(--line);
  stroke-width:2;
  stroke-dasharray:5 5;
}
.diagram .stop circle{
  fill:var(--paper);
  stroke:var(--line);
  stroke-width:1.5;
}
.diagram .end rect{
  fill:var(--paper);
  stroke:var(--ink-soft);
  stroke-width:1.5;
}
.diagram text{
  fill:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;
  text-anchor:middle;
}

/* An eye over a station: this one can read along. Only drawn where that is
   true, so the picture never suggests a threat that is not there. */
.diagram .peek path{fill:none; stroke:var(--accent); stroke-width:1.6;}
.diagram .peek circle{fill:var(--accent); stroke:none;}

.diagram .server rect{stroke:var(--accent);}
.diagram .badge{fill:var(--accent-text); font-size:15px; font-weight:700;}
.diagram .badge-mark{stroke:var(--accent-text); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}

.diagram .packet rect{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5;}
.diagram .packet-text{fill:var(--accent-text); font-size:10.5px; font-weight:600;}
.diagram .lock{stroke:var(--accent-text); stroke-width:1.8;}

/* The parcel travels the road. Position is set here rather than in the
   markup so the motion can be switched off in one place. */
.diagram .packet{transform:translate(96px,60px);}
@media (prefers-reduced-motion: no-preference){
  .diagram .packet{animation:travel 5s ease-in-out infinite;}
}
@keyframes travel{
  0%    {transform:translate(96px,60px); opacity:0;}
  8%    {opacity:1;}
  92%   {opacity:1;}
  100%  {transform:translate(548px,60px); opacity:0;}
}

.diagram figcaption{
  margin-top:6px;
  font-size:.88rem;
  color:var(--ink-soft);
}

/* Drawings placed from inside a text. They share the diagram's colours but
   sit in the flow of the prose rather than above it. */
.figure{
  margin:0 0 20px;
  padding:14px 10px 8px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:center;
}
.figure svg{width:100%; height:auto;}
.figure text{
  fill:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;
  text-anchor:middle;
}
.figure .road{stroke:var(--line); stroke-width:2; stroke-dasharray:5 5;}
.figure .end rect{fill:var(--paper); stroke:var(--ink-soft); stroke-width:1.5;}

.figure .cut rect{fill:var(--accent-soft); stroke:var(--accent); stroke-width:2;}
.figure .cut text:first-of-type{fill:var(--accent-text); font-weight:700; font-size:12.5px;}

.figure .seal circle{fill:var(--paper); stroke:var(--accent); stroke-width:1.5;}
.figure .seal path{stroke:var(--accent-text); stroke-width:1.6;}

.figure .trait rect{fill:var(--paper); stroke:var(--line); stroke-width:1.3;}
.figure .flow{fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.55;}
.figure .result rect{fill:var(--accent-soft); stroke:var(--accent); stroke-width:2;}
.figure .result text{fill:var(--accent-text); font-size:14px; font-weight:700;}
.figure .result .small{fill:var(--ink-soft); font-size:10.5px; font-weight:400;}

.figure figcaption{margin-top:4px; font-size:.85rem; color:var(--ink-soft);}

/* A pointer to a neighbouring service, placed from inside a text. Set apart
   from the lesson, because it leads away from this site. */
.service{
  margin:0 0 18px;
  padding:14px 16px;
  background:var(--paper-raised);
  border:1px solid var(--accent);
  border-radius:10px;
}
.service-title{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:1.02rem;
  font-weight:600;
  color:var(--accent-text);
  text-decoration:none;
}
a.service-title:hover{text-decoration:underline;}
.service-text{margin:4px 0 0; font-size:.92rem; color:var(--ink-soft);}
.service-note{margin:8px 0 0; font-size:.82rem; color:var(--ink-soft); font-style:italic;}
.service-pending{border-color:var(--line);}
.service-pending .service-title{color:var(--ink-soft);}

/* ---------------------------------------------------------------------------
   Folded detail inside a lesson
   Two audiences at once: the depth stays available without turning the page
   into a wall of text.
   --------------------------------------------------------------------------- */

.nerd{
  margin:0 0 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-raised);
}
.nerd > summary{
  cursor:pointer;
  padding:10px 14px;
  font-size:.9rem;
  color:var(--accent-text);
  font-weight:600;
  list-style:none;
}
.nerd > summary::-webkit-details-marker{display:none;}
.nerd > summary::before{content:"+ "; font-weight:700;}
.nerd[open] > summary::before{content:"– ";}
.nerd > summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:8px;}
.nerd-body{padding:0 14px 4px; font-size:.94rem;}
.nerd-body > :last-child{margin-bottom:12px;}

/* ---------------------------------------------------------------------------
   The values the request carried
   --------------------------------------------------------------------------- */

.values{
  max-width:var(--prose);
  margin:0 auto 34px;
}
.values h2{margin:0 0 8px; font-size:1.2rem;}
.values-intro{margin:0 0 20px; color:var(--ink-soft);}

/* A grid of small cards rather than a long list. The point of this section is
   to be taken in at a glance; a table of twelve rows is read by nobody. */
/* One list, label and value in two columns. Tried as a grid of cards first;
   a card each turns a dozen readings into a dozen objects to look at, while a
   list is read top to bottom the way a table of values should be. */
.valuelist{
  margin:0;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.value{
  display:grid;
  grid-template-columns:12rem 1fr;
  gap:16px;
  padding:11px 18px;
  border-bottom:1px solid var(--line);
}
.value:last-child{border-bottom:none;}
.value dt{color:var(--ink-soft); font-size:.9rem;}
/* The one row that carries bad news gets the accent, so it is found without
   reading the others. */
.value.alarm{background:var(--accent-soft);}
.value.alarm dd{color:var(--accent-text);}

/* The browser's own mark sits with its name, and the row keeps its baseline
   whether or not there is one. */
.value dd .brand{align-self:center;}

.value dd{
  margin:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:1rem;
  font-weight:600;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  overflow-wrap:anywhere;
}
.value-note{
  flex-basis:100%;
  margin-top:3px;
  color:var(--ink-soft);
  font-size:.8rem;
  font-weight:400;
  line-height:1.45;
}

.langs{gap:6px 14px;}
.lang{display:inline-flex; align-items:center; gap:6px;}

/* One notch per version behind. Counting them is quicker than reading a
   number, and they are what makes "four behind" feel like four. */
.gap{display:inline-flex; align-items:center; gap:3px;}
.notch{
  display:block;
  width:5px; height:14px;
  border-radius:2px;
  background:var(--accent);
}
.notch-more{color:var(--accent-text); font-size:.8rem; font-weight:700;}

/* Three steps for the protocol version, so nobody has to know what 1.2 means
   to see where it stands. */
.strength{display:inline-flex; align-items:flex-end; gap:2px; height:14px;}
.strength .step{
  display:block;
  width:5px;
  border-radius:1px;
  background:var(--line);
}
.strength .step:nth-child(1){height:6px;}
.strength .step:nth-child(2){height:10px;}
.strength .step:nth-child(3){height:14px;}
.strength .step-on{background:var(--accent);}

/* A flag never stands alone, so it is decorative and sized to sit on the
   text baseline rather than dominate the row. */
.flag{
  display:block;
  width:19px;
  height:14px;
  border:1px solid var(--line);
  border-radius:2px;
}

.langs{gap:6px 14px;}
.lang{display:inline-flex; align-items:center; gap:6px;}

/* One notch per version behind. Counting them is quicker than reading a
   number, and they are what makes "four behind" feel like four. */
.gap{display:inline-flex; align-items:center; gap:3px;}
.notch{
  display:block;
  width:5px; height:14px;
  border-radius:2px;
  background:var(--accent);
}
.notch-more{color:var(--accent-text); font-size:.8rem; font-weight:700;}

/* Three steps for the protocol version, so nobody has to know what 1.2 means
   to see where it stands. */
.strength{display:inline-flex; align-items:flex-end; gap:2px; height:14px;}
.strength .step{
  display:block;
  width:5px;
  border-radius:1px;
  background:var(--line);
}
.strength .step:nth-child(1){height:6px;}
.strength .step:nth-child(2){height:10px;}
.strength .step:nth-child(3){height:14px;}
.strength .step-on{background:var(--accent);}

/* A flag never stands alone, so it is decorative and sized to sit on the
   text baseline rather than dominate the row. */
.flag{
  display:block;
  width:19px;
  height:14px;
  border:1px solid var(--line);
  border-radius:2px;
}

/* Two halves of one tag, cut diagonally: the language on the upper left, the
   region on the lower right. A hairline between them keeps two similar flags
   from reading as one smeared image. */
.flag-split{position:relative; overflow:hidden; flex-shrink:0;}
.flag-half{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.flag-lang{clip-path:polygon(0 0, 100% 0, 0 100%);}
.flag-region{clip-path:polygon(100% 0, 100% 100%, 0 100%);}
.flag-split::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--paper-raised) calc(50% - 0.5px),
    var(--paper-raised) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}

/* Drawn in one colour, so it takes the text colour and needs no filter to
   survive the dark theme. */
.osmark svg{color:var(--ink-soft);}

/* A mark that brings its own colours keeps them in both themes. Tux is black,
   white and yellow; recolouring him would make him somebody else. */
.osmark-colour{display:block; flex-shrink:0;}

.raw{margin-top:18px;}
.raw summary{cursor:pointer; color:var(--ink-soft); font-size:.9rem;}
.raw summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.raw-text{
  margin:10px 0 6px;
  padding:12px 14px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
}

@media (max-width:520px){
  .value{grid-template-columns:1fr; gap:2px;}
}

/* ---------------------------------------------------------------------------
   Checks that run in the browser
   --------------------------------------------------------------------------- */

.jschecks{margin-top:34px;}

/* Not an error state: without javascript this is simply what the page can
   say, and it says which parts are missing. */
.nojs{
  margin:0;
  padding:14px 16px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  font-size:.92rem;
  color:var(--ink-soft);
}

/* A value the browser could pin down more precisely than the request did. */
.value.refined dd{font-weight:600;}
.value.refined .value-note{font-weight:400;}

.ondemand{margin-top:18px;}
.ondemand-note{margin:0 0 12px; font-size:.88rem; color:var(--ink-soft);}
.ondemand button{
  font:inherit;
  cursor:pointer;
  margin:0 8px 8px 0;
  padding:8px 16px;
  color:var(--accent-text);
  background:transparent;
  border:1px solid var(--accent);
  border-radius:999px;
}
.ondemand button:hover:not([disabled]){background:var(--accent-soft);}
.ondemand button[disabled]{
  color:var(--ink-soft);
  border-color:var(--line);
  cursor:default;
}

/* The point made after the measurements, not before: it lands better once
   somebody has seen their own values. */
.afterthought{
  margin-top:26px;
  padding:18px 20px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
}
.afterthought h3{margin:0 0 8px; font-size:1.05rem;}
.afterthought p{margin:0 0 12px; font-size:.94rem; color:var(--ink-soft);}
.afterthought p:last-child{margin-bottom:0;}
.afterthought .onward{color:var(--accent-text);}

/* ---------------------------------------------------------------------------
   Stage navigation
   --------------------------------------------------------------------------- */

.stagenav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:38px;
}
.stagenav a{
  padding:6px 14px;
  font-size:.85rem;
  text-decoration:none;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:999px;
}
.stagenav a:hover{border-color:var(--ink-soft);}
.stagenav a[aria-current="page"]{
  color:var(--accent-text);
  border-color:var(--accent);
  font-weight:600;
}

/* ---------------------------------------------------------------------------
   Text pages
   Same shape as on famtec.ch: one card holding the whole text, key and value
   lists for the formal parts, a quieter note under a section.
   --------------------------------------------------------------------------- */

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px 20px;}

.card{
  max-width:var(--prose);
  margin:0 auto;
  padding:26px 30px 30px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-rest);
}
.card h2{margin:28px 0 8px; font-size:1.15rem;}
.card h2:first-child{margin-top:0;}
.card h3{margin:20px 0 6px; font-size:1rem;}
.card p{margin:0 0 12px;}
.card ul{margin:0 0 12px; padding-left:1.3em;}
.card li{margin-bottom:4px;}

.kv{
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:6px 16px;
  margin:0 0 14px;
  font-size:.94rem;
}
.kv dt{color:var(--ink-soft);}
.kv dd{margin:0;}

/* On the sources page only the source itself is set apart. Emphasising every
   value would turn a reference list into a wall of bold. */
.kv-source{font-weight:600;}

.note{
  margin:0 0 14px;
  font-size:.88rem;
  color:var(--ink-soft);
}

.card table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:.9rem;}
.card th,
.card td{padding:8px 10px; border:1px solid var(--line); text-align:left; vertical-align:top;}
.card thead th{background:var(--paper); font-weight:600;}

@media (max-width:560px){
  .card{padding:20px 18px 22px;}
  .kv{grid-template-columns:1fr; gap:2px;}
  .kv dd{margin-bottom:8px;}
}

/* ---------------------------------------------------------------------------
   Running text
   --------------------------------------------------------------------------- */

.prose{max-width:var(--prose); margin:0 auto;}
.prose h2{margin:34px 0 10px; font-size:1.2rem;}
.prose p{margin:0 0 14px;}
.prose ul{margin:0 0 14px; padding-left:1.3em;}
.prose li{margin-bottom:6px;}
.lead{font-size:1.05rem;}

.prose h3{margin:24px 0 8px; font-size:1.05rem;}
.prose strong{font-weight:600;}
.prose code{
  padding:2px 5px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85em;
  overflow-wrap:anywhere;
}

/* A table of running text, not a data grid. It scrolls inside its own box so
   a narrow screen never pushes the page sideways. */
.prose .tablewrap,
.prose table{
  width:100%;
  margin:0 0 18px;
}
.prose table{
  border-collapse:collapse;
  font-size:.92rem;
}
.prose th,
.prose td{
  padding:8px 12px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.prose thead th{background:var(--paper-raised); font-weight:600;}
.prose ol{margin:0 0 14px; padding-left:1.3em;}

.more{margin-top:26px;}

.onward{
  display:inline-block;
  margin-top:4px;
  padding:9px 18px;
  text-decoration:none;
  font-weight:600;
  color:var(--accent-text);
  border:1px solid var(--accent);
  border-radius:999px;
}
.onward:hover{background:var(--accent-soft);}

/* ---------------------------------------------------------------------------
   The browser comparison
   --------------------------------------------------------------------------- */

.aspect{margin:0 0 34px;}
.aspect h2{margin-bottom:4px;}
.aspect-why{margin:0 0 14px; color:var(--ink-soft); font-size:.95rem;}
.aspect-thin{margin:10px 0 12px; font-size:.85rem; color:var(--ink-soft);}

.ranking{list-style:none; margin:0 0 12px; padding:0; counter-reset:none;}
.ranking li{margin-bottom:6px;}
.rank{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
}
/* The whole row opens the reasoning. A ranking one cannot interrogate is a
   ranking one has to believe. */
.rank > summary{
  display:grid;
  grid-template-columns:2.2rem minmax(9rem, auto) 1fr 4.5rem;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  cursor:pointer;
  list-style:none;
  border-radius:8px;
}
.rank > summary::-webkit-details-marker{display:none;}
.rank > summary:hover{background:var(--accent-soft);}
.rank > summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.rank[open] > summary{border-bottom:1px solid var(--line); border-radius:8px 8px 0 0;}
.breakdown{margin:0; padding:4px 14px 10px;}
.rank-place{
  font-family:Georgia,serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink-soft);
  text-align:right;
}

/* First place gets a cup rather than a number. Everyone sharing the top score
   gets one - the ranking does not invent a difference the numbers do not
   carry, and neither does the picture. */
.trophy{display:inline-flex; justify-content:flex-end;}
.trophy svg{display:block; color:var(--gold);}
.rank-name{display:flex; align-items:center; gap:8px; font-weight:600; min-width:0;}

/* A browser's own mark, beside its name. Decorative: the name is right there,
   and a mark alone would leave anyone who does not recognise it guessing. */
.brand{display:block; flex-shrink:0; width:18px; height:18px;}
.brand-none{visibility:hidden;}
.rank-score{font-size:.9rem; color:var(--ink); text-align:right; font-weight:600;}
.rank-of{color:var(--ink-soft); font-weight:400;}
.rank-open{display:block; font-size:.72rem; color:var(--ink-soft); font-weight:400;}

/* The bar is drawn against every criterion of the aspect, so a short bar in a
   high place shows a browser that is ahead on fewer checks. That is a real
   property of the data and belongs in the picture, not in a footnote. */
.rank-bar{
  display:flex;
  height:14px;
  border-radius:7px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
}
.rank-bar span{display:block; height:100%;}
.bar-met{background:var(--accent);}
.bar-missed{background:var(--line);}
.bar-open{
  background:repeating-linear-gradient(
    45deg, transparent, transparent 3px, var(--line) 3px, var(--line) 6px);
}

.legend{
  display:flex;
  align-items:center;
  gap:6px 16px;
  flex-wrap:wrap;
  margin:0 0 14px;
  font-size:.8rem;
  color:var(--ink-soft);
}
.key{
  display:inline-block;
  width:14px; height:10px;
  margin-right:2px;
  border-radius:3px;
  border:1px solid var(--line);
  vertical-align:-1px;
}
.key-met{background:var(--accent); border-color:var(--accent);}
.key-missed{background:var(--line);}
.key-open{background:repeating-linear-gradient(45deg, transparent, transparent 3px, var(--line) 3px, var(--line) 6px);}

@media (max-width:560px){
  .rank > summary{grid-template-columns:2rem 1fr 4rem; row-gap:6px;}
  .rank-bar{grid-column:1 / -1;}
}

/* The visitor's own browser is marked, not moved: the order stays the order. */
.rank-mine{border-color:var(--accent);}
.rank-mine .rank-place{color:var(--accent-text);}
.rank-yours{
  margin-left:8px;
  padding:1px 8px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--accent-text);
  background:var(--accent-soft);
  border-radius:999px;
  white-space:nowrap;
}

/* The chooser, first on the page: one question at a time, each with a reason
   for asking. Compact enough that it does not push the rankings off screen. */
.chooser{
  margin:0 0 30px;
  padding:18px 20px;
  background:var(--paper-raised);
  border:1px solid var(--accent);
  border-radius:12px;
}
.chooser h2{margin:0 0 6px; font-size:1.15rem;}
.chooser-lead{margin:0 0 14px; font-size:.95rem; color:var(--ink-soft);}
.chooser-hint{margin:0 0 14px; font-size:.88rem; color:var(--ink-soft);}

.promises{list-style:none; margin:0 0 16px; padding:0;}
.promises li{
  padding:8px 12px;
  margin-bottom:6px;
  font-size:.88rem;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
}
.promises strong{color:var(--ink);}

.chooser-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0;}
.chooser-skip{font-size:.85rem; color:var(--ink-soft);}
button.onward{font:inherit; cursor:pointer; background:transparent;}
.chooser-again{
  font:inherit; cursor:pointer;
  padding:8px 16px;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
}
.chooser-again:hover{border-color:var(--ink-soft);}

.progress{height:4px; background:var(--line); border-radius:2px; overflow:hidden;}
.progress-bar{display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease;}
@media (prefers-reduced-motion: reduce){ .progress-bar{transition:none;} }

.progress-text{
  display:flex; justify-content:space-between; align-items:center;
  margin:8px 0 14px; font-size:.8rem; color:var(--ink-soft);
}
.chooser-back{
  font:inherit; font-size:.8rem; cursor:pointer;
  padding:2px 0;
  color:var(--accent-text); background:transparent; border:none;
}
.chooser-back[disabled]{color:var(--line); cursor:default;}

/* Answers as full width targets, so choosing is one clear click rather than
   hunting a radio button. */
.options{display:grid; gap:6px; margin-bottom:16px;}
.option{
  display:grid;
  gap:2px;
  padding:11px 14px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:9px;
}
.option:hover{border-color:var(--accent);}
.option:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.option-picked{border-color:var(--accent); background:var(--accent-soft);}
.option-label{font-weight:600; font-size:.95rem;}
.option-hint{font-size:.8rem; color:var(--ink-soft);}

.preview{padding-top:12px; border-top:1px solid var(--line);}
.preview-title{
  margin:0 0 8px;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.preview .rank > summary{cursor:default; padding:8px 12px;}
.preview .rank > summary:hover{background:transparent;}

.section-title{margin-top:6px;}

/* A rule between sections, wider than the column it separates.
 *
 * It has to break out of the prose container to do that, hence the offset:
 * min-width keeps it at least as wide as the content, width lets it grow to
 * three quarters of the window. On a narrow screen the first wins and the
 * rule simply matches the text, which is what it should do there.
 */
.divider{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:75vw;
  min-width:100%;
  margin:34px auto;
  border:none;
  border-top:2px solid var(--rule);
}

/* Centred under the chooser: the way past it, for anyone who came for the
   table rather than the question. */
.reveal-wrap{margin:0 0 30px; text-align:center;}
.reveal-button{
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  padding:9px 20px;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
}
.reveal-button:hover{border-color:var(--accent); color:var(--accent-text);}
.reveal-button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

/* The configured winner, marked in the rankings below. A colour of its own:
   the accent marks the browser somebody uses, this marks the one their own
   criteria picked, and the two are different statements. Red is avoided on
   purpose - on this site red means an unprotected connection. */
.rank-pick{border-color:var(--pick); border-width:2px;}
.rank-pick .rank-place{color:var(--pick-text);}
.rank-picked{
  margin-left:8px;
  padding:1px 8px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--pick-text);
  background:var(--pick-soft);
  border-radius:999px;
  white-space:nowrap;
}

.profile{margin:0 0 22px;}
.profile h3{margin:0 0 10px; font-size:1.1rem;}
.profile summary{display:flex; align-items:center; gap:9px;}
.profile-mine h3{color:var(--accent-text);}
.profile-note{margin:10px 0 0; font-size:.9rem; color:var(--ink-soft);}
.value-plain{font-weight:400; font-size:.92rem;}

.criteria{margin:0;}
.criterion{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}
.criterion:last-child{border-bottom:none;}
.criterion dt{color:var(--ink-soft);}
.criterion dd{margin:0; font-weight:600; white-space:nowrap;}
.criterion-source{margin-left:8px; font-weight:400; font-size:.85em;}
.criterion-date{margin:12px 0 0; font-size:.82rem; color:var(--ink-soft);}

/* An unverified answer looks unfinished on purpose. A smooth table with half
   of it guessed would look better and be worth less. */
.answer-unbekannt dd{color:var(--ink-soft); font-weight:400; font-style:italic;}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.footer{
  max-width:var(--wrap);
  margin:48px auto 0;
  padding:22px 24px 40px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
}
.footer nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px;}
.with-mark{display:inline-flex; align-items:center; gap:6px;}
.with-mark img{display:block;}
.footer a{color:var(--ink-soft);}
.footer-note{margin:14px 0 0;}

.theme-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 16px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.theme-switch button{
  font:inherit;
  cursor:pointer;
  padding:4px 12px;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
}
.theme-switch button:hover{border-color:var(--ink-soft);}
.theme-switch button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.theme-switch button[aria-pressed="true"]{
  color:var(--accent-text);
  border-color:var(--accent);
  background:var(--accent-soft);
  font-weight:600;
}

.theme-note{margin:0 0 14px; font-size:.82rem; color:var(--ink-soft);}

/* ---------------------------------------------------------------------------
   Development helpers
   Only ever rendered when the server runs with -dev. The bar is deliberately
   loud: a page whose stage was chosen by hand must never be mistaken for the
   real thing, in a screenshot least of all.
   --------------------------------------------------------------------------- */

.devbar{
  padding:10px 24px;
  text-align:center;
  font-size:.85rem;
  font-weight:600;
  color:var(--paper);
  background:var(--ink);
}

.stagelist{list-style:none; margin:0 0 24px; padding:0;}
.stagelist li{margin-bottom:10px;}
.stagelist a{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:14px 18px;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:10px;
}
.stagelist a:hover{border-color:var(--ink-soft);}
.stagelist span{color:var(--ink-soft); font-size:.9rem;}

.note{font-size:.9rem; color:var(--ink-soft);}
.note code{
  padding:2px 5px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:.85em;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   The banner is the one element that grows on a phone, so it loses its side
   padding first rather than pushing the text into a column of two words.
   --------------------------------------------------------------------------- */

@media (max-width:520px){
  .banner{padding:12px 14px; text-align:left;}
  .hero{padding:32px 18px 20px;}
  main{padding:0 18px 16px;}
  .verdict{padding:22px 16px 20px;}
}