@import url('./core-preview-controls.css');
/* Core documentation: guides, the Button reference and the component overview. */
.core-feature-filter { max-width:360px; margin:0 0 24px; }
.core-feature-filter label { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.core-feature-filter input { width:100%; min-width:0; height:34px; padding:0 9px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--text); font:13px var(--font-sans); }
.core-features .button-example-card[hidden] { display:none; }
.core-features .core-feature-unpaired { grid-column:1 / -1; }
.core-features .code-panel { max-height:600px; overflow:auto; }
.core-doc-page, #button-page { font-size:15px; line-height:1.75; }
.core-doc-page h1, #button-page h1 { margin:0 0 14px; font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.core-doc-page h2 { margin:48px 0 14px; font-size:22px; font-weight:600; letter-spacing:-.015em; line-height:1.3; scroll-margin-top:calc(var(--header-h) + 24px); }
.core-doc-page h3 { margin:28px 0 10px; font-size:16px; font-weight:600; }
.core-doc-page p { margin:12px 0; }
.core-page-lead { max-width:640px; margin:0 0 24px!important; font-size:17px; line-height:1.65; color:var(--muted); }
.core-doc-page a:not([class]) { color:var(--accent-ink); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent); text-underline-offset:3px; }
.core-doc-page a:not([class]):hover { text-decoration-color:var(--accent); }
.core-doc-page ul { margin:14px 0; padding:0; list-style:none; }
.core-doc-page li { position:relative; margin:6px 0; padding-left:20px; }
.core-doc-page li::before { content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; }
.core-doc-page strong { font-weight:600; }
.core-guide-section > h2:first-child { margin-top:8px; }
.core-doc-page[data-core-page="introduction"] { container-type:inline-size; }
.core-doc-page[data-core-page="introduction"] > .core-guide-section { margin-top:40px; padding-top:32px; border-top:1px solid var(--line); scroll-margin-top:calc(var(--header-h) + 16px); }
.core-doc-page[data-core-page="introduction"] > .core-guide-section > h2 { display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.core-section-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid var(--accent-line); border-radius:var(--radius-s); background:var(--accent-soft); color:var(--accent-ink); }
.core-heading-anchor { margin-left:8px; font-size:18px; font-weight:400; color:var(--faint); opacity:0; text-decoration:none!important; transition:opacity .12s; }
.core-doc-page h2:hover .core-heading-anchor, .core-heading-anchor:focus-visible { opacity:1; }
.core-intro-actions { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 8px; }

/* Introduction: the Web Components band between the actions and the guide sections. */
.core-wc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:36px 0 0; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg); overflow:hidden; }
.core-wc-intro { padding:26px 28px; }
.core-wc-eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 10px!important; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
.core-wc-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.core-doc-page .core-wc h2 { margin:0 0 10px; font-size:21px; }
.core-wc-intro p:last-child { margin:0; font-size:14.5px; line-height:1.7; color:var(--muted); }
.core-wc code { white-space:nowrap; }
.core-wc-code { display:grid; align-content:center; gap:1px; padding:20px; border-left:1px solid var(--line); background:var(--surface); }
.core-wc-row { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); }
.core-wc-row + .core-wc-row { margin-top:7px; }
.core-wc-row span { font-size:11.5px; font-weight:600; color:var(--faint); }
.core-doc-page .core-wc-row code { overflow:hidden; padding:0; border:0; background:none; font-size:12.5px; white-space:nowrap; text-overflow:ellipsis; color:var(--text); }
.core-doc-page .core-wc-points { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-column:1 / -1; gap:1px; margin:0; border-top:1px solid var(--line); background:var(--line); }
.core-doc-page .core-wc-points li { display:flex; flex-direction:column; gap:6px; margin:0; padding:18px 20px 20px; background:var(--bg); }
.core-doc-page .core-wc-points li::before { content:none; }
.core-wc-points strong { font-size:14px; color:var(--text); }
.core-wc-points span { font-size:13px; line-height:1.65; color:var(--muted); }

.core-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0 8px; }
.core-resource-card { display:flex; flex-direction:column; gap:14px; padding:18px 18px 20px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg); transition:border-color .15s,box-shadow .15s; }
.core-resource-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-m); }
.core-resource-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-s); background:var(--accent-soft); color:var(--accent-ink); }
.core-resource-copy h3 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; font-size:14.5px; font-weight:600; }
.core-resource-copy h3 svg { color:var(--faint); transition:transform .15s,color .15s; }
.core-resource-card:hover h3 svg { color:var(--accent-ink); transform:translateX(2px); }
.core-resource-copy p { margin:0; font-size:13px; line-height:1.65; color:var(--muted); }

