/* The paste-anything reading, on the home page's box and the share page (core/readout.js): the ten checks as
   pips, how the text was read (with a switch), a private-details warning, and for an answer or a draft the
   rows that each lead to the tool that fixes it. */
.pips{display:flex; flex-wrap:wrap; gap:.4rem 1rem}   /* the plain check names vary in length: let each take its own width */
.pips li{display:flex; align-items:center; gap:.4rem; font:500 .78rem/1.2 var(--f-ui); color:var(--ink-3); min-width:0; white-space:nowrap}
.pips li i{width:.55rem; height:.55rem; transform:rotate(45deg); border:1.5px solid var(--bad); flex:none; transition:background .2s, border-color .2s}
.pips li.ok{color:var(--ink)}
.pips li.ok i{background:var(--good); border-color:var(--good)}
.read-as{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem}
.read-as .seg button[aria-checked="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(20,26,23,.12), 0 0 0 1px var(--line-2)}
.read-why{flex:1 1 14rem; margin:0; font:400 .8rem/1.4 var(--f-ui); color:var(--ink-3)}
/* close call: the switch asks to be used */
.read-as.ask .seg{border-color:color-mix(in srgb, var(--hi) 60%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--hi) 18%, transparent)}
.read-as.ask .read-why{color:var(--ink-2)}
.pv-warn{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.7rem .85rem; border-radius:10px; background:var(--hi-wash, rgba(212,160,23,.1)); border:1px solid color-mix(in srgb, var(--hi) 35%, transparent)}
.pv-warn[hidden]{display:none}
.pv-warn p{margin:0; font:400 .9rem/1.4 var(--f-ui); color:var(--ink-2); flex:1 1 16rem}
.pv-warn b{color:var(--ink)}
.pv-acts{display:flex; flex-wrap:wrap; gap:.45rem}
.bench-prompt{display:flex; flex-direction:column; gap:.75rem}
.bench-prompt[hidden],.ans[hidden]{display:none}
.ans{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.ans-row{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.65rem .8rem; border:1px solid var(--line-2); border-radius:10px; background:var(--bg)}
.ans-row div{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.ans-row b{font:600 .92rem/1.3 var(--f-ui); color:var(--ink)}
.ans-row span{font:400 .82rem/1.4 var(--f-ui); color:var(--ink-3); overflow-wrap:anywhere}
.ans-row::before{content:""; flex:none; width:.55rem; height:.55rem; transform:rotate(45deg); border:1.5px solid var(--good); background:var(--good); margin-right:-.3rem}
.ans-row.warn::before{background:transparent; border-color:var(--bad)}
.ans-row .btn{flex:none}