/*
 * Znanje tab — only what app.css does not already have.
 *
 * Same rule nadzorna.css follows: no second copy of .btn, .card, .field,
 * .calls-table or .modal lives here. What is genuinely new is the tree editor's
 * nesting — a family holds questions, a question holds answers, and an answer
 * holds a row of controls — which app.css has no shape for because nothing else
 * in the dashboard is more than one level deep.
 *
 * The depth is expressed as a left rule and a tint rather than as indentation,
 * because at four levels indentation runs out of screen before it runs out of
 * tree. Tokens are app.css's; nothing here introduces a colour.
 */

.zn-switch { margin: .25rem 0 1.4rem; }
.zn-section-head { margin-top: 0; }
.zn-section-head h2 { font-size: 1.15rem; margin: 0; }
.zn-head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.zn-lede { margin: -.4rem 0 1.1rem; max-width: 62ch; }

/* `.btn` sets a display, which outranks the UA stylesheet's
   `[hidden] { display: none }` — the same trap `.svc-foot .btn[hidden]` and
   `.page-head .btn[hidden]` in app.css exist for. */
.zn-head-actions .btn[hidden] { display: none; }
.zn-dirty[hidden], .alert-box[hidden], .zn-empty[hidden] { display: none; }

.zn-dirty {
  font-size: .8rem;
  color: #8A5D00;
  background: rgba(180, 120, 10, .1);
  border-radius: 999px;
  padding: .2rem .65rem;
  white-space: nowrap;
}

/* ── the FAQ list ───────────────────────────────────────────────────────── */

.faq-row { cursor: pointer; }
.faq-q { font-weight: 600; }
.faq-a { color: var(--ink-soft); font-size: .88rem; display: block; margin-top: .15rem; }
.faq-keys { color: var(--ink-faint); font-size: .8rem; display: block; margin-top: .2rem; }

/* ── the dialog's first-time explainer ─────────────────────────────────── */

/* Neutral rather than `.alert-box`'s red or `.warn-box`'s amber — it is not
   telling the owner anything is wrong. Borrows `.zn-nest`'s left-rule-and-tint
   shape (below) rather than a bordered box all the way round, for the same
   reason that shape exists there: a full box reads as a problem to notice,
   a rule reads as an aside. */
.zn-help {
  border-left: 2px solid var(--azure);
  background: var(--paper);
  border-radius: 0 9px 9px 0;
  padding: .75rem .95rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.zn-help p { margin: 0 0 .6rem; }
.zn-help p:last-of-type { margin-bottom: .7rem; }
.zn-help strong { color: var(--ink); }
.zn-help__actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ── the tree ───────────────────────────────────────────────────────────── */

.zn-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.zn-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: .2rem;
}
.zn-panel__head h3 { font-size: 1rem; margin: 0; }
.zn-panel__hint { color: var(--ink-soft); font-size: .82rem; line-height: 1.5; margin: .1rem 0 .9rem; max-width: 70ch; }

/* One nesting step: a rule down the left and a slightly cooler ground, so a
   question inside a family and an answer inside a question read as contained
   without costing 2rem of width each. */
.zn-nest {
  border-left: 2px solid var(--line);
  background: var(--paper);
  border-radius: 0 9px 9px 0;
  padding: .85rem 1rem;
  margin: .7rem 0 .7rem .2rem;
}
.zn-nest__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
}
.zn-nest__title { font-weight: 600; font-size: .92rem; }
.zn-nest--answer { background: var(--card); border-left-color: var(--azure); }

.zn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem; }
.zn-grid > .zn-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .zn-grid { grid-template-columns: 1fr; } }

/* The outcome picker: a select plus the one value control that outcome needs. */
.zn-outcome { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.zn-outcome > * { flex: 1 1 12rem; min-width: 0; }

.zn-row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.zn-empty { color: var(--ink-faint); font-size: .85rem; padding: .6rem 0; }

/* The problems banner stacks its lines instead of laying them out in a row,
   which is what `.alert-box`'s flex does by default.

   **And then it needs its own `[hidden]` rule**, because an id selector setting
   a display outranks both the UA stylesheet's `[hidden] { display: none }` and
   the `.alert-box[hidden]` rule above — which is how an empty red bar shipped to
   a browser and not to a test. Same trap as `.svc-foot .btn[hidden]` in app.css,
   one specificity step further along. */
#tree-problems { display: block; }
#tree-problems[hidden] { display: none; }
#tree-problems ul { margin: .4rem 0 0; padding-left: 1.1rem; }
#tree-problems li { margin: .15rem 0; }

.zn-more { margin: .6rem 0 .2rem; }
.zn-more > summary { cursor: pointer; color: var(--ink-soft); font-size: .85rem; }
.zn-more[open] > summary { margin-bottom: .5rem; }

/* ── the collapsed tree ─────────────────────────────────────────────────── */

/* Status Kay's `barvanje` family alone is six questions and twenty-two answers,
   which rendered nine thousand pixels tall when every level was expanded. A
   family and a question each collapse to one line; an answer does not, because
   by the time you have opened a question the answers are what you came for. */
details.zn-panel > summary,
details.zn-nest > summary { cursor: pointer; list-style: none; }
details.zn-panel > summary::-webkit-details-marker,
details.zn-nest > summary::-webkit-details-marker { display: none; }

details.zn-panel > summary::before,
details.zn-nest > summary::before {
  content: '▸';
  color: var(--ink-faint);
  margin-right: .5rem;
  font-size: .8em;
}
details[open].zn-panel > summary::before,
details[open].zn-nest > summary::before { content: '▾'; }

details.zn-panel > summary { margin-bottom: 0; }
details[open].zn-panel > summary { margin-bottom: .6rem; }
details.zn-nest > summary { margin-bottom: 0; }
details[open].zn-nest > summary { margin-bottom: .5rem; }

/* The delete button lives inside the summary, so it must not stretch the row. */
.zn-nest__head .btn, .zn-panel__head .btn { flex: 0 0 auto; }

/* `summary::before` is a flex item, so a two-item head becomes a three-item one
   and `space-between` pushes the title into the middle of the row. The title
   takes the slack instead. */
.zn-panel__head h3, .zn-nest__head .zn-nest__title { margin-right: auto; }

/* `.field-hint` is sized for a line under an input; as a paragraph of its own it
   needs the room. */
.zn-lede { line-height: 1.55; }