/* ontology.css — Ontology (ontology.js), and the shared pieces ontofacts / ontoschema / ontoauto reuse.
   Only .onto-* classes, plus rules scoped to #subrail[data-on="onto"|"auto"], #rail-nav and the two panes.
   Monochrome: tokens only. State colour only via base .state/.dot/.msg. A class only as its .sq.
   The one shadow is the provenance card (.onto-why). */

/* ---------------------------------------------------------------- frame */
.onto-view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.onto-view>.tpage{position:relative}
.onto-lead{display:none}
#emp-head-lead:has(>.onto-lead){display:none}
/* The rail with the Ontology row: at 1440×900 the rows need 601 px and #rail-nav has 600 (564 while the
   reading block shows), so Version control slipped under the fold. Between 801 and 940 tall the rows go
   36 high with no gap and the section labels lose 4 px on top: 561 px. ≤800 keeps base.css's own
   compaction (34 px rows), which this must not override, hence the floor. */
@media (max-height:940px) and (min-height:801px){
  nav#rail-nav .rowbtn{height:36px;margin-bottom:0}
  nav#rail-nav .sec-label{padding-top:8px}
}
#subrail[data-on="onto"] .sec-label,#subrail[data-on="auto"] .sec-label{padding:18px 12px 6px}
/* the reading row when app.js has no ui_railReading (it is drawn by ontology.js then) */
.onto-readbtn{display:flex;flex-direction:column;gap:4px;width:100%;border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:left;color:inherit}
.onto-readbtn .state{font-size:11px;font-weight:400;color:var(--muted)}
.onto-readbtn .bar4{display:block}
#subrail[data-on="onto"] .rowbtn .cnt,#subrail[data-on="auto"] .rowbtn .cnt{margin-left:auto}
.onto-subnone{margin:0;padding:4px 12px 6px;font-size:12.5px;color:var(--faint)}
.onto-capspin{vertical-align:-2px;margin-right:2px;color:var(--muted)}
.onto-spinrow{display:inline-flex;align-items:center;gap:var(--s-m);color:var(--muted)}

/* ---------------------------------------------------------- shared bits */
.onto-glyph{display:inline-grid;place-items:center;flex:none;color:var(--muted)}
.onto-n{height:22px;padding:0 7px;font-variant-numeric:tabular-nums}
.onto-segn{margin-left:6px;color:var(--faint);font-variant-numeric:tabular-nums;font-weight:400}
.onto-dim{color:var(--faint)}
.onto-conf{color:var(--muted);white-space:nowrap}
.onto-conf i{font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
/* the quiet button at the right of a blockhead: 24 high, its label flush with the card's edge like .blockmeta
   (.btn.onto-headbtn beats base .btn.quiet's 32 px / 14 px padding) */
.onto-headbtn{margin-left:auto;font-size:12.5px}
.btn.onto-headbtn{height:24px;padding:0 8px;margin-right:-8px}
.blockhead .blockmeta+.onto-headbtn{margin-left:4px}
.onto-aside,.onto-was{font-size:12.5px;color:var(--faint);font-weight:400;white-space:nowrap}
.onto-aside{margin-left:6px}
.onto-was{margin:0 6px}
.onto-v2{display:block;flex-basis:100%;font-size:12.5px;color:var(--faint);margin-top:2px;font-weight:400}
.onto-dash,.onto-plusn{color:var(--faint)}
/* "+2": more of the same beside a link or a waiting mark (not .onto-more, the phone header's More button) */
.onto-plusn{font-size:12.5px;flex:none}
.onto-cls{flex:none}
.onto-ksq{display:inline-flex;align-items:center;vertical-align:1px;margin-left:6px}
.onto-ksq .sq{display:inline-block;width:6px;height:6px;border-radius:1.5px;flex:none}
.onto-whyask{border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.onto-whyask:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.onto-menu{position:absolute;z-index:6;min-width:240px;max-width:calc(100vw - 16px);padding:6px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-md)}
.onto-menu.is-fixed{position:fixed;z-index:57}
.onto-menuitem{height:34px;font-size:14.5px;color:var(--text)}
.onto-menuitem svg{flex:none;color:var(--muted)}
.onto-menusep{height:1px;background:var(--line);margin:6px 4px}
.onto-menuinfo{display:flex;padding:6px 8px 4px}
.onto-more{display:none}
.onto-phonef{display:none}
.onto-tcontent{display:flex;flex-direction:column;gap:var(--s-l);min-width:0}
.onto-weblink{color:inherit;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.onto-weblink:hover{text-decoration-color:var(--text)}
.onto-group{min-width:0}
.onto-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-xl);align-items:start;min-width:0}
.onto-cols.is-wide{gap:var(--s-xxl)}
.onto-col,.onto-cols>div,.onto-cols>aside{display:flex;flex-direction:column;gap:var(--s-xl);min-width:0}
.onto-rows{padding:0 20px}
.onto-rows .statusrow .k{width:132px}
.onto-sheetlead{margin:0 0 var(--s-xl)}

