/* AgentGuard Burn /autocompact · autocompact.css · Oct 18 2026
   Loaded after burn.css on /autocompact, /es/autocompact and /pt-br/autocompact, which share burn.css for the
   header, sections, buttons and footer. This file adds only the sample replay table, the suggestion line and a
   command box that stacks on a phone. Same colors and fonts as burn.css. On a phone the table becomes one block per
   window, so no row is wider than the screen. */

/* The command box: one row on a wide screen, the command above a full-width button on a phone. */
.cmd-stack{flex-wrap:wrap}

/* The sample result */
.sample{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:760px}
.sample-sum{font-size:15px;line-height:1.5;color:#94A3B0;text-wrap:pretty}
.replay{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums;background:#0C1828;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.replay th,.replay td{padding:13px 14px;text-align:right;border-top:1px solid rgba(255,255,255,.08);white-space:nowrap}
.replay thead th{font:500 12px/1.4 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:#94A3B0;border-top:0;white-space:normal;vertical-align:bottom}
.replay thead th:first-child,.replay tbody th{text-align:left}
.replay tbody th{font:400 22px/1 Georgia,'Times New Roman',serif;letter-spacing:-.01em}
.replay .tag{display:inline-block;margin-left:8px;padding:4px 8px;border-radius:999px;font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;vertical-align:3px}
.replay .tag-now{border:1px solid rgba(230,238,243,.3);color:#94A3B0}
.replay .tag-pick{background:#2ABCB4;color:#07101E}
.replay tr.pick th,.replay tr.pick td{background:rgba(42,188,180,.12)}
.replay tr.pick th{box-shadow:inset 3px 0 0 #2ABCB4}
.replay tr.pick .chg{font:400 22px/1 Georgia,'Times New Roman',serif;color:#2ABCB4}
.replay td.na{text-align:left;color:#94A3B0}
.suggest{font:500 14px/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;background:#0B0F14;border:1px solid rgba(42,188,180,.5);border-radius:10px;padding:12px 16px;overflow-wrap:anywhere}
.suggest b{font-weight:500;color:#2ABCB4;white-space:nowrap}
.notes{display:grid;gap:8px}
.notes p{font-size:14px;line-height:1.5;color:#94A3B0;text-wrap:pretty}
.notes code{font-size:13px}

/* How it works */
.steps{margin:0;padding-left:22px;display:grid;gap:12px}
.steps li{padding-left:4px;text-wrap:pretty}
.steps li::marker{color:#2ABCB4}
.body code{font-size:14px;overflow-wrap:anywhere}

/* Phone: each window is one block. The window and its token change share the first line; the other figures
   follow with their labels, from data-label. The header row stays for screen readers only. */
@media (max-width:639.98px){
.replay,.replay tbody,.replay tr,.replay th,.replay td{display:block}
.replay thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.replay tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 14px;border-top:1px solid rgba(255,255,255,.08)}
.replay tbody tr:first-child{border-top:0}
.replay tbody th,.replay tbody td{padding:0;border:0;text-align:left;background:none !important;box-shadow:none !important}
.replay tbody th{grid-column:1;grid-row:1;align-self:center;white-space:normal}
.replay td.chg{grid-column:2;grid-row:1;align-self:center;text-align:right}
.replay td.chg::before{display:block;content:attr(data-label);font:400 12px/1.3 'DM Sans',system-ui,sans-serif;color:#94A3B0;margin-bottom:4px}
.replay td.val{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.replay td.val::before{content:attr(data-label);color:#94A3B0}
.replay td.na{grid-column:2;grid-row:1;align-self:center;text-align:right;font-size:14px}
.replay tbody tr.pick{background:rgba(42,188,180,.12);box-shadow:inset 3px 0 0 #2ABCB4}
}
@media (max-width:519.98px){
.cmd-stack{padding:12px}
.cmd-stack code{flex:1 1 100%;padding:2px 4px 0}
.cmd-stack .btn{flex:1 1 100%}
}
@media (min-width:900px){
.sample{gap:18px}
}