/* Reader layout (reader.js). Only BARK tokens (tokens.css). Apart from the default pane widths
   below, every rule is scoped to a class reader.js adds (body.reader and the reader-* nodes). */
:root { --p1-w:calc(var(--space-16) * 5); --p2-w:calc(var(--space-16) * 5); --p4-w:calc(var(--space-16) * 5); }
.reader [hidden] { display:none !important; }
.reader-workspace-header { background:var(--surface);border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-6); }
.reader-heading-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4); }
.reader-button { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--surface);color:var(--fg);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;white-space:nowrap; }
.reader-button:hover { background:var(--neutral-warm,var(--surface-sunken)); }
.reader-button[aria-expanded=true] { background:var(--primary-tint);border-color:var(--primary-border); }
.reader [data-toggle] { transform:none !important; }
.reader-act-name { flex:1;min-width:0; }
.reader-act-name .sname { font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--fg); }
.reader-version { display:flex;align-items:center;gap:var(--space-2); }
.reader-version-label { font-size:var(--text-xs);color:var(--fg-tertiary); }
.reader-version .spick { margin:0;padding:0;border:0; }
.reader-version .spick select { padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-xs);color:var(--fg);background:var(--surface); }
.reader-workspace-header .upcoming { margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);align-items:center; }
.reader-workspace-header .upcoming .upt { flex:1; }
.reader-workspace-header .upcoming .upl { display:flex;flex-wrap:wrap;gap:var(--space-4);white-space:nowrap; }
.reader-workspace-header .snotice { margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3); }
body.reader .shell4 { position:relative;grid-template-columns:var(--reader-lib-col,0px) var(--reader-lib-gutter,0px) var(--reader-contents-col,var(--p2-w)) 5px minmax(0,1fr) var(--reader-detail-gutter,0px) var(--reader-detail-col,0px);height:calc(100vh - var(--site-nav-h) - var(--reader-header-h,0px)); }
.reader #p1 { grid-column:1;grid-row:1; }
.reader [data-gutter=p1] { grid-column:2;grid-row:1; }
.reader #p2 { grid-column:3;grid-row:1; }
.reader [data-gutter=p2] { grid-column:4;grid-row:1; }
.reader #p3 { grid-column:5;grid-row:1; }
.reader [data-gutter=p4] { grid-column:6;grid-row:1; }
.reader #p4 { grid-column:7;grid-row:1; }
body.reader.p2-off .shell4 { --reader-contents-col:0px; }
body.reader.reader-pin-p1:not(.p1-off) .shell4 { --reader-lib-col:var(--p1-w);--reader-lib-gutter:5px; }
body.reader.reader-pin-p4:not(.p4-off) .shell4 { --reader-detail-col:var(--p4-w);--reader-detail-gutter:5px; }
.reader:not(.reader-pin-p1) #p1,.reader:not(.reader-pin-p4) #p4 { position:absolute;grid-column:1 / -1;top:0;bottom:0;z-index:var(--z-dropdown,30);width:calc(var(--space-16) * 6);max-width:100%;box-shadow:var(--shadow-md); }
.reader:not(.reader-pin-p1) #p1 { left:0;border-right:1px solid var(--border-strong); }
.reader:not(.reader-pin-p4) #p4 { right:0;border-left:1px solid var(--border-strong); }
.reader:not(.reader-pin-p1) [data-gutter=p1],.reader:not(.reader-pin-p4) [data-gutter=p4] { display:none; }
.reader .gutter .collapse { display:none; }
.reader .gutter { border-right:1px solid var(--border); }
.reader-panel-tools { display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:2; }
.reader-panel-tools strong { flex:1;font-size:var(--text-sm);font-weight:var(--weight-semibold); }
.reader-panel-pin { border:0;background:transparent;color:var(--link);font:inherit;font-size:var(--text-xs);padding:var(--space-2);cursor:pointer; }
.reader-panel-close { font-size:var(--text-xs);padding:var(--space-1) var(--space-2); }
.reader #p1 .phead { display:none; }
.reader #p2 .phead { padding:var(--space-4) var(--space-4) var(--space-2); }
.reader-contents-label { font-size:var(--text-sm);font-weight:var(--weight-semibold); }
.reader #p2 .phead { display:flex;align-items:center;justify-content:space-between; }
.reader .reader-contents-close,.reader .reader-contents-toggle { display:inline-flex;background:transparent;border:0;color:var(--fg-tertiary);padding:var(--space-2);border-radius:var(--radius-md); }
.reader .reader-contents-close:hover,.reader .reader-contents-toggle:hover { background:var(--primary-tint);color:var(--fg); }
.reader .reader-contents-close:focus-visible,.reader .reader-contents-toggle:focus-visible { outline:var(--radius-xs) solid var(--primary);outline-offset:var(--space-1); }
.reader-sidebar-icon { width:var(--space-4);height:var(--space-4);flex:none; }
.reader:not(.p2-off) .reader-contents-toggle { display:none; }
.reader #p2 .lsearch { margin:0 var(--space-3) var(--space-3); }
.reader #p2 .navtree { padding-left:var(--space-2);padding-right:var(--space-2); }
.reader .p3 > .main { padding:0 var(--space-6) var(--space-6); }
.reader-document-toolbar { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;margin:0 0 var(--space-5);border-bottom:1px solid var(--border);min-height:var(--space-12); }
.reader-modes { display:flex;align-items:stretch;gap:var(--space-5); }
.reader-mode { display:inline-flex;align-items:center;color:var(--fg-tertiary);font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-2) 0;border-bottom:2px solid transparent; }
.reader-mode:hover { text-decoration:none;color:var(--fg); }
.reader-mode.active { color:var(--fg);border-bottom-color:var(--primary);font-weight:var(--weight-semibold); }
.reader-document-actions { margin-left:auto;display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; }
.reader-document-actions .copy { margin-left:0; }
.reader-contents-toggle { padding:var(--space-1) var(--space-2);font-size:var(--text-xs); }
.reader .cmpform { display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-4); }
.reader .cmpform select { border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font:inherit;background:var(--surface);color:var(--fg); }
.reader .cmpsum { padding:var(--space-3);background:var(--surface-sunken);border-radius:var(--radius-md); }
.reader .cmph { margin-top:var(--space-5); }
.reader .cmplist li { padding:var(--space-3) 0;border-bottom:1px solid var(--divider); }
.reader .cmpp { display:block;margin-top:var(--space-1); }
.reader-unchanged { margin-top:var(--space-5);border-top:1px solid var(--border);padding-top:var(--space-3); }
.reader-unchanged > summary { color:var(--fg-tertiary);font-size:var(--text-xs);cursor:pointer; }
.reader-rel > summary { cursor:pointer; }
.reader-rel > summary h2 { display:inline; }
.reader-rel[open] > summary { margin-bottom:var(--space-3); }
.reader .reader-provision-compare { padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md); }
.reader.source-on #p3 > .main { padding-left:var(--space-4);padding-right:var(--space-4); }
.reader.source-on .reader-document-toolbar { flex-wrap:wrap; }
@media(max-width:1000px){
  .reader .ptabs { display:none; }
  body.reader .shell4 { display:grid; }
  body.reader .shell4 > .pane { display:flex;visibility:visible;min-height:0; }
  body.reader .shell4 > #p3,body.reader .shell4 > #p4 { display:block;overflow:auto; }
  body.reader.source-on .shell4 > #p3 { display:grid; }
  body.reader.p1-off #p1,body.reader.p2-off #p2,body.reader.p4-off #p4 { visibility:hidden; }
  .reader #p2 .navtree,.reader #p1 .navtree { overflow:auto; }
  .reader-heading-row { gap:var(--space-3); }
  .reader-act-name { flex-basis:50%; }
}
@media(max-width:700px){
  .reader-contents-close { display:inline-flex; }
  .reader-heading-row { display:flex;flex-wrap:wrap; }
  body.reader .shell4 { --reader-contents-col:0px;--reader-lib-col:0px;--reader-detail-col:0px;--reader-lib-gutter:0px;--reader-detail-gutter:0px;grid-template-columns:0 0 0 0 minmax(0,1fr) 0 0; }
  .reader #p2 { position:absolute;grid-column:1 / -1;top:0;bottom:0;left:0;width:min(100%,calc(var(--space-16) * 5));z-index:var(--z-dropdown,30);border-right:1px solid var(--border); }
  .reader.reader-pin-p1 #p1,.reader.reader-pin-p4 #p4 { position:absolute;top:0;bottom:0;z-index:var(--z-dropdown,30);width:min(100%,calc(var(--space-16) * 6)); }
  .reader #p1 { left:0; }.reader #p4 { right:0; }
  .reader-workspace-header { padding:var(--space-3); }
  .reader-act-name { order:-1;flex-basis:100%; }
  .reader-version { flex-wrap:wrap;max-width:100%; }.reader-version select { max-width:100%; }
  .reader .p3 > .main { padding:0 var(--space-3) var(--space-4); }
  .reader-document-toolbar { flex-wrap:wrap;gap:var(--space-2); }
  .reader-document-actions { gap:var(--space-2); }
}

