/* Skills uses the same compact heading, toolbar and list hierarchy as Connections. */
.app-page-skills { --skills-green:#087b52; --skills-line:#d8dedb; background:#fff; color:#101c17; }
.app-page-skills .app-main { max-width:none; padding:0; }
.app-page-skills .app-breadcrumb { margin-bottom:20px; }
.app-page-skills .app-page-heading { align-items:center; margin:0; padding:24px 32px; border-bottom:1px solid var(--skills-line); }
.app-page-skills .app-page-heading h1 { font-size:28px; color:#0c1d15; }
.app-page-skills .app-page-heading p { color:#5b6262; font-size:14px; }
.heading-actions { display:flex; gap:10px; align-items:center; }
.app-page-skills .button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 18px; border:1px solid #bbc8c1; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; }
.app-page-skills button { background:var(--skills-green); border-color:var(--skills-green); }
.app-page-skills .secondary, .app-page-skills .detail-tab { background:#fff; color:#16382a; border-color:#bdcac3; }
.app-page-skills #status { margin:0; padding:12px 32px 0; font-size:13px; background:transparent; }
.skills-workspace { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:0; margin-top:0; padding:24px 32px; }
.skill-library, .skill-selection { min-width:0; border:0; border-radius:0; background:#fff; overflow:visible; }
.skills-workspace>.skill-library { margin-top:0; }
.skill-library { padding:0; min-height:0; }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.library-heading h2 { font-size:16px; letter-spacing:-.6px; margin:0; }
#library-count { font-size:13px; color:#61706a; }
.skill-library .toolbar { gap:10px; }
.skill-library .toolbar label { flex:1; min-width:110px; }
.skill-library label { font-size:12px; gap:5px; }
.skill-library input, .skill-library select { width:100%; padding:8px 10px; min-width:0; font-size:13px; }
.skill-library form#search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:14px; }
.skill-library form#search .grow { grid-column:1/-1; min-width:0; }
.skill-library form#search .metadata-filters { grid-column:1/-1; }
.metadata-filters summary { font-size:12px; padding:4px 0; }
.skill-library .loaded-type { margin:12px 0; }
.skill-library #coverage { font-size:11px; color:#69736f; line-height:1.5; }
.skill-library button { font-size:12px; min-height:34px; padding:6px 9px; }
.library-columns { display:grid; grid-template-columns:minmax(0,1fr) 56px 76px; padding:14px 7px; border-bottom:1px solid #dfe4e1; font-size:13px; font-weight:600; }
.skill-library .skill-rows { display:block; margin:0 -8px; }
.skill-row { position:relative; border:0; border-bottom:1px solid #e3e7e4; border-radius:0; padding:0; background:#fff; }
.skill-row[data-selected=true] { background:#edf6ef; border-radius:8px; }
.skill-row[data-selected=true]::before { content:''; position:absolute; inset:12px auto 12px 0; width:3px; border-radius:4px; background:#07814f; }
.skill-row .skill-select { display:grid; align-items:center; gap:10px; grid-template-columns:42px minmax(0,1fr) 36px 64px; width:100%; padding:14px 36px 14px 10px; text-align:left; border:0; border-radius:8px; background:transparent; color:#111a16; }
.skill-icon, .skill-symbol { display:grid; place-items:center; flex:none; background:#e3f2e7; color:#087447; border-radius:12px; width:42px; height:42px; font-size:30px; font-weight:400; }
.skill-name { min-width:0; }
.skill-name strong { display:block; font-size:15px; line-height:1.4; }
.skill-name small { display:block; font-size:12px; color:#4a5550; }
.skill-row .skill-select .badge { margin:0; border-radius:20px; padding:3px 8px; justify-self:start; font-size:12px; text-transform:capitalize; }
.skill-row .row-version { font-size:13px; }
.skill-row .row-tools p { font-size:12px; }
.skill-selection { display:none; }
.selection-empty { padding:80px 30px; text-align:center; }
.selection-empty .skill-symbol { margin:0 auto 20px; }
.selection-empty p { max-width:360px; margin:auto; }
.app-page-skills .skill-detail { border:0; border-radius:0; padding:0; margin:0; }
.detail-heading { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; padding:18px 16px 10px; }
.detail-identity { display:flex; gap:16px; flex:1 1 320px; min-width:0; }
.detail-identity .skill-symbol { width:64px; height:64px; font-size:48px; }
.detail-identity :is(h1,h2) { font-size:29px; letter-spacing:-.7px; line-height:1.2; margin:0 0 10px; padding-right:18px; }
.detail-identity p { font-size:14px; line-height:1.4; margin:0; color:#252c28; }
.detail-heading .actions { display:flex; flex-wrap:wrap; gap:8px; }
.detail-heading .actions button { padding:7px 12px; font-size:12px; min-height:35px; }
.close-selection { position:absolute; right:4px; top:0; border:0!important; background:transparent!important; color:#66786b!important; padding:0 4px!important; min-height:24px!important; }
.detail-summary { display:grid; grid-template-columns:1fr 1.4fr .7fr .9fr; padding:12px 24px 14px; }
.detail-summary>div { display:grid; justify-content:start; gap:5px; padding:0 18px; border-right:1px solid #d7ddda; min-width:0; }
.detail-summary>div:first-child { padding-left:0; }.detail-summary>div:last-child { border:0; }
.detail-summary span { font-size:12px; color:#56615a; }
.detail-summary strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.detail-summary>.migration-origin { grid-column:1/-1; min-width:0; margin-top:16px; padding-top:12px; border-top:1px solid currentColor; }
.migration-origin h3 { font-size:15px; margin:0 0 8px; }.migration-origin p { margin:6px 0; }.migration-origin code { display:block; }
.detail-summary .badge { margin:0; padding:3px 12px; border-radius:20px; color:#075f37; background:#dff2df; text-transform:capitalize; }
.detail-tabs { display:flex; border-bottom:1px solid #e0e5e1; padding:0 14px; gap:12px; overflow-x:auto; }
.app-page-skills .detail-tab { border:0; border-bottom:2px solid transparent; padding:12px 16px; border-radius:0; font-size:14px; color:#505b54; font-weight:500; }
.app-page-skills .detail-tab[aria-selected=true] { border-bottom-color:var(--skills-green); color:#075f37; font-weight:700; }
.detail-body { padding:18px 12px 12px; min-width:0; }
.package-files { display:grid; grid-template-columns:minmax(175px,32%) minmax(0,1fr); gap:8px; min-height:465px; }
.package-tree, .package-preview { border:1px solid #e0e5e1; border-radius:10px; min-width:0; overflow:hidden; }
.package-tree { padding:12px 10px; overflow:auto; max-height:560px; }
.package-tree h3 { margin:0; font-size:14px; }.file-count { font-size:10px!important; margin:5px 0 15px; }
.app-page-skills .file-path { display:block; text-align:left; color:#182a20; border:0; background:transparent; border-radius:6px; width:100%; font-size:13px; padding:8px 10px; min-height:32px; white-space:normal; overflow-wrap:anywhere; }
.app-page-skills .file-path[aria-pressed=true] { background:#def0e4; color:#043e28; }
.file-folder { margin:0; }.file-folder summary { font-size:13px; color:#172f22; font-weight:400; padding:9px 4px; }.folder-children { padding-left:18px; }
.preview-heading { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 16px; border-bottom:1px solid #e3e8e4; font-size:14px; min-height:48px; overflow-wrap:anywhere; }
.preview-heading strong { margin-right:auto; }.preview-heading button { font-size:11px; padding:3px 6px; min-height:26px!important; }
.file-kind { font-size:10px; border-radius:6px; padding:3px 9px; background:#f0f2f1; }
.skill-markdown { padding:14px 18px 24px; overflow-wrap:anywhere; }
.skill-markdown h2 { font-size:23px; letter-spacing:-.6px; margin:0 0 10px; }.skill-markdown h3 { font-size:17px; margin:20px 0 8px; }.skill-markdown h4 { font-size:15px; }
.markdown-hash { color:var(--skills-green); }.skill-detail .skill-markdown p { font-size:13px; line-height:1.5; color:#121915; margin:8px 0; }.skill-detail .skill-markdown .markdown-check { display:flex; gap:8px; margin:4px 0; }.markdown-box { color:#57685d; flex:none; }
.skill-detail .skill-markdown pre, .skill-detail pre.source-preview { max-height:440px; margin:0; background:#f8faf8; font-size:12px; }.skill-detail pre.source-preview { border-radius:0; min-height:400px; }
.preview-unavailable { padding:18px; }
.skill-detail .inherited-rules { margin:18px 4px; padding:12px 14px; border:1px solid #d7e1da; border-radius:8px; min-width:0; overflow-wrap:anywhere; }
.skill-detail .inherited-rules h3 { margin:0 0 8px; font-size:15px; }.skill-detail .inherited-rules summary { cursor:pointer; font-size:13px; }.skill-detail .inherited-rules .rule-status { font-size:12px; color:#526158; }.skill-detail .inherited-rules .skill-markdown { padding:0; }.skill-detail .inherited-rules li { margin-top:14px; }
.package-complete, .package-warning { padding:11px 16px; border-radius:8px; background:#eaf5ed; color:#174c31!important; margin:18px 4px 0; }.package-warning { background:#fff6dd; color:#71531e!important; }
.overview-fields { margin:20px 8px; font-size:13px; }.overview-fields dt { color:#66746b; font-weight:500; }.overview-fields dd { color:#15261c; }.overview-fields dd:last-child { font-family:ui-monospace,monospace; font-size:11px; }
.metadata-editor { padding:8px 16px; }.metadata-editor h3 { margin-top:0; }.metadata-editor label { margin:10px 0; }.metadata-editor>button { margin:8px 8px 0 0; }.metadata-error { color:#9c3527!important; }.metadata-error:empty { display:none; }
.app-page-skills .version-panel { border:0; margin:0; padding:6px 12px; }.app-page-skills .version-entry { background:#fff; border:1px solid #e0e7e2; border-radius:8px; }.app-page-skills .version-checksum { font-size:10px; }.version-marker { background:#e3f3e7; padding:2px 8px; border-radius:20px; font-size:11px; }
.app-page-skills #file-editor { border:1px solid var(--skills-line); padding:24px; margin-top:20px; }.app-page-skills .guidance { margin-top:24px; }.app-page-skills .guidance h2 { display:none; }
@media(min-width:1550px) { .detail-heading { flex-wrap:nowrap; }.detail-heading .actions { flex:none; }.detail-identity { flex:1; } }
@media(max-width:1200px) { .skills-workspace { grid-template-columns:minmax(0,1fr); }.package-files { grid-template-columns:155px minmax(0,1fr); }.skill-row .skill-select { grid-template-columns:32px minmax(0,1fr) 34px 65px; gap:7px; }.skill-icon { width:32px; height:36px; }.library-columns { grid-template-columns:minmax(0,1fr) 56px 65px; }.detail-summary { padding:12px; }.detail-summary>div { padding:0 8px; }.detail-identity :is(h1,h2) { font-size:25px; } }
@media(max-width:1000px) { .skills-workspace { grid-template-columns:1fr; }.skill-library { min-height:0; }.skill-library .skill-rows { overflow:visible; }.skill-library .toolbar { display:flex; }.skill-library form#search { grid-template-columns:minmax(0,1fr) auto auto; }.skill-library form#search .grow { grid-column:auto; }.loaded-type { max-width:240px; }.library-heading { margin-bottom:14px; } }
@media(max-width:600px) { .app-page-skills .app-main { padding:0; }.app-page-skills .app-page-heading h1 { font-size:26px; }.heading-actions { width:100%; gap:8px; flex-wrap:wrap; }.heading-actions>* { flex:none; }.skill-library form#search { grid-template-columns:1fr 1fr; }.skill-library form#search .grow { grid-column:1/-1; }.detail-identity { flex-basis:100%; }.detail-identity .skill-symbol { width:48px; height:48px; }.detail-heading .actions { width:100%; }.detail-summary { grid-template-columns:1fr 1fr; row-gap:16px; }.detail-summary>div:nth-child(2) { border:0; }.detail-tab { padding:10px!important; }.detail-tabs { gap:0; }.package-files { grid-template-columns:1fr; }.package-tree { max-height:260px; }.package-preview { min-height:330px; }.skill-detail dl { grid-template-columns:1fr; }.metadata-editor { padding:8px; } }

.app-page-skills .skill-library form#search { grid-template-columns:minmax(0,1fr) auto; margin-top:14px; }
.app-page-skills .skill-library form#search .grow { grid-column:auto; }
.library-filters { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; grid-column:1/-1; margin-top:4px; }
.repository-choice { margin-bottom:16px; max-width:360px; }
.app-page-skills .skill-library label.grow { font-size:0; gap:0; }
.app-page-skills .skill-library label.grow input { font-size:14px; min-height:40px; }
@media(min-width:1550px){.detail-identity { flex-basis:0; }.detail-heading { flex-wrap:wrap; }.detail-heading .actions { position:absolute; right:16px; top:18px; }.detail-identity :is(h1,h2) { margin-right:300px; min-width:0; }.detail-identity p { padding-right:8px; }}
@media(max-width:600px){.library-filters { gap:8px; }.app-page-skills .skill-library form#search .grow { grid-column:auto; }.library-filters label { min-width:0; }}
.app-page-skills .skill-icon, .app-page-skills .skill-symbol { position:relative; font-size:0; }
.skill-icon::before, .skill-symbol::before { content:''; width:17px; height:17px; border:1.7px solid currentColor; border-radius:50%; transform:translate(-2px,-2px); }
.skill-icon::after, .skill-symbol::after { content:''; position:absolute; width:10px; height:1.7px; background:currentColor; transform:rotate(48deg); left:25px; top:29px; }
.detail-identity .skill-symbol::before { width:29px; height:29px; border-width:2px; }.detail-identity .skill-symbol::after { width:16px; height:2px; left:38px; top:45px; }
@media(max-width:600px){.detail-identity .skill-symbol::before { width:22px; height:22px; }.detail-identity .skill-symbol::after { width:12px; left:28px; top:34px; }}

/* The library stays full width; secondary tools open on demand. */
.library-empty { text-align:center; padding:56px 16px; }
.library-empty .skill-symbol { margin:auto; }
.library-empty h3 { margin:16px 0 8px; font-size:20px; }
.library-empty p { max-width:380px; margin:auto; }
.app-page-skills .workspace-dialog #close-detail { display:none; }
.app-page-skills .workspace-dialog .detail-identity :is(h1,h2) { margin-right:0; font-size:25px; }
.app-page-skills .workspace-dialog .detail-heading .actions { position:static; }
.app-page-skills #upload-editor .dialog-intro { margin:0 0 20px; }
.app-page-skills #upload-editor #create-set-section { margin:0 0 24px; padding:0 0 20px; border:0; border-bottom:1px solid var(--app-border); box-shadow:none; }
#upload-editor h3 { margin:0 0 8px; font-size:16px; }
#upload-editor .hint { margin:0 0 16px; font-size:13px; }
#upload-editor #create-set-selected>p { display:none; }
#upload-editor #personal-collection { margin:12px 0; padding:14px; border:1px solid var(--app-border); border-radius:8px; }
#upload-editor #personal-collection button { margin:10px 6px 0 0; }
#upload-editor #save>label { font-weight:600; }
#upload-editor input[type="file"] { width:100%; margin:4px 0; }
#upload-editor :is(#intake-status,#intake-feedback):empty { display:none; }
#upload-editor .dialog-actions { display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:-24px; padding:16px 0; margin-top:20px; border-top:1px solid var(--app-border); background:#fff; }
html[data-theme="dark"] #upload-editor .dialog-actions { background:var(--night-surface); }
@media(max-width:720px) { #upload-editor .dialog-actions { bottom:-16px; } }

.app-shell.app-page-skills .app-main { padding: 0; }
.app-page-skills .heading-actions { flex-wrap: wrap; }
.app-page-skills .metadata-filters { margin-top: 4px; padding: 10px 0; border-bottom: 1px solid var(--skills-line); }
.app-page-skills .metadata-filters summary { font-size: 13px; color: var(--app-muted); cursor: pointer; }
.app-page-skills .metadata-filters .toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; padding-top: 12px; }
.app-page-skills #coverage:empty, .app-page-skills #status:empty { display: none; }
@media(max-width:900px) { .app-page-skills .metadata-filters .toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .app-page-skills .app-page-heading { padding:24px 16px; }.app-page-skills .skills-workspace { padding:20px 16px; }.app-page-skills #status { padding:12px 16px 0; }.repository-choice { max-width:none; }.library-filters { grid-template-columns:1fr; }.app-page-skills .metadata-filters .toolbar { grid-template-columns:1fr; } }

.app-page-skills .skill-library form#search { grid-template-columns:minmax(180px,280px) minmax(0,1fr) auto; align-items:end; margin-top:0; gap:16px; }
.app-page-skills .skill-library .repository-choice { margin:0; max-width:none; }
.app-page-skills .skill-library .library-filters, .app-page-skills .skill-library .metadata-filters { grid-column:1/-1; }
@media(max-width:900px) { .app-page-skills .skill-library form#search { grid-template-columns:minmax(0,1fr) auto; }.app-page-skills .skill-library .repository-choice { grid-column:1/-1; } }
.app-page-skills .active-imports { margin:16px 32px 0; padding:16px 20px; background:var(--app-surface,#fff); border:1px solid var(--app-border,#dce4e3); border-radius:12px; }
.app-page-skills .active-imports p { margin:8px 0; }
@media(max-width:720px) { .app-page-skills .active-imports { margin:12px 16px 0; } }

.skills-secondary-actions { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 32px 8px; padding:0 0 18px; border-bottom:1px solid var(--app-border,#d6ddda); }
.skills-secondary-actions a,.app-page-skills .skills-secondary-actions button { margin:0; padding:4px 0; width:auto; min-height:32px; border:0; background:transparent; color:var(--app-muted,#52675d); text-decoration:none; font-size:13px; font-weight:500; }
.skills-secondary-actions :is(a,button):hover { color:var(--app-ink,#173d2d); text-decoration:underline; }
.skill-row .row-tools { position:static; margin:0; padding:0 12px 10px 56px; width:auto; }
.skill-row .row-tools .actions { display:flex; flex-wrap:wrap; gap:6px 16px; }
.skill-row .row-tools button { margin:0; padding:4px 0; min-height:32px; background:transparent; border:0; font-size:12px; color:var(--app-muted,#52675d); }
.metadata-filters.workspace-section > h3 { font-size:13px; margin:0; color:var(--app-muted); }
@media(max-width:720px) { .skills-secondary-actions { margin-inline:16px; gap:6px 16px; }.skill-row .row-tools { padding-left:12px; } }