/* Demo layout. Colours, radii and shadows come from defuss-shadcn tokens. */
@layer components {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; line-height: 1.5; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  [hidden] { display: none !important; }
  .board { display: flex; flex-direction: column; gap: 1rem; min-height: 100dvh; padding: clamp(.75rem, 2vw, 1.25rem); }
  .board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
  .board-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .board-title h1 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
  .board-version { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-foreground); }
  .board-main { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  @media (max-width: 52rem) { .board-main { grid-template-columns: minmax(0, 1fr); } }
  .board-app, .board-inspector { display: flex; flex-direction: column; gap: .875rem; padding: clamp(.875rem, 2vw, 1.25rem); }

  .add-form { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
  .add-row { display: flex; flex-wrap: wrap; gap: .5rem; }
  .add-row .input { flex: 1 1 14rem; min-width: 0; }
  .add-tags { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; border: 0; font-size: .875rem; color: var(--muted-foreground); }
  .add-tags label { display: inline-flex; align-items: center; gap: .375rem; }

  .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
  .segmented { display: inline-flex; gap: .25rem; }
  .segmented [aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .toolbar-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
  .switch-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }

  .tasks { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; min-height: 12rem; }
  .task { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .625rem;
    padding: .375rem .5rem .375rem 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
  /* the row's node number, written by app.js from a WeakMap keyed by the element */
  .task::before { content: "#" attr(data-node); position: absolute; inset-inline-start: .5rem; font-family: var(--font-mono); font-size: .6875rem; color: var(--muted-foreground); }
  .task.done .task-title { text-decoration: line-through; color: var(--muted-foreground); }
  .task-title { border-color: transparent; background: transparent; box-shadow: none; }
  .task-title:hover, .task-title:focus { border-color: var(--input); }
  .task-tags { display: flex; gap: .25rem; }
  .task-empty { padding: 1.5rem; text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-md); }
  .born { animation: born .9s ease-out; }
  @keyframes born { from { box-shadow: 0 0 0 3px var(--chart-4); } to { box-shadow: 0 0 0 3px transparent; } }
  @media (max-width: 30rem) { .task-tags { display: none; } .task { grid-template-columns: auto minmax(0, 1fr) auto; } }

  .app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .hint { font-size: .75rem; color: var(--muted-foreground); }

  .inspector-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .inspector-sub { margin: .25rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); }
  .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; margin: 0; }
  .stats > div { padding: .5rem .625rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
  .stats dt { font-size: .6875rem; color: var(--muted-foreground); }
  .stats dd { margin: 0; font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; }
  .log { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .75rem; min-height: 6rem; }
  .log-entry { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: .5rem; }
  .log-entry time { font-family: var(--font-mono); color: var(--muted-foreground); }
  .log-entry span:last-child { overflow-wrap: anywhere; }
  .form-out { margin: 0; padding: .625rem .75rem; max-height: 14rem; overflow: auto; border-radius: var(--radius-md); background: var(--muted); font-family: var(--font-mono); font-size: .6875rem; white-space: pre-wrap; overflow-wrap: anywhere; }

  @media (prefers-reduced-motion: reduce) { .born { animation: none; } }
}