/* A compact overview: one family count and four capabilities, separated by a shared grid. */
.core-doc-page .core-feature-list { display:grid; grid-template-columns:.9fr 1.2fr 1.2fr; gap:1px; margin:18px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--line); }
.core-doc-page .core-feature-list > li { display:flex; align-items:flex-start; gap:12px; min-width:0; margin:0; padding:22px; background:var(--bg); }
.core-doc-page .core-feature-list > li::before { content:none; }
.core-feature-icon { display:flex; flex:none; margin-top:2px; color:var(--accent-ink); }
.core-feature-list h3 { margin:0 0 6px; font-size:14.5px; line-height:1.5; }
.core-feature-list p { margin:0; font-size:13px; line-height:1.75; color:var(--muted); }
.core-doc-page .core-feature-list > .core-feature-total { grid-row:span 2; flex-direction:column; justify-content:center; gap:0; padding:24px; background:var(--accent-soft); }
.core-feature-total > .core-feature-icon { margin:0 0 16px; }
.core-feature-total .core-feature-count { font-size:48px; font-weight:700; letter-spacing:-.04em; line-height:1.1; color:var(--accent-ink); }
.core-feature-total h3 { margin:8px 0; }
.core-feature-list code { white-space:nowrap; }

@container (max-width:720px) {
  .core-doc-page .core-feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .core-doc-page .core-feature-list > .core-feature-total { grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; }
  .core-feature-total > .core-feature-icon { display:none; }
  .core-feature-total .core-feature-count { grid-row:span 2; align-self:center; }
  .core-feature-total h3 { margin:0 0 4px; }
  .core-feature-total p { grid-column:2; }
}
@container (max-width:460px) {
  .core-doc-page .core-feature-list { grid-template-columns:1fr; }
  .core-doc-page .core-feature-list > li { padding:18px; }
}

.core-table-scroll { margin:16px 0 24px; }
.core-doc-page .core-code { margin:16px 0 20px; }
.core-inline-preview { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:16px 0; padding:24px; border:1px solid var(--line); border-radius:var(--radius-m); background-color:var(--surface); background-image:radial-gradient(var(--line-strong) .8px,transparent .8px); background-size:16px 16px; }
.core-inline-preview [role="status"] { font-size:13.5px; color:var(--muted); }
.core-text-note { font-size:13.5px; color:var(--faint); }
.core-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:18px 0 20px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--line); }
.core-doc-page .core-summary-grid a { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; padding:16px 18px; background:var(--bg); font-size:14.5px; font-weight:600; line-height:1.4; color:var(--text); text-decoration:none; transition:background .12s; }
.core-summary-grid a:last-child:nth-child(odd) { grid-column:1 / -1; }
.core-summary-grid a small { grid-row:2; font-size:12px; font-weight:400; color:var(--faint); }
.core-summary-grid a svg { grid-column:2; grid-row:1 / 3; color:var(--faint); transition:color .12s,transform .12s; }
.core-summary-grid a:hover { background:var(--hover); }
.core-summary-grid a:hover svg { color:var(--accent-ink); transform:translateX(2px); }
.core-doc-callout { display:block; margin:20px 0; overflow-wrap:anywhere; }
.core-page-pagination { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); }
.core-page-link { display:flex; flex-direction:column; gap:4px; grid-column:2; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); text-align:right; transition:border-color .15s,background .15s; }
.core-page-link.previous { grid-column:1; text-align:left; }
.core-page-link:hover { border-color:var(--line-strong); background:var(--surface); }
.core-page-link > span { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.core-page-link > strong { font-size:14px; font-weight:600; color:var(--text); }

.core-theme-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 8px; }
.core-theme-sample { padding:18px 20px; border:1px solid #e4e4e7; border-radius:var(--radius-m); background:#fff; color:#18181b; }
.core-theme-sample[data-fixed-theme="dark"] { border-color:#2b2b31; background:#151518; color:#ededef; }
.core-theme-sample-heading { display:flex; align-items:center; gap:8px; }
.core-theme-sample-heading h3 { margin:0; font-size:14px; }
.core-theme-sample-heading code { margin-left:auto!important; border:1px solid currentColor!important; background:transparent!important; font-size:11px; color:inherit!important; opacity:.55; }
.core-theme-sample-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-height:90px; padding:20px 0 4px; }

/* Component overview */
.core-catalog-page { --diagram-primary:var(--accent); --diagram-soft:var(--accent-soft); --diagram-line:color-mix(in srgb,var(--accent) 40%,var(--bg)); --diagram-middle:color-mix(in srgb,var(--accent) 24%,var(--bg)); --diagram-on-primary:var(--bg); }
.core-catalog-search { display:flex; align-items:center; gap:12px; height:46px; margin:24px 0 0; padding:0 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); color:var(--faint); transition:border-color .15s,box-shadow .15s; }
.core-catalog-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.core-catalog-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:15px; color:var(--text); }
.core-catalog-search input::placeholder { color:var(--faint); }
.core-catalog-status { margin:10px 0 0!important; font-size:12.5px; color:var(--faint); }
.core-catalog-group { margin:36px 0 0; scroll-margin-top:calc(var(--header-h) + 20px); }
.core-catalog-group h2 { display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:18px; }
.core-catalog-group h2 > span { padding:1px 6px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); font-size:11.5px; font-weight:500; line-height:18px; color:var(--faint); }
.core-component-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.core-component-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg); transition:border-color .15s,box-shadow .15s; }
.core-component-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-m); }
.core-component-card-figure { order:-1; display:flex; align-items:center; justify-content:center; min-height:124px; padding:12px; border-bottom:1px solid var(--line); background:var(--surface); }
.core-component-card-figure svg { width:100%; max-width:160px; height:auto; }
.core-component-card-title { display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:13.5px; line-height:1.4; }
.core-component-card-title strong { font-weight:600; }
.core-component-card .core-component-card-description { margin:0; padding:0 14px 12px; font-size:11.5px; line-height:1.5; color:var(--muted); word-break:keep-all; }
.core-catalog-empty { padding:48px 0; text-align:center; color:var(--faint); }

