/*! © 2026 Cyber Affinity LLC. All rights reserved. Use is subject to https://www.cyber-affinity.com/terms — copying or redistributing this code is not permitted. */
/* SOP & Process Doc Builder — tool-specific styles (shared classes live in /styles.css) */
.sop-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sop-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.sop-tpl { display: inline-flex; font-weight: 400; }
.sop-tpl select { width: auto; max-width: 100%; padding: 7px 12px; font-size: 14px; }

.sop-summary { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.sop-sum-main { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0; flex: 1 1 260px; }
.sop-sum-title { overflow-wrap: anywhere; }
.sop-sum-flags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sop-tabs { margin-top: 16px; }
.sop-tab-out { border-style: dashed; }
.sop-tab-out[aria-selected="true"] { border-style: solid; }
.sop-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }

#view .cw-section { grid-template-columns: minmax(0, 1fr); }
#view .cw-section > * { min-width: 0; }

/* Header */
.sop-review { display: grid; gap: 8px; align-content: start; }
.sop-review-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Pair and list editors */
.sop-pairs { display: grid; gap: 10px; justify-items: start; }
.sop-pairs > * { max-width: 100%; }
.sop-pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.sop-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sop-line { display: flex; gap: 6px; align-items: center; }
.sop-line input { padding: 8px 10px; font-size: 14px; }
@media (max-width: 640px) { .sop-pair { grid-template-columns: minmax(0, 1fr) auto; } .sop-pair-b { grid-column: 1 / 2; } .sop-pair .rr-x { grid-row: 1; grid-column: 2; } }

