/* 画面ごとの配置: ダッシュボード(スコープ)・話題の行と詳細・フィード・レポート・情報源・配信・設定・入室 */

/* ---------- 共通の並べ方 ---------- */
.stack { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
.stack-lg { display: grid; gap: var(--sp-4); min-width: 0; }
.is-login .appbar, .is-login .tabbar, .is-login .rail { display: none !important; }
.is-login .main { margin-left: 0 !important; padding-bottom: var(--sp-6); }

/* ---------- ダッシュボード ---------- */
.gauge-link { color: inherit; }
.gauge-link:hover { background: var(--c-hover); }
.run-list { display: grid; }
.run-list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-3);
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
}
.run-list > li + li { border-top: var(--bw) solid var(--c-line); }
.run-error { flex-basis: 100%; }

.dash {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1180px) {
  .dash { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .dash-scope { grid-row: span 2; }
  .dash-wide { grid-column: 1 / -1; }
}
.dash-side { display: grid; gap: var(--sp-4); min-width: 0; }
.dash-trio {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .dash-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- スコープ(主役) ---------- */
.scope-wrap {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-4);
}
@media (min-width: 720px) and (max-width: 1179px) {
  .scope-wrap { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); align-items: start; }
}
.scope-figure { position: relative; min-width: 0; }
.scope {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}
.scope .face { fill: var(--c-scope); stroke: var(--c-scope-ring); stroke-width: 1; }
.scope .zone-alert { fill: var(--c-zone-alert); }
.scope .zone-digest { fill: var(--c-zone-digest); }
.scope .zone-report { fill: var(--c-zone-report); }
.scope .ring { fill: none; stroke: var(--c-scope-ring); stroke-width: 1; }
.scope .ring-th { stroke-dasharray: 3 3; }
.scope .spoke { stroke: var(--c-scope-grid); stroke-width: 1; }
.scope .tick { stroke: var(--c-scope-tick); stroke-width: 1; }
.scope .tick-major { stroke: var(--c-ink-2); stroke-width: 1.25; }
.scope .ring-label {
  fill: var(--c-ink-3);
  font-family: var(--font-gauge);
  font-weight: 700;
  font-size: 10px;
}
.scope .sector-label {
  /* 大きさは scope.js が文字サイズの設定に合わせて属性で決める */
  fill: var(--c-ink-2);
  font-family: var(--font-sans);
  font-weight: 700;
}
.scope .sector-count { fill: var(--c-ink-3); font-family: var(--font-gauge); }
.scope .sector.is-dim .sector-label { fill: var(--c-ink-3); font-weight: 400; }
.scope .sector-hit { fill: transparent; }
.scope .sweep { transform-box: view-box; transform-origin: 0 0; }
.scope[data-running="true"] .sweep { animation: sweep var(--sweep-dur) linear infinite; }
.scope .sweep-line { stroke: var(--c-scope-sweep); stroke-width: 1.25; stroke-opacity: 0.55; }
.scope .sweep-trail { fill: var(--c-scope-sweep); }
.scope .center { fill: var(--c-ink); }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scope[data-running="true"] .sweep { animation: none; }
}

/* 点(話題)。色は優先度、中心からの距離は有用度、薄さは経過時間 */
.blip { cursor: pointer; }
.blip circle.dot { stroke: var(--c-scope); stroke-width: 1.5; }
.blip[data-p="alert"] circle.dot { fill: var(--c-alert); }
.blip[data-p="digest"] circle.dot { fill: var(--c-digest); stroke: var(--c-digest-edge); stroke-width: 1.25; }
.blip[data-p="report"] circle.dot { fill: var(--c-report); }
.blip[data-p="ignore"] circle.dot, .blip:not([data-p]) circle.dot { fill: var(--c-ignore); }
.blip circle.halo { fill: none; stroke: var(--c-ink); stroke-width: 1.5; opacity: 0; }
.blip:hover circle.halo, .blip:focus-visible circle.halo, .blip[aria-current="true"] circle.halo { opacity: 1; }
.blip:focus-visible { outline: none; }
.blip circle.hit { fill: transparent; stroke: none; }

.scope-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(14rem, 70%);
  transform: translate(-50%, -50%);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}
.scope-note { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* 選んだ点の読み取り */
.readout {
  display: grid;
  gap: var(--sp-1);
  min-height: 5.5rem;
  padding: var(--sp-3);
  border: var(--bw) solid var(--c-line);
  border-left: 3px solid var(--c-ink);
  border-radius: var(--radius);
  background: var(--c-surface-2);
}
.readout[data-p="alert"] { border-left-color: var(--c-alert); }
.readout[data-p="digest"] { border-left-color: var(--c-digest); }
.readout[data-p="report"] { border-left-color: var(--c-report); }
.readout-hint { color: var(--c-ink-3); font-size: var(--fs-sm); align-self: center; }
.readout-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-2); }
.readout-title { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight); }
.readout-title a { text-decoration: none; }
.readout-title a:hover { text-decoration: underline; }

