/* Занятие 9 «Заплати троллю» — страничные стили поверх ../assets/style.css.
   Цвета — только токены темы. Общие блоки (цитаты, закон, таблицы, карточки) — как в занятии 3. */

/* цитаты и эпиграф */
.quote{
  margin:1.2rem 0; padding:.9rem 1.2rem;
  border-left:3px solid var(--signal); background:var(--paper-2); font-size:.97rem;
}
.quote p{margin:0 0 .6rem;}
.quote p:last-of-type{margin-bottom:0;}
.quote .attr, .epigraph .attr{
  display:block; margin-top:.6rem; text-align:right; font-style:normal;
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.76rem; color:var(--text-dim);
}

/* обсудим */
.discuss{border:1px dashed var(--signal); padding:.9rem 1.2rem; margin:1.2rem 0; background:color-mix(in srgb, var(--signal) 6%, var(--paper));}
.discuss .label{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--signal-ink); display:block; margin-bottom:.4rem;}
.discuss ol, .discuss ul{margin:0; padding-left:1.2rem;}
.discuss li{margin-bottom:.3rem;}
.discuss p{margin:0;}

/* закон в рамке с восклицательным знаком */
.law-box{
  display:flex; gap:1rem; align-items:center; margin:1.2rem 0; padding:.9rem 1.1rem;
  border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--paper));
}
.law-box .law-mark{
  flex:0 0 2.6rem; height:2.6rem; border-radius:50%; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.7rem; font-weight:700; line-height:1;
}
.law-box .ln{display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--signal-ink); margin-bottom:.2rem;}
.law-box .lt{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.12rem; line-height:1.4;}

/* таблицы */
.tbl-wrap{overflow-x:auto; margin:1.1rem 0;}
.z-table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:32rem;}
.z-table th, .z-table td{border:1px solid var(--line); padding:.45rem .65rem; text-align:left; vertical-align:top;}
.z-table th{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:400; color:var(--text-dim); background:var(--paper-2);}
.z-table td:first-child{font-weight:600;}
.z-table code, p code, li code{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.9em; background:var(--tile); padding:0 .25em; border:1px solid var(--line);}

h4.sub{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:1.08rem; margin:1.5rem 0 .4rem;}

/* источники */
a.ref{text-decoration:none; color:var(--signal-ink);}
a.ref:hover{text-decoration:underline;}
#sources li:target{background:color-mix(in srgb, var(--signal) 14%, transparent);}
#sources h4.src-group{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.74rem; font-weight:400; text-transform:uppercase; letter-spacing:.1em; color:var(--signal-ink); margin:1.5rem 0 .4rem;}
#sources ol{font-size:.88rem; padding-left:2.4rem;}
#sources li{margin-bottom:.45rem; overflow-wrap:anywhere;}

/* рисунки */
.z-photo img{max-width:min(100%, 640px);}
.z-opener img{max-width:min(100%, 720px);}
.z-fig{margin:1.6rem 0;}
.z-fig figcaption{max-width:52rem; margin-left:auto; margin-right:auto;}
.z-fig svg{width:100%; height:auto; display:block;}
.z-fig svg text{font-family:Consolas,"SF Mono",ui-monospace,monospace;}

/* код, запросы агенту, файлы для скачивания */
.code-wrap{position:relative; margin:1.2rem 0;}
.code-wrap pre.code{margin:0; white-space:pre-wrap; overflow-wrap:anywhere;}
.code-wrap .code-label{
  position:absolute; right:0; top:0; transform:translateY(-100%);
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-dim); padding:.1rem .5rem; border:1px solid var(--line); border-bottom:none; background:var(--tile);
}
.code-wrap:has(.code-label){margin-top:2rem;}
pre.code.prompt{border-left:3px solid var(--signal); background:color-mix(in srgb, var(--signal) 6%, var(--tile)); font-size:.84rem;}
.filelink{margin:1rem 0;}
.filelink a{
  display:flex; gap:.8rem; align-items:center; text-decoration:none; color:var(--text);
  border:1px solid var(--line); background:var(--tile); padding:.6rem .9rem;
}
.filelink a:hover{border-color:var(--signal);}
.filelink .fl-ico{
  flex:0 0 2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--signal); color:var(--signal-ink); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:1.1rem;
}
.filelink b{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-weight:400; color:var(--signal-ink); margin-right:.3rem;}

