@apliteni/apliteni-ui 0.70.0 → 0.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -298,8 +298,8 @@
   max-width: var(--prose-caption);
   padding: var(--space-2) var(--space-3);
   background: var(--ui-tip-bg);
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--text-xs);

package/src/styles/callout.css

@@ -46,8 +46,8 @@
   max-width: var(--panel-md);
   overflow: hidden; /* clips the timer bar to the rounded corners */
   background: var(--surface); --ring-gap: var(--surface);
-  border: 1px solid var(--border);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   animation: ui-toast-in var(--dur-med) var(--ease-out) both;
 }
 

package/src/styles/card.css

@@ -1,13 +1,16 @@
 /* ============================================================================
- * Card — .ui-card  (a filled surface one step off the page, edged by a hairline)
+ * Card — .ui-card  (a filled surface one step off the page: edged in dark, dropped in light)
  * Rows: .ui-card__row  /  headers: .ui-card__title / .ui-card__sub
  * ========================================================================== */
 
-/* Flat since #284 and edged in both themes since #295: the surface is the step, the
-   line is what makes it legible. why: docs/specification.md#elevation */
+/* The surface is the step; what makes it legible depends on the theme. Dark edges the
+   card with the hairline (--card-edge). Light draws no line at all and casts --elev-rest
+   instead — a 22px penumbra off a 10px offset, the width Artur's reference uses on a
+   card. Chosen by him on #490 round t3. why: docs/specification.md#elevation */
 .ui-card {
   background: var(--surface); --ring-gap: var(--surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--card-edge);
+  box-shadow: var(--elev-rest);
   border-radius: var(--radius-xl);
   /* Was `var(--space-6) 26px`; 26 is off the scale and broke the column's text edge.
      why: docs/specification.md#spacing-and-rhythm */
@@ -50,13 +53,14 @@
   cursor: pointer;
   /* Written as a <button>, the card would take the browser's frame, centred text and
      `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the family
-     longhand. .ui-card states the background and, since #295, the border, so a
-     `border: 0` here would only delete the hairline. #251 */
+     longhand. .ui-card states the background, the border and its rung, so a
+     `border: 0` here would only delete the edge dark draws. #251 */
   text-align: left;
   font: inherit;
   transition: transform var(--dur-fast) var(--ease);
 }
-/* The lift alone: the kit casts no shadow anywhere (#295), and cards are flat (#284). */
+/* The lift alone: the card's own rung is what says it is raised, and hover is not a
+   change of level. why: docs/specification.md#elevation */
 .ui-card--interactive:hover { transform: translateY(-2px); }
 .ui-card--interactive:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 

package/src/styles/command-palette.css

@@ -69,10 +69,12 @@
   flex-direction: column;
   font-family: var(--font-sans);
   background: var(--cmdk-surface); --ring-gap: var(--cmdk-surface);
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: var(--radius-lg);
   overflow: hidden;
   opacity: 0;
@@ -86,7 +88,7 @@
    box-shadow list replaces the whole list, so `box-shadow: var(--ring)` alone
    took the panel's edge and its drop off for as long as it held focus.
    why: docs/specification.md#elevation */
-.ui-cmdk__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
+.ui-cmdk__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); }
 
 /* -- The text box --------------------------------------------------------- */
 

package/src/styles/confirm.css

@@ -62,10 +62,12 @@
   gap: var(--space-2);
   padding: var(--space-5);
   background: var(--confirm-surface); --ring-gap: var(--confirm-surface);
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: var(--radius-lg);
   opacity: 0;
   transform: translateY(8px);
@@ -78,7 +80,7 @@
    box-shadow list replaces the whole list, so `box-shadow: var(--ring)` alone
    took the panel's edge and its drop off for as long as it held focus.
    why: docs/specification.md#elevation */
