/* SOP workflow diagrams and homepage launch feature. No diagram library needed. */
.sop-workflow { padding:80px 0; background:#f5f8fd; border-bottom:1px solid #dfe6ef; }
.sop-workflow *,.sop-launch * { box-sizing:border-box; }
.sop-workflow-heading { max-width:730px; margin:0 auto 28px; text-align:center; }
.sop-workflow-heading .sop-lead { max-width:700px; margin:0 auto; font-size:18px; }
.sop-scenarios { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.sop-scenarios[hidden] { display:none; }
.sop-scenarios button { padding:10px 18px; border:1px solid #d7e1ee; border-radius:30px; background:#fff; color:#526178; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.sop-scenarios button[aria-pressed="true"] { background:#10233f; border-color:#10233f; color:#fff; }
.sop-scenario-caption { margin:0 0 22px; text-align:center; font-size:14px; }
.sop-flow-map { padding:30px 28px; border:1px solid #dfe6ef; border-radius:22px; background:#fff; box-shadow:0 16px 40px rgba(16,35,63,.05); }
.sop-flow-legend { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:25px; color:#526178; font-size:12px; font-weight:700; }
.sop-flow-legend span { display:inline-flex; align-items:center; gap:7px; }
.sop-flow-legend i { width:8px; height:8px; border-radius:50%; background:#1769e0; }
.sop-flow-legend .employee { background:#b85b10; }
.sop-flow-legend .record { background:#15815d; }
.sop-flow-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px; padding:0; margin:0; list-style:none; }
.sop-flow-track > li { position:relative; min-width:0; }
.sop-flow-track > li:not(:last-child)::after { content:"→"; position:absolute; right:-22px; top:73px; color:#8598b3; font-size:22px; line-height:1; }
.sop-flow-node { width:100%; height:100%; min-height:214px; display:flex; flex-direction:column; align-items:flex-start; padding:19px 16px; border:1px solid #dce6f3; border-top:3px solid #1769e0; border-radius:12px; background:#f8fbff; color:#10233f; text-align:left; font:inherit; cursor:pointer; }
.sop-flow-node:hover { border-color:#1769e0; }
.sop-flow-node[aria-pressed="true"] { outline:2px solid #1769e0; outline-offset:3px; }
.sop-flow-node.employee { border-top-color:#b85b10; background:#fffbf6; }
.sop-flow-node.record { border-top-color:#15815d; background:#f4fbf8; }
.sop-node-meta { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; color:#1769e0; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sop-node-meta b { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#e8f1ff; font-size:12px; letter-spacing:0; }
.employee .sop-node-meta { color:#a64e0b; }
.employee .sop-node-meta b { background:#ffecd9; }
.record .sop-node-meta { color:#126c4e; }
.record .sop-node-meta b { background:#ddf3e9; }
.sop-flow-node strong { display:block; margin-bottom:9px; font-size:17px; line-height:1.35; font-weight:800; }
.sop-node-copy { display:block; color:#526178; font-size:13px; line-height:1.65; }
.sop-flow-hint { margin:20px 0 0; color:#617087; text-align:center; font-size:12px; }
.sop-flow-bottom { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; align-items:stretch; }
.sop-flow-detail,.sop-revision { min-width:0; padding:28px; border:1px solid #dfe6ef; border-radius:18px; background:#fff; }
.sop-flow-detail [data-detail-role],.sop-revision-label { display:block; margin-bottom:10px; color:#1769e0; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.sop-page .sop-flow-detail h3,.sop-page .sop-revision h3 { margin:0 0 12px; font-size:21px; line-height:1.35; }
.sop-flow-detail p { margin:0 0 14px; font-size:15px; }
.sop-flow-detail ul { display:grid; gap:8px; padding-left:20px; margin:0 0 18px; font-size:14px; color:#526178; }
.sop-flow-detail a { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; }
.sop-flow-detail { scroll-margin-top:130px; }
.sop-flow-detail .sop-flow-back { display:none; }
.sop-revision-root { width:fit-content; margin:16px auto 0; padding:8px 16px; border:1px solid #ccd9e9; border-radius:8px; color:#10233f; background:#f5f8fc; font-size:13px; font-weight:800; }
.sop-revision-branches { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:28px; }
.sop-revision-branches::before { content:""; position:absolute; top:0; left:50%; height:15px; border-left:1px solid #aebed2; }
.sop-revision-branches::after { content:""; position:absolute; top:14px; left:24%; right:24%; height:14px; border:1px solid #aebed2; border-bottom:0; border-radius:6px 6px 0 0; }
.sop-revision-branch { position:relative; padding:16px 12px; border:1px solid #dfe6ef; border-radius:10px; background:#fafbfd; text-align:center; }
.sop-revision-branch::before { content:"↓"; display:block; position:absolute; top:-18px; left:calc(50% - 5px); line-height:1; color:#7088a7; font-size:15px; }
.sop-revision-branch strong { display:block; margin-bottom:5px; color:#10233f; font-size:13px; }
.sop-revision-branch small { display:block; color:#617087; font-size:12px; }
.sop-revision-branch b { display:block; margin-top:12px; color:#1769e0; font-size:13px; }
.sop-revision-branch.major { border-color:#bcd2f2; background:#eff5ff; }
.sop-page .sop-revision-note { margin:14px 0 0; font-size:12px; line-height:1.7; }
.sop-workflow button:focus-visible { outline:3px solid #1769e0; outline-offset:4px; }

/* A visible entry point before visitors reach the full module grid. */
.hrm-home-page .home-sop-alert { width:fit-content; max-width:100%; margin-top:22px; display:inline-flex; align-items:center; gap:9px; color:#1769e0; font-size:12px; line-height:1.5; font-weight:800; text-decoration:none; }
.home-sop-alert b { padding:4px 7px; border-radius:5px; background:#1769e0; color:#fff; font-size:9px; letter-spacing:.06em; }
.sop-launch { padding:42px 0; background:#f5f8fd; }
.sop-launch-panel { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:44px; border-radius:22px; background:#10233f; }
.sop-launch-copy { min-width:0; }
.sop-launch-kicker { display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:#b4d2ff; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.sop-launch-kicker b { padding:5px 8px; border-radius:5px; background:#c9f6df; color:#155a40; font-size:10px; }
.hrm-home-page .sop-launch h2 { margin:0 0 18px; color:#fff; font-family:inherit!important; font-size:clamp(27px,3vw,39px); line-height:1.18; font-weight:800; letter-spacing:-.025em; }
.hrm-home-page .sop-launch p { margin:0 0 24px; color:#bed0e6; font-size:15px; line-height:1.8; }
.sop-launch-flow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 25px; padding:0; list-style:none; }
.sop-launch-flow li { display:flex; align-items:center; gap:10px; color:#e1ecfa; font-size:12px; font-weight:700; }
.sop-launch-flow li:not(:last-child)::after { content:"→"; color:#7f9cbd; }
.sop-launch-flow li span { width:22px; height:22px; display:grid; place-items:center; border:1px solid #597698; border-radius:50%; color:#b4d2ff; font-size:10px; }
.sop-launch-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sop-launch-actions .home-btn { background:#fff; color:#10233f; }
.sop-launch-actions .home-btn:hover { background:#eaf3ff; }
.sop-launch-actions > a:not(.home-btn) { color:#c5ddff; font-size:13px; font-weight:800; }
.sop-launch-visual { min-width:0; margin:0; }
.sop-launch-visual picture { display:block; overflow:hidden; border:5px solid rgba(255,255,255,.15); border-radius:14px; }
.sop-launch-visual img { display:block; width:100%; height:auto; }
.sop-launch-visual figcaption { margin-top:12px; color:#adc3dd; text-align:center; font-size:11px; }
@media(max-width:1100px) {
 .sop-flow-track { gap:19px; }
 .sop-flow-map { padding:24px 20px; }
 .sop-flow-node { padding:16px 12px; }
 .sop-flow-track > li:not(:last-child)::after { right:-17px; font-size:18px; }
 .sop-launch-panel { gap:30px; padding:32px; }
}
@media(max-width:980px) {
 .sop-flow-track { grid-template-columns:1fr; gap:25px; }
 .sop-flow-node { min-height:0; display:grid; grid-template-columns:140px 170px 1fr; gap:12px; align-items:center; padding:17px; }
 .sop-node-meta,.sop-flow-node strong { margin:0; }
 .sop-node-meta { justify-content:flex-start; }
 .sop-flow-track > li:not(:last-child)::after { content:"↓"; top:auto; bottom:-23px; left:36px; right:auto; }
 .sop-flow-bottom { grid-template-columns:1fr; }
 .sop-flow-detail .sop-flow-back { display:flex; width:fit-content; margin-top:20px; color:#526178; font-size:12px; }
 .sop-launch-panel { grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:767px) {
 .sop-workflow { padding:52px 0; }
 .sop-workflow-heading .sop-lead { font-size:16px; }
 .sop-flow-node { grid-template-columns:1fr; gap:10px; }
 .sop-flow-node strong { font-size:18px; }
 .sop-node-copy { font-size:14px; }
 .sop-flow-map { padding:22px 18px; }
 .sop-flow-detail,.sop-revision { padding:24px 20px; }
 .sop-flow-detail { scroll-margin-top:92px; }
 .sop-flow-legend { gap:12px; font-size:11px; }
 .sop-scenarios { gap:7px; }
 .sop-scenarios button { padding:9px 12px; font-size:12px; }
 .sop-launch { padding:28px 0; }
 .sop-launch-panel { grid-template-columns:1fr; gap:30px; padding:28px 22px; }
 .sop-launch-flow { gap:8px; }
 .sop-launch-flow li { font-size:11px; gap:7px; }
 .sop-launch-flow li span { display:none; }
 .sop-launch-actions { gap:18px; }
}
@media print {
 .sop-workflow { padding:24px 0; background:#fff; }
 .sop-scenarios,.sop-flow-hint { display:none; }
 .sop-flow-map { box-shadow:none; }
 .sop-flow-track { grid-template-columns:1fr; }
 .sop-flow-node { min-height:0; }
 .sop-flow-bottom { grid-template-columns:1fr; }
 .sop-flow-map,.sop-flow-detail,.sop-revision { break-inside:avoid; }
}