/* tubeless.app: the one stylesheet

   1. Font
   2. Colours, type and space
   3. Reset
   4. Base elements
   5. Header and footer
   6. The opening
   7. Before and after
   8. Sections
   9. Motion and print

   Colours come from the extension's popup, so the site and the popup
   match. Every colour has a light and a dark value; the reader's own
   setting chooses, and data-theme="light" or "dark" on <html> forces
   one. */


/* 1. Font

   Geist, the popup's typeface, copied from the extension build. Without
   the file, the page falls back to the system sans. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.1e9a91c7.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* 2. Colours, type and space */

:root {
  color-scheme: light dark;

  --paper: #f4ede0;
  --surface: #fcf8ef;
  --ink: #1c1812;
  --quiet: #6e634f;
  --rule: #cfc2a4;
  --accent: #dc4f2a;   /* the logo's pill, link underlines, focus rings */
  --button: #c4421f;   /* the accent, a touch deeper, so white text passes 4.5:1 */
  --on-button: #ffffff;
  --tint: #f7c0ac;     /* the accent at 35% on --surface: the parts Tubeless hides */

  --display: "Iowan Old Style", "Sitka Text", Charter, Georgia, serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --small: clamp(0.9rem, 0.88rem + 0.1vw, 0.98rem);
  --text: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --lede: clamp(1.2rem, 1.1rem + 0.45vw, 1.42rem);
  --heading: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --title: clamp(2.7rem, 1.8rem + 3.6vw, 4.5rem);

  --gutter: clamp(1rem, 4vw, 2rem);
  --column: 40rem;
  --wide: 58rem;
  --corner: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191919;
    --surface: #20201f;
    --ink: #e7e6e5;
    --quiet: #929190;
    --rule: #3e3d3c;
    --accent: #f26b45;
    --button: #f26b45;
    --on-button: #191919;
    --tint: #643b2f;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191919;
  --surface: #20201f;
  --ink: #e7e6e5;
  --quiet: #929190;
  --rule: #3e3d3c;
  --accent: #f26b45;
  --button: #f26b45;
  --on-button: #191919;
  --tint: #643b2f;
}

@media (prefers-contrast: more) {
  :root {
    --quiet: var(--ink);
    --rule: color-mix(in oklab, var(--ink) 55%, var(--paper));
  }
}


/* 3. Reset */

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

* {
  margin: 0;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}


/* 4. Base elements */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* Links are the colour of the text and always underlined, so none is
   told apart by colour alone. The underline is the accent, and thickens
   under the pointer. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: max(1.5px, 0.1em);
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 0.15s ease;
}

a:hover {
  text-decoration-thickness: 0.32em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.05em 0.35em;
}

.skip {
  position: absolute;
  inset-block-start: -5rem;
  inset-inline-start: 1rem;
  z-index: 5;
  padding: 10px 16px;
  background: var(--button);
  color: var(--on-button);
  border-radius: var(--corner);
  font-weight: 650;
  text-decoration: none;
}

.skip:focus {
  inset-block-start: 0.75rem;
}


/* 5. Header and footer */

.site-header {
  max-inline-size: var(--wide);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  text-decoration: none;
}

.brand svg {
  inline-size: 170px;
  block-size: auto;
}

.brand .pill {
  fill: none;
  stroke: var(--accent);
}

.brand .word {
  fill: var(--ink);
}

.site-header ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.site-header nav a {
  display: inline-block;
  padding-block: 10px;
  text-decoration-color: transparent;
}

.site-header nav a:hover {
  text-decoration-color: var(--accent);
}

.site-footer {
  max-inline-size: var(--column);
  margin-inline: auto;
  padding: 96px var(--gutter) 48px;
}

.site-footer div {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--small);
  color: var(--quiet);
}

.site-footer p:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.site-footer .pill {
  flex: none;
  fill: none;
  stroke: var(--accent);
}


/* 6. The opening */

.hero {
  max-inline-size: var(--column);
  margin-inline: auto;
  padding: 64px var(--gutter) 52px;
}

