lantern_ui

/*
 * LanternUI component styles (namespaced `lui-*`).
 *
 * ALWAYS import this file when using LanternUI components.
 *
 * Theming comes from `--lantern-*` custom properties, defined one of two ways:
 * - Standalone host: also import `lantern_ui_theme.css` (the default light/dark
 *   theme + density modes).
 * - Fluxon (or any token-bearing) host: DON'T import the theme — define a small
 *   bridge mapping `--lantern-*` onto your host tokens instead, e.g.
 *
 *       :root {
 *         --lantern-fg: var(--foreground);
 *         --lantern-fg-muted: var(--foreground-softer);
 *         --lantern-surface: var(--background-base);
 *         --lantern-surface-raised: var(--card, var(--background-base));
 *         --lantern-surface-sunken: var(--background-accent);
 *         --lantern-surface-hover: var(--background-accent);
 *         --lantern-border: var(--border-base);
 *         --lantern-primary: var(--foreground);
 *         --lantern-primary-fg: var(--background-base);
 *         --lantern-accent: var(--primary);
 *         --lantern-ring: var(--primary);
 *         --lantern-danger: var(--danger);
 *         --lantern-success: var(--success);
 *         --lantern-warning: var(--warning);
 *       }
 */

/* ═══ Components ══════════════════════════════════════════════════════════
 *
 * Namespaced (`lui-`) so LanternUI coexists with any host CSS (incl. Fluxon)
 * with zero build step. Every value reads the tokens above; the consumer's
 * `class=` attribute merges on top via LanternUI.Class.
 */

/* ── Icon ── */
.lui-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* ── Button ──
 * Colors set --lui-c; variants derive bg/border/fg from it, so all
 * color × variant combinations work without a compiled class matrix. */
.lui-btn {
  --lui-c: var(--lantern-primary);
  --lui-c-fg: var(--lantern-primary-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--lantern-control-h);
  padding: 0 var(--lantern-control-px);
  font-family: var(--lantern-font);
  font-size: var(--lantern-text);
  font-weight: 500;
  letter-spacing: -0.006em;
  white-space: nowrap;
  border-radius: var(--lantern-radius);
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--lantern-duration) var(--lantern-ease),
    border-color var(--lantern-duration) var(--lantern-ease),
    box-shadow var(--lantern-duration) var(--lantern-ease),
    opacity var(--lantern-duration) var(--lantern-ease);
}
.lui-btn[data-color="danger"]  { --lui-c: var(--lantern-danger);  --lui-c-fg: var(--lantern-danger-fg); }
.lui-btn[data-color="warning"] { --lui-c: var(--lantern-warning); --lui-c-fg: #ffffff; }
.lui-btn[data-color="success"] { --lui-c: var(--lantern-success); --lui-c-fg: #ffffff; }
.lui-btn[data-color="info"]    { --lui-c: var(--lantern-accent);  --lui-c-fg: var(--lantern-accent-fg); }

.lui-btn[data-variant="solid"] {
  background: var(--lui-c);
  color: var(--lui-c-fg);
  box-shadow: var(--lantern-shadow);
}
.lui-btn[data-variant="solid"]:hover { opacity: 0.9; }

.lui-btn[data-variant="soft"] {
  background: color-mix(in oklab, var(--lui-c) 10%, transparent);
  color: var(--lui-c);
}
.lui-btn[data-variant="soft"]:hover {
  background: color-mix(in oklab, var(--lui-c) 16%, transparent);
}

.lui-btn[data-variant="surface"] {
  background: var(--lantern-surface-sunken);
  color: var(--lantern-fg);
}
.lui-btn[data-variant="surface"]:hover { background: var(--lantern-surface-hover); }

.lui-btn[data-variant="outline"],
.lui-btn[data-variant="dashed"] {
  background: var(--lantern-surface-raised);
  color: var(--lantern-fg);
  border-color: var(--lantern-border);
  box-shadow: var(--lantern-shadow);
}
.lui-btn[data-variant="dashed"] { border-style: dashed; }
.lui-btn[data-variant="outline"]:hover,
.lui-btn[data-variant="dashed"]:hover { background: var(--lantern-surface-sunken); }

.lui-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--lantern-fg);
}
.lui-btn[data-variant="ghost"]:hover { background: var(--lantern-surface-sunken); }

.lui-btn:focus-visible,
.lui-input-wrap:focus-within,
.lui-cal-day:focus-visible,
.lui-cal-nav:focus-visible {
  border-color: var(--lantern-ring);
  box-shadow: 0 0 0 3px var(--lantern-ring-soft);
}

