/* views.css - Views: the list, a view page, its editor, and the two sections
   this workstream draws (links and a note).

   Everything here uses the existing tokens and the existing .card, .btn,
   .field and .chip classes; nothing redefines a component. The rules below
   are only layout and the few things a view page needs that no other screen
   does: a column of section cards, a picker that scrolls, and a preview that
   reads as a preview rather than as the page. */

/* ---------------------------------------------------------------- the list */

/* The name is the link into the page, so it has to be big enough to hit:
   inline text is 21px tall here and the floor for a link is 24. */
.views-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 24px;
  padding: var(--s-2) 0;
  color: inherit;
}
.views-name svg { width: 16px; height: 16px; color: var(--c-text-3); flex: none; }
.views-name:hover strong { color: var(--c-accent); }
.views-draft { display: block; margin-top: var(--s-2); color: var(--c-text-3); font-size: var(--t-xs); }
.views-kinds { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.views-kinds-none { color: var(--c-text-3); }
.views-actions { text-align: right; white-space: nowrap; }
.views-foot { margin-top: var(--s-6); max-width: 78ch; line-height: var(--t-body); }

/* ---------------------------------------------------------------- a view */

/* One column of cards. The gap is the page rhythm, so a view of four
   sections reads like any other screen rather than like a dashboard. */
.view-sections { display: grid; gap: var(--s-7); min-width: 0; }
.section-card { min-width: 0; }
.section-card[data-state="locked"] { border-style: dashed; }
.section-card[data-state="failed"] { border-color: var(--c-danger); }

/* The note section. pre-wrap is the whole promise: the line breaks the
   author typed survive, and the text is a text node, never markup. */
.view-note {
  margin: 0;
  white-space: pre-wrap;
  max-width: 78ch;
  line-height: var(--t-body);
  color: var(--c-text);
}

/* The links section. */
.view-links { list-style: none; margin: 0; padding: 0; }
.view-links li + li { border-top: var(--bw) solid var(--c-border); }
.view-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  /* 40px tall at the smallest, which keeps every link past the 32 by 32 the
     geometry audit measures. */
  padding: var(--s-4) var(--s-2);
  min-height: 40px;
  color: inherit;
  text-decoration: none;
}
.view-link:hover { color: var(--c-accent); }
.view-link svg { width: 15px; height: 15px; color: var(--c-text-3); flex: none; }
.view-link:hover svg { color: var(--c-accent); }
.view-link-host { color: var(--c-text-3); font-size: var(--t-xs); }

.po-narrowed { margin: 0 0 var(--s-6); }

/* ---------------------------------------------------------------- the editor */

.view-editor {
  display: grid;
  grid-template-columns: minmax(320px, 25rem) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.view-editor-col { display: grid; gap: var(--s-7); min-width: 0; }

.view-editor-problems {
  margin: 0 0 var(--s-7);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-9);
  border: var(--bw) solid var(--c-danger);
  border-radius: var(--r-md);
  background: var(--c-danger-quiet);
  color: var(--c-text);
  font-size: var(--t-sm);
  line-height: var(--t-body);
}
.view-editor-problems.hidden { display: none; }

.view-editor-sections { display: grid; gap: var(--s-6); }
.view-editor-section .card-head { gap: var(--s-4); }
.view-editor-step {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: var(--c-accent-quiet);
  color: var(--c-accent);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.view-editor-move { display: flex; align-items: center; gap: var(--s-3); }

/* Up and down, never drag: a drag-only reorder is unusable with a keyboard
   and on a touch screen. One glyph, rotated, so both arrows are the same
   shape at the same weight. */
.view-editor-arrow { width: 32px; height: 32px; }
.view-editor-arrow[data-dir="up"] svg { transform: rotate(180deg); }
.view-editor-arrow[disabled] { opacity: .4; cursor: not-allowed; }

.view-editor-config { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.view-editor-add {
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-border);
}
.view-editor-add select { min-height: 36px; flex: 1 1 14rem; }

.view-editor-preview { margin-bottom: 0; }
.view-editor-preview .section-head { align-items: baseline; }

/* A scrolling group of checkboxes rather than a custom multi-select: every
   row is a real label and a real checkbox, so it works from the keyboard and
   with a screen reader with nothing written for it. */
.view-picker {
  display: grid;
  gap: var(--s-1);
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--s-4);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.view-picker .field-check { padding: var(--s-2) var(--s-1); min-height: 32px; align-items: center; }
.view-picker .field-label { margin: 0; font-weight: var(--t-regular); white-space: pre; }
.view-picker-inline { max-height: none; }

.view-picker-group { margin-top: var(--s-5); }
.view-picker-group > summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  min-height: 32px;
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: var(--t-semibold);
  color: var(--c-text);
}
.view-picker-group > summary:hover { color: var(--c-accent); }
.view-picker-group[open] > summary { margin-bottom: var(--s-3); }

.view-links-edit { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.view-links-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--s-4);
  align-items: end;
}
.view-links-drop { width: 32px; height: 32px; margin-bottom: 2px; }

/* One column under 1200: the preview goes below the form rather than beside
   it, which is the only honest thing to do with two columns of controls. */
@media (max-width: 1200px) {
  .view-editor { grid-template-columns: minmax(0, 1fr); }
}