/* Editorial Workspace: compact command panels and theme tokens from the operational dashboard. */
.articles-page .article-workspace { max-width:1700px; margin:0 auto; min-width:0; }
.articles-page .app-topbar { flex-shrink:0; }
.articles-page .topbar-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.articles-page .intranet-nav { display:flex; flex-wrap:wrap; align-items:stretch; }
.articles-page .article-heading { margin-bottom:14px; }
.articles-page .article-heading { display:flex; align-items:center; justify-content:space-between; }
.articles-page .workspace-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.articles-page .article-heading h1 { font-size:25px; margin:3px 0 5px; }
.articles-page .article-heading p { margin:0; }
.article-workspace *, .article-dialog * { box-sizing:border-box; }
.article-workspace :is(h1,h2,h3,p), .article-dialog :is(h1,h2,h3,p) { overflow-wrap:anywhere; }
.article-workspace .btn, .article-dialog .btn { min-height:34px; white-space:normal; }
.article-workspace .btn[aria-pressed=true], .article-dialog .btn[aria-pressed=true] { border-color:var(--ix-accent)!important; background:var(--ix-soft)!important; color:var(--ix-text)!important; box-shadow:inset 0 -2px var(--ix-accent); }
.article-workspace :is(input,select,textarea), .article-dialog :is(input,select,textarea) { width:100%; min-width:0; min-height:36px; background:var(--ix-secondary); color:var(--ix-text); border:1px solid var(--ix-line); border-radius:3px; padding:8px 10px; font:inherit; }
.article-workspace textarea,.article-dialog textarea { resize:vertical; }
.article-workspace .article-checkbox { display:flex; align-items:center; gap:9px; }
.article-workspace input[type=checkbox] { width:17px; min-height:17px; accent-color:var(--ix-accent); }
.article-workspace label,.article-dialog label { display:grid; gap:6px; color:var(--ix-text); font-size:13px; }
.article-workspace :is(button,a,input,textarea,select,[contenteditable]):focus-visible,.article-dialog :is(button,a,input,textarea,select,[contenteditable]):focus-visible { outline:3px solid var(--ix-accent); outline-offset:3px; }
.article-workspace .sr-only,.article-dialog .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.article-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:14px; align-items:start; }
.article-collections { background:var(--ix-panel); border:1px solid var(--ix-line); padding:14px; }
.article-panel-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.article-panel-title h2 { font-size:14px; margin:0; display:flex; gap:9px; }
.article-blog-links { display:grid; gap:6px; }
.article-blog-links .btn { text-align:left; justify-content:flex-start; width:100%; overflow-wrap:anywhere; }
.article-blog-about { border-top:1px solid var(--ix-line); margin-top:18px; padding-top:18px; display:grid; gap:9px; color:var(--ix-muted); font-size:12px; }
.article-blog-about p { margin:0; line-height:1.6; }
.article-blog-about strong { color:var(--ix-text); }
.article-collection-mark { font-size:30px; color:var(--ix-accent); }
.article-list-main { min-width:0; }
.article-filters { display:flex; align-items:center; gap:9px; padding:12px; background:var(--ix-panel); border:1px solid var(--ix-line); }
.article-filters .article-search { flex:1; min-width:100px; position:relative; }
.article-search > .bi { position:absolute; left:11px; top:11px; color:var(--ix-muted); }
body.articles-page[data-theme] #app .article-search input { padding-left:32px!important; }
.article-filters select { max-width:200px; }
.article-category-filter { max-width:190px; }
.article-results { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; color:var(--ix-muted); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.article-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--ix-line); background:var(--ix-panel); box-shadow:var(--ix-shadow); transition:border-color .15s,transform .15s; }
.article-card:hover { border-color:var(--ix-accent); transform:translateY(-2px); }
.article-card-cover { display:block; width:100%; height:158px; object-fit:cover; flex-shrink:0; }
.article-cover-empty { display:grid; place-items:center; color:var(--ix-accent); font-size:42px; background:linear-gradient(125deg,var(--ix-soft),var(--ix-secondary)); }
.article-card-content { display:flex; flex-direction:column; flex:1; min-width:0; padding:16px; gap:12px; }
.article-card-meta { display:flex; flex-wrap:wrap; gap:7px; color:var(--ix-muted); font-size:11px; }
.article-card h2 { font-size:18px; line-height:1.35; margin:0; }
.article-title-link { display:block; width:100%; padding:0; border:0; background:transparent; color:var(--ix-text); text-align:left; font:inherit; font-weight:650; cursor:pointer; overflow-wrap:anywhere; }
.article-title-link:hover { color:var(--ix-accent); }
body.articles-page[data-theme] #app .article-title-link { padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; color:var(--ix-text)!important; text-align:left!important; font-size:18px!important; }
.article-card p { margin:0; color:var(--ix-muted); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.article-card footer { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid var(--ix-line); }
.article-card footer small { color:var(--ix-muted); }
.article-tags { display:flex; flex-wrap:wrap; gap:6px; }
.article-tags span { display:inline-block; border:1px solid var(--ix-line); padding:3px 7px; font-size:11px; color:var(--ix-muted); background:var(--ix-secondary); }
.article-status { display:inline-flex; align-items:center; padding:3px 7px; background:var(--ix-soft); color:var(--ix-text); border:1px solid var(--ix-line); font-size:11px; }
.article-status.live { border-color:var(--ix-success); background:color-mix(in srgb,var(--ix-success) 10%,var(--ix-panel)); }
.article-empty { display:grid; gap:12px; justify-items:center; padding:65px 24px; text-align:center; background:var(--ix-panel); border:1px solid var(--ix-line); }
.article-empty > .bi { font-size:40px; color:var(--ix-accent); }
.article-empty h2 { font-size:21px; margin:0; }
.article-empty p { margin:0; color:var(--ix-muted); max-width:460px; }
.article-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin:20px 0; }
.article-message { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 14px; margin-bottom:14px; background:var(--ix-panel); border:1px solid var(--ix-line); border-left:3px solid var(--ix-accent); }
.article-message p { margin:4px 0 0; color:var(--ix-muted); }
.article-message.error { border-left-color:var(--ix-danger); }
.article-editor-status { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 14px; border:1px solid var(--ix-line); background:var(--ix-panel); margin-bottom:14px; color:var(--ix-muted); font-size:12px; }
.article-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:14px; }
.article-compose { min-width:0; padding:20px; background:var(--ix-panel); border:1px solid var(--ix-line); border-top:3px solid var(--ix-accent); display:grid; gap:20px; }
.article-compose .article-title-label input { font-size:26px; font-weight:650; line-height:1.35; padding:12px; }
.article-help { color:var(--ix-muted); font-size:12px; line-height:1.65; font-weight:400; }
.article-inspector { display:grid; gap:14px; }
.article-inspector > section { display:grid; gap:13px; padding:14px; background:var(--ix-panel); border:1px solid var(--ix-line); }
.article-inspector h2 { font-size:13px; margin:0; display:flex; gap:8px; }
.article-inspector p { margin:0; }
.article-cover-preview { width:100%; max-height:180px; object-fit:cover; border:1px solid var(--ix-line); }
.article-cover-placeholder { padding:30px 16px; background:var(--ix-secondary); border:1px dashed var(--ix-line); text-align:center; color:var(--ix-muted); }
.article-lifecycle { display:grid; gap:7px; }
.article-rich-editor { border:1px solid var(--ix-line); min-width:0; }
.article-formatbar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:8px; background:var(--ix-secondary); border-bottom:1px solid var(--ix-line); }
.article-formatbar .btn { padding:6px 10px; }
.article-format-select { max-width:155px; }
.article-writing { min-height:380px; padding:24px; color:var(--ix-text); background:var(--ix-panel); font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.article-writing:empty::before { content:attr(data-placeholder); color:var(--ix-muted); pointer-events:none; }
.article-writing :is(h2,h3) { line-height:1.4; margin:22px 0 10px; }
.article-writing p { margin:0 0 16px; }
.article-writing blockquote,.article-reader-body blockquote { margin:20px 0; padding:10px 18px; border-left:3px solid var(--ix-accent); background:var(--ix-soft); }
.article-writing table,.article-reader-body table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.article-writing :is(th,td),.article-reader-body :is(th,td) { padding:8px; border:1px solid var(--ix-line); }
.article-rich-editor > footer { display:flex; justify-content:space-between; flex-wrap:wrap; padding:8px 12px; gap:8px; border-top:1px solid var(--ix-line); color:var(--ix-muted); font-size:11px; }
.article-reader { max-width:920px; margin:0 auto; background:var(--ix-panel); border:1px solid var(--ix-line); color:var(--ix-text); }
.article-reader > header { padding:42px 48px 28px; }
.article-reader h1 { font-size:clamp(28px,3.5vw,44px); line-height:1.15; margin:14px 0 18px; letter-spacing:-.025em; }
.article-reader-summary { font-size:19px; line-height:1.6; color:var(--ix-muted); }
.article-reader-meta { color:var(--ix-muted); font-size:12px; }
.article-reader-cover { display:block; width:100%; max-height:410px; object-fit:cover; }
/* Shared by the published reader and the editorial preview. */
#app .article-reader > .article-banner, .article-preview-frame .article-reader > .article-banner { position:relative; isolation:isolate; min-height:340px; display:flex; align-items:flex-end; box-sizing:border-box; overflow:hidden; }
.article-banner > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.article-banner::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--article-banner-overlay,.4)); z-index:-1; }
#app .article-banner .article-banner-copy, #app .article-banner .article-banner-copy :is(h1,p,.eyebrow), .article-preview-frame .article-banner .article-banner-copy, .article-preview-frame .article-banner .article-banner-copy :is(h1,p,.eyebrow) { color:var(--article-banner-text,#fff)!important; overflow-wrap:anywhere; }
.article-banner-copy { width:100%; }
.article-reader .article-banner-meta { padding:18px 48px 0; }
@media(max-width:600px) { #app .article-reader > .article-banner,.article-preview-frame .article-reader > .article-banner { min-height:280px; } .article-reader .article-banner-meta { padding:18px 24px 0; } }
.article-reader-body { padding:34px 48px; font-size:17px; line-height:1.85; overflow-wrap:anywhere; }
.article-reader-body p { margin:0 0 20px; }
.article-reader-body :is(h2,h3) { line-height:1.35; margin:30px 0 16px; }
.article-reader > footer { padding:0 48px 30px; }
.article-reader :is(pre,code),.article-writing :is(pre,code) { white-space:pre-wrap; overflow-wrap:anywhere; }
.article-dialog { width:min(720px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:20px; background:var(--ix-panel); color:var(--ix-text); border:1px solid var(--ix-line); border-radius:5px; overflow:auto; box-shadow:0 20px 60px #0005; font:13px/1.5 'Segoe UI',Arial,sans-serif; }
.article-dialog::backdrop { background:#10182088; }
.article-dialog > header { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:18px; }
.article-dialog > header h2 { font-size:20px; margin:0; }
.article-dialog form { display:grid; gap:15px; }
.article-dialog > footer,.article-dialog form > footer { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:18px; }
.article-dialog [role=alert] { color:var(--ix-danger); }
.article-dialog .article-checkbox { display:flex; align-items:flex-start; gap:9px; margin:14px 0; }
.article-dialog input[type=checkbox] { width:17px; min-height:17px; accent-color:var(--ix-accent); }
.article-access-list { max-height:280px; overflow:auto; margin:12px 0; border:1px solid var(--ix-line); }
.article-access-list table { width:100%; border-collapse:collapse; }
.article-access-list :is(th,td) { padding:9px; text-align:left; border-bottom:1px solid var(--ix-line); }
.article-access-list th { position:sticky; top:0; background:var(--ix-secondary); }
.article-access-list td small { display:block; color:var(--ix-muted); }
.article-access-list p { padding:10px; }
.article-dialog [hidden] { display:none!important; }
.article-blog-rights { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:9px; padding:12px; background:var(--ix-secondary); }
.article-starters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.article-starter { display:grid; gap:10px; text-align:left; padding:20px; min-height:160px; border:1px solid var(--ix-line); color:var(--ix-text); background:var(--ix-secondary); cursor:pointer; font:inherit; }
.article-starter:hover { border-color:var(--ix-accent); background:var(--ix-soft); }
.article-starter > .bi { font-size:27px; color:var(--ix-accent); }
.article-starter strong { font-size:16px; }
.article-starter span { color:var(--ix-muted); }
.article-preview-dialog { width:min(1120px,calc(100vw - 28px)); }
.article-preview-tools { display:flex; gap:8px; margin-bottom:15px; }
.article-preview-frame { background:var(--ix-bg); padding:14px; }
.article-preview-frame.mobile { max-width:390px; margin:auto; padding:0; }
.article-preview-frame.mobile .article-reader > header { padding:24px; }
.article-preview-frame.mobile .article-reader-body { padding:24px; }
.article-preview-frame.mobile .article-reader h1 { font-size:29px; }
@media(min-width:1550px) { .article-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1150px) { .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .article-layout { grid-template-columns:200px minmax(0,1fr); } .article-editor-layout { grid-template-columns:minmax(0,1fr) 250px; } }
@media(max-width:820px) { .article-layout,.article-editor-layout { grid-template-columns:1fr; } .article-blog-links { display:flex; overflow-x:auto; padding-bottom:5px; } .article-blog-links .btn { flex-shrink:0; width:auto; max-width:250px; } .article-blog-about { display:none; } .article-collections { padding:12px; } .article-panel-title { margin-bottom:8px; } .article-inspector { grid-template-columns:repeat(2,minmax(0,1fr)); } .article-reader > header { padding:28px; } .article-reader-body { padding:28px; } .article-reader > footer { padding:0 28px 24px; } }
@media(max-width:520px) { .article-grid,.article-inspector,.article-starters { grid-template-columns:1fr; } .article-filters { flex-wrap:wrap; } .article-filters .article-search { flex-basis:100%; } .article-results { align-items:flex-start; } .article-results small { max-width:160px; text-align:right; } .article-compose { padding:12px; } .article-compose .article-title-label input { font-size:21px; } .article-writing { padding:15px; font-size:16px; } .article-dialog { padding:14px; } .article-dialog > header h2 { font-size:18px; } .article-reader > header { padding:24px 20px; } .article-reader-body { padding:24px 20px; } .article-reader h1 { font-size:30px; } .article-reader-summary { font-size:17px; } .article-reader > footer { padding:0 20px 24px; } .article-starter { min-height:120px; padding:15px; } }
@media(prefers-reduced-motion:reduce) { .article-card { transition:none; } .article-card:hover { transform:none; } }