.lui-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.lui-btn[data-size="xs"] { height: 1.5rem;  padding: 0 0.5rem;  font-size: var(--lantern-text-sm); }
.lui-btn[data-size="sm"] { height: 1.75rem; padding: 0 0.625rem; font-size: var(--lantern-text-sm); }
.lui-btn[data-size="lg"] { height: 2.25rem; padding: 0 1rem; }
.lui-btn[data-size="xl"] { height: 2.5rem;  padding: 0 1.25rem; font-size: 0.875rem; }
.lui-btn[data-size^="icon"] { padding: 0; }
.lui-btn[data-size="icon-xs"] { width: 1.5rem;  height: 1.5rem; }
.lui-btn[data-size="icon-sm"] { width: 1.75rem; height: 1.75rem; }
.lui-btn[data-size="icon-md"],
.lui-btn[data-size="icon"]    { width: var(--lantern-control-h); height: var(--lantern-control-h); }
.lui-btn[data-size="icon-lg"] { width: 2.25rem; height: 2.25rem; }
.lui-btn[data-size="icon-xl"] { width: 2.5rem;  height: 2.5rem; }

.lui-btn-group {
  display: inline-flex;
}
.lui-btn-group .lui-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.lui-btn-group .lui-btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── Form field ── */
.lui-field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  font-family: var(--lantern-font);
}

.lui-label {
  font-size: var(--lantern-text);
  font-weight: 550;
  color: var(--lantern-fg);
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
}
.lui-sublabel {
  font-size: var(--lantern-text-sm);
  font-weight: 400;
  color: var(--lantern-fg-muted);
}
.lui-description,
.lui-help {
  font-size: var(--lantern-text-sm);
  color: var(--lantern-fg-muted);
  margin: 0;
}
.lui-error {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: var(--lantern-text-sm);
  color: var(--lantern-danger);
  margin: 0;
}
.lui-error-icon { width: 0.875rem; height: 0.875rem; }

.lui-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.4375rem;
}
.lui-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  height: var(--lantern-control-h);
  padding: 0 0.625rem;
  background: var(--lantern-surface);
  border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius);
  box-shadow: var(--lantern-shadow);
  transition:
    border-color var(--lantern-duration) var(--lantern-ease),
    box-shadow var(--lantern-duration) var(--lantern-ease);
}
.lui-input-wrap[data-invalid] {
  border-color: var(--lantern-danger);
}
.lui-input-wrap[data-invalid]:focus-within {
  border-color: var(--lantern-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lantern-danger) 20%, transparent);
}
.lui-input-wrap[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.lui-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--lantern-text);
  color: var(--lantern-fg);
}
.lui-input::placeholder { color: var(--lantern-fg-subtle); }
.lui-inner-affix {
  display: inline-flex;
  align-items: center;
  color: var(--lantern-fg-muted);
  font-size: var(--lantern-text-sm);
}
.lui-outer-affix { display: inline-flex; align-items: center; }

.lui-field[data-size="xs"] .lui-input-wrap { height: 1.5rem; }
.lui-field[data-size="sm"] .lui-input-wrap { height: 1.75rem; }
.lui-field[data-size="lg"] .lui-input-wrap { height: 2.25rem; }
.lui-field[data-size="xl"] .lui-input-wrap { height: 2.5rem; }

/* ── Calendar ── */
.lui-cal {
  display: inline-block;
  padding: 0.75rem;
  background: var(--lantern-surface-raised);
  border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius-lg);
  box-shadow: var(--lantern-shadow-md);
  font-family: var(--lantern-font);
  user-select: none;
}
.lui-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lui-cal-title {
  font-size: var(--lantern-text);
  font-weight: 600;
  color: var(--lantern-fg);
  letter-spacing: -0.01em;
}
.lui-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius-sm);
  background: var(--lantern-surface-raised);
  color: var(--lantern-fg-muted);
  cursor: pointer;
  outline: none;
  transition: background-color var(--lantern-duration) var(--lantern-ease);
}
.lui-cal-nav:hover { background: var(--lantern-surface-sunken); color: var(--lantern-fg); }
.lui-cal-nav .lui-icon { width: 0.875rem; height: 0.875rem; }

