/* ============ NARTHEX — design tokens ============ Vestry green cloth · Psalter ivory pages · Gilt foil Display: Besley (Clarendon — civic ledger) Reading: EB Garamond · UI: Archivo =================================================== */ /* Every colour is one light-dark() pair picked by color-scheme; theme attributes on only swap the inputs (paper tone, foil, cloth) or single rules. */ :root{ color-scheme:light; /* paper tone — light side of the page (set by [data-paper]) */ --paper-l:#F5F2E7;--card-l:#FCFAF2;--line-l:#D9D3BF;--inset-l:#EDE8D4;--field-l:#FFFFFF; --card-quiet-l:#F3F0E2;--card-soft-l:#FBF9F0;--card-hi-l:#FDFBF3;--card-warm-l:#FAF5E4;--rule-l:#E8E2CE;--inset-line-l:#E7E1CC; --ink-soft-l:#5C6A5E; /* cloth — the cover; also the dark side of the page (set by [data-cloth]) */ --cloth-l:#16382C;--cloth-deep-l:#0F2A20;--cloth-hi-l:#1B4536; --cloth-d:#0B1611;--cloth-deep-d:#070E0B;--cloth-hi-d:#12271E; --paper-d:#0E1A15;--card-d:#172922;--line-d:#2C4036;--inset-d:#0C1712;--field-d:#0F1D17; --card-quiet-d:#132219;--card-soft-d:#142520;--card-hi-d:#1C2F27;--card-warm-d:#182A22;--rule-d:#2C4036;--inset-line-d:#24362D; --on-cloth:#F3ECD6;--on-cloth-muted:#C9D9C6;--on-cloth-dim:#9DBBA6;--on-cloth-icon:#8FB79B;--on-cloth-accent:#D9B45E; /* foil (set by [data-foil]) */ --gilt-l:#A87D2B;--gilt-deep-l:#8A651F;--gilt-tint-l:#F1E7CC;--gilt-line-l:#E2C98F; --gilt-d:#D2A64A;--gilt-deep-d:#E0B95E;--gilt-tint-d:#3A3020;--gilt-line-d:#5A4A22;--seal-hi:#D4AB52; /* resolved tokens */ --paper:light-dark(var(--paper-l),var(--paper-d)); /* page background */ --card:light-dark(var(--card-l),var(--card-d)); /* panel */ --line:light-dark(var(--line-l),var(--line-d)); --inset:light-dark(var(--inset-l),var(--inset-d)); /* segmented tracks, scope chips */ --field-bg:light-dark(var(--field-l),var(--field-d)); /* inputs, pills, stat tiles */ --card-quiet:light-dark(var(--card-quiet-l),var(--card-quiet-d)); --card-soft:light-dark(var(--card-soft-l),var(--card-soft-d)); --card-hi:light-dark(var(--card-hi-l),var(--card-hi-d)); --card-warm:light-dark(var(--card-warm-l),var(--card-warm-d)); --rule:light-dark(var(--rule-l),var(--rule-d)); /* ruled-entry hairline */ --inset-line:light-dark(var(--inset-line-l),var(--inset-line-d)); --cloth:light-dark(var(--cloth-l),var(--cloth-d)); /* header, lock backdrop, toast */ --cloth-deep:light-dark(var(--cloth-deep-l),var(--cloth-deep-d)); --cloth-hi:light-dark(var(--cloth-hi-l),var(--cloth-hi-d)); --vestry:light-dark(var(--cloth-l),#E9E2CC); /* brand ink: headings, double rules */ --vestry-deep:light-dark(var(--cloth-deep-l),#D9D3C0); --parchment:#EFE8D2; /* text on cloth */ --on-vestry:light-dark(var(--parchment),var(--paper)); /* text on a brand-ink fill */ --fern:light-dark(#2F6B4E,#6FAE8C); /* interactive green */ --fern-tint:light-dark(#E4EEE4,#1E3A2E); --fern-line:light-dark(#C7DCC9,#2E5443); --fern-deep:light-dark(#25573F,#5A9A78); --fern-hi:light-dark(#3E8563,#8CC7A6); --on-fern:light-dark(#F7F4E8,#0E1A15); --on-fern-muted:light-dark(#CBE3CE,#1E3A2E); --ink:light-dark(#1E2921,#EDE6D3); --ink-soft:light-dark(var(--ink-soft-l),#A9B5A7); --ink-body:light-dark(#3A463C,#D9D3C0); /* article serif */ --ink-deep:light-dark(#2A3A2E,#E6DFCB); /* verse & scripture */ --ink-faint:light-dark(#B9B29A,#6B776C); /* placeholders, grips */ --gilt:light-dark(var(--gilt-l),var(--gilt-d)); /* foil */ --gilt-deep:light-dark(var(--gilt-deep-l),var(--gilt-deep-d)); --gilt-tint:light-dark(var(--gilt-tint-l),var(--gilt-tint-d)); --gilt-line:light-dark(var(--gilt-line-l),var(--gilt-line-d)); --on-gilt:light-dark(#FFFFFF,#1E1408); --madder:light-dark(#A5432C,#D9755C); /* missed / alerts only */ --madder-tint:light-dark(#FBF1EC,#3A1F19); --madder-line:light-dark(#E4B7A6,#6B3A2E); --madder-ink:light-dark(#7C4030,#F0B3A2); --on-madder:light-dark(#FFFFFF,#2A0F0A); --rain:light-dark(#3D6E92,#8FB8D8); --stripe:light-dark(rgba(30,41,33,.055),rgba(237,230,211,.08)); --stripe-strong:light-dark(rgba(30,41,33,.15),rgba(237,230,211,.18)); --plate:light-dark(transparent,#F5F2E7); /* favicon plate in the dark */ --edge:light-dark(transparent,var(--line-d)); /* toast edge in the dark */ --shadow-a:light-dark(rgba(20,35,27,.06),rgba(0,0,0,.45)); --shadow-b:light-dark(rgba(20,35,27,.25),rgba(0,0,0,.7)); --shadow:0 1px 2px var(--shadow-a), 0 6px 18px -12px var(--shadow-b); --shadow-hover-a:light-dark(rgba(20,35,27,.07),rgba(0,0,0,.5)); --shadow-hover-b:light-dark(rgba(20,35,27,.32),rgba(0,0,0,.8)); --shadow-hover:0 2px 3px var(--shadow-hover-a), 0 14px 26px -14px var(--shadow-hover-b); --shadow-chip-c:light-dark(rgba(20,35,27,.18),rgba(0,0,0,.5)); --shadow-chip:0 1px 3px var(--shadow-chip-c); --radius:9px; --sp:1; /* density multiplier */ --lh:1.5; --page-max:1180px; --ui:"Archivo",system-ui,sans-serif; --serif:"EB Garamond",Georgia,serif; --display:"Besley","Rockwell",Georgia,serif; } /* ---------- theme: scheme · paper · foil · cloth · contrast · type · layout ---------- */ [data-scheme="dark"]{color-scheme:dark} [data-scheme="system"]{color-scheme:light dark} [data-paper="white"]{--paper-l:#F4F4F2;--card-l:#FFFFFF;--line-l:#DCDAD3;--inset-l:#ECEBE6;--field-l:#FFFFFF;--card-quiet-l:#F7F7F4;--card-soft-l:#FAFAF8;--card-hi-l:#FFFFFF;--card-warm-l:#F8F7F2;--rule-l:#E7E6E0;--inset-line-l:#E5E4DE} [data-paper="parchment"]{--paper-l:#EFE6CF;--card-l:#F7F0DC;--line-l:#D3C8A6;--inset-l:#E6DCBF;--field-l:#FBF6E8;--card-quiet-l:#F0E8D0;--card-soft-l:#F4ECD6;--card-hi-l:#FAF4E4;--card-warm-l:#F4EBD2;--rule-l:#E3D9BE;--inset-line-l:#E1D6BA;--gilt-deep-l:#7A5819} [data-paper="aged"]{--paper-l:#E8DCC2;--card-l:#F1E7CF;--line-l:#C9B994;--inset-l:#DDD0B0;--field-l:#F6EEDA;--card-quiet-l:#EADFC4;--card-soft-l:#EEE3C8;--card-hi-l:#F5ECD6;--card-warm-l:#EFE4C9;--rule-l:#DACDAE;--inset-line-l:#D8CBAB;--gilt-deep-l:#7A5819;--ink-soft-l:#4F5C51} [data-foil="copper"]{--gilt-l:#B0613A;--gilt-deep-l:#8C4A2A;--gilt-tint-l:#F3E0D3;--gilt-line-l:#E3B79E;--gilt-d:#D98B62;--gilt-deep-d:#E8A882;--gilt-tint-d:#3A2418;--gilt-line-d:#5E3B2A;--seal-hi:#D8926B;--on-cloth-accent:#E0A57F} [data-foil="pewter"]{--gilt-l:#6E7479;--gilt-deep-l:#4F5559;--gilt-tint-l:#E6E7E5;--gilt-line-l:#C4C7C6;--gilt-d:#A6ABAE;--gilt-deep-d:#C4C8CA;--gilt-tint-d:#2A2D2E;--gilt-line-d:#4B5054;--seal-hi:#A6ABAE;--on-cloth-accent:#C4C8CA} [data-foil="madder"]{--gilt-l:#A5432C;--gilt-deep-l:#7E3222;--gilt-tint-l:#F5DDD4;--gilt-line-l:#E4B7A6;--gilt-d:#D9755C;--gilt-deep-d:#F0A08A;--gilt-tint-d:#3A1F19;--gilt-line-d:#6B3A2E;--seal-hi:#CC7A62;--on-cloth-accent:#E89A85} [data-cloth="oxblood"]{--cloth-l:#4A1C1C;--cloth-deep-l:#351212;--cloth-hi-l:#5A2424;--on-cloth:#F3E6D9;--on-cloth-muted:#D9C6C6;--on-cloth-dim:#B79A9A;--on-cloth-icon:#C29C9C; --cloth-d:#120A0A;--cloth-deep-d:#0C0606;--cloth-hi-d:#1F1212;--paper-d:#1A1010;--card-d:#251818;--line-d:#3E2B2B;--inset-d:#150C0C;--field-d:#1F1414;--card-quiet-d:#201414;--card-soft-d:#221616;--card-hi-d:#2C1E1E;--card-warm-d:#281A1A;--rule-d:#3E2B2B;--inset-line-d:#352424} [data-cloth="navy"]{--cloth-l:#1B2A44;--cloth-deep-l:#121D31;--cloth-hi-l:#223553;--on-cloth:#EEE9DD;--on-cloth-muted:#C6CFDB;--on-cloth-dim:#9AA8BC;--on-cloth-icon:#97A9C4; --cloth-d:#0A101A;--cloth-deep-d:#060A11;--cloth-hi-d:#141E30;--paper-d:#0E1522;--card-d:#182235;--line-d:#2B3A52;--inset-d:#0B111C;--field-d:#111A2A;--card-quiet-d:#131D2E;--card-soft-d:#152031;--card-hi-d:#1D2A40;--card-warm-d:#19253A;--rule-d:#2B3A52;--inset-line-d:#243248} [data-cloth="charcoal"]{--cloth-l:#2B2E2C;--cloth-deep-l:#1E2120;--cloth-hi-l:#363A38;--on-cloth:#F0EDE4;--on-cloth-muted:#CFCFCB;--on-cloth-dim:#A3A49E;--on-cloth-icon:#A9ABA5; --cloth-d:#0F1110;--cloth-deep-d:#0A0B0B;--cloth-hi-d:#191C1B;--paper-d:#141615;--card-d:#1F2221;--line-d:#363A38;--inset-d:#101211;--field-d:#181A19;--card-quiet-d:#1A1D1C;--card-soft-d:#1C1F1E;--card-hi-d:#242726;--card-warm-d:#212423;--rule-d:#363A38;--inset-line-d:#2E3130} /* ---------- custom colours: carries the picked --paper-x / --foil-x / --cloth-x, and every token the named options spell out by hand is derived from it, clamped so paper stays light, foil mid-tone and cloth dark (text stays readable). Browsers without relative colours keep the default look. Everything from here to the night paper sits before [data-contrast] so High contrast still wins. */ :root{--paper-x:#F5F2E7;--foil-x:#A87D2B;--cloth-x:#16382C} @supports (color:oklch(from red calc(l + .1) c h)){ [data-paper="custom"]{--paper-base:oklch(from var(--paper-x) clamp(.9,l,.97) min(c,.05) h);--paper-l:var(--paper-base); --card-l:oklch(from var(--paper-base) calc(l + .029) calc(c * .85) h); --line-l:oklch(from var(--paper-base) calc(l * 1.38 - .452) calc(c * 1.57) h); --inset-l:oklch(from var(--paper-base) calc(l - .034) calc(c * 1.39) h); --field-l:oklch(from var(--paper-base) calc(l + .053) calc(c * .54) h); --card-quiet-l:oklch(from var(--paper-base) l calc(c * 1.09) h); --card-soft-l:oklch(from var(--paper-base) calc(l + .02) calc(c * .96) h); --card-hi-l:oklch(from var(--paper-base) calc(l * .77 + .252) calc(c * .76) h); --card-warm-l:oklch(from var(--paper-base) calc(l * .77 + .23) calc(c * 1.17) h); --rule-l:oklch(from var(--paper-base) calc(l - .045) calc(c * 1.37) h); --inset-line-l:oklch(from var(--paper-base) calc(l - .052) calc(c * 1.42) h); --ink-soft-l:#4F5C51} [data-paper="custom"][data-foil="gilt"]{--gilt-deep-l:#7A5819} [data-foil="custom"]{--foil-base:oklch(from var(--foil-x) clamp(.5,l,.64) min(c,.15) h);--gilt-l:var(--foil-base); --gilt-deep-l:oklch(from var(--foil-base) min(l - .097,.5) calc(c * .84) h); --gilt-tint-l:oklch(from var(--foil-base) calc(l * .12 + .855) calc(c * .27) calc(h + 10)); --gilt-line-l:oklch(from var(--foil-base) calc(l * .28 + .669) calc(c * .56) calc(h + 7)); --gilt-d:oklch(from var(--foil-base) calc(l * .6 + .383) calc(c * 1.03) h); --gilt-deep-d:oklch(from var(--foil-base) calc(l * .08 + .76) calc(c * .9) calc(h + 3)); --gilt-tint-d:oklch(from var(--foil-base) calc(l * .35 + .091) calc(c * .31) h); --gilt-line-d:oklch(from var(--foil-base) .408 calc(c * .52) calc(h + 4)); --seal-hi:oklch(from var(--foil-base) calc(l + .16) calc(c * .92) calc(h + 4)); --on-cloth-accent:oklch(from var(--foil-base) calc(l * .18 + .696) calc(c * .87) calc(h + 3))} [data-cloth="custom"]{--cloth-base:oklch(from var(--cloth-x) clamp(.26,l,.34) min(c,.08) h);--cloth-l:var(--cloth-base); --cloth-deep-l:oklch(from var(--cloth-base) calc(l - .054) calc(c * .82) h); --cloth-hi-l:oklch(from var(--cloth-base) calc(l + .044) calc(c * 1.15) h); --on-cloth:#F2EADC; --on-cloth-muted:oklch(from var(--cloth-base) calc(l + .554) calc(c * .44) calc(h - 19)); --on-cloth-dim:oklch(from var(--cloth-base) calc(l + .435) calc(c * .68) calc(h - 8)); --on-cloth-icon:oklch(from var(--cloth-base) calc(l + .431) calc(c * .9) calc(h - 8)); --cloth-d:oklch(from var(--cloth-base) calc(l - .126) calc(c * .3) h); --cloth-deep-d:oklch(from var(--cloth-base) calc(l - .153) calc(c * .24) calc(h - 4)); --cloth-hi-d:oklch(from var(--cloth-base) calc(l - .073) calc(c * .49) calc(h - 3)); --paper-d:oklch(from var(--cloth-base) calc(l - .099) calc(c * .37) h); --card-d:oklch(from var(--cloth-base) calc(l * .22 + .175) calc(c * .49) h); --line-d:oklch(from var(--cloth-base) .329 calc(c * .61) h); --inset-d:oklch(from var(--cloth-base) calc(l - .118) calc(c * .33) h); --field-d:oklch(from var(--cloth-base) calc(l * .04 + .2) calc(c * .43) calc(h - 3)); --card-quiet-d:oklch(from var(--cloth-base) calc(l * .04 + .207) calc(c * .46) calc(h - 3)); --card-soft-d:oklch(from var(--cloth-base) calc(l * .13 + .191) calc(c * .46) calc(h - 4)); --card-hi-d:oklch(from var(--cloth-base) calc(l * .06 + .251) calc(c * .54) h); --card-warm-d:oklch(from var(--cloth-base) .25 calc(c * .53) h); --rule-d:oklch(from var(--cloth-base) .329 calc(c * .61) h); --inset-line-d:oklch(from var(--cloth-base) .298 calc(c * .57) h)} } /* Chrome's auto dark leaves the Light scheme alone; Dark and System already draw their own. */ [data-scheme="light"]{color-scheme:only light} /* ---------- night paper: in the dark scheme the page stays the cloth's dark set, its a/b pulled toward the paper tone (a tint at L .24) while every token keeps its own lightness, shifted by --night-dl. m = 0 (ivory) is exactly the designed night; every rule sets all three, so a swatch never inherits another paper's. */ :root{--night-tint:oklch(.24 0 0);--night-m:0;--night-dl:0} [data-paper="white"]{--night-tint:oklch(.24 0 0);--night-m:.75;--night-dl:-.025} [data-paper="parchment"]{--night-tint:oklch(.24 .035 90);--night-m:.65;--night-dl:0} [data-paper="aged"]{--night-tint:oklch(.24 .05 68);--night-m:.8;--night-dl:.01} @supports (color:oklch(from red calc(l + .1) c h)){ [data-paper="custom"]{--night-tint:oklch(from var(--paper-base) .24 calc(c * 1.35) h);--night-m:.75;--night-dl:0} :root{ --paper:light-dark(var(--paper-l),oklab(from color-mix(in oklab,var(--paper-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --card:light-dark(var(--card-l),oklab(from color-mix(in oklab,var(--card-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --line:light-dark(var(--line-l),oklab(from color-mix(in oklab,var(--line-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --inset:light-dark(var(--inset-l),oklab(from color-mix(in oklab,var(--inset-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --field-bg:light-dark(var(--field-l),oklab(from color-mix(in oklab,var(--field-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --card-quiet:light-dark(var(--card-quiet-l),oklab(from color-mix(in oklab,var(--card-quiet-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --card-soft:light-dark(var(--card-soft-l),oklab(from color-mix(in oklab,var(--card-soft-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --card-hi:light-dark(var(--card-hi-l),oklab(from color-mix(in oklab,var(--card-hi-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --card-warm:light-dark(var(--card-warm-l),oklab(from color-mix(in oklab,var(--card-warm-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --rule:light-dark(var(--rule-l),oklab(from color-mix(in oklab,var(--rule-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b)); --inset-line:light-dark(var(--inset-line-l),oklab(from color-mix(in oklab,var(--inset-line-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl)) a b))} } [data-contrast="on"]{--ink:light-dark(#0B120E,#FFFFFF);--ink-soft:light-dark(#3A463C,#D0D8CC);--ink-body:light-dark(#1E2921,#F0EBDD);--ink-deep:light-dark(#0B120E,#FFFFFF); --line:light-dark(#7E7963,#6E8477);--fern:light-dark(#1F5239,#8FD1AC);--gilt-deep:light-dark(#6E4F14,#F0CB70);--madder-ink:light-dark(#5E2A1C,#F5C4B6); --ink-faint:var(--ink-soft);--shadow:none;--shadow-hover:none;--shadow-chip:none} [data-contrast="on"] :focus-visible{outline-width:3px} html{font-size:16px} [data-size="s"]{font-size:15px} [data-size="l"]{font-size:17.5px} [data-size="xl"]{font-size:19px} [data-face="sans"]{--serif:var(--ui)} [data-density="compact"]{--sp:.8;--lh:1.45} [data-density="airy"]{--sp:1.25;--lh:1.6} [data-width="narrow"]{--page-max:960px} [data-width="wide"]{--page-max:1400px} [data-finish="flat"]{--shadow:none;--shadow-hover:none;--shadow-chip:none} [data-finish="flat"] .card.clickable:hover{transform:none;border-color:var(--fern)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:.9375rem;line-height:var(--lh); -webkit-font-smoothing:antialiased} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:var(--fern)} img{display:block} :focus-visible{outline:2px solid var(--gilt);outline-offset:2px;border-radius:4px} .hidden{display:none !important} .eyebrow{font:600 .68rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)} .eyebrow .bi{color:var(--gilt);margin-right:.35rem} /* ---------- logo: app/static/brand/*.svg drawn through ; --mark-* recolour it ---------- On paper the arch takes the brand ink and the doorway the card; dark scheme reverses both through light-dark(). On the cloth cover the arch is parchment and the gold is the foil accent. */ .nx-mark,.nx-word{display:block;flex:none;width:auto;overflow:visible; --mark-frame:var(--vestry);--mark-foil:var(--gilt);--mark-light:var(--card)} .cover .nx-mark,.cover .nx-word{--mark-frame:var(--on-cloth);--mark-foil:var(--on-cloth-accent);--mark-light:var(--cloth-hi)} /* ---------- lock screen ---------- */ #lockView{min-height:100vh;display:grid;place-items:center;background: radial-gradient(1100px 500px at 50% -10%, var(--cloth-hi) 0%, var(--cloth) 55%, var(--cloth-deep) 100%);padding:24px} .lock-card{width:min(380px,100%);background:var(--card);border-radius:14px;box-shadow:0 30px 60px -25px rgba(0,0,0,.55); padding:38px 34px 30px;text-align:center;border:1px solid rgba(168,125,43,.35)} .lock-mark{display:flex;justify-content:center;margin:0 0 18px} .lock-mark .nx-mark{height:96px} .lock-card h1{font:800 1.7rem/1.1 var(--display);letter-spacing:.02em;color:var(--vestry)} .lock-card h1.lock-word{display:flex;justify-content:center;padding-bottom:6px} .lock-card h1 .nx-word{height:14px} .lock-card .tagline{font:italic 500 .98rem var(--serif);color:var(--ink-soft);margin:6px 0 24px} .lock-card input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg); font:500 1rem var(--ui);letter-spacing:.2em;text-align:center} .lock-card input::placeholder{letter-spacing:.35em;color:var(--ink-faint)} .lock-note{font-size:.75rem;color:var(--ink-soft);margin-top:16px} .lock-note b{color:var(--gilt-deep)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.45rem;font:600 .85rem var(--ui);border-radius:8px;padding:9px 16px; background:var(--fern);color:var(--on-fern);transition:background .15s, transform .1s} .btn:hover{background:var(--fern-deep)} .btn:active{transform:translateY(1px)} .btn.block{width:100%;justify-content:center;margin-top:14px} .btn.ghost{background:transparent;color:var(--fern);border:1px solid var(--fern)} .btn.ghost:hover{background:var(--fern-tint)} .btn.quiet{background:transparent;color:var(--ink-soft);border:1px solid var(--line);padding:6px 12px;font-size:.78rem} .btn.quiet:hover{border-color:var(--fern);color:var(--fern)} .btn.quiet[aria-pressed="true"]{background:var(--fern-tint);border-color:var(--fern);color:var(--fern)} .textlink{font:600 .78rem var(--ui);color:var(--fern);text-decoration:none} .textlink:hover{text-decoration:underline} /* ---------- app shell : the cloth cover ---------- */ #appView{min-height:100vh;display:flex;flex-direction:column} header.cover{background:linear-gradient(180deg,var(--cloth-hi) 0%, var(--cloth) 70%);color:var(--on-cloth); padding:14px clamp(16px,4vw,40px) 0} .cover-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:var(--page-max);margin:0 auto;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:.6rem;padding-bottom:14px} .brand .nx-mark{height:1.9rem} .brand-name{font:800 1.22rem var(--display);letter-spacing:.16em;color:var(--on-cloth)} .brand-name .nx-word{height:.86rem} .brand-sub{font:500 .66rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--on-cloth-dim);margin-left:.4rem;padding-left:.7rem;border-left:1px solid rgba(243,236,214,.25)} nav.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} nav.tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap;padding:11px 18px 13px;border-radius:10px 10px 0 0;font:600 .8rem var(--ui);letter-spacing:.07em; text-transform:uppercase;color:var(--on-cloth-muted);transition:color .15s, background .15s} .tab .bi{margin-right:.4rem;color:var(--on-cloth-icon)} .tab:hover{color:#fff} .tab.active{background:var(--paper);color:var(--vestry)} .tab.active .bi{color:var(--gilt-deep)} .cover-actions{display:flex;gap:4px;padding-bottom:10px} .iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:var(--on-cloth-muted);font-size:1.02rem} .iconbtn:hover{background:rgba(255,255,255,.1);color:#fff} main{flex:1;width:100%;max-width:var(--page-max);margin:0 auto;padding:calc(26px*var(--sp)) clamp(16px,4vw,40px) 48px} .pagehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:20px} .pagehead h2{font:700 clamp(1.45rem,3vw,1.9rem)/1.15 var(--display);color:var(--vestry)} .pagehead .stamp{font:500 .78rem var(--ui);color:var(--ink-soft)} .pagehead .stamp .bi{color:var(--gilt);margin-right:.3rem} /* ---------- cards & grid ---------- */ .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(18px*var(--sp))} .s4{grid-column:span 4}.s8{grid-column:span 8}.s12{grid-column:span 12} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); display:flex;flex-direction:column;overflow:hidden} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(13px*var(--sp)) 18px calc(11px*var(--sp));border-bottom:1px solid var(--line)} .card-body{padding:calc(16px*var(--sp)) 18px;flex:1} .card-foot{padding:calc(10px*var(--sp)) 18px;border-top:1px dashed var(--line);font-size:.73rem;color:var(--ink-soft); display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .card-foot .bi{color:var(--gilt)} .card.clickable{cursor:pointer;transition:transform .15s, box-shadow .15s} .card.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)} /* ---------- morning tuck-away (weather + verse as one bar) ---------- */ .head-actions{display:flex;align-items:center;gap:6px} .mchev{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--ink-soft);flex:none;font-size:.85rem} .mchev:hover{background:var(--fern-tint);color:var(--fern)} .morning-bar{flex-direction:row;align-items:center;gap:10px;padding:8px 10px 8px 16px;font:500 .78rem var(--ui); color:var(--ink-soft);text-align:left;width:100%} .mb-ico{font-size:.95rem;color:var(--fern);flex:none} .mb-ico.gilt{color:var(--gilt-deep)} .mb-temp{font:700 .95rem var(--display);color:var(--vestry);flex:none} .mb-ref{font:700 .85rem var(--display);color:var(--vestry);flex:none;padding:0} .mb-ref:hover{color:var(--fern)} .mb-ref[aria-pressed="true"]{color:var(--gilt-deep)} .mb-cond{color:var(--ink-soft);flex:none} .mb-sep{width:1px;height:16px;background:var(--line);margin:0 4px;flex:none} .mb-verse{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer} .mb-verse .mb-vt{display:inline-block;font:italic 500 .82rem/1.2 var(--serif);color:var(--ink-soft); transition:transform 0s linear;will-change:transform} .mb-verse .mb-vt.practice{font-style:normal;letter-spacing:.03em} .mb-verse.scrolling{text-overflow:clip} .mchev.corner{position:absolute;top:8px;right:10px} .verse-card .verse-actions{margin-right:30px} #calCard,#hlCard{position:relative} .mb-trunc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #eventsBar[data-state="error"] .mb-trunc{white-space:normal;overflow:visible} .mb-trunc b{color:var(--vestry);font:700 .72rem var(--ui);letter-spacing:.06em;text-transform:uppercase} @media (max-width:560px){.morning-bar .mb-cond{display:none}} /* ---------- weather ---------- */ .wx-now{display:flex;align-items:center;gap:16px} .wx-icon{font-size:2.9rem;color:var(--fern)} .wx-temp{font:700 2.6rem/1 var(--display);color:var(--vestry)} .wx-temp sup{font:600 1.1rem var(--ui);color:var(--ink-soft)} .wx-cond{font:italic 500 1rem var(--serif);color:var(--ink-soft)} .wx-meta{display:flex;gap:14px;margin-top:14px;font-size:.78rem;color:var(--ink-soft);flex-wrap:wrap} .wx-meta span .bi{margin-right:.3rem;color:var(--fern)} .wx-hilo{font:600 .8rem var(--ui);color:var(--ink)} .loc-edit{display:flex;gap:8px;margin-top:14px} .loc-edit input{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:7px;font:500 .85rem var(--ui);background:var(--field-bg)} /* forecast subpage */ .hour-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px} .hour{min-width:74px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 6px} .hour .t{font:700 1rem var(--display)} .hour .bi{font-size:1.2rem;color:var(--fern);display:block;margin:6px 0 4px} .hour .p{font-size:.68rem;color:var(--rain)} .day-row{display:grid;grid-template-columns:1.1fr .9fr .8fr 1.6fr;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:.86rem} .day-row:last-child{border-bottom:0} .day-row .bi{color:var(--fern);font-size:1.15rem} .day-row .precip{color:var(--rain);font-size:.76rem} .day-row .hi{font:700 .95rem var(--display)} .day-row .lo{color:var(--ink-soft)} /* ---------- memory verse (signature card) ---------- */ .verse-card{position:relative;background: linear-gradient(160deg,var(--card-hi) 0%,var(--card-warm) 100%)} .verse-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px; background:linear-gradient(180deg,var(--seal-hi),var(--gilt) 55%,var(--gilt-deep))} .verse-head{display:flex;align-items:center;gap:14px;padding:16px 20px 0} .seal{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;color:#FDF8EA; background:radial-gradient(circle at 30% 28%, var(--seal-hi), var(--gilt) 58%, var(--gilt-deep)); box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 3px 8px -3px rgba(0,0,0,.35);text-align:center} .seal .wk{display:block;font:700 .5rem var(--ui);letter-spacing:.12em} .seal .num{display:block;font:800 1.25rem/1 var(--display)} .verse-ref{font:700 1.02rem var(--display);color:var(--vestry)} .verse-trans{font:600 .68rem var(--ui);letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase} .verse-text{font:500 clamp(1.22rem,2.2vw,1.5rem)/1.55 var(--serif);color:var(--ink-deep);padding:14px 22px 4px} .verse-actions{display:flex;gap:8px;align-items:center;padding:10px 20px 0} /* ---------- calendar (today) ---------- */ .ev{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:calc(9px*var(--sp)) 0;border-bottom:1px solid var(--line)} .ev:last-child{border-bottom:0} .ev time{font:600 .78rem var(--ui);color:var(--fern);font-variant-numeric:tabular-nums;padding-top:2px} .ev .name{font-weight:600;font-size:.88rem} .ev .where{font-size:.75rem;color:var(--ink-soft)} .ev .where .bi{margin-right:.25rem} .ev.hold time{color:var(--gilt-deep)} .ev.hold .name{color:var(--ink-soft);font-style:italic;font-weight:500} /* ---------- headlines ---------- */ .chipbar{display:flex;gap:6px} .chip{font:600 .72rem var(--ui);padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--ink-soft)} .chip:hover{border-color:var(--fern);color:var(--fern)} .chip.active{background:var(--vestry);border-color:var(--vestry);color:var(--on-vestry)} .hl{display:block;padding:calc(10px*var(--sp)) 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)} .hl:last-child{border-bottom:0} .hl:hover .t{color:var(--fern)} .hl .t{font:600 .9rem/1.35 var(--ui);transition:color .12s} .hl .m{font-size:.72rem;color:var(--ink-soft);margin-top:3px} .hl .m b{color:var(--gilt-deep);font-weight:600} /* ---------- links ---------- */ .linkgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 26px} .lg h4{font:700 .74rem var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--vestry); padding-bottom:7px;border-bottom:2px solid var(--gilt-tint);margin-bottom:8px;display:flex;align-items:center;gap:.4rem} .lg h4 .bi{color:var(--gilt-deep)} .lk{display:flex;align-items:center;gap:10px;padding:calc(7px*var(--sp)) 8px;margin:0 -8px;border-radius:7px;text-decoration:none;color:var(--ink);position:relative} .lk:hover{background:var(--fern-tint)} .lk .fav{width:18px;height:18px;flex:none;border-radius:4px;background:var(--plate)} .lk .bi.tile{width:18px;flex:none;text-align:center;color:var(--fern);font-size:1rem} .lk .nm{font:500 .87rem var(--ui)} .lk .grip,.lk .del{display:none} .editing .lk .grip{display:block;color:var(--ink-faint);cursor:grab;font-size:.85rem} .editing .lk .del{display:grid;place-items:center;position:absolute;right:6px;width:20px;height:20px;border-radius:50%; background:var(--madder);color:var(--on-madder);font-size:.6rem} .addlk{display:none;align-items:center;gap:8px;width:100%;padding:7px 8px;margin:2px -8px 0;border:1px dashed var(--line); border-radius:7px;color:var(--ink-soft);font:500 .82rem var(--ui)} .editing .addlk{display:flex} .addlk:hover{border-color:var(--fern);color:var(--fern)} .lg h4 .cat-del{display:none;margin-left:auto;width:20px;height:20px;border-radius:50%;color:var(--ink-faint);place-items:center;font-size:.55rem;flex:none} .editing .lg h4 .cat-del{display:grid} .lg h4 .cat-del:hover{background:var(--madder-tint);color:var(--madder)} .lg h4 .cat-del.blocked{opacity:.4} .addcat{display:none;border:1px dashed var(--line);border-radius:8px;padding:14px;color:var(--ink-soft); font:600 .8rem var(--ui);align-items:center;justify-content:center;gap:.4rem;min-height:64px;align-self:start} .editing .addcat{display:flex} .addcat:hover{border-color:var(--fern);color:var(--fern)} .editing .lk{cursor:grab} .lk.dragging{opacity:.35} .lk.drop-above{box-shadow:inset 0 2px 0 var(--fern)} .lk.drop-below{box-shadow:inset 0 -2px 0 var(--fern)} .lg-list.drop-into{outline:2px dashed var(--fern);outline-offset:4px;border-radius:6px} .lk-edit{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px dashed var(--fern);border-radius:8px;margin:4px -8px} .lk-edit input{padding:7px 10px;border:1px solid var(--line);border-radius:6px;font:500 .82rem var(--ui);background:var(--field-bg)} .lk-edit input:focus{border-color:var(--fern)} .lk-edit-row{display:flex;gap:6px;justify-content:flex-end} .lk-edit-row .btn{padding:6px 12px;font-size:.78rem} .ico-row{display:flex;gap:6px;align-items:center} .ico-row input{flex:1} .ico-prev{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--field-bg);border:1px solid var(--line);border-radius:6px;color:var(--fern);font-size:1rem} .ico-pick{display:flex;flex-wrap:wrap;gap:4px;max-height:96px;overflow:auto;padding:2px} .ico-opt{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--field-bg);color:var(--ink-soft);font-size:.95rem} .ico-opt:hover{border-color:var(--fern);color:var(--fern);background:var(--fern-tint)} .ico-none{font:500 .72rem var(--ui);color:var(--ink-soft);padding:4px} .ico-help{font:500 .7rem var(--ui);color:var(--ink-soft)} .ico-help a{color:var(--gilt-deep)} /* ---------- news brief page ---------- */ .brief-wrap{max-width:760px;margin:0 auto} .brief-mast{text-align:center;padding:8px 0 18px;border-bottom:3px double var(--vestry);margin-bottom:6px} .brief-mast h2{font:800 clamp(1.6rem,3.4vw,2.2rem) var(--display);color:var(--vestry);letter-spacing:.01em} .brief-mast .dateline{font:italic 500 1rem var(--serif);color:var(--ink-soft);margin-top:4px} .brief-meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-soft);padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:22px} .brief-meta .bi{color:var(--gilt);margin-right:.3rem} .brief-sec{margin-bottom:calc(26px*var(--sp))} .brief-sec h3{font:700 .78rem var(--ui);letter-spacing:.13em;text-transform:uppercase;color:var(--vestry); display:flex;align-items:center;gap:10px;margin-bottom:12px} .brief-sec h3::after{content:"";flex:1;height:1px;background:var(--line)} .brief-sec h3 .bi{color:var(--gilt-deep)} .empty{ text-align:center;padding:56px 20px;color:var(--ink-soft)} .empty .bi{font-size:2.2rem;color:var(--gilt);display:block;margin-bottom:10px} .empty h4{font:700 1.15rem var(--display);color:var(--vestry);margin-bottom:4px} @media (min-width:900px){ .brief-wrap{max-width:calc(var(--page-max) - 60px)} .news-cols{column-count:2;column-gap:52px;column-rule:1px solid var(--line)} .news-cols .bitem,.news-cols .evitem,.news-cols .dstory, .news-cols .takeaways,.news-cols .method,.news-cols .digest-quiet,.news-cols .nm-finding, .news-cols .factbox,.news-cols .boundary{break-inside:avoid} .news-cols .brief-sec h3{break-inside:avoid;break-after:avoid} .news-cols .takeaways{margin-top:2px} } /* ---------- news: product tabs & edition chrome ---------- */ .prod-tabs{display:flex;justify-content:center;gap:3px;background:var(--inset);border:1px solid var(--line);border-radius:12px; padding:4px;margin:0 auto 22px;width:max-content;max-width:100%;flex-wrap:wrap} .prod-tabs button{font:600 .8rem var(--ui);letter-spacing:.03em;padding:8px 18px;border-radius:9px;color:var(--ink-soft); display:inline-flex;align-items:center;gap:.45rem} .prod-tabs button .bi{color:var(--gilt-deep)} .prod-tabs button.active{background:var(--card);color:var(--vestry);box-shadow:var(--shadow-chip)} .deck{font:italic 500 1.02rem/1.5 var(--serif);color:var(--ink-soft);text-align:center;max-width:60ch;margin:12px auto 28px;text-wrap:balance} .execsum{font:400 1.02rem/1.6 var(--serif);color:var(--ink-body);border-left:3px solid var(--gilt);padding:2px 0 2px 14px;margin:20px 0 4px} .status-chip{display:inline-flex;align-items:center;gap:.3rem;font:600 .62rem var(--ui);letter-spacing:.07em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:3px 9px;color:var(--ink-soft);background:var(--field-bg)} .status-chip .bi{color:var(--fern)} /* takeaways (at-a-glance strip) & watchpoints */ .takeaways{border-top:3px double var(--vestry);border-bottom:3px double var(--vestry);padding:12px 2px 12px;margin:20px 0 10px} .takeaways h4{font:700 .68rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt-deep); margin-bottom:6px;display:flex;gap:.45rem;align-items:center} .take{display:flex;gap:12px;padding:4px 0;font:400 .95rem/1.5 var(--serif);color:var(--ink-body)} .take b{font:700 .66rem/1.9 var(--ui);letter-spacing:.07em;color:var(--vestry);flex:none;width:108px;text-transform:uppercase} .watch{padding:4px 0;font:400 .93rem/1.55 var(--serif);color:var(--ink-body)} .watch::before{content:"—";color:var(--gilt);margin-right:9px} .wst{font:italic 500 .8rem var(--serif)} .wst.m{color:var(--fern)} .wst.o{color:var(--gilt-deep)} /* brief items (evidence cards) */ .bitem{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); padding:calc(16px*var(--sp)) 18px calc(18px*var(--sp));margin-bottom:calc(14px*var(--sp))} .bitem:last-child{margin-bottom:0} .bitem.lead{border-top:3px solid var(--vestry)} .bitem.lead h5{font-size:1.38rem;line-height:1.25} .bhead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px} .edlabel{font:700 .62rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt-deep)} .newtag{display:inline-flex;align-items:center;gap:.3rem;font:700 .58rem var(--ui);letter-spacing:.1em;text-transform:uppercase; color:var(--on-fern);background:var(--fern);border-radius:99px;padding:2px 8px;vertical-align:1px} /* arrived after the morning publish */ .newtag .bi{font-size:.62rem} .hl .m .newtag{margin-right:.4rem;font-size:.54rem;padding:1px 6px} #localAdded .bi{color:var(--fern)} .bitem h5{font:700 1.14rem/1.3 var(--display);color:var(--ink)} .bitem>p{font:400 .98rem/1.58 var(--serif);color:var(--ink-body);margin-top:6px} .whym{margin-top:10px;font:500 .95rem/1.55 var(--serif);color:var(--ink-deep)} .whym b{font:700 .66rem var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--gilt-deep);margin-right:.5rem} .boundary{margin-top:9px;border-left:2px solid var(--madder);padding:1px 0 1px 10px; font:italic 500 .9rem/1.5 var(--serif);color:var(--madder-ink)} .boundary .bi{margin-right:.4rem;font-style:normal} .factbox{margin-top:12px;background:var(--fern-tint);border:1px solid var(--fern-line);border-radius:8px;padding:12px 16px} .factbox h6{font:700 .66rem var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--vestry);margin-bottom:6px} .factbox li{margin-left:1.1rem;padding:2px 0;font:400 .92rem/1.55 var(--serif);color:var(--ink-body)} .factbox .amt{font:700 .95rem var(--display);color:var(--vestry)} .finrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .fin{display:inline-flex;align-items:baseline;gap:.45rem;background:var(--field-bg);border:1px solid var(--line);border-radius:7px; padding:5px 11px;font:600 .7rem var(--ui);color:var(--ink-soft)} .fin b{font:800 .98rem var(--display);color:var(--vestry)} .srcrow{margin-top:9px;font:500 .74rem var(--ui);color:var(--ink-soft)} .srcrow .bi{color:var(--gilt);margin-right:.3rem} .srcrow a{color:var(--gilt-deep);text-decoration:none} .srcrow a:hover{text-decoration:underline} .conf{margin-top:8px} .conf summary{font:600 .66rem var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer; list-style:none;display:inline-flex;gap:.35rem;align-items:center} .conf summary::-webkit-details-marker{display:none} .conf summary .bi{color:var(--gilt)} .conf p{font:400 .85rem/1.5 var(--serif);color:var(--ink-soft);margin-top:4px} .evitem{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); padding:calc(14px*var(--sp)) 18px;margin-bottom:calc(12px*var(--sp))} .evitem:last-child{margin-bottom:0} .method{font:400 .88rem/1.6 var(--serif);color:var(--ink-soft)} .method b{font:600 .68rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--vestry);display:block;margin-top:10px} .nm-finding{text-align:center;padding:26px 18px 10px} .nm-finding .bi{font-size:2.1rem;color:var(--gilt);display:block;margin-bottom:10px} .nm-finding h4{font:700 1.3rem var(--display);color:var(--vestry);margin-bottom:6px} .nm-finding p{font:400 .98rem/1.6 var(--serif);color:var(--ink-body);max-width:58ch;margin:6px auto;text-wrap:balance} /* digests */ .digest-quiet{background:var(--card-quiet);border:1px dashed var(--line);border-radius:8px;padding:10px 14px; font:italic 500 .9rem/1.55 var(--serif);color:var(--ink-soft);margin:16px 0 4px} .dstory{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); padding:calc(18px*var(--sp)) 20px calc(20px*var(--sp));margin-bottom:calc(16px*var(--sp))} .dstory:last-child{margin-bottom:0} .dstory h5{font:700 1.18rem/1.3 var(--display);color:var(--ink)} .dstory .dl{font:600 .66rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gilt-deep);margin-top:4px} .dstory p{font:400 1rem/1.62 var(--serif);color:var(--ink-body);margin-top:10px} /* agent notes card */ .an{display:flex;gap:10px;padding:calc(10px*var(--sp)) 0;border-bottom:1px solid var(--line);position:relative;align-items:flex-start} .an:last-child{border-bottom:0} .an-avatar{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--fern-tint);color:var(--fern);font-size:.85rem} .an.unread .an-avatar{box-shadow:0 0 0 2px var(--gilt)} .an .who{font:700 .74rem var(--ui);color:var(--fern)} .an .meta{font:500 .68rem var(--ui);color:var(--ink-soft)} .an .body{font:400 .88rem/1.5 var(--serif);color:var(--ink-body);margin-top:2px} .an .dis{position:absolute;right:0;top:8px;width:20px;height:20px;border-radius:50%;color:var(--ink-faint);display:grid;place-items:center;font-size:.6rem} .an .dis:hover{background:var(--inset);color:var(--madder)} /* notification bell + dropdown panel */ .bellwrap{position:relative} #bellBtn.has-new{color:var(--on-cloth-accent)} .bell-badge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:99px;background:var(--gilt); color:var(--on-gilt);font:700 .58rem/15px var(--ui);text-align:center;padding:0 3px;display:none;pointer-events:none} .bell-badge.show{display:block} .bellpanel{position:absolute;right:0;top:44px;width:min(340px,calc(100vw - 32px));background:var(--card); border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);z-index:40; color:var(--ink);text-align:left;font-size:.9375rem;font-weight:400;letter-spacing:0;text-transform:none} .bp-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)} .bp-list{max-height:320px;overflow:auto;padding:2px 14px} .bp-foot{padding:8px 14px;border-top:1px dashed var(--line);font:500 .7rem var(--ui);color:var(--ink-soft)} .bp-foot .bi{color:var(--gilt)} /* settings */ .s6{grid-column:span 6} @media (max-width:920px){.s6{grid-column:span 12}} .frow{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:6px 0} .frow label{font:600 .78rem var(--ui);color:var(--ink-soft)} .frow input,.frow select{padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--field-bg);font:500 .88rem var(--ui);width:100%} .frow input:focus,.frow select:focus{border-color:var(--fern)} .cred{display:flex;align-items:center;gap:12px;padding:calc(11px*var(--sp)) 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .cred .cname{font:700 .9rem var(--ui);color:var(--vestry);min-width:150px} .cred.revoked{opacity:.35} .cred .cname .bi{color:var(--gilt-deep);margin-right:.4rem} .scopes{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:180px} .scope{font:600 .6rem var(--ui);letter-spacing:.05em;background:var(--inset);border-radius:4px;padding:3px 7px;color:var(--ink-soft)} .cmeta{font:500 .7rem var(--ui);color:var(--ink-soft)} .revoke{font:600 .72rem var(--ui);color:var(--madder);border:1px solid var(--madder-line);border-radius:7px;padding:5px 11px} .revoke:hover:not(:disabled){background:var(--madder-tint)} .newcred{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px} .newcred.show{display:block} .ck{display:inline-flex;align-items:center;gap:.35rem;font:600 .74rem var(--ui);color:var(--ink-soft);margin:2px 12px 2px 0} .tokenbox{display:none;margin-top:12px;background:var(--gilt-tint);border:1px dashed var(--gilt);border-radius:8px;padding:12px 14px} .tokenbox.show{display:block} .tokenbox code{font:600 .85rem ui-monospace,Consolas,monospace;color:var(--gilt-deep);word-break:break-all} .tokenbox .tb-label{font:700 .68rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gilt-deep);display:block;margin-bottom:4px} .act{display:grid;grid-template-columns:96px 150px 1fr;gap:10px;padding:calc(8px*var(--sp)) 0;border-bottom:1px solid var(--line); font:500 .78rem var(--ui);color:var(--ink-soft);align-items:baseline} .act:last-child{border-bottom:0} .act b{color:var(--vestry)} .act code{font:600 .72rem ui-monospace,Consolas,monospace;color:var(--gilt-deep)} @media (max-width:560px){.act{grid-template-columns:80px 1fr}.frow{grid-template-columns:1fr}} /* ---------- live-card states: empty / stale ---------- */ .cardempty{text-align:center;padding:26px 12px;color:var(--ink-soft)} .cardempty .bi{font-size:1.7rem;color:var(--gilt);display:block;margin-bottom:8px} .cardempty b{display:block;font:700 .95rem var(--display);color:var(--vestry);margin-bottom:3px} .cardempty .hint{font-size:.75rem} .card-foot.stale{background:var(--gilt-tint);border-top:1px solid var(--gilt-line);color:var(--gilt-deep)} .card-foot.stale .bi{color:var(--madder)} /* ---------- weather alerts ---------- */ .wx-alert{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--madder-tint);border:1px solid var(--madder-line); border-radius:8px;padding:8px 12px;font:600 .78rem var(--ui);color:var(--madder-ink)} .wx-alert .bi{color:var(--madder);flex:none} /* ---------- lock screen error states ---------- */ .lock-error{display:none;font:600 .78rem var(--ui);color:var(--madder);margin-top:10px} .lock-error.show{display:block} .lock-card.shake{animation:shake .4s} @keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} /* ---------- calendar: now marker & all-day ---------- */ .ev.now{background:linear-gradient(90deg,var(--fern-tint),transparent 85%);border-left:3px solid var(--fern); border-radius:6px;padding-left:8px;margin-left:-8px} .ev.now time{color:var(--fern);font-weight:700} .nowtag{display:inline-block;font:700 .56rem var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--fern); background:var(--fern-tint);border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:1px} .ev.allday time{font-size:.64rem;letter-spacing:.05em;text-transform:uppercase} /* ---------- links: nudge buttons & category drag ---------- */ .lk .mv{display:none;width:18px;height:18px;border-radius:4px;color:var(--ink-faint);place-items:center;font-size:.5rem;flex:none} .editing .lk .mv{display:grid} .lk .mv:first-of-type{margin-left:auto} .lk .mv:hover{background:var(--fern-tint);color:var(--fern)} .editing .lk{padding-right:26px} .editing .lg h4{cursor:grab} .lg.drop-above{box-shadow:inset 0 3px 0 var(--fern)} .lg.drop-below{box-shadow:inset 0 -3px 0 var(--fern)} .lk-edit select{padding:7px 10px;border:1px solid var(--line);border-radius:6px;font:500 .82rem var(--ui);background:var(--field-bg)} /* ---------- news: sticky tabs, anchors, edition stepper ---------- */ .prod-tabs{position:sticky;top:10px;z-index:30} .anchor-flash{animation:aflash 2s ease} @keyframes aflash{0%{background:var(--gilt-tint)}100%{background:var(--flash-end,var(--card))}} .ed-step{display:inline-flex;align-items:center;gap:5px} .ed-step button{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;color:var(--ink-soft); display:grid;place-items:center;font-size:.7rem;background:var(--field-bg)} .ed-step button:hover:not(:disabled){border-color:var(--fern);color:var(--fern)} .ed-step button:disabled{opacity:.35;cursor:default} .backlatest{font:600 .68rem var(--ui);color:var(--gilt-deep);border-bottom:1px dashed var(--gilt);cursor:pointer;background:none} /* ---------- news: collapsible article cards (headline is the toggle) ---------- */ .foldbtn{display:flex;width:100%;gap:10px;align-items:flex-start;justify-content:space-between;padding:0;text-align:left} .foldbtn:hover{color:var(--fern)} .foldbtn .bi{flex:none;font-size:.78rem;color:var(--ink-soft);margin-top:.3em;transition:transform .2s ease} .foldbtn[aria-expanded="true"] .bi{transform:rotate(180deg)} .fold-all{display:inline-flex;align-items:center;gap:.3rem;font:600 .7rem var(--ui);color:var(--gilt-deep);padding:0} .fold-all:hover{text-decoration:underline} .nofold .foldbtn{cursor:default} .nofold .foldbtn:hover{color:inherit} .nofold .foldbtn .bi,.nofold .fold-all{display:none} @media screen{ .bitem.collapsed > :not(.bhead):not(h5),.dstory.collapsed > :not(h5){display:none} .bitem.collapsed{padding-bottom:calc(14px*var(--sp))} .dstory.collapsed{padding-bottom:calc(16px*var(--sp))} } /* ---------- bible: day arrows ---------- */ .day-step{display:inline-flex;gap:6px;margin-left:12px;vertical-align:3px} .day-step button{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;color:var(--ink-soft);display:grid;place-items:center;font-size:.75rem} .day-step button:hover:not(:disabled){border-color:var(--fern);color:var(--fern)} .day-step button:disabled{opacity:.3;cursor:default} /* ---------- settings: password eye & hints ---------- */ .pwwrap{position:relative;display:flex} .pwwrap input{flex:1;padding-right:38px} .pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--ink-soft)} .pw-eye:hover{color:var(--fern);background:var(--fern-tint)} .frow .hint{grid-column:2;font:500 .7rem var(--ui);color:var(--ink-soft);margin-top:-2px} @media (max-width:560px){.frow .hint{grid-column:1}} /* ---------- settings: expandable cards, live cue, theme card ---------- */ #view-settings .grid{align-items:start} .scard .card-head{padding:0;gap:0} .sc-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:calc(13px*var(--sp)) 18px calc(11px*var(--sp));text-align:left} .sc-toggle:hover .eyebrow,.sc-toggle:hover .sc-chev{color:var(--fern)} .sc-toggle .eyebrow{flex:none} .scard .head-actions{padding-right:12px;flex:none} .sc-sum{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 .78rem var(--ui);color:var(--ink-soft)} .scard:not(.collapsed) .sc-sum{display:none} .sc-chev{flex:none;font-size:.8rem;color:var(--ink-soft);margin-left:auto;transition:transform .2s ease} .sc-toggle[aria-expanded="true"] .sc-chev{transform:rotate(180deg)} .sc-body{display:flex;flex-direction:column;flex:1} @media screen{.scard.collapsed .sc-body{display:none}.scard.collapsed .card-head{border-bottom:0}} .sc-gh{font:700 .66rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--vestry);border-bottom:1px solid var(--line);margin:14px 0 6px;padding-bottom:5px;display:flex;align-items:center;gap:.4rem} .sc-gh:first-child{margin-top:0} .sc-gh .bi{color:var(--gilt-deep)} .sc-groups{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;margin-top:4px} @media (max-width:920px){.sc-groups{grid-template-columns:1fr}} .ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .ctl>select,.ctl>input:not([type=checkbox]):not([type=time]){flex:1 1 160px;width:auto} .ctl .saved-flash{flex:none;white-space:nowrap} .ctl .hint,.ctl .ck{margin:0} .ctl .ck{white-space:nowrap} .scard .seg{margin:0;padding:2px} .scard .seg button{padding:6px 12px;font-size:.78rem} .scard .seg button[aria-pressed="true"]{background:var(--card);color:var(--vestry);box-shadow:var(--shadow-chip)} .swatches{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--sw);padding:0} .swatch:hover{border-color:var(--fern)} .swatch[aria-pressed="true"]{border-color:var(--gilt);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--gilt)} .sw-name{font:600 .72rem var(--ui);color:var(--ink-soft);margin-left:4px} /* Settings swatches paint from the theme rules above: each button carries data-="", so its option's own block recolours it (custom properties resolve on the button itself). The defaults have no block, so they restate the :root inputs the previews read. Dark previews are lifted to read on a card. */ .swatch[data-paper="ivory"]{--paper-l:#F5F2E7;--night-tint:oklch(.24 0 0);--night-m:0;--night-dl:0} .swatch[data-foil="gilt"]{--gilt-l:#A87D2B;--gilt-d:#D2A64A} .swatch[data-cloth="vestry"]{--cloth-l:#16382C} .swatch[data-paper]{--sw:var(--paper-l)} .swatch[data-foil]{--sw:light-dark(var(--gilt-l),var(--gilt-d))} .swatch[data-cloth]{--sw:var(--cloth-l)} @supports (color:oklch(from red calc(l + .1) c h)){ .swatch[data-paper]{--sw:light-dark(var(--paper-l),oklab(from color-mix(in oklab,var(--card-d),var(--night-tint) calc(var(--night-m) * 100%)) calc((l - .24 * var(--night-m)) / (1 - var(--night-m)) + var(--night-dl) + .14) calc(a * 1.6) calc(b * 1.6)))} .swatch[data-cloth]{--sw:light-dark(var(--cloth-l),oklch(from var(--cloth-l) calc(l + .1) c h))} } /* the fifth circle: the picked colour inside a rainbow ring, with the colour input tucked under it */ .sw-pick{position:relative;display:inline-flex} .sw-pick input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0} .swatch.sw-custom{background:radial-gradient(circle closest-side,var(--sw) 70%,transparent 73%),conic-gradient(oklch(.7 .13 20),oklch(.76 .13 90),oklch(.7 .12 150),oklch(.66 .12 240),oklch(.66 .13 310),oklch(.7 .13 20))} .preset-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sc-hint{font:500 .74rem var(--ui);color:var(--ink-soft);margin:8px 0 6px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:560px){.sc-toggle{flex-wrap:wrap}.sc-sum{order:3;flex-basis:100%}} /* preferences: which Home cards are shown (hidden ones leave the grid and the tuck-away bars) */ #view-home.no-weather #wxCard,#view-home.no-verse #verseCard,#view-home.no-calendar #calCard,#view-home.no-headlines #hlCard,#view-home.no-links #linksCard, #view-home.no-weather.no-verse #morningBar,#view-home.no-calendar #eventsBar,#view-home.no-headlines #hlBar{display:none !important} @media (min-width:921px){ #view-home.no-weather #verseCard,#view-home.no-verse #wxCard,#view-home.no-calendar #hlCard,#view-home.no-headlines.no-links #calCard,#view-home.no-calendar.no-headlines #linksCard{grid-column:span 12} #view-home.no-headlines #linksCard{grid-column:span 8} } /* ---------- misc: gear active state & print ---------- */ .iconbtn.active{background:rgba(255,255,255,.16);color:#fff} @media print{ html,html[data-scheme]{color-scheme:light} header.cover,footer.app,.prod-tabs,#toast,.mchev,.ed-step,.backlatest,.bellpanel,.foldbtn .bi,.fold-all,.sc-chev{display:none !important} body{background:#fff;color:#000} main{max-width:100%;padding:0} .card,.bitem,.dstory,.evitem{box-shadow:none} .news-cols{column-count:2;column-gap:36px;column-rule:1px solid #999} } /* ---------- through the bible ---------- */ .reading-ahead{display:inline-flex;align-items:center;gap:.4rem;background:var(--gilt-tint);color:var(--gilt-deep); font:600 .72rem var(--ui);padding:4px 11px;border-radius:99px;margin-bottom:10px} .read-meta{font-size:.78rem;color:var(--ink-soft);margin:8px 0 14px} .read-meta .bi{color:var(--fern);margin-right:.25rem} .done-banner{display:flex;align-items:center;gap:.5rem;color:var(--fern);font:600 .88rem var(--ui);margin-bottom:8px} .notes{display:block} .notes textarea{width:100%;min-height:96px;resize:vertical;background:var(--field-bg);border:1px solid var(--line);border-radius:8px; padding:12px 14px;font:400 .95rem/1.55 var(--serif);color:var(--ink)} .notes textarea:focus{border-color:var(--fern)} .notes-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px} .saved-flash{font:600 .74rem var(--ui);color:var(--fern);opacity:0;transition:opacity .3s} .saved-flash.show{opacity:1} .progress{height:8px;border-radius:99px;background:var(--inset-line);overflow:hidden;margin:8px 0 6px} .progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--fern),var(--fern-hi) 70%,var(--gilt));transition:width .5s} .stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .stat{flex:1;min-width:96px;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:center} .stat .v{font:800 1.3rem var(--display);color:var(--vestry)} .stat .v .bi{color:var(--gilt);font-size:1rem} .stat .l{font:600 .62rem var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)} .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cal-nav b{font:700 1rem var(--display);color:var(--vestry)} .cal-nav button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);color:var(--ink-soft)} .cal-nav button:hover:not(:disabled){border-color:var(--fern);color:var(--fern)} .cal-nav button:disabled{opacity:.35;cursor:default} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal .dow{font:600 .62rem var(--ui);letter-spacing:.05em;color:var(--ink-soft);text-align:center;padding-bottom:2px} .cd{position:relative;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font:600 .82rem var(--ui); border:1px solid transparent;color:var(--ink)} .cd.blank{visibility:hidden} .cd.weekend{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--stripe) 4px 5px);color:var(--ink-faint);font-weight:500} .cd.future{color:var(--ink-soft);border-color:var(--inset-line);background:var(--card-soft)} .cd.done{background:var(--fern);color:var(--on-fern);border-color:var(--fern)} .cd.done::after{content:"✓";position:absolute;font-size:.5rem;bottom:1px;right:4px;color:var(--on-fern-muted)} .cd.missed{background:var(--madder-tint);border-color:var(--madder-line);color:var(--madder)} .cd.missed::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--madder);bottom:4px;left:50%;transform:translateX(-50%)} .cd.today{box-shadow:0 0 0 2px var(--gilt)} .cd.selected{box-shadow:0 0 0 2px var(--vestry)} .cd.today.selected{box-shadow:0 0 0 2px var(--gilt),0 0 0 4px var(--vestry)} .cd:not(.blank):not(.weekend):hover{border-color:var(--fern)} .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.7rem;color:var(--ink-soft)} .legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:5px;vertical-align:-1px} .legend .li-done i{background:var(--fern)} .legend .li-miss i{background:var(--madder-tint);border:1px solid var(--madder-line)} .legend .li-today i{background:var(--card);box-shadow:0 0 0 2px var(--gilt)} .legend .li-wknd i{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--stripe-strong) 3px 4px);border:1px solid var(--line)} /* ---------- reading view v2 ---------- */ .pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px} .pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--field-bg);border:1px solid var(--line);border-radius:99px;padding:5px 13px;font:600 .74rem var(--ui);color:var(--ink-soft)} .pill b{color:var(--vestry);font:800 .95rem var(--display)} .pill .bi{color:var(--gilt-deep)} .seg{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;margin:16px 0 2px;flex-wrap:wrap} .seg button{font:600 .84rem var(--ui);padding:8px 16px;border-radius:8px;color:var(--ink-soft)} .seg button.active{background:var(--card);color:var(--vestry);box-shadow:var(--shadow-chip)} .chtabs{display:flex;gap:6px;margin:14px 0 0;flex-wrap:wrap} .chtabs button{font:600 .74rem var(--ui);border:1px solid var(--line);border-radius:7px;padding:5px 13px;color:var(--ink-soft)} .chtabs button.active{border-color:var(--gilt);color:var(--gilt-deep);background:var(--gilt-tint)} .scripture{font:400 1.08rem/1.82 var(--serif);color:var(--ink-deep);padding:4px 0 2px} .scripture h4{font:700 .8rem var(--ui);letter-spacing:.17em;color:var(--vestry);margin:20px 0 10px;display:flex;align-items:center;gap:12px} .scripture h4::after{content:"";flex:1;height:1px;background:var(--line)} .scripture p{margin:0} .vnum{font:600 .6rem var(--ui);color:var(--gilt-deep);vertical-align:super;margin:0 3px 0 7px} .dropcap::first-letter{font:700 3em/.82 var(--display);color:var(--gilt-deep);float:left;padding:7px 9px 0 0} .scripture .pv{display:block;padding-left:1.5em;text-indent:-1.5em;margin:2px 0} .scripture .pv .vnum{margin-left:0} @media (min-width:900px){ .scripture p{column-count:2;column-gap:56px;column-rule:1px solid var(--line);text-align:justify;hyphens:auto} .scripture p.poetry{text-align:left} } .next-ch{margin-top:18px} .markrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .api-note{display:inline-flex;align-items:center;gap:.4rem;font:600 .66rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--field-bg);border:1px solid var(--line);border-radius:6px;padding:4px 9px} .api-note .bi{color:var(--gilt)} .stub{background:var(--card-soft);border:1px dashed var(--line);border-radius:8px;padding:24px;font:italic 500 1rem/1.6 var(--serif);color:var(--ink-soft);max-width:64ch;margin-top:14px} .stub .bi{color:var(--gilt);margin-right:.4rem} .drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease} .drawer>*{overflow:hidden;min-height:0} .drawer.open{grid-template-rows:1fr;border-bottom:1px solid var(--line)} .drawer-inner{display:flex;flex-wrap:wrap;gap:26px;padding:16px 18px;background:var(--card-quiet)} .drawer>.drawer-inner{transition:padding .35s ease,visibility .35s} .drawer:not(.open)>.drawer-inner{padding-top:0;padding-bottom:0;visibility:hidden} .drawer-cal{flex:0 1 340px;min-width:264px} .drawer-side{flex:1 1 220px;min-width:210px} @media (max-width:560px){.scripture{font-size:1.02rem}} /* ---------- footer & toast ---------- */ footer.app{border-top:1px solid var(--line);padding:16px clamp(16px,4vw,40px);font-size:.72rem;color:var(--ink-soft); display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;max-width:var(--page-max);margin:0 auto;width:100%} footer.app .nx-mark{display:inline-block;height:1.3em;vertical-align:-.3em;margin-right:.3em} #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--cloth);color:var(--on-cloth);border:1px solid var(--edge); font:600 .82rem var(--ui);padding:10px 18px;border-radius:99px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:50} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast .bi{color:var(--on-cloth-accent);margin-right:.4rem} /* ---------- view transitions & responsive ---------- */ .view{animation:rise .3s ease both} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ---------- theme: layout & motion overrides ---------- */ [data-cols="one"] .news-cols{column-count:auto;column-rule:none} [data-cols="one"] .brief-wrap{max-width:760px} [data-cards="ruled"]{--flash-end:transparent} [data-cards="ruled"] :is(.bitem,.evitem,.dstory){background:none;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0;margin-bottom:0} [data-cards="ruled"] :is(.bitem,.evitem,.dstory):last-child{border-bottom:0} [data-cards="ruled"] .bitem.lead{border-top:0} [data-sticky="all"] header.cover{position:sticky;top:0;z-index:40} [data-sticky="all"] .prod-tabs{top:calc(var(--chrome-h,0px) + 10px)} [data-sticky="off"] .prod-tabs{position:static} @media (max-width:560px){[data-sticky="all"] header.cover{position:static}[data-sticky="all"] .prod-tabs{top:10px}} @media (prefers-reduced-motion:reduce){ html:not([data-motion="full"]){scroll-behavior:auto} html:not([data-motion="full"]) .view,html:not([data-motion="full"]) .lock-card.shake{animation:none} html:not([data-motion="full"]) *{transition:none !important} } [data-motion="reduce"]{scroll-behavior:auto} [data-motion="reduce"] .view,[data-motion="reduce"] .lock-card.shake{animation:none} [data-motion="reduce"] *{transition:none !important} @media (max-width:920px){ .s4,.s8{grid-column:span 12} } @media (max-width:560px){ main{padding-top:18px} .brand-sub{display:none} .verse-text{font-size:1.18rem} .ev{grid-template-columns:60px 1fr} } /* ---- app additions ---- */ a.tab{display:inline-block;text-decoration:none} a.iconbtn,a.textlink{text-decoration:none} form.inline{display:inline} .is-new{border-left:3px solid var(--gilt-line);padding-left:15px} .card.clickable{position:relative} .card-link{position:absolute;inset:0;z-index:1;border-radius:inherit} .card.clickable .head-actions{position:relative;z-index:2} .lock-error{min-height:1.2em} .bp-empty{text-align:center;padding:22px 8px;color:var(--ink-soft);font:500 .82rem var(--ui)} .bp-empty .bi{font-size:1.6rem;color:var(--gilt);display:block;margin-bottom:6px} .pw-msg{grid-column:2;font:600 .74rem var(--ui);margin-top:4px} .pw-msg.err{color:var(--madder)} .pw-msg.ok{color:var(--fern)} @media (max-width:560px){.pw-msg{grid-column:1}} .scripture .superscription{font-variant:small-caps;color:var(--ink-soft);display:block;margin-bottom:.4em} .scripture p.poetry .pv{display:block;padding-left:1.5em;text-indent:-1.5em;margin:2px 0} .tokenbox code{user-select:all} /* Server-rendered day arrows and calendar links (the mockup used