/* Paragraph correspondence controls; existing BARK palette and spacing. */
.reader-match-bar { display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;margin-bottom:var(--space-3);font-size:var(--text-xs);color:var(--fg-tertiary); }
.reader-match-bar [role=status] { flex:1; }
.reader-match-clear { font:inherit;color:var(--fg);background:var(--surface);border:var(--radius-xs) solid var(--border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-2);cursor:pointer; }
.reader-match-clear:hover { background:var(--primary-tint); }
.reader-match-bar { position:sticky;top:0;background:var(--surface);z-index:var(--z-dropdown,30); }

/* Source is an explicit action and a plain pane heading, rather than duplicate pills. */
.reader .reader-source-toggle { display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2);margin-left:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--fg);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap; }
.reader .reader-source-toggle.on { background:transparent;color:var(--fg);border:0; }
.reader .reader-source-toggle:hover { background:var(--primary-tint); }
.reader .reader-source-toggle:focus-visible,.reader .srcbar .sideclose:focus-visible { outline:var(--radius-xs) solid var(--primary);outline-offset:var(--space-1); }
.reader .srcbar { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);padding:var(--space-3);white-space:normal;align-items:start; }
.reader-source-info { grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:var(--space-1);min-width:0; }
.reader-source-info strong { color:var(--fg);font-size:var(--text-sm);font-weight:var(--weight-semibold); }
.reader .reader-source-info .srcv { font-family:var(--font-body);font-size:var(--text-xs); }
.reader .srcbar [data-srcfull],.reader .srcbar [data-qafull] { grid-column:1;grid-row:2;justify-self:start;margin:0; }
.reader .srcbar .sideclose { grid-column:2;grid-row:1;margin:0;padding:var(--space-2);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--fg);border-radius:var(--radius-md);white-space:nowrap; }
.reader .srcbar .sideclose:hover { background:var(--primary-tint); }
.reader .srcbar [data-tab] { grid-row:3;justify-self:start; }
.reader .srcpane[data-mode=source] [data-tab=source] { display:none; }

