/* Занятие 3 «Ода о памяти» — страничные стили поверх ../assets/style.css.
   Цвета — только токены темы. */

/* цитаты и эпиграф */
.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);
}
.quote .knows{display:none; font-size:.82rem; color:var(--text-dim); border-top:1px dashed var(--line); padding-top:.5rem; margin-top:.7rem;}

/* обсудим, «на занятии» */
.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, .onstage .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;}
.onstage{border:1px solid var(--line); background:var(--tile); padding:.7rem 1rem; margin:1.1rem 0; font-size:.95rem;}

/* закон в рамке с восклицательным знаком (как в занятии 2) */
.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;}

/* ссылки на источники */
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-fig{margin:1.6rem 0;}
.z-fig figcaption{max-width:52rem; margin-left:auto; margin-right:auto;}

/* Рис. «мост» */
.bridge{display:flex; flex-wrap:wrap; align-items:stretch; gap:.5rem; text-align:left;}
.bridge .bg{flex:1 1 auto; border-top:3px solid var(--line); padding-top:.4rem;}
.bridge .bg-act{border-color:var(--signal); flex-basis:100%;}
.bridge .bg-goal{border-color:var(--rl); flex-basis:14rem;}
.bridge .bg-body{border-color:var(--nn); flex-basis:14rem;}
.bridge .bg-name{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:.4rem;}
.bridge .bg-steps{display:flex; flex-wrap:wrap; gap:.3rem; align-items:stretch;}
.bridge .b-st{flex:1 1 6.5rem; border:1px solid var(--text); background:var(--tile); padding:.4rem .5rem; display:flex; flex-direction:column; gap:.15rem; font-size:.78rem; line-height:1.3;}
.bridge .b-st b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:.92rem;}
.bridge .b-st span{color:var(--text-dim);}
.bridge .b-st i{color:var(--text); font-size:.74rem; border-top:1px dashed var(--line); padding-top:.2rem; margin-top:auto;}
.bridge .b-arr{align-self:center; color:var(--text-dim); font-size:.9rem;}
.bridge .b-arr.big{font-size:1.4rem; color:var(--signal-ink);}
.bridge .bg-act .b-st:nth-child(7){border-color:var(--signal); background:color-mix(in srgb, var(--signal) 10%, var(--tile));}

/* Рис. «Тулмин» */
.toulmin{
  display:grid; gap:.5rem .7rem; text-align:left; max-width:56rem; margin:0 auto;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"title title title" "data arr claim" "warrant . rebut" "backing . objection";
}
.toulmin .tm-title{grid-area:title; font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.05rem; padding-bottom:.2rem; border-bottom:1px solid var(--line);}
.toulmin .tm-objection{grid-area:objection; border-color:var(--bad);}
.toulmin .tm-rebut{border-style:dashed; border-color:var(--text);}
.toulmin .tm{border:1px solid var(--text); background:var(--tile); padding:.5rem .7rem; font-size:.85rem; display:flex; flex-direction:column; gap:.2rem;}
.toulmin .tm b{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; font-weight:400; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.toulmin .tm-data{grid-area:data;}
.toulmin .tm-arr{grid-area:arr; align-self:center; font-size:1.5rem; color:var(--signal-ink);}
.toulmin .tm-claim{grid-area:claim; border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--tile));}
.toulmin .tm-q{font-style:italic; color:var(--signal-ink); font-size:.8rem;}
.toulmin .tm-warrant{grid-area:warrant; border-style:dashed;}
.toulmin .tm-backing{grid-area:backing; border-style:dashed; background:var(--paper-2);}
.toulmin .tm-rebut{grid-area:rebut; border-color:var(--bad);}
@media (max-width:640px){
  .toulmin{grid-template-columns:1fr; grid-template-areas:"title" "data" "arr" "claim" "warrant" "backing" "rebut" "objection";}
  .toulmin .tm-arr{justify-self:center; transform:rotate(90deg);}
}

