/* ============================================================
   COMMUNITY — comments on posts, the guest byline, related
   calculators, and the account pages. Uses the site's tokens
   only, so it follows light/dark and the Design panel.
   ============================================================ */

/* ---------- Comments ---------- */
.comments .cm-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.cm-title { font-size: var(--text-h2); letter-spacing: var(--tracking-tight, -0.01em); }
.cm-list { display: flex; flex-direction: column; gap: var(--s-6); }

.cm { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4); scroll-margin-top: 6rem; }
.cm + .cm { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.cm-reply { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); }
.cm-reply + .cm-reply { border-top: 0; padding-top: 0; }
.cm:target > .cm-main > .cm-body { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: var(--radius); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }

.cm-avatar {
    --cm-hue: 200;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
    font: 600 var(--text-xs)/1 var(--font-mono, monospace); letter-spacing: .02em;
    color: hsl(var(--cm-hue) 55% 30%); background: hsl(var(--cm-hue) 60% 90%);
}
[data-theme="dark"] .cm-avatar { color: hsl(var(--cm-hue) 70% 80%); background: hsl(var(--cm-hue) 35% 20%); }
.cm-reply .cm-avatar { width: 2rem; height: 2rem; font-size: var(--text-micro); }
.cm-avatar-lg { width: 64px; height: 64px; flex: none; font-size: var(--text-base); }

.cm-main { min-width: 0; }
.cm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.cm-name { font-weight: 600; color: var(--fg); }
.cm-badge {
    font: 500 var(--text-micro)/1 var(--font-mono, monospace); letter-spacing: var(--tracking-label, .08em); text-transform: uppercase;
    padding: .3rem .5rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg-muted);
}
.cm-badge-author, .cm-badge-site-owner { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cm-time { font: var(--text-xs)/1 var(--font-mono, monospace); color: var(--fg-subtle); text-decoration: none; }
.cm-time:hover { color: var(--fg); }
.cm-pending { font: var(--text-xs)/1.3 var(--font-mono, monospace); color: var(--hazard); }
.is-pending > .cm-main > .cm-body { opacity: .78; }

.cm-body { margin-top: var(--s-2); color: var(--fg); line-height: 1.65; overflow-wrap: anywhere; }
.cm-body p + p { margin-top: var(--s-3); }
.cm-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cm-gone { color: var(--fg-subtle); font-style: italic; }

.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); }
.cm-inline { display: inline-flex; gap: var(--s-3); margin: 0; }
.cm-act {
    font: 500 var(--text-xs)/1.2 var(--font-mono, monospace); color: var(--fg-muted);
    background: none; border: 0; padding: .35rem 0; cursor: pointer; text-decoration: none;
}
.cm-act:hover { color: var(--accent); }
.cm-act-ok { color: var(--verified); }
.cm-act-quiet { color: var(--fg-subtle); }
.cm-replies { margin-top: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4); }

/* Form */
.cm-form { display: flex; flex-direction: column; gap: var(--s-5, 1.25rem); }
.cm-form.is-reply { margin-top: var(--s-4); padding: var(--s-6); }
.cm-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.cm-form-title { font-size: var(--text-h3); }
.cm-text { min-height: 7rem; }
.cm-hint { display: flex; justify-content: space-between; gap: var(--s-4); }
.field-label em, .cm-who em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--fg-faint); }
.cm-who { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.cm-who legend { margin-bottom: var(--s-2); width: 100%; }
.cm-choice, .cm-check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--fg); }
.cm-choice small { color: var(--fg-subtle); font-size: var(--text-xs); }
.cm-choice input, .cm-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.cm-check.is-off { opacity: .5; }
.cm-guest { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cm-guest .cm-check { grid-column: 1 / -1; }
.cm-guest [hidden] + .field { grid-column: 1 / -1; }
.cm-submit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.cm-submit .form-note { flex: 1 1 16rem; margin: 0; }
@media (max-width: 640px) {
    .cm-guest { grid-template-columns: 1fr; }
    .cm-replies { padding-left: var(--s-3); }
    .cm { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); }
    .cm-avatar { width: 2rem; height: 2rem; }
}

/* ---------- Related calculators on a post ---------- */
.related-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-4); }
.related-tool {
    display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-raised)); text-decoration: none; color: var(--fg);
    transition: border-color var(--dur-fast, .15s), transform var(--dur-fast, .15s);
}
.related-tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-tool strong { font-size: var(--text-lg); }
.related-tool .muted { font-size: var(--text-sm); }

