/* ipxreader.app. The palette is the iPodderX logo's: the radio's navy body, the sky of its
   screen, the blue of its tuning scale, and the orange needle, which is the needle alone. The
   typeface is the reader's own, Inter, the same file (web/InterVariable.woff2). */
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --navy:#0c2238;     /* the radio */
  --ink:#16304a;      /* body text, a step off the navy */
  --muted:#46607a;
  --sky:#dff0fb;      /* its screen */
  --page:#f1f8fd;
  --scale:#2f6aa0;    /* the tuning scale, and links */
  --tick:#8fc2ea;     /* the scale on the dark dial */
  --needle:#ff5500;
  --rule:#c6d9ea;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif}
a{color:var(--scale);text-underline-offset:.18em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--scale);outline-offset:3px;border-radius:6px}
main,.bar,footer{max-width:72rem;margin:0 auto;padding-inline:1.5rem}

.bar{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}
.home{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.25rem}
.home img{border-radius:9px;display:block}
.bar nav{display:flex;gap:1.5rem}
.bar nav a{color:var(--navy);text-decoration:none;font-weight:600}
.bar nav a:hover{text-decoration:underline}
.bar nav{align-items:center}
.src img{display:block}

.hero{padding-block:3rem 2.5rem;max-width:46rem}
h1{margin:0;color:var(--navy);font-weight:900;font-size:clamp(6.5rem,24vw,15rem);line-height:.82;letter-spacing:-.065em}
.intro{margin:1.75rem 0 0;max-width:38rem;color:var(--muted);font-size:1.125rem}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}
.btn{display:inline-block;padding:.8rem 1.35rem;border:2px solid var(--navy);border-radius:999px;color:var(--navy);text-decoration:none;font-weight:700}
.btn:hover{background:var(--sky)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:#1a3a5c}

/* The dial: a frequency row, minor and major ticks, stations on two staggered rows as a printed
   dial has them, and the needle, which points down at the scale and lights the station it stops
   on rather than crossing its name. --at is where it stops: the tuned station's middle. */
.dial{margin:1rem 0 0}
.scale{background:var(--navy);border-radius:1.25rem;overflow:hidden}
.track{position:relative;--at:45.8%}
.freq{position:relative;list-style:none;margin:0;padding:1.1rem 4% 0;display:flex;justify-content:space-between;color:var(--tick);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.freq li{width:0;display:flex;justify-content:center}  /* each number centred on its tick */
.freq::after{content:"";position:absolute;left:4%;right:4%;top:2.6rem;height:1.6rem;
  background:
    repeating-linear-gradient(90deg,var(--tick) 0 2px,transparent 2px 20%) 0 0/100% 100%,
    repeating-linear-gradient(90deg,rgba(143,194,234,.55) 0 1px,transparent 1px 2%) 0 100%/100% 45%;
  background-repeat:no-repeat}
.stations{list-style:none;margin:2.6rem 0 0;padding:0 1% 1.6rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;
  color:#cfe3f4;font-weight:550;font-size:.84rem;line-height:1.2;letter-spacing:-.01em;text-align:center}
.stations li{padding-inline:.15rem}
.stations li:nth-child(even){margin-top:1.7rem}
.needle{position:absolute;top:2.35rem;height:2.7rem;left:var(--at);width:3px;margin-left:-1.5px;background:var(--needle);border-radius:2px;
  box-shadow:0 0 0 1px rgba(12,34,56,.6);animation:tune 2.4s cubic-bezier(.3,.7,.3,1) .4s both}
.stations .tuned{text-decoration:underline 2px transparent;text-underline-offset:.3em;animation:lit .5s ease-out 2.6s both}
@keyframes tune{0%{left:3%}68%{left:calc(var(--at) + 7%)}86%{left:calc(var(--at) - 1.4%)}100%{left:var(--at)}}
@keyframes lit{from{color:#cfe3f4}to{color:#fff;font-weight:800;text-decoration-color:var(--needle)}}
@media (prefers-reduced-motion:reduce){.needle,.stations .tuned{animation-duration:0s;animation-delay:0s}}

h2{margin:0 0 1.5rem;color:var(--navy);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.does,.then{padding-block:4rem 0}
/* Each feature on one row: what it does on the left, beside the part of the app that shows it,
   framed in the dial's navy at no more than its own size. */
.feature{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:2.5rem}
.feature h3{margin:0 0 .5rem;color:var(--navy);font-weight:750;font-size:1.35rem;line-height:1.25}
.feature p{margin:0;max-width:34rem}
.frame{margin:0;justify-self:start;max-width:100%;padding:clamp(.6rem,1.6vw,1.1rem);background:var(--navy);border-radius:1.1rem}
.frame img{display:block;max-width:100%;height:auto;border-radius:.55rem}
/* DeadAir: the track is the episode's full length; talk keeps its width, each silence lights
   in the needle's orange and shrinks to a pause, and the end comes in from the right. */
.frame.deadair{justify-self:stretch;width:100%}
.wave{display:flex;align-items:center;height:4.5rem;border-radius:.55rem;background:rgba(143,194,234,.08)}
.talk{height:100%;background:url(/wave.svg) 0 50%/auto 100% repeat-x}
.talk:first-child{border-radius:.55rem 0 0 .55rem}
.t1{flex:0 0 14%}.t2{flex:0 0 19%}.t3{flex:0 0 9%}.t4{flex:0 0 16%}.t5{flex:0 0 12%}.t6{flex:0 0 10%}
.hush{flex:0 0 4%;align-self:stretch;background:linear-gradient(var(--tick),var(--tick)) 50%/100% 2px no-repeat;border-radius:.3rem;animation:hush 7s ease-in-out infinite}
@keyframes hush{
  0%,14%{flex-basis:4%;background-color:transparent}
  24%,30%{flex-basis:4%;background-color:rgba(255,85,0,.35)}
  48%,86%{flex-basis:.8%;background-color:rgba(255,85,0,.35)}
  100%{flex-basis:4%;background-color:transparent}}
@media (prefers-reduced-motion:reduce){.hush{animation:none;flex-basis:.8%;background-color:rgba(255,85,0,.35)}}
/* Signals: the noise, every other item, fades; the items about the words stay lit, marked in the
   needle's orange. */
.frame.signals{justify-self:stretch;width:100%}
.tune{padding:.4rem .5rem;border-radius:.55rem;background:rgba(143,194,234,.08);color:#fff}
.tune .for{margin:0 0 .5rem;color:var(--tick);font-size:.9rem}
.tune .for b{color:#fff;font-weight:650}
.tune ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.tune li{display:flex;align-items:center;min-height:1.6rem;padding-left:.7rem;border-left:3px solid transparent;font-size:.95rem;font-weight:600;line-height:1.3}
.tune .n i{display:block;height:.55rem;border-radius:.3rem;background:var(--tick);width:58%}
.tune .n:nth-child(3) i{width:46%}.tune .n:nth-child(4) i{width:70%}.tune .n:nth-child(7) i{width:40%}  /* the page's CSP takes no inline style */
.tune .n{animation:noise 7s ease-in-out infinite}
.tune .s{animation:signal 7s ease-in-out infinite}
@keyframes noise{0%,14%{opacity:.7}36%,86%{opacity:.15}100%{opacity:.7}}
@keyframes signal{0%,14%{border-left-color:transparent}36%,86%{border-left-color:var(--needle)}100%{border-left-color:transparent}}
@media (prefers-reduced-motion:reduce){.tune .n{animation:none;opacity:.15}.tune .s{animation:none;border-left-color:var(--needle)}}
.also{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 3.5rem}
.also dt{color:var(--navy);font-weight:750;font-size:1.2rem;line-height:1.25}
.also dd{margin:.45rem 0 0;max-width:34rem}


/* Docs (#223): a sidebar and a column, as docs.rs lays out a crate. The sidebar is the dial's
   sky; an endpoint's name is the scale's blue, a type's green, and each method has its own
   colour, every one AA on the page. Code to read is dark, as on the home page; a declaration is
   light, as docs.rs shows one. On a phone the sidebar follows the page instead of leading it. */
.docs{max-width:72rem;margin:0 auto;padding-inline:1.5rem;display:grid;grid-template-columns:15rem minmax(0,1fr);gap:3rem;align-items:start}
.docs main.doc{max-width:50rem;margin:0;padding:0}
.side{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;padding:1rem .75rem;background:var(--sky);border-radius:1rem;font-size:.92rem}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:.2rem .5rem;border-radius:.4rem;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.side li a:hover{background:#fff}
.side a[aria-current=page]{background:#fff;font-weight:700}
.side-h{margin:1.1rem .5rem .35rem;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.side-h a{color:inherit}
.side-back{margin:1rem .5rem 0}
.crate{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;color:var(--navy);text-decoration:none}
.crate img{border-radius:9px}
.crate b{display:block;font-size:1.1rem}
.ver{color:var(--muted);font-size:.85rem;font-weight:500}
.mono,.items a,.uses a,.list dt,.path,.decl,.fields dt,.item .name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.items a,.uses a{font-size:.82rem}
.items .verb{display:inline-block;min-width:3.6em}
.verb{font-weight:700}
.m-get .verb,.verb.m-get{color:#2f6aa0}
.m-post .verb,.verb.m-post{color:#1d6b44}
.m-patch .verb,.verb.m-patch{color:#875400}
.m-delete .verb,.verb.m-delete{color:#b3261e}
a.t,.item .name.t{color:#1d6b44}

.doc h1{margin:2rem 0 0;color:var(--navy);font-weight:900;font-size:clamp(2.6rem,8vw,4rem);line-height:1;letter-spacing:-.04em}
.doc h1.item{margin-top:.25rem;font-size:clamp(1.35rem,4vw,1.85rem);font-weight:500;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.item .kind{font-family:Inter,system-ui,sans-serif;color:var(--muted)}
.item .name{font-weight:700;color:var(--scale)}
.srclink{float:right;margin-left:1rem;font:500 .9rem/2.4 Inter,system-ui,sans-serif}
.path{margin:2rem 0 0;font-size:.9rem;color:var(--muted)}
.path a{color:inherit}
.lede{margin:1.5rem 0 0;color:var(--muted);font-size:1.125rem}
.doc h2{margin:2.5rem 0 .75rem;padding-bottom:.35rem;border-bottom:1px solid var(--rule);font-size:1.35rem;letter-spacing:-.01em}
.doc p{margin:.75rem 0}
.summary{font-size:1.06rem}
.access{color:var(--muted)}
.access b{color:var(--ink)}
.doc code{font:500 .9em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.doc :not(pre)>code{padding:.08em .3em;background:var(--sky);border-radius:.3em;overflow-wrap:anywhere}
.doc dt>code,.doc a>code{background:none;padding:0}
.doc pre{margin:1rem 0;padding:1rem 1.15rem;background:var(--navy);color:#e6f1fa;border-radius:.8rem;overflow-x:auto}
.doc pre code{font-size:.85rem}
.doc pre.decl{background:#fff;color:var(--ink);border:1px solid var(--rule)}
.decl a{text-decoration:none}
.scroll{margin:1rem 0;overflow-x:auto}
.doc table{width:100%;border-collapse:collapse;font-size:.95rem}
.doc th,.doc td{padding:.55rem .75rem .55rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.doc th{color:var(--navy);font-weight:700}
.doc td:first-child code{white-space:nowrap}
/* An item table: the name, and the first line of what it is. */
.list{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:.4rem 1.5rem;margin:0}
.list dt{font-size:.88rem;overflow-wrap:anywhere}
.list dt a{text-decoration:none}
.list dt a:hover{text-decoration:underline}
.list dd{margin:0}
.fields dt{position:relative;margin-top:1rem;font-size:.92rem;overflow-wrap:anywhere}
.fields dd{margin:.25rem 0 0 1.5rem}
.anchor{position:absolute;left:-1.1rem;color:var(--muted);text-decoration:none;opacity:0}
.fields dt:hover .anchor,.anchor:focus-visible{opacity:1}
.uses{padding-left:1.25rem}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0 0}
.cards div{padding:1.1rem 1.25rem;background:#fff;border:1px solid var(--rule);border-radius:1rem}
.cards dt{font-weight:750;font-size:1.1rem}
.cards dd{margin:.35rem 0 0;color:var(--muted)}
.bar nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--needle);text-decoration-thickness:2px}
@media (max-width:800px){
  .docs{grid-template-columns:minmax(0,1fr);gap:2rem;padding-inline:1rem}
  .side{position:static;max-height:none;order:2}
  .srclink{float:none;display:block;margin:0;line-height:1.8}
  .list{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .list dd{margin-bottom:.6rem}
  .cards{grid-template-columns:minmax(0,1fr)}
}

footer{margin-top:5rem;padding-block:1.75rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
footer p{margin:0}

@media (max-width:640px){
  main,.bar,footer{padding-inline:1rem}
  .bar nav{gap:1rem}
  .hero{padding-block:1.5rem 2rem}
  .feature{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.75rem}
  /* A wide crop at this width is too small to read: its left part, larger. */
  .frame img.cut{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:0 0}
  .frame img.cut.player{aspect-ratio:2.4/1}
  .frame img.cut.half{aspect-ratio:2.6/1}  /* the directory's left column */
  .also{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .dial{margin-inline:-1rem}
  .scale{border-radius:0}
  /* Six stations, the tuned one third, rather than twelve too narrow to read. */
  .track{--at:41.7%}
  .stations{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:2%}
  .stations li:nth-child(-n+3),.stations li:nth-child(n+10){display:none}
  .stations li:nth-child(even){margin-top:0}
  .stations li:nth-child(odd){margin-top:1.7rem}
}