/* ==========================================================================
   So So Boring — one stylesheet, phone first.

   The whole site is designed for somebody lying in the dark holding a phone
   above their face, so:

     * dark by default, with no white flash on load,
     * every tap target at least 44px,
     * the primary navigation at the BOTTOM of the screen, in thumb reach,
     * layouts fluid edge to edge at every width — nothing is boxed into a
       fixed centre column,
     * ORANGE means one thing and one thing only: this is playing right now.
       Nothing else on the site is orange. Buttons are solid and readable;
       nothing important is rendered in a dim grey.
   ========================================================================== */

:root {
    --bg:        #0d1120;
    --bg-2:      #141a2e;
    --bg-3:      #1b2340;
    --bg-hover:  #212a4c;
    --line:      #2a3459;
    --line-soft: #1e2745;

    --ink:       #e9ecf8;
    --ink-2:     #aab4d2;   /* muted, but still passes contrast on --bg */
    --ink-3:     #7d88a8;   /* only for genuinely secondary metadata */

    --primary:      #6f7ae8;
    --primary-dark: #5763d6;
    --primary-ink:  #ffffff;

    /* Reserved for "currently playing". Never used for a button or a link. */
    --accent:    #f0912f;
    --accent-dim:#7a4a15;

    --ok:        #3fa87a;
    --warn:      #d9a13a;
    --bad:       #e2585c;

    --radius:    14px;
    --radius-sm: 10px;
    --shadow:    0 6px 24px rgba(0,0,0,.45);

    --tap:       48px;
    --gut:       16px;
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

img, svg, video { max-width: 100%; }
svg { display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
p  { margin: 0 0 1em; }

.muted  { color: var(--ink-2); }
.small  { font-size: .875rem; }
.tiny   { font-size: .78rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono   { font-variant-numeric: tabular-nums; }

/* Full width, always. Padding, never a max-width. --------------------------- */
.wrap {
    width: 100%;
    padding-left: var(--gut);
    padding-right: var(--gut);
}
@media (min-width: 900px)  { :root { --gut: 28px; } }
@media (min-width: 1400px) { :root { --gut: 40px; } }

.section { padding: 28px 0; }
.section--tight { padding: 16px 0; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(13,17,32,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gut);
    min-height: 56px;
}
.brand {
    display: inline-flex; align-items: baseline; gap: 7px;
    color: var(--ink); font-weight: 800; font-size: 1.02rem;
    letter-spacing: -.02em; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__z {
    font-size: 1.3rem; color: var(--primary); font-weight: 800;
    transform: rotate(-8deg); display: inline-block;
}
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav__link {
    color: var(--ink-2);
    padding: 10px 10px;
    border-radius: var(--radius-sm);
    font-size: .92rem; font-weight: 600;
}
.topnav__link:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
.topnav__link.is-here { color: var(--ink); background: var(--bg-3); }
.topnav__link--wide { display: none; }
@media (min-width: 760px) { .topnav__link--wide { display: inline-block; } }

.sitenotice {
    background: var(--bg-3);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gut);
    font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Bottom navigation — the real menu on a phone
   -------------------------------------------------------------------------- */
body.has-bottomnav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

.bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex;
    background: rgba(16,21,40,.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav__item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 60px;
    padding: 8px 4px;
    color: var(--ink-2);
    font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.bottomnav__item:hover { text-decoration: none; color: var(--ink); }
.bottomnav__item.is-here { color: var(--primary); }
.bottomnav__icon { width: 24px; height: 24px; }
.bottomnav__icon svg { width: 24px; height: 24px; }

@media (min-width: 900px) {
    /* On a desktop the top bar is enough. */
    .bottomnav { display: none; }
    body.has-bottomnav { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Buttons — solid, legible, never a pale ghost of a control
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap);
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--ink);
    font: inherit; font-weight: 700; font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, transform .06s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-dark); }

.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { background: var(--bg-2); }

.btn--danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn--danger:hover { background: #c94a4e; }

.btn--ok { background: var(--ok); color: #06231a; border-color: var(--ok); }

.btn--sm { min-height: 38px; padding: 8px 14px; font-size: .85rem; }
.btn--lg { min-height: 58px; padding: 16px 28px; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */
.panel {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 18px;
}
.panel + .panel { margin-top: 16px; }
.panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.panel__head h2, .panel__head h3 { margin: 0; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   The library gallery
   -------------------------------------------------------------------------- */
.gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 2000px) { .gallery { grid-template-columns: repeat(5, 1fr); } }

.story {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 16px;
    min-height: 100%;
}
.story:hover { border-color: var(--line); background: var(--bg-3); }
.story.is-playing { border-color: var(--accent); }

.story__cat {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 8px;
}
.story__title {
    font-size: 1.02rem; font-weight: 700; line-height: 1.3;
    margin: 0 0 6px;
}
.story__title a { color: var(--ink); }
.story__desc {
    color: var(--ink-2); font-size: .88rem; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story__meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    font-size: .78rem; color: var(--ink-3);
    margin-top: auto; padding-top: 10px;
}
.story__actions { display: flex; gap: 8px; margin-top: 12px; }
.story__actions .btn { flex: 1; }

/* The "currently playing" flag — the one orange thing on the site. */
.nowplaying {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent);
    font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.nowplaying__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.nowplaying__bars i {
    width: 3px; background: var(--accent); border-radius: 1px;
    animation: bar 1.1s ease-in-out infinite;
}
.nowplaying__bars i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.nowplaying__bars i:nth-child(2) { height: 12px; animation-delay: .18s; }
.nowplaying__bars i:nth-child(3) { height: 8px;  animation-delay: .36s; }
@keyframes bar { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .nowplaying__bars i { animation: none; } }

/* Sleep score pill */
.score {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--bg-3); border: 1px solid var(--line);
    font-size: .74rem; font-weight: 700; color: var(--ink-2);
}
.score--high { color: var(--ok); border-color: rgba(63,168,122,.4); }

/* --------------------------------------------------------------------------
   Search and filters
   -------------------------------------------------------------------------- */
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar input[type="search"] { flex: 1; }

.filters { display: grid; gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) {
    .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
}

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { height: 0; }
.chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--ink-2);
    font-size: .85rem; font-weight: 600;
    white-space: nowrap;
}
.chip:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.chip.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip__n { font-size: .74rem; opacity: .8; }

/* Category tiles for the browse rail */
.cats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .cats { grid-template-columns: repeat(6, 1fr); } }
.cat {
    display: block; padding: 14px;
    background: var(--bg-2); border: 1px solid var(--line-soft);
    border-radius: var(--radius); color: var(--ink);
}
.cat:hover { background: var(--bg-3); text-decoration: none; border-color: var(--line); }
.cat.is-on { border-color: var(--primary); }
.cat__name { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.cat__meta { font-size: .78rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field > label, .label {
    display: block; margin-bottom: 6px;
    font-size: .85rem; font-weight: 700; color: var(--ink);
}
.hint { font-size: .82rem; color: var(--ink-2); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="date"], select, textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 16px;              /* 16px stops iOS zooming the page on focus */
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4d2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(111,122,232,.25);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.check input[type="checkbox"], .check input[type="radio"] {
    width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary);
}
.check label { font-weight: 500; font-size: .92rem; }

fieldset { border: 0; padding: 0; margin: 0 0 16px; }

/* A file input that does not look like 1998 */
.filedrop {
    display: block;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--bg-3);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
}
.filedrop:hover, .filedrop.is-over { border-color: var(--primary); background: var(--bg-hover); }
.filedrop input[type="file"] { display: none; }
.filedrop__big { font-weight: 700; margin-bottom: 4px; }

.progress {
    height: 10px; border-radius: 999px; background: var(--bg-3);
    overflow: hidden; border: 1px solid var(--line);
}
.progress__bar { height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.flashes { padding-top: 14px; }
.notice {
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    margin-bottom: 12px;
    font-size: .92rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
}
.notice--ok   { border-color: rgba(63,168,122,.5);  background: rgba(63,168,122,.12); }
.notice--bad  { border-color: rgba(226,88,92,.5);   background: rgba(226,88,92,.12); }
.notice--warn { border-color: rgba(217,161,58,.5);  background: rgba(217,161,58,.12); }
.notice--info { border-color: rgba(111,122,232,.5); background: rgba(111,122,232,.12); }

.empty {
    text-align: center; padding: 44px 20px;
    color: var(--ink-2);
    border: 1px dashed var(--line); border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Tables — real tables on a desktop, stacked cards on a phone
   -------------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}
table.data th {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-2); font-weight: 700; white-space: nowrap;
}
table.data tr:hover td { background: var(--bg-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    table.stack, table.stack thead, table.stack tbody,
    table.stack th, table.stack td, table.stack tr { display: block; }
    table.stack thead { display: none; }
    table.stack tr {
        background: var(--bg-2); border: 1px solid var(--line-soft);
        border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
    }
    table.stack td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 14px; }
    table.stack td::before {
        content: attr(data-label);
        font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
        color: var(--ink-2); font-weight: 700; flex: 0 0 auto;
    }
    table.stack td.num { text-align: right; }
}

/* --------------------------------------------------------------------------
   Statistic tiles
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
    background: var(--bg-2); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 14px 16px;
}
.stat__n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Marketing pages
   -------------------------------------------------------------------------- */
.hero { padding: 40px 0 32px; }
.hero h1 { font-size: 2.1rem; margin-bottom: .35em; }
@media (min-width: 900px) { .hero { padding: 72px 0 56px; } .hero h1 { font-size: 3.1rem; } }
.hero__lede { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 24px; }
@media (min-width: 900px) { .hero__lede { font-size: 1.25rem; max-width: 46ch; } }

/* Long-form copy stays readable without boxing the page into a fixed column:
   the container is full width and the text sits in a fluid column of it. */
.prose { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1000px) { .prose { grid-template-columns: minmax(0, 68ch) 1fr; gap: 48px; } }
.prose h2 { margin-top: 1.6em; }
.prose li { margin-bottom: .4em; }

.steps { counter-reset: step; display: grid; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step__n {
    counter-increment: step;
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: var(--primary-ink);
    display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.step__n::before { content: counter(step); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sitefoot {
    margin-top: 48px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-2);
    padding: 32px 0 24px;
}
.sitefoot__grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .sitefoot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sitefoot__grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.sitefoot__brand .brand { margin-bottom: 10px; }
.sitefoot h4 { margin-bottom: 10px; }
.sitefoot a { display: block; color: var(--ink-2); padding: 5px 0; font-size: .9rem; }
.sitefoot a:hover { color: var(--ink); }
.sitefoot__bar {
    margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
    font-size: .8rem; color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack-sm > * + * { margin-top: 8px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.hide { display: none !important; }
@media (max-width: 699px)  { .desk-only { display: none !important; } }
@media (min-width: 700px)  { .phone-only { display: none !important; } }

.divider { height: 1px; background: var(--line-soft); margin: 22px 0; border: 0; }

.badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2);
}
.badge--ok      { color: var(--ok);   border-color: rgba(63,168,122,.45); }
.badge--warn    { color: var(--warn); border-color: rgba(217,161,58,.45); }
.badge--bad     { color: var(--bad);  border-color: rgba(226,88,92,.45); }
.badge--playing { color: var(--accent); border-color: rgba(240,145,47,.5); }

.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2);
    font-weight: 600; font-size: .9rem;
}
.pager a:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }
.pager .is-here { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ==========================================================================
   The player
   --------------------------------------------------------------------------
   This is the screen people actually use, in the dark, one-handed. Everything
   important is enormous and near the bottom of the screen. There is no
   scrubbing bar to fumble: you are not trying to find a bit you liked.
   ========================================================================== */

.player {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 80% at 50% 0%, #161d38 0%, var(--bg) 62%);
    padding: 0 var(--gut) calc(24px + env(safe-area-inset-bottom));
}

.player__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 0; min-height: 56px;
}
.player__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -10px;
    border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.player__close svg { width: 24px; height: 24px; }

/* The hour remaining. Quiet, but always visible: this is the promise. */
.hourleft {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
    font-size: .82rem; font-weight: 700; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.hourleft__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.hourleft.is-live .hourleft__dot { background: var(--accent); }
.hourleft.is-live { color: var(--ink); }

.player__body {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px 0 8px;
    text-align: left;
}
.player__cat {
    font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 12px;
}
.player__title {
    font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
    margin: 0 0 10px;
}
@media (min-width: 700px) { .player__title { font-size: 2.4rem; } }
.player__by { color: var(--ink-2); font-size: .95rem; margin-bottom: 20px; }
.player__desc {
    color: var(--ink-2); font-size: .95rem; line-height: 1.65;
    max-height: 7.5em; overflow: hidden;
}

/* Elapsed / total. No seek bar: fumbling for a scrubber wakes you up. */
.player__times {
    display: flex; justify-content: space-between;
    font-size: .8rem; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    margin-top: 18px;
}
.player__track {
    height: 4px; border-radius: 999px; background: var(--bg-3);
    overflow: hidden; margin-top: 8px;
}
.player__track i { display: block; height: 100%; width: 0; background: var(--ink-3); transition: width .4s linear; }
.player.is-playing .player__track i { background: var(--accent); }

/* The controls, sat at the bottom where a thumb already is. */
.player__controls {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    padding: 26px 0 18px;
}
.pbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--ink);
    cursor: pointer;
}
.pbtn:hover { background: var(--bg-3); }
.pbtn svg { width: 24px; height: 24px; }
.pbtn--main {
    width: 96px; height: 96px;
    background: var(--primary); border-color: var(--primary); color: var(--primary-ink);
    box-shadow: 0 8px 30px rgba(111,122,232,.35);
}
.pbtn--main:hover { background: var(--primary-dark); }
.pbtn--main svg { width: 40px; height: 40px; }
.player.is-playing .pbtn--main { background: var(--accent); border-color: var(--accent); color: #241202; box-shadow: 0 8px 30px rgba(240,145,47,.3); }

.player__foot { display: flex; gap: 10px; }
.player__foot .btn { flex: 1; }

/* The end of the hour. Deliberately calm, deliberately a dead end until a
   human touches it — this is the whole point of the one-hour rule. */
.hourup {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(8,11,22,.96);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 32px var(--gut) calc(48px + env(safe-area-inset-bottom));
    text-align: center;
}
.hourup h2 { font-size: 1.5rem; margin-bottom: 4px; }
.hourup p { color: var(--ink-2); max-width: 34ch; }
.hourup .btn { margin-top: 18px; min-width: 240px; }

/* The "did it work?" question, asked once, at the start of the next session. */
.sleepask { border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); padding: 16px; }
.sleepask__q { font-weight: 700; margin-bottom: 12px; }
.sleepask__opts { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }