/* ==== pen.css — фирменный стиль «синяя паста, красная паста» (лендинг, отчёт, блог). Ученик пишет синей, учитель правит красной:
   синий — всё, что делаете вы (кнопки, ссылки), красный — только пометки проверки.
   Первый экран показывает сам продукт — лист урока с пометками на полях. Один шрифт (Onest),
   одна тень (у листа), одна анимация (пометки появляются на листе). ==== */
:root{
  --canvas:#EEF1F6;  /* парта */
  --sheet:#FFFFFF;   /* лист */
  --ink:#14213D;     /* чернила — текст */
  --ink-2:#4A5672;   /* второстепенный текст */
  --rule:#DCE1EA;    /* тонкие линии */
  --blue:#3346C8; --blue-d:#2636A3;                  /* синяя паста — действия */
  --red:#D93A2B; --red-ink:#B32B1E; --red-n:#C8321F; /* красная паста — только пометки */
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --sheet-shadow:0 1px 2px rgba(20,33,61,.06), 0 18px 40px -18px rgba(20,33,61,.22);
  /* мост к common.css: экран отчёта рисуется его классами */
  --bg:var(--canvas); --card:var(--sheet); --mut:var(--ink-2); --line:var(--rule);
  --ok:#1E8A5A; --fail:var(--red); --unc:#B7791F; --na:#7A8499;
  --acc:var(--blue); --acc-d:var(--blue-d); --acc-strong:var(--blue); --acc-strong-d:var(--blue-d);
  --ok-ink:#17704A; --fail-ink:var(--red-ink); --unc-ink:#8A5A0B; --na-ink:var(--ink-2);
}
body.pen-page{font:17px/1.6 "Onest",system-ui,sans-serif; color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased}
.pen-page main{max-width:none; padding:0}
.pen-page .wrap{max-width:1200px; margin:0 auto; padding:0 32px}
.pen-page :focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ==== шапка ==== */
.pen-page header.top{background:transparent; border:0; max-width:1200px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand-link{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:19px; letter-spacing:-.01em}
.brand-link svg{width:28px; height:28px; flex:0 0 auto}
.top nav{display:flex; gap:24px}
.top nav a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500}
.top nav a:hover{color:var(--blue)}

/* ==== первый экран ==== */
.hero{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; padding:40px 0 88px}
.pen-page .hero h1{font-size:clamp(38px,3.9vw,50px); line-height:1.06; letter-spacing:-.028em; font-weight:600; margin:0 0 20px; color:var(--ink)}
.lead{font-size:19px; line-height:1.55; color:var(--ink-2); margin:0 0 32px; max-width:30em}

.drop{display:block; background:var(--sheet); border:1.5px dashed #B9C2D3; border-radius:var(--r-md); padding:22px 24px;
  cursor:pointer; transition:border-color .15s, background .15s}
