/* Docket Entry site: the sealed-environment picture and the chain under it.
   Load after site.css. Uses only the tokens and breakpoints (1024, 860, 640) already in site.css.
   Every class is prefixed seal- or chain-, so nothing here touches an existing rule. */

/* ---------- the picture ---------- */
.seal{position:relative;margin:0;background:var(--navy-900);color:var(--on-navy);border-radius:20px;padding:40px 36px;box-shadow:0 30px 70px rgba(21,29,53,.22)}
.seal-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Wide layout: firm and system on the left, the sealed environment in the middle, the draft on the right.
   Rows 1-2 carry the "cannot see in" label and its blocked line above the middle column. Rows 3-4 carry the two inputs. */
.seal-grid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.3fr) 44px minmax(0,1fr);grid-template-rows:auto auto 1fr 1fr}

.seal-text{grid-column:3;grid-row:1;justify-self:center;max-width:22rem;margin:0;padding-bottom:12px;text-align:center;font-size:17px;line-height:1.4;font-weight:600;color:var(--on-navy-strong)}
.seal-line{grid-column:3;grid-row:2;justify-self:center;width:40px;height:44px;color:var(--on-navy-2)}
.seal-line svg{width:40px;height:44px}

.seal-node{display:flex;align-items:center;gap:12px;min-height:88px;margin-block:8px;padding:16px 18px;background:var(--navy-800);border:1.5px solid var(--on-navy-3);border-radius:12px;font-size:16px;line-height:1.3;font-weight:600;color:#fff;overflow-wrap:break-word}
.seal-ring{flex:none;width:14px;height:14px;border-radius:999px;border:2px solid currentColor}
.seal-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.seal-chips{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;line-height:1.3;font-weight:400;color:var(--on-navy-2)}
.seal-chips span{border:1px solid var(--navy-line-2);border-radius:6px;padding:4px 8px}
.seal-matter{grid-column:1;grid-row:3;border-color:var(--on-navy-strong)}
.seal-matter .seal-ring{color:var(--on-navy-strong)}
.seal-system{grid-column:1;grid-row:4;border-color:var(--lime)}
.seal-system .seal-ring{color:var(--lime)}
.seal-out{grid-column:5;grid-row:3 / 5;align-self:center;background:var(--lime);border-color:var(--lime);color:var(--navy-900)}
.seal-out svg{flex:none}

.seal-arrow{position:relative;align-self:center;height:16px}
.seal-arrow svg{position:absolute;left:50%;top:50%;width:44px;height:16px;margin:-8px 0 0 -22px}
.seal-a-matter{grid-column:2;grid-row:3;color:var(--on-navy-strong)}
.seal-a-system{grid-column:2;grid-row:4;color:var(--lime)}
.seal-a-out{grid-column:4;grid-row:3 / 5;color:var(--lime)}

/* The sealed environment: a darker, walled box. The lime wall is solid; the thin inner line is the lining. */
.seal-env{grid-column:3;grid-row:3 / 5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 24px;text-align:center;background:var(--navy-950);border:2px solid var(--lime);border-radius:16px}
.seal-env::before{content:"";position:absolute;inset:7px;border:1px solid var(--navy-line-2);border-radius:10px;pointer-events:none}
.seal-env-t{position:relative;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:#fff}
.seal-venn{position:relative;width:168px;height:84px}
.seal-venn .a{fill:none;stroke:var(--on-navy-strong);stroke-width:2}
.seal-venn .b{fill:none;stroke:var(--lime);stroke-width:2}
.seal-venn .both{fill:var(--lime)}

/* ---------- phone and narrow tablet: restack ----------
   Left column = the firm's side (matter in, draft out). Right column = Docket Entry's side
   (drafting system in, the "cannot see in" label and its blocked line pointing at the wall from outside). */
@media (max-width:860px){
  .seal{padding:28px 20px}
  .seal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;column-gap:12px}
  .seal-node{flex-direction:column;align-items:flex-start;gap:10px;min-height:0;margin-block:0;padding:14px;font-size:15px}
  .seal-matter{grid-column:1;grid-row:1}
  .seal-system{grid-column:2;grid-row:1}
  .seal-arrow{height:44px}
  .seal-arrow svg{transform:rotate(90deg)}
  .seal-a-matter{grid-column:1;grid-row:2}
  .seal-a-system{grid-column:2;grid-row:2}
  .seal-env{grid-column:1 / 3;grid-row:3;padding:24px 18px}
  .seal-a-out{grid-column:1;grid-row:4}
  .seal-line{grid-column:2;grid-row:4}
  .seal-line svg{transform:scaleY(-1)}
  .seal-out{grid-column:1;grid-row:5;align-self:stretch;align-items:flex-start}
  .seal-text{grid-column:2;grid-row:5;align-self:start;max-width:none;padding:0;font-size:15px}
}
@media (max-width:640px){
  .seal-node{font-size:14px}
  .seal-chips{font-size:12px}
  .seal-env-t{font-size:18px}
  .seal-venn{width:140px;height:70px}
  .seal-text{font-size:14px}
}

/* ---------- the chain (security page only) ----------
   Wide: seven steps in a row on a rule, one dot each, the last in lime (the same dot the site's .steps uses).
   Below 1180px: one column with the rule on the left, as .steps does. */
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:20px}
.chain li{position:relative;padding-top:22px;border-top:2px solid var(--border-sage)}
.chain li::before{content:"";position:absolute;left:0;top:-9px;width:16px;height:16px;border-radius:999px;background:var(--navy-900);box-shadow:0 0 0 4px var(--white)}
.chain li.final::before{background:var(--lime);box-shadow:0 0 0 4px var(--white),0 0 0 5px var(--olive-700)}
.chain-k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive-700)}
.chain-h{margin:4px 0 6px;font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.chain-b{margin:0;font-size:14px;line-height:1.5;color:var(--text-3)}
@media (max-width:1180px){
  .chain{grid-template-columns:minmax(0,1fr);max-width:40rem;border-left:2px solid var(--border-sage)}
  .chain li{padding:0 0 20px 36px;border-top:0}
  .chain li:last-child{padding-bottom:0}
  .chain li::before{left:-9px;top:4px}
  .chain-h{font-size:22px}
  .chain-b{font-size:17px;line-height:1.6;color:var(--text-2)}
}