/*
 * @sparti/page-sdk components. Class names for a workspace's own page, painted only from tokens.css (colours, radii,
 * shadows, font): no literal colour here, a test fails on one. Dark follows the `dark` class the bridge puts on <html>.
 */
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
.dark { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-sans); color: hsl(var(--ink)); background-color: hsl(var(--bone)); -webkit-font-smoothing: antialiased; }
a { color: hsl(var(--indigo)); }

/* Frame: a full-height window, with an optional title bar and a split (side list + main). */
.sp-window { display: flex; flex-direction: column; height: 100%; min-height: 0; background: hsl(var(--bone)); }
.sp-window__bar { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0 1rem; border-bottom: 1px solid hsl(var(--line)); background: hsl(var(--paper)); }
.sp-window__title { margin: 0; font-size: 1rem; font-weight: 600; color: hsl(var(--ink)); }
.sp-split { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sp-aside { display: flex; flex-direction: column; min-height: 0; max-height: 40vh; border-bottom: 1px solid hsl(var(--line)); background: hsl(var(--sunken)); }
.sp-aside__scroll { flex: 1; min-height: 0; overflow: auto; padding: 0.5rem; }
.sp-main { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 1.5rem; }
.sp-pane { width: 100%; max-width: 72rem; margin-inline: auto; }
@media (min-width: 768px) {
  .sp-split { flex-direction: row; }
  .sp-aside { width: 16rem; max-height: none; flex-shrink: 0; border-bottom: 0; border-right: 1px solid hsl(var(--line)); }
  .sp-main { padding: 2.5rem; }
}

/* A page question: the title, then a short indigo rule (the backoffice's page-question). */
.sp-question { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--ink)); }
.sp-question::after { content: ""; width: 2rem; height: 3px; border-radius: 999px; background: hsl(var(--indigo)); }

.sp-card { background: hsl(var(--paper)); border: 1px solid hsl(var(--line)); border-radius: var(--radius-card); box-shadow: var(--lift-card); padding: 1rem; }
.sp-panel { background: hsl(var(--paper)); border: 1px solid hsl(var(--line)); border-radius: var(--radius-panel); box-shadow: var(--lift-panel); padding: 1.5rem; }

/* Controls */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.875rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius-ctl); background: hsl(var(--paper)); color: hsl(var(--ink)); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.sp-btn:hover { background: hsl(var(--line-2)); }
.sp-btn--primary { border-color: hsl(var(--indigo)); background: hsl(var(--indigo)); color: hsl(var(--primary-foreground)); }
.sp-btn--primary:hover { border-color: hsl(var(--indigo-2)); background: hsl(var(--indigo-2)); }
.sp-btn--ghost { border-color: transparent; background: transparent; }
.sp-btn:focus-visible, .sp-input:focus-visible, .sp-nav__item:focus-visible, .sp-accordion > summary:focus-visible { outline: 2px solid hsl(var(--ring) / 0.4); outline-offset: 1px; }
.sp-input { width: 100%; height: 2.25rem; padding: 0 0.75rem; border: 1px solid hsl(var(--line)); border-radius: var(--radius-ctl); background: hsl(var(--paper)); color: hsl(var(--ink)); font: inherit; }
.sp-input::placeholder { color: hsl(var(--faint)); }

/* Chips */
.sp-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: var(--radius-chip); background: hsl(var(--indigo-soft)); color: hsl(var(--indigo-2)); font-size: 0.75rem; font-weight: 600; }
.sp-chip--success { background: hsl(var(--green-bg)); color: hsl(var(--green-ink)); }
.sp-chip--warning { background: hsl(var(--amber-bg)); color: hsl(var(--amber-ink)); }
.sp-chip--danger { background: hsl(var(--red-bg)); color: hsl(var(--red-ink)); }

/* Side navigation and a two-level accordion (details/summary: no script needed) */
.sp-nav { display: flex; flex-direction: column; gap: 0.125rem; }
.sp-nav__item { display: flex; align-items: center; width: 100%; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-ctl); background: transparent; color: hsl(var(--ink-2)); font: inherit; text-align: left; cursor: pointer; }
.sp-nav__item:hover { background: hsl(var(--line-2)); }
.sp-nav__item[aria-current="true"] { background: hsl(var(--indigo-soft)); color: hsl(var(--indigo-2)); font-weight: 600; }
.sp-accordion > summary { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: var(--radius-ctl); color: hsl(var(--ink)); font-weight: 600; list-style: none; cursor: pointer; }
.sp-accordion > summary::-webkit-details-marker { display: none; }
.sp-accordion > summary::after { content: "\203A"; color: hsl(var(--muted)); transition: transform 0.15s; }
.sp-accordion[open] > summary::after { transform: rotate(90deg); }
.sp-accordion > summary:hover { background: hsl(var(--line-2)); }

/* Table */
.sp-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid hsl(var(--line)); border-radius: var(--radius-card); background: hsl(var(--paper)); }
.sp-table th { padding: 0.625rem 0.875rem; background: hsl(var(--sunken)); color: hsl(var(--muted)); font-size: 0.75rem; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.sp-table td { padding: 0.75rem 0.875rem; border-top: 1px solid hsl(var(--line-2)); color: hsl(var(--ink-2)); }

/* Reading text (an article, a guide) */
.sp-prose { max-width: 48rem; color: hsl(var(--ink-2)); line-height: 1.65; }
.sp-prose h1, .sp-prose h2, .sp-prose h3 { color: hsl(var(--ink)); line-height: 1.25; }
.sp-prose code, .sp-prose pre { background: hsl(var(--line-2)); border-radius: var(--radius-chip); }
.sp-prose code { padding: 0.1rem 0.35rem; }
.sp-prose pre { padding: 0.75rem; overflow: auto; }
.sp-prose img, .sp-prose video { max-width: 100%; border-radius: var(--radius-ctl); }

/* Layout helpers */
.sp-stack { display: flex; flex-direction: column; gap: 1rem; }
.sp-stack--tight { gap: 0.25rem; }
.sp-row { display: flex; align-items: center; gap: 0.75rem; }
.sp-grow { flex: 1; }
.sp-pad { padding: 0.75rem; }
.sp-muted { color: hsl(var(--muted)); }
.sp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }