/* Additions on top of ../demo-shop/shop.css for the attack pages. */
:root { --warn: #b42318; --warn-bg: #fdecea; --note: #fff7e0; }
@media (prefers-color-scheme: dark) {
  :root { --warn: #ff9a90; --warn-bg: #2c1513; --note: #2a2414; }
}

.demo-banner { margin: 0; padding: 8px 16px; background: var(--warn-bg); color: var(--warn); font-size: 0.85rem; text-align: center; }
.demo-banner a { color: inherit; }

.split { align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 380px 1fr; } }

.lines li { grid-template-columns: 1fr auto auto; }
.addr code { display: block; padding: 10px; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 6px; word-break: break-all; font-size: 0.9rem; }
.hacked .addr code { border-color: var(--warn); color: var(--warn); }
.paste { display: grid; gap: 6px; margin-top: 14px; font-size: 0.85rem; color: var(--muted); }
.paste input { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: 0.85rem ui-monospace, monospace; }

.notes { display: grid; gap: 12px; max-width: 64ch; }
.notes h2 { font-size: 1.2rem; }
.notes code { overflow-wrap: anywhere; }
.notes h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.notes .btn { width: auto; justify-self: start; padding: 0 20px; }
.btn.danger { background: var(--warn); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.log { margin: 0; padding: 10px 10px 10px 30px; min-height: 3em; border: 1px solid var(--line); border-radius: 8px; font: 0.82rem/1.5 ui-monospace, monospace; }
.limit { display: grid; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--note); }
.limit > b { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

.fake {
  position: fixed; inset: auto; margin: 0; padding: 18px 22px; border: 0;
  background: #ffffff; color: #121417; pointer-events: none;
  font: 400 0.95rem/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.fake p { margin: 0 0 6px; }
.fake .big { font-size: 2rem; font-weight: 650; }
.fake small { font-size: 1rem; color: #565c66; }

/* Index: one column (main.wrap is a two-column grid on wide screens), demos as numbered cards. */
main.index { display: grid; gap: 12px; max-width: 720px; padding: 48px 0; grid-template-columns: none; }
.demos { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: demo; }
.demos li {
  position: relative; padding: 16px 18px 16px 58px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); counter-increment: demo; transition: border-color 0.2s, box-shadow 0.2s;
}
.demos li::before {
  content: counter(demo); position: absolute; left: 18px; top: 15px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; background: var(--warn-bg); color: var(--warn);
  font-size: 0.85rem; font-weight: 700;
}
.demos li:hover { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); box-shadow: 0 6px 20px rgba(29, 26, 23, 0.06); }
.demos a { font-weight: 600; text-decoration: none; }
.demos a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.demos a:focus-visible { outline: none; }
.demos li:has(a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.demos p { margin-top: 4px; color: var(--muted); font-size: 0.95rem; }