/* St. Stephen Deacons - shared styles for the hymn library, the classes page,
   and the hazzat booklets page. Bespoke CSS from the diocese brand guide. */

:root{
  --white:#FFFFFF;
  --cloud:#F6F7F7;
  --cloud-2:#EEF1F1;
  --ink:#252A2C;
  --muted:#626C70;
  --line:#DFE5E4;
  --teal:#327482;
  --teal-deep:#285E6A;
  --teal-tint:rgba(50,116,130,.09);
  --gold:#B68B43;

  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-brand:'Grenze Gotisch','Metamorphous','Iowan Old Style',Palatino,'Palatino Linotype',serif;
  --font-cop:'Noto Sans Coptic','Segoe UI Historic','New Athena Unicode','Antinoou',serif;

  --maxw:912px;
  --pad:24px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:72px;
  --r:8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
button{ font-family:inherit; }
::selection{ background:var(--teal-tint); }

:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.cop{ font-family:var(--font-cop); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand .mark{
  width:34px; height:40px; flex:none; overflow:hidden;
  border-radius:44% 44% 6px 6px / 58% 58% 6px 6px;
  border:1px solid var(--line);
}
.brand .mark img{ width:100%; height:100%; object-fit:cover; object-position:50% 6%; display:block; }
.brand .wordmark{
  font-family:var(--font-brand); font-weight:500;
  font-size:19px; line-height:1; letter-spacing:.01em;
  color:var(--ink); white-space:nowrap;
}
.nav{ display:flex; align-items:center; gap:22px; font-size:14px; }
.nav a{ color:var(--muted); white-space:nowrap; }
.nav a:hover{ color:var(--teal); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:500; }
@media (max-width:600px){
  .nav{ gap:15px; font-size:13px; }
  .nav a.nav-home{ display:none; }
  .brand .wordmark{ font-size:16px; }
  .brand .wordmark .wm-rest{ display:none; }
}
@media (max-width:330px){
  .brand .wordmark{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding-top:var(--s6); padding-bottom:var(--s3); }
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s2);
}
.hero h1{
  font-size:clamp(30px,6vw,46px); font-weight:600; line-height:1.08;
  letter-spacing:-.025em; margin:0 0 var(--s2);
}
.hero p{
  color:var(--muted); font-size:17px; max-width:60ch; margin:0 0 var(--s4);
}

/* ---------- Sub-page intro ---------- */
.page-intro{ padding-top:var(--s6); padding-bottom:var(--s2); }
.page-intro .season-rule{ margin-bottom:16px; }
.page-intro .s-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
.page-intro h1{
  font-size:clamp(26px,5vw,38px); font-weight:600; line-height:1.1;
  letter-spacing:-.025em; margin:0 0 var(--s2);
}
.page-intro p{ color:var(--muted); font-size:16px; max-width:58ch; margin:0; }

.backlink{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--muted); margin-top:var(--s4);
}
.backlink:hover{ color:var(--teal); text-decoration:none; }
.backlink svg{ flex:none; }

/* ---------- Search ---------- */
.search{ position:relative; max-width:640px; }
.search .icon{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; display:flex;
}
.search input{
  width:100%; height:52px;
  padding:0 44px 0 44px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .15s ease;
}
.search input::placeholder{ color:#8b949a; }
.search input:hover{ border-color:#c8d0d0; }
.search input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--teal);
}
.search .clear-x{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:none; color:var(--muted);
  border-radius:6px; cursor:pointer; display:none; align-items:center; justify-content:center;
}
.search .clear-x:hover{ background:var(--cloud-2); color:var(--ink); }
.search[data-filled="1"] .clear-x{ display:flex; }

