/* Yasnoo structured article blocks — public presentation layer */
:root{
  --ab-gap:clamp(.8rem,1.5vw,1.15rem);
  --ab-radius:12px;
  --ab-mono:'Yasnoo Iosevka Extended','Yasnoo Iosevka Regular','Iosevka Charon Mono','Cascadia Mono',monospace;
}
.article-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ab-gap);margin:1rem 0 1.7rem}
.article-card{min-width:0;padding:1rem 1.05rem;border:1px solid var(--bdr);border-radius:var(--ab-radius);background:var(--surf);box-shadow:0 1px 0 rgba(0,0,0,.025)}
.article-card--wide{grid-column:1/-1}
.article-card__label{font-family:var(--ab-mono);font-size:.64rem;letter-spacing:.085em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.article-card__title{font-family:var(--font-h,var(--font-s));font-size:1rem;font-weight:750;line-height:1.25;margin:0 0 .55rem;color:var(--tx)}
.article-card__text{font-size:.86rem;line-height:1.58;color:var(--tx);margin:0}
.article-card__meta{margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--bdr);font-family:var(--ab-mono);font-size:.68rem;line-height:1.5;color:var(--muted)}
.article-card__risk{margin-top:.65rem;font-size:.8rem;line-height:1.5;color:var(--tx)}
.article-card__risk::before{content:'!';font-family:var(--ab-mono);color:var(--bang,#d55252);font-weight:700;margin-right:.45rem}
.article-steps{counter-reset:abstep;display:grid;gap:.72rem;margin:1rem 0 1.7rem}
.article-step{counter-increment:abstep;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem;align-items:start;padding:.85rem 1rem;border:1px solid var(--bdr);border-radius:10px;background:var(--surf)}
.article-step::before{content:counter(abstep,decimal-leading-zero);display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:var(--ya2);color:var(--ya);font-family:var(--ab-mono);font-size:.68rem;font-weight:700}
.article-step__title{font-weight:700;font-size:.9rem;line-height:1.35;margin:.08rem 0 .22rem}
.article-step__text{font-size:.82rem;line-height:1.55;color:var(--muted)}
.article-checklist{display:grid;gap:.5rem;margin:1rem 0 1.7rem}
.article-check{position:relative;padding:.72rem .9rem .72rem 2.45rem;border:1px solid var(--bdr);border-radius:9px;background:var(--surf);font-size:.84rem;line-height:1.5}
.article-check::before{content:'✓';position:absolute;left:.86rem;top:.72rem;width:1rem;height:1rem;display:grid;place-items:center;border:1px solid var(--ya);border-radius:3px;color:var(--ya);font-family:var(--ab-mono);font-size:.67rem}
.article-note{margin:1rem 0 1.7rem;padding:.9rem 1rem;border-left:3px solid var(--ya);background:var(--ya2);border-radius:0 9px 9px 0;font-size:.84rem;line-height:1.58}
.article-note--warn{border-left-color:var(--bang,#d55252);background:color-mix(in srgb,var(--bang,#d55252) 7%,var(--surf))}
.article-note__title{font-family:var(--ab-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
@media(max-width:720px){.article-card-grid{grid-template-columns:1fr}.article-card--wide{grid-column:auto}.article-step{grid-template-columns:1.9rem minmax(0,1fr);padding:.8rem}.article-step::before{width:1.8rem;height:1.8rem}.article-card{padding:.9rem}.article-card__title{font-size:.94rem}}
/* Semantic operator layer: same public symbols as the internal notation, without exposing the format name. */
.article-card{--card-accent:var(--bdr2);border-color:color-mix(in srgb,var(--card-accent) 52%,var(--bdr));background:color-mix(in srgb,var(--surf) 96%,var(--card-accent) 4%)}
.article-card__head{display:flex;align-items:flex-start;gap:.68rem;margin-bottom:.58rem}
.article-op{flex:0 0 auto;display:grid;place-items:center;width:1.72rem;height:1.72rem;border:1px solid currentColor;border-radius:5px;color:var(--card-accent);background:color-mix(in srgb,var(--surf) 88%,var(--card-accent) 12%);font-family:var(--ab-mono);font-size:.83rem;font-weight:700;line-height:1}
.article-card__head .article-card__title{margin:.12rem 0 0}
.article-card--eq{--card-accent:var(--eq,var(--ya))}
.article-card--at{--card-accent:var(--at,#5a9478)}
.article-card--bang{--card-accent:var(--bang,#be2424)}
.article-card--dot{--card-accent:var(--dot,#3878a0)}
.article-card--arr{--card-accent:var(--arr,#1a8040)}
.article-card--star{--card-accent:var(--star,#5a8a9a)}
.article-card--tld{--card-accent:var(--tld,#d06090)}
.article-card--plus{--card-accent:var(--plus,#5a9460)}
.article-card:hover{border-color:var(--card-accent)}
.article-card--bang .article-card__risk::before{display:none}

/* ECLN visual semantics for cards */
.article-card{background:var(--surf);border:1.5px solid color-mix(in srgb,var(--card-accent) 72%,var(--bdr));box-shadow:none;transition:border-color .15s ease,transform .15s ease}
.article-card:hover{border-color:var(--card-accent);transform:translateY(-1px)}
.article-op{width:1.78rem;height:1.78rem;border:1.5px solid currentColor;border-radius:6px;background:color-mix(in srgb,var(--surf) 90%,var(--card-accent) 10%);font-size:.88rem}
.article-card--qst{--card-accent:var(--qst,#8a64c8)}
.article-card--pipe{--card-accent:var(--pipe,#6c7ea1)}
.article-card__content{min-width:0;flex:1}
.article-card__subs{display:grid;gap:.42rem;margin-top:.72rem;padding-top:.68rem;border-top:1px solid color-mix(in srgb,var(--card-accent) 24%,var(--bdr))}
.article-card__sub{display:grid;grid-template-columns:1.35rem minmax(0,1fr);gap:.48rem;align-items:start;font-size:.78rem;line-height:1.5;color:var(--muted)}
.article-card__sub.level-2{margin-left:1rem}
.article-mini-op{display:grid;place-items:center;width:1.25rem;height:1.25rem;border:1px solid currentColor;border-radius:4px;font-family:var(--ab-mono);font-size:.66rem;font-weight:700;line-height:1}
.article-card__sub--eq .article-mini-op{color:var(--eq,var(--ya))}.article-card__sub--at .article-mini-op{color:var(--at,#5a9478)}
.article-card__sub--bang .article-mini-op{color:var(--bang,#be2424)}.article-card__sub--dot .article-mini-op{color:var(--dot,#3878a0)}
.article-card__sub--arr .article-mini-op{color:var(--arr,#1a8040)}.article-card__sub--star .article-mini-op{color:var(--star,#5a8a9a)}
.article-card__sub--tld .article-mini-op{color:var(--tld,#d06090)}.article-card__sub--plus .article-mini-op{color:var(--plus,#5a9460)}
.article-card__sub--qst .article-mini-op{color:var(--qst,#8a64c8)}.article-card__sub--pipe .article-mini-op{color:var(--pipe,#6c7ea1)}

.article-card__actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem;padding-top:.7rem;border-top:1px dashed color-mix(in srgb,var(--card-accent) 28%,var(--bdr))}
.article-action{display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .58rem;border:1px solid color-mix(in srgb,var(--card-accent) 55%,var(--bdr));border-radius:6px;color:var(--card-accent);background:var(--surf);font-family:var(--ab-mono);font-size:.66rem;line-height:1.2;text-decoration:none}
.article-action:hover{border-color:var(--card-accent);background:color-mix(in srgb,var(--surf) 94%,var(--card-accent) 6%)}
.article-card-grid--flow{align-items:stretch}
@media(max-width:720px){.article-card__sub.level-2{margin-left:.45rem}.article-card__actions{gap:.35rem}.article-action{font-size:.63rem}}

.article-card-grid--flow{grid-template-columns:1fr}
.mode-card{position:relative;padding-left:3.25rem!important;background:var(--surf)!important;border-color:color-mix(in srgb,var(--dot,#3878a0) 62%,var(--bdr))!important}
.mode-card::before{content:'=';position:absolute;left:1rem;top:.95rem;display:grid;place-items:center;width:1.55rem;height:1.55rem;border:1.5px solid var(--eq,var(--ya));border-radius:5px;color:var(--eq,var(--ya));background:color-mix(in srgb,var(--surf) 90%,var(--eq,var(--ya)) 10%);font-family:var(--ab-mono);font-size:.78rem;font-weight:700}
.mode-card.active{border-color:var(--ya)!important;background:color-mix(in srgb,var(--surf) 96%,var(--ya) 4%)!important}
.grp.g-tbl{border:1.5px solid color-mix(in srgb,var(--pipe,#6c7ea1) 62%,var(--bdr));background:var(--surf);box-shadow:none}

/* Scan-friendly mini-card layouts for explicit steps, checklists and Top-N blocks. */
@property --ab-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes yasnoo-mini-perimeter{to{--ab-angle:360deg}}
.article-card-grid--steps{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.article-card-grid--checklist,
.article-card-grid--errors,
.article-card-grid--process{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card{
  --mini-base:color-mix(in srgb,var(--card-accent) 24%,var(--bdr));
  --mini-soft:color-mix(in srgb,var(--card-accent) 32%,#fff);
  --mini-mid:color-mix(in srgb,var(--card-accent) 68%,#fff);
  --mini-hot:var(--card-accent);
  --mini-fill:color-mix(in srgb,var(--surf) 97%,var(--card-accent) 3%);
  height:100%;position:relative;overflow:hidden;border:2px solid transparent!important;
  background:linear-gradient(var(--mini-fill),var(--mini-fill)) padding-box,linear-gradient(var(--mini-base),var(--mini-base)) border-box!important;
  animation:yasnoo-mini-perimeter 3.2s linear infinite;animation-play-state:paused;
  transform:none!important;transition:box-shadow .2s ease!important;
}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card::after{display:none!important;content:none!important}
@media(hover:hover) and (pointer:fine){
  :is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card:hover,
  :is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card:focus-within{
    background:linear-gradient(var(--mini-fill),var(--mini-fill)) padding-box,
      conic-gradient(from var(--ab-angle),var(--mini-base) 0 46%,var(--mini-soft) 54%,var(--mini-mid) 64%,var(--mini-hot) 76%,var(--mini-mid) 86%,var(--mini-soft) 94%,var(--mini-base) 100%) border-box!important;
    animation-play-state:running;
    box-shadow:0 0 16px color-mix(in srgb,var(--card-accent) 11%,transparent),0 8px 20px color-mix(in srgb,var(--card-accent) 7%,transparent);
  }
}
@media(max-width:760px){.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process{grid-template-columns:1fr}}

.cln-step-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;
  margin:.72rem 0 .78rem 1.6rem;
}
.cln-step-card{
  position:relative;min-width:0;padding:.7rem .72rem .72rem 2.45rem;
  border:1px solid color-mix(in srgb,var(--dot,#3878a0) 35%,var(--bdr));
  border-radius:9px;background:var(--surf);color:var(--tx);font-size:.74rem;line-height:1.48;
}

.cln-step-no{
  position:absolute;left:.68rem;top:.66rem;width:1.35rem;height:1.35rem;
  display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--dot,#3878a0) 55%,var(--bdr));
  border-radius:6px;background:color-mix(in srgb,var(--dot,#3878a0) 7%,var(--surf));
  color:var(--dot,#3878a0);font-family:var(--ab-mono);font-size:.67rem;font-weight:700;
}
@media(hover:hover) and (pointer:fine){
  .cln-step-card{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
  .cln-step-card:hover{border-color:color-mix(in srgb,var(--dot,#3878a0) 65%,var(--bdr));box-shadow:0 7px 18px color-mix(in srgb,var(--dot,#3878a0) 8%,transparent);background:color-mix(in srgb,var(--dot,#3878a0) 2.5%,var(--surf))}
}
@media(max-width:760px){.cln-step-grid{grid-template-columns:1fr;margin-left:0}}

/* Mini-card rule only: internal rows stay flat; other article/CLN hierarchies keep their indentation. */
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub.level-1,
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub.level-2,
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub[class*="level-"]{
  margin-left:0!important;
  padding-left:0!important;
}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__subs{
  margin-left:0!important;
  padding-left:0!important;
}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub{
  align-items:start;
}


/* Restore CLN semantic color coding inside cards: operator and text carry the same meaning. */
.article-card__sub{--sub-accent:var(--muted)}
.article-card__sub--eq{--sub-accent:var(--eq,var(--ya))}
.article-card__sub--at{--sub-accent:var(--at,#5a9478)}
.article-card__sub--bang{--sub-accent:var(--bang,#be2424)}
.article-card__sub--dot{--sub-accent:var(--dot,#3878a0)}
.article-card__sub--arr{--sub-accent:var(--arr,#1a8040)}
.article-card__sub--star{--sub-accent:var(--star,#5a8a9a)}
.article-card__sub--tld{--sub-accent:var(--tld,#d06090)}
.article-card__sub--plus{--sub-accent:var(--plus,#5a9460)}
.article-card__sub--qst{--sub-accent:var(--qst,#8a64c8)}
.article-card__sub--pipe{--sub-accent:var(--pipe,#6c7ea1)}
.article-card__sub>.article-mini-op{color:var(--sub-accent)!important}
.article-card__sub>span:last-child{color:color-mix(in srgb,var(--sub-accent) 68%,var(--tx))}
.article-card>.article-card__head .article-card__text{color:color-mix(in srgb,var(--card-accent) 56%,var(--tx))}

/* Mini-card inner alignment: operators live in the left gutter; text stays on one vertical axis. */
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub{
  position:relative;display:block;grid-template-columns:none;padding-left:0!important;margin-left:0!important;min-height:1.35rem;
}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub>.article-mini-op{
  position:absolute;left:calc(-1.78rem - .68rem);top:.08rem;
}
:is(.article-card-grid--steps,.article-card-grid--checklist,.article-card-grid--errors,.article-card-grid--process) .article-card__sub>span:last-child{
  display:block;width:100%;
}

/* Checkable mini-cards: keep native state, match Yasnoo card grammar. */
.article-card--checkable{cursor:pointer;display:grid;grid-template-columns:1.35rem minmax(0,1fr);gap:.62rem;align-items:start}
.article-card__check{appearance:none;-webkit-appearance:none;width:1.2rem;height:1.2rem;margin:.08rem 0 0;border:1.5px solid var(--card-accent);border-radius:4px;background:color-mix(in srgb,var(--surf) 94%,var(--card-accent) 6%);display:grid;place-items:center;cursor:pointer}
.article-card__check::before{content:'✓';font-family:var(--ab-mono);font-size:.72rem;font-weight:800;color:#fff;transform:scale(0);transition:transform .14s ease}
.article-card__check:checked{background:var(--card-accent)}
.article-card__check:checked::before{transform:scale(1)}
.article-card--checkable:has(.article-card__check:checked) .article-card__text{color:color-mix(in srgb,var(--card-accent) 72%,var(--tx))}

/* Unified information tables and parallel comparison blocks. */
.g-tbl,.grp.g-tbl{overflow:hidden;border:1px solid color-mix(in srgb,var(--pipe,#6c7ea1) 45%,var(--bdr));border-radius:12px;background:var(--surf);box-shadow:0 5px 18px rgba(35,55,85,.035)}
.g-tbl .tbl-head,.grp.g-tbl .tbl-head{background:color-mix(in srgb,var(--pipe,#6c7ea1) 7%,var(--surf));color:var(--tx);font-family:var(--ab-mono);font-size:.68rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;border-bottom:1px solid color-mix(in srgb,var(--pipe,#6c7ea1) 26%,var(--bdr))}
.g-tbl .tbl-row,.grp.g-tbl .tbl-row{border-bottom:1px solid color-mix(in srgb,var(--pipe,#6c7ea1) 16%,var(--bdr));transition:background .18s ease}
.g-tbl .tbl-row:last-child,.grp.g-tbl .tbl-row:last-child{border-bottom:0}
.g-tbl .tc,.grp.g-tbl .tc{padding:.72rem .78rem;line-height:1.48}
.tbl,.fine-tbl{width:100%;border-collapse:separate!important;border-spacing:0!important;border:1px solid color-mix(in srgb,var(--pipe,#6c7ea1) 42%,var(--bdr));border-radius:12px;overflow:hidden;background:var(--surf);box-shadow:0 5px 18px rgba(35,55,85,.035)}
.tbl th,.fine-tbl th{background:color-mix(in srgb,var(--pipe,#6c7ea1) 7%,var(--surf));color:var(--tx);font-family:var(--ab-mono);font-size:.68rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.tbl th,.tbl td,.fine-tbl th,.fine-tbl td{padding:.72rem .78rem!important;border-right:0!important;border-left:0!important;border-top:0!important;border-bottom:1px solid color-mix(in srgb,var(--pipe,#6c7ea1) 17%,var(--bdr))!important;vertical-align:top}
.tbl tr:last-child td,.fine-tbl tr:last-child td{border-bottom:0!important}
.tbl tbody tr,.fine-tbl tbody tr{transition:background .18s ease}
.par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ab-gap);margin:1rem 0 1.6rem}
.par-col{--par-accent:var(--pipe,#6c7ea1);overflow:hidden;border:1px solid color-mix(in srgb,var(--par-accent) 38%,var(--bdr));border-radius:12px;background:var(--surf);transition:border-color .2s ease,box-shadow .2s ease}
.par-col:has(.op.plus){--par-accent:var(--plus,#5a9460)}.par-col:has(.op.bang){--par-accent:var(--bang,#be2424)}
.par-head{padding:.72rem .85rem;border-bottom:1px solid color-mix(in srgb,var(--par-accent) 24%,var(--bdr));background:color-mix(in srgb,var(--par-accent) 6%,var(--surf));color:color-mix(in srgb,var(--par-accent) 58%,var(--tx));font-family:var(--ab-mono);font-size:.72rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.par-col>.cl{padding:.62rem .82rem}.par-col>.cl+.cl{border-top:1px solid color-mix(in srgb,var(--par-accent) 12%,var(--bdr))}
@media(hover:hover) and (pointer:fine){.g-tbl .tbl-row:hover,.grp.g-tbl .tbl-row:hover,.tbl tbody tr:hover,.fine-tbl tbody tr:hover{background:color-mix(in srgb,var(--pipe,#6c7ea1) 3.5%,var(--surf))}.par-col:hover{border-color:color-mix(in srgb,var(--par-accent) 62%,var(--bdr));box-shadow:0 8px 22px color-mix(in srgb,var(--par-accent) 7%,transparent)}}
@media(max-width:760px){.par{grid-template-columns:1fr}.g-tbl,.grp.g-tbl{overflow-x:auto}.g-tbl>.tbl-head,.g-tbl>.tbl-row,.grp.g-tbl>.tbl-head,.grp.g-tbl>.tbl-row{min-width:580px}.tbl,.fine-tbl{font-size:.8rem}.tbl th,.tbl td,.fine-tbl th,.fine-tbl td{padding:.62rem .66rem!important}}