/* "Explained in" under a calculator on /tools */
.tool-read { margin-top: var(--s-4); font: var(--text-xs)/1.4 var(--font-mono, monospace); color: var(--fg-subtle); }
.tool-read a { color: var(--accent); text-decoration: none; }
.tool-read a:hover { text-decoration: underline; }

/* ---------- Account pages ---------- */
.acct-h { font-size: var(--text-h3); margin-bottom: var(--s-4); }
.acct-comments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.acct-comments li + li { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.acct-snip { margin-top: var(--s-1); color: var(--fg-muted); font-size: var(--text-sm); }
.acct-danger summary { cursor: pointer; }

/* ---------- The bell ---------- */
.bell { position: relative; display: inline-flex; }
.bell-btn {
    position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer;
}
.bell-btn:hover { background: var(--bg-inset); }
.bell-count {
    position: absolute; top: -.3rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
    display: grid; place-items: center; font: 700 .66rem/1 var(--font-mono, monospace);
    background: var(--fault); color: #fff; box-shadow: 0 0 0 2px var(--bg);
}
.bell-count[hidden] { display: none; }
.bell-panel {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 80; width: min(22rem, calc(100vw - 2rem));
    background: var(--bg-raised); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -18px rgb(0 0 0 / .35); overflow: hidden; text-align: left;
}
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.bell-link { background: none; border: 0; color: var(--accent); font-size: var(--text-xs); cursor: pointer; padding: 0; }
.bell-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; }
.bell-list a, .notif-page a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .6rem; padding: .75rem 1rem; text-decoration: none; color: var(--fg); align-items: start; }
.bell-list li + li, .notif-page li + li { border-top: 1px solid var(--line); }
.bell-list a:hover, .notif-page a:hover { background: var(--bg-inset); }
.bell-list .is-unread a, .notif-page .is-unread a { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bell-list .is-unread strong::before, .notif-page .is-unread strong::before { content: ''; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); margin-right: .4rem; vertical-align: middle; }
.bell-ico, .notif-ico { font-size: 1rem; line-height: 1.3; text-align: center; }
.bell-text, .notif-text { display: grid; gap: .15rem; font-size: var(--text-sm); line-height: 1.35; min-width: 0; }
.bell-text strong, .notif-text strong { font-weight: 600; }
.bell-text span, .notif-text span { color: var(--fg-muted); font-size: var(--text-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell-list time { font: var(--text-micro)/1.6 var(--font-mono, monospace); color: var(--fg-subtle); }
.bell-empty { padding: 1.2rem 1rem; color: var(--fg-subtle); font-size: var(--text-sm); }
.bell-all { display: block; padding: .7rem 1rem; border-top: 1px solid var(--line); text-align: center; font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.notif-page { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ---------- Homepage: Beyond work ---------- */
.beyond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 960px) { .beyond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .beyond-grid { grid-template-columns: 1fr; } }
.beyond-card {
    --topic-hue: 200;
    position: relative; display: flex; flex-direction: column; gap: var(--s-3);
    padding: var(--s-6); border-radius: var(--radius-lg); text-decoration: none; color: var(--fg);
    background: var(--bg-raised); border: 1px solid var(--line);
    transition: border-color var(--dur-fast, .15s), transform var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s);
    overflow: hidden;
}
.beyond-card::before {
    content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
    background: hsl(var(--topic-hue) 60% 50%); opacity: .7;
}
.beyond-card:hover { border-color: hsl(var(--topic-hue) 50% 55% / .6); transform: translateY(-3px); box-shadow: 0 18px 40px -24px hsl(var(--topic-hue) 60% 30% / .45); }
.beyond-num { font-size: var(--text-xs); color: var(--fg-subtle); letter-spacing: .08em; }
.beyond-card h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-tight, -0.01em); line-height: 1.2; }
.beyond-card p { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.6; flex: 1; }
.beyond-more { font-size: var(--text-xs); color: hsl(var(--topic-hue) 55% 40%); }
[data-theme="dark"] .beyond-more { color: hsl(var(--topic-hue) 65% 70%); }
/* The whole card opens its About section (the title link stretches over it);
   the "latest post" link sits above that layer so it can be clicked on its own. */