/* переворачивающиеся карточки */
.flip-group{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.74rem; font-weight:400; text-transform:uppercase; letter-spacing:.1em; color:var(--signal-ink); margin:1.4rem 0 .5rem;}
.flip-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(14.5rem, 1fr)); gap:.7rem; margin:.8rem 0 1.2rem;}
.flip{perspective:900px; min-height:13.5rem; cursor:pointer;}
.flip .inner{position:relative; width:100%; height:100%; min-height:inherit; transition:transform .45s; transform-style:preserve-3d;}
.flip.flipped .inner{transform:rotateY(180deg);}
.flip .face{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); padding:.75rem .9rem; display:flex; flex-direction:column; gap:.4rem;}
.flip .front{background:var(--paper-2); justify-content:center;}
.flip .fn{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--signal-ink);}
.flip .ft{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.02rem; line-height:1.3;}
.flip .fh{margin-top:auto; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);}
.flip .back{background:var(--tile); transform:rotateY(180deg); font-size:.84rem; line-height:1.45; overflow-y:auto;}
.flip:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .flip .inner{transition:none;} }

/* общие элементы тренажёров */
.trainer [hidden]{display:none !important;}
.trainer .z-intro{font-size:.92rem; margin:0 0 .9rem;}
.trainer button.zb{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.8rem;
  border:1px solid var(--line); background:var(--paper); color:var(--text);
  padding:.4rem .75rem; cursor:pointer;
}
.trainer button.zb:hover{border-color:var(--signal);}
.trainer button.zb.on{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 14%, var(--paper));}
.trainer button.zb[disabled]{opacity:.45; cursor:default;}
.trainer .row{display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0;}
.trainer .score{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.8rem; color:var(--text-dim); margin:.4rem 0;}
.trainer code{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.9em;}

/* 1. Задание на соответствие */
.match-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1rem; align-items:start;}
@media (max-width:760px){ .match-grid{grid-template-columns:1fr;} }
.match-left, .match-right{list-style:none; margin:0; padding:0; display:grid; gap:.35rem; counter-reset:m;}
.match-left li{
  counter-increment:m; border:1px solid var(--line); background:var(--paper); padding:.45rem .6rem;
  display:grid; grid-template-columns:1.6rem 1fr 3.6rem; gap:.5rem; align-items:center; font-size:.9rem;
}
.match-left li::before{content:counter(m); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.8rem; color:var(--signal-ink);}
.match-left select{font:inherit; font-family:Consolas,"SF Mono",ui-monospace,monospace; padding:.2rem; border:1px solid var(--line); background:var(--paper-2); color:var(--text); width:100%;}
.match-left li.ok{border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--paper));}
.match-left li.no{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--paper));}
.match-left .why{grid-column:1 / -1; font-size:.82rem; color:var(--text-dim); border-top:1px dashed var(--line); padding-top:.3rem;}
.match-right li{border:1px solid var(--line); background:var(--tile); padding:.45rem .6rem; display:grid; grid-template-columns:1.6rem 1fr; gap:.5rem; font-size:.88rem;}
.match-right .m-let{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85rem; color:var(--signal-ink);}

/* 2. Можно ли это продавать? */
.ship-grid{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:1.2rem; align-items:start;}
@media (max-width:820px){ .ship-grid{grid-template-columns:1fr;} }
.ship-cap{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin:.7rem 0 .3rem;}
.ship-left .ship-cap:first-child, .ship-modes .ship-cap{margin-top:0;}
.ship-list{display:grid; gap:.2rem;}
.ship-item{display:flex; gap:.5rem; align-items:baseline; font-size:.86rem; border:1px solid var(--line); background:var(--paper); padding:.25rem .5rem; cursor:pointer;}
.ship-item:hover{border-color:var(--signal);}
.ship-item i, .ship-out i{font-style:normal; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.74rem; color:var(--text-dim);}
.ship-item b{font-weight:600;}
.ship-sum{border:2px solid var(--line); padding:.6rem .8rem; margin:.7rem 0; font-size:.92rem; background:var(--paper);}
.ship-sum.v-ok{border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--paper));}
.ship-sum.v-cond{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 10%, var(--paper));}
.ship-sum.v-stop{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--paper));}
.ship-out{list-style:none; margin:0; padding:0; display:grid; gap:.35rem;}
.ship-out li{display:grid; grid-template-columns:4.6rem 1fr; gap:.6rem; border:1px solid var(--line); border-left-width:4px; background:var(--paper); padding:.45rem .6rem; font-size:.86rem;}
.ship-out p{margin:.2rem 0 0;}
.ship-out .v-note{color:var(--text-dim); font-size:.8rem;}
.ship-out .v-tag{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding-top:.15rem;}
.ship-out li.v-ok{border-left-color:var(--good);} .ship-out li.v-ok .v-tag{color:var(--good);}
.ship-out li.v-cond{border-left-color:var(--signal);} .ship-out li.v-cond .v-tag{color:var(--signal-ink);}
.ship-out li.v-stop{border-left-color:var(--bad);} .ship-out li.v-stop .v-tag{color:var(--bad);}