/* Steps */
.sop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sop-step { border-left: 3px solid var(--accent); }
.sop-step-dec { border-left-color: var(--accent-2); }
.sop-step-head { justify-content: space-between; }
.sop-num { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: rgba(45, 212, 191, 0.15); color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.sop-step-dec .sop-num { background: rgba(125, 211, 252, 0.15); color: var(--accent-2); }
.sop-kind { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-right: auto; }
.sop-kind select { width: auto; padding: 6px 10px; font-size: 14px; }
.sop-step-acts { display: flex; gap: 2px; align-items: center; }
.sop-mini { font-size: 17px; padding: 4px 8px; }
.sop-mini:disabled { opacity: 0.35; cursor: default; }
.sop-mini:disabled:hover { background: none; color: var(--muted); }
.sop-subs { display: grid; gap: 6px; justify-items: start; }
.sop-sub-list { margin: 0; padding-left: 26px; display: grid; gap: 6px; width: 100%; }
.sop-sub-list li { color: var(--muted); }
.sop-sub-list li > * { vertical-align: middle; }
.sop-sub-list input { width: calc(100% - 44px); padding: 7px 10px; font-size: 14px; }
.sop-mini-btn { padding: 5px 12px; font-size: 13px; }
.sop-then { max-width: 360px; }
.sop-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sop-branch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: end; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.sop-branch > label:last-child { grid-column: 2; }
.sop-branch-tag { align-self: start; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: rgba(45, 212, 191, 0.15); color: var(--accent); }
.sop-branch-no .sop-branch-tag { background: rgba(125, 211, 252, 0.15); color: var(--accent-2); }
.sop-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.sop-flags:empty { display: none; }
.sop-flags .flag { white-space: normal; }
@media (max-width: 760px) { .sop-branches { grid-template-columns: 1fr; } }

/* Checks */
.sop-stats { margin-top: 0; }
.sop-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sop-checks li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sop-check-text { flex: 1 1 240px; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }

/* History */
.sop-hist { min-width: 720px; }
.sop-hist td:nth-child(1) { width: 90px; }
.sop-hist td:nth-child(2) { width: 160px; }
.sop-hist td:nth-child(3) { width: 180px; }
.sop-hist td:last-child { width: 44px; }

/* Flow diagram */
.sop-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sop-key { display: inline-block; width: 18px; height: 12px; border: 2px solid var(--accent); border-radius: 3px; margin-left: 6px; }
.sop-key-dec { border-color: var(--accent-2); transform: rotate(45deg) scale(0.75); border-radius: 1px; }
.sop-key-caution { border-color: #fde047; }
.sop-flow-wrap { overflow-x: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.sop-flow-svg { display: block; max-width: none; height: auto; margin: 0 auto; }
.sop-f-box { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.sop-f-box.sop-f-caution { stroke: #fde047; stroke-width: 2; }
.sop-f-dec { fill: rgba(125, 211, 252, 0.08); stroke: var(--accent-2); stroke-width: 1.5; }
.sop-f-term { fill: rgba(45, 212, 191, 0.15); stroke: var(--accent); stroke-width: 1.5; }
.sop-f-text { fill: var(--text); font: 13px var(--font); }
.sop-f-term-text { fill: var(--accent); font: 700 13px var(--font); }
.sop-f-who { fill: var(--muted); font: 12px var(--font); }
.sop-f-edge { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sop-f-jump { stroke: var(--accent-2); stroke-dasharray: 5 3; }
.sop-f-head { fill: var(--muted); }
.sop-f-label { fill: var(--accent-2); font: 700 12px var(--font); }

/* Generated document (preview + print) */
.sop-paper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 32px); }
.sop-doc { display: grid; gap: 18px; max-width: 900px; overflow-wrap: anywhere; }
.sop-doc-head { border-bottom: 2px solid var(--accent); padding-bottom: 12px; }
.sop-doc-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.sop-doc .sop-doc-title { font-size: 28px; margin: 0 0 8px; line-height: 1.2; }
.sop-doc-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; font-size: 14px; }
.sop-doc-meta div { display: flex; gap: 6px; }
.sop-doc-meta dt { color: var(--muted); }
.sop-doc-meta dd { margin: 0; font-weight: 600; color: var(--text); }
.sop-doc-sec { display: grid; gap: 8px; }
.sop-doc-sec > * { min-width: 0; }
.sop-doc-sec h3 { font-size: 19px; margin: 0; color: var(--accent-2); }
.sop-doc .sop-doc-p { margin: 0; white-space: pre-wrap; color: var(--text); }
.sop-doc ul, .sop-doc ol { margin: 0; padding-left: 22px; }
.sop-doc li { color: var(--text); margin: 3px 0; }
.sop-doc-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; }
.sop-doc-table th, .sop-doc-table td { border: 1px solid var(--line); padding: 6px 10px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.sop-doc-table th { background: var(--bg); }
.sop-doc ol.sop-doc-steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.sop-doc-step { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; display: grid; gap: 6px; break-inside: avoid; }
.sop-doc-dec { border-left-color: var(--accent-2); }
.sop-doc-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.sop-doc-num { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sop-doc p { margin: 0; }
.sop-doc .sop-doc-action { color: var(--text); font-weight: 600; }
.sop-doc-q { color: var(--accent-2); }
.sop-doc .sop-doc-who, .sop-doc .sop-doc-then, .sop-doc-url { color: var(--muted); font-size: 14px; }
.sop-doc .sop-doc-caution { color: var(--text); background: rgba(253, 224, 71, 0.10); border: 1px solid rgba(253, 224, 71, 0.35); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.sop-doc .sop-doc-result { color: var(--text); font-size: 14px; }
.sop-doc ol.sop-doc-subs { padding-left: 44px; font-size: 14px; }
.sop-doc ul.sop-doc-branches { padding-left: 44px; font-size: 14px; }
.sop-doc-flow-wrap { padding: 8px; }

/* Printing: only the generated document is printed — never the editing UI. */
#sop-print { display: none; }
@media print {
  body.sop-printing > *:not(#sop-print) { display: none !important; }
  body.sop-printing { background: #fff !important; }
  body.sop-printing #sop-print { display: block; color: #111; width: 100%; max-width: 100%; overflow: visible; }
  #sop-print .sop-doc { max-width: none; width: 100%; gap: 14px; }
  #sop-print .sop-doc, #sop-print .sop-doc * { color: #111 !important; box-shadow: none !important; }
  #sop-print .sop-doc-head { border-bottom-color: #111; }
  #sop-print .sop-doc-eyebrow, #sop-print dt, #sop-print .sop-doc-who, #sop-print .sop-doc-then, #sop-print .sop-doc-url { color: #444 !important; }
  #sop-print .sop-doc-sec { display: block; }
  #sop-print .sop-doc-sec > * + * { margin-top: 8px; }
  #sop-print .sop-doc-sec h3 { font-size: 15pt; border-bottom: 1px solid #bbb; padding-bottom: 2px; break-after: avoid; }
  #sop-print .sop-doc-table { width: 100% !important; min-width: 0 !important; table-layout: auto; font-size: 10pt; }
  #sop-print .sop-doc-table th, #sop-print .sop-doc-table td { border: 1px solid #999; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
  #sop-print .sop-doc-table th { background: #f0f0f0 !important; }
  #sop-print .sop-doc-table tr { break-inside: avoid; }
  #sop-print .sop-doc-step { border-left-color: #666; }
  #sop-print .sop-doc-dec { border-left-style: double; border-left-width: 4px; }
  #sop-print .sop-doc-caution { background: #fff !important; border: 1px solid #666 !important; }
  #sop-print .sop-doc-p, #sop-print li, #sop-print p { overflow-wrap: anywhere; word-break: break-word; }
  #sop-print .sop-doc-flow { break-before: page; }
  #sop-print .sop-flow-wrap { background: #fff !important; border: 0 !important; padding: 0 !important; overflow: visible !important; }
  /* Fit the whole diagram on one page; preserveAspectRatio keeps shapes undistorted. */
  #sop-print .sop-flow-svg { width: auto; height: auto; max-width: 100% !important; max-height: 228mm; }
  #sop-print .sop-f-box, #sop-print .sop-f-term { fill: #fff; stroke: #333; }
  #sop-print .sop-f-box.sop-f-caution { stroke: #111; stroke-width: 2.5; stroke-dasharray: 6 3; }
  #sop-print .sop-f-dec { fill: #f3f3f3; stroke: #333; }
  #sop-print .sop-f-text, #sop-print .sop-f-term-text, #sop-print .sop-f-label { fill: #111; }
  #sop-print .sop-f-who { fill: #444; }
  #sop-print .sop-f-edge { stroke: #444; }
  #sop-print .sop-f-head { fill: #444; }
  /* Fallback if the editing UI is ever printed: nothing may be clipped. */
  .sop-flow-wrap, .table-wrap { overflow: visible !important; }
  .sop-flow-svg { max-width: 100% !important; height: auto; }
  .sop-hist { min-width: 0 !important; }
}