/* The style of eduhear.com.

   Two sets of colours live here and they must not be mixed:

   1. The site. The deep blue of the icon, the aqua beside it and the sun.
      Nothing else carries a colour, so a page stays quiet.
   2. The application, under the names that begin with --a-. Every preview
      of a telephone on the first page is drawn with these, and each value
      is the value of Theme.kt and StateColors.kt. A colour of the
      application changes HERE and nowhere else on the site.

   The two differ on purpose: the aqua and the sun of the site swap their
   values between the themes, because #56B6C8 holds only 2.2:1 on #F5F7F9,
   while the application uses #1D7A8C as its secondary colour. */
:root {
  --paper: #F5F7F9;
  --sheet: #FFFFFF;
  --ink: #141A1E;
  --quiet: #4B5A64;
  --line: #CBD6DE;
  --deep: #0B3C5D;
  --aqua: #1D7A8C;
  --sun: #D98A14;
  --tint: #EDF1F4;
  --frame: #202A31;
  /* The bar at the top. It keeps a dark ground in BOTH themes, exactly as barColor() of the
     application does: --deep turns light in the dark theme, and white on it cannot be read. */
  --bar: #0B3C5D;
  --on-bar: #FFFFFF;
  --on-bar-quiet: #DCE8F0;

  /* -- the colours of the application, for the previews -- */
  --a-bg: #F5F7F9;
  --a-surface: #FCFCFB;
  --a-ink: #141A1E;
  --a-quiet: #42505A;
  --a-variant: #E3EAEF;
  --a-elev: #EFF3F6;
  --a-primary: #0B3C5D;
  --a-onprimary: #FFFFFF;
  --a-primcont: #D3E3EC;
  --a-onprimcont: #07293E;
  --a-secondary: #1D7A8C;
  --a-onsecondary: #FFFFFF;
  --a-seccont: #D5EAEF;
  --a-onseccont: #0A3A44;
  --a-bar: #0B3C5D;
  --a-onbar: #FFFFFF;
  --a-play: #0B3C5D;
  --a-good: #0F6B38;
  --a-outline: #B9C6D0;
  --a-outlinevar: #D6DFE5;

  /* -- the states, from StateColors.kt -- */
  --day0: #E8ECEF; --day1: #CFDE81; --day2: #90B766; --day3: #5A9048; --day4: #0F6B38;
  --reveal: #0B87A3; --quiz: #C2426B;
  --up: #0F6B38; --down: #C25E17;
  --badge-met: #0F6B38; --badge-off: #E8ECEF;
  --badge-ink-met: #FFFFFF; --badge-ink-off: #7E8C99;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101920;
    --sheet: #18232A;
    --ink: #E7EDF1;
    --quiet: #A6B6C2;
    --line: #2C3A44;
    --deep: #9FC9DE;
    --aqua: #56B6C8;
    --sun: #F2A63B;
    --tint: #16212A;
    --frame: #000000;
    --bar: #1B4A68;
    --on-bar: #D3E3EC;
    --on-bar-quiet: #BBD2E0;

    --a-bg: #141A1E;
    --a-surface: #141A1E;
    --a-ink: #E3E8EC;
    --a-quiet: #BCC8D0;
    --a-variant: #2A343B;
    --a-elev: #242D33;
    --a-primary: #9FC9DE;
    --a-onprimary: #07293E;
    --a-primcont: #1B4A68;
    --a-onprimcont: #D3E3EC;
    --a-secondary: #7FD1E3;
    --a-onsecondary: #08323B;
    --a-seccont: #1D5662;
    --a-onseccont: #D5EAEF;
    --a-bar: #1B4A68;
    --a-onbar: #D3E3EC;
    --a-play: #2A6E8C;
    --a-good: #52B87C;
    --a-outline: #5E6E7A;
    --a-outlinevar: #3A464E;

    --day0: #242E34; --day1: #005404; --day2: #148450; --day3: #6CB088; --day4: #A4E4B8;
    --reveal: #2A9AB2; --quiz: #D06A88;
    --up: #2F8C55; --down: #CC7430;
    --badge-met: #2F8C55; --badge-off: #242E34;
    --badge-ink-met: #FFFFFF; --badge-ink-off: #8A98A4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--aqua); }
a:hover { color: var(--deep); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

/* -- the one place that holds the margin of a page -- */
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 42rem; }
.band { padding: 60px 0; }
.band.tint { background: var(--tint); }
.band.sheet { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

h1 {
  margin: 0;
  font-size: clamp(2rem, 5.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--deep);
}

.head {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--deep);
}

.sub { margin: 12px 0 0; color: var(--quiet); max-width: 44em; }
.lede { margin: 18px 0 0; font-size: 1.1rem; color: var(--quiet); max-width: 32em; }
p { margin: 14px 0 0; }
.quiet { color: var(--quiet); }
.hint { font-size: 0.9rem; color: var(--quiet); font-style: italic; }

h3 {
  margin: 26px 0 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--deep);
}

ul { margin: 12px 0 0; padding-left: 1.15rem; }
li { margin: 7px 0 0; }

/* -- the bar at the top -- */
.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar);
  color: var(--on-bar);
}
.site .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.site a { text-decoration: none; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--on-bar); }
.mark b { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
/* The bars of the mark stand on the deep blue of the bar, so they take the light values in
   both themes. The wordmark beside them is white. */
.mark .deep { fill: var(--on-bar); }
.mark .aqua { fill: #56B6C8; }
.mark .sun { fill: #F2A63B; }
.mark svg { display: block; }

.site nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site nav a { padding: 7px 11px; border-radius: 6px; color: var(--on-bar-quiet); font-size: 0.95rem; }
.site nav a:hover { background: rgba(255, 255, 255, 0.13); color: var(--on-bar); }

.who { display: flex; align-items: center; gap: 10px; }
.login.mail {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who .out { margin: 0; }
.login {
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: none;
  color: var(--on-bar);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.login:hover { background: rgba(255, 255, 255, 0.15); color: var(--on-bar); }

/* -- the first screen -- */
.hero { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 0; }
.play {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--deep);
  color: var(--sheet);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}
.play:hover { color: var(--sheet); opacity: 0.92; }
.cta .note { font-size: 0.92rem; color: var(--quiet); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--quiet);
}
.facts b { color: var(--ink); font-variant-numeric: tabular-nums; }

.ways { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* -- a band of two columns: the words and one telephone -- */
.split { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; margin: 24px 0 0; }
.split .say > :first-child { margin-top: 0; }
/* A band with no telephone in it: the two columns are even, so a wall of badges has room. */
.split.even { grid-template-columns: 1fr 1fr; }
/* The screen on the left and the words on the right. The markup keeps the words first, so a
   reader of the page and a reader of a screen reader both meet them first. */
.split.flip { grid-template-columns: 300px 1fr; }
.split.flip .say { order: 2; }
.split.flip .show { order: 1; }


.quote {
  margin: 0;
  padding: 18px 20px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sun);
  border-radius: 4px;
}
.quote p { margin: 0; }
.quote p + p { margin-top: 10px; }
.quote cite { display: block; margin-top: 12px; font-size: 0.85rem; color: var(--quiet); font-style: normal; }

/* -- the tiles of the part "Co je uvnitř" -- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px; margin: 26px 0 0; }
.nums div { padding: 18px 20px; background: var(--sheet); border: 1px solid var(--line); }
.nums b {
  display: block;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--aqua);
  font-variant-numeric: tabular-nums;
}
.nums span { color: var(--quiet); font-size: 0.95rem; }

.mail-big { font-size: 1.3rem; font-weight: 700; }

/* -- the row of the systems --
   The drawing is lightly coloured at rest and takes its whole colour under the pointer, so the
   row shows WHICH systems are ready before a word of it is read. A system that is not ready
   stays grey and says so, and its tile is no target. */
.platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 26px auto 0;
  padding: 0;
  max-width: 46rem;
}
.platforms > li { flex: 0 1 130px; }
.tile { margin: 0; }
.tile::marker { content: none; }
.tile > a, .tile.soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
}
.tile b { font-size: 0.95rem; }
.tile small { font-size: 0.78rem; color: var(--quiet); }
.tile svg { display: block; opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; }
.tile > a:hover { border-color: var(--aqua); color: var(--ink); }
.tile > a:hover svg { opacity: 1; transform: translateY(-2px); }
.tile.android svg { color: #3DDC84; }
.tile.linux svg { color: #E9A100; }
.tile.windows svg { color: #0078D4; }
.tile.mac svg, .tile.ios svg { color: #8E8E93; }
/* After the colours, so a system that waits is grey whatever its own colour is. */
.tile.soon svg { color: var(--quiet); opacity: 0.3; }
.tile.soon b { color: var(--quiet); font-weight: 500; }

/* -- the list of the systems on the page of the downloads -- */
.plat { list-style: none; margin: 24px 0 0; padding: 0; max-width: 34rem; }
.plat .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.plat .name { flex: 1; min-width: 6rem; font-weight: 700; }
.plat .row.off .name { font-weight: 500; color: var(--quiet); }
.plat .gets { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.plat .quiet { font-size: 0.9rem; }

/* -- the columns at the end of a page -- */
.site-foot { padding: 22px 0; background: var(--tint); border-top: 1px solid var(--line); }
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 0.88rem;
  color: var(--quiet);
}
.site-foot a { color: var(--quiet); }
.site-foot a:hover { color: var(--aqua); }

/* ======================= the previews of the application ======================= */

.phone {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  border: 9px solid var(--frame);
  border-radius: 30px;
  overflow: hidden;
  background: var(--a-bg);
  color: var(--a-ink);
  font-size: 15px;
  line-height: 1.4;
}
.phone p { margin: 0; }
.phone .ico { display: block; }
.phone .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 10px;
  background: var(--a-bar);
  color: var(--a-onbar);
  font-size: 1.05rem;
  font-weight: 600;
}
.phone .bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone .bar .act { font-size: 0.95rem; font-weight: 500; }
.phone .screen { height: 468px; overflow: hidden; padding: 8px 12px 16px; }
.phone .screen.tall { display: flex; flex-direction: column; padding: 0; }
.phone .screen.tall.pad { padding: 0 12px 12px; }
.phone .screen.mid { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* the overview inside a telephone */
.phone .part { margin: 14px 0 2px; font-weight: 700; font-size: 0.95rem; }
.phone .pquiet { font-size: 0.85rem; }
.phone .streak { margin: 4px 0 0; }
.phone .streak .big { font-size: 40px; line-height: 42px; }
.phone .streak span { font-size: 0.95rem; padding-bottom: 4px; }
.phone .prow { display: flex; justify-content: space-between; padding: 4px 0; }
.tinyChart { display: block; width: 100%; margin: 4px 0 0; overflow: visible; }
.tinyChart .grid { stroke: var(--a-outlinevar); stroke-width: 1; }
.tinyChart polyline { fill: none; stroke-width: 2; stroke-linecap: round; }
.tinyChart .rev { stroke: var(--reveal); fill: var(--reveal); }
.tinyChart .qz { stroke: var(--quiz); fill: var(--quiz); }
.tinyChart text { font: 11px/1 ui-sans-serif, system-ui, sans-serif; dominant-baseline: central; }
.tinyChart text.tip { font-weight: 700; }
.tinyChart .rev text, .tinyChart text.rev { fill: var(--reveal); }
.tinyChart text.qz { fill: var(--quiz); }
.phone .cal { margin: 6px 0 0; }

/* the plan of the day */
.step { margin: 0 0 12px; padding: 12px 16px; border: 1px solid transparent; border-radius: 12px; }
.step.open { background: var(--a-elev); border-color: var(--a-outlinevar); }
.step.skipped { opacity: 0.5; }
.step .name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.step.done .name { color: var(--a-quiet); }
.step.done .name .ico { color: var(--a-primary); }
.step .two { display: flex; gap: 8px; margin-top: 10px; }
.step .two .pbtn { flex: 1; }

.pbtn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--a-primary);
  color: var(--a-onprimary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.pbtn.flat { background: none; color: var(--a-primary); }
.pbtn.ghost { background: none; color: var(--a-primary); border: 1px solid var(--a-outline); }

.pplay {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--a-play);
  color: #FFFFFF;
  cursor: pointer;
}
.pplay.big { width: 92px; height: 92px; }

/* výuka */
.karaoke { flex: 1; padding: 10px 8px; overflow: hidden; font-size: 19px; line-height: 1.62; }
.karaoke .line { padding: 6px 0; color: var(--a-quiet); }
.karaoke .line.on { color: var(--a-ink); font-weight: 500; }
.karaoke .word { padding: 0 2px; border-radius: 3px; background: var(--a-primary); color: var(--a-onprimary); }
.playerbar { padding: 10px 12px 14px; background: var(--a-elev); }
.playerbar .meter { height: 4px; border-radius: 2px; background: var(--a-outlinevar); overflow: hidden; }
.playerbar .meter i { display: block; width: 46%; height: 100%; background: var(--a-primary); }
.playerbar .keys { display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px; }
.playerbar .ghost-ico { color: var(--a-quiet); }

/* odkrývání */
.reveal-text {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px 8px;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
}
.reveal-text .mask { color: var(--a-quiet); letter-spacing: 0.06em; }
.actions { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 0 4px 10px; }
.round { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; }
.round .knob {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.round .knob.play { background: var(--a-play); color: #FFFFFF; }
.round .knob.eye { background: var(--a-secondary); color: var(--a-onsecondary); }
.round .knob[disabled] { opacity: 0.45; }
.round span { font-size: 0.85rem; color: var(--a-quiet); }
.pill {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 126px;
  border: 0;
  border-radius: 999px;
  background: var(--a-play);
  color: #FFFFFF;
  cursor: pointer;
}
.rate { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.rate .good { background: var(--a-good); color: #FFFFFF; }

/* tipovačka */
.phone .status { display: flex; justify-content: space-between; width: 100%; font-size: 0.9rem; color: var(--a-quiet); }
.phone .status .ladder { font-weight: 700; color: var(--a-ink); }
.phone .ask { margin: 14px 0 0; font-weight: 700; }
.phone .pplay { margin: 14px 0 0; }
#qz-opts { width: 100%; text-align: left; }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--a-variant);
  color: var(--a-quiet);
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}
.opt .tick { margin-left: auto; }
.opt.right { background: var(--a-primcont); color: var(--a-onprimcont); font-weight: 600; }
.opt.wrong { background: #F9DEDC; color: #410E0B; text-decoration: line-through; }
@media (prefers-color-scheme: dark) {
  .opt.wrong { background: #8C1D18; color: #F9DEDC; }
}

/* the end of a block */
.screen.end { padding-top: 46px; }
.screen.end .headline { font-size: 1.35rem; font-weight: 600; }
.screen.end .huge { margin: 14px 0; font-size: 64px; line-height: 1.1; font-weight: 800; }
.screen.end .of { font-weight: 500; }
.screen.end .compare { margin: 14px 0 24px; font-weight: 700; }
.screen.end .compare .up { color: var(--a-good); }
.screen.end .pbtn + .pbtn { margin-top: 10px; }

/* the verification test */
.exam-top { flex: 1; display: grid; place-items: center; padding: 16px 4px; font-size: 0.85rem; color: var(--a-quiet); }
.exam-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 10px; text-align: center; }
.exam-block .two { display: flex; gap: 12px; width: 100%; }
.exam-field {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--a-outline);
  border-radius: 4px;
  background: var(--a-surface);
  color: var(--a-quiet);
  font-size: 18px;
  text-align: left;
}

/* pexeso */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.board button {
  display: grid;
  place-items: center;
  aspect-ratio: 0.82;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--a-variant);
  color: var(--a-quiet);
  font: inherit;
  cursor: pointer;
}
.board button.mark { background: var(--a-seccont); color: var(--a-onseccont); border: 2px solid var(--a-primary); }
.board button.pair {
  background: var(--a-bg);
  border: 2px solid var(--a-good);
  color: var(--a-good);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
}
.board .ico { display: block; }

/* ======================= the drawings of the record ======================= */

.streak { display: flex; align-items: flex-end; gap: 8px; margin: 20px 0 0; }
.streak .big { font-size: 56px; line-height: 60px; }
.streak span { padding-bottom: 8px; font-size: 1.1rem; font-weight: 500; }

/* The box of row-reverse opens the calendar at the last week, where today is, with no script. */
.scroll { display: flex; flex-direction: row-reverse; overflow-x: auto; margin: 12px 0 0; }
.scroll svg { flex: none; display: block; }
.calendarGrid text, .successChart text {
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  fill: var(--quiet);
  dominant-baseline: central;
}
.successChart text.tip { font-size: 12px; font-weight: 700; }
.calendarGrid .day.l0 { fill: var(--day0); }
.calendarGrid .day.l1 { fill: var(--day1); }
.calendarGrid .day.l2 { fill: var(--day2); }
.calendarGrid .day.l3 { fill: var(--day3); }
.calendarGrid .day.l4 { fill: var(--day4); }

/* The example of a calendar on the first page: squares of HTML, of the same size as the drawing
   of the application (12 and a gap of 3). It carries no day, because it is nobody's record. */
.cal { display: flex; gap: 3px; margin: 14px 0 0; overflow-x: auto; }
.cal .col { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; flex: none; }
.cal i { display: block; width: 12px; height: 12px; border-radius: 2px; }
.cal i.l0, .legend .shade.l0 { background: var(--day0); }
.cal i.l1, .legend .shade.l1 { background: var(--day1); }
.cal i.l2, .legend .shade.l2 { background: var(--day2); }
.cal i.l3, .legend .shade.l3 { background: var(--day3); }
.cal i.l4, .legend .shade.l4 { background: var(--day4); }

.successChart { display: block; width: 100%; max-width: 22rem; margin: 12px 0 0; overflow: visible; }
.successChart .grid { stroke: var(--line); stroke-width: 1; }
.successChart line.reveal, .successChart line.quiz { stroke-width: 2; stroke-linecap: round; }
.successChart line.reveal { stroke: var(--reveal); }
.successChart line.quiz { stroke: var(--quiz); }
.successChart circle.reveal, .successChart text.reveal { fill: var(--reveal); }
.successChart circle.quiz, .successChart text.quiz { fill: var(--quiz); }

.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--quiet);
}
.legend .word { padding: 0 2px; }
.legend .shade { display: block; width: 12px; height: 12px; border-radius: 2px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; margin-right: 13px; font-size: 0.95rem; color: var(--ink); }
.legend .dot { display: block; width: 8px; height: 8px; border-radius: 50%; }
.legend .dot.reveal { background: var(--reveal); }
.legend .dot.quiz { background: var(--quiz); }

.rows { list-style: none; margin: 8px 0 0; padding: 0; max-width: 34rem; }
.rows li::marker { content: none; }
.row { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 6px 0; color: var(--ink); }
.row .name { flex: 1; }
.row .value { font-variant-numeric: tabular-nums; }
.row .change { font-weight: 700; }
.row .change.up { color: var(--up); }
.row .change.down { color: var(--down); }

.exam-rows { list-style: none; margin: 14px 0 0; padding: 0; max-width: 34rem; }
.exam-rows li::marker { content: none; }
.exam-rows .row { border-bottom: 1px solid var(--line); padding: 9px 0; }
.exams .name, .exam-rows .name { display: flex; flex-direction: column; }
.exams .quiet, .exam-rows .quiet { font-size: 0.9rem; color: var(--quiet); }

/* A badge has two states, met and not met. The colour comes from the class alone, with no shade between. */
.badges {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 16px 8px;
}
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; font-size: 0.85rem; }
.badge::marker { content: none; }
.badge svg { display: block; width: 72px; height: 72px; }
.badge .name { color: var(--quiet); }
.badge.met .sign { fill: var(--badge-met); }
.badge.off .sign { fill: var(--badge-off); }
.badge.met .mark { fill: var(--badge-ink-met); }
.badge.off .mark { fill: var(--badge-ink-off); }

/* ======================= the forms and the account ======================= */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  text-decoration: none;
}
.chip.on {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--sheet);
  font-weight: 700;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; margin: 24px 0 0; }
.tiles div { padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); }
.tiles b {
  display: block;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tiles span { color: var(--quiet); font-size: 0.9rem; }

h3.part { margin: 38px 0 0; }

.card { margin: 14px 0 0; max-width: 24rem; }
.field { margin: 16px 0 0; }
.field label { display: block; margin: 0 0 4px; font-weight: 700; }
.field input {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* The one checkbox of the news. The box keeps its own size at every setting of the text, so the
   label beside it may wrap over two lines without moving it. */
.check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; }
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--deep);
}

button {
  margin: 22px 0 0;
  padding: 11px 22px;
  font: inherit;
  font-weight: 700;
  color: var(--sheet);
  background: var(--deep);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
/* A button that says a small thing stands quiet, so the strong one on the page stays the one
   that matters. */
button.quiet-button {
  color: var(--aqua);
  background: none;
  border: 1px solid var(--line);
}

.login, .pbtn, .pplay, .knob, .pill, .opt, .board button, 
.line { font-weight: 700; }
.chips + .line { margin-top: 24px; }

/* ======================= narrow windows ======================= */

@media (max-width: 860px) {
  .hero, .split, .split.flip, .split.even { grid-template-columns: 1fr; gap: 30px; }
  .split.flip .say, .split.flip .show { order: 0; }
  .site .wrap { flex-wrap: wrap; }
  .site nav { order: 3; width: 100%; margin-left: 0; }
  .who { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}