/* The Views, Dashboards and Docs pages (site/docs-pages.mjs): shadcn's docs layout, a resizable sidebar beside the
   page, and blocks that pair a live Preview with its Code. Only site.css' tokens (shadcn's names), so light and dark
   follow the site's theme switch. */

.docs { display: grid; grid-template-columns: auto minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
/* the sidebar's width is the reader's (dragged, remembered: data-resizable, docs/CONTRACT.md §11), so its track is auto */
.docs-side { width: var(--data-panel-width, 240px); min-width: 0; }
.docs-menu { display: none; }
/* WHY the list sticks, not the aside: the aside is the resizable panel and spans the page's height, so its drag
   handle (a sibling the kit places on its edge) runs the whole length and never needs re-placing on scroll */
.docs-nav { position: sticky; top: 57px; max-height: calc(100vh - 57px); overflow-y: auto; padding: 22px 14px 40px 24px; font-size: 13.5px; }
.docs-nav h4 { margin: 18px 0 6px; font-size: 12.5px; font-weight: 600; }
.docs-nav h4:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav a { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0 0 1px -8px; border-radius: 6px; text-decoration: none; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-nav a:hover { color: var(--foreground); background: var(--accent); }
.docs-nav a[aria-current="page"] { color: var(--foreground); font-weight: 550; background: var(--muted); }
.docs-nav li.sub a { padding-left: 20px; font-size: 13px; }
.soon-dot { font-size: 10.5px; border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; color: var(--muted-foreground); font-weight: 400; flex: 0 0 auto; }

.docs-main { min-width: 0; max-width: 1040px; padding: 28px 40px 64px; }
.docs-main > h1, .title-row h1 { font-size: 30px; margin: 4px 0 8px; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docs-main h2 { font-size: 21px; margin: 40px 0 8px; padding-top: 8px; scroll-margin-top: 70px; }
.docs-main section > h2:first-child { border-top: 1px solid var(--border); padding-top: 26px; }
.docs-main p { max-width: 780px; }
.docs-main section, .dd-block { scroll-margin-top: 70px; }
.section-lede { color: var(--muted-foreground); margin: 0 0 18px; }

/* badges: what is live on main, what lands with a lane (muted, as shadcn's outline badge) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 550; border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; white-space: nowrap; line-height: 1.6; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }
.badge-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.badge-soon { color: var(--muted-foreground); border-style: dashed; }

.callout { border: 1px solid var(--border); border-radius: 10px; background: var(--muted); padding: 12px 16px; margin: 0 0 24px; }
.callout p { margin: 0; }
.callout .badge { margin: 2px 2px 0 0; background: var(--background); }

/* a block: title + badge, one line, Preview | Code, where it comes from */
.dd-block { margin: 0 0 34px; min-width: 0; }
.dd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.dd-head h3 { font-size: 16.5px; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dd-head h3 code { font-size: 12px; font-weight: 400; color: var(--muted-foreground); overflow-wrap: anywhere; }
.dd-desc { color: var(--muted-foreground); margin: 0 0 10px; font-size: 13.5px; }
.dd-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--muted); border-radius: 9px; margin: 0 0 8px; }
.dd-tabs [role=tab] { font: inherit; font-size: 13px; font-weight: 500; border: 0; background: none; color: var(--muted-foreground); padding: 4px 14px; border-radius: 7px; cursor: pointer; }
.dd-tabs [role=tab]:hover { color: var(--foreground); }
.dd-tabs [role=tab][aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dd-tabs [role=tab]:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
/* WHY dd-tabpanel, not dd-panel: <data-dashboard> names its grid cells .dd-panel (display: flex), which would unhide a
   block's [hidden] Code panel on a page with a live dashboard */
.dd-tabpanel { min-width: 0; }
.dd-preview { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--background); min-height: calc(var(--demo-height) + 24px); }
.dd-preview .demo { min-width: 0; }
.dd-preview .demo:not(.has-rail) { display: block; }
.dd-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 13px; pointer-events: none; }
.dd-preview.drawn .dd-wait, .dd-preview[data-started] .dd-wait { display: none; }
.dd-tabpanel .file pre { max-height: min(60vh, 560px); }
.dd-block > .file, .docs-main > .file { margin: 10px 0 0; }
.dd-foot { color: var(--muted-foreground); font-size: 12.5px; margin: 8px 0 0; }
.dd-foot a { color: var(--foreground); }
.dd-source { color: var(--muted-foreground); font-size: 12.5px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 40px; }
.dd-source b { color: var(--foreground); font-weight: 550; }
.docs-main > .file { margin: 12px 0 16px; }
.file-name { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* a block whose thing is not on main yet: dashed, quieter, its slot for the integrator */
.dd-pending { border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px; background: color-mix(in srgb, var(--muted) 45%, var(--background)); }
.dd-pending .file { margin: 12px 0 0; background: var(--background); }
.dd-pending .tablewrap { background: var(--background); }

/* the switches above a demo (frame=, open=) */
.dd-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.dd-switch .segmented button { font-family: var(--font-mono); font-size: 12.5px; padding: 4px 11px; }

/* plain tables in the text */
table.plain-table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.plain-table th, table.plain-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.plain-table thead th { background: var(--muted); font-weight: 600; font-size: 12.5px; color: var(--muted-foreground); }
table.plain-table tbody tr:last-child td { border-bottom: 0; }
.docs-main .tablewrap { margin: 0 0 16px; }

.rules { padding-left: 18px; max-width: 800px; }
.rules li { margin: 0 0 8px; }

/* a live dashboard, analysis or list of analyses (docs.js starts it): as tall as it draws, its own panels inside */
.dd-preview-dashboard, .dd-preview-analysis, .dd-preview-analyses { min-height: 0; }
.dd-preview[data-kind]:not(.drawn) { min-height: calc(var(--demo-height) + 24px); }
/* three analyses: the list as tall as a few rows, not the kit's default view height */
.dd-preview data-analyses data-views { --data-height: 240px; }
/* the analysis' contents stick under the site's sticky header (57 px), not under the window's top edge */
/* WHY: a w: 4 panel in this ~1000 px column is narrower than <data-views>' 280 px floor and spilled out of the box;
   the floor is a type selector a host may override (CONTRACT §15 note "a narrow table"), so the table scrolls in its panel */
.dd-preview data-dashboard .dd-panel data-views { min-width: 0; }
.dd-preview data-analysis .an-toc { top: 65px; max-height: calc(100vh - 73px); }
.dd-preview data-analysis .an-md h2, .dd-preview data-analysis .an-md h3 { scroll-margin-top: 70px; }

/* the three tiers (the Overview, near the top, and the Analyses page): one card each, in order */
.tiers { margin: 0 0 30px; }
.tiers h2, .docs-main .tiers h2 { font-size: 17px; margin: 0 0 10px; padding: 0; border: 0; }
.tier-list { list-style: none; counter-reset: tier; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier-list li { counter-increment: tier; min-width: 0; }
.tier-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; text-decoration: none; background: var(--card); }
.tier-list a:hover { border-color: var(--ring); }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tier-head b::before { content: counter(tier) ". "; color: var(--muted-foreground); font-weight: 500; }
.tier-line { color: var(--muted-foreground); font-size: 13px; }

/* the Docs index */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-decoration: none; background: var(--card); min-width: 0; }
.doc-card:hover { border-color: var(--ring); }
.doc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.doc-card-line { color: var(--muted-foreground); font-size: 13px; }
.doc-card-from { color: var(--muted-foreground); font-size: 11.5px; font-family: var(--font-mono); }

@media (max-width: 1000px) {
  .docs-main { padding: 24px 24px 56px; }
  .tier-list { grid-template-columns: minmax(0, 1fr); }
}
/* a phone: the sidebar is a Menu above the page, its list closed until asked for */
@media (max-width: 767px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-side { width: auto; border-bottom: 1px solid var(--border); }
  .docs-menu { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; font-size: 13.5px; font-weight: 550; text-align: left; background: none; border: 0; color: var(--foreground); padding: 10px 16px; cursor: pointer; }
  .docs-menu::after { content: "▾"; color: var(--muted-foreground); }
  .docs-side.open .docs-menu::after { content: "▴"; }
  .docs-nav { position: static; max-height: none; padding: 0 16px 14px; display: none; }
  .docs-side.open .docs-nav { display: block; }
  .docs-main { padding: 18px 16px 40px; }
  .docs-main > h1, .title-row h1 { font-size: 25px; }
  .dd-preview { padding: 8px; }
}