/* design.fyroadv.com only — documentation chrome on top of fyro.css. Apps never load this. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--h-topbar) + 16px); }

.ds-section { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); }
.ds-section + .ds-section { border-top: 1px solid hsl(var(--border)); margin-top: var(--space-6); }
.ds-section__head { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.ds-section__sub { color: hsl(var(--muted-foreground)); font-size: 14px; }
.ds-h3 { font-size: 13px; font-weight: 600; margin-top: var(--space-2); }

.ds-hero { display: flex; flex-direction: column; gap: 14px; padding: var(--space-6) 0 var(--space-2); max-width: 760px; }
.ds-hero__lead { font-size: 15px; color: hsl(var(--muted-foreground)); }

/* example: live demo on top, generated markup below */
.ds-example { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card)); overflow: hidden; min-width: 0; }
.ds-example__demo { flex: 1; padding: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* nowrap: a wrapping column flexbox sizes a child grid's height from its 1-column layout */
.ds-example__demo--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ds-example__demo--muted { background: hsl(var(--background)); }
.ds-example__demo--flush { padding: 0; display: block; }
.ds-code { position: relative; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
.ds-code > summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; list-style: none; }
.ds-code > summary::-webkit-details-marker { display: none; }
.ds-code > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.ds-code[open] > summary::before { transform: rotate(90deg); }
.ds-code > summary > span { margin-right: auto; }
.ds-pre { margin: 0; padding: 0 16px 16px; overflow-x: auto; font-size: 12px; line-height: 1.6; white-space: pre; color: hsl(var(--foreground)); tab-size: 2; }

.ds-snippet { position: relative; margin: 0; padding: 14px 16px; padding-right: 72px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--muted)); overflow-x: auto; font-size: 12px; line-height: 1.65; white-space: pre; }
.ds-snippet-wrap { position: relative; min-width: 0; }
.ds-snippet-wrap > .fy-btn { position: absolute; top: 8px; right: 8px; }

/* swatches */
.ds-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ds-token { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); min-width: 0; }
.ds-token__chip { width: 32px; height: 32px; border-radius: 8px; border: 1px solid hsl(var(--foreground) / 0.08); flex: none; }
.ds-token__name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.ds-token__val { font-family: var(--font-mono); font-size: 11px; color: hsl(var(--muted-foreground)); }
.ds-token__use { font-size: 11px; color: hsl(var(--muted-foreground)); }

.ds-cc { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.ds-cc__chip { height: 40px; border-radius: var(--radius-md); }
.ds-cc__name { margin-top: 6px; font-size: 12px; }
.ds-cc__var { font-family: var(--font-mono); font-size: 11px; color: hsl(var(--muted-foreground)); }

.ds-type-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid hsl(var(--border)); }
.ds-type-row:last-child { border-bottom: 0; }
.ds-type-row > code { font-size: 11px; color: hsl(var(--muted-foreground)); }

.ds-space { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ds-space > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: hsl(var(--muted-foreground)); }
.ds-space i { display: block; background: hsl(var(--primary)); border-radius: 2px; }
.ds-boxes { display: flex; gap: 14px; flex-wrap: wrap; }
.ds-boxes > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: hsl(var(--muted-foreground)); }
.ds-boxes i { display: block; width: 64px; height: 44px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }


.ds-rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ds-rules li { margin-bottom: 6px; }
.ds-rules ul { margin: 0; padding-left: 18px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.ds-rules strong { color: hsl(var(--foreground)); font-weight: 600; }

/* mini app shell preview */
.ds-shell { height: 460px; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); }
.ds-shell .fy-app { min-height: 100%; height: 460px; }
.ds-shell .fy-sidebar { position: static; height: 100%; }
.ds-shell .fy-main { overflow: auto; }

@media (max-width: 768px) {
  .ds-type-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ds-example__demo { padding: var(--space-4); }
  .ds-shell .fy-sidebar { display: none; }
  .ds-shell .fy-app { grid-template-columns: minmax(0, 1fr); }
}