.hero h1 {
  margin-block-end: 22px;
  font-size: var(--title);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.lede {
  font-size: var(--lede);
  line-height: 1.55;
}

.actions {
  container-type: inline-size;
  margin-block-start: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: var(--corner);
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-main {
  background: var(--button);
  border-color: var(--button);
  color: var(--on-button);
}

/* A note in the margin, as if written in pencil. */
.scribble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 4px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--quiet);
  transform: rotate(-3deg);
}

.scribble svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Below this width the note wraps under the buttons, so the arrow turns
   to point up at them. 34rem is just over the row's width on one line. */
@container (width < 34rem) {
  .scribble {
    padding-inline-start: 12px;
  }

  .scribble svg {
    transform: rotate(35deg);
  }
}

.meta {
  margin-block-start: 22px;
  font-size: var(--small);
  color: var(--quiet);
}

@media (max-width: 30rem) {
  .actions .button {
    flex: 1 1 100%;
  }
}


/* 7. Before and after

   Two sketches of the YouTube home page, drawn in boxes. Each box is
   one part of the page; .hides marks the parts Tubeless can hide. */

.compare {
  max-inline-size: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.compare-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.compare-panel {
  flex: 1 1 340px;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-panel > p {
  font-size: var(--small);
  font-weight: 650;
}

.compare figcaption {
  margin-block-start: 14px;
  font-size: var(--small);
  color: var(--quiet);
}

.yt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
}

.yt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yt-logo {
  inline-size: 26px;
  block-size: 12px;
  border-radius: 3px;
  background: var(--quiet);
}

.yt-search {
  flex: 1;
  block-size: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
}

.yt-dot {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
}

.yt-chips {
  display: flex;
  gap: 6px;
}

.yt-chip {
  inline-size: var(--w, 28px);
  block-size: 10px;
  border-radius: 5px;
  background: var(--rule);
}

.yt-chip.is-current {
  background: var(--ink);
}

.yt-body {
  display: flex;
  gap: 12px;
}

.yt-side {
  flex: none;
  inline-size: 58px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block-start: 2px;
}

.yt-line {
  inline-size: var(--w, 100%);
  block-size: 6px;
  border-radius: 3px;
  background: var(--rule);
}

.yt-side .is-apart {
  margin-block-start: 8px;
}

.yt-main {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yt-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.yt-video {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.yt-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  background: var(--rule);
}

.yt-video .yt-line {
  block-size: 5px;
}

.yt-shorts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.yt-short {
  aspect-ratio: 9 / 14;
  border-radius: 5px;
}

.yt-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  block-size: 30px;
  padding-inline: 10px;
  border-radius: 6px;
}

.yt-banner .yt-line {
  block-size: 5px;
  background: var(--ink);
  opacity: 0.35;
}

.yt .hides {
  background: var(--tint);
}


/* 8. Sections */

.section {
  max-inline-size: var(--column);
  margin-inline: auto;
  padding: 80px var(--gutter) 0;
}

.section h2 {
  margin-block-end: 14px;
  font-size: var(--heading);
}

.section p + p {
  margin-block-start: 16px;
}

.section > p:has(+ dl),
.section > p:has(+ pre) {
  margin-block-end: 22px;
}

.section dl {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  border-block-start: 1px solid var(--rule);
}

.section dl dt,
.section dl dd {
  padding-block: 14px;
  border-block-end: 1px solid var(--rule);
}

.section dl dt {
  padding-inline-end: 20px;
  font-weight: 650;
}

@media (max-width: 30rem) {
  .section dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .section dl dt {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .section dl dd {
    padding-block-start: 2px;
  }
}

pre {
  margin-block-end: 22px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.7;
  overflow-x: auto;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

pre .muted {
  color: var(--quiet);
}

.signature {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
}


/* 9. Motion and print */

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

  .button:hover {
    transform: none;
  }
}

@media print {
  .skip,
  .site-header nav,
  .actions {
    display: none;
  }

  a {
    text-decoration: none;
  }
}