/* G4-CLAR1 (the Owner 2026-10-02): the explanation that opens in place on the quality page (the reasons, the checks, the score cards), the source
   diagnostics in words, the statements' «how it is computed» switch and the statement designer's guide. Loaded after the header sheet; the color sheet
   stays the last one. Colors come from the theme tokens. */
/* ---- the quality cards open their explanation */
#qualityCards [data-clar1-card]{cursor:pointer;position:relative;transition:border-color .15s ease,transform .15s ease}
#qualityCards [data-clar1-card]:hover{border-color:var(--accent,#43c9ff)}
#qualityCards [data-clar1-card]:focus-visible{outline:2px solid var(--accent,#43c9ff);outline-offset:2px}
#qualityCards [data-clar1-card][aria-expanded="true"]{border-color:var(--accent,#43c9ff)}
.clar1-more{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--accent,#43c9ff)}
/* ---- the reasons of the trust card */
.clar1-reasons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.clar1-chip,.clar1-why,.clar1-go,.clar1-link{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.18));background:transparent;color:inherit;padding:4px 12px;font-size:13px;line-height:1.5}
.clar1-chip{border-color:rgba(255,107,125,.55);background:rgba(255,107,125,.08)}
.clar1-chip:hover,.clar1-chip[aria-expanded="true"]{background:rgba(255,107,125,.18)}
.clar1-why{display:block;width:fit-content;margin-top:6px;font-size:12px;color:var(--accent,#43c9ff);border-color:transparent;padding:2px 0;background:none;text-decoration:underline;text-underline-offset:3px}
.clar1-link{border:none;padding:0;background:none;color:var(--accent,#43c9ff);text-decoration:underline;text-underline-offset:3px;border-radius:0}
.clar1-go{border-color:var(--accent,#43c9ff);color:var(--accent,#43c9ff);font-weight:600}
.clar1-go:hover{background:rgba(67,201,255,.12)}
.clar1-chip:focus-visible,.clar1-why:focus-visible,.clar1-go:focus-visible,.clar1-link:focus-visible,.clar1-close:focus-visible{outline:2px solid var(--accent,#43c9ff);outline-offset:2px}
.clar1-hint{display:block;width:100%;color:var(--muted,#9fb0c3);font-size:12px}
/* ---- the panel */
.clar1-panel{margin:10px 0 4px;padding:12px 14px;border:1px solid var(--accent,#43c9ff);border-radius:12px;background:var(--panel2,rgba(67,201,255,.05));color:var(--text,inherit);box-shadow:0 6px 22px rgba(0,0,0,.18)}
.clar1-panel:focus{outline:none}
.control-check>.clar1-panel{display:block}/* inside a check card the panel is a block, not one of the card's flex rows */
.clar1-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.clar1-head b{font-size:15px}
.clar1-close{font:inherit;font-size:18px;line-height:1;cursor:pointer;width:30px;height:30px;border-radius:50%;border:1px solid var(--line,rgba(255,255,255,.18));background:transparent;color:inherit;flex:none}
.clar1-block{margin:8px 0}
.clar1-block>b{display:block;font-size:13px;color:var(--accent,#43c9ff);margin-bottom:2px}
.clar1-block p,.clar1-panel>p{margin:4px 0}
.clar1-panel .control-check p{color:inherit}
.clar1-steps{margin:4px 0;padding-inline-start:20px}
.clar1-steps li{margin:3px 0}
.clar1-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.clar1-note{color:var(--muted,#9fb0c3);font-size:12px}
.clar1-score{list-style:none;margin:6px 0;padding:0}
.clar1-score>li{margin:6px 0}
.clar1-score ul{list-style:none;margin:4px 0;padding-inline-start:14px}
.clar1-score small{color:var(--muted,#9fb0c3)}
.clar1-ok{color:#3ecf8e}
/* ---- the source diagnostics in words */
.clar1-sub{margin:4px 0;font-weight:700}
.clar1-count{color:var(--muted,#9fb0c3);font-size:12px}
.clar1-files{margin:6px 0;padding-inline-start:18px}
.clar1-files li{margin:3px 0;color:var(--muted,#9fb0c3)}
.clar1-diag-info>summary{cursor:pointer;color:var(--muted,#9fb0c3);margin:8px 0}
/* ---- the statements: how a calculated line is computed */
#statementTable .clar1-formula-switch,.clar1-formula-switch{display:flex;flex-direction:row;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0 0 10px;font-size:13px;font-weight:500;color:var(--muted,#9fb0c3);cursor:pointer;white-space:normal}
#statementTable .clar1-formula-switch input{width:auto;height:auto;margin:0;flex:none}
.statement-label .clar1-formula,.clar1-formula{display:block;font-family:inherit;letter-spacing:normal;text-transform:none;font-size:12px;color:var(--muted,#9fb0c3);font-weight:400}
/* ---- the statement designer guide */
.clar1-designer-help{margin:8px 0 12px;padding:8px 12px;border:1px dashed var(--line,rgba(255,255,255,.2));border-radius:10px}
.clar1-designer-help>summary{cursor:pointer;font-weight:600;color:var(--accent,#43c9ff)}
.clar1-designer-help dl{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:6px 14px;margin:10px 0 2px}
.clar1-designer-help dt{font-weight:700}
.clar1-designer-help dd{margin:0;color:var(--muted,#9fb0c3)}
.designer-row [title]{cursor:help}
.designer-row input[title],.designer-row select[title]{cursor:auto}
@media (max-width:640px){
 .clar1-designer-help dl{grid-template-columns:1fr}
 .clar1-designer-help dd{margin-bottom:6px}
 .clar1-panel{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){#qualityCards [data-clar1-card]{transition:none}}