/* The Uposatha calendar page (/uposatha-calendar). Layout and look follow the design template (owner's
   "Uposatha-standalone"): a top bar, the today card with a drawn moon, tabs, a list by month and a month
   calendar, the key suttas with an inline reader, a burger drawer and a settings panel. Tokens are the site's. */
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-600.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-700.woff2) format("woff2"); }
:root, [data-theme="light"] {
  --bs-body-font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* home.css builds its --dg-font on it */
  --dg-page: #ffffff; --dg-surface: #ffffff; --dg-surface-hover: #f5f4f1; --dg-border: #e7e5de; --dg-border-strong: #d7d4c9;
  --dg-navy-ink: #2f4a63; --dg-text: #1b1d19; --dg-text-2: #5c6058; --dg-text-muted: #6e716a; --dg-accent: #149c7c; --dg-accent-ink: #0f7c63;
  --dg-slate: #5b6b82; --dg-slate-line: #c5cfdc; --dg-slate-bg: #e9eef5; --dg-match: #a8341c;
  --dg-accent-bg: #dff3ec; --dg-on-accent-bg: #0c6a55; --dg-navy: #243448;
  --dg-radius: 10px; --dg-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dg-ease: cubic-bezier(0.22, 0.68, 0, 1);
}
[data-theme="dark"] {
  color-scheme: dark;
  --dg-page: #111111; --dg-surface: #191919; --dg-surface-hover: #202020; --dg-border: #2c2c2c; --dg-border-strong: #3b3b3b;
  --dg-navy-ink: #a9c4dc; --dg-text: #dddddd; --dg-text-2: #a8a8a8; --dg-text-muted: #7c7c7c; --dg-accent: #136857; --dg-accent-ink: #09967a;
  --dg-slate: #8a9bb3; --dg-slate-line: #37445a; --dg-slate-bg: #1d2733; --dg-match: #ff6b45;
  --dg-accent-bg: #12241f; --dg-on-accent-bg: #16b394; --dg-navy: #1b2836;
}
* { box-sizing: border-box; }
html { width: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--dg-page); color: var(--dg-text); font-family: var(--dg-font); -webkit-font-smoothing: antialiased; font-size: 15px; }
a { color: var(--dg-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--dg-font); font-weight: 600; letter-spacing: -.01em; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
button { font-family: inherit; }
/* top bar */
.tbar { position: sticky; top: 0; z-index: 40; background: var(--dg-page); border-bottom: 1px solid transparent; padding: 11px 20px 10px; transition: border-color .18s var(--dg-ease), box-shadow .18s var(--dg-ease); }
body.scrolled .tbar { border-bottom-color: var(--dg-border); box-shadow: 0 4px 14px rgba(27,29,25,.07); }
.tbar { transition: border-color .18s var(--dg-ease), box-shadow .18s var(--dg-ease), transform .25s var(--dg-ease); }
.tbar.away { transform: translateY(-110%); }
.tbar .in { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.wordmark { display: flex; align-items: center; gap: 8px; color: inherit; flex: none; }
.hsearch { flex: 1 1 auto; min-width: 0; max-width: 34rem; margin: 0 auto; }
.hsearch .dg-input-shell { width: 100%; }
.hsearch .dg-qs-btn .ic { width: 17px; height: 17px; }
.hsearch .up-shell-logo { display: none; align-items: center; justify-content: center; flex: none; line-height: 0; }
.up-mark { display: block; }
@media (max-width: 760px) { .hsearch .up-shell-logo { display: inline-flex; padding: 0 2px 0 4px; } } /* the logo sits in the input only where the wordmark is hidden (phones) */
.ui-autocomplete { z-index: 60; max-height: 60vh; overflow-y: auto; }
.wordmark:hover { color: inherit; text-decoration: none; }
.wordmark img { width: 24px; height: 24px; display: block; }
.wordmark b { font-weight: 600; font-size: 15.5px; letter-spacing: -.015em; }
.wordmark span { font-size: 11px; color: var(--dg-text-muted); letter-spacing: .02em; white-space: nowrap; }
.hbtns { display: flex; align-items: center; gap: 3px; flex: none; }
.rb { width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--dg-text-2); cursor: pointer; font-size: 16px; flex: none; display: grid; place-items: center; transition: background .15s var(--dg-ease), color .15s var(--dg-ease); }
.rb:hover { background: var(--dg-surface-hover); color: var(--dg-text); }
@media (max-width: 900px) { .wordmark span { display: none; } }
@media (max-width: 560px) { .wordmark b { display: none; } .tbar .in { gap: 6px; } }
/* page */
.page { max-width: 760px; margin: 0 auto; padding: 18px 20px 0; }
.intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.intro-actions { display: flex; gap: 8px; flex: none; margin-top: 16px; }
.pillbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text); font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pillbtn .ic { width: 15px; height: 15px; color: var(--dg-text-muted); }
.pillbtn:hover { border-color: var(--dg-accent); color: var(--dg-accent-ink); }
.pillbtn.accent { background: var(--dg-accent-bg); border-color: transparent; color: var(--dg-on-accent-bg); }
.pillbtn.accent .ic { color: inherit; }
.cal-body { padding: 8px 20px 20px; }
.cal-body h4 { margin: 14px 0 4px; }
.cal-note { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--dg-text-muted); }
.cal-links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .intro { flex-direction: column; gap: 0; } .intro-actions { margin-top: 12px; } }
.intro h1 { font-size: 26px; margin: 14px 0 6px; }
.intro-actions { margin-top: 12px; }
.intro p { margin: 0; color: var(--dg-text-2); font-size: 14px; line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
.today { margin: 20px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: var(--dg-radius); padding: 18px 20px; animation: up-in .3s var(--dg-ease) both; }
.moon { line-height: 1; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.today .moon { font-size: 64px; }
.today .k { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); margin: 0 0 4px; }
.today .d { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.today .ph { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--dg-text-2); text-wrap: pretty; }
.today .ph > span { overflow-wrap: anywhere; }
.today .dot, .ctx .dot { opacity: .5; margin: 0 6px; }
.today .st { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.today .st > * { flex: none; max-width: 100%; }
.today .sun { margin: 6px 0 0; font-size: 12.5px; color: var(--dg-text-muted); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--dg-accent-bg); color: var(--dg-on-accent-bg); white-space: nowrap; }
.badge.soft { background: var(--dg-surface-hover); color: var(--dg-text-2); font-weight: 500; }
.today .st em { font-style: normal; color: var(--dg-text-2); }
.ctx { margin: 10px 2px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--dg-text-muted); }
.ctx > * { flex: none; }
.ctx .dot { margin: 0; }
.ctx button { border: 0; background: none; font: inherit; color: var(--dg-accent-ink); cursor: pointer; padding: 0; }
.ctx button:hover { text-decoration: underline; text-underline-offset: 2px; }
.segrow { display: flex; background: var(--dg-surface-hover); border-radius: 9px; padding: 3px; gap: 2px; }
.segrow button { flex: 1; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--dg-text-2); padding: 7px 4px; border-radius: 7px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segrow button[aria-pressed=true] { background: var(--dg-surface); color: var(--dg-text); font-weight: 500; box-shadow: 0 1px 3px rgba(27,29,25,.1); }
.vtabs { margin: 26px 0 0; max-width: 320px; }
.vtabs button { font-size: 13.5px; padding: 8px 6px; }
.screen { display: none; }
body[data-screen=list] #s-list, body[data-screen=dates] #s-dates, body[data-screen=cal] #s-cal { display: block; }
/* the list: months, weeks, days */
.mon { margin: 22px 0 0; animation: up-in .28s var(--dg-ease) both; }
.mon h2 { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); margin: 0 0 8px; padding: 0 2px; }
.mon ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); overflow: hidden; }
.mon li + li { border-top: 1px solid var(--dg-border); }
.mon li.wk { padding: 6px 14px; font-size: 11px; font-weight: 600; color: var(--dg-text-muted); background: var(--dg-surface-hover); letter-spacing: .04em; }
.mon li.row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 14px; font-size: 14px; }
.mon li .n { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.mon li .n small { display: block; font-size: 11px; font-weight: 500; color: var(--dg-text-muted); letter-spacing: .02em; margin-top: 3px; text-transform: lowercase; }
.mon li .mi { font-size: 22px; margin-top: 1px; }
.mon li .t b { font-weight: 600; }
.mon li .t .nt { font-weight: 400; color: var(--dg-text-muted); font-size: 12.5px; margin-left: 4px; }
.mon li .t .info { display: block; margin-top: 3px; }
.mon li .w { font-size: 12px; color: var(--dg-text-muted); white-space: nowrap; margin-top: 2px; }
.ln { display: block; font-size: 12.5px; line-height: 1.5; }
.ln .k { color: var(--dg-text-2); font-weight: 600; }
.ln.grey { color: var(--dg-text-muted); }
.ln.soft { color: var(--dg-text-muted); } /* like grey, but stays in the short view */
.mon li[data-past=true] { color: var(--dg-text-muted); }
.mon li[data-now=true] .w { color: var(--dg-on-accent-bg); font-weight: 600; }
.more { margin: 14px 0 0; display: flex; justify-content: center; }
.more button, .td { border: 1px solid var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text-2); border-radius: 999px; font: inherit; font-size: 13px; padding: 7px 16px; cursor: pointer; }
.more button:hover, .td:hover { border-color: var(--dg-accent); color: var(--dg-accent-ink); }
/* the calendar: one ordinary month, uneven length and all */
.calh { margin: 22px 0 10px; display: flex; align-items: center; gap: 6px; }
.calh h2 { font-size: 17px; margin: 0 auto 0 2px; }
.td { font-size: 12.5px; padding: 5px 12px; margin-right: 4px; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--dg-border); border-radius: var(--dg-radius); overflow: hidden; background: var(--dg-border); gap: 1px; animation: up-in .26s var(--dg-ease) both; }
.grid .wd { background: var(--dg-surface-hover); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-text-muted); text-align: center; padding: 7px 0; }
.grid .c { position: relative; background: var(--dg-surface); min-height: 66px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-variant-numeric: tabular-nums; border: 0; font: inherit; color: var(--dg-text); text-align: left; cursor: pointer; }
.grid .c.o { background: var(--dg-page); color: var(--dg-text-muted); opacity: .55; }
.grid .c .n { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; margin: -3px 0 0 -4px; }
.grid .c[data-today=true] { background: color-mix(in srgb, var(--dg-navy-ink) 22%, var(--dg-surface)); }
.grid .c[data-today=true] .n { font-weight: 700; } /* today: a plaque */
.grid .c[data-u] .n { font-weight: 600; }
.grid .c .lb { font-size: 11px; color: var(--dg-text-muted); display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.grid .c .lb .mi { font-size: 12px; }
.grid .c .ld { position: absolute; top: 6px; right: 7px; font-size: 10.5px; color: var(--dg-text-muted); }
.grid .c[data-sel=true] { outline: 0; background: color-mix(in srgb, #d9a441 26%, var(--dg-surface)); } /* the chosen day: an amber plaque (today is the grey one) */
.legend { margin: 10px 2px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--dg-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.legend i.f { background: var(--dg-accent); }
.legend i.r { box-shadow: inset 0 0 0 1.5px var(--dg-accent); }
.legend i.t { border-radius: 4px; background: color-mix(in srgb, var(--dg-navy-ink) 40%, var(--dg-surface)); } /* today is a plaque */
.detail { margin: 12px 0 0; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); background: var(--dg-surface); padding: 12px 14px; font-size: 14px; min-height: 4.4em; }
.detail .badge { margin-left: 8px; }
.detail .ttl { display: block; font-weight: 600; margin-top: 4px; color: var(--dg-accent-ink); }
body[data-mode=lite] .today .dt, body[data-mode=lite] .ln.grey, body[data-mode=lite] .grid .c .ld, body[data-mode=lite] .today .sun { display: none; } /* the box of a tapped day stays in the short view: the phase and its time are the point */
body[data-mode=lite] .ln.spanl { display: none; }
.ln.dayl { display: none; }
body[data-mode=lite] .ln.dayl { display: block; }
/* key suttas and the reader */
.slides { margin: 22px 0 0; }
.slides[hidden] { display: none; }
/* a small marker of the kind of line, like the "ad" mark on a promo: special / general / random, in the reader's grey-blue */
.plate { font-style: normal; position: absolute; top: 8px; right: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--dg-slate-line); color: var(--dg-slate); background: none; }
.plate[data-k=special] { background: var(--dg-slate-bg); }
.plate[data-k=random] { border-color: var(--dg-border); color: var(--dg-text-muted); }
/* the home page's slideshow (home.css, #dg-carousel) with our lines in it: wider text, verses as Pali / translation pairs */
#slides .dg-slides { text-align: left; }
#dg-carousel .carousel-item > span { max-width: 62ch; margin: 0; }
#dg-carousel .carousel-item h5 { max-width: 62ch; }
#dg-carousel .carousel-item h5 { font-weight: 500; font-size: 16px; }
#dg-carousel .sl-g { max-width: 62ch; margin: 0; }
#dg-carousel .sl-gp { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--dg-text); }
#dg-carousel .sl-gt { display: block; font-size: 13.5px; line-height: 1.5; color: var(--dg-text-2); margin-bottom: 7px; }
#dg-carousel .plate { top: 2px; right: 0; }
b.match { color: var(--dg-match); font-weight: 600; } /* a found word, as in the search results */
.sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(660px, 92vw); max-height: 84vh; display: none; flex-direction: column; background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 60; }
.sheet[data-open=true] { display: flex; transform: translate(-50%, -50%); }
.sheet-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--dg-border); font-size: 16px; }
.sheet-head .x { margin-left: auto; border: 0; background: none; color: var(--dg-text-muted); cursor: pointer; }
.sheet-sort { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; }
.sheet-sort button { border: 1px solid var(--dg-border-strong); background: none; color: var(--dg-text-muted); font: inherit; font-size: 12px; padding: 3px 12px; border-radius: 999px; cursor: pointer; }
.sheet-sort button[aria-pressed=true] { background: var(--dg-accent-bg); border-color: transparent; color: var(--dg-on-accent-bg); }
.sheet-body { overflow-y: auto; padding: 4px 8px 12px; }
.sheet-body h4 { margin: 14px 12px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); }
.sr { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--dg-border); color: inherit; }
.sr:hover { background: var(--dg-surface-hover); }
.sr-t { flex: 1; min-width: 0; }
.sr-p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: var(--dg-text); }
.sr-p b.match, .sr-e b.match { font-weight: 600; }
.sr-e { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--dg-text-muted); }
.sr small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--dg-accent-ink); }
.sg { border-bottom: 1px solid var(--dg-border); }
.sg > summary { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; font-size: 14px; }
.sg > summary::-webkit-details-marker { display: none; }
.sg > summary::before { content: "\25B8"; color: var(--dg-text-muted); font-size: 12px; transition: transform .15s; }
.sg[open] > summary::before { transform: rotate(90deg); }
.sg > summary:hover { background: var(--dg-surface-hover); }
.sg > summary b { color: var(--dg-accent-ink); font-weight: 600; min-width: 4.2em; }
.sg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dg-text-2); }
.sg-t i { color: var(--dg-text-muted); font-style: normal; }
.sg-n { flex: none; font-variant-numeric: tabular-nums; color: var(--dg-text-muted); font-size: 12.5px; }
.sg .sr { padding-left: 34px; }
.sr-note b { color: var(--dg-text); font-weight: 600; }
.sr-note { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--dg-text-muted); white-space: normal; }
.sr .sid { color: var(--dg-accent-ink); font-weight: 600; min-width: 4.6em; }
.sr .plate { position: static; flex: none; }
.sr .chev { width: 14px; height: 14px; color: var(--dg-text-muted); flex: none; }
@media (max-width: 640px) { .sl-box { padding: 16px 42px 14px; } .sl-arw { left: 6px; } .sl-arw.next { right: 6px; left: auto; } }
.parts { margin: 34px 0 0; }
.parts h2 { font-size: 17px; margin: 0 0 4px; }
.parts .sub { margin: 0 0 14px; font-size: 13px; color: var(--dg-text-muted); }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pblk { border: 1px solid var(--dg-border); border-radius: var(--dg-radius); overflow: hidden; background: var(--dg-surface); }
.pblk h3 { margin: 0; padding: 9px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); background: var(--dg-surface-hover); border-bottom: 1px solid var(--dg-border); }
.pblk h3 span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.prow { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; font-size: 13.5px; }
.prow + .prow { border-top: 1px solid var(--dg-border); }
.prow b { font-weight: 600; font-style: italic; }
.prow small { display: inline; margin-left: 6px; font-size: inherit; color: var(--dg-text-muted); } /* the name of the part and its meaning: one line, one size, two colours (two lines only when there is no room) */
.prow .tm { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dg-text-2); }
.prow[data-now=true] { margin: 4px 6px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--dg-navy-ink) 22%, var(--dg-surface)); } /* the current part: a plaque (a tonal fill), not an outline; not green (green is for kala) */
.prow[data-now=true] + .prow, .prow:has(+ .prow[data-now=true]) { border-top-color: transparent; } /* the current part: a frame and a denser fill, not green (green is for kala) */
.prow[data-now=true] small { color: var(--dg-text-2); }
@media (max-width: 640px) { .pgrid { grid-template-columns: 1fr; } }
.keys { margin: 34px 0 0; }
.keys h2 { font-size: 17px; margin: 0 0 4px; }
.keys .sub { margin: 0 0 14px; font-size: 13px; color: var(--dg-text-muted); }
.keys ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.keys li { padding: 11px 2px; border-top: 1px solid var(--dg-border); font-size: 14px; line-height: 1.65; color: var(--dg-text-2); text-wrap: pretty; }
.keys li:first-child { border-top: 0; }
.keys li > b { color: var(--dg-text); font-weight: 600; margin-right: 2px; }
.rd { border: 0; background: none; font: inherit; font-size: 13px; color: var(--dg-accent-ink); cursor: pointer; padding: 1px 3px; border-radius: 6px; white-space: nowrap; }
.rd:hover { background: var(--dg-accent-bg); }
.rd[aria-current=true] { background: var(--dg-accent-bg); color: var(--dg-on-accent-bg); font-weight: 600; }
.reader { margin: 16px 0 0; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); background: var(--dg-surface); }
.reader[hidden] { display: none; }
.reader .rh { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--dg-border); font-size: 13px; color: var(--dg-text-2); flex-wrap: wrap; }
.reader .rh b { color: var(--dg-text); font-weight: 600; }
.reader .rh .sp { flex: 1; }
.reader .rh a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dg-text-muted); }
.reader .rh a:hover { color: var(--dg-accent-ink); }
.reader .rh .sel { width: auto; padding: 5px 8px; font-size: 12.5px; }
.reader iframe { display: block; width: 100%; height: 440px; border: 0; background: var(--dg-page); }
/* footer */
.pagefoot { max-width: 760px; margin: 40px auto 0; padding: 18px 20px 40px; border-top: 1px solid var(--dg-border); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dg-text-muted); }
.pagefoot a { color: var(--dg-text-muted); }
.pagefoot .dot { opacity: .6; }
.pagefoot .sp { margin-left: auto; display: flex; gap: 5px; }
.pagefoot .sp a { width: 32px; height: 32px; border-radius: 50%; background: var(--dg-surface-hover); display: grid; place-items: center; color: var(--dg-text-2); font-size: 14px; text-decoration: none; }
.pagefoot .sp a:hover { background: var(--dg-accent-bg); color: var(--dg-on-accent-bg); }
/* drawer and settings panel */
.scrim { position: fixed; inset: 0; background: rgba(27,29,25,.4); opacity: 0; pointer-events: none; transition: opacity .25s var(--dg-ease); z-index: 50; }
.scrim[data-open=true] { opacity: 1; pointer-events: auto; }
.drawer, .panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; background: var(--dg-surface); border-left: 1px solid var(--dg-border); z-index: 60; transform: translateX(101%); transition: transform .28s var(--dg-ease); overflow: auto; padding: 16px 18px 30px; }
.drawer[data-open=true], .panel[data-open=true] { transform: none; }
.dhead { display: flex; align-items: center; margin-bottom: 6px; gap: 8px; }
.dbrand { display: flex; align-items: center; gap: 7px; margin-right: auto; color: inherit; padding: 3px 5px 3px 0; border-radius: 7px; }
.dbrand:hover { color: var(--dg-accent-ink); text-decoration: none; }
.dbrand img { width: 19px; height: 19px; }
.dhead b { font-size: 14px; font-weight: 600; }
.dhead .x { border: 0; background: none; color: var(--dg-text-muted); font-size: 16px; cursor: pointer; }
.dgroup { margin: 20px 0 0; }
.dgroup h3 { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); margin: 0 0 9px; }
.dgroup h3 + .segrow { margin-bottom: 14px; }
.dlink { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px; color: inherit; border-bottom: 1px solid var(--dg-border); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.dlink:last-child { border-bottom: 0; }
.dlink .ic { width: 16px; color: var(--dg-text-muted); font-size: 14px; }
.dlink:hover { color: var(--dg-accent-ink); text-decoration: none; }
.set { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--dg-border); }
.dgroup h3 + .set { border-top: 0; }
.set .lb { flex: 1; min-width: 0; text-wrap: pretty; }
.set .lb em { display: block; font-style: normal; font-size: 11.5px; color: var(--dg-text-muted); margin-top: 2px; line-height: 1.45; }
.set.col { flex-direction: column; align-items: stretch; gap: 7px; }
.sel, .inp { width: 100%; border: 1px solid var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text); border-radius: 9px; font: inherit; font-size: 13.5px; padding: 8px 10px; }
.inp:focus, .sel:focus { outline: 0; border-color: var(--dg-accent); box-shadow: 0 0 0 3px var(--dg-accent-bg); }
.row2 { display: flex; gap: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text); border-radius: 9px; font: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--dg-accent); color: var(--dg-accent-ink); }
.btn .ic { color: var(--dg-text-muted); }
.sw { width: 38px; height: 22px; border: 0; border-radius: 999px; background: var(--dg-border-strong); cursor: pointer; flex: none; position: relative; transition: background .16s var(--dg-ease); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s var(--dg-ease); box-shadow: 0 1px 3px rgba(27,29,25,.28); }
.sw[aria-pressed=true] { background: var(--dg-accent); }
.sw[aria-pressed=true]::after { transform: translateX(16px); }
.chips { display: flex; gap: 5px; }
.chips button { border: 1px solid var(--dg-border); background: var(--dg-surface); color: var(--dg-text-2); border-radius: 999px; font: inherit; font-size: 12.5px; padding: 4px 12px; cursor: pointer; }
.chips button[aria-pressed=true] { background: var(--dg-accent-bg); border-color: var(--dg-accent); color: var(--dg-on-accent-bg); }
body[data-remind=off] .rem-dep { opacity: .45; pointer-events: none; }
.note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--dg-text-muted); text-wrap: pretty; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--dg-navy); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--dg-ease); z-index: 90; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@keyframes up-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .today, .mon, .grid { animation: none !important; } }
@media (max-width: 520px) {
  .page { padding: 12px 15px 0; }
  .tbar { padding: 9px 14px; }
  .intro h1 { font-size: 23px; }
  .today { gap: 14px; padding: 15px 16px; }
  .today .moon { font-size: 50px; }
  .today .d { font-size: 17px; }
  .vtabs { max-width: none; }
  .mon li.row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .mon li .w { grid-column: 3; margin-top: -2px; }
  .grid .c { min-height: 52px; padding: 5px 4px; align-items: center; }
  .grid .c .n { margin: 0; }
  .grid .c .lb span { display: none; }
  .grid .c .ld { top: 3px; right: 4px; }
  .reader iframe { height: 380px; }
  .pagefoot { padding-left: 15px; padding-right: 15px; }
}
/* embedded in the docs: only the calendar itself */
body.embed .tbar, body.embed .slides, body.embed .intro, body.embed .keys, body.embed .parts, body.embed #dg-footer { display: none; }
body.embed { background: transparent; }
body.embed .page { padding: 0; max-width: none; }
body.embed .today { margin-top: 0; }

