/* Line Chart reference page. */
#line-chart-page { font-size:15px; line-height:1.75; }
#line-chart-page .breadcrumb { margin-bottom:20px; }
.line-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.line-title-row h1 { margin:0; font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.line-title-row h1 span { color:var(--accent-ink); }
.line-lead { max-width:640px; margin:14px 0 16px; font-size:17px; line-height:1.65; color:var(--muted); }

.line-demo { margin:0 0 52px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--bg); scroll-margin-top:calc(var(--header-h) + 24px); }
.line-demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.line-live { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--muted); }
.line-demo select { height:32px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); font-size:13px; color:var(--text); }
.line-demo-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:22px 24px 8px; }
.line-overline { margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.line-demo-heading h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; }
#line-unit { font-size:12px; color:var(--faint); white-space:nowrap; }
/* The Chart Community bundle paints a light canvas, so the stage stays a fixed light surface and is inset in dark mode. */
.line-stage { position:relative; min-height:348px; padding:0 16px 8px; background:#fff; color:#18181b; }
html[data-theme="dark"] .line-stage { margin:8px 16px 14px; border:1px solid var(--line); border-radius:var(--radius-m); }
#line-runtime { width:100%; min-width:0; height:340px; }
#line-runtime sy-chart { display:block; }
#line-load-state { position:absolute; inset:60px 20px auto; margin:0; padding:10px; border-radius:var(--radius-s); background:#f4f4f5; font-size:13px; text-align:center; color:#52525b; }
.line-demo-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:12px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.line-demo-options label { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.line-demo-options input { width:14px; height:14px; margin:0; accent-color:var(--accent); }
#line-reset { margin-left:auto; font-size:12.5px; font-weight:500; color:var(--muted); }
#line-reset:hover { color:var(--accent-ink); }
.line-demo-caption { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 20px 14px; font-size:12.5px; color:var(--faint); }
.line-demo-caption p { margin:0; }
.line-demo-caption a { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--accent-ink); white-space:nowrap; }
.line-data { border-top:1px solid var(--line); background:var(--surface); }
.line-data summary { display:flex; align-items:center; gap:8px; padding:11px 20px; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; list-style:none; }
.line-data summary::-webkit-details-marker { display:none; }
.line-data summary:hover { color:var(--text); }
.line-data summary > svg:last-child { margin-left:auto; transition:transform .15s; }
.line-data[open] summary > svg:last-child { transform:rotate(90deg); }
.line-data .line-table-scroll { margin:0 20px 18px; background:var(--bg); }
.line-table-scroll caption { padding:8px 12px; font-size:12px; text-align:left; color:var(--faint); }

.line-section { margin:0 0 52px; scroll-margin-top:calc(var(--header-h) + 24px); }
#line-chart-page .section-heading { margin-bottom:12px; }
.line-copy { margin:0 0 20px; font-size:15px; line-height:1.75; color:var(--muted); }
.line-use-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.line-use-grid > div { padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
.line-use-grid span { font:600 11px var(--font-mono); letter-spacing:.06em; color:var(--accent-ink); }
.line-use-grid h3 { margin:8px 0 6px; font-size:14.5px; font-weight:600; }
.line-use-grid p { margin:0; font-size:13px; line-height:1.65; color:var(--muted); }
.line-note { margin-top:0; }
.line-code-frame { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); }
.line-code-tabs { display:flex; align-items:center; gap:2px; padding:0 8px; border-bottom:1px solid var(--line); background:var(--surface); }
.line-code-tabs button { position:relative; padding:12px; font-size:13px; font-weight:500; color:var(--muted); }
.line-code-tabs button:hover { color:var(--text); }
.line-code-tabs button[aria-selected="true"] { color:var(--text); font-weight:600; }
.line-code-tabs button[aria-selected="true"]::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--accent); }
.line-code-tabs > span { margin-left:auto; padding:0 8px; font-size:11.5px; color:var(--faint); }
#line-chart-page .code-panel pre { max-height:440px; padding:20px 96px 20px 18px; }
#line-chart-page .line-code-frame .code-panel { border:0; border-radius:0; }
.line-fine { margin:12px 0 0; font-size:12.5px; line-height:1.7; color:var(--faint); }
.line-fine a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.line-install-files { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.line-install-files a { height:36px; font-size:13px; }
.line-api-table th:first-child { width:24%; }
.line-api-table th:nth-child(2) { width:30%; }
.line-api-table small { display:block; margin-top:4px; font:12px var(--font-mono); color:var(--faint); }
.line-api-table td > code { font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.line-api-name { display:inline-flex; align-items:center; gap:6px; border-bottom:1px dashed var(--line-strong); font-size:12.5px; color:var(--accent-ink); text-align:left; cursor:help; }
.line-api-name code { color:inherit!important; }
.line-api-name svg { opacity:.5; }
.line-api-name:hover { border-bottom-color:var(--accent); }
#line-api-tooltip { max-height:calc(100dvh - 24px); overflow:auto; }
.line-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.line-footer a { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.line-footer a:hover { color:var(--accent-ink); }

@media (max-width:800px) { .line-title-row h1 { font-size:28px; } .line-lead { font-size:16px; } }
@media (max-width:620px) {
  .line-demo-toolbar { padding:10px 14px; }
  .line-demo-heading { flex-direction:column; align-items:flex-start; gap:4px; padding:18px 16px 6px; }
  .line-demo-heading h2 { font-size:17px; }
  .line-stage { padding:0 6px 6px; }
  .line-demo-options { gap:10px 14px; padding:12px 14px; }
  .line-demo-caption { flex-direction:column; align-items:flex-start; gap:8px; padding:0 14px 14px; }
  .line-data .line-table-scroll { margin:0 14px 14px; }
  .line-use-grid { grid-template-columns:1fr; }
  .line-code-tabs > span { display:none; }
  #line-chart-page .code-panel pre { padding:48px 14px 16px; }
  .line-footer { flex-direction:column; align-items:flex-start; gap:12px; }
}