/* The tool pages (ui/pages/tools/), the threat model first: its head, the
   diagram actions, the canvas card with its toolbar and status line, the
   inspector beside the canvas at a wide container and under it at a narrow
   one, and the empty state, as the Tools canvas draws them
   (docs/design/tool_parts.py, tool_inspector.py, tool_states.py). The rail's
   Tools row is here too. Every colour is a brand.css token. */

/* ---- the rail's Tools row ---- */
.aucra-tool-row .aucra-tool-icon {
  flex: 0 0 38px;
  font-size: 16px;
  color: var(--rail-muted);
}
.aucra-tool-row.aucra-clause-active .aucra-tool-icon {
  color: var(--gold);
}

/* ---- the page ---- */
.aucra-tool {
  container: aucra-tool / inline-size;
}
.aucra-tool-revision {
  color: var(--muted);
}
.aucra-tool-help {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.aucra-tool-spacer {
  flex: 1 1 auto;
}

/* ---- B: the open diagram's actions, in the picker (picker.py) ---- */
.aucra-tool-actions:has(.aucra-confirm-open) > :not(.aucra-confirm-open) {
  display: none;
}
.aucra-tool-actions > .aucra-confirm-open {
  flex: 1 1 100%;
}
.aucra-tool-actions > .aucra-confirm-open .aucra-confirm-question {
  flex: 1 1 320px;
}
.aucra-tool-actions {
  margin-left: auto;
  flex-wrap: wrap;
}

/* ---- C: the canvas card ---- */
.aucra-tool-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  /* Brought into view after a start, clear of the shell's header (C6). */
  scroll-margin-top: 72px;
}
.aucra-tool-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
/* The toolbar's buttons are the canvas's compact 28 px tools, so the adds,
   the view buttons and Remove selected share one line at the wide column. */
.aucra-tool-bar .q-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 12.5px;
}
.aucra-tool-bar .q-btn .q-icon {
  font-size: 16px;
  margin-right: 4px;
}
.aucra-tool-bar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* An add's shape icon shows only at a narrow width, below. */
.aucra-tool-bar .q-icon.aucra-tool-shape {
  display: none;
}
/* "Remove selected" and its answer carry the outline of the toolbar's other
   buttons (P2-13); the kit draws them as text buttons. */
.aucra-tool-bar .q-btn.aucra-btn-text {
  align-self: center;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 500;
}
.aucra-tool-bar .q-btn.aucra-btn-text:hover {
  background: var(--mist);
}
/* Off for a viewer, as the kit's ghost buttons are (content_controls.css):
   Quasar's fade is `!important` in its own layer, hence `base`. */
@layer base {
  .aucra-tool-bar .q-btn.aucra-btn-text.disabled,
  .aucra-tool-bar .q-btn.aucra-btn-text[disabled] {
    background: var(--mist) !important;
    color: var(--placeholder) !important;
    opacity: 1 !important;
    cursor: default !important;
  }
}
/* While the removal asks, the question and its answers take the toolbar's
   line, so the canvas under it does not move (P3-8). */
.aucra-tool-bar:has(.aucra-confirm-open) > :not(.aucra-tool-removal) {
  display: none;
}
.aucra-tool-bar > .aucra-tool-removal.aucra-confirm-open {
  flex: 1 1 100%;
}
.aucra-tool-removal.aucra-confirm-open .aucra-confirm-question {
  flex: 1 1 240px;
}
.aucra-tool-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.aucra-tool-main {
  min-width: 0;
  padding: 12px 0 0;
  background: var(--wash-head);
}
.aucra-tool-main .aucra-canvas {
  border: 0;
  border-radius: 0;
  background: var(--wash-head);
}
/* The card clips what leaves it, and the status line sits under the canvas,
   so the canvas's focus ring is drawn inside its edge (P2-1). */
.aucra-tool-main .aucra-canvas:focus-visible {
  outline-offset: -2px;
}
/* With the card's top at the top of the window, under the 56 px header, the
   toolbar (49 px), the canvas and the status line (36 px) all fit, so both
   stay in reach while working low on the canvas (P1-10, P3-13). */
