/* 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 picture on the firm's own infrastructure (home page and security page) ----------
   The same boxes, arrows, colours and type as above. Only the placement is new.
   The frame (.seal-env) is the firm and holds the three boxes in a row. One arrow leaves the frame, from under the
   agents box, and ends in open space over its label. The company's box stands outside the frame, set apart by clear
   space. Nothing is drawn between the two.
   Every placement is written under .seal-own-grid, so each one outweighs the one-class placements above and in the later sheets. */
.seal-own-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);column-gap:72px;align-items:center}
.seal-own-grid .seal-env{grid-column:1;grid-row:1;align-items:stretch;gap:20px;padding-bottom:0}
.seal-own-grid .seal-env::before{content:none}
.seal-own-grid .seal-own-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);grid-template-rows:auto 28px}
.seal-own-grid .seal-node{margin-block:0;text-align:left}
.seal-own-grid .seal-matter{grid-column:1;grid-row:1}
.seal-own-grid .seal-a-matter{grid-column:2;grid-row:1}
.seal-own-grid .seal-system{grid-column:3;grid-row:1}
.seal-own-grid .seal-a-out{grid-column:4;grid-row:1}
.seal-own-grid .seal-out{grid-column:5;grid-row:1;justify-self:center}
/* the one arrow that leaves: a lime line from under the agents box, through the frame's edge, to a head in open space */
.seal-own-grid .seal-own-leave{grid-column:3;grid-row:2;justify-self:center;position:relative;width:16px;margin:4px 0 -30px;color:var(--lime)}
.seal-own-grid .seal-own-leave::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;border-radius:1px;background:currentColor}
.seal-own-grid .seal-own-leave::after{content:"";position:absolute;left:2px;bottom:1px;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;transform:rotate(45deg)}
.seal-own-grid .seal-own-leave-t{grid-column:1;grid-row:2;justify-self:center;max-width:22rem;margin:40px 0 0;padding:0;text-align:center}
/* outside the frame: the company's box and the caption with it */
.seal-own-grid .seal-own-outside{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px}
.seal-own-grid .seal-own-outside .seal-text{max-width:none;padding:0;text-align:left}
/* 1024 and under: the company's box moves below the frame, with a visible gap */
@media (max-width:1024px){
  .seal-own-grid{grid-template-columns:minmax(0,1fr)}
  .seal-own-grid .seal-own-outside{grid-column:1;grid-row:3;max-width:20rem;margin-top:48px}
}
/* phone and narrow tablet: the frame stacks top to bottom. The leaving arrow runs down a narrow track on the right,
   from under the agents box, past the draft, and out through the foot of the frame. */
@media (max-width:860px){
  .seal-own-grid .seal-own-row{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto 44px auto 44px auto 28px;column-gap:12px}
  .seal-own-grid .seal-matter{grid-column:1 / 3;grid-row:1}
  .seal-own-grid .seal-a-matter{grid-column:1 / 3;grid-row:2}
  .seal-own-grid .seal-system{grid-column:1 / 3;grid-row:3}
  .seal-own-grid .seal-a-out{grid-column:1;grid-row:4}
  .seal-own-grid .seal-out{grid-column:1;grid-row:5}
  .seal-own-grid .seal-own-leave{grid-column:2;grid-row:4 / 7}
  .seal-own-grid .seal-own-leave-t{justify-self:end;max-width:16rem;text-align:right}
  .seal-own-grid .seal-own-outside{max-width:none}
}

/* ---------- 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)}
}