/* Create Chart Set owns its typography; other ARS surfaces retain their fonts. */
@font-face { font-family:"Century Gothic Create"; src:url("../fonts/CenturyGothicPaneuropeanRegular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Century Gothic Create"; src:url("../fonts/CenturyGothicPaneuropeanSemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Century Gothic Create"; src:url("../fonts/CenturyGothicPaneuropeanBold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
/* Create Chart Set inline-template workspace: sole owner for this revision. */
body[data-view="library"] .chart-library-page.is-create-set .chart-library-detail { padding: 0; }
.create-set-inline { --create-gap:32px; --create-left:424px; height:calc(100dvh - 72px); min-height:620px; box-sizing:border-box; padding:24px 56px; display:grid; grid-template-rows:40px minmax(44px,max-content) minmax(0,1fr) 56px; gap:24px; color:#202020; background:#fafafa; font:400 14px/20px "Century Gothic Create", "Century Gothic", sans-serif; overflow:visible; }
.create-set-inline * { box-sizing:border-box; }
.create-set-inline button,.create-set-inline input,.create-set-inline textarea,.create-set-inline select { font:inherit; }
.create-set-inline button,.create-set-inline strong,.create-set-inline h2,.create-set-inline h3,.create-set-inline h4 { font-weight:600; }
/* The shell has a universal square-corner !important rule. Override only this owner. */
.create-set-inline :is(button,input,.inline-template-card,.inline-preview-surface,.inline-block,.inline-block-field,.inline-empty,.inline-create-context,.inline-confirm-backdrop>section,.create-set-delete-dialog,.create-set-template-popover) { border-radius:8px !important; }
.create-set-inline .inline-check { border-radius:6px !important; }
.create-set-inline button { appearance:none; width:auto; min-height:40px; padding:8px 16px; background:white; color:#202020; border:1px solid #e2e2e2; border-radius:8px; cursor:pointer; box-shadow:none; }
.create-set-inline button:hover { background:#f5f5f5; }
.create-set-inline button:disabled { color:#777; background:#eee; cursor:default; }
.create-set-inline .is-primary { color:white; background:#202020; border-color:#202020; }
.create-set-inline .is-primary:hover { background:#383838; }
body[data-view="library"] .create-set-inline :is(button,input,summary,[tabindex]):focus-visible { outline:2px solid #202020; outline-offset:-2px; }
.create-set-inline input { color:#202020; background:white; border:1px solid #e2e2e2; border-radius:8px; height:44px; width:100%; min-width:0; padding:10px 12px; font-weight:400; }
.create-set-inline h2,.create-set-inline h3,.create-set-inline h4,.create-set-inline p { margin:0; }
.create-set-inline h2 { font-size:30px; line-height:40px; }
.create-set-inline h3,.create-set-inline h4 { font-size:20px; line-height:28px; }
.create-set-inline small { color:#666; font-size:12px; line-height:18px; }
.inline-create-heading,.inline-panel-heading,.inline-create-footer,.inline-data>header { display:flex; align-items:center; gap:16px; min-width:0; }
.inline-create-heading>small { margin-left:auto; }
.inline-set-name { display:flex; align-items:center; gap:16px; width:min(540px,100%); font-size:14px; font-weight:600; }
.inline-set-name>span { flex:none; }
.inline-create-context { display:flex; gap:24px; align-items:center; padding:12px; background:#f5f5f5; min-width:0; font-size:14px; }
.inline-create-context>strong { max-width:35%; overflow-wrap:anywhere; font-size:14px; }
.inline-create-context>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.inline-create-context>small:last-child { margin-left:auto; flex:none; }
.inline-create-grid { display:grid; grid-template-columns:minmax(0,var(--create-left)) minmax(0,1fr); column-gap:var(--create-gap); row-gap:16px; grid-template-rows:minmax(44px,max-content) minmax(0,1fr); min-height:0; }
.inline-create-grid.is-editing { --create-left:540px; }
.inline-left,.inline-right { display:grid; grid-row:1 / 3; grid-template-rows:subgrid; gap:16px; min-width:0; min-height:0; }
.inline-panel-heading { flex-wrap:wrap; }
.inline-panel-heading h3 { margin-right:auto; overflow-wrap:anywhere; }
.inline-panel-heading>button { flex:none; font-size:14px; }
.inline-panel-heading>small { flex:none; }
.inline-panel-content { min-height:0; min-width:0; }
.inline-selection-scroll,.inline-editor-scroll { overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.inline-selection-scroll { display:flex; flex-direction:column; gap:24px; }
.inline-template-list { display:flex; flex-direction:column; gap:8px; }
.inline-template-card { position:relative; background:#fff; border:1px solid #e2e2e2; border-radius:8px; min-height:76px; flex:none; }
.inline-template-card.is-selected { border-color:#202020; }
.inline-template-card>button { display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; border:0; padding:16px 44px 16px 16px; min-height:74px; background:transparent; }
.inline-template-card strong { font-size:14px; overflow-wrap:anywhere; }
.inline-template-card>button>span { position:absolute; right:16px; top:18px; }
.inline-template-card .create-set-template-menu { position:absolute; right:12px; bottom:8px; }
.inline-template-card .create-set-template-menu summary { cursor:pointer; list-style:none; width:24px; text-align:center; }
.inline-data { display:flex; flex-direction:column; gap:12px; }
.inline-data>header small { margin-left:auto; }
.inline-dataset-list { display:flex; flex-direction:column; gap:8px; }
.create-set-inline .inline-dataset { display:flex; align-items:center; gap:12px; width:100%; min-height:80px; padding:16px; text-align:left; }
.inline-dataset.is-selected { border-color:#202020; }
.inline-dataset>span:last-child { display:flex; flex-direction:column; min-width:0; gap:4px; overflow-wrap:anywhere; }
.inline-dataset strong { font-size:14px; }
.inline-check { flex:none; display:grid; place-items:center; width:20px; height:20px; border:1px solid #e2e2e2; border-radius:6px; font-size:12px; }
.is-selected .inline-check { color:#fff; background:#202020; border-color:#202020; }
.inline-preview-surface { display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:24px; padding:24px; background:#fff; border:1px solid #e2e2e2; border-radius:8px; min-height:0; overflow-y:auto; overflow-x:hidden; }
.inline-preview-surface>h4 { text-align:center; max-width:100%; overflow-wrap:anywhere; flex:none; }
.inline-preview-scroll { width:100%; overflow-x:auto; overflow-y:hidden; flex:none; }
.inline-preview-row { display:flex; gap:16px; min-width:100%; width:max-content; }
.inline-preview-block { flex:1 0 200px; width:200px; max-width:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:244px; }
.inline-preview-block>strong { font-size:var(--inline-title-size,14px); line-height:1.4; min-height:20px; max-width:100%; overflow-wrap:anywhere; text-align:center; }
/* Original Figma exports, with the same aspect ratio in every structural slot. */
.inline-preview-art { flex:none; width:calc(100% - 12px); max-width:252px; aspect-ratio:252 / 171.818; background-repeat:no-repeat; background-position:center; background-size:contain; }
.inline-preview-art-area { background-image:url("../assets/create-set-inline/area.svg"); }
.inline-preview-art-line { background-image:url("../assets/create-set-inline/line.svg"); }
.inline-preview-art-column { background-image:url("../assets/create-set-inline/column.svg"); }
.inline-preview-empty { text-align:center; padding:24px; color:#666; margin:auto; }
.inline-structure-note { flex:none; text-align:center; }
.inline-create-footer { border-top:1px solid #e2e2e2; padding-top:15px; }
.inline-create-footer>p,.inline-create-footer>.create-set-readiness { margin-left:auto; text-align:right; font-size:12px; line-height:18px; color:#666; }
.inline-create-footer>.create-set-readiness { display:block; }
.inline-create-footer>button { flex:none; }
.inline-create-footer>button:first-child { background:transparent; border-color:transparent; }
.inline-create-footer .is-error,.create-set-inline [role="alert"] { color:#a12020; }
.inline-editor-scroll { display:flex; flex-direction:column; gap:16px; padding-right:0; }
.inline-template-name { display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; flex:none; }
.inline-add-row { display:flex; gap:8px; align-items:center; flex:none; }
.inline-add-row>strong { margin-right:auto; font-size:14px; white-space:nowrap; }
.inline-add-row>button { padding:8px 12px; font-size:14px; white-space:nowrap; }
.inline-block-list { display:flex; flex-direction:column; gap:8px; }
.inline-block { border:1px solid #e2e2e2; border-radius:8px; background:#fff; padding:8px; min-height:80px; }
.inline-block>header { display:flex; align-items:center; gap:8px; height:20px; margin-bottom:8px; }
.inline-block>header strong { margin-right:auto; font-size:14px; }
.inline-block>header small { width:24px; }
.inline-block [data-inline-drag] { cursor:grab; color:#666; }
.create-set-inline .inline-block>header button { padding:0; width:20px; min-height:20px; border:0; background:none; border-radius:3px; }
.inline-block-field { display:flex; align-items:center; border:1px solid #e2e2e2; border-radius:8px; height:36px; }
.inline-block-field input { height:34px; border:0; padding:8px; font-size:14px; }
.create-set-inline .inline-block-field button { border:0; min-height:32px; padding:4px 8px; font-size:12px; color:#666; white-space:nowrap; }
.inline-empty { padding:24px 16px; border:1px dashed #e2e2e2; border-radius:8px; font-size:14px; line-height:22px; }
.inline-empty>p { margin:8px 0; }
.inline-confirm-backdrop { position:fixed; inset:0; background:#0004; z-index:600; display:grid; place-items:center; padding:24px; }
.inline-confirm-backdrop>section { background:white; border:1px solid #e2e2e2; border-radius:8px; padding:24px; width:480px; max-width:100%; box-shadow:0 12px 40px #0002; }
.inline-confirm-backdrop section>p { margin-top:16px; font-size:14px; }
.inline-confirm-backdrop section>div:last-child { display:flex; justify-content:flex-end; gap:12px; margin-top:64px; }
.inline-confirm-backdrop .inline-title-dialog { width:720px; max-height:calc(100dvh - 48px); display:flex; flex-direction:column; gap:16px; }
.inline-title-dialog>header,.inline-title-dialog>footer { display:flex; align-items:center; gap:12px; flex:none; }
.inline-title-dialog>header h3 { margin-right:auto; }
.inline-title-dialog>footer { justify-content:flex-end; }
.inline-title-scroll { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:16px; }
.inline-title-scroll label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
body[data-view="library"] .create-set-inline .inline-title-preview { font-weight:700; line-height:1.3; overflow-wrap:anywhere; padding:16px; min-height:72px; }
.inline-title-styles { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.inline-title-styles input { width:90px; }
.inline-title-dialog .title-quick-fill { display:block; }
.inline-title-dialog .title-quick-popover { position:static; margin-top:12px; }
@media(max-width:1200px) { .create-set-inline { padding-inline:32px; --create-left:360px; --create-gap:24px; } .inline-create-grid.is-editing { --create-left:432px; } .inline-preview-block { flex-basis:200px; } }
@media(max-width:800px) { .create-set-inline { padding:20px; height:auto; min-height:calc(100dvh - 72px); grid-template-rows:auto auto auto auto; } .inline-create-grid,.inline-create-grid.is-editing { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; row-gap:24px; } .inline-left,.inline-right { grid-row:auto; grid-template-rows:minmax(44px,auto) minmax(0,1fr); } .inline-panel-content { max-height:520px; } .inline-preview-surface { min-height:360px; } .inline-create-context { gap:12px; flex-wrap:wrap; } .inline-create-context>span { white-space:normal; } .inline-panel-heading { flex-wrap:wrap; } .inline-create-footer { flex-wrap:wrap; } .inline-create-footer>p,.inline-create-footer>.create-set-readiness { flex:1; } }
/* Reset only inherited Create R6 container spacing; other Library views retain their owners. */
body[data-view="library"][data-chart-library-mode="create"] .view-panel[data-view="library"].active { padding:0 !important; overflow:auto; }
body[data-view="library"] .chart-library-page.is-create-set-open { width:100%; max-width:none; margin:0; padding:0; }
body[data-view="library"] .chart-library-page.is-create-set-open #chartLibraryDetail { padding:0; }
.create-set-inline .create-set-delete-dialog { width:min(480px,calc(100vw - 48px)); padding:24px; border:1px solid #e2e2e2; border-radius:8px; }
.create-set-inline .create-set-delete-dialog::backdrop { background:#0004; }
.create-set-inline .create-set-delete-dialog>div { display:flex; justify-content:flex-end; gap:12px; }
.create-set-inline .create-set-template-popover { position:fixed; inset:auto; margin:0; max-height:calc(100dvh - 16px); max-width:calc(100vw - 16px); overflow:auto; min-width:160px; padding:8px; border:1px solid #e2e2e2; border-radius:8px; background:white; }
.create-set-inline .create-set-template-popover button { display:block; width:100%; text-align:left; border:0; }

/* Own the Create surface, including legacy class aliases on its root. */
body[data-view="library"] .chart-library-create-set.create-set-inline { padding:24px 56px; background:#fafafa; }
@media(max-width:1200px) { body[data-view="library"] .chart-library-create-set.create-set-inline { padding:24px 32px; } }
@media(max-width:800px) { body[data-view="library"] .chart-library-create-set.create-set-inline { padding:24px; } }

@media(min-width:801px) and (max-height:780px) { .inline-preview-surface { gap:16px; } }