.drop:hover,.drop.drag{border-color:var(--blue); background:#F7F8FD}
.drop-row{display:flex; align-items:center; gap:14px}
.drop svg{width:26px; height:26px; color:var(--blue); flex:0 0 auto}
.drop b{color:var(--blue); font-weight:600}
.drop .hint{font-size:14px; color:var(--ink-2); margin-top:2px}
.fname{font-size:15px; font-weight:600; color:var(--ink); margin-top:10px}
.fname:empty{display:none}
.pen-page #pane-paste label{font-size:14px; font-weight:500; color:var(--ink-2); margin:0 0 6px}
.pen-page #pane-paste label + input{margin-bottom:14px}
.pen-page #pane-paste input,.pen-page #pane-paste textarea{font:inherit; font-size:16px; border:1.5px solid var(--rule); border-radius:var(--r-sm); padding:12px 14px; background:var(--sheet)}
.pen-page #pane-paste textarea{min-height:180px}
.pen-page #pane-paste input:focus,.pen-page #pane-paste textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(51,70,200,.15)}
.actions{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px}
.pen-page .cta{margin:0; background:var(--blue); color:#fff; border:0; border-radius:var(--r-sm); padding:14px 26px; font:inherit; font-size:17px; font-weight:600}
.pen-page .cta:hover{background:var(--blue-d)}
.pen-page .link{margin:0; background:none; border:0; padding:4px 0; color:var(--blue); font:inherit; font-size:15px; font-weight:500;
  text-decoration:underline; text-decoration-color:rgba(51,70,200,.35); text-underline-offset:4px}
.pen-page .link:hover{background:none; text-decoration-color:var(--blue)}
.run-status{font-size:14px; color:var(--ink-2); margin-top:14px; min-height:22px}

/* лист-пример: сам продукт на первом экране */
.demo{margin:0}
.sheet{display:grid; grid-template-columns:minmax(0,1fr) 250px; background:var(--sheet); border-radius:var(--r-lg); box-shadow:var(--sheet-shadow); overflow:hidden}
.sheet-text{padding:34px 32px 30px 36px; font-size:16px; line-height:1.75}
.doc-kind{font-size:14px; color:var(--ink-2); margin:0 0 4px}
.doc-title{font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.01em; margin:0 0 18px; color:var(--ink)}
.sheet-text p{margin:0 0 10px}
.sheet-text b{font-weight:600}
.nowrap{white-space:nowrap}
.sheet-notes{list-style:none; margin:0; padding:34px 24px 30px; border-left:1.5px solid rgba(217,58,43,.35); background:#FCFCFE;
  display:flex; flex-direction:column; gap:18px; font-size:14px; line-height:1.45; color:var(--ink)}
.sheet-notes li{display:grid; grid-template-columns:22px 1fr; gap:10px}
.sheet-notes b{font-weight:600}
.demo figcaption{font-size:14px; color:var(--ink-2); margin-top:14px; padding-left:4px}

/* красная паста: подчёркивание + номер; общий вид для примера и для настоящего отчёта */
mark.pen{color:inherit; background-color:rgba(217,58,43,.08); background-image:linear-gradient(var(--red),var(--red));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px; border-radius:2px; padding:0 1px; cursor:pointer;
  box-shadow:none}   /* у .seg mark из common.css оранжевый ореол — здесь он не нужен */
sup.pen-n{color:var(--red-ink); font-weight:700; font-size:.68em; margin-left:2px}
.note-n,.n-dot{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--red-n); color:#fff;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto}
.note-n{margin-right:10px; vertical-align:1px}
/* единственная анимация: пометки ложатся на лист по очереди */
@media (prefers-reduced-motion:no-preference){
  .demo mark.pen{animation:pen-draw .5s cubic-bezier(.5,0,.2,1) both}
  .demo .sheet-notes li,.demo sup.pen-n{animation:note-in .4s ease-out both}
  .demo [data-k="1"]{animation-delay:.5s} .demo [data-k="2"]{animation-delay:1.1s} .demo [data-k="3"]{animation-delay:1.7s}
}
@keyframes pen-draw{from{background-size:0 2px; background-color:transparent}}
@keyframes note-in{from{opacity:0; transform:translateY(4px)}}

/* ==== что проверяем ==== */
.pen-page section h2.sec{font-size:30px; line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0 0 28px; color:var(--ink)}
.checks{padding:24px 0 80px}
.checks-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:64px; margin:0}
.checks-list div{padding:20px 0; border-top:1px solid var(--rule)}
.checks-list dt{font-weight:600; font-size:17px; margin:0 0 4px}
.checks-list dd{margin:0; color:var(--ink-2); font-size:16px}

/* ==== как это работает (настоящая последовательность — поэтому номера) ==== */
.steps{padding:0 0 80px}
.steps-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; counter-reset:step}
.steps-list li{counter-increment:step}
.steps-list li::before{content:counter(step); display:block; font-size:40px; line-height:1; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; margin-bottom:14px}
.steps-list b{display:block; font-weight:600; font-size:17px; margin-bottom:4px}
.steps-list span{color:var(--ink-2); font-size:16px}

