/* Scoped detail layer for the unpublished CRM architecture prototype. */
.depth-entry { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; background:#f0f7fd; border-bottom:1px solid #d8e6f1; }
.depth-eyebrow { display:block; color:#55718a; font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.085em; }
.depth-entry strong { display:block; color:#123650; font-size:18px; margin:5px 0; }
.depth-entry small { display:block; font-size:13px; color:#5d7388; line-height:1.55; }
.depth-entry-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:470px; }
.depth-entry-actions button,.depth-button { border:1px solid #cadbe9; background:white; color:#244968; border-radius:8px; padding:11px 15px; font:inherit; font-size:13px; font-weight:600; line-height:1.4; min-height:44px; cursor:pointer; transition:background 160ms ease,border-color 160ms ease,transform 120ms cubic-bezier(.23,1,.32,1); }
.depth-entry-actions button:first-child,.depth-button.depth-primary { background:#0b64df; border-color:#0b64df; color:white; }
.depth-button.depth-wide { width:100%; margin-top:9px; }
.depth-button.depth-link-button { background:transparent; border-color:transparent; color:#0b64cf; padding-left:0; padding-right:0; }
.depth-button:active,.depth-entry-actions button:active,.depth-stage:active,.handoff-map-button:active { transform:scale(.97); }
.depth-panel { background:#f4f8fc; scroll-margin-top:85px; }
.depth-panel[hidden] { display:none; }
.portal-explorer[data-depth-mode] > :is(.depth-entry,.scenario-bar,.map-workspace,.mobile-route,.map-legend,.simulation-status,.node-detail) { display:none; }
.depth-breadcrumb { display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:10px 24px; background:white; border-bottom:1px solid #dde7ef; color:#6b8094; font-size:12px; }
.depth-breadcrumb .depth-button { min-height:40px; padding:7px 9px; font-size:12px; border-color:transparent; background:#f4f8fc; }
.depth-breadcrumb [aria-current] { color:#213f59; font-weight:600; }
.depth-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:28px 28px 24px; }
.depth-heading h3 { font-size:30px; line-height:1.15; letter-spacing:-.025em; color:#112e49; margin:8px 0 12px; font-weight:650; }
.depth-heading h3:focus { outline:none; }
.depth-heading p { color:#61768a; font-size:14px; line-height:1.65; max-width:680px; margin:0; }
.depth-model-label { flex-shrink:0; border:1px solid #d4e1ec; border-radius:20px; padding:6px 10px; font-size:10px; color:#6a8093; }
.depth-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; border-top:1px solid #dce7ef; }
.depth-board { min-width:0; padding:28px; background:radial-gradient(#d5e1ed .65px,transparent .65px) 0 0/18px 18px,#f7fafd; }
.depth-inspector { min-width:0; background:white; border-left:1px solid #dce7ef; padding:26px 23px; }
.depth-inspector h4 { font-size:22px; line-height:1.3; margin:12px 0 21px; color:#173950; font-weight:600; }
.depth-inspector > p { font-size:14px; color:#60758a; line-height:1.7; }
.depth-fields { margin:15px 0; }
.depth-fields > div { display:grid; grid-template-columns:105px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid #e5edf4; font-size:12px; line-height:1.6; }
.depth-fields dt { color:#6b8196; }
.depth-fields dd { margin:0; color:#243f56; overflow-wrap:anywhere; }
.depth-inspector .depth-fields > div { grid-template-columns:90px minmax(0,1fr); gap:10px; }
.depth-takeaway { background:#f0f7fd; border-left:3px solid #40a5d2; padding:17px; margin:25px 0 15px; }
.depth-takeaway strong { color:#285779; font-size:13px; }
.depth-takeaway p { font-size:12px; line-height:1.7; color:#4e6c85; margin:8px 0 0; }
.department-inlet { padding:21px 24px; border:1px solid #d4e1ee; background:white; border-radius:8px; }
.department-inlet strong { display:block; font-size:20px; color:#1c405d; margin-top:8px; }
.department-inlet p { font-size:13px; line-height:1.6; color:#6c8093; margin:8px 0 3px; }
.department-trunk { width:1px; height:29px; background:#b3cbe0; margin:auto; }
.department-processes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.department-process { padding:20px 16px; border:1px solid #d8e3ed; background:white; border-top:3px solid #b9cddd; border-radius:8px; display:flex; flex-direction:column; align-items:flex-start; }
.department-process.is-featured { border-color:#9abfe4; border-top-color:#0b64df; box-shadow:0 8px 20px #2f649011; }
.depth-process-id { font-size:10px; font-weight:700; color:#557c9e; letter-spacing:.045em; }
.department-process h4 { font-size:19px; line-height:1.3; margin:14px 0 11px; color:#16364f; }
.department-process p { font-size:12px; line-height:1.7; color:#667d91; margin:0 0 20px; }
.department-process .depth-button { margin-top:auto; text-align:left; font-size:12px; padding:10px; }
.depth-static-note { color:#7b8fa0; margin-top:auto; font-size:10px; }
.department-outlet { display:flex; gap:20px; justify-content:space-between; padding:22px 0; margin-top:28px; border-top:1px solid #ccdde9; color:#558272; font-size:12px; }
.depth-board-note { font-size:11px; line-height:1.7; color:#75899a; margin:24px 0 0; }
.handoff-endpoints { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; gap:12px; margin-bottom:24px; }
.handoff-endpoints > div { border:1px solid #d4e2ef; border-radius:8px; background:white; padding:22px; }
.handoff-endpoints > div:last-child { border-top:3px solid #bd873e; }
.handoff-endpoints > div:first-child { border-top:3px solid #0b64df; }
.handoff-endpoints h4 { font-size:21px; margin:8px 0; color:#183a55; }
.handoff-endpoints p { color:#667d92; font-size:12px; line-height:1.6; margin:0; }
.handoff-direction { font-size:30px; color:#90a9bd; text-align:center; }
.handoff-packet { padding:24px; background:white; border:1px solid #d6e3ee; border-radius:8px; }
.handoff-packet h4 { font-size:19px; color:#23445e; margin:10px 0 20px; }
.handoff-packet .depth-fields > div { grid-template-columns:145px minmax(0,1fr); }
.handoff-rule { border-left:3px solid #bc955c; margin:24px 0 0; padding:5px 0 5px 18px; }
.handoff-rule strong { font-size:13px; color:#87653c; }
.handoff-rule p { font-size:12px; color:#61778b; line-height:1.8; margin:8px 0 0; }
.handoff-checks { list-style:none; padding:0; counter-reset:checks; }
.handoff-checks li { counter-increment:checks; position:relative; padding:0 0 25px 35px; }
.handoff-checks li:before { content:counter(checks,decimal-leading-zero); position:absolute; left:0; top:2px; color:#5394cf; font-size:11px; font-weight:700; }
.handoff-checks strong { display:block; color:#26475e; font-size:13px; }
.handoff-checks span { display:block; color:#6a7f92; font-size:12px; line-height:1.7; margin-top:7px; }
.depth-funnel-context { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; color:#667f94; font-size:12px; }
.depth-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.depth-stage { position:relative; padding:15px 13px; border:1px solid #d1e0ed; border-radius:8px; background:white; color:#27445e; text-align:left; min-height:143px; display:flex; flex-direction:column; align-items:flex-start; cursor:pointer; transition:background 160ms ease,border-color 160ms ease,transform 120ms cubic-bezier(.23,1,.32,1); }
.depth-stage-number { color:#7b94a9; font-size:10px; font-weight:700; margin-bottom:12px; }
.depth-stage strong { font-size:15px; font-weight:600; }
.depth-stage small { color:#6c8294; font-size:10px; margin:6px 0 12px; line-height:1.5; }
.depth-stage.is-selected { border-color:#398cde; outline:2px solid #d6e9fc; background:#f4f9ff; }
.depth-stage.has-case { border-top:3px solid #bb873b; padding-top:13px; }
.depth-case-token { margin-top:auto; background:#fff2d9; border:1px solid #ecd09b; border-radius:4px; color:#926721; font-size:9px; font-weight:700; padding:4px 7px; }
.depth-stage-legend { display:flex; flex-wrap:wrap; gap:18px; font-size:10px; color:#6f8497; margin:18px 0 24px; }
.depth-stage-legend span { display:flex; align-items:center; gap:6px; }
.depth-stage-legend i { width:8px; height:8px; background:#5799dd; border-radius:2px; }
.depth-stage-legend span:last-child i { background:#bc8b42; }
.exception-branch { padding:20px; border:1px solid #e7d6ba; background:#fffcf6; border-radius:8px; }
.exception-branch-title { display:flex; flex-direction:column; gap:6px; }
.exception-branch-title .depth-eyebrow { color:#947343; }
.exception-branch-title > span:last-child { color:#938064; font-size:10px; }
.exception-branch ol { display:flex; list-style:none; padding:0; margin:21px 0 13px; gap:6px; }
.exception-branch li { flex:1; min-width:0; border-top:2px solid #e4d8c7; padding-top:9px; font-size:10px; line-height:1.5; color:#9b8e7e; }
.exception-branch li > span { display:block; font-size:9px; margin-bottom:6px; }
.exception-branch li.is-visited { color:#705831; border-color:#c69e60; }
.exception-branch li.is-current { color:#87570d; font-weight:700; border-color:#bf811b; }
.exception-branch > p { font-size:11px; color:#8d7a60; line-height:1.7; margin-bottom:0; }
.depth-stage-detail { border:1px solid #d6e4ef; border-radius:8px; padding:24px; margin-top:23px; background:white; }
.depth-stage-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.depth-stage-heading > span:last-child { font-size:10px; color:#6f8597; text-align:right; }
.depth-stage-detail h4 { font-size:23px; color:#22435d; margin:12px 0 9px; }
.depth-stage-detail > p { font-size:13px; color:#60768a; line-height:1.7; margin:0 0 25px; }
.depth-stage-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.depth-stage-columns .depth-fields > div { grid-template-columns:1fr; gap:4px; padding:9px 0; }
.depth-stage-columns > div > p { font-size:12px; line-height:1.8; color:#546f86; }
.depth-rule { padding:12px 14px; margin-top:17px; background:#eff6fc; border-radius:6px; }
.depth-rule strong { font-size:11px; color:#346284; }
.depth-rule p { font-size:11px; line-height:1.8; color:#5d7890; margin:6px 0 0; }
.case-id { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:20px; }
.case-id .depth-eyebrow { font-size:9px; max-width:120px; }
.case-id > strong { font-size:14px; color:#274b69; font-variant-numeric:tabular-nums; }
.case-state { display:flex; align-items:center; gap:8px; padding:12px; border-radius:6px; background:#eff5fb; color:#376083; font-size:12px; font-weight:600; }
.case-state.is-blocked { background:#fff4df; color:#926223; }
.case-state.is-ready { background:#eaf6ef; color:#297451; }
.case-state-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.document-checklist { border-top:1px solid #e4edf4; padding-top:18px; margin-top:23px; }
.document-checklist > div { display:flex; align-items:center; gap:7px; font-size:11px; color:#435f76; padding:10px 0; }
.document-checklist small { margin-left:auto; font-size:9px; color:#7b8f9f; }
.doc-ok { color:#39976d; }.doc-missing { color:#b77c20; }
.case-gate { padding:14px; border:1px solid #cfe4d9; background:#f5faf7; border-radius:6px; margin-top:17px; }
.case-gate.is-blocked { background:#fffcf4; border-color:#ead6b1; }
.case-gate strong { color:#4d6959; font-size:12px; }.case-gate.is-blocked strong { color:#94713b; }
.case-gate p { font-size:11px; line-height:1.7; color:#728375; margin:7px 0 0; }
.case-gate.is-blocked p { color:#927f62; }
.case-controls { padding-top:10px; }
.case-journal { margin-top:15px; padding-top:17px; border-top:1px solid #dfe9f1; }
.case-journal summary { font-size:12px; color:#335671; cursor:pointer; min-height:32px; }
.case-journal summary span { float:right; color:#8097a9; }
.case-journal ol { margin:10px 0 0; padding:0; list-style:none; }
.case-journal li { border-left:1px solid #cddfec; margin-left:4px; padding:0 0 18px 16px; position:relative; }
.case-journal li:before { content:''; position:absolute; width:5px; height:5px; left:-3px; top:3px; background:#76a7cf; border-radius:50%; }
.case-journal li:last-child { padding-bottom:0; }
.case-journal small { display:block; color:#8aa0b2; font-size:9px; margin-bottom:5px; }
.case-journal strong { display:block; color:#355c79; font-size:11px; }
.case-journal p { color:#71889b; font-size:10px; line-height:1.7; margin:5px 0 0; }
.depth-inspector .depth-small { font-size:10px; color:#8196a8; line-height:1.7; margin:21px 0 0; }
.handoff-hit { fill:none; stroke:transparent; stroke-width:28px; pointer-events:stroke; cursor:pointer; }
.portal-explorer .handoff-map-button { position:absolute; left:679px; top:331px; z-index:2; width:150px; min-height:36px; padding:5px 4px; border:1px solid #d8be97; border-radius:6px; background:#fff9ed; color:#96723d; font-size:12px; cursor:pointer; }
.network-node.has-depth { border-bottom:3px solid #64a1d8; }
.network-node.has-depth:after { content:'+'; position:absolute; top:6px; right:8px; color:#337ab8; font-size:13px; }
.portal-explorer.is-expanded .depth-panel { scroll-margin-top:0; }
.portal-explorer .depth-static-note,.portal-explorer .depth-board-note,.portal-explorer .depth-stage-number,.portal-explorer .depth-stage-legend,
.portal-explorer .depth-stage small,.portal-explorer .exception-branch-title > span:last-child,.portal-explorer .exception-branch li,
.portal-explorer .exception-branch > p,.portal-explorer .document-checklist small,.portal-explorer .case-journal small,
.portal-explorer .case-journal p,.portal-explorer .depth-inspector .depth-small { color:#53697d; }
.portal-explorer .exception-branch li { color:#635846; }
.portal-explorer .exception-branch-title > span:last-child,.portal-explorer .exception-branch > p { color:#635846; }
.depth-panel button:focus-visible,.depth-entry button:focus-visible,.handoff-map-button:focus-visible { outline:3px solid #3c8ddb; outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .depth-button:hover,.depth-entry-actions button:hover { border-color:#70a3d3; background:#edf5fc; }
  .depth-button.depth-primary:hover,.depth-entry-actions button:first-child:hover { background:#0958c5; color:white; }
  .depth-stage:hover { border-color:#79a9d5; background:#f1f7fd; }
  .handoff-map-button:hover { border-color:#b68846; background:#fff0d4; }
}
@media (max-width:1100px) {
  .depth-entry { align-items:flex-start; }.depth-entry-actions { max-width:320px; }
  .depth-layout { grid-template-columns:minmax(0,1fr) 290px; }
  .depth-board { padding:20px; }.depth-inspector { padding:23px 19px; }
  .department-processes { grid-template-columns:1fr; }
  .department-process { display:grid; grid-template-columns:1fr auto; gap:5px 15px; padding:16px; }
  .department-process h4 { grid-column:1; margin:5px 0; }.department-process p { grid-column:1; margin:0; }
  .department-process .depth-button,.department-process .depth-static-note { grid-column:2; grid-row:1/4; align-self:center; margin:0; max-width:125px; }
  .depth-stages { gap:8px; }.depth-stage { padding:13px 10px; }.depth-stage strong { font-size:13px; }
  .depth-stage-columns { grid-template-columns:1fr; }.handoff-endpoints { grid-template-columns:1fr; gap:9px; }.handoff-direction { transform:rotate(90deg); }
}
@media (max-width:760px) {
  .depth-entry { display:block; padding:20px 16px; }.depth-entry-actions { justify-content:flex-start; max-width:none; margin-top:18px; }
  .depth-entry-actions button { flex:1 1 130px; font-size:12px; }.depth-entry-actions button:last-child { flex-basis:100%; }
  .depth-breadcrumb { padding:9px 12px; gap:4px; font-size:10px; }.depth-breadcrumb .depth-button { font-size:10px; }
  .depth-heading { padding:22px 18px; display:block; }.depth-heading h3 { font-size:26px; }.depth-heading p { font-size:13px; }
  .depth-model-label { display:inline-block; margin-top:15px; }
  .depth-layout { display:flex; flex-direction:column; }.depth-board { padding:18px 14px; }.depth-inspector { border-left:0; border-top:1px solid #dce7ef; padding:24px 20px; }
  .department-inlet { padding:18px; }.department-inlet strong { font-size:18px; }
  .department-process { display:flex; }.department-process .depth-button { max-width:none; align-self:stretch; margin-top:12px; text-align:center; }
  .department-process .depth-static-note { align-self:flex-start; margin-top:8px; }
  .department-outlet { gap:12px; font-size:10px; }
  .depth-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }.depth-stage { min-height:138px; }.depth-stage strong { font-size:14px; }
  .depth-funnel-context { align-items:flex-start; font-size:10px; }.depth-funnel-context .depth-button { font-size:11px; flex-shrink:0; padding-top:0; min-height:32px; }
  .exception-branch { padding:16px; }.exception-branch ol { flex-direction:column; gap:0; }
  .exception-branch li { border-top:0; border-left:2px solid #e4d8c7; padding:8px 12px; display:flex; gap:12px; font-size:12px; }
  .exception-branch li > span { margin:2px 0 0; }.exception-branch li.is-current { background:#fff0d2; }
  .depth-stage-detail { padding:19px 17px; }.depth-stage-heading { align-items:flex-start; }
  .depth-stage-detail > p { font-size:13px; }.depth-stage-columns .depth-fields > div { grid-template-columns:100px 1fr; }
  .depth-stage-columns { gap:18px; }.handoff-packet { padding:19px; }.handoff-packet .depth-fields > div { grid-template-columns:1fr; gap:4px; }
  .case-inspector { order:-1; border-bottom:1px solid #dce7ef; }
  .case-journal ol { max-height:230px; overflow:auto; }
  .depth-inspector .depth-fields > div { grid-template-columns:110px 1fr; }
  .depth-inspector .depth-small { font-size:11px; }
  .document-checklist > div,.case-journal strong { font-size:12px; }
  .case-journal p { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .depth-button,.depth-stage,.depth-entry-actions button { transition:none; }
}