@lepid-labs/styles 1.0.0 → 1.0.2

package/luminous-precision/components/layout.css

@@ -0,0 +1,348 @@
+/* luminous-precision — layout: the app shell's grid, sticky parts, rail, drawer and tab
+ * bar. Structure only, identical in every theme (the chrome lives in
+ * shell.css; the page layouts that go inside main live in page.css).
+ *
+ * .ld-shell is a grid of named areas; any of __header, __nav, __footer may be
+ * left out and its track collapses to nothing, so there are no "has header"
+ * modifiers. The shell paints the theme's page background (base.css lists it
+ * beside .ld-bg). Nav state is two presence attributes on the root:
+ * data-ld-nav-collapsed (wide: icon rail) and data-ld-nav-open (narrow:
+ * drawer shown). The header always spans the full width above the nav, so
+ * its toggle and brand never move as the nav collapses or hides. Below 48rem
+ * the nav leaves the grid and becomes a drawer — or, with .ld-shell--tabbar,
+ * a bottom tab bar. 48rem is SHELL_NARROW_QUERY
+ * in the React package; keep the two in step.
+ */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell {
+  --ld-shell-header-h: 3.5rem;
+  --ld-shell-nav-w: 15rem;
+  --ld-shell-rail-w: 4.25rem;
+  --ld-shell-top: 0px; /* sticky offset below the header, when there is one */
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header"
+    "nav main"
+    "nav footer";
+  min-block-size: 100dvh;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell:has(> .ld-shell__header) {
+  --ld-shell-top: var(--ld-shell-header-h);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__skip {
+  position: absolute;
+  inset-inline-start: var(--ld-space-2);
+  inset-block-start: -10rem;
+  z-index: 50;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__skip:focus {
+  inset-block-start: var(--ld-space-2);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__header {
+  grid-area: header;
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-3);
+  block-size: var(--ld-shell-header-h);
+  padding-inline: var(--ld-space-3);
+  min-inline-size: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  cursor: pointer;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle svg {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell:not(:has(> .ld-shell__nav)) .ld-shell__toggle {
+  display: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand svg,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand img {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-1);
+  min-inline-size: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item {
+  flex: none;
+  white-space: nowrap;
+  text-decoration: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  margin-inline-start: auto;
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+  grid-area: nav;
+  position: sticky;
+  inset-block-start: var(--ld-shell-top);
+  align-self: start;
+  z-index: 10;
+  inline-size: var(--ld-shell-nav-w);
+  block-size: calc(100dvh - var(--ld-shell-top));
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  transition: inline-size var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__scrim {
+  display: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding: var(--ld-space-4) var(--ld-space-5);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__main:focus {
+  outline: none; /* focus target of the skip link, not an interactive control */
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__footer {
+  grid-area: footer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ld-space-2) var(--ld-space-4);
+  padding: var(--ld-space-3) var(--ld-space-5);
+}
+
+/* Side nav: sections of icon + label items, an optional footer pinned low. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ld-space-3);
+  min-block-size: 100%;
+  padding: var(--ld-space-3) var(--ld-space-2);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__heading {
+  margin: 0;
+  padding: var(--ld-space-1) var(--ld-space-3);
+  white-space: nowrap;
+  overflow: hidden;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-3);
+  min-block-size: 2.5rem;
+  padding: var(--ld-space-2) var(--ld-space-3);
+  text-decoration: none;
+  white-space: nowrap;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__icon {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__icon svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__label {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__badge {
+  flex: none;
+  margin-inline-start: auto;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-block-start: auto;
+}
+/* A brand inside the nav (for shells without a header). */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav > .ld-shell__brand {
+  padding: var(--ld-space-1) var(--ld-space-3) var(--ld-space-2);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__footer > .ld-shell__toggle {
+  margin-inline-start: var(--ld-space-2);
+}
+
+/* Wide: the collapsed nav is an icon rail. Labels, headings and badges stay
+ * in the accessibility tree, only visually clipped; headings become rules. */
+@media (width > 48rem) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-shell__nav {
+    inline-size: var(--ld-shell-rail-w);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] :is(.ld-sidenav__label, .ld-sidenav__badge),
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__heading {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav > .ld-shell__brand {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav > .ld-shell__brand > :not(svg, img) {
+    display: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__footer > .ld-shell__toggle {
+    margin-inline: auto;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__section + .ld-sidenav__section {
+    border-block-start: 1px solid var(--ld-border);
+    padding-block-start: var(--ld-space-3);
+  }
+}
+
+/* Narrow: the nav leaves the grid. Default is an off-canvas drawer under the
+ * header (visibility keeps a closed drawer out of the tab order). */
+@media (width <= 48rem) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__header {
+    padding-inline: var(--ld-space-2);
+    gap: var(--ld-space-2);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__main {
+    padding: var(--ld-space-3);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__footer {
+    padding: var(--ld-space-3);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+    position: fixed;
+    inset-block: var(--ld-shell-top) 0;
+    inset-inline-start: 0;
+    align-self: stretch; /* fixed boxes honour align-self; "start" would shrink-wrap the drawer */
+    z-index: 40;
+    inline-size: min(var(--ld-shell-nav-w) + 3rem, 85vw);
+    block-size: auto;
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition: transform var(--ld-transition), visibility 0s linear var(--ld-transition);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-open] .ld-shell__nav {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--ld-transition);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-open] .ld-shell__scrim {
+    display: block;
+    position: fixed;
+    inset: var(--ld-shell-top) 0 0;
+    z-index: 30;
+  }
+
+  /* Tab bar: the nav docks at the bottom; sections flatten into one row. */
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__toggle {
+    display: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__nav {
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: auto;
+    transform: none;
+    visibility: visible;
+    overflow: visible;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+    transition: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__scrim {
+    display: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav {
+    flex-direction: row;
+    gap: 0;
+    min-block-size: 0;
+    padding: var(--ld-space-1);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar :is(.ld-sidenav__section, .ld-sidenav__footer) {
+    display: contents;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav > .ld-shell__brand {
+    display: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__heading {
+    display: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__item {
+    position: relative;
+    flex: 1 1 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-inline-size: 0;
+    padding: var(--ld-space-1);
+    font-size: 0.6875rem;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__label {
+    flex: none;
+    max-inline-size: 100%;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__badge {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(50% + 0.5rem);
+    margin: 0;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__footer {
+    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar:not(:has(> .ld-shell__footer)) .ld-shell__main {
+    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell[data-ld-nav-open] .ld-shell__nav {
+    transition: none;
+  }
+}

package/luminous-precision/components/page.css

@@ -0,0 +1,85 @@
+/* luminous-precision — page layouts: what goes inside .ld-shell__main (or any
+ * container). Structure only, identical in every theme; shell.css dresses the
+ * page header's type. */
+/* A page column: width-capped, centered, with a header row. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page {
+  display: grid;
+  align-content: start;
+  gap: var(--ld-space-4);
+  inline-size: 100%;
+  max-inline-size: var(--ld-page-max, 72rem);
+  margin-inline: auto;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page--narrow { --ld-page-max: 48rem; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page--wide { --ld-page-max: 96rem; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page--full { --ld-page-max: none; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ld-space-3);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__heading {
+  display: grid;
+  gap: var(--ld-space-1);
+  min-inline-size: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__title,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__subtitle,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__eyebrow {
+  margin: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ld-space-2);
+}
+
+/* Dashboard grid: as many columns of at least --ld-grid-min as fit. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--ld-grid-min, 18rem), 100%), 1fr));
+  gap: var(--ld-space-3);
+  align-items: start;
+}
+
+/* List + detail, and content + aside: two panes that stack by themselves once
+ * the wide pane would drop below 60% of the row — no breakpoint, so they work
+ * at any shell width. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-split,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-aside-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--ld-space-4);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-split__list {
+  flex: 1 1 var(--ld-split-list, 20rem);
+  display: grid;
+  gap: var(--ld-space-2);
+  min-inline-size: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-split__detail,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-aside-layout__main {
+  flex: 999 1 0;
+  min-inline-size: 60%;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-aside-layout__aside {
+  flex: 1 1 var(--ld-aside-w, 16rem);
+  position: sticky;
+  inset-block-start: calc(var(--ld-shell-top, 0px) + var(--ld-space-3));
+  min-inline-size: 0;
+}
+
+/* Centered: one narrow column in the middle of the remaining height — sign
+ * in, empty states, a single form. Fills .ld-shell__main (a flex column). */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-center {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-center > * {
+  inline-size: min(100%, var(--ld-center-max, 26rem));
+}

package/luminous-precision/components/pre.css

@@ -12,3 +12,78 @@
   font-size: var(--ld-text-sm);
   overflow-x: auto;
 }
+
+/* Log / terminal variant (.ld-pre--log): bounded, scrolls both ways, wraps
+ * long lines, and lays faint teal scanlines over the log well. Height comes
+ * from --ld-log-max-height (the React LogBlock's maxHeight sets it inline). */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre--log {
+  max-height: var(--ld-log-max-height, 420px);
+  overflow: auto;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background-image: linear-gradient(to bottom, rgba(0, 245, 255, 0.025) 1px, transparent 1px);
+  background-size: 100% 4px;
+}
+
+/* Copy control (.ld-pre-wrap + .ld-pre-copy): an .ld-icon-btn pinned to the
+ * block's top-right corner. Hidden until the wrap is hovered or holds focus
+ * (so it stays keyboard-reachable), always shown where there's no hover
+ * (touch). The host script sets data-ld-copy="copied" | "failed" on the
+ * button for ~1.5s: copied swaps the copy glyph for the check. Status text for
+ * screen readers goes in the visually hidden aria-live .ld-pre-copy-status. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap {
+  position: relative;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap > .ld-pre {
+  padding-right: calc(2rem + var(--ld-space-3));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy {
+  position: absolute;
+  top: var(--ld-space-1);
+  right: var(--ld-space-1);
+  background: var(--ld-surface-sunken);
+  opacity: 0;
+  transition: opacity var(--ld-transition), color var(--ld-transition), background var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap:hover .ld-pre-copy,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap:focus-within .ld-pre-copy,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy] {
+  opacity: 1;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy="copied"] {
+  color: var(--ld-success);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy="failed"] {
+  color: var(--ld-danger);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy__check,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy[data-ld-copy="copied"] .ld-pre-copy__icon {
+  display: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy[data-ld-copy="copied"] .ld-pre-copy__check {
+  display: block;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (hover: none) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-pre-copy {
+    transition: none;
+  }
+}

package/luminous-precision/components/shell.css

@@ -0,0 +1,165 @@
+/* luminous-precision — shell chrome: unfilled header and nav (hairlines over
+ * the page background), mono uppercase nav labels, the current page lit by the electric-teal path (the
+ * same 2px left bar + glow as .ld-link hover). Structure is in layout.css. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__skip {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  background: var(--ld-surface);
+  border: 1px solid var(--ld-primary-border);
+  border-radius: var(--ld-radius);
+  color: var(--ld-primary);
+  font-size: var(--ld-text-sm);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__header {
+  /* no fill: the shell background runs under the bar; the blur keeps
+   * content scrolling beneath it legible */
+  background: transparent;
+  border-bottom: 1px solid var(--ld-border);
+  backdrop-filter: blur(var(--ld-blur));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle {
+  background: none;
+  border: 1px solid var(--ld-border);
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  transition: color var(--ld-transition), border-color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle:focus-visible {
+  color: var(--ld-accent);
+  border-color: var(--ld-accent);
+  box-shadow: 0 0 10px var(--ld-accent-glow);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand {
+  color: var(--ld-on-surface);
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-bold);
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand svg,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand img {
+  color: var(--ld-primary);
+  filter: drop-shadow(0 0 6px var(--ld-primary-glow));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: var(--ld-tracking-wide);
+  transition: color var(--ld-transition), background var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item:focus-visible {
+  color: var(--ld-on-surface);
+  background: var(--ld-surface-glass);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item--active,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item[aria-current="page"] {
+  color: var(--ld-accent);
+  text-shadow: 0 0 8px var(--ld-accent-glow);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+  background: transparent; /* the shell background shows through; a hairline divides */
+  border-right: 1px solid var(--ld-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__scrim {
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__heading {
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-size: 11px;
+  font-weight: var(--ld-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  opacity: 0.8;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item {
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-size: 13px;
+  font-weight: var(--ld-font-weight-medium);
+  box-shadow: inset 0 0 0 0 var(--ld-accent);
+  transition: background var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:focus-visible {
+  background: var(--ld-surface-glass);
+  color: var(--ld-on-surface);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:focus-visible {
+  box-shadow: 0 0 0 1px var(--ld-primary-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item--active,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item[aria-current="page"] {
+  background: var(--ld-surface);
+  color: var(--ld-accent);
+  box-shadow: inset 2px 0 0 0 var(--ld-accent), 0 0 12px var(--ld-accent-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item--active .ld-sidenav__icon,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item[aria-current="page"] .ld-sidenav__icon {
+  filter: drop-shadow(0 0 4px var(--ld-accent-glow));
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__footer {
+  border-top: 1px solid var(--ld-border);
+  color: var(--ld-faint);
+  font-size: 12px;
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__eyebrow {
+  color: var(--ld-accent);
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__title {
+  font-family: var(--ld-font-display);
+  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
+  font-weight: var(--ld-font-weight-bold);
+  letter-spacing: -0.02em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__subtitle {
+  color: var(--ld-faint);
+  font-size: var(--ld-text-sm);
+}
+
+@media (width <= 48rem) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+    background: color-mix(in srgb, var(--ld-bg-blend) 94%, transparent);
+    border-right-color: var(--ld-border-lit);
+    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__nav {
+    border-right: none;
+    border-top: 1px solid var(--ld-border-lit);
+    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__item--active,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__item[aria-current="page"] {
+    background: none;
+    box-shadow: inset 0 2px 0 0 var(--ld-accent);
+    border-radius: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item {
+    transition: none;
+  }
+}