/* multitool in the drawer: the same tiles as on the home page, each opening its groups in place */
a, a:hover, a:focus { text-decoration: none; }
.mt-tile { border-bottom: 1px solid var(--dg-border); }
.mt-tile:last-child { border-bottom: 0; }
.mt-tile > summary, .mt-tile > a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 14px; color: inherit; cursor: pointer; list-style: none; }
.mt-tile > summary::-webkit-details-marker { display: none; }
.mt-tile .ic { width: 17px; height: 17px; color: var(--dg-text-muted); flex: none; }
.mt-tile > summary .chev { margin-left: auto; transition: transform .15s; }
.mt-tile[open] > summary .chev { transform: rotate(180deg); }
.mt-tile > summary:hover, .mt-tile > a:hover { color: var(--dg-accent-ink); }
.mt-body { padding: 0 0 10px 27px; }
.mt-body h4 { margin: 10px 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-text-muted); }
.mt-body a.row { display: block; padding: 5px 0; font-size: 13.5px; color: inherit; }
.mt-body a.row:hover { color: var(--dg-accent-ink); }
.mt-body a.row small { display: block; font-size: 11.5px; color: var(--dg-text-muted); line-height: 1.4; }
.mt-body .chipline { display: flex; flex-wrap: wrap; gap: 5px; }
.mt-body .chipline a { font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--dg-border-strong); border-radius: 999px; color: inherit; }
.mt-body .chipline a:hover { border-color: var(--dg-accent); color: var(--dg-accent-ink); }
/* a shared location replaces the manual place: zone, hemisphere and city are then not needed */
body[data-loc=on] .loc-off { display: none; }
.subrow { display: flex; flex-wrap: wrap; gap: 6px; }
.subrow .btn { flex: 1 1 auto; text-decoration: none; }

