/* ==========================================================================
   DateTruth – Insights (editorial pages). Builds on app.css tokens: paper / ink / vermilion (--signal) / marker.
   Calm reading column, sticky table of contents, responsive tables, one loud call-to-action block.
   ========================================================================== */

.ins{padding-block:clamp(1.4rem,4vw,3.4rem) clamp(2.4rem,6vw,5rem)}

/* ---- breadcrumbs ---- */
.ins-crumbs{margin-bottom:1.4rem}
.ins-crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .6rem;font:500 .78rem/1.3 var(--f-mono);letter-spacing:.04em;color:var(--ink-faint)}
.ins-crumbs li{display:inline-flex;align-items:center;gap:.6rem;min-width:0}
.ins-crumbs li+li::before{content:"/";opacity:.6}
.ins-crumbs a{text-decoration:none;color:var(--ink-soft)}
.ins-crumbs a:hover{color:var(--signal-text);text-decoration:underline}
.ins-crumbs [aria-current]{color:var(--ink);min-width:0}

/* ---- header ---- */
.ins-head{max-width:56rem;margin-bottom:clamp(1.6rem,4vw,2.8rem)}
.ins-title{font:800 clamp(2rem,5.4vw,3.7rem)/1 var(--f-display);letter-spacing:-.045em;text-wrap:balance;hyphens:auto}
.ins-lede{margin-top:1.1rem;font:italic 500 clamp(1.1rem,2.2vw,1.4rem)/1.4 var(--f-serif);color:var(--ink-soft);max-width:48ch;text-wrap:pretty}
.ins-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;margin-top:1.3rem;padding-top:1rem;border-top:var(--bw) solid var(--ink);font:500 .8rem/1.4 var(--f-mono);color:var(--ink-soft)}
.ins-meta__k{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;margin-inline-end:.3em}
.ins-meta a{color:inherit;text-decoration-color:var(--signal)}
.ins-meta a:hover{color:var(--signal-text)}

/* ---- layout: TOC + reading column ---- */
.ins-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:start}
@media (min-width:980px){
  .ins-grid{grid-template-columns:15rem minmax(0,48rem);gap:3.2rem;justify-content:start}
  .ins-toc{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 110px);overflow:auto}
}
.ins-toc{border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--card);padding:1rem 1.1rem;box-shadow:var(--sh-s)}
.ins-toc__h{font:700 .72rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-text);margin-bottom:.6rem}
.ins-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.1rem;counter-reset:toc}
.ins-toc li{counter-increment:toc}
.ins-toc a{display:flex;gap:.6rem;align-items:baseline;min-height:36px;padding-block:.3rem;font-size:.9rem;line-height:1.3;text-decoration:none;color:var(--ink-soft)}
.ins-toc a::before{content:counter(toc,decimal-leading-zero);font:700 .7rem/1 var(--f-mono);color:var(--ink-faint);flex:none}
.ins-toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal)}
@media (max-width:979px){
  .ins-toc ol{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));column-gap:1.4rem}
}

.ins-body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,2.8rem)}
.ins-sec,.ins-answer,.ins-note,.ins-cta,.ins-related{scroll-margin-top:84px}
.ins-sec>h2,.ins-related>h2{font:800 clamp(1.35rem,2.6vw,1.75rem)/1.15 var(--f-display);letter-spacing:-.03em;margin-bottom:.9rem;text-wrap:balance}
.ins-sec p,.ins-note p,.ins-cta p,.ins-answer p{font-size:1.06rem;line-height:1.7;text-wrap:pretty;max-width:68ch}
.ins-sec p+p,.ins-note p+p{margin-top:.9rem}
.ins-sec p a,.ins-note a,.ins-answer a{text-decoration-color:var(--signal);font-weight:600}
.ins-sec p a:hover,.ins-note a:hover{color:var(--signal-text)}
.ins-sec code{font-family:var(--f-mono);font-size:.9em;background:var(--paper-deep);padding:.1em .4em;border-radius:4px}
.ins-sec>.ins-fig,.ins-sec>p+.ins-fig{margin-top:1.2rem}
.ins-sec>.ins-fig+p{margin-top:1.1rem}

/* ---- short answer ---- */
.ins-answer{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:1.2rem 1.4rem 1.3rem;background:color-mix(in srgb,var(--marker) 38%,var(--card));box-shadow:var(--sh)}
.ins-answer h2{font:700 .74rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;color:var(--ink)}
.ins-answer p{font-size:1.14rem;line-height:1.6;font-weight:500;color:var(--ink)}