/* Рис. «слайды» */
.slides{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:52rem; margin:0 auto; text-align:left;}
@media (max-width:640px){ .slides{grid-template-columns:1fr;} }
.sl-tag{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bad); margin-bottom:.3rem;}
.sl-tag.good{color:var(--good);}
.slide{aspect-ratio:16/9; border:1px solid var(--text); background:var(--paper); padding:.7rem .9rem; display:flex; flex-direction:column; overflow:hidden;}
.sl-title{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1rem; line-height:1.25; margin-bottom:.4rem;}
.sl-bad ul{margin:0; padding-left:1.1rem; font-size:.72rem; color:var(--text-dim); line-height:1.35;}
.sl-chart{width:100%; flex:1; min-height:0;}
.sl-chart .ax{stroke:var(--text-dim); stroke-width:1;}
.sl-chart .bar-old{fill:var(--line);}
.sl-chart .bar-new{fill:var(--good);}
.sl-chart text{fill:var(--text); font-family:Consolas,"SF Mono",ui-monospace,monospace; text-anchor:middle;}
.sl-chart .v{font-size:11px;}
.sl-chart .l{font-size:9px; fill:var(--text-dim);}

/* переворачивающиеся карточки */
.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:12.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);}

/* 1. Чей это текст? */
.gq-frag{border:1px solid var(--line); background:var(--paper); padding:.8rem 1rem; font-family:Georgia,"Times New Roman",serif; font-size:1.02rem; line-height:1.55; margin:.5rem 0;}
.gq-frag mark{background:color-mix(in srgb, var(--signal) 30%, transparent); color:inherit; padding:0 .1em;}
.gq-opts button.right{border-color:var(--good); background:color-mix(in srgb, var(--good) 18%, var(--paper));}
.gq-opts button.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 15%, var(--paper));}
.gq-cues{margin:.5rem 0 0; padding-left:1.2rem; font-size:.88rem;}
.gq-cues li{margin-bottom:.25rem;}
.gq-cues b{font-weight:600;}
.gq-src{font-size:.78rem; color:var(--text-dim); margin-top:.4rem;}
.gq-verdict{font-weight:600; margin:.5rem 0 .2rem;}
.gq-verdict.ok{color:var(--good);} .gq-verdict.no{color:var(--bad);}

/* 2. Линтер */
.lint-grid{display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:1rem; align-items:start;}
@media (max-width:760px){ .lint-grid{grid-template-columns:1fr;} }
.lint-in{width:100%; min-height:11rem; box-sizing:border-box; font:inherit; font-size:.92rem; line-height:1.5; padding:.6rem .7rem; border:1px solid var(--line); background:var(--paper); color:var(--text); resize:vertical;}
.lint-out{border:1px solid var(--line); background:var(--paper); padding:.6rem .7rem; font-size:.92rem; line-height:1.55; margin-top:.5rem; min-height:3rem;}
.lint-out .red{background:color-mix(in srgb, var(--bad) 25%, transparent); border-bottom:2px solid var(--bad);}
.lint-out .yel{background:color-mix(in srgb, var(--signal) 22%, transparent); border-bottom:2px dotted var(--signal-ink);}
.lint-out:empty::before{content:"Здесь появится текст с подсветкой."; color:var(--text-dim); font-size:.85rem;}
.lint-check{list-style:none; margin:0; padding:0; font-size:.88rem;}
.lint-check li{padding:.35rem .5rem .35rem 1.9rem; border:1px solid var(--line); margin-bottom:.3rem; position:relative; background:var(--paper);}
.lint-check li::before{content:"○"; position:absolute; left:.6rem; top:.32rem; color:var(--text-dim);}
.lint-check li.ok{border-color:var(--good); background:color-mix(in srgb, var(--good) 12%, var(--paper));}
.lint-check li.ok::before{content:"✓"; color:var(--good); font-weight:700;}
.lint-sum{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.8rem; margin:.5rem 0;}
.lint-notes{font-size:.82rem; color:var(--text-dim); margin:.4rem 0 0; padding-left:1.1rem;}

/* 3. Собери введение */
.as-list{list-style:none; margin:.4rem 0; padding:0; display:grid; gap:.4rem;}
.as-list li{border:1px solid var(--line); background:var(--paper); padding:.55rem .7rem; display:grid; grid-template-columns:1fr 11rem; gap:.6rem; align-items:center; font-size:.92rem;}
@media (max-width:640px){ .as-list li{grid-template-columns:1fr;} }
.as-list select{font:inherit; font-size:.85rem; padding:.25rem; border:1px solid var(--line); background:var(--paper-2); color:var(--text); width:100%;}
.as-list li.ok{border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, var(--paper));}
.as-list li.no{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--paper));}
.as-list .why{grid-column:1 / -1; font-size:.82rem; color:var(--text-dim); display:none;}
.as-list li.no .why, .as-list.solved .why{display:block;}
.as-list .ph{color:var(--text-dim); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85em;}
.as-list .rtag{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--good);}

