/* ---- W5: removing a threat where it is seen (K47, K48; artboards 15, 23, 30) ---- */

/* A threat's line and its remove, siblings in a holder of their own per line:
   the line takes the width the 32 px minus leaves it. */
.aucra-tool-threat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.aucra-tool-threats .aucra-tool-threat-row > .aucra-tool-threat-line {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.aucra-tool-line-remove {
  flex: 0 0 auto;
}
/* A press refused while another person holds the threat says so under its
   line, where it was pressed (round 4, W6). */
.aucra-tool-threat-row > .aucra-tool-line-busy {
  flex: 1 1 100%;
}

/* A threat's head row, under Back: its id and "Threat", then Remove threat at
   the row's right end. The pin sits level with Back, not with this row, so
   the head keeps no room for it. */
.aucra-tool-threat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.aucra-content-window .aucra-tool-side .aucra-tool-threat-head > .aucra-tool-panel-head {
  padding-right: 0;
}
.aucra-tool-threat-head > .aucra-tool-remove-threat {
  margin-left: auto;
}
.aucra-tool-remove-threat .q-btn {
  white-space: nowrap;
}

/* Asking, either question takes the full width under what it asks about, the
   resting control gives way to it, and its two answers end the line on the
   right rather than Keep wrapping alone. */
.aucra-tool-threat-row > .aucra-tool-line-remove.aucra-confirm-open,
.aucra-tool-threat-head > .aucra-tool-remove-threat.aucra-confirm-open {
  flex: 1 1 100%;
  margin-left: 0;
}
.aucra-tool-line-remove.aucra-confirm-open .aucra-confirm-asking,
.aucra-tool-remove-threat.aucra-confirm-open .aucra-confirm-asking {
  justify-content: flex-end;
  width: 100%;
  gap: 8px 12px;
  padding: 6px 0 2px;
}
.aucra-tool-line-remove.aucra-confirm-open .aucra-confirm-question,
.aucra-tool-remove-threat.aucra-confirm-open .aucra-confirm-question {
  flex: 1 1 100%;
}

/* ---- W5: a new threat as a form (K40, K43, K45, E1, E5, E6; artboards 28,
   29 and 31) ---- */

/* The "Not added" tag where an added threat's id chip sits, in the review
   tags' shape and the mockup's gold (E6). */
.aucra-tool-review.aucra-tool-draft-tag {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
/* The line under Name after an Add with no name, and its box's edge (K43). */
.aucra-tool-name-needed {
  font-size: 12px;
  line-height: 1.45;
  color: var(--warn);
}
.aucra-field .q-field:has(input[aria-invalid="true"]) .q-field__control::before {
  border-color: var(--warn);
}
/* The foot stays in view at the foot of Threats while the form scrolls under
   it: the edge is the scroll container on the side and in the phone's
   dialog. It reaches the body's own padding to span the edge. */
.aucra-tool-draft-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px -16px -14px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -6px 16px rgba(28, 33, 38, 0.08);
}
.aucra-tool-draft-rest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aucra-tool-draft-note,
.aucra-tool-leave-ask {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.aucra-tool-draft-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The warning in the foot's place on a typed form being left (K45). */
.aucra-tool-leave {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--warn);
  background: var(--warn-wash);
}
/* E1 (WCAG 2.4.11): while the form shows, a field the caret moves to is
   scrolled above the foot, whose height with the warning is 120 px. */
.aucra-content-window .aucra-tool-side:has(> .aucra-tool-edge-threats:not(.aucra-tool-hidden) .aucra-tool-draft-foot) {
  scroll-padding-bottom: 120px;
}
/* E5: on a phone, while the form or a threat's panel shows, the dialog's own
   way back and Close are hidden, and so is the strip they stand on. */
@container aucra-tool (max-width: 619px) {
  .aucra-content-window .aucra-tool-side.aucra-tool-side-bare {
    padding-top: 0;
  }
}