/* Titus Retro watercolor system, 2026-10-03.
   The image layer creates place. Every control remains real HTML. */
:root{
  --tr-paper:#f4ecdc;
  --tr-paper-solid:#f8f1e5;
  --tr-paper-glass:rgba(248,241,229,.9);
  --tr-ink:#352823;
  --tr-ink-soft:#6c594c;
  --tr-oxide:#9a452f;
  --tr-blue:#496f89;
  --tr-olive:#687154;
  --tr-gold:#9a7848;
  --tr-rule:rgba(75,55,43,.2);
  --tr-shadow:0 12px 36px rgba(55,38,27,.13);
  --tr-radius:18px;
}

body{
  --tr-world:none;
  background-color:var(--tr-paper);
  background-image:
    linear-gradient(rgba(246,239,225,.88),rgba(246,239,225,.94)),
    radial-gradient(circle at 22% 14%,rgba(154,69,47,.07),transparent 36%),
    radial-gradient(circle at 78% 30%,rgba(73,111,137,.07),transparent 40%);
  color:var(--tr-ink);
}
body.page-home{--tr-world:url("worlds/peristyle.webp")}
body.page-podcasts{--tr-world:url("worlds/listening.webp")}
body.page-watch{--tr-world:url("worlds/odeon.webp")}
body.page-books{--tr-world:url("worlds/reading.webp")}

.watercolor-harbor{
  position:relative;
  isolation:isolate;
}
.watercolor-harbor::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:min(94svh,920px);
  width:100%;
  background-image:
    linear-gradient(to bottom,rgba(247,240,227,.04) 44%,var(--tr-paper) 96%),
    url("worlds/harbor.webp");
  background-position:center top;
  background-size:cover;
  filter:saturate(.84) contrast(.96);
}
.watercolor-harbor .mast{
  min-height:clamp(330px,52svh,520px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:clamp(48px,8svh,96px);
}
.watercolor-harbor .subjects{
  width:min(560px,100%);
  margin-inline:auto;
  grid-template-columns:1fr;
  gap:12px;
  border:0;
  background:transparent;
}
.watercolor-harbor .subject{
  min-height:0;
  padding:22px 26px;
  border:1px solid var(--tr-rule);
  border-radius:var(--tr-radius);
  background:var(--tr-paper-glass);
  box-shadow:var(--tr-shadow);
  backdrop-filter:blur(10px) saturate(.75);
  -webkit-backdrop-filter:blur(10px) saturate(.75);
}
.watercolor-harbor>.sechead:first-of-type,
.watercolor-harbor>.lede:first-of-type{
  width:min(560px,100%);
  margin-inline:auto;
  text-align:center;
}

body.page-home::before,
body.page-podcasts::before,
body.page-watch::before,
body.page-books::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:-1;
  height:min(92svh,900px);
  background-image:linear-gradient(to bottom,rgba(247,240,227,.06) 45%,var(--tr-paper) 96%),var(--tr-world);
  background-position:center;
  background-size:cover;
  filter:saturate(.86) contrast(.97);
}

.bar,.room-header,.podcast-picker-nav{
  border-color:var(--tr-rule)!important;
  background:var(--tr-paper-glass)!important;
  color:var(--tr-ink)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:blur(14px) saturate(.8);
  -webkit-backdrop-filter:blur(14px) saturate(.8);
}

