@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

.highlight table td { padding: 5px; }

.highlight table pre { margin: 0; }

.highlight .cm { color: #999988; font-style: italic; }

.highlight .cp { color: #999999; font-weight: bold; }

.highlight .c1 { color: #999988; font-style: italic; }

.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }

.highlight .c, .highlight .cd { color: #999988; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .gd { color: #000000; background-color: #ffdddd; }

.highlight .ge { color: #000000; font-style: italic; }

.highlight .gr { color: #aa0000; }

.highlight .gh { color: #999999; }

.highlight .gi { color: #000000; background-color: #ddffdd; }

.highlight .go { color: #888888; }

.highlight .gp { color: #555555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaaaaa; }

.highlight .gt { color: #aa0000; }

.highlight .kc { color: #000000; font-weight: bold; }

.highlight .kd { color: #000000; font-weight: bold; }

.highlight .kn { color: #000000; font-weight: bold; }

.highlight .kp { color: #000000; font-weight: bold; }

.highlight .kr { color: #000000; font-weight: bold; }

.highlight .kt { color: #445588; font-weight: bold; }

.highlight .k, .highlight .kv { color: #000000; font-weight: bold; }

.highlight .mf { color: #009999; }

.highlight .mh { color: #009999; }

.highlight .il { color: #009999; }

.highlight .mi { color: #009999; }

.highlight .mo { color: #009999; }

.highlight .m, .highlight .mb, .highlight .mx { color: #009999; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .bp { color: #999999; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #445588; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .nd { color: #3c5d5d; font-weight: bold; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #990000; font-weight: bold; }

.highlight .nf { color: #990000; font-weight: bold; }

.highlight .nl { color: #990000; font-weight: bold; }

.highlight .nn { color: #555555; }

.highlight .nt { color: #000080; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .nv { color: #008080; }

.highlight .ow { color: #000000; font-weight: bold; }

.highlight .o { color: #000000; font-weight: bold; }

.highlight .w { color: #bbbbbb; }

.highlight { background-color: #f8f8f8; }

* { box-sizing: border-box; }

body { padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #606c71; }

#skip-to-content { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
#skip-to-content:focus { position: fixed; top: 10px; left: 10px; height: auto; width: auto; background: #e19447; outline: thick solid #e19447; }

a { color: #1e6bb8; text-decoration: none; }
a:hover { text-decoration: underline; }

.btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.btn + .btn { margin-left: 1rem; }
@media screen and (min-width: 64em) { .btn { padding: 0.75rem 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
@media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
  .btn + .btn { margin-top: 1rem; margin-left: 0; } }

.page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }

.project-name { margin-top: 0; margin-bottom: 0.1rem; }
@media screen and (min-width: 64em) { .project-name { font-size: 3.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 2.25rem; } }
@media screen and (max-width: 42em) { .project-name { font-size: 1.75rem; } }

.project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; }
@media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-tagline { font-size: 1.15rem; } }
@media screen and (max-width: 42em) { .project-tagline { font-size: 1rem; } }

.main-content { word-wrap: break-word; }
.main-content :first-child { margin-top: 0; }
@media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 4rem; font-size: 1.1rem; } }
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } }
.main-content kbd { background-color: #fafbfc; border: 1px solid #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; box-shadow: inset 0 -1px 0 #959da5; color: #444d56; display: inline-block; font-size: 11px; line-height: 10px; padding: 3px 5px; vertical-align: middle; }
.main-content img { max-width: 100%; }
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; color: #159957; }
.main-content p { margin-bottom: 1em; }
.main-content code { padding: 2px 4px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9rem; color: #567482; background-color: #f3f6fa; border-radius: 0.3rem; }
.main-content pre { padding: 0.8rem; margin-top: 0; margin-bottom: 1rem; font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #567482; word-wrap: normal; background-color: #f3f6fa; border: solid 1px #dce6f0; border-radius: 0.3rem; }
.main-content pre > code { padding: 0; margin: 0; font-size: 0.9rem; color: #567482; word-break: normal; white-space: pre; background: transparent; border: 0; }
.main-content .highlight { margin-bottom: 1rem; }
.main-content .highlight pre { margin-bottom: 0; word-break: normal; }
.main-content .highlight pre, .main-content pre { padding: 0.8rem; overflow: auto; font-size: 0.9rem; line-height: 1.45; border-radius: 0.3rem; -webkit-overflow-scrolling: touch; }
.main-content pre code, .main-content pre tt { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; }
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after { content: normal; }
.main-content ul, .main-content ol { margin-top: 0; }
.main-content blockquote { padding: 0 1rem; margin-left: 0; color: #819198; border-left: 0.3rem solid #dce6f0; }
.main-content blockquote > :first-child { margin-top: 0; }
.main-content blockquote > :last-child { margin-bottom: 0; }
.main-content table { display: block; width: 100%; overflow: auto; word-break: normal; word-break: keep-all; -webkit-overflow-scrolling: touch; }
.main-content table th { font-weight: bold; }
.main-content table th, .main-content table td { padding: 0.5rem 1rem; border: 1px solid #e9ebec; }
.main-content dl { padding: 0; }
.main-content dl dt { padding: 0; margin-top: 1rem; font-size: 1rem; font-weight: bold; }
.main-content dl dd { padding: 0; margin-bottom: 1rem; }
.main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; }

.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; }
@media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .site-footer { font-size: 1rem; } }
@media screen and (max-width: 42em) { .site-footer { font-size: 0.9rem; } }

.site-footer-owner { display: block; font-weight: bold; }

.site-footer-credits { color: #819198; }

/* ------------------------------------------------------------------------- Theme tokens (light is default; [data-theme="dark"] overrides on <html>) ------------------------------------------------------------------------- */
/* Terminal-editorial palette. The new reference tokens (--bg-page, --text-1, --line, --font-mono …) are the source of truth; the existing names (--bg, --text, --accent …) are mapped onto them so every component already wired to them re-skins automatically. Light is default; [data-theme="dark"] on <html> overrides. */
:root { /* reference design tokens (canonical) */ --bg-page: #F7F6F2; --bg-surface: #FFFFFF; --bg-subtle: #EFEDE7; --text-1: #1A1A18; --text-2: #5F5E5A; --text-3: #8A887F; --line: rgba(0, 0, 0, .10); --line-strong: rgba(0, 0, 0, .16); --accent: #0F6E56; --accent-bright: #1D9E75; --flame: #BA7517; --r-md: 8px; --r-lg: 12px; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Times New Roman", serif; --font-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; /* legacy aliases, mapped onto the canonical tokens above */ --bg: var(--bg-page); --bg-soft: var(--bg-subtle); --bg-card: var(--bg-surface); --bg-summary: var(--bg-subtle); --text: var(--text-1); --text-muted: var(--text-2); --text-faint: var(--text-3); --accent-strong: var(--accent-bright); --accent-soft: #E1F5EE; --border: var(--line-strong); --border-soft: var(--line); --badge-time-bg: var(--accent); --badge-time-fg: #ffffff; --badge-topic-bg: #E1F5EE; --badge-topic-fg: #0F6E56; --badge-source-bg: #FAEEDA; --badge-source-fg: #633806; --badge-source-border: #ecd9b4; --badge-dup-bg: #E1F5EE; --badge-dup-fg: #085041; --shadow-card: 0 1px 3px rgba(27, 31, 36, 0.04); --shadow-card-hover: 0 3px 10px rgba(27, 31, 36, 0.09); --state-btn-fg: #adb5bd; --state-btn-active-fg: #c07b00; --state-btn-read-active-fg: #0F6E56; }

[data-theme="dark"] { --bg-page: #0E0F11; --bg-surface: #16181B; --bg-subtle: #1C1F23; --text-1: #E9E8E3; --text-2: #A8A69E; --text-3: #74726B; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .16); --accent: #2BB489; --accent-bright: #38D0A0; --flame: #E0A33C; --accent-soft: #14302A; --badge-time-bg: var(--accent); --badge-time-fg: #06231b; --badge-topic-bg: #14302A; --badge-topic-fg: #57D3AC; --badge-source-bg: #3d2e00; --badge-source-fg: #f5d27a; --badge-source-border: #6b5103; --badge-dup-bg: #15302A; --badge-dup-fg: #6FDDB6; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 3px 10px rgba(0, 0, 0, 0.55); --state-btn-fg: #6e7681; --state-btn-active-fg: #E0A33C; --state-btn-read-active-fg: #38D0A0; }

html { scroll-behavior: smooth; }

html, body { background: var(--bg); color: var(--text); }

.main-content { font-family: var(--font-sans); color: var(--text); }

[data-theme="dark"] .main-content, [data-theme="dark"] .main-content p, [data-theme="dark"] .main-content li { color: var(--text); }

[data-theme="dark"] .main-content h1, [data-theme="dark"] .main-content h2, [data-theme="dark"] .main-content h3, [data-theme="dark"] .main-content h4 { color: var(--text); border-color: var(--border); }

[data-theme="dark"] .main-content a { color: var(--accent); }

[data-theme="dark"] .site-footer { border-top-color: var(--border); color: var(--text-faint); }

.site-footer-link { color: inherit; text-decoration: none; }

.site-footer-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------- Theme toggle button (top-right of the page header) ------------------------------------------------------------------------- */
.page-header { position: relative; }

.theme-toggle { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(0, 0, 0, 0.15); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; padding: 0; transition: background 0.15s, transform 0.15s; z-index: 5; }

.theme-toggle:hover { background: rgba(0, 0, 0, 0.3); transform: scale(1.05); }

.theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { display: none; }

[data-theme="light"] .theme-toggle .theme-icon-dark, :root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: inline; }

[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline; }

/* ------------------------------------------------------------------------- Existing site components, themed via the variables above ------------------------------------------------------------------------- */
.rss-link { display: inline-block; padding: 6px 14px; background: var(--accent); color: #fff !important; border-radius: 20px; text-decoration: none; font-size: 0.9rem; }

.rss-link:hover { background: var(--accent-strong); text-decoration: none; }

.archive-list { list-style: none; padding-left: 0; }

.archive-list li { padding: 8px 12px; margin-bottom: 6px; background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 4px; }

.archive-list li a { font-family: "SF Mono", Consolas, monospace; font-weight: 600; color: var(--accent); }

.source-section { margin: 2rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border-soft); color: var(--accent); }

.source-empty { color: var(--text-faint); font-style: italic; padding: 0.5rem 0 1rem; }

.topic-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--bg-soft); border-radius: 6px; margin-bottom: 1.5rem; list-style: none; }

.topic-summary li { padding: 4px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; font-size: 0.85rem; color: var(--text); }

.topic-summary strong { color: var(--accent); }

/* Clickable topic tags (jump / filter the article list) */
.topic-summary li.is-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; }

.topic-summary li.is-clickable:hover { background: var(--accent-soft); border-color: var(--accent); }

.topic-summary li.is-clickable:active { transform: translateY(1px); }

.topic-summary li.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topic-summary li.is-active { background: var(--accent); border-color: var(--accent); }

.topic-summary li.is-active strong, .topic-summary li.is-active { color: #fff; }

/* If the generator emits an inner <a>, neutralise its default link styling. */
.topic-summary li > a { color: inherit; text-decoration: none; display: block; }

/* 「📌 今日の要点 TOP N」最上部ダイジェスト。 既存のカード/ボックス系の CSS 変数を再利用し、ダークテーマ追従する。 */
.today-top { margin: 0 0 1.75rem; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; }

.today-top-heading { margin: 0 0 0.75rem; font-size: 1.15rem; color: var(--text); }

.today-top-list { margin: 0; padding: 0; list-style: none; /* 視覚的な順位は ::before のカウンタで描画 */ counter-reset: today-top; /* 並び順そのものは <ol> が保持（SR に伝わる） */ }

.today-top-item { counter-increment: today-top; position: relative; padding: 0.55rem 0 0.55rem 2.4rem; border-top: 1px solid var(--border-soft); }

.today-top-item:first-child { border-top: none; padding-top: 0.15rem; }

.today-top-item::before { content: counter(today-top); position: absolute; left: 0; top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; background: var(--badge-time-bg); color: var(--badge-time-fg); border-radius: 50%; font-size: 0.8rem; font-weight: 700; font-family: "SF Mono", Consolas, monospace; }

.today-top-item:first-child::before { top: 0.15rem; }

.today-top-link { color: var(--text); font-weight: 600; text-decoration: none; line-height: 1.45; }

.today-top-link:hover { color: var(--accent); text-decoration: underline; }

.today-top-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.today-top-source { display: inline-block; margin-left: 8px; padding: 1px 9px; background: var(--badge-topic-bg); color: var(--badge-topic-fg); border-radius: 12px; font-size: 0.72rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }

.today-top-snippet { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 600px) { .today-top { padding: 12px 14px; }
  .today-top-source { margin-left: 0; margin-top: 4px; } }
/* Filter status bar shown above the article accordion while a topic is active */
.topic-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin: 1.5rem 0 0.5rem; background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; }

.topic-filter-label { flex: 1; font-weight: 600; color: var(--accent); font-size: 0.95rem; }

.topic-filter-clear, .topic-filter-top { cursor: pointer; border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; font-size: 0.85rem; background: var(--bg-card); color: var(--text); transition: background 0.15s, border-color 0.15s; }

.topic-filter-clear { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.topic-filter-clear:hover, .topic-filter-top:hover { border-color: var(--accent); }

.topic-filter-clear:focus-visible, .topic-filter-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hidden by topic filtering */
.topic-hidden { display: none !important; }

.news-card { border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--bg-card); border-radius: 6px; box-shadow: var(--shadow-card); transition: opacity 0.2s, box-shadow 0.2s; }

.news-card:hover { box-shadow: var(--shadow-card-hover); }

.news-card.is-read { opacity: 0.5; }

.news-card.is-read:hover { opacity: 0.85; }

.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 0.5rem; }

.time-badge { display: inline-block; background: var(--badge-time-bg); color: var(--badge-time-fg); padding: 2px 10px; border-radius: 12px; font-family: "SF Mono", Consolas, monospace; font-size: 0.8rem; }

.topic-badge { display: inline-block; background: var(--badge-topic-bg); color: var(--badge-topic-fg); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }

.dup-badge { display: inline-block; background: var(--badge-dup-bg); color: var(--badge-dup-fg); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }

.news-card h3 { margin: 0.3rem 0 0.5rem; font-size: 1.05rem; line-height: 1.45; }

.news-card h3 a { color: var(--text); text-decoration: none; }

.news-card h3 a:hover { color: var(--accent); text-decoration: underline; }

.news-card .summary { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

/* 論文カードの英語原文（折りたたみ） */
.news-card .orig-text { margin: 0.5rem 0 0; font-size: 0.85rem; }

.news-card .orig-text > summary { cursor: pointer; color: var(--accent); font-size: 0.8rem; list-style: none; user-select: none; width: fit-content; }

.news-card .orig-text > summary::-webkit-details-marker { display: none; }

.news-card .orig-text > summary::before { content: "▸ "; }

.news-card .orig-text[open] > summary::before { content: "▾ "; }

.news-card .orig-text > summary:hover { text-decoration: underline; }

.news-card .orig-title { margin: 0.4rem 0 0.2rem; color: var(--text-muted); font-weight: 700; line-height: 1.45; }

.news-card .orig-summary { margin: 0; color: var(--text-faint); line-height: 1.55; }

.news-card-body { display: flex; gap: 14px; align-items: flex-start; }

.news-card-thumb { flex: 0 0 160px; display: block; overflow: hidden; border-radius: 4px; border: 1px solid var(--border-soft); background: var(--bg-soft); aspect-ratio: 16 / 9; }

.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }

.news-card-thumb:hover img { transform: scale(1.04); }

.news-card-text { flex: 1 1 auto; min-width: 0; }

.news-card-text h3 { margin-top: 0; }

.dup-sources { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--text-faint); }

.dup-sources a { color: var(--accent); text-decoration: none; }

.dup-sources a:hover { text-decoration: underline; }

/* ストーリーカードの出典バッジ行（各バッジ＝媒体名でその媒体の元記事へリンク） */
.story-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0.55rem 0 0; font-size: 0.8rem; }

.story-sources-label { color: var(--text-faint); }

/* 既存の .source-badge（アンバー）をリンク化して再利用。配色はダークテーマ変数のまま。 */
.story-sources .source-badge { text-decoration: none; transition: border-color 0.15s, filter 0.15s; }

.story-sources .source-badge:hover { border-color: var(--accent); filter: brightness(1.08); }

.story-sources .source-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) { .news-card-body { flex-direction: column; }
  .news-card-thumb { flex: 0 0 auto; width: 100%; } }
/* Read / Save buttons on each card */
.state-btn { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--state-btn-fg); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; line-height: 1; padding: 0; transition: color 0.15s, border-color 0.15s, background 0.15s; }

.state-btn + .state-btn { margin-left: 4px; }

.state-btn:hover { background: var(--bg-soft); }

.read-btn.is-active { color: var(--state-btn-read-active-fg); border-color: var(--state-btn-read-active-fg); }

.save-btn.is-active { color: var(--state-btn-active-fg); border-color: var(--state-btn-active-fg); }

.auto-gen-note { color: var(--text-faint); font-size: 0.85rem; font-family: "SF Mono", Consolas, monospace; }

.category-accordion { margin: 1.5rem 0; }

.category-block { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.75rem; background: var(--bg-card); overflow: hidden; }

.category-block[open] { box-shadow: var(--shadow-card); }

.category-summary { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; cursor: pointer; background: var(--bg-summary); font-weight: 600; color: var(--accent); user-select: none; list-style: none; }

.category-summary::-webkit-details-marker { display: none; }

.category-summary::before { content: "▶"; display: inline-block; margin-right: 0.6rem; font-size: 0.75rem; color: var(--text-muted); transition: transform 0.15s ease; }

.category-block[open] > .category-summary::before { transform: rotate(90deg); }

.category-summary:hover { background: var(--bg-soft); }

.category-name { flex: 1; font-size: 1.05rem; }

.category-count { background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }

.category-body { padding: 1rem 1.25rem 0.5rem; }

.category-body .source-section { margin: 1rem 0 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border-soft); color: var(--accent); font-size: 1rem; }

.category-body .source-section:first-child { margin-top: 0; }

.search-box { margin: 1rem 0 0.5rem; }

#search-input { width: 100%; padding: 0.7rem 1rem; font-size: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }

#search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21, 87, 153, 0.15); }

.search-status { margin: 0.4rem 0 0; color: var(--text-faint); font-size: 0.85rem; }

.search-results { margin: 1rem 0 1.5rem; }

.search-count { margin: 0 0 0.75rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; }

.search-empty { color: var(--text-faint); font-style: italic; padding: 0.75rem 0; }

/* Matched-term highlight in search results (amber, themed for light + dark). */
.search-results mark { background: var(--badge-source-bg); color: var(--badge-source-fg); padding: 0 2px; border-radius: 2px; }

.source-badge { display: inline-block; background: var(--badge-source-bg); color: var(--badge-source-fg); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--badge-source-border); }

.topic-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding-left: 0; margin: 0.5rem 0 1.5rem; }

.topic-nav li { margin: 0; }

.topic-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; color: var(--accent); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; }

.topic-nav a:hover { background: var(--bg-soft); border-color: var(--accent); text-decoration: none; }

.topic-nav-count { background: var(--accent); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 0.75rem; }

.trend-chart { position: relative; margin: 0.5rem 0 1.5rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); height: 320px; }

@media (max-width: 600px) { .trend-chart { height: 260px; padding: 0.6rem; } }
/* Trend dashboard (/trends/) — inline-SVG charts, theme-aware via CSS variables. Only the categorical series colors are set inline by trends.js (shared palette); axes / grid / text / labels all derive from the theme tokens so dark mode works. */
.trend-mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0 1rem; }

.trend-mode-btn { padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; color: var(--accent); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }

.trend-mode-btn:hover { background: var(--bg-soft); border-color: var(--accent); }

.trend-mode-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.trend-mode-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.trend-chart-box { margin: 0.5rem 0 0.75rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); overflow-x: auto; }

.trend-svg { display: block; max-width: 100%; }

.trend-svg .grid { stroke: var(--border-soft); stroke-width: 1; }

.trend-svg .axis { stroke: var(--border); stroke-width: 1; }

.trend-svg .tick { fill: var(--text-muted); font-size: 12px; }

.trend-bar { transition: opacity 0.15s; }

.trend-bar:hover { opacity: 0.85; }

.trend-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 1rem; }

.trend-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; color: var(--text); font-size: 0.82rem; cursor: pointer; }

.trend-legend-item.is-off { opacity: 0.4; }

.trend-legend-item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.trend-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.trend-note { color: var(--text-muted); font-size: 0.9rem; }

.trend-empty { color: var(--text-muted); font-style: italic; padding: 1.25rem; border: 1px dashed var(--border); border-radius: 6px; background: var(--bg-soft); }

.trend-table-wrap { margin: 0 0 1.5rem; }

.trend-table-wrap summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }

.trend-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85rem; }

.trend-table caption { text-align: left; color: var(--text-muted); padding: 4px 0; }

.trend-table th, .trend-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: right; }

.trend-table thead th, .trend-table th[scope="row"] { text-align: left; }

.trend-table thead th { background: var(--bg-soft); }

/* Saved/bookmark page */
.saved-list-empty { color: var(--text-faint); font-style: italic; padding: 1.25rem; border: 1px dashed var(--border); border-radius: 6px; background: var(--bg-soft); }

.saved-toolbar { margin: 0.5rem 0 1rem; font-size: 0.9rem; color: var(--text-muted); }

.saved-toolbar button { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 10px; border-radius: 14px; font-size: 0.8rem; cursor: pointer; margin-left: 8px; }

.saved-toolbar button:hover { background: var(--bg-soft); color: var(--text); }

/* For-you / personalized feed page (興味トピックのトグル) */
.for-you-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }

.for-you-topics legend { padding: 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

.for-you-topic { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; color: var(--accent); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }

.for-you-topic:hover { background: var(--bg-soft); border-color: var(--accent); }

.for-you-topic.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.for-you-topic:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.for-you-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 1rem; font-size: 0.9rem; color: var(--text-muted); }

.for-you-savedonly { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.for-you-count { color: var(--text-faint); }

/* ------------------------------------------------------------------------- Text-to-Speech (Web Speech API) buttons ------------------------------------------------------------------------- */
.tts-btn { /* sits at the right of .news-card-meta after the read/save buttons */ }

.tts-btn.is-playing { color: #fff; background: var(--accent); border-color: var(--accent); animation: tts-pulse 1.4s ease-in-out infinite; }

@keyframes tts-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 87, 153, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(21, 87, 153, 0); } }
.tts-all-wrap { margin: 0.5rem 0 1rem; }

.tts-all-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--accent); background: var(--bg-card); color: var(--accent); border-radius: 22px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s; }

.tts-all-btn:hover { background: var(--accent); color: #fff; }

.tts-all-btn.is-playing { background: var(--accent); color: #fff; animation: tts-pulse 1.4s ease-in-out infinite; }

/* ------------------------------------------------------------------------- Glossary (hover dictionary) ------------------------------------------------------------------------- */
.glossary-term { border-bottom: 1px dotted currentColor; cursor: help; text-decoration: none; }

.glossary-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 0.55em 0.8em; background: #222; color: #fff; border-radius: 4px; font-size: 0.85em; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

.glossary-tooltip.is-visible { opacity: 1; }

.glossary-tooltip .glossary-reading { opacity: 0.7; font-size: 0.85em; margin-left: 0.3em; }

.glossary-tooltip .glossary-desc { margin-top: 0.3em; }

[data-theme="dark"] .glossary-tooltip { background: #f1f3f5; color: #1f2328; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }

/* Floating navigation buttons (fixed to the right edge, two stacked) */
.floating-nav { position: fixed; right: 24px; top: 60%; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; /* container is click-through; buttons re-enable below */ }

.floating-nav-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; cursor: pointer; font-size: 0.85rem; font-weight: 600; line-height: 1.2; padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(30, 41, 59, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #cfe3ff; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, opacity 0.15s ease; }

.floating-nav-btn:hover { background: rgba(51, 65, 85, 0.92); color: #ffffff; transform: scale(1.03); }

.floating-nav-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Dim the scroll-to-top button while already at the top of the page */
.floating-nav-top.is-at-top { opacity: 0.45; pointer-events: none; cursor: default; transform: none; }

@media (max-width: 600px) { .floating-nav { right: 14px; top: auto; bottom: 16px; transform: none; }
  .floating-nav-btn { font-size: 0.78rem; padding: 8px 12px; border-radius: 9px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } }
/* ========================================================================= Terminal-editorial redesign Drops the Cayman green-gradient hero for a thin data-terminal top bar, color-coded topic pills, a daily timeline (mono time gutter + content), and serif/mono/sans editorial type. All built on the tokens above, so it follows the existing light/dark toggle. Appended last so it overrides the theme + base components on equal specificity (easy to review / roll back). ========================================================================= */
/* --- editorial column width -------------------------------------------- */
.main-content { max-width: 768px; }

/* --- top bar (replaces the Cayman .page-header hero) ------------------- */
.page-header { background: var(--bg-page); background-image: none; color: var(--text-1); padding: 0; border-bottom: 1px solid var(--line-strong); }

.topbar-inner { max-width: 768px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; min-width: 0; }

.brand:hover { text-decoration: none; }

.brand-mark { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-1); white-space: nowrap; }

.brand-sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand:hover .brand-mark { color: var(--accent); }

.topbar-tools { display: flex; align-items: center; gap: 10px; flex: none; }

.live-indicator { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); display: inline-block; animation: live-blink 1.6s ease-in-out infinite; }

@keyframes live-blink { 50% { opacity: 0.35; } }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--text-2); cursor: pointer; border-radius: var(--r-md); text-decoration: none; }

.iconbtn:hover { background: var(--bg-subtle); color: var(--text-1); }

.iconbtn svg { display: block; }

/* Re-skin the existing theme toggle as an inline icon button (it was an absolutely-positioned white circle on the green hero). The icon swap stays pure-CSS via [data-theme] on the spans below — theme-toggle.js is unchanged. */
.theme-toggle { position: static; top: auto; right: auto; width: 32px; height: 32px; border: none; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: inherit; }

.theme-toggle:hover { background: var(--bg-subtle); color: var(--text-1); transform: none; }

.theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { line-height: 0; }

[data-theme="light"] .theme-toggle .theme-icon-dark, :root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark, [data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-flex; }

/* --- editorial typography ---------------------------------------------- */
.main-content h1 { font-family: var(--font-sans); font-weight: 700; font-size: 1.7rem; line-height: 1.3; letter-spacing: -0.01em; }

.main-content h2 { font-family: var(--font-sans); font-weight: 600; }

.auto-gen-note { color: var(--text-3); font-family: var(--font-mono); }

/* Source/media group headers become small mono labels. */
.source-section, .category-body .source-section { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); border-bottom: 1px solid var(--line); }

.category-summary { font-family: var(--font-sans); }

.category-count { font-family: var(--font-mono); }

/* --- topic pills (color per slug; light/dark common, self-contained) --- Each slug defines --pill-bg/--pill-fg once; components below consume them via var(). .p-* lands on in-card .topic-badge (server-rendered or via topic-pills.js); [data-slug] is on the summary/nav chips. */
.p-llm, [data-slug="llm"] { --pill-bg:#EEEDFE; --pill-fg:#3C3489; }

.p-agents, [data-slug="agents"] { --pill-bg:#E1F5EE; --pill-fg:#085041; }

.p-research, [data-slug="research"] { --pill-bg:#E6F1FB; --pill-fg:#0C447C; }

.p-business, [data-slug="business"] { --pill-bg:#FAEEDA; --pill-fg:#633806; }

.p-regulation, [data-slug="regulation"] { --pill-bg:#FAECE7; --pill-fg:#712B13; }

.p-hardware, [data-slug="hardware"] { --pill-bg:#F1EFE8; --pill-fg:#2C2C2A; }

.p-robotics, [data-slug="robotics"] { --pill-bg:#FBEAF0; --pill-fg:#72243E; }

.p-image-video, [data-slug="image-video"] { --pill-bg:#EAF3DE; --pill-fg:#173404; }

.p-others, [data-slug="others"] { --pill-bg:#EEEDE9; --pill-fg:#444441; }

.topic-badge { font-family: var(--font-sans); font-weight: 600; border-radius: var(--r-md); background: var(--pill-bg, var(--badge-topic-bg)); color: var(--pill-fg, var(--badge-topic-fg)); }

/* Daily "トピック別件数" chips, colored by slug (keep the clickable filter states working — the active/hover rules below win by coming later). */
.topic-summary li[data-slug] { background: var(--pill-bg); border-color: transparent; }

.topic-summary li[data-slug] > a, .topic-summary li[data-slug] strong { color: var(--pill-fg); }

.topic-summary li.is-clickable[data-slug]:hover { filter: brightness(0.96); border-color: var(--pill-fg); }

.topic-summary li.is-active, .topic-summary li.is-active[data-slug] { background: var(--accent); border-color: var(--accent); }

.topic-summary li.is-active > a, .topic-summary li.is-active strong { color: #fff; }

/* Homepage "トピック別" nav chips, colored by slug. */
.topic-nav li[data-slug] a { background: var(--pill-bg); color: var(--pill-fg); border-color: transparent; }

.topic-nav li[data-slug] a:hover { filter: brightness(0.96); border-color: var(--pill-fg); }

/* --- news cards as editorial / timeline entries ------------------------ */
.news-card { position: relative; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; margin: 0; padding: 14px 12px; transition: background 0.15s ease; }

.news-card:hover { background: var(--bg-subtle); box-shadow: none; }

.news-card:last-child { border-bottom: none; }

.news-card-meta { margin-bottom: 6px; }

/* Time becomes a muted mono marker rather than a filled blue pill. */
.news-card .time-badge { background: transparent; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; padding: 0; border-radius: 0; }

.news-card h3 { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 600; margin: 0.1rem 0 0.4rem; }

.news-card-thumb { border-radius: var(--r-md); }

/* "N媒体が報道 / N件の関連記事" → quiet mono badge (matches reference). */
.dup-badge { font-family: var(--font-mono); font-weight: 400; font-size: 11px; background: transparent; color: var(--text-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px 8px; }

/* Daily pages only: pull the time into a left gutter so each card reads as a timeline row (time | content). Scoped to .category-body, where the daily cards live and the time label is short ("06:48 JST"). Topic/weekly cards (full datetime, no accordion) keep the time inline. */
.category-body .news-card { padding-left: 72px; }

.category-body .news-card .time-badge { position: absolute; left: 8px; top: 16px; width: 56px; line-height: 1.3; }

/* --- "今日の要点" digest: first item is the serif featured headline ----- */
.today-top { background: var(--bg-surface); border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-lg); }

.today-top-heading { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); }

.today-top-item:first-child .today-top-link { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.36; }

.today-top-source { background: var(--badge-topic-bg); color: var(--badge-topic-fg); }

/* --- footer as a mono colophon ----------------------------------------- */
.site-footer { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line); margin-top: 40px; padding-top: 16px; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 600px) { /* timeline collapses to stacked: time sits above the content, no gutter */
  .category-body .news-card { padding-left: 12px; }
  .category-body .news-card .time-badge { position: static; width: auto; } }
@media (max-width: 430px) { .topbar-inner { padding: 12px 16px; }
  .live-indicator { display: none; }
  .brand-sub { display: none; }
  .today-top-item:first-child .today-top-link { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* ------------------------------------------------------------------------- Entity tags + entity pages (/entity/{slug}/) All colors come from existing theme tokens, so light/dark re-skin for free. ------------------------------------------------------------------------- */
/* Clickable entity chips on article cards. Deliberately distinct from the filled topic pills (outlined + mono + "#") so readers can tell a content topic from a named entity (company / model / product) at a glance. */
.entity-tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-md); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--accent); background: transparent; border: 1px solid var(--accent); text-decoration: none; white-space: nowrap; }

.entity-tag::before { content: "#"; opacity: 0.55; margin-right: 1px; }

.entity-tag:hover { background: var(--accent); color: var(--badge-time-fg); text-decoration: none; }

.entity-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Entity page header meta line: type · count · period. */
.entity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -0.2rem 0 0.6rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); }

.entity-meta .entity-type { padding: 1px 8px; border: 1px solid var(--accent); border-radius: var(--r-md); color: var(--accent); font-weight: 600; }

.entity-nav { font-size: 0.9rem; }

/* Month dividers turn the article list into a timeline. */
.entity-month { margin: 1.5rem 0 0.2rem; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-2); }

/* Entity index chips reuse .topic-nav (no data-slug = default accent chip). */
.entity-list .entity-name { font-weight: 600; }