/* The spirit level tabs: the courses of a woodworking school on a white page. Under the four tabs lies the glass vial
   of a spirit level, with brass caps and a pair of marks under each tab; the bubble sits between the marks of the
   chosen one. The vial is drawn by the script in the SVG, with the colours set here. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1d1c19;           /* the chosen tab and the titles */
  --muted: #918b80;         /* the other tabs, the names of the facts */
  --text: #4d4942;          /* the text */
  --liquid: #d3e35e;        /* the liquid in the vial */
  --liquid-light: #ecf4a8;  /* the light the round glass gathers in the liquid */
  --liquid-deep: #aec22c;   /* the liquid where it is thicker */
  --liquid-edge: #66780f;   /* the dark edge of the liquid against the glass */
  --air: #fbfde8;           /* the bubble */
  --air-shade: #e2ec9e;     /* the bubble's top, in the shade of its own rim */
  --air-glow: #ffffff;      /* the bubble's bottom, where the light comes through */
  --rim: #6d7f12;           /* the rim of the bubble */
  --rim-dark: #3c4705;      /* its two ends, where the rim is seen edge on */
  --mark: #2a2d17;          /* the marks on the glass */
  --brass: #c39a4f;         /* the caps at the two ends */
  --brass-light: #ecd59a;
  --brass-dark: #8a6527;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  padding: clamp(48px, 26vh, 240px) 16px 48px;   /* held from the top: when the text changes height, only its bottom moves */
}

.level {
  width: min(560px, 100%);
}

/* ---------------------------------------------------------------- the row: the tabs and the vial under them */
.level__row {
  position: relative;
  height: 60px;
}

.level__tabs {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);   /* as many equal columns as there are tabs */
  height: 100%;
}

/* each tab is a whole column, its name on top and its stretch of the vial below */
.tab {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3px 0 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.tab__name {
  display: block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 520;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.3s ease, font-weight 0.3s ease, transform 0.16s ease-out;
}

.tab[aria-selected='true'] {
  color: var(--ink);
}

.tab[aria-selected='true'] .tab__name {
  font-weight: 660;
}

@media (hover: hover) and (pointer: fine) {
  .tab:not([aria-selected='true']):hover {
    color: #55504a;
  }
}

/* pressed, the name gives a little under the finger */
@media (prefers-reduced-motion: no-preference) {
  .tab:active .tab__name {
    transform: scale(0.96);
    transition-duration: 0.08s;
  }
}

.tab:focus-visible {
  outline: none;
}

.tab:focus-visible .tab__name {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* the vial lies under the names; clicks go through it to the tabs. The script tips it, so its child holds the shadow */
.vial {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 26px;
  pointer-events: none;
  will-change: transform;
}

.vial__glass {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(70, 80, 20, 0.16));
}

.vial__tube {
  fill: rgba(240, 246, 214, 0.5);
  stroke: rgba(48, 56, 12, 0.38);
  stroke-width: 1;
}

.vial__air {
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.vial__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.vial__marks line {
  stroke: var(--mark);
  stroke-width: 1.25;
  stroke-linecap: round;
}

/* the marks are faint, and go dark around the bubble when it settles between them */
.vial__marks g {
  opacity: 0.42;
  transition: opacity 0.3s ease;
}

.vial__marks g.is-held {
  opacity: 0.9;
}

/* the long highlight of the glass, over everything */
.vial__gleam {
  fill: rgba(255, 255, 255, 0.85);
}

.vial__cap {
  stroke: rgba(70, 48, 12, 0.35);
  stroke-width: 0.8;
}

/* the edge of the brass ferrule, where it closes over the glass */
.vial__ring {
  stroke: rgba(90, 62, 18, 0.45);
  stroke-width: 1;
}

/* ---------------------------------------------------------------- the pages */
.level__pages {
  position: relative;
  margin-top: 30px;
}

.page {
  outline: none;
}

.page:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 8px;
  border-radius: 6px;
}

.page > * {
  transform-origin: 50% 100%;
}

.page__title {
  margin: 0 0 10px;
  font-size: clamp(27px, 6.4vw, 34px);
  font-weight: 640;
  font-stretch: 94%;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.page__text {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}

.page__facts {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 32px;
  margin: 22px 0 0;
}

.page__facts dt {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.page__facts dd {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 560px) {
  .tab__name {
    font-size: 14px;
    padding: 1px 4px;
  }

  .page__text {
    font-size: 16px;
  }

  .page__facts {
    gap: 24px;
  }
}