/* ============================================================
   Businessily — Security & architecture page diagrams
   Page-scoped; layers on top of styles.css + anim.css (loaded
   after both). Mirrors the how-it-works "flowmap" visual
   language: rounded-rect nodes, brand-green flow strokes, a
   red "danger/blocked" accent, hand-drawn feel.

   THEMING RULE: every color is a CSS variable or currentColor
   or a color-mix() of one, so the diagrams adapt to light AND
   dark mode automatically. The one literal is the shared
   danger red (--sec-danger), defined per theme below.
   MOTION RULE: only stroke-dashoffset / transform / opacity,
   all gated behind prefers-reduced-motion: no-preference.
   ============================================================ */

:root { --sec-danger: #C0492C; }
[data-theme="dark"] { --sec-danger: #F08A6E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sec-danger: #F08A6E; }
}

/* ---------- shared diagram frame ---------- */
.secfig {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow-md);
  margin: 22px 0 8px;
}
.secfig svg { width: 100%; height: auto; display: block; }
.secfig figcaption {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--text-2);
  text-align: center;
}
.secfig figcaption b { color: var(--text); font-family: var(--font); }

/* legend row shared by several figures */
.sec-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px; margin-top: 16px;
  font-size: .84rem; font-weight: 600; color: var(--text-2);
}
.sec-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sec-legend i { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }
.sec-legend i.lg-ok { background: var(--accent); }
.sec-legend i.lg-no { background: var(--sec-danger); }
.sec-legend i.lg-key { background: linear-gradient(140deg, var(--accent-2), var(--accent)); }

/* ============================================================
   Token-driven SVG classes (shared across all secmap figures)
   ============================================================ */
