:root{
  --ink:#0d1020; --ink2:#12162a; --panel:#171c31; --panel2:#1e2440; --raise:#242b4d;
  --gold:#c9a22f; --gold2:#e0c069; --golddim:#8a743a;
  --text:#ece5d3; --dim:#a49b86; --faint:#6f6a5e;
  --line:rgba(214,192,140,.16); --line2:rgba(214,192,140,.30);
  --plum:#b96aa7; --olive:#d0873f; --fishblue:#62a8db; --dairy:#f0c94f; --free:#e8e2cf;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --ease:cubic-bezier(.33,.9,.35,1);
  /* PROS-018: one deliberate six-step type scale replaces one-off sizes. */
  --type-xs:12px; --type-sm:14px; --type-md:16px;
  --type-lg:20px; --type-xl:26px; --type-display:58px;
  /* PROS-002: Android WebView does NOT populate env(safe-area-inset-*) for the system
     navigation bar - only for display cutouts - so the tab bar rendered underneath it.
     MainActivity measures the real window insets and overwrites these four at runtime.
     The env() fallbacks keep the file correct in a normal browser. */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#080a14;font-family:var(--serif);color:var(--text);display:flex;justify-content:center}
#frame{width:100%;max-width:430px;height:100dvh;max-height:100dvh;background:
  radial-gradient(120% 65% at 50% -8%, #1b2140 0%, var(--ink) 58%),
  var(--ink);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding-top:var(--safe-top);
  padding-left:var(--safe-left);padding-right:var(--safe-right);
  box-shadow:0 0 90px rgba(0,0,0,.7)}
@media(min-width:520px){body{align-items:center}#frame{height:min(880px,96dvh);border-radius:34px;border:1px solid #23293f}}
#app{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
#app::-webkit-scrollbar{display:none}
.screen{padding:22px 20px calc(110px + var(--safe-bottom));animation:fadein .5s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes slowfade{from{opacity:0}to{opacity:1}}

/* ---------- typography ---------- */
h1{font-weight:600;font-size:var(--type-xl);letter-spacing:.2px;line-height:1.22}
h2{font-weight:600;font-size:var(--type-lg);letter-spacing:.2px}
.eyebrow{font-size:var(--type-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--golddim);font-weight:600}
.small{font-size:var(--type-sm);color:var(--dim);line-height:1.5}
.gold{color:var(--gold2)}
.center{text-align:center}
hr.rule{border:none;height:1px;background:var(--line);margin:18px 0}

/* ---------- components ---------- */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.card.tap{cursor:pointer;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.card.tap:active{transform:scale(.985);border-color:var(--line2)}
.btn{display:block;width:100%;border:none;border-radius:14px;padding:15px 18px;font-family:var(--serif);font-size:var(--type-md);cursor:pointer;text-align:center;transition:opacity .3s,transform .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#d9b855,#b8912c);color:#241c05;font-weight:700;letter-spacing:.02em;box-shadow:0 4px 22px rgba(201,162,47,.22)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn.quiet{background:transparent;color:var(--dim);font-size:var(--type-sm);padding:10px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:var(--type-sm);color:var(--text);cursor:pointer;background:var(--panel);transition:all .3s var(--ease)}
.chip.sel{border-color:var(--gold);background:rgba(201,162,47,.13);color:var(--gold2)}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:6px 12px;font-size:var(--type-sm);font-weight:600;letter-spacing:.02em}
.dot,.fastmark{width:10px;height:10px;display:inline-block;flex:0 0 auto;background:var(--fast-color,transparent)}
.fastmark.strict{transform:rotate(45deg);border-radius:1px}
.fastmark.oil{border-radius:50%}
.fastmark.fish{width:13px;height:7px;border-radius:50%}
.fastmark.dairy{border-radius:1px}
.fastmark.free{border:2px solid var(--fast-color);border-radius:50%;background:transparent}
.fastmark.none{border:1px solid var(--line2);border-radius:50%;background:transparent}
.row{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lock{color:var(--golddim);font-size:var(--type-xs);border:1px solid var(--line);border-radius:8px;padding:2.5px 8px;letter-spacing:.06em}
/* PROS-007: without nowrap the pill broke across two lines and its border split
   ("OLD" on one line, "CALENDAR" on the next) - see screens/before/02-after-begin.png.
   inline-block keeps the padding and border honest when it does wrap as a unit. */
.tag{display:inline-block;white-space:nowrap;font-size:var(--type-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:7px;padding:2.5px 7px}
.backbtn{background:none;border:none;color:var(--golddim);font-family:var(--serif);font-size:var(--type-sm);cursor:pointer;padding:6px 0;margin-bottom:10px;letter-spacing:.04em}
input[type=time],select{background:var(--panel);border:1px solid var(--line2);color:var(--text);font-family:var(--serif);font-size:var(--type-md);border-radius:10px;padding:10px 12px;width:100%}
.toggle{width:46px;height:27px;border-radius:999px;background:var(--raise);position:relative;cursor:pointer;transition:background .3s;flex:0 0 auto}
.toggle.on{background:var(--gold)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#efe7d2;transition:left .3s var(--ease)}
.toggle.on::after{left:22px}

/* ---------- tab bar ---------- */
#tabbar{position:absolute;bottom:0;left:0;right:0;display:flex;background:linear-gradient(180deg,rgba(13,16,32,.6),#0c0f1e 40%);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 4px calc(10px + var(--safe-bottom))}
#tabbar button{flex:1;background:none;border:none;color:var(--faint);font-family:var(--serif);font-size:var(--type-xs);letter-spacing:.05em;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;transition:color .35s}
#tabbar button.on{color:var(--gold2)}
#tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- prayer player ---------- */
.prayer-text{font-size:var(--type-lg);line-height:1.78;color:#efe9da}
.prayer-text .sec{margin:26px 0 10px}
.prayer-text .rubric{color:var(--golddim);font-style:italic;font-size:var(--type-sm);margin:14px 0}
.prayer-text .kx{color:var(--gold2);letter-spacing:.1em;font-size:var(--type-sm);text-transform:uppercase}
.playbar{position:sticky;bottom:0;margin:0 -20px;padding:14px 20px calc(16px + var(--safe-bottom));background:linear-gradient(180deg,transparent,#0c0f1e 30%)}
.progress{height:3px;background:var(--raise);border-radius:3px;overflow:hidden;margin-bottom:12px}
.progress>i{display:block;height:100%;background:var(--gold);transition:width .4s var(--ease)}

/* ---------- calendar ---------- */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px}
.calgrid .dow{text-align:center;font-size:var(--type-xs);color:var(--faint);letter-spacing:.08em;padding:4px 0}
.cd{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--type-sm);cursor:pointer;border:1px solid transparent;position:relative;transition:border-color .3s}
.cd.out{opacity:.22}
.cd.today{border-color:var(--gold)}
.cd .fastmark{margin-top:3px;transform-origin:center}
.cd .star{position:absolute;top:3px;right:5px;font-size:var(--type-xs);color:var(--gold2)}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.legend .row{gap:6px;font-size:var(--type-xs);color:var(--dim)}

/* ---------- rope ---------- */
.ropewrap{display:flex;flex-direction:column;align-items:center;padding-top:26px}
.rope{width:230px;height:230px;border-radius:50%;border:1.5px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;user-select:none;background:radial-gradient(circle at 50% 38%,#1e2444,var(--panel) 75%);transition:transform .18s var(--ease)}
.rope:active{transform:scale(.965)}
.rope .count{font-size:var(--type-display);color:var(--gold2);font-weight:600;line-height:1}
.rope svg.ring{position:absolute;inset:-1.5px;transform:rotate(-90deg)}
.knots{display:flex;gap:5px;margin-top:22px;flex-wrap:wrap;justify-content:center;max-width:270px}
.knots i{width:8px;height:8px;border-radius:50%;background:var(--raise)}
.knots i.done{background:var(--gold)}

/* onboarding */
.ob{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:34px 26px 44px}
.obdots{display:flex;gap:7px;justify-content:center;margin-bottom:26px}
.obdots i{width:7px;height:7px;border-radius:50%;background:var(--raise);transition:background .4s}
.obdots i.on{background:var(--gold)}
.optlist{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.opt{border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;background:var(--panel);transition:all .3s var(--ease);font-size:var(--type-md)}
.opt .small{margin-top:3px}
.opt.sel{border-color:var(--gold);background:rgba(201,162,47,.1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}

.saintline{padding:13px 0;border-bottom:1px solid var(--line)}
.saintline:last-child{border-bottom:none}
.checkitem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.checkitem .box{width:21px;height:21px;border:1.5px solid var(--line2);border-radius:7px;flex:0 0 auto;margin-top:2px;display:flex;align-items:center;justify-content:center;color:var(--gold2);font-size:var(--type-sm);transition:all .3s}
.checkitem.on .box{background:rgba(201,162,47,.15);border-color:var(--gold)}
.bigX{position:absolute;top:14px;right:16px;background:var(--panel);border:1px solid var(--line);color:var(--dim);width:34px;height:34px;border-radius:50%;font-size:var(--type-sm);cursor:pointer;z-index:5}
.price{border:1.5px solid var(--line);border-radius:15px;padding:15px;cursor:pointer;text-align:center;transition:all .3s var(--ease)}
.price.sel{border-color:var(--gold);background:rgba(201,162,47,.1)}
.price .amt{font-size:var(--type-lg);color:var(--gold2);font-weight:700}
.bell{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.testrow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--type-sm)}
.pass{color:#8fbf7f}.fail{color:#c66}

/* Prosfora for the web — desktop website layout.
   Phones keep the app layout (bottom tab bar, full-height screen). From 960px wide the same
   app renders as a regular website: sticky header with navigation, full-width page, centred
   content column, window scrolling and a footer. Android is untouched (this file is web-only). */
.pw-head,.pw-foot{display:none}
@media (min-width:960px){
  html,body{height:auto;min-height:100%}
  body{display:block;background:radial-gradient(90% 60% at 50% -10%,#1b2140 0%,#0d1020 55%) fixed,#0d1020;overflow-y:auto}
  :root{--type-sm:15px;--type-md:17px;--type-lg:21px;--type-xl:34px;--type-display:72px}
  .pw-head{display:block;position:sticky;top:0;z-index:50;background:rgba(10,13,27,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .pw-wrap{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:28px;height:72px}
  .pw-brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-size:22px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
  .pw-brand svg{width:22px;height:30px}
  .pw-brand small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--golddim);font-weight:600;margin-top:2px}
  #pw-nav{flex:1;display:flex;justify-content:center}
  .pw-links{display:flex;align-items:center;gap:22px;white-space:nowrap}
  .pw-links a{color:var(--dim);text-decoration:none;font-size:15px}
  .pw-links a:hover{color:var(--gold2)}
  .pw-links a.pw-cta{color:#241c05;background:linear-gradient(180deg,#d9b855,#b8912c);padding:10px 18px;border-radius:999px;font-weight:700}
  .pw-links a.pw-cta:hover{color:#241c05;filter:brightness(1.06)}
  /* tab bar becomes the site navigation */
  #pw-nav #tabbar{position:static;background:none;backdrop-filter:none;border:none;padding:0;gap:6px}
  #pw-nav #tabbar button{flex:0 0 auto;flex-direction:row;gap:8px;font-size:15px;letter-spacing:.02em;padding:9px 16px;border-radius:999px;color:var(--dim)}
  #pw-nav #tabbar button:hover{color:var(--text);background:rgba(255,255,255,.04)}
  #pw-nav #tabbar button.on{color:var(--gold2);background:rgba(201,162,47,.12)}
  #pw-nav #tabbar svg{width:18px;height:18px}
  /* the page itself */
  #frame{max-width:none;height:auto;max-height:none;border:none;border-radius:0;box-shadow:none;background:none;overflow:visible;display:block;padding:0}
  #app{overflow:visible;min-height:calc(100vh - 73px - 180px)}
  .screen{max-width:880px;margin:0 auto;padding:48px 32px 72px}
  .screen>h1:first-of-type,.screen h1{font-size:var(--type-xl)}
  .card{padding:22px 24px;border-radius:18px;margin-bottom:16px}
  .card.tap:hover{border-color:var(--line2);transform:translateY(-1px)}
  .btn{max-width:480px;margin-left:auto;margin-right:auto}
  .ob{min-height:calc(100vh - 73px);max-width:680px;margin:0 auto;padding:56px 32px}
  .optlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ob p{max-width:560px!important;margin-left:auto!important;margin-right:auto!important}
  .ob h1{font-size:42px}
  /* list screens (prayer book, More, sleep, lessons) become a two-column grid of cards */
  .screen:has(>.card.tap+.card.tap+.card.tap){display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start}
  .screen:has(>.card.tap+.card.tap+.card.tap)>*:not(.card.tap){grid-column:1/-1}
  .cd .star{right:calc(50% - 24px)}
  .calgrid{max-width:720px;margin-left:auto;margin-right:auto;gap:8px}
  .cd{aspect-ratio:auto;height:78px;font-size:var(--type-md)}
  .legend{justify-content:center}
  .prayer-text{max-width:720px;margin:0 auto;font-size:21px}
  .playbar{margin:0;padding:18px 0 28px;background:linear-gradient(180deg,transparent,#0d1020 35%)}
  .rope{width:300px;height:300px}
  .knots{max-width:360px}
  .pw-foot{display:block;border-top:1px solid var(--line);margin-top:24px}
  .pw-foot .pw-wrap{height:auto;padding:36px 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
  .pw-foot p{color:var(--faint);font-size:14px;line-height:1.6;margin:8px 0 0}
  .pw-foot h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--golddim);margin:0 0 10px}
  .pw-foot a{display:block;color:var(--dim);text-decoration:none;font-size:15px;padding:3px 0}
  .pw-foot a:hover{color:var(--gold2)}
}
@media (min-width:960px) and (max-width:1120px){.pw-links a:not(.pw-cta){display:none}}