/* «Линейка» — the product as a measuring instrument.
 *
 * One idea decides everything here: a hairline rule runs down the left of every
 * screen, and each structural boundary puts a tick on it labelled with a real
 * datum — the minute of the lesson, the day number, the card index. Where you
 * are now gets the one chromatic colour in the application.
 *
 * That colour means NOW. It never means WRONG. The audience is adults who are
 * afraid of sounding stupid in a second language, and a product that can turn
 * red at them is an exam. This one can only tell you how long you spoke and on
 * which day; it has no vocabulary for saying you were bad at it.
 *
 * Everything Basecoat already draws is left to Basecoat. This file is the
 * palette, the type, and the primitives it has no opinion about.
 */

/* ---------- type ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/vendor/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The measuring layer. Every tick, timestamp, day number and table figure is
   set in this, and its fixed advance width is what makes a column of numbers
   read as a scale rather than as text. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/static/vendor/fonts/jetbrains-mono-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/static/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ----------
 * Neutrals carry a hue but almost no chroma, so --tint moves the whole
 * faceplate from blue-grey to graphite without touching a single contrast
 * ratio: lightness and chroma are literals in every token below, and contrast
 * is a function of lightness. Sweeping the full range moves the highest pair
 * by 0.14 and the lowest by 0.08.
 */
:root {
  --tint: 258;
  --dens: 1;
  --step: 6px;

  --background: oklch(96.8% 0.004 var(--tint));
  --foreground: oklch(22.5% 0.013 var(--tint));
  --card: oklch(99.0% 0.002 var(--tint));
  --card-foreground: var(--foreground);
  --raised: oklch(100% 0 0);
  --popover: oklch(100% 0 0);
  --popover-foreground: var(--foreground);

  /* Ink, not a brand hue. The application has no brand colour. */
  --primary: oklch(28.5% 0.020 var(--tint));
  --primary-foreground: oklch(99.0% 0.002 var(--tint));
  --secondary: oklch(94.0% 0.006 var(--tint));
  --secondary-foreground: var(--foreground);
  --muted: oklch(94.0% 0.006 var(--tint));
  --muted-foreground: oklch(50.5% 0.014 var(--tint));  /* 5.33:1 on ground */
  --accent: oklch(94.0% 0.006 var(--tint));
  --accent-foreground: var(--foreground);

  /* The needle. The only chroma in the product, and it means "now". */
  --needle: oklch(54.5% 0.185 27);
  --needle-foreground: oklch(99.5% 0 0);
  --destructive: oklch(54.5% 0.185 27);
  --destructive-foreground: oklch(99.5% 0 0);

  --border: oklch(89.5% 0.006 var(--tint));
  --hairline: oklch(84.5% 0.008 var(--tint));
  /* A form boundary is a UI component boundary and has to clear 3:1. */
  --input: oklch(60.0% 0.014 var(--tint));
  --ring: oklch(40.0% 0.030 var(--tint));

  /* Four radii with meanings: nothing that measures is rounded, because
     instruments are not, and everything you touch is, because you do. */
  --r-0: 0;
  --r-1: 0.1875rem;
  --r-2: 0.375rem;
  --r-3: 0.625rem;
  --radius: 0.375rem;

  --rule-w: 1px;
  --gutter: 42px;
  --shell: 62rem;
  --reading: 40rem;

  --t-tick: 0.6875rem;
  --t-xs: calc(0.75rem * var(--dens));
  --t-sm: calc(0.875rem * var(--dens));
  --t-base: calc(1rem * var(--dens));
  --t-md: calc(1.0625rem * var(--dens));
  --t-lg: calc(1.35rem * var(--dens));
  --t-xl: calc(1.9rem * var(--dens));
  --t-num: calc(2.6rem * var(--dens));

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-overlay: 0 24px 48px -20px oklch(22.5% 0.013 260 / 0.22);
}

@media (min-width: 48rem) {
  :root { --gutter: 66px; }
}