/* Uposatha settings inside the site's own drawer (#dg-drawer): the site's classes, these few own ones for what it has no class for */
#dg-drawer .dg-uset-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--dg-text-muted); }
#dg-drawer .dg-uset-row { display: flex; gap: 6px; margin-top: 6px; }
#dg-drawer .dg-uset-row .dg-field-input { flex: 1; min-width: 0; }
#dg-drawer select.dg-field-input, #dg-drawer input.dg-field-input { width: 100%; }
#dg-drawer .dg-field-btn { border: 1px solid var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text); font: inherit; font-size: .85rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; width: 100%; margin-top: 6px; }
#dg-drawer .dg-uset-row .dg-field-btn { width: auto; margin-top: 0; white-space: nowrap; }
#dg-drawer .dg-field-btn:hover { border-color: var(--dg-accent); color: var(--dg-accent-ink); }
#dg-drawer .dg-seg-link { flex: 1; text-align: center; padding: 8px 3px; font-size: .85rem; color: var(--dg-text); }
#dg-drawer .dg-seg-link:hover { background: var(--dg-surface-hover); color: var(--dg-accent-ink); }
body[data-remind=off] #rem-more { opacity: .45; pointer-events: none; }

#dg-drawer .dg-drawer-subtitle.troll { color: #9b1c31; font-weight: 700; letter-spacing: .04em; }
[data-theme="dark"] #dg-drawer .dg-drawer-subtitle.troll { color: #d8546b; }