/* 3. Найдите ошибки в отчёте агента */
.audit-list{list-style:none; margin:.4rem 0; padding:0; display:grid; gap:.35rem;}
.audit-list li{border:1px solid var(--line); border-left-width:4px; background:var(--paper); font-size:.9rem;}
.a-row{display:grid; grid-template-columns:1.2rem 1fr auto; gap:.6rem; align-items:start; padding:.5rem .7rem; cursor:pointer;}
.a-main b{display:block; font-weight:600;}
.a-said{display:block; color:var(--text); font-size:.88rem; margin-top:.15rem;}
.a-flag{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.a-row input:checked ~ .a-flag{color:var(--bad);}
.a-res{font-size:.84rem; padding:0 .7rem; color:var(--text);}
.a-res:not(:empty){padding:.45rem .7rem .55rem; border-top:1px dashed var(--line);}
.a-check{display:block; margin-top:.25rem; color:var(--text-dim); font-size:.8rem;}
.audit-list li.a-hit{border-left-color:var(--good); background:color-mix(in srgb, var(--good) 9%, var(--paper));}
.audit-list li.a-miss{border-left-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--paper));}
.audit-list li.a-alarm{border-left-color:var(--signal);}
.audit-list li.a-fine{border-left-color:var(--line);}

/* ---------- рисунки ---------- */
.z-scroll{overflow-x:auto;}
.z-scroll svg{min-width:720px;}
.z-legend{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; justify-content:center; margin-top:.5rem; font-size:.78rem; color:var(--text-dim);}
.z-legend i{display:inline-block; width:.8rem; height:.8rem; margin-right:.35rem; vertical-align:-.1rem; border:2px solid var(--gc); background:color-mix(in srgb, var(--gc) 14%, var(--paper));}
.g-lic{--gc:var(--signal);} .g-free{--gc:var(--rl);} .g-corp{--gc:var(--nn);} .g-law{--gc:var(--gd);}
.g-perm{--gc:var(--nn);} .g-copy{--gc:var(--rl);} .g-net{--gc:var(--gd);} .g-pd{--gc:var(--text-dim);} .g-other{--gc:var(--line);} .g-x{--gc:var(--signal);}

/* хронология */
svg.tl .ax{stroke:var(--text); stroke-width:1.5;}
svg.tl .tk{fill:var(--text-dim); font-size:11px;}
svg.tl .lead{stroke:var(--gc); stroke-width:1.2;}
svg.tl .dot{fill:var(--gc);}
svg.tl .box rect{fill:color-mix(in srgb, var(--gc) 11%, var(--paper)); stroke:var(--gc); stroke-width:1.6;}
svg.tl .when{fill:var(--text-dim); font-size:11px; font-weight:700;}
svg.tl .name{fill:var(--text); font-size:12px; font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; font-weight:600;}
svg.tl .who{fill:var(--text-dim); font-size:10.5px;}

/* столбики и линии по данным */
svg.bars .bl{fill:var(--text); font-size:12px;}
svg.bars .bv{fill:var(--text-dim); font-size:11px;}
svg.bars rect{fill:color-mix(in srgb, var(--gc) 70%, var(--paper)); stroke:var(--gc);}
svg.trend .grid{stroke:var(--line); stroke-width:1;}
svg.trend .tk{fill:var(--text-dim); font-size:11px;}
svg.trend .ln{fill:none; stroke:var(--gc); stroke-width:2.4; stroke-linejoin:round;}
svg.trend .end{fill:var(--gc); font-size:11.5px; font-weight:700;}
.fig-two{display:grid; grid-template-columns:1fr 1fr; gap:1rem; text-align:left;}
@media (max-width:760px){ .fig-two{grid-template-columns:1fr;} }
.fig-two .ft-cap{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:.2rem;}

/* цепочки плиток: права, конвейер проверки, петля */
.chain{display:flex; flex-wrap:wrap; gap:.35rem; align-items:stretch; text-align:left; max-width:60rem; margin:0 auto;}
.chain .c-st{flex:1 1 8.5rem; border:1px solid var(--text); background:var(--tile); padding:.45rem .55rem; display:flex; flex-direction:column; gap:.15rem; font-size:.8rem; line-height:1.3;}
.chain .c-st b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:.98rem;}
.chain .c-st span{color:var(--text-dim);}
.chain .c-st i{color:var(--text); font-style:normal; font-size:.76rem; border-top:1px dashed var(--line); padding-top:.2rem; margin-top:auto;}
.chain .c-arr{align-self:center; color:var(--text-dim);}
.chain .c-st.hl{border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--tile));}
.loop-back{max-width:60rem; margin:.5rem auto 0; text-align:left; font-size:.82rem; color:var(--text-dim); border:1px dashed var(--signal); padding:.35rem .6rem;}
.loop-back span{color:var(--signal-ink); font-size:1.05rem; margin-right:.3rem;}