-.ui-confirm__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
+.ui-confirm__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); }
 
 /* -- Slots ----------------------------------------------------------------- */
 /* The question and the answers keep their size; the consequence between them is

package/src/styles/drawer.css

@@ -82,14 +82,14 @@
 }
 .ui-drawer--right .ui-drawer__panel {
   right: 0;
-  border-left: 1px solid var(--border-strong);
-  --drawer-line: inset 1px 0 0 var(--border);
+  border-left: 1px solid var(--float-edge);
+  --drawer-line: inset 1px 0 0 var(--float-edge-inner);
   transform: translateX(100%);
 }
 .ui-drawer--left .ui-drawer__panel {
   left: 0;
-  border-right: 1px solid var(--border-strong);
-  --drawer-line: inset -1px 0 0 var(--border);
+  border-right: 1px solid var(--float-edge);
+  --drawer-line: inset -1px 0 0 var(--float-edge-inner);
   transform: translateX(-100%);
 }
 .ui-drawer--top .ui-drawer__panel,
@@ -100,14 +100,14 @@
 }
 .ui-drawer--top .ui-drawer__panel {
   top: 0;
-  border-bottom: 1px solid var(--border-strong);
-  --drawer-line: inset 0 -1px 0 var(--border);
+  border-bottom: 1px solid var(--float-edge);
+  --drawer-line: inset 0 -1px 0 var(--float-edge-inner);
   transform: translateY(-100%);
 }
 .ui-drawer--bottom .ui-drawer__panel {
   bottom: 0;
-  border-top: 1px solid var(--border-strong);
-  --drawer-line: inset 0 1px 0 var(--border);
+  border-top: 1px solid var(--float-edge);
+  --drawer-line: inset 0 1px 0 var(--float-edge-inner);
   transform: translateY(100%);
 }
 

package/src/styles/dropdown.css

@@ -71,10 +71,12 @@
   /* The floating step, not the sunken one — a panel held open over a card cannot be
      painted the colour of an inset. why: docs/specification.md#elevation */
   background: var(--bg-elevated); --ring-gap: var(--bg-elevated);
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: var(--radius-lg);
   padding: var(--ui-dropdown-pad);
   opacity: 0;
@@ -102,7 +104,7 @@
    a panel that takes focus any other way has the same claim on the ring. The
    ring is COMPOSED with the floating treatment rather than over it: a box-shadow
    list replaces the whole list. why: docs/specification.md#elevation */
-.ui-dropdown__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
+.ui-dropdown__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); }
 
 /* Opening upward. The kit releases its own `top` here so that nothing outside
    the kit has to: an absolute box with both edges pinned is stretched between

package/src/styles/feedback.css

@@ -67,8 +67,12 @@
 .ui-fbcomposer {
   position: fixed; z-index: 71; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
   width: min(520px, calc(100vw - 32px)); background: var(--bg-elevated); --ring-gap: var(--bg-elevated); border-radius: 18px;
-  /* The shadow was its only edge until #295; now it takes the hairline. */
-  border: 1px solid var(--border); opacity: 0; pointer-events: none;
+  /* The shadow was its only edge until #295, which replaced it with the hairline; since
+     #490 light is back on the drop and dark keeps the line.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
+  opacity: 0; pointer-events: none;
   transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); overflow: hidden;
 }
 .ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

package/src/styles/layout.css

@@ -28,7 +28,9 @@
 .ui-app-page .topbar { position: sticky; top: 0; z-index: var(--z-sticky); }
 
 /* The rail uses the card surface so its labels stay on a reading ground.
-   Its border separates navigation from the page in both themes.
+   Dark keeps its edge (--rail-edge); light casts --elev-rail, sideways, because the rail
+   is flush to a screen edge. Reopens the light half of #454.
+   why: docs/specification.md#elevation
    overflow-y, because the box is pinned at the viewport's height for the whole
    scroll of .ui-app — without it a row past that height paints below the fold
    and no amount of document scrolling brings it back. The rail's own padding is
@@ -38,7 +40,8 @@
   flex-direction: column;
   gap: var(--space-5);
   padding: var(--space-5) var(--space-4);
-  border-right: var(--ui-rail-rule) solid var(--border);
+  border-right: var(--ui-rail-rule) solid var(--rail-edge);
+  box-shadow: var(--elev-rail);
   background: var(--surface); --ring-gap: var(--surface);
   position: sticky;
   top: var(--ui-app-top, 0px);
@@ -296,7 +299,7 @@
    why: docs/specification.md#elevation */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who,
