/* Library context, work controls and results share one compact workspace. */ #lib-root[data-library-workspace="true"] .lib-workspace-toolbar { position: relative; top: auto; display: block; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: var(--card-radius) var(--card-radius) 0 0; background: var(--card-bg); box-shadow: none; overflow: visible; } #lib-root[data-library-workspace="true"] .lib-workspace-toolbar[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-room-row { display: flex; align-items: center; gap: 16px; border-radius: var(--card-radius) var(--card-radius) 0 0; height: auto; min-height: 54px; padding: 0 20px; background: var(--card-bg); border: 0; border-bottom: 1px solid var(--card-border); } #lib-root[data-library-workspace="true"] .lib-tabs-shell { flex: 0 0 auto; width: auto; max-width: 100%; height: auto; } #lib-root[data-library-workspace="true"] .lib-tabs { gap: 24px; width: auto; height: auto; min-height: 54px; padding: 0; background: transparent; border: 0; border-radius: 0; } #lib-root[data-library-workspace="true"] .lib-tab { min-height: 54px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; font-size: 15px; } #lib-root[data-library-workspace="true"] .lib-tab.active { color: var(--rust); border-bottom-color: var(--rust); background: transparent; } #lib-root[data-library-workspace="true"] .lib-room-panel { width: 100%; height: auto; min-height: 0; padding: 12px 20px 8px; background: var(--card-bg); border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 8px; } #lib-root[data-library-workspace="true"] .lib-search-row.lib-workspace-commands { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; height: auto; padding: 0; flex-wrap: wrap; } #lib-root[data-library-workspace="true"] .lib-search-wrap { flex: 1 1 180px; width: auto; min-width: 140px; max-width: none; height: auto; min-height: 44px; } #lib-root[data-library-workspace="true"] .lib-search { width: 100%; height: auto; min-height: 44px; border-radius: var(--control-family-radius); padding: 8px 38px; line-height: 1.4; background: var(--surface-control); } #lib-root[data-library-workspace="true"] .lib-search-icon { left: 12px; } #lib-root[data-library-workspace="true"] .lib-create-action { display: inline-flex; position: static; width: auto; flex: 0 0 auto; min-height: 44px; height: auto; padding: 8px 14px; border-radius: var(--control-family-radius); } #lib-root[data-library-workspace="true"] .lib-create-label-full { display: inline; } #lib-root[data-library-workspace="true"] .lib-create-label-compact { display: none; } #lib-root[data-library-workspace="true"] :is(.lib-workspace-commands,.lib-workspace-setup,.lib-workspace-results) > * { margin: 0; } #lib-root[data-library-workspace="true"] :is(.lib-filter-toggle,.lib-sort-control,.lib-sort-direction,.lib-columns-toggle,.lib-view button,.lib-views-toggle) { min-height: 44px; height: auto; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: var(--control-family-fill); font: 600 13px/1.4 var(--font-app); color: var(--ink); } #lib-root[data-library-workspace="true"] .lib-filter-toggle { display: inline-flex; gap: 7px; align-items: center; padding: 8px 10px; } #lib-root[data-library-workspace="true"] .lib-filter-toggle svg { width: 16px; height: 16px; } #lib-root[data-library-workspace="true"] .lib-sort-control { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; max-width: 235px; flex: 0 1 auto; padding: 0 10px; } #lib-root[data-library-workspace="true"] .lib-sort-prefix { display: inline; position: static; padding: 0; color: var(--stone); font-size: 13px; } #lib-root[data-library-workspace="true"] .lib-sort { min-width: 0; width: auto; height: auto; min-height: 42px; max-width: 165px; padding: 8px 20px 8px 0; font: inherit; border: 0; background-color: transparent; } #lib-root[data-library-workspace="true"] .lib-sort-direction { width: 44px; min-width: 44px; flex: 0 0 44px; padding: 8px; } #lib-root[data-library-workspace="true"] .lib-workspace-results { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; } #lib-root[data-library-workspace="true"] .lib-view { display: flex !important; flex: 0 0 auto; width: auto; border-radius: var(--control-family-radius); background: transparent; box-shadow: none; gap: 0; } #lib-root[data-library-workspace="true"] .lib-view button { display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; width: auto; min-width: 44px; } #lib-root[data-library-workspace="true"] .lib-view button:first-child { border-radius: var(--control-family-radius) 0 0 var(--control-family-radius); } #lib-root[data-library-workspace="true"] .lib-view button:last-child { border-radius: 0 var(--control-family-radius) var(--control-family-radius) 0; } #lib-root[data-library-workspace="true"] .lib-view button + button { margin-left: -1px; } #lib-root[data-library-workspace="true"] .lib-view button[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--sage-text); position: relative; } @media (hover: hover) and (pointer: fine) { #lib-root[data-library-workspace="true"] .lib-view button[aria-pressed="true"]:hover { background: var(--sage-hover); border-color: var(--sage-hover); } } #lib-root[data-library-workspace="true"] .lib-view button[aria-pressed="true"]:active { background: var(--sage-deep); border-color: var(--sage-deep); } #lib-root[data-library-workspace="true"] .lib-column-picker { display: block !important; position: relative; width: auto; min-width: 0; flex: 0 0 auto; } #lib-root[data-library-workspace="true"] .lib-columns-toggle { display: inline-flex; gap: 5px; align-items: center; padding: 8px 10px; width: auto; } #lib-root[data-library-workspace="true"] .lib-columns-toggle svg { width: 14px; height: 14px; } #lib-root[data-library-workspace="true"] .lib-column-panel { position: absolute; z-index: 110; inset: calc(100% + 6px) 0 auto auto; width: 320px; max-width: calc(100vw - 32px); padding: 16px; overflow: auto; background: var(--card-bg); box-shadow: 0 8px 28px #0002; border: 1px solid var(--card-border); border-radius: 8px; } #lib-root[data-library-workspace="true"] .lib-column-panel[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-display-controls { display: grid; gap: 8px; } #lib-root[data-library-workspace="true"] .lib-display-control { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; padding: 0; width: 100%; height: auto; min-height: 44px; font: 600 13px/1.4 var(--font-app); } #lib-root[data-library-workspace="true"] .lib-display-control[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-display-control { width: auto; flex: 0 1 auto; gap: 6px; flex-wrap: nowrap; color: var(--stone); } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-display-control select { flex: 0 1 auto; width: auto; background: var(--surface-control); color: var(--ink); } #lib-root[data-library-workspace="true"] .lib-column-picker[hidden] { display: none !important; } #lib-root[data-library-workspace="true"] .lib-display-control select { flex: 1 1 150px; width: 150px; max-width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 8px 28px 8px 10px; font: inherit; color: inherit; background-color: var(--cream); border: 1px solid var(--card-border); border-radius: var(--control-family-radius); } #lib-root[data-library-workspace="true"] .lib-display-column-group { margin: 12px 0 0; padding: 0; border: 0; } #lib-root[data-library-workspace="true"] .lib-display-column-group legend { padding: 0; font: 600 12px/1.5 var(--font-app); color: var(--stone); } #lib-root[data-library-workspace="true"] .lib-workspace-column-choice { display: flex; gap: 10px; align-items: center; min-height: 44px; font: 500 13px/1.4 var(--font-app); } #lib-root[data-library-workspace="true"] .lib-workspace-column-choice input { width: 18px; height: 18px; accent-color: var(--state-color); } #lib-root[data-library-workspace="true"] .lib-column-required { font: 12px/1.5 var(--font-app); color: var(--stone); } #lib-root[data-library-workspace="true"] .lib-columns-reset { width: 100%; min-height: 44px; height: auto; margin-top: 12px; white-space: normal; } #lib-root[data-library-workspace="true"] .lib-workspace-setup { display: flex; flex: 0 1 auto; margin-left: auto; max-width: 45%; gap: 8px; justify-content: flex-end; padding-block: 4px; align-items: center; min-width: 0; flex-wrap: wrap; } #lib-root[data-library-workspace="true"] .lib-views { display: block; position: relative; flex: 0 1 auto; width: max-content; min-width: 0; max-width: min(28ch, 100%); } #lib-root[data-library-workspace="true"] .lib-views[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-views-toggle { display: flex; gap: 8px; width: auto; max-width: 100%; padding: 8px 10px; border-color: transparent; background: transparent; text-align: left; } #lib-root[data-library-workspace="true"] .lib-views-toggle [data-library-view-label] { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.4; } #lib-root[data-library-workspace="true"] .lib-views-toggle svg { flex: 0 0 14px; width: 14px; height: 14px; } #lib-root[data-library-workspace="true"] .lib-view-changes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } #lib-root[data-library-workspace="true"] .lib-view-changes[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-view-changes button { min-height: 44px; height: auto; padding: 8px; background: transparent; border: 1px solid var(--card-border); border-radius: 5px; color: var(--rust); font: inherit; } #lib-root[data-library-workspace="true"] .lib-views-menu { position: absolute; top: calc(100% + 4px); left: auto; right: 0; width: 360px; max-width: calc(100vw - 40px); max-height: min(520px,65dvh); padding: 12px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); box-shadow: 0 8px 28px #0002; z-index: 120; overflow: auto; } #lib-root[data-library-workspace="true"] .lib-views-menu[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-views-menu input { width: 100%; min-height: 44px; padding: 8px 10px; font: 14px var(--font-app); border: 1px solid var(--card-border); border-radius: 5px; background: var(--cream); } #lib-root[data-library-workspace="true"] .lib-views-options { max-height: 210px; overflow: auto; margin: 8px 0; } #lib-root[data-library-workspace="true"] .lib-views-menu button { display: flex; width: 100%; gap: 8px; justify-content: space-between; min-height: 44px; padding: 8px; text-align: left; background: transparent; border: 0; color: var(--ink); font: 13px/1.5 var(--font-app); overflow-wrap: anywhere; } #lib-root[data-library-workspace="true"] .lib-views-menu button[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-views-menu button[aria-pressed="true"] { background: var(--state-color); color: var(--state-text); } #lib-root[data-library-workspace="true"] .lib-views-menu button:disabled { opacity: .45; cursor: default; } #lib-root[data-library-workspace="true"] .lib-views-footer { border-top: 1px solid var(--card-border); padding-top: 6px; } .lib-manage-views { max-height: 55dvh; overflow: auto; } .lib-manage-views > div { display: flex; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); } .lib-manage-views span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .lib-manage-views button { min-height: 44px; padding: 0 8px; color: var(--rust); border: 1px solid var(--card-border); background: transparent; font: inherit; } #lib-root[data-library-workspace="true"] .lib-query-status-slot { min-height: 0; height: auto; padding: 0; } #lib-root[data-library-workspace="true"] .lib-query-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 24px; font-size: 12px; line-height: 1.5; } #lib-root[data-library-workspace="true"] .lib-query-status > span { margin-right: 4px; } #lib-root[data-library-workspace="true"] :is(.lib-query-status button, .lib-difference-columns) { min-height: 44px; height: auto; border: 1px solid var(--card-border); background: transparent; border-radius: 5px; padding: 4px 8px; font: inherit; color: var(--rust); white-space: normal; text-align: left; } #lib-root[data-library-workspace="true"] .lib-workspace-empty { padding: 40px 20px; background: var(--card-bg); border: 1px solid var(--card-border); } body .brb-modal-shell.lib-filter-modal { width: 480px; max-width: calc(100vw - 24px); height: auto; max-height: 85dvh; } .lib-filter-modal .brb-modal-content { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 8px; padding: 24px; } .lib-filter-modal .brb-modal-title { flex: 0 0 auto; margin: 0; } .lib-filter-modal .lib-filter-status { margin: 0; min-height: 20px; } .lib-filter-modal .lib-filter-field { border-top: 1px solid var(--card-border); padding: 0; } .lib-filter-modal .lib-filter-field > summary { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink); font: 600 13px/1.5 var(--font-app); list-style: none; } .lib-filter-modal .lib-filter-field > summary::before { content: '▸'; color: var(--rust); flex: 0 0 12px; } .lib-filter-modal .lib-filter-field[open] > summary::before { content: '▾'; } .lib-filter-modal .lib-filter-field > summary::-webkit-details-marker { display: none; } .lib-filter-modal .lib-filter-field > summary:hover { color: var(--rust); } .lib-filter-modal .lib-filter-field > summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; } .lib-filter-modal .lib-filter-field > summary:active { background: var(--section-bg); } .lib-filter-modal .lib-filter-field-label { flex: 0 1 auto; } .lib-filter-modal .lib-filter-field-selection { flex: 1 1 0; min-width: 0; color: var(--stone); font-weight: 500; overflow-wrap: anywhere; text-align: right; } .lib-filter-modal .lib-filter-find { width: 100%; min-height: 44px; margin: 0 0 8px; padding: 8px; font: 14px/1.5 var(--font-app); border: 1px solid var(--card-border); border-radius: var(--control-family-radius); color: var(--ink); background: var(--cream); } .lib-filter-modal .lib-filter-panel { display: block; padding: 0; background: var(--card-bg); border: 0; } .lib-filter-modal .lib-facet-group { width: 100%; border: 0; padding: 0; margin: 0; } .lib-filter-modal .lib-facet-group legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lib-filter-modal .lib-facet-options { display: flex; flex-direction: column; gap: 2px; } .lib-filter-modal .lib-facet-chip { width: 100%; } .lib-filter-modal .lib-facet-chip[hidden] { display: none; } .lib-filter-modal .lib-filter-empty { margin: 12px 0; color: var(--text-secondary); font: 500 13px/1.5 var(--font-app); } .lib-filter-modal .lib-facet-chip-content { min-height: 44px; width: 100%; border-radius: 5px; padding: 8px; } .lib-filter-modal .lib-filter-actions { gap: 8px; padding: 12px 0 0; margin: 0; flex-wrap: wrap; border-top: 1px solid var(--card-border); } .lib-filter-modal .lib-filter-action-controls { gap: 8px; } .lib-filter-modal .lib-filter-action { min-height: 44px; padding: 0 14px; } /* All tables share geometry and pin identity while facts remain reachable. */ :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-frame { isolation: isolate; border: 1px solid var(--card-border); border-top: 0; border-radius: 0 0 var(--card-radius) var(--card-radius); background: var(--card-bg); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-scroll { isolation: auto; max-width: 100%; border-radius: 0 0 var(--card-radius) var(--card-radius); overflow-x: auto; overscroll-behavior-x: contain; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table { table-layout: fixed; max-width: none; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th, :is(#lib-root, [data-lineup-inventory]) .lib-dough-table td { width: auto; min-width: 0; max-width: none; box-sizing: border-box; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead th { position: relative; z-index: 3; height: 46px; padding: 0 34px 0 var(--library-table-inline-padding, 12px); background: var(--section-bg); white-space: nowrap; overflow: visible; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-name { padding-left: var(--library-table-inline-padding, 12px); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-actions { padding: 8px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table .lib-table-select { position: sticky; left: 0; padding: 0; z-index: 3; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-actions, :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-actions .lib-table-heading { font: 600 12px/1.4 var(--font-app); letter-spacing: normal; text-transform: none; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-actions .lib-table-heading { min-height: 44px; justify-content: center; align-items: center; padding: 0 4px; } :is(#lib-root[data-library-workspace="true"], [data-lineup-inventory]) .lib-dough-table th > button[data-table-sort-key] { position: static; display: block; padding: 0; width: 100%; height: 44px; min-height: 44px; overflow: hidden; text-overflow: ellipsis; font: 600 12px/1.4 var(--font-app); background: transparent; border: 0; text-align: left; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-sort-direction] > button[data-table-sort-key]::after { display: inline; position: static; margin-left: 5px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle, :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize { position: absolute; display: flex; justify-content: center; align-items: center; min-width: 0; width: 22px; height: 50px; min-height: 44px; top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--stone); font-size: 16px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle { right: 12px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize { right: 0; width: 12px; cursor: col-resize; touch-action: none; border-right: 2px solid var(--card-border); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize:hover, :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-column-moving="resize"] > .lib-column-resize { border-right-color: var(--rust); background: var(--cream); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize:disabled { cursor: default; opacity: .4; background: transparent; border-right-color: var(--card-border); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th.is-drop-target { box-shadow: inset 3px 0 var(--rust); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table tbody td { padding: var(--inventory-table-cell-padding-block, 12px) 12px; height: auto; vertical-align: middle; overflow-wrap: anywhere; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table .lib-table-name { position: relative; left: 0; z-index: auto; background: var(--card-bg); } :is(#lib-root, [data-lineup-inventory]) .has-pinned-name .lib-table-name { position: sticky; left: var(--library-table-name-offset, 0px); z-index: 2; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table .lib-table-actions { text-align: center; padding: 6px; } :is(#lib-root, [data-lineup-inventory]) .has-pinned-actions .lib-table-actions { position: sticky; right: 0; z-index: 2; background: var(--card-bg); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead :is(.lib-table-name, .lib-table-select, .lib-table-actions) { background: var(--section-bg); z-index: 3; } :is(#lib-root, [data-lineup-inventory]) .has-pinned-name thead .lib-table-name, :is(#lib-root, [data-lineup-inventory]) .has-pinned-actions thead .lib-table-actions { z-index: 5; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-select { z-index: 6; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table tbody tr:hover :is(.lib-table-name, .lib-table-select, .lib-table-actions) { background: var(--section-bg); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-frame::after { right: var(--library-table-actions-inset, 0px); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-frame::before, :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-frame::after { z-index: 1; border: 0; width: max(0px, min(24px, calc((var(--library-table-viewport-width, 100vw) - var(--library-table-sticky-edge, 0px) - var(--library-table-actions-inset, 0px)) / 5))); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-frame > .lib-table-scroll-cue { position: relative; z-index: 2; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-pinned-header { z-index: 85; } .lib-column-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; width: 230px; max-height: calc(100dvh - 16px); overflow: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 7px; padding: 6px; box-shadow: 0 8px 28px #0003; } .lib-column-menu button { width: 100%; min-height: 36px; text-align: left; padding: 6px 10px; border: 0; background: transparent; color: var(--ink); font: 13px var(--font-app); } .lib-column-menu button:disabled { opacity: .4; } .lib-column-menu button:hover, #lib-root[data-library-workspace="true"] .lib-views-menu button:not(:disabled):hover, #lib-root[data-library-workspace="true"] .lib-workspace-commands button:not(.lib-create-action):hover { background: var(--section-bg); } #lib-root :is(button,a,select,input):focus-visible, .lib-column-menu button:focus-visible, .lib-manage-views button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; box-shadow: none; } #lib-root button:active, .lib-column-menu button:active { filter: brightness(.95); } @media (max-width: 767px) { #lib-root[data-library-workspace="true"] .lib-room-row { padding-inline: 12px; gap: 0 8px; flex-wrap: wrap; } #lib-root[data-library-workspace="true"] .lib-tabs { gap: 0 14px; flex-wrap: wrap; } #lib-root[data-library-workspace="true"] .lib-workspace-setup { flex-wrap: wrap; max-width: 100%; } #lib-root[data-library-workspace="true"] .lib-workspace-toolbar.is-dough-room .lib-workspace-setup { flex-basis: 100%; } #lib-root[data-library-workspace="true"] .lib-room-panel { padding: 10px 12px 8px; gap: 6px; } #lib-root[data-library-workspace="true"] .lib-create-label-full { display: none; } #lib-root[data-library-workspace="true"] .lib-create-label-compact { display: inline; } #lib-root[data-library-workspace="true"] .lib-create-action { padding-inline: 10px; margin-left: auto; } #lib-root[data-library-workspace="true"] .lib-search-row.lib-workspace-commands { gap: 6px; } #lib-root[data-library-workspace="true"] .lib-search-wrap { flex-basis: 100%; } #lib-root[data-library-workspace="true"] .lib-sort-control { flex: 1 1 92px; max-width: none; padding-inline: 6px; } #lib-root[data-library-workspace="true"] .lib-sort-prefix { display: none; } #lib-root[data-library-workspace="true"] .lib-sort { width: 100%; max-width: none; padding-right: 18px; } #lib-root[data-library-workspace="true"] .lib-filter-toggle { padding-inline: 7px; gap: 4px; } #lib-root[data-library-workspace="true"] .lib-columns-toggle { padding-inline: 7px; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-display-control { display: grid; flex: 1 1 140px; gap: 3px; font-size: 12px; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-display-control[hidden] { display: none; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-display-control select { width: 100%; } #lib-root[data-library-workspace="true"] .lib-column-panel { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-width: none; max-height: min(65dvh, calc(100dvh - 24px)) !important; } #lib-root[data-library-workspace="true"] .lib-views-menu { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-width: none; max-height: 65dvh; } } @media (max-width: 639px) { .lib-column-menu button { min-height: 44px; } .lib-filter-modal .brb-modal-content { padding: 18px; } .lib-manage-views > div { flex-wrap: wrap; } .lib-manage-views span { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { #lib-root[data-library-workspace="true"] *, .lib-column-menu * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { #lib-root[data-library-workspace="true"] .lib-workspace-toolbar, #lib-root[data-library-workspace="true"] .lib-column-panel, #lib-root[data-library-workspace="true"] .lib-views-menu, .lib-column-menu { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } #lib-root button[aria-pressed="true"], #lib-root .lib-tab.active { border-color: Highlight; color: Highlight; } #lib-root :is(button,a,select,input):focus-visible, .lib-column-menu button:focus-visible { outline-color: Highlight; } #lib-root .lib-dough-table :is(.lib-table-name, .lib-table-select, .lib-table-actions), #lib-root .lib-dough-table tbody tr:hover :is(.lib-table-name, .lib-table-select, .lib-table-actions) { background: Canvas; color: CanvasText; } } #lib-root .lib-table-series-cell .lib-series-header { z-index: 2; left: var(--library-table-series-inset, 8px); width: var(--library-table-series-width); max-width: var(--library-table-series-width); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle { z-index: 2; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize { z-index: 3; } #lib-root[data-library-workspace="true"] .lib-series-header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto; align-items: start; gap: 4px 8px; height: auto; min-height: 64px; max-height: none; padding: 10px 12px; overflow: visible; } #lib-root[data-library-workspace="true"] .lib-series-collapse { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--rust); font-size: 20px; } #lib-root[data-library-workspace="true"] .lib-series-header-copy { display: grid; grid-column: 2; grid-row: 1; gap: 3px; width: auto; min-width: 0; max-width: none; min-height: 44px; height: auto; max-height: none; overflow: visible; } #lib-root[data-library-workspace="true"] .lib-series-title { display: block; width: auto; min-width: 0; max-width: none; white-space: normal; word-break: normal; overflow-wrap: break-word; line-height: 1.4; } #lib-root[data-library-workspace="true"] .lib-series-meta { display: block; width: auto; max-width: none; min-width: 0; height: auto; max-height: none; font-size: 11px; line-height: 1.5; white-space: normal; overflow: visible; } #lib-root[data-library-workspace="true"] .lib-series-meta::before { content: none; } #lib-root[data-library-workspace="true"] .lib-series-varies { grid-column: 2 / 4; grid-row: 2; width: auto; min-width: 0; max-width: 100%; margin: 0; } #lib-root[data-library-workspace="true"] .lib-series-actions { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } #lib-root[data-library-workspace="true"] .lib-series-actions .lib-series-edit { margin: 0; align-self: center; width: auto; min-width: 44px; min-height: 44px; padding: 0 8px; font: 600 12px/1.5 var(--font-app); text-transform: none; letter-spacing: normal; } #lib-root[data-library-workspace="true"] .lib-series-actions .lib-series-edit::after { content: none; } #lib-root[data-library-workspace="true"] .lib-views-options .lib-view-option-name { flex: 1 1 auto; min-width: 0; white-space: normal; } #lib-root[data-library-workspace="true"] .lib-views-options .lib-view-option-count { flex: 0 0 auto; min-width: 2.5ch; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .lib-manage-views > .is-editing { flex-wrap: wrap; } .lib-manage-views .modal-input { flex: 1 1 100%; width: 100%; } .lib-manage-views .lib-pin-dialog-message { flex-basis: 100%; } #lib-root .lib-dough-table th > button::before { content: none; } #lib-root .lib-dough-table th > [data-column-action]::after { content: none; display: none; } @media (max-width: 639px) { #lib-root[data-library-workspace="true"] .lib-series-header { grid-template-columns: 44px minmax(0,1fr); } #lib-root[data-library-workspace="true"] .lib-series-header-copy { grid-column: 2; } #lib-root[data-library-workspace="true"] .lib-series-actions { grid-column: 2; grid-row: 2; } #lib-root[data-library-workspace="true"] .lib-series-varies { grid-column: 1 / -1; grid-row: 3; } } #lib-root[data-library-workspace="true"] .lib-dough-table th > button[data-table-sort-key] { text-transform: none; letter-spacing: normal; } #lib-root[data-library-workspace="true"] .lib-views-options .lib-view-option-count { align-self: flex-start; } #lib-root[data-library-workspace="true"] .lib-series-header::before, #lib-root[data-library-workspace="true"] .lib-series-meta::after { content: none; display: none; } #lib-root .lib-table-disclosure-cue { display: flex; align-items: center; gap: 6px; color: var(--rust); font: 600 11px/1.3 var(--font-app); } #lib-root :not(.lib-flour-summary-row) > .lib-table-disclosure-cue::before { content: '▸'; } #lib-root details[open] > summary > .lib-table-disclosure-cue::before { content: '▾'; } /* Header labels may truncate after a deliberate resize; direction never does. */ #lib-root[data-library-workspace="true"] .lib-dough-table thead th > button { padding-inline: 0; } :is(#lib-root[data-library-workspace="true"], [data-lineup-inventory]) .lib-dough-table th > button[data-table-sort-key] { display: flex; align-items: center; gap: 4px; overflow: visible; } :is(#lib-root[data-library-workspace="true"], [data-lineup-inventory]) .lib-dough-table th > button[data-table-sort-key]::after { content: none; display: none; } :is(#lib-root, [data-lineup-inventory]) .lib-column-label { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :is(#lib-root, [data-lineup-inventory]) .lib-column-direction { flex: 0 0 12px; width: 12px; white-space: nowrap; text-align: center; } /* Short windows scroll the form without compressing its options to fragments. */ /* Compact covers accompany identity without adding a separate table column. */ #lib-root .lib-table-name-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; } #lib-root .lib-table-name-copy { flex: 1 1 auto; min-width: 0; } #lib-root .lib-table-cover { --inventory-media-size: 40px; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 7px; } #lib-root[data-library-density="compact"] .lib-table-cover { --inventory-media-size: 32px; width: 32px; height: 32px; flex-basis: 32px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead th { height: 46px; background: var(--card-bg); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead :is(.lib-table-name, .lib-table-select, .lib-table-actions) { background: var(--card-bg); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead .lib-table-actions { border-left: 1px solid var(--card-border); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead th[data-column-label]:is(:hover, :focus-within) { background: var(--cream); } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize { border-right-width: 1px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > button[data-table-sort-key] { cursor: pointer; min-height: 42px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle:hover { color: var(--rust); background: var(--cream); } @media (max-height: 500px) { body .brb-modal-shell.lib-filter-modal { position: relative; inset: auto; height: auto; max-height: calc(var(--brb-modal-viewport-height) - 24px); } .lib-filter-modal .brb-modal-content { padding: 16px; gap: 8px; overflow-y: auto; overscroll-behavior: contain; } .lib-filter-modal .brb-modal-content > * { flex-shrink: 0; } .lib-filter-modal .lib-filter-panel { flex: 0 0 auto; min-height: 0; max-height: none; overflow-y: visible; } } /* Stable header geometry and quiet, discoverable column tools. */ :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > :is(.lib-column-menu-toggle, .lib-column-resize) { height: 100%; min-height: 0; top: 0; box-sizing: border-box; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle { line-height: 1; } #lib-root[data-library-workspace="true"] .lib-columns-toggle:disabled { color: var(--stone); opacity: .55; cursor: default; } @media (hover: hover) and (pointer: fine) { :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle { opacity: 0; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th:is(:hover, :focus-within, [data-column-moving], :has(> .lib-column-menu-toggle[aria-expanded="true"])) > .lib-column-menu-toggle { opacity: 1; } } @media (forced-colors: none) { :is(#lib-root, [data-lineup-inventory]) .lib-dough-table tbody tr:hover > :is(td, .lib-table-name, .lib-table-select, .lib-table-actions) { background: color-mix(in srgb, var(--section-bg) 50%, var(--card-bg)); } } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-menu-toggle svg { display: block; flex: none; pointer-events: none; } /* Sticky copies inherit legacy button margins unless explicitly normalized. */ :is(#lib-root, [data-lineup-inventory]) .lib-dough-table thead th > button { margin: 0; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table-pinned-header thead th > .lib-table-heading { margin: 0; } /* Binary preferences are direct, persistent controls rather than menus. */ #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-binary-control { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; cursor: pointer; color: var(--ink); font: 500 13px/1.4 var(--font-app); } #lib-root[data-library-workspace="true"] .lib-binary-control input { appearance: none; position: relative; display: block; flex: 0 0 32px; width: 32px; height: 20px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--stone); border-radius: 12px; background: var(--section-bg); cursor: pointer; } #lib-root[data-library-workspace="true"] .lib-binary-control input::before { content: ''; position: absolute; width: 14px; height: 14px; top: 2px; left: 2px; border-radius: 50%; background: var(--stone); } #lib-root[data-library-workspace="true"] .lib-binary-control input:checked { background: var(--sage); border-color: var(--sage); } #lib-root[data-library-workspace="true"] .lib-binary-control input:checked::before { transform: translateX(12px); background: var(--card-bg); } #lib-root[data-library-workspace="true"] .lib-binary-control input:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } #lib-root[data-library-workspace="true"] .lib-columns-reset-bar { position: sticky; top: 0; z-index: 2; padding: 8px 0; margin-top: 0; background: var(--card-bg); border-bottom: 1px solid var(--card-border); } #lib-root[data-library-workspace="true"] .lib-columns-reset-bar .lib-columns-reset { width: auto; margin: 0; padding: 8px 12px; border-radius: var(--control-family-radius); } #lib-root[data-library-workspace="true"] .lib-columns-reset-bar { display: flex; flex-wrap: wrap; gap: 8px; } #lib-root[data-library-workspace="true"] .lib-columns-reset-bar :is(.lib-columns-reset,.lib-columns-fit-all) { width: auto; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: transparent; color: var(--ink); font: 600 13px/1.4 var(--font-app); cursor: pointer; } #lib-root[data-library-workspace="true"] .lib-columns-reset-bar button:hover { background: var(--section-bg); } @media (forced-colors: active) { #lib-root[data-library-workspace="true"] .lib-binary-control input { appearance: auto; } #lib-root[data-library-workspace="true"] .lib-binary-control input::before { content: none; } } /* Name and version share one target floor; additional text alone grows the row. */ #lib-root .lib-table-name-link--versioned { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; } /* Center short identity text inside its target as well as beside the cover. */ #lib-root .lib-table-name-wrap :is(.lib-table-name-link, .lib-table-name-text):not(.lib-table-name-link--versioned) { align-items: center; } @media (max-width: 600px) { /* Unpin phone Build columns in both the data table and its sticky header clone. */ #lib-root[data-inventory-presentation="readable"] .lib-dough-table-frame:has(.lib-ingredient-quickview) :is(.lib-table-name, .lib-table-actions) { left: auto; right: auto; } #lib-root[data-inventory-presentation="readable"] .lib-dough-table-frame:has(.lib-ingredient-quickview)::before { left: 0; } #lib-root[data-inventory-presentation="readable"] .lib-dough-table-frame:has(.lib-ingredient-quickview)::after { right: 0; } } /* Related controls keep one footprint across Library rooms and layouts. */ #lib-root[data-library-workspace="true"] .lib-sort-unit { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; gap: 0; } #lib-root[data-library-workspace="true"] .lib-sort-unit > * { margin: 0; } #lib-root[data-library-workspace="true"] .lib-sort-unit .lib-sort-control { border-radius: var(--control-family-radius) 0 0 var(--control-family-radius); border-right: 0; } #lib-root[data-library-workspace="true"] .lib-sort-unit .lib-sort-direction { display: inline-flex; justify-content: center; align-items: center; border-radius: 0 var(--control-family-radius) var(--control-family-radius) 0; } #lib-root[data-library-workspace="true"] .lib-workspace-results .lib-query-status-slot { grid-column: 1; grid-row: 1; min-width: 0; } #lib-root[data-library-workspace="true"] .lib-presentation-controls { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } #lib-root[data-library-workspace="true"] .lib-presentation-controls > * { margin: 0; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-group-control { grid-column: 2; grid-row: 1; padding: 8px 10px; min-height: 44px; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: var(--control-family-fill); } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-group-control[hidden] { display: none; } #lib-root .lib-sort-scope { color: var(--stone); font: 400 12px/1.5 var(--font-app); } @media (max-width: 767px) { #lib-root[data-library-workspace="true"] .lib-sort-unit { flex: 1 1 140px; } #lib-root[data-library-workspace="true"] .lib-workspace-results { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(44px, auto) auto; } #lib-root[data-library-workspace="true"] .lib-workspace-results .lib-query-status-slot { grid-column: 1; grid-row: 1; } #lib-root[data-library-workspace="true"] .lib-workspace-results > .lib-group-control { grid-column: 2; grid-row: 1; justify-self: end; } #lib-root[data-library-workspace="true"] .lib-presentation-controls { grid-column: 1 / -1; grid-row: 2; } } /* Preserve selected saved-view contrast over generic menu hover. */ #lib-root[data-library-workspace="true"] .lib-views-menu button[aria-pressed="true"]:not(:disabled):is(:hover, :active) { background: var(--state-hover); color: var(--state-text); } /* Shared content edges with a permanent right-hand controls gutter. */ #lib-root[data-library-density="compact"] { --library-table-inline-padding: 8px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table :is(th, td):is([data-fact-key="pff"], [data-fact-key="coldFerment"], [data-fact-key="updated"]) { text-align: left; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th:is([data-fact-key="pff"], [data-fact-key="coldFerment"], [data-fact-key="updated"]) > button[data-table-sort-key] { justify-content: flex-start; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table td.is-numeric:not([data-fact-key="pff"]):not([data-fact-key="coldFerment"]):not([data-fact-key="updated"]) { padding-right: 34px; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th.is-numeric:not([data-fact-key="pff"]):not([data-fact-key="coldFerment"]):not([data-fact-key="updated"]) > button[data-table-sort-key] { flex-direction: row-reverse; justify-content: flex-start; text-align: right; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > button[data-table-sort-key]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rust); } @media (hover: hover) and (pointer: fine) { :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-column-draggable], :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-column-draggable] > button[data-table-sort-key] { cursor: pointer; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-column-moving="drag"] > button[data-table-sort-key] { cursor: grabbing; } :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th[data-column-moving="drag"] { cursor: grabbing; background: var(--cream); box-shadow: 0 3px 6px rgba(var(--ink-rgb), .16); } } @media (hover: none) { :is(#lib-root, [data-lineup-inventory]) .lib-dough-table th > .lib-column-resize { pointer-events: none; touch-action: auto; } } /* Recipes group bands retain their controls inside the visible scroller. */ #lib-root .lib-dough-table .lib-table-series-cell:has(.lib-series-band) { padding: 0 !important; background: var(--section-bg) !important; border-bottom: 1px solid var(--card-border) !important; text-align: left; } #lib-root .lib-series-band { position: sticky; left: 0; box-sizing: border-box; width: var(--library-table-viewport-width); max-width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 8px; color: var(--stone-ink); background: var(--section-bg); font: 400 12px/1.4 var(--font-app); z-index: 2; } #lib-root[data-library-density="comfortable"] .lib-series-band { min-height: 52px; padding-left: 12px; } #lib-root .lib-series-band button, #lib-root .lib-series-band a { text-transform: none; letter-spacing: normal; margin: 0; box-sizing: border-box; } #lib-root .lib-series-toggle { align-self: stretch; display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; border-radius: var(--control-family-radius); } #lib-root .lib-series-band-title { font: 700 13px/1.35 var(--font-app); overflow-wrap: anywhere; } #lib-root .lib-series-chevron { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; color: var(--stone-ink); } #lib-root .lib-series-chevron svg { width: 16px; height: 16px; } #lib-root .lib-series-toggle[aria-expanded="false"] .lib-series-chevron svg { transform: rotate(-90deg); } #lib-root .lib-series-band-meta { flex: 0 0 auto; margin-left: 2px; color: var(--stone-ink); font: 400 12px/1.4 var(--font-app); white-space: nowrap; } #lib-root .lib-series-date { display: none; flex: 0 0 auto; white-space: nowrap; } #lib-root .lib-series-differing { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; height: 28px; min-height: 28px; padding: 0 8px; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: transparent; color: var(--ink); font: 600 13px/1.4 var(--font-app); white-space: nowrap; } #lib-root .lib-series-band .lib-series-band-create { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; min-height: 28px; padding: 0 10px; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: var(--card-bg); color: var(--ink); font: 600 13px/1.4 var(--font-app); text-decoration: none; white-space: nowrap; } #lib-root .lib-series-band-menu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid var(--control-family-border); border-radius: var(--control-family-radius); background: var(--card-bg); color: var(--stone); } #lib-root .lib-series-band-menu:last-child:not(.lib-series-band-create + *) { margin-left: auto; } #lib-root .lib-series-actions .lib-series-band-menu { width: 44px; height: 44px; flex-basis: 44px; margin: 0; } #lib-root .lib-series-band :is(button,a):hover { background: var(--card-bg); } #lib-root .lib-series-band :is(button,a):focus-visible, .lib-series-popover button:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-band { display: grid; grid-template-columns: minmax(0,1fr) auto 28px; gap: 0 8px; padding-bottom: 4px; min-height: 72px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-toggle { grid-column: 1 / 3; grid-row: 1; min-height: 40px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-band-menu { grid-column: 3; grid-row: 1; margin-left: 0; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-date { display: block; grid-column: 1; grid-row: 2; white-space: normal; padding-left: 42px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-differing { grid-column: 2 / 4; grid-row: 2; justify-self: end; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-band-create { display: none; } #lib-root .lib-table-name-link:has(.lib-table-version-inline) { display: block; align-content: center; } #lib-root .lib-table-version-inline { color: var(--stone-ink); font: 600 11px/1.4 var(--font-app); } .lib-series-popover { position: fixed; z-index: 1200; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; background: var(--card-bg); color: var(--ink); border: 1px solid var(--card-border); border-radius: var(--control-family-radius); padding: 12px; font: 500 13px/1.5 var(--font-app); text-align: left; } .lib-series-popover p { margin: 0 0 8px; } .lib-series-popover ul { margin: 0 0 12px; padding-left: 18px; } .lib-series-popover button { display: block; min-height: 36px; width: 100%; padding: 6px 10px; font: 600 12px/1.5 var(--font-app); color: var(--ink); background: transparent; border: 1px solid var(--card-border); border-radius: var(--control-family-radius); } .lib-series-popover.lib-column-menu button { border: 0; text-align: left; } .lib-series-popover button:hover { background: var(--section-bg); } #lib-root .lib-presentation-controls > .lib-difference-columns { max-width: 100%; white-space: normal; text-align: left; } @media (hover: none) { #lib-root .lib-series-band :is(button,a) { min-height: 32px; } } /* A popover is available; sage marks the applied columns snapshot only. */ #lib-root .lib-series-differing-chevron, #lib-root .lib-series-band-menu svg { display: flex; flex: none; } #lib-root .lib-series-differing-chevron svg { display: block; width: 10px; height: 10px; } #lib-root .lib-series-band .lib-series-differing[data-differences-active="true"] { background: var(--sage); border-color: var(--sage); color: var(--cream); } #lib-root .lib-series-band .lib-series-differing[data-differences-active="true"]:hover { background: var(--sage-hover); } /* Library identity targets leave the fact lanes and surrounding space selectable. */ #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-bounded-targets="true"] .lib-inventory-primary { display: flex; grid-column: 2; grid-row: 1; align-self: start; justify-self: start; width: fit-content; max-width: 100%; height: auto; min-height: 0; padding: 0 3px; box-sizing: border-box; } #lib-root[data-library-workspace="true"] .lib-command-placeholder { flex: 0 0 auto; width: 100%; } #lib-root[data-library-workspace="true"] .lib-command-placeholder[hidden] { display: none; } @media (min-width: 768px) and (hover: hover) and (pointer: fine) { body:has(#lib-root) .sticky-nav-wrapper { position: relative; top: auto; } #lib-root[data-library-workspace="true"] .lib-search-row.lib-workspace-commands.is-command-stuck { position: fixed; z-index: 980; margin: 0; background: var(--card-bg); box-shadow: 0 2px 4px #0002; } } #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-bounded-targets="true"][data-inventory-selectable="true"] .lib-inventory-primary { grid-column: 3; } #lib-root[data-inventory-presentation="readable"] .lib-table-name-link { width: fit-content; max-width: 100%; padding-inline: 3px; box-sizing: border-box; } #lib-root[data-inventory-presentation="readable"] a.lib-inventory-media:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; } #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"].is-selected, #lib-root[data-inventory-presentation="readable"] .lib-dough-table tbody tr.is-selected > :is(td, .lib-table-name, .lib-table-select, .lib-table-actions) { background: var(--lib-selected-bg); } #lib-root[data-inventory-presentation="readable"] :is(.lib-inventory-row, tr).is-selected :is(.lib-table-name-link, .lib-inventory-title) { color: var(--ink); } /* Comparison selection owns the complete row, including opaque pinned cells. */ #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] [data-comparison-selectable="true"] { --compare-row-fill: var(--card-bg); background: var(--compare-row-fill); cursor: pointer; } #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] [data-comparison-selectable="true"]:hover, #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] [data-comparison-selectable="true"].lib-comparison-chosen { --compare-row-fill: var(--cream); background: var(--compare-row-fill); } #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] [data-comparison-selectable="true"].lib-comparison-chosen:hover { --compare-row-fill: var(--section-bg); } #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] .lib-dough-table tbody tr[data-comparison-selectable="true"] > :is(td,.lib-table-name,.lib-table-actions) { background: var(--compare-row-fill); } #lib-root.lib-comparison-selecting [data-comparison-selectable="true"] :is(td,.lib-table-name-link,.lib-table-cover,.lib-inventory-primary,.lib-inventory-media,[data-lib-clipped]) { cursor: pointer; } #lib-root.lib-comparison-selecting[data-inventory-presentation="readable"] [data-comparison-selectable="true"] :is(.lib-table-name-link,.lib-inventory-title) { color: var(--ink); } @media (hover: hover) and (pointer: fine) { #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"]:not(.is-selected):hover { background: color-mix(in srgb, var(--section-bg) 50%, var(--card-bg)); } #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"]:not(.is-selected) .lib-inventory-primary:hover .lib-inventory-title, #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"]:not(.is-selected):has(> a.lib-inventory-media:hover) .lib-inventory-title, #lib-root[data-inventory-presentation="readable"] .lib-dough-table tr:not(.is-selected):has(.lib-table-cover:hover) .lib-table-name-link { color: var(--rust); } } @media (min-width: 640px) and (hover: hover) and (pointer: fine) { #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"] .lib-inventory-title, #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"] .lib-inventory-disclosure-control { min-height: 28px; } #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-mode="inventory"] .lib-inventory-actions { grid-row: 1 / 4; } #lib-root[data-inventory-presentation="readable"] .lib-inventory-row[data-inventory-density="compact"][data-inventory-mode="inventory"] { padding-block: 6px; row-gap: 2px; } } #lib-root[data-library-density="comfortable"] .lib-series-chevron { flex-basis: 40px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-date-inline { display: none; } @media (hover: none) { #lib-root .lib-series-band { padding-right: 12px; } #lib-root .lib-series-band-menu { flex-basis: 32px; width: 32px; } #lib-root .lib-dough-table-frame[data-series-narrow="true"] .lib-series-band { grid-template-columns: minmax(0,1fr) auto 32px; } }