/* header as on the site's search/reader pages: the field is centred and the burger alone sits beside it; the name is a quiet mark on the left */
.tbar .in { position: relative; justify-content: center; }
.tbar .wordmark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.tbar .hsearch { flex: 0 1 520px; margin: 0; }
.tbar .hbtns { margin-left: 6px; }
@media (max-width: 900px) { .tbar .wordmark b { display: none; } }
@media (max-width: 760px) { .tbar .wordmark { display: none; } .tbar .hsearch { flex: 1 1 auto; } }

/* contents of the page: a quiet column to the right of the content, on wide screens only */
.toc { display: none; }
@media (min-width: 1260px) {
  .toc { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 118px; left: calc(50% + 480px); width: 190px; font-size: 13px; }
  .toc b { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); margin-bottom: 6px; }
  .toc a { color: var(--dg-text-muted); padding: 5px 0 5px 12px; border-left: 2px solid var(--dg-border); }
  .toc a:hover { color: var(--dg-text); }
  .toc a[aria-current=true] { color: var(--dg-accent-ink); border-left-color: var(--dg-accent); font-weight: 600; }
}
#s-summary, #slides, #s-calendar, #parts, #keys { scroll-margin-top: 90px; }
body.embed .toc { display: none; }

section.soft { margin: 34px 0 0; }
.soft h2 { font-size: 17px; margin: 0 0 4px; }
.soft .sub { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--dg-text-muted); max-width: 70ch; }
.soft ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.9; color: var(--dg-text-2); }
#soft { scroll-margin-top: 90px; }
body.embed .soft { display: none; }