/* 分類ごとの数(スコープの凡例を兼ねる) */
.sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
@media (min-width: 720px) and (max-width: 1179px) { .sectors { grid-template-columns: minmax(0, 1fr); } }
.sector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  padding: 0 var(--sp-1);
  border-bottom: var(--bw) solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.sector-row:hover { background: var(--c-hover); }
.sector-row .num { font-size: var(--fs-md); }
.sector-row.is-zero { color: var(--c-ink-3); }
.sector-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 話題の行 ---------- */
.stories > li + li { border-top: var(--bw) solid var(--c-line); }
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.story-main {
  position: relative;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
}
.story-main:hover { background: var(--c-hover); }
/* 見出しのリンクを行全体に広げる(元記事のリンクだけは上に重ねて別に押せる) */
.story-link { color: inherit; text-decoration: none; }
.story-link::after { content: ""; position: absolute; inset: 0; }
.story-link:focus-visible { outline: none; }
.story-link:focus-visible::after { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.story-main .ext { position: relative; z-index: 1; }
.story-orig {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.story-orig-label { margin-right: 0.5em; font-weight: 700; }
.story-reason {
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ai-label {
  display: inline-block;
  margin-right: 0.45em;
  padding: 0 0.3em;
  border: var(--bw) solid var(--c-edge);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink-2);
  vertical-align: 0.1em;
  white-space: nowrap;
}
.ai-label.is-excerpt { border-style: dashed; }
.story-title .ai-label, .detail-title .ai-label, .readout-title .ai-label { margin-left: 0.15em; vertical-align: 0.2em; }
.prose-note { margin-top: var(--sp-1); }
.story-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-2); min-width: 0; }
.story-cat { font-weight: 700; }
.story-time { margin-left: auto; color: var(--c-ink-3); white-space: nowrap; }
.story-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; }
/* 未読は左の余白に小さな点。読んだ話題は見出しを少し薄くする */
.story[data-unread] .story-main::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(var(--sp-3) + 0.5rem);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-ink);
}
.story:not([data-unread]) .story-title { color: var(--c-ink-2); }
.story-sum {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  min-width: 0;
}
.story-actions {
  display: grid;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
}
.story-compact .story-main { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.story-compact .story-sum { -webkit-line-clamp: 1; }

/* 有用度(小さなスコープと数字) */
.score {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-ink-2);
  white-space: nowrap;
}
.score svg { width: 1.125rem; height: 1.125rem; flex: none; }
.score .num { font-size: var(--fs-sm); color: var(--c-ink); }
.mini .ring { fill: none; stroke: var(--c-edge); stroke-width: 1.2; }
.mini .ring-in { fill: none; stroke: var(--c-line); stroke-width: 1; }
.mini .dot { stroke: none; }
.mini[data-p="alert"] .dot { fill: var(--c-alert); }
.mini[data-p="digest"] .dot { fill: var(--c-digest); stroke: var(--c-digest-edge); stroke-width: 1; }
.mini[data-p="report"] .dot { fill: var(--c-report); }
.mini[data-p="ignore"] .dot { fill: var(--c-ignore); }

/* ---------- フィード ---------- */
.filters {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}
.filter-row {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .filters { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); align-items: end; }
  .filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.filter-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.result-count { font-size: var(--fs-sm); color: var(--c-ink-2); }
.more { display: flex; justify-content: center; padding: var(--sp-4); border-top: var(--bw) solid var(--c-line); }

