/* Ting ting. Light only, in Glimpt's palette. */

@font-face { font-family: Simonetta; font-weight: 900; font-display: swap; src: url(fonts/simonetta-900-latin.woff2) format('woff2'); }

:root {
  --paper:        #faf9f6;
  --surface:      #ffffff;
  --surface-sunk: #f4f2ec;
  --beige:        #f3ede1;
  --ink:          #17171a;
  --ink-2:        #484540;
  --muted:        #7b776f;
  --line:         #e4e1d9;
  --line-strong:  #cfcbbf;
  --accent:       #1d5c4f;
  --accent-deep:  #14453b;
  --accent-wash:  #eef4f2;
  --amber:        #8a6524;
  --amber-wash:   #f9f2e7;
  --radius: 10px;
  --serif: 'Simonetta', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.masthead { padding: 18px 16px 6px; max-width: 560px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mast-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.about-open { color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; padding: 4px 0; }
.about-open:hover { text-decoration: underline; }
.version { color: var(--muted); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.wordmark {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font: 900 24px/1 var(--serif); letter-spacing: .01em;
}
.wordmark-glyph { width: 30px; height: 28px; margin: -3px 0 -1px; }

.wrap { max-width: 560px; margin: 0 auto; padding: 8px 16px 48px; }

/* Now playing */
.player { text-align: center; padding-top: 10px; }
.art {
  width: min(64vw, 260px); aspect-ratio: 1; margin: 0 auto 18px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--beige) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='56 72 383 362'%3E%3Cg fill='%23cfc5b0'%3E%3Cpath d='M203 112C205.761 112 208 114.239 208 117V196.222C210.261 197.277 212.207 198.978 213.56 201.167L342.06 409.167C344.537 413.177 344.649 418.215 342.354 422.332C340.058 426.449 335.714 429 331 429H74C66.8203 429 61 423.18 61 416C61 408.82 66.8203 403 74 403H307.688L202.265 232.354L108.183 378.262C104.292 384.296 96.2459 386.033 90.2119 382.143C84.1779 378.252 82.4404 370.206 86.3311 364.172L191.574 200.955L191.806 200.608C193.346 198.38 195.521 196.719 198 195.805V117C198 114.239 200.239 112 203 112Z'/%3E%3Cpath d='M279.726 208.15C284.418 208.15 289.006 209.542 292.907 212.149C296.809 214.756 299.85 218.461 301.646 222.796C303.442 227.132 303.911 231.902 302.996 236.505C302.08 241.107 299.821 245.335 296.503 248.653C293.185 251.971 288.957 254.231 284.355 255.146C279.752 256.061 274.982 255.592 270.646 253.796C266.311 252 262.606 248.959 259.999 245.057C257.391 241.156 256 236.568 256 231.876C256 225.583 258.5 219.549 262.949 215.099C267.399 210.65 273.433 208.15 279.726 208.15Z'/%3E%3Cpath d='M256.028 172.076C266.963 172.045 277.794 174.188 287.894 178.38C297.993 182.572 307.158 188.73 314.857 196.495C322.624 204.277 328.776 213.517 332.959 223.685C337.143 233.852 339.276 244.746 339.235 255.741H373.478C373.478 190.696 320.754 137.805 256.014 137.805L256.028 172.076Z'/%3E%3Cpath d='M256.069 111.346C335.294 111.346 399.757 176.169 399.757 255.81H434C434 157.299 354.192 77.0886 256.069 77.0886V111.346Z'/%3E%3C/g%3E%3C/svg%3E") center / 44% no-repeat;
  box-shadow: 0 1px 2px rgba(23,23,26,.06), 0 8px 24px rgba(23,23,26,.08);
}
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art img:not([src]), .art img.is-broken { visibility: hidden; }

.ep-show { margin: 0 0 4px; color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ep-title { margin: 0 auto 4px; max-width: 30em; font: 900 22px/1.25 var(--serif); text-wrap: balance; }
.ep-date { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.5em; }

.scrub { margin: 22px 0 6px; }
.times { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  --pct: 0%;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--line) var(--pct));
}
input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 6px 0 14px; }
.controls button { border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.skip { width: 52px; height: 52px; border-radius: 50%; color: var(--ink-2); display: grid; place-items: center; }
.skip svg { width: 38px; height: 38px; }
.skip text { font: 700 8.5px var(--sans); fill: currentColor; }
.skip:active { background: var(--surface-sunk); }
.play {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent) !important; color: #fff;
  box-shadow: 0 2px 10px rgba(29,92,79,.25);
}
.play:active { background: var(--accent-deep) !important; }
.play svg { width: 34px; height: 34px; fill: currentColor; }
.play .i-pause, .play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: block; }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.under { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.speed, .save {
  min-width: 56px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.speed:active, .save:active { background: var(--surface-sunk); }
/* Download: the pill fills as it goes, then says so; asks once before deleting. */
.save { --pct: 0%; }
.save[data-state=busy] { color: var(--accent); border-color: #b9d2cb; background: linear-gradient(to right, var(--accent-wash) var(--pct), var(--surface) var(--pct)); }
.save[data-state=done] { color: var(--accent); }
.save[data-state=done]::before { content: '✓ '; }
.save.is-confirm { color: var(--amber); border-color: #e2cfa8; background: var(--amber-wash); }
.save.is-confirm::before { content: ''; }
.ep-link { color: var(--accent); font-size: 14px; }

.status {
  margin: 16px auto 0; max-width: 28em; padding: 10px 14px; border-radius: var(--radius);
  background: var(--amber-wash); color: var(--amber); font-size: 14px; text-align: left;
}
.status.is-quiet { background: var(--surface-sunk); color: var(--ink-2); }

/* Nothing yet */
.empty { padding: 28px 0 8px; color: var(--ink-2); }
.empty p { margin: 0 0 12px; max-width: 34em; }
.empty-lede { font: 900 21px/1.3 var(--serif); color: var(--ink); }
.empty a { color: var(--accent); }
.empty strong { color: var(--ink); }
/* The signature under the intro, at hand-written size, as in Glimpt. */
.empty img[src$="-sig.svg"] { display: block; height: 76px; width: auto; margin: 4px 0 0 2px; }
@media (max-width: 640px) { .empty img[src$="-sig.svg"] { height: 64px; } }

/* Opened episodes */
.recent { margin-top: 34px; }
.tabs { display: flex; gap: 20px; margin: 0 0 8px; }
.tab {
  border: 0; border-bottom: 2px solid transparent; background: none; padding: 2px 0 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.tab[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Show notes: the back of the card */
.notes {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere;
}
.notes p { margin: 0 0 12px; }
.notes a { color: var(--accent); }
.notes .ts {
  border: 0; margin: 0; padding: 0 3px; border-radius: 4px; cursor: pointer;
  background: var(--accent-wash); color: var(--accent); font: inherit; font-variant-numeric: tabular-nums;
}
.notes .ts:active { background: #dcebe6; }
.notes-msg { margin: 0 0 4px; color: var(--muted); }
.notes-src { margin: 0; font-size: 12px; color: var(--muted); }
.recent-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.recent-list li { display: flex; align-items: center; border-top: 1px solid var(--line); }
.recent-list li:first-child { border-top: 0; }
.rc-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; background: none; padding: 10px 4px 10px 12px; cursor: pointer;
}
.rc-open:active { background: var(--surface-sunk); }
.rc-art { flex: none; width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--beige); }
.rc-text { min-width: 0; flex: 1; }
.rc-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-meta { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rc-bar i { display: block; height: 100%; background: var(--accent); }
li.is-current .rc-title { color: var(--accent); }
.recent-list li.is-leaving { overflow: hidden; pointer-events: none; }
.rc-remove {
  flex: none; width: 44px; height: 44px; margin-right: 4px; border: 0; background: none; border-radius: 50%;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.rc-remove:hover, .rc-remove:focus-visible { color: var(--ink); background: var(--surface-sunk); }
.rc-remove svg { width: 16px; height: 16px; }

@media (min-width: 700px) {
  .masthead { padding-top: 28px; }
  .player { padding-top: 24px; }
}

/* About, and how to link to an episode */
.about {
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink-2);
  box-shadow: 0 12px 48px rgba(23,23,26,.22);
  overflow-y: auto; overscroll-behavior: contain;
}
.about::backdrop { background: rgba(23,23,26,.38); }
.about-in { padding: 6px 20px 22px; font-size: 15px; line-height: 1.55; }
.about-top {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -20px 4px; padding: 12px 12px 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.about-h { margin: 0; font: 900 21px/1.25 var(--serif); color: var(--ink); }
.about-close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--muted); display: grid; place-items: center;
}
.about-close:hover, .about-close:focus-visible { color: var(--ink); background: var(--surface-sunk); }
.about-close svg { width: 16px; height: 16px; }
.about p, .about ul { margin: 10px 0; }
.about ul { padding-left: 1.2em; }
.about li + li { margin-top: 4px; }
.about h3 { margin: 26px 0 6px; font: 900 18px/1.3 var(--serif); color: var(--ink); }
.about h4 { margin: 20px 0 4px; font-size: 15px; color: var(--ink); }
.about a { color: var(--accent); }
.about-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent-wash); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.about code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.about pre {
  margin: 8px 0; padding: 10px 12px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.about pre code { overflow-wrap: normal; white-space: pre; }
/* Copy, floating at the top right of each code example. The box keeps room
   for it on the right so the end of a line can scroll clear of it. */
.code-box { position: relative; }
/* A strip down the right side, fading in from the left, that the code scrolls under. */
.code-box::after {
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 84px; pointer-events: none;
  border-radius: 0 7px 7px 0; background: linear-gradient(to right, transparent, var(--surface) 16px);
}
.code-box pre { padding-right: 76px; }
.code-copy {
  position: absolute; top: 6px; right: 6px;
  padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.5;
  z-index: 1;
}
.code-copy:hover { background: var(--surface-sunk); }
.code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-copy.is-done { color: var(--accent); border-color: #b9d2cb; background: var(--accent-wash); }
.about-params { margin: 10px 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.about-params dt { white-space: nowrap; }
.about-params dd { margin: 0; }
@media (max-width: 480px) {
  .about-params { grid-template-columns: 1fr; gap: 0; }
  .about-params dd { margin: 0 0 8px; }
}

/* The podcast expert, suggesting an install (install.js) */
.expert {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: flex-end; gap: 10px;
  max-width: min(460px, calc(100vw - 24px));
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.expert > * { pointer-events: auto; }
.expert.is-in { opacity: 1; transform: none; }
.expert-bubble {
  position: relative; flex: 1 1 auto; min-width: 0;
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--accent-wash); border: 1px solid #d5e3df; border-radius: 14px;
  box-shadow: 0 6px 28px rgba(23,23,26,.14);
}
/* The tail, in two layers so it keeps the border, aimed at her mouth. */
.expert-bubble::before, .expert-bubble::after {
  content: ''; position: absolute; bottom: 46px; width: 0; height: 0;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.expert-bubble::before { right: -11px; border-left: 11px solid #d5e3df; }
.expert-bubble::after  { right: -9px;  border-left: 10px solid var(--accent-wash); }
.expert-tag { margin: 0 0 4px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.expert-line { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.expert-share { width: 15px; height: 15px; vertical-align: -2px; margin: 0 1px 0 4px; color: var(--accent); }
.expert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.expert-go, .expert-later { border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.expert-go { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.expert-go:active { background: var(--accent-deep); }
.expert-later { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); }
.expert-art { flex: none; width: 112px; height: auto; display: block; }
@media (min-width: 500px) { .expert-art { width: 132px; } .expert-bubble::before, .expert-bubble::after { bottom: 58px; } }