/* DCIM software directory, redesigned interface. Builds on events-directory.css (.edx-*), loaded first. */
#dcd-dcim-directory-ui.dcx-on > :not(.edx):not(.preview-lede):not(.dcd-v4-directory-footer){display:none !important}
#dcd-dcim-directory-ui.dcx-on,#dcd-dcim-wordpress-preview:has(.dcx-on){padding:0 !important; margin:0 !important; background:none !important; border:0 !important; box-shadow:none !important; max-width:none !important}
#dcd-dcim-directory-ui.dcx-on .preview-lede{max-width:72ch; font-size:18px; line-height:1.6; color:var(--ink2); margin:0 0 14px}
body.dcd-directory .article-byline{display:none}
/* The page's own stylesheet re-declares its light tokens after the dark ones, so dark mode never applied.
   Point its tokens at the theme's, which follow the system setting. */
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory{
  --dcd-directory-ink:var(--ink); --dcd-directory-text:var(--ink); --dcd-directory-muted:var(--ink2); --dcd-directory-line:var(--line);
  --dcd-directory-surface:var(--surface); --dcd-directory-surface-alt:var(--surface2); --dcd-directory-surface-even:var(--surface);
  --dcd-directory-surface-hover:var(--surface2); --dcd-directory-soft:var(--surface2); --dcd-directory-callout:var(--surface2);
  --dcd-directory-badge:var(--surface2); --dcd-directory-link:var(--blue); --dcd-directory-accent-dark:var(--blue);
  color-scheme:light dark}
/* ...and a few of its rules use literal light-mode colors for text, headings and links */
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory{color:var(--ink)}
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory .preview-shell :is(h1,h2,h3,h4){color:var(--ink)}
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory a:not(.edx-btn){color:var(--blue)}
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory a:not(.edx-btn):hover{color:var(--blue-deep)}
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory :is(.preview-meta,.preview-disclosure){color:var(--ink2)}
#dcd-dcim-wordpress-preview.dcd-v4-preview.dcd-directory .dcd-v4-summary-chip{background:var(--surface2); border-color:var(--line)}

.dcx{margin-top:24px}
.dcx-hero{align-items:center}
.dcx-note{color:var(--ink2); font-size:14px}
.dcx-hint{color:var(--ink2); font-size:13px; line-height:1.4; flex:1 1 320px}
.dcx-more.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.dcx-panel{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px 24px; padding-top:14px; border-top:1px solid var(--line)}
.dcx-group{display:grid; gap:8px; align-content:start}
.dcx-chips{display:flex; flex-wrap:wrap; gap:6px}
.dcx-chips .edx-chip{min-height:30px; font-size:13px; padding:0 11px}

.dcx-name{display:flex; align-items:center; gap:12px; min-width:0}
.dcx-name > span:last-child{display:grid; gap:2px; min-width:0}
.dcx .dcd-v4-logo,.edx-dlg .dcd-v4-logo{flex:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; overflow:hidden; position:relative}
.dcx .dcd-v4-logo img,.edx-dlg .dcd-v4-logo img{width:var(--dcd-v4-logo-scale,80%); height:auto; max-height:80%; object-fit:contain}
.dcx .dcd-v4-logo-fallback,.edx-dlg .dcd-v4-logo-fallback{display:none}
.dcx .edx-tname{font-size:17px; line-height:1.25; text-align:left}

.dcx-boxes{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.dcx-box{grid-template-rows:auto auto 1fr auto}
.dcx-facts{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0; font-size:14px; align-content:start}
.dcx-facts dt{color:var(--ink2); font-weight:500; white-space:nowrap}
.dcx-facts dd{margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.dcx-nd{color:var(--ink2); font-size:13px; font-style:italic}
.dcx-cmp{all:unset; cursor:pointer; box-sizing:border-box; display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap}
.dcx-cmp:hover{border-color:var(--blue)}
.dcx-cmp.on{background:var(--soft); border-color:var(--blue); color:var(--blue)}
.dcx-cmp[disabled]{opacity:.4; cursor:default}

.dcx-table{min-width:1100px}
.dcx-table th[scope="row"]{background:var(--surface); text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink); position:sticky; left:0; z-index:1; min-width:240px; border-top:1px solid var(--line)}
.dcx-table td .edx-badge{margin:0 4px 4px 0}
.dcx-mtabs{margin-bottom:12px}
.dcx-matrix{min-width:760px}
.dcx-state{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; white-space:nowrap}
.dcx-state::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.dcx-state.yes{color:#1a8a72}
.dcx-state.part{color:var(--amber)}
.dcx-state.no{color:var(--ink2); font-weight:500}
.dcx-state.no::before{background:transparent; border:1.5px solid currentColor; width:6px; height:6px}
.dcx-compare{min-width:0; table-layout:fixed}
.dcx-compare thead th{vertical-align:top; text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink); background:var(--surface); border-bottom:1px solid var(--line)}
.dcx-compare thead th:first-child{width:200px}
.dcx-compare td{vertical-align:top; line-height:1.5}
.dcx-compare tbody th[scope="row"]{position:static; min-width:0; font-weight:600; color:var(--ink2); font-size:13px}
.dcx-grp th{background:var(--surface2); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); padding:10px 16px}
.dcx-compare thead th .dcx-rm{display:block; margin-top:8px; font-size:13px; color:var(--blue); font-weight:600}

.dcx-tray{position:sticky; bottom:16px; z-index:20; margin:16px auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 16px;
  background:var(--ink); color:var(--bg); border-radius:12px; box-shadow:0 12px 32px rgba(15,17,21,.3); font-size:14px; max-width:900px}
.dcx-tray[hidden]{display:none}
.dcx-tray > span{flex:1 1 300px}
.dcx-tray .edx-link{color:var(--bg)}
.dcx-tray .edx-btn{min-height:38px}

@media (max-width:640px){
  .dcx-boxes{grid-template-columns:minmax(0,1fr)}
  .dcx-panel{grid-template-columns:minmax(0,1fr)}
  .dcx-hint{display:none}
  /* events-directory.css lets its first row wrap for the date pickers; DCIM's first row is chips like the rest */
  .dcx .edx-frow:first-child{flex-wrap:nowrap; overflow-x:auto; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .dcx-table th[scope="row"]{min-width:180px}
}