/* 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; }
.version { color: var(--muted); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; padding-top: 2px; }
.wordmark {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font: 900 24px/1 var(--serif); letter-spacing: .01em;
}
.wordmark-glyph { width: 20px; height: 24px; }

.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='140 80 260 316'%3E%3Cg fill='none' stroke='%23cfc5b0' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M256 92v52' stroke-width='14'/%3E%3Cpath d='M162 384h228L256 152 150 336' stroke-width='30'/%3E%3C/g%3E%3C/svg%3E") center / 38% 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; justify-content: center; align-items: center; gap: 18px; }
.speed {
  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 { background: var(--surface-sunk); }
.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); }

/* Opened episodes */
.recent { margin-top: 34px; }
.recent-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.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); }
.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; }
}

/* 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; } }