-.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
+.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
 @supports (anchor-name: --a) and (anchor-scope: --a) {
   .ui-app.is-collapsed,
   .ui-app:has(.ui-app__fold) { anchor-scope: --ui-rail; }
@@ -395,7 +398,7 @@
 .ui-app__search:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-color: var(--accent); }
 /* The same glyph the palette draws in its own search box, at the same box and the
    same stroke: the trigger and the thing it opens are not two search marks.
-   src/styles/command-palette.css:107 `.ui-cmdk__search-ic svg` */
+   src/styles/command-palette.css:109 `.ui-cmdk__search-ic svg` */
 .ui-app__search-ic { display: flex; flex: none; }
 .ui-app__search-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
 /* Part of the button's name, so it is squeezed rather than dropped: an ellipsis
@@ -497,7 +500,7 @@
   .ui-app__rail .ui-nav__item,
   .ui-app__rail .ui-app__user-trigger { min-height: 44px; }
   .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
+  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
   @supports (anchor-name: --a) and (anchor-scope: --a) {
     .ui-app { anchor-scope: --ui-rail; }
     .ui-app__rail { anchor-name: --ui-rail; }
@@ -529,10 +532,12 @@
   z-index: 1;
   width: 100%;
   max-width: var(--panel-md);
-  /* Floats over a spotlit page, so it takes the floating step and the hairline.
+  /* Floats over a spotlit page, so it takes the floating step and the floating
+     treatment: the two-step edge in dark, the drop alone in light.
      why: docs/specification.md#elevation */
   background: var(--bg-elevated); --ring-gap: var(--bg-elevated);
-  border: 1px solid var(--border);
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: 22px;
   padding: 38px 36px 32px;
 }

package/src/styles/success.css

@@ -17,7 +17,10 @@
   overflow: hidden;
   border-radius: 20px;
   background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* Elevated surface for the confirmation and its actions. */
-  border: 1px solid var(--border);
+  /* The floating treatment, like every other surface on that step.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   isolation: isolate;
 }
 

package/src/styles/tooltip.css

@@ -26,10 +26,12 @@
   max-width: var(--prose-caption);
   padding: var(--space-2) var(--space-3);
   background: var(--ui-tip-bg); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--text-xs);

package/src/styles/topbar.css

@@ -129,10 +129,12 @@
   left: 0;
   min-width: 266px;
   background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: 16px;
   padding: 6px;
   opacity: 0;
@@ -186,7 +188,7 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:164 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:166 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 /* The row is a keyboard stop: src/components/dropdown.js:554
@@ -238,10 +240,12 @@
   right: 0; top: 44px;
   width: 252px;
   background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  /* The two-step edge and the drop: --border-strong outside, --border one pixel
-     inside it, then the broad faint drop. why: docs/specification.md#elevation */
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  /* The two-step edge and the drop, through the level's own names: in DARK that is
+     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
+     both lines are transparent and the drop carries the whole separation.
+     why: docs/specification.md#elevation */
+  border: 1px solid var(--float-edge);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: 14px;
   overflow: hidden;
   opacity: 0;

package/src/tokens/tokens.css

@@ -133,10 +133,10 @@
   --pink: #e97ca5;
   --amber: #ffcf6a;
 
-  /* The elevation ladder, bottom to top. A surface says how high it is with its step and
-     with the hairline around it, and --muted caps how far the ladder can go. Nothing casts
-     below the floating step; the floating step itself adds --elev-drop under its inner
-     line and nothing else in the kit does. why: docs/specification.md#elevation */
+  /* The elevation ladder, bottom to top. A surface says how high it is with its step
+     and, IN DARK, with the hairline around it; --muted caps how far the ladder can go.
+     Nothing casts in dark below the floating step, and the floating step adds
+     --elev-drop under its inner line. why: docs/specification.md#elevation */
   --bg: #0e0d14;
   --table-bg: var(--bg);
   --surface-2: #161520;     /* non-text sunken marks and tracks */
@@ -150,6 +150,15 @@
   --border: #332f45;
   --border-strong: #453f5c;
 