/* ==== вопросы ==== */
.faq{padding:0 0 96px; max-width:820px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:18px 40px 18px 0; font-weight:600; font-size:17px; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:24px; width:9px; height:9px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); top:28px}
.faq details p{margin:0 0 20px; color:var(--ink-2); font-size:16px; max-width:40em}

/* ==== подвал ==== */
.pen-page footer.foot{text-align:left; border-top:1px solid var(--rule); padding:32px 0 48px; font-size:14px; color:var(--ink-2); line-height:1.6}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:10px}
.foot-row nav{display:flex; gap:20px; flex-wrap:wrap}
.pen-page footer.foot a{color:var(--ink-2); text-decoration:none}
.pen-page footer.foot a:hover{color:var(--blue)}
.foot p{margin:0; max-width:46em}

/* ==== экран отчёта: тот же лист, пометки справа ==== */
.pen-page #report-view{max-width:1200px; margin:0 auto; padding:8px 32px 80px}
.pen-page .rv-bar{display:flex; align-items:center; gap:16px; margin:0 0 20px}
.pen-page .btn-back{margin:0; background:none; border:0; padding:6px 0; color:var(--blue); font:inherit; font-size:15px; font-weight:600}
.pen-page .btn-back:hover{background:none; color:var(--blue-d)}
.rv-head{max-width:820px; margin:0 0 28px}
.pen-page #rv-title{font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.02em; font-weight:600; margin:0 0 10px; color:var(--ink)}
.pen-page .rv-meta{margin:0}
.verdict-line{font-size:19px; margin:14px 0 0; color:var(--ink)}
.verdict-line:empty{display:none}
.pen-page #summary{display:none}   /* счётчики уже сказаны фразой-итогом */
.pen-page .report-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px}
.pen-page .material-panel{background:var(--sheet); border:0; border-radius:var(--r-lg); box-shadow:var(--sheet-shadow); padding:36px 44px;
  position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; font-size:16px; line-height:1.75}
.pen-page .findings-panel{background:none; border:0; padding:0; max-height:none; overflow:visible}
.pen-page .seg{padding:3px 0; margin:0 0 6px; border:0; border-radius:0}
.pen-page .seg:hover{background:none}
.pen-page .seg-head{font-weight:600}
.pen-page .seg-label{color:var(--ink-2); font-weight:500; font-size:14px}
.pen-page .arb-panel{background:var(--sheet); border:0; border-left:3px solid var(--red); border-radius:0 var(--r-md) var(--r-md) 0; padding:20px 22px; margin:0 0 28px}
.pen-page .arb-h{font-size:17px; font-weight:600; color:var(--ink); margin:0 0 6px}
.pen-page .arb-sub{font-size:14px; font-weight:600; color:var(--ink-2); margin-top:12px}
.pen-page .arb-panel li{font-size:16px}
.pen-page .sect{border:0; padding:0; margin:0 0 20px; background:none}
.pen-page .sect > summary{font-size:15px; font-weight:600; color:var(--ink-2); padding:6px 0 10px; list-style:none}
.pen-page .sect > summary::-webkit-details-marker{display:none}
.pen-page .sect > summary .v-id{font-weight:500}
.pen-page .v{background:var(--sheet); border:0; border-radius:var(--r-md); padding:16px 18px; margin:0 0 8px}
.pen-page .v-head{align-items:flex-start}
.pen-page .v-title{display:flex; align-items:flex-start; font-size:16px; font-weight:600; line-height:1.4; color:var(--ink)}
.pen-page .chip{font-size:13px; padding:3px 10px}
.pen-page .expl{margin:8px 0 4px; font-size:16px; color:var(--ink)}
.pen-page .ev-link{color:var(--blue); font-size:15px; margin:6px 0 0}
.pen-page .ev{font-style:normal}
.pen-page .loading .spinner{border-color:#DCE1F5; border-top-color:var(--blue)}
.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 4px rgba(217,58,43,.35)} 100%{box-shadow:0 0 0 4px rgba(217,58,43,0)}}
@media (prefers-reduced-motion:reduce){.flash{animation:none; outline:2px solid var(--red)}}

