@layer components {
  /* A container as a table: the other view of the same database as its Pages. Hairlines, the
     paper's type, no fills; a column's name opens its menu, the + adds a field, a cell is written
     where it is. Wide tables scroll sideways inside the page. */
  .db { display: grid; gap: 0.7rem; }
  .db-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-size: 0.8rem; color: var(--ink-soft); }
  .db-tool { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
  .db-select, .db-words, .db-edit input, .db-edit select, .db-rename input, .db-new input, .db-new select {
    font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.45rem;
  }
  .db-words { width: 10rem; }
  .db-clear { color: var(--ink-soft); }
  .db-wrap { overflow-x: auto; margin-inline: -0.2rem; padding-inline: 0.2rem; }
  .db-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.86rem; }
  .db-table th, .db-table td { text-align: start; vertical-align: top; padding: 0.4rem 0.7rem 0.4rem 0; border-block-end: 1px solid var(--rule); }
  .db-table thead th { font-weight: 400; color: var(--ink-soft); font-size: 0.76rem; white-space: nowrap; }
  .db-head.is-sorted { color: var(--ink); }
  .db-col { position: relative; }
  .db-col > summary { list-style: none; cursor: pointer; }
  .db-col > summary::-webkit-details-marker { display: none; }
  .db-col > summary:hover { color: var(--ink); }
  .db-kind { font-size: 0.66rem; color: var(--ink-soft); opacity: 0.8; }
  .db-arrow { color: var(--ink); }
  .db-menu {
    position: absolute; z-index: 50; top: calc(100% + 0.3rem); left: 0; display: grid; gap: 0.25rem; min-width: 13rem; padding: 0.5rem;
    background: var(--raised); border: 1px solid color-mix(in oklab, var(--rule), transparent 30%); border-radius: 12px; color: var(--ink);
    box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.08), 0 16px 36px -14px oklch(var(--lch-shade) / 0.4); white-space: normal;
  }
  .db-menu > a, .db-remove { display: block; padding: 0.25rem 0.4rem; border-radius: 6px; color: var(--ink); text-decoration: none; font: inherit; font-size: 0.8rem; background: none; border: 0; text-align: start; width: 100%; }
  .db-menu > a:hover, .db-remove:hover { background: color-mix(in oklab, var(--accent), var(--paper) 78%); }
  .db-remove { color: var(--c-red); }
  .db-rename { display: flex; gap: 0.3rem; padding: 0.2rem 0.4rem; }
  .db-new { min-width: 16rem; gap: 0.5rem; }
  .db-new .field { display: grid; gap: 0.2rem; font-size: 0.76rem; }
  .db-new .db-for-choice, .db-new .db-for-relation { display: none; }
  .db-new:has(.db-kind-select option[value=choice]:checked) .db-for-choice,
  .db-new:has(.db-kind-select option[value=choices]:checked) .db-for-choice,
  .db-new:has(.db-kind-select option[value=relation]:checked) .db-for-relation { display: grid; }
  .db-add { width: 2rem; }
  .db-add .db-menu { left: auto; right: 0; }
  .db-group th { padding-block-start: 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .db-name { color: var(--ink); font-weight: 700; text-decoration: none; }
  .db-name:hover { text-decoration: underline; text-decoration-color: var(--rule); }
  .db-from { display: block; font-size: 0.7rem; color: var(--ink-soft); }
  .db-text { color: var(--ink-soft); }
  .db-cell-value { min-width: 6rem; max-width: 22rem; }
  .db-value { display: block; width: 100%; min-height: 1.4em; text-align: start; font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: text; }
  .db-value:hover { background: color-mix(in oklab, var(--desk), transparent 30%); }
  .db-status { font-weight: 700; }
  .db-note { display: block; font-size: 0.76rem; color: var(--ink-soft); }
  .db-edit { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
  .db-edit[hidden], .db-value[hidden] { display: none; }
  .db-check { width: 1rem; height: 1rem; border: 1.5px solid var(--ink-soft); border-radius: 4px; background: var(--paper); }
  .db-check.is-on { background: var(--ink-soft); }
}

/* Columns (round two, stream C): the rows laid in columns of the person's own words, each card a
   name on a small sheet; a column a card is dragged over lifts a little. Words, never a colour. */
@layer components {
  .columns-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); gap: 1rem; overflow-x: auto; padding-block: 0.5rem 1rem; margin-inline: -0.2rem; padding-inline: 0.2rem; }
  .column { min-width: 0; border-radius: 8px; padding: 0.3rem 0.4rem; }
  .column.is-drop { background: var(--raised); box-shadow: var(--thing-shadow); }
  .column-title { margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
  .column-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .column-card { padding: 0.5rem 0.65rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); display: grid; gap: 0.2rem; cursor: grab; }
  .column-card.is-dragging { opacity: 0.4; }
  .column-card-title { color: var(--ink); text-decoration: none; font-size: 0.9rem; }
  .column-card-title:hover { text-decoration: underline; text-underline-offset: 0.15em; }
  .column-card-line { font-size: 0.78rem; color: var(--ink-soft); }
  .todo-handoff-words { font-size: 0.85rem; }
  @media (max-width: 60ch) { .columns-row { grid-auto-columns: minmax(11rem, 80vw); } }
}