/* 話題の詳細 */
.detail { display: grid; gap: var(--sp-5); max-width: var(--read-max); min-width: 0; }
.detail-head { display: grid; gap: var(--sp-2); }
.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.detail-title { font-size: var(--fs-xl); font-weight: 800; line-height: 1.35; }
.detail-orig { font-size: var(--fs-sm); color: var(--c-ink-2); }
.detail-source { display: flex; flex-wrap: wrap; gap: 0.15rem var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-2); }
.detail-reason { font-size: var(--fs-sm); color: var(--c-ink-2); }
.prose-label .ai-label { vertical-align: 0.05em; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.prose { display: grid; gap: var(--sp-4); }
.prose-block { display: grid; gap: var(--sp-1); }
.prose-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-3); letter-spacing: 0.04em; }
.prose-text { font-size: var(--fs-md); line-height: 1.8; white-space: pre-line; }
.prose-block.is-try { padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--c-line); border-left: 3px solid var(--c-ink); background: var(--c-surface); }
.score-big { font-size: var(--fs-lg); color: var(--c-ink); }
.score-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-2); }
.scale {
  /* 有用度の横の目盛り(速報とダイジェストの基準に刻み) */
  position: relative;
  width: 9rem;
  height: 0.75rem;
  border-bottom: var(--bw) solid var(--c-edge);
  background: repeating-linear-gradient(90deg, var(--c-scope-tick) 0 1px, transparent 1px 10%) bottom / 100% 4px no-repeat;
}
.scale-th { position: absolute; bottom: 0; width: 1px; height: 0.75rem; background: var(--c-ink-2); }
.scale-mark { position: absolute; bottom: -0.3rem; width: 0.6rem; height: 0.6rem; margin-left: -0.3rem; border-radius: 50%; background: var(--c-ignore); border: 1.5px solid var(--c-surface); }
.scale-mark[data-p="alert"] { background: var(--c-alert); }
.scale-mark[data-p="digest"] { background: var(--c-digest); border-color: var(--c-digest-edge); }
.scale-mark[data-p="report"] { background: var(--c-report); }
.related > li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); }
.related > li + li { border-top: var(--bw) solid var(--c-line); }
.related-title { font-size: var(--fs-base); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip { padding: 0 0.45em; border: var(--bw) solid var(--c-line); border-radius: var(--radius); font-size: var(--fs-xs); color: var(--c-ink-2); font-family: var(--font-mono); }

/* ---------- レポート ---------- */
.report-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-decoration: none;
}
.report-row:hover { background: var(--c-hover); }
.report-row-text { display: grid; min-width: 0; }
.report-row-title { font-weight: 700; font-size: var(--fs-base); }
.report-row-sub { font-size: var(--fs-xs); color: var(--c-ink-3); }
.report-row-state { font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
@media (max-width: 479px) {
  .report-row { grid-template-columns: auto minmax(0, 1fr); }
  .report-row-state { grid-column: 2; text-align: left; }
}
.make-report { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.make-report .field { flex: 1 1 10rem; }
.report-period { font-family: var(--font-gauge); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; }
.report-stats { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-2); }
.report-stats .num { font-size: var(--fs-lg); color: var(--c-ink); margin-right: 2px; }
.editorial { padding: var(--sp-4); border-left: 3px solid var(--c-ink); background: var(--c-surface); font-size: var(--fs-md); line-height: 1.8; white-space: pre-line; }

/* ---------- 情報源 ---------- */
.source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  align-items: start;
}
.source-main { display: grid; gap: 2px; min-width: 0; }
.source-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-base); }
.source-host { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-ink-3); overflow-wrap: anywhere; }
.source-stats { display: flex; flex-wrap: wrap; gap: 0.15rem var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-2); margin-top: var(--sp-1); }
.source-side { display: grid; justify-items: end; gap: var(--sp-1); }
.source[data-enabled="false"] .source-name, .source[data-enabled="false"] .source-stats { color: var(--c-ink-3); }
.source-result { grid-column: 1 / -1; font-size: var(--fs-xs); }
@media (max-width: 479px) {
  .source { grid-template-columns: minmax(0, 1fr); }
  .source-side { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
}

/* ---------- 配信 ---------- */
.channels { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .channels { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .channels .ch-line { grid-row: span 2; } }
.budget { display: grid; gap: var(--sp-3); }
.budget-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.budget-main .num { font-size: var(--fs-num); line-height: 1; }
.secret-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.secret-list > li + li { border-top: var(--bw) solid var(--c-line); }
.send-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); align-items: start; }
.send-row-main { display: grid; gap: 2px; min-width: 0; }
.send-row-top { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-2); }
.send-preview { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-ink-3); white-space: nowrap; }

/* ---------- 設定 ---------- */
.settings { display: grid; gap: var(--sp-4); max-width: 52rem; }
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.form-row .field { flex: 1 1 8rem; }
.schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}
.schedule-row + .schedule-row { border-top: var(--bw) solid var(--c-line); }
.schedule-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.schedule-controls .select-wrap { width: 7.5rem; }
.weight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 3.25rem;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
}
.weight-row + .weight-row { border-top: var(--bw) solid var(--c-line); }
.weight-row label { font-size: var(--fs-sm); min-width: 0; }
.weight-row output { text-align: right; font-size: var(--fs-md); }
@media (max-width: 479px) {
  .weight-row { grid-template-columns: minmax(0, 1fr) 3.25rem; padding: var(--sp-2) 0; gap: var(--sp-1) var(--sp-3); }
  .weight-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}
input[type="range"] { width: 100%; min-width: 0; accent-color: var(--c-ink); height: var(--tap); }
.secret-form { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; }
.secret-form + .secret-form { border-top: var(--bw) solid var(--c-line); }
.secret-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.secret-name { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.secret-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.secret-controls .input { flex: 1 1 12rem; }
.ai-status { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-2); border: var(--bw) solid var(--c-line); border-radius: var(--radius); }
details.more-settings > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  list-style: none;
}
details.more-settings > summary::-webkit-details-marker { display: none; }
details.more-settings > summary::before { content: "+"; font-family: var(--font-mono); width: 1em; }
details.more-settings[open] > summary::before { content: "−"; }

/* ---------- メニュー(狭い画面の管理) ---------- */
.menu-list > li > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 4rem;
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-decoration: none;
}
.menu-list > li > a:hover { background: var(--c-hover); }
.menu-list > li + li { border-top: var(--bw) solid var(--c-line); }
.menu-list svg { width: 1.375rem; height: 1.375rem; }
.menu-text { display: grid; min-width: 0; }
.menu-title { font-weight: 700; }
.menu-sub { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- 入室 ---------- */
.login {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--sp-7));
  padding: var(--sp-5) 0;
}
.login-box {
  display: grid;
  gap: var(--sp-4);
  width: min(24rem, 100%);
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
}
.login-box .brand { font-size: var(--fs-xl); }