/* =========================================================================
   Drawing Risk Intelligence page  (/solutions/drawing-risk-intelligence)
   Loaded after styles.min.css + styles-refresh.css. Page-scoped (.dr-*).
   Pattern: one capability per block — product visual + 3 benefit bullets.
   ========================================================================= */

.dr-hero .hero-content { max-width: 880px; margin: 0 auto; text-align: center; }
.dr-hero .hero-subtitle { margin-left: auto; margin-right: auto; max-width: 720px; }
.dr-hero .hero-cta { justify-content: center; }
.dr-hero .btn-secondary { border-color: var(--color-navy); color: var(--color-navy); }
.dr-hero .btn-secondary:hover { background: rgba(38,37,30,.06); }

/* ---- Product stage (dark panel holding a live-looking app window) -------- */
.dr-stage-wrap { padding: 0 0 4.5rem; background: var(--color-white); }
.dr-stage {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-700) 70%, var(--color-navy-600) 100%);
  border-radius: 20px; padding: clamp(1rem, 3vw, 2.5rem); position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.dr-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 85% 0%, rgba(241,86,43,.16), transparent 60%); }
.dr-window { position: relative; z-index: 1; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.dr-window-bar { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-hairline); background: #FAFAF8; }
.dr-dots { display: flex; gap: 6px; }
.dr-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e3e1da; display: block; }
.dr-window-title { font-family: var(--font-mono); font-size: .78rem; color: var(--color-gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-window-tag { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-gray-500); white-space: nowrap; }

.dr-app { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); min-height: 440px; }
.dr-sheet { position: relative; background: #fff; border-right: 1px solid var(--color-hairline); padding: 1rem; }
.dr-sheet svg { width: 100%; height: auto; display: block; }
.dr-side { padding: 1.25rem 1.25rem 1.5rem; background: #FCFCFA; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dr-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-gray-500); margin: 0 0 .45rem; }
.dr-summary { font-size: .9rem; line-height: 1.6; color: var(--color-gray-700); margin: 0;
  border-left: 3px solid var(--color-accent); padding-left: .8rem; }

/* Risk flags list (linked to drawing markers) */
.dr-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.dr-flag { display: grid; grid-template-columns: 26px 1fr; gap: .65rem; align-items: start; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--color-hairline); border-radius: 10px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.dr-flag:hover, .dr-flag.is-active { border-color: rgba(241,86,43,.55); box-shadow: 0 6px 16px rgba(241,86,43,.12); }
.dr-flag.is-active { transform: translateX(-3px); }
.dr-flag-num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: #fff;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.dr-flag-title { font-weight: 600; font-size: .88rem; color: var(--color-black); margin: 0 0 .15rem; line-height: 1.35; }
.dr-flag-meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.dr-chip { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; padding: .15rem .45rem;
  border-radius: 999px; background: #F2F1EC; color: var(--color-gray-700); white-space: nowrap; }
.dr-chip.high { background: #FDE8E1; color: #B53A14; }
.dr-chip.med  { background: #FFF4D6; color: #8A6100; }
.dr-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Drawing markers */
.dr-marker { cursor: pointer; }
.dr-marker circle.ring { fill: rgba(241,86,43,.16); stroke: none; transform-box: fill-box; transform-origin: center;
  animation: dr-pulse 2.4s ease-out infinite; }
.dr-marker circle.dot { fill: var(--color-accent); stroke: #fff; stroke-width: 2; }
.dr-marker text { fill: #fff; font: 600 11px var(--font-mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dr-zone { fill: rgba(241,86,43,.0); stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .35;
  transition: fill .2s, opacity .2s; }
.dr-zone.is-active { fill: rgba(241,86,43,.10); opacity: 1; }
@keyframes dr-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.dr-caption { position: relative; z-index: 1; text-align: center; margin: 1.1rem 0 0; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---- Capability blocks ---------------------------------------------------- */
.dr-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dr-block.reverse .dr-block-copy { order: 2; }
.dr-block-copy .eyebrow { margin-bottom: .6rem; }
.dr-block-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; color: var(--color-black); margin: 0 0 .8rem; }
.dr-block-lede { color: var(--color-gray-600); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.6rem; }
.dr-points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.dr-points li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; align-items: start; }
.dr-point-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent-100); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.dr-points h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--color-black); margin: .1rem 0 .2rem; }
.dr-points p { color: var(--color-gray-600); line-height: 1.6; margin: 0; font-size: .95rem; }
.dr-link { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.dr-link span { display: inline-block; transition: transform .2s var(--ease); }
.dr-link:hover span { transform: translateX(4px); }

.dr-visual { background: #fff; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 1.25rem; min-width: 0; }
.dr-visual-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.dr-visual-head .dr-label { margin: 0; }

/* Sheet index table (Drawing Analysis visual) */
.dr-sheet-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--color-hairline); }
.dr-sheet-id { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--color-black); }
.dr-sheet-name { font-size: .88rem; color: var(--color-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sheet-row .dr-tags { justify-content: flex-end; }
.dr-risk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Risk category bars (Risk Flags visual) */
.dr-bars { display: flex; flex-direction: column; gap: .7rem; }
.dr-bar { display: grid; grid-template-columns: 110px 1fr 32px; gap: .8rem; align-items: center; font-size: .88rem; }
.dr-bar-name { color: var(--color-gray-700); }
.dr-bar-track { height: 10px; background: #F2F1EC; border-radius: 999px; overflow: hidden; }
.dr-bar-fill { height: 100%; background: var(--color-accent); border-radius: 999px; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.dr-bar:nth-child(n+4) .dr-bar-fill { background: #F59A7A; }
.dr-bar-count { font-family: var(--font-mono); font-size: .82rem; color: var(--color-black); text-align: right; }
.dr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--color-hairline); }
.dr-kpi-fig { font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; color: var(--color-black); line-height: 1.1; }
.dr-kpi-cap { font-size: .78rem; color: var(--color-gray-500); }

/* Revision diff visual */
.dr-diff { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dr-diff-col { border: 1px solid var(--color-hairline); border-radius: 10px; padding: .6rem; background: #FCFCFA; }
.dr-diff-col svg { width: 100%; height: auto; display: block; }
.dr-impact { margin-top: .9rem; display: flex; flex-direction: column; gap: .45rem; }
.dr-impact-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .45rem .6rem;
  border-radius: 8px; background: #F7F6F2; }
.dr-impact-row b { font-family: var(--font-mono); font-weight: 600; color: var(--color-black); white-space: nowrap; }

/* ---- Context graph --------------------------------------------------------- */
.dr-graph-section .section-subtitle { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.dr-graph { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; background: #fff;
  border: 1px solid var(--color-hairline); border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.dr-graph-canvas { position: relative; padding: 1rem; background:
  radial-gradient(circle at 1px 1px, #e9e7e0 1px, transparent 0) 0 0 / 22px 22px, #FCFCFA; }
.dr-graph-canvas svg { width: 100%; height: auto; display: block; }
.dr-edge { stroke: #d9d6cc; stroke-width: 1.5; fill: none; transition: stroke .25s, stroke-width .25s, opacity .25s; }
.dr-edge.is-on { stroke: var(--color-accent); stroke-width: 2.5; }
.dr-edge.is-dim { opacity: .35; }
.dr-edge-label { font: 500 9.5px var(--font-mono); fill: var(--color-gray-500); text-anchor: middle; opacity: 0; transition: opacity .25s; }
.dr-edge-label.is-on { opacity: 1; fill: var(--color-accent-600); }
.dr-node { cursor: pointer; }
.dr-node rect { fill: #fff; stroke: #d9d6cc; stroke-width: 1.5; transition: stroke .25s, fill .25s; }
.dr-node .kind { font: 500 8.5px var(--font-mono); letter-spacing: .1em; fill: var(--color-gray-500); text-transform: uppercase; }
.dr-node .name { font: 600 12px var(--font-display); fill: var(--color-black); }
.dr-node .glyph { font: 900 13px "Font Awesome 6 Free"; fill: var(--color-accent); }
.dr-node.is-on rect { stroke: var(--color-accent); fill: var(--color-accent-100); }
.dr-node.is-dim { opacity: .45; }
.dr-node.is-root rect { stroke: var(--color-accent); stroke-width: 2; }
.dr-node:focus { outline: none; }
.dr-node:focus-visible rect { stroke: var(--color-accent); stroke-width: 3; }
.dr-graph-panel { padding: 1.5rem; border-left: 1px solid var(--color-hairline); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dr-graph-kind { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.dr-graph-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-black); margin: 0; letter-spacing: -.02em; }
.dr-graph-desc { color: var(--color-gray-600); line-height: 1.65; font-size: .95rem; margin: 0; }
.dr-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-hairline); }
.dr-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-hairline); font-size: .86rem; }
.dr-facts li span:first-child { color: var(--color-gray-500); }
.dr-facts li span:last-child { font-family: var(--font-mono); color: var(--color-black); text-align: right; }
.dr-trace-btn { align-self: flex-start; margin-top: auto; font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  border: 1.5px solid var(--color-navy); color: var(--color-navy); background: transparent; border-radius: 10px;
  padding: .6rem 1rem; cursor: pointer; transition: background .2s, color .2s; }
.dr-trace-btn:hover { background: var(--color-navy); color: #fff; }
.dr-graph-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.dr-graph-foot h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--color-black); margin: 0 0 .3rem; }
.dr-graph-foot p { color: var(--color-gray-600); line-height: 1.6; margin: 0; font-size: .95rem; }
.dr-graph-foot i { color: var(--color-accent); margin-right: .4rem; }

/* ---- Ask with citations (chat visual) ------------------------------------- */
.dr-chat { display: flex; flex-direction: column; gap: .8rem; }
.dr-msg { max-width: 92%; padding: .8rem 1rem; border-radius: 14px; font-size: .92rem; line-height: 1.6; }
.dr-msg.q { align-self: flex-end; background: var(--color-navy); color: #fff; border-bottom-right-radius: 4px; }
.dr-msg.a { align-self: flex-start; background: #F7F6F2; color: var(--color-gray-800); border-bottom-left-radius: 4px; }
.dr-msg.a ol { margin: .4rem 0 0; padding-left: 1.1rem; }
.dr-msg.a li { margin-bottom: .3rem; }
.dr-cite { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .7rem; padding: .1rem .45rem;
  border-radius: 6px; background: #fff; border: 1px solid var(--color-hairline); color: var(--color-accent-600); white-space: nowrap; vertical-align: 1px; }

/* ---- Flag -> action flow ---------------------------------------------------- */
.dr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: step; }
.dr-step { background: #fff; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 1.4rem;
  position: relative; box-shadow: var(--shadow-sm); }
.dr-step:not(:last-child)::after { content: "\f054"; font: 900 .8rem "Font Awesome 6 Free"; color: var(--color-accent);
  position: absolute; right: -.85rem; top: 50%; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--color-canvas); display: flex; align-items: center; justify-content: center; z-index: 1; }
.dr-step-num { font-family: var(--font-mono); font-size: .72rem; color: var(--color-accent); letter-spacing: .1em; }
.dr-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--color-black); margin: .4rem 0 .35rem; }
.dr-step p { color: var(--color-gray-600); font-size: .92rem; line-height: 1.6; margin: 0; }

/* ---- Partner proof --------------------------------------------------------- */
.dr-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dr-proof img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-md); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .dr-app, .dr-block, .dr-graph, .dr-proof { grid-template-columns: 1fr; }
  .dr-block.reverse .dr-block-copy { order: 0; }
  .dr-sheet { border-right: 0; border-bottom: 1px solid var(--color-hairline); }
  .dr-graph-panel { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .dr-flow { grid-template-columns: 1fr 1fr; }
  .dr-step:nth-child(2)::after { display: none; }
  .dr-graph-foot { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  .dr-flow { grid-template-columns: 1fr; }
  .dr-step::after { display: none; }
  .dr-window-tag { display: none; }
  .dr-bar { grid-template-columns: 90px 1fr 28px; }
  .dr-sheet-row { grid-template-columns: 60px minmax(0, 1fr); }
  .dr-sheet-row .dr-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .dr-kpi-fig { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-marker circle.ring { animation: none; opacity: 0; }
  .dr-bar-fill { transition: none; }
}