/* три вида платы */
.toll{max-width:52rem; margin:0 auto; text-align:left; display:grid; gap:.5rem;}
.toll-bridge, .toll-none{border:1px solid var(--text); background:var(--tile); padding:.5rem .7rem; display:flex; flex-wrap:wrap; gap:.2rem .7rem; align-items:baseline; font-size:.86rem;}
.toll-bridge b, .toll-none b, .toll-card b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:1.08rem;}
.toll-bridge span, .toll-none span{color:var(--text-dim);}
.toll-none{border-style:dashed; border-color:var(--bad);}
.toll-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem;}
@media (max-width:640px){ .toll-row{grid-template-columns:1fr;} }
.toll-card{border:2px solid var(--tc); background:color-mix(in srgb, var(--tc) 9%, var(--tile)); padding:.55rem .7rem; display:flex; flex-direction:column; gap:.2rem; font-size:.84rem; line-height:1.35;}
.toll-k, .toll-lic{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);}
.toll-lic{text-transform:none; letter-spacing:0; font-size:.76rem;}
.t-money{--tc:var(--gd);} .t-credit{--tc:var(--nn);} .t-share{--tc:var(--rl);}

/* спектр лицензий */
.spectrum{text-align:left;}
.sp-axis{display:flex; justify-content:space-between; gap:1rem; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); border-bottom:1px solid var(--text-dim); padding-bottom:.25rem; margin-bottom:.4rem;}
.sp-axis span:first-child::before{content:"← ";} .sp-axis span:last-child::after{content:" →";}
.sp-row{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.3rem;}
@media (max-width:900px){ .sp-row{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.sp-col{border:1px solid var(--text); border-top:4px solid var(--sc, var(--text-dim)); background:var(--tile); padding:.4rem .45rem; display:flex; flex-direction:column; gap:.2rem; font-size:.76rem; line-height:1.3;}
.sp-col b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:.9rem; line-height:1.15;}
.sp-col code{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; color:var(--signal-ink); background:none; border:none; padding:0;}
.sp-col span{color:var(--text-dim);}
.sp-credit{--sc:var(--nn);} .sp-share{--sc:var(--rl);} .sp-money{--sc:var(--gd);} .sp-closed{background:var(--paper-2);}
.sp-brackets{display:grid; grid-template-columns:5fr 2fr; gap:.3rem; margin-top:.3rem; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; color:var(--text-dim);}
.sp-brackets span{border-top:2px solid var(--rl); padding-top:.2rem;}
.sp-brackets .br-closed{border-color:var(--gd);}
@media (max-width:900px){ .sp-brackets{grid-template-columns:1fr;} }

/* совместимость */
.compat{max-width:58rem; margin:0 auto; text-align:left;}
.cp-cap{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:.4rem;}
.cp-row{display:flex; flex-wrap:wrap; gap:.35rem; align-items:stretch;}
.cp-box{flex:1 1 8rem; border:1px solid var(--text); background:var(--tile); padding:.45rem .55rem; display:flex; flex-direction:column; gap:.15rem; font-size:.78rem; color:var(--text-dim);}
.cp-box code, .cp-note code{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.86rem; color:var(--text); background:none; border:none; padding:0;}
.cp-arr{align-self:center; color:var(--signal-ink); font-size:1.2rem;}
.cp-notes{display:grid; grid-template-columns:repeat(3, 1fr); gap:.35rem; margin-top:.5rem;}
@media (max-width:760px){ .cp-notes{grid-template-columns:1fr;} }
.cp-note{border:1px dashed var(--text-dim); padding:.45rem .55rem; font-size:.8rem; display:flex; flex-direction:column; gap:.2rem;}
.cp-note.cp-bad{border-color:var(--bad);}
svg.bars rect.b{fill:none; stroke-width:1.6; stroke-dasharray:3 2;}
svg.bars .g-x rect{fill:var(--text-dim); stroke:var(--text-dim);}
svg.bars .g-x rect.b{fill:none;}
svg.trend .grid.base{stroke:var(--text-dim); stroke-dasharray:4 3;}
svg.trend .ln.d1{stroke-dasharray:7 4;}
svg.trend .ln.d2{stroke-dasharray:2 4;}
svg.trend .lead{stroke:var(--gc); stroke-width:.8; opacity:.6;}
.chain.pipeline .c-st{flex:1 1 6.2rem;}
.chain.pipeline{gap:.25rem;}

/* «лицензия не распознана»: приглушённый цвет, заметный и в тёмной теме */
.g-other{--gc:var(--text-dim);}
svg.bars .g-other rect:not(.b){fill:color-mix(in srgb, var(--text-dim) 28%, var(--paper));}
.z-legend i.g-other{background:color-mix(in srgb, var(--text-dim) 28%, var(--paper));}

/* длинные слова в плитках схем не должны вылезать за край на узкой колонке */
.sp-col b, .sp-col code, .cp-box code, .chain .c-st b{overflow-wrap:anywhere;}