.prow small + em { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--dg-text-2); margin-top: 3px; max-width: 34ch; }
.prow em a { color: var(--dg-accent-ink); }
.prow[data-now=true] em a { color: inherit; text-decoration: underline; }

.keys li.kq { padding: 14px 0 4px; border-top: 1px solid var(--dg-border); }
.keys li.kq h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--dg-text); }
.keys li.kq ul { list-style: none; margin: 0; padding: 0; }
.keys li.kq ul li { border-top: 0; padding: 5px 0; }

/* the docs' pill: "open in a new window" on the frame's top border, shown while the frame is touched; always on touch screens */
.dgframe { position: relative; }
.dgframe iframe { border-radius: 0 0 var(--dg-radius) var(--dg-radius); }
.dgframe__open { position: absolute; top: 0; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: .78rem; line-height: 1.4; color: var(--dg-text-2); background: var(--dg-surface); border: 1px solid var(--dg-border-strong); border-radius: 999px; box-shadow: 0 2px 8px rgb(0 0 0 / .12); opacity: 0; transform: translateY(-50%) scale(.95); pointer-events: none; transition: opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1); }
.dgframe:hover .dgframe__open, .dgframe:focus-within .dgframe__open, .dgframe.is-active .dgframe__open { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
@media (hover: none) { .dgframe__open { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; } }
.dgframe__open:hover { color: var(--dg-accent-ink); }
@media (prefers-reduced-motion: reduce) { .dgframe__open, .dgframe:hover .dgframe__open { transform: translateY(-50%); } }

.keys li.kq ul li.gap { margin-top: 12px; }

.help { margin: 34px 0 0; }
.help h2 { font-size: 17px; margin: 0 0 10px; }
.helpframe iframe { height: 560px; }
.pillbtn.qbtn { width: 34px; padding: 7px 0; justify-content: center; font-weight: 600; color: var(--dg-text); }
.pillbtn.qbtn:hover { color: var(--dg-accent-ink); }
#help { scroll-margin-top: 90px; }
body.embed .help { display: none; }

/* the place block of the settings blinks with the reader's .dg-temp-blink when a link leads there; no permanent tint */

/* same blink as the reader (extrastyles.css .dg-temp-blink): three soft pulses */
@keyframes dgTempBlink { 0%, 100% { box-shadow: 0 0 0 2px grey; } 50% { box-shadow: 0 0 0 5px rgba(128,128,128, 0.5); } }
.dg-temp-blink { animation: dgTempBlink 0.8s ease-in-out 3; border-radius: 6px; }

/* time zone and hemisphere: only a fallback while no place is set, so smaller and quieter, below the place block */
#dg-drawer .fb { opacity: .75; }
#dg-drawer .fb .dg-drawer-subtitle { font-size: 12px; margin: 8px 0 4px; }
#dg-drawer .fb .dg-field-input, #dg-drawer .fb .dg-segmented button { font-size: 12px; padding-top: 5px; padding-bottom: 5px; min-height: 0; }

/* the clear cross shows only when the input has text: .dg-shell-btn's display would otherwise beat the hidden attribute */
.dg-input-shell .dg-shell-btn[hidden] { display: none; }

/* ---- the app: five tabs at the bottom instead of one long page (the drawer stays for the settings) ---- */
.appnav { display: none; }
body.app .appnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--dg-surface, var(--dg-bg)); border-top: 1px solid var(--dg-border, rgba(128,128,128,.25)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.appnav[hidden] { display: none !important; }
.appnav button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 8px; background: none; border: 0; color: var(--dg-text-muted); font: inherit; font-size: 10.5px; line-height: 1.15; text-align: center; }
.appnav button i { width: 46px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; transition: background .18s; }
.appnav button .ic { width: 20px; height: 20px; }
.appnav button[aria-current=true] { color: var(--dg-accent-ink); font-weight: 600; }
.appnav button[aria-current=true] i { background: var(--dg-accent-bg); }
body.app main.page { padding-bottom: 84px; }
body.app #dg-footer, body.app #soft, body.app .toc, body.app #s-calendar, body.app .intro-actions { display: none !important; }
/* one tab at a time */
body.app main.page > * { display: none; }
body.app[data-app-tab=home] .intro, body.app[data-app-tab=home] #s-summary, body.app[data-app-tab=home] .ctx, body.app[data-app-tab=home] #meal-sum, body.app[data-app-tab=home] #slides:not([hidden]), body.app[data-app-tab=home] .placeask:not([hidden]) { display: block; }
body.app[data-app-tab=home] .intro { display: block; }
body.app[data-app-tab=list] #s-list, body.app[data-app-tab=cal] #s-cal, body.app[data-app-tab=parts] #parts, body.app[data-app-tab=keys] #keys { display: block; }
body.app:not([data-app-tab=list]) #s-list, body.app:not([data-app-tab=cal]) #s-cal { display: none !important; } /* the screen rules above name ids and would win */

