/* Firsthand — the few rules the shared shell does not already have. */

/* Shelf tiles: no photos, a glyph on the accent instead. */
.rtile-photo.glyph { display: grid; place-items: center; background: linear-gradient(140deg, var(--c), var(--cd)); }
.rtile-photo.glyph .rtile-ic { position: static; width: auto; height: auto; background: none; box-shadow: none; }
.rtile-photo.glyph .rtile-ic svg { width: 34px; height: 34px; color: #fff; opacity: .95; }
.rtile-photo.glyph .glyph-letter { font: 800 30px/1 -apple-system, system-ui, sans-serif; color: #fff; letter-spacing: -.03em; }
.rtile.seen .rtile-name::after { content: "✓"; margin-left: .5em; font-size: .8em; color: var(--gold-deep); }

/* Chips: hours to read, status */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.chip { display: inline-flex; align-items: center; gap: .4em; font: 700 12.5px/1 -apple-system, system-ui, sans-serif;
        padding: .55em .85em; border-radius: 999px; background: var(--sun-soft); color: var(--gold-deep); }
.chip.quiet { background: var(--paper-card); color: var(--dk-mute, #7a7488); box-shadow: inset 0 0 0 1px var(--dk-rule, #EADFC6); }

/* Tradition page header */
.t-head { margin: 4px 0 18px; }
.t-kicker { font: 800 .7rem/1 -apple-system, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tcd, var(--gold-deep)); }
.t-head h1 { font-weight: 800; font-size: clamp(28px, 7vw, 40px); letter-spacing: -.03em; line-height: 1.02; margin: .25em 0 .3em; color: var(--ink, #2A2038); }
.t-meta { font-size: 14.5px; line-height: 1.5; color: var(--dk-mute, #6b6478); }
.t-meta b { color: var(--dk-soft, #4d4658); font-weight: 700; }

/* Section blocks on the tradition page */
.blk { margin: 22px 0 0; }
.blk h2 { font-weight: 800; font-size: 1.15em; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--ink, #2A2038); }
.blk .prose { font-size: 15.5px; line-height: 1.6; color: var(--dk-soft, #4d4658); }
.blk .prose p { margin: 0 0 .75em; } .blk .prose p:last-child { margin-bottom: 0; }
.book-card { background: var(--paper-card); border-radius: 16px; padding: 16px 18px; position: relative; overflow: hidden;
             box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 10px 24px rgba(60,45,20,.09); }
.book-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--tc, var(--sun)), var(--tcd, var(--gold-deep))); }
.book-title { font-weight: 800; font-size: 1.2em; letter-spacing: -.02em; color: var(--ink, #2A2038); }
.book-sub { font-size: 13.5px; color: var(--dk-mute, #7a7488); margin-top: 2px; }
.tr-why { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dk-rule, #EEE7DA); font-size: 14px; line-height: 1.5; color: var(--dk-soft, #4d4658); }
.tr-why b { color: var(--ink, #2A2038); }

/* Source links: full-width buttons with a kind glyph */
.src-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.src { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--paper-card); border-radius: 13px;
       padding: 11px 14px; color: var(--ink, #2A2038); font-weight: 700; font-size: 14.5px; line-height: 1.3;
       box-shadow: 0 1px 3px rgba(60,45,20,.08); position: relative; }
.src::before { content: ""; position: absolute; inset: 0; border-radius: 13px; padding: 1.5px; pointer-events: none;
               background: linear-gradient(135deg, var(--tc, var(--sun)), var(--tcd, var(--gold-deep)));
               -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.src .k { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
          background: linear-gradient(140deg, var(--tc, var(--sun)), var(--tcd, var(--gold-deep))); font: 800 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .04em; }
.src .go { margin-left: auto; color: var(--dk-mute, #7a7488); font-weight: 800; }
.src:active { transform: scale(.99); }

/* The six questions on a tradition page, and the answers page */
.q-label { font: 800 .68rem/1 -apple-system, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--tcd, var(--gold-deep)); }
.saying .q-title { font-weight: 800; font-size: 1.02em; letter-spacing: -.01em; color: var(--ink, #2A2038); margin-top: 3px; }
.saying .ref { font-size: .8em; color: var(--dk-mute, #7a7488); font-weight: 700; }
.saying.answer { --c: var(--tc, var(--sun)); --cd: var(--tcd, var(--gold-deep)); }
.saying .scripture { font-size: var(--fs, 19px); line-height: 1.55; color: var(--ink, #2A2038); margin: 0; }
.saying .t-link { display: inline-block; margin-top: 10px; font: 800 13.5px -apple-system, system-ui, sans-serif; color: var(--tcd, var(--gold-deep)); text-decoration: none; }

/* Home: the six-questions tile row */
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.q-tile { position: relative; display: block; text-decoration: none; background: var(--paper-card); border-radius: 14px; padding: 13px 14px 12px;
          color: var(--ink, #2A2038); font-weight: 800; font-size: 14.5px; line-height: 1.25; letter-spacing: -.01em;
          box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 8px 18px rgba(60,45,20,.08); }
.q-tile::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; pointer-events: none;
                  background: linear-gradient(135deg, var(--c), var(--cd));
                  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.q-tile small { display: block; margin-top: 5px; font: 700 12px/1.3 -apple-system, system-ui, sans-serif; color: var(--dk-mute, #7a7488); }
.q-tile:active { transform: scale(.98); }

/* The reading line on the questions page: "26 answers, in their own words" */
.q-intro { font-size: 15px; line-height: 1.55; color: var(--dk-soft, #4d4658); margin: 4px 0 16px; }

.foot a { color: inherit; }
[data-theme="dark"] .chip { background: rgba(255,206,61,.14); color: #F0C97A; }
[data-theme="dark"] .chip.quiet { background: var(--paper-card); color: var(--dk-mute); }

/* The view from inside: prose answers, not scripture */
.saying.view .prose-answer { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dk-soft, #4d4658); }
.fact { padding: 10px 0; border-top: 1px solid var(--dk-rule, #EEE7DA); }
.fact:first-child { border-top: none; padding-top: 0; }
.fact .prose { margin-top: 5px; }
.rite { font-size: 15px; line-height: 1.55; color: var(--dk-soft, #4d4658); padding: 6px 0 6px 12px; border-left: 3px solid var(--tc, var(--sun)); margin: 7px 0; }
.rite b { color: var(--ink, #2A2038); }

/* Photo on the tradition page, and on the shelf tiles */
.t-photo { margin: 0 0 18px; border-radius: 16px; overflow: hidden; background: var(--paper-card); box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 10px 24px rgba(60,45,20,.09); }
.t-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.t-photo figcaption { font: 600 11px/1.4 -apple-system, system-ui, sans-serif; color: var(--dk-mute, #7a7488); padding: 6px 12px 7px; }
.t-photo figcaption a { color: inherit; text-decoration: none; }
.quote-block { margin-top: 12px; padding: 12px 14px 10px; border-radius: 12px; background: var(--sun-soft); }
.quote-block .q-sub { display: block; font: 800 .62rem/1 -apple-system, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.quote-block .scripture { font-size: calc(var(--fs, 19px) - 2px); }
.quote-block .ref { display: block; margin-top: 6px; }
[data-theme="dark"] .quote-block { background: rgba(255,206,61,.10); }

/* ---- How it reached us: the provenance block ---- */
.prov-line { font-weight: 800; font-size: 1.02em; line-height: 1.3; letter-spacing: -.01em; color: var(--ink, #2A2038); margin: 0 0 10px; }
.find { padding: 11px 0 11px 13px; border-left: 3px solid var(--tc, var(--sun)); margin: 9px 0; }
.find-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; margin-bottom: .3em; }
.find-title { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--ink, #2A2038); }
.find-when { font: 700 .68rem/1 -apple-system, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--tcd, var(--gold-deep)); background: color-mix(in srgb, var(--tc, var(--sun)) 16%, transparent); border-radius: 999px; padding: .38em .62em; }
.find-text { font-size: 15px; line-height: 1.55; color: var(--dk-soft, #4d4658); }
.prov-their { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--dk-rule, #EEE7DA); }
.prov-their .q-label { display: block; margin-bottom: .45em; }

/* ---- For today: eight takes ---- */
.today-bar .tb-kicker { flex-wrap: wrap; row-gap: .2em; }
.today-bar .tb-who { color: var(--dk-mute, #7a7488); font-weight: 800; }
.today-bar .tb-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.today-bar .tb-photo { width: 96px; }
.today-bar .tb-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 55%); }
.today-bar .tb-tag { position: absolute; top: 6px; right: 7px; font-size: .95rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.cm-when { font: 800 .68rem/1 -apple-system, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: linear-gradient(140deg, var(--mc), var(--mcd)); border-radius: 999px; padding: .45em .8em; display: inline-block; margin: 0 0 1em; }
.cm-side { padding: 0 0 0 13px; border-left: 3px solid var(--mc); margin: 0 0 1.1em; }
.cm-side .q-label { display: block; margin-bottom: .45em; color: var(--mcd); }
.cm-side p { margin: 0 0 .6em; font-size: 15px; line-height: 1.55; }
.cm-side p:last-child { margin-bottom: 0; }
.today-bar .tb-dot { color: var(--dk-mute, #7a7488); opacity: .55; }
.cm-mhead .cm-mkicker { padding-right: 46px; }