/* New disclosure labels inherit the existing library row styling. */
.reader #p1 .reader-act-label { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.reader #p1 .reader-selected-act { background:var(--link-bg); }
.reader #p1 .reader-selected-act .reader-act-label { color:var(--link);font-weight:var(--weight-semibold); }

/* Concept layout: definition first, with source metadata beneath it. */
.reader:not(.p2-off) .reader-concept .reader-document-toolbar { display:none; }
.reader-concept > .crumbs { margin-top:var(--space-4); }
.reader-concept-definition { margin-top:var(--space-3); }
.reader-concept-definition .defhead { margin-top:var(--space-3); }
.reader-concept-uses { width:auto;min-width:calc(var(--space-16) * 5);max-width:100%;border-collapse:collapse; }
.reader-concept-uses th,.reader-concept-uses td { text-align:left;padding:var(--space-1) var(--space-2); }
.reader-concept-uses th:last-child,.reader-concept-uses td:last-child { text-align:right; }
.reader-concept-history { margin-top:var(--space-5); }
.reader-concept-history > summary { cursor:pointer; }
.reader-concept-history > summary h2 { display:inline; }
.reader-concept-history[open] > summary { margin-bottom:var(--space-3); }


/* Approved reader navigation: primary button colours only; dimensions unchanged. */
.reader-workspace-header .reader-browse,.reader-workspace-header .reader-details-button { appearance:none;box-sizing:border-box;min-width:calc(var(--space-16) * 2);background:var(--surface);border-color:var(--border-strong);color:var(--primary);transform:none !important; }
.reader-workspace-header .reader-browse:hover,.reader-workspace-header .reader-details-button:hover { background:var(--neutral-warm);border-color:var(--border-strong);color:var(--primary); }
.reader-workspace-crumbs { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--text-xs);color:var(--fg-tertiary); }