.beyond-card:focus-within { outline: 2px solid hsl(var(--topic-hue) 60% 55%); outline-offset: 3px; }
.beyond-link { color: inherit; text-decoration: none; }
.beyond-link:focus-visible { outline: none; }
.beyond-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.dpe-editing .beyond-link::after { display: none; }          /* on-page editor: let clicks reach the words */
.beyond-post {
    position: relative; z-index: 2; display: grid; gap: .2rem;
    padding: var(--s-3) var(--s-4); margin: 0 calc(var(--s-2) * -1);
    border-radius: var(--radius-md, 10px); text-decoration: none; color: var(--fg);
    background: hsl(var(--topic-hue) 60% 50% / .07); border: 1px solid hsl(var(--topic-hue) 50% 55% / .22);
    transition: background var(--dur-fast, .15s), border-color var(--dur-fast, .15s);
}
.beyond-post:hover { background: hsl(var(--topic-hue) 60% 50% / .14); border-color: hsl(var(--topic-hue) 50% 55% / .5); }
.beyond-post-k { font-size: var(--text-micro, .68rem); letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--topic-hue) 55% 40%); }
[data-theme="dark"] .beyond-post-k { color: hsl(var(--topic-hue) 65% 70%); }
.beyond-post-t { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }

/* ---------- Writing page: topic groups ---------- */
.topic-groups { display: grid; gap: var(--s-3); }
.topic-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.topic-group-label { font: 500 var(--text-micro)/1 var(--font-mono, monospace); letter-spacing: var(--tracking-label, .08em); text-transform: uppercase; color: var(--fg-subtle); min-width: 7.5rem; }
@media (max-width: 600px) { .topic-group-label { min-width: 0; width: 100%; } }

/* ---------- About page: Outside work (one section per homepage card) ---------- */
.beyond-list { display: grid; gap: var(--s-6); }
.beyond-item {
    --topic-hue: 200;
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4);
    padding: var(--s-6) 0 0; border-top: 1px solid var(--line);
    scroll-margin-top: 6.5rem;                 /* clear the fixed top bar when opened from a homepage card */
}
.beyond-item:first-child { border-top: 0; padding-top: 0; }
.beyond-item h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-tight, -0.01em); line-height: 1.25; }
.beyond-item p { margin-top: var(--s-2); color: var(--fg-muted); line-height: 1.7; max-width: 62ch; }
.beyond-item .beyond-more { display: inline-block; margin-top: var(--s-3); text-decoration: none; }
.beyond-item:target h2 { color: hsl(var(--topic-hue) 55% 42%); }
[data-theme="dark"] .beyond-item:target h2 { color: hsl(var(--topic-hue) 65% 72%); }
.beyond-item .beyond-num { padding-top: .35rem; }
.beyond-posts { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: .1rem; max-width: 62ch; }
.beyond-posts a {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
    padding: .55rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg);
}
.beyond-posts li:first-child a { border-top: 1px solid var(--line); }
.beyond-posts a:hover .beyond-posts-t { color: hsl(var(--topic-hue) 55% 40%); }
[data-theme="dark"] .beyond-posts a:hover .beyond-posts-t { color: hsl(var(--topic-hue) 65% 72%); }
.beyond-posts-t { font-weight: 600; line-height: 1.4; }
.beyond-posts-t::before { content: '→ '; color: hsl(var(--topic-hue) 55% 50%); font-weight: 400; }
.beyond-posts-d { flex: none; font-size: var(--text-xs); color: var(--fg-subtle); }

/* ---------- Post page: link back to its "rest of the story" card ---------- */
.story-link {
    --topic-hue: 200;
    display: grid; gap: .25rem; padding: var(--s-4) var(--s-6); border-radius: var(--radius-lg);
    text-decoration: none; color: var(--fg); background: var(--bg-raised);
    border: 1px solid var(--line); border-left: 3px solid hsl(var(--topic-hue) 60% 50%);
    transition: border-color var(--dur-fast, .15s), transform var(--dur-fast, .15s);
}
.story-link:hover { border-color: hsl(var(--topic-hue) 50% 55% / .6); border-left-color: hsl(var(--topic-hue) 60% 50%); transform: translateY(-2px); }
.story-link-k { font-size: var(--text-micro, .68rem); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.story-link-t { font-size: var(--text-h4, 1.25rem); font-weight: 600; line-height: 1.3; }
.story-link-more { font-size: var(--text-xs); color: hsl(var(--topic-hue) 55% 40%); }
[data-theme="dark"] .story-link-more { color: hsl(var(--topic-hue) 65% 70%); }