/* ==========================================================================
   MITRE ATT&CK section of DetectionCode
   Scoped under .mt (and body.mitre-page) so it can't disturb the Sigma / Splunk / user pages.
   Palette comes from the site: charcoal #333 bars, green #4CAF50 menu, blue #007ACC headings,
   dark code panel #282c34. The matrix heat-map is the one bold element; the rest stays quiet.
   ========================================================================== */

/* ---- frame: the site's sidebar stays; give the content the full remaining width ---- */
.mitre-page .grid-container > .center-column {
  min-width: 0; border-radius: 0; box-shadow: none;
  padding: 8px clamp(14px, 2.4vw, 40px) 56px;
}

/* ---- tokens ---- */
.mt {
  --ink: #2b2f36; --muted: #5b636e; --line: #dfe3e8; --soft: #f6f8f6;
  --green: #4CAF50; --green-d: #2E7D32; --green-dd: #1B5E20; --mint: #eef7ee; --mint-2: #dcefdc;
  --blue: #007ACC; --blue-d: #005f9e;
  --code: #282c34; --code-fg: #f8f8f2; --cyan: #66d9ef;
  max-width: 1320px; margin: 0 auto; color: var(--ink);
  font-size: 15px; line-height: 1.6; text-align: left;
}
.mt *, .mt *::before, .mt *::after { box-sizing: border-box; }
.mt a { color: var(--blue); text-decoration: none; }
.mt a:hover { text-decoration: underline; }
.mt p { margin: 0 0 .75em; }
.mt ul { margin: 0; padding: 0; list-style: none; }
.mt ul li { margin: 0; }
.mt ol { margin: 0; padding-left: 22px; list-style: decimal; }
.mt li { margin: 0; }
.mt h1 { font-size: 30px; line-height: 1.2; margin: 0; color: var(--blue); text-align: left; }
.mt h2 { font-size: 20px; line-height: 1.3; margin: 0 0 14px; color: var(--ink); }
.mt h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink); }
.mt .n { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: .8em; }
.mt .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt a:focus-visible, .mt button:focus-visible, .mt input:focus-visible,
.mt select:focus-visible, .mt summary:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }

/* ---- section bar: tabs + search ---- */
.mt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 20px; border-bottom: 1px solid var(--line); }
.mt-tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 100%; }
.mt-tabs a { padding: 14px 14px 11px; color: var(--ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; border-bottom: 3px solid transparent; }
.mt-tabs a:hover { background: var(--mint); text-decoration: none; }
.mt-tabs a[aria-current] { border-bottom-color: var(--green); color: var(--green-dd); }
.mt-search { display: flex; gap: 6px; padding: 8px 0; }
.mt-search input { width: 260px; max-width: 100%; }

/* ---- form controls (override the site's global select/button rules) ---- */
.mt input[type=search], .mt input[type=text], .mt select {
  height: 38px; padding: 0 12px; border: 1px solid #c3cad2; border-radius: 4px;
  background-color: #fff; color: var(--ink); font: inherit; font-size: 14.5px; box-shadow: none;
}
.mt input[type=search]:focus, .mt input[type=text]:focus, .mt select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(76, 175, 80, .25); }
.mt select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232b2f36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}
.mt .mt-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--green-d); color: #fff; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.mt .mt-btn:hover { background: var(--green-dd); }
.mt-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.mt-filters input[type=search], .mt-filters input[type=text] { width: 260px; max-width: 100%; }
.mt-line { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mt-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--mint-2); border-radius: 3px; padding: 3px 4px 3px 10px; font-size: 13.5px; }
.mt-chip a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; color: var(--ink); font-weight: 700; }
.mt-chip a:hover { background: rgba(0,0,0,.1); text-decoration: none; }