/* The existing regulation title now belongs to the reading area. */
.reader-heading-row > .reader-version { grid-column:3; }
.reader-heading-row > .reader-details-button { grid-column:4; }
.reader-title { padding-top:0; }
.reader-workspace-crumbs { padding-top:var(--space-4);margin-bottom:var(--space-2); }

body.reader-browse-page .shell4 { height:calc(100vh - var(--site-nav-h) - var(--reader-header-h,0px)); }
/* No act selected: the empty Contents pane and its divider take no room (as p2-off, not persisted). */
body.reader-no-act .shell4 { --p2-w:0px; }
body.reader-no-act #p2,body.reader-no-act [data-gutter=p2],body.reader-no-act .ptabs [data-tab=p2] { visibility:hidden; }

/* Compact workspace controls; both buttons use the same secondary treatment. */
.reader-workspace-header { padding:var(--space-2) var(--space-4); }
.reader-workspace-header .reader-browse[aria-expanded=true],.reader-workspace-header .reader-details-button[aria-expanded=true] { background:var(--primary-tint);border-color:var(--primary-border);color:var(--primary); }
.reader-version-notice { display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--warning-bg);border:var(--radius-xs) solid var(--warning);border-radius:var(--radius-md);font-size:var(--text-xs); }
.reader-version-notice > details { flex:1;min-width:0; }
.reader-version-notice summary { cursor:pointer; }
.reader-notice-hint { margin-left:var(--space-3);color:var(--fg-tertiary); }
.reader-notice-actions { display:flex;gap:var(--space-3);flex-wrap:wrap; }
.reader-version-notice .reader-notice-full { padding:0;margin:var(--space-3) 0 0;border:0;background:transparent;white-space:normal;overflow:visible; }
.reader-version-notice .reader-notice-full .upl { flex-direction:row;flex-wrap:wrap;gap:var(--space-3); }
.reader-version-notice .reader-notice-full .upi { display:none; }
.reader-original-notice { margin-top:var(--space-3);white-space:normal; }
body.reader-library-start .shell4 { display:grid;grid-template-columns:var(--p1-w) var(--space-1) 0 0 minmax(0,1fr) 0 0; }
.reader-library-start #p2,.reader-library-start [data-gutter=p2],.reader-library-start #p4,.reader-library-start [data-gutter=p4],.reader-library-start .ptabs { display:none; }
.reader-library-start #p1 { display:flex;grid-column:1;grid-row:1;visibility:visible; }
.reader-library-start.p1-off #p1 { visibility:hidden; }
.reader-library-start [data-gutter=p1] { grid-column:2;grid-row:1; }
.reader-library-start #p3 { display:block;grid-column:5;grid-row:1;min-width:0; }
.reader-library-start #p1 .navtree { overflow:auto; }
.reader-level-list,.reader-home-upcoming { max-width:calc(var(--space-16) * 14); }
.reader-level-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--radius-xs) solid var(--border);align-items:baseline; }
.reader-level-row .k { color:var(--fg-tertiary); }
.reader-level-row .n { color:var(--fg-tertiary); }
.reader-home-upcoming { margin-top:var(--space-6);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md);box-sizing:border-box; }
.reader-home-upcoming > .sec { margin-top:0; }
.reader-upcoming-list { list-style:none;padding:0;margin:0; }
.reader-upcoming-link { display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--radius-xs) solid var(--border); }
.reader-upcoming-link .muted { flex-shrink:0; }
.reader-upcoming-more { margin-top:var(--space-3); }
.reader-upcoming-more > summary { cursor:pointer;color:var(--link); }
@media(max-width:700px){
  .reader-version-notice { flex-direction:column; }
  .reader-upcoming-link { flex-direction:column;gap:var(--space-1); }
  body.reader-library-start .shell4 { grid-template-columns:minmax(0,1fr); }
  .reader-library-start #p3 { grid-column:1; }
  .reader-library-start #p1 { position:absolute;top:0;bottom:0;width:min(100%,calc(var(--space-16) * 5));z-index:var(--z-dropdown); }
  .reader-library-start [data-gutter=p1] { display:none; }
}