/* Dark is the same instrument with the faceplate unlit, not an inversion.
   muted-foreground is deliberately lighter than its light-mode counterpart:
   16px type thins optically on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: oklch(17.5% 0.009 var(--tint));
    --foreground: oklch(94.5% 0.004 250);
    --card: oklch(21.2% 0.010 var(--tint));
    --raised: oklch(25.2% 0.011 var(--tint));
    --popover: oklch(25.2% 0.011 var(--tint));
    --primary: oklch(90.5% 0.006 250);
    --primary-foreground: oklch(17.5% 0.009 var(--tint));
    --secondary: oklch(25.2% 0.011 var(--tint));
    --muted: oklch(25.2% 0.011 var(--tint));
    --muted-foreground: oklch(70.0% 0.014 255);
    --accent: oklch(25.2% 0.011 var(--tint));
    --needle: oklch(65.5% 0.175 27);
    --needle-foreground: oklch(16.0% 0.010 30);
    --destructive: oklch(65.5% 0.175 27);
    --destructive-foreground: oklch(16.0% 0.010 30);
    --border: oklch(33.5% 0.012 var(--tint));
    --hairline: oklch(29.0% 0.011 var(--tint));
    --input: oklch(54.0% 0.016 var(--tint));
    --ring: oklch(78.0% 0.020 250);
    --shadow-overlay: 0 24px 48px -20px oklch(0% 0 0 / 0.6);
  }
}
:root.dark {
  --background: oklch(17.5% 0.009 var(--tint));
  --foreground: oklch(94.5% 0.004 250);
  --card: oklch(21.2% 0.010 var(--tint));
  --raised: oklch(25.2% 0.011 var(--tint));
  --popover: oklch(25.2% 0.011 var(--tint));
  --primary: oklch(90.5% 0.006 250);
  --primary-foreground: oklch(17.5% 0.009 var(--tint));
  --secondary: oklch(25.2% 0.011 var(--tint));
  --muted: oklch(25.2% 0.011 var(--tint));
  --muted-foreground: oklch(70.0% 0.014 255);
  --accent: oklch(25.2% 0.011 var(--tint));
  --needle: oklch(65.5% 0.175 27);
  --needle-foreground: oklch(16.0% 0.010 30);
  --destructive: oklch(65.5% 0.175 27);
  --destructive-foreground: oklch(16.0% 0.010 30);
  --border: oklch(33.5% 0.012 var(--tint));
  --hairline: oklch(29.0% 0.011 var(--tint));
  --input: oklch(54.0% 0.016 var(--tint));
  --ring: oklch(78.0% 0.020 250);
  --shadow-overlay: 0 24px 48px -20px oklch(0% 0 0 / 0.6);
}

/* The needle the learner picked. Amber and teal are pre-solved pairs, not a
   colour picker: there is no path from an arbitrary input to a colour. */
:root[data-needle="amber"] { --needle: oklch(54.5% 0.120 62); --needle-foreground: oklch(99.5% 0 0); }
:root[data-needle="teal"] { --needle: oklch(52.5% 0.090 212); --needle-foreground: oklch(99.5% 0 0); }
@media (prefers-color-scheme: dark) {
  :root[data-needle="amber"]:not(.light) { --needle: oklch(72% 0.135 62); --needle-foreground: oklch(16% 0.01 60); }
  :root[data-needle="teal"]:not(.light) { --needle: oklch(72% 0.105 212); --needle-foreground: oklch(16% 0.01 210); }
}
:root.dark[data-needle="amber"] { --needle: oklch(72% 0.135 62); --needle-foreground: oklch(16% 0.01 60); }
:root.dark[data-needle="teal"] { --needle: oklch(72% 0.105 212); --needle-foreground: oklch(16% 0.01 210); }

:root[data-density="compact"] { --dens: 0.9375; --step: 5px; }
:root[data-density="roomy"] { --dens: 1.0625; --step: 7px; }

/* ---------- ground ---------- */

/* Element-level rules go in a layer on purpose. Basecoat's components live in
   @layer components, and unlayered CSS beats every layer — so a bare
   `a { color: inherit }` here silently won over `.btn`'s own colour and made a
   link-button render its label in the background colour. Layered, the
   components win where they should. */
@layer base {

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  /* Golos-style faux slopes and faux bolds are exactly the tell that makes an
     interface look cheap in Cyrillic. Both faces here have the real thing. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* English inside Russian prose sits one notch heavier so the two scripts hold
   the same optical weight on the line. */
[lang="en"] { font-weight: 450; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--t-xl); line-height: 1.12; }
h2 { font-size: var(--t-lg); line-height: 1.2; }
h3 { font-size: var(--t-md); line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-1); }

}
/* ---------- the rule ---------- */

.rule {
  position: relative;
  border-left: var(--rule-w) solid var(--hairline);
  padding-left: var(--gutter);
}
.rule__row { position: relative; }
/* A 7px tick on the rule, and a label in the gutter that is always a real
   datum — never a decoration. */
.rule__row::before {
  content: "";
  position: absolute;
  top: 0.6em;
  /* Outside the rule, not inside it: drawn into the gutter the marks crossed
     the label that shares it, and the needle — being 2px and coloured — struck
     through the first digit of every live timestamp. */
  left: calc((var(--gutter) + var(--rule-w) + 7px) * -1);
  width: 7px;
  height: 1px;
  background: var(--hairline);
}
.rule__row[data-tick]::after {
  content: attr(data-tick);
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * -1);
  font: 500 var(--t-tick)/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
  /* The gutter is a fixed width. Anything longer used to run underneath the
     text beside it rather than being clipped. */
  max-width: var(--gutter);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* At most one per screen. This is the needle. */
