/* ========================================================= UN Human Rights Database · Component layer ========================================================= */ /* ───────────── APP SHELL (v19.43-fix3) ───────────── Single scroll-axis layout. The viewport is locked: + fill 100vh and never scroll. Mast + searchbar + scope sit at the top in normal flex flow (no sticky, no shrink). The 4-column .layout below them takes all remaining vertical space; each of its three visible children (.filters, .results, .dossier) gets its own overflow:auto, so the user has exactly ONE scrollable region per pane and zero ambiguity about which axis moves. The --mast-h variable is preserved (other code reads it) but is no longer used for sticky offsets — kept at a stable value. */ :root { --mast-h: 0px; /* legacy var; sticky offsets no longer needed */ --shell-pad: 40px; /* horizontal page padding */ } html, body { height: 100vh; margin: 0; overflow: hidden; /* lock the window — scroll lives inside panes */ } body { display: flex; flex-direction: column; min-height: 0; } /* The search view section is the flex child that holds the scope/search/main stack. Document/Workspace/About views replace it via the router. v19.43-fix5: flex: 1 1 0 (not 1 1 auto) so flex-basis ignores intrinsic content size — otherwise Chrome resolves flex-basis: auto against the children's natural height (huge), then growth never happens because the column already "thinks" it's big enough. */ section[data-view] { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; } section[data-view="search"], section[data-view="documents"] { overflow: hidden; /* nested panes scroll */ } section[data-view="workspace"], section[data-view="about"] { overflow-y: auto; /* full-section scroll for content-only views */ } section[data-view][hidden] { display: none; } /* ───────────── MASTHEAD ───────────── No longer sticky and no longer shrinks. The whole mast block is always visible at full size; the editorial title is part of the permanent app frame, not a reactive element. */ .mast { border-bottom: 1px solid var(--ink); background: var(--paper); padding: 14px var(--shell-pad) 10px; flex: 0 0 auto; z-index: 45; } .mast--compact { /* Retained so any leftover toggle from old sessions or stray code paths is a no-op rather than a layout shift. */ padding: 14px var(--shell-pad) 10px; } .mast-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* v19.43-fix3: app-shell pattern. .mast--compact is intentionally a no-op now — the masthead never shrinks because the page never scrolls. The class is kept on the element so legacy code that listens for it stays harmless. */ .mast-brand { min-width: 0; } .mast-title { margin: 4px 0 0; font-size: 36px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--ink); } .mast-sub { font-style: italic; color: var(--ink-3); font-size: 13px; margin-top: 4px; } #mast-folio { display: flex; align-items: center; gap: 12px; } /* v19.43: thin progress bar inside the folio strip — replaces the "LOADING…" string. Stays hidden once boot completes (width = 100% reaches the end and the bar fades). */ .mast-folio-bar { flex: 1 1 auto; max-width: 200px; height: 1px; background: var(--rule, #d4cdc1); position: relative; overflow: hidden; transition: opacity 0.4s ease 0.5s; /* fade out 0.5 s after width hits 100% */ } .mast-folio-bar-fill { display: block; height: 100%; width: 0%; background: var(--garnet); transition: width 0.25s ease; } /* Once 100% is reached, the inline style sets width:100%; we then fade the bar away (transitioned). */ .mast-folio-bar:has(.mast-folio-bar-fill[style*="100%"]) { opacity: 0; } .mast-nav { display: flex; gap: 22px; align-items: center; font-family: var(--display); font-size: 14px; } .mast-nav a { color: var(--ink-2); text-decoration: none; padding-bottom: 2px; } .mast-nav a:hover { color: var(--ink); } .mast-nav a.active { color: var(--garnet); border-bottom: 2px solid var(--garnet); } .mast-sep { width: 1px; height: 18px; background: var(--rule); } #theme-toggle { font-family: var(--mono); font-size: 14px; padding: 4px 10px; } /* ───────────── SCOPE / SOURCE ───────────── v19.43-fix9: scope buttons live in the left filter pane as a vertical list. The .scope-bar (full-width horizontal strip above the layout) is gone; .scope-opt class + data-scope attribute kept so existing JS handlers in bindUI() still wire correctly. */ .filter-block-source { /* Visual delimiter from regular filters — Source is a top-level dataset partition, not a filter on the active dataset. */ padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; } .scope-list { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--paper); } /* Two-row grid per scope-opt: name on top (left col), count detail on bottom (left col, dimmer + smaller), PREVIEW badge on right spanning both rows. Avoids the squash that happens when "3117 · 3 bodies" fights with "Jurisprudence" on one row. */ .scope-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; row-gap: 2px; width: 100%; font-family: var(--display); font-size: 13px; background: transparent; color: var(--ink-2); border: 0; border-bottom: 1px solid var(--rule); padding: 8px 12px; cursor: pointer; letter-spacing: 0.01em; text-align: left; transition: background .12s, color .12s; } .scope-opt:last-child { border-bottom: 0; } .scope-opt-name { grid-column: 1 / 2; grid-row: 1 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scope-opt:hover { background: var(--paper-3); color: var(--ink); } .scope-opt.is-active { background: var(--paper-3); color: var(--ink); box-shadow: inset 3px 0 0 var(--garnet); } .scope-opt.is-active .scope-count { color: var(--ink-3); } .scope-count { grid-column: 1 / 2; grid-row: 2 / 3; font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-feature-settings: "tnum"; letter-spacing: 0.02em; } .scope-count:empty, .scope-count:not([id]):empty { display: none; } .scope-opt .badge { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; font-size: 9px; padding: 2px 5px; flex: 0 0 auto; } /* Onboarding banner for SP scope — now inline below the source list, constrained to the filter-block-source margin. */ .scope-banner { position: relative; margin: 12px 0 0; padding: 10px 26px 10px 12px; background: var(--preview-soft); border-left: 3px solid var(--preview); font-family: var(--body); font-size: 12px; line-height: 1.5; color: var(--ink-2); } .scope-banner .folio { color: var(--preview); font-weight: 600; display: inline; margin-right: 10px; } .scope-banner strong { font-weight: 600; color: var(--ink); } .scope-banner .mandate-list { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); font-feature-settings: "tnum"; } .banner-dismiss { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: var(--ink-3); font-size: 18px; cursor: pointer; padding: 0 6px; line-height: 1; } .banner-dismiss:hover { color: var(--ink); } /* ───────────── SEARCH BAR ───────────── */ .searchbar { border-bottom: 1px solid var(--rule); padding: 18px 40px; background: var(--paper); flex: 0 0 auto; } .searchbar-inner { display: flex; align-items: center; gap: 16px; position: relative; /* anchors the recent-searches popover */ } /* v19.51.7 (Tier B.1): recent-searches popover under #q. Anchored to `.searchbar-inner` (position:relative above). Shown only when the input is focused-and-empty AND localStorage has at least one entry. */ .q-recent { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 30; max-height: 320px; overflow-y: auto; padding: 6px 0; } .q-recent-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; } .q-recent-clear { background: none; border: 0; padding: 2px 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); cursor: pointer; border-radius: 2px; } .q-recent-clear:hover { color: var(--garnet); background: var(--paper-2); } .q-recent-list { list-style: none; margin: 0; padding: 0; } .q-recent-opt { display: flex; justify-content: space-between; align-items: baseline; width: 100%; background: none; border: 0; padding: 6px 14px; text-align: left; font-family: var(--display); font-size: 14px; color: var(--ink); cursor: pointer; gap: 12px; } .q-recent-opt:hover, .q-recent-opt:focus-visible { background: var(--paper-2); outline: none; } .q-recent-q { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-recent-ago { flex: 0 0 auto; font-size: 10px; color: var(--ink-3); } /* v19.51.7 (Tier B.3): keyboard shortcuts modal. Native