/* Docket Entry law-firm site: the security page.
   Linked on security.html only, after site.css, round1.css, type-C.css, type-C-fixes.css, visible-fixes.css and header-five.css.
   Site tokens only: the six sizes, the two families, the two weights. Every class is prefixed sx-.

   PARTS: 0 header for this page  1 hero  2 the table (.sx-who)  3 folded entries (.sx-d) */

.sx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ 0. the five-item header, for this page only ============
   The same rules as assets/header-five.css. Each selector is scoped to body.sx-page inside :where(), so it reaches no
   other page and weighs no more than the plain selector. */
:where(.sx-page) .nav{gap:24px}
@media (min-width:1200px){:where(.sx-page) .nav{gap:36px}}
@media (max-width:1080px){:where(.sx-page) .nav,:where(.sx-page) .head-right .btn{display:none}:where(.sx-page) .menu-btn{display:inline-flex}}
@media (min-width:1081px){:where(.sx-page) .mobile-nav,:where(.sx-page) .mobile-nav.open{display:none}}
:where(.sx-page) .mobile-nav a[aria-current="page"]{background:var(--sage);box-shadow:inset 3px 0 0 var(--navy-900)}
:where(.sx-page) .mobile-nav .nav-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:16px var(--gutter);padding:14px 24px;border:0;border-radius:10px;
  background:var(--action);color:var(--on-action);font-weight:700;line-height:1}
:where(.sx-page) .mobile-nav .nav-cta:hover{background:var(--action-hover);color:var(--on-action)}
:where(.sx-page) .mobile-nav .nav-cta:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}

/* ============ 1. hero ============ */
.sx-hero .wrap{padding-block:44px 0}
.sx-hero .stack{max-width:48rem}
.sx-sec{scroll-margin-top:84px}

/* ============ 2. the table: the site's table, two columns. On a phone each row restacks: who, then what. ============ */
.sx-who thead th:first-child,.sx-who thead th:last-child{background:var(--stone);border-bottom:1px solid var(--border)}
.sx-who thead th:first-child,.sx-who tbody th{width:30%}
.sx-note{padding-left:20px;border-left:3px solid var(--olive-700)}
@media (max-width:640px){
  .sx-who thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sx-who tbody th{width:auto;font-size:var(--f-body)}
  .sx-who td{padding-top:0;padding-bottom:18px}
}

/* ============ 3. folded entries: the page's own details and summary, closed until opened ============ */
.sx-fold{max-width:48rem}
.sx-d{border-top:1px solid var(--border)}
.sx-d:last-of-type{border-bottom:1px solid var(--border)}
.sx-d summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-size:var(--f-body);font-weight:var(--w-em);line-height:1.4;color:var(--text)}
.sx-d summary::-webkit-details-marker{display:none}
.sx-d summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg) translateY(-3px)}
.sx-d[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.sx-d summary:hover{color:var(--olive-700)}
.sx-d summary:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:4px}
.sx-d p{margin:0 0 20px;max-width:var(--measure);font-size:var(--f-body);line-height:1.6;color:var(--text-2)}