/* food and vikala */
.meal { margin-top: 12px; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); background: var(--dg-surface); padding: 12px 14px; }
.meal h3 { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); }
.meal .mstat { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.meal .mstat b { color: var(--dg-accent-ink); font-variant-numeric: tabular-nums; }
.meal .sub { margin: 6px 0 0; }
.noonby { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--dg-text-2); }
.noonby .segrow button { font-size: 12.5px; padding: 5px 10px; }
.noonby .segrow { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.noonby .segrow button { flex: 1 1 auto; white-space: nowrap; }
/* the meal block in the app layer: as the .pblk cards of app-refresh.css */
body.app .meal { border: 0; border-radius: 24px; background: var(--up-surf, var(--dg-surface)); padding: 14px 18px; }
body.app .meal h3 { color: var(--dg-accent-ink); }

/* midday method in the settings: without a place only "12:00" is possible */
#noonseg[data-fixed=true] button:not([data-v=clock]) { opacity: .4; pointer-events: none; }
.mealsum { margin-top: 12px; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); background: var(--dg-surface); padding: 12px 14px; }
.mealsum h3 { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-muted); }
.mealsum .mstat { margin: 0; font-size: 15px; font-weight: 500; }
.mealsum .mstat b { color: var(--dg-accent-ink); font-variant-numeric: tabular-nums; }
body.app .mealsum { border: 0; border-radius: 24px; background: var(--up-surf, var(--dg-surface)); padding: 14px 18px; }
body.app .mealsum h3 { color: var(--dg-accent-ink); }

/* the right time for food is green, the wrong one (vikala) burgundy, as the "not by the suttas" label */
.mstat[data-k=kala] i, .mstat[data-k=kala] b { color: var(--dg-accent-ink); }
.mstat[data-k=vikala] i, .mstat[data-k=vikala] b { color: #9b1c31; }
[data-theme="dark"] .mstat[data-k=vikala] i, [data-theme="dark"] .mstat[data-k=vikala] b { color: #d8546b; }
.mstat > i:first-child { font-weight: 700; }

/* the city suggestions of the place block */
.citylist { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--dg-border); border-radius: 10px; background: var(--dg-surface); }
.citylist[hidden] { display: none; }
.citylist li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.citylist li:hover, .citylist li:active { background: var(--dg-surface-hover); }
.citylist small { color: var(--dg-text-muted); font-size: 11.5px; white-space: nowrap; }

.mealsum[hidden] { display: none !important; }

/* the key suttas: three drawers, one per question */
.keys li.kq { padding: 0; }
.keys li.kq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; font-size: 15px; font-weight: 600; color: var(--dg-text); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.keys li.kq summary::-webkit-details-marker { display: none; }
.keys li.kq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--dg-text-muted); border-bottom: 2px solid var(--dg-text-muted); transform: rotate(45deg); transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1); }
.keys li.kq details[open] summary::after { transform: rotate(225deg); }
.keys li.kq details[open] > ul { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .keys li.kq summary::after { transition: none; } }

