button,
input,
select { font: inherit; }

.concept-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.concept-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
}

.concept-card code { color: var(--blue); font-weight: 800; }
.concept-card span { color: var(--muted); font-size: 0.72rem; }

.signal-graph {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #eafdfb;
  background: var(--navy);
  border-radius: 1rem;
}

.graph-heading,
.panel-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.signal-graph h2 { color: #fff; }
.action-status {
  max-width: 18rem;
  padding: 0.4rem 0.7rem;
  color: #a9c0dd;
  background: rgb(255 255 255 / 8%);
  border-radius: 999px;
  font-size: 0.68rem;
  text-align: right;
}

.graph-columns { display: grid; gap: 0.75rem; margin-top: 1rem; }
.graph-group { display: grid; gap: 0.55rem; }
.graph-group > p {
  margin: 0;
  color: #8ba7ca;
  font: 0.65rem "Cascadia Code", Consolas, monospace;
  text-transform: uppercase;
}

.graph-node {
  padding: 0.72rem;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 0.65rem;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.graph-node code,
.graph-node strong { display: block; }
.graph-node code { color: #5ce5d7; font-size: 0.73rem; }
.graph-node strong { margin-top: 0.2rem; color: #b9cae0; font-size: 0.68rem; }
.graph-node.is-active {
  background: rgb(80 227 212 / 16%);
  border-color: #50e3d4;
  transform: translateY(-2px);
}

.linked-node { border-left: 0.22rem solid #e6a84a; }
.effect-node { border-left: 0.22rem solid #d879a0; }
.graph-arrow { display: none; align-self: center; color: #50e3d4; font-size: 1.5rem; text-align: center; }
.graph-help { margin: 0.9rem 0 0; color: #9fb4d0; font-size: 0.68rem; }

.workspace { display: grid; gap: 1rem; }
.filter-field { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.68rem; }
.filter-field select { min-height: 2.4rem; }
.task-list { display: grid; gap: 0.55rem; margin-top: 1rem; }

.task-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 0.65rem;
}

.task-item.is-selected { border-color: var(--blue); }
.task-item.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.task-title { padding: 0; color: var(--navy); background: transparent; border: 0; text-align: left; font-weight: 800; }
.remove-button,
.quiet-button { color: var(--blue); background: #edf1ff; border: 1px solid #bec9f8; }
.remove-button { min-height: 2rem; padding: 0.25rem 0.55rem; font-size: 0.66rem; }

.empty-message { padding: 1rem; color: var(--muted); background: var(--soft); border-radius: 0.65rem; text-align: center; }
.task-form { display: grid; gap: 0.45rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.task-form label { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.task-form > div { display: grid; gap: 0.5rem; }
.task-form input { min-width: 0; }

.selected-detail { min-height: 8rem; margin-top: 1rem; padding: 1rem; background: #edf1ff; border-radius: 0.75rem; }
.selected-detail span { display: block; margin-top: 0.35rem; color: var(--muted); }
.linked-note { margin-top: 1rem; color: var(--muted); font-size: 0.7rem; }

.log-panel,
.source-panel { margin-top: 1rem; }
.quiet-button { min-height: 2.25rem; padding-inline: 0.65rem; font-size: 0.68rem; }
.event-log { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.event-log li { padding: 0.7rem; background: #f3f6fa; border-left: 0.25rem solid #6978d7; border-radius: 0.45rem; font-size: 0.72rem; }
.event-log li[data-kind="source"] { border-left-color: #e59a2f; }
.event-log li[data-kind="computed"] { border-left-color: #22a884; }
.event-log li[data-kind="effect"] { border-left-color: #d879a0; }

.source-panel { display: grid; gap: 1rem; }
.source-panel p { color: var(--muted); }
.source-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.source-tabs button { min-height: 2.5rem; color: var(--muted); background: #fff; border: 1px solid #cdd5e0; }
.source-tabs button[aria-selected="true"] { color: #fff; background: var(--blue); }
#source-code { min-height: 25rem; margin: 0; padding: 1rem; overflow: auto; color: #dffdfa; background: var(--navy); border-radius: 0.75rem; font: 0.72rem/1.55 "Cascadia Code", Consolas, monospace; }

@media (prefers-reduced-motion: reduce) {
  .graph-node { transition: none; }
}

@media (min-width: 44rem) {
  .concept-grid { grid-template-columns: 1.2fr repeat(2, 1fr); }
  .concept-grid > div:first-child { grid-row: span 2; }
  .workspace { grid-template-columns: 1.35fr 0.65fr; }
  .task-form > div { grid-template-columns: 1fr auto; }
}

@media (min-width: 58rem) {
  .graph-columns { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .graph-arrow { display: block; }
  .source-panel { grid-template-columns: 0.55fr 1.45fr; align-items: start; }
}

@media (max-width: 34rem) {
  .graph-heading,
  .panel-heading { flex-direction: column; }
  .action-status { text-align: left; }
}