.rule__row--now::before {
  height: 2px;
  width: 10px;
  left: calc((var(--gutter) + var(--rule-w) + 10px) * -1);
  background: var(--needle);
}
.rule__row--now[data-tick]::after { color: var(--needle); }

@media (max-width: 30rem) {
  /* On a narrow phone the gutter would eat the measure, so the labels move
     above their rows and the rule stays. ::after renders last, so the row has
     to become a column and the label be ordered to the front — without that the
     timestamp sat underneath the turn it was labelling. */
  .rule { padding-left: calc(var(--step) * 2); }
  .rule__row[data-tick] { display: flex; flex-direction: column; }
  .rule__row[data-tick]::after {
    position: static;
    display: block;
    order: -1;
    /* The gutter clip is for the margin. Here the label has the full width. */
    max-width: none;
    margin-bottom: 0.15rem;
  }
  .rule__row::before, .rule__row--now::before { left: calc(var(--step) * -2 - var(--rule-w)); }
}

/* ---------- shell ---------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.15rem; }
.shell-narrow { max-width: var(--reading); }
main.shell { padding-block: 2rem 5rem; }

.stack { display: flex; flex-direction: column; gap: calc(var(--step) * 2.5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--step); }
.stack-lg { display: flex; flex-direction: column; gap: calc(var(--step) * 5); }
.row { display: flex; align-items: center; gap: calc(var(--step) * 1.5); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--step); }
.spacer { flex: 1 1 auto; }
.grid { display: grid; gap: calc(var(--step) * 2.5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.muted { color: var(--muted-foreground); }
.small { font-size: var(--t-sm); }
.page-title { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: calc(var(--step) * 5); }

/* ---------- the measuring layer ---------- */

.tick {
  font: 500 var(--t-tick)/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.tick--now { color: var(--needle); }
.num { font: 500 var(--t-num)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.readout {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font: 500 calc(var(--t-tick) * 1.15)/1.4 var(--font-mono);
  color: var(--foreground);
}
.readout > * + * { border-left: 1px solid var(--hairline); padding-left: 0.55rem; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- surfaces ---------- */

.card {
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--card);
  color: var(--card-foreground);
}
.card > header { gap: 0.3rem; }
.card > header > p { color: var(--muted-foreground); font-size: var(--t-sm); }
.card > footer { gap: var(--step); flex-wrap: wrap; }
.card-tight { padding: calc(var(--step) * 2); gap: var(--step); }
.card-plain { background: transparent; border-color: transparent; padding-inline: 0; }

.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat .value { font: 500 var(--t-lg)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.stat .label { font-size: var(--t-sm); color: var(--muted-foreground); }
.stat .note { font-size: var(--t-xs); color: var(--muted-foreground); }

/* ---------- transcript ---------- */

.talk { display: flex; flex-direction: column; padding-bottom: calc(var(--step) * 4); }
.turn { position: relative; margin-block: calc(var(--step) * 3); }
.turn__who {
  display: block;
  font: 500 var(--t-tick)/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.turn__say {
  margin: 0;
  font-size: var(--t-md);
  max-inline-size: 62ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The learner's own turn is the only thing on the screen given a plate, so a
   person can find what they said without a second colour or a second slope. */
.turn--learner > .turn__say {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
}
.turn--learner > .turn__who { color: var(--foreground); }

/* A correction is a diff, and a diff is set in mono. No red: red is reserved
   for "now", and turning it on a mistake is what makes a product an exam. */
.turn__fix {
  margin-top: var(--step);
  padding-top: var(--step);
  border-top: 1px solid var(--hairline);
  font: var(--t-sm)/1.5 var(--font-mono);
}
.turn__fix del { color: var(--muted-foreground); font-weight: 400; text-decoration: none; }
.turn__fix ins { color: var(--foreground); font-weight: 500; text-decoration: none; }

.plate-mono {
  display: inline-grid;
  place-items: center;
  width: calc(var(--step) * 4.5);
  height: calc(var(--step) * 4.5);
  border-radius: var(--r-1);
  background: var(--raised);
  border: 1px solid var(--border);
  font: 500 var(--t-tick)/1 var(--font-mono);
}
.plate-mono--live { box-shadow: inset 2px 0 0 var(--needle); }

/* The composer is docked, opaque, and separated by a hairline rather than a
   fade: a gradient let the last reply show through and read as a fault. */
.composer {
  position: sticky;
  bottom: 0;
  margin-top: calc(var(--step) * 2);
  padding: calc(var(--step) * 2) 0 calc(var(--step) * 3);
  background: var(--background);
  border-top: 1px solid var(--border);
}
.composer .textarea { min-height: 4.2rem; resize: vertical; }

/* ---------- the ninety days ---------- */

/* Ninety numerals, not ninety squares. A grid of empty cells counts your
   failures; a numbered list is a table of contents for a book you are partway
   through, and a missed day is an unread chapter rather than a hole. */
.grid90 { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--step) * 1.5); }
@media (min-width: 48rem) { .grid90 { grid-template-columns: repeat(15, 1fr); } }
.grid90__day { display: flex; flex-direction: column; gap: 2px; }
.grid90__n {
  font: 400 var(--t-xs)/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.grid90__n--done { color: var(--foreground); font-weight: 500; }
.grid90__n--now { color: var(--needle); font-weight: 500; }
.grid90__n--skip { text-decoration: line-through 1px var(--hairline); }
/* Where the minutes live: a 2px rule under the numeral, full width at 20 min. */
.grid90__bar { display: block; height: 2px; width: var(--min, 0%); background: var(--foreground); }
.grid90__day--now .grid90__bar { background: var(--needle); }

/* ---------- settings ---------- */

.field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--step);
  padding-block: calc(var(--step) * 2);
  border-bottom: 1px solid var(--hairline);
}
.field-row__value { font: 500 var(--t-tick)/1.4 var(--font-mono); color: var(--foreground); }
.seg { display: inline-flex; border: 1px solid var(--input); border-radius: var(--r-1); overflow: hidden; }
.seg button {
  font: 500 var(--t-sm)/1 var(--font-ui);
  padding: 0.45rem 0.8rem;
  border: 0;
  border-left: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
/* Square, because the needle is an instrument part. */
.swatch { width: 14px; height: 14px; border-radius: var(--r-0); border: 1px solid var(--border); display: inline-block; }

/* Four grades, always on one row: wrapping them 3+1 makes the odd one out look
   like a different kind of answer. */
.review-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--step); }
.review-grades .btn { padding-inline: 0; }

/* ---------- profile ---------- */

/* The tutor forgets, and the learner watches it forget. Struck, not faded:
   a fade would drop it below 4.5:1, and the point is that you can read what
   was removed. */
.fact { position: relative; }
.fact--forgotten { color: var(--muted-foreground); text-decoration: line-through 1px var(--hairline); }

/* ---------- reports ---------- */

/* The whole argument of a report is that every sentence in it points at a
   measurement. So the measurements are printed under the sentence, named and
   valued, in the mono face the rest of the product uses for readings. Hiding
   them would leave a page of pleasant claims with nothing behind it. */
.evidence { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.55rem; }
.evidence > span { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: var(--t-sm); color: var(--muted-foreground); }
.evidence b {
  font: 500 var(--t-tick)/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--foreground);
}
/* A row on the rule that is a whole clickable report. */
.rule__row a.plain { text-decoration: none; display: block; }
.rule__row a.plain:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- misc ---------- */