.aucra-tool-main .aucra-canvas-svg {
  height: clamp(480px, calc(100vh - 160px), 900px);
}
.aucra-tool-status {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel);
}
/* The status line in a mouse's words or a touch screen's (routing plan R11). */
.aucra-tool-status .aucra-for-coarse { display: none; }
@media (pointer: coarse) {
  .aucra-tool-status .aucra-for-fine { display: none; }
  .aucra-tool-status .aucra-for-coarse { display: block; }
}
.aucra-tool-side {
  border-left: 1px solid var(--line);
  min-width: 0;
}

/* ---- D: the inspector ---- */
.aucra-tool-inspector {
  padding: 14px 16px;
}
.aucra-tool-panel-role {
  font-size: 13.5px;
  font-weight: 600;
}
.aucra-tool-group {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-tool-busy {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold-deep);
}
.aucra-tool-fact-label {
  font-size: 12.5px;
  font-weight: 500;
}
.aucra-tool-fact-value {
  font-size: 13px;
  color: var(--text);
}
.aucra-tool-connect .aucra-field {
  flex: 1 1 auto;
  min-width: 0;
}
/* Read only, for a viewer or on a row another person holds (P1-6, P2-7):
   the mockup's grey text on the mist fill, 4.51:1, still in the Tab order. */
.aucra-tool-inspector .q-field--readonly .q-field__control {
  background: var(--mist);
}
.aucra-tool-inspector .q-field--readonly .q-field__native,
.aucra-tool-inspector .q-field--readonly .q-field__input {
  color: var(--muted);
}
/* "Choose an element", shown while nothing is picked (P2-10). */
.aucra-tool-inspector .aucra-select-empty .q-field__native {
  color: var(--placeholder);
}

/* A narrow column (the assistant drawer open, a tablet): the inspector goes
   under the canvas, as the clause head's container query does since 6.6. */
