/* Saved views: the sidebar block that names the current diagram question, and
   the #/views page that lists the ones already named.

   Every colour is a custom property declared on :root in app.css, so one
   declaration serves both schemes. A literal hex here would be right in one
   of them and wrong in the other.

   The class prefix is `sv-` throughout and nothing in this file restyles a
   shared class. The page frame - .page, .block, .block-head, .kv, .field,
   .filter-head, .btn, .hint, .muted - is the design system's and is used
   unchanged: a rule of this file's own on one of those names would silently
   relay out every other view that uses it.

   There is no animation and no transition in this file. Motion is a
   preference, and the blanket reduced-motion rule in app.css can shorten one
   but nothing here needs one to begin with. */

/* ---------- the sidebar block ---------- */

/* Sits between "Group by" and the filter list: near the filters it is about,
   above them so it is reachable without scrolling past a facet list that can
   be two hundred entries long. */
.sv-form-slot:empty { display: none; }

.sv-form {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.sv-form .field { margin-bottom: 10px; }

.sv-form input[type="text"] { width: 100%; }

.sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sv-alert:empty {
  /* .form-error reserves a line so nothing jumps when a message appears; in a
     list of rows that reserved line is repeated once per row and reads as
     loose spacing. It is only claimed when there is something to say. */
  min-height: 0;
  margin-top: 0;
}

.sv-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.sv-quick-open {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  /* A saved view's name is the customer's own words and can be long. One
     line, cut with an ellipsis, keeps the sidebar a column rather than a
     paragraph; the whole name is on the button's title. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-quick-open:hover { border-color: var(--muted); }

/* ---------- the page ---------- */

.sv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sv-view {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sv-view-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sv-name {
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

/* What the view actually asks. The reason somebody opens this page rather
   than guessing from a name, so it is the largest thing in the row. */
.sv-detail {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sv-view .sv-actions { margin-top: 12px; }

.sv-slot { margin-top: 12px; }

.sv-slot:empty { display: none; }

.sv-confirm {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--ink);
}

.sv-confirm p { margin: 0 0 10px; }

@media (max-width: 620px) {
  /* Four buttons in a row squeeze "Replace with current filters" into a
     column two words wide. */
  .sv-view-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}