/* Record pages: the register pages and their toolbar (Rows / History tabs, search, filters, count),
   the document page, and the process page, read and edited in place (process-form.js). */

/* Register pages */
.reg-table td{max-width:22.5rem}
.reg-table th{white-space:nowrap}
.coldefs{display:grid;grid-template-columns:max-content 1fr;gap:calc(0.125rem * var(--dz)) var(--space-2);margin:var(--space-2) 0 0;font-size:var(--fs-sm)}
.coldefs dd{margin:0;color:var(--ink-2)}
.check{display:inline-flex;align-items:center;gap:calc(0.375rem * var(--dz));font-size:var(--fs-md);color:var(--ink-2);white-space:nowrap}
.check input{accent-color:var(--m-system)}

/* Register toolbar: title and action; Rows / History tabs; then search, filters, change filter, count */
.tabs-row{display:flex;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--rule);margin:0 0 calc(0.625rem * var(--dz))}
.tabs-row > :is(.primary-btn,.pop-right,#sf-btn){margin-left:auto}
.tabs-row > #sf-btn + .pop-right{margin-left:0}
/* Underline tabs */
.view-tabs{border:0;margin:0;padding:0;min-width:0}
.view-tabs .seg-opts{gap:var(--space-4)}
.view-tabs label{position:relative;display:inline-flex;align-items:center;gap:calc(0.375rem * var(--dz));height:var(--ctl-h);margin-bottom:calc(-0.0625rem * var(--dz));border-bottom:2px solid transparent;font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--muted);cursor:pointer;white-space:nowrap}
.view-tabs label:hover{color:var(--ink-2)}
.view-tabs label:has(input:checked){color:var(--ink);border-bottom-color:var(--accent)}
.view-tabs label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.reg-filterbar .filters{flex:1 1 20rem}
.reg-filterbar .count{margin-left:auto}
.chg-filter label{font-weight:var(--fw-medium);gap:var(--space-1)}
.chg-filter label:has(input:checked){color:var(--ink)}

/* Document page */
#view-doc{padding-bottom:var(--space-4)}
#doc-body{display:flex;flex-direction:column;gap:var(--space-3);max-width:68.75rem}
.doc-head h2{margin:calc(0.125rem * var(--dz)) 0 var(--space-2);font-size:var(--fs-2xl)}
.doc-code{display:inline-block;font-size:var(--fs-md);font-weight:var(--fw-heavy);color:var(--on-accent);background:var(--accent);border-radius:var(--radius-xs);padding:calc(0.125rem * var(--dz)) calc(0.4375rem * var(--dz));vertical-align:3px;margin-right:calc(0.375rem * var(--dz))}
.doc-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);align-items:stretch}
.doc-col h4{margin:0 0 calc(0.375rem * var(--dz))}
.doc-mid{display:flex;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--fs-2xl)}
.doc-card{font-size:var(--fs-md);font-weight:var(--fw-heavy);color:var(--ink);background:var(--tile-bg);border:var(--tile-border);border-radius:var(--card-radius);padding:var(--space-3) var(--space-2);box-shadow:var(--card-shadow)}
.doclink{text-decoration-style:dotted}
@media (max-width:45em){.doc-flow{grid-template-columns:1fr}.doc-mid{justify-content:center;transform:rotate(90deg)}}

/* Process pages */
#view-proc{padding-bottom:var(--space-4)}
#proc-body{display:flex;flex-direction:column;gap:var(--space-3)}
#view-proc.view-fill{padding-bottom:0}
#view-proc.view-fill #proc-body{flex:1;min-height:0;gap:0}
#proc-body .tabs-row{margin:0;padding-bottom:var(--space-2)}
.proc-search{flex:1 1 15rem;max-width:22.5rem}
.proc-search input{width:100%}
#proc-body .tabs-row .count{margin-left:auto}
#proc-body .tabs-row > .primary-btn{margin-left:0}
.proc-sipoc{margin:0}
/* Part and section headings with a count or chip beside them */
.proc-sipoc h4,#proc-body .card h4,.pf-part h4,.pf-steps h4,#pf-feeds h4{display:flex;align-items:center;gap:var(--space-2)}
.proc-sipoc h4,#proc-body .card h4{margin:0 0 calc(0.375rem * var(--dz))}
/* The process page's SIPOC heads match the form's: a letter tile, then the part in ink */
.proc-sipoc h4{font-size:var(--fs-base);color:var(--ink)}
.proc-sipoc h4 > span:first-child{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.proc-sipoc h4 .ld-letter{margin:0}
#proc-body .card h4 b{font-size:inherit;color:var(--ink)}
/* inline-block aligned to the top so the list number sits on the first line of a wrapped step */
.proc-sipoc ol .linkish{display:inline-block;vertical-align:top;text-align:left;font:inherit}
.proc-steps,.x-scroll{overflow-x:auto;position:relative} /* anchors the header's sr-only text so it scrolls with the table */
#proc-body .handoffs{margin:0}
#proc-body .handoffs h4{margin:0 0 calc(0.375rem * var(--dz))}

/* The process page as a form (process-form.js): the same page, editable in place */
.proc-form{display:flex;flex-direction:column;gap:var(--gap-card);padding-bottom:var(--space-4)}
.pf-title{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-1) 0}
.pf-name{flex:1;min-width:0}
.pf-name input{width:100%;box-sizing:border-box;font-size:var(--fs-xl);font-weight:var(--fw-bold);padding:calc(0.25rem * var(--dz)) var(--space-2)}
.pf-details{margin-top:var(--space-3)}
.pf-sipoc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
.pf-part h4,.pf-steps h4,#pf-feeds h4{margin:0 0 var(--space-2);font-size:var(--t-title)}
.pf-part h4 small,.pf-steps h4 small,#pf-feeds h4 small{font-size:var(--t-meta);font-weight:var(--fw-regular)}
.proc-form .list-field{border:0;padding:0;margin:0}
.pf-steps ol{margin:0 0 var(--space-2);padding-left:calc(1.125rem * var(--dz))}
.pf-meta .meta{margin:0;border:0;padding:0}
.pf-bar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-overlay)}
.pf-bar .ed-error{margin:0 auto 0 0}
@media (max-width:56em){.pf-sipoc{grid-template-columns:1fr}}

/* A register with no rows yet (registers.js emptyState) */
.reg-empty{display:flex;align-items:center;gap:calc(2rem * var(--dz));max-width:48rem;margin:var(--space-4) auto;padding:var(--space-4);white-space:normal}
.reg-empty .illus{flex:none;width:clamp(8rem,16vw,12rem)}
.reg-empty h3{margin:0 0 var(--space-2);font-size:var(--fs-xl);color:var(--ink)}
.reg-empty p{margin:0 0 var(--space-3);color:var(--ink-2)}
@media (max-width:45em){.reg-empty{flex-direction:column;align-items:flex-start}}

/* New … on a reference list: available, but not the usual task (the charts and rules read these lists) */
#reg-add.is-quiet{background:var(--surface-2);color:var(--ink);border-color:var(--line)}