/* Sylo, Control at the boundary (builder B8): a finished line diagram on paper; connectors drawn by sy-gate.js between the HTML chips.
   Tokens and the six type roles only. Vermilion: the one request, and what it passes. */

.sy-gt-h{margin-bottom:clamp(36px,4vw,60px)}
.sy-bd{margin:0}
.sy-stage{position:relative;width:100%;aspect-ratio:1328 / 600}
.sy-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.sy-stage [data-n]{position:absolute}

/* places (desktop) */
.sy-box{left:0;top:12%;width:26%;height:40%}
.sy-c-agent{left:13%;top:32%;transform:translate(-50%,-50%)}
.sy-t-out{left:13%;top:39.5%;transform:translateX(-50%)}
.sy-c-policy{left:38%;top:32%;transform:translate(-50%,-50%)}
.sy-rules{left:38%;top:39.5%;transform:translateX(-50%)}
.sy-key{left:51%;top:62%;transform:translate(-50%,-50%)}
.sy-rt-key{left:51%;top:68.5%;transform:translateX(-50%)}
.sy-t-key{left:51%;top:73.5%;transform:translateX(-50%)}
/* client (the chosen diagram): Approved service merged with the record below it, one window; the record a terminal window */
.sy-svclog{left:63%;top:32%;width:37%;transform:translateY(-17px)}
.sy-stage .sy-svclog [data-n]{position:relative}

/* the parts' own words */
.sy-rt{font:600 var(--s-body)/1.25 var(--f);color:var(--ink);white-space:nowrap}
.sy-term{font:500 var(--s-small)/1.3 var(--f);color:var(--ink2);white-space:nowrap}
.sy-rules{margin:0;padding:10px 14px 10px 12px;list-style:none;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(14,15,15,.12),0 12px 28px rgba(14,15,15,.08);white-space:nowrap}
.sy-rules li{display:flex;align-items:center;gap:9px;white-space:nowrap;font:500 var(--s-small)/1.7 var(--f);color:var(--ink)}
.sy-rules li::before{content:'';width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.4px rgba(14,15,15,.5);transition:background-color .25s,box-shadow .25s}
.sy-rules.on li::before{background:var(--verm);box-shadow:none}
.sy-rules.on li+li::before{transition-delay:.12s}
.sy-g-svc{width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.6px currentColor;background:linear-gradient(currentColor,currentColor) 3px 4px / 8px 1.4px no-repeat,linear-gradient(currentColor,currentColor) 3px 8px / 8px 1.4px no-repeat}

/* the sandbox: a dashed enclosure */
.sy-box{border:1.5px dashed rgba(14,15,15,.42);border-radius:22px;background:rgba(14,15,15,.025)}
.sy-box-t{position:absolute;left:20px;top:16px;font:500 var(--s-small)/1.3 var(--f);color:var(--ink2)}

/* chips: interface fragments on paper */
.sy-chip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 16px;border-radius:14px;font:var(--w-h3) var(--s-lede)/1.2 var(--f);letter-spacing:-.012em;color:var(--ink);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(14,15,15,.12),0 18px 40px rgba(14,15,15,.1);transition:box-shadow .3s var(--ease)}
.sy-chip.on{box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 40px rgba(14,15,15,.12)}
.sy-chip.cur{box-shadow:inset 0 0 0 1.5px var(--verm),0 18px 40px rgba(226,70,42,.18)}
.sy-key{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 14px;border-radius:12px;font:400 var(--s-body)/1.2 var(--f);color:var(--ink);
  background:#fff;box-shadow:inset 0 0 0 1px rgba(14,15,15,.14),0 12px 30px rgba(14,15,15,.08);transition:box-shadow .3s var(--ease)}
.sy-key.on{box-shadow:inset 0 0 0 1.5px var(--ink),0 12px 30px rgba(14,15,15,.12)}
.sy-mask{display:inline-block;width:58px;height:8px;background:radial-gradient(circle,rgba(14,15,15,.75) 2.3px,transparent 2.8px) 0 50% / 9.5px 8px repeat-x}
.sy-ride{left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink),0 8px 18px rgba(14,15,15,.14);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(var(--x0,0),var(--y0,0));transition:transform .42s var(--ease-io),opacity .2s}
.sy-ride .sy-g-key{transform:scale(.8)}

