/* Attack Model Composer additions. Keeps existing theme and layout intact. */

.am-composer-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25em;
}

/*
  The base site theme is light.
  The composer UI is intentionally presented as a high-contrast "workbench" so
  the SVG rings, chips, and generated model remain readable on all backgrounds.
*/

.am-card {
  background: linear-gradient(180deg, rgba(14, 20, 32, 0.96), rgba(11, 15, 23, 0.92));
  border: 1px solid rgba(0, 120, 151, 0.22);
  border-radius: 14px;
  padding: 1.15em;
  color: rgba(255,255,255,0.88);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

.am-card a { color: rgba(160, 235, 255, 0.95); }
.am-card a:hover { color: rgba(200, 250, 255, 1); }
.am-card h2,
.am-card h3,
.am-card h4 {
  color: rgba(255,255,255,0.92);
}

.am-card strong { color: rgba(255,255,255,0.95); }

.am-small {
  font-size: 0.9em;
  opacity: 0.9;
}

.am-radial-holder {
  display: grid;
  gap: 0.8em;
  justify-items: center;
}

.am-radial {
  width: 100%;
  max-width: 860px;
  height: auto;
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.am-hover {
  width: 100%;
  max-width: 860px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 0.75em 0.85em;
}

.am-hover-title {
  font-weight: 700;
  color: rgba(255,255,255,0.94);
}

.am-hover-meta {
  margin-top: 0.2em;
  font-size: 0.9em;
  opacity: 0.92;
}

@media screen and (max-width: 980px) {
  .am-hover { display: none; }
}

.am-radial-bg {
  fill: rgba(255,255,255,0.02);
  stroke: rgba(255,255,255,0.10);
  stroke-width: 2;
}

.am-seg {
  fill: rgba(255,255,255,0.07);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1;
  cursor: pointer;
  transition: transform 120ms ease, fill 120ms ease, stroke 120ms ease;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  outline: none;
}

/* Ring color identity (data-ring is set in JS). */
.am-seg[data-ring="industry"] { fill: rgba(0, 173, 174, 0.22); stroke: rgba(0, 173, 174, 0.46); }
.am-seg[data-ring="asset"] { fill: rgba(74, 163, 255, 0.22); stroke: rgba(74, 163, 255, 0.46); }
.am-seg[data-ring="surface"] { fill: rgba(124, 92, 255, 0.22); stroke: rgba(124, 92, 255, 0.46); }
.am-seg[data-ring="objective"] { fill: rgba(255, 159, 67, 0.22); stroke: rgba(255, 159, 67, 0.48); }
.am-seg[data-ring="constraint"] { fill: rgba(46, 204, 113, 0.20); stroke: rgba(46, 204, 113, 0.46); }

.am-seg:hover,
.am-seg.am-seg-hot {
  transform: scale(1.012);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.am-seg:focus-visible {
  stroke-width: 2;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.am-seg-selected {
  fill-opacity: 0.40;
  stroke-opacity: 0.95;
  stroke-width: 2;
}

.am-seg-text {
  font-size: 10px;
  fill: rgba(255,255,255,0.82);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 1.8px;
}

.am-seg-text.am-seg-text-hot {
  fill: rgba(255,255,255,0.96);
}

@media screen and (max-width: 480px) {
  .am-seg-text { font-size: 9px; }
}

.am-ring-label {
  font-size: 11px;
  font-weight: 650;
  fill: rgba(255,255,255,0.72);
  user-select: none;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 3px;
}

.am-center {
  fill: rgba(11, 15, 23, 0.55);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 2;
}

.am-center-title {
  font-size: 16px;
  font-weight: 750;
  fill: rgba(255,255,255,0.96);
  user-select: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 3px;
}

.am-center-sub {
  font-size: 11px;
  fill: rgba(255,255,255,0.72);
  user-select: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.50);
  stroke-width: 2px;
}

.am-chips {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
}

.am-chip {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.55em 0.7em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
}

.am-chip-k {
  opacity: 0.75;
}

.am-chip-v {
  font-weight: 600;
}

.am-selects {
  display: block;
}

@media screen and (max-width: 980px) {
  .am-selects { display: block; }
  .am-radial { display: none; }
  .am-ring-label { display: none; }
  .am-radial-bg { display: none; }
}

.am-select-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7em;
}

@media screen and (min-width: 736px) {
  .am-select-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.am-select-grid label {
  display: grid;
  gap: 0.25em;
  font-size: 0.95em;
}

.am-select-grid select {
  width: 100%;
  padding: 0.6em;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.92);
}

.am-select-grid select:focus {
  border-color: rgba(160, 235, 255, 0.40);
  box-shadow: 0 0 0 2px rgba(0, 120, 151, 0.22);
}

.am-select-grid option {
  color: #0b0f17;
}

.am-model-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1em;
  flex-wrap: wrap;
}

.am-model-title {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2;
}

.am-model-sub {
  margin-top: 0.25em;
  display: flex;
  gap: 0.6em;
  align-items: center;
  opacity: 0.9;
}

.am-model-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

.am-model-v {
  font-size: 0.9em;
  opacity: 0.85;
}

.am-model-badges {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.am-badge {
  font-size: 0.8em;
  padding: 0.25em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
}

.am-tabs {
  display: flex;
  gap: 0.45em;
  flex-wrap: wrap;
  margin-top: 1em;
  margin-bottom: 0.8em;
}

.am-tab {
  display: inline-block;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  color: inherit;
  font-size: 0.9em;
}

.am-tab:hover {
  background: rgba(255,255,255,0.06);
}

.am-tab-on {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
}

.am-panel {
  display: none;
}

.am-panel-on {
  display: block;
}

.am-step {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  padding: 0.75em;
  margin-bottom: 0.75em;
}

.am-step-h {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  flex-wrap: wrap;
}

.am-step-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity: 0.85;
}

.am-step-name {
  font-weight: 700;
}

.am-step-intent {
  margin-top: 0.4em;
  opacity: 0.95;
}

.am-step-meta {
  margin-top: 0.55em;
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.am-pill {
  font-size: 0.8em;
  padding: 0.25em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.am-list {
  margin: 0.4em 0 1em 1.2em;
}

.am-code {
  overflow: auto;
  padding: 0.75em;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
}

.am-actions {
  display: flex;
  gap: 0.7em;
  flex-wrap: wrap;
  margin-top: 1em;
}

/* Keeps the theme buttons but aligns actions nicely */
.am-actions .button {
  margin-bottom: 0;
}

/* Depth and mapping tables */

.am-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9em;
}

@media screen and (min-width: 980px) {
  .am-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.am-subcard {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  padding: 0.85em;
}

.am-subcard h4 {
  margin-top: 0;
}

.am-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
}

.am-table th,
.am-table td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.am-table th {
  text-align: left;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
}

.am-table tr:last-child td {
  border-bottom: none;
}

.am-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.am-muted {
  opacity: 0.82;
}

/* Metrics */

.am-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em;
}

@media screen and (min-width: 736px) {
  .am-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

.am-metric {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  padding: 0.75em;
}

.am-metric-h {
  display: flex;
  justify-content: space-between;
  gap: 0.75em;
  align-items: baseline;
}

.am-metric-name {
  font-weight: 700;
}

.am-meter {
  margin-top: 0.55em;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}

.am-meter > span {
  display: block;
  height: 100%;
  background: rgba(160, 235, 255, 0.55);
  width: 50%;
}

.am-metric-note {
  margin-top: 0.55em;
  font-size: 0.92em;
  opacity: 0.9;
}

/* Compact badges used in summary */
.am-score-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.7em;
}

.am-score {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  padding: 0.25em 0.55em;
  font-size: 0.85em;
}

/* Kill chain layout */
.am-kc {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 0.85em;
  margin-top: 0.8em;
}

.am-kc-h {
  display: grid;
  gap: 0.25em;
}

.am-kc-title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.am-kc-desc {
  opacity: 0.88;
  line-height: 1.45;
}

.am-kc-steps {
  margin-top: 0.6em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}


.am-meter-fill {
  display: block;
  height: 100%;
  background: rgba(160, 235, 255, 0.55);
}


/* Summary mini scores */
.am-mini-scores {
  margin-top: 0.9em;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}

@media screen and (min-width: 736px) {
  .am-mini-scores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.am-mini {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 0.65em 0.7em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
}

.am-mini span {
  opacity: 0.82;
  font-size: 0.9em;
}

.am-mini strong {
  font-size: 1.05em;
}

/* Metrics cards (matches JS class names) */
.am-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75em;
}

.am-metric-label {
  font-weight: 800;
}

.am-metric-score {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity: 0.95;
}

.am-meter {
  margin-top: 0.55em;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}

.am-meter-fill {
  display: block;
  height: 100%;
  background: rgba(160, 235, 255, 0.55);
}

/* MITRE mapping table tweaks */
.am-mitre-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap;
  opacity: 0.95;
}