.testtag { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #9b1c31; color: #fff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.setplace .noonlink { text-decoration: underline dotted; text-underline-offset: 3px; }
.setplace-row { margin: 12px 0 0; }
.setplace-row .setplace { font-size: 13px; white-space: nowrap; }
.setplace-row .setplace svg { width: 14px; height: 14px; }
#tst-block { margin-top: 6px; }
#tst-block .dg-field-input, #tst-block .dg-segmented, #tst-block .dg-field-btn { margin-top: 6px; }
#tst-block .dg-field-btn { width: 100%; }

.mon li .n2 { display: block; margin-top: 9px; color: var(--dg-accent-ink); }
.mon li .n2 small { color: var(--dg-accent-ink); opacity: .8; }
.ln.dayl { display: none !important; }

/* the list: the short view says the beginning and the end (the long one has the span and the lunar day); the Uposatha going on now is framed */
.ln.endl { display: none; }
body[data-mode=lite] .ln.endl { display: block; }
.ln.endl { display: block; }
.ln.dayl { display: none !important; }

/* two cells, the beginning and the end (the dates); the moon is one cell of the second column, common to both days */
.mon li .cap { display: grid; grid-template-columns: 60px 32px; align-self: start; border: 1.5px solid var(--dg-border-strong); border-radius: 14px; overflow: hidden; background: var(--dg-surface); }
.mon li .cap .c1, .mon li .cap .c2 { grid-column: 1; padding: 6px 4px 5px; text-align: center; }
.mon li .cap .c2 { border-top: 1.5px solid var(--dg-border-strong); }
.mon li .cap b { display: block; font-size: 19px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mon li .cap small { display: block; font-size: 10px; color: var(--dg-text-muted); text-transform: lowercase; margin-top: 3px; white-space: nowrap; }
.mon li .cap .c2 b, .mon li .cap .c2 small { color: var(--dg-accent-ink); }
.mon li .cap .cm { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; border-left: 1.5px solid var(--dg-border-strong); font-size: 22px; margin: 0; background: color-mix(in srgb, var(--dg-navy-ink) 8%, transparent); }

.mon li[data-past=true] .cap { opacity: .7; }
@media (max-width: 640px) { .mon li.row .w { grid-column: 2; margin-top: 0; } } /* on a phone 'in 7 days' goes under the text, not beside it */

/* the table of the Uposathas: the day with its moon, the beginning, the end */
.utab { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--dg-border); border-radius: var(--dg-radius); overflow: hidden; background: var(--dg-surface); font-size: 13.5px; }
.utab th { padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-text-muted); background: var(--dg-surface-hover); }
.utab td { padding: 10px; vertical-align: top; border-top: 1px solid var(--dg-border); }
.utab tr.det td { padding: 0 10px 10px; border-top: 0; }
.utab tr.row + tr.det td { border-top: 0; }
.utab tr.row td { border-top: 1px solid var(--dg-border); }
.utab .ud { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.utab .ud .mi { font-size: 22px; line-height: 1; flex: none; }
.utab .un b { display: block; font-weight: 600; }
.utab .un small, .utab .ub small, .utab .ue small { display: block; font-size: 11.5px; color: var(--dg-text-muted); margin-top: 2px; }
.utab .un em { display: block; font-style: normal; font-size: 11.5px; color: var(--dg-accent-ink); margin-top: 3px; }
.utab .ub b, .utab .ue b { font-weight: 600; white-space: nowrap; }
.utab .ue b { color: var(--dg-accent-ink); }
.utab tr.det { display: table-row; }
.utab tr[data-past=true] td { opacity: .62; }
.utab { table-layout: fixed; } .utab th:nth-child(1) { width: 42%; } .utab th:nth-child(2), .utab th:nth-child(3) { width: 29%; } .utab td { overflow-wrap: anywhere; }


/* the table by dates */
.lvseg { display: none; }
.dtab .d { width: 56px; text-align: center; }
.dtab .d b { display: block; font-size: 19px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dtab .d small { display: block; font-size: 10.5px; color: var(--dg-text-muted); text-transform: lowercase; margin-top: 3px; }
.dtab .m { width: 44px; text-align: center; font-size: 24px; line-height: 1; padding-left: 0; padding-right: 0; }
.dtab td { vertical-align: middle; }
.dtab .s span { display: block; }
.dtab .s span + span { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--dg-border); }
.dtab .s em { font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.dtab .s .beg em { color: var(--dg-text-2); }
.dtab .s .end em { color: var(--dg-accent-ink); }
.dtab .s small { display: block; font-size: 11.5px; color: var(--dg-text-muted); margin-top: 1px; }
.dtab .s .tdy { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--dg-accent-ink); }
.dtab tr.det { display: none; }


/* today in the tables is a plaque (a tonal fill with rounded corners, no outline): the cell of the date in the table of the Uposathas, the row in the table by dates */
.utab td.tdcell { background: color-mix(in srgb, var(--dg-navy-ink) 22%, var(--dg-surface)); border-radius: 14px; box-shadow: inset 0 0 0 4px var(--dg-surface); }
.dtab td.m[rowspan] { border-left: 0; }
.dtab tr .s { width: auto; }

/* today in the table by dates: the plaque is on the date cell only (the moon cell of the row may be joined with the row above) */
.dtab tr[data-today=true] td.d { background: color-mix(in srgb, var(--dg-navy-ink) 22%, var(--dg-surface)); border-radius: 14px; box-shadow: inset 0 0 0 4px var(--dg-surface); }
.legend, #legend { display: none !important; } /* the moon icons in the cells say it: no legend */

/* the Uposatha in the calendar: its beginning (the evening) is a solid green date, its day a light green one; side by side they are joined into one band */
.grid .c { --nx: 17.5px; --ny: 4px; --uband: color-mix(in srgb, var(--dg-accent) 30%, var(--dg-surface)); }
@media (max-width: 640px) { .grid .c { --nx: 50%; --ny: 5px; } .grid .c .lb span:not(.mi) { display: none; } }
.grid .c .n { position: relative; z-index: 1; }
.grid .c[data-u] .n { background: var(--dg-accent); color: #fff; font-weight: 600; box-shadow: none; }
.grid .c[data-c] .n { background: var(--uband); color: var(--dg-accent-ink); font-weight: 600; outline: 0; }
.grid .c[data-jr]::after { content: ""; position: absolute; z-index: 0; top: var(--ny); height: 27px; left: var(--nx); right: 0; background: var(--uband); }
.grid .c[data-jl]::before { content: ""; position: absolute; z-index: 0; top: var(--ny); height: 27px; left: 0; right: calc(100% - var(--nx)); background: var(--uband); }
@media (max-width: 640px) { .grid .c .lb span.mi { display: inline; font-size: 13px; } .grid .c { min-height: 58px; } } /* the moon icon stays in a cell of a phone: it tells the phase */

/* the small round arrow that asks for the position again */
.loc-refresh { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; vertical-align: middle; border: 1px solid var(--dg-border-strong); border-radius: 50%; background: var(--dg-surface); color: var(--dg-accent-ink); cursor: pointer; }
.loc-refresh:active { background: var(--dg-surface-hover); }
.loc-refresh.spin svg { animation: locspin .9s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loc-refresh.spin svg { animation: none; opacity: .5; } }

.dtab .m { width: 78px; }
.dtab .m .mi { display: block; }
.dtab .m small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.2; color: var(--dg-text-2); }

/* the table by dates: a bigger moon, the day above it, the lunar day of the 30 under the beginning */
.dtab .m .mi { font-size: 36px; line-height: 1.1; }
.dtab .m small { margin: 0 0 6px; }
.dtab .s .ln { display: block; font-size: 12px; line-height: 1.4; color: var(--dg-text-muted); margin-top: 3px; }
.dtab .s .ln.grey { display: block; }
body[data-mode=lite] .dtab .s .ln.grey { display: block; }
#twi:disabled { opacity: .45; }
/* the name of the day over the moon as big as the dates and the words of the row */
.dtab .m { width: 96px; }
.dtab .m small { font-size: 16px; font-weight: 600; line-height: 1.15; margin: 0 0 6px; color: var(--dg-text); }

/* The key suttas accordion opens and closes with a short height and opacity transition (Chrome 131+ and current WebViews animate ::details-content;
   older engines just switch). Ease-out 220 ms: it is opened a few times a visit, never a hot path. */
.keys li.kq details { interpolate-size: allow-keywords; }
.keys li.kq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .22s cubic-bezier(0.23, 1, 0.32, 1), opacity .18s ease-out, content-visibility .22s allow-discrete; }
.keys li.kq details[open]::details-content { block-size: auto; opacity: 1; }
.keys li.kq summary:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: -2px; border-radius: 12px; }
.keys li.kq summary:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { .keys li.kq details::details-content { transition: opacity .12s linear; } }
/* the switch of the views: a soft green ring for the keyboard, none after a click (the browser's white ring was loud) */
.segrow button:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: -2px; border-radius: 12px; }
.segrow button:focus:not(:focus-visible) { outline: none; }

