/* CRM360 — shared site styles.
   Page layout is mostly inline styles carried over from the Claude Design export;
   this file holds the base reset, responsive rules and hover/focus states. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}
body{margin:0;background:#FFFFFF;color:#1E293B;font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
a{color:#0B6FA4}
a:hover{color:#1E293B}
:focus-visible{outline:3px solid #00A1E0;outline-offset:3px}
[id]{scroll-margin-top:88px}
[hidden]{display:none!important}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] > summary [data-plus]{transform:rotate(45deg)}

/* ---- Responsive layout values (replace the runtime's width checks) ---- */
:root{
  --ledgerCols:40px minmax(0,1fr);
  --c2:2;
  --engCols:minmax(0,1fr);
  --mCols:40px minmax(0,1fr);
  --layerCols:minmax(0,1fr);
  --baCols:minmax(0,1fr);
  --capCols:minmax(0,1fr);
}
@media (min-width:900px){
  :root{
    --ledgerCols:72px minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.1fr);
    --c2:auto;
    --engCols:minmax(0,1fr) auto;
    --mCols:56px 180px minmax(0,1.4fr) minmax(0,1fr);
    --layerCols:190px minmax(0,1fr);
    --baCols:minmax(0,1fr) 44px minmax(0,1fr);
    --capCols:200px minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width:899.98px){.only-wide{display:none!important}}
@media (min-width:900px){.only-narrow{display:none!important}}

/* ---- Header: full nav at 1120px+, menu button below ---- */
@media (max-width:1119.98px){.hdr-wide{display:none!important}}
@media (min-width:1120px){.hdr-narrow{display:none!important}}

/* ---- Workflow examples ---- */
.wf-panel{display:flex}
.wf-flow{display:flex;flex-direction:column}
.wf-step{display:flex;flex-direction:column;flex:0 0 auto;min-width:0}
.wf-arrow{width:100%;height:26px}
.wf-wide{display:none}
@media (min-width:1100px){
  .wf-flow,.wf-step{flex-direction:row}
  .wf-step{flex:1 1 0}
  .wf-arrow{width:22px;height:auto}
  .wf-wide{display:inline}
  .wf-narrow{display:none}
}
.wf-tab:focus-visible{outline:3px solid #00A1E0;outline-offset:2px}

/* ---- Hover / focus states ---- */
.f1:focus,.f1:focus-visible{left:12px !important}
.h2:hover{color:#0B6FA4 !important}
.h3:hover{color:#047F80 !important}
.h4:hover{background:#334155 !important}
.h5:hover{background:#F1F5F9 !important;color:#1E293B !important}
.h6:hover{background:#334155 !important;color:#FFFFFF !important}
.h7:hover{background:#E6FAFA !important;color:#1E293B !important}
.h8:hover{background:#263449 !important;color:#FFFFFF !important}
.h9:hover{color:#7DD3FC !important}
.h10:hover{background:#F0F9FF !important;color:#1E293B !important}
.h11:hover{background:#38BDF8 !important;color:#0F172A !important}
.h12:hover{color:#1E293B !important}
.f13:focus,.f13:focus-visible{border-color:#00A1E0 !important;outline:none !important;box-shadow:0 0 0 3px rgba(0,161,224,0.3) !important}
.f14:focus,.f14:focus-visible{outline:3px solid #00A1E0 !important;outline-offset:3px !important}

/* ---- Site assistant ---- */
.sa-hd:hover{color:#FFFFFF!important;background:#334155!important}
.sa-send:hover{background:#0B6FA4!important}
.sa-chip:hover{border-color:#00A1E0!important;color:#0B6FA4!important}
.sa-link:hover{color:#1E293B!important;text-decoration:underline!important}
.sa-launch:hover{background:#0B6FA4!important;color:#FFFFFF!important;border-color:#0B6FA4!important}