+  /* WHICH EDGE EACH LEVEL DRAWS. One name per level, so a sheet never has to ask
+     which theme it is in. Dark answers all four with the hairline, because a drop
+     on a near-black page reaches 1.20 at its core and has nowhere else to go —
+     light answers them with the drop instead. why: docs/specification.md#elevation */
+  --card-edge: var(--border);          /* a card */
+  --rail-edge: var(--border);          /* the shell's rail */
+  --float-edge: var(--border-strong);  /* a floating surface, outer line */
+  --float-edge-inner: var(--border);   /* a floating surface, inner line */
+
   /* Fields use the card surface and an edge in both themes. why: docs/specification.md#elevation */
   --field-bg: var(--surface);
   --field-edge: var(--border);
@@ -257,13 +266,20 @@
      token and cannot be — a var() inside a custom property is substituted on the
      element that DECLARES it, so an --elev-edge read here resolves at :root and
      nothing below could re-point it. A floating surface writes the pair itself:
-       box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+       box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
      Dark spends 62% / 50% of the ink and reaches 1.20 at the drop's core, having
      nowhere to go on a near-black page. why: docs/specification.md#elevation */
   --elev-drop:
     0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 62%, transparent),
     0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 50%, transparent);
 
+  /* The ladder's two resting rungs, which only light climbs. Transparent here and
+     not `none`, for the reason the deprecated --shadow-* tokens are: these are read
+     in a layer list, and `none` is valid only alone — it would invalidate the whole
+     declaration and take the focus ring with it. why: docs/specification.md#elevation */
+  --elev-rest: 0 0 #0000;   /* a card */
+  --elev-rail: 0 0 #0000;   /* the shell's rail, cast sideways */
+
   /* Backdrop that dims the page behind an overlay (drawer, modal, composer). */
   --scrim: rgba(0, 0, 0, 0.58);
 
@@ -312,6 +328,17 @@
   --border: #e4e7ee;
   --border-strong: #cdd2dc;
 
+  /* Light draws a LEVEL with a drop and no line at all. Decided by Artur on the
+     #490 triage round t3: "It's better" — the soft shadow over the hairline, against
+     the reference he supplied. A line divides two regions of ONE surface (a card's
+     rows, a table's rules, the rail's head band, the topbar); a drop says a surface
+     is HIGHER, and only a higher surface may cast one.
+     why: docs/specification.md#elevation */
+  --card-edge: transparent;
+  --rail-edge: transparent;
+  --float-edge: transparent;
+  --float-edge-inner: transparent;
+
   /* Light draws a field with its EDGE, because since #448 it has no well left to draw it
      with: a card and a panel are both white, the sunken step falls two rungs under either,
      and --border on it measures 1.047:1. why: docs/specification.md#elevation */
@@ -389,12 +416,21 @@
   --shadow-ink: #1e1e32;
   --sheen: #ffffff;
 
-  /* 18% / 10% against dark's 62% / 50%. Light's ink is #1e1e32 on a card that is
-     now #ffffff, and 18% is what puts the drop core at #d7d7da — 1.44, the strongest
-     separation either theme gets. why: docs/specification.md#elevation */
+  /* THE LIGHT LADDER. Three rungs, each two layers: a wide faint one and a short one.
+     Each layer is offset on one axis, blurred at least twice as wide as it is offset,
+     and held in by a negative spread. None is a glow — a glow is a zero-offset layer of
+     the signal's own colour. A level with no line casts a rung that reaches on every
+     side it exposes, which is why the wide layer's offset stays under half its blur.
+     why: docs/specification.md#elevation */
+  --elev-rest:
+    0 2px 26px -3px color-mix(in srgb, var(--shadow-ink) 9%, transparent),
+    0 1px 3px -1px color-mix(in srgb, var(--shadow-ink) 7%, transparent);
+  --elev-rail:
+    10px 0 24px -14px color-mix(in srgb, var(--shadow-ink) 16%, transparent),
+    1px 0 3px -1px color-mix(in srgb, var(--shadow-ink) 7%, transparent);
   --elev-drop:
-    0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 18%, transparent),
-    0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
+    0 20px 46px -16px color-mix(in srgb, var(--shadow-ink) 22%, transparent),
+    0 1px 14px -4px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
 
   --scrim: rgba(20, 22, 40, 0.38);