/* Setup (COMMAND-720, public/setup): the gear at the right end of the top bar, and the section /setup — the metadata
   tables with Quick Search on the left, the picked table's index page on the right. Built without a design: every part
   carries the POC marker (poc-ui, app.css), which draws nothing (COMMAND-817). Loaded by index.html after app.css, so it uses the app's colours.
   A phone and a narrow window show one side at a time (the list, or the page with its back control); from 1100px, as
   Documentatie, the two side by side. */

/* The gear: like the App Launcher's dots at the other end of the bar. */
.setup-gear {
  flex: none; width: 44px; margin-right: calc(env(safe-area-inset-right) + 4px);
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.setup-gear svg { width: 22px; height: 22px; }
.setup-gear.on { color: var(--accent); border-bottom-color: var(--accent); }
@media (hover: hover) { .setup-gear:hover { color: var(--accent); } }

.setup-side { padding: 12px; }
.setup-title { margin: 0 0 10px; font-size: 1.05rem; }
.setup-tools { margin-bottom: 8px; }
.setup-search { width: 100%; }
.setup-tables { list-style: none; margin: 0; padding: 0; }
.setup-table {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.setup-table.on { background: var(--accent); color: #fff; }
.setup-table.on .setup-table-count { color: inherit; }
@media (hover: hover) { .setup-table:not(.on):hover { background: var(--surface-2, rgba(127, 127, 127, 0.12)); } }
.setup-none { padding: 9px 10px; }
.setup-back { margin: 0 0 8px; }
/* The switch says which setting it is to a screen reader; on screen the row's name already does. */
.setup-switch .switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A phone: one side at a time. Only below 1100px (COMMAND-769): outside this block these rules outweighed the wide
   block's and hid the list on a wide screen, the page squeezed into the left column. */
@media (max-width: 1099.98px) {
  .setup:not(.has-open) .setup-main { display: none; }
  .setup.has-open .setup-side { display: none; }
}

/* A record page (COMMAND-803: the one record page layout) beside the table list: while the room left of the list is too
   narrow for the record's two columns, its side column (who works on it, the Threads box) goes under the tabs. */
@media (min-width: 1100px) and (max-width: 1399.98px) {
  .setup .record { grid-template-columns: minmax(0, 1fr); grid-template-areas: "highlights" "main" "side"; }
}

@media (min-width: 1100px) {
  .setup { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .setup .setup-side, .setup .setup-main { display: block; }
  .setup-side { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; }
  .setup-back { display: none; }
}

/* COMMAND-1050: a colour setting's value — a swatch and its '#rrggbb'. */
.setup-color { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; }
.setup-color-swatch { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.2); }

/* COMMAND-1052: New on Settings asks the kind first — a row of buttons above the list, wrapping on a phone; a record
   setting whose record is gone says so in amber (the row and a callout on its record page). */
.setup-kind-pick { padding: 12px; margin-bottom: 12px; }
.setup-kind-question { margin: 0 0 8px; font-weight: 600; }
.setup-kind-list { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-record-gone { font-weight: 600; }
.setup-record-gone-callout { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; }