/* ---------- Filter chips ---------- */
.filters{ margin-top:var(--s3); display:flex; flex-direction:column; gap:12px; }
.filter-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.filter-row > .label{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); width:70px; flex:none; padding-top:6px;
}
@media (max-width:600px){
  .filter-row > .label{ width:100%; padding-top:0; }
}
.chip{
  height:34px; padding:0 14px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; line-height:1;
  color:var(--muted);
  background:var(--white);
  border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{ background:var(--cloud); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--teal-tint); border-color:var(--teal); color:var(--teal-deep);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
.chip[aria-pressed="true"] .dot{ background:var(--teal); }
.clear-link{
  display:none;
  margin:2px 0 0 72px; align-self:flex-start;
  font-size:13px; color:var(--teal); background:none; border:0; cursor:pointer; padding:4px 2px;
}
.clear-link:hover{ text-decoration:underline; text-underline-offset:3px; }
body[data-active="1"] .clear-link{ display:inline-block; }
@media (max-width:600px){ .clear-link{ margin-left:0; } }

/* ---------- Results meter ---------- */
.meter{
  margin-top:var(--s3);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.meter b{ color:var(--ink); font-weight:600; }

/* ---------- Library ---------- */
.library{ padding-bottom:0; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.library{ animation:rise .5s ease both; }

.season{ margin-top:var(--s6); }
.season:first-child{ margin-top:var(--s4); }
.season.is-hidden{ display:none; }
.season-rule{ width:40px; height:2px; background:var(--gold); margin-bottom:14px; }
.season-head .s-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 6px;
}
.season-head .s-eyebrow .cop{ text-transform:none; letter-spacing:0; font-size:14px; }
.season-head h2{
  font-size:clamp(21px,3.6vw,27px); font-weight:600; letter-spacing:-.02em;
  margin:0 0 4px;
}
.season-head .s-note{ color:var(--muted); font-size:14px; margin:0; max-width:56ch; }

.group{ margin-top:var(--s4); }
.group.is-hidden{ display:none; }
.group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.group-label{
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink);
}
.group-count{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- Hymn row ---------- */
.item{ border-bottom:1px solid var(--line); }
.item.is-hidden{ display:none; }
.row{
  width:100%; display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center;
  min-height:56px; padding:9px 8px;
  background:none; border:0; text-align:left; cursor:pointer; color:inherit;
  border-radius:6px;
  transition:background-color .14s ease;
}
.row:hover{ background:var(--cloud); }
.row:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; }
.item.open > .row{ background:var(--cloud); }
.row .ind{
  width:26px; height:26px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); background:var(--white);
  border:1px solid var(--line); border-radius:50%;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.row:hover .ind,
.item.open .row .ind{ border-color:var(--teal); }
.item.playing .row .ind{ background:var(--teal); color:var(--white); border-color:var(--teal); }
.row-main{ min-width:0; }
.row-title{ font-size:16px; font-weight:500; color:var(--ink); }
.row-title.cop{ font-size:18px; font-weight:400; letter-spacing:.015em; }
.row-title mark{ background:rgba(182,139,67,.22); color:inherit; border-radius:2px; padding:0 1px; }
.row-sub{ display:block; font-size:13px; color:var(--muted); margin-top:1px; }
.row-sub:empty{ display:none; }
.row-sub mark{ background:rgba(182,139,67,.22); color:inherit; border-radius:2px; }
.row-num{
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; padding-right:4px;
}
.row-tag{
  font-size:12px; color:var(--muted); white-space:nowrap; font-weight:500;
  display:flex; align-items:center; gap:6px;
}
.row-tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--line); flex:none; }
.item.open .row-tag::before{ background:var(--gold); }
@media (max-width:600px){
  .row{ grid-template-columns:26px 1fr; }
  .row-tag{ grid-column:2; margin-top:2px; }
  .row-tag::before{ display:none; }
  .row-num{ display:none; }
}