/* remind switches in the corner of a card (parts heading, meal card): a small pill, filled when on */
.parts-h, .cardh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cardh h3 { margin-bottom: 6px; }
.bellsw { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px 4px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; color: var(--dg-text-2); background: color-mix(in srgb, var(--dg-text-muted) 14%, transparent); transition: background-color .15s ease, color .15s ease; }
.bellsw .ic { width: 14px; height: 14px; }
.bellsw[aria-pressed=true] { color: var(--dg-accent-ink); background: color-mix(in srgb, var(--dg-accent-ink) 18%, transparent); }
.bellsw[aria-pressed=true] .ic { fill: currentColor; }
.bellsw:active { transform: scale(.97); }
.bellsw:focus-visible { outline: 2px solid var(--dg-accent-ink); outline-offset: 2px; }

.keys-art { display: none; }
body.app[data-app-tab=keys] .keys-art { display: block; margin: 28px auto 12px; width: min(300px, 72%); height: auto; }

/* Tap targets: the look stays, the area under a finger grows to about 44 px (invisible, so the pieces of the page do not change) */
@media (pointer: coarse), (max-width: 700px) {
  #ctx-change, #sl-all-btn, .rd, .bellsw, #cal-prev, #cal-next, #lv-seg button, a.pref, .carousel-control-prev, .carousel-control-next { position: relative; }
  .carousel-control-prev, .carousel-control-next { position: absolute; }
  #ctx-change::after, #sl-all-btn::after, .rd::after, .bellsw::after, #cal-prev::after, #cal-next::after, #lv-seg button::after, .carousel-control-prev::after, .carousel-control-next::after { content: ""; position: absolute; inset: -10px -8px; }
  a.pref::after { content: ""; position: absolute; inset: -8px -5px; }
}
/* the bottom of the app page fades under the floating bar, so text does not run into it */
body.app::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--dg-page) 70%); pointer-events: none; z-index: 29; }
body.app:has(#up-splash)::after { display: none; }
/* the table of contents of the wide page wraps instead of being cut */
.toc a { white-space: normal; }
.ctx #ctx-place .ic { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }

/* the rarely needed settings fold into one line: time zone, hemisphere, twilight */
.up-adv { margin: 10px 0 0; }
.up-adv > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--dg-text-muted); padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up-adv > summary::-webkit-details-marker { display: none; }
.up-adv > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s cubic-bezier(.23, 1, .32, 1); flex: none; }
.up-adv[open] > summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .up-adv > summary::after { transition: none; } }

/* the one question about the place, on the summary of the app, until it is answered */
.placeask { margin: 12px 0 0; padding: 14px 16px; border-radius: 20px; background: var(--dg-accent-bg); color: var(--dg-text); }
.placeask p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.4; }
.placeask div { display: flex; gap: 8px; flex-wrap: wrap; }
.placeask button { border: 0; border-radius: 999px; min-height: 40px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.placeask .pa-yes { background: var(--dg-accent); color: var(--dg-on-accent, #fff); }
.placeask .pa-no { background: transparent; color: var(--dg-accent-ink); }
.ctx .dot { margin: 0 2px; }
.ctx .modern { color: #9b1c31; font-weight: 600; }
[data-theme="dark"] .ctx .modern { color: #d8546b; }
#d-help[hidden] { display: none !important; } /* the help is the ? in the header of the menu */