.lui-cal-grid { display: flex; flex-direction: column; gap: 2px; }
.lui-cal-row { display: grid; grid-template-columns: repeat(7, 2rem); gap: 2px; }
.lui-cal-wd {
  text-align: center;
  font-size: var(--lantern-text-sm);
  color: var(--lantern-fg-subtle);
  font-weight: 500;
  padding: 0.25rem 0;
}
.lui-cal-day {
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lantern-text);
  font-variant-numeric: tabular-nums;
  color: var(--lantern-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--lantern-radius-sm);
  cursor: pointer;
  outline: none;
  transition: background-color var(--lantern-duration) var(--lantern-ease);
}
.lui-cal-day:hover { background: var(--lantern-surface-sunken); }
.lui-cal-day[data-outside] { color: var(--lantern-fg-subtle); }
.lui-cal-day[data-today] { box-shadow: inset 0 0 0 1.5px var(--lantern-accent); }
.lui-cal-day[aria-selected="true"] {
  background: var(--lantern-primary);
  color: var(--lantern-primary-fg);
  font-weight: 600;
}
.lui-cal-day[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Segmented date/time field ── */
.lui-dtf {
  display: inline-flex;
  flex-wrap: nowrap; /* hosts must never wrap the segments (defensive) */
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  height: var(--lantern-control-h);
  padding: 0 0.625rem;
  background: var(--lantern-surface);
  border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius);
  box-shadow: var(--lantern-shadow);
  font-family: var(--lantern-font);
  font-size: var(--lantern-text);
  font-variant-numeric: tabular-nums;
  color: var(--lantern-fg);
  transition:
    border-color var(--lantern-duration) var(--lantern-ease),
    box-shadow var(--lantern-duration) var(--lantern-ease);
}
.lui-dtf:focus-within {
  border-color: var(--lantern-ring);
  box-shadow: 0 0 0 3px var(--lantern-ring-soft);
}
.lui-dtf[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.lui-dtf-segs {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.lui-dtf-seg {
  padding: 0.0625rem 0.1875rem;
  border-radius: 0.25rem;
  outline: none;
  cursor: text;
}
.lui-dtf-seg:hover { background: var(--lantern-surface-sunken); }
.lui-dtf-seg:focus {
  background: var(--lantern-primary);
  color: var(--lantern-primary-fg);
}
.lui-dtf-seg:not([data-set]) { color: var(--lantern-fg-subtle); }
.lui-dtf-seg:not([data-set]):focus { color: var(--lantern-primary-fg); }
.lui-dtf-sep {
  color: var(--lantern-fg-subtle);
  padding: 0 0.0625rem;
}
.lui-dtf-clear {
  border: none;
  background: none;
  color: var(--lantern-fg-subtle);
  font-size: var(--lantern-text);
  line-height: 1;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.lui-dtf-clear:hover { color: var(--lantern-danger); background: var(--lantern-surface-sunken); }
.lui-dtf-suffix {
  display: inline-flex;
  align-items: center;
  color: var(--lantern-fg-muted);
}

/* ── Picker (field + calendar popover composition) ── */
.lui-picker {
  position: relative;
  display: inline-flex;
  flex: 1;
  min-width: 0;
}
.lui-picker .lui-dtf { flex: 1; }
.lui-picker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--lantern-fg-muted);
  padding: 0.125rem;
  border-radius: 0.25rem;
  cursor: pointer;
  outline: none;
}
.lui-picker-toggle:hover { color: var(--lantern-fg); background: var(--lantern-surface-sunken); }
.lui-picker-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--lantern-ring-soft);
}
.lui-picker-toggle .lui-icon { width: 1rem; height: 1rem; }
.lui-picker-panel {
  z-index: 50;
  /* position:fixed + top/left set by the runtime's position() */
  background: var(--lantern-surface-raised);
  border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius-lg);
  box-shadow: var(--lantern-shadow-md);
  padding: 0.375rem 0.75rem 0.625rem;
}
.lui-picker-panel .lui-cal {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.375rem 0 0.25rem;
}
/* The footer's Clear covers it; the pane's own null glyph reads as noise. */
.lui-picker-time-field .lui-dtf-clear {
  display: none;
}
.lui-picker-panel .lui-picker-cal { display: block; }
.lui-picker-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--lantern-border);
}
.lui-picker-time-label {
  font-size: var(--lantern-text);
  color: var(--lantern-fg);
}
.lui-picker-time-field {
  background: var(--lantern-surface-sunken);
  border-color: transparent;
  box-shadow: none;
}

.lui-picker-foot {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-top: -0.25rem;
  background: var(--lantern-surface-raised);
  border: 1px solid var(--lantern-border);
  border-top: none;
  border-radius: 0 0 var(--lantern-radius-lg) var(--lantern-radius-lg);
  box-shadow: var(--lantern-shadow-md);
}
.lui-picker-foot-space { flex: 1; }

/* ── Checkbox ── */
.lui-checkbox-field { display: flex; flex-direction: column; gap: 0.25rem; }
.lui-checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer;
  font-size: var(--lantern-text); }