/* 4. Роли в трёх текстах раздела 5.5 */
.roles-legend{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 0; font-size:.78rem;}
.roles-legend span{border:1px solid var(--line); padding:.1rem .45rem; background:var(--paper);}
.roles-legend[hidden]{display:none;}
.role{transition:background .2s;}
.roles-on .quote.sample .role{padding:.05em 0; border-bottom:2px solid; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.roles-on .quote.sample .role::before{
  content:attr(data-role); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.06em; padding:0 .3em; margin-right:.25em; color:var(--paper); vertical-align:.12em;
}
.roles-on .quote.sample .knows{display:block;}
.r-territory, .lg-territory{--rc:var(--rl);}
.r-now, .lg-now{--rc:var(--nn);}
.r-niche, .lg-niche{--rc:var(--gd);}
.r-concl, .lg-concl{--rc:var(--signal);}
.r-goal, .lg-goal{--rc:var(--text);}
.r-benefit, .lg-benefit{--rc:var(--rl);}
.r-cost, .lg-cost{--rc:var(--nn);}
.r-term, .lg-term{--rc:var(--signal);}
.r-action, .lg-action{--rc:var(--gd);}
.r-promise, .lg-promise{--rc:var(--rl);}
.roles-on .quote.sample .role{border-color:var(--rc); background:color-mix(in srgb, var(--rc) 14%, transparent);}
.roles-on .quote.sample .role::before{background:var(--rc);}
.roles-legend span{border-left:4px solid var(--rc);}

/* Рис. «три средства убеждения» */
.ethos{max-width:52rem; margin:0 auto; text-align:left;}
.eth-chain{display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch;}
.eth-node{flex:1 1 12rem; display:flex; flex-direction:column; gap:.3rem;}
.eth-who{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);}
.eth-card{flex:1; border:1px solid var(--text); background:var(--tile); padding:.55rem .7rem; display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; line-height:1.35;}
.eth-card b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:1.15rem; color:var(--signal-ink);}
.eth-arr{align-self:center; color:var(--text-dim); font-size:1.2rem; padding-top:1.2rem;}
.eth-base{margin-top:.5rem; border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--tile)); padding:.5rem .7rem; font-size:.88rem; display:flex; flex-wrap:wrap; gap:.3rem .7rem; align-items:baseline;}
.eth-base b{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--signal-ink);}
@media (max-width:640px){ .eth-arr{display:none;} }

/* Рис. «два построения аргумента» */
.compose{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; max-width:56rem; margin:0 auto; text-align:left;}
@media (max-width:720px){ .compose{grid-template-columns:1fr;} }
.cmp-col{display:flex; flex-direction:column; gap:.25rem;}
.cmp-title{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:.3rem;}
.cmp-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:.3rem;}
.cmp-box{border:1px solid var(--text); background:var(--tile); padding:.4rem .55rem; font-size:.8rem; line-height:1.3; display:flex; flex-direction:column; gap:.15rem;}
.cmp-box b{font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem; font-weight:400; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.cmp-thesis, .cmp-concl{border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--tile));}
.cmp-goal{border:2px solid var(--rl); background:color-mix(in srgb, var(--rl) 10%, var(--tile));}
.cmp-arr{text-align:center; color:var(--text-dim); line-height:1;}

/* Рис. «ситуация — осложнение — вопрос — ответ» (плитки как у «моста») */
.scqa{display:flex; flex-wrap:wrap; gap:.35rem; align-items:stretch; text-align:left; max-width:56rem; margin:0 auto;}
.scqa .b-st{flex:1 1 11rem; 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;}
.scqa .b-st b{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-weight:400; font-size:.98rem;}
.scqa .b-st span{color:var(--text-dim);}
.scqa .b-st i{color:var(--text); font-size:.76rem; border-top:1px dashed var(--line); padding-top:.2rem; margin-top:auto;}
.scqa .b-arr{align-self:center; color:var(--text-dim);}
.scqa .b-st:last-child{border:2px solid var(--signal); background:color-mix(in srgb, var(--signal) 9%, var(--tile));}

/* «было / стало» в разделе о языке введения */
.quote.was{border-left-color:var(--bad);}
.quote.now{border-left-color:var(--good);}