/* ---------- Inline player ---------- */
.panel-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s cubic-bezier(.2,.7,.2,1); }
.item.open .panel-wrap{ grid-template-rows:1fr; }
.panel{ overflow:hidden; min-height:0; }
.player{
  padding:6px 8px 18px 44px;
  border-top:1px dashed var(--line); margin-top:-1px;
}
@media (max-width:600px){ .player{ padding-left:8px; } }
.transport{ display:flex; align-items:center; gap:12px; padding-top:14px; flex-wrap:wrap; }
.pp{
  width:40px; height:40px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal); color:var(--white);
  border:0; border-radius:999px; cursor:pointer;
  transition:transform .12s ease,background-color .15s ease;
}
.pp:hover{ background:var(--teal-deep); transform:scale(1.04); }
.pp:active{ transform:scale(.96); }
.seek{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:150px; height:4px; border-radius:999px;
  background:var(--cloud-2);
  background-image:linear-gradient(var(--teal),var(--teal));
  background-repeat:no-repeat; background-size:var(--pct,0%) 100%;
  cursor:pointer;
}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--teal); border:2px solid var(--white); box-shadow:0 0 0 1px var(--line);
}
.seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--teal); border:2px solid var(--white);
}
.seek:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--teal); }
.time{
  font-size:13px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.meta{ margin-top:12px; font-size:13px; }
.meta a{ display:inline-flex; align-items:center; gap:6px; }
.meta .sep{ color:#b9c2c1; margin:0 10px; }
.meta .fmt{ color:var(--muted); }

/* ---------- Hazzat - the written hymn, inside the player ---------- */
.hazza{ margin-top:var(--s3); padding-top:var(--s2); border-top:1px dashed var(--line); }
.hazza-rule{ width:28px; height:2px; background:var(--gold); margin-bottom:10px; }
.hazza-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:12px;
}
.hazza-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.hazza-pdf{ font-size:12.5px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.hazza-pdf svg{ flex:none; }
.hazza-pages{ display:flex; flex-direction:column; gap:10px; max-width:600px; }
.hazza-pages img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:0 1px 2px rgba(37,42,44,.05), 0 12px 26px -16px rgba(37,42,44,.28);
}

/* ---------- No results ---------- */
.empty{ display:none; padding:var(--s5) 8px var(--s3); }
body[data-empty="1"] .empty{ display:block; }
.empty h3{ font-size:18px; font-weight:600; margin:0 0 6px; }
.empty p{ color:var(--muted); margin:0 0 var(--s3); max-width:44ch; }
.empty button{
  height:40px; padding:0 16px; font-size:14px; font-weight:500;
  color:var(--teal-deep); background:var(--teal-tint);
  border:1px solid var(--teal); border-radius:var(--r); cursor:pointer;
}
.empty button:hover{ background:rgba(50,116,130,.15); }

/* ---------- Hazzat booklets ---------- */
.books{ margin-top:var(--s4); scroll-margin-top:84px; }
.books .season-rule{ background:var(--gold); }
.books h2{ font-size:clamp(21px,3.6vw,27px); font-weight:600; letter-spacing:-.02em; margin:0 0 4px; }
.books .lead{ color:var(--muted); font-size:14px; margin:0 0 var(--s3); }
.book{
  display:grid; grid-template-columns:24px 1fr auto; gap:16px; align-items:center;
  padding:16px 8px; border-bottom:1px solid var(--line);
}
.book:first-of-type{ border-top:1px solid var(--line); }
.book .doc{ color:var(--teal); display:flex; }
.book .b-title{ font-size:16px; font-weight:500; }
.book .b-title .ar{ font-size:17px; }
.book .b-sub{ display:block; font-size:13px; color:var(--muted); margin-top:1px; }
.book .open{ font-size:13px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
@media (max-width:600px){
  .book{ grid-template-columns:24px 1fr; }
  .book .open{ grid-column:2; }
}

/* ---------- More pages (index) ---------- */
.more{ margin-top:var(--s7); }
.more .season-rule{ background:var(--gold); }
.more h2{ font-size:clamp(19px,3.4vw,24px); font-weight:600; letter-spacing:-.02em; margin:0 0 var(--s3); }
.more-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .more-grid{ grid-template-columns:1fr; } }
.more-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:22px 20px; border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); background:var(--white);
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.more-card:hover{
  border-color:var(--teal); background:var(--cloud);
  text-decoration:none; transform:translateY(-2px);
}
.more-card .k{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.more-card .t{ font-size:18px; font-weight:600; margin:10px 0 4px; letter-spacing:-.01em; }
.more-card .d{ font-size:13px; color:var(--muted); }
.more-card .go{
  font-size:13px; color:var(--teal); margin-top:14px;
  display:inline-flex; align-items:center; gap:6px;
}
.more-card:hover .go{ gap:9px; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:var(--s6);
  padding-block:var(--s5) var(--s6);
}
.site-footer .wrap{ display:block; }
.site-footer .foot-main{ max-width:60ch; }
.totop{ font-size:13px; color:var(--muted); white-space:nowrap; }
.totop:hover{ color:var(--teal); text-decoration:none; }
.site-footer .brand{ margin-bottom:12px; }
.site-footer .mark{
  width:36px; height:44px;
  border-radius:44% 44% 6px 6px / 58% 58% 6px 6px;
}
.site-footer .tagline{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; font-size:15px; color:var(--ink); margin:0 0 var(--s3); }
.site-footer .tagline .totop{ flex:none; }
.site-footer .fine{ font-size:12.5px; color:var(--muted); margin:0; max-width:60ch; }
.site-footer .fine + .fine{ margin-top:6px; }

/* ---------- Now playing - persistent bar that pulls up into a sheet ---------- */
:root{ --np-peek:64px; }
@media (max-width:600px){ :root{ --np-peek:58px; } }

.np{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; flex-direction:column;
  height:min(90vh,760px);
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 -1px 2px rgba(37,42,44,.05), 0 -20px 46px -22px rgba(37,42,44,.30);
  transform:translateY(112%);
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.np.is-dragging{ transition:none; }
.np.is-active{ transform:translateY(calc(100% - var(--np-peek) - env(safe-area-inset-bottom))); }
.np.is-active.is-open{ transform:translateY(0); }
/* pages with no written text to reveal get the strip only */
.np-flat{ height:auto; }
.np-flat .np-bar{ cursor:default; touch-action:auto; }
html:has(.np.is-active){ scroll-padding-bottom:calc(var(--np-peek) + 96px); }
body.np-active{ padding-bottom:calc(var(--np-peek) + env(safe-area-inset-bottom)); }

/* progress hairline along the seam - echoes the gold season rules, and
   doubles as a scrubber you can drag straight from the collapsed bar */
.np-track{
  -webkit-appearance:none; appearance:none;
  position:absolute; top:0; left:0; z-index:3;
  width:100%; height:14px; margin:0; padding:0;
  background:transparent; border:0; border-radius:0;
  cursor:pointer; touch-action:none;
  transition:opacity .22s ease;
}
.np-track::-webkit-slider-runnable-track{
  height:14px; border:0;
  background:
    linear-gradient(var(--gold),var(--gold)) top left / var(--np-pct,0%) 3px no-repeat,
    linear-gradient(var(--cloud-2),var(--cloud-2)) top left / 100% 3px no-repeat;
}
.np-track::-moz-range-track{
  height:14px; border:0;
  background:
    linear-gradient(var(--gold),var(--gold)) top left / var(--np-pct,0%) 3px no-repeat,
    linear-gradient(var(--cloud-2),var(--cloud-2)) top left / 100% 3px no-repeat;
}
.np-track::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-5.5px; border-radius:50%;
  background:var(--gold); border:2px solid var(--white); box-shadow:0 0 0 1px var(--line);
  opacity:0; transition:opacity .16s ease;
}
.np-track::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%;
  background:var(--gold); border:2px solid var(--white); box-shadow:0 0 0 1px var(--line);
  opacity:0; transition:opacity .16s ease;
}
.np-track:hover::-webkit-slider-thumb,
.np-track:active::-webkit-slider-thumb,
.np-track:focus-visible::-webkit-slider-thumb{ opacity:1; }
.np-track:hover::-moz-range-thumb,
.np-track:active::-moz-range-thumb,
.np-track:focus-visible::-moz-range-thumb{ opacity:1; }
.np-track:focus-visible{ outline:none; }
.np-track:focus-visible::-webkit-slider-thumb{
  opacity:1; box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold);
}
.np-track:focus-visible::-moz-range-thumb{
  opacity:1; box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold);
}
.np.is-open .np-track{ opacity:0; pointer-events:none; }