.page-home .blad>main:first-child,
.page-home .blad>.intro:first-child,
.page-podcasts .blad>.intro,
.page-watch .blad>.intro,
.page-books .blad>.intro{
  min-height:clamp(420px,72svh,760px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(26px,6vw,72px);
}

.kies,.tools,.podcast-wall,.book-grid,.group,.titus-queue,.titus-dossier{
  border-color:var(--tr-rule)!important;
}
.podcast-picker-live,
.tools,
.podcast-wall,
.book-card,
.item,
.titus-queue,
.titus-dossier{
  background:var(--tr-paper-glass)!important;
  box-shadow:var(--tr-shadow);
  backdrop-filter:blur(10px) saturate(.75);
  -webkit-backdrop-filter:blur(10px) saturate(.75);
}

.room-mode{
  border-color:var(--tr-rule)!important;
  color:var(--tr-ink);
}
.picker-mood,.picker-format-group,.picker-wheel-shell{
  background:rgba(249,244,233,.9)!important;
}
[aria-pressed="true"],.is-current{
  border-color:color-mix(in srgb,var(--tr-blue) 70%,var(--tr-rule))!important;
}
[aria-pressed="true"],.is-current{
  box-shadow:inset 0 0 0 1px rgba(73,111,137,.35)!important;
}

.picker-wheel-band{
  background:linear-gradient(135deg,rgba(248,241,229,.95),rgba(73,111,137,.1))!important;
  border-color:rgba(73,111,137,.3)!important;
}
.picker-number,.count,.mono,.road{color:var(--tr-oxide)!important}
.titus-discover,.listen-fallback{color:var(--tr-blue)!important}

.titus-room-dock{
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(244,236,220,.99),rgba(248,241,229,.94));
  border-top:1px solid var(--tr-rule);
  box-shadow:0 -12px 42px rgba(55,38,27,.16);
}
.titus-room{
  --canvas:var(--tr-paper);
  --surface:var(--tr-paper-solid);
  --text:var(--tr-ink);
  --dim:var(--tr-ink-soft);
  --muted:var(--tr-ink-soft);
  --rule:var(--tr-rule);
  --gold:var(--tr-gold);
  --teal:var(--tr-blue);
  --teal-lift:color-mix(in srgb,var(--tr-blue) 82%,var(--tr-ink));
  --teal-soft:color-mix(in srgb,var(--tr-blue) 14%,var(--tr-paper));
  --hot:var(--tr-oxide);
  --lift:var(--tr-shadow);
}
.titus-room .room-stage{
  background-image:
    linear-gradient(rgba(244,236,220,.82),rgba(244,236,220,.94)),
    var(--tr-setting,url("worlds/listening.webp"));
  background-position:center;
  background-size:cover;
}
.titus-room .room-header,
.titus-room .room-dock,
.titus-room .room-matchbar,
.titus-room .room-transport{
  background:var(--tr-paper-glass)!important;
  backdrop-filter:blur(14px) saturate(.78);
  -webkit-backdrop-filter:blur(14px) saturate(.78);
}
.titus-room .room-transport{
  border-top:1px solid var(--tr-gold);
  box-shadow:0 -14px 44px rgba(55,38,27,.14);
}
.titus-room .room-player-grabber{min-height:32px}
.titus-room .room-player-grabber>span{background:color-mix(in srgb,var(--tr-ink) 20%,transparent)}
.titus-room .room-start-discover{
  background:var(--tr-blue)!important;
  color:#fffaf0!important;
}
.titus-room .titus-player-main{
  column-gap:14px;
}
.titus-room.player-open .titus-actions{
  width:100%;
  display:grid;
  grid-column:1/-1;
  grid-row:3;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  align-items:center;
  gap:8px;
}
.titus-room.player-open .titus-player.is-empty .titus-actions{
  grid-column:1/-1;
  grid-row:3;
}
.titus-room.player-open .titus-actions>*{
  margin:0!important;
}
.titus-room.player-open .titus-actions .titus-volume{
  grid-column:auto;
  justify-self:end;
}

.titus-room-dock button{min-height:44px}
.room-transport{
  background:var(--tr-paper-glass)!important;
  color:var(--tr-ink)!important;
}
.titus-play{
  background:var(--tr-oxide)!important;
  color:#fff9ed!important;
  border-color:transparent!important;
}
.titus-progress input,.titus-volume input{accent-color:var(--tr-oxide)}

@media(max-width:760px){
  body.page-home::before,
  body.page-podcasts::before,
  body.page-watch::before,
  body.page-books::before{
    height:min(84svh,720px);
    background-position:center top;
  }
  .podcast-picker-live{margin-inline:-6px!important;padding-inline:12px!important}
  .picker-format-grid{grid-template-columns:1fr!important}
  .titus-room-dock{font-size:14px}
  .titus-room .room-stage{
    background-position:58% center;
  }
  .titus-room .titus-player-main,
  .titus-room .titus-player.is-empty .titus-player-main{
    grid-template-columns:minmax(0,1fr) 152px;
  }
  .titus-room .titus-player.is-empty .titus-now{visibility:hidden}
  .titus-room .titus-player.is-empty .titus-controls{justify-self:end}
  .titus-room.player-open .titus-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .titus-room.player-open .titus-actions>*{
    width:100%;
    justify-content:center;
  }
  .titus-room.player-open .titus-actions .titus-volume{
    grid-column:1/-1;
    justify-self:stretch;
  }
  .titus-room.player-open .titus-actions .titus-volume input{width:100%}
  .watercolor-harbor::before{height:min(82svh,700px);background-position:center top}
  .watercolor-harbor .mast{min-height:390px}
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tr-paper:#1e1b17;--tr-paper-solid:#28231d;--tr-paper-glass:rgba(35,30,25,.92);
    --tr-ink:#eee3ce;--tr-ink-soft:#c4b39a;--tr-rule:rgba(226,203,166,.2);
    --tr-shadow:0 12px 36px rgba(0,0,0,.3);
  }
  body.page-home::before,body.page-podcasts::before,body.page-watch::before,body.page-books::before{
    background-image:linear-gradient(to bottom,rgba(30,27,23,.25) 35%,var(--tr-paper) 96%),var(--tr-world);
    filter:saturate(.55) brightness(.62);
  }
}
@media(prefers-reduced-transparency:reduce){
  .bar,.room-header,.podcast-picker-nav,.podcast-picker-live,.tools,.podcast-wall,.book-card,.item,.titus-queue,.titus-dossier{
    background:var(--tr-paper-solid)!important;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}