.rule-line { height: 1px; background: var(--border); border: 0; margin: 0; }
.note-list { display: flex; flex-direction: column; gap: var(--step); margin: 0; padding: 0; list-style: none; }
.note-list li { padding: calc(var(--step) * 1.5) calc(var(--step) * 2); border-radius: var(--r-2); background: var(--muted); font-size: var(--t-sm); }
.card, .table td, .table th, .note-list li { overflow-wrap: anywhere; }
.bars { display: flex; align-items: flex-end; gap: 2px; flex: 1 1 auto; min-height: 5.5rem; }
.bars > div { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars > div > i { display: block; width: 100%; min-height: 1px; border-radius: var(--r-0); background: var(--foreground); }
.bars > div > i.quiet { background: var(--hairline); }
.bars > div.now > i { background: var(--needle); }

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar .shell { display: flex; align-items: center; gap: 1rem; height: 2.9rem; }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font: 500 var(--t-sm)/1 var(--font-mono);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.brand .mark { font-weight: 700; letter-spacing: -0.04em; }
.topbar nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.topbar nav a {
  padding: 0.35rem 0.55rem;
  border-radius: var(--r-1);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--muted-foreground);
}
.topbar nav a:hover { color: var(--foreground); }
.topbar nav a[aria-current="page"] { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--needle); border-radius: 0; }
@media (max-width: 34rem) {
  /* Measured, not guessed: with five links and the theme button this bar came
     to 426px against a 390px phone, so «Профиль» was clipped, the toggle sat
     off-screen and every page carried a horizontal scrollbar. Nothing here
     wraps — each label is one unbreakable word — so the width has to come off
     the padding and the wordmark, and the nav gets a scroll of its own as the
     backstop for whatever gets added later. */
  .topbar .shell { gap: 0.5rem; padding-inline: 0.75rem; }
  .brand .word { display: none; }
  .topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  /* Fixed, not density-scaled: the header is chrome, and letting the roomy
     setting grow it is how six pixels come back. */
  .topbar nav a { padding: 0.35rem 0.25rem; font-size: 0.75rem; white-space: nowrap; }
  .topbar nav a.hide-sm { display: none; }
}