/* ontofacts.css — Review facts, Read notes, the Change sheet and "Facts from this note" (ontofacts.js).
   Only .ofact-* classes (plus base/kit classes scoped under them). Monochrome: tokens only; state colour
   only through base .state/.dot/.msg; the one pale capsule per view is the base .btn. */

/* ---------------------------------------------------------------- Review: the top line */
.ofact-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-m)}
.ofact-top .eyebrow{margin:0}
.ofact-top .chip{height:22px}
.ofact-top>span:not(.chip):not(.eyebrow){font-size:12.5px;color:var(--faint)}
.ofact-top .onto-headbtn{margin-left:auto}
.ofact-top .ofact-clear{height:24px;padding:0 6px;font-size:12.5px}
.ofact-filter{margin:-4px 0 0}
/* the view seg drawn again at the top of the page, for phones only (the header one is onto-deskonly) */
.seg.ofact-phseg{display:none}

/* ---------------------------------------------------------------- Review: the note and its cards */
.ofact-note{display:flex;align-items:center;gap:12px;margin:4px 0 0;min-height:36px}
.ofact-note .nr-text{flex:1;min-width:0}
.ofact-note .btn{margin-left:auto;flex:none}
.ofact-list{display:flex;flex-direction:column;gap:var(--s-m)}
.ofact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  cursor:pointer;transition:background .12s ease,border-color .12s ease,opacity .12s ease;outline:none}
.ofact-card:hover{border-color:var(--line2)}
.ofact-card:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
.ofact-card.is-focus{background:var(--card2);border-color:var(--line2);cursor:default}
.ofact-card.is-focus:focus-visible{outline:none}
.ofact-card.is-focus .btn.sec,.ofact-card.is-focus .btn.danger,.ofact-card.is-focus .chip{border-color:var(--line2)}
.ofact-card.is-leaving{opacity:0;pointer-events:none}
.ofact-card.is-busy{opacity:.55}
.ofact-claim{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:14.5px;line-height:1.45;color:var(--muted);min-width:0}
.ofact-claim svg,.ofact-claim .onto-glyph{color:var(--faint);flex:none}
.ofact-claim>.onto-glyph,.ofact-claim>.chip{align-self:center}
.ofact-claim b{font-weight:500;color:var(--text)}
.ofact-claim s{text-decoration-color:var(--faint);color:var(--faint)}
.ofact-claim .chip{height:22px}
.ofact-claim .onto-was{margin:0;font-size:12.5px}
.ofact-claim .onto-ref{white-space:normal}
.ofact-new{display:inline-flex;align-items:center;gap:6px}
.ofact-arrow{color:var(--faint)}
.ofact-quote{margin:0;padding:1px 0 1px 12px;border-left:2px solid var(--line2);font-size:14.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.ofact-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--s-m);font-size:12.5px;color:var(--faint)}
.ofact-meta .btn.quiet{height:24px;padding:0 6px;font-size:12.5px}
.ofact-sure{color:var(--faint);font-size:12.5px}
.ofact-card.is-chosen .ofact-sure::before{content:"✓ ";color:var(--text)}
.ofact-match{min-width:0}
.ofact-next{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12.5px;color:var(--faint);line-height:1.45}
.ofact-next svg{flex:none;position:relative;top:1px}
.ofact-next b{font-weight:500;color:var(--muted)}
.ofact-warn{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:12.5px;color:var(--muted)}
.ofact-card .btnrow{margin-top:2px}
.ofact-card .hint.fine{margin:0}
.ofact-inote{display:none}
.ofact-inote>.btn.quiet{margin-left:-14px}
.ofact-inote .ofact-doc{margin-top:var(--s-m);width:100%}
.ofact-pad{height:72px}

/* the other notes (or types) */
.ofact-grow{cursor:pointer;padding:8px 16px 8px 20px;outline:none}
.ofact-grow:hover,.ofact-grow:focus-visible{background:var(--card2)}
.ofact-grow:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.ofact-grow:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.ofact-grow:only-child{border-radius:var(--r-lg)}
.ofact-grow .nr-name,.ofact-grow .nr-sub{display:block}
.ofact-grow .nr-name.ofact-gname{display:flex;align-items:center;gap:8px}
.ofact-gname .onto-glyph{color:var(--faint)}
.ofact-grow .onto-dash{color:var(--faint);display:inline-flex}

