/* DICA site — shared layer applied over each page's own styles. */

/* overflow-x:hidden would break position:sticky on the Standard index;
   overflow:clip contains the same overflow without creating a scroll container */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip}
.pg{width:100% !important;max-width:1440px;margin:0 auto}
img{max-width:100%;height:auto}

/* links inherit the design; only give them a focus state and sane defaults */
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid #C6772F;outline-offset:2px}
nav a{color:inherit}
nav a:hover{color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:#12303A;color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}

/* wide content scrolls in its own box, never the page.
   grid and flex children default to min-width:auto and refuse to shrink below
   their content — which is what pushes a wide table out through the page. */
.grid>*,.wrap>*,.mid>*,.fgrid>*,.two>*,.cols>*,.rel>*,.proof>*,
.left,.right,.rail,article,aside,main,.pg,.in,.tw{min-width:0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tw>table{min-width:520px}

/* every horizontal row of items must be allowed to wrap */
nav,footer,footer .in,.strip .in,.vsel,.dh,.acts,.facts,.runline,.flagline,
.mast,.bar .in,.util,.meta,.split,.rechead,.risk{flex-wrap:wrap}

/* clause anchors clear the top of the viewport */
[id^="A"]{scroll-margin-top:24px}

/* ---------- tablet ---------- */
@media (max-width:1120px){
  .grid,.wrap,.mid,.claim,.fgrid,.rel,.proof,.obj,.cols,.two{
    grid-template-columns:1fr !important}
  .head{grid-template-columns:1fr !important}
  .chain{grid-template-columns:1fr !important;gap:20px !important}
  .arw{display:none !important}
  .right{position:static !important;border-left:0 !important;
         border-top:1px solid var(--line)}
  aside{position:static !important;border-right:0 !important;
        border-bottom:1px solid var(--line)}
  .rail{border-left:0 !important;border-top:1px solid var(--line)}
  .doors,.four,.srow,.no,.three{grid-template-columns:repeat(2,1fr) !important}
  .steps{grid-template-columns:repeat(3,1fr) !important}
  .band{grid-template-columns:1fr !important;gap:24px !important}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .doors,.four,.srow,.no,.three,.steps,.facts{grid-template-columns:1fr !important}
  .facts{display:grid !important;gap:18px}
  .fact{padding-right:0 !important}
  .mast,.bar .in{flex-wrap:wrap;gap:14px !important}
  nav{margin-left:0 !important;width:100%;flex-wrap:wrap;gap:12px 18px !important;
      font-size:13px !important}
  .util{flex-wrap:wrap;gap:6px}
  .strip .in,.strip{margin-left:0 !important;margin-right:0 !important}
  h1{font-size:clamp(28px,7vw,44px) !important;line-height:1.16 !important}
  h2{font-size:clamp(22px,5.4vw,30px) !important}
  .res .big{font-size:38px !important}
  .pane .n{font-size:32px !important}

  /* horizontal padding: pull every band in to a phone gutter */
  .util,.mast,.head,.hero,.sec,.steps,.mid,.wrap,.doors,.claim,.foot,.frame,
  .play,.dq,.close,.band,.cost,.cta,.strip,.in,.left,.right,.rail,article,aside,
  footer,.form,.warn{
    padding-left:20px !important;padding-right:20px !important}
  .strip,.band,.cost,.cta,.close,.dq{margin-left:0 !important;margin-right:0 !important}
  article{max-width:100% !important}
  /* the version selector on the Standard page is the one fixed-width flex row */
  .vsel{width:100% !important;margin-left:0 !important;gap:8px !important}
  .sel{min-width:0 !important;width:100%}
  .vsel .btn,.vsel .btn.g{flex:1;text-align:center}
  .risk{grid-template-columns:1fr !important}
  .risk .val{text-align:left !important}
}

/* print: the Standard and Limitations pages are read on paper by counsel */
@media print{
  .util,nav,.skip{display:none !important}
  .pg{max-width:100% !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
}

/* the Standard's section index */
aside{align-self:start;position:sticky;top:0;max-height:100vh;overflow-y:auto}
aside li a{display:block;color:inherit;text-decoration:none}
aside li.live{cursor:pointer}
aside li.live:hover{background:#F4F1EA;color:#12303A}
aside li.soon{color:#9AA7AC}
aside li.soon::after{content:"forthcoming";float:right;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#B9C4C7;padding-top:3px}
aside .idxnote{font-size:12px;line-height:1.5;color:#7A8A90;background:#F4F1EA;
  padding:10px 12px;margin-bottom:14px;border-left:2px solid #C6772F}
@media (max-width:1120px){aside{position:static;max-height:none;overflow-y:visible}}

/* footer and rail links */
footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:#E7E1D6;border-bottom-color:#5B7078}
.copy,.btn{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;
  -webkit-appearance:none;appearance:none}
button.copy,button.btn{border:1px solid #B9C4C7;background:#fff;width:100%}
button.btn{background:#12303A;color:#fff;border-color:#12303A}
button.copy:hover{border-color:#12303A}
a.btn,a.btn.g{display:inline-block;text-decoration:none}
.meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* site-wide colophon */
.colophon{background:#0B1F27;color:#8FA6AD;font-size:12px;line-height:1.6;
  padding:14px 20px;text-align:center;font-family:var(--sans, "Public Sans",Helvetica,Arial,sans-serif)}
.colophon a{color:#C3D0D4;text-decoration:underline;text-underline-offset:2px}
.colophon a:hover{color:#fff}
.colophon .sep{color:#3A5460;padding:0 6px}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}