/* glyphs, drawn (no characters) */
.sy-g{display:inline-block;flex:none;position:relative}
.sy-g-agent{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.6px currentColor;background:radial-gradient(circle,currentColor 2.2px,transparent 2.6px)}
.sy-g-policy{width:12px;height:15px;border-radius:2px 2px 7px 7px;box-shadow:inset 0 0 0 1.6px currentColor}
.sy-g-tick{width:12px;height:7px;margin:0 2px 4px 2px;border-left:2.4px solid var(--verm);border-bottom:2.4px solid var(--verm);transform:rotate(-45deg);opacity:0;transition:opacity .25s}
.sy-c-svc.on .sy-g-tick{opacity:1}
.sy-g-key{width:18px;height:10px;color:var(--ink);background:linear-gradient(currentColor,currentColor) 7px 4px / 11px 2px no-repeat,linear-gradient(currentColor,currentColor) 14px 5px / 2px 4px no-repeat,linear-gradient(currentColor,currentColor) 17px 5px / 1.5px 3px no-repeat}
.sy-g-key::before{content:'';position:absolute;left:0;top:1px;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor}

/* the connectors */
.sy-wall{fill:url(#sy-hatch);stroke:none}
.sy-wl{stroke:var(--ink);stroke-width:1.4;fill:none}
.sy-req{fill:none;stroke:var(--verm);stroke-width:2.2;stroke-linecap:round}
.sy-base{fill:none;stroke:rgba(14,15,15,.22);stroke-width:1.2}
.sy-cred{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 4;stroke-linecap:round}
.sy-tap{fill:none;stroke:rgba(14,15,15,.5);stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.sy-jn{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.sy-tapdot{fill:rgba(14,15,15,.7)}

/* the access log: terminal style, Mona Sans */
/* client r18 "make it a real terminal window": one terminal window; its title bar is Approved service (the route arrives there), its
   screen the independent record in a monospaced terminal face (a reference's word for this window over the site's no-monospace rule) */
.sy-win{border-radius:10px;overflow:hidden;background:#0d0e0e;box-shadow:0 0 0 1px rgba(14,15,15,.55),0 30px 60px rgba(14,15,15,.28);transition:box-shadow .3s var(--ease)}
.sy-svclog .sy-c-svc{position:relative;display:flex;align-items:center;justify-content:center;height:34px;padding:0 12px;background:linear-gradient(#3b3c3c,#2c2d2d);border-bottom:1px solid #000;
  font:500 13px/1 -apple-system,BlinkMacSystemFont,var(--f);letter-spacing:0;color:rgba(255,255,255,.82);white-space:nowrap}
.sy-tl3{position:absolute;left:12px;top:50%;display:flex;gap:8px;transform:translateY(-50%)}
.sy-tl3 i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.sy-tl3 i:nth-child(2){background:#febc2e}.sy-tl3 i:nth-child(3){background:#28c840}
.sy-svclog .sy-g-tick{position:absolute;right:14px;top:50%;margin:-6px 0 0}
.sy-svclog .sy-rt-log{display:block;margin-top:14px}
/* client r19 "actually show a record, show in comment this record is maintained outside the agent": each line an entry with its time,
   its details under it; the comment on top */
.sy-log{padding:12px 16px 14px;color:#e6e6e1;font:400 12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;letter-spacing:0}
.sy-gate .sy-log-sub{margin:0 0 6px;font:inherit;color:#7f8f7f}
.sy-log-sub span{display:block}
.sy-log-sub span::before{content:'# '}
.sy-log-lines{padding:0;margin:0;list-style:none}
.sy-log-lines li,.sy-log-lines::after{position:relative;padding-left:2ch;font:inherit;color:#e6e6e1}
.sy-log-lines li{display:grid;grid-template-columns:10ch minmax(0,1fr);margin-bottom:2px}
.sy-log-lines time{color:rgba(230,230,225,.42)}
.sy-log-lines li>span{min-width:0}
.sy-log-lines small{display:block;font:inherit;color:rgba(230,230,225,.55)}
.sy-log-lines small::before{content:'\2514 ';color:rgba(230,230,225,.3)}
.sy-log-lines li::before{content:'\203A';position:absolute;left:0;top:0;color:rgba(230,230,225,.45)}
.sy-log-lines li.new::before{color:var(--verm)}
.sy-log-lines::after{display:block;content:'$ ';padding-left:0;color:#9fd39b;
  background:linear-gradient(90deg,transparent 0 2ch,#e6e6e1 2ch 3ch,transparent 3ch) 0 50% / 100% 1.25em no-repeat}

/* the sequence (classes added once by sy-gate.js), then rest */
.js .sy-bd .sy-log-lines li{opacity:1}
.js .sy-bd .sy-log-lines li.on{opacity:1;animation:sy-flk .3s steps(1,end)}
.js .sy-bd .sy-log-lines::after{opacity:0}
.js .sy-bd.done .sy-log-lines::after{opacity:1;animation:sy-blink 1.1s steps(1,end) 3}
@keyframes sy-flk{0%{opacity:0}18%{opacity:1}36%{opacity:.2}54%{opacity:1}72%{opacity:.55}90%{opacity:1}}
@keyframes sy-blink{0%{opacity:1}50%{opacity:0}}
.js .sy-bd .sy-req{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .38s var(--ease-io)}
.js .sy-bd .sy-req.on{stroke-dashoffset:0}
.js .sy-bd .sy-cred,.js .sy-bd .sy-jn{opacity:0;transition:opacity .25s var(--ease)}
.js .sy-bd.s3 .sy-cred,.js .sy-bd.s3 .sy-jn{opacity:1}
.sy-bd.s3b .sy-ride{opacity:1}
.sy-bd.s4 .sy-ride{transform:translate(var(--x1,0),var(--y1,0))}
/* client (the chosen diagram): the barrier's words and the caption, one sentence, centred on the barrier; a red dot at the
   barrier's foot and a red line from it to the sentence (drawn by sy-gate.js; --bx is the barrier's x) */
.sy-cap{position:relative;margin-top:clamp(40px,7vh,72px);color:var(--ink)}
.sy-cap span{display:block;width:min(24em,100%);margin-left:max(0px,calc(var(--bx,38%) - min(12em,50%)));text-align:center;font:400 var(--s-lede)/1.4 var(--f);letter-spacing:-.006em;color:var(--ink)}
.sy-capln{fill:none;stroke:var(--verm);stroke-width:2;stroke-linecap:round}
.sy-capdot{fill:var(--verm)}

@media (prefers-reduced-motion:reduce){
  .sy-bd *,.sy-bd *::before,.sy-bd *::after{transition:none!important;animation:none!important}
}

/* phone: the same diagram stood upright, the log under it */
@media (max-width:760px){
  .sy-stage{aspect-ratio:350 / 1100}
  .sy-box{left:0;top:4%;width:100%;height:12.4%}
  .sy-c-agent{left:62%;top:9.1%}
  .sy-t-out{left:62%;top:12.2%}
  .sy-c-policy{left:62%;top:22%}
  .sy-rules{left:auto;right:0;top:25.4%;transform:none}
  .sy-key{left:0;top:45.6%;transform:translateY(-50%)}
  .sy-rt-key{left:0;top:48.7%;transform:none}
  .sy-t-key{display:none}
  .sy-svclog{left:0;top:55.6%;width:100%;transform:none}
  .sy-bd{position:relative}
  .sy-cap{position:absolute;left:0;top:32.6%;width:54%;margin:0}
  .sy-cap span{width:100%;margin:0;font:400 var(--s-small)/1.45 var(--f)}
  .sy-chip{font-size:var(--s-body);padding:11px 14px;min-height:42px}
  .sy-box-t{left:14px;top:10px}
  .sy-mask{width:39px}
  .sy-key{padding:9px 12px;gap:8px}
}