.lui-checkbox-row[data-disabled] { opacity: 0.55; cursor: not-allowed; }
.lui-checkbox { appearance: none; -webkit-appearance: none; margin: 0.15rem 0 0;
  width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 0.25rem;
  border: 1px solid var(--lantern-border-strong, var(--lantern-border));
  background: var(--lantern-surface); cursor: inherit;
  transition: background var(--lantern-duration) var(--lantern-ease),
    border-color var(--lantern-duration) var(--lantern-ease); }
.lui-checkbox:checked { background: var(--lantern-primary); border-color: var(--lantern-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.75rem; background-position: center; background-repeat: no-repeat; }
.dark .lui-checkbox:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%2318181b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lui-checkbox:focus-visible { outline: none;
  box-shadow: 0 0 0 3px var(--lantern-ring-soft, rgba(37, 99, 235, 0.25)); }
.lui-checkbox-label { display: flex; flex-direction: column; gap: 0.1rem; color: var(--lantern-fg); }
.lui-checkbox-desc { font-size: var(--lantern-text-sm); color: var(--lantern-fg-muted); }

/* ── Modal ── */
.lui-modal { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 1.5rem; }
.lui-modal[data-placement="top"] { align-items: flex-start; padding-top: 4.5rem; }
.lui-modal-backdrop { position: absolute; inset: 0;
  background: color-mix(in oklab, #000 45%, transparent);
  animation: lui-fade var(--lantern-duration) var(--lantern-ease); }
.lui-modal-panel { position: relative; background: var(--lantern-surface-raised);
  color: var(--lantern-fg); border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius-lg); box-shadow: var(--lantern-shadow-md);
  padding: 1.25rem 1.5rem; max-width: 28rem; width: 100%; max-height: calc(100vh - 4rem);
  overflow-y: auto; animation: lui-pop var(--lantern-duration) var(--lantern-ease); }
.lui-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; border: none;
  background: none; color: var(--lantern-fg-subtle); cursor: pointer; padding: 0.25rem;
  border-radius: var(--lantern-radius-sm); line-height: 0; }
.lui-modal-close:hover { color: var(--lantern-fg); background: var(--lantern-surface-sunken); }
@keyframes lui-fade { from { opacity: 0; } }
@keyframes lui-pop { from { opacity: 0; transform: scale(0.97); } }

/* ── Dropdown menu ── */
.lui-dropdown { display: inline-block; position: relative; }
.lui-dropdown-menu { z-index: 50; min-width: 11rem; padding: 0.25rem;
  background: var(--lantern-surface-raised); border: 1px solid var(--lantern-border);
  border-radius: var(--lantern-radius-md); box-shadow: var(--lantern-shadow-md);
  animation: lui-pop var(--lantern-duration) var(--lantern-ease); }
.lui-dropdown-header { padding: 0.375rem 0.625rem; font-size: var(--lantern-text-sm);
  font-weight: 600; color: var(--lantern-fg-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.lui-dropdown-separator { height: 1px; margin: 0.25rem -0.25rem;
  background: var(--lantern-border); }
.lui-dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%;
  box-sizing: border-box; padding: 0.375rem 0.625rem; border: none; background: none;
  text-align: left; text-decoration: none; font-size: var(--lantern-text);
  font-family: inherit; color: var(--lantern-fg); border-radius: var(--lantern-radius-sm);
  cursor: pointer; }
.lui-dropdown-item:hover, .lui-dropdown-item:focus-visible { outline: none;
  background: var(--lantern-surface-sunken); }
.lui-dropdown-item[disabled], .lui-dropdown-item[data-disabled] { opacity: 0.5;
  cursor: not-allowed; }
.lui-dropdown-item[data-danger] { color: var(--lantern-danger); }
.lui-dropdown-custom { padding: 0.375rem 0.625rem; }

/* ── Breadcrumb ── */
.lui-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  list-style: none; margin: 0; padding: 0; font-size: var(--lantern-text); }
.lui-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.25rem;
  min-width: 0; }
