/*! beo 1.42.0 */
@font-face {
font-family: "Atkinson Hyperlegible";
src: url("/assets/fonts/atkinsonhyperlegiblenext-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
font-family: "Atkinson Hyperlegible Bold";
src: url("/assets/fonts/atkinsonhyperlegiblenext-extrabold.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/assets/fonts/atkinsonhyperlegiblemono-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
font-family: "Gloria Hallelujah";
src: url("/assets/fonts/gloria-hallelujah-latin-400-normal.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: optional;
}
:root {
--bg: #fafafa; --text: #14141e; --accent: #630f33;
--accent-bg: #f5f7ff; --border: #ccc; --muted: #666;
--danger: #c0392b;
--tok-com: #6e7781; --tok-str: #0a3069; --tok-kw: #a01b28; --tok-num: #0550ae;
--tok-fn: #7c3aad; --tok-tag: #116329; --tok-att: #0550ae; --tok-var: #8a3a00;
--font-main: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
--font-title: "Atkinson Hyperlegible Bold", "Atkinson Hyperlegible", system-ui, sans-serif;
--font-code: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, monospace;
--font-scrawl: "Gloria Hallelujah", cursive;
--font-size: 1.15rem;
--size-h1: 3rem; --size-h2: 2.4rem; --size-h3: 2rem;
--size-h4: 1.44rem; --size-h5: 1.15rem; --size-h6: 0.96rem;
--measure: 55rem;
--size-title: 3.5rem;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121; --text: #dcdcdc; --accent: #ffb300;
--accent-bg: #2b2b2b; --border: #555; --muted: #999;
--danger: #ef6a5e;
--tok-com: #9aa4ae; --tok-str: #a5d6ff; --tok-kw: #ff7b72; --tok-num: #79c0ff;
--tok-fn: #d2a8ff; --tok-tag: #7ee787; --tok-att: #79c0ff; --tok-var: #ffa657;
color-scheme: dark;
}
}
@media (max-width: 720px) {
:root { --size-h1: 2.5rem; --size-h2: 2.1rem; --size-h3: 1.75rem; --size-h4: 1.25rem;
--size-title: 2.45rem; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
min-height: 100vh; display: flex; flex-direction: column; align-items: stretch;
background: var(--bg); color: var(--text);
font-family: var(--font-main); font-size: var(--font-size);
margin: 0; padding: 0 1rem; line-height: 1.6; text-wrap: pretty;
}
header.site, main, footer { width: 100%; max-width: var(--measure); margin: 0 auto; }
main { flex: 1; }
header.site { border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
footer { text-align: center; font-size: 1rem; margin-top: 4rem;
border-top: 1px solid var(--border); padding-top: 1rem; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title); color: var(--accent);
margin-bottom: 1rem; overflow-wrap: break-word; text-wrap: balance;
}
h1, h2, h3 { line-height: 1.1; }
h1 { font-size: var(--size-h1); margin-top: 0; }
h2 { font-size: var(--size-h2); margin-top: 3rem; }
h3 { font-size: var(--size-h3); margin-top: 3rem; }
h4 { font-size: var(--size-h4); }
h5 { font-size: var(--size-h5); }
h6 { font-size: var(--size-h6); }
main h1 { margin-bottom: 2rem; }
p { margin: 1.5rem 0; }
em { font-family: var(--font-scrawl); font-style: normal; }
blockquote em, cite em { font-family: inherit; font-style: italic; }
a { color: var(--accent); }
a:hover { text-decoration: none; }
abbr { cursor: help; }
hr { border: 0; border-top: 1px solid var(--border); }
cite { font-size: 0.9rem; }
.muted { color: var(--muted); font-size: 0.9rem; }
.hidden { display: none; }
[hidden] { display: none !important; }
header.site .h-card { display: block; margin: 1rem 0; }
header.site .h-card::after { content: ""; display: block; clear: both; }
header.site { text-align: var(--align-title, left); }
header.site .site-note { text-align: left; }
header.site .site-nav { text-align: left; justify-content: var(--align-menu, flex-start); }
header.site .h-card { text-align: inherit; }
header.site .h-card .p-note,
header.site .h-card .p-adr,
header.site .h-card .u-email,
header.site .h-card .tagline { text-align: left; }
header.site .site-title {
font-family: var(--font-sitetitle, var(--font-title));
font-size: var(--size-title); line-height: 1;
color: var(--accent); text-decoration: none; max-width: 100%;
margin: 0.5rem 0 0.25rem;
display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
header.site .site-title:hover span { text-decoration: underline; }
header.site .site-logo { max-height: 1em; width: auto; border-radius: 5px; margin: 0; flex: none; }
header.site .p-note { clear: left; }
header.site .p-adr, header.site .u-email { display: block; margin: 0.3rem 0; }
header.site .p-note p { margin: 0.2rem 0; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 1rem 0; }
.site-nav a { color: var(--menu, var(--text)); text-decoration: none; font-size: 0.9em;
display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav a:hover, .site-nav a.current { color: var(--accent); text-decoration: underline; }
.site-nav .icon { padding-right: 0; width: 1.15em; height: 1.15em; }
.site-nav.admin-menu { gap: 0.75rem 1.4rem; }
.site-nav.admin-menu a { font-size: 1rem; }
.outbox-status {
position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
max-width: var(--measure); margin: 0 auto;
padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.9rem;
border: 1px solid var(--border); background: var(--accent-bg); color: var(--text);
box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.outbox-waiting { border-color: var(--accent); }
.outbox-sending { border-color: var(--accent); opacity: 0.9; }
.outbox-done { border-color: #1a7f37; }
.outbox-error { border-color: #c1272d; }
@media (prefers-color-scheme: dark) { .outbox-done { border-color: #7ee787; } }
.admin-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0.6rem; margin: 1rem 0 2rem; }
.admin-tool { display: flex; gap: 0.6rem; align-items: flex-start; text-decoration: none;
border: 1px solid var(--border); border-radius: 6px; padding: 0.7rem 0.9rem;
background: var(--accent-bg); color: var(--text); }
.admin-tool:hover { border-color: var(--accent); }
.admin-tool .icon { flex: none; width: 1.4em; height: 1.4em; padding-right: 0;
color: var(--accent); position: static; }
.admin-tool span { display: block; }
.admin-tool small { display: block; font-size: 0.82rem; line-height: 1.35; }
.admin-pages { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.admin-pages .admin-tool { padding: 0.85rem 1rem; }
.settings-subnav { display: grid; gap: 0.35rem; margin: 0.4rem 0 1.4rem; font-size: 0.88rem;
padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; }
.settings-subnav-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; }
.settings-subnav-label { flex: 0 0 9.5rem; white-space: nowrap; color: var(--muted, inherit); opacity: 0.75; font-size: 0.8rem;
text-transform: uppercase; letter-spacing: 0.04em; }
.settings-subnav a { text-decoration: none; }
.settings-subnav a:hover { text-decoration: underline; }
.settings-subnav .current { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .settings-subnav-label { flex-basis: 100%; } }
.settings-section, .settings-fold { margin: 0 0 1.6rem; }
.settings-section > h2 { margin-bottom: 0.2rem; }
.settings-fold { border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem 1rem; }
.settings-fold[open] { padding-bottom: 1rem; }
.settings-fold > summary { cursor: pointer; list-style: revert; }
.settings-fold > summary h2 { display: inline; font-size: 1.05em; margin: 0; }
.settings-fold > summary::marker { color: var(--accent); }
.settings-intro { margin-bottom: 1.2rem; }
.wayback-coverage { font-size: 1.15rem; margin-bottom: 0.2rem; }
.wayback-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
margin: 1.2rem 0; padding: 0.9rem 1rem; border: 1px solid var(--border);
border-radius: 6px; background: var(--accent-bg); }
.wayback-actions label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.wayback-actions select { width: auto; margin: 0; }
.wayback-filter { gap: 0.5rem 1.2rem; margin: 1.2rem 0 0.4rem; }
.wayback-table { width: 100%; border-collapse: collapse; }
.wayback-table th, .wayback-table td { text-align: left; padding: 0.4rem 0.6rem 0.4rem 0;
border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.92rem; }
.wayback-why { font-size: 0.82rem; }
.wayback-why, .wayback-table tr.wayback-error td:nth-child(2) { color: #c1272d; }
@media (prefers-color-scheme: dark) {
.wayback-why, .wayback-table tr.wayback-error td:nth-child(2) { color: #ff9a92; }
}
.wayback-notpost { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
border: 1px solid var(--border); border-radius: 0.6rem; padding: 0 0.4rem; margin-left: 0.3rem; }
.wayback-probe { border: 1px solid var(--border); border-radius: 0.4rem;
padding: 0.8rem 1rem; margin: 1rem 0; }
.wayback-probe-list { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.wayback-probe-list li { margin: 0 0 0.3rem; font-size: 0.92rem; }
.wayback-probe-list li::before { margin-right: 0.4rem; }
.wayback-probe-list li.probe-ok::before { content: "\2713"; color: #1a7f37; }
.wayback-probe-list li.probe-bad::before { content: "\2717"; color: #c1272d; }
.wayback-probe p { margin: 0; }
@media (prefers-color-scheme: dark) {
.wayback-probe-list li.probe-ok::before { color: #7ee2a8; }
.wayback-probe-list li.probe-bad::before { color: #ff9a92; }
}
.ceim-link { font-size: 0.8rem; font-weight: normal; margin-left: 0.6rem;
white-space: nowrap; }
.health-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.8rem; }
.health-table th, .health-table td { border: 0; border-bottom: 1px solid var(--border);
padding: 0.45rem 0.6rem 0.45rem 0; vertical-align: baseline; font-size: 0.92rem;
background: none; text-align: left; }
.health-table th { font-weight: 600; white-space: nowrap; }
.health-mark { width: 1.4rem; text-align: center; opacity: 0.55; }
.health-value { white-space: nowrap; }
.health-value code { font-size: 0.86rem; }
.health-note { font-size: 0.84rem; width: 55%; }
.health-bad .health-mark, .health-bad th { color: #c1272d; opacity: 1; }
.health-warn .health-mark { color: #b26a00; opacity: 1; }
.health-ok .health-mark { color: #2e7d32; opacity: 1; }
@media (prefers-color-scheme: dark) {
.health-bad .health-mark, .health-bad th { color: #ff9a92; }
.health-warn .health-mark { color: #e8b04b; }
.health-ok .health-mark { color: #8bc98f; }
}
@media (max-width: 40rem) {
.health-table, .health-table tbody, .health-table tr, .health-table th, .health-table td { display: block; }
.health-table tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
.health-table th, .health-table td { border: 0; padding: 0; }
.health-mark { display: inline-block; width: auto; padding-right: 0.4rem; }
.health-table th { display: inline-block; white-space: normal; }
.health-note { width: auto; }
}
.media-detail { margin: 1rem 0 2rem; }
.media-detail figcaption { display: flex; flex-direction: column; gap: 0.4rem;
margin-top: 0.6rem; font-size: 0.9rem; }
.media-detail figcaption input { width: 100%; box-sizing: border-box;
font-family: var(--mono, ui-monospace, monospace); font-size: 0.85rem; }
.md-snippet { margin: 0.6rem 0 1.6rem; }
.md-snippet label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.md-snippet > input { width: 100%; box-sizing: border-box; }
.copy-md { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.copy-md input { flex: 1 1 auto; min-width: 0;
font-family: var(--mono, ui-monospace, monospace); font-size: 0.85rem; }
.copy-md button { flex: 0 0 auto; }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
position: sticky; top: 0; z-index: 5;
margin: 0 0 var(--editor-gap, 0.4rem); padding: 0.35rem 0.45rem;
border: 1px solid var(--border);
border-radius: 6px; background: var(--accent-bg); }
.rich-toolbar button { min-width: 2rem; padding: 0.25rem 0.45rem; font-size: 0.9rem;
line-height: 1.2; background: transparent; color: inherit; border: 1px solid transparent;
border-radius: 4px; cursor: pointer; }
.rich-toolbar button:hover, .rich-toolbar button:focus-visible {
background: var(--bg); border-color: var(--border); }
.rich-toolbar .tb-sep { width: 1px; align-self: stretch; margin: 0.1rem 0.35rem;
background: var(--border); }
.probe-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.probe-out { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem;
max-height: 26rem; overflow: auto; background: var(--accent-bg);
border: 1px solid var(--border); border-radius: 5px; padding: 0.8rem; }
.archived { font-size: 0.85rem; }
.archived span { opacity: 0.8; }
.admin-add a { margin-right: 0.9rem; white-space: nowrap; }
.admin-nav .icon { width: 1.05em; height: 1.05em; padding-right: 0.25rem; }
.nav-count {
display: inline-block; min-width: 1.3em; padding: 0 0.3em; margin-left: 0.15rem;
background: var(--accent); color: var(--bg); border-radius: 999px;
font-size: 0.72em; line-height: 1.5; text-align: center; font-family: var(--font-code);
}
header.site .tagline { margin: 0 0 0.5rem; }
.h-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.25rem; }
.profile-img { max-width: 8rem; margin: 0 0 0.5rem; flex: none;
border: 2px solid var(--accent); border-radius: 6px; }
.card-text { text-align: left; flex: 1 1 16rem; min-width: 0; }
.card-text .p-name { font-family: var(--font-title); font-size: 1.4em; text-decoration: none; }
.card-text .p-note p { margin: 0.4rem 0; }
.card-name-row { display: flex; flex-wrap: wrap; align-items: baseline;
gap: 0.4rem 1rem; margin-bottom: 0.4rem; }
.card-name-row .social { margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 0; }
.social a { display: inline-flex; }
.social .icon { width: 1.5em; height: 1.5em; padding-right: 0; color: var(--accent); }
footer { padding-bottom: 2.5rem; }
footer .h-card {
text-align: left; margin: 2.5rem auto; max-width: 40rem;
background: var(--accent-bg); border: 1px solid var(--border);
border-radius: 8px; padding: 1.5rem;
}
footer .h-card .profile-img { max-width: 6.5rem; }
.footer-links { margin: 2rem 0 1.5rem; }
.footer-extra { margin: 1.5rem 0; }
.footer-extra img, .footer-extra svg { display: inline-block; margin: 0.2rem; vertical-align: middle;
border-radius: 0; max-width: 88px; }
.footer-colophon, .footer-licence { margin: 1.2rem 0; }
.footer-colophon .powered-by a { text-decoration: none; }
.footer-colophon .powered-by a:hover { text-decoration: underline; }
.footer-colophon .icon, .footer-licence .icon { vertical-align: -0.2em; padding-right: 0; }
.home-intro { margin-bottom: 2.5rem; }
.home-intro > :first-child { margin-top: 0; }
.home-intro img { border-radius: 5px; }
.header-img {
float: right; width: 300px; max-width: 45%;
margin: 0.3rem 0 1rem 1.25rem;
border: 3px solid var(--accent); border-radius: 5px;
}
.home-intro::after { content: ""; display: block; clear: both; }
@media (max-width: 620px) {
.header-img { float: none; width: 100%; max-width: 100%; margin: 1rem 0; }
}
.home-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem;
margin: 2rem 0; font-size: 0.95rem; }
.home-jump a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.home-jump a:hover { text-decoration: underline; }
.home-jump .icon { width: 1.15em; height: 1.15em; padding-right: 0; }
.home-section { margin: 0 0 3rem; }
.home-section > h2 { margin-top: 2.5rem; }
.home-section:first-of-type > h2 { margin-top: 1.5rem; }
.home-viewall { margin: 1rem 0 0; font-size: 0.95rem; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
main img, main video, main iframe { max-width: 100%; border-radius: 5px; margin: 1.5rem auto; display: block;
border: var(--image-border, 0) solid var(--image-border-colour, var(--border)); }
figcaption, img + em {
display: block; font-family: var(--font-main); font-style: normal;
text-align: center; font-size: 0.7em; margin-top: -1rem;
}
.video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 1.5rem 0;
border: var(--image-border, 0) solid var(--image-border-colour, var(--border));
border-radius: 5px; box-sizing: border-box; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
border-radius: 5px; margin: 0; max-width: none; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.5rem; background: var(--accent-bg); color: var(--text);
border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
font-family: inherit; font-size: 1rem; padding: 1rem; }
.video-play:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.video-play-icon { font-size: 2.5rem; line-height: 1; color: var(--accent); }
.video-play-label { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; }
.video-play-label small { opacity: 0.7; font-size: 0.8em; }
.video-fallback { position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; border: 1px solid var(--border); border-radius: 5px; }
pre {
background: var(--accent-bg); border: 1px solid var(--border); border-radius: 5px;
margin: 2rem 0; padding: 1rem; overflow-x: auto;
font-family: var(--font-code); white-space: pre-wrap; word-break: break-word;
}
pre code { border: none; padding: 0; background: none; }
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-kw { color: var(--tok-kw); }
.tok-num { color: var(--tok-num); }
.tok-fn { color: var(--tok-fn); }
.tok-tag { color: var(--tok-tag); }
.tok-att { color: var(--tok-att); }
.tok-var { color: var(--tok-var); }
.tok-op { color: inherit; }
pre.hl { position: relative; }
pre.hl::after {
content: attr(data-lang); position: absolute; top: 0.35rem; right: 0.6rem;
font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--muted); pointer-events: none; user-select: none;
}
@media (max-width: 480px) { pre.hl::after { display: none; } }
code {
border: 1px solid var(--border); border-radius: 5px; background: var(--accent-bg);
padding: 0.1rem 0.25rem; font-size: 1rem; font-family: var(--font-code);
}
h2 code, h3 code { font-size: 90%; }
kbd {
font-size: 1rem; background: var(--accent-bg); border: 1px solid var(--text);
border-bottom: 3px solid var(--text); border-radius: 5px; padding: 0.25rem;
}
blockquote {
border-left: 3px solid var(--accent); padding-left: 1rem;
margin: 2.5rem 0 2.5rem 2.5rem; font-style: italic;
}
blockquote p { opacity: 0.8; }
table { border-collapse: collapse; margin: 1.5rem 0; }
td, th { border: 1px solid var(--border); text-align: start; padding: 0.5rem; }
th { background: var(--accent-bg); font-weight: bold; }
tbody tr:nth-child(even) { background: var(--accent-bg); }
details {
padding: 0.7rem 1rem; margin: 2rem 0; background: var(--accent-bg);
border: 1px solid var(--border); border-radius: 5px;
}
summary { cursor: pointer; font-weight: bold; padding: 0.7rem 1rem; margin: -0.7rem -1rem; }
details[open] > summary { margin-bottom: 0.5rem; }
details[open] > summary + * { margin-top: 0; }
details[open] > :last-child { margin-bottom: 0; }
article { margin-bottom: 2rem; }
article + article { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1.5rem; }
p.post-date { margin: -1.5rem 0 2rem; font-size: 1rem; }
.wikilink-missing { border-bottom: 1px dashed var(--muted); color: var(--muted); }
.backlinks { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1rem; }
.tags { display: inline; }
.footnotes {
font-size: 1rem; font-style: italic; margin-top: 2.5rem;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.footnotes hr { display: none; }
.post-nav {
display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
margin: 3rem auto; padding: 0;
}
.post-nav div { flex: 1 1 0; }
.post-nav p { padding: 1rem 0; }
.post-nav a { font-weight: bold; }
.post-nav-next { text-align: right; }
@media (max-width: 800px) { .post-nav { display: block; } }
.insert { margin: 2.5rem 0; }
.log-cards { list-style: none; padding: 0; margin: 0 0 1.5em; }
.log-card { margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.log-card:last-child { border-bottom: none; }
.log-card-link { display: flex; align-items: baseline; gap: 0.75em;
padding: 0.5em 0.25em; text-decoration: none; color: inherit;
transition: background 0.12s; }
.log-card-link:hover { background: var(--accent-bg); }
.log-card time { flex: 0 0 auto; font-variant-numeric: tabular-nums;
color: var(--muted); font-size: 0.85em; min-width: 2.5em; text-align: right; }
.log-card-title { flex: 1 1 auto; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.log-card-icons { flex: 0 0 auto; font-size: 0.8em; letter-spacing: 0.05em;
user-select: none; opacity: 0.6; }
.log-card-plain .log-card-title { color: var(--muted); }
@media (max-width: 600px) {
.log-card-title { white-space: normal; }
}
:root { --archive-date-col: 7rem; }
.archive-list { display: grid; grid-template-columns: var(--archive-date-col) 1fr;
gap: 0.5rem 1.5rem; align-items: baseline; margin: 1.5rem 0; }
.archive-list .archive-row { margin: 0; border: 0; padding: 0; }
.archive-list time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.archive-row-title { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 600px) {
.archive-list { grid-template-columns: 1fr; gap: 0; }
.archive-list .archive-row { margin-top: 1rem; }
.archive-row-title { margin-bottom: 0.25rem; display: block; }
}
.archive-month { font-size: var(--size-h5); text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; margin: 2.5rem 0 0.5rem; }
.notes-feed { display: flex; flex-direction: column; gap: 1.25rem; max-width: 100%; }
.note-card {
background: var(--accent-bg); border: 1px solid var(--border);
border-radius: 6px; padding: 1rem 1.25rem 0.75rem;
}
.note-card + .note-card { margin-top: 0; border-top: 1px solid var(--border); padding-top: 1rem; }
.note-card-body p:first-child { margin-top: 0; }
.note-card-body p:last-child { margin-bottom: 0.5rem; }
.note-card-body img { max-width: 75%; }
.note-card-body .gallery img { max-width: none; }
.note-card-footer {
border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.75rem;
font-size: 0.85em; opacity: 0.7;
padding-bottom: 0;
}
.excerpt-view, .tag-item { margin-bottom: 4rem; }
.excerpt-view h2, .tag-item h2 { font-size: var(--size-h4); margin: 0 0 -1rem; }
.excerpt-view p, .tag-item p { font-size: 1rem; }
.full-post-view { margin-bottom: 4rem; }
.full-post-view hr { margin-top: 4rem; max-width: 70%; }
label { display: block; }
input, textarea, select {
font: inherit; color: var(--text); background: var(--bg);
border: 1px solid var(--border); border-radius: 5px;
padding: 0.5em; margin-bottom: 0.5rem; max-width: 100%; display: inline-block;
}
textarea:not([cols]) { width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: min-content; }
input[type="color"] { height: 2.5rem; padding: 0.2rem; }
input[type="file"] { border: 0; }
@media (max-width: 720px) { textarea, select, input { width: 100%; } }
form.stack label { display: block; margin-top: 1rem; }
form.stack > button { margin-top: 1.2rem; }
form.stack input, form.stack textarea, form.stack select { width: 100%; box-sizing: border-box; }
button, a.button {
cursor: pointer; background: var(--accent); color: var(--bg); border: none;
width: auto; border-radius: 5px; padding: 0.5rem 0.75rem;
font-family: inherit; font-size: inherit; text-decoration: none;
}
button:hover, a.button:hover { background: var(--text); color: var(--bg); }
button.secondary { background: none; color: var(--accent); border: 1px solid currentColor; }
button.secondary:hover { background: var(--accent); color: var(--bg); }
button.danger { background: none; color: var(--danger); border: 1px solid currentColor; }
button.danger:hover { background: var(--danger); color: var(--bg); }
button[disabled], input:disabled, textarea:disabled, select:disabled {
cursor: not-allowed; opacity: 0.5;
}
button[disabled]:hover { background: var(--accent); }
.notice { background: rgba(200, 60, 60, 0.12); border: 1px solid #c66; padding: 0.5rem 1rem; border-radius: 4px; }
.icon {
position: relative; top: 0.1em; display: inline-block; width: 1em; height: 1em;
padding-right: 0.25rem; stroke-width: 0; stroke: currentColor; fill: currentColor;
}
NOT A FLEX ROW, and that was the first attempt: a flex container drops the
whitespace BETWEEN its children, so "June 20, 2026 · updated September 5,
  2026" rendered as "2026· updatedSeptember". This is a sentence of inline
text with a picture at the front of it, and inline layout is what keeps the
spaces in a sentence. */
.postmeta { font-size: 0.95em; }
.postmeta a { color: inherit; text-decoration: none; }
.postmeta a:hover { text-decoration: underline; }
h1 + .postmeta { margin-top: -0.75rem; }
.postmeta .icon { padding-right: 0.3rem; }
.tags .icon { color: var(--accent); padding-right: 0.35rem; }
.tags a { text-decoration: underline; }
.saved-notice { background: rgba(60, 160, 60, 0.12); border: 1px solid #6a6; padding: 0.5rem 1rem; border-radius: 4px; }
.flash { background: var(--accent-bg); border: 1px solid var(--border);
padding: 0.5rem 1rem; border-radius: 4px; }
.flash-error { background: rgba(200, 60, 60, 0.12); border-color: #c66; }
.progress { display: block; height: 0.6rem; border: 1px solid var(--border);
border-radius: 4px; overflow: hidden; background: var(--accent-bg); }
.progress > span { display: block; height: 100%; background: var(--accent); }
.band {
margin-inline: -1rem;
padding: 2.5rem 1rem;
background: var(--band-bg, transparent);
color: var(--band-text, inherit);
}
.band + .band { margin-top: 0; }
.band-inner { max-width: var(--measure); margin: 0 auto; }
.band-default { --band-bg: transparent; --band-text: var(--text); }
.band-tinted { --band-bg: var(--accent-bg); --band-text: var(--text); }
.band-accent { --band-bg: var(--accent); --band-text: var(--bg); }
.band-inverted { --band-bg: var(--text); --band-text: var(--bg); }
.band-accent a, .band-inverted a { color: var(--band-text); text-decoration: underline; }
.band-accent .muted, .band-inverted .muted,
.band-accent .block-date, .band-inverted .block-date {
color: var(--band-text);
color: color-mix(in srgb, var(--band-text) 75%, var(--band-bg));
}
.band-accent h1, .band-accent h2, .band-accent h3,
.band-inverted h1, .band-inverted h2, .band-inverted h3 { color: var(--band-text); }
.block-list { margin: 2rem 0; }
.block-list > h2 { margin-top: 0; }
.block-item + .block-item { margin-top: 1.5rem; }
.block-title { margin: 0.2rem 0; font-size: var(--size-h4); }
.block-date { margin: 0.2rem 0; font-size: 0.9rem; }
.block-summary { margin: 0.4rem 0; }
.block-summary p:first-child { margin-top: 0; }
.block-image img { margin: 0 0 0.6rem; width: 100%; height: auto; }
.block-all { margin-top: 1.2rem; }
.block-grid { display: grid; gap: 1.5rem 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.block-grid > h2, .block-grid > .block-all { grid-column: 1 / -1; }
.block-grid .block-item + .block-item { margin-top: 0; }
.block-cards .block-item {
background: var(--accent-bg); border: 1px solid var(--border);
border-radius: 6px; padding: 1rem 1.25rem;
display: flex; flex-direction: column;
}
.block-cards .block-more { margin-top: auto; padding-top: 0.6rem; }
.block-cards .block-image { display: block; margin: -1rem -1.25rem 0.75rem; }
.block-cards .block-image img { border-radius: 6px 6px 0 0; margin: 0; }
.block-cards .block-item > *:first-child { margin-top: 0; }
.icon-shelf { list-style: none; padding: 0; margin: 1rem 0 1.5rem;
display: grid; gap: 0.5rem 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.icon-shelf li { display: flex; align-items: center; gap: 0.5rem;
border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.6rem; }
.icon-shelf .icon { width: 1.6em; height: 1.6em; padding-right: 0; flex: none; }
.font-specimen { display: block; margin: 0.25rem 0 0; font-size: 1.15rem;
opacity: 0.85; }
.gallery-embed { margin: 2rem 0; }
.gallery-intro { margin: 0 0 0.8rem; font-size: 0.95em; }
.gallery-intro p:first-child { margin-top: 0; }
.gallery-intro p:last-child { margin-bottom: 0; }
.gallery-admin-thumb { width: 80px; height: 80px; object-fit: cover;
border-radius: 4px; margin: 0; }
.gallery-memberships { list-style: none; padding: 0; }
.gallery-memberships li { display: flex; align-items: center; gap: 0.6rem;
padding: 0.3rem 0; }
.gallery-pick { display: block; margin-top: 0.3rem; }
.gallery-in { display: block; margin-top: 0.3rem; }
.tag-index { list-style: none; padding: 0; margin: 0.6rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag-index li { margin: 0; }
.tag-index a { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; line-height: 1.2; }
.tag-index a:hover, .tag-index a:focus-visible { border-color: var(--accent); color: var(--accent); }
.tag-index .tag-n { font-size: 0.78em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-index .tag-w1 a { font-size: 0.9rem; }
.tag-index .tag-w2 a { font-size: 1rem; }
.tag-index .tag-w3 a { font-size: 1.12rem; font-weight: 600; }
.tag-index .tag-w4 a { font-size: 1.25rem; font-weight: 700; background: var(--accent-bg); }
.tag-letter { font-size: var(--size-h5); color: var(--accent); margin: 1.4rem 0 0; letter-spacing: 0.04em; }
.tag-sort { margin: 1rem 0 0.4rem; }
.tag-cards { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.tag-cards li { margin: 0; }
.tag-cards a { position: relative; display: block; border-radius: 12px; overflow: hidden; color: #fff; text-decoration: none;
aspect-ratio: 16 / 9; background: var(--accent-bg); }
.tag-cards img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; transition: transform 0.3s; }
.tag-cards a:hover img { transform: scale(1.04); }
.tag-card-text { position: absolute; inset: auto 0 0 0; padding: 1.6rem 0.8rem 0.6rem; display: flex; flex-direction: column;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); }
.tag-card-text strong { font-size: 1.1rem; line-height: 1.2; }
.tag-card-text span { font-size: 0.8rem; opacity: 0.9; }
.archive-intro { margin: 0 0 1.5rem; }
.archive-intro p:first-child { margin-top: 0; }
.block-problem {
background: rgba(200, 60, 60, 0.12); border: 1px solid #c66;
padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.95rem;
}
.contact-form { margin: 2rem 0; }
.message { border: 1px solid var(--border); border-radius: 6px;
padding: 1rem 1.2rem; margin: 1.2rem 0; }
.message-unread { border-left: 4px solid var(--accent); }
.message-head { font-size: var(--size-h4); margin: 0 0 0.3rem; }
.message-body {
white-space: pre-wrap; overflow-wrap: break-word;
background: var(--accent-bg); border-radius: 4px;
padding: 0.8rem 1rem; margin: 0.8rem 0;
}
.admin-nav { border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }
.admin-nav .current, p .current { font-weight: 700; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .admin-table { min-width: 640px; }
.kind-new { margin: 1.2rem 0 1.6rem; }
.posse-dismissed { list-style: none; padding: 0; margin: 0.6rem 0 1.4rem; display: grid; gap: 0.4rem; }
.posse-dismissed li { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.posse-dismissed form { margin: 0; }
.posse-dismissed button { font-size: 0.85rem; padding: 0.25rem 0.6rem; }
.dash-status { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.45rem; }
.dash-status li { display: flex; align-items: baseline; gap: 0.15rem; }
.dash-status .icon { width: 1.05em; height: 1.05em; padding-right: 0.3rem; flex: none; align-self: center; }
.dash-status a.lint-warn { margin: 0; }
.dash-panels { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1.6rem 0 1rem;
align-items: flex-start; }
.dash-col { flex: 1 1 22rem; min-width: 0; display: grid; gap: 1.1rem;
align-content: start; }
.dash-panel { border: 1px solid var(--border); border-radius: 8px;
padding: 0.85rem 1rem 0.7rem; }
.dash-panel--wide { margin: 0 0 1.1rem; }
.dash-panel > h2 { font-size: 0.95rem; margin: 0 0 0.6rem; display: flex; align-items: center;
gap: 0.35rem; letter-spacing: 0.01em; }
.dash-panel > h2 .icon { width: 1em; height: 1em; opacity: 0.75; }
.dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dash-list > li { min-width: 0; }
.dash-row { display: flex; align-items: baseline; gap: 0.4rem; text-decoration: none;
color: inherit; padding: 0.15rem 0.2rem; margin: -0.15rem -0.2rem; border-radius: 5px; }
.dash-row:hover { background: var(--surface-2, rgba(127, 127, 127, 0.09)); }
.dash-row .icon { width: 0.95em; height: 0.95em; flex: none; opacity: 0.6; align-self: center; }
.dash-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.dash-row:hover .dash-title { text-decoration: underline; }
.dash-when, .dash-progress, .dash-count, .dash-state { flex: none; font-size: 0.8rem;
color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-progress, .dash-count { border: 1px solid var(--border); border-radius: 999px;
padding: 0 0.4rem; }
.dash-state { text-transform: lowercase; }
.dash-state--waiting { opacity: 0.6; font-style: italic; }
.dash-kinds { flex: none; display: flex; align-items: center; gap: 0.45rem; }
.dash-kind { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
white-space: nowrap; }
.dash-glyph { margin-left: 0.15rem; opacity: 0.8; }
.dash-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0 0 1.55em; }
.dash-flag { font-size: 0.74rem; line-height: 1.5; border-radius: 999px; padding: 0 0.45rem;
text-decoration: none; border: 1px solid transparent; }
.dash-flag--note { background: rgba(127, 127, 127, 0.14); color: var(--muted); }
.dash-flag--wait { background: rgba(212, 148, 30, 0.16); border-color: rgba(212, 148, 30, 0.35); }
.dash-flag--warn { background: rgba(200, 60, 40, 0.13); border-color: rgba(200, 60, 40, 0.35); }
.dash-flag:hover { text-decoration: underline; }
.dash-list--said > li { padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); }
.dash-list--said > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-who { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.dash-said-body { margin: 0.1rem 0 0 0.2rem; font-size: 0.86rem; }
.dash-said-on { margin: 0.05rem 0 0 0.2rem; font-size: 0.78rem; }
.dash-empty { margin: 0.2rem 0 0; font-size: 0.88rem; }
.dash-note { margin: 0.6rem 0 0; font-size: 0.76rem; line-height: 1.45; }
.dash-more { margin: 0.7rem 0 0; font-size: 0.82rem; }
.dash-footer { margin-top: 1.4rem; }
@media (max-width: 30rem) {
.dash-panel { padding: 0.7rem 0.75rem 0.6rem; }
.dash-flags { margin-left: 0; }
}
:root { --dash-good: #1a7f37; --dash-cell: rgba(127, 127, 127, 0.16); }
@media (prefers-color-scheme: dark) { :root { --dash-good: #57c26a; --dash-cell: rgba(160, 160, 160, 0.2); } }
.dash-sub { margin-left: auto; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.dash-band { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.1rem; margin: 1.6rem 0 0; }
.dash-band--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 45rem) { .dash-band { grid-template-columns: minmax(0, 1fr); } }
.dash-band + .dash-panels { margin-top: 1.1rem; }
.wk-row { display: grid; grid-template-columns: minmax(6rem, 9rem) repeat(7, 1.35rem) minmax(0, 1fr);
gap: 0.28rem; align-items: center; margin: 0.22rem 0; }
.wk-head { margin: 0 0 0.1rem; }
.wk + .wk { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.wk-caption { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.wk-day { font-size: 0.7rem; color: var(--muted); text-align: center; }
.wk-day.is-today { color: var(--text); font-weight: 700; }
.wk-name { font-size: 0.86rem; color: inherit; text-decoration: none; display: flex; align-items: center;
gap: 0.4rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-name:hover { text-decoration: underline; }
.wk-name i { width: 0.55rem; height: 0.55rem; border-radius: 2px; flex: none; background: var(--habit); }
.wk-cell { width: 1.35rem; height: 1.35rem; border-radius: 4px; background: var(--dash-cell);
display: grid; place-items: center; text-decoration: none; box-sizing: border-box; }
.wk-cell.is-on { background: var(--habit); }
.wk-cell.is-catchup { background: repeating-linear-gradient(135deg, var(--habit) 0 2px, transparent 2px 5px); }
.wk-cell.is-future { background: transparent; border: 1px dashed var(--dash-cell); }
.wk-cell.is-today { outline: 2px solid var(--text); outline-offset: 1px; }
a.wk-log { background: transparent; border: 1.5px dashed var(--habit); color: var(--habit);
font-weight: 700; font-size: 0.9rem; line-height: 1; }
a.wk-log:hover { background: var(--habit); color: var(--bg); }
.wk-note { font-size: 0.76rem; color: var(--muted); padding-left: 0.35rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.wk-note.is-hot { color: var(--dash-good); font-weight: 700; }
@media (max-width: 30rem) {
.wk-row { grid-template-columns: 5.6rem repeat(7, 1.2rem) minmax(0, 1fr); gap: 0.2rem; }
.wk-cell { width: 1.2rem; height: 1.2rem; }
.wk-note { font-size: 0.7rem; padding-left: 0.15rem; }
}
.dash-insight { margin: 0.7rem 0 0; padding: 0.45rem 0.6rem; font-size: 0.86rem;
border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 6px 6px 0; }
.dash-figs { display: grid; gap: 0.7rem; }
.dash-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.15rem 0.8rem;
padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.dash-fig:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-fig-k { grid-column: 1 / -1; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.dash-fig-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-fig-v small { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.dash-fig-d { grid-column: 1 / -1; font-size: 0.8rem; }
.dash-spark { display: block; max-width: 100%; height: auto; }
.dash-vs.is-up, .dash-yg-d.is-up { color: var(--dash-good); }
.dash-vs.is-down, .dash-yg-d.is-down { color: var(--danger); }
.dash-clear { margin: 0.55rem 0 0; font-size: 0.86rem; color: var(--dash-good); }
.dash-flag-more { font-size: 0.74rem; color: var(--muted); align-self: center; }
.dash-quiet { flex: none; font-size: 0.78rem; color: #9a6700; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .dash-quiet { color: #e3b341; } }
.progress--thin { height: 0.35rem; margin: 0.25rem 0 0 1.55em; border: 0; background: var(--dash-cell); border-radius: 3px; overflow: hidden; }
.dash-next { margin: 0.75rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--border); font-size: 0.84rem; }
.dash-next b { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 0.3rem; }
.dash-list + .dash-list--said { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.dash-new { flex: none; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0 0.45rem;
background: var(--dash-good); color: var(--bg); }
.dash-otd .dash-row { align-items: center; }
.dash-otd-year { flex: none; width: 2.7rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.dash-thumb { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.dash-thumb--icon { object-fit: contain; padding: 9px; box-sizing: border-box; background: var(--dash-cell); }
.dash-year .dash-yeargrid { list-style: none; margin: 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.6rem; }
.dash-yeargrid a { display: grid; gap: 0.05rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border);
border-radius: 6px; color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
.dash-yeargrid a:hover { background: var(--surface-2, rgba(127, 127, 127, 0.09)); }
.dash-yg-v { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-yg-k { font-size: 0.78rem; color: var(--muted); }
.dash-yg-d { font-size: 0.74rem; color: var(--muted); }
.archive-cover { display: block; width: 100%; max-height: 16rem; object-fit: cover;
border-radius: 8px; margin: 0 0 1.2rem; }
.tag-cover-cell input { width: 100%; min-width: 10rem; }
.probe-step { margin: 0 0 1rem; }
.probe-body { max-height: 28rem; overflow: auto; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; }
.tag-cover-thumb { display: block; margin-top: 0.3rem; width: 6rem; height: 3.4rem; object-fit: cover; border-radius: 4px; }
.new-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
font-weight: 600; opacity: 0.6; margin: 0 0 0.5rem; }
.kind-tiles { display: grid; gap: 0.4rem; max-width: 46rem;
grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); }
@media (min-width: 601px) {
.kind-tiles { max-width: none;
grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
.kind-tile { gap: 0.34rem; border-radius: 10px; }
.kind-tile .icon { width: 1.5rem; height: 1.5rem; }
.kt-label { font-size: 0.72rem; }
}
.kind-tile { display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 0.28rem; aspect-ratio: 1; padding: 0.3rem 0.15rem;
border-radius: 9px; border: 1px solid transparent; text-decoration: none;
color: var(--text); position: relative; }
.kind-tile .icon { width: 1.35rem; height: 1.35rem; }
.kt-label { font-size: 0.66rem; line-height: 1.15; text-align: center;
overflow-wrap: anywhere; }
.kb-write { background: rgba(66, 133, 244, 0.13); border-color: rgba(66, 133, 244, 0.25); }
.kb-write:hover { background: rgba(66, 133, 244, 0.24); }
.kb-track { background: rgba(46, 160, 67, 0.13); border-color: rgba(46, 160, 67, 0.25); }
.kb-track:hover { background: rgba(46, 160, 67, 0.24); }
.kb-sort { background: rgba(212, 148, 30, 0.16); border-color: rgba(212, 148, 30, 0.3); }
.kb-sort:hover { background: rgba(212, 148, 30, 0.28); }
.kb-mark { position: absolute; top: 0.18rem; right: 0.3rem;
font-size: 0.62rem; line-height: 1; opacity: 0.55; }
.kb-ongoing { border-color: rgba(23, 130, 130, 0.4); }
.hub-intro { margin-bottom: 1.2rem; }
.hub-search { margin: 0 0 1.6rem; }
.hub-group { margin: 0 0 1.6rem; }
.hub-group > h2 { margin-bottom: 0.1rem; }
.hub-blurb { margin: 0 0 0.6rem; font-size: 0.9rem; }
.hub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px;
background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.hub-row { display: flex; align-items: center; justify-content: space-between;
gap: 0.8rem; padding: 0.5rem 0.75rem; background: var(--bg); }
.hub-row:hover { background: var(--accent-bg); }
.hub-kind { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.hub-kind:hover span { text-decoration: underline; }
.hub-kind .icon, .hub-title .icon { width: 1.05em; height: 1.05em; flex: none; }
.hub-title { display: flex; align-items: center; gap: 0.5rem; }
.hub-count { font-size: 0.88rem; white-space: nowrap; }
.hub-write .hub-list { border-left: 3px solid rgba(66, 133, 244, 0.5); }
.hub-ongoing .hub-list { border-left: 3px solid rgba(23, 130, 130, 0.55); }
.hub-track .hub-list { border-left: 3px solid rgba(46, 160, 67, 0.5); }
.hub-sort .hub-list { border-left: 3px solid rgba(212, 148, 30, 0.6); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.admin-table tr.current > * { background: var(--accent-bg); }
.inline-form { display: inline; margin: 0; }
.code-edit { position: relative; display: block; }
.code-edit > pre.code-edit-view,
.code-edit > textarea {
margin: 0;
padding: 0.5rem 0.6rem;
border: 1px solid var(--border);
border-radius: 4px;
font-family: var(--font-code);
font-size: 0.9rem;
line-height: 1.5;
tab-size: 2;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: normal;
text-wrap-style: auto;
}
.code-edit > textarea {
position: relative;
display: block;
width: 100%;
resize: vertical;
overflow: auto;
background: var(--bg);
color: var(--text);
}
.code-edit > pre.code-edit-view { display: none; }
.code-edit.on > pre.code-edit-view {
display: block;
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bg);
pointer-events: none;
}
.code-edit.on > textarea {
background: transparent;
color: transparent;
caret-color: var(--text);
}
.code-edit.on > textarea::selection { background: var(--accent); color: transparent; }
.code-edit > pre.code-edit-view code { font: inherit; background: none; padding: 0; }
.ref-contents { list-style: none; margin: 0; padding: 0; display: flex;
flex-wrap: wrap; gap: 0.3rem 1rem; }
.ref-contents li { margin: 0; }
.ref-section { margin: 2.5rem 0; scroll-margin-top: 1rem; }
.ref-section h2 { margin-bottom: 0.4rem; }
.ref-table td.ref-code { width: 45%; vertical-align: top; }
.ref-table td.ref-code code { overflow-wrap: anywhere; }
.ref-names { line-height: 2; }
@media (max-width: 40rem) {
.ref-table td { display: block; border-bottom: 0; padding-bottom: 0; }
.ref-table td.ref-code { width: auto; padding-bottom: 0.1rem; }
.ref-table tr { display: block; border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
}
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit;
text-decoration: underline; cursor: pointer; }
.linklike:hover, .linklike:focus-visible { background: none; color: var(--accent); }
.weighin-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.6rem 1rem; align-items: end; }
.weighin-form label { margin: 0; min-width: 0; }
.weighin-form input, .weighin-form textarea { min-width: 0; margin-bottom: 0; }
.weighin-form .field-wide { grid-column: 1 / -1; }
.weighin-form .field-wide textarea { resize: vertical; }
.weighin-form > p { grid-column: 1 / -1; margin: 0.2rem 0 0; }
@media (max-width: 52rem) {
.weighin-form { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
.icon-only { display: inline-flex; align-items: center; justify-content: center;
padding: 0.15rem; background: none; color: var(--muted); text-decoration: none; }
.icon-only:hover, .icon-only:focus-visible { background: none; color: var(--accent); }
.row-actions { white-space: nowrap; }
.row-actions > *, .row-actions .inline-form { display: inline-flex; vertical-align: middle; }
.row-actions > * + * { margin-left: 0.15rem; }
.danger-icon:hover, .danger-icon:focus-visible { color: var(--danger); }
.icon-only svg { display: block; width: 1.05rem; height: 1.05rem; }
.admin-search { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.8rem 0; }
.admin-search label { flex: 1 1 16rem; max-width: 34rem; margin: 0; }
.admin-count { margin: 0.5rem 0; }
.admin-filter-row > td { padding: 0.3rem 0.5rem 0.6rem; vertical-align: top;
border-bottom: 2px solid var(--border); }
.admin-filter-row select {
width: 100%; max-width: 100%; min-width: 0; font-size: 0.85rem;
padding: 0.25rem 0.3rem; margin: 0;
}
.admin-filter-row td.filter-when { vertical-align: top; }
.admin-filter-row .filter-when-pair { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.admin-filter-row .filter-when-pair select { flex: 1 1 5.5rem; }
.admin-filter-row select:disabled { opacity: 0.5; }
.admin-slug { display: block; font-family: var(--font-code); font-size: 0.8rem; }
.editor-wrap { position: relative; display: block; }
.editor-wrap .editor-backdrop,
form.stack .editor-wrap textarea, form.soc-compose .editor-wrap textarea {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.95rem; line-height: 1.5; tab-size: 4; letter-spacing: normal;
margin: 0; border: 1px solid var(--border); border-radius: 4px;
padding: 0.6rem; box-sizing: border-box; width: 100%;
white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
text-wrap-style: auto;
}
.editor-wrap .editor-backdrop {
position: absolute; inset: 0; overflow: hidden; pointer-events: none;
background: var(--bg); color: var(--text); border-color: transparent;
margin: 0;
}
form.stack .editor-wrap textarea, form.soc-compose .editor-wrap textarea {
position: relative; background: transparent; color: transparent;
caret-color: var(--text); resize: vertical; min-height: 22rem; display: block;
}
form.stack .editor-wrap textarea[hidden],
.editor-wrap .editor-backdrop[hidden] { display: none; }
form.stack .editor-wrap textarea::selection, form.soc-compose .editor-wrap textarea::selection { background: var(--accent); color: var(--bg); }
html.caret-xray form.stack .editor-wrap textarea { color: rgba(220, 0, 0, 0.7); }
.caret-xray-out { font-family: var(--font-code); font-size: 0.75rem; overflow-wrap: anywhere; margin: 0.3rem 0 0; }
.editor-visual {
font-family: var(--font-main); font-size: var(--font-size); line-height: 1.6;
margin: 0; border: 1px solid var(--border);
border-radius: 4px;
padding: 0.6rem; box-sizing: border-box; width: 100%;
min-height: 22rem; background: var(--bg); color: var(--text);
overflow-wrap: anywhere; resize: vertical; overflow: auto;
}
.editor-visual:focus, form.stack .editor-wrap textarea:focus {
outline: none; border-color: var(--accent);
}
.editor-visual > :first-child { margin-top: 0; }
.editor-visual img {
max-width: 100%; max-height: 14rem; width: auto; height: auto;
margin: 0.6rem 0; border-radius: 4px;
}
.editor-visual pre { background: var(--accent-bg); padding: 0.5rem 0.7rem; border-radius: 4px; overflow-x: auto; }
.editor-visual blockquote { border-left: 3px solid var(--border); margin: 0.8rem 0; padding-left: 0.8rem; }
.editor-visual .wikilink-missing { color: var(--muted); border-bottom: 1px dashed var(--muted); }
.editor-modes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 0.4rem 0 0; }
.editor-modes .muted { font-size: 0.88rem; }
.hl-mark { color: var(--muted); }
.hl-h { font-weight: 700; }
.hl-bold { font-weight: 700; }
.hl-em { font-style: italic; }
.hl-del { text-decoration: line-through; }
.hl-code { color: var(--accent); }
.hl-link { color: var(--accent); }
.hl-wikilink { color: var(--accent); font-weight: 600; }
.hl-quote { color: var(--muted); }
.ac-popup { background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 50; min-width: 12rem; max-width: 20rem; }
.ac-popup .ac-item { display: flex; justify-content: space-between; gap: 0.8rem; width: 100%;
border: 0; background: none; text-align: left; padding: 0.35rem 0.6rem;
color: var(--text); font: inherit; }
.ac-popup .ac-item.sel { background: var(--accent-bg); }
.ac-popup .ac-hint { color: var(--muted); font-size: 0.8em; }
.catalog-head { display: flex; gap: 1.2rem; align-items: flex-start; }
.catalog-cover { max-width: 9rem; border-radius: 4px; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.2rem; }
.catalog-card { border: 0 !important; margin: 0 !important; padding: 0 !important; }
.catalog-card img { width: 100%; border-radius: 4px; display: block; margin: 0 0 0.3rem; }
.catalog-card a { text-decoration: none; }
.catalog-grid-bare .catalog-card img,
.catalog-grid-bare .catalog-nocover {
aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 4px;
margin: 0 0 0.4rem;
}
.catalog-nocover {
display: flex; align-items: center; justify-content: center;
background: var(--accent-bg); border: 1px solid var(--border);
}
.catalog-nocover .icon { width: 2.5rem; height: 2.5rem; padding-right: 0; color: var(--muted); }
.catalog-card a { display: flex; flex-direction: column; }
.catalog-grid-bare .p-name {
display: block; font-size: 0.9rem; line-height: 1.3;
min-height: 2.6em; overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.catalog-card a:hover .p-name { text-decoration: underline; }
.shelf-widget { margin: 1.5rem 0; }
.sw-name {
display: block; font-size: 0.9rem; line-height: 1.3;
min-height: 2.6em; overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.catalog-card a:hover .sw-name { text-decoration: underline; }
.sw-line { display: block; font-size: 0.8rem; }
.shortcode-missing { color: var(--muted); border-bottom: 1px dashed var(--muted); }
.link-archived { font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.link-archived::before { content: "\21A9 "; }
.link-archived:hover { color: var(--accent); }
.e-content .link-card { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0.75rem 0 1.25rem;
border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; }
.e-content .link-card--image { grid-template-columns: 6.5rem minmax(0, 1fr); }
.e-content .link-card img { width: 6.5rem; height: 100%; min-height: 6.5rem; max-height: none; margin: 0;
object-fit: cover; border: 0; border-radius: 0; border-right: 1px solid var(--border); background: var(--accent-bg); }
.e-content .link-card > span { display: grid; gap: 0.2rem; padding: 0.65rem 0.8rem; min-width: 0; align-content: start; }
.e-content .link-card strong { line-height: 1.3; overflow-wrap: anywhere; }
.e-content .link-card small { color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden; }
.e-content .link-card .link-card-host { display: block; font-size: 0.75rem; -webkit-line-clamp: unset; text-transform: lowercase; }
.e-content .link-card:hover { border-color: var(--accent); }
.place-card {
margin: 1.5rem 0; border: 1px solid var(--border);
border-radius: 6px; overflow: hidden;
display: flex; flex-direction: column;
}
.place-card-figure { display: block; }
.place-card-map {
display: block; width: 100%; height: auto; max-height: 15rem;
object-fit: cover; margin: 0; border-radius: 0;
}
.place-card-body { padding: 0.7rem 0.9rem; }
.place-card-name { font-family: var(--font-title); font-size: 1.1rem; }
.place-card-line { margin: 0.2rem 0 0; font-size: 0.85rem; }
.place-card-caption { margin: 0.4rem 0 0; font-size: 0.9rem; }
.stream-page .home-section { margin-bottom: 2rem; }
.stream-page .home-section > h2 { margin-top: 2rem; margin-bottom: 0.8rem; }
.stream-page .home-section:first-of-type > h2 { margin-top: 1rem; }
.stream-page .home-viewall { margin-top: 0.8rem; }
.engagement-history .engagement { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.6rem; }
.engagement-panel { border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 1rem; margin-top: 1.5rem; }
.episode-list { list-style: none; padding-left: 0.4rem; columns: 2; }
.episode-list li { break-inside: avoid; }
.inline-forms input[type=number] { padding: 0.2rem; }
.lookup-row { display: block; width: 100%; text-align: left; border: 0; background: var(--accent-bg);
padding: 0.4rem 0.6rem; margin-top: 2px; border-radius: 4px; color: var(--text); font: inherit; cursor: pointer; }
@media (hover: hover) {
.lookup-row:hover { background: var(--accent); color: var(--bg); }
}
.lookup-row:focus-visible { background: var(--accent); color: var(--bg); }
.lookup-row:hover .muted, .lookup-row:focus-visible .muted,
.lookup-row:hover::after, .lookup-row:focus-visible::after { color: inherit; }
#lookup-results { margin-top: 0.3rem; }
.lookup-line { display: flex; gap: 0.5rem; align-items: stretch; }
.lookup-line input { flex: 1; min-width: 0; }
.lookup-note { font-size: 0.85rem; margin: 0.3rem 0 0; }
.lookup-more::after { content: " →"; color: var(--muted); }
.lookup-mine { background: rgba(60, 160, 60, 0.14); }
.lookup-mine::after { content: " ↗"; color: var(--muted); }
.dupe-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0; }
.dupe-override { margin: 0.6rem 0 0; }
.scorecard { display: block; width: 100%; aspect-ratio: 3 / 4; }
.scorecard text { text-anchor: middle; fill: currentColor; font-family: var(--font-title); }
.scorecard-panel { fill: var(--accent-bg); stroke: var(--border); stroke-width: 2; }
.scorecard-comp { fill: var(--muted); font-family: var(--font-main);
letter-spacing: 0.04em; text-transform: uppercase; }
.scorecard-score { fill: var(--accent); font-family: var(--font-code); }
.catalog-card-drawn .p-name {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.catalog-cover .scorecard { width: 9rem; }
.catalog-grid-bare .scorecard { margin: 0 0 0.4rem; }
.match-line { margin: 0.2rem 0 0.6rem; }
.match-detail { margin-top: 2rem; }
.match-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.5rem; }
.match-team h3 { margin-bottom: 0.2rem; }
.match-team h4 { margin: 0.8rem 0 0.2rem; font-size: 1rem; color: var(--muted); }
ol.squad { list-style: none; padding-left: 0; margin: 0; }
ol.squad li { padding: 0.12rem 0; line-height: 1.35; }
.shirt { display: inline-block; min-width: 2rem; color: var(--muted);
font-family: var(--font-code); font-size: 0.85em; }
.ev { display: inline-block; vertical-align: baseline; margin-left: 0.3rem;
white-space: nowrap; }
.capt { font-size: 0.78em; color: var(--muted); margin-left: 0.15rem; }
.ev-min { font-family: var(--font-code); font-size: 0.72em; color: var(--muted);
margin-left: 0.12rem; vertical-align: 0.08em; }
.ev-yellow::before, .ev-red::before {
content: ""; display: inline-block; width: 0.5em; height: 0.72em;
border-radius: 1px; vertical-align: -0.05em;
}
.ev-yellow::before { background: #e3b505; }
.ev-red::before { background: #c1272d; }
.ball { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%;
vertical-align: -0.02em; background: var(--text);
box-shadow: inset -0.12em -0.12em 0 rgba(255,255,255,0.35); }
.ball-og { background: #c1272d; }
.ev-try, .ev-kick { font-size: 0.85em; }
.ev-try { color: var(--accent); }
.ev-on { color: #1a7f37; font-size: 0.85em; }
.ev-off { color: var(--muted); font-size: 0.85em; }
@media (prefers-color-scheme: dark) { .ev-on { color: #7ee787; } }
.match-orphans { margin-top: 1rem; }
.lookup-sources { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
margin: 0.4rem 0 0; font-size: 0.85rem; }
.lookup-sources a { white-space: nowrap; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.json-field { display: flex; gap: 0.6rem; align-items: center; margin: 0.2rem 0; }
.json-clear { font-size: 0.8rem; padding: 0.1rem 0.6rem; border-radius: 999px; }
.json-filled .muted { color: var(--accent); }
.json-filled::after { content: " — save to keep"; color: var(--muted); font-size: 0.8rem; }
.color-field { display: flex; gap: 0.5rem; align-items: center; }
.color-field input { flex: 1; }
.color-field .swatch { width: 1.6rem; height: 1.6rem; border: 1px solid var(--border); border-radius: 4px; flex: none; }
.site-avatar { width: 3rem; height: 3rem; border-radius: 50%;
float: var(--float-avatar, left);
margin: 0.6rem var(--gap-avatar, 0.8rem) 0.3rem 0;
object-fit: cover; }
.bubbles { margin: 1.8rem 0 1.8rem; }
.bubbles-link { display: inline-flex; align-items: center; gap: 0.5rem;
text-decoration: none; color: var(--accent); }
.bubbles-link:hover .bubbles-words { text-decoration: underline; }
.bubble { position: relative; display: inline-flex; align-items: center;
justify-content: center; width: 2rem; height: 2rem; flex: none;
transition: transform 160ms ease; }
.bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubble-n { position: relative; font-size: 0.78rem; font-weight: 600;
font-variant-numeric: tabular-nums; line-height: 1; }
.bubbles-link:hover .bubble, .bubbles-link:focus-visible .bubble {
transform: translateY(-2px); }
.bubbles-words { font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
.bubble { transition: none; }
.bubbles-link:hover .bubble, .bubbles-link:focus-visible .bubble { transform: none; }
}
.facepile { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.facepile .face { position: relative; display: block; width: 2.4rem; height: 2.4rem; }
.facepile .face img { display: block; width: 100%; height: 100%; margin: 0;
border-radius: 50%; object-fit: cover; }
.facepile .face-initial { display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; border-radius: 50%; background: var(--accent-bg); color: var(--text); }
.facepile .face-badge { position: absolute; right: -2px; bottom: -2px; font-size: 0.7rem;
background: var(--bg); border-radius: 50%; padding: 0 2px; }
.interactions { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1rem; }
.comment { border-top: 1px solid var(--border); padding-top: 0.8rem; margin-top: 0.8rem; }
.comment-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.comment-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; margin: 0; }
.comment-siteicon {
width: 1.8rem; height: 1.8rem; margin: 0;
border-radius: 4px; object-fit: contain;
background: var(--accent-bg);
}
.comment-form { margin-top: 1.4rem; }
.comment-form summary { cursor: pointer; }
.comment-reply, .mod-reply {
margin-left: calc(var(--depth, 0) * 1.6rem);
border-left: 3px solid var(--accent); border-top: 0;
padding-left: 1rem; padding-top: 0.5rem;
}
.comment-owner {
background: var(--accent-bg);
border-radius: 5px;
padding: 0.8rem;
margin-top: 0.8rem;
}
.comment-reply.comment-owner { padding-left: 1rem; }
.comment-badge {
background: var(--accent); color: var(--bg);
border-radius: 999px; padding: 0.05rem 0.5rem;
font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap;
}
.comment blockquote, .guestbook-entry blockquote, .mod-row blockquote {
border-left: 3px solid var(--accent); margin: 0.4rem 0;
padding-left: 0.9rem; font-style: italic;
}
@media (max-width: 600px) {
.comment-reply, .mod-reply { margin-left: calc(var(--depth, 0) * 0.7rem); padding-left: 0.7rem; }
}
.comment-inreplyto { margin: 0 0 0.2rem; font-size: 0.85em; }
.comment-actions { margin: 0.3rem 0 0; }
.comment-actions .reply-link { font-size: 0.85em; }
.comment:target, .guestbook-entry:target { background: var(--accent-bg); }
.guestbook-entry.comment-reply { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.guestbook-who .p-name, .comment-head .p-name { font-weight: 600; text-decoration: none; }
.guestbook-who .p-name:hover, .comment-head .p-name:hover { text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-none { display: none !important; }
.inline-check { display: flex; gap: 0.5rem; align-items: baseline; margin: 0; }
.inline-check input { width: auto; }
.blogroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.blogroll-entry { border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; margin: 0 !important; }
.blogroll-entry h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.blogroll-entry p { margin: 0.3rem 0 0; }
.blogroll-host { word-break: break-all; }
.guestbook-entry { border-top: 1px solid var(--border);
padding-top: 0.9rem; padding-bottom: 0.9rem; margin-top: 0; margin-bottom: 0; }
.guestbook-who { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; margin: 0 0 0.3rem; }
.guestbook-who .p-name { font-weight: 600; }
.guestbook-intro { margin-bottom: 1.2rem; }
.mod-row { border-top: 1px solid var(--border); padding-top: 0.8rem; margin-top: 0.8rem; }
.comment { padding-bottom: 0; }
.mod-row blockquote { margin: 0.4rem 0; }
.mod-parent { margin: 0 0 0.3rem; font-size: 0.9em; }
.mod-subject { padding: 0.5rem 0.7rem; background: var(--accent-bg);
border-radius: 4px; margin-bottom: 0.8rem; }
.mod-status { border: 1px solid var(--border); border-radius: 3px;
padding: 0 0.3rem; font-size: 0.85em; }
.mod-tabs .current { font-weight: 600; }
.mod-search { display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0; }
.mod-search input[type="search"] { flex: 1 1 22rem; }
.mod-threads { width: 100%; border-collapse: collapse; }
.mod-threads th, .mod-threads td { text-align: left; padding: 0.35rem 0.5rem 0.35rem 0;
border-bottom: 1px solid var(--border); vertical-align: top; }
.image-field { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.image-field input[type=text] { flex: 1 1 14rem; }
.image-field .image-preview { max-height: 3rem; border-radius: 4px; }
.media-filter { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap;
margin: 0 0 1rem; }
.media-filter label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.media-filter label:first-child { flex: 1 1 18rem; }
.media-filter label span { font-size: 0.8rem; color: var(--muted); }
.media-filter input[type=search] { width: 100%; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.media-tile { margin: 0; }
.media-tile img { width: 100%; border-radius: 4px; display: block; margin: 0; }
.media-tile figcaption input { width: 100%; font-size: 0.75rem; padding: 0.2rem; }
.editor-form { --editor-gap: 0.4rem; }
.editor-tools { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
margin: var(--editor-gap, 0.4rem) 0 0; }
.editor-tools-top { margin: 0 0 var(--editor-gap, 0.4rem); }
.editor-tools .muted { font-size: 0.88rem; }
.editor-tools { --ctl-size: 2.55rem; }
button.icon-btn, label.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: var(--ctl-size, 2.55rem); height: var(--ctl-size, 2.55rem);
flex: 0 0 auto; padding: 0; cursor: pointer;
background: none; color: var(--accent);
border: 1px solid currentColor; border-radius: 5px;
}
button.icon-btn:hover, label.icon-btn:hover { background: var(--accent); color: var(--bg); }
button.icon-btn:focus-visible, label.icon-btn:focus-within {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.icon-btn .icon { width: 1.15rem; height: 1.15rem; padding-right: 0; top: 0; }
form.stack label.icon-btn { display: inline-flex; margin: 0; position: relative; }
label.icon-btn { position: relative; }
form.stack .checkin-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
form.stack .checkin-tools label.checkin-rating { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; }
form.stack .checkin-tools select { width: auto; }
form.stack .checkin-stale { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.editor-modes { display: contents; }
label.icon-btn input[type=file] {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.post-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
.post-thumb { display: block; padding: 0; border: 1px solid var(--border); border-radius: 4px;
background: none; cursor: pointer; line-height: 0; overflow: hidden; }
.post-thumb:hover { border-color: var(--accent); }
.post-thumb img { width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; margin: 0; }
.post-thumb:hover, .post-thumb:focus-visible { border-color: var(--accent); }
.page-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .icon-btn { --ctl-size: 2.55rem; }
.editor-save-fab { position: fixed; z-index: 50;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
right: calc(1rem + 2 * (var(--dock-size) + 0.5rem)); border: 0; }
.editor-image-fab { position: fixed; z-index: 50; right: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--dock-size) + 0.5rem);
border: 0; position: fixed; }
.editor-image-fab input[type=file] {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.editor-image-fab:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.editor-image-fab[hidden] { display: none; }
.image-fab-say:not([hidden]) { position: fixed; z-index: 50;
right: calc(1rem + var(--dock-size) + 0.6rem);
bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--dock-size) + 0.5rem);
min-height: var(--dock-size); max-width: calc(100vw - var(--dock-size) - 3rem);
display: flex; align-items: center; padding: 0.3rem 0.8rem; border-radius: 999px;
background: var(--text); color: var(--bg); font-size: 0.9rem; line-height: 1.25; }
.editor-form input.just-set { animation: cover-set 2.4s ease-out; }
@keyframes cover-set { 0%, 40% { background: var(--accent-bg); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .editor-form input.just-set { animation: none;
border-color: var(--accent); } }
html.focus-writing, html.focus-writing body { overflow: hidden; }
html.focus-writing body > *:not(.focus-close) { visibility: hidden; }
html.focus-writing .admin-dock,
html.focus-writing .admin-dock *,
html.focus-writing .editor-image-fab,
html.focus-writing .editor-image-fab *,
html.focus-writing .image-fab-say,
html.focus-writing .editor-save-fab { visibility: visible; }
html.focus-writing .image-fab-say { z-index: 90; }
html.focus-writing .editor-save-fab,
html.focus-writing .editor-image-fab { z-index: 90; }
html.focus-writing .admin-dock { z-index: 90; }
html.focus-writing .editor-form,
html.focus-writing .editor-form .field-body,
html.focus-writing .editor-form .field-body * { visibility: visible; }
html.focus-writing .editor-form {
position: fixed; inset: 0; z-index: 80; margin: 0;
display: flex; flex-direction: column; min-height: 0;
background: var(--bg);
--focus-gutter: max(1rem, calc((100vw - var(--measure)) / 2));
padding: calc(3.6rem + env(safe-area-inset-top, 0px)) var(--focus-gutter)
calc(5rem + env(safe-area-inset-bottom, 0px));
overflow: hidden;
height: 100dvh;
}
html.focus-writing .editor-form > *:not(.field-body):not(details):not(.rich-toolbar):not(.editor-tools) {
display: none;
}
html.focus-writing .editor-form > .rich-toolbar,
html.focus-writing .editor-form > .editor-tools { visibility: visible; }
html.focus-writing .editor-form > .rich-toolbar *,
html.focus-writing .editor-form > .editor-tools * { visibility: visible; }
html.focus-writing .editor-form > .rich-toolbar {
position: static; flex: 0 0 auto; margin: 0 0 var(--editor-gap, 0.4rem);
background: var(--bg);
}
@media (max-width: 600px) {
.rich-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rich-toolbar::-webkit-scrollbar { display: none; }
.rich-toolbar > * { flex: 0 0 auto; }
.rich-toolbar .tb-sep { align-self: auto; height: 1.4rem; }
}
html.focus-writing .editor-form > .field-body {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
overflow: hidden;
}
html.focus-writing .editor-form > .field-body .editor-wrap {
flex: 1 1 auto; min-height: 0; display: flex;
}
html.focus-writing .editor-form > .editor-tools { flex: 0 0 auto; }
html.focus-writing .editor-tools .js-focus-open { display: none; }
html.focus-writing .editor-form > details {
visibility: visible; margin-top: 1rem; max-width: 100%;
}
html.focus-writing .editor-form > details * { visibility: visible; }
html.focus-writing .field-body textarea,
html.focus-writing .field-body .editor-visual:not([hidden]) {
flex: 1 1 auto; min-height: 0; height: auto; resize: none;
}
.focus-close { visibility: visible; position: fixed; z-index: 90;
top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem;
display: flex; align-items: center; justify-content: center;
width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; padding: 0;
background: var(--accent); color: var(--bg); cursor: pointer; }
.focus-close .icon { width: 1.2rem; height: 1.2rem; padding-right: 0; top: 0; }
.focus-close:hover { background: var(--text); }
@media print { .editor-save-fab, .editor-image-fab, .focus-close { display: none; } }
.lint-report { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 0.6rem; }
.lint-report h2 { font-size: 1rem; }
.lint-ok { color: #2e7d32; margin: 0.2rem 0; }
.lint-warn { color: var(--danger); margin: 0.2rem 0; }
@media (prefers-color-scheme: dark) { .lint-ok { color: #7fd18a; } .lint-warn { color: #ff8a75; } }
.scope { display: block; margin-top: 0.3rem; }
fieldset { border: 1px solid var(--border); border-radius: 4px; }
.route-map { width: 100%; height: auto; border-radius: 6px; display: block; }
.map-note { margin-top: 0.3rem; }
figure.place-map { margin: 1.2rem 0; }
figure.place-map img, img.place-map { width: 100%; height: auto; border-radius: 6px;
display: block; margin: 0; }
figure.place-map figcaption { margin-top: 0.4rem; font-size: 0.9em; }
.setting-note { margin: -0.4rem 0 0.8rem; }
.setting-action { margin: 1rem 0 0.8rem; }
.setting-action .setting-note { margin: 0.5rem 0 0; }
label.toggle { display: flex; align-items: center; gap: 0.5rem; }
label.toggle input[type="checkbox"] { width: auto; }
.activity-headline { display: flex; align-items: baseline; gap: 0.45rem; }
.activity-sport { font-size: 0.9em; }
.activity-chips { list-style: none; padding: 0; margin: 1.2rem 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: 0.6rem; }
.activity-chips li { margin: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--border);
border-radius: 10px; background: var(--accent-bg);
display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
column-gap: 0.55rem; align-items: center; }
.chip-emoji { grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; }
.chip-value { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
line-height: 1.15; white-space: nowrap; }
.chip-value small { font-size: 0.72rem; font-weight: 500; margin-left: 0.15rem; color: var(--muted); }
.chip-label { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
.log-row { border-top: 1px solid var(--border); padding: 0.5rem 0; margin: 0; display: flex;
justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.log-nav .current { font-weight: 700; }
.search-result { border-top: 1px solid var(--border); padding: 0.8rem 0; margin: 0; }
.search-result h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.search-excerpt { margin: 0 0 0.3rem; }
.search-excerpt mark { background: var(--accent-bg); color: inherit; padding: 0 0.1em; }
.site-nav a { padding: 0.15rem 0; }
.site-nav .current { font-weight: 700; }
.h-feed .u-url,
.note-card-footer .u-url,
.footer-colophon a,
.footer-extra a,
.home-viewall a {
display: inline-block;
padding-block: 0.25rem;
}
.pagination { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem;
margin: 0.9rem 0; font-size: 0.95rem; }
.pagination a, .pagination strong, .pagination span { padding: 0.25rem 0.1rem; }
.pagination strong { font-weight: 700; }
.pagination [rel="next"] { margin-left: auto; }
.year-nav { color: var(--muted); }
@media (max-width: 600px) {
.year-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; padding-bottom: 0.2rem; }
.year-nav > * { flex: 0 0 auto; }
.year-nav {
background:
linear-gradient(to right, var(--bg) 30%, rgba(0, 0, 0, 0)) left center / 2.5rem 100% no-repeat local,
linear-gradient(to left, var(--bg) 30%, rgba(0, 0, 0, 0)) right center / 2.5rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, var(--border), rgba(0, 0, 0, 0)) left center / 0.9rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, var(--border), rgba(0, 0, 0, 0)) right center / 0.9rem 100% no-repeat scroll;
}
}
.archive-month { font-size: 1.05rem; color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; margin: 1.6rem 0 0.4rem;
border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.sparkline { width: 100%; height: auto; }
.splits summary { cursor: pointer; }
.md-help { position: relative; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); padding: 0.6rem 0.8rem; margin: 0.4rem 0 0;
box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
.md-help-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
gap: 0.6rem; border-bottom: 1px solid var(--border);
padding-bottom: 0.4rem; margin-bottom: 0.4rem; }
.md-help-head button { border: 0; background: none; color: var(--muted);
font-size: 1.2rem; line-height: 1; padding: 0 0.3rem; cursor: pointer; }
.md-help ul { list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2px; }
.md-help li { margin: 0; }
.md-help .md-insert { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
width: 100%; min-width: 0; text-align: left; border: 0; background: none; color: var(--text);
padding: 0.25rem 0.4rem; border-radius: 4px; font: inherit; cursor: pointer; }
.md-help .md-insert:hover, .md-help .md-insert:focus-visible { background: var(--accent-bg); }
.md-help .md-insert code { background: none; padding: 0; color: var(--accent);
min-width: 0; overflow-wrap: anywhere; }
#btn-md-help { padding: 0.25rem 0.6rem; font-size: 0.9rem; }
.apps-table { width: 100%; border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.apps-table th, .apps-table td { text-align: left; padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.apps-table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.apps-table code { font-size: 0.85rem; white-space: normal; }
.apps-table .muted { font-size: 0.85rem; }
.apps-table form.inline { margin: 0; }
tr.token-revoked td, tr.token-expired td { color: var(--muted); }
tr.token-no.expiry td { background: var(--accent-bg); }
.bed-list { list-style: none; padding: 0; margin: 0; }
.bed-list .bed-list { margin-left: 1.4rem; padding-left: 0.9rem;
border-left: 2px solid var(--border); }
.bed-item { margin: 0.6rem 0; }
.bed-name { font-family: var(--font-title); font-size: 1.1em; text-decoration: none; }
.bed-name:hover { text-decoration: underline; }
.bed-count { margin-left: 0.4rem; font-size: 0.8em; }
.bed-description { margin: 0.1rem 0 0; font-size: 0.9em; }
.bed-items { list-style: none; padding: 0; margin: 1rem 0; }
.bed-items li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.bed-items li:last-child { border-bottom: none; }
.bed-intro { margin-bottom: 1.5rem; }
.bed-unfiled { margin-top: 2.5rem; }
.bed-also { margin-top: 1rem; }
.breadcrumb { margin: 0 0 0.5rem; font-size: 0.9em; }
.maturity { border: 1px solid var(--border); border-radius: 999px;
padding: 0 0.5em; font-size: 0.75em; margin-left: 0.5rem; }
.bed-admin-row { border-top: 1px solid var(--border); padding: 0.8rem 0;
margin-left: calc(var(--depth, 0) * 1.2rem); }
.bed-admin-path { margin: 0 0 0.4rem; font-size: 0.85em; }
.bed-admin-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.bed-admin-fields label { flex: 1 1 10rem; }
.bed-picker { border: 1px solid var(--border); border-radius: 5px; padding: 0.8rem 1rem; margin: 1rem 0; }
.bed-picker legend { font-weight: 600; padding: 0 0.4rem; }
.bed-pick { margin: 0.2rem 0; }
.maturity, .garden-stages a {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.85rem; text-decoration: none;
border: 1px solid var(--border); border-radius: 999px;
padding: 0.15rem 0.7rem 0.15rem 0.5rem;
}
.maturity:hover, .garden-stages a:hover { border-color: var(--accent); }
.maturity .icon, .garden-stages .icon { width: 1.1em; height: 1.1em; padding-right: 0; }
.garden-maturity { margin: 0 0 1.5rem; }
.garden-stages { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.garden-maturity-blurb { margin: -0.5rem 0 1.5rem; }
.garden-stage-list li { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
.revisions { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: 1rem; }
.revisions h2 { font-size: var(--size-h5); text-transform: uppercase;
letter-spacing: 0.05em; margin: 0 0 0.8rem; }
.revision-trail { list-style: none; padding: 0; margin: 0;
border-left: 2px solid var(--border); }
.revision { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline;
padding: 0.35rem 0 0.35rem 1rem; position: relative; font-size: 0.95rem; }
.revision::before {
content: ""; position: absolute; left: -5px; top: 0.9em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--bg);
}
.revision time { color: var(--muted); font-variant-numeric: tabular-nums;
flex: 0 0 6rem; font-size: 0.9rem; }
.revision-auto .revision-note { color: var(--muted); }
.admin-dock { position: fixed; right: 1rem; z-index: 50;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; gap: 0.5rem; }
:root { --dock-size: 2.9rem; }
.admin-bar { position: relative; padding: 0; margin: 0;
background: none; border: 0; border-radius: 0; }
.dock-btn {
list-style: none; cursor: pointer; text-decoration: none;
display: flex; align-items: center; justify-content: center;
width: var(--dock-size); height: var(--dock-size); border-radius: 50%;
padding: 0; margin: 0; border: 0;
background: var(--accent); color: var(--bg);
}
.dock-btn:hover { background: var(--text); }
.dock-btn .icon { width: 1.3rem; height: 1.3rem; padding-right: 0; top: 0; }
.admin-bar > summary::-webkit-details-marker { display: none; }
.admin-bar[open] > summary { margin-bottom: 0; }
.admin-bar-menu {
position: absolute; right: 0; bottom: 3.4rem; min-width: 14rem;
background: var(--bg); border: 1px solid var(--accent); border-radius: 8px;
padding: 0.4rem; display: flex; flex-direction: column;
}
.admin-bar-menu a {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.6rem; border-radius: 5px;
text-decoration: none; color: var(--text); font-size: 0.95rem;
}
.admin-bar-menu a:hover { background: var(--accent-bg); color: var(--accent); }
.admin-bar-menu .icon { width: 1.1em; height: 1.1em; padding-right: 0; flex: none; }
.admin-bar-menu hr { margin: 0.3rem 0; }
.admin-bar-count {
margin-left: auto; background: var(--accent); color: var(--bg);
border-radius: 999px; padding: 0 0.45rem; font-size: 0.8rem;
}
.admin-dock .dock-refresh { display: none; }
html.in-app .admin-dock.has-refresh .dock-refresh { display: flex; }
html.in-app .admin-dock.has-refresh .admin-bar { display: none; }
@media (display-mode: standalone) {
.admin-dock.has-refresh .dock-refresh { display: flex; }
.admin-dock.has-refresh .admin-bar { display: none; }
}
.dock-refresh.is-busy .icon { animation: dock-spin 0.8s linear infinite; }
@keyframes dock-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dock-refresh.is-busy .icon { animation: none; opacity: 0.5; } }
@media print { .admin-dock { display: none; } }
.site-nav a.nav-action { color: var(--bg); padding: 0.25rem 0.7rem; border-radius: 5px; }
.site-nav a.nav-action:hover { color: var(--bg); background: var(--text); text-decoration: none; }
.release-type { white-space: nowrap; }
.seed-panel { border: 1px dashed var(--border); border-radius: 6px;
padding: 0.6rem 0.8rem; margin: 0.6rem 0 1rem; }
.seed-panel > p { margin: 0 0 0.5rem; }
.seed-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seed-row { display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--accent-bg); border: 1px solid var(--border);
border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.7rem; font-size: 0.9rem; }
.seed-row code { font-size: 0.95em; }
.seed-plant { font-size: 0.8rem; padding: 0.1rem 0.6rem; border-radius: 999px; }
.seed-done { color: var(--muted); font-size: 0.85rem; padding-left: 0.4rem; }
.seed-error { color: var(--accent); font-size: 0.85rem; }
.fence-row { max-width: 100%; }
.fence-row code { max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; opacity: 0.8; }
.fence-row select { font-size: 0.8rem; padding: 0.1rem 0.3rem; border-radius: 999px;
max-width: 9rem; }
.activity-charts { margin: 1.25rem 0; display: grid; grid-template-columns: 1fr;
gap: 0.4rem; width: 100%; }
.activity-chart { margin: 0; width: 100%; position: relative; }
.activity-chart svg { display: block; width: 100%; height: 120px;
background: var(--accent-bg); border-radius: 5px; }
.activity-chart figcaption { position: absolute; top: 0.35rem; left: 0.6rem;
font-size: 0.75rem; color: var(--muted); pointer-events: none;
letter-spacing: 0.01em; }
.activity-chart figcaption b { color: var(--text); font-weight: 600; }
.zone-charts { margin: 1.25rem 0; display: grid; gap: 1.1rem; }
.zone-chart { margin: 0; }
.zone-chart figcaption { font-size: 0.8rem; margin-bottom: 0.3rem; color: var(--muted); }
.zone-chart figcaption b { color: var(--text); font-weight: 600; }
.zone-bar { display: flex; width: 100%; height: 2.1rem; border-radius: 4px;
overflow: hidden; }
.zone-seg { display: flex; align-items: center; justify-content: center;
min-width: 0; color: #fff; font-size: 0.78rem; font-weight: 600;
font-variant-numeric: tabular-nums; }
.zone-table { width: 100%; border-collapse: collapse; margin-top: 0.4rem;
font-size: 0.85rem; }
.zone-table td { padding: 0.15rem 0.5rem 0.15rem 0; border: 0; }
.zone-table td:nth-child(3), .zone-table td:nth-child(4) { text-align: right;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone-key { display: inline-block; width: 0.6rem; height: 0.6rem;
border-radius: 2px; margin-right: 0.4rem; }
.zone-1 { background: #6b8fb8; }
.zone-2 { background: #5aa17a; }
.zone-3 { background: #c9a227; }
.zone-4 { background: #d2762e; }
.zone-5 { background: #c1272d; }
.reach-table td { vertical-align: top; padding-right: 0.8rem; }
.reach-table td:first-child { white-space: nowrap; }
.reach-table tr.reach-ok td:first-child::before { content: "\2713"; color: #1a7f37;
margin-right: 0.4rem; }
.reach-table tr.reach-bad td:first-child::before { content: "\2717"; color: #c1272d;
margin-right: 0.4rem; }
@media (prefers-color-scheme: dark) {
.reach-table tr.reach-ok td:first-child::before { color: #7ee2a8; }
.reach-table tr.reach-bad td:first-child::before { color: #ff9a92; }
}
.client-log td { vertical-align: top; }
.client-log-src { font-size: 0.78rem; word-break: break-all; }
.client-log-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.splits { margin: 1.25rem 0; padding: 0.6rem 0.9rem; background: transparent;
border: 1px solid var(--border); }
.splits summary { cursor: pointer; padding: 0.4rem 0.9rem; margin: -0.6rem -0.9rem; }
.splits[open] > summary { margin-bottom: 0.6rem; }
.effort-tables { display: grid; gap: 0.9rem 1.75rem; width: 100%;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.effort-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.effort-table caption { text-align: left; font-weight: 600; padding-bottom: 0.3rem;
color: var(--muted); font-size: 0.8rem; text-transform: uppercase;
letter-spacing: 0.05em; }
.effort-table th, .effort-table td { text-align: left; font-weight: normal;
padding: 0.15rem 0; border: 0; }
.effort-table td { text-align: right; font-variant-numeric: tabular-nums; }
.effort-table tr + tr th, .effort-table tr + tr td { border-top: 1px solid var(--border); }
.sets summary { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.sets-total {
font-size: 0.8rem; color: var(--muted); font-weight: normal;
font-variant-numeric: tabular-nums;
}
.set-block { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); margin: 1rem 0 0.2rem; font-weight: 600; }
.set-list { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.set-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem;
flex-wrap: wrap; margin: 0; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.set-list li:first-child { border-top: 0; }
.set-name { font-weight: 600; }
.set-dose { font-variant-numeric: tabular-nums; color: var(--text, inherit); text-align: right; }
.set-list--problems .set-name { min-width: 2.5rem; }
:root {
--block-work: rgba(46, 160, 67, 0.16); --block-recovery: rgba(120, 124, 126, 0.14);
--block-ease: rgba(46, 134, 193, 0.13);
--block-work-key: #2ea043; --block-recovery-key: #8a8f92; --block-ease-key: #2e86c1;
}
@media (prefers-color-scheme: dark) {
:root {
--block-work: rgba(96, 210, 118, 0.2); --block-recovery: rgba(200, 204, 206, 0.13);
--block-ease: rgba(96, 176, 236, 0.19);
--block-work-key: #60d276; --block-recovery-key: #b0b4b6; --block-ease-key: #60b0ec;
}
}
.activity-chart .block { pointer-events: none; }
.activity-chart .block-work { fill: var(--block-work); }
.activity-chart .block-recovery { fill: var(--block-recovery); }
.activity-chart .block-warmup, .activity-chart .block-cooldown { fill: var(--block-ease); }
.blocks-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.blocks-table caption { text-align: left; caption-side: bottom; padding-top: 0.4rem;
color: var(--muted); font-size: 0.8rem; }
.blocks-table th, .blocks-table td { text-align: right; font-weight: normal;
padding: 0.15rem 0.4rem; border: 0; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.blocks-table th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase;
letter-spacing: 0.05em; }
.blocks-table th:nth-child(2), .blocks-table td:nth-child(2) { text-align: left; width: 100%; }
.blocks-table tbody tr + tr td { border-top: 1px solid var(--border); }
.block-key { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px;
margin-right: 0.4rem; vertical-align: baseline; background: transparent; }
.block-row.block-work .block-key { background: var(--block-work-key); }
.block-row.block-recovery .block-key { background: var(--block-recovery-key); }
.block-row.block-warmup .block-key, .block-row.block-cooldown .block-key {
background: var(--block-ease-key); }
.yoy { margin: 1.5rem 0 2.5rem; }
.yoy h2 { margin-bottom: 0.2rem; }
.yoy-heads { display: grid; gap: 0.75rem 1.5rem; margin: 1rem 0;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.yoy-heads .label { display: block; font-size: 0.75rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em; }
.yoy-heads strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.yoy-heads .yoy-unit { font-size: 0.85rem; }
.yoy-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
margin: 0.75rem 0; font-size: 0.9rem; }
.yoy-sports { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.yoy-sports label { display: inline-flex; align-items: center; gap: 0.25rem;
color: var(--muted); }
.yoy-chart { width: 100%; height: auto; display: block; background: var(--accent-bg);
border-radius: 5px; padding: 0.25rem 0; }
.yoy-note { font-size: 0.8rem; margin-top: 0.4rem; }
.yoy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.yoy-fs { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
border: 1px solid var(--border); border-radius: 5px; background: transparent;
color: var(--muted); font: inherit; font-size: 0.7rem; font-weight: normal;
text-transform: uppercase; letter-spacing: 0.06em; line-height: 1;
padding: 0.35rem 0.6rem; white-space: nowrap; flex: none; }
button.yoy-fs:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.yoy-fs svg { width: 13px; height: 13px; display: block; }
.yoy-fs .icon-out, .yoy-fs .lbl-out { display: none; }
.yoy-fullscreen .yoy-fs .icon-in, .yoy-fullscreen .yoy-fs .lbl-in { display: none; }
.yoy-fullscreen .yoy-fs .icon-out { display: block; }
.yoy-fullscreen .yoy-fs .lbl-out { display: inline; }
.yoy-heads .yoy-projected strong { color: var(--muted); }
.yoy-fullscreen { position: fixed; inset: 0; z-index: 900; margin: 0;
background: var(--bg); overflow: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem); }
body.yoy-fs-open { overflow: hidden; }
.yoy-fullscreen .yoy-chart { max-height: 70vh; }
.lb-zoom, main img[data-lb] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 950; display: none;
align-items: center; justify-content: center;
background: rgba(10, 8, 12, 0.9); padding: 1rem; }
.lb.on { display: flex; }
body.lb-open { overflow: hidden; }
.lb figure { margin: 0; max-width: 94vw; text-align: center; }
.lb figure img { max-width: 94vw; max-height: 82vh; width: auto; height: auto;
border-radius: 4px; cursor: default; }
.lb figcaption { color: #d8d4da; margin-top: 0.6rem; font-size: 0.92rem;
max-width: 60ch; margin-left: auto; margin-right: auto; }
.lb button { position: absolute; border: 0; border-radius: 6px; cursor: pointer;
background: rgba(255, 255, 255, 0.09); color: #eee;
font-size: 1.5rem; line-height: 1; padding: 0.45rem 0.7rem; }
.lb button:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.lb .lb-x { top: 0.9rem; right: 0.9rem; }
.lb .lb-prev { left: 0.7rem; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 0.7rem; top: 50%; transform: translateY(-50%); }
:root { --gallery-ratio: 16 / 9; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.5rem 0; }
.gallery-quad { grid-template-columns: repeat(2, 1fr); }
.gallery-pair { grid-template-columns: repeat(2, 1fr); }
.gallery-trio { grid-template-columns: repeat(3, 1fr); }
.gallery a { display: block; margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: var(--gallery-ratio); object-fit: cover;
border-radius: 6px; margin: 0 !important; display: block; cursor: zoom-in; }
.gallery [hidden] { display: none !important; }
.gallery-nav { display: flex; justify-content: center; align-items: center;
gap: 0.8rem; margin: 0.6rem 0 1.5rem; }
.gallery-nav button { font-size: 1rem; line-height: 1; padding: 0.25rem 0.7rem; }
.gallery-nav .g-count { font-variant-numeric: tabular-nums; }
.danger-zone { border-color: rgba(192, 57, 43, 0.45); }
.danger-zone h2 { margin-top: 0.4rem; }
.reactions-embed button, .reactions-embed a {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.35rem; text-align: center;
}
.reactions-embed button > span:empty { display: none; }
.checklist { border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.9rem 0.8rem;
margin: 1rem 0 0.5rem; }
.checklist legend { padding: 0 0.3rem; font-size: 0.9rem; }
.checklist .toggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; }
.checklist { columns: 3 12rem; column-gap: 1.5rem; }
.checklist legend { column-span: all; }
@media (max-width: 560px) { .checklist { columns: 1; } }
.md-copy { position: relative; display: block; }
.md-copy .md-ready { cursor: copy; }
.md-copy.is-copied::after {
content: "Copied"; position: absolute; inset-inline-end: 0.35rem; top: 0.4rem;
background: var(--accent); color: var(--bg); border-radius: 4px;
padding: 0.1rem 0.4rem; font-size: 0.72rem; pointer-events: none;
}
.hill-lists, .hill-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.hill-lists th, .hill-lists td,
.hill-table th, .hill-table td { text-align: left; padding: 0.35rem 0.6rem 0.35rem 0;
border-bottom: 1px solid var(--border); font-weight: normal; vertical-align: baseline; }
.hill-lists thead th, .hill-table thead th { font-family: var(--font-title); font-size: 0.9rem; }
.hill-lists .hill-bar { width: 40%; }
.hill-lists .hill-bar .progress { margin: 0; }
.hill-count { white-space: nowrap; }
:root { --hill-try: #8a5a00; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --hill-try: #d99b1c; }
}
:root[data-theme="dark"] { --hill-try: #d99b1c; }
tbody tr.hill-summit { background: color-mix(in srgb, var(--accent) 8%, transparent); }
tbody tr.hill-attempt { background: color-mix(in srgb, var(--hill-try) 6%, transparent); }
.hill-tick { width: 2rem; text-align: center; }
.hill-yes { color: var(--accent); font-weight: bold; }
.hill-try { color: var(--hill-try); font-weight: bold; }
.hill-tried { white-space: nowrap; }
.hill-alt { font-style: italic; font-size: 0.9em; margin-inline-start: 0.4rem; }
.hills-summary { font-size: 1.1em; }
.hill-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.5rem 0 1rem; }
.hill-blurb { margin: 0 0 0.8rem; }
.hill-map { display: block; width: 100%; height: auto; max-width: 40rem;
border: 1px solid var(--border); border-radius: 6px; margin: 1rem 0; }
.hill-geo { margin: 0 0 0.5rem; font-size: 0.9em; }
.hill-lists-inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.hill-visits, .hill-recent { list-style: none; padding: 0; }
.hill-visits li, .hill-recent li { padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
.hill-credit { font-size: 0.85rem; margin-top: 2rem; }
.hill-filter, .hill-bulk { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end;
margin: 0.8rem 0; }
.hill-filter label, .hill-bulk label { display: flex; flex-direction: column; gap: 0.2rem;
font-size: 0.9rem; }
@media (max-width: 640px) {
.hill-lists .hill-bar { display: none; }
.hill-table td:last-child, .hill-table th:last-child { display: none; }
}
.hill-lists-fold > summary { cursor: pointer; }
.hill-lists-fold > summary > h2 { display: inline-block; margin: 1.2rem 0 0.4rem; }
.hill-lists-fold > summary::-webkit-details-marker { color: var(--muted); }
.hill-picker { border: 1px solid var(--border); border-radius: 6px;
padding: 0.5rem 0.9rem 0.8rem; margin: 1rem 0; }
.hill-picker legend { padding: 0 0.3rem; font-size: 0.9rem; }
.hill-picker legend .icon { vertical-align: -0.15em; margin-inline-end: 0.3rem; }
.hill-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem;
padding: 0.35rem 0; border-top: 1px solid var(--border); }
.hill-row:first-of-type { border-top: 0; }
.hill-row-name { font-family: var(--font-title); }
.hill-row-pick { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-inline-start: auto; }
.hill-visit .icon, .hill-mentions .icon { vertical-align: -0.15em; margin-inline-end: 0.3rem; }
.hill-mentions { list-style: none; padding: 0; }
.hill-mentions li { padding: 0.25rem 0; }
.hill-notes { margin: 0; padding-inline-start: 1.1rem; }
.hill-notes li { font-size: 0.9em; }
.lb.lb-wide figure img { max-height: 92vh; max-width: 96vw; border: 0; }
.hill-fold > summary { cursor: pointer; margin: 1rem 0 0.4rem; }
.hill-fold > summary::-webkit-details-marker { color: var(--muted); }
.hill-pages { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: baseline; }
.hill-pageno { white-space: nowrap; }
.hill-prefs input[type="text"] { width: 100%; }
.hill-prefs .hill-pos { width: 4.5rem; }
.hill-prefs .hill-blurb-field { width: 100%; min-width: 16rem; resize: vertical; }
.hill-prefs td { vertical-align: top; }
tbody tr.hill-off { opacity: 0.55; }
.hill-prefs-reset { margin-top: 1.5rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
margin: 1rem 0; }
.footer-social a { display: inline-flex; color: var(--accent); text-decoration: none; }
.footer-social .icon { width: 1.6rem; height: 1.6rem; }
.footer-social a:hover .icon, .footer-social a:focus .icon { opacity: 0.7; }
.habits { margin: 1.5rem 0; }
.habit { margin: 0 0 1.4rem; text-align: left; }
.habit figcaption { text-align: left; }
.habit figcaption { margin: 0 0 .35rem; font-size: .95rem; }
.habit figcaption .muted { font-size: .85rem; }
.habit-scroll { overflow-x: auto; direction: rtl; -webkit-overflow-scrolling: touch; }
.habit-svg { direction: ltr; display: block; max-width: none; height: auto; margin-left: 0; margin-right: auto; }
.habit-svg .hg-lab { font: 9px var(--font-main); fill: var(--muted); }
.habit-svg rect.l0 { fill: color-mix(in srgb, var(--text) 9%, var(--bg)); }
.habit-svg rect.l1 { fill: color-mix(in srgb, var(--habit) 30%, var(--bg)); }
.habit-svg rect.l2 { fill: color-mix(in srgb, var(--habit) 55%, var(--bg)); }
.habit-svg rect.l3 { fill: color-mix(in srgb, var(--habit) 80%, var(--bg)); }
.habit-svg rect.l4 { fill: var(--habit); }
.habit-svg line.hatch { stroke: var(--habit); stroke-width: 1.6; }
.habit-svg rect.today { stroke: var(--text); stroke-width: 1; }
.habit-svg a:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.habit-today { list-style: none; padding: 0; margin: 0 0 1rem; }
.habit-today > li { margin: .3rem 0; }
.habit-dot { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .45em;
vertical-align: -.05em; border: 1.5px solid var(--habit); }
.habit-today > li.done .habit-dot { background: var(--habit); }
.habit-evidence { margin: .15rem 0 .4rem 1.3em; padding: 0; list-style: none; font-size: .92rem; }
.habit-evidence form { display: inline; }
.habit-today-dash { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.habit-today-dash a { color: inherit; text-decoration: none; }
.habit-today-dash a:hover { text-decoration: underline; }
.habit-form-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.habit-quick { margin: .4rem 0 .8rem; gap: .6rem; align-items: center; flex-wrap: wrap; }
.shelf-rows > li { margin: .2rem 0 .9rem; }
.shelf-actions { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .3rem; }
.shelf-actions form { margin: 0; }
.shelf-actions label { font-size: .9rem; }
.habit-quick { display: flex; }
.habit-quick label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.habit-quick input[type=number] { margin: 0; padding: .3rem .4rem; }
.habit-years { margin: 0 0 .6rem; font-size: .95rem; }
.habit figcaption a { color: inherit; }
.habit-page .habits { margin-top: 1rem; }
.soc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem;
border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.soc-tabs a, .soc-sub a, .soc-nets a { text-decoration: none; padding: 0.2rem 0.1rem; }
.soc-tabs a[aria-current], .soc-sub a[aria-current], .soc-nets a[aria-current] { font-weight: 700;
border-bottom: 2px solid var(--accent); }
.soc-nets { margin-left: auto; display: flex; gap: 0.8rem; font-size: 0.9rem; }
.soc-sub { display: flex; gap: 1rem; }
.soc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.soc-post { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0;
background: var(--bg); min-width: 0; }
.soc-post.is-focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.soc-post.is-ancestor { opacity: 0.85; }
.soc-depth { margin-left: calc(min(var(--depth, 1), 6) * 0.9rem - 0.9rem); }
.soc-boosted { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--muted); }
.soc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 0.6rem; align-items: center; }
.soc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--accent-bg); }
.soc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-who a { text-decoration: none; color: inherit; }
.soc-handle { color: var(--muted); font-size: 0.85rem; }
.soc-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.soc-meta a { color: inherit; }
.soc-net { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px;
padding: 0.05rem 0.3rem; border: 1px solid var(--border); }
.soc-net--mastodon { color: #6364ff; border-color: #6364ff66; }
.soc-net--bluesky { color: #1185fe; border-color: #1185fe66; }
.soc-body { overflow-wrap: anywhere; }
.soc-body p { margin: 0.5rem 0; }
.soc-cw summary { cursor: pointer; font-weight: 600; margin-top: 0.4rem; }
.soc-media { display: grid; gap: 4px; margin: 0.5rem 0; border-radius: 8px; overflow: hidden; }
.soc-media--2, .soc-media--4 { grid-template-columns: 1fr 1fr; }
.soc-media--3 { grid-template-columns: 1fr 1fr 1fr; }
.soc-media a { position: relative; display: block; }
.soc-media img { width: 100%; max-height: 420px; object-fit: cover; display: block; margin: 0; }
.soc-media--2 img, .soc-media--3 img, .soc-media--4 img { aspect-ratio: 1; }
.soc-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem;
color: #fff; text-shadow: 0 1px 4px #000; }
.soc-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.6rem; border: 1px solid var(--border);
border-radius: 8px; overflow: hidden; margin: 0.5rem 0; text-decoration: none; color: inherit; }
.soc-card img { width: 5rem; height: 100%; min-height: 4.5rem; object-fit: cover; margin: 0; }
.soc-card span { padding: 0.45rem 0.5rem 0.45rem 0; display: grid; gap: 0.15rem; min-width: 0; }
.soc-card small { color: var(--muted); }
.soc-card-host { font-size: 0.75rem; }
.soc-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.soc-act { margin: 0; display: inline; }
.soc-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 1px solid transparent;
border-radius: 6px; padding: 0.2rem 0.5rem; font: inherit; font-size: 0.9rem; color: var(--muted);
cursor: pointer; text-decoration: none; }
.soc-btn:hover { border-color: var(--border); color: var(--text); }
.soc-btn.is-on { color: var(--accent); font-weight: 700; }
.soc-like.is-on { color: #e0245e; }
.soc-boost.is-on { color: #17a34a; }
.soc-n { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.soc-reply summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
.soc-reply textarea { width: 100%; box-sizing: border-box; margin-top: 0.4rem; }
.soc-reply-go { display: flex; justify-content: space-between; align-items: center; margin: 0.3rem 0 0; }
.soc-notes { gap: 0.6rem; }
.soc-note { padding: 0.5rem 0 0.6rem; border-top: 1px solid var(--border); margin: 0; }
.soc-note.is-new { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.6rem; }
.soc-note-line { margin: 0 0 0.35rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; align-items: baseline; }
.soc-note-line a { text-decoration: none; color: inherit; }
.soc-note-line .soc-meta { margin-left: auto; }
.soc-note-icon { width: 1.3rem; text-align: center; }
.soc-note--like .soc-note-icon { color: #e0245e; }
.soc-note--boost .soc-note-icon { color: #17a34a; }
.soc-quoted { margin: 0 0 0 1.7rem; padding: 0 0 0 0.7rem; border-left: 3px solid var(--border);
color: var(--muted); font-size: 0.9rem; }
.soc-quoted p { margin: 0.2rem 0; }
.soc-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: start;
padding: 0.6rem 0; border-top: 1px solid var(--border); margin: 0; }
.soc-person-main { min-width: 0; display: grid; gap: 0.1rem; }
.soc-person-main a { text-decoration: none; color: inherit; }
.soc-person-main small { color: var(--muted); overflow-wrap: anywhere; }
.soc-person-acts { display: flex; align-items: center; gap: 0.2rem; }
.soc-person-acts .soc-follow { border-color: var(--border); color: var(--text); }
.soc-tag { font-size: 0.7rem; background: var(--accent-bg); border-radius: 4px; padding: 0.05rem 0.35rem; color: var(--muted); }
.soc-more { position: relative; }
.soc-more summary { list-style: none; cursor: pointer; padding: 0.2rem 0.5rem; color: var(--muted); }
.soc-more summary::-webkit-details-marker { display: none; }
.soc-more[open] > form { display: block; }
.soc-more[open] { display: grid; }
.soc-search { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.soc-search input { flex: 1; min-width: 0; }
.soc-more-link { text-align: center; }
.soc-profile .soc-people { margin-bottom: 0.3rem; }
@media (max-width: 560px) {
.soc-head { grid-template-columns: auto minmax(0, 1fr); }
.soc-meta { grid-column: 2; }
.soc-person { grid-template-columns: auto minmax(0, 1fr); }
.soc-person-acts { grid-column: 2; }
.soc-nets { margin-left: 0; width: 100%; }
}
.soc-live { position: sticky; top: 0.5rem; z-index: 5; }
.soc-post footer.soc-actions { max-width: none; width: auto; margin: 0.35rem 0 0; padding: 0;
border: 0; text-align: left; font-size: inherit; }
.soc-post details.soc-reply, .soc-post details.soc-cw, .soc-more { background: none; border: 0; padding: 0; margin: 0; }
.soc-post details > summary, .soc-more > summary { margin: 0; padding: 0.15rem 0; font-weight: 600; }
.soc-post details.soc-reply[open] { margin-top: 0.3rem; }
.soc-post details.soc-cw { margin: 0.3rem 0; }
.soc-post details.soc-cw > summary { padding: 0.35rem 0.6rem; border: 1px dashed var(--border); border-radius: 6px; }
.soc-note > .soc-post { margin-left: 1.7rem; }
.soc-post header.soc-head { margin: 0; padding: 0; border: 0; width: auto; max-width: none; }
.soc-person-main { display: block; }
.soc-person-main small { display: block; margin-top: 0.15rem; }
.soc-tag { display: inline-block; }
.soc-avatar, .soc-card img { margin: 0; display: block; }
.soc-keep { font-size: 0.85rem; display: inline-flex; gap: 0.3rem; align-items: center; margin-right: auto; }
.soc-reply-go { gap: 0.6rem; }
.reply-context { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
.soc-btn:hover, .soc-btn:focus-visible { background: var(--accent-bg); border-color: var(--border); color: var(--text); }
.soc-btn.is-on:hover { color: var(--accent); }
.soc-like.is-on:hover { color: #e0245e; }
.soc-boost.is-on:hover { color: #17a34a; }
.soc-media img[data-lb] { cursor: zoom-in; }
.response-context { margin: 0 0 1rem; }
.response-verb { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.9rem; }
.response-context .h-cite { border-left: 3px solid var(--border); padding: 0.1rem 0 0.1rem 0.9rem; }
.response-who { margin: 0 0 0.3rem; font-size: 0.9rem; }
.response-who .p-author { font-weight: 600; text-decoration: none; }
.response-context blockquote { margin: 0.2rem 0; padding: 0; border: 0; font-style: normal; }
.response-link { margin: 0.35rem 0 0; font-size: 0.92rem; }
.soc-card, .soc-card--image { display: block; }
.soc-card > span { display: grid; gap: 0.2rem; padding: 0.65rem 0.8rem; min-width: 0; }
.soc-card img, .soc-card--image img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1.91 / 1;
max-height: 300px; object-fit: cover; display: block; margin: 0; border-radius: 0;
border-bottom: 1px solid var(--border); background: var(--accent-bg); }
.soc-card strong { line-height: 1.3; overflow-wrap: anywhere; }
.soc-card small { line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.soc-card .soc-card-host { display: block; -webkit-line-clamp: unset; text-transform: lowercase; }
.soc-card:hover { border-color: var(--accent); }
.soc-quiet { margin: -0.4rem 0 0.8rem; font-size: 0.85rem; color: var(--muted); text-align: right; }
.soc-convo { display: inline-block; margin: 0.2rem 0 0; font-size: 0.85rem; }
.soc-post footer.soc-actions + .soc-convo { margin-left: 0.5rem; }
.soc-h2 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
.soc-taglist { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.soc-tagchip { border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.6rem; text-decoration: none; font-size: 0.9rem; }
.soc-tagchip:hover { border-color: var(--accent); }
.soc-tagfollow { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.soc-tagfollow .soc-follow { border-color: var(--border); color: var(--text); }
.soc-replying { margin: 0.35rem 0 0; font-size: 0.82rem; }
.soc-replying a { color: var(--muted); text-decoration: none; }
.soc-replying a:hover { color: var(--accent); text-decoration: underline; }
.soc-body[data-thread] { cursor: pointer; }
.soc-post.is-focus .soc-body[data-thread] { cursor: auto; }
.soc-share { margin-left: auto; font-size: 0.82rem; }
.soc-post > details.soc-reply:not([open]) { display: inline-block; margin-right: 1.2rem; }
.soc-media .soc-broken, .soc-broken { display: flex; align-items: center; justify-content: center; min-height: 3.5rem;
border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 0.85rem; text-decoration: none;
background: var(--accent-bg); padding: 0.6rem; }
.soc-media img { max-height: 420px; }
.soc-extras { margin: 0.35rem 0 0; font-size: 0.85rem; }
.soc-extras summary { color: var(--muted); cursor: pointer; }
.soc-extras label { display: grid; gap: 0.2rem; margin-top: 0.4rem; }
.soc-extras textarea, .soc-extras input[type=text] { width: 100%; box-sizing: border-box; }
.soc-convo-row { border-top: 1px solid var(--border); margin: 0; }
.soc-convo-row > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center;
padding: 0.6rem 0; text-decoration: none; color: inherit; }
.soc-convo-row.is-new { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.6rem; }
.soc-convo-main { min-width: 0; display: grid; }
.soc-convo-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-messages { gap: 0.5rem; margin-bottom: 1rem; }
.soc-msg { max-width: 80%; margin: 0; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--accent-bg); border: 1px solid var(--border); }
.soc-msg.is-mine { margin-left: auto; background: var(--bg); border-color: var(--accent); }
.soc-msg-body p { margin: 0 0 0.2rem; }
.soc-reply-form textarea { width: 100%; box-sizing: border-box; }
.soc-private { font-size: 0.85rem; }
.soc-net { border: 0; padding: 0; display: inline-flex; align-items: center; vertical-align: middle; }
.soc-net svg, .soc-switch-icon svg { width: 1.2rem; height: 1.2rem; }
.soc-net--mastodon, .soc-switch-icon.soc-net--mastodon { color: #6364ff; }
.soc-net--bluesky, .soc-switch-icon.soc-net--bluesky { color: #1185fe; }
.soc-switch-icon { display: inline-flex; vertical-align: -0.15em; }
.soc-more-btn { background: none; border: 0; padding: 0; margin: 0.1rem 0 0.3rem; color: var(--accent);
font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.soc-more-btn:hover { background: none; color: var(--accent); text-decoration: underline; }
.soc-sort { margin-left: auto; display: flex; gap: 0.8rem; font-size: 0.9rem; }
.soc-azbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.soc-azbar .soc-filter { flex: 1; min-width: 12rem; }
.soc-azbar .muted { font-size: 0.85rem; }
.soc-people > .soc-person[hidden], .soc-short[hidden], .soc-full[hidden] { display: none; }
.soc-media, .soc-media--2, .soc-media--3, .soc-media--4 { display: flex; flex-wrap: wrap; gap: 6px;
grid-template-columns: none; border-radius: 0; overflow: visible; }
.soc-media a { width: 7.5rem; height: 7.5rem; flex: none; border-radius: 8px; overflow: hidden; box-sizing: border-box; }
.soc-media a:not(.soc-broken) { border: var(--image-border, 0) solid var(--image-border-colour, var(--border));
background: var(--image-border-colour, var(--border)); }
.soc-media img, .soc-media--2 img, .soc-media--3 img, .soc-media--4 img { width: 100%; height: 100%;
max-height: none; aspect-ratio: 1; object-fit: cover; border: 0; border-radius: 0; margin: 0; }
.soc-media .soc-broken { width: auto; height: auto; min-height: 3.5rem; }
.soc-card, .soc-card--image { display: grid; grid-template-columns: minmax(0, 1fr); }
.soc-card--image { grid-template-columns: 6.5rem minmax(0, 1fr); }
.soc-card img, .soc-card--image img { width: 6.5rem; height: 100%; min-height: 6.5rem; max-height: none;
aspect-ratio: auto; object-fit: cover; border: 0; border-right: 1px solid var(--border); }
@media (max-width: 560px) { .soc-media a { width: 6rem; height: 6rem; } }
.soc-av { flex: 1 1 100%; max-width: 34rem; border-radius: 8px; overflow: hidden; background: #000; }
.soc-av video { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #000;
margin: 0; border: 0; border-radius: 0; }
.soc-av--noposter video { aspect-ratio: 16 / 9; }
.soc-av--audio { background: none; overflow: visible; }
.soc-av audio { display: block; width: 100%; margin: 0; }
.soc-meta .soc-net + .soc-net { margin-left: 0.2rem; }
.soc-also { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0.3rem 0 0;
padding-top: 0.35rem; border-top: 1px dashed var(--border); font-size: 0.85rem; color: var(--muted); }
.soc-also a { color: inherit; }
.soc-also-acts { display: inline-flex; gap: 0.2rem; margin-left: auto; }
.soc-net--microblog, .soc-switch-icon.soc-net--microblog { color: #f68b1f; }
.soc-star { display: inline; }
.soc-fav { padding: 0 0.3rem; font-size: 1rem; line-height: 1; color: var(--border); }
.soc-fav.is-on, .soc-fav.is-on:hover { color: #d4a017; font-weight: 400; }
.soc-meta .soc-fav { margin-right: 0.15rem; }
.soc-net--web, .soc-switch-icon.soc-net--web { color: #0f766e; }
.soc-web-title { margin-bottom: 0.3rem; }
.soc-feeds-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0 0 0.6rem; }
.soc-feeds-add input[type=url] { flex: 1 1 18rem; }
.soc-feeds-tools { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; font-size: 0.9rem; margin: 0 0 1rem; }
.soc-feeds-tools form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.soc-feed-health { display: block; font-size: 0.8rem; color: var(--muted); }
.soc-feed-health.is-bad { color: var(--danger, #b91c1c); }
.soc-feeds-status { font-size: 0.85rem; margin: 0 0 0.8rem; }
.soc-post.is-unread { border-left: 3px solid #0f766e; }
.soc-post.is-unread .soc-who::before { content: "●"; color: #0f766e; font-size: 0.6rem; margin-right: 0.35rem; vertical-align: middle; }
.soc-unread-n { display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 0.6rem; background: #0f766e;
color: #fff; font-size: 0.7rem; line-height: 1.2rem; text-align: center; font-weight: 700; }
.soc-webbar { display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.soc-webbar .soc-act { display: inline-flex; } .soc-webbar .soc-btn { padding: 0 0.3rem; font-size: 0.85rem; }
.soc-tabs a, .soc-sub a, .soc-nets a, .soc-sort a { white-space: nowrap; }
.soc-nets a { display: inline-flex; align-items: center; gap: 0.25rem; }
.soc-nets { flex-wrap: wrap; row-gap: 0.3rem; }
.soc-sub { flex-wrap: wrap; row-gap: 0.4rem; align-items: baseline; }
@media (max-width: 640px) {
.soc-tabs .soc-nets { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.soc-sub { gap: 0.4rem 0.9rem; }
.soc-sort { margin-left: 0; width: 100%; justify-content: flex-start; }
}
.soc-webnote { font-size: 0.85rem; margin: 0.3rem 0 0; }
.soc-views { display: contents; }
.soc-newtab { white-space: nowrap; }
.soc-backbtn { font-size: 1.6rem; line-height: 1; text-decoration: none; padding: 0 0.4rem 0 0; }
.soc-refresh { background: none; border: 0; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--accent);
cursor: pointer; padding: 0.1rem 0.3rem; margin-left: auto; }
.soc-me { font-size: 0.9rem; margin: 0 0 0.8rem; }
.soc-me a { text-decoration: none; }
.soc-compose { display: grid; gap: 0.8rem; }
form.soc-compose .editor-wrap textarea { min-height: 12rem; }
.soc-md-note { font-size: 0.8rem; font-weight: 400; }
.soc-compose label { display: grid; gap: 0.3rem; }
.soc-compose .soc-keep { display: flex; gap: 0.4rem; align-items: center; }
.soc-kinds { display: flex; gap: 1rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.soc-kinds label { display: inline-flex; align-items: center; gap: 0.3rem; }
.soc-kinds legend { padding: 0; margin-bottom: 0.3rem; }
.app-back { position: sticky; top: 0; z-index: 20; background: var(--bg, #fafafa); border-bottom: 1px solid var(--border);
padding: calc(env(safe-area-inset-top, 0px) + 0.4rem) 1rem 0.4rem; }
.app-back a { text-decoration: none; font-weight: 700; }
.soc-offline { position: fixed; left: 0; right: 0; top: 0; z-index: 40; margin: 0; padding: 0.5rem 1rem;
padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem); background: #7c2d12; color: #fff; text-align: center; font-size: 0.9rem; }
.soc-dock { display: none; }
body.is-app-social main { padding-top: env(safe-area-inset-top, 0px); }
body.is-app-social .soc-tabs { background: var(--bg, #fafafa);
padding-top: calc(env(safe-area-inset-top, 0px) + 0.4rem); margin-top: calc(-1 * env(safe-area-inset-top, 0px)); }
body.is-app-social::before { content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 25;
height: env(safe-area-inset-top, 0px); background: var(--bg, #fafafa); pointer-events: none; }
body.is-app-social .soc-live { top: calc(env(safe-area-inset-top, 0px) + 0.5rem); }
@media (min-width: 701px) {
body.is-app-social .soc-tabs { position: sticky; top: 0; z-index: 30; padding-bottom: 0.4rem; }
}
@media (max-width: 700px) {
body.is-app-social .soc-views { display: none; }
body.is-app-social .soc-tabs .soc-nets { width: auto; flex: 1 1 auto; }
body.is-app-social::after { content: ''; display: block; flex: none;
height: calc(5rem + env(safe-area-inset-bottom, 0px)); }
body.is-app-social .soc-dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
background: var(--bg, #fafafa); border-top: 1px solid var(--border);
padding: 0 0.2rem; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.soc-dock a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; position: relative;
text-decoration: none; font-size: 0.7rem; color: var(--muted);
padding: 0.5rem 0 calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
-webkit-tap-highlight-color: transparent; transition: color 0.1s; }
.soc-dock a[aria-current] { color: var(--accent); font-weight: 700; }
.soc-dock a:active .soc-dock-ic, .soc-dock a.is-loading .soc-dock-ic { transform: scale(0.86); }
.soc-dock a:active, .soc-dock a.is-loading { color: var(--accent); }
.soc-dock-ic { transition: transform 0.08s ease-out; }
.soc-dock a.is-loading .soc-dock-ic { animation: soc-dock-wait 0.9s ease-in-out 0.15s infinite; }
.soc-dock-ic { font-size: 1.25rem; line-height: 1.2; }
.soc-dock-n { position: absolute; top: 0; left: 55%; min-width: 1.1rem; padding: 0 0.25rem; border-radius: 0.6rem;
background: #e0245e; color: #fff; font-size: 0.65rem; line-height: 1.1rem; font-weight: 700; }
}
@media (prefers-color-scheme: dark) {
.app-back, body.is-app-social .soc-tabs, body.is-app-social .soc-dock,
body.is-app-social::before { background: var(--bg, #1e1e1e); }
}
body.is-app-social .soc-refresh { order: 99; }
.soc-btn .icon, .soc-fav .icon, .soc-boosted .icon, .soc-quiet .icon, .soc-sub .icon, .soc-webbar .icon,
.soc-backbtn .icon, .soc-refresh .icon, .soc-newtab .icon, .soc-note-icon .icon, .muted .icon {
width: 1.05em; height: 1.05em; padding-right: 0; top: 0; vertical-align: -0.15em; }
.soc-dock-ic .icon { width: 1.45rem; height: 1.45rem; padding-right: 0; top: 0; }
.soc-backbtn .icon, .soc-refresh .icon { width: 1.3rem; height: 1.3rem; }
.soc-note-icon .icon { width: 1.15rem; height: 1.15rem; }
.soc-fav .icon { width: 1.1rem; height: 1.1rem; }
.soc-pics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.soc-pics:empty { display: none; }
.soc-pics li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.6rem; align-items: center; }
.soc-pics img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.soc-pics span { display: grid; gap: 0.2rem; min-width: 0; }
.soc-pics input[type=text] { width: 100%; min-width: 0; }
.soc-pics small { font-size: 0.75rem; }
.soc-alt-lines.is-enhanced { display: none; }
.soc-menu-btn { background: none; border: 0; padding: 0.1rem 0.25rem; margin-left: 0.2rem; color: var(--muted); cursor: pointer;
line-height: 1; font: inherit; }
.soc-menu-btn .icon { width: 1.1em; height: 1.1em; padding-right: 0; top: 0; vertical-align: -0.15em; }
.soc-menu-btn:hover, .soc-menu-btn:focus-visible { color: var(--accent); }
.soc-sheet { border: 0; padding: 0.5rem; margin: auto auto 0; width: min(28rem, 100%); max-width: 100%; box-sizing: border-box;
background: transparent; color: var(--text); }
.soc-sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
.soc-sheet ul { list-style: none; margin: 0 0 0.5rem; padding: 0.25rem 0; background: var(--bg, #fafafa); border-radius: 12px;
border: 1px solid var(--border); }
.soc-sheet li + li { border-top: 1px solid var(--border); }
.soc-sheet button { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.8rem 1rem; background: none; border: 0;
font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.soc-sheet button:hover, .soc-sheet button:focus-visible { color: var(--accent); }
.soc-sheet button .icon { width: 1.2rem; height: 1.2rem; flex: none; padding-right: 0; top: 0; }
.soc-sheet .soc-sheet-cancel { justify-content: center; font-weight: 700; background: var(--bg, #fafafa); border-radius: 12px;
border: 1px solid var(--border); margin-bottom: env(safe-area-inset-bottom, 0px); }
@media (prefers-color-scheme: dark) { .soc-sheet ul, .soc-sheet .soc-sheet-cancel { background: var(--bg, #1e1e1e); } }
.soc-post.is-pressed { background: var(--accent-bg); transition: background 0.15s; }
@keyframes soc-dock-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.soc-navbar { position: fixed; z-index: 40; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; width: 30%;
background: var(--accent); animation: soc-nav-bar 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes soc-nav-bar { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
.soc-dock a.is-loading .soc-dock-ic, .soc-navbar { animation: none; }
.soc-navbar { left: 0; width: 100%; opacity: 0.6; }
}
.soc-tabs a, .soc-nets a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.is-app-social .soc-post { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.is-app-social .soc-post textarea, body.is-app-social .soc-post input { -webkit-user-select: text; user-select: text; }
@media (max-width: 700px) {
body.is-app-social .outbox-status { bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); }
}
.soc-compose label > .soc-for:not([hidden]) { display: contents; }
.soc-toggle.is-on { font-weight: 700; text-decoration: none; color: var(--accent); }
.soc-body .soc-quoted { margin: 0.6rem 0; padding: 0.1rem 0 0.1rem 0.9rem; border-left: 3px solid var(--border); color: var(--muted); }
.soc-body .soc-quoted p { margin: 0.3rem 0; }
.soc-body .soc-listed { margin: 0.5rem 0; padding-left: 1.4rem; }
.soc-body .soc-listed li { margin: 0.15rem 0; }
@media (min-width: 701px) {
.soc-tabs { flex-wrap: nowrap; }
.soc-tabs .soc-nets { flex-wrap: nowrap; gap: 0.7rem; }
.soc-nets a:not([aria-current]) .soc-net-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.soc-compose .editor-visual { min-height: 12rem; }
.soc-alerts { text-align: left; }
.soc-alerts .soc-btn[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.soc-ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 0.4rem); z-index: 50; width: 2.3rem; height: 2.3rem;
border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, 0);
background: var(--bg); border: 1px solid var(--border); color: var(--muted); pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: color 0.15s; }
.soc-ptr .icon { width: 1.2rem; height: 1.2rem; padding-right: 0; top: 0; }
.soc-ptr.is-ready { color: var(--accent); }
.soc-ptr.is-going .icon { animation: soc-spin 0.8s linear infinite; }
@keyframes soc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .soc-ptr.is-going .icon { animation: none; } }
.stock-crumb { margin: 0 0 0.3rem; font-size: 0.9rem; }
.stock-id { margin: -0.4rem 0 0.8rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.stock-sym { font-weight: 700; letter-spacing: 0.03em; }
.stock-pile { font-size: 0.8rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); }
.stock-pile--holding { border-color: var(--accent); color: var(--accent); }
.stock-price { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 0.4rem; }
.stock-price strong { font-size: 1.8rem; font-family: var(--font-title); }
.stock-move { font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-move.is-up { color: #1a7f37; }
.stock-move.is-down { color: var(--danger); }
@media (prefers-color-scheme: dark) { .stock-move.is-up { color: #7ee787; } }
.stock-ranges { display: flex; gap: 0.8rem; font-size: 0.9rem; margin: 0.2rem 0; }
.stock-ranges a { text-decoration: none; }
.stock-ranges a[aria-current] { font-weight: 700; border-bottom: 2px solid var(--accent); }
.stock-chart { margin: 0.2rem 0 1rem; }
.stock-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.stock-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.stock-area { fill: var(--accent); opacity: 0.08; }
.stock-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.stock-axis { fill: var(--muted); font-size: 11px; font-family: var(--font-main); }
.stock-hover { stroke: var(--muted); stroke-width: 1; }
.stock-mark--buy { fill: #1a7f37; }
.stock-mark--sell { fill: var(--danger); }
@media (prefers-color-scheme: dark) { .stock-mark--buy { fill: #7ee787; } }
.stock-readout { min-height: 1.3em; font-size: 0.85rem; }
.stock-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.4rem 1rem; margin: 0.4rem 0 1rem; }
.stock-facts div { margin: 0; }
.stock-facts dt { font-size: 0.8rem; color: var(--muted); }
.stock-facts dd { margin: 0; }
.stock-trades { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.stock-trades th, .stock-trades td { text-align: left; padding: 0.3rem 0.5rem 0.3rem 0; border-bottom: 1px solid var(--border); }
.stock-trade--buy td:nth-child(2) { color: #1a7f37; }
.stock-trade--sell td:nth-child(2) { color: var(--danger); }
.stock-log { font-size: 0.85rem; }
.stock-news ul { padding-left: 1.1rem; }
.stock-news li { margin: 0.3rem 0; }
.stocks-table { width: 100%; border-collapse: collapse; }
.stocks-table th, .stocks-table td { padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.stocks-table th small { display: block; font-weight: 400; }
.stocks-last, .stocks-since { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stocks-last small, .stocks-since small { display: block; }
.stock-spark { width: 80px; height: 20px; }
.stock-spark path { fill: none; stroke-width: 1.5; stroke: var(--muted); }
.stock-spark.is-up path { stroke: #1a7f37; }
.stock-spark.is-down path { stroke: var(--danger); }
@media (max-width: 560px) { .stocks-spark { display: none; } }
.stocks-search { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.stocks-search label { flex: 1 1 16rem; display: grid; gap: 0.2rem; }
.stocks-found { width: 100%; }
.stocks-found th { text-align: left; font-weight: 400; padding: 0.3rem 0; }
.stock-trade-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin: 0.8rem 0; }
.stock-trade-form label { display: grid; gap: 0.2rem; font-size: 0.9rem; }
.stock-trade-form input { width: 8rem; }
.stock-trade-form .wide input { width: 16rem; }
.stock-status { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0 1rem; }
a.stock-link { text-decoration-style: dotted; }
.stock-line, .stock-grid, .stock-hover { vector-effect: non-scaling-stroke; }
@media (max-width: 600px) { .stock-axis { font-size: 21px; } .stock-mark { transform-box: fill-box; transform-origin: center; transform: scale(1.6); } }
.stock-then { margin: 1rem 0 0.4rem; padding: 0.5rem 0.8rem; border-left: 3px solid var(--border); font-size: 0.92rem; }
.stock-then ul { list-style: none; margin: 0; padding: 0; }
.stock-then li { margin: 0.15rem 0; }
.stock-alert-log { padding-left: 1.1rem; font-size: 0.92rem; }
.stock-alert-log li { margin: 0.2rem 0; }
.stock-import-rows td { vertical-align: top; }
.stock-import-rows tr.muted td { opacity: 0.6; }
.stock-import .notice label { display: grid; gap: 0.2rem; margin: 0.4rem 0; }
@media (max-width: 700px) { .stock-import-rows { display: block; overflow-x: auto; } }
.stock-div { fill: var(--accent); opacity: 0.75; }
@media (max-width: 600px) { .stock-div { r: 7px; } }
.responses-filter { margin: 0.4rem 0 0; }
.responses-list { list-style: none; margin: 0; padding: 0; }
.response-row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0;
padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.response-mark { display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
background: var(--accent-bg); color: var(--accent); font-size: 1.1rem; line-height: 1; }
.response-row p { margin: 0.1rem 0; }
.response-line { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.response-verb-k, .response-line .p-rsvp { font-weight: 700; margin-right: 0.15rem; }
.response-by { font-size: 0.85rem; }
.response-words { overflow-wrap: anywhere; font-size: 0.95rem; }
.response-when { font-size: 0.8rem; }
.response-when a { color: inherit; }
.responses-more { margin: 0.4rem 0 1rem; font-size: 0.95rem; }
.response-event { margin: 0.3rem 0; }
.saved-copy { margin: 0; padding: 0.5rem 1rem; background: var(--accent); color: var(--bg, #fff); font-size: 0.92rem; text-align: center; position: sticky; top: 0; z-index: 50; }
.saved-copy[hidden] { display: none; }
.saved-copy button { margin-left: 0.4rem; font: inherit; padding: 0.1rem 0.6rem; border-radius: 4px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.soc-folder-pick summary { display: inline-flex; align-items: center; gap: 0.2rem; }
.soc-folder-pick[open] { display: block; }
.soc-folder-form { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 14rem; display: grid; gap: 0.35rem;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.soc-folder-form label.check { display: flex; gap: 0.4rem; align-items: center; font-size: 0.92rem; }
.soc-folder-form input[type=text] { width: 100%; }
.soc-folders { list-style: none; padding: 0; margin: 0 0 1rem; }
.soc-folder-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.soc-folder-row a:first-child { flex: 1; text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; }
.soc-folder-new { display: flex; gap: 0.5rem; }
.soc-folder-new input { flex: 1; min-width: 0; }
.soc-folder-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0; }
.soc-folder-head h2 { margin: 0; flex: 1; display: inline-flex; gap: 0.4rem; align-items: center; }
.soc-folder-head .soc-more[open] > form { margin-top: 0.4rem; }
.soc-folder-link { white-space: nowrap; }
@media (max-width: 560px) {
.soc-person-acts { flex-wrap: wrap; }
.soc-folder-pick[open] { flex-basis: 100%; }
.soc-folder-form { position: static; box-shadow: none; margin-top: 0.3rem; }
}
.checklist--cards { columns: auto; padding: 0.6rem 1rem 1rem; }
.feature-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-top: 0.3rem; }
.checklist--cards label.feature-card { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.85rem 0.9rem; border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; line-height: 1.4; }
.feature-card:hover { border-color: var(--accent); }
.feature-card:has(input:checked) { border-color: var(--accent); background: var(--accent-bg, transparent); }
.checklist--cards .feature-card > input[type=checkbox] { margin: 0.2rem 0 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; justify-self: start; display: inline-block; }
.feature-card-body { display: grid; gap: 0.3rem; min-width: 0; }
.feature-card-name { font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
.feature-card-name svg { width: 1.1em; height: 1.1em; color: var(--accent); }
.feature-card-desc { font-size: 0.9rem; color: var(--muted); }
.feature-card-desc code { font-size: 0.85em; padding: 0 0.25em; border-radius: 4px; background: var(--accent-bg, rgba(0,0,0,0.05)); color: var(--text); white-space: nowrap; }
.feature-card-need { font-size: 0.8rem; color: var(--muted); font-style: italic; }
.soc-rsvp { margin: 0.5rem 0 0.2rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; }
.soc-rsvp[hidden] { display: none; }
.soc-rsvp.is-event { border-color: var(--accent); }
.soc-rsvp-when { margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; flex-wrap: wrap; }
.soc-rsvp-when svg { width: 1.1em; height: 1.1em; color: var(--accent); }
.soc-rsvp-form { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.soc-rsvp-form .soc-btn { border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.75rem; }
.soc-rsvp-form .soc-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.soc-rsvp-form .soc-rsvp-undo { border-style: dashed; color: var(--muted); }
.soc-quiet.soc-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.8rem; }
.soc-alerts .soc-btn { border-color: var(--border); border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.85rem; line-height: 1.2; margin: 0; color: var(--text); }
.soc-alerts .soc-btn:disabled { opacity: 0.6; cursor: default; }
.soc-alerts .soc-btn .icon { width: 1em; height: 1em; }
.soc-alerts .soc-sent { margin-left: auto; }
.soc-alerts .push-said:empty { display: none; }
.soc-alerts .push-said { flex-basis: 100%; order: 9; }
.conn-tests { display: grid; gap: 0.7rem; margin: 0.6rem 0 1.4rem; }
.conn-test { border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.conn-test.is-ok { border-left: 4px solid #1a7f37; }
.conn-test.is-bad { border-left: 4px solid var(--danger); }
.conn-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.conn-head form { margin: 0; }
.conn-test p { margin: 0.35rem 0; }
.conn-said { overflow-wrap: anywhere; }
.conn-calls pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 12rem; overflow: auto; background: var(--accent-bg); padding: 0.5rem; border-radius: 6px; }
.conn-calls code { overflow-wrap: anywhere; font-size: 0.8rem; }
.soc-post.is-muted-away { opacity: 0; transform: scale(0.98); transition: opacity 0.2s, transform 0.2s; }
.soc-mutes { list-style: none; padding: 0; margin: 0 0 1rem; }
.soc-mute-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.soc-mute-row > a:first-child, .soc-mute-row .soc-person-main { flex: 1 1 12rem; min-width: 0; text-decoration: none; }
.soc-mute-row .soc-person-main a { text-decoration: none; }
.soc-mute-row .soc-avatar { width: 32px; height: 32px; }
.soc-mute-row small { flex-basis: 100%; }
.soc-mute-where { display: inline-flex; gap: 0.2rem; align-items: center; }
.soc-mute-intro { margin-top: 0.3rem; }
.soc-mute-import { display: grid; gap: 0.3rem; justify-items: start; margin-top: 1.4rem; }
.soc-tagchip.is-muted { opacity: 0.7; text-decoration: line-through; }
.preview-bar { position: sticky; top: 0; z-index: 60; margin: 0; padding: 0.55rem 1rem; text-align: center;
background: var(--accent); color: var(--bg, #fff); font-size: 0.92rem; }
.preview-bar a { color: inherit; font-weight: 700; }
.seed-plant { white-space: nowrap; }
.seed-choices { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.seed-kind { width: auto; font-size: 0.85rem; padding: 0.1rem 0.3rem; }
.checkin-head { margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; }
.checkin-head svg { width: 1.05em; height: 1.05em; align-self: center; flex: none; }
.checkin-head .p-name { font-weight: 600; }
.checkin-where, .checkin-head .p-rating { font-size: 0.92em; }
figure.checkin-map { margin: 0 0 1rem; }
.checkin-map, a.checkin-map-link { display: block; }
img.checkin-map { width: 100%; height: auto; border-radius: 6px; display: block; margin: 0; }
a.checkin-map-link { margin: 0 0 0.6rem; }
.note-card a.checkin-map-link img.checkin-map { max-height: 14rem; object-fit: cover; }
.place-locality { margin: 0.1rem 0 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
.place-locality svg { width: 1em; height: 1em; }
.place-checkins { margin-top: 1.5rem; }
fieldset.checkin-where { display: grid; gap: 0.55rem; }
fieldset.checkin-where legend svg { width: 1em; height: 1em; margin-right: 0.3rem; vertical-align: -0.12em; }
.checkin-chosen { margin: 0; }
.checkin-chosen a { margin-left: 0.4rem; font-size: 0.9em; }
.checkin-block { margin: 0; }
.checkin-list { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.checkin-list li { margin: 0.2rem 0; }
.catalog-card-place img,
.catalog-card-place .catalog-nocover { aspect-ratio: 9 / 5; width: 100%; object-fit: cover; }
.catalog-card-place > a { width: 100%; }
.catalog-card-place .catalog-nocover { box-sizing: border-box; max-width: none; }
.catalog-card-place > .muted { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.35; }
.soc-head.soc-head--bare,
.soc-head.soc-head--bare { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) {
.soc-head.soc-head--bare { grid-template-columns: minmax(0, 1fr) auto; }
.soc-head.soc-head--bare .soc-meta { grid-column: 2; }
}
.soc-meta { display: inline-flex; align-items: center; gap: 0.25rem; justify-content: flex-end; }
.soc-meta .soc-star, .soc-meta .soc-star form, .soc-meta form.soc-star { display: inline-flex; align-items: center; margin: 0; }
.soc-meta .soc-star button { display: inline-flex; align-items: center; }
.soc-meta .soc-menu-btn { margin-left: 0; }
@media (max-width: 560px) {
.soc-head:not(.soc-head--bare) .soc-meta { justify-content: flex-start; }
}
.soc-person.soc-person--bare { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) {
.soc-person.soc-person--bare { grid-template-columns: minmax(0, 1fr) auto; }
.soc-person.soc-person--bare .soc-person-acts { grid-column: 2; }
}
.checkin-bare { margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
.checkin-bare svg { width: 1em; height: 1em; }
.hl-shortcode { color: var(--accent); }
.kobo-code { font-family: var(--font-code); font-size: 2.2rem; letter-spacing: 0.15em; margin: 0.5rem 0 1rem; }
.kobo-status { margin-bottom: 0.5rem; }
.kobo-books { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.9rem; }
.kobo-book { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.8rem; align-items: start;
border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.8rem; }
.kobo-book > img { width: 3rem; height: auto; margin: 0; border-radius: 3px; border: 0; }
.kobo-book-main { min-width: 0; }
.kobo-book-line { margin: 0.15rem 0 0.35rem; font-size: 0.9rem; }
.kobo-bar { display: block; height: 4px; border-radius: 2px; margin: 0 0 0.5rem; max-width: 18rem;
background: linear-gradient(to right, var(--accent) var(--p), var(--border) var(--p)); }
.kobo-match { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: end; font-size: 0.9rem; }
.kobo-match label { display: grid; gap: 0.2rem; flex: 1 1 16rem; min-width: 0; }
.kobo-match select { max-width: 100%; }
.kobo-book:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
.soc-caps { margin: 0.4rem 0 0.8rem; }
.soc-cap-list { list-style: none; padding: 0; margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.soc-cap { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem 0.2rem 0.5rem; border-radius: 999px;
font-size: 0.82rem; border: 1px solid currentColor; line-height: 1.4; }
.soc-cap svg { width: 1em; height: 1em; }
:root { --cap-ok: #1a7f37; --cap-bad: #b91c1c; --cap-wait: #8a5a00; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --cap-ok: #4ac26b; --cap-bad: #ff7b72; --cap-wait: #d99b1c; }
}
:root[data-theme="dark"] { --cap-ok: #4ac26b; --cap-bad: #ff7b72; --cap-wait: #d99b1c; }
.soc-cap--ok { color: var(--cap-ok); }
.soc-cap--bad { color: var(--cap-bad); }
.soc-cap--pending { color: var(--cap-wait); }
.soc-cap--offered { color: var(--muted); }
.soc-caps-again { display: inline-flex; align-items: center; gap: 0.4rem; }
.soc-caps-note { font-size: 0.85rem; margin: 0 0 0.4rem; }
.soc-same { margin: 0.2rem 0 0.8rem; font-size: 0.92rem; }
.soc-same-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin: 0 0 0.35rem; }
.soc-same-item { display: inline-flex; align-items: center; gap: 0.15rem; max-width: 100%; }
.soc-same-item a { overflow-wrap: anywhere; }
.soc-same-item a { display: inline-flex; align-items: center; gap: 0.3rem; }
.soc-same-item .icon, .soc-same-item svg { width: 1em; height: 1em; }
.soc-same .soc-same-off { display: inline-flex; margin: 0; }
.soc-same-x { padding: 0 0.35rem; min-height: 0; line-height: 1.3; font-size: 0.9rem; }
.soc-same-add summary { cursor: pointer; color: var(--muted, #666); }
.soc-same-add form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-end; margin-top: 0.4rem; }
.soc-same-add label { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 16rem; }
.soc-same-add input[type="text"] { width: 100%; }
.kobo-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: end; margin: 0.5rem 0 0.4rem; font-size: 0.9rem; }
.kobo-filter label { display: grid; gap: 0.15rem; }
.kobo-filter input[type="search"] { min-width: 12rem; }
.kobo-filter select { max-width: 14rem; }
.kobo-review { margin-top: 0.6rem; font-size: 0.9rem; }
.kobo-review summary { cursor: pointer; color: var(--accent); }
.kobo-review-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.kobo-review-table th, .kobo-review-table td { text-align: left; vertical-align: top; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); }
.kobo-review-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: normal; }
.kobo-review-table td input[type="text"] { width: 100%; box-sizing: border-box; }
.kobo-said { display: block; margin-top: 0.15rem; overflow-wrap: anywhere; }
.kobo-mine { overflow-wrap: anywhere; }
.kobo-review-note { margin: 0.2rem 0 0.5rem; }
@media (max-width: 560px) {
.kobo-review-table thead { display: none; }
.kobo-review-table tr { display: grid; grid-template-columns: 2rem 1fr; border-bottom: 1px solid var(--border); padding: 0.3rem 0; }
.kobo-review-table th, .kobo-review-table td { border: 0; padding: 0.15rem 0.2rem; }
.kobo-review-table td:nth-child(3), .kobo-review-table td.kobo-mine { grid-column: 2; }
.kobo-review-table td.kobo-mine::before { content: 'Now: '; color: var(--muted); }
}
.series-index { padding-left: 1.2rem; }
.series-index li { margin: 0.3rem 0; }
.series-books { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.8rem; }
.series-book { display: grid; grid-template-columns: 2.4rem 3.6rem minmax(0, 1fr); gap: 0.8rem; align-items: center; }
.series-no { font-family: var(--font-title); font-size: 1.2rem; color: var(--muted); text-align: right; }
.series-cover img, .series-cover > * { width: 3.6rem; height: auto; margin: 0; border-radius: 3px; display: block; }
.series-text { display: grid; gap: 0.1rem; min-width: 0; }
.series-state { color: var(--accent); }
.series-book:not(.is-read):not(.is-reading) .series-cover { opacity: 0.75; }
.catalog-series { margin: 0.2rem 0 0.6rem; }
.stars { display: inline-flex; gap: 0.08em; vertical-align: -0.12em; color: var(--accent); line-height: 1; }
.stars .star { width: 1em; height: 1em; margin: 0; display: block; overflow: visible; }
.stars .star-edge { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.stars .star-fill { fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.stars data { display: none; }
.card-stars { display: flex; margin-top: 0.1rem; font-size: 0.95rem; }
.catalog-card .muted .card-stars { display: inline-flex; margin: 0 0 0 0.2rem; }
.item-stars { font-size: 1.15rem; margin-left: 0.35rem; }
.checkin-stars { font-size: 0.95em; margin-left: 0.2rem; }
.catalog-back { margin: 0 0 0.2rem; font-size: 0.9rem; }
.habit-svg a rect { cursor: pointer; }
.habit-svg a:hover rect { stroke: var(--text); stroke-width: 1; }
.habit-day-list { padding-left: 1.2rem; }
.habit-day-list li { margin: 0.3rem 0; }
.soc-person.is-gone, .soc-profile.is-gone { background: color-mix(in srgb, var(--cap-bad) 10%, transparent);
box-shadow: inset 3px 0 0 var(--cap-bad); transition: background 0.25s; padding-left: 0.6rem; }
.soc-person.is-gone .soc-person-main strong, .soc-person.is-gone .soc-handle { text-decoration: line-through; opacity: 0.75; }
.soc-person.is-back, .soc-profile.is-back { background: color-mix(in srgb, var(--cap-ok) 10%, transparent);
box-shadow: inset 3px 0 0 var(--cap-ok); transition: background 0.25s; padding-left: 0.6rem; }
.soc-gone-note { font-weight: 700; font-size: 0.85rem; color: var(--cap-bad); }
.is-back .soc-gone-note { color: var(--cap-ok); }
.soc-again { display: inline-flex; align-items: center; gap: 0.5rem; }
.soc-fail-n { background: var(--cap-bad); }
.soc-wm-filter a { margin-right: 0.8rem; }
.soc-wm-list { list-style: none; padding: 0; }
.soc-wm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.soc-wm-what { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.soc-wm-what small { display: block; }
.soc-wm-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700;
padding: 0.1rem 0.55rem 0.1rem 0.45rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.soc-wm-chip .icon { width: 0.95em; height: 0.95em; padding-right: 0; top: 0; }
.soc-wm--sent .soc-wm-chip { color: var(--cap-ok); }
.soc-wm--failed .soc-wm-chip, .soc-wm--failed .soc-wm-why, .soc-wmfail-why { color: var(--cap-bad); }
.soc-wm--waiting .soc-wm-chip { color: var(--cap-wait); }
.soc-wm--none .soc-wm-chip { color: var(--muted); }
.soc-wm.is-retried { background: color-mix(in srgb, var(--cap-wait) 8%, transparent); }
.soc-note--wmfail .soc-note-icon { color: var(--cap-bad); }
.soc-wmfail-why { margin: 0.3rem 0; overflow-wrap: anywhere; }
.shelf-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; margin: 0.2rem 0 0.8rem; }
.shelf-filter-field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--muted); min-width: 0; }
.shelf-filter-field select { font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg, #fafafa);
border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.4rem; max-width: 14rem; }
.shelf-filter-on { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 1rem; }
.shelf-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem; border-radius: 999px;
border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-size: 0.85rem; }
.shelf-chip:hover, .shelf-chip:focus-visible { background: var(--accent); color: var(--bg, #fff); }
@media (max-width: 560px) {
.shelf-filter-field { flex: 1 1 calc(50% - 0.8rem); }
.shelf-filter-field select { max-width: none; width: 100%; }
}
.catalog-episodes { margin: 1.5rem 0; }
.catalog-episodes h2 { margin-bottom: 0.4rem; }
.catalog-episodes .season { margin: 0.3rem 0; }
.catalog-episodes .season summary { cursor: pointer; font-weight: 600; }
.episode-list--public { columns: 1; list-style: none; padding: 0.2rem 0 0.4rem; margin: 0; }
.episode-list--public li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.15rem 0; }
.episode-list--public .ep-mark { flex: none; width: 1.1rem; color: var(--accent); }
.episode-list--public .ep-mark .icon { width: 1rem; height: 1rem; padding-right: 0; top: 0.1em; }
.episode-list--public .ep-no { flex: none; min-width: 2.2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.episode-list--public .ep-title { flex: 1 1 auto; min-width: 0; }
.episode-list--public .ep-aired, .ep-aired { margin-left: auto; font-size: 0.85em; white-space: nowrap; padding-left: 0.4rem; }
.episodes-after { margin: 0.8rem 0 0.4rem; }
.catalog-from-album { margin: -0.2rem 0 0.4rem; }
.am-player { margin: 1rem 0 1.4rem; max-width: 40rem; }
.am-player iframe { display: block; width: 100%; border: 0; border-radius: 10px; overflow: hidden; background: transparent; }
.am-facade { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: 10px;
text-decoration: none; color: var(--text); background: var(--accent-bg); min-height: 175px; box-sizing: border-box; }
.am-facade img, .am-cover-blank { width: 150px; height: 150px; object-fit: cover; border-radius: 6px; flex: none; }
.am-cover-blank { display: grid; place-items: center; background: var(--bg, #fafafa); color: var(--muted); }
.am-cover-blank .icon { width: 2.4rem; height: 2.4rem; padding-right: 0; top: 0; }
.am-play { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
background: var(--accent); color: var(--bg, #fff); transition: transform 0.1s; }
.am-facade:hover .am-play, .am-facade:focus-visible .am-play { transform: scale(1.06); }
.am-label { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.am-label small { color: var(--muted); }
@media (max-width: 480px) {
.am-facade { gap: 0.7rem; }
.am-facade img, .am-cover-blank { width: 96px; height: 96px; }
}
.album-songs ul { padding-left: 1.1rem; }
.album-songs li { margin: 0.2rem 0; }
.am-find { margin: -0.4rem 0 0.9rem; }
.am-find-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.3rem; }
.am-find-pick { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font: inherit; color: var(--text);
background: var(--bg, #fafafa); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.5rem; cursor: pointer; }
.am-find-pick:hover, .am-find-pick:focus-visible { border-color: var(--accent); }
.am-find-pick.is-best { border-color: var(--accent); background: var(--accent-bg); }
.am-find-pick img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; }
.am-find-pick span { display: flex; flex-direction: column; min-width: 0; }
.am-find-pick small { color: var(--muted); }
.am-find-pick img, .am-facade img { margin: 0; max-width: none; }
.activity-hold { border: 1px solid var(--accent); border-radius: 6px; padding: 0.6rem 0.8rem; margin: 1rem 0; }
.activity-hold p { margin: 0 0 0.5rem; }
:root { --abar-h: 0px; }
.abar { display: none; }
@media (max-width: 720px) {
body.has-abar { --abar-h: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
body.has-abar::after { content: ""; display: block; flex: none;
height: calc(var(--abar-h) + var(--dock-size) + 1rem); }
body.has-abar .site-nav.admin-menu { display: none; }
body.has-abar main .kind-new { display: none; }
.abar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: 0.35rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
background: var(--bg); border-top: 1px solid var(--border); }
.abar-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
padding: 0.2rem 0; margin: 0; border: 0; background: none; color: var(--muted);
font: inherit; font-size: 0.72rem; line-height: 1.2; text-decoration: none; cursor: pointer; min-height: 2.9rem; }
.abar-tab .icon { width: 1.45rem; height: 1.45rem; padding: 0; top: 0; }
.abar-tab.is-on { color: var(--accent); font-weight: 700; }
.abar-tab:hover, .abar-tab:focus-visible { background: none; color: var(--accent); }
.abar-tab:hover .abar-plus { background: var(--text); }
.abar-tab.is-on::before { content: ""; position: absolute; top: -0.4rem; width: 1.6rem; height: 3px;
border-radius: 2px; background: var(--accent); }
.abar-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.abar-plus { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
margin-top: -1rem; border-radius: 50%; background: var(--accent); color: var(--bg); }
.abar-plus .icon { width: 1.35rem; height: 1.35rem; }
.abar-dot { position: absolute; top: 0.1rem; left: calc(50% + 0.5rem); width: 0.5rem; height: 0.5rem;
border-radius: 50%; background: var(--accent); }
body.has-abar .admin-dock { bottom: calc(var(--abar-h) + 0.6rem); }
body.has-abar .editor-save-fab { bottom: calc(var(--abar-h) + 0.6rem); }
body.has-abar .editor-image-fab,
body.has-abar .image-fab-say:not([hidden]) { bottom: calc(var(--abar-h) + 0.6rem + var(--dock-size) + 0.5rem); }
}
html.focus-writing .abar { display: none; }
html.kb-open body .abar { display: none; }
html.kb-open body .admin-dock,
html.kb-open body .editor-save-fab { bottom: calc(var(--kb) + 0.6rem); }
html.kb-open body .editor-image-fab,
html.kb-open body .image-fab-say:not([hidden]) { bottom: calc(var(--kb) + 0.6rem + var(--dock-size) + 0.5rem); }
.abar-sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none;
max-height: 78dvh; overflow: auto; border: 0; border-radius: 16px 16px 0 0;
padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
background: var(--bg); color: var(--text); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18); }
.abar-sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
.abar-sheet .kind-new { margin: 0.4rem 0 0; }
.abar-more ul { list-style: none; margin: 0; padding: 0; }
.abar-more a { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.2rem;
border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.abar-more li:last-child a { border-bottom: 0; }
.abar-more .icon { width: 1.3rem; height: 1.3rem; padding: 0; top: 0; }
.abar-n { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.soc-sitemsg { border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
.soc-sitemsg.is-new .soc-note-line strong::after { content: " •"; color: var(--accent); }
.soc-sitemsg-subject { margin: 0.2rem 0; }
.soc-sitemsg-addr { font-size: 0.85rem; }
.soc-sitemod { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.soc-sitemod .soc-go { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.soc-sitemsg-held { margin: 0.6rem 0; }
.site-back { display: none; }
html.in-app .site-back { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--bg); border-bottom: 1px solid var(--border);
padding: calc(env(safe-area-inset-top, 0px) + 0.45rem) 1rem 0.45rem; }
.site-back-go { background: none; border: 0; padding: 0.2rem 0; margin: 0; color: var(--accent); font: inherit;
font-weight: 700; cursor: pointer; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-back-go:hover, .site-back-go:focus-visible { background: none; color: var(--text); }
.site-back-admin { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; font-weight: 700; }
.site-back-admin .icon { width: 1.1rem; height: 1.1rem; padding: 0; top: 0; }
.abar-more a:hover { background: var(--accent-bg); }
.soc-notefilter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.6rem; }
.soc-chip { font: inherit; font-size: 0.85rem; line-height: 1.2; padding: 0.3rem 0.7rem; margin: 0; border-radius: 999px;
border: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; }
.soc-chip:hover, .soc-chip:focus-visible { background: var(--accent-bg); color: var(--text); border-color: var(--accent); }
.soc-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.soc-notes[data-only="talk"] > .soc-note:not(.soc-note--reply):not(.soc-note--mention):not(.soc-note--quote),
.soc-notes[data-only="likes"] > .soc-note:not(.soc-note--like):not(.soc-note--boost):not(.soc-note--bookmark),
.soc-notes[data-only="follows"] > .soc-note:not(.soc-note--follow),
.soc-notes[data-only="comments"] > .soc-note:not(.soc-note--comment),
.soc-notes[data-only="guestbook"] > .soc-note:not(.soc-note--guestbook) { display: none; }
.stock-provider-code { margin-top: 0.9rem; }
.stock-provider-code input[name=code] { max-width: 10rem; text-transform: uppercase; }
.read-history li { margin-bottom: 0.4rem; }
.read-after { margin: 0.3rem 0 0.6rem; padding: 0; border: 0; background: none; color: var(--text); }
.read-after > summary { cursor: pointer; color: var(--accent); font-size: 0.95rem; margin: 0; padding: 0; }
.read-after-form { margin: 0.5rem 0; }
.read-announce { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.soc-kobo-book { margin: 0.2rem 0; }
.shelf-screen { display: flex; flex-direction: column; gap: 0.9rem; }
.shelf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.shelf-back { font-weight: 600; text-decoration: none; }
.shelf-details-link { font-weight: 600; }
.shelf-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem; margin: 0;
background: var(--bg); display: flex; flex-direction: column; gap: 0.7rem; }
.shelf-card > * { margin-top: 0; margin-bottom: 0; }
.shelf-card h2 { font-size: 1.2rem; margin: 0; }
.shelf-finish, .shelf-review { border: 2px solid var(--accent); }
.shelf-about-top { display: flex; gap: 0.9rem; align-items: flex-start; }
.shelf-cover { width: 6rem; flex: none; border-radius: 6px; object-fit: cover; aspect-ratio: 2 / 3; margin: 0; }
.shelf-cover--album, .shelf-cover--course { aspect-ratio: 1 / 1; }
.shelf-about-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.shelf-about-text h1 { font-size: 1.5rem; line-height: 1.1; margin: 0; }
.shelf-by { font-weight: 600; margin: 0; }
.shelf-extra { margin: 0; font-size: 0.95rem; }
.shelf-desc { font-size: 0.98rem; }
.shelf-desc > :first-child { margin-top: 0; }
.shelf-desc > :last-child { margin-bottom: 0; }
.shelf-source { font-size: 0.85rem; margin: 0; }
.shelf-desc-edit, .shelf-earlier, .shelf-when, .read-after { margin: 0; padding: 0; border: 0; background: none; }
.shelf-desc-edit > summary, .shelf-earlier > summary, .shelf-when > summary { cursor: pointer; color: var(--accent);
font-size: 0.95rem; margin: 0; padding: 0; }
.shelf-describe { margin-top: 0.5rem; }
.shelf-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.shelf-big-number { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; }
.shelf-big-number strong { font-size: 2.4rem; line-height: 1; color: var(--accent); }
.shelf-count { margin: 0; }
.shelf-count strong { color: var(--accent); }
.shelf-bar { height: 10px; border-radius: 999px; background: var(--accent-bg); overflow: hidden;
border: 1px solid var(--border); }
.shelf-bar > span { display: block; height: 100%; background: var(--accent); }
.shelf-big { width: 100%; min-height: 3rem; font-size: 1.05rem; font-weight: 700; border-radius: 10px; }
.shelf-finish textarea, .shelf-review textarea, .shelf-describe textarea { width: 100%; box-sizing: border-box; }
.shelf-finish-more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin: 0; }
.shelf-quiet { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }
.shelf-log input[type=number], .shelf-log input[type=text] { width: 5rem; }
.shelf-posted { color: var(--accent); font-weight: 600; margin: 0; }
.shelf-stars-show .stars { font-size: 1.4rem; }
.shelf-again { margin: 0; }
.shelf-screen .season { margin: 0.2rem 0; }
.star-input { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; }
.star-input legend { font-weight: 600; padding: 0; margin-bottom: 0.2rem; }
.star-row { display: inline-flex; flex-direction: row-reverse; }
.star-row input, .star-input .star-none { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.star-row label { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
.star-row svg { width: 2rem; height: 2rem; }
.star-row svg path { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.star-row input:checked ~ label svg path,
.star-row label:hover svg path, .star-row label:hover ~ label svg path { fill: var(--accent); }
.star-row input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.star-none-label { font-size: 0.9rem; color: var(--muted); cursor: pointer; text-decoration: underline; margin: 0; }
.star-input .star-none:checked + .star-none-label { display: none; }
.shelf-desc-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.shelf-desc-fill { margin: 0; }
.shelf-log { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: 0; }
.shelf-log label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; font-size: 0.95rem; }
.shelf-quiet input { width: auto; margin: 0; }
.shelf-quiet { margin: 0; flex-direction: row; }
.shelf-finish-more .linklike { font-size: 0.98rem; }
.shelf-cover--match { width: 6rem; aspect-ratio: auto; display: block; }
.shelf-cover--match svg { width: 100%; height: auto; display: block; }
.shelf-match-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.shelf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.shelf-chips-label { font-weight: 600; font-size: 0.9rem; min-width: 2.8rem; }
.shelf-chips .chip { min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--accent);
background: transparent; color: var(--accent); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.shelf-chips .chip.is-on { background: var(--accent); color: var(--bg, #fff); }
.shelf-chip-other { margin: 0; padding: 0; border: 0; background: none; }
.shelf-chip-other > summary { cursor: pointer; color: var(--accent); font-size: 0.95rem; }
.shelf-chip-other input { width: 10rem; }
.shelf-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; font-weight: 600; }
.shelf-duration { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; margin: 0; }
.shelf-duration input { width: 7rem; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.shelf-timer { align-self: center; }
.shelf-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--accent);
border-radius: 10px; overflow: hidden; margin: 0; }
.shelf-toggle button { min-height: 2.9rem; border: 0; border-radius: 0; margin: 0; background: transparent; color: var(--accent);
font: inherit; font-weight: 700; cursor: pointer; }
.shelf-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--bg, #fff); }
.shelf-venue { margin: 0; padding: 0; border: 0; background: none; }
.shelf-venue > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.shelf-venue select { max-width: 100%; }
.place-screen-map { display: block; width: calc(100% + 2rem); max-width: none; height: auto; margin: -1rem -1rem 0.2rem;
border-radius: 13px 13px 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.place-about h1, .hill-screen h1 { font-size: 1.5rem; line-height: 1.1; margin: 0; }
.place-visit-list, .hill-visit-list, .hill-found { list-style: none; margin: 0; padding: 0; }
.place-visit-list li, .hill-found li { border-top: 1px solid var(--border); padding: 0.55rem 0; }
.place-visit-list li:first-child, .hill-found li:first-child { border-top: 0; }
.place-visit-list a { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; text-decoration: none; color: inherit; }
.place-action { position: sticky; bottom: calc(var(--bottom-bar-h, 64px) + 0.5rem); z-index: 2; }
.place-action .button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.hill-height { font-size: 1.3rem; color: var(--accent); white-space: nowrap; }
.hill-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.hill-chip { font-size: 0.85rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent); }
.hill-visit-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; padding: 0.35rem 0; }
.hill-visit-remove { display: inline; margin: 0 0 0 auto; }
.hill-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--accent-bg); margin: 0; }
.hill-log-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.6rem; }
.hill-log-row label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.hill-log-row input { width: 100%; box-sizing: border-box; }
@media (max-width: 420px) { .hill-log-row { grid-template-columns: minmax(0, 1fr); } }
.shelf-toggle--radio { padding: 0; }
.shelf-toggle--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shelf-toggle--radio label { display: flex; align-items: center; justify-content: center; min-height: 2.9rem; margin: 0;
color: var(--accent); font-weight: 700; cursor: pointer; }
.shelf-toggle--radio input:checked + label { background: var(--accent); color: var(--bg, #fff); }
.shelf-toggle--radio input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -3px; }
.hill-find { display: flex; align-items: flex-end; gap: 0.6rem; margin: 0 0 0.9rem; }
.hill-find label { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.hill-find input { width: 100%; box-sizing: border-box; }
.hill-your-lists, .hill-lately { margin-bottom: 0.9rem; }
.hill-list-bar { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.35rem 0; text-decoration: none; color: inherit; }
.hill-list-bar-head { display: flex; justify-content: space-between; gap: 1rem; }
.publish-row { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 0.4rem; }
.shelf-screen .shelf-toggle--radio label { display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
.shelf-screen .shelf-toggle--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.activity-about .route-map, .activity-about > svg { display: block; width: calc(100% + 2rem); max-width: none; height: auto;
margin: -1rem -1rem 0.2rem; border-radius: 13px 13px 0 0; }
.activity-about h1, .stock-about h1 { font-size: 1.45rem; line-height: 1.15; margin: 0; }
.activity-words textarea { width: 100%; box-sizing: border-box; }
.activity-screen .hill-suggest, .shelf-screen > .hill-suggest { margin: 0; }
.stock-about .stock-price { margin: 0; }
.stock-about .stock-chart, .stock-about figure { margin: 0; }
.stock-about svg { max-width: 100%; height: auto; }
.stock-log { margin: 0; font-size: 0.85rem; }
.stock-facts--main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.stock-facts--main dd { font-size: 1.15rem; font-weight: 700; margin: 0; }
.stock-facts--main dt { font-size: 0.85rem; color: var(--muted); }
.stock-trade-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.stock-trade-row label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; min-width: 0; font-size: 0.95rem; }
.stock-trade-row input, .stock-trade-row select { width: 100%; box-sizing: border-box; min-width: 0; }
.stock-more { padding: 0.75rem 1rem; }
.stock-more > summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.stock-more[open] > summary { margin-bottom: 0.6rem; }
.stock-more .stock-trades { display: block; overflow-x: auto; }
.shelf-card.stock-more { display: block; }
.linkcard-box { margin: 0.2rem 0 0.6rem; }
.linkcard-box > p { margin: 0.3rem 0; }
.linkcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.linkcard-img { display: block; width: 100%; max-height: 12rem; object-fit: cover; margin: 0; }
.linkcard-text { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; }
.linkcard-site { font-size: 0.85rem; }
.linkcard-summary { font-size: 0.92rem; color: var(--muted); }
.linkcard-feed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
margin-top: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--accent-bg); }
.list-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.list-chips .chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.3rem; padding: 0 0.85rem;
border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.list-chips button.chip { background: none; font-family: inherit; cursor: pointer; }
.list-chips button.chip:hover { background: var(--accent-bg, transparent); color: var(--accent); }
.list-chips .chip.is-on { background: var(--accent); color: var(--bg, #fff); }
.list-chips .chip-n { font-weight: 400; opacity: 0.8; }
.list-more { margin: 0 0 0.8rem; padding: 0; border: 0; background: none; }
.list-more > summary { cursor: pointer; color: var(--accent); font-size: 0.95rem; }
.list-more-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.list-more-row select { max-width: 100%; }
.list-rows { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); }
.list-row { display: flex; align-items: center; gap: 0.3rem; border-top: 1px solid var(--border); padding-right: 0.4rem; }
.list-row:first-child { border-top: 0; }
.list-row-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.75rem; align-items: center;
padding: 0.6rem 0.4rem 0.6rem 0.75rem; color: inherit; text-decoration: none; }
.list-row-main:hover .list-title, .list-row-main:focus-visible .list-title { color: var(--accent); text-decoration: underline; }
.list-thumb { width: 2.6rem; height: 3.7rem; object-fit: cover; border-radius: 4px; margin: 0; background: var(--accent-bg); }
.list-thumb--album, .list-thumb--course, .list-thumb--place, .list-thumb--snap, .list-thumb--note, .list-thumb--checkin, .list-thumb--article { height: 2.6rem; }
.list-thumb--icon { display: flex; align-items: center; justify-content: center; height: 2.6rem; color: var(--accent); }
.list-thumb--icon svg { width: 1.3rem; height: 1.3rem; }
.list-row-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.list-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.list-title { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-pill { flex: none; font-size: 0.8rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap;
background: var(--accent-bg); color: var(--accent); }
.list-pill--on { background: var(--accent); color: var(--bg, #fff); }
.list-pill--done { background: #e4efe7; color: #1d5b34; }
.list-pill--wait, .list-pill--plain { background: var(--accent-bg); color: var(--muted); }
.list-pill--draft { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .list-pill--done { background: #1f3a29; color: #a8dcb8; } }
:root[data-theme="dark"] .list-pill--done { background: #1f3a29; color: #a8dcb8; }
.list-bar { display: block; height: 5px; border-radius: 999px; background: var(--accent-bg); overflow: hidden; margin-top: 0.15rem; }
.list-bar > span { display: block; height: 100%; background: var(--accent); }
.list-row .row-actions { display: flex; align-items: center; gap: 0.1rem; flex: none; }
.list-empty { padding: 1rem; }
.onthego h1 { margin: 0; }
.onthego .shelf-progress-head { margin-bottom: 0.8rem; }
.onthego-verb { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.onthego-where { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; }
.onthego-today { color: #1d5b34; font-weight: 600; }
.onthego-act form { margin: 0; }
.onthego-act .button, .onthego-act button { min-height: 2.5rem; padding: 0 0.7rem; font-size: 0.9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.list-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.list-thumb--activity, .list-thumb--link, .list-thumb--clip, .list-thumb--page, .list-thumb--garden { height: 2.6rem; }
.list-thumb--svg { display: block; height: auto; background: none; overflow: hidden; }
.list-thumb--svg svg { width: 100%; height: auto; display: block; }
.tag-head { margin: 0 0 1.5rem; }
.tag-cover { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 14px; margin: 0 0 1.1rem; }
.tag-eyebrow { margin: 0 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.tag-eyebrow a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.tag-eyebrow a:hover { color: var(--accent); }
.tag-eyebrow svg { width: 0.95rem; height: 0.95rem; }
.tag-title { margin: 0 0 0.35rem; line-height: 1.05; }
.tag-sum { margin: 0 0 0.9rem; font-size: 0.95rem; }
.tag-sum strong { color: var(--text); font-variant-numeric: tabular-nums; }
.tag-intro { margin: 0 0 1rem; font-size: 1.02em; }
.tag-intro p:first-child { margin-top: 0; }
.tag-intro p:last-child { margin-bottom: 0; }
.tag-kinds { margin: 0.4rem 0 0; }
.tag-kinds .chip svg { width: 1rem; height: 1rem; }
.tag-month { display: flex; align-items: baseline; gap: 0.5rem; margin: 2.2rem 0 0.9rem;
font-size: var(--size-h5); text-transform: uppercase; letter-spacing: 0.06em; }
.tag-month span { color: var(--muted); font-weight: 400; }
.tag-feed > .tag-month:first-child { margin-top: 1rem; }
.tag-stream { list-style: none; margin: 0; padding: 0; position: relative; }
.tag-stream::before { content: ""; position: absolute; left: 1.35rem; top: 0.5rem; bottom: 0.5rem;
width: 2px; background: var(--border); border-radius: 2px; }
.tag-entry { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: 0 0.85rem;
align-items: start; margin: 0 0 1rem; position: relative; }
.tag-day { display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--border);
line-height: 1; position: relative; z-index: 1; margin-top: 0.15rem; }
.tag-day-n { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.tag-day-w { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.1rem; }
.tag-entry--same .tag-day { visibility: hidden; height: 0.6rem; }
.tag-entry--same::after { content: ""; position: absolute; left: calc(1.35rem - 4px); top: 1.2rem;
width: 10px; height: 10px; border-radius: 50%; background: var(--border); z-index: 1; }
.tag-entry--same { margin-top: -0.4rem; }
.tag-row { margin: 0; padding: 0; border: 0; }
.h-feed .tag-row-link { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.75rem;
border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text);
text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.tag-row-link:hover, .tag-row-link:focus-visible { border-color: var(--accent); }
.tag-row-link:hover .tag-row-title { color: var(--accent); }
.tag-thumb { flex: 0 0 auto; width: 4.6rem; height: 3.45rem; object-fit: cover; border-radius: 8px; margin: 0;
background: var(--accent-bg); }
.tag-thumb--book, .tag-thumb--series, .tag-thumb--movie, .tag-thumb--game { width: 2.6rem; height: 3.7rem; border-radius: 4px; }
.tag-thumb--album, .tag-thumb--course { width: 3.45rem; height: 3.45rem; }
.tag-thumb--icon { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.tag-thumb--icon svg { width: 1.5rem; height: 1.5rem; }
.tag-thumb--svg { display: block; height: auto; background: none; overflow: hidden; }
.tag-thumb--svg svg { width: 100%; height: auto; display: block; }
.tag-row-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.tag-row-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--accent); }
.tag-row-title { font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.tag-row-sub { font-size: 0.88rem; color: var(--muted); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag-entry--card .note-card { margin: 0; }
@media (max-width: 480px) {
.tag-entry { grid-template-columns: 2.3rem minmax(0, 1fr); gap: 0 0.6rem; }
.tag-day { width: 2.3rem; height: 2.3rem; }
.tag-day-n { font-size: 0.9rem; }
.tag-stream::before { left: 1.15rem; }
.tag-entry--same::after { left: calc(1.15rem - 4px); }
.tag-thumb { width: 3.9rem; height: 2.95rem; }
}
.tags-find { width: 100%; margin: 0 0 0.6rem; border-radius: 999px; padding: 0.55rem 1rem; }
.tags-find[hidden] { display: none; }
.list-chips .chip--quiet { border-color: var(--border); color: var(--muted); font-weight: 600; }
.tags-clear { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--accent-bg); }
.tag-rows { margin-top: 0.3rem; }
.tag-admin-row { border-top: 1px solid var(--border); }
.tag-admin-row:first-child { border-top: 0; }
.tag-admin-row[hidden] { display: none; }
.tag-admin-row > details { display: block; margin: 0; padding: 0; border: 0; background: none; }
.tag-admin-row > details > summary { list-style: none; cursor: pointer; margin: 0; font-weight: 400; }
.tag-admin-row > details > summary::-webkit-details-marker { display: none; }
.tag-admin-sum { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.8rem; align-items: center;
padding: 0.75rem 0.9rem; color: var(--text); }
.tag-admin-sum .list-pill { font-variant-numeric: tabular-nums; min-width: 1.8rem; text-align: center; }
.tag-admin-sum:hover .list-title { color: var(--accent); }
.tag-admin-thumb { width: 2.6rem; height: 2.6rem; border-radius: 8px; object-fit: cover; }
.tag-admin-row details[open] > summary { background: var(--accent-bg); }
.tag-admin-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.tag-flag { font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px;
background: var(--accent-bg); color: var(--muted); }
.tag-flag--want { background: transparent; border: 1px dashed var(--accent); color: var(--accent); }
.tag-admin-edit { padding: 0.4rem 0.9rem 0.9rem; border-top: 1px solid var(--border); }
.tag-admin-edit label { font-weight: 600; font-size: 0.92rem; }
.tag-admin-edit input[type=text], .tag-admin-edit textarea { width: 100%; font-weight: 400; margin-top: 0.25rem; }
.tag-admin-cover { display: block; width: 100%; max-width: 22rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.tag-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.tag-admin-delete { margin-top: 0.6rem; }
.tags-foot { font-size: 0.88rem; }
.snap-grid { list-style: none; margin: 0.6rem 0 1.6rem; padding: 0; display: grid; gap: 1rem 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
@media (min-width: 44rem) { .snap-grid { grid-template-columns: repeat(3, 1fr); } }
.snap-tile { margin: 0; min-width: 0; }
.snap-tile-link { position: relative; display: block; border-radius: 10px; overflow: hidden;
aspect-ratio: var(--gallery-ratio, 16 / 9); background: var(--accent-bg); color: var(--text); text-decoration: none; }
.h-feed .snap-tile-link { display: block; padding: 0; }
.snap-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; max-width: none;
transition: transform 0.3s; }
.snap-tile-link:hover .snap-tile-img, .snap-tile-link:focus-visible .snap-tile-img { transform: scale(1.04); }
.snap-tile-more { position: absolute; right: 0.4rem; top: 0.4rem; display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; font-weight: 700; }
.snap-tile-more svg { width: 0.85rem; height: 0.85rem; }
.snap-tile-words { display: flex; align-items: center; height: 100%; padding: 0.7rem 0.8rem; font-size: 0.9rem; line-height: 1.35;
overflow: hidden; }
.snap-tile-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0.35rem 0 0;
font-size: 0.8rem; color: var(--muted); }
.snap-tile-meta time { font-variant-numeric: tabular-nums; font-weight: 600; }
.snap-tile-tag { color: var(--accent); text-decoration: none; }
.snap-tile-tag::before { content: "#"; opacity: 0.6; }
.snap-tile-tag:hover { text-decoration: underline; }
:root { --pulse-likes: #2a78d6; --pulse-reposts: #eb6834; --pulse-replies: #1baf7a;
--pulse-mentions: #eda100; --pulse-bookmarks: #e87ba4; --pulse-guestbook: #008300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pulse-likes: #3987e5; --pulse-reposts: #d95926;
--pulse-replies: #199e70; --pulse-mentions: #c98500; --pulse-bookmarks: #d55181; --pulse-guestbook: #008300; } }
:root[data-theme="dark"] { --pulse-likes: #3987e5; --pulse-reposts: #d95926; --pulse-replies: #199e70;
--pulse-mentions: #c98500; --pulse-bookmarks: #d55181; --pulse-guestbook: #008300; }
.mod-pending-pill { text-decoration: none; }
.pulse { margin: 0.4rem 0 1.4rem; }
.pulse-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.pulse-tile { margin: 0; padding: 0.7rem 0.8rem 0.6rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pulse-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.pulse-label svg { width: 1rem; height: 1rem; }
.pulse-tile--likes .pulse-label svg { color: var(--pulse-likes); }
.pulse-tile--reposts .pulse-label svg { color: var(--pulse-reposts); }
.pulse-tile--replies .pulse-label svg { color: var(--pulse-replies); }
.pulse-tile--mentions .pulse-label svg { color: var(--pulse-mentions); }
.pulse-tile--bookmarks .pulse-label svg { color: var(--pulse-bookmarks); }
.pulse-tile--guestbook .pulse-label svg { color: var(--pulse-guestbook); }
.pulse-n { font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text); }
.pulse-sub { font-size: 0.72rem; }
.pulse-spark { display: block; width: 100%; height: 2.1rem; margin-top: 0.45rem; }
.pulse-spark rect { fill: currentColor; }
.pulse-spark rect:hover { opacity: 0.7; }
.pulse-spark--likes { color: var(--pulse-likes); }
.pulse-spark--reposts { color: var(--pulse-reposts); }
.pulse-spark--replies { color: var(--pulse-replies); }
.pulse-spark--mentions { color: var(--pulse-mentions); }
.pulse-spark--bookmarks { color: var(--pulse-bookmarks); }
.pulse-spark--guestbook { color: var(--pulse-guestbook); }
.pulse-spark rect.z { fill: var(--border); opacity: 1; }
.pulse-axis { display: flex; justify-content: space-between; margin: 0.25rem 0.2rem 0; font-size: 0.7rem; }
.pulse-sources { margin-top: 1rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.pulse-sources h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); }
.pulse-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pulse-sources li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.88rem; }
.pulse-src-bar { display: block; height: 0.6rem; border-radius: 999px; background: var(--accent-bg); overflow: hidden; }
.pulse-src-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pulse-src-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.mod-tabs { margin-top: 0.2rem; }
.mod-search { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.2rem; }
.mod-search input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; border-radius: 999px; padding: 0.5rem 1rem; }
.mod-search button { margin: 0; }
.mod-count { font-size: 0.85rem; margin: 0.4rem 0 0.6rem; }
.mod-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mod-list .mod-row { margin: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.mod-list .mod-row--pending { border-left: 4px solid var(--accent); }
.mod-list .mod-row--spam { opacity: 0.75; }
.mod-list .mod-reply { margin-left: calc(min(var(--depth, 1), 4) * 1rem); }
.mod-row-head { display: flex; gap: 0.7rem; align-items: center; }
.mod-face { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; margin: 0; background: var(--accent-bg); }
.mod-face--initial { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); }
.mod-row-who { min-width: 0; }
.mod-row-who p { margin: 0; }
.mod-row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; }
.mod-row-where { font-size: 0.8rem; overflow-wrap: anywhere; }
.mod-type { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--accent-bg); color: var(--muted); }
.mod-type svg { width: 0.85rem; height: 0.85rem; }
.mod-type--like svg { color: var(--pulse-likes); }
.mod-type--repost svg { color: var(--pulse-reposts); }
.mod-type--reply svg, .mod-type--comment svg { color: var(--pulse-replies); }
.mod-type--mention svg { color: var(--pulse-mentions); }
.mod-type--bookmark svg { color: var(--pulse-bookmarks); }
.mod-type--guestbook svg { color: var(--pulse-guestbook); }
.mod-list .mod-status { font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; }
.mod-status--pending { border-color: var(--accent); color: var(--accent); }
.mod-list blockquote { margin: 0.6rem 0 0; }
.mod-parent, .mod-signals { font-size: 0.82rem; margin: 0.5rem 0 0; }
.mod-row-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; margin-top: 0.6rem; }
.mod-links { margin: 0; font-size: 0.82rem; overflow-wrap: anywhere; }
.mod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0 auto; }
.mod-actions button { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.88rem; }
.mod-threads { margin-top: 0.4rem; }
.mod-thread { border-top: 1px solid var(--border); }
.mod-thread:first-child { border-top: 0; }
.mod-thread-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.8rem;
padding: 0.65rem 0.9rem; color: var(--text); text-decoration: none; }
.mod-thread-link:hover .mod-thread-title { color: var(--accent); text-decoration: underline; }
.mod-thread-title { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; line-height: 1.3; }
.mod-thread-marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.mod-mark { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--muted); }
.mod-mark svg { width: 0.95rem; height: 0.95rem; }
.mod-mark--like svg { color: var(--pulse-likes); }
.mod-mark--repost svg { color: var(--pulse-reposts); }
.mod-mark--comment svg { color: var(--pulse-replies); }
.mod-mark--link svg { color: var(--pulse-mentions); }
.mod-thread-when { min-width: 3.4rem; text-align: right; }
.maps-space .maps-space-total th, .maps-space .maps-space-total td { font-weight: 700; border-top: 2px solid var(--text); }
.maps-progress { margin: 0.8rem 0 1.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; }
.maps-progress p { margin: 0.5rem 0 0; }
.maps-progress-bar { height: 0.7rem; border-radius: 999px; background: var(--accent-bg); overflow: hidden; }
.maps-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.maps-keepgoing p { margin: 0.4rem 0; }
.tag-stream--years::before { left: 1.75rem; }
.tag-stream--years .tag-entry { grid-template-columns: 3.5rem minmax(0, 1fr); }
.tag-day--year { width: 3.5rem; height: 2.9rem; border-radius: 1.45rem; }
.tag-day--year .tag-day-n { font-size: 0.95rem; }
.tag-day--year .tag-day-w { font-size: 0.58rem; text-transform: none; letter-spacing: 0; }
.tag-stream--years .tag-entry--same::after { left: calc(1.75rem - 4px); }
.otd-nav { margin-top: 0.6rem; }
@media (max-width: 480px) {
.tag-stream--years .tag-entry { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 0.55rem; }
.tag-day--year { width: 3.2rem; height: 2.7rem; }
.tag-stream--years::before { left: 1.6rem; }
.tag-stream--years .tag-entry--same::after { left: calc(1.6rem - 4px); }
}
.note-card-bookmark { margin: 0.2rem 0 0; }
.note-card-bookmark .link-card { margin: 0.4rem 0 0.2rem; background: var(--bg); }
.catalog-grid--wall { grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr)); gap: 1.1rem 0.8rem; }
.catalog-grid--wall .catalog-cover-box { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
background: var(--accent-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); margin: 0 0 0.45rem; }
.catalog-grid--wall .catalog-card-album .catalog-cover-box,
.catalog-grid--wall .catalog-card-course .catalog-cover-box,
.catalog-grid--wall .catalog-card-puzzle .catalog-cover-box,
.catalog-grid--wall .catalog-card-project .catalog-cover-box { aspect-ratio: 1; }
.catalog-grid--wall .catalog-card-place .catalog-cover-box,
.catalog-grid--wall .catalog-card-match .catalog-cover-box { aspect-ratio: auto; box-shadow: none; background: none; overflow: visible; }
.catalog-grid--wall .catalog-cover-box img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform 0.25s; }
.catalog-grid--wall .catalog-card-place .catalog-cover-box img { height: auto; border-radius: 6px; }
.catalog-grid--wall .catalog-card a:hover .catalog-cover-box img { transform: scale(1.03); }
.catalog-grid--wall .catalog-cover-box .catalog-nocover { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-sizing: border-box; margin: 0; }
.catalog-grid--wall .p-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
font-size: 0.92rem; line-height: 1.3; font-weight: 600; color: var(--text); }
.catalog-grid--wall .catalog-card > .muted { display: block; font-size: 0.8rem; line-height: 1.35; margin-top: 0.1rem; }
.catalog-going { position: absolute; left: 0.35rem; top: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 999px;
background: var(--accent); color: var(--bg, #fff); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.catalog-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, 0.35); }
.catalog-bar span { display: block; height: 100%; background: var(--accent); }
.catalog-grid--wall .catalog-card > a { width: 100%; }
.log-nav { margin: 0.2rem 0 0.6rem; }
.log-entry .log-thumb { width: 5.6rem; height: 2.95rem; object-fit: cover; }
.log-entry .tag-row-title { font-size: 0.98rem; font-weight: 600; }
.log-card-plain .tag-row-title { color: var(--text); }
.h-feed .tag-row-link { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
.search-box input[type="search"] { border-radius: 999px; padding: 0.55rem 1rem; }
.search-kinds { margin: 0.6rem 0 0.2rem; }
.search-kinds .chip svg { width: 1rem; height: 1rem; }
.search-count { font-size: 0.88rem; }
.search-results { display: flex; flex-direction: column; gap: 0.6rem; }
.search-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; margin: 0;
padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.search-result-pic { display: block; line-height: 0; }
.search-result-text { min-width: 0; }
.search-result-kind { margin: 0 0 0.1rem; }
.search-result h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 0.2rem; }
.search-result h2 a { text-decoration: none; color: var(--text); }
.search-result h2 a:hover { color: var(--accent); text-decoration: underline; }
.search-result .search-excerpt { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.search-result .search-excerpt mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); padding: 0 0.1em; border-radius: 3px; }
.pagination { gap: 0.4rem; align-items: center; margin: 0.8rem 0; }
.pagination a, .pagination strong { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0 0.75rem;
border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text);
font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination strong { background: var(--accent); border-color: var(--accent); color: var(--bg, #fff); }
.pagination > span { color: var(--muted); font-size: 0.9rem; padding: 0 0.3rem; }
.pagination [rel="prev"], .pagination [rel="next"] { font-weight: 600; border-color: var(--accent); color: var(--accent); }
.year-nav { color: inherit; }
.year-nav a, .year-nav strong { min-height: 1.9rem; padding: 0 0.65rem; font-size: 0.85rem; }
.shelf-widget { margin: 1.2rem 0; }
.shelf-widget .sw-head { font-size: var(--size-h6); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.sw-count { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.sw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.sw-row { margin: 0; }
.sw-row > a { display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0.65rem; border: 1px solid var(--border);
border-radius: 12px; background: var(--bg); color: var(--text); text-decoration: none; }
.sw-row > a:hover { border-color: var(--accent); }
.e-content .sw-cover, .sw-cover { flex: none; width: 2.8rem; height: 4rem; object-fit: cover; border-radius: 4px; margin: 0; background: var(--accent-bg); }
.sw-cover--icon { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.sw-cover--icon svg { width: 1.3rem; height: 1.3rem; }
.sw-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.sw-row .sw-name { font-weight: 600; font-size: 0.98rem; min-height: 0; }
.sw-by { font-size: 0.82rem; color: var(--muted); }
.sw-row .sw-line { font-size: 0.78rem; }
.sw-bar { display: block; height: 4px; border-radius: 999px; background: var(--accent-bg); overflow: hidden; margin-top: 0.25rem; }
.sw-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.media-filter input[type=search] { border-radius: 999px; padding: 0.5rem 1rem; }
.media-upload { margin: 0.8rem 0 1rem; gap: 0.5rem; }
.media-upload .media-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
padding: 1.3rem 1rem; border: 2px dashed var(--border); border-radius: 14px; background: var(--accent-bg);
text-align: center; cursor: pointer; font-weight: 400; transition: border-color 0.15s, background 0.15s; }
.media-drop:hover, .media-drop.is-over { border-color: var(--accent); }
.media-drop.is-over { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.media-drop-icon svg { width: 1.8rem; height: 1.8rem; color: var(--accent); }
.media-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.media-drop-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: grid; gap: 0.15rem; }
.media-drop-list .is-ok { color: var(--muted); }
.media-drop-list .is-bad { color: var(--danger); }
.media-drop-done { font-weight: 700; }
.media-alt-fold > summary { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.media-grid { grid-template-columns: repeat(auto-fill, minmax(min(31%, 9rem), 1fr)); gap: 0.6rem; }
.media-tile img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.media-tile figcaption { font-size: 0.72rem; line-height: 1.35; margin-top: 0.25rem; }
.media-tile .md-ready { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.media-tile .md-copy { position: relative; display: block; }
.md-copy-btn { font-size: 0.75rem; padding: 0; }
.health-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.6rem 0 0.8rem; }
.health-tile { padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; }
.health-tile strong { font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.health-tile span { font-size: 0.8rem; color: var(--muted); }
.health-tile--bad.is-on { border-color: var(--danger); }
.health-tile--bad.is-on strong { color: var(--danger); }
.health-tile--warn.is-on strong { color: var(--accent); }
.health-tile--warn.is-on { border-color: var(--accent); }
.health-needs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.health-need { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0.6rem; margin: 0; padding: 0.7rem 0.8rem;
border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--bg); }
.health-need--bad { border-left-color: var(--danger); }
.health-need-mark { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
background: var(--accent-bg); font-weight: 700; color: var(--accent); }
.health-need--bad .health-need-mark { color: var(--danger); }
.health-need p { margin: 0.1rem 0; overflow-wrap: anywhere; }
.health-need-value code { font-size: 0.82rem; }
.health-need-note { font-size: 0.85rem; }
.health-section, .health-tool { margin: 0.5rem 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.health-section > summary, .health-tool > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
margin: 0; padding: 0.7rem 0.9rem; font-weight: 400; list-style: none; }
.health-section > summary::-webkit-details-marker, .health-tool > summary::-webkit-details-marker { display: none; }
.health-section > summary h2, .health-tool > summary h2 { font-size: 1.02rem; margin: 0; }
.health-section > summary::after, .health-tool > summary::after { content: "›"; color: var(--muted); transition: transform 0.15s; }
.health-section[open] > summary::after, .health-tool[open] > summary::after { transform: rotate(90deg); }
.health-section[open], .health-tool[open] { padding-bottom: 0.4rem; }
.health-section > :not(summary), .health-tool > :not(summary) { margin-left: 0.9rem; margin-right: 0.9rem; }
.health-section-sum { margin-left: auto; font-size: 0.78rem; color: var(--muted); white-space: nowrap; flex: none; padding-left: 0.5rem; }
.health-section-sum.is-warn { color: var(--accent); font-weight: 700; }
.health-tools-head { font-size: var(--size-h6); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 1.4rem 0 0.4rem; }
.kobo-tiles .kobo-tile-when { font-size: 1.15rem; line-height: 1.6; }
.tool-why { margin: 0.4rem 0 0.8rem; }
.tool-why > summary { font-size: 0.9rem; color: var(--accent); font-weight: 400; }
.sw-intro { margin: -0.2rem 0 0.6rem; font-size: 0.95rem; color: var(--text); }
.sc-step0, .sc-recipe { margin: 1rem 0; }
.sc-recipe h2 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.sc-recipe h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }
.sc-steps { padding-left: 1.4rem; display: grid; gap: 0.45rem; }
.sc-steps li { line-height: 1.45; }
.sc-copy { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.sc-copy input { flex: 1; min-width: 0; font-family: var(--font-code); font-size: 0.75rem; margin: 0; }
.sc-copy button { margin: 0; flex: none; }
.now-head { margin-bottom: 0.6rem; }
.now-head h1 { margin-bottom: 0.15rem; }
.now-updated { margin: 0; font-size: 0.9rem; }
.now-intro { margin-bottom: 1.2rem; }
.now-body > section + section { margin-top: 1.4rem; }
.e-content .sw-cover--square, .sw-cover--square { width: 3rem; height: 3rem; border-radius: 8px; }
.sw-cover--svg svg { width: 100%; height: 100%; }
.now-takeover { border-color: var(--accent); margin: 0.8rem 0 1.2rem; }
.now-takeover h2 { margin-top: 0; font-size: 1.1rem; }
.now-released { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0.6rem 0 1rem; }
.now-released p { margin: 0; }
.now-top { display: grid; gap: 0.7rem; }
form.stack .now-top label { margin-top: 0; }
.now-sec-head { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.4rem 0 0.5rem; font-size: 1.15rem; }
.now-sec-head .muted { font-size: 0.85rem; font-weight: 400; }
.now-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.now-sec { border: 1px solid var(--border); border-radius: 14px; padding: 0.7rem 0.8rem 0.8rem; background: var(--bg); }
.now-sec.is-hidden { opacity: 0.6; }
.now-sec-bar { display: flex; align-items: center; gap: 0.5rem; }
form.stack label.now-sec-show { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
form.stack .now-sec-show input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
form.stack label.toggle { display: flex; margin-top: 0.4rem; }
form.stack label.toggle input { width: auto; flex: none; }
.now-sec-edit { margin: 0.5rem 0 0; }
.now-sec-edit > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 0.6rem;
padding: 0.5rem 0.6rem; border-radius: 10px; background: var(--accent-bg); }
.now-sec-edit > summary::-webkit-details-marker { display: none; }
.now-sec-h { font-weight: 700; font-size: 0.95rem; }
.now-sec-words { grid-column: 1; font-size: 0.85rem; line-height: 1.35; }
.now-sec-pen { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); display: inline-flex; }
.now-sec-pen svg { width: 1.1rem; height: 1.1rem; }
.now-sec-edit[open] > summary .now-sec-pen { opacity: 0.4; }
form.stack .now-sec-fields label { margin-top: 0; }
.now-sec-icon { display: inline-flex; color: var(--accent); }
.now-sec-icon svg { width: 1.2rem; height: 1.2rem; }
.now-sec-type { font-size: 0.78rem; white-space: nowrap; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent); }
.now-sec-type.is-empty { color: var(--muted); background: none; border: 1px solid var(--border); }
.now-sec-move { display: inline-flex; gap: 0.25rem; flex: none; }
.now-sec-move .icon-btn { min-width: 2.2rem; min-height: 2.2rem; padding: 0; font-size: 0.75rem; }
.now-sec-fields { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.now-sec-fields textarea { min-height: 3.2rem; }
.now-count select { width: auto; margin-left: 0.4rem; }
.now-habits-pick { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; border: 0; padding: 0; margin: 0; }
.now-habits-pick legend { font-size: 0.9rem; padding: 0; margin-bottom: 0.3rem; }
.now-save { position: sticky; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); margin: 0.8rem 0 0; z-index: 2; }
.now-off { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; opacity: 0.75; }
.now-off li { display: flex; align-items: center; gap: 0.5rem; }
.snap-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .snap-grid { grid-template-columns: repeat(3, 1fr); } }
.snap-tile-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex;
align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding-left: 0.2rem; border-radius: 50%;
background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1rem; pointer-events: none; }
.snap-tile-play--inline { position: static; transform: none; flex: none; width: 1.8rem; height: 1.8rem; font-size: 0.75rem;
margin-right: 0.6rem; background: var(--accent); color: var(--bg); }
.timeline-list { margin-top: 0.4rem; }
.mv-how { display: flex; align-items: stretch; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.mv-how-box { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem;
padding: 0.6rem 0.4rem; border-radius: 12px; background: var(--accent-bg); font-size: 0.85rem; }
.mv-how-box svg { width: 1.4rem; height: 1.4rem; color: var(--accent); }
.mv-how-box small { color: var(--muted); font-size: 0.75rem; line-height: 1.25; }
.mv-how-arrow { align-self: center; color: var(--muted); }
.mv-card { margin: 0 0 1rem; }
.mv-card h2 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.mv-key { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.mv-here, .mv-sites { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; }
.mv-here li { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 0.4rem; }
.mv-sub { font-size: 1rem; margin: 1rem 0 0.2rem; }
.mv-site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem;
padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 12px; }
.mv-site-name { display: inline-flex; align-items: center; gap: 0.4rem; }
.mv-site-name svg { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.mv-site-note { font-size: 0.85rem; }
.mv-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mv-start label.toggle { font-size: 0.85rem; margin: 0; }
.mv-badge { font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent); }
.mv-copy-card.is-live { border-color: var(--accent); }
.mv-bar { height: 0.6rem; border-radius: 999px; background: var(--accent-bg); overflow: hidden; margin: 0.4rem 0 0.8rem; }
.mv-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s; }
.mv-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; margin: 0; }
@media (min-width: 40rem) { .mv-nums { grid-template-columns: repeat(4, 1fr); } }
.mv-nums dt { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mv-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-pace { margin: 0.5rem 0; font-size: 0.85rem; }
.mv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.mv-failed { margin: 0.4rem 0; }
.mv-next { margin: 0.8rem 0 0; font-size: 0.88rem; }