/* Quest log and index: local page styles, kept off the home page's first paint. */
.q-eyebrow { margin: 0 0 .45rem; color: var(--accent-light, #8ab8ff); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.q-reviewed-glyph { display: inline-block; flex: none; object-fit: contain; }
.q-log { --q-line: color-mix(in srgb, var(--border-light, #354363) 72%, transparent); }
.q-log-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent, #678cff) 30%, var(--border, #263450)); border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #556cff) 16%, var(--bg-card, #141c2d)), var(--bg-card, #141c2d) 65%); box-shadow: 0 20px 55px -42px var(--accent, #678cff); }
.q-log-hero::before { content: ''; position: absolute; z-index: -1; width: 310px; height: 310px; right: -100px; top: -155px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent, #678cff) 32%, transparent), transparent 68%); pointer-events: none; }
.q-log-hero { display: grid; gap: 22px; padding: clamp(20px, 4vw, 34px); margin: 18px 0 24px; }
.q-log-hero h1 { margin: 0 0 .35rem; font-size: clamp(2rem, 5vw, 3.45rem); letter-spacing: -.045em; }
.q-log-hero p:not(.q-eyebrow) { max-width: 52ch; margin: 0; color: var(--text-secondary, #adbbd2); }
.q-log-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-log-stats > div { min-width: 0; min-height: 106px; padding: 13px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; border: 1px solid var(--q-line); border-radius: 18px; background: color-mix(in srgb, var(--bg-primary, #090f1c) 45%, transparent); }
.q-log-stats strong { color: var(--text-primary, #f4f7ff); font-size: 1.52rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.q-log-stats span:last-child { color: var(--text-secondary, #b5c2d7); font-size: .75rem; line-height: 1.2; }
.q-flame { display: block; font-size: clamp(1.1rem, calc(1.1rem + var(--streak) * .025rem), 1.8rem); line-height: 1.05; filter: drop-shadow(0 3px 8px #f2873966); }
.q-today-ring::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--accent, #748bff) calc(var(--progress) * 33.333%), var(--q-line) 0); mask: radial-gradient(circle, transparent 58%, #000 61%); opacity: .9; }
.q-today-ring { position: relative; }
.q-today-ring strong { margin-top: 10px; }
.q-today-ring small { font-size: .75rem; color: var(--text-secondary, #b5c2d7); }
.q-week-coins .ov-icon { color: var(--warning, #f4b45b); }
.q-log-columns { display: grid; gap: 26px; align-items: start; }
.q-log-work, .q-log-badges { min-width: 0; }
.q-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.q-section-head h2 { margin: 0; font-size: 1.38rem; letter-spacing: -.025em; }
.q-section-head > span { flex: none; padding: 4px 9px; border: 1px solid var(--q-line); border-radius: 100px; color: var(--text-secondary, #afbdd2); font-size: .75rem; }
.q-progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.q-progress-card { padding: 17px; border: 1px solid var(--q-line); border-radius: 21px; background: var(--bg-card, #141c2d); box-shadow: 0 14px 30px -28px #000b; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.q-progress-card:hover { transform: translateY(-3px); border-color: var(--accent, #7890ff); box-shadow: 0 19px 36px -28px var(--accent, #7890ff); }
.q-progress-head { display: flex; align-items: center; gap: 11px; }
.q-progress-head > div { flex: 1; min-width: 0; }
.q-progress-head .quest-state { align-self: flex-start; }
.q-quest-tile { flex: none; display: grid; place-items: center; width: 53px; height: 53px; border-radius: 16px; color: hsl(var(--h, 220) 85% 78%); background: linear-gradient(145deg, hsl(var(--h, 220) 75% 53% / .28), hsl(var(--h, 220) 55% 25% / .15)); border: 1px solid hsl(var(--h, 220) 75% 60% / .35); }
.q-progress-title { display: flex; align-items: center; min-height: 44px; width: fit-content; max-width: 100%; color: var(--text-primary, #f4f7ff); font-weight: 750; font-size: 1.04rem; line-height: 1.3; text-decoration: none; }
.q-progress-title:hover { color: var(--accent-light, #a4bbff); }
.q-site-chip { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--accent, #678cff) 13%, transparent); color: var(--text-secondary, #bfcbdd); font-size: .75rem; font-weight: 650; vertical-align: middle; }
.q-progress-head .q-site-chip { margin-top: 5px; }
.q-progress-card > p { margin: 11px 0; color: var(--text-secondary, #b4c1d5); font-size: .88rem; }
.q-progress-steps { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.q-progress-steps li { display: flex; align-items: center; gap: 8px; color: var(--text-secondary, #c2cce0); font-size: .82rem; }
.q-progress-steps li > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.25; }
.q-progress-steps b { flex: none; color: var(--accent-light, #a4bbff); font-variant-numeric: tabular-nums; }
.q-progress-steps progress { display: block; width: 100%; height: 4px; margin-top: 5px; accent-color: var(--accent, #788fff); }
.q-progress-reward { display: flex; gap: 8px; align-items: center; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--q-line); color: var(--text-secondary, #b5c2d7); font-size: .77rem; }
.q-progress-reward .medal { width: 27px; height: 27px; }
.q-progress-reward .medal .ov-icon { --ovi-size: 16px !important; }
.q-progress-reward strong { color: var(--text-primary, #f4f7ff); }
.q-empty { display: flex; align-items: center; gap: 14px; border: 1px dashed var(--q-line); border-radius: 20px; padding: 17px; }
.q-empty p { margin: 0; }
.q-completed-fold, .q-locked-fold { margin-top: 18px; border: 1px solid var(--q-line); border-radius: 17px; background: var(--bg-card, #141c2d); }
.q-completed-fold > summary, .q-locked-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 15px; cursor: pointer; font-weight: 700; }
.q-completed-fold > summary strong { padding: 1px 8px; border-radius: 100px; background: color-mix(in srgb, var(--accent, #678cff) 18%, transparent); }
.q-completed-fold > summary small { margin-left: auto; color: var(--text-muted, #9aabc4); font-weight: 500; }
.q-completed-fold .quest-list { padding: 0 12px 12px; grid-template-columns: 1fr; }
.q-completed-fold > p { padding: 0 15px 12px; }
.q-more-quests a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; text-decoration: none; }
.q-log-badges > p { margin: -4px 0 14px; font-size: .88rem; color: var(--text-secondary, #b7c3d6); }
.q-badge-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.q-badge { position: relative; }
.q-badge > summary { display: grid; place-items: center; min-height: 56px; cursor: pointer; list-style: none; }
.q-badge > summary::-webkit-details-marker { display: none; }
.q-badge-medal { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: hsl(var(--h) 86% 83%); background: radial-gradient(circle at 36% 26%, hsl(var(--h) 72% 45% / .43), hsl(var(--h) 50% 18% / .5) 67%); box-shadow: inset 0 0 0 2px hsl(var(--h) 72% 65% / .82), inset 0 0 0 5px hsl(var(--h) 72% 65% / .17), 0 8px 18px -10px hsl(var(--h) 72% 50% / .8); transition: transform .22s ease, box-shadow .22s ease; }
.q-badge:hover .q-badge-medal, .q-badge:focus-within .q-badge-medal { transform: translateY(-4px) scale(1.06); box-shadow: inset 0 0 0 2px hsl(var(--h) 72% 65%), 0 0 20px hsl(var(--h) 78% 58% / .28); }
.q-badge.is-locked .q-badge-medal { color: var(--text-muted, #9aabc4); background: transparent; box-shadow: inset 0 0 0 1px var(--q-line); opacity: .6; }
.q-badge-tip { display: none; position: absolute; bottom: 100%; left: 50%; z-index: 5; transform: translateX(-50%); min-width: 125px; padding: 7px 9px; border: 1px solid var(--q-line); border-radius: 9px; background: var(--bg-secondary, #0b1323); box-shadow: 0 8px 20px #0005; text-align: center; pointer-events: none; }
.q-badge-tip strong, .q-badge-tip small { display: block; line-height: 1.2; }
.q-badge-tip strong { font-size: .75rem; }
.q-badge-tip small { color: var(--text-secondary, #b7c3d6); font-size: .75rem; margin-top: 3px; }
.q-badge:hover:not([open]) .q-badge-tip { display: block; }
.q-badge[open]::before { content: ''; position: fixed; inset: 0; z-index: 9998; background: #050a14ad; backdrop-filter: blur(5px); }
.q-badge-sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999; max-width: 420px; max-height: calc(100dvh - 24px); overflow: auto; margin: 0 auto; padding: 22px; border: 1px solid var(--q-line); border-radius: 24px; background: var(--bg-card, #141c2d); box-shadow: 0 24px 90px #0009; animation: q-sheet-in .22s ease both; }
.q-badge-sheet .q-badge-medal--large { width: 72px; height: 72px; margin: 10px 0; }
.q-badge-sheet h3 { margin: 6px 0; font-size: 1.32rem; }
.q-badge-sheet p { color: var(--text-secondary, #b7c3d6); margin: 6px 0; }
.q-badge-steps { margin: 7px 0 10px; padding-left: 18px; color: var(--text-secondary, #b7c3d6); font-size: .83rem; }
.q-badge-sheet .q-eyebrow { color: var(--accent-light, #a4bbff); }
.q-badge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.q-badge-actions a, .q-badge-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--q-line); border-radius: 11px; background: color-mix(in srgb, var(--accent, #678cff) 14%, var(--bg-card, #141c2d)); color: var(--text-primary, #fff); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.q-badge-actions a { border-color: var(--accent, #678cff); }
.q-locked-fold { padding: 0 8px 10px; }
.q-locked-fold > summary { color: var(--text-secondary, #b7c3d6); }
.q-badge-privacy { margin-top: 17px !important; font-size: .75rem !important; }
.q-log-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--q-line); }
.site-group h3 > .ov-icon { flex: none; }
.quest-list .quest { box-shadow: 0 12px 28px -26px #0009; }
.quest-list .quest .medal .ov-icon { --ovi-size: 28px !important; }
.quest-list .quest-steps li { padding-left: 0; }
.quest-list .quest-steps li::before { display: none; }
.quest-list .quest-steps li > .ov-icon { flex: none; color: var(--accent-light, #a4bbff); }
@keyframes q-sheet-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes q-badge-reveal { 0% { transform: scale(.65) rotate(-12deg); opacity: .2; } 65% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes q-ring-draw { from { box-shadow: inset 0 0 0 0 hsl(var(--h) 72% 65%); } to { box-shadow: inset 0 0 0 2px hsl(var(--h) 72% 65%), 0 0 20px hsl(var(--h) 78% 58% / .28); } }
@keyframes q-badge-fade { from { opacity: .25; } to { opacity: 1; } }
.q-badge.is-new .q-badge-medal { animation: q-badge-reveal .55s cubic-bezier(.2,.75,.2,1) both, q-ring-draw .55s ease both; }
@media (min-width: 880px) {
    .q-log-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); align-items: center; }
    .q-log-columns { grid-template-columns: minmax(0, 1.06fr) minmax(375px, .94fr); }
    .q-badge-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
    .q-badge > summary { min-height: 49px; }
    .q-badge-medal { width: 42px; height: 42px; }
    .q-badge-sheet { left: auto; right: max(16px, calc((100vw - 1080px) / 2)); bottom: auto; top: 25%; width: 340px; }
}
@media (max-width: 350px) { .q-badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .q-log-stats > div { min-height: 99px; } }

/* Review, 2026-11-09 (Opus): the ring holds only its number, a badge always says its name, and words stay plain. */
.q-today-ring::before { top: 12px; }
.q-today-ring strong { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 0 4px; font-size: 1.25rem; }
.q-today-ring strong small { display: inline; }
.q-badge > summary { grid-template-rows: auto auto; gap: 6px; align-content: start; padding: 4px 2px; }
.q-badge-name { max-width: 100%; color: var(--text-secondary, #b5c2d7); font-size: .72rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.q-badge.is-locked .q-badge-name { color: var(--text-muted, #8b98ad); }
.q-today-ring strong { display: flex; align-items: baseline; justify-content: center; padding-top: 18px; box-sizing: border-box; }
.q-badge-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px 6px; }
.q-badge-name { overflow-wrap: break-word; }