/* Button reference (the link row, live dot and API tooltip are shared in styles.css) */
#button-page { container-type:inline-size; }
.core-component-page { container-type:inline-size; }
.core-component-page .lead { margin-bottom:16px; }
.core-component-page .doc-section { margin-top:48px; }
/* Form examples retain their authored order and flow into complete card pairs. */
.core-demo-frame { display:block; width:100%; border:0; background:var(--bg); }
.core-demo-event { min-height:40px; padding:10px 20px; border-top:1px solid var(--line); font:12px/1.6 var(--font-mono); color:var(--muted); overflow-wrap:anywhere; }
.core-component-guidance p { margin:0 0 12px; color:var(--muted); line-height:1.8; }
.core-component-guidance strong, #button-page #when-to-use strong { color:var(--text); font-weight:700; }
.core-component-guidance code { overflow-wrap:anywhere; }
.core-component-guidance { display:grid; gap:18px; }
.core-component-guidance p { margin:0; }
.core-component-guidance :is(h3,dt) { margin:0 0 6px; color:var(--text); font-size:14px; font-weight:600; line-height:1.6; }
.core-component-guidance :is(p,dd) { font-size:13.5px; line-height:1.75; }
.core-component-guidance .usage-guide-intro { font-size:14px; line-height:1.8; }
.usage-guide-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.usage-guide-cards-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.usage-guide-card { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
.usage-guide-settings { margin:0; border-top:1px solid var(--line); }
.usage-guide-settings > div { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,4fr); gap:12px 24px; padding:14px 0; border-bottom:1px solid var(--line); }
.usage-guide-settings dt { margin:0; }
.usage-guide-settings dd { min-width:0; margin:0; color:var(--muted); }
.usage-guide-steps { display:grid; gap:16px; margin:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius-m); list-style:none; }
.usage-guide-steps li { display:flex; align-items:flex-start; gap:14px; }
.usage-guide-steps li > div { min-width:0; }
.usage-guide-step-number { display:grid; place-items:center; flex:none; width:26px; height:26px; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:600; line-height:1; }
.usage-guide-priority { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
.usage-guide-priority ol { display:flex; flex-wrap:wrap; gap:8px 12px; margin:8px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--muted); }
.usage-guide-priority li + li::before { content:'→'; margin-right:12px; color:var(--faint); }
.usage-guide-note { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-s); background:var(--surface); }
.usage-guide-note > svg { flex:none; margin-top:3px; color:var(--accent); }
.usage-guide-note > div { min-width:0; }
.core-pro-notice { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 16px; margin:0 0 24px; padding:18px 20px; border:1px solid var(--accent-line); border-left:4px solid var(--accent); border-radius:var(--radius-m); background:var(--accent-soft); }
.core-pro-notice-badge { flex:none; margin-top:2px; padding:3px 8px; border-radius:5px; background:var(--accent-ink); color:var(--bg); font-size:11px; line-height:1.5; font-weight:800; letter-spacing:.04em; }
.core-pro-notice > div { flex:1 1 240px; min-width:0; }
.core-pro-notice strong { color:var(--accent-ink); font-size:16px; line-height:1.6; font-weight:750; }
.core-pro-notice p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.core-pro-notice b { color:var(--text); font-weight:650; }
.core-tag-api + .core-tag-api { margin-top:40px; }
.core-tag-api h4 { margin:24px 0 10px; font-size:14px; }
.core-api-note { margin:6px 0 0; font-size:12px; color:var(--faint); }
.core-component-page .api-table code { white-space:normal; overflow-wrap:anywhere; }
.core-component-page .api-table td:first-child { min-width:140px; }

