/* ===================================================================================================== VAULT DOCK — R289/§282 P5 (J4). Styles for pwa/vault-dock.js: the Recents/Favorites/Locations/Tags navigation dock. RAIL beside the Vault on wide containers (@container dockwrap), off-canvas BOTTOM SHEET behind a slim handle on narrow ones (convlist.css sheet precedent: scrim z229 / sheet z230, grabber, safe-area, reduced-motion-gated slide). Strict CSP (style-src 'self'): zero inline styles — dynamic values arrive via setProperty from vault-dock.js (--vdk-c tag dot color, --vdk-depth picker indent, transform during grip drag). TOKENS mirror vault.css names/values verbatim (the dock sits BESIDE .vlt, so .vlt's tokens do not cascade here; identical names make a later hoist to a shared ancestor a no-op — Selection Record #2). Scoped entirely under .vdk-wrap / .vdk / .vdk-shell / .vdk-scrim. Layer names shared with vault.css. Width numbers informed by macos-web (MIT — CSS numbers only, no Apple assets): 224px rail, 13px-class row type, 10px-class section labels. ===================================================================================================== */ @layer tokens, layout, components, state; /* ============================== TOKENS (vault.css mirror — same names, same values) ================= */ @layer tokens { :where(.vdk-wrap, .vdk-shell) { --hue: 235; --accent-h: 268; --accent-s: 88%; --accent-l: 68%; --accent: var(--accent-h) var(--accent-s) var(--accent-l); --sidebar: var(--hue) 16% 7.5%; --app: var(--hue) 15% 10.5%; --box: var(--hue) 14% 14.5%; --hover: var(--hue) 14% 18.5%; --selected: var(--accent-h) 42% 22%; --line: var(--hue) 12% 21%; --frame: var(--hue) 12% 27%; --ink: var(--hue) 16% 95%; --ink-dull: var(--hue) 11% 68%; --ink-faint: var(--hue) 9% 50%; --font-display: 'Comfortaa', ui-rounded, system-ui, sans-serif; --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; --fs-2xs: clamp(9.5px, 9.1px + 0.12vw, 10.5px); --fs-xs: clamp(10.5px, 10.1px + 0.15vw, 11.5px); --fs-sm: clamp(11.5px, 11.1px + 0.15vw, 12.5px); --fs-md: clamp(12.5px, 12.1px + 0.18vw, 13.5px); --radius: 12px; --tap-floor: 24px; /* R267 §L1: 24px AA floor on fine pointers; 44px only under coarse */ --ease-swift: cubic-bezier(.2, .8, .2, 1); color-scheme: dark; } /* LIGHT — attribute override wins; prefers-color-scheme covers the unset case (vault.css pattern) */ :root[data-scheme="light"] :where(.vdk-wrap, .vdk-shell) { --sidebar: var(--hue) 28% 95%; --app: var(--hue) 30% 98.5%; --box: 0 0% 100%; --hover: var(--hue) 26% 93%; --selected: var(--accent-h) 62% 92%; --line: var(--hue) 20% 87%; --frame: var(--hue) 18% 80%; --ink: var(--hue) 24% 13%; --ink-dull: var(--hue) 14% 36%; --ink-faint: var(--hue) 12% 50%; --accent-l: 58%; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-scheme]) :where(.vdk-wrap, .vdk-shell) { --sidebar: var(--hue) 28% 95%; --app: var(--hue) 30% 98.5%; --box: 0 0% 100%; --hover: var(--hue) 26% 93%; --selected: var(--accent-h) 62% 92%; --line: var(--hue) 20% 87%; --frame: var(--hue) 18% 80%; --ink: var(--hue) 24% 13%; --ink-dull: var(--hue) 14% 36%; --ink-faint: var(--hue) 12% 50%; --accent-l: 58%; color-scheme: light; } } } /* ============================== LAYOUT ============================== */ @layer layout { .vdk-wrap, .vdk-wrap *, .vdk-wrap *::before, .vdk-wrap *::after, .vdk-shell, .vdk-shell *, .vdk-shell *::before, .vdk-shell *::after { box-sizing: border-box; } /* the host (#vaultMount / .lib-vault) BECOMES the wrap — additive class, its clamp is untouched. NB container-type makes this a containing block for fixed descendants; that is WHY the sheet re-parents to (vault-dock.js sheetOpen — the convlist-documented trap). */ .vdk-wrap { display: flex; flex-direction: column; min-block-size: 0; position: relative; container: dockwrap / inline-size; } .vdk-wrap > .vlt { flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; } /* narrow default: slim handle strip on top, no rail */ .vdk-handle { order: -2; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-block-size: 28px; padding: 2px 10px; margin-block-end: 4px; border: 1px solid hsl(var(--line)); border-radius: 9px; background: hsl(var(--box)); color: hsl(var(--ink-dull)); font: 600 var(--fs-xs)/1.2 var(--font-body); cursor: pointer; } .vdk-handle:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); } .vdk-handle .ico { inline-size: 1.1em; block-size: 1.1em; } .vdk-wrap > .vdk { order: -1; display: none; } /* WIDE: the rail. 720px of CONTAINER width — 844×390 landscape phone qualifies (rail is collapsible there); portrait phones (320/390) stay in sheet mode. */ @container dockwrap (min-width: 720px) { /* INTEGRATOR FIX (R289/§282 wave-1, measured in the REAL host): the rule that used to live here, `.vdk-wrap { flex-direction: row; }`, could never apply — an element is NEVER matched by a query on the container it declares itself, and `.vdk-wrap` carries `container: dockwrap / inline-size`. So the wrap stayed a COLUMN while `.vdk` (a descendant, correctly matched) became a full-width 496px item that starved `.vlt` to block-size 0 inside the `.lib-vault` clamp — a blank file manager. The standalone P5 probe could not see it: its `#dkProbe` host contains no `.vlt`. The rail is taken OUT OF FLOW instead. Descendant-only rules, still container-driven (ASL Law 4), no host CSS touched, `.lib-vault`'s clamp (library.css:573/578) unchanged. `.vdk-wrap` is already `position: relative` (and, carrying layout containment, is a containing block regardless). */ .vdk-handle { display: none; } .vdk-wrap > .vdk { display: flex; flex-direction: column; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; inline-size: var(--vdk-w, 224px); min-block-size: 0; border-inline-end: 1px solid hsl(var(--line)); background: hsl(var(--sidebar)); } /* The offset must SHRINK the vault, not just push it: vault.css:114 pins `.vlt { inline-size: 100% }`, which defeats the flex cross-axis stretch that would otherwise subtract the margin. Without the calc() the vault renders 224px wider than its host and `.lib-vault { overflow: hidden }` silently CLIPS its right edge - the Details / Dual / View tools land outside the card. Seen in the 1440x900 capture, then measured: vltW 1028 inside a 1030 wrap, tools at wrap-x 1030/1100/1176. */ /* R289 follow-up (builder report, 2026-08-18): the rail's width is ONE custom property so the three states — open (user-resizable), icons, and fully hidden — are the same mechanism, and so the vault's offset can never disagree with the rail's actual width. `--vdk-w` is written on `.vdk-wrap` by vault-dock.js (applyWidth); the 224px fallback keeps the pre-JS paint identical to the shipped one. WHY THIS MATTERS BEYOND TASTE: `.vlt` carries `container-type: inline-size`, and vault.css stacks the dual panes below 900cqi because two panes can no longer hold their 280px minimum. A permanently 224px rail put a 1440x900 desktop at vltW 804 -> STACKED panes ~141px tall, which read to the builder as "you removed pane resizing". Giving the width back is the fix; see vault.js dockYieldForDual(). */ .vdk-wrap > .vlt { margin-inline-start: var(--vdk-w, 224px); inline-size: calc(100% - var(--vdk-w, 224px)); } .vdk-wrap > .vdk.vdk--collapsed .vdk-scroll, .vdk-wrap > .vdk.vdk--collapsed .vdk-title { display: none; } .vdk-wrap > .vdk.vdk--collapsed .vdk-head { justify-content: center; padding-inline: 0; } /* FULLY HIDDEN: zero inline-size, no border, nothing focusable. It must take NO space on the left — so the way back is an absolutely-positioned affordance that participates in no layout box. */ .vdk-wrap > .vdk.vdk--hidden { border-inline-end: 0; visibility: hidden; } .vdk-wrap > .vdk.vdk--hidden .vdk-resizer { display: none; } /* the drag strip that resizes the rail (pointer + keyboard; role=separator like the pane divider) */ .vdk-resizer { position: absolute; inset-block: 0; inset-inline-end: -3px; inline-size: 6px; cursor: col-resize; z-index: 3; background: transparent; border: 0; padding: 0; touch-action: none; } .vdk-resizer::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 2px; inline-size: 2px; background: transparent; transition: background .12s ease; } .vdk-resizer:hover::before, .vdk-resizer:focus-visible::before { background: hsl(var(--accent)); } .vdk-resizer:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: -1px; border-radius: 3px; } .vdk--collapsed .vdk-resizer { inset-inline-end: -3px; } @media (pointer: coarse) { .vdk-resizer { inline-size: 12px; inset-inline-end: -6px; } } @media (prefers-reduced-motion: reduce) { .vdk-resizer::before { transition: none; } } } /* The restore affordance for the fully-hidden state. Absolutely positioned => zero layout cost, which is the builder's actual requirement ("takes no space on the left when fully collapsed"). Only rendered while hidden; 44x44 hit area under a coarse pointer per ASL Law 5. */ .vdk-restore { position: absolute; inset-block-start: 6px; inset-inline-start: 0; z-index: 4; display: none; place-items: center; inline-size: 22px; block-size: 34px; padding: 0; border: 1px solid hsl(var(--line)); border-inline-start: 0; border-start-end-radius: 6px; border-end-end-radius: 6px; background: hsl(var(--sidebar)); color: inherit; cursor: pointer; } .vdk-wrap.vdk-wrap--hidden .vdk-restore { display: grid; } .vdk-restore:hover, .vdk-restore:focus-visible { background: hsl(var(--accent) / .14); } .vdk-restore:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 1px; } .vdk-restore svg { inline-size: 14px; block-size: 14px; } @media (pointer: coarse) { .vdk-restore { inline-size: 28px; block-size: 44px; } } .vdk-scroll { flex: 1 1 auto; min-block-size: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; padding-block-end: 8px; } /* ---- SHEET presentation (narrow): body-level shell + scrim, convlist z ruling 229/230 ---- */ .vdk-scrim { position: fixed; inset: 0; z-index: 229; background: rgba(8, 8, 10, .38); } .vdk-shell { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 230; display: flex; flex-direction: column; border: 1px solid hsl(var(--line)); border-block-end: 0; border-radius: 18px 18px 0 0; background: hsl(var(--sidebar)); color: hsl(var(--ink)); /* dvh, deliberately unaccompanied: convlist.css L1 ruling — a MODAL sheet over a pinned shell; dvh/svh/lvh share one 2022 baseline, and a % here would resolve against a transformed ancestor */ max-block-size: min(72dvh, 560px); padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); } .vdk-shell.is-in { transform: translateY(0); } @media (prefers-reduced-motion: no-preference) { .vdk-shell { transition: transform .14s var(--ease-swift); } } .vdk-grab { flex: 0 0 auto; inline-size: 44px; block-size: 4px; border-radius: 2px; background: hsl(var(--frame)); margin: 8px auto 2px; } .vdk--sheet { display: flex; flex-direction: column; min-block-size: 0; inline-size: 100%; font-family: var(--font-body); } /* reduced transparency: the sheet is already SOLID; the scrim goes near-opaque instead of see-through */ @media (prefers-reduced-transparency: reduce) { .vdk-scrim { background: rgba(8, 8, 10, .82); } } } /* ============================== COMPONENTS ============================== */ @layer components { .vdk { color: hsl(var(--ink)); font-family: var(--font-body); } .vdk-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; } .vdk-title { font: 700 var(--fs-sm)/1.2 var(--font-display); color: hsl(var(--ink)); } .vdk-collapse { display: grid; place-items: center; inline-size: var(--tap-floor); block-size: var(--tap-floor); border: 0; border-radius: 7px; background: none; color: hsl(var(--ink-faint)); cursor: pointer; } .vdk-collapse:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); } .vdk--collapsed .vdk-collapse__ic { rotate: 180deg; } .vdk--sheet .vdk-collapse { display: none; } /* collapsing is a rail affair; the sheet has the scrim */ /* ---- sections ---- */ .vdk-sec { padding-block: 3px; } .vdk-sec + .vdk-sec { border-block-start: 1px solid hsl(var(--line) / .55); } .vdk-sec__hd { display: flex; align-items: center; gap: 2px; padding-inline: 6px; } .vdk-sec__tg { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: 5px; min-block-size: var(--tap-floor); padding: 2px 4px; border: 0; border-radius: 7px; background: none; cursor: pointer; color: hsl(var(--ink-faint)); font: 700 var(--fs-2xs)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .05em; } .vdk-sec__tg:hover { color: hsl(var(--ink-dull)); background: hsl(var(--hover) / .6); } .vdk-sec__ic { inline-size: 1.15em; block-size: 1.15em; } .vdk-chev { inline-size: 1em; block-size: 1em; rotate: 90deg; } @media (prefers-reduced-motion: no-preference) { .vdk-chev { transition: rotate .12s var(--ease-swift); } } .vdk-sec.is-closed .vdk-chev { rotate: 0deg; } .vdk-sec.is-closed .vdk-list { display: none; } .vdk-sec__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- rows ---- */ .vdk-list { list-style: none; margin: 0; padding: 2px 6px; display: flex; flex-direction: column; gap: 1px; } .vdk-list li { display: flex; align-items: center; min-inline-size: 0; } .vdk-row { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: 8px; min-block-size: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: hsl(var(--ink-dull)); font: 500 var(--fs-sm)/1.3 var(--font-body); text-align: start; } .vdk-row:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); } .vdk-row .ico { flex: 0 0 auto; inline-size: 1.1em; block-size: 1.1em; color: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); } .vdk-row__t { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vdk-row[aria-current="true"] { background: hsl(var(--selected)); color: hsl(var(--ink)); } .vdk-row[aria-disabled="true"] { opacity: .55; cursor: default; } .vdk-empty { display: flex; align-items: center; gap: 6px; min-inline-size: 0; padding: 4px 8px; color: hsl(var(--ink-faint)); font-size: var(--fs-xs); } .vdk-empty .ico { flex: 0 0 auto; inline-size: 1em; block-size: 1em; opacity: .6; } .vdk-loc-absent .vdk-row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- favorites: grip / remove ---- */ .vdk-grip { flex: 0 0 auto; inline-size: 14px; block-size: 20px; display: grid; place-items: center; color: hsl(var(--ink-faint)); opacity: 0; cursor: grab; touch-action: none; /* the ONLY element that eats pans — the list must keep scrolling */ border-radius: 5px; } .vdk-grip .ico { inline-size: 11px; block-size: 11px; } .vdk-fav:hover .vdk-grip, .vdk-grip:focus-visible { opacity: .7; } /* R289/§282 f/u 3 (builder: "when any folder or file is added to favorites or locations there is no way to remove what the user added"). THE CONTROL EXISTED AND WAS INVISIBLE: `opacity: 0` revealed only by `:hover` on the row. On a touch device there is no hover at all, so it could never be seen; on desktop it was undiscoverable. That is the hover-only affordance ASL Law 5 / §7 explicitly bans, and it read to the person as "this cannot be removed". It is visible by default now — quiet, not hidden — and rises to full strength on hover/focus. Removal is ALSO reachable from the dock context menu (Finder's own path) and by keyboard, so no single interaction owns it. */ .vdk-x { flex: 0 0 auto; inline-size: var(--tap-floor); block-size: var(--tap-floor); display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: hsl(var(--ink-faint)); cursor: pointer; opacity: .55; transition: opacity .12s ease, color .12s ease; } .vdk-x .ico { inline-size: .9em; block-size: .9em; } .vdk-fav:hover .vdk-x, .vdk-loc:hover .vdk-x, .vdk-x:hover, .vdk-x:focus-visible { opacity: 1; } @media (pointer: coarse) { .vdk-x { opacity: .75; } } @media (prefers-reduced-motion: reduce) { .vdk-x { transition: none; } } /* R289/§282 f/u 3 — the dock context menu (Finder's sidebar right-click). Rendered into , not the rail: the rail scrolls and clips, and a menu that can be scrolled out from under the cursor is not a menu. position: fixed + the two custom properties the JS clamps to the viewport. */ .vdk-cmenu { position: fixed; inset-block-start: var(--y, 0); inset-inline-start: var(--x, 0); z-index: 240; min-inline-size: 208px; padding: 5px; border: 1px solid hsl(var(--line)); border-radius: 10px; background: hsl(var(--box)); color: hsl(var(--ink)); box-shadow: 0 10px 30px hsl(var(--hue) 30% 3% / .45); font: 500 var(--fs-sm)/1.2 var(--font-body); } .vdk-cmenu__i { display: flex; align-items: center; gap: 9px; inline-size: 100%; min-block-size: var(--tap-floor); padding: 6px 9px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } .vdk-cmenu__i:hover, .vdk-cmenu__i:focus-visible { background: hsl(var(--hover)); outline: none; } .vdk-cmenu__i:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--accent)); } .vdk-cmenu__i .ico { inline-size: 1em; block-size: 1em; flex: 0 0 auto; color: hsl(var(--ink-dull)); } @media (pointer: coarse) { .vdk-cmenu__i { min-block-size: var(--ytx-tap-ceil, 44px); } } @media (forced-colors: active) { .vdk-cmenu { border-color: CanvasText; background: Canvas; } .vdk-cmenu__i:hover, .vdk-cmenu__i:focus-visible { background: Highlight; color: HighlightText; } } .vdk-x:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); } .is-missing .vdk-row { opacity: .5; } /* ---- the "+" add affordance + inline picker panel (the coarse-pointer add path) ---- */ .vdk-add { flex: 0 0 auto; inline-size: var(--tap-floor); block-size: var(--tap-floor); display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: hsl(var(--ink-faint)); cursor: pointer; } .vdk-add:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); } .vdk-add[aria-expanded="true"] { background: hsl(var(--selected)); color: hsl(var(--ink)); } .vdk-addpanel { margin: 2px 6px; border: 1px solid hsl(var(--line)); border-radius: 10px; background: hsl(var(--box)); max-block-size: 220px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; } .vdk-addpanel__hint { margin: 6px 8px 0; color: hsl(var(--ink-faint)); font: 700 var(--fs-2xs)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .05em; } .vdk-addpanel .vdk-row { padding-inline-start: calc(8px + var(--vdk-depth, 0) * 12px); } /* ---- tag rows ---- */ .vdk-dot { flex: 0 0 auto; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--vdk-c, currentColor); border: 1px solid hsl(var(--line)); } .vdk-tag[aria-pressed="true"] { background: hsl(var(--selected)); color: hsl(var(--ink)); } /* ---- a11y ---- */ .vdk-alive { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vdk :is(button, [tabindex]):focus-visible, .vdk-handle:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 1px; } } /* ============================== STATE ============================== */ @layer state { /* drag-to-ADD (HTML5 DnD from the vault list) — target section lights up */ .vdk-sec.is-dropready { background: hsl(var(--selected) / .35); outline: 2px dashed hsl(var(--accent) / .6); outline-offset: -2px; border-radius: 10px; } /* favorites grip drag (pointer events) */ .vdk-fav.is-dragging { position: relative; z-index: 2; opacity: .85; background: hsl(var(--hover)); border-radius: 8px; } .vdk-fav.is-dropover { box-shadow: inset 0 2px 0 hsl(var(--accent)); } .vdk-fav.is-dropunder { box-shadow: inset 0 -2px 0 hsl(var(--accent)); } /* ---- coarse pointers: the 44px interactive floor this lane's brief requires ---------------------- MEASURED 2026-08-18, not assumed: a bare `min-block-size: 44px` here LOSES. mobile.css carries an UNLAYERED blanket rule — `button:not(...), [role="button"], … { min-block-size: var(--ytx-tap); }` (mobile.css:50-62) — and an unlayered declaration outranks every declaration in every @layer, at any specificity. Estate-wide `--ytx-tap` is 36px (R269: "44 is the ceiling, not the target"), so the dock's rows measured 36px until this was fixed. mobile.css:33-37 documents the sanctioned hook: "a declaration ON the element always beats an inherited one, from any layer and at any specificity … the documented hook a component uses to retune its own target from its OWN stylesheet without editing this file." Precedent: ycombine.css:637 `--ytx-tap: var(--ytx-tap-ceil, 44px)`. TENSION RECORDED (selection-records-p5-dock.md #7): mobile.css:47 comments that the ceiling is "never assigned to a control", while THIS piece's brief makes >=44px a binding condition. The brief wins for the dock only, and the revert is one line — delete the `--ytx-tap` declaration and the dock falls back to the estate's 36px floor with no other change. The grip stays a narrow 24px column inside the 44px row so the row's own open target stays wide (convlist precedent). ------------------------------------------------------------------------ */ @media (pointer: coarse) { .vdk-row, .vdk-handle, .vdk-sec__tg, .vdk-grip, .vdk-x, .vdk-add, .vdk-collapse { --ytx-tap: var(--ytx-tap-ceil, 44px); } .vdk-row, .vdk-handle, .vdk-sec__tg { min-block-size: 44px; } .vdk-x, .vdk-add, .vdk-collapse { inline-size: 44px; block-size: 44px; } .vdk-x, .vdk-grip { opacity: .45; } .vdk-grip { inline-size: 24px; block-size: 100%; min-block-size: 44px; } } }