.secmap .s-card  { fill: var(--card); stroke: var(--hairline); stroke-width: 1.5; }
.secmap .s-card-soft { fill: color-mix(in srgb, var(--accent) 6%, var(--card)); stroke: color-mix(in srgb, var(--accent) 26%, transparent); stroke-width: 1.5; }
.secmap .s-device { fill: url(#secDevice); stroke: none; }
.secmap .s-label { fill: var(--text); font-family: var(--font); font-weight: 800; }
.secmap .s-sub   { fill: var(--text-2); font-family: var(--font-body); font-weight: 600; }
.secmap .s-title { fill: var(--text); font-family: var(--font); font-weight: 800; }
.secmap .s-flow  { stroke: var(--accent); stroke-width: 2.4; fill: none; }
.secmap .s-flow-dash { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-dasharray: 7 6; }
.secmap .s-icon  { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.secmap .s-icon-w { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.secmap .s-arrow { fill: var(--accent); }
.secmap .s-divider { stroke: var(--hairline); stroke-width: 1.4; stroke-dasharray: 4 5; }

/* danger / blocked styling */
.secmap .s-danger-card { fill: color-mix(in srgb, var(--sec-danger) 8%, var(--card)); stroke: color-mix(in srgb, var(--sec-danger) 38%, transparent); stroke-width: 1.5; }
.secmap .s-danger-txt  { fill: var(--sec-danger); font-family: var(--font); font-weight: 800; }
.secmap .s-danger-sub  { fill: var(--text-2); font-family: var(--font-body); font-weight: 600; }
.secmap .s-danger-icon { stroke: var(--sec-danger); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.secmap .s-strike { stroke: var(--sec-danger); stroke-width: 3; stroke-linecap: round; }
.secmap .s-stop   { stroke: var(--sec-danger); stroke-width: 2.6; }

/* "ok / allowed" styling */
.secmap .s-ok-card { fill: color-mix(in srgb, var(--accent) 9%, var(--card)); stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 1.5; }
.secmap .s-ok-txt  { fill: var(--accent); font-family: var(--font); font-weight: 700; }

/* the scrambled-ciphertext + key-feed accents */
.secmap .s-cipher { fill: var(--text-2); font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; }
.secmap .s-wall   { fill: url(#secWall); stroke: var(--accent); stroke-width: 1.5; }
.secmap .s-walltxt { fill: var(--accent); font-family: var(--font); font-weight: 800; }
.secmap .s-keyfeed { stroke: var(--accent-2); stroke-width: 2.2; fill: none; stroke-dasharray: 5 4; }

/* small status badge text */
.secmap .s-badge { fill: color-mix(in srgb, var(--sec-danger) 12%, var(--card)); stroke: color-mix(in srgb, var(--sec-danger) 34%, transparent); stroke-width: 1.2; }
.secmap .s-badge-ok { fill: color-mix(in srgb, var(--accent) 12%, var(--card)); stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 1.2; }
.secmap .s-dashed-layer { fill: color-mix(in srgb, var(--text-2) 8%, var(--card)); stroke: var(--text-2); stroke-width: 1.4; stroke-dasharray: 6 5; }
.secmap .s-dashed-txt { fill: var(--text-2); font-family: var(--font); font-weight: 700; }

/* draw-on flow animation (gated). The figure gets .in via anim.js IO. */
@media (prefers-reduced-motion: no-preference) {
  .secmap .s-flow, .secmap .s-flow-dash, .secmap .s-keyfeed {
    stroke-dasharray: 340; stroke-dashoffset: 340;
  }
  .secmap.in .s-flow, .secmap.in .s-keyfeed {
    transition: stroke-dashoffset 1.05s ease .15s; stroke-dashoffset: 0;
  }
  .secmap.in .s-flow-dash {
    transition: stroke-dashoffset 1.05s ease .15s; stroke-dashoffset: 0;
    /* restore dash look once drawn */
    animation: sec-restore-dash 0s linear 1.2s forwards;
  }
  @keyframes sec-restore-dash { to { stroke-dasharray: 7 6; } }
  .secmap .s-keyfeed { stroke-dasharray: 5 4; stroke-dashoffset: 0; } /* keep dashed key feed static-friendly */
  .secmap .s-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
  .secmap.in .s-pop { transition: transform .5s cubic-bezier(.34,1.56,.5,1) .45s; transform: scale(1); }
}

/* ============================================================
   Two-column "allowlist vs blocklist" (§7) — CSS cards, not SVG
   ============================================================ */
.sec-listcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 8px; }
@media (max-width: 620px) { .sec-listcols { grid-template-columns: 1fr; } }
.sec-listcol { border-radius: var(--r-xl); padding: 20px 22px; border: 1px solid var(--hairline); background: var(--card); box-shadow: var(--shadow-sm); }
.sec-listcol.allow { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.sec-listcol.block { border-color: color-mix(in srgb, var(--sec-danger) 34%, transparent); background: color-mix(in srgb, var(--sec-danger) 6%, var(--card)); }
.sec-listcol h4 { margin: 0 0 4px; font-size: 1.04rem; display: flex; align-items: center; gap: 9px; font-family: var(--font); }
.sec-listcol.allow h4 { color: var(--accent); }
.sec-listcol.block h4 { color: var(--sec-danger); }
.sec-listcol .sub { margin: 0 0 12px; font-size: .82rem; color: var(--text-2); font-weight: 600; }
.sec-listcol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sec-listcol li { font-size: .82rem; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; }
.sec-listcol.allow li { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.sec-listcol.block li { color: var(--sec-danger); background: color-mix(in srgb, var(--sec-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sec-danger) 24%, transparent); }
.sec-listcol li svg { flex: 0 0 auto; }

/* "3 layers of no" badge */
.sec-3no { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font); font-weight: 800; font-size: .82rem; color: var(--sec-danger); }
.sec-3no .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sec-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sec-danger) 26%, transparent); }

/* ============================================================
   Defense-in-depth layered stack (§14) — CSS, not SVG
   ============================================================ */
.sec-layers { display: flex; flex-direction: column; gap: 9px; margin: 22px 0 8px; max-width: 640px; }
.sec-layer { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--card); box-shadow: var(--shadow-sm); }
.sec-layer .lic { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent)); }
.sec-layer .lic svg { display: block; }
.sec-layer b { font-family: var(--font); font-size: 1rem; display: block; }
.sec-layer p { margin: 2px 0 0; font-size: .86rem; color: var(--text-2); }
.sec-layer.scaffold { border-style: dashed; border-color: var(--hairline); background: color-mix(in srgb, var(--text-2) 5%, var(--card)); opacity: .82; }
.sec-layer.scaffold .lic { background: color-mix(in srgb, var(--text-2) 26%, var(--card)); color: var(--text-2); }
.sec-layer .tag { margin-left: auto; font-family: var(--font); font-weight: 800; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); flex: 0 0 auto; }
.sec-layer.scaffold .tag { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.sec-layer .tag.live { color: var(--income); background: color-mix(in srgb, var(--income) 14%, transparent); }
@media (max-width: 560px) { .sec-layer .tag { display: none; } .sec-layer p { font-size: .82rem; } }