@import url("/styles.css");

:root {
  --minutes-panel: rgba(255, 255, 255, 0.82);
  --minutes-panel-strong: rgba(255, 255, 255, 0.94);
  --minutes-panel-soft: rgba(255, 255, 255, 0.66);
  --minutes-shadow: 0 22px 52px rgba(17, 17, 17, 0.08);
  --minutes-accent: #111111;
  --minutes-accent-soft: rgba(17, 17, 17, 0.08);
  --minutes-topic: #2c5aa0;
  --minutes-entity: #8b3d2f;
  --minutes-capture: #1f5133;
  --minutes-signal: #8a6f14;
  --minutes-day: #5d4c8f;
}

[hidden] {
  display: none !important;
}

.page {
  width: min(1280px, calc(100vw - 32px));
  padding-bottom: 96px;
}

.hero {
  padding-bottom: 30px;
}

.hero-top {
  align-items: flex-start;
}

.primary-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.primary-tab,
.control-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
  font: inherit;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.primary-tab.is-active,
.control-chip.is-active {
  background: var(--minutes-accent);
  border-color: var(--minutes-accent);
  color: #f6f5f1;
}

.system-links,
.action-row,
.tag-row,
.meta-strip,
.detail-inline-row,
.detail-inline-list,
.detail-link-list,
.detail-link-card,
.body-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.system-links,
.meta-strip,
.action-row {
  margin-top: 18px;
}

.meta-strip-tight {
  margin-top: 14px;
}

.stat-strip,
.daily-board-grid,
.detail-grid,
.topic-grid,
.week-grid,
.funnel-grid,
.extract-group-grid,
.split-grid,
.day-stack {
  display: grid;
  gap: 14px;
}

.stat-strip {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 22px;
}

.stat-card,
.detail-card,
.entry-card,
.day-digest-card,
.body-card,
.funnel-stage,
.graph-inspector,
.detail-link-card {
  border: 1px solid var(--line);
  background: var(--minutes-panel);
  box-shadow: var(--minutes-shadow);
}

.stat-card {
  padding: 16px 18px;
}

.stat-card span,
.stamp,
.kicker,
.weekday,
.graph-toolbar-label,
.legend-chip,
.section-nav a {
  font-family: "SFMono-Regular", "Menlo", monospace;
  letter-spacing: 0.06em;
}

.stat-card span,
.stamp,
.kicker,
.weekday,
.graph-toolbar-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.section-nav {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 20px;
  padding: 14px 0 10px;
  border-bottom: 1px solid rgba(216, 212, 204, 0.86);
  backdrop-filter: blur(12px);
  background: rgba(243, 242, 238, 0.8);
}

.section-nav a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
}

.section {
  padding-top: 34px;
}

.section-head {
  align-items: flex-start;
}

.section-head-subtle {
  padding-bottom: 0;
  border-bottom: 0;
}

.section-head p {
  max-width: 52rem;
}

.daily-board-grid,
.detail-grid,
.topic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.detail-grid {
  align-items: start;
}

.split-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  margin-top: 18px;
}

.split-grid-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.detail-card,
.day-digest-card,
.entry-card,
.body-card,
.funnel-stage,
.graph-inspector,
.detail-link-card {
  padding: 18px;
}

.detail-card-bleed,
.detail-card-soft {
  background: var(--minutes-panel-soft);
}

.detail-divider {
  height: 1px;
  margin: 16px 0;
  background: var(--line);
}

.entry-top,
.day-digest-top,
.funnel-stage-top,
.day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.entry-meta {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.entry-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.03);
  font-size: 12px;
}

.entry-card {
  min-height: 100%;
}

.entry-link,
.topic-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.entry-link:hover h3,
.topic-link:hover strong {
  text-decoration: underline;
}

.entry-card h3,
.detail-card h3,
.day-digest-card h3,
.body-card h3 {
  margin-top: 10px;
}

.entry-card p,
.detail-card p,
.day-digest-card p,
.body-card p,
.funnel-stage p,
.graph-inspector p,
.topic-link span {
  margin-top: 10px;
  color: var(--muted);
}

.entry-link p:first-of-type,
.day-digest-headline,
.day-digest-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.day-digest-headline {
  -webkit-line-clamp: 2;
}

.day-digest-summary {
  -webkit-line-clamp: 4;
}

.day-digest-card.is-issue {
  border-top: 3px solid #8b3d2f;
}