#button-page .lead { margin-bottom:16px; }
.button-intro-preview { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--bg); scroll-margin-top:calc(var(--header-h) + 24px); }
.button-preview-scene, .button-example-stage { background-color:var(--bg); background-image:radial-gradient(var(--line-strong) .8px,transparent .8px); background-size:16px 16px; }
.button-preview-scene { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; min-height:230px; padding:28px 24px; }
.button-preview-target { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; min-height:40px; }
.button-preview-target sy-button { max-width:100%; }
.button-preview-target sy-button button { max-width:100%; overflow-wrap:anywhere; }
.button-intro-status { margin:0; }

.button-use-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0 16px; }
.button-use-grid > div { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
.button-use-grid h3 { margin:0 0 6px; font-size:14px; font-weight:600; }
.button-use-grid p { margin:0; font-size:13px; line-height:1.65; color:var(--muted); }
.button-use-dot { display:none; }
.button-guidance-note { margin:0; }
#button-page .doc-section { margin-top:48px; }
/* Share description, preview and code rows across each pair of examples. */
.button-examples-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
.button-example-card { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; min-width:0; scroll-margin-top:calc(var(--header-h) + 24px); }
.button-example-description { min-width:0; margin-bottom:14px; }
.button-example-description h3 { margin:0 0 6px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.button-example-description p { margin:0; font-size:14px; line-height:1.7; color:var(--muted); }
.button-example-frame { display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg); }
.button-example-frame > .core-demo-frame { height:100%; min-height:var(--demo-height); }
.button-example-frame > .button-example-code { align-self:start; min-width:0; }
.button-example-stage { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; min-height:140px; padding:32px 24px; }
.button-example-code { border-top:1px solid var(--line); }
.button-example-code > summary { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface); font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; list-style:none; }
.button-example-code > summary::-webkit-details-marker { display:none; }
.button-example-code > summary:hover { color:var(--text); }
.button-example-code > summary svg:last-child { margin-left:auto; transition:transform .15s; }
.button-example-code[open] > summary svg:last-child { transform:rotate(90deg); }
.button-example-code .code-panel { border:0; border-top:1px solid var(--line); border-radius:0; }
.api-name { display:inline-flex; align-items:center; padding:0; border-bottom:1px dashed var(--line-strong); font:12.5px var(--font-mono); color:var(--accent-ink); text-align:left; cursor:help; }
.api-name code { padding:0; border:0; background:none; font:inherit; color:inherit; }
.api-name:hover { border-bottom-color:var(--accent); }

@container (max-width:640px) {
  .usage-guide-cards { grid-template-columns:1fr; }
  .button-examples-grid { grid-template-columns:1fr; }
  .button-preview-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .core-component-page .button-preview-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@container (max-width:420px) {
  .usage-guide-settings > div { grid-template-columns:1fr; gap:4px; }
  .usage-guide-steps { padding:14px; }
  .usage-guide-steps li { gap:10px; }
}

@media (max-width:1240px) { .core-component-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:800px) {
  .core-doc-page h1, #button-page h1 { font-size:28px; }
  .core-doc-page h2 { margin-top:40px; font-size:21px; }
  .core-page-lead { font-size:16px; }
  .core-resource-grid { gap:10px; }
  .core-resource-card { padding:14px; gap:10px; }
  .button-use-grid { grid-template-columns:1fr; }
  .core-wc { grid-template-columns:1fr; }
  .core-wc-code { border-left:0; border-top:1px solid var(--line); }
  .core-doc-page .core-wc-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .core-doc-page[data-core-page="introduction"] > .core-guide-section { margin-top:32px; padding-top:24px; }
  .core-resource-grid, .core-theme-comparison, .core-summary-grid, .core-doc-page .core-wc-points { grid-template-columns:1fr; }
  .core-wc-intro { padding:20px; }
  .core-wc-code { padding:14px; }
  .core-wc-row { grid-template-columns:1fr; gap:2px; }
  .core-doc-page .core-wc-row code { overflow-x:auto; font-size:11px; text-overflow:clip; scrollbar-width:none; }
  .core-summary-grid a:last-child:nth-child(odd) { grid-column:auto; }
  .core-component-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .core-component-card-figure { min-height:104px; }
  .core-component-card-title { padding:10px 12px; font-size:12.5px; }
  .core-page-pagination { grid-template-columns:1fr; }
  .core-page-link, .core-page-link.previous { grid-column:auto; }
  .core-intro-actions > a { flex:1 1 auto; }
  .button-preview-scene { min-height:144px; padding:24px 16px; }
  .button-preview-controls { padding:14px 16px; }
  .button-example-stage { padding:24px 16px; }
}