/* LAYER: page — HQ's own layout. Layered like everything else rather than left out: an unlayered sheet beats every layer regardless of specificity, which would make a one-class rule here silently outrank a three-class rule in brand.css. */ @layer page { /* Drift HQ — the app's own layout. The BRAND is /shared/brand.css, loaded * before this file (see index.html); the spec is ../brand/BRAND.html, which HQ * serves at Company > Brand. The tokens, the reset, the base type, the buttons, * the cards and the sidebar all come from there. What is HQ's is below: where * the chrome sits, and then boards, modals, the presentation stage, the observe * frame. * * HQ DEVIATES FROM THE SYSTEM IN THREE PLACES, and all three are stated at the * rule that makes them, so "what does HQ do differently" is a read rather than a * grep: the body leading immediately below, .app-content's horizontal padding, * and .btn's white-space. Each one is a density decision that follows from HQ * being a working surface with a 284px column already spent. * * brand.css's --announce-h, --nav-h and --header-h are NOT overridden here, and * their absence is deliberate: HQ's chrome is a column, so it has no * announcement strip, no navbar and no band to clear. Nothing on this page reads * those tokens, and a zeroed override for a band that does not exist is a number * the next reader has to disprove. */ /* 1.5 against the system's 1.75. HQ is a dense operational UI — boards, tables, * modals — where the marketing site's airier leading costs a visible row of * content per screen. */ body { line-height: 1.5; } .hidden { display: none !important; } .muted { color: var(--muted); } /* ---- App shell: an ink sidebar, and the content beside it ------------------ * HQ's whole chrome is one column. The COMPONENT is brand.css's `.sidenav` — * the ink field, the wordmark, the group headings, the links and their states. * What is below is only what a host owes it: where the column sits, how the * content clears it, and the two pieces of furniture in its foot. * * That split is the navbar's rule too (BRAND.html, "the header"): a component * that inherits its position from whoever loads it is not a component, and one * that dictates its position cannot be used twice. * * Scoped by class, NOT left as a bare `body` rule: login.html shares this * stylesheet and its is a CENTRED flex row, which a * bare rule here would silently flip to a column and then rely on specificity * to undo — a trap rather than a layout. */ .app-body { display: flex; flex-direction: column; min-height: 100vh; } /* FIXED and full height, scrolling independently of the page. The account cluster sits at the foot of this column, so a sidebar that scrolled away with a long backlog would take the way out of HQ with it. */ .app-side { position: fixed; inset: 0 auto 0 0; z-index: 998; /* The column's own right edge, one step up from ink. It is nearly silent against the grey desk, and it is load-bearing on ONE view: Company > Brand frames BRAND.html, which carries an ink sidebar of its own, and without a rule between them the two abut into a single 535px slab holding two wordmarks. Ink cannot separate ink. */ border-right: 2px solid var(--ink-raised); } .app-shell { flex: 1 1 auto; display: flex; min-height: 0; /* Room for the sidebar. It is out of flow, so nothing reserves this space on its own and the boards would start underneath it. --sidenav-w is declared on :root by brand.css, which owns the column's width — reading it here is what stops the offset and the width being two numbers that can disagree. */ margin-left: var(--sidenav-w); } /* The account cluster, on ink. --muted is a dark-on-light value and measures 1.4:1 against this field — brand.css names an on-ink rank for exactly this. A flex row rather than inline text so the three parts keep one gap between them and the whole thing wraps inside a 284px column instead of running out of it. */ .hq-greeting { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 300; color: var(--on-ink-muted); } /* The way out. HQ's own button at HQ's own density — what changes on a dark field is the EDGE: an ink border and an ink drop shadow are both invisible there, so both go white. That is the same inversion the wordmark's last two underlines make two rows above it. */ .sidenav-foot .btn { width: 100%; border-color: #fff; } .sidenav-foot .btn:hover { box-shadow: 0 3px 0 #fff; } .sidenav-foot .btn:active { box-shadow: 0 0 0 #fff; } .app-content { flex: 1 1 auto; min-width: 0; width: 100%; max-width: var(--max-width); margin: 0 auto; /* NOT the site's --padding, and the deviation is the sidebar. That token is sized for a page that owns the whole viewport; HQ's content starts 284px in, and a second gutter of up to 150px on top of the column costs the backlog's toolbar a row of buttons at laptop width. The column IS the left gutter — this is the air between it and the work, not the margin of a page. The top number is larger than the sides for a different reason: nothing sits above the first heading, so this is the only air it gets. */ padding: 40px clamp(20px, 3vw, 64px); } /* Observe and Brand hand the entire canvas to a framed document: no padding, no max-width, no centring gutters. Set on rather than on the section, because all of those live on .app-content, a parent. The class names the LAYOUT rather than any one page, so Observe, Brand and Docs share it — a second identical block keyed on a second class is how they would drift apart. app.js toggles it for all three. */ body.full-bleed .app-content { padding: 0; max-width: none; } /* A full-bleed view hands the canvas to a document that scrolls its own parts, so the shell has to be EXACTLY the viewport rather than at least it. Under min-height alone the body grows to its content — measured at 2586px against a 1050px viewport — and every inner overflow:auto below it is decorative. The selector sits on itself, not on a descendant: `.app-body` IS the body element, so `body.full-bleed .app-body` matches nothing at all. */ body.app-body.full-bleed { height: 100vh; min-height: 0; overflow: hidden; } /* ---- Narrow screens ---- * A 284px column is most of a phone, so the sidebar comes out of its pinning * and sits in normal flow at the top of the document. The SHAPE it takes there * — a wrapping row of links with the marker on the bottom edge — is brand.css's, * at this same breakpoint. Only the pinning is HQ's to undo, because only the * pinning is HQ's to state. * * .app-side is the first element in and .app-body is a flex column, so * dropping the fixed positioning is the whole of the move: the content follows * the column instead of sitting beside it, and nothing is re-ordered. */ @media (max-width: 900px) { /* The right edge goes with the pinning. In flow it is a 2px line down the viewport's own edge, with nothing matching it on the left. */ .app-side { position: static; border-right: none; } .app-shell { margin-left: 0; } /* The foot is a row again rather than a stack: at full width the greeting and the button fit side by side, and a full-width logout button across a phone is a target the size of a banner. */ .sidenav-foot { justify-content: space-between; } .sidenav-foot .btn { width: auto; } } /* A toolbar with no title: the actions stay right-aligned rather than collapsing to the left where the heading used to be. */ .toolbar.toolbar-headless { justify-content: flex-end; } /* ---- Toolbar ---- */ .toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .toolbar-title h1 { font-size: 22px; font-weight: 600; } .toolbar-title p { font-size: 13px; } .toolbar-actions { display: flex; align-items: center; gap: 10px; } /* The backlog's controls row: search on the left, the sort/closed/new cluster on the right. .toolbar aligns to flex-end for the title-and-actions shape, which is wrong here — every child is a control of the same height, so they centre. */ .backlog-toolbar { align-items: center; } .backlog-search { display: flex; align-items: center; gap: 10px; /* Takes the room the actions do not, and min-width:0 lets it actually shrink inside the flex row instead of forcing the toolbar wider than the list. */ flex: 1 1 auto; min-width: 0; } .search-input { font-family: inherit; font-size: 13px; font-weight: 300; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 0; /* The same padding as .sort-select and .ms-trigger, so the row is one band of equal-height controls rather than three sizes. */ padding: 0.55rem 0.6rem; width: 100%; /* Fills the room it was given. The 340px cap was drawn when the toolbar was a right-aligned cluster and the search box was a guest in it; now that search owns the left of the row, capping it just left a gap between the field and the space allocated to it. */ max-width: none; /* Matches the row. Every other control here settles at 38px (the New task button sets that floor) and the input came out 36 — two pixels is not much until three controls sit in a line and one of them is visibly short. */ min-height: 38px; box-sizing: border-box; } .search-input::placeholder { color: var(--muted); } /* The same focus ring the modal fields use. */ .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } /* Only present while a query is — a permanent "47 of 47" is noise. */ .search-count { font-size: 12px; color: var(--muted); white-space: nowrap; } .sort-select { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 2px solid var(--ink); padding: 0.55rem 1.7rem 0.55rem 0.6rem; /* A native with long option text fills its column instead of growing past the panel (the "hanging contents"). */ .modal-panel .row label { flex: 1; min-width: 0; } .field-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-top: 2px solid var(--bg); padding-top: 10px; margin-top: 2px; } .small { font-size: 11px; } .pitch-mix { display: flex; flex-direction: column; gap: 6px; } .pitch-mix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 300; } .pitch-mix-row input { width: 64px; flex-shrink: 0; } .modal-panel input, .modal-panel select, .modal-panel textarea { font-family: inherit; font-size: 13px; font-weight: 300; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 7px 9px; /* Fill the column, don't grow to content — a multi-select's long option text must not widen the control past the panel. */ width: 100%; box-sizing: border-box; } .modal-panel input:focus, .modal-panel select:focus, .modal-panel textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } .modal-panel textarea { resize: vertical; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* ── Link picker (blocks / blocked by) ───────────────────────────────────── * The native is still a poor touch control; replacing it with a searchable picker is tracked separately rather than bolted on here. */ .modal-panel select[multiple] { -webkit-appearance: none; appearance: none; background-image: none; min-height: 132px; padding-right: 0.6rem; } /* Docked, not floating at the end of a scroll. Save is the reason the sheet is open; it should never be something you have to go looking for. */ .modal-actions { position: sticky; bottom: 0; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 2px solid var(--ink); } .modal-actions .btn { flex: 1 1 0; min-height: 48px; } } /* ---- Login page ---- */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-shell { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .login-logo { display: flex; align-items: center; gap: 10px; } .login-logo .title { font-family: 'Tinos', serif; font-weight: 700; font-style: italic; font-size: 2.5rem; line-height: 1; } .login-panel { width: 100%; background: var(--panel); border: 2px solid var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .login-panel h2 { font-size: 18px; font-weight: 600; } .login-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; } .login-panel input { font-family: inherit; font-size: 13px; font-weight: 300; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 8px 9px; width: 100%; } .login-panel input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } .login-panel .btn { width: 100%; text-align: center; } .login-error { font-size: 12px; color: var(--error); min-height: 1em; } /* ---- Generic modal helpers ---- */ .modal-actions .spacer { flex: 1; } .btn.danger-outline { background: var(--panel); color: var(--error); border-color: var(--error); } .btn.danger-outline:hover { background: var(--error); color: #fff; box-shadow: 0 3px 0 var(--ink); } /* ---- Cloud tab: unified Component/Sub-component/System/TODO tree ---- * A page-local box, NOT the pinned app-sidebar treatment — this is * content-area sub-navigation, not primary app nav. Azure DevOps-style: * structural nodes + the todos themselves live in one expand/collapse tree * (see renderTodoTree), one card per top-level component rather than a * single continuous list. */ .todo-tree { display: flex; flex-direction: column; gap: 10px; } .todo-card { background: var(--panel); border: 2px solid var(--ink); } /* Every expandable level is its own card, and every card is a SIBLING inside .todo-tree — a sub-component's/system's card is never placed inside its parent's card element. margin-left (not padding-left on the row, not DOM nesting) is what conveys the hierarchy; vertical spacing between every card still comes from .todo-tree's own flex gap. */ .todo-card-nested-1 { margin-left: 24px; } .todo-card-nested-2 { margin-left: 48px; } .todo-card-nested-3 { margin-left: 72px; } .icon-btn { font-family: inherit; font-size: 11px; line-height: 1; background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px 5px; flex-shrink: 0; } .icon-btn:hover { color: var(--brand-2); } .add-component-btn { display: block; width: calc(100% - 24px); margin: 10px 12px 4px; font-family: inherit; font-size: 12px; font-weight: 600; background: none; border: 2px dashed var(--muted); color: var(--muted); cursor: pointer; padding: 6px 10px; } .add-component-btn:hover { border-color: var(--brand-2); color: var(--brand-2); } .add-subcomponent-btn:hover { border-color: var(--brand-2); color: var(--brand-2); } /* ---- Toast notifications (#SITESHQ12) ---- */ /* Reusable brand-consistent toast: fixed bottom-right stack, same visual language as the rest of HQ (ink border, no radius, drop-shadow-on-hover affordance via the .btn family's flat aesthetic). showToast() in app.js is the only entry point — any future save/action can call it. */ .toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 500; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px; background: #fff; border: 2px solid var(--ink); border-left: 4px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease; } .toast.show { opacity: 1; transform: translateY(0); } .toast-success { border-left-color: var(--brand-3); } .toast-error { border-left-color: var(--error); } /* ---- Company > Presentations (#SITESHQ21) — Marp-based decks ---- */ .presentation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .presentation-card { background: var(--panel); border: 2px solid var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .presentation-card:hover { transform: translateY(-4px); box-shadow: 0 4px 0 var(--ink); } .presentation-card-thumb { width: 100%; aspect-ratio: 1280 / 720; overflow: hidden; position: relative; background: var(--bg); border: 2px solid var(--ink); } .presentation-card-thumb .marpit { transform-origin: top left; } .presentation-card-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; } .presentation-card-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .presentation-card-meta { font-size: 12px; color: var(--muted); } .presentation-card-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; padding-top: 6px; border-top: 2px solid var(--bg); } /* Editor — title + a tall monospace textarea, not a modal (markdown wants the full pane width, unlike the small title/link/description forms). */ .pres-title-input { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); padding: 9px 12px; margin-bottom: 10px; width: 100%; } .pres-title-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } .pres-markdown-editor { font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); padding: 14px; width: 100%; min-height: 60vh; resize: vertical; } .pres-markdown-editor:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } /* Visual slide editor (#SITESHQ21) — layout-picker + per-slide field forms, built on top of the same Markdown storage; "Raw Markdown" above is the plain-textarea fallback. */ .pres-editor-tabs { display: flex; gap: 2px; margin-bottom: 12px; } .pres-tab-btn { font-family: inherit; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); border: 2px solid var(--ink); cursor: pointer; padding: 7px 14px; } .pres-tab-btn.active { background: var(--ink); color: #fff; } .pres-slide-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .pres-slide-card { background: var(--panel); border: 2px solid var(--ink); } .pres-slide-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; } .pres-slide-thumb { flex: 0 0 auto; width: 220px; height: 124px; overflow: hidden; position: relative; background: var(--bg); border: 2px solid var(--ink); } .pres-slide-thumb .marpit { transform-origin: top left; } .pres-slide-meta { flex: 1 1 auto; font-size: 13px; font-weight: 600; } .pres-slide-actions { display: flex; gap: 2px; flex-shrink: 0; } /* Expanded slide: fields on the left, a much larger live preview on the right — side by side so you can see the slide while you're editing it, not just in the small row thumbnail above. Wraps on narrow screens. */ .pres-slide-editor { display: flex; flex-wrap: wrap; gap: 20px; border-top: 2px solid var(--bg); padding: 14px 16px 16px; } .pres-slide-editor-form { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 10px; } .pres-slide-editor-preview { flex: 0 0 auto; position: sticky; top: 10px; align-self: flex-start; } .pres-slide-preview-box { width: 720px; max-width: 100%; aspect-ratio: 1280 / 720; overflow: hidden; position: relative; background: var(--bg); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); } .pres-slide-preview-box .marpit { transform-origin: top left; } .pres-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; } .pres-field input[type="text"], .pres-field textarea, .pres-field select { font-family: inherit; font-size: 13px; font-weight: 300; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); padding: 7px 9px; } .pres-field textarea { resize: vertical; font-family: 'Courier New', monospace; } .pres-field input:focus, .pres-field textarea:focus, .pres-field select:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-2); } .pres-list-field, .pres-rows-field { display: flex; flex-direction: column; gap: 6px; } .pres-list-row, .pres-rows-row { display: flex; gap: 6px; } .pres-list-row input, .pres-rows-row input { flex: 1; } .pres-list-remove { font-family: inherit; background: none; border: 2px solid var(--ink); color: var(--error); cursor: pointer; padding: 0 8px; flex-shrink: 0; } /* Layout picker modal — a grid of rendered previews, not a text list. Each item's title attribute carries the layout's description (a tooltip — the thumbnail is what you're actually choosing by). */ .layout-picker-panel { max-width: 1020px; max-height: 80vh; overflow-y: auto; } .layout-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .layout-picker-item { font-family: inherit; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 2px solid var(--ink); cursor: pointer; padding: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .layout-picker-item:hover { transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink); } .layout-picker-thumb { width: 100%; aspect-ratio: 1280 / 720; overflow: hidden; position: relative; background: var(--bg); border: 2px solid var(--ink); } .layout-picker-thumb .marpit { transform-origin: top left; } .layout-picker-label { font-size: 12px; font-weight: 600; text-align: center; } /* Preview ("Open") — every slide stacked and scaled down, read-only. Marpit renders each deck as a fixed 1280x720
; scaling the whole .marpit wrapper down (transform-origin top left) keeps its real layout instead of re-flowing it into something markdown-it never designed. */ .presentation-preview { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 10px 0 40px; } .presentation-preview .marpit { transform-origin: top center; box-shadow: 0 3px 0 var(--ink); border: 2px solid var(--ink); } /* Fullscreen presenter mode — one slide at a time, dark surround (the one deliberate frame-break from "no dark mode", same exception the brand template itself makes for code blocks). */ .present-overlay { position: fixed; inset: 0; background: #0b1220; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .present-stage { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .present-stage .marpit { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4); } .present-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px; } .present-nav-btn, .present-exit-btn { font-family: inherit; font-size: 14px; font-weight: 600; background: var(--panel); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; padding: 6px 14px; } .present-nav-btn:hover, .present-exit-btn:hover { background: var(--bg); } .present-counter { font-size: 13px; font-weight: 600; color: #fff; min-width: 60px; text-align: center; } .toast-info { border-left-color: var(--brand-2); } /* ---- Backlog: the list column ---- * The controls row and the tree, in one stack. The gap is the tree's own row gap rather than a larger separation, which is what makes the controls read as the first row of the list instead of a band sitting above it. .toolbar's own margin-bottom is dropped for the same reason — two spacings for one gap is how a row stops looking like a row. */ .backlog-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .backlog-main > .toolbar { margin-bottom: 0; } /* Says WHICH of the two reasons the list is empty. "No tasks" over a filter with closed ones hidden is a half-truth, and the fix is one toggle away. */ .todo-empty { font-size: 14px; color: var(--muted); padding: 32px 4px; } /* =========================================================================== THE ARRIVAL — revealed content rises 3px into place, staggered down its own column. Deliberately colourless. A triad-tinted version was built and rejected: the colour had to be positional to avoid claiming a meaning, and a positional colour on a board where colour already carries type, priority and state is one signal too many. The movement alone says the thing appeared. WHEN is decided by an element's position in its own column, set from JS — the cards sit inside a labelled group, so a CSS :nth-child would count the label. The stagger caps at the seventh row so a long column still lands inside the budget. ========================================================================= */ @keyframes drift-arrive { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .epic-body.arrives .todo-item, .epic-body.arrives .epic-description > *, .todo-detail.arrives { animation-name: drift-arrive; animation-duration: 200ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); animation-fill-mode: backwards; animation-delay: calc(var(--i, 0) * 28ms); } /* ---- Structure modal: the registry, three levels deep ---- * Depth by indent AND weight: indentation alone stops being legible once the * names are long enough to wrap. */ .structure-tree { max-height: 55vh; overflow-y: auto; border: 2px solid var(--ink); background: var(--panel); padding: 4px 0; } .structure-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; color: var(--ink); padding: 4px 12px; } .structure-row:hover { background: var(--bg); } .structure-row.depth-0 { font-weight: 700; margin-top: 6px; } .structure-row.depth-1 { padding-left: 28px; } .structure-row.depth-2 { padding-left: 44px; font-size: 12px; color: var(--muted); } .sr-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* An empty group is a real fact about the backlog, so the zero is shown rather than hidden — blanking it would make the group look unmeasured instead of clear. */ .sr-count { flex-shrink: 0; font-size: 10px; font-weight: 700; border: 2px solid var(--ink); background: #fff; padding: 0 5px; } /* Always visible, not hover-revealed: this modal exists to be edited from, so hiding its only controls until hover would hide the point of the panel. */ .sr-actions { display: flex; gap: 2px; flex-shrink: 0; } .structure-empty { font-size: 13px; color: var(--muted); padding: 8px 12px; } /* The controls row stops being a row. Below this width the search box was being crushed to 27px — flex:1 1 auto with min-width:0 shrinks to nothing while the sort/closed/new cluster refuses to give up any width — and both labels wrapped onto three lines. Search takes its own full-width row; the cluster spreads across a second one. */ @media (max-width: 640px) { .backlog-toolbar { flex-wrap: wrap; gap: 10px; } /* display:contents dissolves the wrapper so the sort control becomes a direct flex item beside the search box, without moving anything in the DOM. The alternative was hoisting the