/* CT 301 - shared site style (responsive + accessible) */
:root{
  --navy:#13294b; --navy-2:#1c3a68;
  --link:#12448c;            /* 7.3:1 on white */
  --line:#dfe3e8; --bg:#f5f6f8; --ink:#15181c;
  --mut:#5a6270;             /* 5.6:1 on white */
  --shell: min(1680px, 100% - 3rem);
  --fs: clamp(17.5px, 0.45vw + 16px, 20.5px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs)/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:break-word}
/* keyboard focus, visible everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #ffb44d; outline-offset:2px; border-radius:3px}
/* skip link */
.ct-skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);
  padding:12px 18px;z-index:200;font-weight:700;border-radius:0 0 8px 0}
.ct-skip:focus{left:0}
/* top bar */
.ct-nav{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ct-nav-in{width:var(--shell);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:2px 6px;padding:8px 0}
.ct-brand{font-weight:700;font-size:.94em;color:#fff;text-decoration:none;
  padding:8px 10px 8px 0;margin-right:auto;white-space:nowrap}
.ct-brand span{font-weight:400;color:#b9c6dc}
.ct-nav a.ct-link{color:#e2e9f4;text-decoration:none;font-size:.86em;
  padding:10px 11px;border-radius:6px;line-height:1.2;min-height:44px;display:inline-flex;align-items:center}
.ct-nav a.ct-link:hover,.ct-nav a.ct-link:focus-visible{background:#26436f;color:#fff}
/* breadcrumb */
.ct-crumb{width:var(--shell);margin:0 auto;padding:12px 0 0;font-size:.86em;color:var(--mut)}
.ct-crumb a{color:var(--link)}
/* content shell */
.ct-body{width:var(--shell);margin:14px auto 44px;padding:clamp(18px,2.4vw,34px);
  background:#fff;border:1px solid var(--line);border-radius:12px}
.ct-body img,.ct-body svg,.ct-body video,.ct-body iframe{max-width:100%;height:auto}
.ct-body pre{overflow-x:auto;background:#f4f5f7;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font-size:.92em}
.ct-body code{font-size:.94em}
.ct-body table{width:100%;max-width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.ct-body a{color:var(--link)}
.ct-body h1,.ct-body h2,.ct-body h3{line-height:1.3}
.ct-body ul,.ct-body ol{padding-left:1.4em}
/* screen-reader-only (gives each page a real h1 without changing the visual design) */
.ct-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* footer */
.ct-foot{width:var(--shell);margin:0 auto;padding:0 0 44px;color:var(--mut);font-size:.86em}
.ct-foot a{color:var(--link)}
/* Canvas exports build grids from inline display:table on plain divs, which refuse to
   shrink and push the page wider than the phone viewport. Stack them on narrow screens.
   Order matters: the cell rule is last so it wins (the selectors overlap by substring). */
@media(max-width:760px){
  .ct-body [style*="display: table"],.ct-body [style*="display:table"],
  .ct-body [style*="display: table-row"],.ct-body [style*="display:table-row"]{
    display:block !important; width:100% !important}
  .ct-body [style*="display: table-cell"],.ct-body [style*="display:table-cell"]{
    display:block !important; width:auto !important}
}
/* nothing may exceed the shell */
.ct-body>*{max-width:100%}
html,body{overflow-x:clip}
/* phones */
@media(max-width:700px){
  :root{--shell:min(1680px, 100% - 1.1rem)}
  .ct-body{margin:10px auto 28px;border-radius:10px}
  .ct-nav-in{gap:0 2px}
  .ct-brand{width:100%;margin-right:0;padding-bottom:2px;white-space:normal}
  .ct-nav a.ct-link{font-size:.86em;padding:9px 10px}
}