/* The window's three panels (docs/plans/threat-model-prototype-w4.md, K24
   to K32; the Tools canvas's artboards 13 to 27, docs/design/tool_side.py):
   the right edge, 340 px, holding Details or Threats, one at a time, and
   Checks, 260 px, on the canvas's left. K6 to K8's block moved here from
   pages_tools_window.css. Keyed on `.aucra-content-window` and the tool's
   own `aucra-tool-*` classes, which only a tool page draws. Every colour is
   a brand.css token. */

/* ---- K6 to K8, K26: the right edge, Details or Threats ---- */
.aucra-content-window .aucra-tool-side {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--aucra-covered);
  z-index: 3;
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 0;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(28, 33, 38, 0.1);
  transform: translateX(calc(100% + var(--aucra-covered)));
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
.aucra-content-window .aucra-tool-side.aucra-tool-side-open {
  transform: none;
  visibility: visible;
  transition: transform 200ms ease, visibility 0s;
}
.aucra-tool-side-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  gap: 6px;
}
.aucra-content-window .aucra-tool-side .aucra-tool-panel-head {
  padding-right: 112px;
}
.q-btn.aucra-tool-side-close {
  display: none;
}
/* The pin lies tilted while off and stands upright while on (U41, K23). */
.q-btn.aucra-tool-pin .q-icon {
  transform: rotate(45deg);
}
.q-btn.aucra-tool-pin.aucra-pressed .q-icon {
  transform: none;
}
@container aucra-tool (min-width: 960px) {
  /* Beside the canvas, which narrows once the slide ends (K5). */
  .aucra-content-window .aucra-tool-body:has(> .aucra-tool-side-open) > .aucra-tool-main {
    margin-right: 340px;
  }
  .aucra-content-window .aucra-tool-side {
    box-shadow: none;
  }
}
/* Over the canvas's right side, below 960 px or beside the assistant: the
   status line keeps clear of it (B6). */
@container aucra-tool (max-width: 959px) {
  .aucra-content-window .aucra-tool-body:has(> .aucra-tool-side-open) .aucra-tool-status {
    padding-right: calc(14px + var(--aucra-covered) + 340px);
  }
}
body:has(.aucra-ai-tab-open) .aucra-content-window .aucra-tool-body > .aucra-tool-main {
  margin-right: 0;
}
body:has(.aucra-ai-tab-open) .aucra-content-window .aucra-tool-body:has(> .aucra-tool-side-open) .aucra-tool-status {
  padding-right: calc(14px + var(--aucra-covered) + 340px);
}
/* Below a 620 px tool (K30): a modal dialog over the whole working area
   (K8, B4), one at a time with Checks' (dialogs.py). The tool's width, not
   the window's: a window from 640 px can still give a tool under 620 px,
   and Checks is a dialog there. The same query marks the canvas narrow for
   the kit (covers.js reads `--aucra-canvas-narrow`), so the server's
   dialogs and these rules change together. */
.aucra-content-window .aucra-tool-card {
  --aucra-canvas-narrow: 0;
}
.q-btn.aucra-tool-side-back {
  display: none;
}
@container aucra-tool (max-width: 619px) {
  .aucra-content-window .aucra-tool-card {
    --aucra-canvas-narrow: 1;
  }
  .aucra-content-window .aucra-tool-side {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    /* Over the assistant's tab (1500), under its open drawer (3000). */
    z-index: 1600;
    width: auto;
    border-left: 0;
    padding-top: 52px;
    transform: translateX(100%);
  }
  .aucra-content-window .aucra-tool-side .aucra-tool-panel-head {
    padding-right: 0;
  }
  .q-btn.aucra-tool-pin {
    display: none;
  }
  .q-btn.aucra-tool-side-close,
  .q-btn.aucra-tool-side-back {
    display: inline-flex;
  }
}
/* A way back stands where Close sits: the one not wanted is hidden. */
.aucra-content-window .aucra-tool-side-controls > .q-btn.aucra-tool-hidden {
  display: none;
}

/* The body not shown: hidden at once, no slide (K26); it stays drawn. */
.aucra-content-window .aucra-tool-side > .aucra-tool-hidden {
  display: none;
}
/* A head the caret lands on when its body shows (K31, B2). */
.aucra-content-window .aucra-tool-panel-head[data-head]:focus-visible,
.aucra-tool-checks-head:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ---- K24: the line Details keeps where a row's Threats section was ---- */
.aucra-tool-here {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.aucra-tool-here .q-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.aucra-tool-here .q-btn .q-btn__content {
  flex-wrap: nowrap;
}
.aucra-tool-here-said {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

/* ---- K24: a threat's line, its name over its tags (artboards 22, 23) ---- */
.aucra-tool-threat-line .aucra-tool-threat-words {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.aucra-tool-threat-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aucra-tool-threat-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.aucra-tool-threat-go {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--muted);
}

/* ---- K27, K32: Checks, on the canvas's left ---- */
.aucra-content-window .aucra-tool-checks-side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
.aucra-content-window .aucra-tool-checks-side.aucra-tool-checks-open {
  transform: none;
  visibility: visible;
  transition: transform 200ms ease, visibility 0s;
}
.aucra-tool-checks-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aucra-tool-checks-top .aucra-tool-checks-head {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
/* Beside the canvas while the tool is at least 620 px wide (260 and 360),
   the canvas taking its room once the slide ends (K27, B5). */
@container aucra-tool (min-width: 620px) {
  .aucra-content-window .aucra-tool-body:has(> .aucra-tool-checks-open) > .aucra-tool-main {
    margin-left: 260px;
  }
}
/* Below a 620 px tool: a modal dialog named "Checks" over the whole
   working area, as the edge's (K30, B5). */
@container aucra-tool (max-width: 619px) {
  .aucra-content-window .aucra-tool-checks-side {
    position: fixed;
    top: 56px;
    right: 0;
    left: 0;
    bottom: 0;
    /* Over the assistant's tab (1500), under its open drawer (3000). */
    z-index: 1600;
    width: auto;
    border-right: 0;
  }
}
.aucra-tool-threat-tags .aucra-tool-threat-category {
  font-weight: 400;
}