/* The Claude Fable 5.2 article (functions/_claude52.js): charts, sortable tables and four small tools.
   Every colour is one of the site's variables, so the night and CRT themes follow without their own rules. */
.c52 h2,.c52 h3{scroll-margin-top:84px}
.c52>p,.c52>ul,.c52>ol{font-size:17px;line-height:1.55}.c52>p+p,.c52>ul+p,.c52>ol+p,.c52>.tablewrap+p{margin-top:12px}.c52>ul,.c52>ol{margin:8px 0}.c52>p.c52fine,.c52>p.c52indie{font-size:13px}
.c52indie{margin:10px 0 14px;font-size:13.5px;color:var(--mute)}
.c52stats{margin:0 0 14px}.c52stats b{font-size:25px;white-space:nowrap}
.c52toc{margin:0 0 6px;padding:13px 16px;background:var(--box);border:1.500px solid var(--ink);border-radius:9px}
.c52toc strong{display:block;font:10.5px/1.4 var(--pixel);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:6px}
.c52toc ol{margin:0;padding-left:22px!important;columns:2;column-gap:28px;font-size:14px}.c52toc li{margin:0 0 4px;break-inside:avoid}.c52toc a{color:var(--ink)}
.c52fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}.c52 .tablewrap+.c52fine{margin-top:-6px}
.c52na{font-size:12px;color:var(--faint);font-style:italic}

/* Charts: the site's bar chart, with the first bar (the new model) in the series colour and the rest in the quiet one. */
.c52charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.c52charts .bchart{margin:0;min-width:0}.c52charts .rkchart+.rkchart{margin-top:0}
.c52chart figcaption{line-height:1.5}
.c52chart .bbar{grid-template-columns:minmax(92px,42%) 1fr auto;gap:8px;font-size:13px;align-items:center}
.c52chart .bbl{white-space:normal;line-height:1.25}
.c52chart .bbt i{background:var(--viz-mute);opacity:.55}
.c52chart .bbar:first-of-type .bbt i{background:var(--viz-1);opacity:1}.c52chart .bbar:first-of-type .bbl,.c52chart .bbar:first-of-type b{font-weight:700}

/* Tables */
.c52table table{min-width:640px}.c52table tbody th{min-width:150px}.c52table small code{white-space:nowrap}.c52table td,.c52table tbody th{vertical-align:middle;font-variant-numeric:tabular-nums}
.c52table small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--faint)}.c52table small code{font-size:11px}
.c52table thead th{white-space:nowrap}.c52table th button{all:unset;cursor:pointer;font:inherit;color:inherit}.c52table th button:hover{text-decoration:underline}
.c52table th button:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.c52table th button::after{content:" \2195";opacity:.45}.c52table th[aria-sort=descending] button::after{content:" \2193";opacity:1}.c52table th[aria-sort=ascending] button::after{content:" \2191";opacity:1}
.c52table td.c52top{color:var(--ink);font-weight:700}.c52table td.c52up{color:var(--ink);font-weight:600}.c52table td.c52down{color:var(--mute)}
.c52tool .c52table table{min-width:0}.c52tool .c52table{margin:12px 0 0}

/* Tools */
.c52tool{margin:16px 0 8px}.c52tool .tbar h3{background:var(--paper);padding:0 10px;margin:0 30px;font:11px/1.6 var(--pixel);text-align:center;color:var(--ink)}
.c52tool .field{margin-bottom:12px}.c52tool .field span{color:var(--ink)}.c52tool textarea{min-height:72px}
.c52out{margin-top:4px;padding-top:14px;border-top:1px dashed var(--line)}
.c52pickname{margin:0}.c52pickname span{display:block;font:10.5px/1.4 var(--pixel);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.c52pickname strong{display:block;font:500 32px/1.15 var(--serif);color:var(--ink)}.c52pickname small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.c52why{margin:10px 0 0;padding-left:20px!important}.c52why li{margin:5px 0;font-size:14.5px;line-height:1.5}.c52why li.note{color:var(--ink)}
.c52sum{margin:10px 0 0;font-size:14.5px}.c52sum strong{color:var(--ink)}
.c52grid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin:6px 0 8px}
.c52grid i{display:block;aspect-ratio:1;border:1.500px solid var(--ink);border-radius:2px;background:var(--paper)}.c52grid i.on{background:var(--c5)}.c52grid.over i.on{background:var(--c3)}
.c52key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:12px;color:var(--mute)}.c52key span{display:inline-flex;align-items:center;gap:6px}
.c52key i{display:inline-block;width:11px;height:11px;border:1.500px solid var(--ink);border-radius:2px;background:var(--paper)}.c52key i.on{background:var(--c5)}
.c52checks{margin-top:0;padding-left:0!important}.c52checks .tcheck{margin:0}.c52checks .tcheck>b{width:52px;color:#1d1b17}.c52checks .tcheck strong{color:var(--ink)}

/* The live app list */
.c52apps{grid-template-columns:1fr 1fr}.c52apps li{min-width:0}.c52apps a{height:100%}
.c52faq summary{font-size:16px}

@media (max-width:700px){
  .c52charts,.c52apps{grid-template-columns:1fr}.c52toc ol{columns:1}
  .c52>p,.c52>ul,.c52>ol{font-size:16px}.c52grid{grid-template-columns:repeat(10,1fr)}.c52stats b{font-size:22px}.c52pickname strong{font-size:27px}
  .c52tool .c52table table{font-size:12.5px}.c52tool .c52table th,.c52tool .c52table td{padding:8px 7px}
}
/* On a wide screen the two big tables step outside the text column, so every column shows without scrolling. */
@media (min-width:960px){.c52>.c52table{margin-left:-94px;margin-right:-94px}.c52>.c52table+.c52fine{margin-left:-94px}}