/* Compact tree navigation alongside the panel title. */
.reader-tree-back { border:0;background:transparent;padding:0;font:inherit;color:var(--fg);cursor:pointer;white-space:nowrap; }
.reader-tree-back:focus-visible { outline:var(--radius-xs) solid var(--primary);outline-offset:var(--space-1); }
.reader-tree-back:disabled { color:var(--fg-tertiary);cursor:default; }

/* Concept occurrences retain their original text, underlines and definition popups. */
.reader-concept-match { background:var(--link-bg);border-radius:var(--radius-xs); }
.reader-concept-current { background:var(--primary-tint);outline:var(--radius-xs) solid var(--primary-border); }
.reader-concept-match-bar { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);position:sticky;top:0;z-index:var(--z-dropdown);background:var(--surface);padding:var(--space-2) 0;margin-bottom:var(--space-3);font-size:var(--text-xs);border-bottom:var(--radius-xs) solid var(--border); }
.reader-concept-match-status { margin-left:auto;color:var(--fg-secondary); }
.reader-concept-match-bar button:disabled { color:var(--fg-tertiary);cursor:default; }


.reader-concept > h1.act-h { font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--leading-snug);margin:var(--space-3) 0 var(--space-4); }
.reader-concept .deftext { font-size:var(--text-base);line-height:var(--leading-normal);color:var(--fg); }
.reader-concept-definition { max-width:calc(var(--space-16) * 12); }
.reader-concept-definition > li { border:0;padding:0;margin-bottom:var(--space-5); }
.reader-concept-definition .deftext { margin:0 0 var(--space-3); }
.reader-concept-definition .defhead { color:var(--fg-secondary);font-size:var(--text-xs);margin-top:var(--space-2); }
.reader-concept-definition .defhead b { font-weight:var(--weight-regular); }
.reader-concept-usage-heading { margin-top:var(--space-6);padding-top:var(--space-4);border-top:var(--radius-xs) solid var(--border); }

/* Details beside the document's actions, above the text; same look as in the header. */
.reader-document-actions .reader-details-button { appearance:none;box-sizing:border-box;background:var(--surface);border-color:var(--border-strong);color:var(--primary);transform:none !important; }
.reader-document-actions .reader-details-button:hover { background:var(--neutral-warm);color:var(--primary); }
.reader-document-actions .reader-details-button[aria-expanded=true] { background:var(--primary-tint);border-color:var(--primary-border);color:var(--primary); }
/* "Back to search results" opens the breadcrumb line, set apart by a divider. */
.reader-workspace-crumbs > .reader-return-list { margin-right:var(--space-2);padding-right:var(--space-3);border-right:var(--radius-xs) solid var(--border); }
/* Breadcrumb and document toolbar stay at the top of the text pane while it scrolls; the act
   title between them scrolls away. Match bars stick below both (--reader-sticky-h, reader.js). */
.reader #p3 > .main > .reader-workspace-crumbs { position:sticky;top:0;z-index:var(--z-dropdown,30);background:var(--surface);margin:0;padding:var(--space-3) 0 var(--space-2); }
.reader #p3 > .main > .reader-document-toolbar { position:sticky;top:var(--reader-crumbs-h,0px);z-index:var(--z-dropdown,30);background:var(--surface); }
.reader .reader-title { margin-top:var(--space-1); }
.reader .reader-match-bar,.reader .reader-concept-match-bar { top:var(--reader-sticky-h,0px); }

/* Concept definition: a quiet highlight on the definition; source and dates step back. */
.reader-concept-definition > li { border-left:var(--radius-xs) solid var(--primary-border);background:var(--surface-sunken);padding:var(--space-3) var(--space-4);border-radius:0 var(--radius-md) var(--radius-md) 0; }
.reader-concept-definition .deftext { margin:0 0 var(--space-2); }
.reader-concept-definition > li > p.small,.reader-concept-definition .defhead { font-size:var(--text-xs);color:var(--fg-tertiary);margin:var(--space-1) 0 0; }
.reader-concept-definition .defhead a,.reader-concept-definition .defhead .small { font-size:var(--text-xs); }