/* Cert Society PBQ labs: the desktop, windows, consoles, network map, SIEM,
   ticket and results. Tokens come from site.css (Terminal Amber). */

.lab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lab {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 10px 40px rgba(27, 26, 22, 0.18);
}
.lab:fullscreen, .lab--pseudo-full {
  position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column;
}
.lab:fullscreen .lab-desk, .lab--pseudo-full .lab-desk { flex: 1; height: auto; }

.lab button:focus-visible, .lab input:focus-visible, .lab select:focus-visible, .lab textarea:focus-visible,
.lab [tabindex="0"]:focus-visible, .lab summary:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

.lab-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-dark);
}
.lab-eyebrow { margin: 0; font: 600 0.72rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); }
.lab-title { margin: 0.1rem 0 0; color: var(--cream); font-size: 1.25rem; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.lab-btn {
  font: 600 0.86rem/1 "Inter", system-ui, sans-serif; border-radius: 8px; padding: 0.55rem 0.85rem; cursor: pointer;
  border: 1px solid var(--line-dark); background: var(--ink-2); color: var(--cream);
}
.lab-btn:hover { border-color: var(--accent-bright); }
.lab-btn--go { background: var(--accent-bright); color: var(--navy); border-color: var(--accent-bright); }
.lab-btn--go:hover { background: #ffd27a; }
.lab-btn--ghost { background: transparent; }
.lab-btn--ghost[aria-pressed="true"] { border-color: var(--accent-bright); color: var(--accent-bright); }
.lab-btn--small { padding: 0.38rem 0.6rem; font-size: 0.8rem; }
.lab-btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- desktop ---------- */
.lab-desk { height: clamp(560px, 78vh, 860px); }
.desk { display: flex; flex-direction: column; }
.desk-space {
  position: relative; flex: 1; overflow: hidden;
  background-color: #1f1d17;
  background-image: radial-gradient(rgba(245, 184, 65, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.desk-bar {
  display: flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 0.5rem;
  background: #100f0c; border-top: 1px solid var(--line-dark);
}
.desk-bar-apps { display: flex; gap: 0.3rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.desk-task {
  display: flex; align-items: center; gap: 0.4rem; max-width: 220px; padding: 0.35rem 0.6rem; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: #bdb5a0; font: 500 0.8rem/1 "Inter", sans-serif; cursor: pointer; white-space: nowrap;
}
.desk-task:hover { background: #26241e; color: var(--cream); }
.desk-task.is-active { background: #2c2a22; border-color: #4a4434; color: var(--cream); box-shadow: inset 0 -2px 0 var(--accent-bright); }
.desk-task-label { overflow: hidden; text-overflow: ellipsis; }
.desk-clock { font: 500 0.8rem/1 var(--font-mono); color: #bdb5a0; padding: 0 0.4rem; }

.win {
  position: absolute; display: flex; flex-direction: column; min-width: 240px;
  background: #fff; color: var(--ink); border: 1px solid #3a362a; border-radius: 9px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.win[hidden] { display: none; }
.win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win-head {
  display: flex; align-items: center; gap: 0.5rem; height: 34px; padding: 0 0.35rem 0 0.65rem; flex: none;
  background: #2a2821; color: #cfc8b4; cursor: grab; user-select: none; touch-action: none;
  border-bottom: 2px solid transparent;
}
.win.is-active .win-head { background: #34312a; color: var(--cream); border-bottom-color: var(--accent-bright); }
.win-title { flex: 1; font: 600 0.82rem/1 "Inter", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-btns { display: flex; gap: 2px; }
.win-btn { width: 30px; height: 26px; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; position: relative; }
.win-btn:hover { background: rgba(255, 255, 255, 0.1); }
.win-close:hover { background: #a3392f; color: #fff; }
.win-btn::before { content: ""; position: absolute; inset: 0; margin: auto; }
.win-min::before { width: 10px; height: 2px; background: currentColor; top: 6px; }
.win-max::before { width: 9px; height: 8px; border: 1.6px solid currentColor; border-top-width: 2.6px; }
.win-close::before, .win-close::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 1.8px; background: currentColor; transform: rotate(45deg); }
.win-close::after { transform: rotate(-45deg); }
.win-body { flex: 1; min-height: 0; overflow: auto; }
.win-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(120, 110, 90, 0.55) 50%, transparent 60%, transparent 70%, rgba(120, 110, 90, 0.55) 70%, transparent 80%); }
.win-icon { width: 14px; height: 14px; border-radius: 3px; flex: none; background: #6a6355; }
.win-icon--ticket { background: #d8cdaf; }
.win-icon--map { background: #7fbf8a; }
.win-icon--console { background: #12110d; box-shadow: inset 0 0 0 1.5px var(--accent-bright); }
.win-icon--prompt { background: #12110d; box-shadow: inset 0 0 0 1.5px #9fb7d8; }
.win-icon--siem { background: #e0705f; }
.win-icon--notes { background: #f5b841; }

.desk--narrow .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border: 0; }
.desk--narrow .win:not(.is-active) { display: none; }
.desk--narrow .win-grip, .desk--narrow .win-max { display: none; }
.desk--narrow .win-head { cursor: default; }

/* ---------- console ---------- */
.win--console .win-body, .win--prompt .win-body { background: #12110d; overflow: hidden; }
.con { display: flex; flex-direction: column; height: 100%; }
.con-screen { flex: 1; min-height: 0; padding: 6px 4px 0 8px; }
.con-screen .xterm { height: 100%; }
.con-keys { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 6px; background: #1a1914; border-top: 1px solid #2c2a22; }
.con-key { font: 600 0.74rem/1 var(--font-mono); padding: 0.42rem 0.6rem; min-width: 2.4rem; border-radius: 5px; border: 1px solid #3a362a; background: #24221b; color: #dcd6c4; cursor: pointer; }
.con-key:hover { border-color: var(--accent-bright); }

/* ---------- ticket ---------- */
.win--ticket .win-body { background: var(--bg); }
.tkt { padding: 0.9rem 1rem 1.2rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.tkt-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font: 500 0.74rem/1.3 var(--font-mono); color: var(--ink-soft); margin-bottom: 0.6rem; }
.tkt-num { font-weight: 700; color: var(--navy); }
.tkt-pri { color: var(--wrong); }
.tkt-sum { margin: 0 0 0.8rem; font-weight: 500; }
.tkt-tasks { margin: 0 0 0.8rem; padding-left: 0; list-style: none; counter-reset: t; }
.tkt-tasks li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.5rem 0; border-top: 1px solid var(--hairline); }
.tkt-tasks input { margin-top: 0.25rem; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.tkt-tasks input:checked + label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(106, 99, 85, 0.5); }
.tkt-done { padding: 0.6rem 0.7rem; background: var(--tint); border-left: 3px solid var(--accent); border-radius: 4px; margin: 0 0 0.6rem; }
.tkt-tip, .tkt-hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 0.5rem; }

.tkt-h { font-size: 0.95rem; margin: 1.1rem 0 0.6rem; color: var(--navy); }
.tf { margin: 0 0 0.9rem; border: 0; padding: 0; }
.tf-label { display: block; font-weight: 600; font-size: 0.84rem; margin: 0 0 0.3rem; padding: 0; color: var(--navy); }
.tf-input { width: 100%; font: 500 0.9rem/1.2 var(--font-mono); padding: 0.5rem 0.55rem; border: 1px solid var(--field-border); border-radius: 6px; background: #fff; color: var(--ink); }
.tf-opt { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.3rem 0; font-size: 0.86rem; cursor: pointer; }
.tf-opt input { margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
.tf-opt input:disabled + span { color: #a39c8c; }
.tkt-submit { width: 100%; margin-top: 0.4rem; }
.pins { list-style: none; margin: 0; padding: 0; border: 1px dashed var(--hairline-hover); border-radius: 6px; background: #fff; }
.pins li { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border-top: 1px solid var(--hairline); font: 500 0.74rem/1.35 var(--font-mono); }
.pins li:first-child { border-top: 0; }
.pins-empty { color: var(--ink-soft); font-family: "Inter", sans-serif !important; font-size: 0.8rem !important; }
.pin-txt { flex: 1; white-space: pre-wrap; word-break: break-all; }
.pin-x { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0.1rem 0.35rem; border-radius: 4px; }
.pin-x:hover { background: var(--wrong-bg); color: var(--wrong); }

/* ---------- network map ---------- */
.win--map .win-body { background: #f6f1e4; }
.map { display: flex; flex-direction: column; height: 100%; min-height: 300px; }
.map-legend { display: flex; gap: 0.9rem; padding: 0.45rem 0.8rem 0; font: 500 0.72rem/1 var(--font-mono); color: var(--ink-soft); }
.lg::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 3px solid; margin-right: 0.35rem; vertical-align: middle; }
.lg--up::before { border-color: #2b7554; }
.lg--down::before { border-color: #b8ae96; border-top-style: dashed; }
.lg--err::before { border-color: #c0392b; border-top-style: dashed; }
.map-svg { flex: 1 1 0; width: 100%; min-height: 0; height: 100%; display: block; }
.cable { stroke-width: 3; stroke-linecap: round; }
.cable--up { stroke: #2b7554; }
.cable--down { stroke: #b8ae96; stroke-dasharray: 7 6; }
.cable--err { stroke: #c0392b; stroke-dasharray: 7 6; }
.cable-port { font: 600 13px var(--font-mono); fill: #4a4434; paint-order: stroke; stroke: #f6f1e4; stroke-width: 4px; }
.dev { cursor: default; outline: none; }
.dev--open { cursor: pointer; }
.dev-box { fill: #fff; stroke: #3a362a; stroke-width: 1.5; }
.dev--switch .dev-box { fill: #26241e; stroke: #26241e; }
.dev--switch .dev-name { fill: #f6f1e4; }
.dev--switch .dev-sub { fill: #bdb5a0; }
.dev--switch .dev-ico { stroke: var(--accent-bright); }
.dev--open:hover .dev-box, .dev:focus-visible .dev-box { stroke: var(--accent); stroke-width: 3; }
.dev:focus-visible .dev-box { stroke: #f5b841; stroke-width: 4; }
.dev--faded { opacity: 0.45; }
.dev--nope .dev-box { animation: nope 0.4s; }
@keyframes nope { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .dev--nope .dev-box { animation: none; } }
.dev-name { font: 700 13.5px "Inter", sans-serif; fill: var(--navy); }
.dev--switch .dev-name { font-size: 15px; }
.dev-sub { font: 500 11px var(--font-mono); fill: var(--ink-soft); }
.dev-ico { fill: none; stroke: #3a362a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.led { stroke: none; }
.led--up { fill: #6fdc8c; }
.led--down { fill: #4a4434; }
.led--off { fill: #4a4434; stroke: #8a8270; stroke-width: 1; }
.led--err { fill: #ff5a48; }
.bench { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--hairline); background: #efe8d6; font-size: 0.84rem; }
.bench-title { font-weight: 600; color: var(--navy); }
.bench-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.bench .lab-btn { background: var(--navy); }
.bench-sel { font: 500 0.82rem var(--font-mono); padding: 0.32rem 0.4rem; border: 1px solid var(--field-border); border-radius: 6px; background: #fff; color: var(--ink); }

/* ---------- SIEM ---------- */
.win--siem .win-body { background: #16150f; color: #dcd6c4; }
.siem { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 0.82rem; }
.siem-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.55rem 0.6rem 0.2rem; }
.siem-q { flex: 1 1 260px; font: 500 0.86rem/1.2 var(--font-mono); padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid #4a4434; background: #0e0d0a; color: #f6f1e4; }
.siem-q::placeholder { color: #7d7563; }
.siem-range { font: 500 0.74rem var(--font-mono); color: #a39c8c; }
.siem-help { margin: 0.1rem 0.6rem 0.3rem; font-size: 0.74rem; color: #a39c8c; max-width: none; }
.siem-msg { margin: 0.2rem 0.6rem; padding: 0.4rem 0.6rem; background: #3a1d18; color: #ffb4a8; border-radius: 6px; max-width: none; }
.siem-hist { display: block; width: calc(100% - 1.2rem); height: 56px; margin: 0.1rem 0.6rem 0.4rem; background: #0e0d0a; border-radius: 4px; }
.hb--ok { fill: #4f9a62; }
.hb--fail { fill: #c4584a; }
.siem-main { flex: 1; min-height: 0; display: flex; gap: 0; border-top: 1px solid #2c2a22; }
.siem-side { width: 168px; flex: none; overflow: auto; padding: 0.5rem 0.5rem 1rem 0.6rem; border-right: 1px solid #2c2a22; }
.facet-name { margin: 0.4rem 0 0.2rem; font: 700 0.7rem/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); }
.facet ul { list-style: none; margin: 0; padding: 0; }
.facet-val { display: flex; justify-content: space-between; gap: 0.4rem; width: 100%; padding: 0.2rem 0.3rem; border: 0; border-radius: 4px; background: transparent; color: #dcd6c4; font: 500 0.74rem/1.3 var(--font-mono); text-align: left; cursor: pointer; }
.facet-val:hover { background: #2a2821; }
.facet-val span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-n { color: #a39c8c; }
.siem-results { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.siem-results-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; }
.siem-count { font: 600 0.78rem var(--font-mono); color: #cfc8b4; }
.siem-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.siem-table { border-collapse: collapse; width: 100%; font: 500 0.75rem/1.25 var(--font-mono); }
.siem-table th { position: sticky; top: 0; background: #22201a; text-align: left; z-index: 1; padding: 0; }
.th-sort { width: 100%; text-align: left; padding: 0.4rem 0.35rem; border: 0; background: transparent; color: var(--cream); font: 700 0.72rem/1 "Inter", sans-serif; cursor: pointer; white-space: nowrap; }
.th-sort:hover { color: var(--accent-bright); }
th[aria-sort="ascending"] .th-sort::after { content: " \25B4"; }
th[aria-sort="descending"] .th-sort::after { content: " \25BE"; }
.siem-table td { padding: 0.28rem 0.35rem; border-bottom: 1px solid #24221b; white-space: nowrap; }
.siem-table tr:hover td { background: #22201a; }
.col-pick { width: 28px; text-align: center; }
.col-pick input { accent-color: var(--accent-bright); }
.r--failure .c-result { color: #ff8f80; }
.r--success .c-result { color: #8fd49f; }
.r--lockout td { background: #2f2510; }
.r--lockout .c-result { color: var(--accent-bright); font-weight: 700; }
.drill { margin-left: 0.35rem; border: 0; background: transparent; color: var(--accent-bright); cursor: pointer; font-size: 0.85rem; }
.win--notes .win-body { background: #fffbe9; }
.notes { width: 100%; height: 100%; border: 0; resize: none; padding: 0.6rem; font: 500 0.85rem/1.45 var(--font-mono); background: transparent; color: var(--ink); }

@media (max-width: 760px) {
  .siem-main { flex-direction: column; }
  .siem-side { width: auto; max-height: 30%; border-right: 0; border-bottom: 1px solid #2c2a22; display: flex; gap: 0.8rem; overflow-x: auto; }
  .facet { min-width: 140px; }
  .lab-desk { height: clamp(560px, 82vh, 900px); }
}

/* ---------- results ---------- */
.lab-results { position: absolute; inset: 0; z-index: 2000; background: rgba(16, 15, 12, 0.72); overflow: auto; padding: clamp(0.5rem, 3vw, 2rem); }
.res-card { max-width: 860px; margin: 0 auto; background: var(--bg); color: var(--ink); border-radius: 12px; padding: 1.2rem clamp(1rem, 3vw, 1.6rem) 1.4rem; }
.res-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.res-score strong { font: 700 2.4rem/1 var(--font-head); color: var(--navy); margin-right: 0.6rem; }
.res-score span { color: var(--ink-soft); font-size: 0.9rem; }
.res-note { color: var(--ink-soft); font-size: 0.9rem; margin: 0.6rem 0 1rem; }
.res-list { list-style: none; margin: 0; padding: 0; }
.res-item { border: 1px solid var(--hairline); border-left-width: 4px; border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; background: #fff; }
.res-item--pass { border-left-color: var(--right); }
.res-item--part { border-left-color: var(--accent); }
.res-item--fail { border-left-color: var(--wrong); }
.res-row { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.res-mark { width: 0.9rem; flex: none; }
.res-item--pass .res-mark::before { content: "\2713"; color: var(--right); font-weight: 700; }
.res-item--part .res-mark::before { content: "\25D0"; color: var(--accent); }
.res-item--fail .res-mark::before { content: "\2717"; color: var(--wrong); font-weight: 700; }
.res-label { font-weight: 600; flex: 1; }
.res-pts { font: 500 0.78rem var(--font-mono); color: var(--ink-soft); }
.res-detail { margin: 0.4rem 0 0 1.5rem; padding: 0; color: var(--wrong); font-size: 0.86rem; }
.res-explain { margin: 0.45rem 0 0 1.5rem; font-size: 0.9rem; color: var(--ink); max-width: none; }
.res-solution { margin-top: 1rem; }
.res-solution summary { cursor: pointer; font-weight: 600; color: var(--accent-deep); }
.res-cmds { background: #12110d; color: #dcd6c4; padding: 0.8rem 1rem; border-radius: 8px; font: 500 0.82rem/1.5 var(--font-mono); overflow: auto; }
.res-key { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; margin: 0.7rem 0 0; }
.res-key dt { font-weight: 700; }
.res-key dd { margin: 0; }

/* ---------- page chooser ---------- */
.lab-pick { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; }
.lab-pick a { display: block; padding: 0.7rem 0.9rem; border: 1px solid var(--hairline); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); min-width: 230px; flex: 1 1 230px; }
.lab-pick a:hover { border-color: var(--accent); }
.lab-pick a[aria-current="page"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.lab-pick strong { display: block; color: var(--navy); }
.lab-pick span { font: 500 0.78rem var(--font-mono); color: var(--ink-soft); }
.lab-wide { max-width: 1400px; margin: 0 auto; padding: 0 16px; }

/* ---------- guided mode ---------- */
.mode { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 8px; overflow: hidden; }
.mode-btn { font: 600 0.82rem/1 "Inter", system-ui, sans-serif; padding: 0.55rem 0.8rem; border: 0; background: transparent; color: #bdb5a0; cursor: pointer; }
.mode-btn + .mode-btn { border-left: 1px solid var(--line-dark); }
.mode-btn[aria-pressed="true"] { background: var(--accent-bright); color: var(--navy); }
.mode-btn:hover:not([aria-pressed="true"]) { color: var(--cream); }

.tkt-tasks--guided .tk { display: block; padding: 0.6rem 0 0.7rem; }
.tk-row { display: flex; gap: 0.45rem; align-items: flex-start; }
.tk-state { flex: none; font: 700 0.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.28rem 0.4rem; border-radius: 4px; background: var(--tint); color: var(--ink-soft); border: 1px solid var(--hairline-hover); margin-top: 0.1rem; min-width: 3.4rem; text-align: center; }
.tk.is-done .tk-state { background: var(--right-bg); color: var(--right); border-color: var(--right); }
.tk-num { font-weight: 700; color: var(--navy); }
.tk.is-done .tk-text { color: var(--ink-soft); }
.tk-verify { margin: 0.35rem 0 0 4.3rem; font-size: 0.8rem; color: var(--ink-soft); }
.tk-verify strong { color: var(--ink); font-weight: 600; }
.tk .hint { margin-left: 4.3rem; }
.hint { margin-top: 0.35rem; }
.tf .hint, .tkt--form > .hint { margin: -0.45rem 0 0.9rem; }
.hint-btn { font: 600 0.76rem/1 "Inter", sans-serif; padding: 0.32rem 0.6rem; border-radius: 6px; border: 1px dashed var(--accent); background: #fff; color: var(--accent-deep); cursor: pointer; }
.hint-btn:hover { background: var(--accent-soft); }
.hint-text { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ink); background: var(--accent-soft); border-radius: 6px; padding: 0.45rem 0.6rem; }
.hint-text p { margin: 0 0 0.3rem; }
.hint-cmds { margin: 0; background: #12110d; color: #dcd6c4; border-radius: 5px; padding: 0.45rem 0.6rem; font: 500 0.78rem/1.5 var(--font-mono); white-space: pre-wrap; }

.win-icon--runbook { background: #9fb7d8; }
.win--runbook .win-body { background: #fff; }
.rbk { padding: 0.7rem 0.9rem 1rem; font-size: 0.82rem; color: var(--ink); }
.rbk-intro { margin: 0 0 0.5rem; color: var(--ink-soft); }
.rbk-h { margin: 0.7rem 0 0.3rem; font: 700 0.72rem/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-deep); }
.rbk-rows { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 0.25rem 0.7rem; margin: 0; }
.rbk-rows dt { margin: 0; }
.rbk-rows dd { margin: 0; color: var(--ink-soft); }
.rbk-rows code { font: 600 0.76rem/1.35 var(--font-mono); color: var(--navy); background: var(--tint); padding: 0.05rem 0.3rem; border-radius: 3px; word-break: break-word; }
@media (max-width: 760px) {
  .rbk-rows { grid-template-columns: 1fr; gap: 0.1rem; }
  .rbk-rows dd { margin-bottom: 0.35rem; }
  .tk-verify, .tk .hint { margin-left: 0; }
}

/* ---------- firewall console ---------- */
.win-icon--firewall { background: #e0705f; box-shadow: inset 0 0 0 1.5px #fff; }
.win--firewall .win-body { background: #f4f2ec; }
.fwa { display: flex; flex-direction: column; min-height: 100%; font-size: 0.84rem; color: var(--ink); }
.fwa-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; padding: 0.55rem 0.8rem; background: #2b3440; color: #e8edf3; }
.fwa-brand { font: 700 0.95rem/1 var(--font-mono); color: #fff; }
.fwa-sub { font-size: 0.78rem; color: #b8c4d2; }
.fwa-zones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; font: 500 0.72rem/1.2 var(--font-mono); }
.fwa-zone { padding: 0.18rem 0.45rem; border-radius: 4px; background: #3c4756; }
.fwa-zone strong { font-family: "Inter", sans-serif; }
.fwa-zone--outside { background: #5a3b38; }
.fwa-zone--dmz { background: #5a4a26; }
.fwa-zone--inside { background: #2f4a3a; }
.fwa-zone-link { color: #b8c4d2; }
.fwa-tabs { display: flex; gap: 2px; padding: 0.4rem 0.6rem 0; background: #dfe4ea; border-bottom: 1px solid #c3cbd5; overflow-x: auto; }
.fwa-tab { font: 600 0.8rem/1 "Inter", sans-serif; padding: 0.55rem 0.8rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: #3c4756; cursor: pointer; white-space: nowrap; }
.fwa-tab[aria-selected="true"] { background: #f4f2ec; border-color: #c3cbd5; color: #1b1a16; }
.fwa-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; font-size: 0.8rem; color: #3c4756; border-bottom: 1px solid #e0dccf; }
.fwa-pending.is-dirty { background: #fff4d6; color: #6b4a00; }
.fwa-pending.is-dirty span { flex: 1; font-weight: 600; }
.fwa-pane { padding: 0.6rem 0.8rem 1rem; }
.fwr-wrap { overflow-x: auto; }
.fwr-table, .fwo-table, .fwl-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.fwr-table th, .fwo-table th, .fwl-table th { text-align: left; font: 700 0.7rem/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: #5c6673; padding: 0.4rem 0.35rem; border-bottom: 2px solid #c3cbd5; white-space: nowrap; }
.fwr-table td, .fwo-table td, .fwl-table td { padding: 0.3rem 0.35rem; border-bottom: 1px solid #e0dccf; vertical-align: middle; }
.fwr--allow { background: #f1f8f3; }
.fwr--deny { background: #fbf0ee; }
.fwr--off { opacity: 0.5; }
.fwr--implicit td { color: #7a6f63; font-style: italic; background: #f0ede6; }
.fwr-grip { cursor: grab; color: #8a8270; font-size: 1rem; user-select: none; touch-action: none; width: 1.2rem; text-align: center; }
.fwr-pos { font: 700 0.8rem var(--font-mono); color: #3c4756; width: 1.6rem; }
.fwr-sel { font: 500 0.78rem var(--font-mono); padding: 0.25rem 0.2rem; border: 1px solid var(--field-border); border-radius: 4px; background: #fff; color: var(--ink); max-width: 9.5rem; }
.fwr-act { font-weight: 700; }
.fwr--allow .fwr-act { color: #2b7554; }
.fwr--deny .fwr-act { color: #b3372f; }
.fwr-desc { min-width: 14rem; }
.fwr-in { width: 100%; font: 500 0.78rem "Inter", sans-serif; padding: 0.25rem 0.35rem; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); }
.fwr-in:hover, .fwr-in:focus { border-color: var(--field-border); background: #fff; }
.fwr-shadow { display: block; margin-top: 0.15rem; font: 600 0.7rem/1.2 "Inter", sans-serif; color: #8a560c; }
.fwr-shadow::before { content: "\26A0  "; }
.fwr-hits { font: 500 0.78rem var(--font-mono); text-align: right; color: #5c6673; }
.fwr-ops { white-space: nowrap; }
.fwr-btn { width: 1.7rem; height: 1.7rem; border: 1px solid #c3cbd5; border-radius: 4px; background: #fff; color: #3c4756; cursor: pointer; font-size: 0.82rem; }
.fwr-btn:hover:not(:disabled) { border-color: var(--accent); }
.fwr-btn:disabled { opacity: 0.35; cursor: default; }
.fwr-del:hover:not(:disabled) { background: var(--wrong-bg); color: var(--wrong); border-color: var(--wrong); }
tr.is-dragging { opacity: 0.6; }
tr.is-drop td { box-shadow: inset 0 3px 0 var(--accent); }
.fwr-foot { padding-top: 0.6rem; }
.fwr-foot .lab-btn { background: #2b3440; border-color: #2b3440; }
.fwo-table code { font: 700 0.78rem var(--font-mono); color: var(--navy); }
.fwt-help { margin: 0 0 0.6rem; color: #5c6673; font-size: 0.8rem; max-width: none; }
.fwt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.fwt-form label { display: flex; flex-direction: column; gap: 0.2rem; font: 600 0.72rem "Inter", sans-serif; color: #3c4756; }
.fwt-in { font: 500 0.82rem var(--font-mono); padding: 0.4rem 0.45rem; border: 1px solid var(--field-border); border-radius: 5px; background: #fff; color: var(--ink); width: 11rem; }
.fwt-port { width: 6rem; }
select.fwt-in { width: 6rem; }
.fwt-out { margin-top: 0.8rem; }
.fwt-flow { font: 600 0.84rem var(--font-mono); margin: 0 0 0.4rem; }
.fwt-line { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.25rem 0; padding: 0.45rem 0.6rem; border-radius: 6px; max-width: none; }
.fwt-line--allow { background: var(--right-bg); }
.fwt-line--deny { background: var(--wrong-bg); }
.fwt-line--allow strong { color: var(--right); }
.fwt-line--deny strong { color: var(--wrong); }
.fwt-label { min-width: 6.5rem; font-weight: 600; color: #3c4756; }
.fwt-err { color: var(--wrong); }
.fwl-table td { font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; }
.fwl--allow .fwl-act { color: #2b7554; font-weight: 700; }
.fwl--deny .fwl-act { color: #b3372f; font-weight: 700; }

/* ---------- placement ---------- */
.plc-wrap { container-type: inline-size; height: 100%; min-height: 0; }
.plc { display: flex; flex-direction: row; height: 100%; min-height: 0; background: #f6f1e4; color: var(--ink); }
.plc-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: 0.4rem; display: flex; align-items: flex-start; }
.plc-board { position: relative; width: 100%; max-height: 100%; margin: auto 0; }
.plc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plc-zone { fill: #ece4cf; stroke: #c9bea3; stroke-width: 1.5; }
.plc-zone--dmz { fill: #f3e3c4; }
.plc-zone--mgmt { fill: #e3e6dc; }
.plc-zone--internet { fill: #e9edf2; }
.plc-zone-label { font: 700 14px var(--font-mono); fill: #6a6355; letter-spacing: 0.04em; text-transform: uppercase; }
.plc-link { stroke: #8a8270; stroke-width: 2.5; }
.plc-dev-box { fill: #fff; stroke: #3a362a; stroke-width: 1.5; }
.plc-dev--firewall .plc-dev-box, .plc-dev--switch .plc-dev-box { fill: #26241e; }
.plc-dev--firewall text, .plc-dev--switch text { fill: #f6f1e4; }
.plc-dev-name { font: 700 17px "Inter", sans-serif; fill: var(--navy); }
.plc-dev-sub { font: 500 13px var(--font-mono); fill: var(--ink-soft); }
.plc-layer { position: absolute; inset: 0; }
.plc-slot {
  position: absolute; transform: translate(-50%, -50%); width: 17%; min-height: 34px; padding: 0.2rem 0.35rem 0.2rem 1.6rem;
  scroll-margin: 90px 20px 20px; border: 2px dashed #8a8270; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font: 500 0.68rem/1.2 "Inter", sans-serif; text-align: left; cursor: pointer;
}
.plc-slot.is-target { border-color: var(--accent); background: #fff7e4; }
.plc-slot.is-over { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 184, 65, 0.45); }
.plc-slot.is-full { border-style: solid; border-color: #2b7554; background: #fff; }
.plc-n { position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--navy); color: #f6f1e4; font: 700 0.66rem/1.1rem var(--font-mono); text-align: center; }
.plc-in strong { font-size: 0.8rem; color: var(--navy); }
.plc-empty { color: #6a6355; }
.plc-dock { flex: none; width: 230px; overflow: auto; border-left: 1px solid var(--hairline); background: #efe8d6; padding: 0.5rem 0.7rem 0.6rem; }
@container (max-width: 760px) {
  .plc { flex-direction: column; }
  .plc-board { min-width: 680px; }
  .plc-dock { width: auto; max-height: 45%; border-left: 0; border-top: 1px solid var(--hairline); }
}
.plc-dock-title { margin: 0 0 0.35rem; font-weight: 700; font-size: 0.84rem; color: var(--navy); }
.plc-tray { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2.6rem; }
.plc-tray-empty { margin: 0.4rem 0; font-size: 0.82rem; color: var(--ink-soft); }
.plc-card {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.35rem 0.55rem;
  border: 1px solid #3a362a; border-radius: 7px; background: #fff; color: var(--ink); cursor: grab; text-align: left; touch-action: manipulation;
}
.plc-card strong { font-size: 0.82rem; color: var(--navy); }
.plc-card span { font: 500 0.68rem var(--font-mono); color: var(--ink-soft); }
.plc-card.is-held { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 184, 65, 0.5); }
.plc-back { margin-left: auto; }
.plc-settings { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.6rem; }
.plc-settings .tf-opt { font-size: 0.78rem; padding: 0.15rem 0; }
.plc-attr { border: 0; padding: 0; margin: 0; }
.plc-attr legend { font-weight: 600; font-size: 0.82rem; color: var(--navy); padding: 0; }
.plc-status { margin: 0.35rem 0 0; min-height: 1.1em; font-size: 0.8rem; color: var(--ink-soft); max-width: none; }
.plc-ghost { position: fixed; z-index: 2000; transform: translate(-50%, -50%); padding: 0.35rem 0.6rem; border-radius: 7px; background: var(--navy); color: #f6f1e4; font-weight: 700; font-size: 0.82rem; pointer-events: none; }

/* ---------- packet capture ---------- */
.pcv { container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 0.8rem; }
.pcv-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.45rem 0.6rem 0; font: 500 0.74rem var(--font-mono); color: #a39c8c; }
.pcv-head strong { color: #f6f1e4; }
.pcv-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.45rem 0.6rem; }
.pcv-filter { font-variant-ligatures: none; flex: 1 1 260px; font: 500 0.84rem/1.2 var(--font-mono); padding: 0.45rem 0.55rem; border-radius: 6px; border: 2px solid #4a4434; background: #0e0d0a; color: #f6f1e4; }
.pcv-filter.is-good { border-color: #4f9a62; }
.pcv-filter.is-bad { border-color: #c4584a; }
.pcv-count { font: 500 0.72rem var(--font-mono); color: #a39c8c; }
.pcv-msg { margin: 0 0.6rem; color: #ffb4a8; font-size: 0.76rem; max-width: none; min-height: 0; }
.pcv-msg:empty { display: none; }
.pcv-list { position: relative; flex: 1 1 45%; min-height: 120px; overflow: auto; border-top: 1px solid #2c2a22; border-bottom: 1px solid #2c2a22; background: #12110d; }
.pcv-table { width: 100%; border-collapse: collapse; font: 500 0.74rem/1.25 var(--font-mono); color: #dcd6c4; white-space: nowrap; }
.pcv-table th { position: sticky; top: 0; background: #1d1b15; text-align: left; padding: 0.3rem 0.45rem; font-weight: 600; color: #bdb5a0; }
.pcv-table td { padding: 0.22rem 0.45rem; border-bottom: 1px solid #1c1a14; }
.pcv-row { cursor: pointer; }
.pcv-row--dhcp { background: #1b1e2a; }
.pcv-row--dns { background: #1a2420; }
.pcv-row--arp { background: #24211a; }
.pcv-row--telnet, .pcv-row--tcp { background: #2a1d1a; }
.pcv-row:hover { background: #2c2a22; }
.pcv-row.is-sel { background: #5a4a26; color: #fff; }
.pcv-pinmark { color: var(--accent-bright); width: 1rem; }
.pcv-info { white-space: nowrap; }
.pcv-lower { flex: 1 1 55%; min-height: 0; display: flex; gap: 0; }
.pcv-detail { flex: 1 1 55%; min-width: 0; overflow: auto; border-right: 1px solid #2c2a22; }
.pcv-detail-bar { position: sticky; top: 0; padding: 0.35rem 0.5rem; background: #16150f; }
.pcv-tree { padding: 0 0.6rem 0.6rem; color: #dcd6c4; }
.pcv-frame { margin: 0.2rem 0 0.4rem; font: 500 0.74rem var(--font-mono); color: #a39c8c; max-width: none; }
.pcv-layer summary { cursor: pointer; font-weight: 600; color: #f6f1e4; padding: 0.15rem 0; }
.pcv-layer dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.7rem; margin: 0.15rem 0 0.4rem 1rem; font: 500 0.74rem var(--font-mono); }
.pcv-layer dt { color: #a39c8c; }
.pcv-layer dd { margin: 0; color: #f6f1e4; word-break: break-all; }
.pcv-empty { color: #a39c8c; }
.pcv-bytes { flex: 1 1 45%; min-width: 0; margin: 0; overflow: auto; padding: 0.5rem 0.6rem; font: 500 0.72rem/1.35 var(--font-mono); color: #dcd6c4; background: #0e0d0a; white-space: pre; }
.pcv-pins { list-style: none; margin: 0; padding: 0; }
.pcv-pins li { display: flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0; font: 500 0.78rem var(--font-mono); }
.pcv-pins-empty { color: var(--ink-soft); }
.pcv-pinlink { flex: 1; text-align: left; background: none; border: 0; padding: 0.1rem 0; color: var(--navy); cursor: pointer; font: inherit; text-decoration: underline; }
.pcv-unpin { background: none; border: 1px solid var(--field-border); border-radius: 4px; cursor: pointer; padding: 0 0.4rem; }
@container (max-width: 760px) { .pcv-lower { flex-direction: column; } .pcv-detail { border-right: 0; border-bottom: 1px solid #2c2a22; } }

/* Code the learner might copy: no ligatures, so == and != look like what you type. */
.rbk code, .hint-cmds, .res-cmds, .con-screen { font-variant-ligatures: none; }
@container (max-width: 760px) { .pcv-layer dl { grid-template-columns: 1fr; } .pcv-layer dd { margin-bottom: 0.25rem; word-break: normal; overflow-wrap: anywhere; } .pcv-lower { flex: 1 0 auto; } .pcv-detail { max-height: none; } }

/* ---------- register ---------- */
.rgr { container-type: inline-size; min-height: 100%; padding: 0.6rem; background: #f6f1e4; color: var(--ink); }
.rgr-sec { margin: 0.4rem 0.1rem 0.6rem; }
.rgr-sec + .rgr-row, .rgr-sec:first-child { margin-top: 0; }
.rgr-sec-h { margin: 0.6rem 0 0.2rem; font-size: 1rem; color: var(--navy); }
.rgr-row h4.rgr-title { font-size: 0.98rem; }
.rgr-row { padding: 0.7rem 0.8rem 0.8rem; margin-bottom: 0.6rem; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; scroll-margin: 12px; }
.rgr-head { display: flex; align-items: baseline; gap: 0.5rem; }
.rgr-ref { font: 700 0.74rem var(--font-mono); color: var(--accent-deep); }
.rgr-title { margin: 0; font-size: 0.98rem; color: var(--navy); }
.rgr-asset { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.rgr-desc { margin: 0.35rem 0 0.6rem; font-size: 0.85rem; line-height: 1.45; max-width: none; }
.rgr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem 0.7rem; }
.rgr-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.rgr-field label { font-weight: 600; font-size: 0.8rem; color: var(--navy); }
.rgr-help { font-size: 0.74rem; color: var(--ink-soft); }
.rgr-help.is-bad { color: var(--wrong); font-weight: 600; }
.rgr-in[aria-invalid="true"] { border-color: var(--wrong); }
/* 16px, so a phone doesn't zoom in on every field */
.rgr-in, .rgr-sel { width: 100%; min-width: 0; font: 500 1rem/1.2 var(--font-mono); padding: 0.45rem 0.5rem; border: 1px solid var(--field-border); border-radius: 6px; background: #fff; color: var(--ink); }
.rgr-sel { font-family: "Inter", system-ui, sans-serif; }
.rgr-money { display: flex; align-items: center; gap: 0.3rem; font: 600 0.88rem var(--font-mono); color: var(--ink-soft); }
.rgr-score { margin: 0.6rem 0 0; padding: 0.3rem 0.55rem; display: inline-block; border-radius: 6px; background: var(--tint); font: 600 0.78rem var(--font-mono); color: var(--ink-soft); }
.rgr-score[data-band="low"] { background: var(--right-bg); color: var(--right); }
.rgr-score[data-band="medium"] { background: var(--accent-soft); color: var(--accent-deep); }
.rgr-score[data-band="high"] { background: var(--wrong-bg); color: var(--wrong); }
.rgr-ev { display: flex; flex-direction: column; min-height: 100%; background: #fff; color: var(--ink); }
.rgr-tabs { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px; padding: 0.4rem 0.6rem 0; background: #efe8d6; border-bottom: 1px solid var(--hairline-hover); }
.rgr-tab { font: 600 0.8rem/1 "Inter", sans-serif; padding: 0.55rem 0.75rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.rgr-tab[aria-selected="true"] { background: #fff; border-color: var(--hairline-hover); color: var(--navy); }
.rgr-doc { padding: 0.7rem 0.9rem 1rem; font-size: 0.85rem; line-height: 1.5; }
.rgr-doc p { margin: 0 0 0.6rem; max-width: none; }
.rgr-doc-title { margin: 0 0 0.6rem; font-size: 0.98rem; color: var(--navy); }
.rgr-doc-h { margin: 0.9rem 0 0.35rem; font-size: 0.86rem; color: var(--navy); }
.rgr-table-wrap { overflow-x: auto; margin: 0 0 0.7rem; }
.rgr-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.rgr-table tbody th { font-weight: 600; background: none; white-space: normal; vertical-align: top; min-width: 5.5rem; }
.rgr-table th { text-align: left; padding: 0.35rem 0.45rem; background: var(--tint); border-bottom: 1px solid var(--hairline-hover); color: var(--navy); white-space: nowrap; }
.rgr-table td { padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--hairline); vertical-align: top; min-width: 5.5rem; }
.rgr-table td:last-child { min-width: 12rem; }

/* ---------- certificate inspector ---------- */
.crt { container-type: inline-size; display: flex; flex-direction: column; min-height: 100%; background: #f6f1e4; color: var(--ink); }
.crt-clock { margin: 0; padding: 0.45rem 0.7rem; background: #26241e; color: #f6f1e4; font: 600 0.78rem var(--font-mono); max-width: none; }
.crt-body { display: flex; flex: 1; min-height: 0; }
.crt-sites { flex: none; width: 170px; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem; border-right: 1px solid var(--hairline); background: #efe8d6; }
.crt-site { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.4rem 0.55rem; border: 1px solid var(--hairline-hover); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.crt-site strong { font-size: 0.86rem; color: var(--navy); }
.crt-site span { font: 500 0.68rem var(--font-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.crt-prog { font: italic 500 0.66rem "Inter", sans-serif; color: var(--ink-soft); }
.crt-site[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: #fff7e4; }
.crt-pane { flex: 1; min-width: 0; padding: 0.7rem 0.8rem 1rem; outline: none; }
.crt-host { margin: 0; font: 700 1rem var(--font-mono); color: var(--navy); overflow-wrap: anywhere; }
.crt-report { margin: 0.4rem 0 0.6rem; font-size: 0.86rem; line-height: 1.45; max-width: none; }
.crt-sent { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--ink-soft); max-width: none; }
.crt-card { margin-bottom: 0.7rem; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; }
.crt-card-h { margin: 0; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--hairline); font: 600 0.8rem var(--font-mono); color: var(--navy); overflow-wrap: anywhere; }
.crt-role { color: var(--accent-deep); }
.crt-fields { margin: 0; }
.crt-field { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.6rem; padding: 0.3rem 0.6rem; border-top: 1px solid var(--hairline); }
.crt-field:first-child { border-top: 0; }
.crt-field.is-pinned { background: #fff7e4; }
.crt-field dt { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
.crt-field dd { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; min-width: 0; }
.crt-val { font: 500 0.76rem/1.4 var(--font-mono); overflow-wrap: anywhere; min-width: 0; font-variant-ligatures: none; }
.crt-pin { flex: none; font: 600 0.72rem/1 "Inter", sans-serif; padding: 0.3rem 0.5rem; border: 1px solid var(--field-border); border-radius: 5px; background: #fff; color: var(--ink); cursor: pointer; }
.crt-pin[aria-pressed="true"] { background: var(--accent-bright); border-color: var(--accent); color: var(--navy); }
.crt-diag { margin: 0.4rem 0 0; padding: 0.6rem 0.7rem 0.7rem; border: 1px solid var(--hairline-hover); border-radius: 8px; background: #fff; display: grid; gap: 0.55rem; }
.crt-diag legend { padding: 0 0.3rem; font-weight: 700; font-size: 0.84rem; color: var(--navy); }
.crt-count { margin: 0; font-size: 0.78rem; color: var(--ink-soft); max-width: none; }
.crt-form { display: grid; gap: 0.7rem; }
.crt-csr-in { font-size: 1rem; }
textarea.crt-csr-in { resize: vertical; min-height: 4.5rem; }
@container (max-width: 620px) {
  .crt-body { flex-direction: column; }
  .crt-sites { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .crt-site { flex: 1 1 5.5rem; }
  .crt-site span { display: none; }
  .crt-field { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- reported mail (reuses the certificate inspector's layout) ---------- */
.mail-queue .crt-site strong { font-size: 0.8rem; line-height: 1.25; }
.mail-body-row { display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; padding: 0.5rem 0.6rem; }
.mail-body-row.is-pinned { background: #fff7e4; }
.mail-body { margin: 0; flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 0.82rem/1.5 "Inter", system-ui, sans-serif; color: var(--ink); }