/* ---------------------------------------------------------------- Review: the side */
.ofact-side{position:sticky;top:0;margin-top:56px;display:flex;flex-direction:column;gap:var(--s-xl)}
.ofact-doc{background:var(--side);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px 12px;min-width:0}
.ofact-doc .nr-name{white-space:normal;display:block}
.ofact-doc .nr-sub{display:block}
.ofact-doc .rule{margin:14px 0}
.ofact-docbody{max-height:max(180px,calc(100vh - 360px));overflow:auto;margin:0 -8px;padding:0 8px}
.ofact-docbody p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.ofact-docbody>p:first-child{margin-top:0}
.ofact-docbody>p:last-child{margin-bottom:0}
.ofact-docbody p.onto-spinrow{display:flex;white-space:normal;font-size:12.5px}
.ofact-doc mark.note-hit{color:var(--text)}
.ofact-doc .ofact-open{margin:2px 0 0 -12px}
.ofact-also{color:var(--text);text-decoration:underline dotted var(--faint);text-underline-offset:3px;cursor:pointer}
.ofact-also:hover{text-decoration-color:var(--muted)}
.block.ofact-auto{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.block.ofact-auto .switch{white-space:normal}
.block.ofact-auto .swtitle{font-size:14.5px}
.block.ofact-auto .swhelp{margin:0}
.block.ofact-auto .switch:has(input:disabled){cursor:default;opacity:.62}

/* ---------------------------------------------------------------- Review: Approved / Rejected */
.ofact-day .blockhead{margin-bottom:var(--s-m);padding:0 var(--s-xs)}
.ofact-day .blockmeta{color:var(--faint)}
.ofact-row .nr-name{white-space:normal}
.ofact-row .nr-name .onto-s{color:var(--text)}
.ofact-row .nr-name .onto-s b{font-weight:500}
.ofact-q{color:var(--muted);cursor:pointer;text-decoration:underline dotted var(--line2);text-underline-offset:3px}
.ofact-q:hover,.ofact-q.is-open{color:var(--text);text-decoration-color:var(--faint)}

/* ---------------------------------------------------------------- the Change sheet */
.ofact-change .ofact-quote{margin-bottom:6px}
.ofact-from{margin:0 0 var(--s-xl)}
.ofact-about .block.ofact-cands{padding:6px;display:flex;flex-direction:column;gap:2px}
.ofact-cand{height:auto;min-height:38px;padding:6px 10px;text-align:left;width:100%}
.ofact-cand .lbl{display:flex;flex-direction:column;gap:1px;min-width:0;white-space:normal}
.ofact-cand .lbl>span:first-child{color:var(--text)}
.ofact-why{font-size:12.5px;color:var(--faint);font-weight:400}
.ofact-cand .ico{color:var(--faint)}
.ofact-newname{margin-top:var(--s-s)}
.ofact-other{margin-top:var(--s-s)}
.ofact-err{border-radius:var(--r-sm);border:1px solid var(--line);margin-top:var(--s-m)}
.ofact-nexthost:empty{display:none}
.ofact-nexthost .onto-next{margin-top:0}

/* ---------------------------------------------------------------- Read notes: the state card */
.block.ofact-run{padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px}
.ofact-run-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:24px}
.ofact-run-btns{margin-left:auto;display:flex;gap:var(--s-m)}
.ofact-run-n{font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.ofact-left{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ofact-say{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.ofact-sub{margin:-8px 0 0;font-size:12.5px;color:var(--faint)}
/* the line that says the reading was carried on by itself: quiet, one line, its own way out
   (.ofact-auto is already the Review page's auto-approve card, so this one is .ofact-carried) */
.ofact-carried{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.ofact-carried .btn.quiet{height:24px;padding:0 6px;font-size:12.5px;margin-left:-6px}
.ofact-run .btn.ofact-go{align-self:flex-start}
.ofact-run .msg{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg)}
.ofact-tallies{display:flex;flex-wrap:wrap;gap:16px 40px;padding-top:4px}
.ofact-tally{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit}
.ofact-tally b{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.ofact-tally span{font-size:12.5px;color:var(--muted)}
button.ofact-tally{cursor:pointer}
button.ofact-tally:hover span{color:var(--text)}
button.ofact-tally span{text-decoration:underline dotted var(--line2);text-underline-offset:3px}
.ofact-now{display:flex;align-items:center;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);min-width:0}
.ofact-now{align-items:flex-start}
.ofact-now .live-spin{flex:none;margin-top:2px}
.ofact-now>span:not(.live-spin){min-width:0;white-space:normal;line-height:1.45}

/* Read: each eyebrow and its card are one section.group; the column's 16px gap falls between groups */
.group.ofact-grp{min-width:0}
.ofact-grp>.hint{margin:var(--s-m) 0 0}

/* the funnel, and every card of rows: the hover fill keeps the card's corners */
.ofact-funnel,.ofact-earlier,.ofact-notelist,.ofact-showcard,.ofact-nfcard,.ofact-day>.block{overflow:hidden}
.ofact-find{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 20px;border-bottom:1px solid var(--line)}
.ofact-find:last-child{border-bottom:0}
.ofact-find>b{width:48px;flex:none;text-align:right;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ofact-find .nr-text{flex:1;min-width:0}
.ofact-find .nr-name,.ofact-find .nr-sub{display:block}
.ofact-find .nr-sub{white-space:normal}
.ofact-find>.btn{flex:none}

/* the notes of this reading */
.ofact-notes{gap:var(--s-l)}
.ofact-noteshost{width:100%;display:flex;flex-direction:column;gap:var(--s-l)}
.ofact-noteshost .seg{align-self:flex-start}
.ofact-notelist .noterow{padding:8px 16px 8px 20px}
.ofact-notelist .noterow:hover{background:var(--card2)}
.ofact-mk{width:16px;display:inline-grid;place-items:center;flex:none}
.ofact-nrow .nr-text{flex:1;min-width:0}
.ofact-nrow .nr-name,.ofact-nrow .nr-sub{display:block}
.ofact-nrow .nr-sub{white-space:normal}
.ofact-none{padding:14px 20px;margin:0}
.ofact-earlier .state.ofact-sw{flex:none}

/* the start sheet */
.ofact-start>label{display:block;margin:0 0 var(--s-s)}
.ofact-start>label~label{margin-top:var(--s-xl)}
.ofact-start .seg.ofact-scope{margin-bottom:var(--s-m)}
.ofact-start .ofact-folder{margin-bottom:var(--s-s)}
.ofact-est{margin:var(--s-l) 0 var(--s-xl);font-size:12.5px;color:var(--muted);line-height:1.5;min-height:18px}
.ofact-what .statusrow .k{width:118px}
.ofact-what .statusrow .v{font-size:12.5px;color:var(--muted);line-height:1.45}

/* the Show sheets */
.ofact-show>.eyebrow{margin-top:var(--s-xl)}
.ofact-show .block.ofact-showcard{margin-bottom:0}
.ofact-show .onto-evt>svg{color:var(--faint)}

/* ---------------------------------------------------------------- the note reader: Facts from this note */
.ofact-nf{display:flex;flex-direction:column;gap:var(--s-m);width:100%;padding-top:var(--s-s)}
.ofact-nfhead{display:flex;align-items:center;gap:var(--s-m)}
.ofact-nfhead .eyebrow,.ofact-nfeye{margin:0}
.ofact-nfhead .btn{margin-left:auto;height:24px;padding:0 6px;font-size:12.5px}
.ofact-nfeye{margin-top:var(--s-s)}
.ofact-nfcard .onto-evt{min-height:44px}
.ofact-nfcard .onto-ref{font-size:12.5px;flex:none;max-width:40%;overflow:hidden}
.ofact-nfcard .ofact-sure{flex:none}
.ofact-nfrow{margin-top:var(--s-xs)}
.ofact-nfout{margin:0}

/* ---------------------------------------------------------------- widths */
@media (max-width:1179px){
  .ofact-side{position:static;margin-top:0}
  .ofact-side>.ofact-doc{display:none}
  .ofact-inote{display:flex;flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .seg.ofact-phseg{display:inline-flex;align-self:flex-start;max-width:100%}
  .ofact-top .onto-headbtn{margin-left:0;padding-left:0;padding-right:0}
  .ofact-card .btnrow{display:flex}
  .ofact-card .btnrow .btn{flex:1 1 0;padding:0 8px}
  .ofact-note .btn{padding:0 6px}
  .ofact-rdhead{flex-direction:column;align-items:flex-start;gap:2px}
  .ofact-rdhead .blockmeta{margin-left:0}
  .ofact-find{flex-wrap:wrap;padding:10px 16px}
  .ofact-find .nr-text{flex:1 1 calc(100% - 64px)}
  .ofact-find>.btn{margin-left:62px}
  .ofact-find>.btn.quiet{margin-left:48px}
  .ofact-day .onto-evt{flex-wrap:wrap;padding:10px 16px}
  .ofact-day .onto-evt .nr-text{flex:1 1 calc(100% - 40px)}
  .ofact-day .onto-evt .onto-when{margin-left:27px}
  .ofact-day .onto-evt .btn.quiet{margin-left:auto}
  .ofact-tallies{gap:14px 28px}
  .ofact-tally b{font-size:20px}
  .ofact-run-btns{margin-left:0}
  .ofact-run-btns>.btn.quiet:first-child{margin-left:-14px}
  .ofact-earlier .onto-evt{flex-wrap:wrap}
  .ofact-earlier .state.ofact-sw{min-width:0;flex:1 1 100%}
  .ofact-what .statusrow{flex-direction:column;align-items:flex-start;gap:2px}
  .ofact-nfcard .onto-evt{flex-wrap:wrap}
  .ofact-nfcard .onto-ref{max-width:100%;margin-left:27px}
}
@media (prefers-reduced-motion:reduce){
  .ofact-card{transition:none}
}