@container aucra-tool (max-width: 959px) {
  .aucra-tool-body {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The narrower toolbar takes two lines and the status line may too. */
  .aucra-tool-main .aucra-canvas-svg {
    height: clamp(480px, calc(100vh - 215px), 900px);
  }
  .aucra-tool-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---- E: the empty state ---- */
.aucra-tool-empty {
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--wash-head);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 20px 20px;
}
.aucra-tool-empty-body {
  max-width: 820px;
  text-align: center;
}
.aucra-tool-empty-icon {
  font-size: 36px;
  color: var(--muted);
}
.aucra-tool-empty-line {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
/* Six adds, three to a line (step 3 review, R2). */
.aucra-tool-empty-adds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
/* The starters (tools plan G14): under a rule below the adds (artboard 11)
   and in the panel "New draft from a starter" opens (artboard 12), each
   button with its line beside it, under it on a phone. */
.aucra-tool-starters {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.aucra-tool-starters-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.aucra-tool-starter-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 16px;
  align-items: center;
  text-align: left;
}
.aucra-tool-starter-list > .q-btn {
  justify-self: start;
}
.aucra-tool-starter-fits {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* The empty state's adds and every starter grow to fit a label that wraps
   (tools round 2, C1): at a phone's width a kit button's one 32 px line
   would let the words run out of its box. */
.aucra-tool-empty-adds .q-btn.aucra-btn,
.aucra-tool-starter-list > .q-btn.aucra-btn {
  height: auto;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.35;
}
.aucra-tool-starters-panel {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aucra-tool-starters-panel-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.aucra-tool-actions .q-btn[aria-expanded="true"] {
  background: var(--mist);
  border-color: var(--gold-deep);
}
@container aucra-tool (max-width: 639px) {
  .aucra-tool-empty-adds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aucra-tool-starter-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .aucra-tool-starter-fits {
    margin-bottom: 8px;
  }
  /* A phone's toolbar: the icons alone, their words in each button's name
     and tooltip (P3-14). An add shows its role's shape, not a plus. */
  .aucra-tool-bar .aucra-tool-adds .q-icon.on-left {
    display: none;
  }
  .aucra-tool-bar .q-icon.aucra-tool-shape {
    display: inline-flex;
  }
  .aucra-tool-bar-group .q-btn .q-icon,
  .aucra-tool-removal > :not(.aucra-confirm-asking) .q-btn .q-icon {
    margin-right: 0;
  }
  .aucra-tool-bar .q-btn {
    min-width: 32px;
  }
}
/* An outcome of a toolbar button, as the platform's notice too (tools round
   2, C2), shown only where the toolbar shows its icons alone. Quasar draws
   a notice at the body, outside the page's container, so the viewport's
   width stands in for the container query above. */
@media (min-width: 640px) {
  .q-notification.aucra-notice-narrow {
    display: none;
  }
}
/* The words of those buttons: Quasar's `.block` is `!important` in its own
   layer, so only an important rule in the earlier `base` layer hides them. */
@layer base {
  @container aucra-tool (max-width: 639px) {
    .aucra-tool-bar-group .q-btn .block,
    .aucra-tool-removal > :not(.aucra-confirm-asking) .q-btn .block {
      display: none !important;
    }
  }
}

/* ---- D: model threats (prototype plan K17, artboards 14 and 15) ---- */
/* A threat as a line that opens its panel: its id, its name, its review. */
.aucra-tool-threats .aucra-tool-threat-line {
  width: 100%;
  height: auto;
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.aucra-tool-threat-line .q-btn__content {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.aucra-tool-threat-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.aucra-tool-threat-name {
  flex: 1 1 60%;
  min-width: 0;
  font-weight: 400;
}
/* Reviewed takes a neutral tag, the text's own colour, never the pass green:
   it says someone read the threat, not that anything passed (K16, A9). */
.aucra-tool-review {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.aucra-tool-review-reviewed {
  border-color: var(--text);
  color: var(--text);
}
.aucra-tool-history {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aucra-tool-history .aucra-tool-help {
  color: var(--text);
}
/* Back to the row, on a line of its own left of the pin (artboard 15); a
   long name wraps rather than running under "Keep open". */
.aucra-tool-side .aucra-tool-back .q-btn__content {
  flex-wrap: nowrap;
  text-align: left;
}
.aucra-tool-side .aucra-tool-back {
  max-width: calc(100% - 118px);
  height: auto;
  min-height: 32px;
  white-space: normal;
  text-align: left;
}

/* ---- D: the STRIDE checklist (prototype plan K20, artboards 14 and 19) ---- */
.aucra-tool-checklist {
  gap: 14px;
}
.aucra-tool-category {
  gap: 6px;
}
.aucra-tool-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.aucra-tool-category-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.aucra-tool-threat-category {
  font-size: 12px;
  color: var(--muted);
}

/* ---- D: the checks (K21, artboard 16) ---- */
.aucra-tool-checks-count {
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink-soft);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.aucra-tool-checks-head:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.aucra-tool-coverage {
  gap: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.aucra-tool-check {
  gap: 6px;
}
.aucra-tool-check-head {
  display: flex;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.aucra-tool-check-count {
  font-weight: 400;
  color: var(--muted);
}
.aucra-tool-check-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.aucra-tool-check-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aucra-tool-check-lines .aucra-tool-check-line {
  border-color: transparent;
  background: transparent;
  width: 100%;
  height: auto;
  min-height: 28px;
  justify-content: flex-start;
  padding: 3px 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.aucra-tool-check-line .q-btn__content {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.aucra-tool-check-line .q-icon {
  color: var(--gold-deep);
  font-size: 16px;
  margin-right: 6px;
}
.aucra-tool-check-said {
  font-size: 13px;
  line-height: 1.45;
  padding-left: 26px;
}
.aucra-tool-check-chips .aucra-tool-check-chip {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mist);
  font-size: 12.5px;
  font-weight: 400;
}
.aucra-tool-check-chip .q-btn__content {
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}
/* The chip's id as the mockup draws it: mono and muted, no box of its own. */
.aucra-tool-check-chip .aucra-id {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
}
/* Words a screen reader hears and nobody sees (a check chip's and the
   Checks button's name). */
.aucra-tool-unseen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}