/* ----- the always-visible strip ----- */
.np-bar{
  flex:none; height:var(--np-peek);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; column-gap:14px;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--pad);
  touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none;
}
.np-bar:active{ cursor:grabbing; }
.np.is-open .np-bar{ border-bottom:1px solid var(--line); }
@media (max-width:600px){ .np-bar{ padding-inline:16px; column-gap:12px; } }

.np-pp{
  width:38px; height:38px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal); color:var(--white);
  border:0; border-radius:999px; cursor:pointer;
  transition:transform .12s ease, background-color .15s ease;
}
.np-pp:hover{ background:var(--teal-deep); transform:scale(1.05); }
.np-pp:active{ transform:scale(.95); }
.np-pp:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.np.is-open .np-pp{ width:44px; height:44px; }

.np-id{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.np.is-open .np-sub{ display:none; }
.np-name{
  font-size:15px; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np-name.cop{ font-size:16px; font-weight:400; letter-spacing:.015em; }
.np-sub{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np-bar:hover .np-name{ color:var(--teal-deep); }

.np-ctrls{ display:flex; align-items:center; gap:2px; flex:none; }
.np-clock{
  font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; margin-right:8px;
}
@media (max-width:420px){ .np-clock{ display:none; } }

.np-btn{
  width:38px; height:38px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; color:var(--muted); cursor:pointer;
  transition:background-color .14s ease, color .14s ease, transform .12s ease;
}
.np-btn:hover{ background:var(--cloud); color:var(--ink); }
.np-btn:active{ transform:scale(.9); }
.np-btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.np-chev svg{ transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.np.is-open .np-chev svg{ transform:rotate(180deg); }

/* ----- the pulled-up sheet ----- */
.np-sheet{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) var(--s6);
}
@media (max-width:600px){ .np-sheet{ padding-inline:16px; } }

.np-grip{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:30px; margin-bottom:6px;
  background:var(--white); border:0; cursor:grab; touch-action:none;
}
.np-grip:active{ cursor:grabbing; }
.np-grip::before{ content:""; width:34px; height:4px; border-radius:999px; background:#ccd4d3; transition:background-color .14s ease; }
.np-grip:hover::before{ background:var(--muted); }
.np-grip:focus-visible{ outline:2px solid var(--teal); outline-offset:-4px; border-radius:8px; }

.np-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
.np-eyebrow .cop{ letter-spacing:.03em; text-transform:none; font-size:13px; }
.np-h{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0; }
.np-h.cop{ font-weight:400; letter-spacing:.01em; font-size:25px; }
.np-context{ font-size:13px; color:var(--muted); margin:6px 0 0; }

.np-transport{ display:flex; align-items:center; gap:14px; margin-top:var(--s3); }
.np-seek{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:120px; height:4px; border-radius:999px; margin:0;
  background:var(--cloud-2);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-size:var(--np-pct,0%) 100%;
  cursor:pointer;
}
.np-seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:2px solid var(--white); box-shadow:0 0 0 1px var(--line);
}
.np-seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:2px solid var(--white);
}
.np-seek:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold); }
.np-clock-lg{
  font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}

.np-sheet .meta{ margin-top:14px; }
.np-empty{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px dashed var(--line); font-size:13px; color:var(--muted);
}

.np-scrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(37,42,44,.36);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.np-scrim.is-on{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}