/* ==== адаптив ==== */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; gap:40px; padding:16px 0 64px}
  .checks-list{grid-template-columns:1fr}
  .steps-list{grid-template-columns:1fr; gap:24px}
  .pen-page .report-grid{grid-template-columns:1fr}
  .pen-page .material-panel{position:static; max-height:none; padding:24px 22px}
}
@media (max-width:640px){
  .pen-page .wrap,.pen-page header.top,.pen-page #report-view{padding-left:16px; padding-right:16px}
  .top nav{gap:16px} .top nav a:not(:first-child){display:none}   /* соцсети — в подвале */
  .lead{font-size:17px; margin-bottom:24px}
  .sheet{grid-template-columns:1fr}
  .sheet-text{padding:24px 22px 20px}
  .sheet-notes{border-left:0; border-top:1.5px solid rgba(217,58,43,.35); padding:20px 22px 22px}
  .pen-page section h2.sec{font-size:25px}
  .actions .cta{width:100%}
}

/* ==== блог: та же тема, статья — одна колонка для чтения ==== */
.blog-page .card{background:none; border:0; box-shadow:none; border-radius:0}
.blog-page .article,.blog-page .bloglist{max-width:760px; margin:0 auto; padding:24px 32px 72px}
.blog-page .crumb{font-size:14px; color:var(--ink-2); margin:0 0 20px}
.blog-page .crumb a{color:var(--blue); text-decoration:none}
.blog-page .crumb a:hover{text-decoration:underline}
.blog-page .article h1,.blog-page .bloglist h1{font-size:clamp(30px,4vw,44px); line-height:1.12; letter-spacing:-.025em; font-weight:600; color:var(--ink); margin:0 0 14px}
.blog-page .article-meta{font-size:19px; line-height:1.5; color:var(--ink-2); margin:0 0 32px}
.blog-page .article h2{font-size:26px; line-height:1.25; letter-spacing:-.015em; font-weight:600; color:var(--ink); margin:44px 0 12px}
.blog-page .article p,.blog-page .article li{font-size:18px; line-height:1.7; color:var(--ink)}
.blog-page .article ul,.blog-page .article ol{padding-left:24px}
.blog-page .article-cta{background:var(--sheet); border:0; border-radius:var(--r-lg); box-shadow:var(--sheet-shadow); padding:28px 32px; margin:48px 0 0; text-align:left}
.blog-page .article-cta b{font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.blog-page .article-cta p{font-size:17px; color:var(--ink-2); margin:8px 0 0}
.blog-page .article-cta a.cta-btn{display:inline-block; margin-top:18px; background:var(--blue); color:#fff; text-decoration:none; font-weight:600; padding:13px 24px; border-radius:var(--r-sm)}
.blog-page .article-cta a.cta-btn:hover{background:var(--blue-d)}
.blog-page .post-card{display:block; background:var(--sheet); border:0; border-radius:var(--r-md); padding:22px 24px; margin:0 0 12px; text-decoration:none; transition:box-shadow .15s}
.blog-page .post-card:hover{box-shadow:0 0 0 2px var(--blue)}
.blog-page .post-card b{font-size:19px; font-weight:600; color:var(--ink)}
.blog-page .post-card span{display:block; font-size:16px; color:var(--ink-2); margin-top:4px}
@media (max-width:640px){
  .blog-page .article,.blog-page .bloglist{padding:16px 16px 56px}
  .blog-page .article p,.blog-page .article li{font-size:17px}
  .blog-page .article h2{font-size:22px; margin-top:36px}
}