.day-digest-card.is-review {
  border-top: 3px solid #1f5133;
}

.day-digest-signal strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
}

.day-digest-metrics,
.detail-link-list,
.detail-inline-list,
.tag-row,
.topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.topic-list {
  display: grid;
  gap: 10px;
}

.topic-link {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.02);
}

.topic-link strong,
.topic-link span {
  display: block;
}

.pill,
.tag,
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.tag {
  background: rgba(17, 17, 17, 0.04);
}

.week-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.week-block,
.day-column {
  display: grid;
  gap: 12px;
}

.day-stack {
  grid-template-columns: 1fr;
}

.funnel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.funnel-stage {
  display: grid;
  gap: 12px;
}

.funnel-bar-shell {
  height: 10px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.05);
}

.funnel-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.22));
}

.extract-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.extract-item,
.detail-link-card {
  padding: 14px;
}

.muted {
  color: var(--muted);
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.view-panel {
  margin-top: 18px;
}

.mindmap-shell,
.graph-shell {
  margin-top: 18px;
}

.mindmap-stage,
.graph-stage {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 28rem),
    rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.mindmap-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.graph-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.graph-stage-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.graph-stage-shell {
  position: relative;
  display: grid;
  gap: 12px;
}

.graph-toolbar {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
}

.graph-control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.graph-stage-frame {
  position: relative;
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-dot,
.legend-line {
  display: inline-block;
  flex: 0 0 auto;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-dot.is-topic {
  background: var(--minutes-topic);
}

.legend-dot.is-entity {
  background: var(--minutes-entity);
}

.legend-dot.is-capture {
  background: var(--minutes-capture);
}

.legend-dot.is-signal {
  background: var(--minutes-signal);
}

.legend-dot.is-day {
  background: var(--minutes-day);
}

.legend-line {
  width: 18px;
  height: 2px;
  background: rgba(17, 17, 17, 0.35);
}

.graph-inspector,
.graph-overlay-card {
  background: var(--minutes-panel-strong);
}

.graph-inspector {
  min-height: 100%;
}

.graph-empty strong {
  display: block;
}

.graph-stage-shell:fullscreen,
.graph-stage-shell:-webkit-full-screen {
  padding: 20px;
  background: rgba(243, 242, 238, 0.98);
}

.graph-stage-shell:fullscreen .graph-stage,
.graph-stage-shell:-webkit-full-screen .graph-stage {
  min-height: calc(100vh - 180px);
}

.graph-overlay-card,
.minute-body-overlay-card {
  position: absolute;
  inset: 14px;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--minutes-shadow);
}

.graph-overlay-body,
.minute-body-overlay-body {
  overflow: auto;
}

.graph-overlay-close,
.minute-body-overlay-close {
  justify-self: end;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: rgba(17, 17, 17, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.body-card {
  font-size: 16px;
  line-height: 1.78;
}

.body-copy p + p {
  margin-top: 1em;
}

.section-body {
  position: relative;
}

.minute-body-overlay-card {
  position: fixed;
  inset: 24px;
  z-index: 24;
  background: rgba(251, 250, 247, 0.98);
}

.minute-body-overlay-body {
  padding-right: 8px;
  font-size: 16px;
  line-height: 1.84;
}

body.minutes-overlay-open {
  overflow: hidden;
}

.footer-note {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 1080px) {
  .daily-board-grid,
  .detail-grid,
  .topic-grid,
  .week-grid,
  .split-grid,
  .split-grid-wide,
  .graph-stage-grid,
  .extract-group-grid,
  .funnel-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
  }

  .graph-stage-shell:fullscreen .graph-stage,
  .graph-stage-shell:-webkit-full-screen .graph-stage {
    min-height: calc(100vh - 220px);
  }
}

@media (max-width: 720px) {
  .page {
    width: min(100vw - 20px, 100%);
    padding-top: 18px;
    padding-bottom: 72px;
  }

  h1 {
    font-size: clamp(30px, 10vw, 48px);
  }

  .dek {
    font-size: 16px;
  }

  .primary-tab,
  .control-chip,
  .ghost-button {
    width: 100%;
    justify-content: flex-start;
  }

  .action-row,
  .system-links,
  .meta-strip,
  .section-nav {
    gap: 8px;
  }

  .section-nav {
    position: static;
    padding-top: 10px;
  }

  .minute-body-overlay-card {
    inset: 10px;
    padding: 14px;
  }
}