/* =====================================================================
LightPane embedded pane — self-contained CSS (v1, 2026-04-23)
=====================================================================
Everything here is scoped under `.lp-pane`. We never touch the host
page's globals — no `html`, `body`, `*`, or bare-element rules.
Selectors are wrapped in `:where()` so specificity stays at (0,1,0)
or lower; that means an embedder can override any rule with a single
class on their own page without needing `!important`.
Configurable via CSS custom properties. Override them in host-page
CSS (e.g. `.my-theme .lp-pane { --lp-pane-radius: 0; }`) to re-skin
without forking this file.
--------------------------------------------------------------------- */
/* Token files (Phase 8 / doc 36). Imported in dependency order so
every consumer that loads sd-embed.css gets the full chain:
reserved — status + chart-series tokens (theme-invariant)
functional — spacing / type / overflow geometry (theme-invariant)
theme — palette + functional-name mappings (default amber;
switch via + alt theme file)
Migrated panes reference --lp-fn-* tokens which only resolve when
the active theme file is loaded — without this import they would
render unstyled. */
@import url("./sd-tokens-reserved.css");
@import url("./sd-tokens-functional.css");
@import url("./sd-theme-amber.css");
/* ====================================================================
COLOUR TOKEN CONTRACT (Scope 1, 2026-07-14)
Every colour in this stylesheet is a CSS variable — no bare hex in
element rules (enforced by pane-pipeline/harness/lint_css.py --embed).
To recolour centrally, redefine tokens AFTER this file, scoped to
.lp-pane (equal specificity, later source order wins):
.lp-pane { --lp-pane-amber-700: #...; --lp-pane-tag-success-bg: #...; }
Token namespaces in play:
--lp-pane-* pane chrome / layout / tag+status tones (canonical here)
--lp-rag-* RAG status palette (solid + -soft AA pairs)
--lp-fn- functional theme layer (used by the .lp-r- helper block;
defined by the @imported sd-tokens / sd-theme files)
NOTE (Scope 2): --lp-pane-* and --lp-fn-* are two parallel systems;
unifying them into one documented public theming contract is the
deferred design-system pass. Cross-origin embed/v1 needs a theme= param
(parent CSS can't reach in). See project_sd_embed_renderer_port memory.
==================================================================== */
.lp-pane,
.lp-pane-modal {
/* -----------------------------------------------------------------
Tunables — override at :root or on a parent container to re-skin.
Declared on BOTH .lp-pane and .lp-pane-modal because the policy
viewer modal is appended to document.body (outside any .lp-pane)
but still needs the amber palette.
----------------------------------------------------------------- */
--lp-pane-font-family:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--lp-pane-font-size: 14px;
--lp-pane-line-height: 1.5;
/* -----------------------------------------------------------------
Brand amber palette. Carried inside the embed stylesheet so host
pages don't need the Sunlit theme installed; the tokens are
aliased below into the specific slots (head bg, thead bg, hover,
etc.) so an embedder can either swap the whole palette here or
override individual slots.
----------------------------------------------------------------- */
/* Synced to the tw-amber accessibility palette 2026-07-22 (was the near-white
default; dynamiccloud already used tw-amber). Deepened washes separate from
white; accent #b45309 = 5.02:1 on white (WCAG AA). Old values preserved in
sd-theme-amber-legacy.css. */
--lp-pane-amber-900: #451a03; /* deepest amber — body ink on amber bg */
--lp-pane-amber-800: #92400e; /* deep amber — pane head fill */
--lp-pane-amber-700: #b45309; /* rich amber — accents (5.02:1 AA) */
--lp-pane-amber-500: #f5c518; /* brand core — spinner, focus (kept gold) */
--lp-pane-amber-300: #fbbf24; /* mid golden amber — thead fill */
--lp-pane-amber-200: #fcd34d; /* pale amber */
--lp-pane-amber-100: #fde68a; /* deepened wash — row hover / key-wash */
--lp-pane-amber-50: #fef3c7; /* amber wash — detail drawer */
--lp-pane-bg: #ffffff;
/* Pane head (service label strip at top). Meta ink matches the
title so the region + source read cleanly rather than fading
out at 72%. */
--lp-pane-head-bg: var(--lp-pane-amber-300);
--lp-pane-head-ink: var(--lp-pane-amber-900);
--lp-pane-head-meta-ink: var(--lp-pane-amber-900);
/* Table header row */
--lp-pane-thead-bg: var(--lp-pane-amber-100);
--lp-pane-thead-ink: var(--lp-pane-amber-900);
/* Row hover. The drawer wash below is deliberately MORE yellow
than the row hover, so (i) value cells inside the drawer
(which use the amber-50 hover wash) clearly stand out against
the drawer wash, and (ii) the drawer itself reads as a sunken
yellow panel rather than just more white. */
--lp-pane-row-hover-bg: var(--lp-pane-amber-50);
/* Soft pale amber for the expanded-drawer band — chosen to sit
between the value-cell white (#fffbeb) and the thead-row
amber (#fef3c7). The earlier #fdedb0 read too heavy. */
--lp-pane-detail-bg: #fef3c7; /* drawer band — tw-amber sync 2026-07-22 */
/* Borders — warm-tinted so they don't read as cold grey next to
amber. --lp-pane-outer-border is deliberately stronger than
internal dividers so a pane embedded on a similarly-toned host
page still reads as a discrete object. */
--lp-pane-outer-border: #a5620e; /* dark amber (amber-700) — phase iii, approved 2026-07-01 */
--lp-pane-border: #e8dfc9;
/* Header-box border — a dedicated, DARKER mid-grey (2026-07-16). Kept
separate from --lp-pane-border (which also draws table row dividers, cell
borders, subtable frames, …) so the boxes get definition without turning
every table into a heavy grid. Override per-pane for a custom box border. */
--lp-pane-header-box-border: #8f8b82;
--lp-pane-divider: #f3ebd6;
/* Body text */
--lp-pane-ink: #2b2a1e; /* warm near-black */
--lp-pane-ink-dim: #6b6452; /* warm grey for meta / labels */
--lp-pane-ink-faint: #9c9583; /* null dashes, chevron */
--lp-pane-accent: var(--lp-pane-amber-500); /* spinner accent */
/* Code/pre blocks inside detail panels — kept on the lightest
background in the palette (pure white) so the JSON stands out
against the cream detail-bg around it. */
--lp-pane-code-bg: var(--lp-pane-bg);
--lp-pane-code-border: var(--lp-pane-amber-300, #fde9a6);
--lp-pane-code-ink: #4a2a00;
--lp-pane-err-bg: #fffbeb;
--lp-pane-err-border: #fcd34d;
--lp-pane-err-ink: #92400e;
/* High-contrast RAG set for banners / status footers — saturated bg with
accessible text (all >=4.5:1). Approved 2026-07-01 (phase iii). */
--lp-rag-critical-bg: #d2222d; --lp-rag-critical-ink: #ffffff;
--lp-rag-warn-bg: #ffbf00; --lp-rag-warn-ink: #000000;
--lp-rag-success-bg: #1e7d1e; --lp-rag-success-ink: #ffffff; /* 5.24:1 on white — WCAG AA */
--lp-rag-info-bg: #1552c9; --lp-rag-info-ink: #ffffff;
/* Soft RAG variant — pale tint + dark ink, for lighter-weight tone surfaces
(filter pills, gentle inline highlights) that shouldn't read as heavy as
the solid bands. Same hue family as the solid set; all pairs verified
>=4.5:1 (measured 6.9–8.0:1). Single source of truth so pills/tags don't
fork on raw hex. */
--lp-rag-critical-soft-bg: #fef2f2; --lp-rag-critical-soft-ink: #991b1b; --lp-rag-critical-soft-border: #fecaca;
--lp-rag-warn-soft-bg: #fff7ed; --lp-rag-warn-soft-ink: #9a3412; --lp-rag-warn-soft-border: #fed7aa;
--lp-rag-success-soft-bg: #ecfdf5; --lp-rag-success-soft-ink: #065f46; --lp-rag-success-soft-border: #a7f3d0;
--lp-rag-info-soft-bg: #eff6ff; --lp-rag-info-soft-ink: #1e40af; --lp-rag-info-soft-border: #bfdbfe;
/* Tag/pill tones — customer-overridable semantic tokens. Inks are the
WCAG-AA soft RAG inks; warn/info map straight to the RAG soft set.
success/critical keep the more-saturated green/red bg+border chosen
2026-07-14 (dynamiccloud parity, "more legible") over the paler RAG tint. */
--lp-pane-tag-success-bg: #d1fae5; --lp-pane-tag-success-ink: var(--lp-rag-success-soft-ink); --lp-pane-tag-success-border: #6ee7b7;
--lp-pane-tag-warn-bg: var(--lp-rag-warn-soft-bg); --lp-pane-tag-warn-ink: var(--lp-rag-warn-soft-ink); --lp-pane-tag-warn-border: var(--lp-rag-warn-soft-border);
--lp-pane-tag-critical-bg: #fee2e2; --lp-pane-tag-critical-ink: var(--lp-rag-critical-soft-ink); --lp-pane-tag-critical-border: #fca5a5;
--lp-pane-tag-info-bg: var(--lp-rag-info-soft-bg); --lp-pane-tag-info-ink: var(--lp-rag-info-soft-ink); --lp-pane-tag-info-border: var(--lp-rag-info-soft-border);
/* Neutral status tone (state--neutral). */
--lp-pane-tag-neutral-bg: #f1f5f9; --lp-pane-tag-neutral-ink: #475569; --lp-pane-tag-neutral-border: #cbd5e1;
/* Cap-banner tones (resource_usage: warn / truncated / blocked). */
--lp-pane-cap-warn-bg: #fff4d6; --lp-pane-cap-warn-ink: #7a4f00; --lp-pane-cap-warn-border: #f0c674;
--lp-pane-cap-truncated-bg: #ffe5cf; --lp-pane-cap-truncated-ink: #7a3a00; --lp-pane-cap-truncated-border: #f3b27a;
--lp-pane-cap-blocked-bg: #fde8e8; --lp-pane-cap-blocked-ink: #6a1a1a; --lp-pane-cap-blocked-border: #f0bfbf;
/* Pressed/active pill (pillSelector aria-pressed) + strong ink (refresh hover). */
--lp-pane-pill-active-bg: var(--lp-pane-amber-500); --lp-pane-pill-active-ink: #1a1814; --lp-pane-pill-active-border: #d9a800;
--lp-pane-ink-strong: #000000;
--lp-pane-radius: 10px;
--lp-pane-radius-sm: 6px;
--lp-pane-shadow: 0 1px 2px rgba(17, 24, 39, 0.04),
0 1px 3px rgba(17, 24, 39, 0.02);
--lp-pane-pad-x: 16px;
--lp-pane-pad-y: 12px;
--lp-pane-cell-pad-y: 10px;
--lp-pane-gap: 4px;
/* Label-column width inside the expander drawer (and anywhere
else a label:value grid is used). */
--lp-pane-stack-label-col: 120px;
}
/* Container-box layout applies only to the .lp-pane outer wrapper —
NOT to the modal, which has its own dimensions, border, and
positioning driven by .lp-pane-modal[open] further down. */
.lp-pane {
box-sizing: border-box;
/* Query container so pane @container breakpoints respond to the pane's own
(iframe/host) width, not the viewport — phase iii responsive primitives. */
container-type: inline-size;
font-family: var(--lp-pane-font-family);
font-size: var(--lp-pane-font-size);
line-height: var(--lp-pane-line-height);
color: var(--lp-pane-ink);
background: var(--lp-pane-bg);
border: 1px solid var(--lp-pane-outer-border);
border-radius: var(--lp-pane-radius);
box-shadow: var(--lp-pane-shadow);
overflow: hidden;
/* No external margin — spacing between stacked panes is owned by the host
container (gap), not the component. (Removed margin-bottom:16px, which
caused a gap + doubled bottom border inside a wrapping frame.) */
}
/* Reset box-sizing for all descendants so host-page resets don't
corrupt our internal layout maths. */
:where(.lp-pane) *,
:where(.lp-pane) *::before,
:where(.lp-pane) *::after {
box-sizing: border-box;
}
/* Screen-reader-only utility: visually hidden but exposed to assistive tech.
Used for chart data-table alternatives (a navigable text equivalent of a
visualisation) and other off-screen labels. Standard clip technique — stays
focusable-safe (no display:none) but takes no visual space. */
.lp-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------
Head — service label + region/source meta row.
--------------------------------------------------------------------- */
:where(.lp-pane-head) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: var(--lp-pane-pad-y) var(--lp-pane-pad-x);
background: var(--lp-pane-head-bg);
border-bottom: 1px solid var(--lp-pane-amber-900);
}
:where(.lp-pane-head-left) {
display: flex;
align-items: center;
gap: 10px;
min-width: 0; /* allow the title to ellipsise */
}
:where(.lp-pane-head-right) {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
:where(.lp-pane-title) {
font-weight: 600;
color: var(--lp-pane-head-ink);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:where(.lp-pane-meta) {
color: var(--lp-pane-head-meta-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where(.lp-pane-meta .lp-pane-meta-sep) {
margin: 0 6px;
/* Separator stays slightly faded so the meta text itself — now
full amber-900 — reads as the dominant element. */
color: rgba(61, 33, 0, 0.45);
}
/* Provider badge — small rounded pill at the start of the pane head.
Background + foreground colours are set inline from
PROVIDER_BADGES in sd-embed.js so an embedder can't override one
half and break contrast. */
:where(.lp-pane-badge) {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.3;
white-space: nowrap;
text-transform: uppercase;
flex-shrink: 0;
}
/* Sample badge — rendered next to the service title whenever the
SD response carries source === "mock". Subtle by design and the
sole visual indicator of mock state since the diagonal-stripe
modifiers were removed 2026-05-29 (catalog pages render hundreds
of these; the badge is enough). */
:where(.lp-pane-sample-badge) {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 1px 6px;
border-radius: 3px;
background: var(--lp-pane-amber-100, #fef3c7);
color: var(--lp-pane-amber-800, #92400e);
border: 1px solid var(--lp-pane-amber-300, #fcd34d);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.3;
text-transform: uppercase;
flex-shrink: 0;
cursor: help;
}
/* Refresh button — lives in the pane head's right slot, shows a
live countdown until the cache's fresh_until has elapsed, then
becomes an active "Refresh" affordance. Data-state transitions
(locked / ready / busy) are driven by sd-embed.js's
tickRefreshButton(). Tier / budget denials are silently
downgraded server-side; there is no UI affordance for them. */
:where(.lp-pane-refresh) {
appearance: none;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px 10px;
border: 1px solid transparent;
border-radius: 999px;
font: inherit;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease,
color 120ms ease;
background: rgba(61, 33, 0, 0.08);
color: var(--lp-pane-amber-900);
border-color: rgba(61, 33, 0, 0.15);
white-space: nowrap;
}
:where(.lp-pane-refresh[data-state="locked"]) {
/* Countdown running — not clickable, dimmed. */
cursor: default;
background: transparent;
color: rgba(61, 33, 0, 0.65);
border-color: rgba(61, 33, 0, 0.20);
}
:where(.lp-pane-refresh[data-state="ready"]) {
/* Cache past fresh_until — solid "Refresh" button. */
background: var(--lp-pane-amber-900);
color: var(--lp-pane-bg);
border-color: var(--lp-pane-amber-900);
}
:where(.lp-pane-refresh[data-state="ready"]:hover) {
background: var(--lp-pane-ink-strong);
border-color: var(--lp-pane-ink-strong);
}
:where(.lp-pane-refresh[data-state="busy"]) {
cursor: progress;
background: rgba(61, 33, 0, 0.08);
color: var(--lp-pane-amber-900);
border-color: rgba(61, 33, 0, 0.25);
}
:where(.lp-pane-refresh[data-state="busy"] .lp-pane-refresh-icon) {
animation: lp-pane-spin 0.9s linear infinite;
}
:where(.lp-pane-refresh-icon) {
display: block;
flex-shrink: 0;
}
/* ---------------------------------------------------------------------
Body — a table wrapper. Horizontal scroll is a fallback only;
the responsive-row stack (below) is the primary narrow-screen story.
--------------------------------------------------------------------- */
:where(.lp-pane-body) {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Body padding for panes built via lpPane.shell() — gives header
boxes, pill selectors, lists, etc. breathing room from the pane
edges. NOT applied to the bare .lp-pane-body used by sd-embed
inventory tables, because those tables add their own horizontal
padding at the cell level (var(--lp-pane-pad-x) per
/
)
and would double-pad. */
:where(.lp-pane-body--padded) {
padding: 12px var(--lp-pane-pad-x);
}
/* -------- FILL MODE (data-lp-fill) — app-shell flex column ----------
When the host gives the pane a definite height, the pane becomes a
flex column that fills it: fixed head / single SCROLLING body / fixed
footer. The body is the ONLY scroller (no nested viewports fighting),
and flexbox sizes it — no height math. The width container query still
drives the column reflow (inline-size containment is width-only). */
.lp-pane[data-lp-fill] {
display: flex;
flex-direction: column;
height: 100%;
}
/* Every slot is fixed (flex:0) EXCEPT the body — the golden rule: exactly one
scroller. Slot order = DOM order: head / toolbar(1a…) / body / controls(3a…) /
footer. Multiple toolbar or controls slots just stack. */
.lp-pane[data-lp-fill] > :where(.lp-pane-head, .lp-pane-toolbar, .lp-pane-controls, .lp-pane-footer) {
flex: 0 0 auto;
}
.lp-pane[data-lp-fill] > :where(.lp-pane-body) {
flex: 1 1 auto;
min-height: 0; /* let the flex child shrink so it can scroll */
overflow-y: auto;
overflow-x: hidden;
}
/* Column headers stay put while the body scrolls (thead bg is opaque). */
.lp-pane[data-lp-fill] > .lp-pane-body .lp-xtable > thead > tr > th {
position: sticky;
top: 0;
z-index: 1;
}
/* Always-present pane footer (DIV 3) — count/provenance today; the home
for pagination controls or a close affordance. */
:where(.lp-pane-footer) {
padding: 6px var(--lp-pane-pad-x);
font-size: 11px;
line-height: 1.4;
color: var(--lp-pane-ink-dim);
background: var(--lp-pane-head-bg);
border-top: 1px solid var(--lp-pane-amber-700);
}
/* Paged footer: count on the left, pager on the right. The nested pager
already sits inside the footer band, so strip its own bg / top divider /
block padding (they'd double up with the footer's). */
:where(.lp-pane-footer-row) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
:where(.lp-pane-footer-count) { flex: 1 1 auto; min-width: 0; }
.lp-pane-footer .lp-r-pager {
padding: 0;
background: transparent;
border-top: 0;
}
/* Toolbar slot (Div 1a…) — fixed pane controls ABOVE the body (search, filters).
A quiet band with a bottom divider so it reads as chrome, not content. */
:where(.lp-pane-toolbar) {
padding: 7px var(--lp-pane-pad-x);
background: var(--lp-pane-head-bg);
border-bottom: 1px solid var(--lp-pane-amber-700);
}
/* Controls slot (Div 3a…) — fixed pane controls BELOW the body, above the footer
(e.g. a pager on its own strip rather than merged into the footer). */
:where(.lp-pane-controls) {
padding: 6px var(--lp-pane-pad-x);
background: var(--lp-pane-head-bg);
border-top: 1px solid var(--lp-pane-amber-700);
}
.lp-pane-controls .lp-r-pager { padding: 0; background: transparent; border-top: 0; }
/* Filter toolbar — a search input + a live match count. */
:where(.lp-pane-filter) {
display: flex;
align-items: center;
gap: 8px;
}
:where(.lp-pane-filter-input) {
flex: 1 1 auto;
min-width: 0;
padding: 5px 9px;
font: inherit;
font-size: 12px;
color: var(--lp-pane-ink);
background: var(--lp-pane-bg);
border: 1px solid var(--lp-pane-amber-700);
border-radius: 5px;
}
:where(.lp-pane-filter-input:focus-visible) {
outline: 2px solid var(--lp-pane-amber-900);
outline-offset: 1px;
}
:where(.lp-pane-filter-count) {
flex: 0 0 auto;
font-size: 11px;
color: var(--lp-pane-ink-dim);
}
/* Rows hidden by the client-side filter (row + its drawer). */
.lp-row-filtered { display: none !important; }
/* Resource-cap banner — emitted by sd-embed when the discovery
response carries a resource_usage block with status ∈ {warn,
truncated, blocked}. Sits at the top of .lp-pane-body, full
width inside the pane. Colours are local (don't depend on the
amber theme tokens) so they read the same across every theme. */
:where(.lp-pane-cap-banner) {
padding: 10px 14px;
font-size: 13px;
line-height: 1.45;
display: flex; align-items: flex-start; gap: 10px;
}
:where(.lp-pane-cap-banner .lp-pane-cap-icon) {
flex: 0 0 auto;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
font-weight: 700; font-size: 11px;
line-height: 1;
}
:where(.lp-pane-cap-banner.warn) {
background: var(--lp-pane-cap-warn-bg); color: var(--lp-pane-cap-warn-ink); border: 1px solid var(--lp-pane-cap-warn-border);
}
:where(.lp-pane-cap-banner.warn .lp-pane-cap-icon) {
background: var(--lp-pane-cap-warn-border); color: var(--lp-pane-cap-warn-ink);
}
:where(.lp-pane-cap-banner.truncated) {
background: var(--lp-pane-cap-truncated-bg); color: var(--lp-pane-cap-truncated-ink); border: 1px solid var(--lp-pane-cap-truncated-border);
}
:where(.lp-pane-cap-banner.truncated .lp-pane-cap-icon) {
background: var(--lp-pane-cap-truncated-border); color: var(--lp-pane-cap-truncated-ink);
}
:where(.lp-pane-cap-banner.blocked) {
background: var(--lp-pane-cap-blocked-bg); color: var(--lp-pane-cap-blocked-ink); border: 1px solid var(--lp-pane-cap-blocked-border);
}
:where(.lp-pane-cap-banner.blocked .lp-pane-cap-icon) {
background: var(--lp-pane-cap-blocked-border); color: var(--lp-pane-cap-blocked-ink);
}
:where(.lp-pane-cap-banner strong) { font-weight: 600; }
:where(.lp-pane-table) {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
:where(.lp-pane-table thead th) {
font-weight: 600;
text-align: left;
font-size: 12px;
letter-spacing: 0.01em;
color: var(--lp-pane-thead-ink);
padding: var(--lp-pane-cell-pad-y) var(--lp-pane-pad-x);
border-bottom: 1px solid var(--lp-pane-amber-700);
background: var(--lp-pane-thead-bg);
white-space: nowrap;
}
:where(.lp-pane-table tbody td) {
padding: var(--lp-pane-cell-pad-y) var(--lp-pane-pad-x);
border-bottom: 1px solid var(--lp-pane-divider);
vertical-align: top;
font-size: var(--lp-pane-font-size);
color: var(--lp-pane-ink);
/* Permit long strings to wrap rather than force horizontal scroll. */
overflow-wrap: anywhere;
word-break: break-word;
}
:where(.lp-pane-table tbody tr:last-child td) {
border-bottom: 0;
}
:where(.lp-pane-table tbody tr:hover td) {
background: var(--lp-pane-row-hover-bg);
}
/* ---------------------------------------------------------------------
Expandable rows — when a service has more attributes than fit as
columns, the overflow attributes live in a hidden detail row that
the user reveals by clicking anywhere on the primary row (or the
chevron). Driven by the `lp-pane-row--expandable` class on the tr,
`aria-expanded="true|false"`, and the `hidden` attribute on the
following `.lp-pane-detail` row.
--------------------------------------------------------------------- */
:where(.lp-pane-row--expandable) {
cursor: pointer;
}
:where(.lp-pane-row--expandable:hover .lp-pane-expander) {
color: var(--lp-pane-ink);
background: var(--lp-pane-row-hover-bg);
}
:where(.lp-pane-th-expander),
:where(.lp-pane-expander-cell) {
width: 36px;
padding: 0 8px 0 0;
text-align: right;
/* Body cells default to vertical-align: top so long values start
at the top of the row — good for data, wrong for the chevron.
Centre the chevron on the row regardless of value height. */
vertical-align: middle;
white-space: nowrap;
}
:where(.lp-pane-expander) {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 6px 8px;
/* Brand amber instead of the neutral faint ink — a filled triangle
in amber-700 reads clearly against every row bg (white, amber-50
hover, amber-100 thead) without needing a decorative outline. */
color: var(--lp-pane-amber-700);
font: inherit;
line-height: 0;
border-radius: var(--lp-pane-radius-sm);
transition: color 120ms ease, background-color 120ms ease;
}
:where(.lp-pane-expander:hover) {
color: var(--lp-pane-amber-900);
}
:where(.lp-pane-chevron) {
display: block;
transition: transform 150ms ease;
transform-origin: center;
}
:where(.lp-pane-row[aria-expanded="true"] .lp-pane-chevron) {
transform: rotate(90deg);
}
/* Detail row — one per expandable row. `hidden` toggled by JS. */
/* Drawer wrapper: padding around the embedded detail table so it
sits visually inside the pane rather than bleeding to the edges.
The top is deliberately deeper than the bottom, giving the
embedded table room to sit under the gradient shadow that
simulates the primary row "casting shadow" into the drawer.
Collapses to zero on narrow panes via .lp-pane-detail--tight. */
:where(.lp-pane-detail > td) {
padding: 18px var(--lp-pane-pad-x) 14px;
background:
/* Top shadow — dark amber fading out over 12px to suggest
the primary row above casting into the drawer. */
linear-gradient(180deg,
rgba(61, 33, 0, 0.14) 0,
rgba(61, 33, 0, 0.04) 6px,
transparent 14px),
var(--lp-pane-detail-bg);
/* Border-top matches the unexpanded inter-row divider — the
sense of depth comes from the gradient + inset shadow below,
NOT from a dark 1px line which reads as a hard edge rather
than a shadow. Bottom is a heavy amber-900 line that demarks
the end of this drawer so stacked expansions read as distinct
rather than bleeding into each other. */
border-top: 1px solid var(--lp-pane-divider);
border-bottom: 2px solid var(--lp-pane-amber-900);
/* Side rails — 1px amber-500 left/right so the drawer reads as a
contained block rather than bleeding into the pane chrome on
either side. Lighter than the table-frame's amber-700 so the
drawer feels recessed rather than welded to the row above. */
border-left: 1px solid var(--lp-pane-amber-500);
border-right: 1px solid var(--lp-pane-amber-500);
/* Second inset highlight at the very bottom returns the sense of
the drawer rising back up to the next row. */
box-shadow:
inset 0 4px 6px -4px rgba(61, 33, 0, 0.18),
inset 0 -1px 0 rgba(255, 255, 255, 0.45);
}
:where(.lp-pane-detail--tight > td) {
padding: 10px 0 6px;
}
/* The embedded detail table: a real
with 1px grid lines so
each row/value pair is visually bounded. 1px amber-700 outer
border isolates it from the surrounding drawer wash. */
:where(.lp-pane-detail-table) {
width: 100%;
border-collapse: collapse;
/* 2px outer border — deliberately heavier than the 1px inner
grid lines so the embedded detail table reads as a discrete
object against the surrounding drawer wash. */
border: 2px solid var(--lp-pane-amber-700);
border-radius: var(--lp-pane-radius-sm);
overflow: hidden;
font-size: 13px;
background: var(--lp-pane-bg);
}
:where(.lp-pane-detail--tight .lp-pane-detail-table) {
/* When padding is gone, borders flush to the drawer's amber-200
top border — drop radius + outer horizontal borders so the
edges line up with the primary table above. */
border-radius: 0;
border-left: 0;
border-right: 0;
}
:where(.lp-pane-detail-table th),
:where(.lp-pane-detail-table td) {
padding: 7px 12px;
text-align: left;
vertical-align: top;
border: 1px solid var(--lp-pane-divider);
font-weight: normal;
}
/* Key cell — same wash as the primary thead row for consistency. */
:where(.lp-pane-detail-table th) {
background: var(--lp-pane-thead-bg);
color: var(--lp-pane-amber-900);
font-weight: 500;
font-size: 12px;
width: 1%; /* shrink-to-fit */
white-space: nowrap;
letter-spacing: 0.01em;
}
/* Value cell — same wash as row hover, so the drawer reads as an
extension of the interactive row above. */
:where(.lp-pane-detail-table td) {
background: var(--lp-pane-amber-50);
color: var(--lp-pane-ink);
overflow-wrap: anywhere;
word-break: break-word;
}
/* Carved-depth hover — the same inset shadow recipe the pill-nav
uses on the Sunlit site. Applied to each cell in the hovered row
so the effect spans the full width. No layout shift. */
:where(.lp-pane-detail-table tbody tr:hover > *) {
box-shadow: inset 0 1px 2px rgba(26, 24, 20, 0.09),
inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
/* Padding cells used to align the final row of a wide drawer when
overflow / tags count is odd. Both the th and td pad take the
value-cell colour so the empty half-row is a uniform continuation
of the table rather than a bright white slot that pulls the eye. */
:where(.lp-pane-detail-table .lp-pane-detail-pad) {
background: var(--lp-pane-amber-50);
}
/* Shared section-head for any sub-table rendered inside the
drawer (tags, security-group rules, route-table details, …). Sits
across the full column span of its sub-table and provides the
dark-amber title bar that distinguishes each section from the
surrounding drawer wash. */
:where(.lp-pane-section-head) {
background: var(--lp-pane-amber-700);
color: var(--lp-pane-bg);
font-weight: 600;
font-size: 13px;
padding: 8px 14px;
text-align: left;
letter-spacing: 0.02em;
/* Override the generic detail-table th — the title bar needs to
be solid amber edge to edge, not interrupted by the 1px
divider border that the other ths use. */
border: 0;
}
/* Empty-state row inside any drawer sub-table (tags or compound).
Italic muted text on the amber-50 value-cell wash, matching the
styling the "No policy" message uses in the modal. */
:where(.lp-pane-section-empty) {
padding: 10px 14px;
background: var(--lp-pane-amber-50);
color: var(--lp-pane-ink-dim);
font-style: italic;
font-size: 12px;
}
/* Compound sub-tables — security-group rules, route-table details,
network-ACL rules. Wrapped in an overflow-x container so a sub-
table with long content (ARNs, CIDR ranges) on a narrow pane
scrolls horizontally rather than squashing each column to
unreadable widths. The column count itself is driven by the
data — not a responsive 2/4-col switch like the extended-attrs
table. */
:where(.lp-pane-compound-wrap) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Space between stacked drawer sub-tables. Applies uniformly to
compound wrappers and tables, so the drawer's order
(extended-attrs → compound sub-tables → tags) gets consistent
14px gaps between adjacent sections without needing each
section to know its neighbours. */
:where(.lp-pane-detail > td > *:not(:first-child)) {
margin-top: 14px;
}
/* Null / empty value. */
:where(.lp-pane-nil) {
color: var(--lp-pane-ink-faint);
}
/* ---------------------------------------------------------------------
State / status pill — small coloured rectangle. Three signalling
tones (green = ok, amber = transitional, red = bad) + a neutral
fallback for state values we don't have tone metadata for. Used
on columns whose id is `state`, `status`, or ends `_state` /
`_status`. The amber tone reuses our brand palette for visual
continuity with the rest of the pane.
--------------------------------------------------------------------- */
:where(.lp-pane-state) {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.55;
white-space: nowrap;
border: 1px solid transparent;
/* Force display case so mixed-case API values (EC2's "running",
Lambda's "Active", CloudWatch's "INSUFFICIENT_DATA") all read
consistently. Underlying DOM text stays untouched so copy/paste
picks up the real API value. */
text-transform: lowercase;
}
:where(.lp-pane-state--ok) {
background: var(--lp-pane-tag-success-bg);
color: var(--lp-pane-tag-success-ink);
border-color: var(--lp-pane-tag-success-border);
}
:where(.lp-pane-state--warn) {
background: var(--lp-pane-amber-200);
color: var(--lp-pane-amber-900);
border-color: var(--lp-pane-amber-700);
}
:where(.lp-pane-state--bad) {
background: var(--lp-pane-tag-critical-bg);
color: var(--lp-pane-tag-critical-ink);
border-color: var(--lp-pane-tag-critical-border);
}
:where(.lp-pane-state--neutral) {
background: var(--lp-pane-tag-neutral-bg);
color: var(--lp-pane-tag-neutral-ink);
border-color: var(--lp-pane-tag-neutral-border);
}
/* ---------------------------------------------------------------------
Policy link — cells in columns with format: 'policy_link' render
as an inline link-styled button. Click pops up the shared
native