.lui-breadcrumb-sep { color: var(--lantern-fg-subtle); user-select: none; }
.lui-breadcrumb-link { border: none; background: none; padding: 0.125rem 0.25rem;
  font: inherit; color: var(--lantern-fg-muted); text-decoration: none; cursor: pointer;
  border-radius: var(--lantern-radius-sm); max-width: 16rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lui-breadcrumb-link:hover { color: var(--lantern-accent);
  background: var(--lantern-surface-sunken); }
.lui-breadcrumb-current { color: var(--lantern-fg); font-weight: 550;
  padding: 0.125rem 0.25rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* ── Empty state ── */
.lui-empty { display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  padding: 2.5rem 1.5rem; text-align: center; }
.lui-empty-icon { width: 1.75rem; height: 1.75rem; color: var(--lantern-fg-subtle); }
.lui-empty-title { margin: 0; font-size: var(--lantern-text); font-weight: 600;
  color: var(--lantern-fg); }
.lui-empty-desc { margin: 0; font-size: var(--lantern-text-sm);
  color: var(--lantern-fg-muted); max-width: 26rem; }
.lui-empty-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .lui-modal-backdrop, .lui-modal-panel, .lui-dropdown-menu { animation: none; }
}

/* ── App-shell layout (sidebar + main + topbar) ── */
.lui-shell { --lui-sidebar-w: 15rem; display: grid;
  grid-template-columns: var(--lui-sidebar-w) minmax(0, 1fr); min-height: 100vh;
  transition: grid-template-columns var(--lantern-duration) var(--lantern-ease); }
.lui-shell[data-collapsed] { --lui-sidebar-w: 3.5rem; }

.lui-sidebar { position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--lantern-surface);
  border-right: 1px solid var(--lantern-border); }
.lui-sidebar-header { display: flex; align-items: center; gap: 0.5rem; height: 3.25rem;
  padding: 0 0.9rem; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em;
  color: var(--lantern-fg); white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px solid var(--lantern-border); }
.lui-sidebar-header .lui-icon { color: var(--lantern-accent); flex-shrink: 0; font-size: 1.15rem; }

.lui-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 0.6rem; }
.lui-nav-group { margin-bottom: 1rem; }
.lui-nav-group-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--lantern-fg-subtle); padding: 0 0.5rem; margin-bottom: 0.25rem;
  white-space: nowrap; }
.lui-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem;
  border-radius: var(--lantern-radius-sm); font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
  color: var(--lantern-fg-muted); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; box-sizing: border-box; }
.lui-nav-item:hover { color: var(--lantern-fg); background: var(--lantern-surface-sunken); }
.lui-nav-item-active { color: var(--lantern-accent); font-weight: 600;
  background: var(--lantern-accent-soft); }
.lui-nav-item-active:hover { color: var(--lantern-accent); background: var(--lantern-accent-soft); }
.lui-nav-item-icon { font-size: 1.05rem; flex-shrink: 0; }
.lui-nav-item-label { overflow: hidden; text-overflow: ellipsis; }

/* Collapsed rail: hide text, center the icons. */
.lui-shell[data-collapsed] .lui-nav-item-label,
.lui-shell[data-collapsed] .lui-nav-group-label,
.lui-shell[data-collapsed] .lui-brand-name { display: none; }
.lui-shell[data-collapsed] .lui-nav-item { justify-content: center; padding-inline: 0; }
.lui-shell[data-collapsed] .lui-sidebar-header { justify-content: center; padding-inline: 0; }
.lui-shell[data-collapsed] .lui-nav-group { margin-bottom: 0.5rem; }

.lui-shell-main { display: flex; flex-direction: column; min-width: 0; }
.lui-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
  height: 3.25rem; padding: 0 1.25rem; background: var(--lantern-surface);
  border-bottom: 1px solid var(--lantern-border); }
.lui-shell-content { flex: 1; min-width: 0; padding: 1.5rem 1.25rem 4rem; }

.lui-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: none; background: none; color: var(--lantern-fg-muted);
  border-radius: var(--lantern-radius-sm); cursor: pointer; flex-shrink: 0; }
.lui-sidebar-toggle:hover { color: var(--lantern-fg); background: var(--lantern-surface-sunken); }
.lui-sidebar-toggle-icon { font-size: 1.15rem; }

/* Narrow viewports: sidebar drops to a horizontal strip above the content. */
@media (max-width: 768px) {
  .lui-shell, .lui-shell[data-collapsed] { grid-template-columns: 1fr; }
  .lui-sidebar { position: static; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden; border-right: none;
    border-bottom: 1px solid var(--lantern-border); }
  .lui-sidebar-header { border-bottom: none; border-right: 1px solid var(--lantern-border); height: auto;
    padding: 0.75rem 0.9rem; }
  .lui-sidebar-nav { display: flex; gap: 0.5rem; padding: 0.5rem 0.6rem; }
  .lui-nav-group { display: flex; gap: 0.15rem; margin-bottom: 0; flex-shrink: 0; }
  .lui-nav-group-label { display: none; }
  .lui-sidebar-toggle { display: none; }
}