/* a record named in text */
.onto-ref{display:inline-flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;font-weight:500;cursor:pointer;white-space:nowrap;max-width:100%}
.onto-ref>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
.onto-ref.is-plain{font-weight:400}
.onto-ref svg{color:var(--faint);flex:none}
.onto-ref:hover{text-decoration:underline;text-underline-offset:3px}
.onto-link svg,.onto-objchip svg{color:var(--faint);flex:none}
/* in prose (Chat answers, notes): the record chip sits on the text's baseline, underlined only on hover */
.md a.onto-ref{display:inline;white-space:nowrap;color:var(--text);text-decoration:none;font-weight:500}
.md a.onto-ref svg{display:inline-block;vertical-align:-1px;margin-right:5px}
.md a.onto-ref:hover{text-decoration:underline;text-underline-offset:3px}
/* a record among a message's sources (app.js srcChips, kind "object"): a source chip with the type's glyph */
.srcchip.onto-objchip{color:var(--muted)}
.srcchip.onto-objchip:hover svg{color:var(--text)}

/* rows: sentence, quote, meta */
.onto-row{display:flex;align-items:center;gap:var(--s-l);min-height:48px;padding:10px 16px;border-bottom:1px solid var(--line);min-width:0}
.onto-row:last-child{border-bottom:0}
.onto-row.top{align-items:flex-start}
.onto-ico{width:24px;height:20px;flex:none;display:grid;place-items:center;color:var(--muted)}
.onto-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.onto-t{font-size:14.5px;font-weight:500;color:var(--text);line-height:1.35}
.onto-s{font-size:14.5px;color:var(--text);line-height:1.4}
.onto-s b{font-weight:500}
.onto-old{color:var(--faint)}
.onto-q{font-size:12.5px;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onto-m{font-size:12.5px;color:var(--faint);line-height:1.4;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.onto-m>span{overflow:hidden;text-overflow:ellipsis}
.onto-m>.onto-conf{overflow:visible;flex:none}
.onto-time{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* provenance marks: quiet at rest, one underline under the pointer */
.onto-v{text-decoration:underline dotted transparent;text-decoration-thickness:1px;text-underline-offset:4px;cursor:help;
  transition:text-decoration-color .12s ease;border-radius:4px}
.onto-v:hover,.onto-v:focus-visible,.onto-v.is-open{text-decoration-color:var(--text);outline:0}
.onto-v.is-open{background:var(--line);box-shadow:0 0 0 3px var(--line)}
.onto-pend{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border:1px dashed var(--line2);border-radius:999px;
  font:inherit;font-size:11px;color:var(--muted);white-space:nowrap;vertical-align:1px;font-weight:400;cursor:pointer;background:none;line-height:1}
.onto-pend:hover,.onto-pend.is-open{color:var(--text);border-color:var(--faint)}
.onto-pend.lg{height:26px;font-size:12.5px;padding:0 10px;border-radius:var(--r-sm)}

/* ------------------------------------------ the provenance card (the only floating, shadowed layer) */
.onto-why{position:absolute;z-index:5;width:320px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line2);border-radius:var(--r-md);
  box-shadow:0 18px 50px rgba(0,0,0,.55);padding:14px 16px 8px;display:flex;flex-direction:column;gap:10px;
  font-size:12.5px;color:var(--muted);line-height:1.4;white-space:normal;text-align:left;font-weight:400;cursor:default}
.onto-why.is-fixed{position:fixed;z-index:70}
.onto-why::before{content:"";position:absolute;top:-6px;left:var(--onto-arrow,22px);width:10px;height:10px;background:var(--card);
  border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg)}
.onto-why.side::before{top:var(--onto-arrow-y,16px);left:-6px;border-top:0;border-bottom:1px solid var(--line2)}
.onto-why.is-up::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.onto-why.is-sheet{position:static;width:auto;max-width:none;box-shadow:none;border:0;background:none;padding:0}
.onto-why.is-sheet::before{display:none}
.onto-why-h{display:flex;align-items:baseline;gap:var(--s-m)}
.onto-why-h .eyebrow{margin:0}
.onto-why-n{margin-left:auto;font-size:11px;color:var(--faint)}
.onto-quote{margin:0;padding:1px 0 1px 10px;border-left:2px solid var(--line2);color:var(--text);font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.onto-why-say{margin:0;color:var(--text);font-size:14.5px;line-height:1.4}
.onto-why-gone{margin:0;color:var(--faint)}
.onto-why-src{display:flex;align-items:center;gap:6px;min-width:0}
.onto-why-src svg{color:var(--faint);flex:none}
.onto-why-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.onto-why-src .onto-dim{flex:none}
.onto-chain{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.onto-chain li{position:relative;display:flex;gap:var(--s-m);align-items:baseline;padding-left:18px}
.onto-chain li::before{content:"";position:absolute;left:1px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.onto-chain li.was::before{background:none;border:1px solid var(--faint);width:5px;height:5px}
.onto-chain li:not(:last-child)::after{content:"";position:absolute;left:4px;top:14px;height:calc(100% - 4px);width:1px;background:var(--line2)}
.onto-chain .w{flex:1;min-width:0;color:var(--text)}
.onto-chain li.was .w{color:var(--muted)}
.onto-chain time{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.onto-why-next{display:flex;gap:8px;align-items:baseline;margin:0;font-size:12.5px;color:var(--muted)}
.onto-why-next svg{flex:none;color:var(--faint);position:relative;top:1px}
.onto-why-next .dot{flex:none;position:relative;top:-1px}
.onto-why-next b{font-weight:500;color:var(--text)}
.onto-why-others{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.onto-why-foot{display:flex;align-items:center;gap:2px;border-top:1px solid var(--line);padding-top:6px;margin:0 -8px;flex-wrap:wrap}
.onto-why-foot .btn.sm:not(.quiet){margin-left:auto;margin-right:8px}
.onto-why-foot .btn.quiet.sm{height:28px;padding:0 8px}
.onto-why-foot svg{width:11px;height:11px;color:var(--faint)}
.onto-why-view{padding:4px 8px;color:var(--faint)}

/* ------------------------------------------------------------------ home */
.onto-need{min-height:52px;padding:8px 16px 8px 16px}
.onto-need .nr-sub{white-space:normal;line-height:1.35}
.onto-needbtns{display:flex;align-items:center;gap:6px;flex:none}
.onto-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-l)}
.onto-tile{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-md);padding:12px 14px;text-decoration:none;color:var(--text);
  cursor:pointer;transition:background .12s ease,border-color .12s ease;min-width:0}
.onto-tile:hover,.onto-trow:hover,.onto-evt:hover{background:var(--card2)}
.onto-tile:hover{border-color:var(--line2)}
.onto-tile-h{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;min-width:0}
.onto-tile-h>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onto-tile-h svg{color:var(--muted);flex:none}
.onto-tile-w{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.onto-fig{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:6px}
.onto-tile-s{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onto-ex{display:flex;min-width:0}
.onto-exl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onto-ext{flex:none;white-space:pre}
.onto-trow,.onto-evt{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);transition:background .12s ease;min-width:0}
.onto-trow:last-child,.onto-evt:last-child{border-bottom:0}
.onto-trow .nr-text{flex:1;min-width:0}
.onto-trow .onto-fig{margin:0 0 0 12px;font-size:16px}
.onto-evt>.onto-glyph,.onto-evt>svg{color:var(--muted);flex:none}
.onto-evt .nr-text{flex:1;min-width:0}
.onto-evt .nr-name{font-weight:400}
.onto-evt .nr-name b{font-weight:500}
.onto-evt .nr-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
.onto-evt .btn.quiet{opacity:0;transition:opacity .12s ease}
.onto-evt:hover .btn.quiet,.onto-evt:focus-within .btn.quiet{opacity:1}
.onto-chg{font-weight:400;color:var(--muted)}
.onto-when{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.onto-trace{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:0 var(--s-xs);font-size:12.5px;color:var(--faint)}
.onto-trace .btn{height:24px;padding:0 8px}
.onto-linkrow{text-decoration:none;color:var(--text);padding:8px 16px}
.onto-linkrow:hover{background:var(--card2)}
.onto-phoneidx{display:none}
.onto-phonerows{display:none}
.onto-idx{padding:6px;margin-bottom:var(--s-l)}
.onto-idx .rowbtn{height:44px;color:var(--text)}
.onto-idx .rowbtn .cnt{margin-left:auto}

/* ------------------------------------------------------------- first run */
.onto-startpage{display:flex}
.onto-start{margin:auto;max-width:720px;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s-l);
  text-align:center;padding:48px var(--s-xxl);box-sizing:border-box}
.onto-start>b{font-size:20px;font-weight:600;color:var(--text);line-height:1.25}
.onto-start>p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5;max-width:520px}
.onto-start>.hint{margin:0;max-width:520px}
.onto-start>p.hint{font-size:12.5px}
.onto-start>p.hint:last-child{max-width:none}
.onto-start .btnrow{justify-content:center;margin-top:var(--s-s)}
.onto-start .msg{border:1px solid var(--line);border-radius:var(--r-md);text-align:left;padding:8px 14px}
.onto-mark{width:44px;height:44px;border-radius:var(--r-md);background:var(--card2);display:grid;place-items:center;color:var(--text)}
.onto-starters,.onto-start>.onto-starters{margin:0;font-size:12.5px;color:var(--faint);max-width:none;line-height:1.5}
.onto-starter{border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.onto-starter:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.onto-rule{width:100%;height:0;border:0;border-top:1px solid var(--line);margin:32px 0 8px}
.onto-how{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:stretch;width:100%;text-align:left}
.onto-howc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.onto-howc .eyebrow{margin:0;display:flex;align-items:center;gap:6px}
.onto-howc .eyebrow svg{color:var(--faint)}
.onto-howc .onto-m{white-space:normal;margin-top:auto}
.onto-howc .onto-conf,.onto-howc .onto-conf i{color:inherit}
.onto-arrow{display:grid;place-items:center;color:var(--faint)}

/* ------------------------------------------------------------ type table */
.onto-typebody{gap:var(--s-l)}
.onto-filterf input::-webkit-search-cancel-button{display:none}
.page-head.onto-head #head-tools .searchf{margin:0;align-self:center}
.onto-tbar{display:flex;align-items:center;gap:var(--s-m);min-height:32px;flex-wrap:wrap}
.onto-tbar .seg button{display:inline-flex;align-items:center}
.onto-filterbtn{margin-left:auto}
.onto-filterbtn svg{width:9px;height:9px;color:var(--faint)}
.onto-fchip{padding-right:2px}
.onto-fchip .xbtn.sm{width:22px;height:22px}
.onto-tablecard{padding:0;overflow-x:auto;overscroll-behavior-x:contain}
.onto-tablecard.is-sticky{overflow:visible}
.onto-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14.5px}
.onto-table th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:14px 12px 10px 0;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--card);overflow:hidden;text-overflow:ellipsis}
.onto-table th:first-child{border-top-left-radius:var(--r-lg)}
.onto-table th:last-child{border-top-right-radius:var(--r-lg)}
.onto-table.is-sticky th{position:sticky;top:0;z-index:2}
.onto-table td{padding:0 12px 0 0;height:48px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.onto-table th:first-child,.onto-table td:first-child{padding-left:20px}
.onto-table th:last-child,.onto-table td:last-child{padding-right:20px}
.onto-table.is-wide td:first-child,.onto-table.is-wide th:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
.onto-table.is-wide th:first-child{z-index:3}
.onto-table tbody tr:last-child td{border-bottom:0}
.onto-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)}
.onto-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)}
.onto-table tbody tr{cursor:pointer;transition:background .12s ease}
.onto-table tbody tr:hover,.onto-table tr.is-focus,.onto-table tr.is-sel,
.onto-table.is-wide tbody tr:hover td:first-child,.onto-table.is-wide tr.is-focus td:first-child,.onto-table.is-wide tr.is-sel td:first-child{background:var(--card2)}
.onto-table tbody tr:focus{outline:0}
.onto-table tr.is-sel td:first-child{box-shadow:inset 2px 0 0 var(--line2)}
.onto-table tbody.is-busy{opacity:.55}
.onto-table .nm{font-weight:500}
.onto-table .num,.onto-table .r{text-align:right}
.onto-table th.r .onto-sort,.onto-table th.num .onto-sort{flex-direction:row}
.onto-table .ev{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.onto-table td.num{font-variant-numeric:tabular-nums}
.onto-table td.num,.onto-table th.num{padding-right:18px}
/* a cell: value, "was 6" and waiting marks on one line. The value gives way last in a number column (marks and
   "was" come before it, so the digits keep one right edge); a mark that does not fit ends in an ellipsis. */
.onto-cell{display:flex;align-items:center;gap:6px;min-width:0}
.onto-cell.is-num{justify-content:flex-end}
.onto-cell>.onto-cv{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onto-cell.is-num>.onto-cv{flex:none}
.onto-cell>.onto-was{margin:0;flex:none}
.onto-cell>.onto-pend,.onto-nmpend>.onto-pend{display:inline-block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  padding:0 7px;line-height:18px}
.onto-cell>.onto-cv+.onto-pend,.onto-cell>.onto-was+.onto-pend{flex-shrink:3;min-width:36px}   /* beside a value, the mark gives way first */
.onto-cellpend{display:flex;justify-content:flex-end;gap:4px;min-width:0;margin-top:3px}
.onto-cellpend>.onto-pend{display:inline-block;height:18px;line-height:16px;padding:0 7px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.onto-table .onto-nmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a waiting fact about a field or link that is not a column: under the name, named ("Quality rating: A?") */
.onto-nmpend{display:flex;align-items:center;gap:6px;min-width:0;margin-top:3px;font-weight:400}
.onto-nmpend>.onto-pend{height:18px;line-height:16px}
.onto-table th .onto-ksq{margin-left:0}
.onto-table td.ov{overflow:visible}
.onto-table tr.onto-nomatch{cursor:default}
.onto-table tr.onto-nomatch:hover{background:none}
.onto-nomatchline{display:flex;align-items:center;gap:var(--s-l);color:var(--muted);font-size:14.5px}
.onto-sort{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.onto-sort[aria-sort]{color:var(--text)}
.onto-sort svg{color:var(--faint)}
.onto-tfoot,.onto-selbar{display:flex;align-items:center;gap:var(--s-l);min-height:28px;padding:0 var(--s-xs);font-size:12.5px;color:var(--faint)}
.onto-tfoot>:last-child{margin-left:auto;text-align:right}
.onto-selbar{color:var(--text)}
.onto-selbar .btn:last-child{margin-left:auto}
.onto-list{display:none}
.onto-lrec{text-decoration:none;color:var(--text);padding:8px 4px}
.onto-lrec .onto-pend{height:18px;font-size:11px}
.onto-lsub{display:flex;align-items:center;gap:6px;min-width:0}
.onto-lsubt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onto-lsub>.onto-pend{display:inline-block;flex:0 1 auto;min-width:48px;overflow:hidden;text-overflow:ellipsis;line-height:16px}
.onto-segs{display:none}
.onto-more-rows{align-self:flex-start}
.onto-colsw{display:flex;margin:0 0 var(--s-l)}

/* ------------------------------------------------------------ record page */
.tbody.onto-wide{max-width:984px}
.onto-pager{display:inline-flex;align-items:center;gap:2px}
.onto-pager .xbtn:disabled{opacity:.38;cursor:default}
.onto-pagen{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
.onto-awaithost{display:flex;flex-direction:column;gap:var(--s-s)}
.onto-awaithost:empty{display:none}
.onto-await{display:flex;align-items:center;gap:var(--s-l);padding:10px 12px 10px 16px;border:1.5px dashed var(--line2);border-radius:var(--r-md);
  transition:opacity .24s cubic-bezier(.2,.8,.2,1)}
.onto-await.is-folding{opacity:.3}
.onto-await .onto-main{gap:4px}
.onto-await .onto-m{white-space:normal;flex-wrap:wrap}
.onto-await>.onto-ico{align-self:flex-start;margin-top:1px}
.onto-awaitbtns{display:flex;align-items:center;gap:4px;flex:none}
.onto-awaitdo{font-size:12.5px;color:var(--muted);line-height:1.4}
.onto-awaitmore{align-self:flex-start}
.block.onto-fields,.group>.block.onto-fields{padding:0 20px}
.onto-frow{min-height:52px;position:relative;outline:0}
.onto-frow:focus-visible{box-shadow:inset 2px 0 0 var(--line2)}
.onto-frow .k{width:132px}
.onto-frow .v{display:flex;align-items:baseline;flex-wrap:wrap;min-width:0;gap:0 2px}
.onto-frow .v>.onto-pend{margin-left:6px}
.onto-frow>.srcchip{flex:none;margin-left:auto;max-width:210px}
.onto-frow.onto-unknown .v{color:var(--faint);font-size:12.5px;align-items:center;gap:8px}
.onto-addv{height:24px;padding:0 8px}
.onto-src b{font-weight:500;margin-left:2px}
/* base sets line-height 1 and clips the label span: "Aug" read "Auq". Room for descenders. */
.srcchip.onto-src span{line-height:1.3;padding-bottom:1px}
.srcchip.onto-src.is-open{border-color:var(--line2);color:var(--text);background:var(--card2)}
.onto-links .onto-lgroup:first-child{border-top:0}
.onto-lgroup{display:flex;gap:6px;align-items:center;padding:12px 16px 4px;font-size:12.5px;color:var(--faint);border-top:1px solid var(--line)}
.onto-lgroup:first-child{border-top:0}
.onto-lgroup b{font-weight:600;color:var(--muted)}
.onto-lrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 16px;margin:0 4px;border-radius:var(--r-row)}
.onto-lrow:hover{background:var(--card2)}
.onto-lrow .nr-thumb{width:26px;height:26px;border-radius:7px}
.onto-lrow .nr-text{flex:1;min-width:0}
.onto-lrow:last-child{margin-bottom:8px}
.onto-lname{text-decoration:none;display:block}
.onto-lname:hover{text-decoration:underline;text-underline-offset:3px}
.onto-lrow>.srcchip{flex:none;max-width:180px}
.onto-lrow{position:relative}
.onto-lx{opacity:0;transition:opacity .12s ease}
.onto-lrow:hover .onto-lx,.onto-lx:focus-visible{opacity:1}
@media (hover:hover){
  .onto-lx{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--card2)}
  .onto-lx:hover{background:var(--card)}
}
.onto-lmore{padding:2px 16px 10px 52px;font-size:12.5px;color:var(--faint)}
.onto-lwait{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px 12px;font-size:12.5px;color:var(--faint)}
.board-empty>.onto-lwait{justify-content:center;padding:10px 0 0}
.onto-lwait>.onto-pend{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onto-tl .onto-row{padding:12px 16px 12px 12px;gap:10px}
.onto-tl .onto-q{white-space:normal}
.onto-tl .onto-row.is-fact,.onto-tl .onto-row.is-link{cursor:pointer}
.onto-tl .onto-row.is-fact:hover,.onto-tl .onto-row.is-link:hover,.onto-tl .onto-row.is-open{background:var(--card2)}
.onto-tl .onto-row.is-at{background:var(--card2);transition:background .6s ease}
.onto-tlbtn{align-self:flex-start;height:24px;padding:0 8px;margin-top:2px}
.onto-tlmore{align-self:flex-start;margin-top:-8px}
.onto-segsm{margin-left:auto;align-self:center}
.blockhead .blockmeta+.onto-segsm{margin-left:10px}
.block.onto-tl{overflow:hidden}
.onto-segsm button{height:22px;padding:0 10px}
.block.onto-acts,.group>.block.onto-acts{padding:6px}
.onto-act{width:100%;color:var(--text)}
.onto-act .lbl{flex:1;min-width:0}
.onto-act .onto-dim{font-size:12.5px;margin-right:6px;white-space:nowrap}
.onto-act>svg{color:var(--faint);flex:none}
.onto-act.is-quiet{color:var(--muted)}
.onto-act.is-quiet>svg{color:var(--muted)}
.onto-actrule{border:0;height:1px;background:var(--line);margin:6px 8px}
.onto-lastact{margin:0;padding:8px 10px 6px;font-size:12.5px;color:var(--faint);line-height:1.45}
.onto-askbanner{flex-wrap:wrap;row-gap:var(--s-s)}
.onto-asktext{flex:1 1 0;min-width:0}
.onto-askbanner .onto-whyask{margin-left:4px}
.onto-askbtns{display:flex;gap:6px;margin-left:auto}
.banner.onto-askbanner>.onto-askbtns{flex:0 0 auto}
.onto-askbanner .onto-askbtns .btn{margin-left:0}

/* the map */
.block.onto-map,.group>.block.onto-map{padding:16px}
.onto-map svg{display:block;width:100%;height:auto;overflow:visible}
.onto-map .onto-e{stroke:var(--line2);stroke-width:1;fill:none}
.onto-map .onto-far{stroke-dasharray:2 3}
.onto-map .onto-node{fill:var(--card2);stroke:var(--faint);stroke-width:1.2}
.onto-map .onto-me{fill:var(--card2);stroke:var(--line2);stroke-width:1}
.onto-map text{fill:var(--muted);font-size:11px;font-family:inherit}
.onto-map text.onto-me-t{fill:var(--text);font-size:12.5px;font-weight:500}
.onto-map text.onto-el{fill:var(--faint);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.onto-map text.onto-nl{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.onto-map a{cursor:pointer}
.onto-map .onto-hit{fill:transparent;stroke:none}
.onto-maprow{display:none;padding:6px}
.onto-maprow .rowbtn{color:var(--text)}
.onto-maprow .onto-dim{margin-left:auto;font-size:12.5px}
.onto-maprow .rowbtn>svg{color:var(--faint);flex:none}
.onto-map a:hover text{fill:var(--text)}
.onto-map a:hover .onto-node{stroke:var(--text)}
.onto-mapmsg{display:flex;align-items:center;justify-content:center;gap:var(--s-m);min-height:160px;font-size:12.5px;color:var(--faint)}
.onto-maptools{display:flex;gap:4px;margin-bottom:var(--s-m)}
.onto-mapbig{padding:12px;overflow:hidden}

/* -------------------------------------------------------------- sheets */
.onto-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-xl)}
.onto-field>label{margin:0}
.onto-field .hint.fine{margin:0}
.onto-field .hint{margin:0}
.onto-unit{display:flex;align-items:center;gap:10px}
.onto-unit .f{width:96px;font-variant-numeric:tabular-nums}
.onto-unit.onto-money .f{width:180px}
.onto-unit span{font-size:14.5px;color:var(--muted)}
.onto-next{margin-top:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.onto-next .eyebrow{display:block;margin-bottom:6px}
.onto-next p{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;font-size:12.5px;color:var(--muted);line-height:1.45}
.onto-next p:last-child{margin:0}
.onto-next svg{flex:none;color:var(--faint);position:relative;top:1px}
.onto-next b{font-weight:500;color:var(--text)}
.onto-nexthost:empty{display:none}
.onto-nexthost{margin-bottom:var(--s-l)}
.onto-objsheet .msg,.onto-actsheet .msg{border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:var(--s-l)}
.sheet-pane .msg.onto-match{border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:var(--s-l);padding:8px 12px}
.onto-picker{display:flex;flex-direction:column;gap:6px}
.onto-picklist{display:flex;flex-direction:column}
.onto-pickrow{height:36px;font-size:14.5px;color:var(--text)}
.onto-pickrow .ico{color:var(--muted)}
.onto-pickrow .onto-dim{font-size:12.5px}
.onto-picknone{margin:4px 0 0}
.onto-picked .linkchip{height:32px;padding-right:2px}
.onto-reason{margin:0 0 var(--s-xl);color:var(--muted)}
.onto-keys>.eyebrow{margin-top:var(--s-xl)}
.onto-keys>.eyebrow:first-child{margin-top:0}
.onto-keycard{margin-bottom:0}
.onto-keycard .trow{padding:8px 16px;min-height:40px}
.onto-keycard kbd{color:var(--muted);background:var(--card2);border-radius:3px;padding:2px 6px}

/* ---------------------------------------------------------------- widths */
@media (max-width:1179px){
  .onto-cols{grid-template-columns:minmax(0,1fr)}
  .onto-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the waiting strip's buttons go under its text, lined up with it */
  .onto-await{flex-wrap:wrap;row-gap:8px}
  .onto-awaitbtns{flex:1 1 100%;padding-left:36px}
}
@media (max-width:600px){
  /* the header: the title, and one More for every tool (ui1 §8) */
  .page-head.onto-head{flex-wrap:nowrap;height:auto;min-height:56px;padding:8px 12px 8px 16px}
  .page-head.onto-head .page-title-row{flex:1 1 auto;min-width:0;align-items:center}
  .page-head.onto-head #view-title{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
  .page-head.onto-head #head-tools{width:auto;flex:0 1 auto;margin-left:auto;min-width:0;overflow:visible}
  .page-head.onto-head #head-tools>:not(.onto-more):not(.onto-keep){display:none}
  .page-head.onto-head #head-tools>.onto-keep{flex:0 1 auto;min-width:0;max-width:170px}
  .page-head.onto-head .onto-more{display:inline-grid;place-items:center;width:40px;height:40px;color:var(--text)}
  .searchf.onto-phonef{display:flex;width:100%;height:var(--h-field)}
  .block.onto-map,.onto-maphost .onto-headbtn{display:none}
  .onto-maprow{display:block}
  .banner.onto-askbanner>.onto-askbtns{flex:1 1 100%;margin-left:0}
  .onto-askbtns .btn{flex:1 1 0}
  #emp-head-lead:has(>.onto-lead){display:flex}
  .onto-lead{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;margin-left:-6px;color:var(--text)}
  #subrail[data-on="onto"],#subrail[data-on="auto"]{display:none}
  [data-surf="onto"] .tbody,[data-surf="auto"] .tbody{padding:16px}
  .onto-phoneidx{display:block}
  .onto-tiles{display:none}
  .onto-phonerows{display:block}
  .onto-how{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 24px auto 24px auto}
  .onto-arrow svg{transform:rotate(90deg)}
  .onto-start{padding:32px 16px}
  .onto-start .btnrow{flex-direction:column;align-items:stretch;width:100%}
  .onto-need,.onto-await{flex-wrap:wrap}
  .onto-needbtns,.onto-awaitbtns{flex:1 1 100%;flex-wrap:wrap;padding-left:44px}
  .onto-need .btn{flex:1 1 auto}
  /* the strip's three buttons: full width, equal, edge to edge */
  .onto-awaitbtns{padding-left:0}
  .onto-await .onto-awaitbtns .btn{flex:1 1 0;min-width:0}
  /* a field row: name, the value on its own line, the source chip under it (ui1 §12 phone) */
  .onto-frow{flex-wrap:wrap}
  .onto-frow .k{width:100%}
  .onto-frow .v{flex-basis:100%}
  .onto-frow>.srcchip{margin-left:0;margin-top:4px;max-width:100%}
  /* the record's group heads: eyebrow and button on one line, the counts under them */
  .onto-col .onto-group>.blockhead{flex-wrap:wrap;row-gap:2px}
  .onto-col .onto-group>.blockhead>.blockmeta{order:3;flex-basis:100%;margin-left:0}
  .onto-col .onto-group>.blockhead>.onto-headbtn{margin-left:auto}
  /* the table's views fit the column: short words, and they share the width */
  .onto-tbar .onto-tseg{max-width:100%;min-width:0}
  .onto-tbar .onto-tseg button{flex:1 1 auto;min-width:0;padding:0 10px;justify-content:center}
  .onto-tseg button:has(.onto-segs) .onto-segl{display:none}
  .onto-tseg .onto-segs{display:inline}
  [data-surf="onto"] .seg button,[data-surf="auto"] .seg button{min-height:32px}
  .onto-tbar>.btn.quiet{display:none}
  .onto-tablecard{display:none}
  .onto-list{display:block}
  .onto-tfoot-hint{display:none}
  .onto-evt .nr-sub{white-space:normal}
  .onto-why{width:min(320px,calc(100vw - 24px))}
  .onto-segsm{margin-left:auto}
}
@media (max-width:599px){
  .app:has(.surf-pane[data-surf="onto"]:not([hidden])),
  .app:has(.surf-pane[data-surf="auto"]:not([hidden])){grid-template-columns:minmax(0,1fr)}
  .app:has(.surf-pane[data-surf="onto"]:not([hidden]))>aside#rail,
  .app:has(.surf-pane[data-surf="auto"]:not([hidden]))>aside#rail{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(var(--rail),86vw);transform:translateX(-100%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s}
  .app[data-emp-rail="open"]:has(.surf-pane[data-surf="onto"]:not([hidden]))>aside#rail,
  .app[data-emp-rail="open"]:has(.surf-pane[data-surf="auto"]:not([hidden]))>aside#rail{transform:none;visibility:visible;transition:transform .24s ease-out;
    box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
}
/* touch: the marks that open a card get a hit area of about 34 px without changing how they look */
@media (hover:none),(max-width:600px){
  .onto-src,.onto-pend,.onto-whyask{position:relative}
  .onto-src::after,.onto-pend::after,.onto-whyask::after{content:"";position:absolute;inset:-7px -4px}
}
@media (hover:none){
  .onto-v{text-decoration-color:var(--line2)}
  .onto-lx{opacity:1}
  .onto-evt .btn.quiet{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .onto-v,.onto-tile,.onto-trow,.onto-evt,.onto-table tbody tr,.onto-tl .onto-row.is-at,.onto-await,.onto-lx,.onto-evt .btn.quiet{transition:none}
}