/* ---- breadcrumb + title ---- */
.mt-crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 18px 0 12px; font-size: 13.5px; color: var(--muted); }
.mt-crumbs a { color: var(--muted); }
.mt-crumbs > * + *::before { content: "/"; margin-right: 8px; color: #a8b0ba; }
.mt-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mt-id { font: 600 14px/1 Consolas, ui-monospace, "Courier New", monospace; background: var(--code); color: var(--cyan); padding: 7px 10px; border-radius: 4px; }
.mt-lede { margin: 8px 0 0; color: var(--muted); max-width: 80ch; }
.mt a.mt-ext { display: inline-block; margin-left: 14px; font-weight: 600; white-space: nowrap; }

/* ---- page layouts ---- */
.mt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; margin-top: 24px; }
.mt-sec { margin-top: 34px; scroll-margin-top: 12px; }
.mt-main > .mt-sec:first-child { margin-top: 0; }
.mt-sub { margin: 20px 0 8px; color: var(--ink); }
.mt-prose { max-width: 74ch; }
.mt-prose p { margin: 0 0 .9em; }
.mt-prose code, .mt-code-inline { background: var(--code); color: var(--code-fg); padding: 1px 6px; border-radius: 3px; font: 13px Consolas, ui-monospace, monospace; }
.mt-none { color: var(--muted); margin: 0; }
.mt-viewall { margin: 10px 0 0; font-weight: 600; }
.mt-empty { padding: 26px; border: 1px dashed #c3cad2; border-radius: 6px; color: var(--muted); }
.mt-empty a { font-weight: 600; }
.mt-note { margin: 48px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* facts panel (stays in view on long pages) */
@media (min-width: 981px) { .mt-aside { position: sticky; top: 16px; } }
.mt-facts { background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 4px 18px 18px; }
.mt-facts dl { margin: 0; }
.mt-facts dt { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.mt-facts dd { margin: 5px 0 0; }
.mt-jump { margin-top: 18px; }
.mt-jump a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--ink); }
.mt-jump a:hover { background: var(--mint); text-decoration: none; }
.mt-jump b { font-variant-numeric: tabular-nums; }

/* tags (same look as the site's .hint pills) */
.mt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-tag { display: inline-flex; align-items: baseline; gap: 6px; background: #f0f0f0; color: #2f3640; padding: 3px 10px; border-radius: 3px; font-size: 13.5px; line-height: 1.5; }
.mt a.mt-tag { color: #1f2d3a; }
.mt a.mt-tag:hover { background: var(--mint-2); box-shadow: inset 0 -2px 0 var(--green); text-decoration: none; }
.mt-tag .mt-code { font: 600 12px Consolas, ui-monospace, monospace; color: var(--blue-d); }
.mt-more > summary { cursor: pointer; margin-top: 10px; color: var(--blue); font-weight: 600; list-style: none; width: fit-content; }
.mt-more > summary::-webkit-details-marker { display: none; }
.mt-more > summary:hover { text-decoration: underline; }
.mt-more[open] > summary { display: none; }
.mt-more > .mt-tags { margin-top: 10px; }

/* tables */
.mt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.mt .mt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.mt .mt-table th { background: var(--mint); color: var(--ink); font-weight: 700; font-size: 14px; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--green); }
.mt .mt-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.mt .mt-table tr:nth-child(even) { background: transparent; }
.mt .mt-table tbody tr:hover { background: #f6fbf6; }
.mt .mt-table tbody tr:last-child td { border-bottom: 0; }
.mt .mt-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt .mt-table .tags { min-width: 200px; }
.mt-code { font: 600 13px Consolas, ui-monospace, monospace; white-space: nowrap; }
.mt-proc td.src { width: 200px; }
.mt-proc td.tech { width: 250px; }
.mt-proc .desc p { margin: 0 0 .5em; max-width: 92ch; }
.mt-proc .desc p:last-of-type { margin-bottom: 0; }
.mt-kind { display: block; font-size: 12.5px; color: var(--muted); }
.mt-cites { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.mt a.mt-cite { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; background: #fff; }
.mt a.mt-cite:hover { border-color: var(--green); color: var(--green-dd); text-decoration: none; }

/* techniques grouped under tactics */
.mt-tb { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.mt-tb:last-child { border-bottom: 1px solid var(--line); }
.mt-tb h3 { margin: 4px 0 0; font-size: 14.5px; }

/* references */
.mt-reflist { display: grid; gap: 12px; padding-left: 24px; }
.mt-reflist .t { font-weight: 600; }
.mt-reflist .d { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

/* ---- home ---- */
.mt-hero { padding: 30px 0 6px; }
.mt-hero h1 { font-size: 38px; }
.mt-hero .mt-lede { font-size: 17px; max-width: 62ch; color: var(--ink); }
.mt-hero form { display: flex; gap: 8px; margin-top: 20px; max-width: 580px; }
.mt-hero form input { flex: 1; height: 46px; font-size: 16px; }
.mt-hero form .mt-btn { height: 46px; padding: 0 22px; }
.mt-chain { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 0; padding: 0 !important; list-style: none !important; }
.mt-chain li { flex: 1 0 150px; margin: 0 -7px 0 0; }
.mt-chain a { display: block; height: 100%; padding: 11px 22px 11px 24px; background: var(--mint); color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.mt-chain li:first-child a { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 14px; border-radius: 4px 0 0 4px; }
.mt-chain a:hover { background: var(--mint-2); text-decoration: none; }
.mt-chain b { display: block; font-size: 13.5px; line-height: 1.3; }
.mt-chain span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.mt-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 30px; }
.mt-browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 32px; }
.mt-browse a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--ink); }
.mt-browse a:hover { background: var(--mint); text-decoration: none; }
.mt-browse b { font-variant-numeric: tabular-nums; }

/* ---- matrix (the one bold element) ---- */
.h0 { background: #f1f3f5; }
.h1 { background: #e0f0e1; }
.h2 { background: #b7ddba; }
.h3 { background: #72c179; }
.h4 { background: #2e7d32; color: #fff !important; }
.mt-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 14px; font-size: 13px; color: var(--muted); }
.mt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mt-legend i { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); }
.mt-matrix { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(138px, 1fr); gap: 8px; overflow: auto; max-height: 76vh; align-items: start;
  border: 1px solid var(--line); border-radius: 6px; padding: 0 10px 10px; background: #fff; }
.mt-col h2 { position: sticky; top: 0; z-index: 2; margin: 0 0 8px; padding: 10px 0 8px; background: #fff; border-bottom: 3px solid var(--green); font-size: 14px; line-height: 1.3; }
.mt-col h2 a { color: var(--ink); }
.mt-col h2 small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mt .mt-cell { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; padding: 6px 8px; border-radius: 3px; font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.mt .mt-cell.h4 { color: #fff; }
.mt .mt-cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; text-decoration: none; }
.mt-cell em { font-style: normal; font-size: 11.5px; opacity: .8; white-space: nowrap; }

/* ---- responsive ---- */
/* ---- detection rules ---- */
.mt .mt-note { color: var(--muted); margin: -4px 0 6px; font-size: 14px; }
.mt .mt-dim { color: var(--muted); }
.mt .mt-lvl { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: capitalize; background: #eceff1; color: #455a64; }
.mt .lvl-critical { background: #fde0e0; color: #9b1c1c; }
.mt .lvl-high { background: #ffe8d1; color: #9a4a00; }
.mt .lvl-medium { background: #fff6c8; color: #7a6200; }
.mt .lvl-low { background: #e1f3e2; color: #1e6b25; }
.mt .mt-rules td:first-child a { font-weight: 600; }
.mt .mt-btn { margin-top: 10px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.mt .mt-btn:hover { background: var(--mint); }
.mt .mt-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 980px) {
  .mt-cols { grid-template-columns: 1fr; gap: 24px; }
  .mt-aside { order: -1; }
}
@media (max-width: 980px) {
  .mt-jump { display: none; }
}
@media (max-width: 700px) {
  .mt a.mt-ext { display: block; margin: 4px 0 0; }
  .mt-matrix { max-height: 70vh; }
  .mt h1 { font-size: 25px; }
  .mt-hero h1 { font-size: 29px; }
  .mt-tb { grid-template-columns: 1fr; }
  .mt-search { width: 100%; }
  .mt-search input { flex: 1; width: auto; }
  .mt-hero form { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .mt a, .mt-cell, .mt-tags a { transition: background-color .15s ease, box-shadow .15s ease; }
}
.mt .mt-btn + .mt-sub { margin-top: 26px; }
.mt-bar-search { justify-content: flex-end; padding-top: 6px; }
.mt-search { align-items: center; } .mt-search .mt-btn { margin: 0; }