/* Card-specific styles for the "hardening" harbor course (class prefix .hb-hardening-).
 * A securityContext manifest beside its live YAML. The board (and every demo frame) draws the container as a
 * dashed hull holding the process cube and the file tiles it reaches for; the node is a small ship around it.
 * Running the plan flips the tiles step by step and fills two ledgers: the app self-check (green) and the
 * breach drill (red, turning green while every attack is blocked). */
.hb-hardening { min-width:0; }
.hb-hardening .hb-panels { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.hb-hardening-yaml .hb-yaml { margin-top:0; }
.hb-hardening .hb-toggle b { font-family:var(--mono); font-size:12.5px; }
.hb-hardening .hb-option { text-align:left; }

/* The board scene above the ledgers. */
.hb-hardening-deck { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:560px; margin:16px auto 4px; }
.hb-hardening-deck>.hb-hardening-box { width:100%; box-sizing:border-box; background:#f3fbf466; }
.hb-hardening-deck>.hb-hardening-box.host { padding-top:20px; }
.hb-hardening-deck .hb-hardening-file code { font-size:11px; }
.hb-hardening-stamp.idle { transform:none; animation:none; background:#e9f1df; color:#5d746c; border:1.5px dashed #8cad9b; font-weight:700; }
.hb-hardening-down { opacity:.55; filter:grayscale(.85); transform:translateY(3px); transition:transform .3s,opacity .3s; }

/* Scripted runs. */
.hb-hardening-run { margin-top:4px; }
.hb-hardening-run .hb-label { margin-bottom:6px; }
.hb-hardening-log { max-height:none; }
.hb-hardening-log li { display:flex; align-items:flex-start; gap:7px; padding:4px 0; border-bottom:1px dashed #c9d8cf; }
.hb-hardening-log li:last-child { border-bottom:0; }
.hb-hardening-mark { flex-shrink:0; width:18px; text-align:center; font:800 13px var(--mono); }
.hb-hardening-what { flex:1; min-width:0; font:700 12px/1.55 var(--sans); color:inherit; overflow-wrap:anywhere; }
.hb-hardening-what code { display:block; margin-top:1px; padding:0; border:0; background:none; font:600 11px/1.5 var(--mono); color:#4f5f58; overflow-wrap:anywhere; }
.hb-hardening-log li.bad .hb-hardening-what code { color:#8b3f30; }
.hb-hardening-log li.event .hb-hardening-what code { color:#7a5a20; }
.hb-hardening-log li .hb-chip { flex-shrink:0; margin-top:1px; }
.hb-hardening-log li.cmd { font:700 12px var(--mono); color:#355e65; }
.hb-hardening-log li.hb-hardening-sub { padding:2px 0 2px 18px; border-bottom:0; }
.hb-hardening-log li.hb-hardening-sub .hb-hardening-what { font:600 11px/1.5 var(--mono); }
.hb-hardening-log li.hb-hardening-wait { color:#7a8a84; font-style:italic; }
.hb-log.hb-hardening-app { border-color:#6aa274; background:#eef7eae6; }
.hb-log.hb-hardening-breach { border-color:#c38a7c; background:#fbf1ece6; }
.hb-log.hb-hardening-breach.all-blocked { border-color:#6aa274; background:#eef7eae6; }
.hb-log.hb-hardening-breach li.ok { color:#2d694b; }
.hb-log.hb-hardening-admit { border-color:#7ea3a1; background:#f3f8f2e6; }
/* Lines, tiles and stamps already on screen keep still while the run adds the next one. */
.hb-hardening .hb-hardening-old, .hb-hardening .hb-log li.hb-hardening-old { animation:none; }

/* The container hull, the process inside it and the files it reaches for. */
.hb-hardening-box { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; box-sizing:border-box; padding:14px 8px 9px; border:2px dashed #6f9ea0; border-radius:14px; background:#e4f6f02e; }
.hb-hardening-box>.hb-hardening-tag { position:absolute; top:-9px; left:10px; padding:0 6px; border-radius:6px; background:#fff8e5; font:800 9px var(--mono); color:#2b5a66; letter-spacing:.4px; }
/* A node is a small ship, as in the other harbor games: solid hull, a cabin on deck, a keel shadow. */
.hb-hardening-box.host { margin-top:9px; padding:18px 7px 10px; border:2px solid #68928c; border-radius:10px 10px 18px 18px; background:#fff9e5; box-shadow:inset 0 2px 0 #fff,0 4px 0 #668b82; }
.hb-hardening-box.host::before { content:''; position:absolute; left:32%; right:32%; top:-9px; height:6px; border:2px solid #68928c; border-bottom:0; border-radius:6px 6px 0 0; background:#c7d8c2; }
.hb-hardening-box.host>.hb-hardening-tag { top:3px; left:auto; right:9px; background:none; padding:0; color:#2e5359; }
.hb-hardening-box.host>.hb-hardening-box { background:#e4f6f066; }
.hb-hardening-files { container:hbh-files / inline-size; width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.hb-hardening-file { display:inline-flex; align-items:center; gap:5px; max-width:100%; box-sizing:border-box; padding:4px 8px; border:2px solid #b6a877; border-radius:9px; background:#fff7df; box-shadow:0 3px 0 #b39a62; transition:background .25s,border-color .25s; }
.hb-hardening-file code { min-width:0; font:700 10px var(--mono); color:#5b5236; word-break:keep-all; overflow-wrap:normal; }
.hb-hardening-short { display:none; }
/* In a narrow hull (every demo frame, the board on a phone) tiles show the base name only. */
@container hbh-files (max-width:250px) {
  .hb-hardening-long { display:none; }
  .hb-hardening-short { display:inline; }
}
.hb-hardening-file-ic { position:relative; width:9px; height:11px; flex-shrink:0; border:1.5px solid #b39a62; border-radius:2px; background:#fffdf4; }
.hb-hardening-file-ic::after { content:''; position:absolute; left:1.5px; right:1.5px; top:3px; height:1.5px; background:#b39a62; box-shadow:0 3px 0 #b39a62; }
.hb-hardening-file.locked { border-color:#6f9ea0; background:#e4f3f1; box-shadow:0 3px 0 #5a8f91; }
.hb-hardening-file.locked code { color:#2b5a66; }
.hb-hardening-file.locked .hb-hardening-file-ic { border-color:#5a8f91; border-radius:2px 2px 3px 3px; background:#d7ecea; }
.hb-hardening-file.locked .hb-hardening-file-ic::before { content:''; position:absolute; left:1px; right:1px; top:-5px; height:4px; border:1.5px solid #5a8f91; border-bottom:0; border-radius:4px 4px 0 0; }
.hb-hardening-file.locked .hb-hardening-file-ic::after { background:#5a8f91; box-shadow:none; top:3px; left:2.5px; right:2.5px; height:2px; }
.hb-hardening-file.hit { border-color:#c76750; background:#fbe6dc; box-shadow:0 3px 0 #b76a55; animation:st-shake .5s .3s; }
.hb-hardening-file.hit code { color:#9c3d2d; }
.hb-hardening-file.open { border-color:#6aa274; background:#dff2d6; box-shadow:0 3px 0 #5c9a68; }
.hb-hardening-file.open code { color:#2d694b; }
/* fail: the app itself was refused; gone: hidden under an empty volume; warn: writable for no reason. */
.hb-hardening-file.fail { border-color:#c98a3c; background:#fbecd2; box-shadow:0 3px 0 #b07a3a; animation:st-shake .5s .3s; }
.hb-hardening-file.fail code { color:#8a5418; }
.hb-hardening-file.gone { border-style:dashed; border-color:#a39a83; background:transparent; box-shadow:none; opacity:.7; }
.hb-hardening-file.gone code { color:#7b745f; text-decoration:line-through; }
.hb-hardening-file.gone .hb-hardening-file-ic { opacity:.35; }
.hb-hardening-file.warn { border-color:#c9a23e; background:#fbefc2; box-shadow:0 3px 0 #a78646; }
.hb-hardening-file.warn code { color:#6d521a; }
.hb-hardening-file.hb-hardening-old { animation:none; }
.hb-hardening-vol { display:flex; justify-content:center; max-width:100%; }
.hb-hardening-vol .hb-chip { white-space:normal; word-break:keep-all; overflow-wrap:normal; text-align:center; }
.hb-hardening-stamp { display:inline-block; align-self:center; max-width:100%; box-sizing:border-box; overflow-wrap:break-word; text-align:center; padding:2px 7px; border-radius:6px; font:800 10px var(--mono); transform:rotate(-3deg); animation:hb-frame-in .4s .35s ease-out both; }
.hb-hardening-stamp.bad { background:#c76750; color:#fff; box-shadow:0 2px 0 #8f4f36; }
.hb-hardening-stamp.ok { background:#5c9a68; color:#fff; box-shadow:0 2px 0 #3f7656; }
.hb-hardening-stamp.warn { background:#f3c965; color:#5a4419; box-shadow:0 2px 0 #a78646; }
.hb-hardening-stamp.hb-hardening-old { animation:none; }
.hb-hardening-deck>.hb-hardening-stamp { font-size:12px; padding:3px 10px; }
.hb-hardening-arrow { align-self:center; text-align:center; color:#537e76; font:800 15px/1 var(--mono); }
.hb-hardening-box .hb-mini-pod { max-width:100%; min-width:0; box-sizing:border-box; }
.hb-hardening-box .hb-mini-pod>div { min-width:0; }
/* Chips wrap only at spaces, never inside a word. */
.hb-hardening-scene .hb-mini-pod .hb-chip, .hb-hardening-box .hb-mini-pod .hb-chip { white-space:normal; word-break:keep-all; overflow-wrap:normal; }

@media(max-width:800px) {
  .hb-hardening-scene .hb-hardening-box { padding:12px 5px 7px; gap:5px; }
  .hb-hardening-scene .hb-hardening-box.host { padding-top:17px; }
  .hb-hardening-scene .hb-mini-pod { padding:4px 6px 4px 4px; gap:4px; }
  .hb-hardening-scene .hb-mini-pod>svg { width:22px; height:25px; }
  .hb-hardening-scene .hb-hardening-file { padding:3px 5px; }
  .hb-hardening-scene .hb-hardening-file code { font-size:9px; }
}
@media(max-width:560px) {
  .hb-hardening-log li { gap:5px; }
  .hb-hardening-log li .hb-chip { display:none; }
  .hb-hardening-deck { margin-top:12px; }
  .hb-hardening-deck .hb-hardening-file code { font-size:10px; }
}