/* ---- tables ---- */
.ins-fig{margin:0}
.ins-fig+.ins-fig{margin-top:1.4rem}
.ins-scroll{overflow-x:auto;border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--card);-webkit-overflow-scrolling:touch}
.ins-scroll:focus-visible{outline-offset:2px}
.ins-table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.35;font-variant-numeric:tabular-nums}
.ins-table caption{caption-side:top;text-align:start;padding:.8rem 1rem .7rem;font:700 .86rem/1.35 var(--f-text);color:var(--ink);border-bottom:var(--bw) solid var(--ink);background:var(--paper-deep)}
.ins-table th,.ins-table td{padding:.55rem .8rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--rule)}
.ins-table thead th{font:700 .7rem/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;border-bottom:var(--bw) solid var(--ink);vertical-align:bottom}
.ins-table tbody th{font-weight:700}
.ins-table tbody th[scope="rowgroup"]{border-inline-end:1px solid var(--rule);background:color-mix(in srgb,var(--paper-deep) 55%,var(--card))}
.ins-table .num{text-align:end;white-space:nowrap}
.ins-table tbody th[scope="rowgroup"]{white-space:nowrap}
.ins-table .mid{text-align:center}
.ins-table tbody+tbody tr:first-child>*{border-top:var(--bw) solid var(--ink)}
.ins-table tbody tr:last-child>*{border-bottom:0}
.ins-table tbody:not(:last-child) tr:last-child>*{border-bottom:1px solid var(--rule)}
.ins-table .ins-total,.ins-table .ins-total-row{background:color-mix(in srgb,var(--marker) 22%,var(--card))}
.ins-table--text td,.ins-table--text th[scope="row"]{min-width:12rem}
.ins-table--text th[scope="row"]{min-width:11rem}
.ins-table--text{font-size:.9rem}
.ins-table--wide{min-width:46rem}
.ins-table td strong{font-weight:800}
.ins-table a{font-weight:700;text-decoration-color:var(--signal)}
.ins-fig__note{margin-top:.7rem;font:500 .82rem/1.5 var(--f-text);color:var(--ink-faint);max-width:68ch}
p.ins-fig__note{font-size:.82rem;line-height:1.5}
.ins-share{display:inline-flex;align-items:center;gap:.55rem;justify-content:flex-end}
.ins-share progress{appearance:none;-webkit-appearance:none;width:3.6rem;height:.5rem;border:0;border-radius:99px;background:var(--paper-deep);overflow:hidden;flex:none}
.ins-share progress::-webkit-progress-bar{background:var(--paper-deep);border-radius:99px}
.ins-share progress::-webkit-progress-value{background:var(--signal);border-radius:99px}
.ins-share progress::-moz-progress-bar{background:var(--signal);border-radius:99px}
.ins-share span{min-width:2.9rem;text-align:end}
.ins-conf{display:inline-block;padding:.08em .55em;border:1.5px solid var(--ink);border-radius:99px;font:700 .72rem/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.ins-conf--high{background:var(--marker);color:var(--on-marker)}
.ins-conf--medium{background:var(--card)}
.ins-conf--low{background:transparent;border-style:dashed;color:var(--ink-soft)}
.ins-yn{display:inline-block;min-width:2.4rem;padding:.05em .5em;border-radius:6px;font:700 .78rem/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.04em}
.ins-yn.is-yes{background:var(--paper-deep)}
.ins-yn.is-no{color:var(--ink-faint)}
.ins-yn.is-key.is-yes{background:var(--marker);color:var(--on-marker)}

/* ---- editorial note ---- */
.ins-note{border:var(--bw) dashed var(--ink);border-radius:var(--r);padding:1.3rem 1.4rem;background:var(--card)}
.ins-note h2{font:800 1.15rem/1.25 var(--f-display);letter-spacing:-.02em;margin-bottom:.7rem}
.ins-note p{font-size:.98rem;line-height:1.65}

/* ---- call to action (inverse block) ---- */
.ins-cta{background:var(--rv-bg);color:var(--rv-fg);border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem);border:var(--bw) solid var(--ink);box-shadow:var(--sh)}
.ins-cta h2{font:800 clamp(1.35rem,2.8vw,1.8rem)/1.1 var(--f-display);letter-spacing:-.03em;margin-bottom:.6rem}
.ins-cta p{color:var(--rv-soft);color:color-mix(in srgb,var(--rv-fg) 82%,transparent)}
.ins-cta__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.ins-cta__btns .btn{flex:1 1 14rem;max-width:100%;border-color:var(--rv-fg);box-shadow:4px 4px 0 var(--rv-accent)}
.ins-cta__btns .btn:hover{box-shadow:6px 6px 0 var(--rv-accent)}
.ins-cta :focus-visible{outline-color:var(--rv-fg);box-shadow:0 0 0 6px var(--rv-accent)}
.ins-cta__own{margin-top:1.1rem}
.ins-cta__own a{color:var(--rv-fg);font-weight:600;text-decoration-color:var(--rv-accent)}

/* ---- cards: related + index ---- */
.ins-related ul,.ins-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.ins-related ul{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.ins-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1.4rem}
.ins-card{display:flex;flex-direction:column;gap:.45rem;height:100%;padding:1rem 1.1rem 1.1rem;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-s);text-decoration:none;color:var(--ink);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.ins-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.ins-card:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow-c)}
.ins-card__t{font:800 1.08rem/1.2 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.ins-card__b{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.ins-card--big{padding:1.3rem 1.4rem 1.4rem;gap:.6rem}
.ins-card--big .ins-card__t{font-size:1.3rem}
.ins-card__n{font:700 .8rem/1 var(--f-mono);letter-spacing:.06em;color:var(--signal-text)}
.ins-card__go{margin-top:auto;padding-top:.4rem;font:700 .78rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ins-card__go::after{content:" →"}
:root[dir="rtl"] .ins-card__go::after{content:" ←"}
.ins-index-method{margin-top:2rem;font-size:.95rem}
.ins-index-method a{font-weight:600;text-decoration-color:var(--signal)}

@media (max-width:560px){
  .ins-answer{padding:1rem 1.05rem 1.1rem}
  .ins-answer p{font-size:1.06rem}
  .ins-table th,.ins-table td{padding:.5rem .6rem}
  .ins-table thead th{white-space:normal}
  .ins-table caption{padding:.7rem .75rem .6rem}
  .ins-cta__btns .btn{flex-basis:100%}
}
@media print{
  .ins-toc,.ins-cta{display:none}
}

/* ---- visible reading note above a table (what the counts include) ---- */
.ins-sec p.ins-lead{margin-top:1.1rem;padding:.7rem 1rem;border-inline-start:6px solid var(--marker);background:var(--card);border-radius:0 var(--r-s) var(--r-s) 0;font-size:1rem;line-height:1.55}
.ins-sec p.ins-lead+.ins-fig{margin-top:.8rem}
.ins-sec .ins-fig+p.ins-lead{margin-top:1.4rem}