/* Gebundeld door scripts/bundle-public.mjs, in de volgorde van index.html. */
/* ── css/base.css ── */
[hidden] { display: none !important; }
html.dexes-booting #homePage { display: none !important; }
html.dexes-booting .logo .logo-img { visibility: hidden; }
:root {
--primary: #5C3FA5;
--primary-light: #7B5FCA;
--primary-dark: #3D2875;
--primary-pale: #EDE8F9;
--primary-pale2: #F5F2FD;
--accent: #E05210;
--dark: #140F2A;
--dark2: #2D2450;
--off-white: #F8F6FD;
--gray: #53616F;
--gray-mid: #5F6875;
--gray-light: #E8E4F0;
--gray-pale: #F4F2F8;
--white: #FFFFFF;
--green: #2E7D32;
--green-pale: #E8F5E9;
--amber: #A85000;
--amber-pale: #FFF3E0;
--red: #C62828;
--red-pale: #FCE4EC;
--font-head: 'Sora', sans-serif;
--font-body: 'DM Sans', sans-serif;
--radius: 16px;
--radius-sm: 8px;
--radius-xs: 5px;
--breadcrumb-bg: #E5EAF1;
--pub-group-bg: var(--fastlane-3, #DAEBFB);
--blue: #3B82E6;
--blue-pale: #EDF3FC;
--shadow: 0 4px 24px rgba(92,63,165,.08);
--shadow-md: 0 8px 40px rgba(92,63,165,.12);
--shadow-hov: 0 16px 48px rgba(92,63,165,.18);
--tr: .28s cubic-bezier(.4,0,.2,1);
--border-control: #807B8A;
--access-public: #2E7D32;
--access-restricted: #A1500C;
--access-private: #D60D2B;
--ds-text: #111827;
--ds-text-muted: #53616F;
--ds-border: #E5E7EB;
--ds-border-light: #F3F4F6;
--ds-card-bg: #FFFFFF;
--ds-bg: #F8F9FB;
--ds-subtle-bg: #F9FAFB;
--ds-table-head: #F9FAFB;
--ds-code-bg: #F3F4F6;
--ds-stub-bg: #F9FAFB;
--ds-success-text: #166534;
--ds-success-bg: #F0FDF4;
--ds-success-border: #BBF7D0;
--ds-warn-text: #92400E;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body); color: var(--dark); line-height: 1.65; min-height: 100vh;
background-color: var(--off-white);
background-image: url('images/DexesWaveGray.svg');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-body); cursor: pointer; }
.dx-tip {
position: fixed;
z-index: 4000;
max-width: 320px;
padding: 8px 11px;
border-radius: var(--radius-sm, 8px);
background: var(--dark2, #140F2A);
color: #fff;
font-family: var(--font-body);
font-size: .78rem;
line-height: 1.45;
box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
pointer-events: none;
white-space: normal;
}
.dx-tip[hidden] { display: none; }
/* ── css/warm-tokens.css ── */
:root {
--c-navy-900: #071F33; --c-navy-700: #0B3557; --c-navy-500: #12507F;
--c-blue-600: #15568F; --c-blue-050: #E8F1FA; --c-blue-100: #CBDFF1;
--c-yellow-500: #FFB907; --c-yellow-ink: #3D2C00;
--c-green-600: #1F7A3C; --c-green-050: #E4F3E7;
--c-green-700: #17612F;
--c-amber-700: #AD5500; --c-amber-050: #FCF0DE;
--c-amber-mark: #D9741A;
--c-red-600: #B3352C; --c-red-050: #FBEAE8;
--c-paper: #FAF8F4; --c-band: #EFEBE4; --c-band-soft: #F5F1EA;
--c-raised: #FBF9F5; --c-work: #E6DFD0; --c-work-line: #D2C7AF;
--c-mark: #E4DBC8;
--c-line: #E5DFD5; --c-line-strong: #D8D0C2; --c-line-control: #8B7E64;
--c-ink: #1D2B36; --c-ink-muted: #5E6C75; --c-ink-faint: #8E9AA1;
--c-ink-on-work: #4B5860;
--dx-surface-page: var(--c-paper);
--dx-surface-page-mark: var(--c-mark);
--dx-surface-band: var(--c-band);
--dx-surface-band-soft: var(--c-band-soft);
--dx-surface-card: #FFFFFF;
--dx-surface-raised: var(--c-raised);
--dx-surface-work: var(--c-work);
--dx-surface-work-border: var(--c-work-line);
--dx-border: var(--c-line);
--dx-border-strong: var(--c-line-strong);
--dx-divider: var(--c-band);
--dx-line-control: var(--c-line-control);
--dx-text: var(--c-ink);
--dx-text-muted: var(--c-ink-muted);
--dx-text-faint: var(--c-ink-faint);
--dx-text-on-work: var(--c-ink-on-work);
--dx-text-on-dark: #FFFFFF;
--dx-text-on-dark-muted: #BDD1E0;
--dx-brand-deep: var(--c-navy-900);
--dx-brand: var(--c-navy-700);
--dx-brand-light: var(--c-navy-500);
--dx-interactive: var(--c-blue-600);
--dx-interactive-soft: var(--c-blue-050);
--dx-interactive-border: var(--c-blue-100);
--dx-accent: var(--c-yellow-500);
--dx-accent-ink: var(--c-yellow-ink);
--dx-state-open-fg: var(--c-green-600); --dx-state-open-bg: var(--c-green-050);
--dx-state-request-fg: var(--c-amber-700); --dx-state-request-bg: var(--c-amber-050);
--dx-state-request-mark: var(--c-amber-mark);
--dx-state-closed-fg: var(--c-red-600); --dx-state-closed-bg: var(--c-red-050);
--dx-state-open-deep: var(--c-green-700);
--dx-shadow-card: 0 1px 3px rgba(7, 31, 51, .06);
--dx-shadow-menu: 0 16px 38px rgba(7, 31, 51, .16);
--dx-focus-ring: var(--c-blue-600);
}
/* ── css/header.css ── */
.site-header {
background: var(--white);
border-bottom: 1px solid var(--gray-light);
position: sticky; top: 0; z-index: 200;
box-shadow: 0 2px 12px rgba(92,63,165,.06);
}
.header-inner {
max-width: 1280px; margin: 0 auto; padding: 0 24px;
height: 60px; display: flex; align-items: center; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
width: 41px; height: 41px; background: var(--primary); border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-mark svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-text { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--dark); letter-spacing: -0.02em; }
.logo-text em { color: var(--primary); font-style: normal; }
.tenant-switcher {
position: relative;
display: flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.tenant-switcher[hidden] { display: none; }
.tenant-switcher-slash {
color: var(--gray-mid);
font-size: 1.6rem; font-weight: 300;
line-height: 1; user-select: none;
margin: 0 2px;
}
.tenant-switcher-btn {
display: flex; align-items: center; gap: 8px;
background: transparent; border: 1.5px solid transparent;
border-radius: var(--radius-sm);
padding: 4px 6px;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.tenant-switcher-btn:hover,
.tenant-switcher-btn[aria-expanded="true"] {
background: var(--primary-pale);
border-color: var(--gray-light);
}
.tenant-switcher-home {
display: inline-flex; align-items: center;
padding: 2px 4px;
border-radius: var(--radius-sm);
text-decoration: none;
transition: background var(--tr);
}
.tenant-switcher-home[hidden] { display: none; }
.tenant-switcher-home:hover {
background: var(--primary-pale);
}
.tenant-switcher-logo,
.tenant-switcher-active-logo {
height: 26px; width: auto; max-width: 130px;
display: block;
object-fit: contain;
}
.tenant-switcher-active-logo[hidden] { display: none; }
.tenant-switcher-slash-inner {
font-size: 1.35rem;
margin: 0;
}
.tenant-switcher-slash-inner[hidden] { display: none; }
.tenant-switcher-badge {
display: inline-flex; align-items: center;
background: var(--primary-pale);
color: var(--primary-dark);
font-size: 0.7rem; font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
text-transform: uppercase; letter-spacing: 0.05em;
white-space: nowrap;
}
.tenant-switcher-badge[hidden] { display: none; }
.tenant-switcher-chevron {
color: var(--gray);
transition: transform var(--tr);
flex-shrink: 0;
}
.tenant-switcher-chevron[hidden] { display: none; }
.tenant-switcher-btn[aria-expanded="true"] .tenant-switcher-chevron {
transform: rotate(180deg);
}
.tenant-switcher.has-no-daughters .tenant-switcher-btn {
cursor: default;
border-color: transparent;
background: transparent;
}
.tenant-switcher.has-no-daughters .tenant-switcher-btn:hover {
background: transparent;
border-color: transparent;
}
.tenant-switcher.has-no-daughters .tenant-switcher-chevron {
display: none;
}
.tenant-switcher-btn.is-master { padding: 6px 8px; }
.tenant-switcher-btn.is-master .tenant-switcher-chevron { color: var(--primary); }
.tenant-switcher-panel {
position: absolute; top: calc(100% + 6px); left: 28px;
min-width: 240px;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius);
box-shadow: 0 8px 28px rgba(15, 15, 25, .12);
padding: 6px;
z-index: 250;
}
.tenant-switcher-panel[hidden] { display: none; }
.tenant-switcher-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--dark);
font-size: 0.9rem; font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.tenant-switcher-item:hover {
background: var(--primary-pale);
color: var(--primary);
text-decoration: none;
}
.tenant-switcher-item.is-active {
background: var(--primary-pale2, var(--primary-pale));
color: var(--primary);
}
.tenant-switcher-item-logo {
width: 22px; height: 22px;
object-fit: contain;
flex-shrink: 0;
}
.tenant-switcher-item-icon {
width: 22px; height: 22px;
color: var(--gray);
flex-shrink: 0;
}
.tenant-switcher-item.is-active .tenant-switcher-item-icon {
color: var(--primary);
}
.tenant-switcher-item-name {
flex: 1; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.tenant-switcher-item-status {
font-size: 0.65rem; font-weight: 700;
color: var(--gray-mid);
text-transform: uppercase; letter-spacing: 0.05em;
}
.tenant-switcher-item.is-unavailable { opacity: .55; cursor: not-allowed; }
.tenant-switcher-item.is-unavailable:hover { background: transparent; color: var(--dark); }
.tenant-switcher-item--parent {
padding: 6px 10px 4px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-mid, #6b7280);
cursor: default;
pointer-events: none;
}
.tenant-switcher-item--parent:hover {
background: transparent;
color: var(--gray-mid, #6b7280);
}
.tenant-switcher-item--parent.is-active {
background: transparent;
color: var(--primary);
}
a.tenant-switcher-item--parent:not(.is-active) {
pointer-events: auto;
cursor: pointer;
}
a.tenant-switcher-item--parent:not(.is-active):hover {
color: var(--primary);
}
.tenant-switcher-item--parent + .tenant-switcher-item--child {
margin-top: 2px;
}
.tenant-switcher-item--child {
padding-left: 8px;
}
.tenant-switcher-item-guide {
flex-shrink: 0;
width: 14px; height: 22px;
position: relative;
margin-right: 2px;
}
.tenant-switcher-item-guide::before {
content: "";
position: absolute;
left: 6px; top: -2px; bottom: 11px;
border-left: 1.5px solid var(--gray-light, #e0e0e6);
}
.tenant-switcher-item-guide::after {
content: "";
position: absolute;
left: 6px; top: 11px;
width: 7px;
border-bottom: 1.5px solid var(--gray-light, #e0e0e6);
}
.tenant-switcher-item--child:last-child .tenant-switcher-item-guide::before {
bottom: auto; height: 13px;
}
.tenant-switcher-empty {
padding: 10px 12px;
color: var(--gray); font-size: .85rem;
font-style: italic;
}
@media (max-width: 560px) {
.tenant-switcher-logo { max-width: 80px; }
.tenant-switcher-badge { display: none !important; }
}
.header-tag {
background: var(--primary-pale); color: var(--primary);
font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.07em;
white-space: nowrap;
}
.header-spacer { flex: 1; }
.header-back-btn {
display: none; align-items: center; gap: 6px;
background: var(--gray-pale); border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 7px 14px;
font-size: 0.85rem; font-weight: 600; color: var(--dark);
transition: all var(--tr);
}
.header-back-btn:hover { background: var(--primary-pale); border-color: var(--primary); color: var(--primary); }
.header-back-btn.visible { display: flex; }
.header-nav-link {
display: flex; align-items: center; gap: 5px;
font-size: 0.83rem; font-weight: 600; color: var(--dark);
text-decoration: none; padding: 7px 14px; border-radius: var(--radius-sm);
transition: color var(--tr), background var(--tr);
white-space: nowrap;
}
.header-nav-link:hover { color: var(--primary); background: var(--primary-pale); text-decoration: none; }
.lang-switcher {
display: flex;
align-items: center;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
}
.lang-btn {
background: none;
border: none;
padding: 5px 11px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gray);
cursor: pointer;
transition: background var(--tr), color var(--tr);
line-height: 1;
}
.lang-btn:first-child {
border-right: 1.5px solid var(--gray-light);
}
.lang-btn.active {
background: var(--primary);
color: #fff;
}
.lang-btn:not(.active):hover {
background: var(--primary-pale);
color: var(--primary);
}
/* ── css/catalog.css ── */
.hero {
background: var(--primary,
linear-gradient(145deg, #0F0A24 0%, #1E0E40 40%, #2A1060 70%, #1A0A35 100%));
padding: 28px 24px 32px; text-align: center;
position: relative; overflow: hidden;
}
.hero h1 {
font-family: var(--font-head); font-size: clamp(1.4rem,3.6vw,2rem);
font-weight: 700; color: var(--white); letter-spacing: -0.03em; margin-bottom: 6px;
position: relative;
}
.hero p { color: rgba(255,255,255,.78); font-size: 0.95rem; max-width: 500px; margin: 0 auto 18px; position: relative; }
.search-wrap {
max-width: 680px; margin: 0 auto; position: relative;
display: flex; align-items: stretch;
background: var(--white); border-radius: var(--radius);
box-shadow: var(--shadow-hov); overflow: hidden;
transition: box-shadow var(--tr);
}
.search-wrap:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.35), var(--shadow-hov); }
.search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.search-wrap input {
width: 100%; padding: 15px 44px 15px 48px;
font-family: var(--font-body); font-size: .975rem;
border: none; outline: none; color: var(--dark); background: transparent;
}
.search-wrap input::placeholder { color: var(--gray-mid); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
.search-clear {
position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
background: var(--gray-light); border: none; border-radius: 50%;
width: 25px; height: 25px; display: none; align-items: center; justify-content: center;
color: var(--gray); font-size: .8rem; transition: background var(--tr), color var(--tr);
}
.search-clear:hover { background: var(--primary-pale); color: var(--primary); }
.search-clear.visible { display: flex; }
.hero--search { text-align: left; padding: 14px 0; }
.hero-search-inner {
max-width: 1280px; margin: 0 auto; position: relative; padding: 0 24px;
display: flex; align-items: center; gap: 24px;
}
.hero-search-head {
flex: 0 0 248px; margin: 0;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.hero--search .hero-search-head h1 {
margin: 0; line-height: 1.1;
font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}
.hero-tenant { display: inline-flex; align-items: center; gap: 8px; }
.hero-tenant[hidden] { display: none; }
.hero-tenant .home-hero-eyebrow { margin: 0; }
.hero-expand-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
color: #fff; text-decoration: none; transition: background var(--tr);
}
.hero-expand-btn:hover { background: rgba(255,255,255,.26); }
.hero-expand-btn[hidden] { display: none; }
.hero--search .search-wrap { margin: 0; flex: 1 1 auto; max-width: 640px; }
@media (max-width: 820px) {
.hero-search-inner { flex-direction: column; align-items: stretch; gap: 10px; }
.hero-search-head { flex-basis: auto; }
.hero--search .search-wrap { max-width: 100%; }
}
.main-wrap {
max-width: 1280px; margin: 0 auto;
padding: 28px 24px 64px;
display: grid; grid-template-columns: 248px 1fr;
gap: 24px; align-items: start;
}
@media (max-width: 820px) { .main-wrap { grid-template-columns: 1fr; } .sidebar { position: static !important; max-height: none !important; overflow-y: visible !important; } }
.sidebar {
position: sticky; top: 72px;
display: flex; flex-direction: column; gap: 0;
max-height: calc(100vh - 96px);
overflow-y: auto;
}
.filter-panel {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
flex-shrink: 0;
}
.filter-panel-title {
font-family: var(--font-head); font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray);
padding: 12px 14px 10px;
border-bottom: 1.5px solid var(--gray-light);
}
.filter-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.filter-card h3 {
font-family: var(--font-head); font-size: 0.68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-mid); margin-bottom: 11px;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-chip {
display: flex; align-items: center; gap: 8px;
padding: 7px 11px; border-radius: var(--radius-sm);
border: 1.5px solid var(--gray-light); background: var(--white);
font-size: .84rem; color: var(--dark); cursor: pointer;
transition: border-color var(--tr), background var(--tr), color var(--tr); text-align: left;
}
.filter-chip:hover { border-color: var(--primary-light); background: var(--primary-pale); color: var(--primary); }
.filter-chip.active { border-color: var(--primary); background: var(--primary-pale); color: var(--primary); font-weight: 600; }
.filter-group-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-badge-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
border: 2px solid transparent; cursor: pointer;
transition: opacity var(--tr), box-shadow var(--tr), border-color var(--tr), transform var(--tr);
opacity: 0.55;
}
.filter-badge-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.filter-badge-btn.active { opacity: 1; border-color: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.filter-badge-btn.fbadge-all { background: var(--gray-pale); color: var(--gray-mid); }
.filter-badge-btn.fbadge-public { background: var(--green-pale); color: var(--green); }
.filter-badge-btn.fbadge-restricted { background: var(--amber-pale); color: var(--amber); }
.filter-badge-btn.fbadge-private { background: var(--red-pale); color: var(--red); }
.filter-select {
width: 100%; padding: 9px 30px 9px 11px; font-family: var(--font-body); font-size: .84rem;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
color: var(--dark); appearance: none; cursor: pointer; outline: none;
background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236B7A8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
transition: border-color var(--tr);
}
.filter-select:focus { border-color: var(--primary); }
.filter-check-row {
display: flex; align-items: center; gap: 9px;
padding: 11px 16px; cursor: pointer;
font-size: .84rem; color: var(--dark); user-select: none;
}
.filter-check-row input[type="checkbox"] {
width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
}
.reset-btn {
display: block; width: 100%; padding: 10px 14px; border: none; border-radius: 0;
border-top: 1px solid var(--gray-light);
background: var(--white); color: var(--gray); font-size: .82rem; font-weight: 600;
text-align: left; cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.reset-btn:hover { background: var(--primary-pale); color: var(--primary); }
.results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.results-count { font-size: .88rem; color: var(--gray); }
.results-count strong { color: var(--dark); font-weight: 600; }
.sort-select {
padding: 7px 28px 7px 11px; font-family: var(--font-body); font-size: .82rem;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
color: var(--dark); appearance: none; cursor: pointer; outline: none;
background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236B7A8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
transition: border-color var(--tr);
}
.sort-select:focus { border-color: var(--primary); }
.error-banner { background: #FFF0ED; border: 1.5px solid #F8C4B4; border-radius: var(--radius-sm); padding: 13px 17px; color: #9B2A00; font-size: .88rem; margin-bottom: 16px; display: block; }
#errorBanner:not(.visible),
#membersErrorBanner:not(.visible) { display: none; }
.error-banner.visible { display: block; }
.connection-error {
background: var(--white);
border: 1px solid var(--gray-light);
border-left: 4px solid #F2994A;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 28px 24px;
max-width: 680px;
margin: 12px auto;
text-align: left;
color: var(--dark);
}
.connection-error-icon {
color: #F2994A;
display: block;
margin-bottom: 10px;
}
.connection-error-title {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 6px 0;
color: var(--dark);
}
.connection-error-body {
font-size: 0.92rem;
line-height: 1.5;
color: var(--gray);
margin: 0 0 14px 0;
}
.connection-error-details {
margin: 6px 0 14px 0;
font-size: 0.82rem;
}
.connection-error-details summary {
cursor: pointer;
color: var(--primary);
font-weight: 600;
}
.connection-error-details pre {
margin: 8px 0 0 0;
padding: 10px 12px;
background: var(--off-white, #f9fafb);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
font-size: 0.78rem;
color: var(--gray);
white-space: pre-wrap;
word-break: break-word;
}
.connection-error-retry {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: background var(--tr);
}
.connection-error-retry:hover,
.connection-error-retry:focus-visible {
background: var(--primary-dark, var(--primary));
outline: none;
}
.offer-card-warning {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 10px;
padding: 8px 10px;
background: #FFF8EC;
border: 1px solid #F2C97D;
border-radius: var(--radius-sm);
color: #8A5A00;
font-size: 0.78rem;
line-height: 1.4;
}
.offer-card-warning-icon {
flex-shrink: 0;
margin-top: 1px;
color: #C77E00;
}
.dataset-list { display: flex; flex-direction: column; }
.dataset-card { min-width: 0; }
.dataset-card > .card-body { min-width: 0; }
.dataset-list--split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 14px;
align-items: stretch;
}
.dataset-list--split .dataset-card { display: flex; flex-direction: column; }
.dataset-list--split .card-body { flex: 1; display: flex; flex-direction: column; }
.dataset-list--split .card-footer { margin-top: auto; }
.dataset-list--split .card-footer-item--dist { display: none; }
.card-basket-btn {
gap: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
width: 30px; height: 30px; min-width: 30px;
justify-content: center;
}
.card-basket-btn:hover { background: var(--primary-pale); border: 0; color: var(--primary); }
.card-basket-btn.in-basket { background: transparent; border: 0; color: var(--primary); }
.card-basket-btn.in-basket:hover { background: var(--primary-pale); }
.card-basket-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.card-footer-right {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.card-footer-right .badge-policy {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--dark2);
}
.card-footer-right .card-common-icon {
width: 18px;
height: 18px;
}
.card-footer-right .card-basket-btn {
margin: 0;
padding: 4px;
}
.card-footer-right {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.card-footer-right .badge-policy {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--dark2);
}
.card-footer-right .card-common-icon {
width: 18px;
height: 18px;
}
.card-footer-right .card-basket-btn {
margin: 0;
padding: 4px;
}
.card-basket-btn.in-basket svg path { fill: currentColor; }
.dataset-list--split .card-description,
.dataset-list--split .card-tags-right { display: none; }
.dataset-list--split .card-tags { justify-content: flex-start; }
.dataset-list--split .card-footer { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 780px) {
.dataset-list--split { grid-template-columns: minmax(0, 1fr); }
}
.dataset-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 14px;
border: 1.5px solid transparent;
display: grid;
grid-template-columns: 4px 1fr;
cursor: pointer;
transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
overflow: hidden;
}
.dataset-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hov); border-color: var(--primary-pale); }
.dataset-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.card-accent { background: linear-gradient(180deg, var(--primary), var(--primary-light)); flex-shrink: 0; }
.card-accent.access-public { background: var(--access-public); }
.card-accent.access-restricted { background: var(--access-restricted); }
.card-accent.access-private { background: var(--access-private); }
.card-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title { font-family: var(--font-head); font-size: .975rem; font-weight: 600; color: var(--dark); line-height: 1.35; flex: 1; margin: 0; }
.card-title-btn {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
margin: 0;
text-align: left;
cursor: pointer;
width: 100%;
display: block;
}
.card-type-mark {
display: inline-flex;
align-items: baseline;
gap: 5px;
margin-right: 9px;
color: var(--primary);
white-space: nowrap;
vertical-align: baseline;
}
.card-type-mark-icon { display: inline-flex; position: relative; top: 2px; flex-shrink: 0; }
.card-type-mark-text {
font-family: var(--font-head);
font-size: .66rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
line-height: 1;
position: relative;
top: 0;
}
.card-access-badge {
flex-shrink: 0; font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.badge-public { background: var(--access-public); color: #FFFFFF; }
.badge-restricted { background: var(--access-restricted); color: #FFFFFF; }
.badge-private { background: var(--access-private); color: #FFFFFF; }
.badge-unknown { background: var(--gray-pale); color: var(--gray); }
.card-description {
font-size: .855rem; color: var(--gray); line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-description.loading { height: 36px; border-radius: 6px; }
.card-tags {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 8px;
min-width: 0; overflow: hidden;
}
.card-tags-left { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; flex: 1; }
.card-tags-right { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; flex-shrink: 0; }
.tag {
font-size: 0.7rem; font-weight: 600; padding: 2px 9px;
border-radius: 20px; letter-spacing: 0.03em; text-transform: capitalize;
}
.tag-theme { background: var(--primary-pale); color: var(--primary); }
.tag-keyword { background: var(--gray-pale); color: var(--gray); border: 1px solid var(--gray-light); }
.tag-overflow { background: var(--gray-light); color: var(--gray-mid); font-weight: 700; }
.card-top-badges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.badge-policy {
font-size: 0.68rem; font-weight: 700; padding: 3px 9px 3px 7px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
background: rgba(26, 79, 160, 0.16); color: #1A4FA0;
display: inline-flex; align-items: center; gap: 4px;
}
.detail-hero .badge-policy,
.badge-policy.badge-policy--hero {
background: rgba(255, 255, 255, .15);
color: var(--white);
border: 1.5px solid rgba(255, 255, 255, .4);
font-size: .72rem;
padding: 3px 12px;
letter-spacing: 0.06em;
}
.policy-box {
background: #DAE9FC;
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow);
}
.policy-box h2 {
font-family: var(--font-head); font-size: .9rem; font-weight: 700;
color: #1A4FA0; margin-bottom: 12px; padding-bottom: 9px;
border-bottom: 1px solid #C5DCF5; display: flex; align-items: center; gap: 7px;
}
.policy-item {
padding: 10px 0; border-bottom: 1px solid rgba(26, 79, 160, 0.20); font-size: .84rem;
}
.policy-item:last-child { border-bottom: none; padding-bottom: 0; }
.policy-item-row { display: flex; gap: 8px; margin-bottom: 3px; align-items: baseline; }
.policy-item-key { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #1A4FA0; min-width: 80px; flex-shrink: 0; }
.policy-item-val { font-size: .84rem; color: var(--dark); word-break: break-word; }
.policy-item-val a { color: #1A4FA0; }
.policy-access-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: #1A4FA0; color: var(--white);
border: none; border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer; transition: background var(--tr); text-decoration: none;
}
.policy-access-btn:hover { background: #0E3070; text-decoration: none; }
.policy-request-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px;
background: var(--gray-light); color: var(--gray);
border: 1.5px solid var(--gray-mid); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer; transition: background var(--tr), color var(--tr), border-color var(--tr); text-decoration: none;
}
.policy-request-btn:hover { background: var(--gray-mid); color: var(--white); border-color: var(--gray-mid); text-decoration: none; }
.policy-request-btn--icon { padding: 7px 9px; gap: 0; flex-shrink: 0; }
.policy-request-btn--icon svg { flex-shrink: 0; }
.policy-btn-row { display: flex; gap: 8px; flex-wrap: nowrap; margin-top: 14px; }
.policy-btn-row .policy-request-btn,
.policy-btn-row .policy-basket-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.policy-btn-row:empty { display: none; margin: 0; }
.detail-card .policy-request-btn--contact {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; margin-top: 12px;
}
.detail-card .policy-request-hint {
font-size: .72rem; line-height: 1.45;
color: var(--gray);
margin: 7px 0 0;
}
.detail-actions {
display: flex; align-items: center; gap: 10px;
margin: 0 0 12px;
}
.detail-actions .detail-fav-btn { margin-left: auto; }
.detail-menu { position: relative; }
.detail-menu-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 14px;
background: var(--white);
border: 1.5px solid var(--primary-light, #7B5FCA);
border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
font-family: var(--font-body);
font-size: .85rem; font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.detail-menu-btn:hover { background: var(--primary-pale, #EDE8F9); color: var(--primary); }
.detail-menu-btn svg { flex-shrink: 0; }
.detail-menu-caret { transition: transform .2s ease; margin-left: 1px; }
.detail-menu.is-open .detail-menu-btn { background: var(--primary-pale, #EDE8F9); color: var(--primary); }
.detail-menu.is-open .detail-menu-caret { transform: rotate(180deg); }
.detail-menu-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
min-width: 210px;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
padding: 6px;
display: flex; flex-direction: column; gap: 2px;
}
.detail-menu-item {
display: block; padding: 8px 11px;
border-radius: var(--radius-sm);
font-size: .84rem; color: var(--dark); text-decoration: none;
white-space: nowrap;
}
.detail-menu-item:hover { background: var(--primary-pale, #EDE8F9); color: var(--primary); }
.detail-fav-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px;
background: var(--white);
border: 1.5px solid var(--primary-light, #7B5FCA);
border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
font-family: var(--font-body);
font-size: .85rem; font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.detail-fav-btn:hover { background: var(--primary-pale, #EDE8F9); color: var(--primary); }
.detail-fav-btn.in-basket { background: var(--primary-pale, #EDE8F9); color: var(--primary); border-color: var(--primary); }
.detail-fav-btn svg { flex-shrink: 0; }
.policy-subtitle {
font-size: .78rem; color: var(--gray); line-height: 1.5;
margin-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px solid rgba(26, 79, 160, 0.15);
}
.policy-loading {
display: flex; align-items: center; gap: 10px;
padding: 6px 0 2px;
font-size: .82rem; color: var(--gray);
}
.policy-loading-spinner {
width: 14px; height: 14px; border-width: 2px;
}
.policy-loading-text { line-height: 1.4; }
.policy-unavailable {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 12px;
background: var(--amber-pale); color: var(--amber);
border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--white));
border-radius: var(--radius-xs);
font-size: .82rem; line-height: 1.45;
}
.policy-unavailable-icon { flex-shrink: 0; margin-top: 2px; }
.policy-unavailable-body { display: block; }
.policy-unavailable-text { font-weight: 600; }
.policy-unavailable-hint {
display: block; margin-top: 2px;
font-weight: 500; opacity: .82;
}
.policy-item-offer-label {
font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: #1A4FA0; margin-bottom: 4px;
}
.policy-item-id-row {
display: flex; align-items: center; gap: 10px;
margin: 2px 0 8px;
flex-wrap: wrap;
}
.policy-item-id-val {
flex: 1 1 auto;
font-size: .82rem; font-weight: 600; color: var(--dark);
word-break: break-all; min-width: 0;
}
.policy-item-id-val a { color: #1A4FA0; }
.offer-card {
background: var(--offer-card-bg, #EEF3FB);
border: 0;
border-radius: var(--radius-sm);
padding: 14px 18px;
margin: 8px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.offer-card + .offer-card {
border-top: 1px solid var(--gray-light, #E5E7EB);
margin-top: 10px; padding-top: 16px;
}
.offer-card-eyebrow {
display: flex; align-items: center; gap: 8px;
margin-bottom: 2px;
}
.offer-card-eyebrow--actions {
justify-content: space-between;
gap: 10px;
}
.offer-card-eyebrow--actions .policy-deal-btn {
flex: 0 0 auto;
width: auto;
padding: 5px 14px;
font-size: .8rem;
}
.offer-card-top, .offer-card-head { display: contents; }
.offer-card-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 0;
background: transparent;
color: var(--primary, #5C3FA5);
font-family: var(--font-body);
font-size: .9rem;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.offer-card-title-row {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.offer-card-title {
font-size: 1rem;
font-weight: 700;
color: var(--dark);
min-width: 0;
word-break: break-word;
line-height: 1.3;
flex: 1 1 auto;
}
.offer-card-policy-label {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: var(--gray-pale, #F4F2F8);
color: var(--primary, #5C3FA5);
font-size: .72rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
max-width: 100%;
word-break: break-word;
}
.offer-card-policy-label[hidden] { display: none !important; }
.offer-card-authority-label {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: transparent;
color: var(--gray, #6b7280);
border: 1px solid var(--gray-light, #e5e7eb);
font-size: .7rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: uppercase;
max-width: 100%;
word-break: break-word;
}
.offer-card-authority-label[hidden] { display: none !important; }
.offer-card-actions {
display: flex; justify-content: flex-end;
margin-top: 4px;
}
.offer-card-conditions {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.offer-card-conditions-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-mid);
flex-shrink: 0;
}
.offer-card-conditions-label::after { content: ':'; }
.offer-card-conditions-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.offer-card-chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
background: var(--gray-pale, #F4F2F8);
color: var(--dark);
font-size: .82rem;
font-weight: 500;
line-height: 1.3;
}
.offer-card-skel {
display: inline-block;
width: 140px;
height: 14px;
border-radius: 4px;
vertical-align: middle;
}
.offer-card-chip-skel {
min-width: 110px;
height: 22px;
border-radius: 20px;
background: var(--gray-light);
}
.policy-deal-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
background: var(--primary, #5C3FA5); color: var(--white);
border: none; border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer; transition: background var(--tr), filter var(--tr);
text-decoration: none;
white-space: nowrap;
}
.policy-deal-btn:hover { filter: brightness(0.9); }
.policy-deal-btn:focus-visible { outline: 2px solid var(--primary, #5C3FA5); outline-offset: 2px; }
.policy-deal-btn:disabled,
.policy-deal-btn.policy-deal-btn--disabled {
background: var(--gray-light, #E5E7EB);
color: var(--gray, #6B7280);
cursor: not-allowed;
pointer-events: none;
opacity: 0.85;
}
.policy-deal-btn:disabled:hover,
.policy-deal-btn.policy-deal-btn--disabled:hover {
background: var(--gray-light, #E5E7EB);
}
.policy-login-prompt {
display: flex; align-items: flex-start; gap: 9px;
font-size: .78rem; line-height: 1.5; font-weight: 600;
background: var(--amber-pale, #fff8f0);
color: var(--amber, #b45309);
border: 1px solid rgba(230, 81, 0, .25);
border-radius: var(--radius-sm);
padding: 11px 13px;
margin: 12px 0 0;
}
.policy-login-prompt-icon { flex-shrink: 0; margin-top: 1px; }
.policy-login-prompt--role { }
.card-footer {
display: flex; align-items: center; gap: 16px;
padding-top: 10px; border-top: 1px solid var(--gray-light);
flex-wrap: wrap;
}
.card-footer-item {
display: flex; align-items: center; gap: 5px;
min-width: 0;
font-size: .78rem; color: var(--gray-mid);
}
.card-footer-item svg { flex-shrink: 0; }
.card-footer-item strong { color: var(--dark2); font-weight: 500; }
.card-footer-item > strong,
.card-footer-item > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-footer-arrow {
color: var(--primary); font-size: .8rem; font-weight: 600;
display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.dmi-badge {
display: inline-flex; align-items: center; gap: 3px;
background: var(--primary-dark); color: var(--white);
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 2px 6px 2px 4px; border-radius: 10px; vertical-align: middle;
margin-left: 5px; white-space: nowrap; line-height: 1;
}
.dmi-badge img { width: 10px; height: 10px; display: inline-block; flex-shrink: 0; }
.badge-policy img.icon-common { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }
@keyframes shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
.skel {
background: linear-gradient(90deg, var(--gray-light) 25%, #f0edf8 50%, var(--gray-light) 75%);
background-size: 600px 100%; animation: shimmer 1.4s infinite; border-radius: 6px;
}
.card-skeleton {
background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 11px;
border-left: 4px solid var(--gray-light);
}
.skel-h { height: 18px; }
.skel-sm { height: 13px; }
.skel-w60 { width: 60%; }
.skel-w80 { width: 80%; }
.skel-w40 { width: 40%; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 28px; flex-wrap: wrap; }
.page-btn {
padding: 7px 13px; border: 1.5px solid var(--gray-light);
background: var(--white); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .84rem; color: var(--dark);
cursor: pointer; transition: all var(--tr); min-width: 38px; text-align: center;
}
.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.page-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 600; }
.page-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.page-ellipsis { color: var(--gray); padding: 0 3px; line-height: 36px; }
.pdc-banner {
margin-top: 28px;
width: 70%;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.pdc-banner[hidden] { display: none !important; }
.pdc-banner-body { flex: 1; min-width: 0; }
.pdc-banner-title { font-family: var(--font-head); font-size: .98rem; font-weight: 700; color: var(--dark); margin: 0 0 5px 0; }
.pdc-banner-text { color: var(--gray); font-size: .875rem; margin: 0; line-height: 1.55; }
.pdc-banner-btn {
display: inline-flex; align-items: center; gap: 6px;
background: #2980B9; color: #fff;
border: none; border-radius: var(--radius-sm);
padding: 9px 18px; font-size: .875rem; font-weight: 600;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--tr);
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px;
}
.pdc-banner-btn:hover { background: #1A6FA0; color: #fff; }
@media (max-width: 540px) {
.pdc-banner { width: 100%; flex-direction: column; align-items: flex-start; }
.pdc-banner-btn { width: 100%; justify-content: center; }
}
.empty-state { text-align: center; padding: 56px 24px; color: var(--gray); }
.empty-state svg { margin-bottom: 14px; opacity: .3; }
.empty-state h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--dark); margin-bottom: 5px; }
.policy-item-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.policy-offers-compare-btn.policy-deal-btn {
margin-top: 9px;
padding: 6px 12px;
background: var(--white, #fff);
border: 1.5px solid var(--gray-light, #D7DCE3);
color: var(--gray-dark, #374151);
font-size: .8rem;
width: auto;
flex: 0 0 auto;
}
.policy-offers-compare-btn.policy-deal-btn:hover {
filter: none;
background: var(--gray-bg, #F3F4F6);
border-color: var(--gray-mid, #9CA3AF);
color: var(--dark, #111827);
}
.policy-agreement-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 9px;
padding: 6px 12px;
border: 1.5px solid var(--green, #2E7D32);
border-radius: var(--radius-xs, 5px);
background: var(--white, #fff);
color: var(--green, #2E7D32);
font-family: inherit;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.policy-agreement-view-btn:hover {
background: var(--green, #2E7D32);
color: var(--white, #fff);
}
.policy-agreement-view-btn:focus-visible {
outline: 2px solid var(--green, #2E7D32);
outline-offset: 2px;
}
.dist-access-block.dist-access-row {
flex: 1 0 100%;
order: 10;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 0;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--gray-light);
}
.dist-card { flex-wrap: wrap; }
.dist-access-block .dist-condition-text { line-height: 1.4; }
.dist-access-block .dist-condition-label { white-space: normal; }
.dist-url-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
max-width: 100%;
padding: 3px 4px 3px 8px;
border: 1px solid var(--gray-light);
border-radius: var(--radius-xs);
background: var(--gray-pale);
}
.dist-url {
flex: 1 1 0;
min-width: 0;
font-size: .72rem;
line-height: 1.35;
color: var(--gray);
word-break: break-all;
user-select: all;
-webkit-user-select: all;
}
.dist-url-copy {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
padding: 0;
border: 0;
border-radius: var(--radius-xs);
background: transparent;
color: var(--gray);
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.dist-url-copy:hover { background: var(--white); color: var(--primary); }
.dist-url-copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dist-url-copy--copied { color: var(--green); }
.dist-url-copied {
font-size: .72rem;
font-weight: 600;
color: var(--green);
}
.dist-access-block.has-agreement .dist-condition-label { color: var(--green); }
.dist-access-block.has-agreement .dist-condition-text { font-weight: 600; }
.dist-action--access { flex-shrink: 0; min-width: 0; }
.dist-card-has-policy { flex-wrap: wrap; }
.dist-card-has-policy .dist-access-row {
margin: 0;
padding: 12px 16px;
border-top: 1.5px solid var(--gray-light);
}
a.card-title-btn,
a.card-title-btn:visited { text-decoration: none; color: inherit; }
/* ── css/detail.css ── */
#homePage { display: block; }
#listPage { display: none; }
#detailPage { display: none; }
.detail-wrap { max-width: 1100px; margin: 0 auto; padding: 16px 24px 72px; }
.detail-hero {
background: var(--primary-dark);
border-radius: var(--radius); padding: 32px 36px; margin-bottom: 28px;
color: var(--white);
}
.detail-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.detail-hero h1 { font-family: var(--font-head); font-size: clamp(1.3rem,3vw,1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; min-width: 0; flex: 1; }
.detail-type-mark {
display: inline-flex;
align-items: center;
gap: 7px;
margin-right: 12px;
white-space: nowrap;
vertical-align: baseline;
}
.detail-type-mark-icon { display: inline-flex; position: relative; top: 3px; flex-shrink: 0; }
.detail-type-mark-text {
font-family: var(--font-head);
font-size: .82rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1;
position: relative;
top: 1px;
opacity: .82;
}
.detail-type-mark--demand { color: #FFC26B; }
.detail-type-mark--demand .detail-type-mark-text { opacity: 1; }
.detail-access-badge {
flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: 4px 12px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em;
border: 1.5px solid rgba(255,255,255,.4); color: var(--white); white-space: nowrap;
}
.detail-access-badge.badge-public { background: var(--access-public); color: #FFFFFF; border-color: transparent; }
.detail-access-badge.badge-restricted { background: var(--access-restricted); color: #FFFFFF; border-color: transparent; }
.detail-access-badge.badge-private { background: var(--access-private); color: #FFFFFF; border-color: transparent; }
.detail-access-badge.badge-unknown { background: rgba(255,255,255,.15); color: var(--white); }
.detail-hero-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: .85rem; opacity: .82; }
.detail-hero-meta-item { display: flex; align-items: center; gap: 6px; }
.type-badge {
display: inline-flex; align-items: center;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; white-space: nowrap;
padding: 3px 9px; border-radius: 20px;
background: var(--primary-pale); color: var(--primary);
border: 1px solid rgba(92,63,165,.2);
}
.type-badge--demand {
background: #fff3e0; color: #b4560d;
border-color: rgba(180,86,13,.28);
}
.detail-hero .type-badge.type-badge--demand,
.detail-hero-top-badges .type-badge--demand {
background: #f59e0b; color: #3b1d00; border-color: transparent;
}
.detail-hero-top-badges {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.hero-back-btn {
display: inline-flex; align-items: center; gap: 5px;
flex-shrink: 0;
font-family: var(--font-body);
font-size: .72rem; font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase; white-space: nowrap;
padding: 4px 12px 4px 10px;
border-radius: 20px;
border: 1.5px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.15);
color: var(--white);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.hero-back-btn:hover,
.hero-back-btn:focus-visible {
background: var(--white);
border-color: var(--white);
color: var(--primary);
outline: none;
}
.hero-back-btn svg { display: block; }
.detail-back-link.hero-back-btn,
.detail-back-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 0;
margin: 0 0 12px 0;
background: transparent;
border: none;
border-radius: 0;
color: var(--primary);
font-family: var(--font-body);
font-size: .85rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
cursor: pointer;
}
.detail-back-link.hero-back-btn:hover,
.detail-back-link.hero-back-btn:focus-visible,
.detail-back-link:hover,
.detail-back-link:focus-visible {
background: transparent;
border: none;
color: var(--primary-dark);
text-decoration: underline;
outline: none;
}
.detail-back-link svg { display: block; }
.detail-hero .type-badge {
font-size: .72rem; padding: 4px 12px; letter-spacing: 0.06em;
border: 1.5px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.15);
color: var(--white);
}
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 20px; }
.detail-side { gap: 10px; }
.detail-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.detail-side .detail-card { background: #E8E6F0; padding: 16px; }
.detail-card h2 {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-head); font-size: 1rem; font-weight: 700;
color: var(--dark); margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1.5px solid var(--gray-light);
}
.detail-card h2 > svg { flex-shrink: 0; }
.detail-card--quality h2 { display: flex; align-items: center; gap: 8px; }
.detail-card--quality h2 svg { color: var(--primary); flex-shrink: 0; }
.quality-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: .78rem; font-weight: 600; line-height: 1.3;
padding: 4px 11px;
border-radius: 20px;
background: var(--gray-pale, #F1F0F6);
color: var(--gray, #5A5A6E);
border: 1px solid var(--gray-light, #E5E7EB);
white-space: normal;
max-width: 100%;
}
.quality-badge--level-1 {
background: #FCE6E9; color: #9A1428; border-color: #F2BFC6;
}
.quality-badge--level-2 {
background: #FFF1DD; color: #8A4B00; border-color: #F8D9B0;
}
.quality-badge--level-3 {
background: #E2F1DA; color: #2E6B19; border-color: #BFDFB0;
}
.meta-row--quality-explanation .meta-val {
font-size: .85rem; line-height: 1.55;
color: var(--dark);
white-space: pre-wrap;
}
.detail-side .detail-card > h2 {
display: flex; align-items: center;
cursor: pointer; user-select: none;
font-size: .9rem;
margin-bottom: 10px; padding-bottom: 8px;
}
.detail-card-h2-inner {
display: flex; align-items: center; gap: 6px;
flex: 1; min-width: 0;
}
.detail-card-chevron {
flex-shrink: 0;
display: inline-flex; align-items: center;
margin-left: 6px;
color: var(--gray-mid);
transition: transform 0.2s ease;
}
.detail-side .detail-card.collapsed {
padding-top: 10px;
padding-bottom: 10px;
}
.detail-side .detail-card.collapsed > h2 {
margin-bottom: 0;
padding-bottom: 0;
border-bottom-color: transparent;
}
.detail-side .detail-card.collapsed > h2 .detail-card-chevron {
transform: rotate(-90deg);
}
.detail-side .detail-card.collapsed > *:not(h2) { display: none; }
.detail-side .detail-card.detail-card--trust-dmi,
.detail-side .detail-card.detail-card--trust-warn {
background: #DAE9FC;
}
.detail-side .detail-card.detail-card--trust-dmi > h2,
.detail-side .detail-card.detail-card--trust-warn > h2 {
color: #1A4FA0;
border-bottom-color: #C5DCF5;
}
.detail-side .detail-card.detail-card--trust-dmi.collapsed > h2,
.detail-side .detail-card.detail-card--trust-warn.collapsed > h2 {
border-bottom-color: transparent;
}
.trust-status-indicator {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
margin-left: auto;
border-radius: 50%;
flex-shrink: 0;
}
.trust-status-indicator--ok {
background: #138A36;
color: #FFFFFF;
}
.trust-status-indicator--warn {
background: #D97706;
color: #FFFFFF;
}
.trust-status-indicator svg { display: block; }
.detail-side .detail-card.detail-card--trust-dmi .dataset-status-box,
.detail-side .detail-card.detail-card--trust-warn .dataset-status-box {
background: transparent;
padding: 0;
margin: 4px 0 2px;
border-radius: 0;
}
.detail-description { font-size: .9rem; line-height: 1.7; color: var(--dark2); }
.detail-description.markdown-body p { margin: 0 0 .75em; }
.detail-description.markdown-body p:last-child { margin-bottom: 0; }
.detail-description.markdown-body ul,
.detail-description.markdown-body ol { margin: .5em 0 .75em 1.4em; padding: 0; }
.detail-description.markdown-body li { margin-bottom: .3em; }
.detail-description.markdown-body h1,
.detail-description.markdown-body h2,
.detail-description.markdown-body h3 {
font-family: var(--font-head); font-weight: 700;
color: var(--dark); margin: 1em 0 .4em;
}
.detail-description.markdown-body h1 { font-size: 1.1rem; }
.detail-description.markdown-body h2 { font-size: 1rem; }
.detail-description.markdown-body h3 { font-size: .95rem; }
.detail-description.markdown-body a { color: var(--primary); text-decoration: underline; }
.detail-description.markdown-body a:hover { opacity: .8; }
.detail-description.markdown-body code {
background: var(--gray-light); border-radius: 3px;
padding: .1em .35em; font-size: .85em; font-family: monospace;
}
.detail-description.markdown-body pre {
background: var(--gray-light); border-radius: 6px;
padding: .75em 1em; overflow-x: auto; margin: .5em 0;
}
.detail-description.markdown-body pre code { background: none; padding: 0; }
.detail-description.markdown-body strong { font-weight: 600; color: var(--dark); }
.detail-description.markdown-body blockquote {
border-left: 3px solid var(--primary); margin: .5em 0;
padding-left: .75em; color: var(--gray);
}
.desc-wrapper { position: relative; }
.desc-wrapper.desc-collapsible.desc-collapsed {
max-height: 320px;
overflow: hidden;
}
.desc-fade { display: none; }
.desc-collapsible.desc-collapsed .desc-fade {
display: block;
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, #fff);
pointer-events: none;
}
.desc-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
background: none;
border: none;
padding: 0;
font-size: .85rem;
font-weight: 600;
color: var(--primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.desc-toggle:hover { opacity: .75; }
.meta-list { display: flex; flex-direction: column; gap: 0; }
.meta-row {
display: grid; grid-template-columns: 128px 1fr; gap: 8px;
padding: 10px 0; border-bottom: 1px solid var(--gray-light);
align-items: baseline;
}
.meta-row:last-child { border-bottom: none; }
.detail-side .meta-row { grid-template-columns: 114px 1fr; padding: 6px 0; }
.meta-key { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-mid); padding-top: 1px; }
.meta-val { font-size: .88rem; color: var(--dark); line-height: 1.5; word-break: break-word; }
.meta-val a { color: var(--primary); word-break: break-all; }
.meta-row--org {
display: flex; flex-direction: column; gap: 0;
padding: 8px 0;
}
.meta-row--org .meta-key { margin-bottom: 1px; padding-top: 0; }
.meta-row--org .meta-val { margin: 0; }
.meta-row--org .meta-val--org {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.meta-row--org .meta-val--org .trust-member-badges { margin-top: 0; }
.meta-row--org .dmi-rating-box {
margin-top: 4px; padding: 0; border-bottom: none;
}
.trust-org-link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
word-break: break-word;
}
.trust-org-link:hover,
.trust-org-link:focus-visible {
color: var(--primary-dark);
text-decoration: underline;
outline: none;
}
.meta-row--org .trust-member-badges {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 6px;
}
.meta-row--org .trust-member-badges:empty { display: none; }
.meta-row--org .trust-member-lid {
background: var(--primary-pale);
color: var(--primary);
border: 1px solid var(--primary-pale);
letter-spacing: 0.05em;
font-weight: 700;
}
.dmi-rating-box {
display: flex; align-items: center; gap: 8px;
padding: 8px 0; border-bottom: 1px solid var(--gray-light);
}
.dmi-rating-box:last-child { border-bottom: none; }
.dmi-rating-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.dmi-rating-stars { display: flex; align-items: center; gap: 2px; }
.dmi-rating-stars svg { display: block; }
.dmi-rating-lid { font-size: .65rem; font-weight: 800; letter-spacing: .08em; color: var(--primary); text-transform: uppercase; }
.dataset-status-box {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px; border-radius: 6px; margin: 4px 0 6px;
font-size: .78rem; font-weight: 600; line-height: 1.3;
}
.dataset-status-dmi {
background: color-mix(in srgb, var(--primary) 8%, transparent);
color: var(--primary);
}
.dataset-status-warning {
background: #EBF4FF;
color: #1A6BBF;
}
.dataset-status-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.dataset-status-icon { flex-shrink: 0; }
.dataset-status-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.dataset-status-headline { font-weight: 600; }
.dataset-status-sub { font-size: .72rem; font-weight: 500; opacity: .85; }
.meta-row:has(+ .dataset-status-box) { border-bottom: none; }
.dmi-rating-score { font-size: .95rem; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
.dmi-rating-reviews { font-size: .78rem; color: var(--gray-mid); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dist-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.dist-group + .dist-group { margin-top: 18px; }
.dist-group-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.dist-group-label {
font-family: var(--font-head);
font-size: .78rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--gray);
}
.dist-group-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px;
background: var(--gray-light); color: var(--gray);
border-radius: 999px;
font-family: var(--font-head); font-size: .7rem; font-weight: 700;
line-height: 1;
}
.dist-group-head::after {
content: ''; flex: 1; height: 1px;
background: var(--gray-light);
}
.dist-group-items { display: flex; flex-direction: column; gap: 12px; }
.dist-card {
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 14px 16px;
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: 12px; row-gap: 8px; align-items: start;
transition: border-color var(--tr), background var(--tr);
}
.dist-card > .dist-format-badge { grid-column: 1; grid-row: 1; }
.dist-card > .dist-action { grid-column: 2; grid-row: 1; justify-self: end; }
.dist-card > .dist-info { grid-column: 1 / -1; grid-row: 2; }
.dist-card > .dist-meta { grid-column: 1 / -1; grid-row: 3; }
.dist-card-has-policy .dist-card-left {
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: 12px; row-gap: 8px; align-items: start;
}
.dist-card-left > .dist-format-badge { grid-column: 1; grid-row: 1; }
.dist-card-left > .dist-action { grid-column: 2; grid-row: 1; justify-self: end; }
.dist-card-left > .dist-info { grid-column: 1 / -1; grid-row: 2; }
.dist-card-left > .dist-meta { grid-column: 1 / -1; grid-row: 3; }
.dist-card > .dist-status-row,
.dist-card > .dist-error-row,
.dist-card-left > .dist-status-row,
.dist-card-left > .dist-error-row { grid-column: 1 / -1; }
.dist-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.dist-format-badge {
flex-shrink: 0; min-width: 52px; padding: 4px 10px;
background: var(--primary-pale); color: var(--primary);
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
border-radius: var(--radius-xs); text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
}
.dist-info { flex: 1; min-width: 0; }
.dist-title { font-size: .9rem; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.dist-desc { font-size: .82rem; color: var(--gray); margin-bottom: 6px; }
.dist-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.dist-meta-item { font-size: .76rem; color: var(--gray-mid); display: flex; align-items: center; gap: 4px; }
.dist-action { flex-shrink: 0; }
.dist-action-with-label { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dist-condition-label {
display: flex; align-items: center; gap: 4px;
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
color: #1A4FA0; white-space: nowrap;
}
.dist-download-btn {
display: flex; align-items: center; gap: 5px;
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 8px 14px; font-size: .82rem; font-weight: 600;
cursor: pointer; transition: background var(--tr); white-space: nowrap; text-decoration: none;
}
.dist-download-btn:hover { background: var(--primary-dark); text-decoration: none; }
.dist-download-btn--access { background: #1A4FA0; }
.dist-download-btn--access:hover { background: #0E3070; }
.dist-download-btn--agreement {
background: var(--white);
border: 1.5px solid var(--green);
color: var(--green);
padding: 6px 12px;
font-size: .8rem;
}
.dist-download-btn--agreement:hover { background: var(--green); color: var(--white); }
.dist-download-btn--agreement:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.dist-empty { text-align: center; padding: 28px; color: var(--gray); font-size: .88rem; }
.dist-empty--request { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dist-empty--request .dist-empty-lead { max-width: 460px; margin: 0; color: var(--dark); font-size: .9rem; line-height: 1.55; }
.dist-empty--request .policy-request-btn { width: auto; margin: 0; }
.dist-empty--request .dist-empty-sub { margin: 0; color: var(--gray); font-size: .82rem; }
.dist-card-has-policy { padding: 0; align-items: stretch; overflow: hidden; }
.dist-card-has-policy:hover { background: transparent; }
.dist-card-left { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
.dist-card-has-policy:hover .dist-card-left { background: var(--primary-pale2); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dist-policy-panel {
flex: 0 0 25%; min-width: 0;
background: rgba(26, 79, 160, 0.14);
border-left: 1.5px solid rgba(26, 79, 160, 0.22);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 4px;
}
.dist-policy-title {
font-family: var(--font-head); font-size: .76rem; font-weight: 700; color: #1A4FA0;
display: flex; align-items: center; gap: 5px;
padding-bottom: 7px; border-bottom: 1px solid rgba(26, 79, 160, 0.20); margin-bottom: 2px;
}
.dist-policy-count {
background: rgba(26, 79, 160, 0.16); color: #0E3070;
font-size: .65rem; padding: 1px 7px; border-radius: 20px; font-weight: 700;
}
.dist-policy-item { font-size: .76rem; color: var(--dark); margin-bottom: 3px; word-break: break-word; line-height: 1.4; }
.dist-policy-item a { color: #1A4FA0; }
.dist-policy-item-key { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #1A4FA0; margin-bottom: 1px; }
.dist-policy-spacer { flex: 1; }
.dist-access-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 8px; padding: 7px 10px;
background: #1A4FA0; color: var(--white);
border: none; border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .78rem; font-weight: 600;
cursor: pointer; transition: background var(--tr); text-decoration: none; white-space: nowrap;
}
.dist-access-btn:hover { background: #0E3070; text-decoration: none; }
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 48px; gap: 12px; color: var(--gray); }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--gray-light); border-top-color: var(--primary); border-radius: 50%; animation: spin .65s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.type-badge--broker {
background: #e8f1fb; color: #1A4FA0;
border-color: rgba(26,79,160,.28);
}
.detail-hero .type-badge.type-badge--broker,
.detail-hero-top-badges .type-badge--broker {
background: #d7e6f8; color: #123a78; border-color: transparent;
}
.detail-card--source-cta {
overflow: hidden;
position: relative;
}
.detail-card--source-cta .source-cta-accent {
position: absolute; top: 0; left: 0; right: 0;
height: 7px;
background: linear-gradient(90deg,
var(--cta-accent-from, var(--primary-dark)),
var(--cta-accent-to, var(--primary-light)));
}
.detail-side .detail-card--source-cta.collapsed > .source-cta-accent {
display: block;
}
.detail-side .detail-card--source-cta.collapsed {
padding-top: 17px;
}
.detail-side .detail-card--source-cta { background: var(--white); }
.detail-card--source-cta h2 { color: var(--cta-ink, var(--primary)); }
.detail-card--source-cta .source-cta-meta { margin: 0 0 12px; }
.source-cta-sub {
font-size: .82rem; color: var(--gray);
line-height: 1.5; margin: 0 0 12px;
}
.source-cta-brand {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 0 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--gray-light);
}
.source-cta-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.source-cta-partner {
font-size: .78rem; color: var(--gray); line-height: 1.35;
}
.source-cta-partner strong { color: var(--dark); font-weight: 600; }
.detail-card--source-cta .ds-goto-btn {
width: 100%; justify-content: center;
background: var(--cta-ink, var(--primary));
}
.detail-card--source-cta .ds-goto-btn:hover { filter: brightness(.88); }
.detail-side .detail-card--source-cta.detail-card--source-merged { background: #E8E6F0; }
.detail-side .detail-card--source-merged > .source-cta-accent,
.detail-side .detail-card--source-merged.collapsed > .source-cta-accent { display: none; }
.detail-side .detail-card--source-merged.collapsed { padding-top: 10px; }
.detail-side .detail-card--source-merged > h2 { color: var(--dark); }
.detail-card--source-merged .source-merged-badge { margin-left: 4px; }
.detail-card--source-merged .source-cta-brand { border-bottom-color: #D6D2E2; }
.detail-card--source-merged .source-merged-extra { margin: -4px 0 12px; }
.detail-card--source-merged .source-merged-extra .meta-row { padding: 2px 0; }
.detail-card--source-merged .source-merged-extra .meta-key { font-size: .6rem; }
.detail-card--source-merged .source-merged-extra .meta-val { font-size: .72rem; color: var(--gray); }
.detail-empty { font-size: .85rem; color: var(--gray); margin: 0; }
.dist-item { padding: 10px 0; border-bottom: 1px solid var(--gray-light); }
.dist-item:last-child { border-bottom: 0; }
.dist-title { font-size: .88rem; font-weight: 600; }
.dist-link { font-size: .8rem; word-break: break-all; }
.tag-standard {
background: #eef4ea; color: #2f5d2b;
border: 1px solid rgba(47,93,43,.22);
}
a.tag-link { text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
a.tag-link:hover { filter: brightness(.95); box-shadow: inset 0 0 0 1px currentColor; }
a.tag-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tag-space {
background: #f1edf9; color: #4b3a7a;
border: 1px solid rgba(75,58,122,.22);
}
/* ── css/footer.css ── */
.site-footer {
background: var(--dark);
color: rgba(255,255,255,.55);
font-size: .8rem;
}
.site-footer-inner {
max-width: 1200px; margin: 0 auto;
display: flex; gap: 40px; align-items: flex-start;
padding: 28px 24px 20px;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.footer-col-brand { flex: 0 0 auto; min-width: 130px; gap: 8px; }
.site-footer-inner { gap: 72px; }
.footer-col:not(.footer-col-brand) { flex: 0 1 auto; min-width: 180px; }
.footer-col-brand { margin-right: auto; }
.footer-powered {
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: rgba(255,255,255,.35);
}
.footer-logo { height: 28px; width: auto; display: block; opacity: .85; }
.footer-col-title {
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: rgba(255,255,255,.4);
margin-bottom: 2px;
}
.footer-col a {
color: rgba(255,255,255,.65); text-decoration: none; font-size: .8rem;
transition: color var(--tr);
}
.footer-col a:hover { color: #fff; }
.footer-col-title--brand { text-transform: none; letter-spacing: .03em; font-size: .74rem; }
.footer-address { font-style: normal; line-height: 1.55; color: rgba(255,255,255,.55); }
.footer-kvk { color: rgba(255,255,255,.55); }
.footer-col a.footer-social { display: inline-flex; align-self: flex-start; padding: 2px 0; line-height: 0; }
.site-footer-bottom-wrap {
background: var(--white);
border-top: 1px solid var(--gray-light);
}
.site-footer-bottom {
max-width: 1200px; margin: 0 auto;
padding: 12px 24px;
font-size: .78rem; color: var(--gray);
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 18px; justify-content: space-between;
}
.site-footer-bottom a { color: var(--primary); }
.site-footer-bottom a:hover { text-decoration: underline; }
.site-footer-bottom-tech,
.site-footer-bottom-legal {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.site-footer-bottom-legal a { color: var(--gray); }
.site-footer-bottom-legal a:hover { color: var(--primary); text-decoration: underline; }
.footer-bottom-divider { color: var(--gray-mid); user-select: none; }
.site-footer-trust-wrap {
max-width: 1200px; margin: 0 auto;
padding: 0 24px 24px;
}
.site-footer-trust {
display: flex; flex-wrap: wrap; gap: 48px;
justify-content: center;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.08);
}
.trust-item {
display: flex; align-items: center; gap: 12px;
flex: 0 1 auto;
min-width: 0;
}
.trust-item-text { display: flex; flex-direction: column; min-width: 0; }
.trust-item-title {
font-family: var(--font-head); font-size: .82rem; font-weight: 700;
color: rgba(255,255,255,.8); line-height: 1.3;
}
.trust-item-sub {
font-size: .75rem; color: rgba(255,255,255,.4);
margin-top: 2px; line-height: 1.4;
}
.trust-iso-logo {
flex-shrink: 0;
height: 48px; width: auto; display: block;
background: #fff;
border-radius: 5px;
padding: 3px;
}
.trust-eu-flag { flex-shrink: 0; border-radius: 3px; }
.trust-eu-link { flex-shrink: 0; line-height: 0; }
.trust-eu-img { height: 64px; width: auto; display: block; opacity: .9; transition: opacity var(--tr); }
.trust-eu-link:hover .trust-eu-img { opacity: 1; }
.cookie-banner {
position: fixed;
left: 24px; right: 24px; bottom: 24px;
z-index: 1100;
max-width: 480px;
margin-left: auto;
background: var(--white);
color: var(--dark);
border-radius: var(--radius);
box-shadow: 0 16px 48px rgba(20,15,42,.25), 0 4px 16px rgba(20,15,42,.12);
border: 1px solid var(--gray-light);
animation: cookieBannerIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes cookieBannerIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.cookie-banner-inner {
display: flex; flex-direction: column; gap: 14px;
padding: 18px 20px 16px;
}
.cookie-banner-title {
font-family: var(--font-head);
font-size: 1rem; font-weight: 700;
color: var(--dark); line-height: 1.3;
}
.cookie-banner-body {
font-size: .85rem; line-height: 1.55;
color: var(--gray);
}
.cookie-banner-body a {
color: var(--primary); text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-banner-body a:hover { color: var(--primary-dark); }
.cookie-banner-actions {
display: flex; gap: 10px; justify-content: flex-end;
flex-wrap: wrap;
}
.cookie-banner-btn {
font-family: var(--font-head);
font-size: .82rem; font-weight: 600;
padding: 9px 18px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--gray-light);
background: var(--white);
color: var(--dark);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.cookie-banner-btn:hover { border-color: var(--primary); color: var(--primary); }
.cookie-banner-btn-accept {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.cookie-banner-btn-accept:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--white);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ── css/home.css ── */
.logo-img { height: 26px; width: auto; display: block; }
#homePage { display: block; }
.home-hero {
background: var(--hero-bg,
url('images/DexesWavepurple.svg') no-repeat center/cover,
linear-gradient(145deg, #0F0A24 0%, #1E0E40 40%, #2A1060 70%, #1A0A35 100%));
padding: 36px 24px 40px;
position: relative; overflow: hidden;
}
.home-hero-orb {
position: absolute; border-radius: 50%;
pointer-events: none; filter: blur(90px);
}
.home-hero-orb1 {
width: 560px; height: 560px;
background: var(--hero-orb1, rgba(176,139,240,.18));
top: -180px; right: -80px;
}
.home-hero-orb2 {
width: 380px; height: 380px;
background: var(--hero-orb2, rgba(92,63,165,.22));
bottom: -120px; left: 8%;
}
.home-hero-orb3 {
width: 260px; height: 260px;
background: var(--hero-orb3, rgba(26,79,160,.18));
top: 40%; left: 32%;
}
.home-hero-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
align-items: center; position: relative;
}
@media (max-width: 900px) {
.home-hero-inner { grid-template-columns: 1fr; gap: 36px; }
}
.home-hero-left {}
.home-hero-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.85); font-size: .75rem; font-weight: 600;
padding: 4px 12px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 16px;
}
.home-hero-left h1 {
font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.18;
margin-bottom: 14px;
}
.home-hero-left h1 span { color: var(--hero-span-color, #B08BF0); }
.home-hero-left p {
font-size: 1.02rem; color: rgba(255,255,255,.72); line-height: 1.6;
margin-bottom: 26px;
}
.home-hero-cta {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: #0E2E5C;
font-family: var(--font-head); font-size: .92rem; font-weight: 700;
padding: 13px 26px; border-radius: var(--radius-sm);
text-decoration: none; transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.home-hero-cta:hover { background: #E8F0FE; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); text-decoration: none; }
.home-hero-cta svg { transition: transform var(--tr); }
.home-hero-cta:hover svg { transform: translateX(3px); }
.home-hero-right {}
.home-search-box {
--hsb-bg: var(--fastlane-3, #DAEBFB);
--hsb-fg: var(--fastlane-3-fg, #0B3760);
--hsb-border: var(--fastlane-3-border, #BCD8F3);
--hsb-muted: color-mix(in srgb, var(--hsb-fg) 72%, transparent);
background: var(--hsb-bg);
color: var(--hsb-fg);
border: 1px solid var(--hsb-border);
border-radius: var(--radius);
overflow: visible;
box-shadow: 0 12px 32px color-mix(in srgb, var(--hsb-fg) 14%, transparent);
padding: 28px 28px 26px;
--quicklink-text: var(--hsb-fg);
--quicklink-border: color-mix(in srgb, var(--hsb-fg) 45%, transparent);
--quicklink-bg-hov: color-mix(in srgb, var(--hsb-fg) 12%, transparent);
}
.home-search-box h2 {
display: flex; align-items: flex-start; gap: 8px;
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
line-height: 1.35;
color: var(--hsb-fg); margin-bottom: 6px;
}
.home-search-box h2::before {
content: "";
width: 15px; height: 15px; flex-shrink: 0;
margin-top: 4px;
background-color: currentColor;
-webkit-mask: var(--hsb-magnifier) center / contain no-repeat;
mask: var(--hsb-magnifier) center / contain no-repeat;
}
:root {
--hsb-magnifier: url('data:image/svg+xml;utf8,\
');
}
.home-search-box > p {
font-size: .85rem; color: var(--hsb-muted); margin-bottom: 18px; line-height: 1.5;
}
.home-search-info { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.home-search-info-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0;
background: none;
color: color-mix(in srgb, var(--hsb-fg, #fff) 70%, transparent);
border: 0; border-radius: 999px;
cursor: pointer; transition: color var(--tr), opacity var(--tr);
}
.home-search-info-btn:hover,
.home-search-info-btn[aria-expanded="true"] {
color: var(--hsb-fg, #fff);
}
.home-search-info-btn:focus-visible {
outline: 2px solid var(--hsb-fg, rgba(255,255,255,.9)); outline-offset: 2px;
}
.home-search-info-pop {
position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
width: min(320px, 78vw);
background: var(--white); color: var(--dark);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 12px 14px;
text-align: left; cursor: default;
}
.home-search-info-pop[hidden] { display: none; }
.home-search-info-pop::before {
content: ''; position: absolute; top: -5px; left: 50%; margin-left: -5px;
width: 9px; height: 9px; background: var(--white);
border-left: 1px solid var(--gray-light); border-top: 1px solid var(--gray-light);
transform: rotate(45deg);
}
.home-search-info-pop .home-search-hint {
display: block; margin: 0; text-align: left;
font-size: .78rem; line-height: 1.55; color: var(--gray);
}
.home-quicklinks {
margin-top: 16px;
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
--ql-bg: var(--quicklink-bg, transparent);
--ql-bg-hov: var(--quicklink-bg-hov, rgba(255,255,255,.14));
--ql-border: var(--quicklink-border, rgba(255,255,255,.55));
--ql-text: var(--quicklink-text, #fff);
}
.home-quicklinks-label {
color: var(--hsb-muted, #fff); font-family: var(--font-head);
font-size: .82rem; font-weight: 700;
margin-right: 2px; white-space: nowrap;
}
.home-ql-pill {
display: inline-flex; align-items: center; gap: 6px;
background: var(--ql-bg); color: var(--ql-text);
border: 1px solid var(--ql-border); border-radius: 999px;
padding: 5px 12px; font-size: .78rem; font-weight: 600;
text-decoration: none; white-space: nowrap;
transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.home-ql-pill:hover {
background: var(--ql-bg-hov); border-color: var(--white); color: var(--ql-text);
text-decoration: none; transform: translateY(-1px);
}
.home-ql-pill:focus-visible {
outline: 2px solid #fff; outline-offset: 2px;
}
.home-ql-pill--login { padding-left: 5px; }
.home-ql-lock {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--ql-text);
opacity: .75;
}
.home-ql-pill--login:hover .home-ql-lock { opacity: 1; }
@media (max-width: 520px) { .home-quicklinks { gap: 6px; } }
.home-search-wrap {
display: flex; align-items: stretch;
background: #fff; border-radius: var(--radius-sm);
border: 1px solid var(--hsb-border, transparent);
box-shadow: 0 2px 8px color-mix(in srgb, var(--hsb-fg, #000) 10%, transparent);
overflow: hidden; margin-bottom: 12px;
transition: box-shadow var(--tr);
}
.home-search-wrap:focus-within {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--hsb-fg, #000) 28%, transparent),
0 2px 8px color-mix(in srgb, var(--hsb-fg, #000) 10%, transparent);
}
.home-search-wrap { overflow: visible; }
.home-search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.home-search-input-wrap .search-icon { position: absolute; left: 14px; color: var(--primary); pointer-events: none; flex-shrink: 0; }
.home-search-wrap input {
width: 100%; padding: 13px 44px 13px 44px;
font-family: var(--font-body); font-size: .93rem;
border: none; outline: none; color: var(--dark); background: transparent;
}
.home-search-wrap input::placeholder { color: var(--gray-mid); }
.home-search-btn {
width: 100%; padding: 13px;
background: var(--primary-dark); color: #fff;
border: none; border-radius: var(--radius-sm);
font-family: var(--font-head); font-size: .92rem; font-weight: 700;
cursor: pointer; transition: background var(--tr);
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.home-search-btn:hover { background: var(--dark); }
.home-add-section-label {
margin-top: 14px; margin-bottom: 2px;
font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.home-add-coming-link {
display: flex; align-items: center; gap: 5px;
margin-top: 5px; font-size: .83rem; font-weight: 600;
color: rgba(255,255,255,.28); cursor: default;
}
.home-coming-soon-label {
margin-top: 10px; margin-bottom: 1px;
font-size: .72rem; font-weight: 600; font-style: italic;
color: rgba(255,255,255,.35);
}
.home-action-columns {
display: flex; gap: 24px; margin-top: 24px;
}
.home-action-col {
display: flex; flex-direction: column; flex: 1;
}
.home-action-col .home-add-section-label { margin-top: 0; }
.home-add-active-link {
display: flex; align-items: center; gap: 5px;
margin-top: 6px; font-size: .83rem; font-weight: 600;
color: rgba(255,255,255,.85); text-decoration: none;
transition: color var(--tr);
}
.home-add-active-link:hover { color: #fff; text-decoration: none; }
.home-quicklinks-box {
background: var(--primary-pale2);
border-top: 1px solid rgba(92,63,165,.15);
padding: 0;
}
.home-quicklinks-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 14px 28px;
background: none; border: none; cursor: pointer;
text-align: left;
}
.home-quicklinks-toggle:hover { background: rgba(92,63,165,.05); }
.home-quicklinks-title {
font-family: var(--font-head);
font-size: .68rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
color: var(--dark);
}
.home-quicklinks-chevron {
color: var(--gray); flex-shrink: 0;
transition: transform .2s ease;
}
.home-quicklinks-toggle[aria-expanded="true"] .home-quicklinks-chevron {
transform: rotate(180deg);
}
.home-quicklinks-box .home-action-columns { padding: 0 28px 22px; margin-top: 0; }
.home-quicklinks-box .home-add-section-label { color: var(--primary); }
.home-quicklinks-box .home-add-active-link {
color: var(--primary);
}
.home-quicklinks-box .home-add-active-link:hover { color: var(--primary-dark); }
.home-quicklinks-box .home-add-coming-link { color: var(--gray-mid); }
.home-quicklinks-box .home-coming-soon-label { color: var(--gray-mid); }
.home-stats-bar {
background: var(--white);
border-bottom: 1px solid var(--gray-light);
box-shadow: 0 2px 12px rgba(92,63,165,.05);
}
.stats-bar-title {
max-width: 1200px; margin: 0 auto;
padding: 12px 24px 0;
font-size: .8rem; font-weight: 700;
color: var(--primary);
text-transform: uppercase; letter-spacing: .07em;
display: flex; align-items: center; gap: 8px;
}
.home-stats-inner {
max-width: 1200px; margin: 0 auto;
padding: 0 24px;
display: flex; align-items: stretch;
}
.stat-item {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 20px 16px; gap: 3px;
border-right: 1px solid var(--gray-light);
}
.stat-item:last-child { border-right: none; }
.stat-num {
font-family: var(--font-head); font-size: 1.65rem; font-weight: 700;
color: var(--primary); line-height: 1;
transition: color .15s;
}
.stat-label {
font-size: .78rem; color: var(--gray); text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
transition: color .15s;
}
.stat-item--link {
cursor: pointer;
transition: background .15s;
position: relative;
}
.stat-item--link:hover { background: var(--primary-pale2); }
.stat-item--link:hover .stat-num { color: var(--primary-dark); }
.stat-item--link:hover .stat-label { color: var(--primary); }
.stat-item--link .stat-label::after {
content: ' →';
opacity: 0;
transition: opacity .15s;
}
.stat-item--link:hover .stat-label::after { opacity: 1; }
.stat-item--link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.home-content {
max-width: 1200px; margin: 0 auto;
padding: 48px 24px 80px;
}
.home-profile[hidden] { display: none; }
.home-profile-inner {
display: flex; gap: 40px; align-items: center;
padding-top: 40px; padding-bottom: 8px;
}
.home-profile-text { flex: 1 1 auto; min-width: 0; }
.home-profile-title {
font-family: var(--font-head); font-weight: 700; color: var(--dark);
font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 12px;
}
.home-profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.home-profile-tag {
background: var(--primary-pale); color: var(--primary-dark, var(--primary));
font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}
.home-profile-body { color: var(--gray-dark, var(--dark)); font-size: 1rem; line-height: 1.7; max-width: 720px; }
.home-profile-media { flex: 0 0 340px; }
.home-profile-media img {
width: 100%; height: auto; max-height: 300px; object-fit: cover;
border-radius: 14px; box-shadow: var(--shadow); display: block;
}
@media (max-width: 820px) {
.home-profile-inner { flex-direction: column; align-items: stretch; gap: 20px; }
.home-profile-media { flex-basis: auto; }
}
.home-spotlight { background: transparent; }
.home-spotlight .home-content { padding-top: 8px; padding-bottom: 24px; }
.home-spotlight-box {
background: var(--fastlane-3, #DAEBFB);
border-radius: 18px;
margin: 0 -20px;
padding: 24px 20px 28px;
}
.home-spotlight-box .home-section-header { margin-bottom: 18px; }
.home-spotlight-body {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px; min-height: 40px;
}
@media (max-width: 1080px) {
.home-spotlight-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.home-spotlight-body { grid-template-columns: 1fr; }
}
.spotlight-card {
display: flex; gap: 14px; align-items: flex-start;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.spotlight-card-photo {
flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover;
border-radius: 8px; display: block;
}
.spotlight-card-photo-ph {
flex: 0 0 56px; width: 56px; height: 56px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--primary-pale); color: var(--primary);
}
.spotlight-card-photo-ph svg { opacity: .55; width: 26px; height: 26px; }
.spotlight-card-body { flex: 1 1 auto; min-width: 0; }
.spotlight-card-title {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
color: var(--dark); margin-bottom: 8px;
}
.spotlight-card-tags { margin-bottom: 12px; }
.spotlight-card-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spotlight-card-logo { height: 22px; width: auto; max-width: 90px; object-fit: contain; }
.spotlight-card-authority { font-size: .78rem; color: var(--gray); }
.spotlight-card-authority .ds-card-authority-label { font-weight: 600; color: var(--dark); }
.spotlight-card-open { margin-left: auto; }
.home-fastlane { background: transparent; }
.home-fastlane[hidden] { display: none; }
.home-fastlane .home-content { padding-top: 24px; padding-bottom: 8px; }
.home-fastlane-box {
background: transparent;
border-radius: 18px;
margin: 0 -20px;
padding: 8px 20px 12px;
}
.home-fastlane-box .home-section-header { margin-bottom: 18px; }
.home-fastlane-body {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px; min-height: 40px;
}
@media (max-width: 1000px) { .home-fastlane-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home-fastlane-body { grid-template-columns: 1fr; } }
.fastlane-card {
--fl-bg: var(--fastlane-1, #FFBA08);
--fl-fg: #0B3760;
--fl-btn: #8A6100;
--fl-btn-fg: var(--white);
--fl-border: transparent;
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
background: var(--fl-bg);
border: 1px solid var(--fl-border);
border-radius: var(--radius-sm);
padding: 16px 16px 14px;
transition: transform var(--tr), box-shadow var(--tr);
}
.fastlane-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.fastlane-card--1 {
--fl-bg: var(--fastlane-1, #FFBA08);
--fl-fg: var(--fastlane-1-fg, #0B3760);
--fl-btn: var(--fastlane-1-btn, #8A6100);
--fl-btn-fg: var(--fastlane-1-btn-fg, var(--white));
}
.fastlane-card--2 {
--fl-bg: var(--fastlane-2, #F6FAFD);
--fl-fg: var(--fastlane-2-fg, #0B3760);
--fl-btn: var(--fastlane-2-btn, #0B3760);
--fl-btn-fg: var(--fastlane-2-btn-fg, var(--white));
--fl-border: var(--fastlane-2-border, #C9DDF0);
}
.fastlane-card--3 {
--fl-bg: var(--fastlane-3, #DAEBFB);
--fl-fg: var(--fastlane-3-fg, #0B3760);
--fl-btn: var(--fastlane-3-btn, #115492);
--fl-btn-fg: var(--fastlane-3-btn-fg, var(--white));
--fl-border: var(--fastlane-3-border, #BCD8F3);
}
.fastlane-card--4 {
--fl-bg: var(--fastlane-4, #0B3760);
--fl-fg: var(--fastlane-4-fg, var(--white));
--fl-btn: var(--fastlane-4-btn, #FFBA08);
--fl-btn-fg: var(--fastlane-4-btn-fg, #0B3760);
}
.fastlane-card-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.fastlane-card-icon {
width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-xs);
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--fl-fg) 12%, transparent);
color: var(--fl-fg);
}
.fastlane-card-badge {
margin-left: auto;
display: inline-flex; align-items: center; gap: 4px;
background: transparent; color: var(--fl-fg);
border: 1px solid color-mix(in srgb, var(--fl-fg) 32%, transparent);
font-size: .68rem; font-weight: 600; line-height: 1.4;
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
opacity: .85;
}
.fastlane-card-title {
font-family: var(--font-head); font-size: .98rem; font-weight: 700;
color: var(--fl-fg); letter-spacing: -0.01em; margin-top: 2px;
}
.fastlane-card-text {
font-size: .82rem; line-height: 1.5;
color: var(--fl-fg); opacity: .82;
flex: 1 1 auto; margin-bottom: 4px;
}
.fastlane-card .fastlane-card-btn {
align-self: flex-start; margin-top: auto;
padding: 7px 12px; font-size: .78rem;
border-radius: var(--radius-xs);
background: var(--fl-btn); color: var(--fl-btn-fg);
}
.fastlane-card .fastlane-card-btn:hover {
background: color-mix(in srgb, var(--fl-btn) 82%, var(--dark));
color: var(--fl-btn-fg);
}
.home-themes { background: transparent; }
.home-themes[hidden] { display: none; }
.home-themes .home-content { padding-top: 24px; padding-bottom: 8px; }
.home-themes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
}
@media (max-width: 900px) { .home-themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home-themes-grid { grid-template-columns: 1fr; } }
.home-theme-card {
display: flex; align-items: center; gap: 11px;
padding: 10px 13px;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
text-decoration: none;
transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.home-theme-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow);
transform: translateY(-1px);
text-decoration: none;
}
.home-theme-card:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
.home-theme-icon {
flex: 0 0 34px;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-xs);
background: var(--primary-pale, color-mix(in srgb, var(--primary) 12%, var(--white)));
color: var(--primary);
}
.home-theme-icon svg { width: 19px; height: 19px; }
.home-theme-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.home-theme-name {
font-family: var(--font-head); font-size: .85rem; font-weight: 600;
color: var(--dark); line-height: 1.25;
}
.home-theme-meta {
display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.home-theme-count {
font-size: .76rem; font-weight: 700; color: var(--primary);
font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.home-theme-parent {
font-size: .72rem; color: var(--gray);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-theme-parent::before { content: '·'; margin-right: 6px; }
.home-themes-empty {
grid-column: 1 / -1;
margin: 0; padding: 18px 0;
color: var(--gray); font-size: .9rem; line-height: 1.5;
}
.home-section-header {
display: flex; flex-direction: column; align-items: flex-start;
margin-bottom: 20px;
}
.home-section-title {
font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
color: var(--dark); letter-spacing: -0.02em;
}
.home-section-title span { color: var(--primary); }
.home-section-sub {
margin-top: 6px; font-size: .88rem;
color: var(--gray); line-height: 1.55;
}
.home-section-header--linked {
flex-direction: row; align-items: baseline;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.home-section-link {
display: inline-flex; align-items: center; gap: 5px;
flex-shrink: 0;
font-size: .85rem; font-weight: 600;
color: var(--primary); text-decoration: none;
white-space: nowrap;
}
.home-section-link:hover { text-decoration: underline; color: var(--primary-dark); }
.home-section-link svg { flex-shrink: 0; }
.home-section-link[hidden] { display: none; }
.home-section-header--switch {
flex-direction: row; align-items: flex-start;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.home-section-header--switch .home-section-heading { min-width: 0; }
.home-themes-switch { flex-shrink: 0; padding-top: 2px; }
@media (max-width: 620px) {
.home-section-header--switch { flex-direction: column; gap: 12px; }
}
.ds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 18px;
}
.ds-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1.5px solid transparent;
border-top: 0;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.ds-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hov); border-color: var(--primary-pale); }
.ds-card--dexes { border-color: var(--primary-pale); }
.ds-card--dexes:hover { border-color: #C4B4E8; }
.ds-card-accent {
height: 7px; flex-shrink: 0;
background: linear-gradient(90deg,
var(--card-accent-from, var(--primary-dark)),
var(--card-accent-to, var(--primary-light)));
}
.ds-card-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ds-card-title-row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.ds-card-count-badge {
flex-shrink: 0;
background: var(--primary-pale); color: var(--primary);
font-size: .68rem; font-weight: 700;
padding: 2px 9px; border-radius: 20px;
white-space: nowrap; margin-top: 3px;
}
.ds-card-title {
font-family: var(--font-head); font-size: .975rem; font-weight: 600;
color: var(--primary); line-height: 1.35;
text-decoration: none;
}
.ds-card-title:hover { text-decoration: underline; }
.ds-card-desc {
font-size: .855rem; color: var(--gray); line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-card-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ds-card-type-badge {
display: inline-flex; align-items: center;
background: var(--primary-pale); color: var(--primary);
font-size: .68rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; white-space: nowrap;
padding: 2px 8px; border-radius: 20px;
}
.ds-card-authority {
font-size: .78rem; color: var(--gray);
}
.ds-card-authority-label {
font-weight: 600; color: var(--gray-mid);
}
.ds-card-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px; border-top: 1px solid var(--gray-light); gap: 12px;
}
.ds-card-logo {
width: 64px; height: 64px; object-fit: contain;
flex-shrink: 0; background: transparent;
}
.ds-card-logo-placeholder {
width: 64px; height: 64px; flex-shrink: 0;
background: var(--primary-pale); border-radius: var(--radius-xs);
display: flex; align-items: center; justify-content: center;
}
.ds-card-logo-placeholder svg { color: var(--primary-light); }
.ds-goto-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 8px 14px; font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: background var(--tr);
white-space: nowrap;
}
.ds-goto-btn:hover { background: var(--primary-dark); text-decoration: none; color: var(--white); }
.ds-card--compact .ds-card-body { padding: 16px 18px 14px; gap: 8px; }
.ds-card--compact .ds-card-footer { padding-top: 10px; gap: 10px; }
.ds-card-footer-meta {
display: flex; align-items: center; gap: 10px;
min-width: 0; flex: 1 1 auto;
}
.ds-card--compact .ds-card-logo {
width: auto; height: 22px; max-width: 108px;
}
.ds-card--compact .ds-card-logo-placeholder {
width: 22px; height: 22px; border-radius: var(--radius-xs);
}
.ds-card--compact .ds-card-logo-placeholder svg { width: 14px; height: 14px; }
@media (max-width: 400px) {
.ds-card--compact .ds-card-footer { flex-wrap: wrap; }
}
.ds-card-trust {
display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--gray-light);
font-size: .72rem; color: var(--gray);
}
.ds-trust-label { font-weight: 600; white-space: nowrap; }
.ds-trust-logo { height: 14px; width: auto; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.ds-trust-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.ds-trust-link:hover { text-decoration: underline; }
.ds-trust-extra { color: var(--gray-mid); }
.ds-card-more {
background: var(--primary-pale2);
border: 1.5px dashed var(--primary-light);
border-radius: var(--radius);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; padding: 32px 24px; text-align: center;
color: var(--primary);
min-height: 160px;
}
.ds-card-more svg { opacity: .5; }
.ds-card-more-title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; }
.ds-card-more-sub { font-size: .82rem; color: var(--gray); }
/* ── css/request.css ── */
.request-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
.request-hero {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
border-radius: var(--radius);
padding: 32px 36px;
margin-bottom: 28px;
color: var(--white);
}
.request-back-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.75);
text-decoration: none; margin-bottom: 18px;
transition: color var(--tr);
}
.request-back-link:hover { color: var(--white); text-decoration: none; }
.request-hero h1 {
font-family: var(--font-head); font-size: clamp(1.2rem,3vw,1.75rem); font-weight: 700;
color: var(--white); margin-bottom: 10px; line-height: 1.25; letter-spacing: -0.02em;
}
.request-hero p {
font-size: .9rem; color: rgba(255,255,255,.80); line-height: 1.6; max-width: 560px;
}
.request-section-title {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
color: var(--dark2); margin-bottom: 18px; line-height: 1.3;
}
.request-body { }
.request-resource-heading {
font-family: var(--font-head);
font-size: .82rem; font-weight: 700;
color: var(--gray-mid);
text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 8px 2px;
}
.request-dataset-card {
display: flex; align-items: center; gap: 14px;
background: var(--primary-pale2); border: 1.5px solid var(--primary-pale);
border-radius: var(--radius); padding: 16px 20px; margin-bottom: 28px;
}
.request-dataset-icon {
width: 42px; height: 42px; flex-shrink: 0;
background: var(--primary-pale); border-radius: var(--radius-xs);
display: flex; align-items: center; justify-content: center;
color: var(--primary);
}
.request-dataset-label {
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--gray-mid); margin-bottom: 3px;
}
.request-dataset-title {
font-family: var(--font-head); font-size: .95rem; font-weight: 700;
color: var(--dark2); line-height: 1.3;
}
.request-dataset-owner {
display: flex; align-items: center; gap: 4px;
font-size: .78rem; color: var(--gray); margin-top: 4px;
}
.request-form { display: flex; flex-direction: column; gap: 0; }
.request-form-section {
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius); padding: 24px 24px 20px;
margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.request-form-section h2 {
font-family: var(--font-head); font-size: .9rem; font-weight: 700;
color: var(--dark2); margin-bottom: 18px; padding-bottom: 10px;
border-bottom: 1px solid var(--gray-light);
}
.request-form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 16px;
}
.request-form-row:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .request-form-row { grid-template-columns: 1fr; } }
.request-field { display: flex; flex-direction: column; gap: 5px; }
.request-field > label {
font-size: .78rem; font-weight: 600; color: var(--dark2);
}
.request-field input[type="text"],
.request-field input[type="email"],
.request-field input[type="url"],
.request-field input[type="date"],
.request-field select,
.request-field textarea {
font-family: var(--font-body); font-size: .88rem; color: var(--dark);
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 9px 12px; background: var(--white);
transition: border-color var(--tr), box-shadow var(--tr);
outline: none; width: 100%; box-sizing: border-box;
}
.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,60,180,.12);
}
.request-field textarea { resize: vertical; min-height: 120px; }
.request-field select { appearance: auto; }
.req-required { color: var(--primary); font-weight: 700; }
.request-field-check { flex-direction: row; }
.request-check-label {
display: flex; align-items: flex-start; gap: 10px;
font-size: .84rem; color: var(--dark); line-height: 1.5; cursor: pointer;
}
.request-check-label input[type="checkbox"] {
margin-top: 2px; flex-shrink: 0; accent-color: var(--primary);
width: 15px; height: 15px;
}
.request-form-footer {
display: flex; align-items: center; gap: 14px;
padding-top: 4px; flex-wrap: wrap;
}
.request-submit-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 22px;
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .9rem; font-weight: 600;
cursor: pointer; transition: background var(--tr); text-decoration: none;
}
.request-submit-btn:hover { background: var(--primary-dark); }
.request-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.request-cancel-btn {
font-size: .85rem; color: var(--gray); font-weight: 500;
text-decoration: none;
}
.request-cancel-btn:hover { color: var(--dark); }
.request-success-msg {
display: flex; align-items: flex-start; gap: 14px;
background: #edfaf3; border: 1.5px solid #34c472;
border-radius: var(--radius); padding: 18px 20px; margin-top: 4px;
color: #1a6636;
}
.request-success-msg svg { flex-shrink: 0; color: #34c472; margin-top: 2px; }
.request-success-msg strong { font-weight: 700; display: block; margin-bottom: 4px; }
.request-success-msg p { font-size: .86rem; margin: 0; line-height: 1.5; }
/* ── css/publish-wizard.css ── */
.publish-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
.publish-hero {
position: relative;
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
border-radius: var(--radius); padding: 32px 36px; margin-bottom: 28px; color: var(--white);
}
.publish-hero h1 {
font-family: var(--font-head); font-size: clamp(1.2rem,3vw,1.75rem); font-weight: 700;
color: var(--white); margin-bottom: 10px; line-height: 1.25; letter-spacing: -0.02em;
}
.publish-hero p { font-size: .9rem; color: rgba(255,255,255,.80); line-height: 1.6; max-width: 600px; }
.pub-hero-actions {
position: absolute; right: 20px; bottom: 18px;
display: flex; flex-direction: row; align-items: center; gap: 8px;
flex-wrap: nowrap;
}
.pub-hero-actions-icons { display: flex; gap: 6px; }
.pub-btn-publish-hero {
background: var(--white); color: var(--primary-dark);
border: none; border-radius: var(--radius-sm);
padding: 9px 16px; font-family: var(--font-body); font-size: .84rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.14);
transition: background var(--tr), opacity var(--tr);
}
.pub-btn-publish-hero:hover:not(:disabled) { background: #f2f4fd; }
.pub-btn-publish-hero:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
@media (max-width: 600px) {
.publish-hero { padding-bottom: 24px; }
.pub-hero-actions {
position: static; right: auto; bottom: auto;
flex-direction: row; align-items: center; justify-content: flex-start;
flex-wrap: wrap; margin-top: 18px;
}
}
.pub-stepper,
.pub-substepper {
display: flex; align-items: center;
margin-bottom: 28px; overflow-x: auto; padding-bottom: 4px;
}
.pub-substepper {
margin: -4px 0 24px; padding: 14px 4px 16px;
border-bottom: 1px solid var(--gray-light);
}
.pub-step-item {
display: flex; flex-direction: column; align-items: center;
gap: 6px; flex-shrink: 0;
background: transparent; border: none; padding: 0 6px;
font-family: var(--font-body); cursor: pointer;
}
.pub-step-item:hover .pub-step-circle {
background: var(--white); border-color: var(--primary-light); color: var(--primary);
}
.pub-step-item:hover .pub-step-label { color: var(--primary); }
.pub-step-circle {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-size: .78rem; font-weight: 700;
background: var(--gray-light); color: var(--gray-mid);
border: 2px dotted var(--gray-mid);
transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.pub-step-circle-wrap { position: relative; display: inline-flex; padding-bottom: 7px; }
.pub-step-flag {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
padding: 1px 7px; border-radius: 999px; white-space: nowrap;
font-family: var(--font-body); font-size: .58rem; font-weight: 700;
letter-spacing: .02em; text-transform: lowercase;
border: 1px solid var(--white);
}
.pub-step-flag-required { background: #2c5282; color: var(--white); }
.pub-step-flag-recommended { background: #2f855a; color: var(--white); }
.pub-step-flag-optional { background: var(--gray-light); color: #4a5568; }
.pub-step-label {
font-size: .72rem; font-weight: 600; color: var(--gray-mid);
white-space: nowrap; transition: color var(--tr);
}
.pub-step-item.pub-step-active .pub-step-circle {
background: var(--primary); color: var(--white);
border: 2px solid var(--primary);
}
.pub-step-item.pub-step-active .pub-step-label { color: var(--primary); }
.pub-step-item.pub-step-done .pub-step-circle {
background: #eef1fb; color: var(--primary);
border: 2px solid var(--primary);
}
.pub-step-item.pub-step-done .pub-step-label { color: var(--primary); }
.pub-step-line {
flex: 1; height: 2px; background: var(--gray-light); min-width: 24px; max-width: 60px;
transition: background var(--tr);
}
.pub-step-line.pub-step-line-done { background: var(--primary); }
.pub-panels { margin-bottom: 20px; }
.pub-panel-hidden { display: none !important; }
.pub-substep-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 22px; padding-top: 18px;
border-top: 1px solid var(--gray-light);
}
.pub-substep-nav .pub-substep-prev { text-decoration: none; }
.pub-substep-nav button[disabled] { opacity: 0.6; cursor: not-allowed; }
.pub-substep-nav-right {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
justify-content: flex-end;
}
.pub-btn-continue.pub-part-next {
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light);
}
.pub-btn-continue.pub-part-next:hover:not(:disabled) {
background: var(--primary-pale2); border-color: var(--primary);
}
@media (max-width: 540px) {
.pub-substepper { gap: 2px; }
.pub-substepper .pub-step-label { display: none; }
.pub-substep-nav { flex-direction: row; }
.pub-substep-nav-right { flex-direction: column; align-items: stretch; }
}
.pub-heading-mandatory {
font-family: var(--font-body); font-size: .78rem; font-weight: 600;
color: var(--red); letter-spacing: 0; vertical-align: middle;
}
.request-form-section.pub-collapsible { padding: 0; overflow: visible; }
.request-form-section.pub-collapsible.is-collapsed { overflow: hidden; }
.request-form-section.pub-collapsible > .pub-collapsible-toggle:first-child {
border-radius: var(--radius) var(--radius) 0 0;
}
.pub-collapsible-toggle {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 14px 20px; background: none; border: none;
font-family: var(--font-head); font-size: .9rem; font-weight: 700;
color: var(--dark2); text-align: left; cursor: pointer;
}
.pub-collapsible-toggle:hover { background: var(--gray-pale); }
.pub-collapsible-chev { display: inline-flex; color: var(--gray-mid); transition: transform var(--tr); }
.pub-collapsible.is-collapsed .pub-collapsible-chev { transform: rotate(-90deg); }
.pub-collapsible-title { flex: 1; }
.pub-collapsible-body { padding: 4px 20px 20px; }
.pub-collapsible.is-collapsed .pub-collapsible-body { display: none; }
.pub-panel-header { margin-bottom: 20px; }
.pub-panel-header:has(> .pub-info-next-top) {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 16px;
align-items: start;
}
.pub-panel-header:has(> .pub-info-next-top) > * { grid-column: 1 / -1; }
.pub-panel-header:has(> .pub-info-next-top) > h2 { grid-column: 1; grid-row: 1; }
.pub-panel-header > .pub-info-next-top {
grid-column: 2; grid-row: 1;
justify-self: end; align-self: start;
margin: 0;
}
@media (max-width: 560px) {
.pub-panel-header:has(> .pub-info-next-top) { grid-template-columns: 1fr; }
.pub-panel-header > .pub-info-next-top {
grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px;
}
}
.pub-panel-header h2 {
font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
color: var(--dark2); margin-bottom: 6px;
}
.pub-panel-header.pub-panel-toprow h2 { font-size: 1.15rem; }
.pub-panel-header > p,
.pub-panel-header .pub-bron-actions-head-text > p,
.pub-panel-header .pub-panel-toprow-text > p {
font-family: var(--font-body);
font-size: .88rem; color: var(--gray); line-height: 1.6; max-width: 640px;
}
.pub-type-heading { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pub-type-heading-icon {
display: inline-flex; line-height: 0;
color: var(--primary);
}
.pub-type-heading-icon svg { width: 20px; height: 20px; }
.pub-panel-toprow {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 16px;
}
.pub-panel-toprow-text { flex: 1 1 320px; min-width: 0; }
.pub-panel-toprow-title {
flex: 1 1 auto; min-width: 0;
font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
color: var(--dark2); margin: 0;
}
.pub-panel-toprow-lead {
font-family: var(--font-body);
font-size: .88rem; color: var(--gray); line-height: 1.6;
max-width: 640px; margin: 4px 0 0;
}
.pub-panel-toprow > .pub-btn-continue { flex: 0 0 auto; }
@media (max-width: 640px) {
.pub-panel-toprow > .pub-btn-continue { width: 100%; justify-content: center; }
}
.pub-bron-next-btn.is-ready,
.pub-substep-nav-right .pub-btn-continue.is-ready,
#pubInfoPartNext.is-ready,
#pubDelenPartNext.is-ready,
.pub-btn-check-offer.is-ready {
border-color: #2f855a;
color: #2f855a;
background: #f0fff4;
}
.pub-bron-next-btn.is-ready:hover,
#pubInfoPartNext.is-ready:hover,
#pubDelenPartNext.is-ready:hover,
.pub-btn-check-offer.is-ready:hover {
background: #e6ffed;
border-color: #276749;
color: #276749;
}
.pub-bron-next-btn.is-ready::before,
#pubInfoPartNext.is-ready::before,
#pubDelenPartNext.is-ready::before,
.pub-btn-check-offer.is-ready::before {
content: '';
flex: 0 0 auto;
width: 8px; height: 8px; border-radius: 50%;
background: #2f855a;
}
.pub-btn-check-offer.is-busy {
border-color: #c05621;
color: #c05621;
background: #fffaf0;
cursor: progress;
}
.pub-btn-check-offer.is-busy::before {
content: '';
flex: 0 0 auto;
width: 8px; height: 8px; border-radius: 50%;
background: #dd6b20;
animation: pubBusyPulse 1s ease-in-out infinite;
}
.pub-btn-check-offer.is-busy.is-ready {
border-color: #c05621; color: #c05621; background: #fffaf0;
}
.pub-btn-check-offer.is-busy.is-ready::before { background: #dd6b20; }
@keyframes pubBusyPulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
.pub-required-note, .pub-recommended-note, .pub-optional-note, .pub-info-box {
display: flex; align-items: flex-start; gap: 8px;
font-size: .78rem; line-height: 1.5; border-radius: var(--radius-sm);
padding: 10px 14px; margin-top: 12px;
}
.pub-required-note { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.pub-recommended-note{ background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.pub-optional-note { background: #fafaf9; color: var(--gray); border: 1px solid var(--gray-light); }
.pub-info-box { background: rgba(26,79,160,.06); color: #1A4FA0; border: 1px solid rgba(26,79,160,.15); }
.pub-info-box code { background: rgba(26,79,160,.12); border-radius: 3px; padding: 1px 5px; font-size: .84em; }
.pub-required-note svg, .pub-recommended-note svg, .pub-optional-note svg, .pub-info-box svg {
flex-shrink: 0; margin-top: 1px;
}
.pub-step-na {
display: flex; align-items: center; gap: 10px;
font-size: .88rem; line-height: 1.5;
padding: 16px 18px; margin-top: 16px;
border-radius: var(--radius-sm);
background: var(--gray-pale);
color: var(--gray);
border: 1px dashed var(--gray-light);
}
.pub-step-na svg { flex-shrink: 0; color: var(--gray-mid); }
.pub-subsection-title {
font-family: var(--font-head); font-size: .82rem; font-weight: 700;
color: var(--dark2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.pub-section-label { font-size: .78rem; font-weight: 600; color: var(--dark2); }
.pub-optional-badge {
font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
background: var(--gray-light); color: var(--gray-mid);
border-radius: 20px; padding: 2px 8px;
}
.pub-field-hint {
display: block; font-size: .75rem; color: var(--gray); line-height: 1.45; margin-top: 4px;
}
.pub-access-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
@media (max-width: 600px) { .pub-access-grid { grid-template-columns: 1fr; } }
.pub-access-card {
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 14px 16px; cursor: pointer;
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.pub-access-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.pub-access-card.pub-access-selected {
border-color: var(--primary); background: var(--primary-pale2);
box-shadow: 0 0 0 3px rgba(99,60,180,.1);
}
.pub-access-label {
font-weight: 700; font-size: .88rem; color: var(--dark2); margin-bottom: 4px;
}
.pub-access-selected .pub-access-label { color: var(--primary); }
.pub-access-desc { font-size: .76rem; color: var(--gray); line-height: 1.4; }
.pub-search-input {
width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: .86rem;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 8px 12px; margin-bottom: 10px; outline: none;
transition: border-color var(--tr);
}
.pub-search-input:focus { border-color: var(--primary); }
.pub-theme-list {
max-height: 220px; overflow-y: auto; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 6px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 2px;
}
@media (max-width: 500px) { .pub-theme-list { grid-template-columns: 1fr; } }
.pub-theme-item {
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
border-radius: 4px; cursor: pointer; font-size: .82rem; color: var(--dark);
transition: background var(--tr);
}
.pub-theme-item:hover { background: var(--primary-pale2); }
.pub-theme-item input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }
#pubConformsList { display: block; max-height: 300px; }
.pub-conforms-group {
display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
margin-bottom: 8px;
}
@media (max-width: 500px) { .pub-conforms-group { grid-template-columns: 1fr; } }
.pub-conforms-group-title {
grid-column: 1 / -1;
margin: 6px 0 2px; padding: 0 8px;
font-size: .7rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--gray);
}
.pub-conforms-group:first-child .pub-conforms-group-title { margin-top: 0; }
#pubLocationList { display: block; max-height: 300px; }
.pub-location-empty,
.pub-location-status {
margin: 8px 0 0; font-size: .78rem; color: var(--gray);
}
.pub-location-empty { padding: 12px 8px; margin: 0; }
.pub-location-optin {
display: flex; align-items: center; gap: 8px; margin-top: 10px;
font-size: .8rem; color: var(--dark); cursor: pointer;
}
.pub-location-optin input[type="checkbox"] { accent-color: var(--primary); }
.pub-location-optin input:disabled + span { opacity: .55; }
.pub-location-optin.is-soon { cursor: not-allowed; }
.pub-location-optin-soon {
display: inline-block; padding: 1px 8px; border-radius: 999px;
background: var(--gray-pale, #eee); color: var(--gray);
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.pub-theme-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pub-theme-badges:empty { display: none; }
.pub-location-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pub-location-tags:empty { display: none; }
.pub-lang-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-lang-item {
display: flex; align-items: center; gap: 6px;
background: var(--gray-light2, #f7f7f9); border: 1.5px solid var(--gray-light);
border-radius: 20px; padding: 5px 14px; font-size: .82rem;
cursor: pointer; transition: border-color var(--tr), background var(--tr);
}
.pub-lang-item:has(input:checked) { border-color: var(--primary); background: var(--primary-pale2); color: var(--primary); }
.pub-lang-item input[type="checkbox"] { accent-color: var(--primary); }
.pub-tag-wrap {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 8px 10px; min-height: 44px; cursor: text;
transition: border-color var(--tr);
}
.pub-tag-wrap:focus-within { border-color: var(--primary); }
.pub-tag {
display: inline-flex; align-items: center; gap: 4px;
background: var(--primary-pale2); border: 1px solid rgba(92,63,165,.2);
color: var(--primary); border-radius: 20px;
padding: 3px 10px 3px 12px; font-size: .78rem; font-weight: 500;
}
.pub-tag button {
background: none; border: none; color: var(--primary); cursor: pointer;
font-size: .95rem; line-height: 1; padding: 0; opacity: .7;
}
.pub-tag button:hover { opacity: 1; }
.pub-tag-input {
border: none; outline: none; font-family: var(--font-body); font-size: .86rem;
color: var(--dark); background: transparent; flex: 1; min-width: 140px; padding: 2px 0;
}
kbd {
display: inline-block; padding: 1px 5px; font-size: .72rem;
border: 1px solid var(--gray-light); border-radius: 3px;
background: var(--gray-light); color: var(--gray);
font-family: monospace;
}
.pub-policy-cards { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pub-policy-card {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(92,63,165,.05); border: 1px solid rgba(92,63,165,.18);
border-radius: var(--radius-sm); padding: 10px 12px;
}
.pub-policy-card-body { flex: 1; font-size: .83rem; line-height: 1.55; color: var(--dark); }
.pub-policy-authority-badge {
display: inline-block; background: var(--primary); color: #fff;
border-radius: 20px; padding: 2px 10px; font-size: .71rem; font-weight: 600;
margin-right: 8px; vertical-align: middle; white-space: nowrap;
}
.pub-policy-card-desc { vertical-align: middle; }
.pub-policy-card-remove {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--gray); font-size: 1.15rem; line-height: 1; padding: 0 2px;
margin-top: 1px; transition: color var(--tr);
}
.pub-policy-card-remove:hover { color: #e53e3e; }
.pub-policy-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pub-policy-card-name { font-size: .83rem; font-weight: 600; color: var(--dark); }
.pub-policy-card-description {
margin: 0; font-size: .78rem; color: var(--gray);
line-height: 1.5; font-style: italic;
}
.pub-btn-secondary.pub-auth-check-btn {
display: inline-flex; align-items: center; gap: 7px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 8px 14px; font-family: var(--font-body);
font-size: .82rem; font-weight: 600; cursor: pointer;
transition: background var(--tr), border-color var(--tr);
margin-top: 12px;
}
.pub-btn-secondary.pub-auth-check-btn:hover:not(:disabled) {
background: var(--primary-pale2); border-color: var(--primary);
}
.pub-btn-secondary.pub-auth-check-btn:disabled { opacity: .6; cursor: progress; }
.pub-auth-result:not(:empty) { margin-top: 12px; }
.pub-auth-lead, .pub-auth-loading, .pub-auth-empty, .pub-auth-error {
font-size: .82rem; line-height: 1.55; margin: 0;
}
.pub-auth-lead { color: var(--dark2); font-weight: 600; margin-bottom: 6px; }
.pub-auth-loading{ color: var(--gray); }
.pub-auth-empty { color: var(--gray); }
.pub-auth-error { color: var(--amber, #b45309); }
.pub-auth-list { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 6px; }
.pub-auth-row {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
padding: 7px 10px;
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
background: var(--white);
font-size: .82rem;
}
.pub-auth-org { font-weight: 600; color: var(--dark2); }
.pub-auth-eori { color: var(--gray); font-size: .74rem; }
.pub-auth-type {
font-size: .68rem; font-weight: 600; letter-spacing: .03em;
color: var(--primary-dark); background: var(--primary-pale2);
border-radius: 999px; padding: 2px 8px;
}
.pub-auth-view {
margin-left: auto;
background: none; border: 0; padding: 0;
color: var(--primary); font-family: var(--font-body);
font-size: .78rem; font-weight: 600; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.pub-auth-view:hover { color: var(--primary-dark); }
.pub-archived-banner {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 14px; padding: 10px 14px;
border-radius: var(--radius-sm, 8px);
background: #EEF0F3; border: 1px solid #C9CED6;
color: var(--dx-text, #0b2238); font-size: .88rem; line-height: 1.45;
}
.pub-archived-badge {
flex-shrink: 0; padding: 4px 12px; border-radius: 20px;
background: #4A5360; color: #FFFFFF;
font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pub-btn-icon:disabled,
.pub-btn-icon[aria-disabled="true"] {
opacity: .4; cursor: not-allowed; pointer-events: auto;
background: transparent; border-color: var(--dx-border, #d6dde4);
}
.pub-btn-icon:disabled:hover { background: transparent; border-color: var(--dx-border, #d6dde4); }
/* ── css/publish-offers.css ── */
.pub-offers-section { }
.pub-offers-list {
display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.pub-offers-empty {
padding: 16px; border: 1px dashed var(--gray-light);
border-radius: var(--radius-sm); color: var(--gray);
font-size: .85rem; text-align: center; background: rgba(0,0,0,.01);
}
.pub-offer-card {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px; background: #fff;
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
box-shadow: 0 1px 2px rgba(0,0,0,.03);
transition: border-color var(--tr), box-shadow var(--tr);
}
.pub-offer-card:hover { border-color: var(--primary); box-shadow: 0 2px 6px rgba(92,63,165,.08); }
.pub-offer-card-main { flex: 1; min-width: 0; }
.pub-offer-card-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.pub-offer-card-num {
display: inline-block; background: var(--primary); color: #fff;
padding: 2px 10px; border-radius: 20px;
font-size: .71rem; font-weight: 700; letter-spacing: .02em;
}
.pub-offer-card-target {
font-weight: 600; color: var(--dark); font-size: .9rem;
}
.pub-offer-card-sub {
font-size: .82rem; color: var(--dark2); line-height: 1.5; margin-bottom: 4px;
}
.pub-offer-card-sub strong,
.pub-offer-card-policies strong {
color: var(--gray); font-weight: 600; font-size: .75rem;
text-transform: uppercase; letter-spacing: .03em; margin-right: 4px;
}
.pub-offer-card-policies {
font-size: .82rem; color: var(--dark2); line-height: 1.55;
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
}
.pub-offer-card-policy {
display: inline-block; padding: 2px 8px;
background: rgba(92,63,165,.08); color: var(--primary-dark, var(--primary));
border-radius: 4px; font-size: .78rem; font-weight: 500;
}
.pub-offer-card-policy-none { background: transparent; color: var(--gray); font-style: italic; }
.pub-offer-card-gaps {
display: flex; flex-direction: column; gap: 2px;
margin-top: 4px;
}
.pub-offer-gap {
font-size: .82rem; line-height: 1.5; color: var(--dark2);
}
.pub-offer-gap-label { font-weight: 600; }
.pub-offer-gap-cta {
appearance: none; background: none; border: 0; padding: 0 0 0 4px;
font: inherit; font-weight: 700; cursor: pointer;
color: var(--amber, #b7791f);
text-decoration: underline; text-underline-offset: 2px;
}
.pub-offer-gap-cta:hover,
.pub-offer-gap-cta:focus-visible { color: var(--amber-strong, #92400e); }
.pub-offer-card-status {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 8px; font-size: 12px; line-height: 1.45;
}
.pub-offer-card-status-mark { font-weight: 700; }
.pub-offer-card-status-text { font-weight: 600; }
.pub-offer-card-status-detail { color: var(--gray); }
.pub-offer-card-status--ok { color: #2f855a; }
.pub-offer-card-status--warn,
.pub-offer-card-status--stale { color: var(--amber, #b7791f); }
.pub-offer-card-status--error { color: #c53030; }
.pub-offer-card-status--busy { color: var(--gray); }
.pub-offer-card-actions {
display: flex; gap: 4px; flex-shrink: 0;
}
.pub-offer-card-edit,
.pub-offer-card-remove {
background: transparent; border: 1px solid transparent;
width: 28px; height: 28px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--gray); transition: all var(--tr);
}
.pub-offer-card-edit:hover { color: var(--primary); background: rgba(92,63,165,.07); }
.pub-offer-card-remove:hover { color: #e53e3e; background: rgba(229,62,62,.08); }
.pub-btn-offer-add {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px; border: 1px dashed var(--primary);
background: transparent; color: var(--primary);
border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .85rem; font-weight: 600;
cursor: pointer; transition: all var(--tr);
}
.pub-btn-offer-add:hover { background: rgba(92,63,165,.06); }
.pub-offers-foot {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin-top: 14px;
}
.pub-offer-flow {
margin-bottom: 12px; padding: 16px;
background: #fafbff; border: 1px solid var(--primary);
border-radius: var(--radius);
}
.pub-offer-flow-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1px solid var(--gray-light);
}
.pub-offer-flow-header h4 {
margin: 0; font-family: var(--font-heading);
font-size: 1.05rem; font-weight: 700; color: var(--dark);
}
.pub-offer-flow-close {
background: transparent; border: none; cursor: pointer;
color: var(--gray); padding: 4px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--tr);
}
.pub-offer-flow-close:hover { color: var(--dark); background: var(--gray-light); }
.pub-offer-accordion {
background: #fff; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
transition: border-color var(--tr), opacity var(--tr);
}
.pub-offer-accordion-open { border-color: var(--primary); }
.pub-offer-accordion-disabled {
opacity: 0.6; pointer-events: none;
}
.pub-offer-accordion-disabled .pub-offer-accordion-body { display: none; }
.pub-offer-accordion-head {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px; background: #fafafa;
border-bottom: 1px solid var(--gray-light);
}
.pub-offer-accordion-title {
font-weight: 700; font-size: .92rem; color: var(--dark);
}
.pub-offer-accordion-status {
font-size: .78rem; color: var(--gray); font-weight: 500;
}
.pub-offer-accordion-status-ok {
color: var(--green); font-weight: 700; font-size: 1rem;
}
.pub-offer-accordion-status-required {
display: inline-flex; align-items: center;
padding: 2px 9px; border-radius: 999px;
background: var(--primary-pale2); color: var(--primary);
font-size: .68rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
}
.pub-offer-accordion-title .pub-offer-accordion-status-required {
margin-left: 8px;
vertical-align: middle;
}
.pub-offer-accordion-locked {
border-color: var(--primary-pale);
background: var(--primary-pale2);
}
.pub-offer-accordion-locked .pub-offer-accordion-head {
background: var(--primary-pale2);
}
.pub-offer-accordion-body {
padding: 14px;
}
.pub-offer-choices {
display: flex; flex-direction: column; gap: 8px;
}
.pub-offer-choice {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); background: #fff;
cursor: pointer; transition: all var(--tr);
}
.pub-offer-choice:hover { border-color: var(--primary); background: rgba(92,63,165,.03); }
.pub-offer-choice input[type="radio"] { display: none; }
.pub-offer-choice-radio {
flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
border-radius: 50%; border: 2px solid var(--gray);
background: #fff; position: relative; transition: all var(--tr);
}
.pub-offer-choice.is-selected .pub-offer-choice-radio {
border-color: var(--primary);
}
.pub-offer-choice.is-selected .pub-offer-choice-radio::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 10px; height: 10px; border-radius: 50%;
background: var(--primary); transform: translate(-50%, -50%);
}
.pub-offer-choice.is-selected { border-color: var(--primary); background: rgba(92,63,165,.04); }
.pub-offer-choice-body {
display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.pub-offer-choice-label { font-size: .9rem; font-weight: 600; color: var(--dark); line-height: 1.3; }
.pub-offer-choice-desc {
font-size: .8rem; color: var(--gray); line-height: 1.4;
}
.pub-offer-choice-count {
align-self: center;
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 999px;
background: var(--primary); color: #fff;
font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.pub-offer-choice-count[hidden] { display: none; }
.pub-offer-members {
margin: -2px 0 2px 30px;
padding: 12px 14px;
background: var(--primary-pale2);
border: 1px solid var(--primary-pale);
border-left: 3px solid var(--primary);
border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
.pub-offer-members { margin-left: 12px; padding: 10px 12px; }
}
.pub-offer-members-tags {
display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.pub-offer-marketplace {
margin: -2px 0 2px 30px;
padding: 12px 14px;
background: var(--primary-pale2);
border: 1px solid var(--primary-pale);
border-left: 3px solid var(--primary);
border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
.pub-offer-marketplace { margin-left: 12px; padding: 10px 12px; }
}
.pub-offer-marketplace-wrap { position: relative; margin-top: 4px; }
.pub-offer-marketplace-select {
width: 100%;
padding: 9px 12px;
font-size: .88rem; color: var(--dark);
background: #fff;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
transition: border-color var(--tr), box-shadow var(--tr);
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 34px;
}
.pub-offer-marketplace-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(92,63,165,.12);
outline: none;
}
.pub-offer-marketplace-select:disabled {
background-color: var(--off-white);
color: var(--gray);
cursor: not-allowed;
}
.pub-offer-groups {
margin: -2px 0 2px 30px;
padding: 12px 14px;
background: var(--primary-pale2);
border: 1px solid var(--primary-pale);
border-left: 3px solid var(--primary);
border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
.pub-offer-groups { margin-left: 12px; padding: 10px 12px; }
}
.pub-offer-groups-list {
display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
}
.pub-offer-group-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: #fff; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
cursor: pointer; transition: border-color var(--tr), background var(--tr);
}
.pub-offer-group-item:hover { border-color: var(--primary); }
.pub-offer-group-item input[type="checkbox"] {
width: 16px; height: 16px; accent-color: var(--primary); margin: 0;
}
.pub-offer-group-label {
font-size: .88rem; color: var(--dark);
}
.pub-loc-wrap { position: relative; }
.pub-offer-member-tag {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 8px 12px;
background: #fff; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
}
.pub-offer-member-name { font-size: .85rem; color: var(--dark); }
.pub-offer-member-remove {
background: transparent; border: none; cursor: pointer;
width: 24px; height: 24px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
color: var(--gray); transition: all var(--tr);
}
.pub-offer-member-remove:hover { color: #e53e3e; background: rgba(229,62,62,.08); }
.pub-offer-flow-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--gray-light);
}
.pub-offer-members-chosen {
margin-bottom: 8px;
}
.pub-offer-members-chosen-title {
font-size: .75rem; font-weight: 600; color: var(--dark2);
text-transform: uppercase; letter-spacing: .03em;
margin-bottom: 6px;
}
.pub-offer-members-empty-state {
font-size: .82rem; color: var(--gray); font-style: italic;
padding: 4px 0;
}
.pub-policy-list {
display: flex; flex-direction: column; gap: 8px;
margin-top: 4px;
}
.pub-policy-row {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
transition: border-color var(--tr), box-shadow var(--tr);
}
.pub-policy-row.is-active {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary-pale) inset;
}
.pub-policy-row-expandable .pub-policy-row-main { cursor: pointer; }
.pub-policy-row-expandable:hover { border-color: var(--primary-pale); }
.pub-policy-row-main {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
min-height: 48px;
}
.pub-policy-row-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex: 0 0 32px;
border-radius: var(--radius-sm);
background: var(--primary-pale2);
color: var(--primary);
}
.pub-policy-row-icon-img {
background: #fff; border: 1px solid var(--gray-light);
padding: 3px;
}
.pub-policy-row-icon-img img {
width: 100%; height: 100%; object-fit: contain; display: block;
}
.pub-policy-row-locked {
background: #fff;
border-color: var(--primary-pale);
}
.pub-policy-row-locked .pub-policy-row-main { cursor: default; }
.pub-policy-toggle-locked {
cursor: not-allowed; opacity: 1;
}
.pub-policy-toggle-locked .pub-policy-toggle-track {
background: var(--primary);
}
.pub-policy-toggle-locked .pub-policy-toggle-thumb {
left: 18px;
}
.pub-policy-toggle-locked .pub-policy-toggle-text {
color: var(--primary); font-weight: 700;
}
.pub-policy-row-label {
flex: 1; font-size: .9rem; font-weight: 500; color: var(--dark);
line-height: 1.3;
}
.pub-policy-toggle {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
}
.pub-policy-toggle input[type="checkbox"] {
position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.pub-policy-toggle-track {
position: relative; display: inline-block;
width: 36px; height: 20px; border-radius: 999px;
background: var(--gray-light);
transition: background var(--tr);
}
.pub-policy-toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
transition: left var(--tr), transform var(--tr);
}
.pub-policy-toggle input[type="checkbox"]:checked ~ .pub-policy-toggle-track {
background: var(--primary);
}
.pub-policy-toggle input[type="checkbox"]:checked ~ .pub-policy-toggle-track .pub-policy-toggle-thumb {
left: 18px;
}
.pub-policy-toggle input[type="checkbox"]:focus-visible ~ .pub-policy-toggle-track {
box-shadow: 0 0 0 3px rgba(92,63,165,.25);
}
.pub-policy-toggle-text {
font-size: .82rem; font-weight: 600; color: var(--dark2);
min-width: 24px; text-align: left;
}
.pub-policy-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px;
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
white-space: nowrap;
}
.pub-policy-badge-premium {
background: var(--amber-pale, #FEF3C7);
color: #92400E;
border: 1px solid var(--amber, #F59E0B);
}
.pub-policy-row-info {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: transparent; color: var(--gray);
border: 1px solid var(--gray-light);
cursor: help; padding: 0;
transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.pub-policy-row-info:hover {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-pale2);
}
.pub-policy-row-expanded {
padding: 0 14px 12px 58px;
}
.pub-policy-input-label {
display: block;
margin: 0 0 6px;
font-size: .82rem; font-weight: 500;
color: var(--dark2);
}
.pub-policy-input-row {
display: flex; align-items: center; gap: 6px;
background: var(--off-white, #FAFAFA);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
padding: 4px 8px;
}
.pub-policy-input-row:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(92,63,165,.12);
}
.pub-policy-input-row input {
flex: 1; border: 0; background: transparent;
padding: 6px 4px; font-size: .88rem; color: var(--dark);
outline: none;
}
.pub-policy-input-row input::placeholder { color: var(--gray); }
.pub-policy-input-prefix {
font-size: .92rem; font-weight: 600; color: var(--dark2);
padding-left: 4px;
}
.pub-policy-input-clear {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: transparent; border: 0; cursor: pointer;
color: var(--gray); transition: color var(--tr), background var(--tr);
}
.pub-policy-input-clear:hover {
color: #e53e3e; background: rgba(229,62,62,.08);
}
.pub-policy-radio-group {
display: flex; flex-wrap: wrap; gap: 16px;
padding: 4px 2px 10px;
}
.pub-policy-radio-group-sub {
padding: 0 2px 10px;
margin-left: 18px;
border-left: 2px solid var(--gray-light);
padding-left: 14px;
}
.pub-policy-radio {
display: inline-flex; align-items: center; gap: 6px;
font-size: .85rem; color: var(--dark2); cursor: pointer;
}
.pub-policy-radio input[type="radio"] {
accent-color: var(--primary);
cursor: pointer;
}
@media (max-width: 480px) {
.pub-policy-row-expanded { padding-left: 14px; }
.pub-policy-row-main { gap: 8px; padding: 10px 12px; }
.pub-policy-row-icon { width: 28px; height: 28px; flex-basis: 28px; }
.pub-policy-radio-group { gap: 12px; }
}
.pub-summary-row-empty {
color: var(--gray); font-style: italic; font-size: .83rem;
padding: 6px 0;
}
.pub-access-banner {
padding: 12px 16px; border-radius: var(--radius-sm);
margin-bottom: 16px; border: 1px solid transparent;
}
.pub-access-banner--badge-public { background: var(--green-pale); border-color: var(--green); }
.pub-access-banner--badge-restricted { background: var(--amber-pale); border-color: var(--amber); }
.pub-access-banner--badge-private { background: var(--red-pale); border-color: var(--red); }
.pub-access-banner-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.pub-access-banner-title {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--gray);
}
.pub-access-banner-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 12px; border-radius: 20px;
font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.pub-access-banner--badge-public .pub-access-banner-badge { background: var(--green); color: #fff; }
.pub-access-banner--badge-restricted .pub-access-banner-badge { background: var(--amber); color: #fff; }
.pub-access-banner--badge-private .pub-access-banner-badge { background: var(--red); color: #fff; }
.pub-access-banner-desc { font-size: .82rem; color: var(--dark); line-height: 1.45; }
.pub-access-banner-warning {
margin: 8px 0 0; font-size: .81rem; line-height: 1.5;
font-weight: 600; color: var(--dark);
}
.pub-license-access-context {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--gray-light);
background: var(--gray-pale-soft, #fafafa);
display: flex; flex-direction: column; gap: 6px;
}
.pub-license-access-context-empty {
border-style: dashed;
background: transparent;
}
.pub-license-access-context--badge-public { background: var(--green-pale); border-color: var(--green); }
.pub-license-access-context--badge-restricted { background: var(--amber-pale); border-color: var(--amber); }
.pub-license-access-context--badge-private { background: var(--red-pale); border-color: var(--red); }
.pub-license-access-context--badge-unknown {
background: var(--gray-pale); border-color: var(--gray-light);
}
.pub-license-access-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pub-license-access-label-text {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--gray);
}
.pub-license-access-badge {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 20px;
font-size: .7rem; font-weight: 700; white-space: nowrap;
text-transform: uppercase; letter-spacing: .05em;
}
.pub-license-access-hint {
margin: 0; font-size: .82rem; line-height: 1.5;
color: var(--dark2);
}
.pub-license-access-context-empty .pub-license-access-hint {
color: var(--gray); font-style: italic;
}
.pub-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0 0; margin-top: 4px;
border-top: 1px solid var(--gray-light);
}
.pub-nav-right { display: flex; align-items: center; gap: 10px; }
.pub-prev-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--gray-light); color: var(--dark2);
border: none; border-radius: var(--radius-sm);
padding: 9px 16px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
cursor: pointer; transition: background var(--tr);
}
.pub-prev-btn:hover { background: #e0e0e8; }
.pub-next-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 9px 18px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
cursor: pointer; transition: background var(--tr);
}
.pub-next-btn:hover { background: var(--primary-dark); }
.pub-skip-btn {
background: none; border: none; font-family: var(--font-body);
font-size: .82rem; color: var(--gray); cursor: pointer;
text-decoration: underline; text-underline-offset: 2px;
}
.pub-skip-btn:hover { color: var(--dark); }
.pub-error-box {
background: #fef2f2; border: 1.5px solid #fecaca; border-radius: var(--radius-sm);
padding: 12px 16px; margin-bottom: 16px;
}
.pub-error-item {
display: flex; align-items: flex-start; gap: 7px;
font-size: .82rem; color: #b91c1c; margin-bottom: 4px;
}
.pub-error-item:last-child { margin-bottom: 0; }
.pub-error-item svg { flex-shrink: 0; margin-top: 1px; }
.pub-success-box {
background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: var(--radius-sm);
padding: 12px 16px; margin-bottom: 16px;
}
.pub-success-item {
display: flex; align-items: flex-start; gap: 7px;
font-size: .82rem; color: #15803d; margin-bottom: 4px;
}
.pub-success-item:last-child { margin-bottom: 0; }
.pub-success-item svg { flex-shrink: 0; margin-top: 1px; }
.pub-summary-section {
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius); margin-bottom: 14px;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
overflow: hidden;
}
.pub-summary-section[data-status="ok"] { border-color: #BFE5C2; }
.pub-summary-section[data-status="error"] { border-color: #F5C2C2; }
.pub-summary-section-title {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; border-bottom: 1px solid var(--gray-light);
font-family: var(--font-head); font-weight: 700; color: var(--dark2);
background: var(--gray-pale);
}
.pub-summary-section[data-status="ok"] .pub-summary-section-title { background: #EFF8EF; border-bottom-color: #BFE5C2; }
.pub-summary-section[data-status="error"] .pub-summary-section-title { background: #FDF0F0; border-bottom-color: #F5C2C2; }
.pub-summary-section-head {
display: inline-flex; align-items: center; gap: 10px; min-width: 0;
}
.pub-summary-section-label {
font-size: 1rem; line-height: 1.2;
}
.pub-summary-section-state {
font-family: var(--font-body); font-size: .72rem; font-weight: 600;
color: var(--gray); text-transform: uppercase; letter-spacing: .05em;
padding-left: 4px;
}
.pub-summary-section[data-status="ok"] .pub-summary-section-state { color: var(--green, #2E7D32); }
.pub-summary-section[data-status="error"] .pub-summary-section-state { color: var(--red, #C62828); }
.pub-summary-status-icon {
width: 22px; height: 22px; border-radius: 50%;
padding: 3px; flex-shrink: 0;
}
.pub-summary-status-icon.pub-summary-status-ok { background: var(--green, #2E7D32); color: var(--white); }
.pub-summary-status-icon.pub-summary-status-error { background: var(--red, #C62828); color: var(--white); }
.pub-summary-status-icon.pub-summary-status-todo { background: var(--white); color: var(--gray-mid); border: 1.5px solid var(--gray-light); padding: 2px; }
.pub-summary-section-body { padding: 0; }
.pub-summary-subgroup { padding: 4px 0 6px; border-bottom: 1px solid var(--gray-light); }
.pub-summary-subgroup:last-child { border-bottom: none; }
.pub-summary-subgroup-title {
font-family: var(--font-head); font-size: .78rem; font-weight: 700;
color: var(--primary-dark); text-transform: uppercase; letter-spacing: .06em;
padding: 10px 18px 4px;
}
.pub-summary-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 9px 18px; border-bottom: 1px solid var(--gray-light);
}
.pub-summary-subgroup > .pub-summary-row:last-child { border-bottom: none; }
.pub-summary-section-body > .pub-summary-row:last-child { border-bottom: none; }
.pub-summary-key {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--gray-mid); flex-shrink: 0; min-width: 120px;
padding-top: 2px;
}
.pub-summary-val {
font-size: .85rem; color: var(--dark); flex: 1; line-height: 1.5; word-break: break-word;
}
.pub-summary-edit {
background: none; border: none; font-family: var(--font-body);
font-size: .75rem; color: var(--primary); cursor: pointer; font-weight: 600;
flex-shrink: 0; text-decoration: underline; text-underline-offset: 2px;
padding: 0;
}
.pub-summary-edit:hover { color: var(--primary-dark); }
@media (max-width: 560px) {
.pub-summary-section-state { display: none; }
.pub-summary-section-label { font-size: .94rem; }
.pub-summary-key { min-width: 0; width: 100%; }
.pub-summary-row { flex-direction: column; gap: 4px; }
}
.pub-summary-row-rich .pub-summary-val { padding: 0; }
.pub-summary-related-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.pub-summary-related-item {
display: flex;
align-items: stretch;
gap: 10px;
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 6px;
overflow: hidden;
min-height: 52px;
}
.pub-summary-related-accent {
flex: 0 0 4px;
background: var(--gray-mid);
}
.pub-summary-related-accent.access-public { background: var(--green); }
.pub-summary-related-accent.access-restricted { background: var(--amber); }
.pub-summary-related-accent.access-private { background: var(--red); }
.pub-summary-related-body {
flex: 1;
min-width: 0;
padding: 8px 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.pub-summary-related-title {
font-size: .9rem;
font-weight: 600;
color: #111827;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pub-summary-related-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: .78rem;
color: var(--gray-mid);
line-height: 1.25;
}
.pub-summary-related-creator {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.pub-summary-related-creator > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.pub-summary-related-creator svg { flex-shrink: 0; opacity: .6; }
.pub-summary-related-id-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--gray-mid);
text-decoration: none;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: .72rem;
}
.pub-summary-related-id-link:hover {
color: var(--primary);
text-decoration: underline;
}
.pub-summary-related-id-link svg { opacity: .5; }
.pub-summary-related-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 10px 8px 0;
}
.pub-summary-related-badges .type-badge,
.pub-summary-related-badges .card-access-badge {
font-size: .68rem;
}
.pub-summary-related-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(26,79,160,.08);
color: var(--primary-dark);
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
.pub-summary-related-status img { display: inline-block; flex-shrink: 0; }
.pub-summary-related-item-plain {
padding: 8px 12px;
background: #f9fafb;
border-style: dashed;
}
.pub-summary-related-uri {
font-size: .8rem;
color: var(--gray-mid);
word-break: break-all;
}
@media (max-width: 560px) {
.pub-summary-related-item { flex-wrap: wrap; }
.pub-summary-related-badges {
padding: 0 10px 8px 14px;
width: 100%;
}
}
.pub-submit-section { margin-top: 16px !important; }
.pub-submit-note {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(26,79,160,.06); border: 1px solid rgba(26,79,160,.15);
border-radius: var(--radius-sm); padding: 12px 16px;
font-size: .82rem; color: #1A4FA0; line-height: 1.5;
}
.pub-submit-note svg { flex-shrink: 0; margin-top: 1px; }
.pub-org-combobox { position: relative; }
.pub-org-input {
width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: .86rem;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 8px 32px 8px 12px; outline: none;
transition: border-color var(--tr);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.pub-org-input:focus { border-color: var(--primary); }
.pub-org-input.pub-org-selected { background-color: #fafaf9; }
.pub-org-dropdown {
position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
background: #fff; border: 1.5px solid var(--primary);
border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
max-height: 220px; overflow-y: auto;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
display: none;
}
.pub-org-dropdown.pub-org-open { display: block; }
.pub-org-option {
padding: 8px 12px; font-size: .84rem; color: var(--dark); cursor: pointer;
transition: background var(--tr);
}
.pub-org-option:hover, .pub-org-option.pub-org-active { background: var(--primary-pale2); color: var(--primary-dark); }
.pub-org-option-empty { padding: 10px 12px; font-size: .82rem; color: var(--gray); font-style: italic; }
.pub-parts {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-bottom: 16px;
}
@media (max-width: 800px) {
.pub-parts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.pub-parts { grid-template-columns: 1fr; gap: 6px; }
}
.pub-part-card {
background: var(--white); border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 8px 10px;
cursor: pointer;
display: flex; flex-direction: row; align-items: center; gap: 8px;
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
text-align: left; font-family: var(--font-body);
min-width: 0;
}
.pub-part-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.pub-part-card.pub-part-active {
border-color: var(--primary); background: var(--primary-pale);
box-shadow: 0 2px 8px rgba(92,63,165,.12);
}
.pub-part-head {
display: flex; align-items: center; gap: 6px;
font-size: .65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--gray-mid); margin-bottom: 0;
}
.pub-part-title {
font-family: var(--font-head); font-size: .9rem; font-weight: 700;
color: var(--dark2); line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.pub-part-sub {
font-size: .7rem; color: var(--gray); line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.pub-part-card.pub-part-active .pub-part-head,
.pub-part-card.pub-part-active .pub-part-title { color: var(--primary-dark); }
.pub-part-status {
width: 14px; height: 14px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; background: transparent;
border: 2px solid var(--gray-mid);
transition: background var(--tr), border-color var(--tr);
}
.pub-part-status svg { display: none; width: 9px; height: 9px; }
.pub-part-card[data-status="ok"] .pub-part-status {
background: var(--green); border-color: var(--green);
}
.pub-part-card[data-status="ok"] .pub-part-status svg.icon-check { display: block; color: #fff; }
.pub-part-card[data-status="error"] .pub-part-status {
background: var(--red); border-color: var(--red);
}
.pub-part-card[data-status="error"] .pub-part-status svg.icon-cross { display: block; color: #fff; }
.pub-part-card[data-status="error"] { border-color: var(--red); }
.pub-part-body {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; flex: 1;
}
.pub-part-panel { display: none; }
.pub-part-panel.pub-part-panel-active { display: block; }
.pub-parts-intro {
margin: 18px 0 8px;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.pub-parts-intro-text { min-width: 0; }
.pub-parts-intro .pub-typeswitch { flex-shrink: 0; }
.pub-parts-intro h2 {
font-family: var(--font-head); font-size: .98rem; font-weight: 700;
color: var(--dark2); margin: 0 0 2px;
}
.pub-parts-intro p {
font-size: .82rem; color: var(--gray); line-height: 1.45;
max-width: 720px; margin: 0;
}
.pub-parts-shell {
background: transparent;
border-radius: 14px;
padding: 0;
margin-bottom: 24px;
}
.pub-parts-shell .pub-parts { margin-bottom: 10px; }
.pub-parts-shell .pub-panels { margin-bottom: 0; }
.pub-parts-shell .pub-part-card { background: var(--pub-group-bg); }
.pub-parts-shell .pub-part-card {
border-color: color-mix(in srgb, var(--primary-dark, #0B3760) 14%, transparent);
border-bottom-color: transparent;
}
.pub-parts-shell .pub-part-card:hover {
background: var(--pub-group-bg);
border-color: var(--primary-light); border-bottom-color: transparent;
box-shadow: 0 2px 6px rgba(92,63,165,.08);
}
.pub-parts-shell .pub-part-card.pub-part-active {
position: relative;
background: var(--pub-group-bg);
border: 2px solid var(--primary);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0 -2px 14px rgba(92,63,165,.14);
z-index: 3;
}
.pub-parts-shell .pub-part-card.pub-part-active::after {
content: '';
position: absolute;
left: -2px; right: -2px;
bottom: -13px;
height: 13px;
background: var(--pub-group-bg);
border-left: 2px solid var(--primary);
border-right: 2px solid var(--primary);
z-index: 3;
}
.pub-parts-shell .pub-part-panel.pub-part-panel-active {
position: relative;
background: var(--pub-group-bg);
border-top: 3px solid var(--primary);
border-radius: 0 0 10px 10px;
padding: 16px 18px 18px;
box-shadow: 0 6px 18px rgba(92,63,165,.12);
z-index: 1;
}
@media (max-width: 600px) {
.pub-parts-shell .pub-part-panel.pub-part-panel-active {
padding: 12px 12px 14px;
}
}
@media (max-width: 800px) {
.pub-parts-shell .pub-part-card.pub-part-active {
border-bottom: 2px solid var(--primary);
border-bottom-left-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
}
.pub-parts-shell .pub-part-card.pub-part-active::after { display: none; }
}
.pub-action-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 24px; padding: 16px 0 0;
border-top: 1px solid var(--gray-light); flex-wrap: wrap;
}
.pub-action-group,
.pub-action-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-btn-cancel { text-decoration: none; display: inline-flex; align-items: center; }
.pub-btn-save, .pub-btn-summary, .pub-btn-continue {
display: inline-flex; align-items: center; gap: 6px;
}
.pub-btn-cancel, .pub-btn-save, .pub-btn-summary {
background: var(--white); color: var(--dark2);
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 9px 16px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
cursor: pointer; transition: background var(--tr), border-color var(--tr);
}
.pub-btn-cancel:hover, .pub-btn-save:hover, .pub-btn-summary:hover {
border-color: var(--primary-light); background: var(--primary-pale2);
}
.pub-btn-summary { color: var(--primary); border-color: var(--primary-light); }
.pub-btn-icon {
width: 34px; height: 34px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.pub-btn-icon:hover { background: #f2f4fd; border-color: var(--primary); }
.pub-btn-icon-hero {
background: rgba(255,255,255,.14); color: var(--white);
border-color: rgba(255,255,255,.35);
backdrop-filter: blur(4px);
}
.pub-btn-icon-hero:hover {
background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.6);
}
.pub-btn-continue {
background: var(--primary); color: var(--white); border: none;
border-radius: var(--radius-sm);
padding: 10px 20px; font-family: var(--font-body); font-size: .88rem; font-weight: 600;
cursor: pointer; transition: background var(--tr), opacity var(--tr);
}
.pub-btn-continue:hover:not(:disabled) { background: var(--primary-dark); }
.pub-btn-continue:disabled { opacity: 0.6; cursor: not-allowed; }
.pub-dexpod-offers,
.pub-existing-offers {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 14px; padding: 12px 14px 14px;
background: #EEF5FD;
border: 1px solid #C5DCF5;
border-radius: var(--radius-sm);
}
.pub-dexpod-offers[hidden],
.pub-existing-offers[hidden] { display: none; }
.pub-dexpod-offers-head,
.pub-existing-offers-head {
display: flex; align-items: center; gap: 8px;
}
.pub-dexpod-offers-title,
.pub-existing-offers-title {
margin: 0; font-family: var(--font-head); font-size: .85rem;
font-weight: 700; color: #1A4FA0;
}
.pub-dexpod-offers-count,
.pub-existing-offers-count {
display: inline-block; padding: 1px 7px; border-radius: 20px;
background: rgba(26, 79, 160, .16); color: #1A4FA0;
font-size: .7rem; font-weight: 700;
}
.pub-dexpod-offers-lead,
.pub-existing-offers-lead { margin: -4px 0 2px; }
.pub-offer-card--dexpod,
.pub-offer-card--existing { border-color: #1A4FA0; }
.pub-offer-card--dexpod:hover,
.pub-offer-card--existing:hover {
border-color: #1A4FA0; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.pub-dexpod-offer-badge,
.pub-existing-offer-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: 20px;
background: #1A4FA0; color: #fff;
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.pub-dexpod-offer-note,
.pub-existing-offer-note {
margin-top: 7px; font-size: .76rem; line-height: 1.45; color: var(--gray);
}
.pub-dexpod-offer-view,
.pub-existing-offer-view {
padding: 5px 11px; border: 1.5px solid #1A4FA0; border-radius: var(--radius-xs, 5px);
background: #fff; color: #1A4FA0;
font-family: inherit; font-size: .78rem; font-weight: 600;
white-space: nowrap; cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.pub-dexpod-offer-view:hover,
.pub-existing-offer-view:hover { background: #1A4FA0; color: #fff; }
.pub-dexpod-offers-busy,
.pub-existing-offers-busy,
.pub-dexpod-offers-error {
font-size: .78rem; line-height: 1.45;
}
.pub-dexpod-offers-busy,
.pub-existing-offers-busy { color: var(--gray); }
.pub-dexpod-offers-error { color: #b45309; }
.pub-existing-offer-unlink {
padding: 5px 11px; border: 1.5px solid var(--border, #d8d8d8);
border-radius: var(--radius-xs, 5px);
background: #fff; color: var(--gray);
font-family: inherit; font-size: .78rem; font-weight: 600;
white-space: nowrap; cursor: pointer;
transition: border-color var(--tr), color var(--tr);
}
.pub-existing-offer-unlink:hover { border-color: #b45309; color: #b45309; }
.pub-existing-offer-unlink.is-undo {
border-color: #b45309; color: #b45309; background: #fff;
}
.pub-offer-card--existing.is-unlinked { opacity: .62; }
.pub-offer-card--existing.is-unlinked .pub-offer-card-target {
text-decoration: line-through;
}
.pub-offer-card--existing.is-unlinked .pub-existing-offer-note { color: #b45309; }
.pub-offer-card--dexpod.is-unlinked { opacity: .62; }
.pub-offer-card--dexpod.is-unlinked .pub-offer-card-target { text-decoration: line-through; }
.pub-offer-card--dexpod.is-unlinked .pub-dexpod-offer-note { color: #b45309; }
.pub-offer-card--dexpod.is-withdrawn { opacity: .7; }
.pub-offer-card--dexpod.is-withdrawn .pub-dexpod-offer-note { color: #b91c1c; }
.pub-dexpod-offer-state {
display: inline-block; padding: 1px 7px; border-radius: 999px;
background: #fee2e2; color: #b91c1c;
font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.pub-dexpod-offer-error { margin-top: 6px; font-size: .78rem; color: #b91c1c; }
/* ── css/publish-bron.css ── */
.pub-bron-dropzone {
border: 2px dashed var(--gray-light); border-radius: var(--radius-sm);
padding: 28px 20px; text-align: center; background: var(--gray-pale);
transition: border-color var(--tr), background var(--tr);
}
.pub-bron-dropzone.is-dragover { border-color: var(--primary); background: var(--primary-pale); }
.pub-bron-dropzone p { font-size: .88rem; color: var(--gray); margin: 0; }
.pub-bron-dropzone a { color: var(--primary); font-weight: 600; cursor: pointer; }
.pub-bron-url-row {
display: flex; gap: 8px; margin-top: 12px;
}
.pub-bron-url-row input {
flex: 1; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 9px 12px; font-family: var(--font-body); font-size: .86rem; outline: none;
}
.pub-bron-url-row input:focus { border-color: var(--primary); }
.pub-bron-url-row button {
background: var(--primary); color: var(--white); border: none;
border-radius: var(--radius-sm); padding: 9px 18px; font-weight: 600; cursor: pointer;
}
.pub-bron-url-row button:hover { background: var(--primary-dark); }
.pub-bron-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pub-bron-empty {
font-size: .85rem; color: var(--gray); font-style: italic;
padding: 14px 10px; text-align: center;
border: 1px dashed var(--gray-light); border-radius: var(--radius-sm);
background: var(--gray-pale);
}
.pub-bron-url-input { }
.pub-bron-url-add { }
.pub-bron-badge-url { background: #EFF6FF; color: #1D4ED8; }
.pub-bron-badge-file { background: var(--primary-pale); color: var(--primary-dark); }
.pub-bron-item {
display: flex; align-items: center; gap: 12px;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 10px 14px;
}
.pub-bron-badge {
width: 38px; height: 38px; border-radius: 6px;
background: var(--primary-pale); color: var(--primary);
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
.pub-bron-main { flex: 1; min-width: 0; }
.pub-bron-name { font-size: .88rem; font-weight: 600; color: var(--dark2); word-break: break-all; }
.pub-bron-meta { font-size: .72rem; color: var(--gray); margin-top: 2px; }
.pub-bron-remove {
background: none; border: none; color: var(--gray-mid); cursor: pointer;
font-size: 1.2rem; padding: 4px 8px; line-height: 1;
}
.pub-bron-remove:hover { color: var(--red); }
.pub-bundle-extra-files-section { margin-top: 28px; }
.pub-bundle-extra-files-section .pub-subsection-title {
margin-bottom: 14px;
}
.pub-bundle-picker-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(15, 23, 42, .55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: pub-bundle-picker-fade-in .14s ease-out;
}
@keyframes pub-bundle-picker-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
body.pub-bundle-picker-open { overflow: hidden; }
.pub-bundle-picker-modal {
background: var(--pub-group-bg);
border: 1px solid rgba(26, 79, 160, .15);
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
width: min(720px, 100%);
max-height: 86vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.pub-bundle-picker-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px 14px;
background-color: var(--white);
background-image: linear-gradient(rgba(26, 79, 160, .06), rgba(26, 79, 160, .06));
border-bottom: 1px solid rgba(26, 79, 160, .15);
}
.pub-bundle-picker-input { background: var(--white); }
.pub-bundle-picker-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: #111827;
}
.pub-bundle-picker-close {
border: none; background: transparent; cursor: pointer;
color: var(--gray); padding: 4px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
}
.pub-bundle-picker-close:hover {
background: var(--gray-pale);
color: #111827;
}
.pub-bundle-picker-intro {
margin: 0 22px 10px;
font-size: .82rem;
color: var(--gray);
line-height: 1.45;
}
.pub-bundle-picker-search {
position: relative;
margin: 4px 22px 10px;
}
.pub-bundle-picker-search-icon {
position: absolute;
top: 50%; left: 12px;
transform: translateY(-50%);
color: var(--gray);
pointer-events: none;
}
.pub-bundle-picker-input {
width: 100%;
padding: 10px 12px 10px 34px;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
font-size: .9rem;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.pub-bundle-picker-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(92, 63, 165, .14);
}
.pub-bundle-picker-status {
margin: 0 22px 6px;
font-size: .76rem;
color: var(--gray);
min-height: 1em;
}
.pub-bundle-picker-results {
padding: 4px 22px 14px;
overflow-y: auto;
flex: 1 1 auto;
display: flex; flex-direction: column; gap: 6px;
}
.pub-bundle-picker-empty {
padding: 28px 16px;
border: 1px dashed var(--gray-light);
border-radius: var(--radius-sm);
background: var(--gray-pale);
color: var(--gray);
font-size: .85rem;
text-align: center;
}
.pub-bundle-picker-row {
display: grid;
grid-template-columns: 4px 1fr auto auto;
align-items: stretch;
min-height: 60px;
background: #fff;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
cursor: pointer;
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.pub-bundle-picker-row:hover {
border-color: var(--primary);
box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
.pub-bundle-picker-row:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(92, 63, 165, .14);
}
.pub-bundle-picker-row.is-picked {
background: var(--gray-pale);
cursor: default;
border-color: var(--gray-light);
box-shadow: none;
}
.pub-bundle-picker-row-accent {
background: var(--primary-light);
}
.pub-bundle-picker-row-accent.access-public { background: var(--green); }
.pub-bundle-picker-row-accent.access-restricted { background: var(--amber); }
.pub-bundle-picker-row-accent.access-private { background: var(--red); }
.pub-bundle-picker-row-content {
min-width: 0;
padding: 10px 14px;
display: flex; flex-direction: column; justify-content: center;
gap: 4px;
}
.pub-bundle-picker-row-title {
font-size: .9rem !important;
font-weight: 600;
color: #111827;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pub-bundle-picker-row-creator {
font-size: .76rem;
color: var(--gray);
line-height: 1.3;
display: flex; align-items: center; gap: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pub-bundle-picker-row-creator svg {
flex-shrink: 0;
opacity: .65;
}
.pub-bundle-picker-row-creator span {
overflow: hidden;
text-overflow: ellipsis;
}
.pub-bundle-picker-row-badges {
display: flex; flex-direction: column; align-items: flex-end;
justify-content: center;
gap: 4px;
padding: 8px 12px;
flex-shrink: 0;
}
.pub-bundle-picker-row-type {
display: inline-block;
font-size: .66rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--primary-dark);
background: var(--primary-pale);
padding: 2px 8px;
border-radius: 999px;
}
.pub-bundle-picker-row-type-empty {
color: var(--gray);
background: var(--gray-pale);
}
.pub-bundle-picker-row-access {
display: inline-block;
font-size: .66rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
}
.pub-bundle-picker-row-access.badge-public {
color: #155724; background: #d4edda;
}
.pub-bundle-picker-row-access.badge-restricted {
color: #856404; background: #fff3cd;
}
.pub-bundle-picker-row-access.badge-private {
color: #721c24; background: #f8d7da;
}
.pub-bundle-picker-row-action {
display: flex; align-items: center; justify-content: center;
padding: 0 10px;
}
.pub-bundle-picker-row-btn {
width: 36px;
min-height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
border: 1px solid var(--primary);
background: var(--primary);
color: #fff;
cursor: pointer;
transition: background .12s ease;
padding: 0;
}
.pub-bundle-picker-row-btn:hover { background: var(--primary-dark); }
.pub-bundle-picker-row-btn.is-picked {
background: transparent;
border-color: var(--green, #16a34a);
color: var(--green, #16a34a);
cursor: default;
}
@media (max-width: 560px) {
.pub-bundle-picker-row {
grid-template-columns: 4px 1fr auto;
}
.pub-bundle-picker-row-badges {
display: none;
}
}
.pub-bundle-picker-foot {
display: flex; justify-content: flex-end;
padding: 10px 22px 16px;
border-top: 1px solid var(--gray-pale);
background: #fff;
}
.pub-bundle-picker-done {
padding: 8px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--primary);
background: var(--primary);
color: #fff;
font-size: .85rem;
font-weight: 500;
cursor: pointer;
}
.pub-bundle-picker-done:hover { background: var(--primary-dark); }
.pub-dist-editor-section { margin-top: 22px; }
.pub-dist-editor-empty {
padding: 12px 14px; border: 1px dashed var(--gray-light);
border-radius: var(--radius-sm); background: var(--gray-pale);
color: var(--gray); font-size: .82rem; font-style: italic; margin: 10px 0 0;
}
.pub-dist-editor-cards { display: flex; flex-direction: column; gap: 10px; }
.pub-dist-card {
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
background: var(--white); overflow: hidden;
}
.pub-dist-card[open] { border-color: var(--primary-light); }
.pub-dist-card-summary {
list-style: none; cursor: pointer; user-select: none;
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; font-size: .86rem;
}
.pub-dist-card-summary::-webkit-details-marker { display: none; }
.pub-dist-card-title { font-weight: 600; color: var(--dark2); flex-shrink: 0; }
.pub-dist-card-subtitle {
font-size: .76rem; color: var(--gray); flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-dist-card-toggle {
color: var(--gray-mid); transition: transform var(--tr);
}
.pub-dist-card[open] .pub-dist-card-toggle { transform: rotate(180deg); }
.pub-dist-card-body {
padding: 4px 14px 14px; border-top: 1px solid var(--gray-pale);
}
.pub-dist-sublabel {
display: block; font-size: .76rem; font-weight: 600; color: var(--gray);
margin-bottom: 4px;
}
.pub-dist-input {
width: 100%; border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 8px 11px;
font-family: var(--font-body); font-size: .85rem; outline: none;
box-sizing: border-box;
}
.pub-dist-input:focus { border-color: var(--primary); }
.pub-dist-input-readonly { background: var(--gray-pale); color: var(--gray); }
.pub-dist-textarea { resize: vertical; min-height: 56px; }
.pub-dist-radio-row { display: flex; flex-direction: column; gap: 8px; }
.pub-dist-radio {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); cursor: pointer;
transition: border-color var(--tr), background var(--tr);
}
.pub-dist-radio:has(input:checked) {
border-color: var(--primary); background: var(--primary-pale);
}
.pub-dist-radio span { display: flex; flex-direction: column; gap: 2px; }
.pub-dist-radio strong { font-size: .82rem; color: var(--dark2); }
.pub-dist-radio em { font-style: normal; font-size: .74rem; color: var(--gray); }
.pub-dist-urlkind { margin-top: 12px; }
.pub-related-sources {
margin-top: 18px; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); background: var(--white);
}
.pub-related-sources-toggle {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--gray-pale);
border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
cursor: pointer; font-family: var(--font-head); font-size: .9rem;
font-weight: 600; color: var(--dark2); text-align: left;
}
.pub-related-sources.is-collapsed .pub-related-sources-toggle {
border-radius: var(--radius-sm);
}
.pub-related-sources-toggle-chev {
transition: transform var(--tr); color: var(--gray-mid);
}
.pub-related-sources.is-collapsed .pub-related-sources-toggle-chev {
transform: rotate(-90deg);
}
.pub-related-sources-toggle-count {
margin-left: auto; font-weight: 500; font-size: .78rem; color: var(--gray);
}
.pub-related-sources-body {
padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.pub-related-sources.is-collapsed .pub-related-sources-body { display: none; }
.pub-related-sources-intro {
font-size: .82rem; color: var(--gray); margin: 0 0 4px;
}
.pub-related-source-item {
display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px;
align-items: end;
}
@media (max-width: 600px) {
.pub-related-source-item { grid-template-columns: 1fr; }
}
.pub-related-source-item input {
width: 100%; border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 8px 11px;
font-family: var(--font-body); font-size: .85rem; outline: none;
box-sizing: border-box;
}
.pub-related-source-item input:focus { border-color: var(--primary); }
.pub-related-source-remove {
background: none; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); color: var(--gray-mid);
padding: 7px 10px; cursor: pointer;
}
.pub-related-source-remove:hover { color: var(--red); border-color: var(--red); }
.pub-related-sources-empty {
padding: 10px 14px; border: 1px dashed var(--gray-light);
border-radius: var(--radius-sm); background: var(--gray-pale);
color: var(--gray); font-size: .82rem; font-style: italic; margin: 0;
}
.pub-related-sources-add {
align-self: flex-start; background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm); padding: 8px 14px;
font-weight: 600; font-size: .84rem; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.pub-related-sources-add:hover { background: var(--primary-dark); }
.pub-related-sources-list {
display: flex; flex-direction: column; gap: 8px;
}
.pub-related-sources-list:empty { display: none; }
.pub-related-source-card { cursor: default; }
.pub-related-source-card:hover {
box-shadow: var(--shadow); transform: none;
}
.pub-bron-blocks {
display: flex; flex-direction: column; gap: 14px;
}
.pub-bron-blocks > .pub-related-sources { margin-top: 0; }
.pub-bron-actions-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 18px;
box-shadow: none;
}
.pub-bron-actions-card .pub-bron-actions-head {
margin-bottom: 14px;
display: flex; align-items: flex-start; gap: 16px;
}
.pub-bron-actions-head-text { flex: 1; min-width: 0; }
.pub-bron-actions-head .pub-bron-next-btn { margin-left: 0; flex: 0 0 auto; }
.pub-bron-note-inline { color: var(--gray); }
@media (max-width: 700px) {
.pub-bron-actions-card .pub-bron-actions-head { flex-direction: column; gap: 10px; }
.pub-bron-actions-head .pub-bron-next-btn { width: 100%; justify-content: center; }
}
.pub-bron-actions-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pub-bron-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pub-bron-add-label {
font-size: .72rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: var(--gray); white-space: nowrap;
margin-right: 2px;
}
@media (max-width: 560px) {
.pub-bron-add-label { flex: 1 0 100%; margin-bottom: 2px; }
}
.pub-bron-add-pill {
display: inline-flex; align-items: center; gap: 7px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 8px 14px; font-family: var(--font-body);
font-weight: 600; font-size: .85rem; line-height: 1.2; cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.pub-bron-add-pill:hover:not([disabled]) {
background: var(--primary-pale2); border-color: var(--primary);
}
.pub-bron-add-pill[disabled] {
color: var(--gray); border-color: var(--gray-light);
background: #fafaf9; cursor: not-allowed;
}
.pub-bron-add-pill--primary {
background: var(--primary); color: var(--white); border-color: var(--primary);
border-radius: 999px; padding: 9px 18px;
}
.pub-bron-add-pill--primary:hover:not([disabled]) {
background: var(--primary-dark); border-color: var(--primary-dark);
}
.pub-bron-choice { border: 0; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pub-bron-choice-q { font-weight: 600; font-size: .88rem; color: var(--dark2); padding: 0; margin: 0 0 8px; }
.pub-bron-choice-opt {
display: flex; gap: 12px; align-items: flex-start;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 10px 12px; background: var(--white); cursor: pointer;
transition: border-color var(--tr), background var(--tr);
}
.pub-bron-choice-opt input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--primary); }
.pub-bron-choice-opt:hover:not(.is-disabled) { border-color: var(--primary-light); }
.pub-bron-choice-opt.is-on,
.pub-bron-choice-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-pale2); }
.pub-bron-choice-opt:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.pub-bron-choice-opt.is-disabled { opacity: .6; cursor: not-allowed; background: #fafaf9; }
.pub-bron-choice-label { display: block; font-weight: 600; font-size: .9rem; color: var(--dark2); }
.pub-bron-choice-desc { display: block; font-size: .8rem; color: var(--gray); line-height: 1.4; }
.pub-bron-pod-choose {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary); border-radius: 999px;
padding: 8px 16px; font-family: var(--font-body); font-weight: 600; font-size: .88rem; cursor: pointer;
}
.pub-bron-pod-choose:hover { background: var(--primary-pale2); }
.pub-bron-pod-picked {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 10px 12px; background: var(--primary-pale2);
}
.pub-bron-pod-picked-icon { color: var(--primary); display: inline-flex; flex: 0 0 auto; }
.pub-bron-pod-picked-main { display: flex; flex-direction: column; min-width: 0; }
.pub-bron-pod-picked-name { font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.pub-bron-pod-picked-meta { font-size: .78rem; color: var(--gray); }
.pub-bron-pod-change {
margin-left: auto; flex: 0 0 auto; background: none; border: 0; padding: 4px;
color: var(--primary); font-weight: 600; font-size: .82rem; text-decoration: underline; cursor: pointer;
}
.pub-bron-prefill-badge {
display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
font-size: .7rem; font-weight: 600; vertical-align: 1px;
background: #FCF0DE; color: #AD5500;
}
@media (max-width: 560px) {
.pub-bron-add-row { width: 100%; }
.pub-bron-add-pill { flex: 1 1 100%; justify-content: center; }
}
.pub-bron-next-btn {
margin-left: auto;
display: inline-flex; align-items: center; gap: 7px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 8px 14px; font-family: var(--font-body);
font-weight: 600; font-size: .85rem; line-height: 1.2; cursor: pointer;
}
.pub-bron-next-btn:hover { background: var(--primary-pale2); border-color: var(--primary); }
@media (max-width: 560px) {
.pub-bron-actions-row > * { width: 100%; }
}
.pub-bron-emptystate {
background: var(--white);
border: 1px dashed var(--gray-light);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
color: var(--gray);
}
.pub-bron-emptystate svg { color: var(--gray-mid); margin-bottom: 8px; }
.pub-bron-emptystate-title {
font-family: var(--font-head); font-size: .95rem; font-weight: 700;
color: var(--dark2); margin: 0 0 4px;
}
.pub-bron-emptystate-text {
font-size: .84rem; line-height: 1.55; margin: 0 auto; max-width: 420px;
}
.pub-bron-modal-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(20,15,42,.45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.pub-bron-modal {
background: var(--white); border-radius: var(--radius);
width: min(560px, 100%); max-height: 90vh; overflow: auto;
box-shadow: var(--shadow-md);
border: 1px solid rgba(26,79,160,.15);
}
.pub-bron-modal-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(26,79,160,.15);
background: rgba(26,79,160,.06);
border-radius: var(--radius) var(--radius) 0 0;
}
.pub-bron-modal-head h2 {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
color: #1A4FA0; margin: 0; flex: 1;
}
.pub-bron-modal-close {
background: none; border: none; color: var(--gray-mid);
padding: 4px; border-radius: 6px; cursor: pointer; line-height: 0;
}
.pub-bron-modal-close:hover { color: var(--dark2); background: var(--gray-pale); }
.pub-bron-modal-body {
padding: 20px 22px; display: flex; flex-direction: column; gap: 16px;
background: var(--pub-group-bg);
}
.pub-bron-modal .pub-ds-input,
.pub-bron-modal textarea,
.pub-bron-modal select { background: var(--white); }
.pub-bron-modal .pub-dist-sublabel {
font-size: .78rem; font-weight: 600; color: var(--dark2);
}
.pub-bron-modal .pub-ds-input {
font-size: .88rem; padding: 9px 12px; color: var(--dark);
transition: border-color var(--tr), box-shadow var(--tr);
}
.pub-bron-modal .pub-ds-input:focus {
border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,60,180,.12);
}
.pub-bron-modal-intro { font-size: .84rem; color: var(--gray); margin: 0; }
.pub-bron-modal-note {
font-size: .78rem; color: var(--gray); line-height: 1.5; margin: 0;
padding: 8px 12px; border-radius: var(--radius-sm);
background: #fafaf9; border: 1px solid var(--gray-light);
}
.pub-bron-modal-error {
margin: 0; font-size: .8rem; color: var(--red);
background: var(--red-pale); border-radius: var(--radius-sm); padding: 8px 12px;
}
.pub-bron-modal-error[hidden] { display: none; }
.pub-bron-modal-foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 22px 18px;
border-top: 1px solid rgba(26, 79, 160, .15);
background: var(--pub-group-bg);
border-radius: 0 0 var(--radius) var(--radius);
}
.pub-bron-modal-btn {
border-radius: var(--radius-sm); padding: 9px 16px;
font-family: var(--font-body); font-weight: 600; font-size: .85rem;
line-height: 1.2; cursor: pointer;
}
.pub-bron-modal-btn-ghost {
background: var(--white); color: var(--gray);
border: 1.5px solid var(--gray-light);
}
.pub-bron-modal-btn-ghost:hover { color: var(--dark2); border-color: var(--gray-mid); }
.pub-bron-modal-btn-primary {
background: var(--primary); color: var(--white); border: 1.5px solid var(--primary);
}
.pub-bron-modal-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.pub-source-block { }
.pub-source-block .pub-related-sources-toggle {
gap: 12px;
}
.pub-source-block-icon {
width: 30px; height: 30px; flex-shrink: 0;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--primary-pale); color: var(--primary);
transition: background var(--tr), color var(--tr);
}
.pub-source-block-icon svg {
width: 16px; height: 16px;
}
.pub-source-block-files .pub-source-block-icon {
background: #EFF6FF; color: #1D4ED8;
}
.pub-source-block-dataservices .pub-source-block-icon {
background: #FFF7ED; color: #C2410C;
}
.pub-source-block-relations .pub-source-block-icon {
background: var(--primary-pale); color: var(--primary);
}
.pub-source-block-title {
font-family: var(--font-head); font-size: .95rem;
font-weight: 600; color: var(--dark2);
}
.pub-source-block .pub-related-sources-toggle-count {
background: var(--white); border: 1px solid var(--gray-light);
color: var(--gray-mid);
padding: 2px 8px; border-radius: 999px;
font-size: .74rem; font-weight: 600;
}
.pub-source-block:not(.is-collapsed) .pub-related-sources-toggle-count {
background: var(--primary-pale); border-color: var(--primary-pale);
color: var(--primary-dark);
}
.pub-source-block .pub-related-sources-toggle-count:empty {
display: none;
}
.pub-source-block.is-required-empty .pub-source-block-icon {
box-shadow: 0 0 0 2px var(--red-pale, #fee2e2);
}
.pub-source-block-files .pub-bron-dropzone { margin-top: 0; }
.pub-ds-list {
display: flex; flex-direction: column; gap: 10px;
}
.pub-ds-item {
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
background: var(--white);
overflow: hidden;
transition: border-color var(--tr), box-shadow var(--tr);
}
.pub-ds-item:focus-within {
border-color: var(--primary-light);
box-shadow: 0 0 0 3px var(--primary-pale);
}
.pub-ds-item-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: var(--gray-pale);
border-bottom: 1px solid var(--gray-light);
}
.pub-ds-item.is-collapsed .pub-ds-item-head {
border-bottom: none;
}
.pub-ds-item-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: none; padding: 4px 6px; margin: 0;
cursor: pointer; text-align: left; flex: 1; min-width: 0;
font-family: var(--font-head); font-size: .85rem;
font-weight: 600; color: var(--dark2);
}
.pub-ds-item-toggle:hover { color: var(--primary-dark); }
.pub-ds-item-chev {
transition: transform var(--tr); color: var(--gray-mid);
flex-shrink: 0;
}
.pub-ds-item.is-collapsed .pub-ds-item-chev {
transform: rotate(-90deg);
}
.pub-ds-item-title {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: inherit;
}
.pub-ds-item-remove {
background: none; border: 1px solid transparent;
color: var(--gray-mid); cursor: pointer;
padding: 5px 8px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center;
}
.pub-ds-item-remove:hover {
color: var(--red); border-color: var(--red);
}
.pub-ds-item-body {
padding: 14px;
display: flex; flex-direction: column; gap: 12px;
}
.pub-ds-field { display: flex; flex-direction: column; gap: 4px; }
.pub-ds-input {
width: 100%; box-sizing: border-box;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 8px 11px;
font-family: var(--font-body); font-size: .85rem; outline: none;
}
.pub-ds-input:focus { border-color: var(--primary); }
.pub-ds-textarea {
min-height: 74px; resize: vertical; line-height: 1.5;
overflow: hidden;
}
/* ── css/publish-delen.css ── */
.pub-alert {
display: flex; align-items: flex-start; gap: 10px;
margin: -12px 0 20px; padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: .85rem; line-height: 1.5;
}
.pub-alert[hidden] { display: none; }
.pub-alert > svg { flex-shrink: 0; margin-top: 2px; }
.pub-alert-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-alert-detail {
font-weight: 400; font-size: .8rem; opacity: .9;
word-break: break-word; white-space: pre-wrap;
}
.pub-alert-close {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: inherit; opacity: .6; padding: 2px; line-height: 0; border-radius: 4px;
}
.pub-alert-close:hover { opacity: 1; }
.pub-alert-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pub-alert-warning { background: var(--amber-pale); color: var(--amber); border-color: rgba(230,81,0,.25); }
.pub-alert-info { background: var(--primary-pale2); color: var(--primary-dark); border-color: var(--primary-pale); }
.pub-alert-success { background: #f0fff4; color: #276749; border-color: #9ae6b4; }
.pub-inline-note {
display: flex; align-items: flex-start; gap: 7px;
margin: 0 0 4px; font-size: .8rem; line-height: 1.5; color: var(--gray);
}
.pub-inline-note svg { flex-shrink: 0; margin-top: 3px; color: var(--gray-mid); }
.pub-offer-modal-overlay {
position: fixed; inset: 0; z-index: 1300;
background: rgba(20,15,42,.45);
display: flex; align-items: flex-start; justify-content: center;
padding: 32px 20px; overflow: auto;
}
.pub-offer-modal-overlay[hidden] { display: none; }
.pub-offer-modal-overlay .pub-offer-flow {
position: relative;
width: min(560px, 100%); margin: 0; padding: 0;
background: var(--white); border-radius: var(--radius);
box-shadow: var(--shadow-md);
max-height: calc(100vh - 64px);
display: flex; flex-direction: column; overflow: hidden;
}
.pub-offer-modal-overlay .pub-offer-flow.has-picker {
min-height: min(560px, calc(100vh - 64px));
}
body.pub-modal-open { overflow: hidden; }
.pub-offer-modal-overlay .pub-offer-flow-header {
display: block; margin: 0; padding: 14px 18px 10px;
border-bottom: 1px solid var(--gray-light); background: var(--white);
}
.pub-offer-flow-header-top {
display: flex; align-items: center; gap: 10px;
}
.pub-offer-flow-header-top h4 { margin: 0; flex: 1; }
.pub-offer-flow-header-actions {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.pub-offer-flow-header-actions .pub-btn-cancel,
.pub-offer-flow-header-actions .pub-btn-continue {
padding: 6px 12px; font-size: .8rem;
}
.pub-offer-flow-header-sub {
display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.pub-offer-policy-count {
font-size: .82rem; font-weight: 600; color: var(--gray);
}
.pub-offer-flow-header-sub .pub-btn-continue {
padding: 6px 14px; font-size: .8rem; flex-shrink: 0;
}
.pub-btn-policy-add {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 6px 12px; font-family: var(--font-body);
font-size: .8rem; font-weight: 600; cursor: pointer;
transition: all var(--tr);
}
.pub-btn-policy-add:hover { background: var(--primary-pale2); border-color: var(--primary); }
.pub-offer-flow-body { flex: 1; overflow: auto; padding: 14px 18px; }
.pub-offer-modal-overlay .pub-offer-flow-actions {
margin: 0; padding: 12px 18px; background: var(--white);
border-top: 1px solid var(--gray-light);
}
.pub-policy-group { margin-bottom: 14px; }
.pub-policy-group:last-child { margin-bottom: 0; }
.pub-policy-group-title {
font-size: .7rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--gray);
margin: 0 0 6px 2px;
}
.pub-policy-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; margin-bottom: 8px;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
}
.pub-policy-item.is-locked { background: var(--primary-pale2); border-color: var(--primary-light); }
.pub-policy-item-main { flex: 1; min-width: 0; }
.pub-policy-item-head {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.pub-policy-item-label { font-size: .86rem; font-weight: 600; color: var(--dark); }
.pub-policy-item-group {
font-size: .68rem; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--primary-dark);
background: var(--primary-pale); border-radius: 999px; padding: 2px 8px;
}
.pub-policy-item-locked {
font-size: .68rem; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: .03em;
}
.pub-policy-item-sum {
margin-top: 3px; font-size: .8rem; color: var(--gray-mid);
overflow-wrap: anywhere;
}
.pub-policy-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pub-policy-item-edit,
.pub-policy-item-remove {
background: transparent; border: none; cursor: pointer; padding: 5px;
border-radius: var(--radius-sm); color: var(--gray);
display: inline-flex; transition: all var(--tr);
}
.pub-policy-item-edit:hover { color: var(--primary); background: var(--primary-pale); }
.pub-policy-item-remove:hover { color: #e53e3e; background: rgba(229,62,62,.08); }
.pub-policy-picker {
position: absolute; inset: 0; z-index: 2;
background: var(--white); border-radius: var(--radius);
display: flex; flex-direction: column;
}
.pub-policy-picker[hidden] { display: none; }
.pub-policy-picker-head {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px 10px; border-bottom: 1px solid var(--gray-light);
}
.pub-policy-picker-head h5 {
margin: 0; font-family: var(--font-heading);
font-size: .98rem; font-weight: 700; color: var(--dark);
}
.pub-policy-picker-back {
background: transparent; border: none; cursor: pointer; padding: 4px;
border-radius: var(--radius-sm); color: var(--gray); display: inline-flex;
}
.pub-policy-picker-back:hover { color: var(--dark); background: var(--gray-light); }
.pub-policy-picker-step { flex: 1; overflow: auto; padding: 12px 18px; }
.pub-policy-picker-step[hidden] { display: none; }
.pub-policy-picker-actions {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--gray-light);
}
.pub-policy-groupfilter {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.pub-policy-groupchip {
background: var(--white); color: var(--gray-mid);
border: 1px solid var(--gray-light); border-radius: 999px;
padding: 4px 12px; font-family: var(--font-body);
font-size: .76rem; font-weight: 600; cursor: pointer;
transition: all var(--tr);
}
.pub-policy-groupchip:hover { border-color: var(--primary-light); color: var(--primary); }
.pub-policy-groupchip.is-active {
background: var(--primary); border-color: var(--primary); color: var(--white);
}
.pub-policy-catalog { display: flex; flex-direction: column; gap: 6px; }
.pub-policy-catalog-empty { font-size: .84rem; color: var(--gray); padding: 12px 0; }
.pub-policy-catalog-row {
display: flex; align-items: center; gap: 10px; width: 100%;
text-align: left; cursor: pointer;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 10px 12px;
font-family: var(--font-body); transition: all var(--tr);
}
.pub-policy-catalog-row:hover {
border-color: var(--primary-light); background: var(--primary-pale2);
}
.pub-policy-catalog-row.is-added { border-color: var(--primary-light); background: var(--primary-pale); }
.pub-policy-catalog-body { flex: 1; min-width: 0; }
.pub-policy-catalog-label {
display: block; font-size: .86rem; font-weight: 600; color: var(--dark);
}
.pub-policy-catalog-meta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.pub-policy-catalog-state {
flex-shrink: 0; font-size: .72rem; font-weight: 700;
color: var(--primary-dark);
}
.pub-policy-editor[hidden] { display: none; }
.pub-policy-editor-lead {
margin: 0 0 12px; font-size: .84rem; color: var(--gray-mid);
}
.pub-policy-editor-lead:empty { display: none; }
.pub-policy-editor .pub-policy-input-label {
display: block; margin: 10px 0 5px;
font-size: .8rem; font-weight: 600; color: var(--dark);
}
.pub-policy-editor .pub-offer-marketplace,
.pub-policy-editor .pub-offer-members,
.pub-policy-editor .pub-offer-groups { display: block; margin: 0; }
@media (max-width: 560px) {
.pub-offer-flow-header-top { flex-wrap: wrap; }
.pub-offer-flow-header-actions { width: 100%; justify-content: flex-end; }
}
.pub-settings-box .pub-collapsible-title { flex: 0 0 auto; }
.pub-settings-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pub-settings-badge {
font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
background: var(--primary-pale); color: var(--primary-dark);
}
.pub-settings-badge-empty { background: var(--gray-pale); color: var(--gray); font-weight: 500; }
.pub-settings-box .pub-access-section h3,
.pub-settings-box .pub-license-section h3 { margin-top: 4px; }
.pub-type-heading-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
min-width: 0;
}
.pub-type-heading-row .pub-type-heading { margin: 0; }
.pub-typeswitch { position: relative; z-index: 5; flex: 0 0 auto; }
@media (max-width: 640px) {
.pub-typeswitch-menu { right: auto; left: 0; }
}
.pub-typeswitch-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: 999px;
font-family: var(--font-body); font-size: .76rem; font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.pub-typeswitch-btn:hover {
background: var(--primary-pale2); border-color: var(--primary);
color: var(--primary-dark);
}
.pub-typeswitch-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pub-typeswitch-chev { transition: transform var(--tr); }
.pub-typeswitch-btn[aria-expanded="true"] .pub-typeswitch-chev { transform: rotate(180deg); }
.pub-typeswitch-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
min-width: 240px; width: max-content; max-width: min(320px, 80vw);
display: flex; flex-direction: column; padding: 6px;
background: var(--white);
border: 1.5px solid var(--primary-light);
border-radius: var(--radius-sm);
box-shadow: 0 10px 28px rgba(11, 55, 96, .16);
}
.pub-typeswitch-menu[hidden] { display: none; }
.pub-typeswitch-warning {
display: flex; align-items: flex-start; gap: 7px;
margin: 6px 0 0; padding: 9px 10px;
border-top: 1px solid var(--gray-light);
color: var(--amber, #b45309);
font-size: .74rem; line-height: 1.45; font-weight: 500;
}
.pub-typeswitch-warning svg { flex-shrink: 0; margin-top: 2px; }
.pub-typeswitch-menu button {
position: relative;
appearance: none; background: none; border: none; border-radius: 6px;
padding: 8px 12px 8px 24px; text-align: left; cursor: pointer;
font-family: inherit; font-size: .84rem; font-weight: 600;
color: var(--primary-dark, #0B3760);
}
.pub-typeswitch-menu button::before {
content: ''; position: absolute; left: 10px; top: 50%;
width: 5px; height: 5px; margin-top: -2.5px;
border-radius: 50%; background: var(--primary); opacity: .7;
}
.pub-typeswitch-menu button:hover,
.pub-typeswitch-menu button:focus-visible {
background: var(--primary-pale2); outline: none;
}
.pub-typeswitch-menu button:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.pub-delen-modebar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 18px;
}
.pub-offers-section .pub-btn-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px;
border-radius: var(--radius-pill, 999px);
border: 1.5px solid var(--primary-dark);
background: var(--primary-dark); color: var(--white);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.pub-offers-section .pub-btn-pill:hover { background: var(--primary); border-color: var(--primary); }
.pub-offers-section .pub-btn-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pub-offers-section .pub-btn-check-offer { border-radius: var(--radius-pill, 999px); }
.pub-offers-section .pub-btn-check-offer:disabled { opacity: 0.6; cursor: not-allowed; }
.pub-delen-mode-adjust,
.pub-delen-mode-accept,
.pub-delen-mode-save {
display: inline-flex; align-items: center; gap: 7px;
border-radius: var(--radius-sm); padding: 9px 16px;
font-family: var(--font-body); font-size: .86rem; font-weight: 600;
cursor: pointer; border: 1.5px solid transparent;
}
.pub-delen-mode-adjust {
background: var(--white); color: var(--primary); border-color: var(--primary-light);
}
.pub-delen-mode-adjust:hover { background: var(--primary-pale2); border-color: var(--primary); }
.pub-delen-mode-accept,
.pub-delen-mode-save { background: var(--primary); color: var(--white); }
.pub-delen-mode-accept:hover,
.pub-delen-mode-save:hover { background: var(--primary-dark); }
#pubDelenAccept.is-ready {
background: #2f855a; border-color: #2f855a; color: var(--white);
}
#pubDelenAccept.is-ready:hover { background: #276749; border-color: #276749; }
#pubDelenAccept.is-ready::before {
content: ''; flex: 0 0 auto;
width: 8px; height: 8px; border-radius: 50%; background: var(--white);
}
#pubDelenAccept:disabled { opacity: 0.6; cursor: not-allowed; }
.pub-delen-editfoot {
display: flex; justify-content: flex-end; align-items: center; gap: 10px;
margin-top: 18px; padding-top: 14px;
border-top: 1px solid rgba(20, 15, 42, .10);
}
.pub-panel.is-review .pub-delen-editfoot { display: none; }
.pub-offers-section-head {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 10px;
}
.pub-offers-section-head .pub-subsection-title { flex: 1; margin-bottom: 4px; }
.pub-btn-check-offer {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 7px 14px; font-family: var(--font-body);
font-size: .82rem; font-weight: 600; cursor: pointer;
transition: all var(--tr);
}
.pub-btn-check-offer:hover { background: var(--primary-pale2); border-color: var(--primary); }
.pub-panel.is-edit .pub-btn-check-offer { display: none; }
.pub-panel.is-review .pub-delen-mode-cancel,
.pub-panel.is-review .pub-delen-mode-save,
.pub-panel.is-review .pub-btn-offer-add,
.pub-panel.is-review .pub-offer-card-edit,
.pub-panel.is-review .pub-offer-card-remove,
.pub-panel.is-review .pub-offer-flow,
.pub-panel.is-review .pub-access-grid,
.pub-panel.is-review #pubLicenseAccessContext,
.pub-panel.is-review .pub-org-combobox,
.pub-panel.is-review .pub-rights-field { display: none !important; }
.pub-panel.is-review .pub-access-section,
.pub-panel.is-review .pub-license-section { display: none; }
.pub-panel.is-edit .pub-delen-mode-adjust,
.pub-panel.is-edit .pub-delen-mode-accept,
.pub-panel.is-edit .pub-tpl-summary { display: none !important; }
.pub-panel.is-review .pub-tpl-summary { display: none !important; }
.pub-panel.is-review .pub-settings-box .pub-collapsible-chev,
.pub-panel.is-review .pub-settings-box .pub-collapsible-body { display: none; }
.pub-panel.is-review .pub-settings-box .pub-collapsible-toggle { cursor: default; }
.pub-tpl-summary { margin: 4px 2px 0; }
.pub-tpl-summary[hidden] { display: none; }
.pub-tpl-sumrow {
display: flex; align-items: baseline; gap: 12px;
padding: 9px 0; border-bottom: 1px solid rgba(20, 15, 42, .10);
}
.pub-tpl-sumrow:last-of-type { border-bottom: none; }
.pub-tpl-sumrow-key {
flex: 0 0 34%; font-size: .82rem; font-weight: 700; color: var(--dark);
}
.pub-tpl-sumrow-val { flex: 1; font-size: .86rem; color: var(--dark); }
.pub-tpl-sumrow-val em { color: var(--gray); font-style: italic; }
.pub-tpl-adjust {
margin-top: 12px;
display: inline-flex; align-items: center; gap: 7px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 8px 14px; font-family: var(--font-body);
font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pub-tpl-adjust:hover { background: var(--primary-pale2); border-color: var(--primary); }
.pub-tpl-section:empty { display: none; }
.pub-tpl-head { margin-bottom: 14px; }
.pub-tpl-head .pub-subsection-title { margin-bottom: 4px; }
.pub-tpl-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pub-tpl-card {
display: flex; flex-direction: column; gap: 4px;
padding: 12px 14px; text-align: left; cursor: pointer;
background: var(--white);
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
font-family: var(--font-body);
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.pub-tpl-card:hover {
border-color: var(--primary-light); background: var(--primary-pale2);
}
.pub-tpl-card[data-tpl="custom"] {
border-style: dashed; border-width: 2px; border-color: var(--blue);
background: var(--blue-pale);
}
.pub-tpl-card[data-tpl="custom"]:hover {
border-color: var(--blue); background: var(--white);
}
.pub-tpl-card[data-tpl="custom"].is-selected {
border-style: dashed; border-color: var(--blue);
background: var(--blue-pale);
box-shadow: 0 0 0 3px rgba(59, 130, 230, .18);
}
.pub-tpl-card.is-selected {
border-color: var(--primary); background: var(--primary-pale);
box-shadow: 0 0 0 3px rgba(92, 63, 165, .12);
}
.pub-tpl-card-top { display: flex; align-items: center; gap: 8px; }
.pub-tpl-card-label {
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark2); flex: 1;
}
.pub-tpl-card-badge {
flex-shrink: 0; font-size: .66rem; font-weight: 700; letter-spacing: .02em;
padding: 2px 7px; border-radius: 999px;
background: var(--primary-pale); color: var(--primary-dark);
}
.pub-tpl-card.is-selected .pub-tpl-card-badge { background: var(--white); }
.pub-tpl-card-sub { font-size: .76rem; color: var(--gray); line-height: 1.4; }
.pub-tpl-note {
margin: 12px 0 0; padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--amber-pale); color: var(--amber);
font-size: .78rem; line-height: 1.45;
}
.pub-tpl-note[hidden] { display: none; }
.pub-ds-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: var(--white);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pub-ds-card-icon {
width: 30px; height: 30px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--primary-pale); color: var(--primary);
}
.pub-ds-card-icon svg { width: 16px; height: 16px; }
.pub-ds-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pub-ds-card-title {
font-family: var(--font-head); font-size: .88rem; font-weight: 600;
color: var(--dark2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-ds-card-meta { font-size: .76rem; color: var(--primary); font-weight: 600; }
.pub-ds-card-offers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: .76rem; }
.pub-ds-card-url {
font-size: .76rem; color: var(--gray);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-ds-card-desc {
font-size: .78rem; color: var(--gray); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.pub-ds-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pub-ds-card-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0;
background: none; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); color: var(--gray-mid); cursor: pointer;
}
.pub-ds-card-btn:hover { color: var(--primary); border-color: var(--primary); }
.pub-ds-card-btn-danger:hover { color: var(--red); border-color: var(--red); }
.pub-ds-serves-list { display: flex; flex-direction: column; gap: 6px; }
.pub-ds-serves-empty {
margin: 0; padding: 8px 12px;
border: 1px dashed var(--gray-light); border-radius: var(--radius-sm);
background: var(--gray-pale);
color: var(--gray); font-size: .8rem; font-style: italic;
}
.pub-ds-serves-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
background: var(--white);
}
.pub-ds-serves-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pub-ds-serves-title {
font-size: .84rem; font-weight: 600; color: var(--dark2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-ds-serves-uri {
font-size: .72rem; color: var(--gray-mid);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-ds-serves-add {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 7px 12px; font-family: var(--font-body);
font-size: .82rem; font-weight: 600; cursor: pointer;
}
.pub-ds-serves-add:hover { background: var(--primary-pale2); border-color: var(--primary); }
.pub-ds-select {
appearance: none; background: var(--white);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
cursor: pointer;
}
.pub-ds-chips {
display: flex; flex-wrap: wrap; gap: 6px;
min-height: 0;
}
.pub-ds-chips:empty { display: none; }
.pub-ds-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--primary-pale); color: var(--primary-dark);
border-radius: 999px; padding: 3px 4px 3px 10px;
font-size: .76rem; font-weight: 500;
}
.pub-ds-chip-remove {
background: none; border: none; color: inherit; cursor: pointer;
width: 18px; height: 18px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1;
}
.pub-ds-chip-remove:hover { background: var(--white); }
.pub-ds-chip-input {
width: 100%; box-sizing: border-box;
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 6px 10px; font-size: .82rem;
font-family: var(--font-body); outline: none;
}
.pub-ds-chip-input:focus { border-color: var(--primary); }
.pub-pubchoice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .pub-pubchoice-grid { grid-template-columns: 1fr; } }
.pub-pubchoice-card {
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 14px 16px; cursor: pointer;
transition: border-color var(--tr), background var(--tr);
}
.pub-pubchoice-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.pub-pubchoice-card.is-selected { border-color: var(--primary); background: var(--primary-pale); }
.pub-pubchoice-inner { display: flex; flex-direction: column; gap: 4px; }
.pub-pubchoice-icon {
width: 34px; height: 34px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--primary-pale); color: var(--primary); margin-bottom: 6px;
}
.pub-pubchoice-card.is-selected .pub-pubchoice-icon { background: var(--white); }
.pub-pubchoice-title,
.pub-pubchoice-label {
font-family: var(--font-head); font-size: .92rem; font-weight: 700;
color: var(--dark2); margin-bottom: 4px;
}
.pub-pubchoice-desc { font-size: .78rem; color: var(--gray); line-height: 1.5; }
.pub-pub-tenants { margin-top: 18px; }
.pub-pubchoice-card.is-disabled {
opacity: .55; cursor: not-allowed; pointer-events: none;
background: var(--gray-pale, #f6f6f8);
}
.pub-tenant-group + .pub-tenant-group { margin-top: 18px; }
.pub-tenant-group[hidden] { display: none; }
.pub-tenant-group-label {
margin: 0; font-size: .82rem; font-weight: 700; color: var(--dark2);
}
.pub-tenant-group-label[hidden] { display: none; }
.pub-tenant-group-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.pub-tenant-memberfilter {
display: inline-flex; align-items: center; gap: 7px;
font-size: .78rem; color: var(--gray); cursor: pointer;
}
.pub-tenant-memberfilter[hidden] { display: none; }
.pub-tenant-memberfilter input[type="checkbox"] { cursor: pointer; }
.pub-tenant-list {
margin-top: 10px;
display: flex !important; flex-direction: column !important;
grid-template-columns: none !important; gap: 8px;
}
.pub-tenant-item {
display: flex; align-items: center; gap: 14px;
background: var(--white); border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer;
font-size: .84rem; color: var(--dark); position: relative;
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.pub-tenant-item input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }
.pub-tenant-item:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.pub-tenant-item.is-checked {
border-color: var(--primary); background: var(--primary-pale);
box-shadow: 0 2px 6px rgba(92,63,165,.08);
}
.pub-tenant-logo {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px;
background: var(--white); border: 1px solid var(--gray-light);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pub-tenant-logo-img {
max-width: 34px; max-height: 34px; object-fit: contain; display: block;
}
.pub-tenant-logo-fallback {
font-family: var(--font-head); font-size: .75rem; font-weight: 700;
color: var(--primary); letter-spacing: .03em;
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.pub-tenant-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pub-tenant-item-name {
font-weight: 600; color: var(--dark2); font-size: .9rem;
display: inline-flex; align-items: center; gap: 8px;
}
.pub-tenant-item-meta { font-size: .76rem; color: var(--gray); }
.pub-tenant-check {
opacity: 0; color: var(--primary); transition: opacity var(--tr); flex-shrink: 0;
}
.pub-tenant-item.is-checked .pub-tenant-check { opacity: 1; }
.pub-tenant-item.is-locked { cursor: default; }
.pub-tenant-item.is-locked:hover {
border-color: var(--primary); background: var(--primary-pale);
}
.pub-tenant-item.is-locked input[type="checkbox"] { cursor: default; }
.pub-tenant-status {
font-size: .62rem; font-weight: 700; text-transform: uppercase;
padding: 2px 7px; border-radius: 10px; letter-spacing: .04em;
}
.pub-tenant-status-in-development { background: #FFF4D6; color: #8A6A00; }
.pub-tenant-status-planned { background: var(--gray-light); color: var(--gray); }
.pub-tenant-item.is-unusable {
opacity: .6; cursor: not-allowed; background: var(--gray-pale, #f6f6f8);
}
.pub-tenant-item.is-unusable:hover { border-color: var(--gray-light); }
.pub-tenant-status-role {
background: var(--dx-state-open-bg, #E4F3E7);
color: var(--dx-state-open-fg, #1F7A3C);
}
.pub-tenant-status-kept {
background: var(--dx-surface-band-soft, #F5F1EA);
color: var(--dx-brand, #0B3557);
text-transform: none; letter-spacing: 0; cursor: help;
}
.pub-pubchoice-callout {
margin-top: 16px; padding: 14px 16px;
border-radius: var(--radius-sm); border: 1px solid var(--gray-light);
background: var(--gray-pale); display: flex; gap: 10px; align-items: flex-start;
}
.pub-pubchoice-callout p { margin: 0; font-size: .86rem; color: var(--dark2); line-height: 1.55; }
.pub-pubchoice-callout-concept { border-color: #D9CBFA; background: #F6F2FD; color: var(--primary-dark); }
.pub-pubchoice-callout-concept > svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.pub-pubchoice-callout-intern { flex-direction: column; align-items: stretch; border-color: #CCE4F9; background: #EFF6FF; }
.pub-pubchoice-callout-head { display: flex; align-items: center; gap: 8px; color: #1D4ED8; }
.pub-pubchoice-callout-head strong { font-family: var(--font-head); font-size: .95rem; }
.pub-pubchoice-callout-hint { margin: 0 !important; font-size: .82rem; color: var(--gray); }
.pub-pub-link-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.pub-pub-link-input {
flex: 1; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 9px 12px; font-family: var(--mono, 'SFMono-Regular', Menlo, monospace);
font-size: .82rem; background: var(--white); color: var(--dark2); outline: none;
}
.pub-pub-link-input:focus { border-color: var(--primary); }
.pub-pub-link-copy {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: var(--white); border: none;
border-radius: var(--radius-sm); padding: 9px 14px;
font-family: var(--font-body); font-size: .82rem; font-weight: 600; cursor: pointer;
transition: background var(--tr);
}
.pub-pub-link-copy:hover { background: var(--primary-dark); }
@media (max-width: 520px) {
.pub-pub-link-row { flex-direction: column; }
}
.pub-part-group { margin-top: 28px; }
.pub-part-group:first-child { margin-top: 0; }
.pub-part-group-title {
font-family: var(--font-head); font-size: .95rem; font-weight: 700;
color: var(--dark2); margin-bottom: 4px;
padding-bottom: 8px; border-bottom: 1px solid var(--gray-light);
}
.pub-published-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(11, 55, 96, .45);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.pub-published-modal {
background: var(--white); border-radius: var(--radius);
width: 100%; max-width: 480px;
box-shadow: 0 18px 48px rgba(11, 55, 96, .28);
overflow: hidden;
}
.pub-published-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 22px; background: #f0fff4;
border-bottom: 1px solid #9ae6b4;
}
.pub-published-mark {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: #2f855a; color: var(--white);
}
.pub-published-head h2 {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
color: #22543d; margin: 0;
}
.pub-published-body { padding: 18px 22px; }
.pub-published-lead {
font-size: .9rem; color: var(--dark2); margin: 0 0 14px;
}
.pub-published-row {
display: flex; gap: 12px; padding: 7px 0;
border-top: 1px solid rgba(20, 15, 42, .07);
font-size: .85rem;
}
.pub-published-label { flex: 0 0 92px; color: var(--gray); }
.pub-published-value { flex: 1; color: var(--dark2); font-weight: 600; word-break: break-word; }
.pub-published-note {
margin: 14px 0 0; padding: 10px 12px;
background: var(--primary-pale2); border: 1px solid var(--primary-pale);
border-radius: var(--radius-sm);
font-size: .78rem; line-height: 1.55; color: var(--primary-dark);
}
.pub-published-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 22px 18px;
}
.pub-published-link {
display: inline-flex; align-items: center; gap: 7px;
font-size: .85rem; font-weight: 600; color: var(--primary);
text-decoration: none;
}
.pub-published-link:hover { text-decoration: underline; }
.pub-published-btn {
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 9px 16px; font-family: var(--font-body);
font-size: .85rem; font-weight: 600; cursor: pointer;
transition: background var(--tr);
}
.pub-published-btn:hover { background: var(--primary-dark); }
@media (max-width: 520px) {
.pub-published-foot { flex-direction: column-reverse; align-items: stretch; }
.pub-published-btn, .pub-published-link { justify-content: center; text-align: center; }
}
/* ── css/login-modal.css ── */
.sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
.login-modal-backdrop {
position: fixed; inset: 0; z-index: 600;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(20, 15, 42, .42);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: loginBackdropIn .2s ease;
}
@keyframes loginBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.login-modal {
position: relative;
width: 100%; max-width: 460px;
display: flex; flex-direction: column; gap: 14px;
animation: loginModalIn .26s cubic-bezier(.4, 0, .2, 1);
}
@keyframes loginModalIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-modal-close {
position: absolute; top: -42px; right: -2px;
background: rgba(255, 255, 255, .12); color: var(--white);
border: none; border-radius: 50%;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--tr), transform var(--tr);
}
.login-modal-close:hover {
background: rgba(255, 255, 255, .24);
transform: rotate(90deg);
}
.login-modal-brand {
background: linear-gradient(135deg,
rgba(248, 230, 232, .96) 0%,
rgba(231, 220, 244, .94) 60%,
rgba(217, 226, 244, .94) 100%);
border-radius: var(--radius);
padding: 22px 28px 18px;
box-shadow: var(--shadow);
display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.login-modal-brand-row {
display: flex; align-items: center; gap: 10px;
min-height: 32px;
}
.login-modal-brand-logo {
height: 28px; width: auto; max-width: 240px;
object-fit: contain;
}
.login-modal-brand-powered {
font-family: var(--font-body);
font-size: .78rem; color: var(--gray);
display: inline-flex; align-items: center; gap: 6px;
}
.login-modal-brand-ishare {
display: inline-flex; align-items: center; gap: 5px;
font-weight: 700; letter-spacing: .04em;
color: #B91467;
}
.login-modal-brand-ishare-dot {
width: 14px; height: 14px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ec4899 0%, #b91467 70%);
box-shadow: 0 1px 3px rgba(185, 20, 103, .35);
flex-shrink: 0;
}
.login-modal-card {
background: var(--white);
border-radius: var(--radius);
padding: 28px 32px 24px;
box-shadow: var(--shadow-md);
}
.login-modal-title {
font-family: var(--font-head);
font-size: 1.3rem; font-weight: 700;
color: var(--dark);
margin-bottom: 22px;
letter-spacing: -.01em;
}
.login-modal-form {
display: flex; flex-direction: column; gap: 12px;
}
.login-modal-field {
display: flex; flex-direction: column; gap: 4px;
}
.login-modal-field input {
font-family: var(--font-body);
font-size: .95rem; color: var(--dark);
padding: 12px 14px;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
background: var(--white);
transition: border-color var(--tr), box-shadow var(--tr);
}
.login-modal-field input::placeholder {
color: var(--gray-mid);
}
.login-modal-field input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-pale);
}
.login-modal-field input:invalid:not(:placeholder-shown) {
border-color: var(--red);
}
.login-modal-forgot {
align-self: center;
color: var(--primary);
font-size: .82rem; font-weight: 600;
margin: 8px 0 6px;
text-decoration: none;
}
.login-modal-forgot:hover { text-decoration: underline; }
.login-modal-submit {
margin-top: 4px;
background: var(--primary); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 13px 16px;
font-family: var(--font-head);
font-size: .82rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
cursor: pointer;
transition: background var(--tr), transform .1s ease;
}
.login-modal-submit:hover { background: var(--primary-dark); }
.login-modal-submit:active { transform: scale(.985); }
.login-modal-submit[disabled] {
opacity: .65; cursor: progress;
background: var(--primary-light);
}
.login-modal-create {
text-align: center;
font-size: .82rem; color: var(--gray);
margin-top: 18px;
}
.login-modal-create a {
color: var(--primary); font-weight: 600;
margin-left: 4px;
}
.login-modal-create a:hover { text-decoration: underline; }
.login-modal-prototype-note {
text-align: center;
font-size: .72rem; color: var(--gray-mid);
margin-top: 12px;
font-style: italic;
}
body.login-modal-open { overflow: hidden; }
@media (max-width: 520px) {
.login-modal { max-width: 100%; }
.login-modal-brand { padding: 18px 20px 14px; }
.login-modal-card { padding: 22px 20px 20px; }
.login-modal-title { font-size: 1.15rem; margin-bottom: 18px; }
.login-modal-close {
top: 10px; right: 10px;
background: rgba(20, 15, 42, .08);
color: var(--dark);
}
.login-modal-close:hover {
background: rgba(20, 15, 42, .14);
}
}
/* ── css/catalog-filters.css ── */
.fg {
border-bottom: 1px solid var(--gray-light);
padding: 0;
}
.fg:last-of-type { border-bottom: none; }
.fg-header {
width: 100%; display: flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer;
padding: 10px 14px; text-align: left;
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
color: var(--dark);
transition: background var(--tr);
}
.fg-header:hover { background: var(--primary-pale2); }
.fg-label { flex: 1; }
.fg-count {
font-size: .72rem; font-weight: 500; color: var(--gray);
background: var(--gray-light); border-radius: 20px;
padding: 1px 6px; min-width: 20px; text-align: center;
display: none;
}
.fg-header[aria-expanded="false"] .fg-count { display: inline; }
.fg-chevron {
flex-shrink: 0; color: var(--gray);
transition: transform .2s ease;
}
.fg-header[aria-expanded="false"] .fg-chevron { transform: rotate(-90deg); }
.fg-body {
padding: 4px 14px 12px;
overflow: hidden;
}
.fg-body--collapsed {
display: none;
}
.fc-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 0; cursor: pointer;
font-size: .82rem; color: var(--dark);
line-height: 1.3;
}
.fc-row:hover { color: var(--primary); }
.fc-row input[type="checkbox"],
.fc-row input[type="radio"] {
flex-shrink: 0;
width: 14px; height: 14px;
accent-color: var(--primary);
cursor: pointer;
}
.fc-label { flex: 1; }
.fc-n {
font-size: .72rem; color: var(--gray); font-weight: 500;
min-width: 24px; text-align: right;
}
.fc-sub {
margin: 2px 0 8px 22px;
padding-left: 10px;
border-left: 2px solid var(--border, rgba(0, 0, 0, .1));
}
.fc-sub[hidden] { display: none; }
.fc-sub-label {
display: block;
font-size: .68rem; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase;
color: var(--gray);
margin: 2px 0 2px;
}
.fc-sub .fl-row { font-size: .78rem; }
.fc-sub .fc-n { font-size: .68rem; }
.fc-row--participants {
color: var(--gray-dark, var(--dark));
}
.fc-row--participants input[type="checkbox"]:checked ~ .fc-label {
color: var(--primary);
}
.advanced-toggle {
display: flex; align-items: center; gap: 7px;
width: 100%; background: none; border: none; cursor: pointer;
padding: 9px 14px;
font-family: var(--font-body); font-size: .78rem; font-weight: 600;
color: var(--primary);
border-top: 1px dashed var(--gray-light);
transition: background var(--tr);
}
.advanced-toggle:hover { background: var(--primary-pale2); }
.advanced-toggle svg { flex-shrink: 0; }
.advanced-filters-wrap {
border-top: 1px solid var(--gray-light);
}
.advanced-filters-wrap[hidden] { display: none; }
.active-filters-block {
margin: -4px 0 12px;
padding: 2px 14px 12px;
background: none;
border: 0;
border-bottom: 1px solid var(--gray-light);
}
.active-filters-block[hidden] { display: none; }
.afb-heading {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.afb-heading-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--primary, #5C3FA5);
}
.afb-reset {
display: inline-block;
padding: 0;
background: transparent;
border: 0;
font: inherit;
font-size: 0.78rem;
font-weight: 500;
color: var(--gray, #6b7280);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(0,0,0,0.2);
}
.afb-reset:hover {
color: var(--primary, #5C3FA5);
text-decoration-color: currentColor;
}
.active-filter-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 0;
min-height: 0;
}
.active-filter-badges:empty { display: none; }
.afb-label {
font-size: .72rem;
font-weight: 600;
color: var(--text-muted, #6b7280);
white-space: nowrap;
margin-right: 2px;
}
.afb-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--primary-pale);
color: var(--primary);
border: 0;
border-radius: 20px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .03em;
padding: 3px 8px 3px 11px;
max-width: 260px;
min-width: 0;
}
.afb-chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.afb-remove {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
padding: 0 1px;
font-size: .75rem;
color: var(--primary);
opacity: .65;
line-height: 1;
transition: opacity .15s;
}
.afb-remove:hover { opacity: 1; }
.fl-search {
position: relative;
margin: 2px 0 7px;
}
.fl-search-icon {
position: absolute;
left: 8px; top: 50%;
transform: translateY(-50%);
color: var(--gray-mid);
pointer-events: none;
}
.fl-search-input {
width: 100%;
box-sizing: border-box;
padding: 5px 8px 5px 26px;
font-family: var(--font-body);
font-size: .78rem;
color: var(--dark);
background: var(--white);
border: 1px solid var(--border-control);
border-radius: 6px;
}
.fl-search-input::placeholder { color: var(--gray-mid); }
.fl-search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-pale);
}
.fl-row--on .fc-label { color: var(--primary); font-weight: 600; }
.fl-row--on .fc-n { color: var(--primary); }
.fl-more {
display: inline-block;
margin-top: 7px;
padding: 0;
background: none;
border: 0;
font: inherit;
font-size: .76rem;
font-weight: 600;
color: var(--primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(0,0,0,.2);
}
.fl-more:hover { text-decoration-color: currentColor; }
.fl-cap,
.fl-empty {
margin: 7px 0 0;
font-size: .72rem;
line-height: 1.4;
color: var(--gray);
}
.detail-link {
color: var(--primary);
word-break: break-all;
text-decoration: underline;
text-decoration-color: rgba(26,79,160,.3);
}
.detail-link:hover { text-decoration-color: var(--primary); }
.detail-link-prominent {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
font-size: .88rem;
}
.detail-hero-link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.detail-hero-link:hover { text-decoration: underline; }
.share-btn {
display: inline-flex; align-items: center; gap: 5px;
margin-left: auto;
padding: 0;
background: none; border: none;
font-size: .85rem; font-weight: 400;
color: rgba(255,255,255,.75);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, opacity 0.15s;
flex-shrink: 0;
}
.share-btn:hover { color: var(--white); }
.share-btn--copied { color: var(--white); font-weight: 600; }
.permalink-copy-btn {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
padding: 3px 4px;
background: none; border: none;
color: var(--gray-mid);
cursor: pointer;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
margin-top: 1px;
}
.permalink-copy-btn:hover { color: var(--primary); background: var(--gray-pale); }
.permalink-copy-btn--copied { color: var(--green, #22c55e) !important; background: transparent !important; }
/* ── css/basket.css ── */
.basket-header-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: transparent;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--dark);
transition: background var(--tr), border-color var(--tr), color var(--tr);
flex-shrink: 0;
}
.basket-header-btn:hover {
background: var(--primary-pale);
border-color: var(--primary);
color: var(--primary);
}
.basket-header-btn.has-items {
border-color: var(--primary);
color: var(--primary);
}
.basket-count-badge {
position: absolute;
top: -7px; right: -7px;
min-width: 18px; height: 18px;
background: var(--primary);
color: var(--white);
font-size: .62rem; font-weight: 700;
border-radius: 20px;
display: none; align-items: center; justify-content: center;
padding: 0 4px;
line-height: 1;
pointer-events: none;
border: 2px solid var(--white);
}
.basket-count-badge.visible { display: flex; }
.card-basket-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px;
background: transparent;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-xs);
font-family: var(--font-body); font-size: .74rem; font-weight: 600;
color: var(--gray);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
white-space: nowrap;
line-height: 1;
margin-left: auto;
}
.card-basket-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-pale);
}
.card-basket-btn.in-basket {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-pale);
}
.card-basket-btn svg { flex-shrink: 0; }
#basketPage {
min-height: calc(100vh - 60px);
background: var(--off-white);
}
.basket-back-wrap {
max-width: 880px;
margin: 0 auto;
padding: 20px 24px 0;
}
.basket-hero {
background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
padding: 36px 0 30px;
}
.basket-hero-inner {
max-width: 880px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.basket-hero-left h1 {
font-family: var(--font-head); font-size: 1.55rem; font-weight: 700;
color: var(--white); margin-bottom: 6px;
display: flex; align-items: center; gap: 10px;
}
.basket-hero-left p {
font-size: .85rem; color: rgba(255,255,255,0.55);
}
.basket-count-pill {
display: inline-flex; align-items: center; justify-content: center;
background: var(--primary); color: var(--white);
font-size: .68rem; font-weight: 700;
padding: 2px 10px; border-radius: 20px;
min-width: 26px;
}
.basket-wrap {
max-width: 880px; margin: 0 auto; padding: 32px 24px 48px;
}
.basket-empty {
background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 60px 32px;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.basket-empty svg { color: var(--gray-light); }
.basket-empty h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--dark); }
.basket-empty p { font-size: .875rem; color: var(--gray); max-width: 380px; line-height: 1.6; }
.basket-empty-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px;
background: var(--primary); color: var(--white);
border-radius: var(--radius-sm); font-weight: 600; font-size: .875rem;
cursor: pointer; border: none; font-family: var(--font-body);
transition: background var(--tr);
text-decoration: none; margin-top: 4px;
}
.basket-empty-cta:hover { background: var(--primary-dark); }
.basket-list-header {
display: flex; justify-content: flex-end; align-items: center;
margin-bottom: 8px;
}
.fav-group + .fav-group { margin-top: 10px; }
.fav-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--gray-light);
}
.fav-group-title {
margin: 0;
font-family: var(--font-head, inherit);
font-size: .95rem;
font-weight: 700;
color: var(--dark);
}
.fav-group-count {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
border-radius: 20px;
background: var(--primary-pale2, #F5F2FD);
color: var(--primary-dark, #3D2875);
font-size: .72rem;
font-weight: 700;
vertical-align: middle;
}
.fav-offer-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.fav-offer-card {
background: var(--white);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
border-left: 3px solid var(--primary, #5C3FA5);
overflow: hidden;
}
.fav-offer-body {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
}
.fav-offer-info { flex: 1 1 auto; min-width: 0; }
.fav-offer-title {
font-size: .92rem;
font-weight: 700;
color: var(--dark);
line-height: 1.35;
}
.fav-offer-chips {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 7px;
}
.fav-offer-res {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 9px;
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: .8rem;
font-weight: 500;
color: var(--gray);
cursor: pointer;
text-align: left;
transition: color var(--tr);
}
.fav-offer-res:hover { color: var(--primary); }
.fav-offer-res:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 2px; }
.fav-offer-res:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.fav-offer-res svg { flex-shrink: 0; }
.fav-offer-remove { flex-shrink: 0; }
.basket-clear-link {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: none; padding: 4px 2px;
font-family: var(--font-body); font-size: .82rem; font-weight: 500;
color: var(--red); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
transition: color var(--tr), opacity var(--tr);
}
.basket-clear-link:hover { opacity: 0.75; }
.basket-clear-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.basket-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.basket-card {
background: var(--white);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
display: flex; align-items: stretch;
overflow: hidden;
transition: box-shadow var(--tr), transform var(--tr);
cursor: pointer;
}
.basket-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.basket-card-accent {
width: 4px; flex-shrink: 0;
background: var(--primary-light);
}
.basket-card-accent.access-public { background: var(--access-public); }
.basket-card-accent.access-restricted { background: var(--access-restricted); }
.basket-card-accent.access-private { background: var(--access-private); }
.basket-card-body {
flex: 1; padding: 12px 14px;
display: flex; align-items: center; gap: 14px;
}
.basket-card-info { flex: 1; min-width: 0; }
.basket-card-title {
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark); margin-bottom: 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.basket-card-id {
display: flex; align-items: center; gap: 4px;
font-size: .71rem; color: var(--gray-mid);
margin-bottom: 5px;
}
.basket-card-id svg { flex-shrink: 0; opacity: 0.6; }
.basket-card-id-link {
color: var(--primary); text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.basket-card-id-link:hover { text-decoration: underline; }
.basket-card-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.basket-card-org {
font-size: .74rem; color: var(--gray);
display: flex; align-items: center; gap: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
flex-shrink: 0;
}
.basket-card-badges {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.basket-remove-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0;
background: transparent; border: none;
color: var(--gray-mid); cursor: pointer;
border-radius: 6px; transition: background var(--tr), color var(--tr);
}
.basket-remove-btn:hover { background: var(--red-pale); color: var(--red); }
.basket-remove-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.basket-actions {
display: flex; gap: 10px; flex-wrap: wrap;
padding-top: 18px;
border-top: 1.5px solid var(--gray-light);
align-items: center;
}
.basket-action-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .875rem; font-weight: 600;
cursor: pointer; border: none; transition: background var(--tr), color var(--tr), opacity var(--tr);
text-decoration: none; white-space: nowrap;
}
.basket-action-btn--clear {
background: var(--white); color: var(--red);
border: 1.5px solid currentColor;
}
.basket-action-btn--clear:hover { background: var(--red-pale); }
.basket-action-btn--bundle {
background: var(--primary); color: var(--white);
border: 1.5px solid var(--primary);
}
.basket-action-btn--bundle:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.basket-action-btn--save {
background: var(--gray-pale); color: var(--gray-mid);
border: 1.5px solid var(--gray-light);
cursor: not-allowed; opacity: 0.55;
pointer-events: none;
}
.policy-basket-divider {
border: none; border-top: 1px solid rgba(26,79,160,0.15);
margin: 14px 0 12px;
}
.policy-basket-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
flex: 1 1 auto;
min-width: 0;
padding: 9px 14px;
background: transparent;
border: 1.5px solid rgba(26,79,160,0.3);
border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
color: #1A4FA0;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
white-space: nowrap;
}
.policy-basket-btn:hover {
background: rgba(26,79,160,0.07);
border-color: rgba(26,79,160,0.55);
}
.policy-basket-btn.in-basket {
background: rgba(26,79,160,0.09);
border-color: #1A4FA0;
}
.policy-basket-btn svg { flex-shrink: 0; }
.policy-basket-btn--icon {
width: auto;
padding: 8px 10px;
gap: 0;
flex-shrink: 0;
}
.home-search-hint {
margin-top: 18px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
text-align: center;
}
/* ── css/nav-search.css ── */
.header-nav {
display: flex;
align-items: center;
gap: 2px;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.83rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--dark);
text-decoration: none;
padding: 8px 14px;
border-radius: var(--radius-sm);
border: none;
background: none;
cursor: pointer;
white-space: nowrap;
transition: color var(--tr), background var(--tr);
line-height: 1;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] {
color: var(--primary);
background: var(--primary-pale);
}
.nav-link--soon {
color: var(--gray-mid);
opacity: 0.75;
cursor: default;
}
.nav-link--soon:hover {
color: var(--gray-mid);
background: none;
}
.nav-chevron {
color: var(--gray);
transition: transform .2s ease;
flex-shrink: 0;
}
.nav-link[aria-expanded="true"] .nav-chevron {
transform: rotate(180deg);
}
.nav-dropdown-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: auto;
min-width: 230px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 6px 0;
z-index: 300;
}
.nav-dropdown-section-label {
padding: 8px 16px 4px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-mid);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
font-size: 0.85rem;
font-weight: 500;
color: var(--dark);
text-decoration: none;
transition: background var(--tr), color var(--tr);
}
.nav-dropdown-item:hover {
background: var(--primary-pale);
color: var(--primary);
text-decoration: none;
}
.nav-dropdown-item svg { flex-shrink: 0; color: var(--gray); }
.nav-ext::after {
content: "";
width: 11px; height: 11px;
flex-shrink: 0;
margin-left: 2px;
background-color: currentColor;
opacity: .55;
-webkit-mask: var(--nav-ext-glyph) center / contain no-repeat;
mask: var(--nav-ext-glyph) center / contain no-repeat;
}
.nav-ext:hover::after { opacity: .9; }
:root {
--nav-ext-glyph: url('data:image/svg+xml;utf8,\
');
}
.nav-dropdown-divider {
height: 1px;
background: var(--gray-light);
margin: 4px 0;
}
.nav-dropdown-coming {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 16px;
font-size: 0.82rem;
color: var(--gray-mid);
opacity: 0.75;
}
.nav-dropdown-coming svg { flex-shrink: 0; }
.nav-dropdown-subitem { padding-left: 30px; }
.header-search {
--hs-w: 128px;
--hs-h: 36px;
position: relative;
flex-shrink: 0;
width: var(--hs-w);
height: var(--hs-h);
}
.header-search-form {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
width: var(--hs-w);
height: var(--hs-h);
padding: 0 10px 0 5px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
overflow: hidden;
z-index: 210;
transition: width .32s cubic-bezier(.4, 0, .2, 1),
border-color var(--tr),
box-shadow var(--tr);
}
.header-search-form:hover { border-color: var(--primary); }
.header-search[data-expanded="true"] .header-search-form {
border-color: var(--primary);
box-shadow: 0 6px 22px rgba(92, 63, 165, 0.16);
}
.header-search-label {
flex: 1;
min-width: 0;
font-family: var(--font-body);
font-size: 0.84rem;
font-weight: 600;
color: var(--gray);
white-space: nowrap;
overflow: hidden;
user-select: none;
}
.header-search[data-expanded="true"] .header-search-label { display: none; }
.header-search-input {
display: none;
flex: 1;
min-width: 0;
padding: 0;
border: none;
outline: none;
background: none;
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--dark);
}
.header-search-input::placeholder { color: var(--gray-mid); }
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.header-search[data-expanded="true"] .header-search-input {
display: block;
animation: hsInputIn .26s ease both;
}
@keyframes hsInputIn {
from { opacity: 0; transform: translateX(6px); }
to { opacity: 1; transform: translateX(0); }
}
.header-search-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: var(--radius-xs);
background: none;
color: var(--primary);
cursor: pointer;
transition: color var(--tr);
}
.header-search-btn:hover { color: var(--primary-dark); }
.header-search-clear {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
min-height: 24px;
padding: 0;
margin-left: 2px;
border: none;
border-radius: 50%;
background: none;
color: var(--gray-mid);
cursor: pointer;
transition: color var(--tr), background var(--tr);
}
.header-search-clear[hidden] { display: none; }
.header-search-clear:hover {
color: var(--dark);
background: var(--gray-pale);
}
.header-search .header-search-open {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: none;
background: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.header-search[data-expanded="true"] .header-search-open { display: none; }
.header-search .header-search-open:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.header-hubs {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
color: var(--gray);
text-decoration: none;
transition: color var(--tr), background var(--tr), opacity .2s ease;
}
.header-hubs:hover {
color: var(--primary);
background: var(--primary-pale);
}
.header-hubs:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.header-hubs.is-active {
color: var(--primary);
background: var(--primary-pale);
}
.header-nav { transition: opacity .2s ease; }
.header-inner.is-searching .header-nav,
.header-inner.is-searching .header-hubs {
opacity: 0;
pointer-events: none;
}
.suggest-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
max-height: 340px;
overflow-y: auto;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 4px 0;
z-index: 320;
}
.suggest-panel[hidden] { display: none; }
.header-search .suggest-panel {
left: auto;
right: 0;
width: 485px;
max-width: 92vw;
}
.suggest-panel--overlay {
position: fixed;
right: auto;
z-index: 340;
}
.suggest-panel--inline {
position: static;
width: auto;
max-height: none;
overflow: visible;
margin: 10px 0 2px;
box-shadow: none;
}
.suggest-group {
padding: 8px 14px 4px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-mid);
}
.suggest-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px 14px;
text-decoration: none;
color: var(--dark);
cursor: pointer;
}
.suggest-item:hover,
.suggest-item.is-active {
background: var(--primary-pale);
text-decoration: none;
}
.suggest-item-title {
font-size: 0.87rem;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.suggest-item-title mark {
background: none;
color: var(--primary);
font-weight: 700;
}
.suggest-item-meta {
font-size: 0.74rem;
color: var(--gray);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.suggest-all {
border-top: 1px solid var(--gray-light);
margin-top: 4px;
padding-top: 9px;
font-size: 0.8rem;
font-weight: 600;
color: var(--primary);
}
.suggest-empty {
padding: 12px 14px;
font-size: 0.83rem;
color: var(--gray);
}
.header-search.is-route-hidden { display: none !important; }
@media (max-width: 1080px) {
.header-search { --hs-w: 38px; }
.header-search-form { padding: 0 4px 0 4px; }
.header-search-label { display: none; }
}
/* ── css/beheer.css ── */
.st-stats {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.st-stat {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
}
.st-stat-num {
font-family: var(--font-head);
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
}
.st-stat-label {
font-size: 0.76rem;
color: var(--gray);
}
button.st-stat-btn {
font: inherit;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
position: relative;
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
button.st-stat-btn:hover {
border-color: var(--primary);
background: var(--primary-pale2, #F5F2FD);
}
button.st-stat-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
button.st-stat-btn.is-active {
border-color: var(--primary);
background: var(--primary-pale, #EDE8F9);
box-shadow: inset 0 0 0 1px var(--primary);
}
button.st-stat-btn.is-active .st-stat-label { color: var(--primary-dark, #4B2A8A); font-weight: 600; }
.gs-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-label {
font-size: .72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .05em;
color: var(--gray, #6B7A8D);
white-space: nowrap;
}
.gs-switch {
display: inline-flex; gap: 2px; padding: 3px; flex-wrap: wrap;
background: var(--gray-pale, #F4F2F8);
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm);
}
.gs-seg {
appearance: none; border: 0; background: transparent;
font: inherit; font-size: .8rem; font-weight: 600;
color: var(--gray, #6B7A8D);
padding: 5px 12px; border-radius: var(--radius-xs);
cursor: pointer; white-space: nowrap;
transition: background var(--tr), color var(--tr);
}
.gs-seg:hover { color: var(--dark); }
.gs-seg:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gs-seg.is-active {
background: var(--primary);
color: var(--white);
}
.gs-seg-wrap { display: inline-flex; }
.gs-seg.is-disabled,
.gs-seg:disabled {
color: var(--gray-mid, #9AA3AF);
opacity: .75;
cursor: not-allowed;
}
.gs-seg.is-disabled:hover,
.gs-seg:disabled:hover { color: var(--gray-mid, #9AA3AF); background: transparent; }
@media (max-width: 560px) {
.gs-wrap { flex-wrap: wrap; gap: 6px; }
.gs-seg { padding: 5px 10px; font-size: .76rem; }
}
.st-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.st-toolbar--card {
padding: 14px 18px;
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
gap: 18px;
margin-bottom: 16px;
}
.st-toolbar-right {
margin-left: auto;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.st-toolbar--card .agreements-active-filters { margin: 0; }
@media (max-width: 700px) {
.st-toolbar-right { margin-left: 0; width: 100%; }
}
.agreements-controls .gs-wrap {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.agreements-controls .gs-label {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ds-text-muted, #6b7280);
}
.st-filter {
flex: 1;
min-width: 180px;
height: 36px;
padding: 0 12px;
font-family: var(--font-body);
font-size: 0.86rem;
color: var(--dark);
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
outline: none;
}
.st-filter:focus { border-color: var(--primary); }
.st-min {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--gray);
white-space: nowrap;
}
.st-min input {
width: 58px;
min-height: 36px;
padding: 0 8px;
font-family: var(--font-body);
font-size: 0.86rem;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
outline: none;
}
.st-count {
font-size: 0.78rem;
color: var(--gray-mid);
white-space: nowrap;
}
.st-refresh {
min-height: 36px;
padding: 0 14px;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--primary);
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.st-stat-filter-icon {
position: absolute;
top: 8px;
right: 8px;
display: block;
color: var(--gray-mid, #9AA3AF);
opacity: .7;
pointer-events: none;
transition: color var(--tr), opacity var(--tr);
}
button.st-stat-btn:hover .st-stat-filter-icon,
button.st-stat-btn.is-active .st-stat-filter-icon {
color: var(--primary);
opacity: 1;
}
.st-refresh:hover { background: var(--primary-pale); border-color: var(--primary); }
.st-table-wrap {
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
overflow-x: auto;
overflow-y: hidden;
}
.st-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.st-table:not(.am-table):not(.auth-table) { --st-gutter: transparent; }
.st-table-wrap:has(> .st-table:not(.am-table):not(.auth-table)) {
background: transparent;
border: 0;
border-radius: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 6px;
margin: -6px;
}
.st-table:not(.am-table):not(.auth-table) {
border-collapse: separate;
border-spacing: 0;
}
.st-table:not(.am-table):not(.auth-table) > thead > tr > th:first-child { border-top-left-radius: var(--radius-sm); }
.st-table:not(.am-table):not(.auth-table) > thead > tr > th:last-child { border-top-right-radius: var(--radius-sm); }
.st-table:not(.am-table):not(.auth-table) > tbody > tr > td {
background: var(--white);
background-clip: padding-box;
border-bottom: 3px solid var(--st-gutter);
}
.st-table:not(.am-table):not(.auth-table) > tbody > tr > td:first-child {
border-top-left-radius: var(--radius-xs);
border-bottom-left-radius: var(--radius-xs);
}
.st-table:not(.am-table):not(.auth-table) > tbody > tr > td:last-child {
border-top-right-radius: var(--radius-xs);
border-bottom-right-radius: var(--radius-xs);
}
.st-table:not(.am-table):not(.auth-table) > tbody > tr:hover > td {
background-color: var(--primary-pale2);
}
.st-table th {
padding: 10px 14px;
text-align: left;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-mid);
background: var(--gray-pale);
border-bottom: 1px solid var(--gray-light);
white-space: nowrap;
}
.st-table td {
padding: 9px 14px;
border-bottom: 1px solid var(--gray-light);
vertical-align: middle;
}
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: var(--primary-pale2); }
.st-col-rank { width: 46px; color: var(--gray-mid); font-variant-numeric: tabular-nums; }
.st-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-pop { font-weight: 700; color: var(--primary); }
.st-zero { color: var(--gray-mid); }
.st-term a { font-weight: 600; color: var(--dark); }
.st-term a:hover { color: var(--primary); }
.st-tenants,
.st-when { font-size: 0.78rem; color: var(--gray); white-space: nowrap; }
@media (max-width: 768px) {
.st-stats { flex-direction: column; gap: 8px; }
.st-col-rank,
.st-table th:nth-child(4), .st-table td:nth-child(4),
.st-table th:nth-child(5), .st-table td:nth-child(5),
.st-tenants, .st-table th:nth-child(6) { display: none; }
}
.ix-stat-warn { color: #B3261E; }
.ix-flash {
margin-bottom: 14px;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
border-left: 3px solid transparent;
}
.ix-flash-ok { background: #ECFDF5; color: #065F46; border-left-color: #10B981; }
.ix-flash-err { background: #FEF2F2; color: #991B1B; border-left-color: #EF4444; }
.hv-role {
margin-bottom: 14px;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid #E5E7EB;
border-left: 4px solid #9CA3AF;
background: #F9FAFB;
}
.hv-role-active { background: #ECFDF5; border-color: #A7F3D0; border-left-color: #10B981; }
.hv-role-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.hv-role-text { flex: 1; min-width: 220px; }
.hv-role-title { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-role-dot { width: 10px; height: 10px; border-radius: 50%; background: #9CA3AF; flex: none; }
.hv-role-active .hv-role-dot { background: #10B981; }
.hv-role-host { font-weight: 400; font-size: 0.8rem; color: #4B5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hv-role-body { margin: 4px 0 0; font-size: 0.85rem; }
.hv-role-meta { margin: 4px 0 0; font-size: 0.8rem; color: #4B5563; overflow-wrap: anywhere; }
.hv-role-btn { flex: none; }
.hv-role-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid #E5E7EB; }
.hv-role-warn {
margin: 0 0 10px;
padding: 8px 10px;
font-size: 0.85rem;
background: #FFFBEB;
color: #92400E;
border-left: 3px solid #F59E0B;
border-radius: var(--radius-sm);
}
.hv-role-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.hv-role-input {
width: 100%;
max-width: 520px;
box-sizing: border-box;
padding: 7px 10px;
font: inherit;
font-size: 0.85rem;
border: 1px solid #D1D5DB;
border-radius: var(--radius-sm);
background: #fff;
}
.hv-role-input:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }
.hv-role-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ix-toolbar-note {
flex: 1;
min-width: 200px;
font-size: 0.78rem;
color: var(--gray);
line-height: 1.4;
}
.ix-table td { vertical-align: top; }
.ix-source { font-weight: 600; color: var(--dark); }
.ix-queue {
margin-top: 2px;
font-size: 0.74rem;
color: var(--gray-mid);
font-variant-numeric: tabular-nums;
}
.ix-event-driven {
display: inline-block;
font-size: 0.78rem;
color: var(--gray-mid);
font-style: italic;
}
.ix-when { font-size: 0.82rem; color: var(--dark); white-space: nowrap; }
.ix-when small,
.ix-table td > small {
display: block;
margin-top: 2px;
font-size: 0.72rem;
color: var(--gray-mid);
}
.ix-details {
margin-top: 3px;
font-size: 0.74rem;
color: var(--gray);
}
.ix-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.ix-badge-ok { background: #D1FAE5; color: #065F46; }
.ix-badge-failed { background: #FEE2E2; color: #991B1B; }
.ix-badge-running { background: #DBEAFE; color: #1E40AF; }
.ix-badge-never { background: var(--gray-pale); color: var(--gray-mid); }
.ix-badge-stale { background: #FEF3C7; color: #92400E; }
.ix-col-action { text-align: right; white-space: nowrap; }
.six-hub-title {
font-family: var(--font-head); font-size: 0.95rem; font-weight: 700;
color: var(--dark); margin: 34px 0 6px;
}
.ix-run {
height: 30px;
padding: 0 12px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--white);
background: var(--primary);
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--tr), opacity var(--tr);
}
.ix-run:hover:not(:disabled) { background: var(--primary-dark); }
.ix-run:disabled { opacity: 0.6; cursor: default; }
.voc-edit-btn {
display: inline-flex; align-items: center;
text-decoration: none;
white-space: nowrap;
}
.voc-edit-btn:hover { background: var(--primary-dark); color: var(--white); }
.voc-desc {
max-width: 46ch;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.voc-empty-note { margin-top: 8px; font-size: .85rem; color: var(--gray); }
.hero-cta-row { margin-top: 14px; }
.hero-inline-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: .88rem; font-weight: 600;
color: var(--primary); text-decoration: none;
padding: 6px 12px; border-radius: var(--radius-sm);
background: var(--white);
border: 1px solid var(--gray-light);
transition: border-color var(--tr), color var(--tr);
}
.hero-inline-link:hover { border-color: var(--primary); color: var(--primary-dark); }
.hero-inline-link svg { flex-shrink: 0; }
.ix-foot {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--gray-light);
font-size: 0.82rem;
}
.ix-foot a { color: var(--primary); font-weight: 600; }
.ix-foot a:hover { text-decoration: underline; }
@media (max-width: 768px) {
.ix-queue,
.ix-table th:nth-child(4), .ix-table td:nth-child(4) { display: none; }
}
.ix-badge-skipped { background: var(--gray-pale); color: var(--gray-mid); }
.hv-uitval-toggle {
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
color: var(--primary);
cursor: pointer;
}
.hv-uitval-toggle:hover { text-decoration: underline; }
.hv-uitval-row > td { background: var(--primary-pale2); }
.hv-uitval {
margin: 0;
padding: 0 0 0 18px;
list-style: disc;
}
.hv-uitval li { margin: 4px 0; font-size: 0.82rem; }
.hv-uitval-key { font-family: var(--font-mono, monospace); font-size: 0.78rem; }
.hv-uitval-label { color: var(--dark); font-weight: 600; }
.hv-uitval-hint {
margin: 8px 0 0;
font-size: 0.74rem;
color: var(--gray);
}
.ag-sort {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--gray);
white-space: nowrap;
}
.ag-sort select {
height: 36px;
padding: 0 10px;
font-family: var(--font-body);
font-size: 0.84rem;
color: var(--dark);
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
outline: none;
cursor: pointer;
}
.ag-sort select:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; }
.ag-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.ag-table .ag-name-text { font-weight: 600; color: var(--dark); }
.ag-table .ag-col-eori {
width: 72px;
text-align: center;
white-space: nowrap;
}
.ag-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: #1E7A4B;
background: #E6F4EC;
}
.ag-check svg { width: 12px; height: 12px; }
.ag-detail { padding: 4px 0 2px; }
.ag-detail-title {
margin: 0 0 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gray);
}
.ag-ids {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.ag-id {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ag-id code {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 0.78rem;
color: var(--dark);
word-break: break-all;
user-select: all;
}
.ag-id.is-primary code { color: var(--primary); }
.ag-id-tag {
padding: 1px 7px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--primary);
background: var(--primary-pale2, #F5F2FD);
border-radius: 999px;
}
.ag-id-link {
color: var(--gray-mid);
text-decoration: none;
font-size: 0.8rem;
}
.ag-id-link:hover { color: var(--primary); }
.ag-id-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.ag-fields {
margin: 0 0 12px;
padding: 0 0 10px;
border-bottom: 1px solid var(--gray-light);
display: flex;
flex-direction: column;
gap: 5px;
}
.ag-field {
display: grid;
grid-template-columns: 190px 1fr;
gap: 10px;
align-items: baseline;
}
.ag-field dt {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gray);
}
.ag-field dd {
margin: 0;
font-size: 0.8rem;
color: var(--dark);
min-width: 0;
}
.ag-field dd code {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 0.78rem;
word-break: break-all;
user-select: all;
}
@media (max-width: 600px) {
.ag-field { grid-template-columns: 1fr; gap: 2px; }
}
.ag-hl {
padding: 0 1px;
font-weight: 700;
color: var(--dark);
background: var(--primary-pale2, #F5F2FD);
border-radius: 2px;
}
@media (max-width: 700px) {
.ag-sort { width: 100%; }
.ag-sort select { flex: 1; }
.ag-table .ag-col-eori { width: 52px; }
}
.error-banner.error-banner--warn {
background: #FFF8E6;
border-color: #F0D48A;
color: #7A5200;
}
.pol-table .pol-name-text { font-weight: 600; color: var(--dark); }
.pol-table .pol-col-auth {
width: 22%;
font-size: 0.86rem;
color: var(--gray);
}
.pol-table .pol-col-status { width: 148px; white-space: nowrap; }
.pol-table .pol-col-version { width: 92px; }
.pol-table .pol-col-until { width: 128px; white-space: nowrap; font-size: 0.84rem; }
.pol-table .pol-col-action { width: 46px; text-align: right; }
.pol-tag {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gray-mid);
}
.pol-past { color: #92400E; text-decoration: line-through; }
.pol-forever { color: var(--gray-mid); font-style: italic; }
.pol-desc {
margin: 0 0 10px;
max-width: 72ch;
font-size: 0.86rem;
line-height: 1.5;
color: var(--dark);
}
.pol-block { margin-bottom: 10px; }
.pol-fields { margin-top: 4px; }
@media (max-width: 900px) {
.pol-table th:nth-child(2), .pol-table td:nth-child(2),
.pol-table th:nth-child(4), .pol-table td:nth-child(4) { display: none; }
}
.ag-admin {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--gray-light);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ag-editor {
display: block;
max-width: 62ch;
}
.ag-editor .request-field { margin-bottom: 10px; }
.ag-admin-actions {
display: flex;
gap: 8px;
margin-top: 14px;
}
.ag-warn {
flex-basis: 100%;
margin: 0 0 4px;
max-width: 72ch;
font-size: 0.86rem;
line-height: 1.5;
color: #92400E;
}
/* ── css/mobile.css ── */
.hamburger-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 36px;
height: 36px;
border: 0;
background: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
color: var(--dark);
transition: color var(--tr);
}
.hamburger-btn:hover { color: var(--primary); }
.hamburger-bar {
display: block;
width: 20px;
height: 2.5px;
background: currentColor;
border-radius: 2px;
transition: transform .22s ease, opacity .22s ease, background var(--tr);
}
.hamburger-btn[aria-expanded="true"] { color: var(--primary); }
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
html.nav-open,
html.nav-open body,
html.login-open,
html.login-open body { overflow: hidden; }
html.nav-open .site-header,
html.login-open .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
html.nav-open body,
html.login-open body { padding-top: 60px; }
.mobile-nav-backdrop {
display: none;
position: fixed;
inset: 60px 0 0 0;
background: rgba(20, 15, 42, 0.35);
z-index: 198;
backdrop-filter: blur(2px);
}
.mobile-nav-backdrop.open { display: block; }
.mobile-nav-drawer {
position: fixed;
top: 60px;
left: 0;
right: 0;
z-index: 199;
background: var(--white);
border-bottom: 1.5px solid var(--gray-light, #E8E4F0);
border-bottom-color: color-mix(in srgb, var(--primary) 16%, #ffffff);
box-shadow: var(--shadow-md);
overflow-y: auto;
max-height: calc(100vh - 60px);
animation: drawerSlideIn .2s ease;
}
@keyframes drawerSlideIn {
from { transform: translateY(-8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.mobile-nav-drawer[hidden] { display: none; }
.mobile-nav-section {
padding: 8px 20px 4px;
}
.mobile-nav-search {
padding: 14px 20px 12px;
border-bottom: 1px solid var(--gray-light);
}
.mobile-search-form {
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
width: 100%;
min-height: 44px;
padding: 0 0 0 10px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--tr), box-shadow var(--tr);
}
.mobile-search-icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--primary);
}
.mobile-search-form:focus-within {
border-color: var(--primary);
box-shadow: 0 4px 16px rgba(92, 63, 165, 0.12);
}
.mobile-search-input {
flex: 1;
min-width: 0;
padding: 0;
border: none;
outline: none;
background: none;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark);
}
.mobile-search-input::placeholder { color: var(--gray-mid); }
.mobile-search-input::-webkit-search-cancel-button,
.mobile-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.mobile-search-go {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
align-self: stretch;
margin: -1.5px -1.5px -1.5px 0;
padding: 0;
border: none;
border-radius: 0;
background: var(--primary);
color: var(--white);
cursor: pointer;
transition: background var(--tr);
}
.mobile-search-go:hover,
.mobile-search-go:active { background: var(--primary-dark); }
.mobile-nav-section-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-mid);
padding: 10px 0 6px;
}
.mobile-nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 0;
font-size: 0.92rem;
font-weight: 600;
color: var(--dark);
text-decoration: none;
border-bottom: 1px solid var(--gray-light);
transition: color var(--tr);
}
.mobile-nav-link:last-of-type { border-bottom: none; }
.mobile-nav-link:hover { color: var(--primary); text-decoration: none; }
.mobile-nav-link svg { flex-shrink: 0; color: var(--gray); }
.mobile-nav-coming {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
font-size: 0.85rem;
color: var(--gray-mid);
opacity: 0.65;
border-bottom: 1px solid var(--gray-light);
}
.mobile-nav-coming:last-child { border-bottom: none; }
.mobile-nav-coming svg { flex-shrink: 0; }
.mobile-nav-divider {
height: 1px;
background: var(--gray-light);
margin: 4px 0;
}
.mobile-nav-acc { border-bottom: 1px solid var(--gray-light); }
.mobile-nav-acc-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
padding: 13px 0;
background: none;
border: 0;
cursor: pointer;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dark);
text-align: left;
}
.mobile-nav-acc-header:hover { color: var(--primary); }
.mobile-nav-acc-header--link { text-decoration: none; border-bottom: 1px solid var(--gray-light); }
.mobile-nav-acc-header--soon {
border-bottom: 1px solid var(--gray-light);
color: var(--gray-mid);
opacity: 0.75;
cursor: default;
}
.mobile-nav-acc-header--soon:hover { color: var(--gray-mid); }
.mobile-nav-acc-header .nav-chevron { flex-shrink: 0; transition: transform var(--tr); }
.mobile-nav-acc[data-expanded="true"] .mobile-nav-acc-header .nav-chevron { transform: rotate(180deg); }
.mobile-nav-acc-body { padding-bottom: 6px; }
.mobile-nav-acc[data-expanded="false"] .mobile-nav-acc-body { display: none; }
.mobile-nav-sublabel {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-mid);
padding: 8px 0 2px 14px;
}
.mobile-nav-subitem { padding-left: 14px; }
.mobile-nav-lang {
display: flex;
gap: 8px;
padding: 14px 20px 16px;
border-top: 1.5px solid var(--gray-light);
margin-top: 4px;
}
.mobile-nav-lang .lang-btn {
flex: 1;
padding: 10px;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
text-align: center;
font-size: 0.82rem;
}
.mobile-nav-lang .lang-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.filter-toggle-mobile {
display: flex;
width: 100%;
align-items: center;
gap: 9px;
padding: 11px 16px;
background: var(--white);
border: 1.5px solid var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.filter-toggle-mobile:hover {
background: var(--primary-pale, #EDE8F9);
color: var(--primary);
}
.filter-toggle-badge {
background: var(--primary);
color: white;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
padding: 1px 8px;
display: none;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-toggle-badge.visible { display: inline-block; vertical-align: middle; }
.filter-toggle-chevron {
margin-left: auto;
color: var(--gray);
transition: transform .2s ease;
flex-shrink: 0;
}
.filter-toggle-mobile[aria-expanded="true"] .filter-toggle-chevron {
transform: rotate(180deg);
}
.filter-toggle-mobile:hover .filter-toggle-chevron { transform: rotate(180deg); }
.filter-toggle-mobile[aria-expanded="true"]:hover .filter-toggle-chevron { transform: rotate(0deg); }
@media (max-width: 1024px) {
.header-tag { display: none; }
}
@media (max-width: 768px) {
.header-nav { display: none; }
.header-search { display: none; }
.mobile-nav-search.is-route-hidden { display: none; }
.settings-box { display: none; }
.hamburger-btn { display: flex; }
.header-back-btn.visible { display: flex; }
.home-hero-inner { grid-template-columns: 1fr; gap: 28px; }
.home-hero-right { max-width: 100%; }
.login-box-btn,
.basket-header-btn,
.header-hubs,
.hamburger-btn {
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
justify-content: center;
flex-shrink: 0;
}
.login-box-btn { gap: 0; }
.header-hubs {
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
}
.header-hubs:hover { border-color: var(--primary); }
.login-box[data-state="logged-in"] .login-box-btn {
background: transparent !important;
border-color: var(--gray-light) !important;
}
.login-box[data-state="logged-in"] .login-box-icon-wrap {
width: 24px !important;
height: 24px !important;
}
.login-box-label { position: absolute !important; left: -9999px !important; }
.login-box-chevron { display: none !important; }
.login-box[data-state="logged-in"] .login-box-icon-wrap { width: 28px; height: 28px; }
#mobileNavLoginSection,
#mobileNavLoginSection + .mobile-nav-divider { display: none; }
}
@media (max-width: 480px) {
.header-inner { padding: 0 12px; gap: 6px; }
.logo-mark { width: 34px; height: 34px; }
.logo-img { height: 22px; }
.login-box-btn,
.settings-box-btn,
.basket-header-btn,
.header-hubs,
.hamburger-btn { width: 32px !important; height: 32px !important; min-height: 32px !important; }
}
.sidebar > .filter-panel { display: none; }
.sidebar.is-open > .filter-panel { display: block; }
.filter-panel-title { display: none; }
.sidebar.is-open .filter-toggle-badge { display: none !important; }
.sidebar.is-open > .filter-toggle-mobile,
.sidebar.is-open > .login-nav-toggle-mobile {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.sidebar.is-open > .filter-panel {
border: 1.5px solid var(--primary);
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@media (min-width: 821px) {
.sidebar.is-open > .filter-toggle-mobile,
.sidebar.is-open > .login-nav-toggle-mobile {
background: var(--gray-pale, #F4F2F8);
border-color: var(--primary-light, #7B5FCA);
border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
border-bottom: 1px solid var(--gray-light, #E8E4F0);
}
.sidebar.is-open > .filter-toggle-mobile:hover,
.sidebar.is-open > .login-nav-toggle-mobile:hover {
background: var(--gray-light, #E8E4F0);
color: var(--dark);
}
.sidebar.is-open > .filter-panel {
border-color: var(--primary-light, #7B5FCA);
border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
}
}
@media (max-width: 820px) {
.main-wrap { grid-template-columns: 1fr; }
.sidebar { position: static !important; }
}
@media (max-width: 768px) {
.home-hero { padding: 24px 20px 22px; }
.home-hero-cta { display: none; }
.home-hero-inner { gap: 16px !important; }
.home-content { padding-top: 24px; padding-bottom: 24px; }
.home-spotlight .home-content { padding-top: 4px; padding-bottom: 16px; }
.home-spotlight-box { margin: 0 -20px; padding: 18px 20px 20px; }
.home-fastlane .home-content { padding-top: 16px; padding-bottom: 4px; }
.home-fastlane-box { margin: 0 -20px; padding: 4px 20px 8px; }
}
@media (max-width: 600px) {
.home-stats-inner { flex-wrap: wrap; padding: 0 12px; }
.stat-item {
flex: 1 1 33%;
min-width: 33%;
border-right: none;
padding: 14px 8px;
}
.stat-num { font-size: 1.4rem; }
}
@media (max-width: 680px) {
.site-footer-inner {
flex-direction: column;
gap: 20px;
padding: 24px 20px 16px;
}
.footer-col-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
width: 100%;
}
.footer-col { width: 100%; }
.site-footer-trust-wrap { padding: 0 20px 18px; }
.site-footer-trust {
gap: 18px; padding-top: 18px;
justify-content: flex-start;
}
.trust-item { flex-basis: 100%; }
.site-footer-bottom {
padding: 10px 20px;
font-size: .74rem;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.cookie-banner {
left: 12px; right: 12px; bottom: 12px;
max-width: none;
}
.cookie-banner-actions { justify-content: stretch; }
.cookie-banner-btn { flex: 1; }
}
/* ── css/account.css ── */
.login-box {
position: relative;
flex-shrink: 0;
}
.login-box-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0;
background: transparent;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0;
color: var(--dark);
cursor: pointer;
white-space: nowrap;
transition: background var(--tr), border-color var(--tr), color var(--tr), padding var(--tr);
line-height: 1;
}
.login-box-icon-wrap {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.login-box-icon { flex-shrink: 0; }
.login-box-icon--filled { display: none; }
.login-box-icon--spinner { display: none; }
@keyframes dexes-login-spin {
to { transform: rotate(360deg); }
}
.login-box-label {
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.login-box-chevron {
color: currentColor;
opacity: 0.7;
transition: transform .2s ease;
flex-shrink: 0;
display: none;
}
.login-box-btn[aria-expanded="true"] .login-box-chevron {
transform: rotate(180deg);
}
.login-box[data-state="logged-out"] .login-box-btn {
padding: 0 12px 0 9px;
gap: 2px;
}
.login-box[data-state="logged-out"] .login-box-icon-wrap {
width: 22px; height: 22px;
}
.login-box[data-state="logged-out"] .login-box-label {
position: static; left: auto;
}
.login-box[data-state="logged-out"] .login-box-btn:hover {
background: var(--primary-pale);
border-color: var(--primary);
color: var(--primary);
}
.login-box[data-state="logged-in"] .login-box-btn {
padding: 0 10px 0 3px;
background: var(--primary-pale);
border-color: var(--primary-pale);
color: var(--primary);
font-weight: 600;
}
.login-box[data-state="logged-in"] .login-box-btn:hover,
.login-box[data-state="logged-in"] .login-box-btn[aria-expanded="true"] {
background: var(--primary-pale2);
border-color: var(--primary);
}
.login-box[data-state="logged-in"] .login-box-icon-wrap {
background: var(--primary);
border-radius: 50%;
color: #fff;
width: 28px; height: 28px;
}
.login-box[data-state="logged-in"] .login-box-icon--outline { display: none; }
.login-box[data-state="logged-in"] .login-box-icon--filled { display: block; }
.login-box[data-state="logged-in"] .login-box-chevron { display: inline-block; }
.login-box[data-state="checking"] .login-box-btn {
width: 36px;
padding: 0;
justify-content: center;
pointer-events: none;
cursor: default;
opacity: 0.85;
}
.login-box[data-state="checking"] .login-box-label {
position: absolute; left: -9999px;
}
.login-box[data-state="checking"] .login-box-icon--outline,
.login-box[data-state="checking"] .login-box-icon--filled,
.login-box[data-state="checking"] .login-box-chevron {
display: none;
}
.login-box[data-state="checking"] .login-box-icon--spinner {
display: block;
color: var(--gray);
transform-origin: 50% 50%;
animation: dexes-login-spin 0.8s linear infinite;
}
.login-dropdown-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 6px 0;
z-index: 300;
}
.login-box[data-state="logged-in"] .login-dropdown-panel {
min-width: 440px;
padding: 0;
}
.login-dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-size: 0.82rem;
font-weight: 500;
color: var(--dark);
text-decoration: none;
transition: background var(--tr), color var(--tr);
}
.login-dropdown-item:hover {
background: var(--primary-pale);
color: var(--primary);
text-decoration: none;
}
.login-dropdown-logout {
color: var(--gray);
font-weight: 600;
}
.login-dropdown-org-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px 10px;
border-bottom: 1px solid var(--gray-light);
background: var(--primary-pale);
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.login-dropdown-org-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gray);
flex-shrink: 0;
}
.login-dropdown-org-logout {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
padding: 4px 8px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gray);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--tr), color var(--tr);
flex-shrink: 0;
}
.login-dropdown-org-logout:hover,
.login-dropdown-org-logout:focus-visible {
background: rgba(0,0,0,0.04);
color: var(--primary);
text-decoration: none;
}
.login-dropdown-org-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
background: var(--white);
border: 1.5px solid var(--primary);
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
max-width: 100%;
min-width: 0;
transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.login-dropdown-org-badge:hover,
.login-dropdown-org-badge:focus-visible {
background: var(--primary);
color: #fff;
text-decoration: none;
}
.login-dropdown-org-icon {
flex-shrink: 0;
}
.login-dropdown-org-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.login-dropdown-org-chevron {
flex-shrink: 0;
opacity: 0.7;
}
.login-dropdown-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 8px 0;
}
.login-dropdown-col + .login-dropdown-col {
border-left: 1px solid var(--gray-light);
}
.login-dropdown-col-title {
padding: 6px 16px 8px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray);
}
.login-dropdown-quick {
padding-bottom: 4px;
}
.login-dropdown-quick--stacked {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--gray-light);
}
.login-dropdown-quick-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 16px 6px;
}
.login-dropdown-quick-pill {
display: inline-flex;
align-items: center;
background: transparent;
color: var(--primary);
border: 1px solid var(--primary-light, #A9C6EA);
border-radius: 999px;
padding: 4px 11px;
font-size: .74rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.login-dropdown-quick-pill:hover {
background: var(--primary-pale2);
border-color: var(--primary);
color: var(--primary-dark);
text-decoration: none;
}
.login-dropdown-quick-pill:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
@media (max-width: 768px) {
.login-dropdown-panel,
.login-box[data-state="logged-in"] .login-dropdown-panel {
position: fixed;
top: 60px;
left: 0;
right: 0;
width: auto;
min-width: 0;
max-width: none;
border-radius: 0;
border-left: 0;
border-right: 0;
max-height: calc(100vh - 60px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-bottom: 1.5px solid var(--gray-light, #E8E4F0);
border-bottom-color: color-mix(in srgb, var(--primary) 16%, #ffffff);
box-shadow: var(--shadow-md, 0 10px 24px rgba(0,0,0,0.12));
animation: drawerSlideIn 0.2s ease;
}
.login-dropdown-org-row {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
@media (max-width: 560px) {
.login-dropdown-cols {
grid-template-columns: 1fr;
}
.login-dropdown-col + .login-dropdown-col {
border-left: 0;
border-top: 1px solid var(--gray-light);
margin-top: 4px;
padding-top: 4px;
}
}
.settings-box {
position: relative;
flex-shrink: 0;
}
.settings-box-btn {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
padding: 0;
background: transparent;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
color: var(--dark);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr);
}
.settings-box-btn:hover,
.settings-box-btn[aria-expanded="true"] {
background: var(--primary-pale);
border-color: var(--primary);
color: var(--primary);
}
.settings-box-btn[aria-expanded="true"] .settings-box-icon {
transform: rotate(45deg);
}
.settings-box-icon { flex-shrink: 0; transition: transform .25s ease; }
.settings-dropdown-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 240px;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 12px;
z-index: 300;
}
.settings-section { }
.settings-section-title {
font-family: var(--font-head);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--gray);
text-transform: uppercase;
margin-bottom: 8px;
padding: 0 2px;
}
.settings-lang-switcher { width: 100%; }
.settings-lang-switcher .lang-btn { flex: 1; padding: 7px 10px; }
.lang-box-btn { padding: 0; overflow: hidden; }
.lang-box-btn[aria-expanded="true"] .settings-box-icon,
.lang-box-btn[aria-expanded="true"] .lang-switch-icon { transform: none; }
.lang-switch-icon { display: inline-flex; line-height: 0; }
.lang-switch-icon svg { display: block; }
.lang-list { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.lang-list .lang-btn {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0; border-radius: var(--radius-xs);
font-family: var(--font-body); font-size: .88rem; font-weight: 600;
color: var(--dark);
text-align: left;
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.lang-list .lang-btn:hover { background: var(--primary-pale); color: var(--primary); }
.lang-list .lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.lang-list .lang-btn.active { background: var(--primary-pale); color: var(--primary); }
.lang-btn-flag { display: inline-flex; line-height: 0; flex-shrink: 0; }
.lang-btn-name { flex: 1; min-width: 0; }
.lang-btn-check { flex-shrink: 0; opacity: 0; color: var(--primary); }
.lang-list .lang-btn.active .lang-btn-check { opacity: 1; }
.lang-dropdown-panel { min-width: 210px; }
.mobile-nav-settings .settings-section-title { display: none; }
.mobile-nav-settings .lang-list .lang-btn {
font-size: 0.82rem;
font-weight: 500;
}
.mobile-nav-settings .lang-btn[data-a11y-prefs-open] {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.theme-switcher {
display: flex;
align-items: center;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
overflow: hidden;
width: 100%;
}
.theme-btn {
flex: 1;
background: none;
border: none;
padding: 7px 10px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gray);
cursor: pointer;
transition: background var(--tr), color var(--tr);
line-height: 1;
}
.theme-btn:first-child { border-right: 1.5px solid var(--gray-light); }
.theme-btn.active {
background: var(--primary);
color: #fff;
}
.theme-btn:not(.active):hover {
background: var(--primary-pale);
color: var(--primary);
}
.dx-switch {
--dx-segs: 2;
--dx-index: 0;
--dx-pad: 3px;
position: relative;
display: grid;
grid-template-columns: repeat(var(--dx-segs), minmax(0, 1fr));
width: 100%;
padding: var(--dx-pad);
border: 1.5px solid var(--gray-light);
border-radius: 999px;
background: var(--gray-pale);
overflow: visible;
}
.dx-switch-thumb {
position: absolute;
top: var(--dx-pad);
bottom: var(--dx-pad);
left: var(--dx-pad);
width: calc((100% - (2 * var(--dx-pad))) / var(--dx-segs));
border-radius: 999px;
background: var(--primary);
box-shadow: 0 2px 8px rgba(20, 15, 42, 0.18);
transform: translateX(calc(100% * var(--dx-index)));
transition: transform 0.18s ease;
pointer-events: none;
}
.dx-switch .lang-btn,
.dx-switch .theme-btn,
.dx-switch .dx-switch-seg {
position: relative;
z-index: 1;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 6px 10px;
border: 0;
border-right: 0;
border-radius: 999px;
background: transparent;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1;
color: var(--gray);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.18s ease;
}
.dx-switch .lang-btn.active,
.dx-switch .theme-btn.active,
.dx-switch .dx-switch-seg.active {
background: transparent;
color: var(--white);
}
.dx-switch .lang-btn:not(.active):hover,
.dx-switch .theme-btn:not(.active):hover,
.dx-switch .dx-switch-seg:not(.active):hover {
background: transparent;
color: var(--primary);
}
.dx-switch .lang-btn:focus-visible,
.dx-switch .theme-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.dx-switch:not([data-dx-count]) .dx-switch-thumb { transition: none; }
.mobile-nav-settings {
padding: 12px 20px 18px;
border-top: 1px solid var(--gray-light);
}
.mobile-nav-settings .settings-section + .settings-section { margin-top: 14px; }
.mobile-nav-settings .settings-section-title {
font-family: var(--font-head);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray);
margin-bottom: 6px;
}
.mobile-nav-settings .dx-switch .lang-btn,
.mobile-nav-settings .dx-switch .theme-btn { padding: 9px 10px; font-size: 0.8rem; }
.settings-dropdown-panel .nav-dropdown-divider {
margin: 12px -12px;
}
.mobile-nav-toplink {
display: block;
padding: 10px 16px;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--dark);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--tr), color var(--tr);
}
.mobile-nav-toplink:hover {
background: var(--primary-pale);
color: var(--primary);
text-decoration: none;
}
.mobile-nav-login-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--dark);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.mobile-nav-login-btn:hover,
#mobileNavLoginSection[data-state="logged-in"] .mobile-nav-login-btn {
background: var(--primary-pale);
border-color: var(--primary);
color: var(--primary);
}
.mobile-nav-login-icon { flex-shrink: 0; }
.mobile-nav-login-icon--spinner { display: none; }
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-btn {
pointer-events: none;
cursor: default;
opacity: 0.85;
}
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-icon--person {
display: none;
}
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-icon--spinner {
display: inline-block;
color: var(--gray);
transform-origin: 50% 50%;
animation: dexes-login-spin 0.8s linear infinite;
}
#mobileNavLoginSection[data-state="checking"] #mobileNavLoginLabel {
position: absolute; left: -9999px;
}
.mobile-nav-login-items {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-nav-logout {
color: var(--gray);
font-weight: 600;
}
/* ── css/members.css ── */
.main-wrap--single { grid-template-columns: 1fr; }
.content-area--full { max-width: 100%; }
.card-title-wrap { flex: 1; min-width: 0; }
.card-subtitle {
font-size: .72rem;
color: var(--gray);
font-weight: 500;
letter-spacing: 0.02em;
margin-top: 2px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.status-badge {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.status-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
display: inline-block;
flex-shrink: 0;
}
.status-active { background: var(--green-pale); color: var(--green); }
.status-pending { background: var(--amber-pale); color: var(--amber); }
.status-revoked,
.status-inactive,
.status-terminated { background: var(--red-pale); color: var(--red); }
.status-unknown { background: var(--gray-pale); color: var(--gray); }
.valid-badge {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 20px;
white-space: nowrap;
letter-spacing: 0.02em;
background: var(--gray-pale, #f3f4f6);
color: var(--gray-mid, #555);
border: 1px solid rgba(0, 0, 0, 0.06);
cursor: help;
}
.valid-badge--soon { background: var(--amber-pale); color: var(--amber); border-color: transparent; }
.valid-badge--expired { background: var(--red-pale); color: var(--red); border-color: transparent; }
.detail-hero-top-badges .valid-badge {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.9);
color: var(--gray-mid, #555);
}
.detail-hero-top-badges .valid-badge--soon { color: var(--amber); }
.detail-hero-top-badges .valid-badge--expired { color: var(--red); }
.soon-badge {
display: inline-flex;
align-items: center;
font-size: 0.66rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
background: var(--gray-pale, #f3f4f6);
color: var(--gray-mid, #6b7280);
border: 1px solid rgba(0, 0, 0, 0.08);
margin-left: 6px;
}
.dmi-rating-box--unavailable .dmi-rating-stars { color: #9aa3ae; }
.dmi-rating-box--unavailable .dmi-rating-logo { filter: grayscale(1); opacity: .5; }
.dmi-rating-box--unavailable .dmi-rating-lid { color: var(--gray-mid, #6b7280); }
.dmi-rating-box--unavailable .soon-badge { margin-left: 2px; }
.card-role-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
flex: 1;
min-width: 0;
}
.role-badge {
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 20px;
background: var(--primary-pale);
color: var(--primary);
letter-spacing: 0.02em;
white-space: nowrap;
}
.ds-badge {
font-size: 0.68rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 20px;
letter-spacing: 0.04em;
white-space: nowrap;
background: var(--gray-light, #eef1f6);
color: var(--gray-mid, #555);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.ds-badge--dmi {
background: rgba(26, 79, 160, 0.12);
color: var(--primary, #1a4fa0);
border-color: rgba(26, 79, 160, 0.25);
}
.ds-badge--dvu {
background: rgba(22, 122, 68, 0.12);
color: #157a44;
border-color: rgba(22, 122, 68, 0.28);
}
.ds-badge--eneco {
background: rgba(196, 30, 58, 0.12);
color: #c41e3a;
border-color: rgba(196, 30, 58, 0.28);
}
.detail-hero-top-badges .ds-badge {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.9);
font-weight: 700;
}
.detail-hero-top-badges .ds-badge--dmi { color: var(--primary-dark, #15397a); }
.detail-hero-top-badges .ds-badge--dvu { color: #157a44; }
.detail-hero-top-badges .ds-badge--eneco { color: #c41e3a; }
.dataset-card--member .card-footer {
justify-content: space-between;
}
.dataset-card--member .card-body {
gap: 12px;
}
.dataset-card--member .card-title {
font-size: 1.02rem;
}
.dataset-card--member-has-logo {
grid-template-columns: 4px 1fr auto;
}
.member-card-logo {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 18px 14px 8px;
flex-shrink: 0;
}
.member-card-logo img {
display: block;
max-width: 96px;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
filter: none;
}
@media (max-width: 640px) {
.member-card-logo {
padding: 10px 12px 10px 6px;
}
.member-card-logo img {
max-width: 64px;
max-height: 40px;
}
}
.detail-card--member-dashboard {
position: relative;
}
.member-dashboard-logo {
display: flex;
justify-content: flex-end;
align-items: flex-end;
margin-top: 14px;
padding-top: 4px;
}
.member-dashboard-logo img {
display: block;
max-width: 140px;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 640px) {
.member-dashboard-logo img {
max-width: 110px;
max-height: 56px;
}
}
.member-tech-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.member-registrar-row {
display: flex;
flex-direction: column;
gap: 2px;
font-size: .8rem;
line-height: 1.35;
}
.member-registrar-key {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-mid);
}
.member-registrar-val {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.member-registrar-name {
color: var(--dark);
font-weight: 600;
word-break: break-word;
}
.member-registrar-eori {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .72rem;
color: var(--gray-mid);
word-break: break-all;
display: none;
}
.member-registrar-row--resolved .member-registrar-eori {
display: inline;
}
.role-badge.skel,
.status-badge.skel {
color: transparent;
background: var(--gray-light);
animation: skelPulse 1.2s infinite ease-in-out;
min-width: 70px;
}
.status-badge.skel::before { background: transparent; }
@keyframes skelPulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
.detail-hero-roles {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 12px;
}
.detail-hero .detail-hero-roles .role-badge,
.detail-hero-roles .role-badge {
background: rgba(255,255,255,.92);
color: var(--primary-dark);
border: 1px solid rgba(255,255,255,.85);
font-weight: 600;
letter-spacing: .02em;
}
.detail-hero .type-badge.type-badge--member,
.type-badge--member {
background: rgba(255,255,255,.95);
color: var(--primary-dark);
border: 1.5px solid rgba(255,255,255,.95);
font-weight: 700;
}
.member-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: 14px;
}
.member-stat-grid-sub {
font-size: .82rem;
color: var(--gray);
margin: 0;
line-height: 1.5;
}
.member-stat-tile {
--tile-accent: var(--primary);
--tile-accent-pale: var(--primary-pale);
display: flex; flex-direction: column;
gap: 4px;
padding: 16px 14px;
border: 1.5px solid var(--tile-accent-pale);
border-radius: var(--radius);
background: var(--white);
text-decoration: none;
color: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
position: relative;
cursor: pointer;
}
.member-stat-tile:hover {
border-color: var(--tile-accent);
background: var(--tile-accent-pale);
box-shadow: 0 6px 16px rgba(20,15,42,.08);
transform: translateY(-1px);
}
.member-stat-tile:focus-visible {
outline: 2px solid var(--tile-accent);
outline-offset: 2px;
}
.member-stat-tile-num {
font-family: var(--font-head);
font-size: 1.55rem;
font-weight: 700;
color: var(--tile-accent);
line-height: 1.1;
}
.member-stat-tile-num strong { font-weight: 700; }
.member-stat-tile-suffix {
font-family: var(--font-body, inherit);
font-size: 0.8rem;
font-weight: 600;
color: var(--gray, #6b7280);
}
.member-stat-tile-label {
font-size: .8rem;
font-weight: 700;
color: var(--dark);
text-transform: uppercase;
letter-spacing: .05em;
}
.member-stat-tile-sub {
font-size: .72rem;
color: var(--gray);
}
.member-stat-tile::after {
content: '→';
position: absolute;
top: 12px; right: 14px;
color: var(--gray-mid);
font-size: 1rem;
opacity: 0;
transition: opacity .15s, transform .15s, color .15s;
}
.member-stat-tile:hover::after {
opacity: 1;
color: var(--tile-accent);
transform: translateX(2px);
}
.member-stat-tile--resources {
--tile-accent: var(--primary);
--tile-accent-pale: var(--primary-pale);
}
.member-stat-tile--datasets {
--tile-accent: var(--green);
--tile-accent-pale: var(--green-pale);
}
.member-stat-tile--services {
--tile-accent: var(--amber);
--tile-accent-pale: var(--amber-pale);
}
.member-stat-tile--applications {
--tile-accent: var(--red);
--tile-accent-pale: var(--red-pale);
}
.member-stat-tile--commons {
--tile-accent: var(--green);
--tile-accent-pale: var(--green-pale);
}
.detail-card--trust .trust-section,
.detail-card--trust-dmi .trust-section,
.detail-card--trust-warn .trust-section {
padding: 4px 0 12px;
border-bottom: 1px solid rgba(26,79,160,.12);
}
.detail-card--trust .trust-section + .trust-section,
.detail-card--trust-dmi .trust-section + .trust-section,
.detail-card--trust-warn .trust-section + .trust-section {
padding-top: 12px;
}
.detail-card--trust .trust-section:last-child,
.detail-card--trust-dmi .trust-section:last-child,
.detail-card--trust-warn .trust-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.trust-section-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-mid);
margin-bottom: 8px;
}
.trust-section-label--inline {
margin: 0 0 4px;
}
.detail-card--trust .meta-list { gap: 0; }
.detail-card--trust .meta-list > .trust-section-label--inline {
margin: 0 0 4px;
}
.detail-card--trust .meta-list > .trust-section-label--inline:first-child {
margin-top: 0;
}
.detail-card--trust .meta-list > .dataset-status-box {
margin: 0;
}
.detail-card--trust .meta-list > .meta-row--org {
padding: 0;
border-bottom: none;
margin-top: 14px;
}
.detail-card--trust .meta-list > .meta-row--org:first-child {
margin-top: 0;
}
.detail-card--trust .meta-row--org .meta-key { margin-bottom: 3px; }
.detail-card--trust .meta-row--org .meta-val { margin: 0; }
.detail-card--trust .meta-row--org .trust-member-badges { margin-top: 4px; }
.detail-card--trust .meta-row--org .dmi-rating-box { margin-top: 6px; padding: 0; }
.detail-card--trust .meta-list > .supplier-actions {
margin-top: 14px;
}
.trust-section-empty {
font-size: .85rem;
color: var(--gray);
font-style: italic;
}
.dataspace-membership-list {
display: flex; flex-direction: column;
gap: 8px;
width: 100%;
}
.dataspace-membership {
padding: 12px 14px;
border: 1px solid rgba(26,79,160,.14);
border-radius: var(--radius-sm);
background: var(--white);
box-shadow: 0 1px 2px rgba(20,15,42,.04);
}
.dataspace-membership-head {
display: flex; align-items: center; gap: 8px;
color: var(--primary);
}
.dataspace-membership-head svg { flex-shrink: 0; }
.dataspace-membership-title {
font-weight: 700;
font-size: .92rem;
color: var(--dark);
line-height: 1.25;
}
.dataspace-membership-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .7rem;
color: var(--gray);
margin-top: 3px;
word-break: break-all;
letter-spacing: .01em;
}
.dataspace-membership-meta {
display: flex; flex-direction: column;
gap: 3px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(26,79,160,.14);
font-size: .78rem;
color: var(--dark);
}
.dataspace-membership-meta .dsm-line {
display: flex; align-items: baseline; gap: 6px;
white-space: normal;
}
.dataspace-membership-meta .dsm-key {
color: var(--gray);
font-weight: 600;
margin-right: 0;
flex-shrink: 0;
}
.detail-card--trust-warn .dataspace-membership {
background: rgba(255,255,255,.85);
}
.detail-card--trust .trust-section .dmi-rating-box,
.detail-card--trust-dmi .trust-section .dmi-rating-box,
.detail-card--trust-warn .trust-section .dmi-rating-box {
padding: 4px 0 0;
margin: 0;
border-bottom: none;
flex-wrap: wrap;
row-gap: 6px;
}
@media (max-width: 480px) {
.member-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html, body { overflow-x: hidden; }
.detail-wrap { padding: 18px 12px 56px; }
.detail-hero { padding: 20px 18px; border-radius: var(--radius-sm); }
.detail-hero-top {
flex-direction: column-reverse;
align-items: stretch;
gap: 12px;
flex-wrap: wrap;
}
.detail-hero-top h1 { flex: none; width: 100%; }
.detail-hero-top-badges {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
.detail-card { padding: 16px 14px; border-radius: var(--radius-sm); }
.detail-side .detail-card { padding: 14px 14px; }
.policy-box { padding: 14px 14px; border-radius: var(--radius-sm); }
.meta-row,
.detail-side .meta-row {
grid-template-columns: 1fr;
gap: 2px;
padding: 8px 0;
}
.meta-key { padding-top: 0; }
.detail-card,
.policy-box,
.detail-description { overflow-wrap: break-word; }
.meta-val,
.policy-item-val { overflow-wrap: anywhere; }
.dist-card-has-policy { flex-direction: column; }
.dist-card-has-policy .dist-card-left { padding: 12px 14px; }
.dist-policy-panel {
flex: 1 1 auto;
border-left: none;
border-top: 1.5px solid rgba(26, 79, 160, 0.22);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.dist-card .dist-action {
width: auto; justify-self: end; min-width: 0;
justify-content: flex-end; flex-wrap: nowrap;
}
.dist-card .dist-action .dist-cap {
white-space: normal; flex: 0 1 auto; min-width: 0; text-align: right;
}
.dist-card .dist-action .dist-action-row { flex-shrink: 0; }
.dist-action-with-label { width: 100%; align-items: center; flex-direction: row; justify-content: space-between; }
.dist-download-btn { justify-content: center; width: 100%; }
.policy-btn-row { gap: 8px; }
.policy-access-btn,
.policy-request-btn { flex: 1 1 auto; justify-content: center; }
.policy-item-id-row { gap: 8px; }
.policy-deal-btn { width: 100%; justify-content: center; }
.pdc-banner { width: 100%; padding: 16px 16px; }
}
/* ── css/profile.css ── */
.profile-content { padding: 24px 0; }
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
max-width: 1080px;
margin: 0 auto;
}
.profile-card {
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
padding: 24px 28px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.profile-card-wide { grid-column: 1 / -1; }
.profile-card-title {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 16px 0;
color: var(--ds-text, #111827);
}
.profile-card-subtitle {
margin: 20px 0 10px 0;
padding-top: 14px;
border-top: 1px solid var(--gray-light, #e5e7eb);
font-family: var(--font-head);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray, #6b7280);
}
.profile-fields {
display: grid;
grid-template-columns: minmax(140px, max-content) 1fr;
gap: 8px 16px;
margin: 0;
}
.profile-fields dt {
color: var(--ds-text-muted, #6b7280);
font-weight: 500;
font-size: 0.9rem;
align-self: center;
}
.profile-fields dd {
margin: 0;
word-break: break-word;
color: var(--ds-text, #111827);
}
.profile-eori,
.profile-sub {
display: inline-block;
background: var(--ds-code-bg, #f3f4f6);
color: var(--ds-text, #111827);
padding: 3px 8px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.88rem;
user-select: all;
}
.profile-sub { font-size: 0.78rem; color: var(--ds-text-muted, #6b7280); }
.profile-actions-intro,
.profile-section-sub {
color: var(--ds-text-muted, #6b7280);
font-size: 0.92rem;
margin: 0 0 16px 0;
}
.profile-roles-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.profile-role-chip {
display: inline-block;
padding: 4px 10px;
background: var(--primary-pale, #eef2ff);
color: var(--primary, #4f46e5);
border: 1px solid var(--primary-pale, #c7d2fe);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.profile-roles-empty {
margin: 0;
color: var(--ds-text-muted, #6b7280);
font-style: italic;
}
.profile-roles-loading {
margin: 0;
color: var(--ds-text-muted, #6b7280);
font-style: italic;
font-size: 0.85rem;
}
.profile-roles-slot {
display: flex;
flex-direction: column;
gap: 12px;
}
.profile-roles-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-roles-group-title {
font-family: var(--font-head);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray, #6b7280);
}
.profile-actions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-action-stub {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--ds-stub-bg, #f9fafb);
border: 1px dashed var(--ds-border, #e5e7eb);
border-radius: 8px;
color: var(--ds-text, #111827);
}
.profile-action-label { font-weight: 500; }
.profile-action-coming {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ds-text-muted, #9ca3af);
background: var(--ds-card-bg, #fff);
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--ds-border, #e5e7eb);
}
.profile-action-link {
flex: 1;
font-weight: 500;
color: var(--primary, #5C3FA5);
text-decoration: none;
}
.profile-action-link:hover { text-decoration: underline; }
.profile-action-arrow {
color: var(--primary, #5C3FA5);
font-weight: 600;
opacity: 0.65;
transition: transform 120ms ease, opacity 120ms ease;
}
.profile-action-stub:hover .profile-action-arrow {
opacity: 1;
transform: translateX(3px);
}
@media (max-width: 640px) {
.profile-card { padding: 18px 20px; }
.profile-fields {
grid-template-columns: 1fr;
gap: 4px 0;
}
.profile-fields dt { margin-top: 8px; }
.profile-action-stub { flex-direction: column; align-items: flex-start; }
}
/* ── css/workspace.css ── */
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav {
max-width: 1280px;
grid-template-columns: 248px minmax(0, 1fr);
padding: 28px 24px 64px;
}
.main-wrap--with-marketplace-nav > .my-marketplace-nav-sidebar {
order: -1;
}
@media (max-width: 820px) {
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav {
grid-template-columns: minmax(0, 1fr);
}
.main-wrap--with-marketplace-nav > .login-nav-toggle-mobile { order: -2; }
.main-wrap--with-marketplace-nav > .login-nav-sidebar { order: -1; }
#profilePage .profile-grid { grid-template-columns: 1fr; }
#profilePage .profile-card { min-width: 0; }
}
.my-marketplace-nav-sidebar {
}
.my-marketplace-org-bar[hidden] {
display: none;
}
.my-marketplace-org-bar-link {
font-size: 0.86rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
transition: color var(--tr), text-decoration-color var(--tr);
}
.my-marketplace-org-bar-link:hover,
.my-marketplace-org-bar-link:focus-visible {
color: var(--primary);
text-decoration: underline;
}
.hero .my-marketplace-org-bar {
position: absolute;
bottom: 12px;
left: 16px;
z-index: 2;
margin: 0;
}
.hero .my-marketplace-org-bar-inner {
max-width: none;
margin: 0;
padding: 0;
}
.hero .my-marketplace-org-bar-link {
display: none;
}
@media (max-width: 560px) {
.hero .my-marketplace-org-bar {
bottom: 10px;
left: 12px;
max-width: calc(100% - 24px);
}
}
.my-marketplace-nav-list {
display: flex;
flex-direction: column;
padding: 6px 0 8px;
}
.my-marketplace-nav-title--secondary {
margin-top: 4px;
border-top: 1px solid var(--gray-light);
}
.my-marketplace-nav-link {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
font-size: 0.86rem;
font-weight: 500;
color: var(--dark);
text-decoration: none;
border-left: 3px solid transparent;
transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.my-marketplace-nav-link:hover,
.my-marketplace-nav-link:focus-visible {
background: var(--primary-pale);
color: var(--primary);
text-decoration: none;
outline: none;
}
.my-marketplace-nav-link.is-active,
.my-marketplace-nav-link[aria-current="page"] {
background: var(--primary-pale);
color: var(--primary);
font-weight: 700;
border-left-color: var(--primary);
}
.login-nav-group + .login-nav-group {
border-top: 1px solid var(--gray-light);
}
.login-nav-group-header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 8px;
padding: 9px 14px;
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-size: 0.84rem;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: var(--dark);
text-align: left;
transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.login-nav-group-label { flex: 1 1 auto; }
.login-nav-group-icon {
flex-shrink: 0;
width: 15px; height: 15px;
transition: transform var(--tr);
}
.login-nav-group-header:hover { color: var(--dark); background: var(--gray-lightest, #f5f5f7); }
.login-nav-group[data-expanded="true"] .login-nav-group-header:hover { background: none; }
.login-nav-group-header .nav-chevron {
flex-shrink: 0;
margin-left: auto;
transition: transform var(--tr);
}
.login-nav-group[data-expanded="true"] .login-nav-group-header .nav-chevron {
transform: rotate(180deg);
}
.login-nav-group[data-expanded="true"] {
border-radius: 0;
}
.login-nav-group[data-expanded="true"] .login-nav-group-header {
color: var(--primary);
font-weight: 700;
background: none;
border-color: transparent;
}
.login-nav-group[data-expanded="true"] .login-nav-group-icon {
transform: scale(1.15);
}
.login-nav-group-list { padding: 0 0 6px; }
.login-nav-group-list .my-marketplace-nav-link { padding-left: 30px; }
.login-nav-group[data-expanded="false"] .login-nav-group-list {
display: none;
}
.my-marketplace-nav-link.login-nav-coming {
color: var(--gray-mid);
opacity: 0.65;
cursor: default;
}
.my-marketplace-nav-link.login-nav-coming:hover {
background: none;
color: var(--gray-mid);
}
.login-nav-toggle-mobile {
display: flex;
width: 100%;
align-items: center;
gap: 9px;
padding: 11px 16px;
background: var(--white);
border: 1.5px solid var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.login-nav-toggle-mobile:hover { background: var(--primary-pale, #EDE8F9); color: var(--primary); }
.login-nav-toggle-mobile .nav-chevron { margin-left: auto; transition: transform var(--tr); }
.login-nav-toggle-mobile[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.login-nav-toggle-mobile:hover .nav-chevron { transform: rotate(180deg); }
.login-nav-toggle-mobile[aria-expanded="true"]:hover .nav-chevron { transform: rotate(0deg); }
.login-nav-accordion .my-marketplace-nav-link {
border-left: 0;
padding-left: 30px;
position: relative;
}
.login-nav-accordion .my-marketplace-nav-link svg { flex-shrink: 0; }
.login-nav-accordion .my-marketplace-nav-link.is-active,
.login-nav-accordion .my-marketplace-nav-link[aria-current="page"] {
border-left: 0;
background: none;
color: var(--primary);
font-weight: 700;
}
.login-nav-accordion .my-marketplace-nav-link.is-active::before,
.login-nav-accordion .my-marketplace-nav-link[aria-current="page"]::before {
content: '▸';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--primary);
font-size: 0.72rem;
line-height: 1;
}
.ma-title[data-org]:not([data-org=""])::after {
content: " — " attr(data-org);
color: var(--gray);
font-weight: 600;
}
.login-nav-logout-row {
display: flex;
align-items: center;
gap: 8px;
}
.login-nav-logout-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.92em;
color: var(--gray);
}
.login-nav-logout-name[hidden] { display: none; }
.login-nav-logout-label {
flex-shrink: 0;
}
.login-nav-logout-row:hover .login-nav-logout-name { color: var(--dark); }
.login-nav-group--coming > .login-nav-group-header,
.login-nav-group--coming > .login-nav-group-header:hover {
background: none;
color: var(--gray);
cursor: default;
opacity: .65;
}
.login-nav-group--coming > .login-nav-group-header .nav-chevron { visibility: hidden; }
.login-nav-accordion { overflow: hidden; }
.hero--compact {
padding: 0;
min-height: 14px;
}
.hero--compact > * { display: none !important; }
.hero-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 0.8rem;
line-height: 1.2;
position: relative;
color: rgba(255, 255, 255, 0.82);
}
.hero-breadcrumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.hero-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.hero-breadcrumb-home { opacity: 0.9; }
.hero-breadcrumb-home:hover { opacity: 1; }
.hero-breadcrumb-home-icon { display: block; }
.hero-breadcrumb-sep { opacity: 0.5; }
.hero-breadcrumb-current { font-weight: 600; color: #fff; }
.hero-search-head.has-breadcrumb > h1 { display: none; }
.hero-search-head.has-breadcrumb {
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
flex-wrap: wrap; gap: 8px 12px;
}
.hero-search-head.has-breadcrumb .hero-breadcrumb { margin: 0; }
.hero-search-head.has-breadcrumb .hero-tenant { margin: 0; }
.hero--compact { padding: 9px 0; min-height: 0; }
.hero--compact > .hero-breadcrumb { display: flex !important; }
.hero--compact .hero-breadcrumb {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.login-page-col {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.page-intro {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px 24px;
margin-bottom: 24px;
}
.login-page-col > .page-intro { margin-bottom: 0; }
.page-intro--plain {
background: transparent;
box-shadow: none;
padding: 0;
margin-bottom: 18px;
}
.page-intro h1 {
font-family: var(--font-head);
font-size: 1.4rem;
font-weight: 700;
color: var(--dark);
letter-spacing: -0.02em;
margin: 0 0 4px;
}
.page-intro p {
color: var(--gray);
font-size: 0.92rem;
line-height: 1.5;
margin: 0;
}
.basket-intro { margin-bottom: 20px; }
.basket-intro h1 { display: flex; align-items: center; gap: 10px; }
.basket-intro h1 svg { color: var(--primary); flex-shrink: 0; }
.ws-login-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 22px;
padding: 14px 18px;
background: #FFF8E6;
border: 1px solid #F0D9A0;
border-radius: var(--radius);
color: #6E4D00;
}
.ws-login-note[hidden] { display: none; }
.ws-login-note-icon { flex-shrink: 0; margin-top: 1px; }
.ws-login-note p {
margin: 0;
font-size: .92rem;
line-height: 1.5;
}
.dx-lo-hidden { display: none !important; }
.swd-login-note.swd-login-note,
.sw-login-note.sw-login-note {
align-items: center;
gap: 10px;
padding: 14px 18px;
background: #FFF8E6;
border: 1px solid #F0D9A0;
border-radius: var(--radius);
color: #6E4D00;
font-size: .92rem;
line-height: 1.5;
}
.swd-login-note.swd-login-note > svg,
.sw-login-note.sw-login-note > svg { width: 18px; height: 18px; }
.swd-login-note .swd-login-note-body,
.sw-login-note .sw-login-note-body { font-weight: 400; }
.swd-login-note .swd-login-btn,
.sw-login-note .sw-login-btn {
color: #6E4D00;
border-color: #F0D9A0;
}
.workspace-section { margin-bottom: 22px; }
.workspace-section-title {
font-family: var(--font-head);
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
margin: 0 0 2px;
}
.workspace-section-sub {
color: var(--gray);
font-size: 0.88rem;
line-height: 1.5;
margin: 0 0 12px;
}
.workspace-actions-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.workspace-section .member-stat-tile .member-stat-tile-label { font-size: 0.9rem; }
.member-stat-tile-kick {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--gray-mid);
margin-bottom: 2px;
}
/* ── css/share-wizard.css ── */
.sw-panel {
--sw-bg: var(--fastlane-3, #DAEBFB);
--sw-fg: var(--fastlane-3-fg, #0B3760);
--sw-accent: var(--fastlane-3-btn, #115492);
--sw-border: var(--fastlane-3-border, #BCD8F3);
--sw-muted: color-mix(in srgb, var(--sw-fg) 72%, transparent);
background: var(--sw-bg);
color: var(--sw-fg);
border: 1px solid var(--sw-border);
border-radius: var(--radius);
box-shadow: 0 12px 32px color-mix(in srgb, var(--sw-fg) 14%, transparent);
}
.sw-panel--modal { border-radius: var(--radius-sm); box-shadow: none; }
.sw-modal-body { padding: 0; }
.sw-modal-window { max-width: 880px; }
.sw-panel-head {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 18px 0;
}
.sw-panel-title {
font-family: var(--font-head);
font-size: 1.1rem; font-weight: 700;
color: var(--sw-fg);
margin: 0 0 4px;
}
.sw-panel-sub {
margin: 0;
font-size: .88rem; line-height: 1.6;
color: var(--sw-muted);
max-width: 640px;
}
.sw-panel-headings { flex: 1 1 auto; min-width: 0; }
.sw-head-reset {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
margin-top: 2px;
padding: 6px 12px;
background: var(--white); color: var(--sw-accent);
border: 1.5px solid var(--sw-border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .78rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.sw-head-reset:hover { border-color: var(--sw-accent); }
.sw-head-reset:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }
.sw-head-reset svg { flex-shrink: 0; }
.sw-action-group:empty { display: none; }
.sw-panel-body {
padding: 16px 18px 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.sw-object-card {
margin: 14px 18px 0;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--white);
border: 1px solid var(--gray-light);
}
.sw-object-card-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
color: var(--gray-mid);
margin-bottom: 6px;
}
.sw-object-list { list-style: none; margin: 0; padding: 0; }
.sw-object-row {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
padding: 3px 0;
}
.sw-object-row + .sw-object-row { border-top: 1px solid var(--gray-light); }
.sw-object-row-title { font-size: .86rem; font-weight: 600; color: var(--dark2); }
.sw-object-row-meta { font-size: .72rem; color: var(--gray); }
.sw-object-row-uri {
font-size: .68rem;
color: var(--gray);
background: var(--gray-pale);
padding: 1px 6px; border-radius: 4px;
word-break: break-all;
}
.sw-object-row--more { font-size: .76rem; color: var(--gray); }
.sw-object-count { margin-top: 6px; font-size: .72rem; color: var(--gray); }
.sw-section { min-width: 0; }
.sw-section-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sw-section-headings { flex: 1 1 auto; min-width: 0; }
.sw-step {
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: 1px;
border-radius: 50%;
background: var(--sw-accent);
color: var(--white);
font-size: .72rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.sw-section-title {
font-family: var(--font-head);
font-size: .9rem; font-weight: 700;
color: var(--sw-fg);
margin: 0 0 3px;
}
.sw-section-sub { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--sw-muted); }
.sw-section-sub.is-alert { color: #9A3412; font-weight: 600; }
.sw-slide-nav { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.sw-slide-nav[hidden] { display: none; }
.sw-slide-btn {
width: 30px; height: 30px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--white); color: var(--sw-accent);
border: 1.5px solid var(--sw-border); border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr);
}
.sw-slide-btn:hover:not(:disabled) { border-color: var(--sw-accent); }
.sw-slide-btn:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }
.sw-slide-btn:disabled { opacity: 0.6; cursor: default; color: var(--gray-mid); border-color: var(--sw-border); }
.sw-slider { position: relative; min-width: 0; margin-left: 32px; }
.sw-slider::before,
.sw-slider::after {
content: '';
position: absolute; top: 0; bottom: 8px; width: 26px;
pointer-events: none;
opacity: 0;
transition: opacity .18s ease;
}
.sw-slider::before { left: 0; background: linear-gradient(to right, var(--sw-bg), transparent); }
.sw-slider::after { right: 0; background: linear-gradient(to left, var(--sw-bg), transparent); }
.sw-slider:not(.is-start)::before { opacity: 1; }
.sw-slider:not(.is-end)::after { opacity: 1; }
.sw-track {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: 3px 3px 9px;
scroll-padding-left: 3px;
scrollbar-width: thin;
scrollbar-color: var(--sw-border) transparent;
overscroll-behavior-x: contain;
}
.sw-track:focus:not(:focus-visible) { outline: none; }
.sw-track::-webkit-scrollbar { height: 6px; }
.sw-track::-webkit-scrollbar-track { background: color-mix(in srgb, var(--sw-fg) 8%, transparent); border-radius: 999px; }
.sw-track::-webkit-scrollbar-thumb { background: var(--sw-border); border-radius: 999px; }
.sw-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
font: inherit;
font-family: var(--font-body);
color: var(--dark2);
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.sw-card--slide {
flex: 0 0 auto;
width: clamp(196px, 78%, 244px);
scroll-snap-align: start;
}
.sw-card:hover:not(.is-dimmed):not(.is-selected) {
border-color: var(--primary-light);
background: var(--primary-pale2);
}
.sw-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sw-card.is-selected {
border-color: var(--sw-accent);
background: var(--white);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--sw-accent) 20%, transparent),
0 4px 14px color-mix(in srgb, var(--sw-fg) 16%, transparent);
}
.sw-card-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.sw-card-icon { flex-shrink: 0; line-height: 0; color: var(--primary); }
.sw-card-icon svg { width: 18px; height: 18px; }
.sw-card-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--gray-mid);
}
.sw-card-label {
flex: 1;
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark2); line-height: 1.3;
}
.sw-card-sub { font-size: .76rem; color: var(--gray); line-height: 1.4; }
.sw-badge {
flex-shrink: 0;
font-size: .66rem; font-weight: 700; letter-spacing: .02em;
padding: 2px 7px; border-radius: 999px;
background: var(--primary-pale); color: var(--primary-dark);
}
.sw-card.is-dimmed {
background: transparent;
border-color: var(--sw-border);
box-shadow: none;
cursor: help;
}
.sw-card.is-dimmed .sw-card-icon,
.sw-card.is-dimmed .sw-card-kick,
.sw-card.is-dimmed .sw-card-label,
.sw-card.is-dimmed .sw-card-sub,
.sw-card.is-dimmed .sw-badge { opacity: .42; }
.sw-card-why {
margin-top: 2px;
font-size: .72rem; font-weight: 600; line-height: 1.35;
color: #9A3412;
}
.sw-selected-flag {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 2px;
font-size: .64rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--green);
}
.sw-selected-flag svg { flex-shrink: 0; }
.sw-escape { margin-top: 10px; }
.sw-escape-card {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
background: var(--white);
border: 2px dashed var(--blue);
border-radius: var(--radius-sm);
font: inherit;
font-family: var(--font-body);
color: var(--dark2);
transition: background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.sw-escape-card:hover { background: var(--blue-pale); }
.sw-escape-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sw-escape-card.is-selected {
background: var(--blue-pale);
border-style: solid;
box-shadow: 0 0 0 3px rgba(59, 130, 230, .18);
}
.sw-escape-icon { line-height: 0; color: var(--blue); }
.sw-escape-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-escape-kick {
font-size: .62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--blue);
}
.sw-escape-label {
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark2);
}
.sw-escape-sub { font-size: .76rem; line-height: 1.4; color: var(--gray); }
.sw-escape-arrow { line-height: 0; color: var(--blue); transition: transform var(--tr); }
.sw-escape-card:hover .sw-escape-arrow { transform: translateX(3px); }
.sw-panel-foot { padding: 14px 18px 16px; }
.share-prefill {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
margin: 0 0 12px;
padding: 9px 12px;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
font-size: .78rem;
color: var(--gray);
}
.share-prefill[hidden] { display: none; }
.share-prefill-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
color: var(--gray-mid);
}
.share-prefill-name { color: var(--dark2); font-weight: 700; }
.share-prefill-body strong { color: var(--dark2); font-weight: 700; }
.share-prefill-route {
font-size: .7rem;
background: var(--gray-pale);
border: 1px solid var(--gray-light);
color: var(--gray);
padding: 1px 6px; border-radius: 4px;
}
.share-prefill-edit {
margin-left: auto;
background: var(--white); color: var(--primary);
border: 1.5px solid var(--primary-light); border-radius: var(--radius-sm);
padding: 4px 12px;
font-family: var(--font-body); font-size: .76rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.share-prefill-edit:hover { background: var(--primary-pale2); border-color: var(--primary); }
#pubPrefillBar { margin: -6px 0 20px; }
.sw-login-note {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: 0 0 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--amber-pale);
border: 1px solid rgba(230, 81, 0, .25);
color: #9A3412;
font-size: .8rem; line-height: 1.45;
}
.sw-login-note > svg { flex-shrink: 0; }
.sw-login-note-body { flex: 1; min-width: 12ch; font-weight: 600; }
.sw-login-btn {
flex-shrink: 0;
background: var(--white); color: #9A3412;
border: 1.5px solid rgba(230, 81, 0, .45); border-radius: var(--radius-sm);
padding: 6px 14px;
font-family: var(--font-body); font-size: .8rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.sw-login-btn:hover { background: var(--amber-pale); border-color: var(--amber); }
.sw-login-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sw-action-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--sw-border);
}
.sw-action-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sw-btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), opacity var(--tr);
}
.sw-btn--grey,
.sw-btn--ghost {
background: var(--white); color: var(--dark2);
border: 1.5px solid var(--sw-border); border-radius: var(--radius-sm);
padding: 9px 16px; font-size: .85rem; font-weight: 600;
}
.sw-btn--grey:hover,
.sw-btn--ghost:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
.sw-btn--primary {
background: var(--primary); color: var(--white); border: none;
border-radius: var(--radius-sm);
padding: 10px 20px; font-size: .88rem; font-weight: 600;
}
.sw-btn--primary:hover:not(:disabled) { background: var(--primary-dark); }
.sw-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sw-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sw-start-hint { flex-basis: 100%; margin: 4px 0 0; font-size: .74rem; color: var(--sw-muted); }
@media (max-width: 640px) {
.sw-panel-head, .sw-panel-body, .sw-panel-foot { padding-left: 12px; padding-right: 12px; }
.sw-object-card { margin-left: 12px; margin-right: 12px; }
.sw-section { padding: 12px 12px 14px; }
.sw-slider { margin-left: 0; }
.sw-action-bar { flex-direction: column; align-items: stretch; }
.sw-action-group { justify-content: stretch; }
.sw-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.sw-card, .sw-escape-card, .sw-escape-arrow, .sw-slide-btn,
.sw-slider::before, .sw-slider::after { transition: none !important; }
.sw-escape-card:hover .sw-escape-arrow { transform: none; }
.sw-track { scroll-behavior: auto; }
}
.agr-valid-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
.agr-valid-badge--ok { background: var(--green-pale); color: var(--green); }
.agr-valid-badge--expired { background: var(--gray-light); color: var(--gray-mid); }
.org-profile-head { margin-bottom: 6px; }
.org-profile-head h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--dark); }
.org-profile-badges, .org-profile-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.org-profile-badges-label { font-size: 0.86rem; font-weight: 600; color: var(--dark); margin-right: 2px; }
.org-profile-eori { font-size: 0.86rem; color: var(--gray); }
.org-profile-eori strong { color: var(--dark); font-weight: 600; }
.org-profile-full-link {
display: inline-block;
margin-top: 16px;
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.org-profile-full-link:hover { text-decoration: underline; }
.memberships-ds-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.memberships-ds-head-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-mid);
}
.ms-ds-tile {
width: 100%;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ms-ds-tile::after { display: none; }
.ms-ds-tile.is-active {
border-color: var(--tile-accent);
background: var(--tile-accent-pale);
box-shadow: 0 4px 12px rgba(20,15,42,.08);
}
.memberships-list-title {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-head);
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
margin: 22px 0 12px;
}
.memberships-list-count { font-size: 0.85rem; font-weight: 600; color: var(--gray); }
.memberships-list { display: flex; flex-direction: column; gap: 10px; }
.membership-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px 16px;
border-left: 3px solid var(--primary);
}
.membership-card-title { margin: 0 0 6px; font-size: 0.98rem; font-weight: 700; color: var(--dark); }
.membership-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.membership-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
background: var(--primary-pale);
color: var(--primary);
}
.membership-badge--fw { background: var(--gray-light); color: var(--gray-mid); }
.membership-card-period { font-size: 0.82rem; color: var(--gray); }
.membership-card-period strong { color: var(--dark); font-weight: 600; }
.membership-card-actions { flex-shrink: 0; }
.login-dropdown-group-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
text-transform: none;
letter-spacing: normal;
font-size: 0.86rem;
font-weight: 500;
color: var(--dark);
}
.login-dropdown-group-icon { flex-shrink: 0; width: 15px; height: 15px; }
a.login-dropdown-group-link {
text-decoration: none;
cursor: pointer;
transition: color var(--tr), background var(--tr);
border-radius: var(--radius-sm);
}
a.login-dropdown-group-link:hover { color: var(--primary); background: var(--primary-pale); }
.login-dropdown-group-link.login-nav-coming { opacity: 0.6; cursor: default; }
.delegations-resources-cell { line-height: 1.6; }
.delegations-resource-chip {
display: inline-block;
padding: 2px 8px;
margin: 1px 2px 1px 0;
background: var(--ds-table-head, #f9fafb);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 999px;
font-size: 0.8rem;
color: var(--ds-text, #111827);
}
.delegations-resource-more {
display: inline-block;
font-size: 0.78rem;
color: var(--ds-text-muted, #6b7280);
margin-left: 2px;
}
.memberships-orgname {
color: var(--ds-text-muted, #6b7280);
font-style: italic;
}
.delegations-progress {
margin-left: 8px;
color: var(--ds-text-muted, #6b7280);
font-size: 0.82rem;
font-style: italic;
}
.delegations-empty {
text-align: left;
padding: 24px 28px;
}
.delegations-empty-title {
font-weight: 600;
margin: 0 0 12px;
color: var(--ds-text, #111827);
}
.delegations-empty-stats {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 18px;
font-size: 0.92rem;
color: var(--ds-text-muted, #6b7280);
}
.delegations-empty-stats strong {
color: var(--ds-text, #111827);
font-weight: 600;
}
.delegations-empty-hint {
margin: 0;
color: var(--ds-text-muted, #6b7280);
font-size: 0.9rem;
}
.delegations-explorer {
margin-top: 18px;
padding: 18px 20px;
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
}
.delegations-explorer-title {
margin: 0 0 4px;
font-size: 1rem;
font-weight: 600;
}
.delegations-explorer-sub {
margin: 0 0 14px;
color: var(--ds-text-muted, #6b7280);
font-size: 0.9rem;
}
.delegations-explorer-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px 14px;
align-items: end;
}
.delegations-explorer-form label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.78rem;
font-weight: 500;
color: var(--ds-text-muted, #6b7280);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.delegations-explorer-form input {
padding: 8px 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.86rem;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 6px;
background: #fff;
text-transform: none;
}
.delegations-explorer-form button {
padding: 9px 14px;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
background: var(--primary, #5C3FA5);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.delegations-explorer-form button:hover {
background: var(--primary-dark, #3D2875);
}
.delegations-explorer-output {
margin: 14px 0 0;
padding: 12px 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.5;
background: #0f172a;
color: #e2e8f0;
border-radius: 8px;
max-height: 420px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
.ms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 12px;
margin-top: 14px;
}
@media (max-width: 560px) {
.ms-grid { grid-template-columns: 1fr; }
}
.ms-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: var(--dx-surface-card, #fff);
border: 1px solid var(--dx-border, #E5DFD5);
border-left: 3px solid var(--dx-brand, #0B3557);
border-radius: var(--radius, 10px);
}
.ms-card--hub { border-left-color: var(--dx-interactive, #15568F); }
.ms-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.ms-card-heading { min-width: 0; }
.ms-card-title {
margin: 0;
font-size: .95rem;
font-weight: 700;
color: var(--dx-text, #1D2B36);
overflow-wrap: anywhere;
}
.ms-card-kind {
display: block;
margin-top: 2px;
font-size: .74rem;
color: var(--dx-text-muted, #5E6C75);
}
.ms-card-count {
flex-shrink: 0;
font-size: .76rem;
color: var(--dx-text-muted, #5E6C75);
}
.ms-card-rows { display: flex; flex-direction: column; }
.ms-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
font-size: .82rem;
color: var(--dx-text-muted, #5E6C75);
}
.ms-row + .ms-row { border-top: 1px solid var(--dx-border, #E5DFD5); }
.ms-row-role {
font-weight: 600;
color: var(--dx-text, #1D2B36);
}
.ms-row-meta { white-space: nowrap; }
.ms-row-json { margin-left: auto; }
.ms-row-empty {
margin: 0;
padding: 8px 0;
font-size: .82rem;
color: var(--dx-text-muted, #5E6C75);
}
/* ── css/share-wizard-dual.css ── */
.swd-panel {
--swd-dim: 260ms;
--swd-bg: var(--dx-surface-work, #E6DFD0);
--swd-fg: var(--dx-brand, #0B3557);
--swd-accent: var(--dx-brand, #0B3557);
--swd-border: var(--dx-surface-work-border, #D2C7AF);
--swd-muted: color-mix(in srgb, var(--swd-fg) 72%, transparent);
position: relative;
background: var(--swd-bg);
color: var(--swd-fg);
border: 1px solid var(--swd-border);
border-radius: var(--radius);
box-shadow: 0 12px 32px color-mix(in srgb, var(--swd-fg) 14%, transparent);
}
.swd-panel--modal { border-radius: var(--radius-sm); box-shadow: none; }
.swd-modal-body { padding: 0; }
.swd-modal-window { max-width: 920px; }
.swd-head {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 18px 0;
}
.swd-title {
font-family: var(--font-head);
font-size: 1.1rem; font-weight: 700;
color: var(--swd-fg);
margin: 0 0 4px;
}
.swd-sub {
margin: 0;
font-size: .88rem; line-height: 1.6;
color: var(--swd-muted);
max-width: 640px;
}
.swd-headings { flex: 1 1 auto; min-width: 0; }
.swd-head-reset {
flex: 0 0 auto;
margin-top: 2px;
}
.swd-head-reset svg { flex-shrink: 0; }
.swd-action-group:empty { display: none; }
.swd-context { margin: 14px 18px 0; }
.swd-context-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
color: var(--gray-mid);
margin-bottom: 6px;
}
.swd-context-body .ec-list { gap: 0; }
@media (max-width: 560px) {
.swd-context { margin-left: 12px; margin-right: 12px; }
}
.swd-object-card {
margin: 14px 18px 0;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--white);
border: 1px solid var(--gray-light);
}
.swd-object-card-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
color: var(--gray-mid);
margin-bottom: 6px;
}
.swd-object-list { list-style: none; margin: 0; padding: 0; }
.swd-object-row {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
padding: 3px 0;
}
.swd-object-row + .swd-object-row { border-top: 1px solid var(--gray-light); }
.swd-object-row-title { font-size: .86rem; font-weight: 600; color: var(--dark2); }
.swd-object-row-meta { font-size: .72rem; color: var(--gray); }
.swd-object-row-uri {
font-size: .68rem;
color: var(--gray);
background: var(--gray-pale);
padding: 1px 6px; border-radius: 4px;
word-break: break-all;
}
.swd-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
gap: 20px 22px;
padding: 16px 18px 0;
align-items: start;
}
.swd-col { min-width: 0; }
.swd-col-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.swd-step {
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: 1px;
border-radius: 50%;
background: var(--swd-accent);
color: var(--white);
font-size: .72rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.swd-col-title {
font-family: var(--font-head);
font-size: .9rem; font-weight: 700;
color: var(--swd-fg);
margin: 0 0 3px;
}
.swd-col-note {
margin: 0;
font-size: .8rem; line-height: 1.45;
color: var(--swd-muted);
min-height: 2.3em;
transition: color .2s ease;
}
.swd-col-note.is-alert { color: #9A3412; font-weight: 600; }
.swd-list { display: grid; gap: 8px; margin-left: 32px; }
.swd-card {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 10px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
background: var(--white);
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
font: inherit;
font-family: var(--font-body);
color: var(--dark2);
transition:
border-color var(--tr),
background var(--tr),
box-shadow var(--tr);
}
.swd-card:hover:not(.is-dimmed):not(.is-selected) {
border-color: var(--primary-light);
background: var(--primary-pale2);
}
.swd-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.swd-card.is-selected {
border-color: var(--swd-accent);
background: var(--white);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--swd-accent) 20%, transparent),
0 4px 14px color-mix(in srgb, var(--swd-fg) 16%, transparent);
}
.swd-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.swd-card-top { display: flex; align-items: center; gap: 8px; }
.swd-card-icon { flex-shrink: 0; line-height: 0; color: var(--primary); }
.swd-card-icon svg { width: 18px; height: 18px; }
.swd-card-kick {
font-size: .6rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--gray-mid);
}
.swd-card-label {
flex: 1;
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark2); line-height: 1.3;
}
.swd-card-sub { font-size: .76rem; line-height: 1.4; color: var(--gray); }
.swd-badge {
flex-shrink: 0;
font-size: .66rem; font-weight: 700; letter-spacing: .02em;
padding: 2px 7px; border-radius: 999px;
background: var(--primary-pale); color: var(--primary-dark);
}
.swd-card-flag {
align-self: start;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--green);
color: var(--white);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: opacity .18s ease, transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swd-card.is-selected .swd-card-flag { opacity: 1; transform: scale(1); }
.swd-card.is-dimmed {
background: transparent;
border-color: var(--swd-border);
box-shadow: none;
cursor: help;
}
.swd-card.is-dimmed:hover { border-color: var(--swd-accent); }
.swd-card.is-dimmed .swd-card-icon,
.swd-card.is-dimmed .swd-card-kick,
.swd-card.is-dimmed .swd-card-label,
.swd-card.is-dimmed .swd-card-sub,
.swd-card.is-dimmed .swd-badge { opacity: .42; }
.swd-card-icon, .swd-card-kick, .swd-card-label, .swd-card-sub, .swd-badge {
transition: opacity var(--swd-dim, 260ms) ease;
}
.swd-card-why {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
font-size: .72rem;
line-height: 1.35;
font-weight: 600;
color: #9A3412;
transition: grid-template-rows var(--swd-dim, 260ms) ease, opacity .2s ease;
}
.swd-card-why > span { overflow: hidden; }
.swd-card.is-dimmed .swd-card-why { grid-template-rows: 1fr; opacity: 1; }
@keyframes swdFlash {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 230, .55); }
60% { box-shadow: 0 0 0 8px rgba(59, 130, 230, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 230, 0); }
}
.swd-card.is-flash { animation: swdFlash 1.1s ease-out 2; }
.swd-escape { margin: 10px 0 0 32px; }
.swd-escape-card {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 11px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
background: var(--white);
border: 2px dashed var(--blue);
border-radius: var(--radius-sm);
font: inherit;
font-family: var(--font-body);
color: var(--dark2);
transition: background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.swd-escape-card:hover { background: var(--blue-pale); }
.swd-escape-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.swd-escape-card.is-selected {
background: var(--blue-pale);
border-style: solid;
box-shadow: 0 0 0 3px rgba(59, 130, 230, .18);
}
.swd-escape-flag {
display: none;
align-items: center; gap: 4px;
margin-top: 3px;
font-size: .64rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--green);
}
.swd-escape-flag svg { flex-shrink: 0; }
.swd-escape-card.is-selected .swd-escape-flag { display: inline-flex; }
.swd-escape-icon { line-height: 0; color: var(--blue); }
.swd-escape-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swd-escape-kick {
font-size: .62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--blue);
}
.swd-escape-label {
font-family: var(--font-head); font-size: .88rem; font-weight: 700;
color: var(--dark2);
}
.swd-escape-sub { font-size: .76rem; line-height: 1.4; color: var(--gray); }
.swd-escape-arrow { line-height: 0; color: var(--blue); transition: transform var(--tr); }
.swd-escape-card:hover .swd-escape-arrow { transform: translateX(3px); }
.swd-pop {
position: absolute;
z-index: 40;
width: min(320px, calc(100% - 20px));
background: var(--white);
color: var(--dark);
border-radius: var(--radius-sm);
border: 1px solid var(--gray-light);
box-shadow: 0 10px 30px rgba(20, 15, 42, 0.22);
padding: 12px 14px 10px;
}
.swd-pop[hidden] { display: none; }
.swd-pop-arrow {
position: absolute;
top: -7px;
width: 12px; height: 12px;
margin-left: -6px;
background: var(--white);
border-left: 1px solid var(--gray-light);
border-top: 1px solid var(--gray-light);
transform: rotate(45deg);
}
.swd-pop.is-above .swd-pop-arrow {
top: auto; bottom: -7px;
transform: rotate(225deg);
}
.swd-pop-title {
margin: 0 0 4px;
font-family: var(--font-head);
font-size: .85rem; font-weight: 700;
color: var(--dark2);
line-height: 1.35;
}
.swd-pop-why { margin: 0 0 8px; font-size: .78rem; line-height: 1.45; color: var(--gray); }
.swd-pop-intro {
margin: 0 0 6px;
font-size: .74rem; font-weight: 600;
color: var(--dark2);
}
.swd-pop-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.swd-pop-do {
font-family: var(--font-body);
font-size: .79rem; font-weight: 600;
text-align: left;
padding: 7px 12px;
border-radius: var(--radius-sm);
border: none;
background: var(--primary);
color: var(--white);
cursor: pointer;
transition: background var(--tr);
}
.swd-pop-do:hover { background: var(--primary-dark); }
.swd-pop-do:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.swd-pop-close {
font-family: var(--font-body);
font-size: .74rem;
padding: 3px 0 0;
border: 0;
background: none;
color: var(--gray-mid);
cursor: pointer;
text-decoration: underline;
}
.swd-pop-close:hover { color: var(--dark2); }
.swd-foot { padding: 14px 18px 16px; }
[data-swd-summary].share-prefill {
background: transparent;
border: none;
border-top: 1px solid var(--dx-surface-work-border);
border-radius: 0;
padding: 12px 2px 2px;
color: var(--dx-text-on-work);
}
[data-swd-summary].share-prefill .share-prefill-kick { color: var(--dx-text-on-work); }
[data-swd-summary].share-prefill .share-prefill-name,
[data-swd-summary].share-prefill .share-prefill-body strong { color: var(--dx-brand); }
[data-swd-summary].share-prefill .share-prefill-route {
background: var(--dx-surface-band-soft);
border-color: var(--dx-surface-work-border);
color: var(--dx-text-on-work);
}
.swd-login-note {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: 0 0 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--amber-pale);
border: 1px solid rgba(230, 81, 0, .25);
color: #9A3412;
font-size: .8rem; line-height: 1.45;
}
.swd-login-note[hidden] { display: none; }
.swd-login-note > svg { flex-shrink: 0; }
.swd-login-note-body { flex: 1; min-width: 12ch; font-weight: 600; }
.swd-login-btn {
flex-shrink: 0;
background: var(--white); color: #9A3412;
border: 1.5px solid rgba(230, 81, 0, .45); border-radius: var(--radius-sm);
padding: 6px 14px;
font-family: var(--font-body); font-size: .8rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr);
}
.swd-login-btn:hover { background: var(--amber-pale); border-color: var(--amber); }
.swd-login-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.swd-action-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--swd-border);
}
.swd-action-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.swd-btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), opacity var(--tr);
}
.swd-btn--grey,
.swd-btn--ghost,
.swd-btn--reset {
background: var(--white); color: var(--swd-accent);
border: 1.5px solid var(--swd-accent); border-radius: 999px;
padding: 9px 16px; font-size: .85rem; font-weight: 600;
}
.swd-btn--grey:hover,
.swd-btn--ghost:hover,
.swd-btn--reset:hover {
border-color: var(--swd-accent);
background: var(--dx-surface-band-soft, #F5F1EA);
}
.swd-btn--primary {
background: var(--swd-accent); color: var(--white);
border: 1.5px solid var(--swd-accent); border-radius: 999px;
padding: 10px 20px; font-size: .88rem; font-weight: 600;
}
.swd-btn--primary:hover:not(:disabled) {
background: var(--dx-brand-deep, #071F33); border-color: var(--dx-brand-deep, #071F33);
}
.swd-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.swd-btn:focus-visible { outline: 2px solid var(--swd-accent); outline-offset: 2px; }
.swd-start-hint { flex-basis: 100%; margin: 4px 0 0; font-size: .74rem; color: var(--swd-muted); }
.swd-start-hint[hidden] { display: none; }
.swd-live {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (max-width: 640px) {
.swd-head, .swd-cols, .swd-foot { padding-left: 12px; padding-right: 12px; }
.swd-object-card { margin-left: 12px; margin-right: 12px; }
.swd-list, .swd-escape { margin-left: 0; }
.swd-action-bar { flex-direction: column; align-items: stretch; }
.swd-action-group { justify-content: stretch; }
.swd-btn { flex: 1 1 auto; justify-content: center; }
.swd-pop { width: calc(100% - 20px); }
}
@media (prefers-reduced-motion: reduce) {
.swd-card,
.swd-card-why,
.swd-card-flag,
.swd-card-icon, .swd-card-kick, .swd-card-label, .swd-card-sub, .swd-badge,
.swd-col-note, .swd-escape-card, .swd-escape-arrow { transition: none !important; }
.swd-card.is-flash { animation: none; outline: 2px solid var(--blue); outline-offset: 2px; }
.swd-escape-card:hover .swd-escape-arrow { transform: none; }
}
/* ── css/authorisations.css ── */
.del-connection-bar {
margin-bottom: 14px;
font-size: 0.88rem;
}
.del-conn-ok { color: #059669; font-weight: 600; }
.del-conn-err { color: #dc2626; font-weight: 600; }
.del-conn-checking { color: var(--ds-text-muted, #6b7280); font-style: italic; }
.del-querybuilder {
margin-bottom: 16px;
padding: 18px 20px;
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
}
.del-qb-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.del-qb-sub { margin: 0 0 14px; color: var(--ds-text-muted, #6b7280); font-size: 0.9rem; }
.del-qb-form {
display: grid; gap: 14px 20px;
grid-template-columns: minmax(260px, 1.5fr) auto auto;
align-items: end;
}
.del-qb-field {
display: flex; flex-direction: column; gap: 4px;
font-size: 0.78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--ds-text-muted, #6b7280);
}
.del-qb-field select {
padding: 9px 12px;
font: inherit; font-size: 0.92rem;
text-transform: none; letter-spacing: 0;
font-weight: 400;
color: var(--ds-text, #111827);
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 6px;
background: #fff;
}
.del-qb-direction {
display: flex; flex-direction: column; gap: 4px;
border: 0; padding: 0; margin: 0;
font-size: 0.78rem;
}
.del-qb-direction legend {
font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--ds-text-muted, #6b7280);
padding: 0; margin-bottom: 4px;
}
.del-qb-direction label {
display: inline-flex; align-items: center; gap: 4px;
margin-right: 12px;
font-weight: 400; text-transform: none; letter-spacing: 0;
color: var(--ds-text, #111827);
}
.del-qb-submit {
padding: 10px 18px;
font: inherit; font-size: 0.92rem; font-weight: 600;
background: var(--primary, #5C3FA5); color: #fff;
border: 0; border-radius: 8px; cursor: pointer;
height: 40px;
}
.del-qb-submit:hover { background: var(--primary-dark, #3D2875); }
.del-qb-submit:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 720px) {
.del-qb-form { grid-template-columns: 1fr; }
}
.del-results-summary {
margin: 16px 0 8px;
font-size: 0.92rem;
color: var(--ds-text-muted, #6b7280);
}
.del-results-summary strong { color: var(--ds-text, #111827); }
.del-results-pending {
padding: 24px;
font-style: italic;
color: var(--ds-text-muted, #6b7280);
}
.del-effect-badge {
display: inline-block;
padding: 2px 8px;
font-size: 0.78rem;
font-weight: 600;
border-radius: 999px;
margin-right: 4px;
}
.del-effect-permit {
background: #d1fae5; color: #065f46;
border: 1px solid #6ee7b7;
}
.del-effect-deny {
background: #fee2e2; color: #991b1b;
border: 1px solid #fca5a5;
}
.del-effect-other {
background: #f3f4f6; color: #6b7280;
border: 1px solid #e5e7eb;
}
.del-role-badge {
display: inline-block;
padding: 2px 8px;
font-size: 0.74rem;
font-weight: 600;
border-radius: 999px;
letter-spacing: 0.02em;
}
.del-role-subject {
background: var(--primary-pale, #ede8f9);
color: var(--primary, #5C3FA5);
}
.del-role-issuer {
background: #fef3c7;
color: #92400e;
}
.del-ar-link {
margin-left: 6px;
text-decoration: none;
color: var(--primary, #5C3FA5);
font-weight: 700;
}
.del-ar-link:hover { text-decoration: underline; }
.auth-filter-org { display: flex; flex-direction: column; gap: 2px; }
.auth-filter-org-label {
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--ds-text-muted, #6b7280);
}
.auth-filter-org-name { font-size: 1.02rem; color: var(--ds-text, #111827); }
.auth-filter-field {
display: flex; flex-direction: column; gap: 4px;
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--ds-text-muted, #6b7280);
}
.auth-filter-field select {
padding: 9px 12px; min-width: 220px;
font: inherit; font-size: 0.92rem; font-weight: 400;
text-transform: none; letter-spacing: 0;
color: var(--ds-text, #111827);
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 6px; background: #fff;
}
.auth-groupby { display: flex; align-items: center; gap: 6px; }
.auth-groupby-label {
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--ds-text-muted, #6b7280);
margin-right: 2px;
}
.auth-groupby-btn {
padding: 7px 14px;
font: inherit; font-size: 0.86rem; font-weight: 600;
color: var(--primary, #5C3FA5);
background: #fff;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 999px; cursor: pointer;
}
.auth-groupby-btn:hover { border-color: var(--primary, #5C3FA5); }
.auth-groupby-btn.is-active {
background: var(--primary, #5C3FA5); color: #fff;
border-color: var(--primary, #5C3FA5);
}
.auth-vocab-warn {
flex-basis: 100%; margin: 0;
font-size: 0.82rem; color: #92400e;
}
.auth-view-btn {
flex: 0 0 auto;
padding: 4px 12px;
font: inherit; font-size: 0.82rem; font-weight: 600;
color: var(--primary, #5C3FA5);
background: #fff;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 999px; cursor: pointer;
}
.auth-view-btn:hover { border-color: var(--primary, #5C3FA5); background: var(--primary-pale, #ede8f9); }
.auth-view-btn--soon,
.auth-view-btn--soon:hover {
color: var(--gray-mid, #98A2B3);
background: var(--gray-pale, #F4F2F8);
border-color: var(--gray-light, #E8E4F0);
cursor: not-allowed;
}
.agreements-table .agreements-col-action { width: 1%; white-space: nowrap; text-align: right; }
.auth-table .auth-issuer-badge {
display: inline-block; max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: middle;
}
.am-party {
display: inline-block; max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: middle;
font-size: .82rem; color: var(--dark, #140F2A);
}
.am-party-none { color: var(--gray-mid, #98A2B3); }
.am-party--other {
padding: 2px 8px;
border-radius: 999px;
background: var(--primary-pale2, #F5F2FD);
border: 1px solid var(--primary-pale, #EDE8F9);
color: var(--primary-dark, #3D2875);
font-weight: 600;
}
.am-party--self { color: var(--gray, #6B7A8D); }
.auth-modal-party-role {
display: flex; align-items: center; gap: 6px;
margin-top: 3px;
}
.auth-modal-party-role-label {
font-size: .74rem; color: var(--gray, #6B7A8D);
}
.st-toolbar .auth-filter-field { flex-direction: row; align-items: center; gap: 8px; }
.st-toolbar .auth-filter-field select {
min-width: 170px; height: 36px; padding: 0 10px; font-size: 0.85rem;
}
.auth-modal-type-desc {
display: block; margin-top: 4px;
font-size: 0.86rem; line-height: 1.4;
color: var(--ds-text-muted, #6b7280);
}
.auth-modal-target-card { text-decoration: none; cursor: pointer; }
.auth-modal-agreement {
padding: 12px 14px;
background: var(--ds-subtle-bg, #f9fafb);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
}
.auth-modal-agreement-main {
display: flex; align-items: center; gap: 10px;
margin-bottom: 6px;
}
.auth-modal-agreement-label { font-weight: 600; color: var(--ds-text, #111827); }
.auth-modal-agreement-meta {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 0.86rem; color: var(--ds-text-muted, #6b7280);
}
.auth-modal-agreement-link {
display: inline-flex; align-items: center; gap: 4px;
color: var(--primary, #5C3FA5); font-weight: 600; text-decoration: none;
}
.auth-modal-agreement-link:hover { text-decoration: underline; }
.del-results-table .del-set-header td {
background: var(--primary-pale2, #f5f2fd);
border-top: 2px solid var(--primary-pale, #ede8f9);
padding: 8px 14px;
}
.del-set-badge {
display: inline-block;
padding: 2px 8px;
margin-right: 8px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 999px;
background: var(--primary, #5C3FA5);
color: #fff;
}
.del-set-parties { margin-right: 10px; color: var(--ds-text, #111827); }
.del-set-count {
margin-right: 10px;
font-size: 0.8rem;
color: var(--ds-text-muted, #6b7280);
}
.del-set-id {
margin: 0 6px;
font-size: 0.76rem;
color: var(--ds-text-muted, #6b7280);
}
.del-policy-row.is-match > td { background: rgba(92, 63, 165, 0.04); }
.del-policy-indent {
color: var(--primary, #5C3FA5);
text-align: center;
white-space: nowrap;
}
.del-policy-match { color: var(--primary, #5C3FA5); font-size: 0.7rem; }
.del-action-abbr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 5px;
font-size: 0.72rem;
font-weight: 700;
background: var(--primary-pale, #ede8f9);
color: var(--primary-dark, #3D2875);
cursor: default;
}
.del-actions-cell { white-space: nowrap; }
.search-status-link {
display: flex;
justify-content: flex-end;
margin: 16px 0 4px;
}
.search-status-link a {
font-size: 0.8rem;
color: var(--gray, #9ca3af);
text-decoration: none;
}
.search-status-link a:hover {
color: var(--primary, #5C3FA5);
text-decoration: underline;
}
.nav-link-logo {
height: 16px;
width: 16px;
object-fit: contain;
margin-right: 6px;
vertical-align: middle;
flex: 0 0 auto;
}
.delegations-explorer summary {
cursor: pointer;
font-weight: 600;
color: var(--ds-text, #111827);
margin-bottom: 8px;
}
.pt-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pt-badge {
display: inline-block;
padding: 2px 9px;
font-size: 0.74rem;
font-weight: 600;
border-radius: 999px;
letter-spacing: 0.02em;
}
.pt-badge-fact {
background: var(--primary-pale, #ede8f9);
color: var(--primary, #5C3FA5);
border: 1px solid var(--primary-pale, #c7d2fe);
}
.pt-badge-action {
background: #ecfeff;
color: #0e7490;
border: 1px solid #a5f3fc;
}
.del-type-breakdown {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 14px 0 10px;
padding: 12px 14px;
background: var(--ds-table-head, #f9fafb);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
}
.del-type-breakdown-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
}
.del-type-breakdown-json {
margin-left: auto;
}
.del-type-chip {
display: inline-block;
padding: 4px 12px;
font: inherit;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
color: var(--ds-text, #111827);
background: #fff;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 999px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.del-type-chip:hover {
border-color: var(--primary, #5C3FA5);
color: var(--primary, #5C3FA5);
}
.del-type-chip.is-active {
background: var(--primary, #5C3FA5);
border-color: var(--primary, #5C3FA5);
color: #fff;
}
.agreements-content { padding: 0; }
.agreements-active-filters {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.agr-activefilter {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: -6px 0 14px;
}
.agr-activefilter-label {
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--dx-text-muted, #52606d);
}
.agr-activefilter .agreements-active-filters { margin: 0; }
.agr-activefilter .agreements-active-filter { align-self: auto; }
.agreements-controls {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 20px;
padding: 16px 20px;
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
}
.agreements-control {
display: flex; flex-direction: column; gap: 4px;
min-width: 140px;
}
.agreements-control > span {
font-size: 0.78rem; color: var(--ds-text-muted, #6b7280);
font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.agreements-control > select {
padding: 8px 28px 8px 10px;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 6px;
background: #fff;
font-size: 0.92rem;
cursor: pointer;
}
.agreements-control > select:focus { outline: 2px solid var(--primary, #4f46e5); outline-offset: 1px; }
.agreements-active-filter {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 6px 6px 12px;
background: var(--green-pale, #ecfdf5);
border: 1px solid rgba(5, 150, 105, 0.30);
border-radius: 999px;
font-size: 0.85rem; color: var(--ds-text, #111827);
align-self: flex-end;
}
.agreements-active-filter-label {
font-weight: 600; color: var(--ds-text-muted, #6b7280);
text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em;
}
.agreements-active-filter-val {
font-weight: 600;
}
.agreements-active-filter-clear {
border: none; background: rgba(5, 150, 105, 0.10);
color: var(--green, #059669);
width: 22px; height: 22px;
border-radius: 999px;
font-size: 1rem; line-height: 1; cursor: pointer;
}
.agreements-active-filter-clear:hover {
background: rgba(5, 150, 105, 0.18);
}
.agreements-empty {
padding: 40px 20px;
text-align: center;
color: var(--ds-text-muted, #6b7280);
background: var(--ds-card-bg, #fff);
border: 1px dashed var(--ds-border, #e5e7eb);
border-radius: 12px;
}
/* ── css/dexpod.css ── */
.agreements-controls .dexpod-actions {
margin-left: auto;
flex-direction: row;
align-items: center;
}
.dexpod-add-btn {
padding: 10px 18px;
font-size: 0.92rem;
font-weight: 600;
color: #fff;
background: var(--primary, #5C3FA5);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.dexpod-add-btn:hover { background: var(--primary-dark, #3D2875); }
.dexpod-add-btn:disabled,
.dexpod-add-btn[aria-disabled="true"] {
background: var(--primary-light, #7B5FCA);
opacity: 0.65;
cursor: not-allowed;
}
.dexpod-file-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 12px;
border-radius: 999px;
background: var(--primary-pale2, #F5F2FD);
color: var(--primary-dark, #3D2875);
text-decoration: none;
font-weight: 600;
transition: background 0.15s ease, color 0.15s ease;
max-width: 100%;
}
.dexpod-file-link-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.dexpod-file-link-chevron {
flex: 0 0 auto;
opacity: 0.7;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.dexpod-file-link:hover,
.dexpod-file-row:hover .dexpod-file-link {
background: var(--primary-pale, #EDE8F9);
color: var(--primary-dark, #3D2875);
}
.dexpod-file-link:hover .dexpod-file-link-chevron,
.dexpod-file-row:hover .dexpod-file-link-chevron {
opacity: 1;
transform: translateX(2px);
}
.dexpod-files-table tbody tr.dexpod-file-row { cursor: pointer; }
.dexpod-files-table tbody tr.dexpod-file-row:hover {
background: var(--primary-pale2, #F5F2FD);
}
.dexpod-files-table tbody tr.dexpod-file-row:focus-visible {
outline: 2px solid var(--primary, #5C3FA5);
outline-offset: -2px;
}
.dexpod-files-table { table-layout: fixed; }
.dexpod-files-table col.dpc-name,
.dexpod-files-table th.dpc-name { width: 27%; }
.dexpod-files-table th.dpc-type { width: 14%; }
.dexpod-files-table th.dpc-size { width: 8%; }
.dexpod-files-table th.dpc-upload { width: 14%; }
.dexpod-files-table th.dpc-offers { width: 11%; }
.dexpod-files-table th.dpc-req { width: 11%; }
.dexpod-files-table th.dpc-actions { width: 15%; }
.dexpod-files-table td.dpc-actions-cell { text-align: right; }
.dexpod-files-table td { overflow-wrap: anywhere; }
.dexpod-files-table .dexpod-file-link { max-width: 100%; }
.dexpod-files-table .dexpod-file-link-text {
white-space: normal;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.dexpod-files-table .dexpod-meta-type-badge {
display: inline-block;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.dexpod-back-row { margin: 0 0 16px; }
.dexpod-back-link {
color: var(--primary, #5C3FA5);
text-decoration: none;
font-size: 0.92rem;
}
.dexpod-back-link:hover { text-decoration: underline; }
.dexpod-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--ds-text, #111827);
margin: 24px 0 12px;
letter-spacing: 0.01em;
}
.dexpod-meta-table th {
text-align: left;
width: 200px;
color: var(--ds-text-muted, #6b7280);
font-weight: 500;
padding-right: 12px;
vertical-align: top;
}
.dexpod-meta-table td {
word-break: break-all;
}
.dexpod-offer-cell { min-width: 200px; }
.dexpod-offer-link {
color: var(--primary, #5C3FA5);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9rem;
}
.dexpod-offer-link:hover { text-decoration: underline; }
.dexpod-detail-card {
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
padding: 20px 22px;
margin-bottom: 20px;
}
.dexpod-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.dexpod-detail-header-left { min-width: 0; flex: 1; }
.dexpod-detail-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ds-text-muted, #6b7280);
font-weight: 600;
margin-bottom: 6px;
}
.dexpod-detail-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--ds-text, #111827);
margin: 0;
word-break: break-word;
}
.dexpod-detail-header-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dexpod-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
@media (max-width: 640px) {
.dexpod-meta-grid { grid-template-columns: 1fr; }
}
.dexpod-meta-box {
background: var(--primary-pale2, #F5F2FD);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
padding: 12px 14px;
}
.dexpod-meta-label {
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--ds-text-muted, #6b7280);
font-weight: 600;
text-transform: uppercase;
margin-bottom: 6px;
}
.dexpod-meta-value {
font-size: 0.95rem;
color: var(--ds-text, #111827);
word-break: break-all;
}
.dexpod-meta-value--mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.88rem;
}
.dexpod-meta-value--strong { display: flex; flex-direction: column; gap: 2px; }
.dexpod-meta-party-name {
font-weight: 600;
color: var(--ds-text, #111827);
}
.dexpod-meta-party-name:empty { display: none; }
.dexpod-meta-party-eori {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
color: var(--ds-text-muted, #6b7280);
}
.dexpod-meta-user-name {
font-weight: 600;
color: var(--ds-text, #111827);
}
.dexpod-meta-user-sub {
font-size: 0.82rem;
color: var(--ds-text-muted, #6b7280);
}
.dexpod-meta-user-colleague {
font-weight: 600;
color: var(--ds-text, #111827);
}
.dexpod-meta-user-colleague-id {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
color: var(--ds-text-muted, #6b7280);
word-break: break-all;
}
.dexpod-meta-type-badge {
display: inline-block;
background: var(--primary-pale, #EDE8F9);
color: var(--primary-dark, #3D2875);
border-radius: 999px;
padding: 4px 10px;
font-size: 0.82rem;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dexpod-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 24px 0 12px;
}
.dexpod-section-head .dexpod-section-title { margin: 0; }
.dexpod-offers-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.dexpod-offer-created {
font-size: 0.8rem;
color: var(--ds-text-muted, #6b7280);
margin-left: auto;
}
.dexpod-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border: none;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, opacity 0.15s ease;
color: #fff;
white-space: nowrap;
}
.dexpod-btn:disabled, .dexpod-btn[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
}
.dexpod-btn-primary { background: var(--primary, #5C3FA5); }
.dexpod-btn-primary:hover:not(:disabled) { background: var(--primary-dark, #3D2875); }
.dexpod-btn-secondary {
background: transparent;
color: var(--ds-text-muted, #6b7280);
border: 1px solid var(--ds-border, #e5e7eb);
}
.dexpod-btn-secondary:hover:not(:disabled) {
background: var(--primary-pale2, #F5F2FD);
color: var(--ds-text, #111827);
}
.dexpod-btn-share { background: #16A34A; }
.dexpod-btn-share:hover:not(:disabled) { background: #15803D; }
.dexpod-btn-download { background: #2563EB; }
.dexpod-btn-download:hover:not(:disabled) { background: #1D4ED8; }
.dexpod-btn-delete { background: #DC2626; }
.dexpod-btn-delete:hover:not(:disabled) { background: #B91C1C; }
.dexpod-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 3000;
}
.dexpod-modal {
background: #fff;
border-radius: 12px;
box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.35);
padding: 24px;
width: 100%;
max-width: 560px;
}
.dexpod-modal-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--ds-text, #111827);
margin: 0 0 8px;
}
.dexpod-modal-body {
color: var(--ds-text-muted, #6b7280);
margin: 0 0 16px;
font-size: 0.92rem;
}
.dexpod-modal-callout {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: #FEF3C7;
border: 1px solid #FCD34D;
border-radius: 8px;
color: #92400E;
font-size: 0.88rem;
line-height: 1.4;
margin-bottom: 16px;
}
.dexpod-modal-callout-icon {
flex: 0 0 auto;
margin-top: 2px;
color: #B45309;
}
.dexpod-modal-share-row {
display: flex;
gap: 8px;
align-items: stretch;
margin-bottom: 18px;
}
.dexpod-modal-share-input {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.88rem;
background: var(--primary-pale2, #F5F2FD);
color: var(--ds-text, #111827);
}
.dexpod-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.dexpod-modal-error {
padding: 10px 12px;
background: #FEE2E2;
border: 1px solid #FCA5A5;
border-radius: 8px;
color: #991B1B;
font-size: 0.88rem;
margin-bottom: 12px;
}
.dexpod-offer-card .dexpod-view-offer-btn {
align-self: flex-end;
}
.agreements-table-wrap {
overflow-x: auto;
background: var(--ds-card-bg, #fff);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 12px;
}
.agreements-table.st-table { border-collapse: separate; border-spacing: 0; }
.agreements-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.agreements-table thead th {
text-align: left;
padding: 12px 14px;
background: var(--ds-table-head, #f9fafb);
border-bottom: 1px solid var(--ds-border, #e5e7eb);
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.agreements-table tbody td {
padding: 14px;
border-bottom: 1px solid var(--ds-border-light, #f3f4f6);
vertical-align: top;
}
.agreements-table tbody tr:last-child td { border-bottom: none; }
.agreements-title { font-weight: 600; color: var(--ds-text, #111827); }
.agreements-status {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--gray-pale, #f3f4f6);
color: var(--gray, #6b7280);
}
.agreements-status-approved { background: var(--green-pale, #d1fae5); color: var(--green, #059669); }
.agreements-status-waiting { background: var(--amber-pale, #fef3c7); color: var(--amber, #d97706); }
.agreements-status-rejected { background: var(--red-pale, #fee2e2); color: var(--red, #dc2626); }
.agreements-status-withdrawn { background: var(--gray-pale, #f3f4f6); color: var(--gray, #6b7280); }
.agreements-target-link {
color: var(--primary, #4f46e5);
text-decoration: none;
font-weight: 500;
}
.agreements-target-link:hover { text-decoration: underline; }
.agreements-target-raw {
color: var(--ds-text-muted, #6b7280);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.86rem;
word-break: break-all;
}
@media (max-width: 720px) {
.agreements-controls { padding: 12px 14px; gap: 12px; }
.agreements-control { min-width: 120px; flex: 1 1 auto; }
.agreements-table { font-size: 0.88rem; }
.agreements-table thead th,
.agreements-table tbody td { padding: 10px; }
}
.dexpod-row-actions {
display: inline-flex;
gap: 4px;
align-items: center;
}
.dexpod-row-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--border, #E2E8F0);
border-radius: 8px;
background: #fff;
color: var(--text-muted, #52606D);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.dexpod-row-btn:hover:not(:disabled) {
background: var(--surface-hover, #F1F5F9);
color: var(--primary, #115492);
border-color: var(--primary, #115492);
}
.dexpod-row-btn:focus-visible {
outline: 2px solid var(--primary, #115492);
outline-offset: 2px;
}
.dexpod-row-btn:disabled {
opacity: .42;
cursor: not-allowed;
}
.dexpod-row-btn-delete:hover:not(:disabled) {
color: #DC2626;
border-color: #DC2626;
background: #FEF2F2;
}
.dexpod-row-btn-offer:hover:not(:disabled) {
color: #15803D;
border-color: #15803D;
background: #F0FDF4;
}
.dexpod-count-pill {
display: inline-block;
min-width: 22px;
padding: 1px 7px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-align: center;
line-height: 18px;
}
.dexpod-count-pill-offer {
background: #DCFCE7;
color: #166534;
}
.dexpod-count-none {
color: var(--text-muted, #94A3B8);
}
.dexpod-h2m-note {
max-width: 52ch;
margin: 8px auto 0;
color: var(--text-muted, #52606D);
font-size: 13px;
line-height: 1.5;
}
.dexpod-btn-edit {
background: #fff;
color: var(--text-muted, #52606D);
border: 1px solid var(--border, #E2E8F0);
}
@media (max-width: 760px) {
.dexpod-files-table th.dpc-upload,
.dexpod-files-table td:nth-child(4),
.dexpod-files-table th.dpc-req,
.dexpod-files-table td:nth-child(6) { display: none; }
.dexpod-files-table th.dpc-name { width: auto; }
}
.pub-dexpod-modal { max-width: 640px; }
.pub-dexpod-search { margin: 0 0 10px; }
.pub-dexpod-search input { width: 100%; }
.pub-dexpod-list {
max-height: 46vh;
overflow-y: auto;
border: 1px solid var(--border, #E2E8F0);
border-radius: 10px;
background: var(--surface-alt, #F8FAFC);
}
.pub-dexpod-row {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border-bottom: 1px solid var(--border, #E2E8F0);
cursor: pointer;
background: #fff;
}
.pub-dexpod-row:last-child { border-bottom: 0; }
.pub-dexpod-row:hover { background: var(--surface-hover, #F1F5F9); }
.pub-dexpod-row input[type="checkbox"],
.pub-dexpod-row input[type="radio"] {
margin-top: 3px;
flex: 0 0 auto;
width: 16px;
height: 16px;
accent-color: var(--primary, #115492);
}
.pub-dexpod-row:focus-within {
outline: 2px solid var(--primary, #115492);
outline-offset: -2px;
}
.pub-dexpod-row-disabled {
opacity: .55;
cursor: not-allowed;
}
.pub-dexpod-row-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pub-dexpod-row-title {
font-weight: 600;
font-size: 14px;
color: var(--text, #1F2933);
overflow-wrap: anywhere;
}
.pub-dexpod-row-file,
.pub-dexpod-row-desc {
font-size: 12.5px;
color: var(--text-muted, #52606D);
overflow-wrap: anywhere;
}
.pub-dexpod-row-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pub-dexpod-row-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 12px;
color: var(--text-muted, #52606D);
}
.pub-dexpod-row-warn {
color: #92400E;
background: #FEF3C7;
border-radius: 999px;
padding: 1px 8px;
font-weight: 600;
cursor: help;
}
.pub-dexpod-row-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.pub-dexpod-badge {
font-size: 11.5px;
font-weight: 700;
padding: 1px 8px;
border-radius: 999px;
letter-spacing: .01em;
}
.pub-dexpod-badge-offer { background: #DCFCE7; color: #166534; }
.pub-dexpod-badge-req { background: #DBEAFE; color: #1E40AF; }
.pub-dexpod-badge-added { background: #E2E8F0; color: #475569; }
.pub-dexpod-count {
margin-right: auto;
font-size: 13px;
color: var(--text-muted, #52606D);
}
.pub-dexpod-row-warn-soft {
color: #1E40AF;
background: #DBEAFE;
}
.dexpod-file-head { margin-bottom: 12px; }
.dexpod-file-head .ec {
background: var(--primary-pale2, #F5F2FD);
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
box-shadow: none;
padding: 14px 14px 14px 16px;
}
.dexpod-file-head .ec:hover { border-color: var(--ds-border, #e5e7eb); box-shadow: none; }
.dexpod-file-head .ec::before { display: none; }
.dexpod-file-head .ec-sub { margin-left: -14px; margin-right: -14px; padding-left: 16px; padding-right: 14px; margin-bottom: -14px; }
.dexpod-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dexpod-section-actions .dexpod-btn-secondary:disabled { opacity: 1; color: var(--ds-text-muted, #6b7280); background: var(--dx-surface-band-soft, #f3f4f6); }
.dexpod-meta-toggle {
display: inline-flex; align-items: center; gap: 6px;
margin: 0 0 12px; padding: 4px 2px;
background: none; border: 0; cursor: pointer;
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--dx-interactive, #1d4ed8);
}
.dexpod-meta-toggle:hover span { text-decoration: underline; }
.dexpod-meta-toggle:focus-visible { outline: 2px solid var(--dx-focus-ring, #2563eb); outline-offset: 2px; border-radius: 3px; }
.dexpod-meta-toggle svg { transition: transform .15s ease; }
.dexpod-meta-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .dexpod-meta-toggle svg { transition: none; } }
.dexpod-meta-grid[hidden] { display: none; }
.dexpod-ar-slot:empty { display: none; }
.dxp-ar { margin: 0 0 16px; }
.dxp-ar-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.dxp-ar-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 13px; border-radius: 999px; border: 1px solid;
font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.dxp-ar-badge[aria-expanded="true"] { box-shadow: 0 0 0 2px currentColor inset; }
.dxp-ar-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dxp-ar-badge--ok { color: var(--dx-state-open-fg); background: var(--dx-state-open-bg); border-color: rgba(31,122,60,.3); }
.dxp-ar-badge--missing { color: var(--dx-state-closed-fg); background: var(--dx-state-closed-bg); border-color: rgba(179,38,30,.3); }
.dxp-ar-badge--unknown { color: var(--dx-text-muted); background: var(--dx-surface-band-soft); border-color: var(--dx-border); }
.dxp-ar-panel {
margin-top: 8px; padding: 10px 14px; border-radius: 10px;
background: var(--dx-surface-card); border: 1px solid var(--dx-border);
font-size: .82rem;
}
.dxp-ar-panel ul { list-style: none; margin: 0; padding: 0; }
.dxp-ar-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; }
.dxp-ar-mark { width: 14px; font-weight: 700; flex-shrink: 0; }
.dxp-ar-line--ok .dxp-ar-mark { color: var(--dx-state-open-fg); }
.dxp-ar-line--missing .dxp-ar-mark { color: var(--dx-state-closed-fg); }
.dxp-ar-line--unknown .dxp-ar-mark { color: var(--dx-text-muted); }
.dxp-ar-code { font-weight: 700; min-width: 22px; }
.dxp-ar-what { flex: 1 1 260px; min-width: 0; }
.dxp-ar-what code { font-size: .74rem; color: var(--dx-text-muted); }
.dxp-ar-note { color: var(--dx-text-muted); }
.dxp-ar-hint, .dxp-ar-foot { color: var(--dx-text-muted); margin: 6px 0 0; }
/* ── css/offers.css ── */
.policy-box--agreement {
border-color: var(--green, #059669);
box-shadow: 0 1px 3px rgba(5, 150, 105, 0.12);
}
.policy-item--agreement {
background: var(--green-pale, #ecfdf5);
border: 1px solid rgba(5, 150, 105, 0.20);
border-radius: var(--radius-sm, 6px);
padding: 12px 14px;
margin: 8px 0;
}
.policy-item--agreement,
.policy-item--agreement:last-child {
border-bottom: 1px solid rgba(5, 150, 105, 0.20);
}
.policy-item-id-val--agreement {
font-weight: 600;
color: var(--ds-text, #111827);
}
.policy-supplier-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: .75rem; font-weight: 600; color: #1A4FA0;
text-decoration: none;
margin-top: 6px;
}
.policy-supplier-link:hover { text-decoration: underline; }
.policy-supplier-link svg { flex-shrink: 0; }
.supplier-actions {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 10px; padding-top: 8px;
border-top: 1px dashed var(--gray-light, #E5E7EB);
}
.supplier-actions-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.78rem; font-weight: 600; color: var(--purple, #6E59E0);
text-decoration: none;
}
.supplier-actions-link:hover { text-decoration: underline; }
.supplier-actions-link svg { flex-shrink: 0; }
.my-offers-list { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.my-offers-card { cursor: pointer; }
.my-offers-offer-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 8px 0 0;
padding: 10px 12px;
background: var(--ds-table-head, #f9fafb);
border: 1px dashed var(--ds-border, #e5e7eb);
border-radius: 8px;
font-size: 0.88rem;
color: var(--ds-text, #111827);
}
.my-offers-offer-box > .my-offers-offer-row,
.my-offers-offer-box > .my-offers-rel-row {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.my-offers-offer-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.my-offers-offer-empty {
color: var(--ds-text-muted, #6b7280);
font-style: italic;
font-size: 0.86rem;
}
.my-offers-rel-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.my-offers-rel-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
}
.my-offers-rel-loading {
font-size: 0.84rem;
color: var(--ds-text-muted, #6b7280);
}
.my-offers-rel-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.82rem;
text-decoration: none;
border: 1px solid var(--ds-border, #e5e7eb);
}
a.my-offers-rel-chip.is-active {
background: var(--primary-pale2, #f5f2fd);
border-color: var(--primary-pale, #ede8f9);
color: var(--primary-dark, #3D2875);
}
a.my-offers-rel-chip.is-active:hover {
background: var(--primary-pale, #ede8f9);
}
.my-offers-rel-chip.is-zero {
color: var(--ds-text-muted, #9ca3af);
background: transparent;
}
.my-offers-rel-num { font-weight: 700; }
.my-offers-rel-key { font-weight: 500; }
.my-offers-offer-loading {
color: var(--ds-text-muted, #6b7280);
font-size: 0.86rem;
}
.my-offers-offer-pill {
display: inline-flex;
gap: 6px;
align-items: baseline;
padding: 4px 10px;
background: #fff;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 999px;
font-size: 0.82rem;
}
.my-offers-offer-key {
color: var(--ds-text-muted, #6b7280);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.72rem;
font-weight: 600;
}
.my-offers-offer-title {
color: var(--ds-text, #111827);
font-weight: 600;
}
.agreements-control--summary {
flex-direction: row !important;
align-items: baseline;
gap: 6px !important;
min-width: 0 !important;
}
.agreements-control--summary > strong { font-size: 1.1rem; color: var(--ds-text, #111827); }
.agreements-control--summary > span { color: var(--ds-text-muted, #6b7280); font-size: 0.92rem; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
body.jvw-open { overflow: hidden; }
.jvw-backdrop {
position: fixed; inset: 0;
background: rgba(15, 15, 35, 0.55);
display: flex; align-items: center; justify-content: center;
z-index: 1100;
padding: 24px;
}
.jvw-backdrop[hidden] { display: none; }
.jvw-modal {
width: 100%;
max-width: 880px;
max-height: 86vh;
display: flex; flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
overflow: hidden;
}
.jvw-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--ds-border, #e5e7eb);
background: var(--ds-table-head, #f9fafb);
}
.jvw-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--ds-text, #111827);
flex: 1 1 auto;
word-break: break-all;
}
.jvw-actions { display: flex; gap: 8px; align-items: center; }
.jvw-btn {
padding: 6px 12px;
font: inherit; font-size: 0.85rem; font-weight: 500;
border: 1px solid var(--ds-border, #d1d5db);
background: #fff;
color: var(--ds-text, #111827);
border-radius: 6px;
cursor: pointer;
}
.jvw-btn:hover { background: var(--primary-pale, #eef2ff); border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.jvw-btn:disabled { opacity: 0.6; cursor: default; }
.jvw-btn-icon { padding: 4px; line-height: 0; }
.jvw-body {
margin: 0;
padding: 18px 20px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.5;
color: var(--ds-text, #111827);
white-space: pre;
background: #fff;
}
.jvw-icon-btn {
display: inline-block;
padding: 0 2px;
margin-left: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7rem;
font-weight: 500;
line-height: 1;
color: var(--ds-text-muted, #6b7280);
background: transparent;
border: 0;
cursor: pointer;
vertical-align: middle;
white-space: nowrap;
}
.jvw-icon-btn:hover {
color: var(--primary, #4f46e5);
text-decoration: underline;
text-underline-offset: 2px;
}
.jvw-icon-btn:focus-visible {
outline: 2px solid var(--primary, #4f46e5);
outline-offset: 2px;
border-radius: 3px;
}
.jvw-cell { text-align: right; white-space: nowrap; }
.jvw-th { width: 1%; }
@media (max-width: 720px) {
.jvw-modal { max-height: 90vh; }
.jvw-body { font-size: 0.78rem; padding: 14px; }
}
body.offer-modal-open { overflow: hidden; }
.offer-modal-backdrop {
position: fixed; inset: 0;
background: rgba(15, 15, 35, 0.55);
display: flex; align-items: flex-start; justify-content: center;
z-index: 1100;
padding: 24px;
overflow-y: auto;
}
.offer-modal-backdrop[hidden] { display: none; }
.offer-modal-window {
width: 100%;
max-width: 760px;
max-height: 92vh;
display: flex; flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
overflow: hidden;
margin: auto;
}
.offer-modal-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--ds-border, #e5e7eb);
background: var(--ds-table-head, #f9fafb);
flex: 0 0 auto;
}
.offer-modal-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--ds-text, #111827);
flex: 1 1 auto;
}
.offer-modal-close-btn {
background: transparent;
border: 0;
color: var(--ds-text-muted, #6b7280);
padding: 6px;
line-height: 0;
border-radius: 6px;
cursor: pointer;
}
.offer-modal-close-btn:hover { background: var(--gray-light, #f1f1f5); color: var(--ds-text, #111827); }
.offer-modal-share-btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 1px solid var(--ds-border, #e5e7eb);
color: var(--ds-text-muted, #6b7280);
padding: 5px 10px;
font: inherit;
font-size: .82rem;
border-radius: 6px;
cursor: pointer;
flex: 0 0 auto;
}
.offer-modal-share-btn:hover {
background: var(--gray-light, #f1f1f5);
color: var(--ds-text, #111827);
}
.offer-modal-share-btn.is-copied {
color: var(--ds-success-text, #166534);
border-color: var(--ds-success-border, #bbf7d0);
background: var(--ds-success-bg, #f0fdf4);
}
@media (max-width: 560px) {
.offer-modal-share-btn .dl-copy-label { display: none; }
.offer-modal-share-btn { padding: 6px; }
}
.dl-overlay {
position: fixed; inset: 0;
z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: var(--ds-bg, #f8f9fb);
}
.dl-overlay-card {
display: flex; flex-direction: column; align-items: center; gap: 14px;
max-width: 30rem;
text-align: center;
color: var(--ds-text-muted, #6b7280);
}
.dl-overlay-card--error > svg { color: var(--ds-warn-text, #92400e); }
.dl-overlay-text {
margin: 0;
font-size: .95rem;
line-height: 1.5;
color: var(--ds-text, #111827);
}
.dl-overlay-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dl-overlay-btn {
background: #fff;
border: 1px solid var(--ds-border, #e5e7eb);
color: var(--ds-text, #111827);
padding: 8px 14px;
font: inherit;
font-size: .88rem;
border-radius: 6px;
cursor: pointer;
}
.dl-overlay-btn:hover { background: var(--gray-light, #f1f1f5); }
.dl-overlay-btn--primary {
background: var(--primary, #5C3FA5);
border-color: var(--primary, #5C3FA5);
color: #fff;
}
.dl-overlay-btn--primary:hover { background: var(--primary-dark, #3D2875); }
.offer-modal-body {
padding: 18px 20px 0;
overflow-y: auto;
flex: 1 1 auto;
}
.offer-modal-loading,
.offer-modal-error {
display: flex; align-items: center; gap: 10px;
padding: 32px 8px;
color: var(--ds-text-muted, #6b7280);
font-size: 0.95rem;
}
.offer-modal-error { color: #b91c1c; }
.offer-modal-error svg { flex-shrink: 0; }
.offer-modal-section {
margin-bottom: 18px;
}
.offer-modal-section-title {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
display: flex; align-items: center; gap: 8px;
}
.offer-modal-provider-card {
display: flex; align-items: center; gap: 16px;
padding: 12px 14px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
background: #fff;
}
.offer-modal-provider-main { flex: 1 1 auto; min-width: 0; }
.offer-modal-provider-name {
font-weight: 600;
font-size: 1rem;
color: var(--ds-text, #111827);
margin-bottom: 4px;
word-break: break-word;
}
.offer-modal-provider-badges {
display: flex; gap: 6px; flex-wrap: wrap;
}
.offer-modal-provider-actions { flex: 0 0 auto; }
.offer-modal-provider-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.85rem; font-weight: 500;
color: var(--primary, #4f46e5);
text-decoration: none;
padding: 6px 10px;
border: 1px solid var(--primary-pale, #eef2ff);
border-radius: 6px;
background: var(--primary-pale, #eef2ff);
}
.offer-modal-provider-link:hover {
background: #fff;
border-color: var(--primary, #4f46e5);
}
.offer-modal-resource-card {
cursor: default !important;
transform: none !important;
max-width: 100%;
overflow: hidden;
}
.offer-modal-resource-card:hover { box-shadow: none !important; }
.offer-modal-resource-card .basket-card-title {
white-space: normal;
overflow: visible;
text-overflow: clip;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.3;
}
.offer-modal-resource-card .basket-card-body {
align-items: flex-start;
}
.offer-modal-resource-card .basket-card-info { min-width: 0; }
.offer-modal-resource-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.78rem;
color: var(--ds-text-muted, #6b7280);
}
.offer-modal-basics {
margin: 0;
padding: 12px 14px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
background: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.offer-modal-basics-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
align-items: start;
}
.offer-modal-basics-row dt {
font-size: 0.78rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 2px;
}
.offer-modal-basics-row dd {
margin: 0;
font-size: 0.92rem;
color: var(--ds-text, #111827);
word-break: break-word;
}
.offer-modal-basics-label { font-weight: 600; }
.offer-modal-basics-purpose-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
background: var(--primary-pale, #eef2ff);
color: var(--primary, #4f46e5);
font-size: 0.82rem;
font-weight: 600;
line-height: 1.35;
}
.offer-modal-basics-dossier {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.offer-modal-basics-dossier code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
background: var(--gray-light, #f3f4f6);
padding: 3px 8px;
border-radius: 5px;
}
.offer-modal-basics-created {
font-size: 0.85rem;
display: inline-flex;
gap: 5px;
align-items: baseline;
}
.offer-modal-muted { color: var(--ds-text-muted, #6b7280); font-style: italic; font-size: 0.88rem; }
.offer-modal-status {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.offer-modal-status-approved { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.offer-modal-no-items { margin: 4px 0; }
.offer-modal-condition-heading {
background: var(--primary-pale, #eef2ff);
border-color: var(--primary-pale, #d1d5fa);
padding-left: 14px;
}
.offer-modal-condition-heading-title {
font-size: 0.98rem;
font-weight: 700;
color: var(--primary, #4f46e5);
}
.offer-modal-condition-audience {
background: var(--primary-pale, #eef2ff);
border-color: var(--primary-pale, #d1d5fa);
}
.offer-modal-condition-empty {
background: transparent;
border-color: transparent;
}
.offer-modal-condition-list {
list-style: none;
margin: 0;
padding: 0;
display: flex; flex-direction: column;
gap: 8px;
}
.offer-modal-condition {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 8px;
background: #fff;
}
.offer-modal-condition.is-active {
border-color: var(--primary-pale, #d1d5fa);
background: #fff;
}
.offer-modal-condition-icon {
flex: 0 0 24px;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--primary, #4f46e5);
}
.offer-modal-condition-icon img {
max-width: 22px; max-height: 22px; object-fit: contain;
}
.offer-modal-condition-icon-tick {
color: #047857;
background: #ecfdf5;
border-radius: 50%;
}
.offer-modal-condition-radio {
flex: 0 0 16px;
width: 16px; height: 16px;
border-radius: 50%;
border: 4px solid var(--primary, #4f46e5);
background: #fff;
box-shadow: inset 0 0 0 2px #fff;
}
.offer-modal-condition-label {
flex: 1 1 auto;
font-size: 0.92rem;
color: var(--ds-text, #111827);
display: flex; flex-direction: column; gap: 2px;
}
.offer-modal-condition-label strong { font-weight: 600; }
.offer-modal-condition-desc {
font-size: 0.82rem;
font-weight: 400;
color: var(--ds-text-muted, #6b7280);
}
.offer-modal-condition-tag {
display: inline-block;
flex: 0 0 auto;
white-space: nowrap;
font-size: 0.78rem;
font-weight: 600;
color: var(--primary, #4f46e5);
background: var(--primary-pale, #eef2ff);
padding: 3px 9px;
border-radius: 999px;
}
.offer-modal-condition-tag-off {
color: var(--ds-text-muted, #6b7280);
background: var(--gray-light, #f3f4f6);
}
.offer-modal-condition-value {
display: inline-flex; align-items: center;
flex: 0 0 auto;
font-size: 0.88rem;
color: var(--ds-text, #111827);
}
.offer-modal-condition-num {
font-weight: 600;
color: var(--ds-text, #111827);
}
.offer-modal-negotiation-intro {
margin: 14px 0 4px;
padding: 12px 14px;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ds-text, #111827);
background: var(--primary-pale, #eef2ff);
border: 1px solid var(--primary-pale, #d1d5fa);
border-radius: 8px;
}
.offer-modal-condition-premium {
display: inline-flex; align-items: center;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #d97706;
background: #fffbeb;
border: 1px solid #fde68a;
padding: 3px 8px;
border-radius: 999px;
}
.offer-modal-footer {
position: sticky;
bottom: 0;
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 0;
margin: 8px 0 0;
border-top: 1px solid var(--ds-border, #e5e7eb);
background: #fff;
}
.offer-modal-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
font: inherit; font-size: 0.92rem; font-weight: 600;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
}
.offer-modal-btn-secondary {
background: #fff;
color: var(--ds-text, #111827);
border-color: var(--ds-border, #d1d5db);
}
.offer-modal-btn-secondary:hover {
background: var(--gray-light, #f3f4f6);
}
.offer-modal-btn-primary {
background: var(--primary, #4f46e5);
color: #fff;
border-color: var(--primary, #4f46e5);
}
.offer-modal-btn-primary:hover {
filter: brightness(1.08);
}
.offer-modal-btn-primary--disabled,
.offer-modal-btn-primary:disabled {
background: var(--gray-light, #e5e7eb);
border-color: var(--gray-light, #e5e7eb);
color: var(--gray-mid, #9ca3af);
cursor: not-allowed;
filter: none;
}
.offer-modal-btn-primary--disabled:hover,
.offer-modal-btn-primary:disabled:hover {
background: var(--gray-light, #e5e7eb);
filter: none;
}
.offer-modal-login-warning {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 12px 0 0;
padding: 10px 12px;
background: #DAE9FC;
border: 1px dashed rgba(26, 79, 160, 0.45);
border-radius: var(--radius-sm, 6px);
color: #1A4FA0;
font-size: 0.85rem;
line-height: 1.45;
}
.offer-modal-login-warning svg {
flex-shrink: 0;
margin-top: 1px;
color: #1A4FA0;
}
.offer-modal-condition-tag-compliance {
color: #047857;
background: #ecfdf5;
border: 1px solid #a7f3d0;
}
.offer-modal-condition-tag-governance {
color: #b45309;
background: #fff7ed;
border: 1px solid #fed7aa;
}
.offer-modal-condition-heading-row {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
}
.offer-modal-condition-authority {
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ds-text-muted, #6b7280);
background: rgba(79, 70, 229, 0.08);
padding: 2px 7px;
border-radius: 999px;
}
.offer-modal-condition-check {
display: flex;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--primary-pale, #d1d5fa);
border-radius: 6px;
align-items: flex-start;
}
.offer-modal-condition-check-tag {
flex: 0 0 auto;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--primary, #4f46e5);
padding-top: 1px;
}
.offer-modal-condition-check-list {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.offer-modal-condition-check-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.offer-modal-condition-check-label {
font-size: 0.84rem;
font-weight: 700;
color: var(--ds-text, #111827);
}
.offer-modal-condition-check-desc {
font-size: 0.8rem;
font-weight: 400;
color: var(--ds-text-muted, #6b7280);
line-height: 1.45;
}
.my-offers-view-offer {
margin-left: 8px;
font-size: 0.82rem;
font-weight: 500;
color: var(--primary, #4f46e5);
text-decoration: none;
display: inline-flex; align-items: center; gap: 3px;
cursor: pointer;
}
.my-offers-view-offer:hover { text-decoration: underline; }
@media (max-width: 720px) {
.offer-modal-window { max-height: 96vh; }
.offer-modal-body { padding: 14px 14px 0; }
.offer-modal-basics-row { grid-template-columns: 1fr; gap: 2px; }
.offer-modal-provider-card { flex-direction: column; align-items: stretch; gap: 10px; }
.offer-modal-provider-actions { align-self: flex-end; }
}
.contract-modal-window { max-width: 480px; }
.cm-body { padding: 18px 20px 4px; }
.cm-provider {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-light, #E8E4F0);
}
.cm-provider-label {
font-size: .74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ds-text-muted, #6b7280);
}
.cm-provider-name {
font-size: .95rem;
font-weight: 700;
color: var(--ds-text, #111827);
}
.cm-intro {
margin: 0;
font-size: .92rem;
line-height: 1.6;
color: var(--ds-text, #111827);
}
.cm-subject {
margin-top: 14px;
padding: 9px 12px;
border-left: 3px solid var(--primary, #5C3FA5);
background: var(--primary-pale2, #F5F2FD);
border-radius: 0 var(--radius-xs, 5px) var(--radius-xs, 5px) 0;
}
.cm-subject-offer {
font-size: .9rem;
font-weight: 700;
color: var(--primary-dark, #3D2875);
}
.cm-subject-res {
margin-top: 2px;
font-size: .82rem;
color: var(--ds-text-muted, #6b7280);
}
.cm-warn {
margin: 14px 0 0;
padding: 9px 12px;
border: 1px dashed #93b4e0;
border-radius: var(--radius-xs, 5px);
background: #f3f8ff;
font-size: .84rem;
color: #1A4FA0;
}
.cm-section-title { margin-bottom: 12px; }
.cm-warn--self {
margin: 0 0 14px;
border-style: solid;
border-color: rgba(230, 81, 0, .3);
background: var(--amber-pale, #fff8f0);
color: #c05621;
font-weight: 600;
}
.cm-busy {
display: flex;
align-items: center;
gap: 10px;
padding: 30px 20px;
font-size: .9rem;
color: var(--ds-text-muted, #6b7280);
}
.cm-result {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 20px 6px;
}
.cm-result-icon { flex-shrink: 0; margin-top: 1px; }
.cm-result--ok .cm-result-icon { color: var(--green, #2E7D32); }
.cm-result--error .cm-result-icon { color: #b91c1c; }
.cm-result-text { min-width: 0; }
.cm-result-title {
font-size: .98rem;
font-weight: 700;
color: var(--ds-text, #111827);
}
.cm-result-sub {
margin: 4px 0 0;
font-size: .88rem;
line-height: 1.55;
color: var(--ds-text-muted, #6b7280);
}
.cm-instance {
margin: 10px 0 0;
font-size: .76rem;
color: var(--ds-text-muted, #6b7280);
}
.cm-instance code {
font-size: .74rem;
padding: 1px 5px;
border-radius: 4px;
background: var(--gray-pale, #f4f4f7);
word-break: break-all;
}
.clearing-status-window { max-width: 620px; }
.csm-body { padding: 18px 20px 4px; }
.csm-headline { margin: 0 0 14px; }
.csm-headline-kick {
font-size: .6rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--gray-mid); margin-bottom: 3px;
}
.csm-headline-state {
display: flex; align-items: baseline; gap: 10px;
margin-top: 5px; min-width: 0;
}
.csm-headline-state .csm-headline-id { margin-top: 0; min-width: 0; }
.csm-headline-title {
margin: 0; font-family: var(--font-head);
font-size: 1.08rem; font-weight: 700; line-height: 1.3;
color: var(--dark);
}
.csm-headline-id {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: .72rem; color: var(--gray);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csm-top {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
column-gap: 20px; row-gap: 10px; align-items: start;
margin-bottom: 16px;
}
.csm-parties { grid-column: 1; grid-row: 1; min-width: 0; }
.csm-top > .csm-action { grid-column: 2; grid-row: 1; }
.csm-top > .csm-dates { grid-column: 1 / -1; grid-row: 2; }
.csm-parties-kick, .csm-conditions-kick {
font-size: .6rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--gray-mid); margin-bottom: 6px;
}
.csm-party {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
padding: 2px 0;
}
.csm-party-role {
min-width: 68px; font-size: .72rem; color: var(--gray);
}
.csm-party-name { font-size: .88rem; font-weight: 600; color: var(--dark2); }
.csm-party-self {
font-size: .68rem; color: var(--gray-mid);
border: 1px solid var(--gray-light); border-radius: 999px; padding: 0 6px;
}
.csm-party-more { font-size: .72rem; }
.csm-dates {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
font-size: .74rem; color: var(--gray);
}
.csm-dates-kick { font-weight: 600; color: var(--gray-mid); }
.csm-action {
flex: 0 0 auto; display: flex; flex-direction: column;
align-items: flex-end; gap: 6px;
}
.csm-action-state { display: flex; align-items: center; gap: 8px; }
.csm-conditions {
margin-bottom: 16px; padding: 10px 14px 0;
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
background: var(--gray-pale);
overflow: hidden;
}
.csm-conditions > :last-child { margin-bottom: 0; }
.csm-conditions .amdex-slot { margin: 12px -14px 0; }
.csm-conditions .amdex-slot:empty { display: none; }
.csm-policy-head {
display: flex; align-items: baseline; gap: 10px;
margin: 10px 0 4px; min-width: 0;
}
.csm-policy-head .csm-policy-name {
font-size: .82rem; font-weight: 600; color: var(--dark2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csm-policy-state {
flex-shrink: 0; font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
}
.csm-policy-state--ok { color: var(--dx-state-open-fg, #1F7A3C); }
.csm-policy-state--wait { color: var(--dx-state-request-fg, #AD5500); }
.csm-policy-state--stop { color: var(--dx-state-closed-fg, #B3352C); }
.csm-intro {
margin: 0 0 16px;
font-size: .88rem;
line-height: 1.6;
color: var(--ds-text-muted, #6b7280);
}
.csm-busy {
display: flex; align-items: center; gap: 10px;
padding: 34px 20px;
font-size: .9rem;
color: var(--ds-text-muted, #6b7280);
}
.csm-error {
display: flex; align-items: flex-start; gap: 11px;
padding: 22px 20px 8px;
font-size: .89rem;
line-height: 1.55;
color: #b91c1c;
}
.csm-error svg { flex-shrink: 0; margin-top: 1px; }
.csm-facts-head { margin: 0 0 14px; }
.csm-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: 10px;
padding: 5px 0;
border-bottom: 1px solid var(--gray-light, #E8E4F0);
}
.csm-row:last-child { border-bottom: 0; }
.csm-row dt {
font-size: .78rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
padding-top: 1px;
}
.csm-row dd {
margin: 0;
font-size: .88rem;
font-weight: 600;
color: var(--ds-text, #111827);
word-break: break-word;
}
.csm-muted { color: var(--ds-text-muted, #6b7280); font-weight: 400; font-style: italic; }
.csm-status-block {
display: block;
padding: 12px 14px;
border-radius: var(--radius-sm, 8px);
background: var(--gray-pale, #F4F2F8);
}
.csm-status-head { display: flex; align-items: center; gap: 10px; }
.csm-status-head .csm-status-toggle { flex: 1 1 auto; }
.csm-status-refresh {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
font-family: inherit; font-size: .78rem; font-weight: 600;
color: #1A4FA0; background: #fff;
border: 1.5px solid #1A4FA0; border-radius: 20px;
cursor: pointer;
}
.csm-status-refresh:hover { background: #EDF3FC; }
.csm-status-refresh:focus-visible { outline: 2px solid #1A4FA0; outline-offset: 2px; }
.csm-status-label {
font-size: .78rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
}
.csm-status-badge { font-size: .8rem; }
.csm-status-dates {
display: flex;
flex-wrap: wrap;
gap: 2px 14px;
width: 100%;
font-size: .74rem;
color: var(--ds-text-muted, #6b7280);
}
.csm-live {
width: 100%;
margin: 0;
font-size: .73rem;
font-style: italic;
color: var(--ds-text-muted, #6b7280);
}
.csm-live--stopped { font-style: normal; color: #8a6100; }
.csm-refresh-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.csm-refresh-row .csm-live { width: auto; }
.csm-section { margin-top: 18px; }
.csm-section-title {
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
margin-bottom: 8px;
}
.csm-empty {
margin: 0;
font-size: .85rem;
line-height: 1.55;
color: var(--ds-text-muted, #6b7280);
}
.csm-facts { list-style: none; margin: 0; padding: 0; }
.csm-fact {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 0;
border-bottom: 1px solid var(--gray-light, #E8E4F0);
font-size: .85rem;
}
.csm-fact:last-child { border-bottom: 0; }
.csm-fact-icon { flex-shrink: 0; line-height: 0; margin-top: 2px; }
.csm-fact-label { flex: 1 1 auto; min-width: 0; color: var(--ds-text, #111827); word-break: break-word; }
.csm-fact-verdict {
flex-shrink: 0;
font-size: .74rem;
font-weight: 700;
padding-top: 1px;
}
.csm-fact--ok .csm-fact-icon, .csm-fact--ok .csm-fact-verdict { color: var(--green, #2E7D32); }
.csm-fact--warn .csm-fact-icon, .csm-fact--warn .csm-fact-verdict { color: #b91c1c; }
.csm-fact--pending .csm-fact-icon, .csm-fact--pending .csm-fact-verdict { color: #b06f00; }
.csm-fact--neutral .csm-fact-icon, .csm-fact--neutral .csm-fact-verdict { color: var(--gray, #6b7280); }
.csm-facts-hint {
margin: 0 0 10px; font-size: .8rem; color: var(--gray, #6b7280); line-height: 1.45;
}
.csm-fact-supply {
flex-shrink: 0; margin-left: 4px;
background: none; cursor: pointer;
border: 1px solid var(--primary, #1A4FA0);
color: var(--primary, #1A4FA0);
border-radius: 999px; padding: 3px 12px;
font-family: inherit; font-size: .72rem; font-weight: 700;
letter-spacing: .02em; text-transform: uppercase;
transition: background var(--tr, .15s), color var(--tr, .15s);
}
.csm-fact-supply:hover { background: var(--primary, #1A4FA0); color: var(--white, #fff); }
.csm-fact-supply:focus-visible { outline: 2px solid var(--primary, #1A4FA0); outline-offset: 2px; }
.csm-supply { padding: 2px 0; }
.csm-supply-lead {
margin: 0 0 20px; font-size: .88rem; line-height: 1.55;
color: var(--gray, #6b7280);
}
.csm-supply-group { border: 0; margin: 0 0 20px; padding: 0; }
.csm-supply-group:last-child { margin-bottom: 0; }
.csm-supply-legend {
display: block; padding: 0; margin: 0 0 8px;
font-size: .72rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--gray, #6b7280);
}
.csm-supply-optional { font-weight: 600; text-transform: none; letter-spacing: 0; }
.csm-supply-opt {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; margin: 0 0 8px;
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
cursor: pointer; background: var(--white, #fff);
transition: border-color var(--tr, .15s), background var(--tr, .15s);
}
.csm-supply-opt:last-child { margin-bottom: 0; }
.csm-supply-opt:hover { border-color: var(--primary, #1A4FA0); }
.csm-supply-opt input[type="radio"] {
accent-color: var(--primary, #1A4FA0);
margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px;
}
.csm-supply-opt:has(input:checked) {
border-color: var(--primary, #1A4FA0);
background: var(--primary-pale2, #F1F4F9);
}
.csm-supply-opt:focus-within { outline: 2px solid var(--primary, #1A4FA0); outline-offset: 1px; }
.csm-supply-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csm-supply-opt-label {
font-size: .88rem; font-weight: 600; color: var(--ds-text, #111827); line-height: 1.4;
}
.csm-supply-opt-hint {
font-size: .78rem; color: var(--gray, #6b7280); line-height: 1.45;
}
.csm-supply-date {
display: block; font-family: inherit; font-size: .88rem;
padding: 9px 12px; border-radius: var(--radius-sm, 8px);
border: 1px solid var(--gray-light, #E8E4F0); background: var(--white, #fff);
color: var(--ds-text, #111827);
}
.csm-supply-date:focus { border-color: var(--primary, #1A4FA0); outline: none; }
.csm-supply-hint {
margin: 6px 0 0; font-size: .78rem; color: var(--gray, #6b7280);
}
.agm-resources { list-style: none; margin: 0; padding: 0; }
.agm-resource {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--gray-light, #E8E4F0);
color: var(--ds-text-muted, #6b7280);
}
.agm-resource:last-child { border-bottom: 0; }
.agm-resource svg { flex-shrink: 0; }
.agm-resource-link {
font-size: .88rem;
font-weight: 600;
color: var(--primary, #5C3FA5);
text-decoration: none;
word-break: break-word;
}
.agm-resource-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.amdex-slot:empty { display: none; }
.amdex-row {
margin-top: 10px;
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
overflow: hidden;
}
.amdex-toggle {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 12px;
border: 0;
background: none;
font-family: inherit;
font-size: .82rem;
text-align: left;
cursor: pointer;
color: var(--ds-text, #111827);
}
.amdex-icon { flex-shrink: 0; line-height: 0; }
.amdex-head { flex: 1 1 auto; min-width: 0; }
.amdex-dossier-status { font-weight: 700; }
.amdex-caret {
flex-shrink: 0;
line-height: 0;
color: var(--ds-text-muted, #6b7280);
transition: transform var(--tr);
}
.amdex-toggle[aria-expanded="true"] .amdex-caret { transform: rotate(180deg); }
.amdex-row--ok { background: var(--green-pale, #E8F5E9); border-color: #bfe0c4; }
.amdex-row--ok .amdex-icon { color: var(--green, #2E7D32); }
.amdex-row--pending { background: #fdf7e8; border-color: #ecdcb4; }
.amdex-row--pending .amdex-icon { color: #b06f00; }
.amdex-row--fail { background: #fdecec; border-color: #f2c4c4; }
.amdex-row--fail .amdex-icon { color: #b91c1c; }
.amdex-detail {
padding: 2px 12px 11px;
border-top: 1px solid rgba(0, 0, 0, .06);
background: rgba(255, 255, 255, .55);
}
.amdex-clear {
margin: 9px 0 0;
font-size: .81rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.amdex-section { margin-top: 10px; }
.amdex-section-title {
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
margin-bottom: 3px;
}
.amdex-list {
margin: 0;
padding-left: 17px;
font-size: .81rem;
line-height: 1.5;
color: var(--ds-text, #111827);
}
.amdex-list li { padding: 1px 0; word-break: break-word; }
.amdex-type { color: var(--ds-text-muted, #6b7280); }
.agm-resource-raw {
font-size: .8rem;
color: var(--ds-text-muted, #6b7280);
word-break: break-all;
}
.agm-resource-sub {
display: block;
width: 100%;
padding-left: 21px;
font-size: .72rem;
color: var(--ds-text-muted, #6b7280);
}
.agm-resource { flex-wrap: wrap; }
.offer-compare-backdrop .offer-modal-window {
max-width: 1020px;
max-height: 96vh;
min-height: min(680px, 96vh);
}
.offer-compare-backdrop .offer-modal-body {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.offer-compare-backdrop .offer-modal-footer { flex: 0 0 auto; }
.omx { display: flex; align-items: stretch; min-height: 0; flex: 1 1 auto; }
.omx-main {
flex: 1 1 65%;
min-width: 0;
padding: 16px 18px 18px;
overflow-y: auto;
}
.omx-summary {
flex: 0 0 50%;
min-width: 0;
border-left: 1px solid var(--ds-border, #e5e7eb);
background: var(--gray-pale, #F4F2F8);
display: flex;
flex-direction: column;
}
.omx-summary-inner { display: flex; flex-direction: column; min-height: 0; }
.omx-summary-title {
margin: 0;
padding: 14px 16px 8px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
}
.omx-summary-provider {
text-transform: none;
letter-spacing: 0;
font-size: .82rem;
color: var(--ds-text, #111827);
}
.omx-summary-offer {
margin: 0;
padding: 0 16px 10px;
font-size: .92rem;
font-weight: 700;
color: var(--ds-text, #111827);
}
.omx-summary-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px; }
.omx-summary-scroll .offer-modal-section { margin-bottom: 14px; }
.omx-summary-actions {
flex: 0 0 auto;
padding: 0 16px 16px;
}
.omx-summary-intro {
flex: 0 0 auto;
margin: 12px 0 10px;
padding: 0 16px;
font-size: .8rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.omx-summary-actions { display: flex; align-items: center; gap: 10px; }
.omx-summary-actions .offer-modal-btn { justify-content: center; }
.omx-summary-actions .offer-modal-btn-secondary { flex: 0 0 auto; }
.omx-summary-actions .offer-modal-btn-primary { flex: 1 1 auto; }
.omx-cards-head { margin: 14px 0 8px; }
.omx-count {
display: inline-block;
padding: 1px 7px;
border-radius: 20px;
background: var(--primary-pale2, #F5F2FD);
color: var(--primary-dark, #3D2875);
font-size: .7rem;
font-weight: 700;
}
.omx-pick-hint {
margin: 3px 0 0;
font-size: .78rem;
color: var(--ds-text-muted, #6b7280);
}
.omx-cards { display: flex; flex-direction: column; gap: 8px; }
.omx-card {
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
background: var(--white, #fff);
padding: 10px 12px;
transition: border-color var(--tr), box-shadow var(--tr);
}
.omx-card.is-selected {
border-color: var(--primary, #5C3FA5);
background: var(--primary-pale2, #F5F2FD);
}
.omx-radio {
position: absolute;
top: 10px; right: 12px;
width: 15px; height: 15px;
border: 2px solid var(--gray-mid, #9AA3AF);
border-radius: 50%;
transition: border-color var(--tr), box-shadow var(--tr);
}
.omx-card.is-selected .omx-radio {
border-color: var(--primary, #5C3FA5);
box-shadow: inset 0 0 0 3px var(--white, #fff), inset 0 0 0 9px var(--primary, #5C3FA5);
}
.omx-card { cursor: pointer; }
.omx-card[role="radio"]:focus-visible {
outline: 2px solid var(--primary, #5C3FA5);
outline-offset: 2px;
}
.omx-card .ovc-head { padding-right: 30px; }
.omx-card-title {
min-width: 0;
font-size: .84rem;
font-weight: 600;
color: var(--ds-text, #111827);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.omx-expand {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px;
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-xs, 5px);
background: var(--white, #fff);
font-family: inherit;
font-size: .72rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
cursor: pointer;
}
.omx-expand:hover { border-color: var(--primary, #5C3FA5); color: var(--primary, #5C3FA5); }
.omx-expand svg { transition: transform var(--tr); }
.omx-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.omx-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin-top: 7px;
}
.omx-card-detail {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--gray-light, #E8E4F0);
}
.omx-detail-list { margin: 0; }
.omx-detail-row {
display: grid;
grid-template-columns: 34% 1fr;
gap: 10px;
padding: 4px 0;
}
.omx-detail-row dt {
font-size: .74rem;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
}
.omx-detail-row dd {
margin: 0;
font-size: .82rem;
color: var(--ds-text, #111827);
min-width: 0;
word-break: break-word;
}
.omx-dist-list { list-style: disc; margin: 0; padding-left: 16px; }
.omx-dist-list li { padding: 1px 0; }
.omx-scope {
display: inline-block;
padding: 1px 7px;
border-radius: 4px;
font-size: .74rem;
font-weight: 700;
}
.omx-scope--all { background: var(--green-pale, #E8F5E9); color: var(--green, #2E7D32); }
.omx-scope--some { background: #fdf3e0; color: #8a6100; }
.omx-scope--unknown { background: var(--gray-pale, #F4F2F8); color: var(--gray, #6B7A8D); }
.omx-dossier-date { display: block; margin-top: 2px; font-size: .74rem; color: var(--ds-text-muted, #6b7280); }
.cm-result-detail {
margin: 9px 0 0;
font-size: .74rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.cm-detail-label { font-weight: 600; }
.cm-result-detail code {
font-size: .72rem;
padding: 1px 5px;
border-radius: 4px;
background: var(--gray-pale, #f4f4f7);
word-break: break-word;
}
@media (max-width: 900px) {
.omx { flex-direction: column-reverse; }
.omx-summary {
flex: 0 0 auto;
border-left: 0;
border-bottom: 1px solid var(--ds-border, #e5e7eb);
}
.omx-summary-scroll { overflow: visible; }
.omx-main { flex: 1 1 auto; padding-top: 12px; }
.offer-compare-backdrop .offer-modal-body { overflow-y: auto; display: block; }
.omx-main { overflow: visible; }
.omx-card.is-selected { order: -1; }
.omx-cards { display: flex; }
}
.omx-summary-scroll { overflow-x: hidden; }
.omx-summary-offer { word-break: break-word; }
.omx-summary-scroll .offer-modal-section-title { word-break: break-word; }
.omx-summary-scroll .offer-modal-condition {
flex-wrap: wrap;
align-items: flex-start;
row-gap: 4px;
}
.omx-summary-scroll .offer-modal-condition-label,
.omx-summary-scroll .offer-modal-condition-heading-title {
min-width: 0;
word-break: break-word;
}
.omx-summary-scroll .offer-modal-condition-value {
flex: 1 0 100%;
margin-left: 26px;
text-align: left;
}
.omx-summary-scroll .offer-modal-condition-tag,
.omx-summary-scroll .offer-modal-condition-authority,
.omx-summary-scroll .offer-modal-condition-check-tag {
white-space: normal;
word-break: break-word;
max-width: 100%;
}
.omx-summary-scroll .offer-modal-condition-heading-row { flex-wrap: wrap; row-gap: 4px; }
.omx-summary-scroll .offer-modal-condition-check-row { flex-wrap: wrap; }
.omx-summary-scroll .offer-modal-condition-icon img { max-width: 100%; height: auto; }
.agm-all-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
font-size: .82rem;
font-weight: 600;
color: var(--primary, #5C3FA5);
text-decoration: none;
}
.agm-all-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.agm-all-link svg { flex-shrink: 0; }
.omx-card.is-selected .ovc-chip { background: var(--white, #fff); }
.amdex-view {
flex-shrink: 0;
font-size: .76rem;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
opacity: .85;
}
.amdex-head-list {
margin: 0 0 4px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.amdex-head-row {
display: block;
padding: 4px 0 8px;
font-size: .8rem;
}
.amdex-head-row dt {
font-weight: 600; color: var(--ds-text-muted, #6b7280);
font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
margin-bottom: 3px;
}
.amdex-head-row dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.amdex-nr {
font-size: .74rem;
padding: 1px 5px;
border-radius: 4px;
background: rgba(255, 255, 255, .8);
word-break: break-all;
user-select: all;
-webkit-user-select: all;
}
.amdex-copy {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
padding: 0; border: 0;
border-radius: var(--radius-xs, 5px);
background: transparent;
color: var(--ds-text-muted, #6b7280);
cursor: pointer;
}
.amdex-copy:hover { background: rgba(255, 255, 255, .9); color: var(--primary, #5C3FA5); }
.amdex-copy--copied { color: var(--green, #2E7D32); }
.amdex-copied { font-size: .72rem; font-weight: 600; color: var(--green, #2E7D32); }
.agreements-target-part {
display: inline-block; margin-left: 6px;
padding: 1px 6px; border-radius: 999px;
background: var(--gray-pale, #F4F2F8);
color: var(--ds-text-muted, #6b7280);
font-size: .68rem; font-weight: 600;
letter-spacing: .03em; text-transform: uppercase;
vertical-align: 1px;
}
.csm-policy + .csm-policy { margin-top: 14px; }
.csm-policy-name {
margin: 0 0 2px;
font-size: .78rem; font-weight: 700;
color: var(--ds-text, #111827);
word-break: break-all;
}
.csm-policy-name--named { word-break: normal; }
.csm-status-toggle {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
width: 100%; padding: 0; border: 0; background: none;
font: inherit; text-align: left; cursor: pointer;
}
.csm-status-sentence {
font-size: .8rem; font-weight: 600; color: var(--ds-text, #111827);
}
.csm-status-caret {
margin-left: auto; line-height: 0;
color: var(--ds-text-muted, #6b7280);
transition: transform var(--tr, .15s);
}
.csm-status-toggle[aria-expanded="true"] .csm-status-caret { transform: rotate(180deg); }
.csm-status-toggle:focus-visible { outline: 2px solid var(--primary, #5C3FA5); outline-offset: 3px; }
.csm-status-detail { margin-top: 10px; }
.csm-section-toggle {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
width: 100%; padding: 0; border: 0; background: none;
font: inherit; text-align: left; cursor: pointer;
}
.csm-section-toggle .csm-section-title { margin-bottom: 0; }
.csm-section-summary {
font-size: .78rem; font-weight: 600;
color: var(--ds-text-muted, #6b7280);
}
.csm-section-toggle .csm-status-caret { align-self: center; }
.csm-section-toggle[aria-expanded="true"] .csm-status-caret { transform: rotate(180deg); }
.csm-section-toggle:focus-visible { outline: 2px solid var(--primary, #5C3FA5); outline-offset: 3px; }
.csm-section-detail { margin-top: 8px; }
.csm-raw {
display: flex;
align-items: center;
gap: 7px;
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid var(--gray-light, #E8E4F0);
font-size: .74rem;
color: var(--ds-text-muted, #6b7280);
}
.cm-overview-link {
margin-right: auto;
font-size: .82rem;
font-weight: 600;
color: var(--primary, #5C3FA5);
text-decoration: none;
}
.cm-overview-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm-resource-link { margin: 8px 0 0; font-size: .86rem; }
.cm-resource-link a { color: var(--primary, #5C3FA5); font-weight: 600; text-decoration: none; }
.cm-resource-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm-status-note { margin: 8px 0 0; font-size: .82rem; color: var(--ds-text-muted, #6b7280); }
.policy-box--negotiating {
border-color: #d19a00;
box-shadow: 0 1px 3px rgba(209, 154, 0, .14);
}
.policy-item--negotiating {
background: #fdf7e8;
border: 1px solid rgba(209, 154, 0, .28);
border-radius: var(--radius-sm, 6px);
padding: 12px 14px;
margin: 8px 0;
}
.policy-item--negotiating,
.policy-item--negotiating:last-child { border-bottom: 1px solid rgba(209, 154, 0, .28); }
.policy-item-id-val--negotiating { font-weight: 600; color: var(--ds-text, #111827); }
.policy-negotiation-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 9px;
padding: 6px 12px;
border: 1.5px solid #b06f00;
border-radius: var(--radius-xs, 5px);
background: var(--white, #fff);
color: #8a6100;
font-family: inherit;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: background var(--tr), color var(--tr);
}
.policy-negotiation-view-btn:hover { background: #b06f00; color: var(--white, #fff); }
.policy-negotiation-view-btn:focus-visible { outline: 2px solid #b06f00; outline-offset: 2px; }
.offer-modal-btn-danger {
background: var(--white, #fff);
border: 1.5px solid #b91c1c;
color: #b91c1c;
}
.offer-modal-btn-danger:hover { background: #fdecec; }
.offer-modal-btn-danger:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; }
.csm-push { margin-left: auto; }
.csm-confirm { padding: 20px 20px 6px; }
.csm-confirm-title {
font-size: 1rem;
font-weight: 700;
color: var(--ds-text, #111827);
}
.csm-confirm-sub {
margin: 6px 0 0;
font-size: .88rem;
line-height: 1.55;
color: var(--ds-text-muted, #6b7280);
}
.csm-error-detail {
display: block;
margin-top: 4px;
font-size: .72rem;
color: var(--ds-text-muted, #6b7280);
}
.agm-evidence { list-style: none; margin: 0; padding: 0; }
.agm-evidence-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid var(--gray-light, #E8E4F0);
}
.agm-evidence-row:last-child { border-bottom: 0; }
.agm-evidence-main { flex: 1 1 auto; min-width: 0; }
.agm-evidence-fact {
display: block;
font-size: .85rem;
font-weight: 600;
color: var(--ds-text, #111827);
word-break: break-word;
}
.agm-evidence-meta { font-size: .74rem; color: var(--ds-text-muted, #6b7280); }
.agm-evidence-revoke {
flex-shrink: 0;
padding: 4px 10px;
border: 1.5px solid #b91c1c;
border-radius: var(--radius-xs, 5px);
background: var(--white, #fff);
color: #b91c1c;
font-family: inherit;
font-size: .76rem;
font-weight: 600;
cursor: pointer;
}
.agm-evidence-revoke:hover { background: #fdecec; }
.agm-evidence-revoke[disabled] { opacity: .6; cursor: default; }
.agm-evidence-row.is-revoked .agm-evidence-fact { text-decoration: line-through; opacity: .7; }
.agm-evidence-done { font-size: .74rem; font-weight: 700; color: var(--ds-text-muted, #6b7280); }
.agm-evidence-error { flex: 1 0 100%; font-size: .74rem; color: #b91c1c; }
.agm-ar-step {
padding: 10px 12px;
border: 1px dashed var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
background: var(--gray-pale, #F4F2F8);
}
.agm-ar-step p {
margin: 0 0 9px;
font-size: .81rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.omx-owner-actions {
margin-top: 10px;
padding-top: 9px;
border-top: 1px dashed var(--gray-light, #E8E4F0);
}
.omx-withdraw-offer {
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: .78rem;
font-weight: 600;
color: #b91c1c;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.omx-withdraw-confirm p {
margin: 0 0 8px;
font-size: .78rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.omx-withdraw-row { display: flex; gap: 8px; }
.omx-withdraw-cancel,
.omx-withdraw-go {
padding: 4px 10px;
border-radius: var(--radius-xs, 5px);
font-family: inherit;
font-size: .76rem;
font-weight: 600;
cursor: pointer;
}
.omx-withdraw-cancel {
border: 1.5px solid var(--gray-light, #E8E4F0);
background: var(--white, #fff);
color: var(--ds-text, #111827);
}
.omx-withdraw-go {
border: 1.5px solid #b91c1c;
background: var(--white, #fff);
color: #b91c1c;
}
.omx-withdraw-go:hover { background: #fdecec; }
.omx-withdraw-busy { font-size: .78rem; color: var(--ds-text-muted, #6b7280); }
.omx-withdraw-error { font-size: .78rem; color: #b91c1c; }
.omx-subject { margin-bottom: 4px; }
.omx-subject-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 7px 12px;
margin: 0;
padding: 11px 13px;
background: var(--white, #fff);
border: 1px solid var(--dx-border, #E5DFD5);
border-radius: var(--radius-sm, 8px);
}
.omx-subject-row { display: contents; }
.omx-subject-row dt {
grid-column: 1;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
padding-top: 2px;
white-space: nowrap;
}
.omx-subject-row dd {
grid-column: 2;
min-width: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
}
.omx-subject-val {
min-width: 0;
font-size: .86rem;
font-weight: 600;
color: var(--ds-text, #111827);
word-break: break-word;
}
.omx-subject-title { font-size: .95rem; }
.omx-subject-profile {
font-size: .78rem;
font-weight: 600;
color: var(--dx-brand, #1A4FA0);
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.omx-subject-profile:hover { text-decoration: none; }
.omx-subject-dist-select {
max-width: 100%;
padding: 5px 9px;
font-family: inherit;
font-size: .84rem;
font-weight: 600;
color: var(--ds-text, #111827);
background: var(--white, #fff);
border: 1px solid var(--dx-line-control, #8B7E64);
border-radius: var(--radius-xs, 5px);
cursor: pointer;
}
.omx-subject-dist-select:focus-visible {
outline: 2px solid var(--dx-brand, #1A4FA0);
outline-offset: 1px;
}
.omx-dist-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
margin: 7px 0 0;
min-width: 0;
}
.omx-dist-filter-lbl {
font-size: .78rem;
font-weight: 600;
color: var(--dx-text-on-work, #4B5860);
}
.omx-dist-filter .omx-subject-dist-select {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
text-overflow: ellipsis;
}
.omx-filter-note {
margin: 5px 0 0;
font-size: .78rem;
color: var(--dx-text-on-work, #4B5860);
}
.omx-filter-clear {
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: .78rem;
font-weight: 600;
color: var(--dx-brand, #1A4FA0);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.omx-filter-clear:hover { text-decoration: none; }
.omx-actions-facts {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex-wrap: wrap;
}
.omx-dmi-ok {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .72rem;
font-weight: 600;
color: #2f855a;
white-space: nowrap;
}
.omx-cond-boxes { display: flex; flex-direction: column; gap: 10px; }
.omx-cond-box {
border: 1px solid var(--gray-light, #E3E8EF);
border-radius: var(--radius-sm, 6px);
background: var(--white, #fff);
padding: 10px 12px;
}
.omx-cond-box-head {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin-bottom: 6px;
}
.omx-cond-box-title {
font-size: .84rem; font-weight: 700; color: var(--primary-dark, #1A4FA0);
line-height: 1.3;
}
.omx-cond-box-authority {
font-size: .7rem; color: var(--gray, #6B7A8D);
}
.omx-cond-box-common {
display: inline-flex; align-items: center;
padding: 1px 8px; border-radius: 999px;
background: var(--green-pale, #E8F5E9); color: #1F6B2B; border: 1px solid #A5D6A7;
font-size: .66rem; font-weight: 700; letter-spacing: .02em;
}
.omx-cond-rows { padding-left: 4px; }
.omx-cond-row {
position: relative;
display: flex; align-items: baseline; gap: 6px;
padding: 2px 0 2px 16px;
font-size: .78rem; line-height: 1.45;
}
.omx-cond-row::before {
content: '';
position: absolute;
left: 3px; top: 0; bottom: 50%;
width: 8px;
border-left: 1px solid var(--gray-light, #E3E8EF);
border-bottom: 1px solid var(--gray-light, #E3E8EF);
border-bottom-left-radius: 4px;
}
.omx-cond-key { color: var(--gray, #6B7A8D); }
.omx-cond-eq { color: var(--gray-light, #C6CFDB); }
.omx-cond-val { font-weight: 600; color: var(--dark2, #140F2A); }
.omx-cond-val .offer-modal-condition-tag,
.omx-cond-val .offer-modal-condition-num { font-size: .78rem; }
.omx-cond-check {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 7px; padding-top: 6px;
border-top: 1px dashed var(--gray-light, #E3E8EF);
font-size: .74rem;
}
.omx-cond-check-tag {
font-weight: 700; color: var(--gray, #6B7A8D);
text-transform: uppercase; letter-spacing: .04em; font-size: .68rem;
}
.omx-cond-check-names { color: var(--dark2, #140F2A); }
.omx-cond-empty { font-size: .8rem; margin: 0; }
.omx-detail-title {
margin: 0 0 8px;
font-size: .92rem;
font-weight: 700;
line-height: 1.35;
color: var(--ds-text, #111827);
}
.omx-detail-title--none { font-weight: 500; color: var(--ds-text-muted, #6b7280); }
.omx-summary-facts {
list-style: none;
margin: 0;
padding: 0 16px 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.omx-summary-facts li {
position: relative;
padding-left: 11px;
font-size: .78rem;
line-height: 1.45;
}
.omx-summary-facts li::before {
content: '';
position: absolute;
left: 0; top: .5em;
width: 4px; height: 4px; border-radius: 50%;
background: var(--ds-text-muted, #6b7280);
}
.omx-fact-key { color: var(--ds-text-muted, #6b7280); }
.omx-fact-val { font-weight: 600; color: var(--ds-text, #111827); }
.omx-fact-ok {
display: inline-flex; align-items: center; gap: 4px;
color: #2f855a;
}
.omx-fact-none { font-weight: 500; color: var(--amber, #b45309); }
.omx-obligations {
flex: 0 0 auto;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 10px 0 0;
padding-top: 9px;
border-top: 1px solid var(--gray-light, #E3E8EF);
}
.omx-obligations-title {
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ds-text-muted, #6b7280);
}
.omx-obligations-total {
flex: 0 0 auto;
font-size: .92rem;
font-weight: 700;
color: #2f855a;
background: #f0fff4;
border-radius: 4px;
padding: 2px 7px;
white-space: nowrap;
}
.omx-contracting {
flex: 0 0 auto;
margin: 4px 0 10px;
padding: 0 16px;
}
.omx-contracting .offer-modal-section-title { margin-bottom: 6px; }
.omx-contracting .omx-summary-intro { margin: 2px 0 0; padding: 0; }
.omx-buyer-role {
flex: 0 0 auto;
margin: 0 0 4px;
font-size: .78rem;
line-height: 1.5;
}
.omx-buyer-role.is-ok { color: #2f855a; font-weight: 600; }
.omx-buyer-role.is-missing {
color: #c05621;
font-weight: 700;
margin-bottom: 12px;
}
.omx-col-title {
margin: 0 0 12px;
padding-bottom: 9px;
font-family: var(--font-head, inherit);
font-size: .95rem;
font-weight: 700;
color: #1A4FA0;
border-bottom: 1px solid #C5DCF5;
}
.omx-col-title--legal {
margin: 0 16px 8px;
padding: 14px 0 9px;
color: var(--ds-text, #111827);
border-bottom-color: var(--ds-border, #d9dde3);
}
.omx-summary-title { padding-top: 6px; }
.omx-main {
background: #DAE9FC;
border-right: 1px solid #C5DCF5;
}
.omx-main .offer-modal-section-title { color: var(--dx-brand, #0B3557); }
.omx-pick-hint { color: var(--dx-text-on-work, #4B5860); }
.omx-count {
background: rgba(11, 53, 87, .12);
color: var(--dx-brand, #0B3557);
}
.omx-col-title {
color: var(--dx-brand, #0B3557);
border-bottom-color: #C5DCF5;
}
.omx-card.ovc-card {
padding: 10px 12px;
background: var(--white, #fff);
border: 2px solid var(--dx-brand, #1A4FA0);
border-radius: var(--radius-sm, 8px);
box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.omx-card.ovc-card.is-selected {
background: var(--white, #fff);
border-color: var(--dx-brand, #1A4FA0);
box-shadow: 0 0 0 3px rgba(11, 53, 87, .22);
}
.omx-card.ovc-card.is-selected .ovc-chip {
background: var(--primary-pale2, #F5F2FD);
}
.omx-card .omx-radio { border-color: var(--dx-line-control, #8B7E64); }
.omx-card.is-selected .omx-radio {
border-color: var(--dx-brand, #1A4FA0);
box-shadow: inset 0 0 0 3px var(--white, #fff),
inset 0 0 0 9px var(--dx-brand, #1A4FA0);
}
.omx-card[role="radio"]:focus-visible { outline-color: var(--dx-brand, #1A4FA0); }
.omx-expand:hover {
border-color: var(--dx-brand, #1A4FA0);
color: var(--dx-brand, #1A4FA0);
}
.omx-card-detail,
.omx-owner-actions { border-top-color: var(--gray-light, #E8E4F0); }
.omx-owner-lead {
font-family: inherit;
font-size: .78rem;
line-height: 1.5;
color: var(--ds-text-muted, #6b7280);
}
.omx-summary-facts { padding-bottom: 18px; }
.omx-summary-scroll .offer-modal-section { margin-bottom: 18px; }
.omx-cond-boxes { gap: 12px; }
.omx-contracting { margin: 18px 0 12px; }
.omx-summary-actions { padding-top: 4px; }
.omx-subject-list {
background: transparent;
border: none;
border-top: 1px solid #C5DCF5;
border-radius: 0;
padding: 12px 2px 2px;
color: var(--dx-text-on-work, #4B5860);
}
.omx-subject-mark {
height: 18px; width: auto; vertical-align: middle;
display: inline-block;
}
.omx-card.ovc-card.is-selected {
box-shadow: none;
outline: none;
}
.omx-card .ovc-head { position: relative; padding-right: 26px; }
.omx-fav-btn {
position: absolute; top: -2px; right: -2px;
width: 24px; height: 24px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
color: var(--gray-mid); border-radius: var(--radius-xs);
}
.omx-fav-btn:hover { color: var(--primary); background: rgba(255,255,255,.7); }
.omx-fav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.agm-resource.agm-card { align-items: flex-start; gap: 10px; padding: 10px 0; }
.agm-card-icon { flex-shrink: 0; color: var(--ds-text-muted, #6b7280); margin-top: 1px; }
.agm-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agm-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.agm-card-title { font-weight: 600; font-size: .9rem; color: var(--dark, #1c1c28); }
a.agm-card-title { color: #1A4FA0; text-decoration: none; }
a.agm-card-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.agm-card-sub { font-size: .78rem; color: var(--ds-text-muted, #6b7280); }
.agm-card-source { color: #1A4FA0; text-decoration: none; }
a.agm-card-source:hover { text-decoration: underline; text-underline-offset: 2px; }
.csm-facts-bare { margin-top: 0; padding-top: 0; border-top: 0; }
.csm-facts-bare-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.csm-facts-bare-head .csm-section-title { margin-bottom: 0; }
.csm-conditions > .csm-headline-state { margin: 2px 0 10px; }
.csm-facts-bare-toggle {
width: 100%; align-items: center; padding: 0; border: 0; background: none;
font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.csm-facts-bare-toggle .csm-section-summary { flex: 1 1 auto; }
.csm-facts-bare-toggle .csm-status-caret { margin-left: auto; transition: transform .15s; }
.csm-facts-bare-toggle[aria-expanded="true"] .csm-status-caret { transform: rotate(180deg); }
.csm-facts-bare-toggle:focus-visible { outline: 2px solid var(--blue, #1a5ea8); outline-offset: 2px; border-radius: 4px; }
.csm-facts-bare-ok { display: inline-flex; color: var(--green, #2e7d32); }
.csm-facts-bare-detail { margin-top: 4px; }
.csm-party-behalf { font-size: .82rem; color: var(--gray); }
.csm-party-behalf .csm-party-name { font-size: .82rem; }
.csm-revoke-btn:disabled { opacity: .5; cursor: not-allowed; }
.csm-facts-head .agm-all-link {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 10px; font-size: .78rem; font-weight: 500;
}
.ovc-access-to {
display: flex; align-items: baseline; gap: 6px;
margin: 2px 0 8px; min-width: 0; font-size: .8rem;
}
.ovc-access-key { flex-shrink: 0; color: var(--ds-text-muted, #6b7280); }
.ovc-access-val {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--dark, #1c1c28); font-weight: 600;
}
.omx-actions-facts .type-badge { font-size: .62rem; padding: 2px 7px; }
.omx-actions-facts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ovc-head .ovc-origin,
.ovc-head .ovc-contracted {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border: 1px solid transparent;
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
vertical-align: middle;
}
.omx-card .ovc-head { flex-wrap: wrap; row-gap: 4px; }
.ovc-origin--pod { background: #E8F0FB; color: #1A4FA0; border-color: rgba(26, 79, 160, .24); }
.ovc-origin--pub { background: #F1F1EE; color: #4A4A45; border-color: rgba(0, 0, 0, .12); }
.ovc-contracted--ok { background: #E6F4EA; color: #1E6B34; border-color: rgba(30, 107, 52, .28); }
.ovc-contracted--wait { background: #FFF4DB; color: #7A5200; border-color: rgba(122, 82, 0, .28); }
/* ── css/bundles.css ── */
#bundlesPage .bundles-controls { margin-bottom: 20px; }
#bundlesPage .bundles-new-btn {
margin-left: auto;
align-self: center;
min-height: 38px;
flex: 0 0 auto;
white-space: nowrap;
}
.mo-newpub {
position: relative;
margin-left: auto;
align-self: center;
flex: 0 0 auto;
}
.mo-newpub-btn {
min-height: 38px;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
}
.mo-newpub-chev { transition: transform var(--tr, .2s ease); flex-shrink: 0; }
.mo-newpub-btn[aria-expanded="true"] .mo-newpub-chev { transform: rotate(180deg); }
.mo-newpub-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
min-width: 100%;
width: max-content;
display: flex; flex-direction: column;
padding: 5px;
border-radius: var(--radius-sm, 8px);
background: var(--primary);
box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.mo-newpub-menu[hidden] { display: none; }
.mo-newpub-item {
appearance: none;
background: transparent;
border: none;
border-radius: 6px;
color: #fff;
font-family: inherit;
font-size: .85rem;
font-weight: 600;
line-height: 1.2;
padding: 9px 14px;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.mo-newpub-item:hover,
.mo-newpub-item:focus-visible {
background: rgba(255, 255, 255, .18);
outline: none;
}
@media (max-width: 600px) {
.mo-newpub { margin-left: 0; width: 100%; }
.mo-newpub-btn { width: 100%; justify-content: center; }
.mo-newpub-menu { left: 0; right: 0; width: auto; }
}
#bundlesPage .bundle-card { cursor: default; }
#bundlesPage .bundle-card-actions {
display: flex; gap: 8px; justify-content: flex-end;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--border, #E6E1F2);
}
.bundle-content-count {
background: var(--primary-pale, #EDE8F9); color: var(--primary-dark, #4A2E86);
border-radius: 999px; padding: 1px 8px; font-size: .75rem; font-weight: 700;
}
.bundle-contents-empty { color: var(--gray, #667085); padding: 8px 0; }
.bundle-item-group { margin-bottom: 18px; }
.bundle-item-group:last-child { margin-bottom: 0; }
.bundle-item-group-title {
margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--gray, #667085); display: flex; align-items: center; gap: 8px;
}
a.bundle-item-card { text-decoration: none; color: inherit; display: block; margin-bottom: 8px; }
a.bundle-item-card:last-child { margin-bottom: 0; }
a.bundle-item-card:hover { border-color: var(--primary, #6D40C4); }
.bundle-item-card .basket-card-arrow { color: var(--primary, #6D40C4); display: flex; align-items: center; flex-shrink: 0; }
.bundle-policy-free { font-size: .82rem; color: var(--dark); line-height: 1.55; }
.bundle-policy-lead-row {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
}
.bundle-policy-lead {
font-size: .82rem;
font-weight: 700;
color: var(--dark);
}
.bundle-policy-lead-row .bpol-view-btn {
margin-left: auto;
width: auto;
padding: 4px 13px;
font-size: .76rem;
flex: 0 0 auto;
}
.bpol-panel {
background: var(--offer-card-bg, #EEF3FB);
border-radius: var(--radius-sm);
padding: 4px 14px;
}
.bpol-table {
width: 100%;
border-collapse: collapse;
font-size: .82rem;
}
.bpol-row > td {
padding: 8px 0;
border-top: 1px solid rgba(26, 79, 160, 0.16);
vertical-align: middle;
}
.bpol-table tbody tr:first-child > td { border-top: 0; }
.bpol-auth { width: 1%; white-space: nowrap; padding-right: 10px !important; }
.bpol-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #C5DCF5;
color: #1A4FA0;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
}
.bpol-badge--unknown {
background: var(--gray-light, #E8E4F0);
color: var(--gray, #667085);
min-width: 22px;
text-align: center;
}
.bpol-name {
position: relative;
color: var(--dark);
overflow-wrap: anywhere;
}
.bpol-name-text { margin-right: 4px; }
.bpol-common {
margin: 0 5px 0 2px;
color: #123A79;
font-weight: 700;
font-size: .76rem;
}
.bpol-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 0;
background: none;
color: #1A4FA0;
line-height: 0;
cursor: pointer;
vertical-align: -3px;
flex-shrink: 0;
opacity: .62;
transition: opacity var(--tr), color var(--tr);
}
.bpol-info > svg { display: block; width: 15px; height: 15px; }
.bpol-row:hover .bpol-info,
.bpol-info:hover { opacity: 1; }
.bpol-info:focus-visible { outline: 2px solid #1A4FA0; outline-offset: 2px; border-radius: 50%; opacity: 1; }
.bpol-pop {
display: none;
position: absolute;
z-index: 60;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
max-width: min(320px, 78vw);
padding: 9px 11px;
border-radius: var(--radius-sm, 8px);
background: var(--dark, #140F2A);
color: #fff;
font-size: .76rem;
line-height: 1.45;
text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.bpol-row:hover .bpol-pop,
.bpol-info:focus-visible + .bpol-pop,
.bpol-info[aria-expanded="true"] + .bpol-pop { display: block; }
.bpol-pop-title {
display: block;
margin-bottom: 5px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .72;
}
.bpol-pop-line { padding: 1px 0; }
.bpol-pop-offer { opacity: .68; }
.bpol-view-btn[hidden] { display: none; }
.ovc-list { display: flex; flex-direction: column; gap: 8px; }
.ovc-card {
position: relative;
padding: 10px 12px;
background: var(--white, #fff);
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.policy-box .ovc-card {
margin-left: -10px;
margin-right: -10px;
border-color: #1A4FA0;
border-width: 2px;
}
.ovc-fav-btn {
position: absolute;
top: 7px; right: 7px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--gray, #6b7280);
line-height: 0;
cursor: pointer;
opacity: .7;
transition: opacity var(--tr), color var(--tr), background var(--tr);
}
.ovc-fav-btn > svg { display: block; }
.ovc-card:hover .ovc-fav-btn { opacity: 1; }
.ovc-fav-btn:hover {
opacity: 1;
color: var(--primary, #6C3FD1);
background: var(--primary-pale2, #F5F2FD);
}
.ovc-fav-btn:focus-visible {
outline: 2px solid var(--primary, #6C3FD1);
outline-offset: 1px;
opacity: 1;
}
.ovc-fav-btn.is-fav {
opacity: 1;
color: var(--primary, #6C3FD1);
}
.ovc-fav-btn.is-fav > svg { fill: currentColor; }
.ovc-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 9px;
}
.ovc-scope {
min-width: 0;
font-size: .72rem;
font-weight: 500;
color: var(--gray, #6B7A8D);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ovc-contract-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border: 1.5px solid var(--primary, #6C3FD1);
border-radius: var(--radius-xs, 6px);
background: var(--primary, #6C3FD1);
color: var(--white, #fff);
font-family: inherit;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.ovc-contract-btn:hover {
background: var(--primary-dark, #3D2875);
border-color: var(--primary-dark, #3D2875);
}
.ovc-contract-btn:focus-visible {
outline: 2px solid var(--primary-dark, #3D2875);
outline-offset: 2px;
}
.ovc-contract-btn svg { flex-shrink: 0; display: block; }
.ovc-contract-btn--disabled,
.ovc-contract-btn[disabled] {
background: var(--gray-light, #E8E4F0);
border-color: var(--gray-light, #E8E4F0);
color: var(--gray, #6b7280);
cursor: not-allowed;
}
.ovc-contract-btn--disabled:hover,
.ovc-contract-btn[disabled]:hover {
background: var(--gray-light, #E8E4F0);
border-color: var(--gray-light, #E8E4F0);
}
.ovc-head {
position: relative;
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 3px;
padding-right: 26px;
}
.ovc-num {
font-size: .82rem;
font-weight: 500;
line-height: 1.3;
color: #1A4FA0;
}
.ovc-lead {
display: block;
margin-bottom: 4px;
font-size: .74rem;
font-weight: 500;
line-height: 1.2;
color: var(--gray);
}
.ovc-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
padding: 0; border: 0;
background: none;
color: #1A4FA0;
line-height: 0;
cursor: pointer;
flex-shrink: 0;
opacity: .62;
transition: opacity var(--tr);
}
.ovc-info > svg { display: block; }
.ovc-card:hover .ovc-info,
.ovc-info:hover { opacity: 1; }
.ovc-info:focus-visible {
outline: 2px solid #1A4FA0; outline-offset: 2px; border-radius: 50%; opacity: 1;
}
.ovc-pop {
display: none;
position: absolute;
z-index: 60;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
max-width: min(320px, 78vw);
padding: 9px 11px;
border-radius: var(--radius-sm, 8px);
background: var(--dark, #140F2A);
color: #fff;
font-size: .76rem;
line-height: 1.45;
text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.ovc-info:hover + .ovc-pop,
.ovc-info:focus-visible + .ovc-pop,
.ovc-info[aria-expanded="true"] + .ovc-pop { display: block; }
.ovc-pop-name { display: block; font-weight: 700; }
.ovc-pop-key { font-weight: 500; opacity: .68; }
.ovc-pop-auth { display: block; margin-top: 2px; opacity: .68; }
.ovc-pop-title {
display: block;
margin: 7px 0 4px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .72;
}
.ovc-pop-line { display: block; padding: 1px 0; }
.ovc-conditions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
font-size: .82rem;
line-height: 1.55;
}
.ovc-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
background: var(--primary-pale2, #F5F2FD);
color: var(--primary-dark, #3D2875);
border-radius: 4px;
font-size: .78rem;
font-weight: 500;
}
.ovc-chip--none { background: transparent; color: var(--gray); font-style: italic; }
.ovc-chip--unchecked {
background: var(--amber-pale, #FFF6E5);
color: var(--amber, #B26A00);
font-style: italic;
}
.ovc-flag {
padding: 0 5px;
border-radius: 3px;
background: var(--green-pale, #E8F5E9);
color: var(--green, #2E7D32);
font-size: .66rem;
font-weight: 700;
letter-spacing: .04em;
}
.ovc-common { text-transform: uppercase; }
.ovc-price { font-size: .7rem; letter-spacing: 0; white-space: nowrap; }
.bundle-itemcond-title {
margin: 14px 0 6px;
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--gray);
}
.bundle-itemcond-title:first-child { margin-top: 0; }
.policy-offer-cards[hidden] { display: none !important; }
.resource-policy-list:empty { display: none; }
.card-bundle-relations { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; }
.card-bundle-relations .bundle-rel-item {
font-size: .82rem; color: var(--gray, #667085);
display: inline-flex; align-items: baseline; gap: 4px;
}
.card-bundle-relations .bundle-rel-item strong { color: var(--text, #1d2939); font-weight: 700; }
.auth-admin-query { margin-bottom: 16px; }
.auth-admin-query-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.auth-admin-query-form .del-qb-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 200px; }
.auth-admin-query-form .del-qb-field > span { font-size: .78rem; color: var(--gray, #667085); font-weight: 600; }
.auth-admin-query-form input,
.auth-admin-query-form select { padding: 8px 10px; border: 1.5px solid var(--gray-light, #E8E4F0); border-radius: var(--radius-sm, 8px); font: inherit; }
.auth-admin-query-form .del-qb-submit { flex: 0 0 auto; }
.auth-admin-any-hint { margin: 10px 0 0; font-size: .76rem; color: var(--gray-mid, #98A2B3); }
.ovc-contract-btn--link,
.ovc-contract-btn--link:hover {
padding: 0;
border: 0;
background: none;
color: var(--primary, #5C3FA5);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.ovc-contract-btn--link:hover { color: var(--primary-dark, #3D2875); }
.ovc-contract-btn--link:focus-visible {
outline: 2px solid var(--primary, #5C3FA5);
outline-offset: 2px;
border-radius: 2px;
}
.ovc-actions .ovc-compare-btn {
padding: 5px 11px;
font-size: .78rem;
width: auto;
flex: 0 0 auto;
}
.bundle-policy-lead-row .bpol-view-btn {
background: transparent;
border: 1.5px solid var(--primary, #5C3FA5);
color: var(--primary, #5C3FA5);
}
.bundle-policy-lead-row .bpol-view-btn:hover {
filter: none;
background: var(--primary-pale2, #F5F2FD);
}
.bundle-policy-lead-row .bpol-view-btn:disabled,
.bundle-policy-lead-row .bpol-view-btn.policy-deal-btn--disabled {
background: transparent;
border-color: var(--gray-light, #E5E7EB);
color: var(--gray, #6B7280);
}
.ovc-summary-lead {
margin: 2px 0 9px;
font-size: .8rem;
line-height: 1.45;
color: var(--gray, #6B7A8D);
}
.ovc-summary-label {
margin-bottom: 5px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--gray, #6B7A8D);
}
.ovc-summary-warn {
margin: 8px 0 0;
font-size: .76rem;
line-height: 1.45;
color: var(--amber, #b45309);
}
.ovc-actions--summary { justify-content: flex-end; }
#bundlePolicyList > .policy-license:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
.bundle-itemcond-chips { margin-top: 6px; }
.ovc-audience {
display: flex; align-items: flex-start; gap: 6px;
margin: 6px 0 0;
font-size: .8rem; line-height: 1.4;
color: #1A4FA0; font-weight: 600;
}
.ovc-audience-icon { flex: 0 0 13px; margin-top: 2px; }
.ovc-audience-me { font-weight: 500; }
.ovc-audience.is-in .ovc-audience-me { color: #1F6B2B; font-weight: 600; }
.ovc-audience.is-out .ovc-audience-me { color: #c05621; font-weight: 700; }
.dxa-audience { margin: 0 0 10px; }
/* ── css/beheer-tables.css ── */
.trust-collapse-head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 2px 0;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
color: inherit;
}
.trust-collapse-head > .member-registrar-row { flex: 1 1 auto; min-width: 0; }
.trust-collapse-head:hover .member-registrar-name { color: var(--primary); }
.trust-collapse-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.trust-collapse-meta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gray-mid, #98A2B3);
}
.trust-collapse-count {
min-width: 20px;
padding: 1px 7px;
border-radius: 999px;
background: var(--primary-pale, #EDE8F9);
color: var(--primary-dark, #4B2A8A);
font-size: 0.72rem;
font-weight: 700;
text-align: center;
}
.trust-collapse-chevron { transition: transform 0.15s ease; }
.trust-collapse-head.is-open .trust-collapse-chevron { transform: rotate(90deg); }
.trust-collapse-head.is-open .trust-collapse-meta { color: var(--primary); }
.trust-collapse-body { margin-top: 10px; }
.trust-collapse-body[hidden] { display: none; }
.login-dropdown-reauth {
display: flex;
align-items: center;
gap: 8px;
margin: 0 12px 10px;
padding: 8px 10px;
border-radius: var(--radius-sm, 8px);
background: #FEF3C7;
color: #92400E;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
}
.login-dropdown-reauth:hover { background: #FDE68A; }
.login-dropdown-reauth[hidden] { display: none; }
.auth-admin-h2m-actions { margin-top: 10px; }
.auth-admin-h2m-btn { height: 34px; padding: 0 14px; }
.auth-admin-source { margin-left: 10px; font-size: .72rem; color: var(--gray-mid, #98A2B3); word-break: break-all; }
.am-table td { vertical-align: middle; }
.am-table .am-col-first { max-width: 260px; }
.st-table:not(.am-table):not(.auth-table) > tbody > tr.am-grouprow > td,
.st-table:not(.am-table):not(.auth-table) > tbody > tr.mo-grouprow > td,
.st-table tr.am-grouprow > td,
.st-table tr.mo-grouprow > td {
background-color: var(--primary-pale, #EDE8F9);
}
.st-table:not(.am-table):not(.auth-table) > tbody > tr.am-grouprow:hover > td,
.st-table:not(.am-table):not(.auth-table) > tbody > tr.mo-grouprow:hover > td,
.st-table tr.am-grouprow:hover > td,
.st-table tr.mo-grouprow:hover > td {
background-color: var(--primary-pale, #EDE8F9);
}
.st-table:not(.am-table):not(.auth-table) > tbody > tr.am-grouprow > td,
.st-table:not(.am-table):not(.auth-table) > tbody > tr.mo-grouprow > td {
border-bottom-width: 0;
border-radius: var(--radius-xs);
}
tr.am-grouprow > td {
padding: 9px 12px;
background: var(--primary-pale, #EDE8F9);
border-top: 0;
border-bottom-width: 0;
border-radius: var(--radius-xs);
}
.st-table tbody tr.am-grouprow:hover > td { background: var(--primary-pale, #EDE8F9); }
.st-table tbody tr.am-grouprow:first-child > td { border-top: none; }
.am-group-title { font-weight: 700; color: var(--dark, #140F2A); font-size: .84rem; }
.am-group-sub { margin-left: 8px; font-size: .72rem; color: var(--gray-mid, #98A2B3); }
.am-group-count {
margin-left: 7px;
font-size: .76rem;
font-weight: 500;
color: var(--gray);
}
.am-group-desc {
display: block;
margin-top: 2px;
max-width: 78ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .76rem;
font-weight: 400;
line-height: 1.35;
color: var(--gray);
}
.am-itemrow > td { font-size: .82rem; }
.am-itemrow > td.am-col-first { padding-left: 30px; }
.am-org { font-weight: 600; color: var(--dark, #140F2A); }
.am-actions,
.am-effect { white-space: nowrap; }
.am-ids code { margin-right: 3px; }
.am-set code { font-size: .72rem; color: var(--gray-mid, #98A2B3); }
@media (max-width: 768px) {
.am-table:not(.auth-table) th:nth-child(4),
.am-table:not(.auth-table) td:nth-child(4),
.am-table:not(.auth-table) th:nth-child(5),
.am-table:not(.auth-table) td:nth-child(5) { display: none; }
}
.auth-table .am-col-count { text-align: right; width: 70px; font-variant-numeric: tabular-nums; }
.auth-table .am-col-action { text-align: right; white-space: nowrap; width: 92px; }
.am-aggrow > td { font-size: .84rem; }
.am-aggrow .am-agg-label { font-weight: 600; color: var(--dark, #140F2A); }
.am-toggle {
width: 18px; height: 18px; margin-right: 6px; padding: 0;
border: 0; background: none; cursor: pointer;
color: var(--gray-mid, #98A2B3); font-size: .8rem; line-height: 1;
transition: transform .15s ease, color .15s ease;
display: inline-block; vertical-align: middle;
}
.am-toggle:hover { color: var(--primary); }
.am-toggle.is-open { transform: rotate(90deg); }
.am-toggle-spacer { display: inline-block; width: 18px; margin-right: 6px; }
.am-detailrow > td {
background: var(--gray-pale, #F4F2F8);
font-size: .8rem;
}
.st-table tbody tr.am-detailrow:hover > td { background: var(--gray-pale, #F4F2F8); }
.am-detailrow > td.am-col-first { padding-left: 46px; }
.am-detail-bits code { margin-right: 3px; }
.auth-table .auth-view-btn { height: 26px; padding: 0 10px; font-size: .76rem; }
.mo-table td { vertical-align: middle; }
.mo-row > td { padding-top: 10px; padding-bottom: 6px; }
.mo-title { font-weight: 600; color: var(--dark); }
.mo-common { vertical-align: -2px; margin-left: 4px; }
.mo-col-type { width: 1%; white-space: nowrap; }
.mo-col-title { max-width: 340px; }
.mo-col-date { white-space: nowrap; color: var(--gray); font-size: .8rem; width: 1%; }
.mo-col-action { width: 1%; white-space: nowrap; text-align: right; }
.mo-detailrow > td {
padding-top: 0;
padding-bottom: 11px;
border-top: 0;
}
.mo-row > td { border-bottom: 0; }
.st-table.mo-table > tbody > tr.mo-row > td {
border-bottom-width: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.st-table.mo-table > tbody > tr.mo-detailrow > td {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.mo-detail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 16px;
font-size: .78rem;
color: var(--gray);
}
.mo-detail-contents,
.mo-detail-created,
.mo-detail-owner { white-space: nowrap; }
.mo-detail-owner strong,
.mo-detail-created strong { color: var(--dark); font-weight: 600; }
.mo-detail-counts { display: inline-flex; gap: 9px; margin-left: 2px; }
.mo-detail-counts strong { color: var(--dark); }
.mo-row:hover > td,
.mo-row:hover + .mo-detailrow > td,
.mo-detailrow:hover > td,
.mo-row:has(+ .mo-detailrow:hover) > td {
background-color: var(--primary-pale2, #F5F2FD);
}
.st-table.mo-table > tbody > tr.mo-row:hover > td,
.st-table.mo-table > tbody > tr.mo-detailrow:hover > td,
.st-table.mo-table > tbody > tr.mo-row:hover + tr.mo-detailrow > td,
.st-table.mo-table > tbody > tr.mo-row:has(+ tr.mo-detailrow:hover) > td {
background-color: var(--primary-pale2, #F5F2FD);
}
.mo-chip {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 2px 9px;
border-radius: 999px;
font-size: .74rem;
text-decoration: none;
white-space: nowrap;
}
.mo-chip .my-offers-rel-num { font-weight: 700; }
.mo-chip.is-zero {
background: var(--white, #fff);
}
.mo-chip--offers.is-active, a.mo-chip--offers.is-active {
background: #DAE9FC; border-color: #9CC3EE; color: #1A4FA0;
}
.mo-chip--requests.is-active, a.mo-chip--requests.is-active {
background: #FDECD8; border-color: #F3C88B; color: #8A4B00;
}
.mo-chip--agreements.is-active, a.mo-chip--agreements.is-active {
background: #1A4FA0; border-color: #1A4FA0; color: #fff;
}
.mo-chip--auth.is-active, a.mo-chip--auth.is-active {
background: #DCF3E3; border-color: #9FD9B5; color: #1B5E34;
}
.mo-chip--offers.is-zero, a.mo-chip--offers.is-zero { background: #fff; border-color: #9CC3EE; color: #1A4FA0; }
.mo-chip--requests.is-zero, a.mo-chip--requests.is-zero { background: #fff; border-color: #F3C88B; color: #8A4B00; }
.mo-chip--agreements.is-zero, a.mo-chip--agreements.is-zero { background: #fff; border-color: #1A4FA0; color: #1A4FA0; }
.mo-chip--auth.is-zero, a.mo-chip--auth.is-zero { background: #fff; border-color: #9FD9B5; color: #1B5E34; }
a.mo-chip.is-active:hover { filter: brightness(0.95); text-decoration: none; }
.mo-btn--danger { color: #9B4A00; background: #FFF4E8; border-color: #F3C88B; }
.mo-btn--danger:hover { background: #FDE7CC; border-color: #E9AE5F; }
.mo-btn--danger.mo-btn--disabled { color: var(--gray-mid, #98A2B3); background: var(--gray-pale, #F4F2F8); }
.mo-detail .my-offers-offer-row,
.mo-detail .my-offers-rel-row { margin: 0; }
.mo-detail-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
}
.mo-detail-badges:empty,
.mo-detail-badges > :empty { display: none; }
.st-table.mo-table > tbody > tr.mo-grouprow > td {
padding: 9px 12px;
background-color: var(--primary-pale, #EDE8F9);
border-bottom-width: 0;
border-radius: var(--radius-xs);
}
.st-table.mo-table > tbody > tr.mo-grouprow:hover > td {
background-color: var(--primary-pale, #EDE8F9);
}
.st-table.mo-table > tbody > tr.mo-groupspacer > td {
height: 18px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.st-table.mo-table > tbody > tr.mo-groupspacer:hover > td { background: transparent; }
.st-table.mo-table > tbody > tr.mo-groupspacer:last-child > td { height: 0; }
.mo-group-title {
font-weight: 700;
font-size: .82rem;
color: var(--dark);
}
.mo-group-count {
margin-left: 7px;
font-size: .76rem;
font-weight: 500;
color: var(--gray);
}
.mo-grouprow .mo-type { font-size: .8rem; color: var(--dark); }
.mo-grouprow .mo-type-icon { width: 17px; height: 17px; }
.mo-type {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--gray);
white-space: nowrap;
}
.mo-type-icon { flex: 0 0 auto; color: var(--primary); }
.mo-btn {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
margin-left: 6px;
border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm);
background: var(--white);
font-family: var(--font-body);
font-size: .78rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.mo-btn:hover { background: var(--primary-pale, #EDE8F9); border-color: var(--primary); }
.mo-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--white); }
.mo-btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.mo-btn--disabled {
color: var(--gray-mid, #98A2B3);
border-color: var(--gray-light);
background: var(--gray-pale, #F4F2F8);
cursor: not-allowed;
pointer-events: none;
}
.bundle-row-accent { display: none; }
@media (max-width: 768px) {
.mo-table th:nth-child(3), .mo-table td:nth-child(3),
.mo-table th:nth-child(4), .mo-table td:nth-child(4) { display: none; }
}
.oc-option-sub { display: block; margin-top: 1px; font-size: .72rem; color: var(--gray-mid, #98A2B3); }
.oc-combobox { min-width: 0; }
.login-nav-switch {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 0;
padding: 11px 14px;
border-top: 1px solid var(--gray-light, #E8E4F0);
font-size: 0.8rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.login-nav-switch:hover { background: var(--primary-pale2, #F5F2FD); }
.login-nav-switch svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-ext-icon { margin-left: 6px; opacity: .55; flex-shrink: 0; vertical-align: -1px; }
.my-marketplace-nav-link:hover .nav-ext-icon { opacity: .85; }
.bundles-btn { border: none; border-radius: var(--radius-sm, 8px); padding: 8px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; line-height: 1.2; }
.bundles-btn-primary { background: var(--primary); color: #fff; }
.bundles-btn-primary:hover { background: var(--primary-dark); }
.bundles-btn-ghost { background: var(--primary-pale, #EDE8F9); color: var(--primary-dark); }
.bundles-btn-ghost:hover { background: var(--primary-pale2, #F5F2FD); }
.bundles-btn-danger { background: #FFF0ED; color: #9B2A00; border: 1px solid #F8C4B4; }
.bundles-btn-danger:hover { background: #ffe3db; }
.sw-card--profile[data-sw-profile="custom"] {
border-style: dashed; border-width: 2px; border-color: var(--blue);
background: var(--blue-pale);
}
.sw-card--profile[data-sw-profile="custom"]:hover:not(.is-disabled) {
border-color: var(--blue); background: var(--white);
}
.sw-card--profile[data-sw-profile="custom"].is-selected {
border-style: dashed; border-color: var(--blue);
background: var(--blue-pale);
box-shadow: 0 0 0 3px rgba(59, 130, 230, .18);
}
.pub-offer-title-row { margin-bottom: 14px; }
.pub-offer-title-label {
display: block; margin-bottom: 5px;
font-size: .78rem; font-weight: 700; color: var(--dark);
}
.pub-offer-title-input {
width: 100%; box-sizing: border-box;
padding: 9px 12px; font-family: var(--font-body); font-size: .88rem;
color: var(--dark); background: var(--white);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
}
.pub-offer-title-input:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(92, 63, 165, .12);
}
@media (max-width: 768px) {
.agreements-table,
.auth-table {
display: block;
border-collapse: separate;
box-shadow: none;
background: transparent;
}
.agreements-table thead,
.auth-table thead { display: none; }
.agreements-table tbody,
.auth-table tbody { display: block; }
.agreements-table tbody tr,
.auth-table tbody tr {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
row-gap: 5px;
padding: 11px 108px 11px 13px;
margin-bottom: 8px;
background: var(--white, #fff);
border: 1px solid var(--gray-light, #E8E4F0);
border-radius: var(--radius-sm, 8px);
box-shadow: none;
}
.agreements-table tbody tr:hover > td,
.auth-table tbody tr:hover > td { background: transparent; }
.agreements-table tbody td,
.auth-table tbody td {
display: block;
width: auto;
max-width: 100%;
min-width: 0;
padding: 0;
border: 0;
text-align: left;
white-space: normal;
word-break: break-word;
}
.agreements-table tbody td:empty,
.auth-table tbody td:empty { display: none; }
.agreements-table tbody tr.am-grouprow,
.auth-table tbody tr.am-grouprow {
display: block;
padding: 7px 12px;
margin-bottom: 6px;
border: 0;
}
.agreements-table tbody tr.am-grouprow > td,
.auth-table tbody tr.am-grouprow > td { display: block; }
.agreements-table tbody td.agreements-col-action,
.auth-table tbody td.am-col-action {
position: absolute;
top: 10px; right: 11px;
width: 92px;
max-width: 92px;
}
.agreements-table tbody td.agreements-col-action .auth-view-btn,
.auth-table tbody td.am-col-action .auth-view-btn {
display: block;
width: 100%;
height: auto;
min-height: 0;
padding: 5px 6px;
white-space: normal;
font-size: .7rem;
line-height: 1.25;
text-align: center;
}
.agreements-table tbody td.jvw-cell {
position: absolute;
top: 52px; right: 11px;
width: 92px;
text-align: center;
}
.agreements-table tbody tr:not(.am-grouprow) { min-height: 84px; }
.auth-table tbody tr:not(.am-grouprow) { min-height: 56px; }
.contracts-table tbody tr::after {
content: '';
flex: 1 0 100%;
height: 0;
order: 4;
}
.contracts-table tbody tr.am-grouprow::after { content: none; }
.contracts-table tbody td:nth-child(4) { order: 1; font-weight: 600; }
.contracts-table tbody td:nth-child(1) { order: 2; }
.contracts-table tbody td:nth-child(5) { order: 3; }
.contracts-table tbody td:nth-child(2) { order: 5; }
.contracts-table tbody td:nth-child(3) { order: 6; }
.contracts-table tbody td:nth-child(7) { order: 7; }
.contracts-table tbody td:nth-child(6) { order: 8; }
.requests-table tbody tr::after {
content: '';
flex: 1 0 100%;
height: 0;
order: 4;
}
.requests-table tbody tr.am-grouprow::after { content: none; }
.requests-table tbody td:nth-child(3) { order: 1; font-weight: 600; }
.requests-table tbody td:nth-child(1) { order: 2; }
.requests-table tbody td:nth-child(4) { order: 3; }
.requests-table tbody td:nth-child(2) { order: 6; }
.requests-table tbody td:nth-child(5) { order: 7; }
.agreements-table tbody td:nth-child(n) { font-size: .82rem; }
.agreements-table tbody td.agreements-title { font-size: .88rem; font-weight: 600; }
.contracts-table tbody td:nth-child(2),
.contracts-table tbody td:nth-child(6),
.contracts-table tbody td:nth-child(7),
.requests-table tbody td:nth-child(5) { font-size: .76rem; color: var(--gray, #6B7A8D); }
.auth-table tbody td.am-col-first { flex: 1 0 100%; font-size: .86rem; font-weight: 600; }
.auth-table tbody td.am-col-count {
font-size: .76rem;
color: var(--gray, #6B7A8D);
text-align: left;
width: auto;
}
.auth-table tbody td:nth-child(2),
.auth-table tbody td:nth-child(3) { font-size: .8rem; }
.auth-table tbody tr.am-detailrow {
margin-left: 14px;
background: var(--gray-pale, #F4F2F8);
border-color: transparent;
border-left: 3px solid var(--gray-light, #E8E4F0);
}
.auth-table tbody tr.am-detailrow > td { background: transparent; }
.auth-table tbody tr.am-detailrow > td.am-col-first { padding-left: 0; font-weight: 500; }
}
.mo-sortbar {
display: flex;
justify-content: flex-end;
margin: 10px 0 8px;
}
.mo-sortbar-field {
flex-direction: row;
align-items: center;
gap: 8px;
}
.mo-sortbar-field > span {
margin: 0;
white-space: nowrap;
}
.mo-row.mo-row--archived > td,
.mo-row.mo-row--archived + .mo-detailrow > td { opacity: .6; }
.mo-archived-toggle {
display: inline-flex; align-items: center; gap: 6px;
margin-right: auto; font-size: .9rem; cursor: pointer;
color: var(--dx-text-muted, #52667a);
}
/* ── css/detail-hero.css ── */
.detail-actions[hidden] { display: none !important; }
.detail-hero-bottom {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.detail-hero-bottom > .detail-hero-meta { min-width: 0; flex: 1 1 auto; }
.detail-hero-actions {
display: flex; align-items: center; gap: 8px;
margin-left: auto; flex-shrink: 0;
}
.detail-hero-actions .hero-pill-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; margin: 0;
border-radius: 999px;
background: rgba(255,255,255,.14);
background: color-mix(in srgb, currentColor 14%, transparent);
border: 1px solid rgba(255,255,255,.34);
border-color: color-mix(in srgb, currentColor 30%, transparent);
box-shadow: none;
color: inherit;
font-family: var(--font-body);
cursor: pointer;
transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.detail-hero-actions .hero-pill-btn:hover {
background: rgba(255,255,255,.26);
background: color-mix(in srgb, currentColor 26%, transparent);
border-color: color-mix(in srgb, currentColor 55%, transparent);
color: inherit;
transform: translateY(-1px);
}
.detail-hero-actions .hero-pill-btn:focus-visible {
outline: 2px solid currentColor; outline-offset: 2px;
}
.detail-hero-actions .hero-pill-btn svg { flex-shrink: 0; display: block; }
.detail-hero-actions .detail-fav-btn.in-basket {
background: color-mix(in srgb, currentColor 34%, transparent);
border-color: currentColor;
color: inherit;
}
.detail-hero-actions .share-btn--copied {
background: color-mix(in srgb, currentColor 34%, transparent);
border-color: currentColor;
}
@media (max-width: 640px) {
.detail-hero-bottom { align-items: flex-start; }
.detail-hero-actions { margin-top: 4px; }
}
@media (max-width: 640px) {
.detail-hero-top-badges {
align-items: center;
row-gap: 8px;
}
.detail-hero-top-badges .detail-hero-actions { margin-top: 0; margin-left: auto; }
}
.detail-hero-actions .hero-pill-btn.share-btn--copied {
width: auto;
gap: 6px;
padding: 0 12px;
}
.detail-hero-actions .hero-pill-flash {
font-family: var(--font-body);
font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.trust-org-dmi-mark {
width: 18px; height: 18px;
object-fit: contain; border-radius: 3px;
flex-shrink: 0;
}
.hero-org-link {
color: inherit; text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--tr);
}
.hero-org-link:hover,
.hero-org-link:focus-visible { border-bottom-color: currentColor; }
.policy-license {
display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
margin: 10px 0 4px;
padding-top: 10px;
border-top: 1px solid rgba(26, 79, 160, .20);
}
.policy-license-type {
font-size: .66rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: #1A4FA0;
}
.policy-license-badge {
display: inline-flex; align-items: center;
max-width: 100%;
padding: 4px 11px;
border-radius: 20px;
background: var(--white);
border: 1px solid #A9C9EE;
font-size: .8rem; font-weight: 600; line-height: 1.35;
color: #10305F;
word-break: break-word;
cursor: help;
}
.policy-license--unknown .policy-license-badge {
background: transparent;
border-style: dashed;
color: var(--gray, #6B7280);
font-weight: 500;
}
.policy-license-note {
font-size: .72rem; line-height: 1.45;
color: #1A4FA0; opacity: .8;
}
.policy-license .skel { border-radius: 20px; }
.policy-license-type.skel { width: 96px; }
.policy-license-badge.skel { width: 150px; height: 24px; border: none; }
.detail-hero .detail-common-mark--hero { filter: brightness(0) invert(1); }
.detail-hero .badge-policy--hero .detail-common-mark--hero { margin-right: 2px; }
.detail-hero .badge-policy,
.badge-policy.badge-policy--hero {
background: #DAE3F0;
color: var(--dark2, #2D2450);
border: 0;
font-size: .72rem;
padding: 3px 10px 3px 8px;
gap: 4px;
letter-spacing: .06em;
}
.detail-hero .badge-policy--hero .detail-common-mark--hero { filter: brightness(0); }
.detail-hero .detail-hero-actions .hero-pill-btn {
background: var(--cb-blue, #0B3557);
border: 0;
box-shadow: 0 0 0 2px #FFFFFF;
color: #FFFFFF;
}
.detail-hero .detail-hero-actions .hero-pill-btn:hover {
background: var(--cb-blue, #0B3557);
box-shadow: 0 0 0 3px #FFFFFF, 0 2px 6px rgba(0,0,0,.25);
color: #FFFFFF;
}
.detail-hero .detail-hero-actions .hero-pill-btn:focus-visible {
outline: 2px solid #FFFFFF; outline-offset: 4px;
}
.detail-hero .detail-hero-actions .detail-fav-btn.in-basket,
.detail-hero .detail-hero-actions .share-btn--copied {
background: #FFFFFF;
color: var(--cb-blue, #0B3557);
box-shadow: 0 0 0 2px #FFFFFF;
}
.detail-hero-meta-type .detail-type-mark { margin-right: 0; gap: 6px; }
.detail-hero-meta-type .detail-type-mark-icon { top: 0; }
.detail-hero-meta-type .detail-type-mark-icon svg { width: 16px; height: 16px; }
.detail-hero-meta-type .detail-type-mark-text { top: 0; font-size: .78rem; opacity: 1; }
.detail-hero-meta,
.detail-hero-meta > .detail-hero-meta-item,
.detail-hero-meta-type .detail-type-mark { align-items: baseline; }
.detail-hero-meta > .detail-hero-meta-item > svg { position: relative; top: 2px; }
.detail-hero-meta-type .detail-type-mark-icon { position: relative; top: 3px; }
.detail-hero-meta-type .detail-type-mark-text { font-size: .74rem; letter-spacing: .07em; }
.detail-hero-meta .dmi-badge {
display: inline-flex; align-items: baseline;
font-size: .66rem; line-height: 1;
}
.detail-hero-meta .dmi-badge img { align-self: center; }
@media (max-width: 640px) {
.detail-hero-top-badges { column-gap: 6px; }
.detail-hero-top-badges .detail-access-badge { padding-left: 10px; padding-right: 10px; }
}
/* ── css/dist-access.css ── */
.dist-card .dist-action {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.dist-action-row { display: flex; align-items: flex-start; gap: 2px; }
.dist-cap {
font-family: var(--font-head); font-size: .68rem; font-weight: 700;
letter-spacing: .02em; padding-right: 2px;
white-space: nowrap; text-align: right; line-height: 1.35;
order: -1;
}
.dist-info > .dist-cap--top {
display: block; order: 0;
white-space: normal; text-align: left;
padding-right: 0; margin: 0 0 3px;
}
.dist-cap--ok { color: #1F6B2B; }
.dist-cap--wait { color: #8A4300; }
.dist-cap--stop { color: #A8231B; }
.dist-cap--new { color: #1A4FA0; }
.dist-cap--unknown,
.dist-cap--off { color: var(--gray); }
.dist-menu { position: relative; display: inline-block; }
.dist-pill {
display: inline-flex; align-items: stretch;
border-radius: var(--radius-sm); overflow: hidden;
white-space: nowrap; font-family: var(--font-body);
}
.dist-pill-main {
display: flex; align-items: center; gap: 6px;
padding: 8px 13px; font-size: .82rem; font-weight: 600;
border: none; background: transparent; color: inherit;
cursor: pointer; font-family: inherit;
}
.dist-pill-main:disabled { cursor: not-allowed; }
.dist-pill-main svg { flex-shrink: 0; }
.dist-pill-caret {
display: flex; align-items: center; justify-content: center;
width: 30px; border: none; background: transparent; color: inherit;
cursor: pointer; padding: 0;
}
.dist-pill-div { width: 1px; flex-shrink: 0; align-self: stretch; }
.dist-menu.is-open .dist-pill-caret svg { transform: rotate(180deg); }
.dist-pill-caret svg { transition: transform .2s ease; }
.dist-pill-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; padding: 0 5px;
border-radius: 9px; font-size: .64rem; font-weight: 700; line-height: 1;
}
.dist-pill--open { background: var(--primary); color: var(--white); }
.dist-pill--open:hover { background: var(--primary-dark); }
.dist-pill--open .dist-pill-div { background: rgba(255,255,255,.34); }
.dist-pill--open .dist-pill-count { background: rgba(255,255,255,.26); color: var(--white); }
.dist-pill--new { background: var(--white); color: #1A4FA0; border: 1.5px solid #1A4FA0; }
.dist-pill--new:hover { background: #EDF3FC; }
.dist-pill--new .dist-pill-div { background: rgba(26,79,160,.35); }
.dist-pill--new .dist-pill-count { background: #EDF3FC; color: #1A4FA0; }
.dist-pill--ok { background: var(--white); color: #1F6B2B; border: 1.5px solid var(--green); }
.dist-pill--ok:hover { background: var(--green-pale); }
.dist-pill--ok .dist-pill-div { background: rgba(46,125,50,.4); }
.dist-pill--ok .dist-pill-count { background: var(--green-pale); color: #1F6B2B; }
.dist-pill--wait { background: var(--white); color: #8A4300; border: 1.5px solid var(--amber); }
.dist-pill--wait:hover { background: var(--amber-pale); }
.dist-pill--wait .dist-pill-div { background: rgba(168,80,0,.4); }
.dist-pill--wait .dist-pill-count { background: var(--amber-pale); color: #8A4300; }
.dist-pill--stop { background: var(--white); color: #A8231B; border: 1.5px solid var(--red); }
.dist-pill--stop:hover { background: var(--red-pale); }
.dist-pill--stop .dist-pill-div { background: rgba(198,40,40,.4); }
.dist-pill--stop .dist-pill-count { background: var(--red-pale); color: #A8231B; }
.dist-pill--off,
.dist-pill--pending {
background: var(--gray-pale); color: var(--gray-mid);
border: 1.5px solid var(--gray-light);
}
.dist-pill--off .dist-pill-div { background: var(--gray-light); }
.dist-pill--pending { padding: 8px 13px; }
.dist-pill-skel {
display: block; width: 78px; height: 11px;
border-radius: 5px; background: var(--gray-light);
position: relative; overflow: hidden;
}
.dist-pill-skel::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%);
transform: translateX(-100%);
animation: dist-sweep 1.25s ease-in-out infinite;
}
@keyframes dist-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.dist-pill-skel::after { animation: none; }
}
.dist-pill-main.dist-copied { font-weight: 700; }
.dist-pill-main:focus-visible,
.dist-pill-caret:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dist-menu-panel {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
min-width: 218px; padding: 5px;
background: var(--white); border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.dist-menu-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; font-family: var(--font-body); font-size: .82rem; font-weight: 500;
color: var(--dark); background: transparent; border: none;
border-radius: var(--radius-xs); cursor: pointer; text-align: left;
}
.dist-menu-item:hover { background: var(--primary-pale); color: var(--primary); }
.dist-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dist-menu-item svg { flex-shrink: 0; }
.dist-origin {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 20px;
border: 1px solid rgba(26,79,160,.3);
font-family: var(--font-head); font-size: .68rem; font-weight: 700;
letter-spacing: .02em; color: #1A4FA0; white-space: nowrap;
cursor: help;
}
.dist-origin svg { flex-shrink: 0; opacity: .8; }
.dist-fav {
flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; color: var(--gray-mid);
cursor: pointer; padding: 0; border-radius: var(--radius-xs);
}
.dist-fav:hover { color: var(--primary); background: var(--primary-pale); }
.dist-fav[aria-pressed="true"] { color: var(--accent); }
.dist-fav[aria-pressed="true"] svg { fill: currentColor; }
.dist-card { flex-wrap: wrap; }
.dist-card .dist-status-row {
display: flex; flex-direction: column; gap: 7px;
padding: 11px 16px 13px;
border-top: 1px solid var(--gray-light);
background: var(--gray-pale);
flex: 0 0 auto;
width: calc(100% + 32px);
margin: 13px -16px -14px;
border-radius: 0 0 6px 6px;
}
.dist-card-has-policy .dist-status-row { width: 100%; margin: 0; border-radius: 0; }
.dist-status-label {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
}
.dist-status-label svg { flex-shrink: 0; }
.dist-status-row--ok .dist-status-label { color: #1F6B2B; }
.dist-status-row--wait .dist-status-label { color: #8A4300; }
.dist-status-row--stop .dist-status-label { color: #A8231B; }
.dist-status-row--new .dist-status-label { color: #1A4FA0; }
.dist-status-row--unknown .dist-status-label { color: var(--gray); }
.dist-url-row { display: flex; align-items: center; gap: 8px; }
.dist-url {
flex: 1; min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .72rem; color: var(--dark2);
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-xs); padding: 7px 10px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dist-url-copy {
flex-shrink: 0; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-xs); color: var(--gray); cursor: pointer; padding: 0;
}
.dist-url-copy:hover { color: var(--primary); border-color: var(--primary-light); }
.dist-url-copy.dist-copied, .dist-url-copy.dist-url-copy--copied { color: var(--green); border-color: var(--green); }
.dist-url-copied { font-size: .72rem; color: var(--green); font-weight: 600; white-space: nowrap; }
.dist-status-label--idsa { align-items: flex-start; gap: 9px; }
.dist-status-label--idsa .dist-idsa-mark {
flex-shrink: 0; width: 32px; height: 32px; margin-top: 1px;
}
.dist-idsa-prefix { color: var(--dark2, #1d2433); }
.dist-url-row--icons { gap: 6px; background: transparent; border: 0; padding: 0; align-self: flex-start; }
.dist-url-open {
flex-shrink: 0; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius-xs); color: var(--gray); text-decoration: none;
}
.dist-url-open:hover { color: var(--primary); border-color: var(--primary-light); }
.dist-url-copy:focus-visible,
.dist-url-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dist-card .dist-error-row {
display: flex; align-items: flex-start; gap: 8px;
flex: 0 0 auto;
width: calc(100% + 32px);
margin: 0 -16px -14px;
padding: 10px 16px 12px;
border-top: 1px solid rgba(198,40,40,.28);
background: var(--red-pale, #FDECEA);
border-radius: 0 0 6px 6px;
color: #A8231B;
}
.dist-card--has-error .dist-status-row { margin-bottom: 0; border-radius: 0; }
.dist-card-has-policy .dist-error-row { width: 100%; margin: 0; border-radius: 0; }
.dist-error-row > svg { flex-shrink: 0; margin-top: 2px; }
.dist-error-text {
flex: 1 1 auto; min-width: 0;
font-size: .76rem; font-weight: 600; line-height: 1.45;
overflow-wrap: break-word;
}
.dist-error-close {
flex-shrink: 0; width: 24px; height: 24px; margin: -2px -4px 0 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: var(--radius-xs);
color: inherit; cursor: pointer; padding: 0; opacity: .75;
}
.dist-error-close:hover { opacity: 1; background: rgba(198,40,40,.12); }
.dist-error-close:focus-visible { outline: 2px solid #A8231B; outline-offset: 1px; }
.dxa-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dxa-badge {
display: inline-flex; align-items: center; gap: 5px;
background: var(--white); border-radius: 20px;
padding: 4px 10px 4px 8px;
font-size: .72rem; font-weight: 600; color: var(--dark);
border: 1px solid var(--gray-light);
}
.dxa-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dxa-badge--ok .dxa-dot { background: var(--green); }
.dxa-badge--wait .dxa-dot { background: var(--amber); }
.dxa-badge--stop .dxa-dot { background: var(--red); }
.dxa-badge--new .dxa-dot { background: #1A4FA0; }
.dxa-badge--off .dxa-dot { background: var(--gray-mid); }
.dxa-status .dxa-badges { flex-direction: column; align-items: flex-start; gap: 4px; }
.dxa-status .dxa-badge {
background: transparent; border: 0; border-radius: 0;
padding: 0; gap: 7px;
font-size: .76rem;
}
.dxa-status a.dxa-badge--link:hover { background: transparent; text-decoration: underline; }
.dxa-sum {
background: var(--white);
border: 1.5px solid #0E3070;
border-radius: var(--radius-sm);
padding: 12px 13px 11px;
}
.dxa-sum-lead {
font-family: var(--font-head);
font-size: .88rem; font-weight: 700; color: #0E3070;
margin: 0 0 5px; line-height: 1.35;
}
.dxa-price {
font-family: var(--font-head);
font-size: 1.08rem; font-weight: 700; color: #0E3070;
margin: 0 0 8px; line-height: 1.35;
}
.dxa-price-per {
font-family: var(--font-body);
font-size: .76rem; font-weight: 500; color: var(--gray);
}
.dxa-sum-login {
display: inline-block; vertical-align: 3px;
margin-left: 4px;
background: var(--white);
border: 1px solid rgba(26,79,160,.3); border-radius: 20px;
padding: 1px 8px;
font-family: var(--font-body);
font-size: .7rem; font-weight: 600; color: #1A4FA0;
white-space: nowrap;
}
.dxa-terms {
list-style: none; margin: 0 0 10px; padding: 0;
display: flex; flex-direction: column; gap: 5px;
}
.dxa-term {
display: flex; align-items: flex-start; gap: 6px;
font-size: .82rem; color: var(--dark2); line-height: 1.4;
}
.dxa-term-tick { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 3px; color: var(--green); }
.dxa-term--none { color: var(--gray); font-style: italic; }
.dxa-flag {
display: inline-flex; align-items: center;
padding: 0 6px; border-radius: 999px;
background: var(--green-pale, #E8F5E9); color: #1F6B2B; border: 1px solid #A5D6A7;
font-size: .66rem; font-weight: 700; letter-spacing: .02em;
vertical-align: 1px; white-space: nowrap;
}
.dxa-sum-warn { font-size: .8rem; color: #8A4300; line-height: 1.5; margin: 0 0 10px; }
.dxa-sum-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; flex-wrap: wrap;
border-top: 1px solid var(--gray-light);
padding-top: 9px;
}
.dxa-contracted {
display: inline-flex; align-items: center; gap: 4px;
background: var(--green-pale); color: #1F6B2B;
border: 1px solid #A5D6A7; border-radius: 999px;
padding: 2px 8px;
font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.dxa-contracted .dxa-term-tick { flex: 0 0 11px; width: 11px; height: 11px; margin: 0; }
.dxa-sum-foot .dxa-sum-btn,
.dxa-sum-btn {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: auto; margin-left: auto;
background: #0E3070; color: var(--white);
border: none; border-radius: 999px;
padding: 6px 14px; font-family: var(--font-body);
font-size: .8rem; font-weight: 700; cursor: pointer;
}
.dxa-sum-foot .dxa-sum-btn:hover { background: #1A4FA0; filter: none; }
.dxa-sum-btn:focus-visible { outline: 2px solid #1A4FA0; outline-offset: 2px; }
.dxa-sum-btn--disabled, .dxa-sum-btn:disabled {
background: var(--gray-pale); color: var(--gray-mid); cursor: not-allowed;
}
.policy-box .bundle-policy-lead {
font-family: var(--font-head); color: #0E3070;
}
.dxa-status { margin-bottom: 16px; }
.dxa-status-title {
font-family: var(--font-head); font-size: .82rem; font-weight: 700;
color: #0E3070; margin: 0 0 8px;
}
.policy-box .policy-lead-sub {
font-size: .78rem; color: var(--dark2); line-height: 1.5; margin: 0 0 11px;
}
@media (max-width: 640px) {
.dist-card .dist-action { margin-top: 0; }
.dist-menu, .dist-pill { width: auto; }
.dist-card .dist-pill { white-space: normal; }
.dist-card .dist-pill-main { text-align: left; }
}
.dist-pill-main.dist-pill-working {
cursor: progress;
opacity: .82;
min-width: 196px;
justify-content: flex-start;
}
.dist-pill-main.dist-pill-working svg {
animation: dist-spin 1s linear infinite;
transform-origin: 50% 50%;
}
@keyframes dist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.dist-pill-main.dist-pill-working svg { animation: none; }
}
.dxa-badge--own .dxa-dot { background: var(--red); }
a.dxa-badge--link { text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
a.dxa-badge--link:hover { border-color: var(--red); background: #FFF5F5; }
a.dxa-badge--link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.type-badge--pod {
background: #E8F0FB;
color: #1A4FA0;
border-color: rgba(26, 79, 160, .24);
margin-left: 6px;
}
.policy-box[data-archived] > *:not(h2):not(.dxa-status--archived) { display: none !important; }
.dxa-status--archived .dxa-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dxa-status--archived [data-archived-badges] .dxa-badges { display: contents; }
.dxa-status--archived .policy-lead-sub { margin-top: 8px; }
.dxa-badge--archived { background: #4A5360; color: #FFFFFF; }
.dxa-badge--archived .dxa-dot { background: #FFFFFF; }
.detail-access-badge.detail-access-badge--archived {
background: #4A5360; color: #FFFFFF; border-color: transparent;
}
.card-access-badge.card-access-badge--archived {
background: #4A5360; color: #FFFFFF;
}
.dist-card--virtual .dist-empty-lead {
margin: 0 0 4px; color: var(--dark); font-size: .88rem; line-height: 1.55;
}
.dist-card--virtual .dist-empty-sub { margin: 0; color: var(--gray); font-size: .8rem; }
.dist-card--virtual template { display: none; }
/* ── css/entity-card.css ── */
:root{
--dx-accent-soft:#FCEBB8;
--dx-accent-line:#B8860B;
--dx-accent-deep:#5A4200;
}
.ec-wrap{container-type:inline-size}
.ec-list{display:flex;flex-direction:column;gap:10px}
.ec-groups{display:flex;flex-direction:column;gap:4px}
a.ec-pill-main,a.ec-menu-item,a.ec-count,a.ec-link,a.ec-title{text-decoration:none}
a.ec-link:hover,a.ec-count:hover,a.ec-title:hover{text-decoration:underline}
.ec{
display:grid; grid-template-columns:1fr auto; column-gap:22px;
background:var(--dx-surface-card);
border:1px solid var(--dx-border);
border-radius:10px;
box-shadow:var(--dx-shadow-card);
padding:15px 17px;
position:relative;
transition:border-color .16s ease, box-shadow .16s ease;
}
.ec:hover{border-color:var(--dx-border-strong);box-shadow:0 2px 10px rgba(7,31,51,.09)}
.ec::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
border-radius:10px 0 0 10px;background:transparent;
}
.ec--ok::before {background:var(--dx-state-open-fg)}
.ec--wait::before{background:var(--dx-state-request-mark)}
.ec--stop::before{background:var(--dx-state-closed-fg)}
.ec--new::before {background:var(--dx-interactive)}
.ec--off::before {background:var(--dx-border-strong)}
.ec-main{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:4px;min-width:0;align-content:start}
.ec-r1{display:flex;align-items:center;gap:9px;min-width:0}
.ec-fam{
flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-head);font-size:.68rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.ec-fam svg{flex-shrink:0}
.ec-fam--pod{
min-width:48px;justify-content:center;padding:3px 9px;border-radius:5px;
background:var(--dx-interactive-soft);color:var(--dx-interactive);
letter-spacing:.04em;
}
.ec-fam--cat{color:var(--dx-text-muted)}
.ec-fam--cat svg{color:var(--dx-brand)}
.ec-fam--clr{
padding:2px 9px 2px 7px;border-radius:5px;
background:var(--dx-interactive-soft);color:var(--dx-interactive);
border:1px solid var(--dx-interactive-border);
}
.ec-fam--clr.ec-fam--go{
background:var(--dx-state-open-bg);color:var(--dx-state-open-fg);
border-color:var(--dx-state-open-fg);
}
.ec-fam--clr.ec-fam--wait{
background:var(--dx-accent-soft);color:var(--dx-accent-deep);
border-color:var(--dx-accent-line);
}
.ec-fam--clr.ec-fam--stop{
background:var(--dx-state-closed-bg);color:var(--dx-state-closed-fg);
border-color:var(--dx-state-closed-fg);
}
.ec-fam--ar{
padding:2px 9px 2px 7px;border-radius:5px;
background:var(--dx-surface-card);color:var(--dx-brand);
border:1.5px solid var(--dx-brand);
}
.ec-family{
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
padding:0 2px 9px;margin-bottom:13px;
border-bottom:1px solid var(--dx-border);
}
.ec-family-name{
display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
font-family:var(--font-head);font-size:.82rem;font-weight:700;
color:var(--dx-brand);
}
.ec-family-name svg{color:var(--dx-interactive)}
.ec-family-what{font-size:.82rem;color:var(--dx-text-muted);min-width:0}
.ec-title{
font-family:var(--font-head);font-size:.98rem;font-weight:600;line-height:1.35;
color:var(--dx-text);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a.ec-title{text-decoration:none}
a.ec-title:hover{color:var(--dx-interactive);text-decoration:underline}
.ec-tag{
flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
padding:1px 8px;border-radius:20px;
font-family:var(--font-head);font-size:.62rem;font-weight:700;letter-spacing:.03em;
color:var(--dx-interactive);border:1px solid var(--dx-interactive-border);
background:var(--dx-interactive-soft);white-space:nowrap;
}
.ec-tag--mute{color:var(--dx-text-muted);border-color:var(--dx-border-strong);background:var(--dx-surface-band-soft)}
.ec-titlesub{
font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
font-size:.72rem;color:var(--dx-text-muted);
margin:-1px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ec-r2{
font-size:.83rem;line-height:1.45;color:var(--dx-text-muted);
display:flex;align-items:center;gap:0 9px;flex-wrap:wrap;min-width:0;max-width:100%;
}
.ec-desc{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
max-width:62ch;
}
.ec-count{
display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
padding:1px 8px 1px 6px;border-radius:20px;
font-size:.72rem;font-weight:600;
background:var(--dx-interactive-soft);color:var(--dx-interactive);
border:1px solid var(--dx-interactive-border);
}
.ec-count b{font-weight:700}
.ec-count--ok {background:var(--dx-state-open-bg);color:var(--dx-state-open-fg);border-color:rgba(31,122,60,.22)}
.ec-count--wait{background:var(--dx-state-request-bg);color:var(--dx-state-request-fg);border-color:rgba(173,85,0,.22)}
.ec-count--mute{background:var(--dx-surface-band-soft);color:var(--dx-text-muted);border-color:var(--dx-border)}
.ec-count--offer{background:var(--dx-interactive-soft);color:var(--dx-interactive);border-color:var(--dx-interactive-border)}
.ec-count--pub{background:var(--dx-brand);color:var(--dx-text-on-dark);border-color:var(--dx-brand)}
.ec-count--pub:hover{filter:brightness(1.08)}
.ec-offer-name--link{text-decoration:none}
.ec-offer-name--link:hover{text-decoration:underline;color:var(--dx-interactive)}
.ec-offer-name--link:focus-visible{outline:2px solid var(--dx-focus-ring);outline-offset:2px}
.ec-offer-n.ec-offer-n--txt{width:auto;min-width:6.4em;justify-content:center;height:auto;padding:2px 9px;border-radius:20px;
font-size:.66rem;letter-spacing:.02em;white-space:nowrap}
.ec-offer-n.ec-offer-n--offer{background:var(--dx-interactive-soft);color:var(--dx-interactive);border-color:var(--dx-interactive-border)}
.ec-offer-n.ec-offer-n--pub{background:var(--dx-brand);color:var(--dx-text-on-dark);border-color:var(--dx-brand)}
.ec-offer-n.ec-offer-n--ok{background:var(--dx-state-open-bg);color:var(--dx-state-open-fg);border-color:rgba(31,122,60,.22)}
.ec-sub .ec-offer:has(a.ec-offer-link, a.ec-offer-name--link){cursor:pointer}
.ec-sub .ec-offer:has(a.ec-offer-link, a.ec-offer-name--link):hover{background:var(--dx-surface-band-soft)}
.ec-kicker{font-family:var(--font-head);font-size:.62rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--dx-text-muted);margin-bottom:2px}
a.ec-m--link{color:var(--dx-interactive);text-decoration:none}
a.ec-m--link:hover{text-decoration:underline}
.ec-r3{
display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;
font-size:.765rem;color:var(--dx-text-muted);margin-top:3px;min-width:0;max-width:100%;
}
.ec-m{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.ec-m svg{flex-shrink:0;opacity:.9}
.ec-org{flex-shrink:0}
.ec-slot{display:inline-flex;align-items:center;gap:6px}
.ec-slot:empty{display:none}
.ec-m b{font-weight:600;color:var(--dx-text);overflow:hidden;text-overflow:ellipsis}
.ec-r2 .sep,.ec-r3 .sep{width:3px;height:3px;border-radius:50%;background:var(--dx-border-strong);flex-shrink:0;align-self:center}
.ec-side{
grid-column:2;grid-row:1;
display:flex;flex-direction:column;align-items:flex-end;
gap:7px;flex-shrink:0;align-self:start;
}
.ec-menu{position:relative}
.ec-pill{
display:inline-flex;align-items:stretch;white-space:nowrap;
border-radius:6px;overflow:hidden;
background:var(--dx-interactive);color:var(--dx-text-on-dark);
border:1.5px solid var(--dx-interactive);
}
.ec-pill-main{
display:flex;align-items:center;gap:7px;
padding:7px 13px;font-family:var(--font-body);
font-size:.815rem;font-weight:600;line-height:1.25;
background:transparent;border:none;color:inherit;cursor:pointer;
}
.ec-pill-main svg{flex-shrink:0}
.ec-pill-div{width:1px;align-self:stretch;background:rgba(255,255,255,.35);flex-shrink:0}
.ec-pill-caret{
display:flex;align-items:center;justify-content:center;width:29px;
background:transparent;border:none;color:inherit;cursor:pointer;padding:0;
}
.ec-pill-caret svg{transition:transform .18s ease}
.ec-menu.is-open .ec-pill-caret svg{transform:rotate(180deg)}
.ec-pill:hover{background:var(--dx-brand);border-color:var(--dx-brand)}
.ec-pill-main:focus-visible,.ec-pill-caret:focus-visible{outline:2px solid var(--dx-focus-ring);outline-offset:2px}
.ec-pill--go{background:var(--dx-state-open-fg);color:var(--dx-text-on-dark);border-color:var(--dx-state-open-fg)}
.ec-pill--go:hover{
background:var(--dx-state-open-deep,#17612F);
border-color:var(--dx-state-open-deep,#17612F);
color:var(--dx-text-on-dark,#fff);
}
.ec-pill--go .ec-pill-div{background:rgba(255,255,255,.35)}
.ec-pill--wait{background:var(--dx-surface-card);color:var(--dx-state-request-fg);border-color:var(--dx-state-request-fg)}
.ec-pill--wait:hover{background:var(--dx-state-request-bg);border-color:var(--dx-state-request-fg)}
.ec-pill--wait .ec-pill-div{background:rgba(173,85,0,.38)}
.ec-pill--stop{background:var(--dx-surface-card);color:var(--dx-state-closed-fg);border-color:var(--dx-state-closed-fg)}
.ec-pill--stop:hover{background:var(--dx-state-closed-bg);border-color:var(--dx-state-closed-fg)}
.ec-pill--stop .ec-pill-div{background:rgba(179,53,44,.38)}
.ec-pill--okline{
background:var(--dx-surface-card);color:var(--dx-state-open-fg);
border-color:var(--dx-state-open-fg);
}
.ec-pill--okline .ec-pill-div{background:rgba(31,122,60,.38)}
.ec-pill--okline:hover{background:var(--dx-state-open-bg);border-color:var(--dx-state-open-fg)}
.ec-pill--ghost{
background:var(--dx-surface-card);color:var(--dx-interactive);
border-color:var(--dx-interactive);
}
.ec-pill--ghost .ec-pill-div{background:var(--dx-interactive-border)}
.ec-pill--ghost:hover{background:var(--dx-interactive-soft);border-color:var(--dx-interactive)}
.ec-pill--off{
background:var(--dx-surface-band);color:var(--dx-text-muted);
border-color:var(--dx-border-strong);
}
.ec-pill--off .ec-pill-div{background:var(--dx-border-strong)}
.ec-pill--off .ec-pill-main{cursor:not-allowed}
.ec-pill--off:hover{background:var(--dx-surface-band);border-color:var(--dx-border-strong)}
.ec-pill--danger{background:var(--dx-surface-card);color:var(--dx-state-closed-fg);border-color:var(--dx-state-closed-fg)}
.ec-pill--danger .ec-pill-div{background:rgba(179,53,44,.35)}
.ec-pill--danger:hover{background:var(--dx-state-closed-bg);border-color:var(--dx-state-closed-fg)}
.ec-pill-n{
display:inline-flex;align-items:center;justify-content:center;
min-width:17px;height:17px;padding:0 5px;border-radius:9px;
font-size:.64rem;font-weight:700;line-height:1;
background:rgba(255,255,255,.26);color:inherit;
}
.ec-pill--ghost .ec-pill-n,.ec-pill--off .ec-pill-n,.ec-pill--danger .ec-pill-n,
.ec-pill--wait .ec-pill-n,.ec-pill--stop .ec-pill-n{
background:var(--dx-surface-band);color:inherit;
}
.ec-menu-panel{
position:absolute;top:calc(100% + 4px);right:0;z-index:40;
min-width:224px;padding:5px;
background:var(--dx-surface-card);border:1px solid var(--dx-border-strong);
border-radius:8px;box-shadow:var(--dx-shadow-menu);
}
.ec-menu-panel[hidden]{display:none}
.ec-menu-item{
display:flex;align-items:center;gap:9px;width:100%;
padding:8px 10px;font-family:var(--font-body);font-size:.81rem;font-weight:500;
color:var(--dx-text);background:transparent;border:none;border-radius:5px;
cursor:pointer;text-align:left;
}
.ec-menu-item:hover{background:var(--dx-interactive-soft);color:var(--dx-interactive)}
.ec-menu-item svg{flex-shrink:0;opacity:.8}
.ec-menu-item--off{color:var(--dx-text-faint);cursor:not-allowed}
.ec-menu-item--off:hover{background:transparent;color:var(--dx-text-faint)}
.ec-menu-item--danger{color:var(--dx-state-closed-fg)}
.ec-menu-item--danger:hover{background:var(--dx-state-closed-bg);color:var(--dx-state-closed-fg)}
.ec-menu-sep{height:1px;background:var(--dx-border);margin:4px 6px}
.ec-state{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-head);font-size:.715rem;font-weight:700;
letter-spacing:.01em;white-space:nowrap;padding-right:2px;
}
.ec-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ec-state--ok {color:var(--dx-state-open-fg)} .ec-state--ok .ec-dot{background:var(--dx-state-open-fg)}
.ec-state--wait{color:var(--dx-state-request-fg)} .ec-state--wait .ec-dot{background:var(--dx-state-request-mark)}
.ec-state--stop{color:var(--dx-state-closed-fg)} .ec-state--stop .ec-dot{background:var(--dx-state-closed-fg)}
.ec-state--new {color:var(--dx-interactive)} .ec-state--new .ec-dot{background:var(--dx-interactive)}
.ec-state--off {color:var(--dx-text-muted)} .ec-state--off .ec-dot{background:var(--dx-text-muted)}
.ec-state--off .ec-dot{background:transparent;border:2px solid var(--dx-text-muted)}
.ec-state-sub{font-family:var(--font-body);font-size:.7rem;font-weight:500;color:var(--dx-text-muted);letter-spacing:0}
.ec-links{
grid-column:2;grid-row:2;justify-self:end;
display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-top:5px;
}
.ec-link{
display:inline-flex;align-items:center;gap:5px;
font-size:.745rem;font-weight:600;color:var(--dx-interactive);
text-decoration:none;white-space:nowrap;padding:1px 0;border-radius:3px;
}
.ec-link:hover{text-decoration:underline}
.ec-link:focus-visible{outline:2px solid var(--dx-focus-ring);outline-offset:2px}
.ec-link svg{opacity:.7}
.ec-link-n{
display:inline-flex;align-items:center;justify-content:center;
min-width:17px;height:17px;padding:0 5px;border-radius:9px;
background:var(--dx-interactive-soft);color:var(--dx-interactive);
font-size:.64rem;font-weight:700;line-height:1;
}
a.ec-count{text-decoration:none}
a.ec-count:hover{border-color:currentColor;text-decoration:underline}
.ec-skel{display:block;width:84px;height:11px;border-radius:5px;background:var(--dx-surface-band);position:relative;overflow:hidden}
.ec-skel::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);
transform:translateX(-100%);animation:ec-sweep 1.25s ease-in-out infinite;
}
@keyframes ec-sweep{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ec-skel::after{animation:none}}
.ec-foot{
grid-column:1 / -1;
display:flex;align-items:center;gap:9px;
margin:13px -17px -15px;padding:10px 17px 11px;
border-top:1px solid var(--dx-border);
background:var(--dx-surface-raised);
border-radius:0 0 9px 9px;
}
.ec-foot-label{
display:flex;align-items:center;gap:6px;flex-shrink:0;
font-family:var(--font-head);font-size:.7rem;font-weight:700;color:var(--dx-state-open-fg);
}
.ec-url{
flex:1;min-width:0;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.715rem;
color:var(--dx-text-muted);background:var(--dx-surface-card);
border:1px solid var(--dx-border);border-radius:5px;padding:6px 9px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ec-url-copy{
flex-shrink:0;width:29px;height:29px;display:flex;align-items:center;justify-content:center;
background:var(--dx-surface-card);border:1px solid var(--dx-border);border-radius:5px;
color:var(--dx-text-muted);cursor:pointer;padding:0;
}
.ec-url-copy:hover{color:var(--dx-interactive);border-color:var(--dx-interactive-border)}
.ec-url-copy.ec-copied{color:var(--dx-state-open-fg);border-color:var(--dx-state-open-fg);background:var(--dx-state-open-bg)}
.ec-foot--progress{background:var(--dx-state-request-bg);border-top-color:rgba(173,85,0,.25)}
.ec-foot--progress .ec-foot-label{color:var(--dx-state-request-fg)}
.ec-bar{flex:1;height:5px;border-radius:3px;background:rgba(173,85,0,.16);overflow:hidden;min-width:60px}
.ec-bar i{display:block;height:100%;width:44%;border-radius:3px;background:var(--dx-state-request-mark)}
.ec-sub{
grid-column:1 / -1;
margin:11px -17px -15px;padding:4px 17px 6px;
border-top:1px solid var(--dx-border);
background:var(--dx-surface-raised);
border-radius:0 0 9px 9px;
}
.ec-sub[hidden]{display:none}
.ec--has-foot .ec-sub{margin-bottom:0;border-radius:0}
.ec-sub:has(~ .ec-sub:not([hidden])){margin-bottom:0;border-radius:0}
.ec-sub:not([hidden]) ~ .ec-sub{margin-top:0}
.ec-offer{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:8px 0;border-bottom:1px solid var(--dx-border);
font-size:.8rem;color:var(--dx-text-muted);
}
.ec-offer:last-of-type{border-bottom:none}
.ec-offer-n{
flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
width:19px;height:19px;border-radius:5px;
background:var(--dx-accent-soft);color:var(--dx-accent-deep);
border:1px solid var(--dx-accent-line);
font-family:var(--font-head);font-size:.64rem;font-weight:700;line-height:1;
}
.ec-offer-name{
flex:1 1 200px;min-width:0;font-weight:600;color:var(--dx-text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ec-offer-chips{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.ec-chip{
display:inline-flex;align-items:center;padding:1px 8px;border-radius:20px;
background:var(--dx-surface-card);border:1px solid var(--dx-border-strong);
font-size:.7rem;color:var(--dx-text-muted);white-space:nowrap;
}
.ec-offer-price{flex-shrink:0;font-weight:600;color:var(--dx-text)}
.ec-offer-link{
flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:5px;
font-size:.765rem;font-weight:600;color:var(--dx-interactive);
text-decoration:none;white-space:nowrap;
padding:3px 2px;border-radius:3px;
}
.ec-offer-link:hover{text-decoration:underline}
.ec-offer-link:focus-visible{outline:2px solid var(--dx-focus-ring);outline-offset:2px}
.ec-offer-link svg{opacity:.7}
.ec-sub-all{
display:inline-flex;align-items:center;gap:6px;
margin:6px 0 4px;font-size:.765rem;font-weight:600;
color:var(--dx-interactive);text-decoration:none;
}
.ec-sub-all:hover{text-decoration:underline}
button.ec-count svg{margin-left:1px;opacity:.75;transition:transform .18s ease}
button.ec-count[aria-expanded="true"] svg{transform:rotate(180deg)}
.ec-offer--skel{pointer-events:none}
.ec-offer--skel .ec-offer-name{
height:11px;border-radius:5px;background:var(--dx-surface-band);
position:relative;overflow:hidden;max-width:220px;
}
.ec-offer--skel .ec-offer-name::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);
transform:translateX(-100%);animation:ec-sweep 1.25s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.ec-offer--skel .ec-offer-name::after{animation:none}}
button.ec-count{font-family:var(--font-body);cursor:pointer}
button.ec-count[aria-expanded="true"]{border-color:currentColor}
@container (max-width: 619px){
.ec-sub{margin-left:-17px;margin-right:-17px}
.ec-offer{gap:6px 10px}
.ec-offer-name{flex-basis:100%;white-space:normal}
}
@media (max-width: 619px){
.ec-sub{margin-left:-17px;margin-right:-17px}
.ec-offer-name{flex-basis:100%;white-space:normal}
}
@container (max-width: 419px){ .ec-sub{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px} }
@media (max-width: 419px){ .ec-sub{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px} }
@container (max-width: 619px){
.ec{grid-template-columns:minmax(0,1fr);row-gap:11px}
.ec-side{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-end;width:100%;min-width:0;max-width:100%}
.ec-main{grid-column:1;grid-row:2}
.ec-links{grid-column:1;grid-row:3;justify-self:stretch}
.ec-r1{align-items:flex-start}
.ec-fam{margin-top:2px}
.ec-title{white-space:normal;overflow-wrap:anywhere}
.ec-desc{white-space:normal;max-width:none;overflow-wrap:anywhere}
.ec-r3{row-gap:3px}
.ec-foot{min-width:0;flex-wrap:wrap}
.ec-foot-label{min-width:0}
.ec-links{flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:flex-start;gap:6px;margin-top:8px;width:100%}
.ec-link{padding:4px 10px;border:1px solid var(--dx-interactive-border);
border-radius:20px;background:var(--dx-interactive-soft)}
.ec-link:hover{text-decoration:none;border-color:var(--dx-interactive)}
}
@container (max-width: 419px){
.ec{padding:13px 14px}
.ec-r1{flex-wrap:wrap}
.ec-fam{order:1}
.ec-title{order:2;flex:1 1 100%}
.ec-tag{order:3}
.ec-menu{width:100%}
.ec-pill{width:100%}
.ec-pill-main{flex:1;min-height:40px;justify-content:center;text-align:center}
.ec-pill-caret{width:42px}
.ec-menu-panel{left:0;right:0;min-width:0}
.ec-side{align-items:stretch}
.ec-state{align-self:flex-end}
.ec-state-sub{align-self:flex-end}
.ec-r3{flex-direction:column;align-items:flex-start;gap:2px}
.ec-r3 .sep{display:none}
.ec-m{white-space:normal;overflow-wrap:anywhere;max-width:100%;align-items:flex-start}
.ec-m svg{margin-top:3px}
.ec-m b{white-space:normal;min-width:0}
.ec-foot{flex-wrap:wrap;gap:7px}
.ec-foot-label{width:100%}
.ec-url{flex:1 1 0;min-width:110px}
.ec-foot{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}
@media (max-width: 619px){
.ec{grid-template-columns:minmax(0,1fr);row-gap:11px}
.ec-side{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-end;width:100%;min-width:0;max-width:100%}
.ec-main{grid-column:1;grid-row:2}
.ec-links{grid-column:1;grid-row:3;justify-self:stretch}
.ec-r1{align-items:flex-start}
.ec-fam{margin-top:2px}
.ec-title{white-space:normal;overflow-wrap:anywhere}
.ec-desc{white-space:normal;max-width:none;overflow-wrap:anywhere}
.ec-r3{row-gap:3px}
.ec-foot{min-width:0;flex-wrap:wrap}
.ec-foot-label{min-width:0}
.ec-links{flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:flex-start;gap:6px;margin-top:8px;width:100%}
.ec-link{padding:4px 10px;border:1px solid var(--dx-interactive-border);
border-radius:20px;background:var(--dx-interactive-soft)}
table.spec{display:block;overflow-x:auto}
}
@media (max-width: 419px){
.ec{padding:13px 14px}
.ec-r1{flex-wrap:wrap}
.ec-fam{order:1}
.ec-title{order:2;flex:1 1 100%}
.ec-tag{order:3}
.ec-menu{width:100%}
.ec-pill{width:100%}
.ec-pill-main{flex:1;min-height:40px;justify-content:center;text-align:center}
.ec-pill-caret{width:42px}
.ec-menu-panel{left:0;right:0;min-width:0}
.ec-side{align-items:stretch}
.ec-state,.ec-state-sub{align-self:flex-end}
.ec-r3{flex-direction:column;align-items:flex-start;gap:2px}
.ec-r3 .sep{display:none}
.ec-m{white-space:normal;overflow-wrap:anywhere;max-width:100%;align-items:flex-start}
.ec-m svg{margin-top:3px}
.ec-m b{white-space:normal;min-width:0}
.ec-foot{flex-wrap:wrap;gap:7px;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
.ec-foot-label{width:100%}
.ec-url{flex:1 1 0;min-width:110px}
}
.ec-group{
display:flex;align-items:center;gap:10px;width:100%;
min-height:38px;padding:8px 16px;
background:var(--dx-surface-band);border:1px solid var(--dx-border-strong);
border-radius:8px;cursor:pointer;text-align:left;
font-family:var(--font-head);color:var(--dx-brand);
}
.ec-group:hover{background:var(--dx-surface-work)}
.ec-group:focus-visible{outline:2px solid var(--dx-focus-ring);outline-offset:2px}
.ec-group-caret{flex-shrink:0;transition:transform .18s ease;opacity:.7}
.ec-group[aria-expanded="false"] .ec-group-caret{transform:rotate(-90deg)}
.ec-group-icon{flex-shrink:0;color:var(--dx-interactive)}
.ec-group-title{
flex:1;min-width:0;font-size:.82rem;font-weight:700;letter-spacing:.03em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ec-group-n{
flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:20px;padding:0 7px;border-radius:10px;
background:var(--dx-surface-card);border:1px solid var(--dx-border-strong);
font-size:.7rem;font-weight:700;color:var(--dx-text-muted);
}
.ec-group-body{display:flex;flex-direction:column;gap:10px;margin:10px 0 22px 14px}
.ec-group-body[hidden]{display:none}
@media (max-width:619px){ .ec-group-body{margin-left:0} }
.ec-famtop{display:none}
.ec-statebox{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
@container (max-width: 619px){
.ec{grid-template-columns:auto minmax(0,1fr)}
.ec-side{display:contents}
.ec-menu{grid-column:1 / -1;grid-row:1;justify-self:end}
.ec-famtop{display:flex;grid-column:1;grid-row:2;align-self:center}
.ec-statebox{grid-column:2;grid-row:2;justify-self:end;align-self:center;
flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;
gap:3px 10px;min-width:0}
.ec-main{grid-column:1 / -1;grid-row:3}
.ec-links{grid-column:1 / -1;grid-row:4}
.ec:has(.ec-famtop) .ec-r1 > .ec-fam{display:none}
.ec-famtop .ec-fam{margin-top:0}
}
@media (max-width: 619px){
.ec{grid-template-columns:auto minmax(0,1fr)}
.ec-side{display:contents}
.ec-menu{grid-column:1 / -1;grid-row:1;justify-self:end}
.ec-famtop{display:flex;grid-column:1;grid-row:2;align-self:center}
.ec-statebox{grid-column:2;grid-row:2;justify-self:end;align-self:center;
flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;
gap:3px 10px;min-width:0}
.ec-main{grid-column:1 / -1;grid-row:3}
.ec-links{grid-column:1 / -1;grid-row:4}
.ec:has(.ec-famtop) .ec-r1 > .ec-fam{display:none}
.ec-famtop .ec-fam{margin-top:0}
}
@container (max-width: 419px){ .ec-menu{justify-self:stretch} }
@media (max-width: 419px){ .ec-menu{justify-self:stretch} }
.ec-offer--off .ec-offer-name{color:var(--dx-text-muted);font-weight:500}
.ec-offer--off .ec-offer-n{opacity:.6}
.ec-offer-state{margin-left:auto;flex-shrink:0;font-family:var(--font-head);font-size:.72rem;font-weight:700;
color:var(--dx-state-closed-fg)}
/* ── css/publicaties.css ── */
.pl-panel {
background: var(--dx-surface-card, #fff);
border: 1px solid var(--dx-border, #E5DFD5);
border-radius: 12px;
box-shadow: var(--dx-shadow-card, 0 1px 3px rgba(7, 31, 51, .06));
margin-bottom: 14px;
}
.pl-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-bottom: 1px solid var(--dx-divider, #EFEBE4);
}
.pl-seg {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 8px 0 14px;
margin: 0;
font: inherit;
font-size: .86rem;
font-weight: 600;
color: var(--dx-text, #1D2B36);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
white-space: nowrap;
transition: background-color .16s ease-out, color .16s ease-out, transform .12s ease-out;
}
.pl-seg-n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
font-size: .76rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--dx-text, #1D2B36);
background: var(--dx-surface-band, #EFEBE4);
}
.pl-seg:hover { background: var(--dx-surface-band-soft, #F5F1EA); }
.pl-seg:active { transform: scale(.96); }
.pl-seg:focus-visible {
outline: 2px solid var(--dx-focus-ring, #15568F);
outline-offset: 2px;
}
.pl-seg.is-active,
.pl-seg.is-active:hover {
background: var(--dx-brand, #0B3557);
color: var(--dx-text-on-dark, #FFFFFF);
border-color: var(--dx-brand, #0B3557);
}
.pl-seg.is-active .pl-seg-n {
background: var(--dx-surface-card, #FFFFFF);
color: var(--dx-brand, #0B3557);
}
.pl-seg[disabled] { cursor: progress; color: var(--dx-text-muted, #5E6C75); }
.pl-seg[disabled]:hover { background: transparent; }
.pl-seg[disabled]:active { transform: none; }
.pl-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
padding: 10px 14px;
}
.pl-toolbar--2 { padding-top: 0; }
.pl-toolbar--2 .pl-search { flex: 0 1 340px; }
.pl-toolbar--2 .pl-search input { width: 100%; }
.pl-toolbar .gs-wrap { flex-direction: row; align-items: center; gap: 8px; }
.pl-toolbar .gs-label { font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: var(--dx-text-muted, #5E6C75); }
.pl-toolbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.pl-count {
font-size: .82rem;
font-weight: 600;
color: var(--dx-text, #1D2B36);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pl-count-of { font-weight: 400; color: var(--dx-text-muted, #5E6C75); }
.pl-search {
position: relative;
display: inline-flex;
align-items: center;
}
.pl-search-icon {
position: absolute;
left: 10px;
color: var(--dx-text-faint, #8E9AA1);
pointer-events: none;
}
.pl-search input {
width: 220px;
height: 44px;
padding: 0 10px 0 32px;
font-family: var(--font-body);
font-size: .86rem;
color: var(--dx-text, #1D2B36);
background: var(--dx-surface-card, #fff);
border: 1px solid var(--dx-border-strong, #D8D0C2);
border-radius: var(--radius-sm, 8px);
transition: border-color .16s ease-out, box-shadow .16s ease-out;
}
.pl-search input::placeholder { color: var(--dx-text-muted, #5E6C75); }
.pl-search input:hover { border-color: var(--dx-line-control, #8B7E64); }
.pl-search input:focus { border-color: var(--dx-interactive, #15568F); box-shadow: 0 0 0 2px var(--dx-interactive-soft, #E8F1FA); }
.pl-search input:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 1px; box-shadow: none; }
.pl-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pl-sort {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pl-sort > span {
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--dx-text-muted, #5E6C75);
white-space: nowrap;
}
.pl-sort > select {
height: 44px;
padding: 0 28px 0 10px;
font-family: var(--font-body);
font-size: .86rem;
color: var(--dx-text, #1D2B36);
background-color: var(--dx-surface-card, #fff);
border: 1px solid var(--dx-border-strong, #D8D0C2);
border-radius: var(--radius-sm, 8px);
cursor: pointer;
}
.pl-sort > select:hover { border-color: var(--dx-line-control, #8B7E64); }
.pl-sort > select:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 1px; }
.pl-panel .sr-only,
.pl-search .sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pl-cards .ec-count--mute {
color: var(--dx-text-muted, #5E6C75);
background: var(--dx-surface-band-soft, #F5F1EA);
border-color: var(--dx-border, #E5DFD5);
}
.pl-cards .ec-count--mute b { color: var(--dx-text, #1D2B36); }
.pl-cards button.ec-count--mute:hover,
.pl-cards a.ec-count--mute:hover {
color: var(--dx-text, #1D2B36);
background: var(--dx-surface-band, #EFEBE4);
border-color: var(--dx-border-strong, #D8D0C2);
text-decoration: none;
}
.pl-cards button.ec-count[aria-expanded="true"] {
color: var(--dx-text, #1D2B36);
border-color: var(--dx-border-strong, #D8D0C2);
}
.pl-cards .ec-count:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 2px; }
.pl-jump { margin-left: 1px; opacity: .7; flex-shrink: 0; transition: transform .16s ease-out, opacity .16s ease-out; }
.pl-cards a.ec-count:hover .pl-jump { opacity: 1; transform: translateX(2px); }
.pl-cards .ec-r3:not(:has(.ec-org, .ec-count, .ec-slot:not(:empty))) { display: none; }
.pl-cards a.ec-state { text-decoration: none; }
.pl-cards a.ec-state:hover { text-decoration: underline; text-underline-offset: 2px; }
.pl-cards a.ec-state:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 2px; border-radius: 4px; }
.pl-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 40px 24px 36px;
background: var(--dx-surface-card, #fff);
border: 1px dashed var(--dx-border-strong, #D8D0C2);
border-radius: 12px;
color: var(--dx-text-muted, #5E6C75);
}
.pl-empty-title {
margin: 0;
font-family: var(--font-head);
font-size: 1.05rem;
font-weight: 700;
color: var(--dx-text, #1D2B36);
text-wrap: balance;
}
.pl-empty-text { margin: 0; font-size: .9rem; max-width: 46ch; text-wrap: pretty; }
.pl-empty-action {
margin-top: 14px;
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 18px;
font: inherit;
font-size: .88rem;
font-weight: 600;
color: var(--dx-text-on-dark, #FFFFFF);
background: var(--dx-interactive, #15568F);
border: 1px solid var(--dx-interactive, #15568F);
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease-out, transform .12s ease-out;
}
.pl-empty-action:hover { background: var(--dx-brand, #0B3557); border-color: var(--dx-brand, #0B3557); color: var(--dx-text-on-dark, #FFFFFF); text-decoration: none; }
.pl-empty-action:active { transform: scale(.96); }
.pl-empty-action:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 2px; }
@media (max-width: 820px) {
.pl-toolbar-right { margin-left: 0; width: 100%; }
.pl-search { flex: 1 1 auto; }
.pl-search input { width: 100%; }
}
@media (max-width: 560px) {
.pl-status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pl-status::-webkit-scrollbar { display: none; }
.pl-seg { padding: 0 6px 0 11px; font-size: .82rem; }
.pl-toolbar .gs-wrap, .pl-toolbar .gs-switch { flex-wrap: wrap; max-width: 100%; }
.pl-toolbar .pl-toolbar-right { width: 100%; }
.pl-sort > span { display: none; }
.pl-sort > select { flex: 1 1 auto; width: 100%; }
.pl-sort { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pl-seg, .pl-jump, .pl-empty-action { transition: none; }
.pl-seg:active, .pl-empty-action:active { transform: none; }
}
/* ── css/contracten.css ── */
@media (max-width: 820px) {
.ctr-panel .pl-status { flex-wrap: wrap; overflow-x: visible; }
}
/* ── css/offer-modal-cards.css ── */
.omx-card.omx-offer {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 11px 14px 12px;
background: var(--dx-surface-card, #fff);
border: 1px solid var(--dx-border, #D9DDE3);
border-radius: 10px;
box-shadow: var(--dx-shadow-card, 0 1px 3px rgba(7, 31, 51, .06));
cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease;
}
.omx-card.omx-offer:hover { border-color: var(--dx-border-strong, #B9C2CC); }
.omx-card.omx-offer.is-selected {
background: var(--dx-surface-card, #fff);
border-color: var(--dx-brand, #0B3557);
box-shadow: 0 0 0 3px rgba(11, 53, 87, .18);
}
.omx-card.omx-offer[role="radio"]:focus-visible {
outline: 2px solid var(--dx-brand, #0B3557);
outline-offset: 2px;
}
.omx-offer-r1 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.omx-offer .ovc-fav-btn {
position: static;
width: 24px; height: 24px;
opacity: 1;
}
.omx-offer .omx-radio {
position: static;
flex: 0 0 auto;
margin-left: auto;
}
.omx-offer .ec-fam { order: 0; }
.omx-offer .ovc-contracted {
display: inline-flex;
align-items: center;
margin: 0;
padding: 1px 8px;
border: 1px solid transparent;
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.omx-offer-title {
font-family: var(--font-head, inherit);
font-size: .92rem;
font-weight: 600;
line-height: 1.35;
color: var(--dx-text, #16222B);
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.omx-offer-title.is-none { color: var(--dx-text-muted, #5B6770); font-weight: 500; font-style: italic; }
.omx-offer-dist {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
font-size: .8rem;
}
.omx-offer-key {
flex: 0 0 auto;
font-size: .66rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dx-text-muted, #5B6770);
}
.omx-offer-val {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--dx-text, #16222B);
font-weight: 500;
}
.omx-main .omx-cards-head { margin: 0 0 10px; }
.omx-status-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
margin: -4px 0 10px;
font-size: .82rem;
color: var(--dx-brand, #0B3557);
}
.omx-status-count { font-weight: 600; }
.omx-status-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.omx-status-badges .dxa-badges { display: contents; }
.omx-main .omx-dist-filter { margin: 0 0 10px; }
.omx-summary-title .omx-subject-profile {
margin-left: 6px;
font-size: .76rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--dx-interactive, #1A4FA0);
}
.omx-summary-title [data-provider-badges] img { height: 14px; vertical-align: -2px; margin-left: 5px; }
.omx-fact-compliance {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
}
.omx-fact-date { font-size: .8rem; color: var(--dx-text-muted, #5B6770); }
.omx-dossier-copy {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 8px;
border: 1px solid var(--dx-interactive-border, rgba(26, 79, 160, .3));
border-radius: 999px;
background: var(--dx-interactive-soft, #E8F0FB);
color: var(--dx-interactive, #1A4FA0);
font: inherit;
font-size: .72rem;
font-weight: 600;
line-height: 1.6;
cursor: pointer;
}
.omx-dossier-copy:hover { border-color: var(--dx-interactive, #1A4FA0); }
.omx-dossier-copy:focus-visible { outline: 2px solid var(--dx-interactive, #1A4FA0); outline-offset: 2px; }
.omx-dossier-copy.is-copied {
background: var(--dx-state-open-bg, #E6F4EA);
color: var(--dx-state-open-fg, #1E6B34);
border-color: var(--dx-state-open-fg, #1E6B34);
}
.offer-modal-section-conditions .omx-obligations {
margin: 0 0 12px;
padding: 0;
border-top: 0;
}
.omx-summary-inner > .omx-owner-actions {
margin: -8px 16px 14px;
padding-top: 0;
border-top: 0;
}
@media (max-width: 900px) {
.omx { flex-direction: column; }
.omx-main { border-right: 0; border-bottom: 1px solid #C5DCF5; }
.omx-summary { border-bottom: 0; }
.omx-card.omx-offer.is-selected { order: 0; }
}
@media (max-width: 600px) {
.offer-compare-backdrop { padding: 0; }
.offer-compare-backdrop .offer-modal-window {
max-width: none;
max-height: none;
min-height: 100dvh;
height: 100dvh;
border-radius: 0;
margin: 0;
}
.omx-main { padding: 14px 14px 16px; }
.omx-summary-actions {
position: sticky;
bottom: 0;
padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--gray-pale, #F4F2F8);
box-shadow: 0 -1px 0 var(--ds-border, #e5e7eb);
}
.omx-offer-val { white-space: normal; }
}
.omx-card.omx-offer { border-color: rgba(14, 48, 112, .28); }
.omx-card.omx-offer:hover { border-color: rgba(14, 48, 112, .55); }
.omx-card.omx-offer.is-selected {
border: 1.5px solid #0E3070;
box-shadow: 0 0 0 3px rgba(14, 48, 112, .14);
}
.omx-offer-title { color: #0E3070; font-weight: 700; }
.omx-terms-card {
background: var(--white, #fff);
border: 1.5px solid #0E3070;
border-radius: var(--radius-sm, 8px);
padding: 12px 14px;
}
.omx-price {
margin: 0 0 10px;
font-family: var(--font-head, inherit);
font-size: 1.1rem; font-weight: 700; line-height: 1.35;
color: #0E3070;
}
.omx-price-per {
font-family: var(--font-body, inherit);
font-size: .78rem; font-weight: 500;
color: var(--gray, #53616F);
}
.omx-terms-card .omx-cond-boxes { gap: 8px; }
.omx-terms-card .omx-cond-box {
border: 0; background: transparent; padding: 0; border-radius: 0;
}
.omx-terms-card .omx-cond-box-head { align-items: center; gap: 6px; margin-bottom: 2px; }
.omx-cond-tick { flex: 0 0 13px; color: var(--green, #2E7D32); }
.omx-terms-card .omx-cond-box-title {
font-size: .86rem; font-weight: 600; color: var(--dark2, #2D2450);
}
.omx-terms-card .omx-cond-rows { padding-left: 15px; }
.omx-offer-audience { margin: 4px 0 0; font-size: .76rem; }
.omx-fact-audience .omx-fact-val { display: inline-flex; align-items: center; gap: 4px; }
.omx-fact-audience .ovc-audience-icon { margin-top: 0; }
.omx-participant-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 4px;
}
.omx-participant { font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.omx-participant-link { color: var(--dx-text, #16222B); text-decoration: underline; text-underline-offset: 2px; }
.omx-participant.is-me .omx-participant-link { font-weight: 700; }
.omx-participant-you {
display: inline-block; margin-left: 4px;
padding: 0 6px; border-radius: 999px;
background: var(--green-pale, #E8F5E9); color: #1F6B2B; border: 1px solid #A5D6A7;
font-size: .66rem; font-weight: 700; vertical-align: 1px;
}
/* ── css/collection-badge.css ── */
:root {
--cb-ink-dark: #061525;
--cb-lightblue: #2D6AAD;
--cb-blue: #0B3557;
--cb-orange: #FB8C00;
--cb-yellow: #FFBA08;
--cb-acc-public: var(--access-public, #2E7D32);
--cb-acc-restricted: var(--access-restricted, #A1500C);
--cb-acc-private: var(--access-private, #D60D2B);
--cb-acc-archived: #4A5360;
--cb-acc-unknown: #5A6472;
}
.cb {
position: relative;
display: inline-flex; align-items: center;
flex-shrink: 0;
height: 18px; padding: 0 9px;
border-radius: 999px;
font-size: .68rem; font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
box-sizing: border-box;
border: 0;
}
.cb--blue { background: var(--cb-blue); color: #FFFFFF; }
.cb--lightblue { background: var(--cb-lightblue); color: #FFFFFF; }
.cb--orange { background: var(--cb-orange); color: var(--cb-ink-dark); }
.cb--yellow { background: var(--cb-yellow); color: var(--cb-ink-dark); }
.cb--hero {
height: 24px; padding: 0 12px;
font-size: .72rem; letter-spacing: .06em;
box-shadow: 0 0 0 2px #FFFFFF;
}
a.cb--link { text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
a.cb--link:hover { box-shadow: 0 0 0 3px #FFFFFF, 0 2px 6px rgba(0,0,0,.25); transform: translateY(-1px); }
a.cb--link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { a.cb--link, a.cb--link:hover { transition: none; transform: none; } }
.basket-card-badges .cb { height: 17px; font-size: .64rem; }
.cb .visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.card-accent.cb-accent--lightblue,
.basket-card-accent.cb-accent--lightblue { background: var(--cb-lightblue); }
.card-accent.cb-accent--blue,
.basket-card-accent.cb-accent--blue { background: var(--cb-blue); }
.card-accent.cb-accent--orange,
.basket-card-accent.cb-accent--orange { background: var(--cb-orange); }
.card-accent.cb-accent--yellow,
.basket-card-accent.cb-accent--yellow { background: var(--cb-yellow); }
.card-accent.cb-accent--none,
.basket-card-accent.cb-accent--none { background: var(--cb-yellow); }
.card-collection {
display: flex; align-items: center; gap: 6px;
min-width: 0;
font-size: .76rem; color: var(--gray, #5A6472); line-height: 1.3;
}
.card-collection svg { flex-shrink: 0; opacity: .8; }
.card-collection-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.basket-card-info .card-collection { font-size: .72rem; margin-top: 2px; }
.card-access-badge[class],
.detail-access-badge[class] {
background: #FFFFFF;
border: 1.5px solid currentColor;
box-sizing: border-box;
}
.card-access-badge.badge-public, .detail-access-badge.badge-public { color: var(--cb-acc-public); }
.card-access-badge.badge-restricted, .detail-access-badge.badge-restricted { color: var(--cb-acc-restricted); }
.card-access-badge.badge-private, .detail-access-badge.badge-private { color: var(--cb-acc-private); }
.card-access-badge.badge-unknown, .detail-access-badge.badge-unknown { color: var(--cb-acc-unknown); }
.card-access-badge.card-access-badge--archived,
.detail-access-badge.detail-access-badge--archived { color: var(--cb-acc-archived); }
/* ── css/datahubs.css ── */
#datahubsPage .dh-section { margin-bottom: 44px; }
#datahubsPage .dh-section:first-child { margin-top: 0; }
#datahubsPage .dh-section:last-child { margin-bottom: 8px; }
#datahubsPage .dh-section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 6px;
}
#datahubsPage .dh-section-title {
font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
color: var(--dark); letter-spacing: -0.02em;
}
#datahubsPage .dh-section-icon {
display: inline-flex; align-items: center;
vertical-align: -3px; margin-right: 9px;
color: var(--primary);
}
#datahubsPage .dh-section-count {
font-size: .8rem; font-weight: 600; color: var(--gray);
white-space: nowrap;
}
#datahubsPage .dh-section-sub {
margin: 0 0 18px; font-size: .88rem; color: var(--gray); line-height: 1.55;
max-width: 72ch;
}
#datahubsPage .dh-section--boxed {
background: var(--fastlane-3, #DAEBFB);
border-radius: 18px;
margin: 0 -20px 44px;
padding: 22px 20px 26px;
}
#datahubsPage .dh-section--boxed .dh-section-sub { margin-bottom: 14px; }
.dh-card-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1103px) {
.dh-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 745px) {
.dh-card-grid { grid-template-columns: 1fr; }
}
.dh-card {
display: flex; flex-direction: column;
background: var(--white); border: 1px solid var(--gray-light);
border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
min-width: 0;
}
.dh-card-top {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.dh-card-mark {
flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--primary-pale); color: var(--primary);
}
.dh-card-mark svg { width: 20px; height: 20px; opacity: .7; }
.dh-card-mark--logo { background: var(--white); padding: 4px; overflow: hidden; }
.dh-card-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.dh-card-count {
margin-left: auto; flex: 0 0 auto;
font-size: .74rem; font-weight: 600; color: var(--gray);
white-space: nowrap;
}
.dh-card-count[hidden] { display: none; }
.dh-card-count--zero,
.dh-card-count--none { color: var(--gray-mid); font-weight: 500; }
.dh-card-type {
display: inline-block; padding: 3px 10px;
border-radius: var(--radius-pill, 20px);
background: var(--primary-pale); color: var(--primary-dark, var(--primary));
font-size: .72rem; font-weight: 700; letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-card { position: relative; }
.dh-card-link {
color: inherit; text-decoration: none;
}
.dh-card-link::after {
content: ''; position: absolute; inset: 0; border-radius: var(--radius);
}
.dh-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md, var(--shadow));
}
.dh-card:hover .dh-card-link { text-decoration: underline; }
.dh-card-link:focus-visible::after {
outline: 2px solid var(--primary); outline-offset: 2px;
}
.dh-card-title {
font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
color: var(--dark); line-height: 1.3; margin: 0 0 8px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.dh-card-desc {
margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: var(--gray);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.dh-card-desc--none { font-style: italic; opacity: .7; }
.dh-card-foot {
margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--gray-light);
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
font-size: .78rem; color: var(--gray);
}
.dh-card-foot-label { font-weight: 600; color: var(--dark); }
.dh-card-owner { min-width: 0; overflow-wrap: anywhere; }
.dh-card-owner--none { font-style: italic; opacity: .75; }
.dh-card-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .7rem; color: var(--gray-mid);
max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#datahubsPage .dh-filters {
display: flex; align-items: center; flex-wrap: wrap;
gap: 10px 14px;
margin-bottom: 18px; padding: 0;
background: transparent;
border: 0;
}
#datahubsPage .dh-filter-group {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
#datahubsPage .dh-filter-label {
font-size: .72rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--gray-mid);
margin-right: 2px;
}
#datahubsPage .dh-filter-spacer { flex: 1 1 24px; }
#datahubsPage .dh-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--white); color: var(--gray);
border: 1px solid var(--gray-light);
border-radius: var(--radius-pill, 20px);
padding: 5px 12px;
font-family: var(--font-body); font-size: .8rem; font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
#datahubsPage .dh-chip:hover { border-color: var(--primary-light); color: var(--primary); }
#datahubsPage .dh-chip[aria-pressed="true"] {
background: var(--primary); border-color: var(--primary); color: var(--white);
}
#datahubsPage .dh-chip-count {
font-size: .7rem; font-weight: 700;
padding: 1px 6px; border-radius: 20px;
background: var(--gray-light); color: var(--gray-mid);
}
#datahubsPage .dh-chip[aria-pressed="true"] .dh-chip-count {
background: rgba(255, 255, 255, .25); color: var(--white);
}
#datahubsPage .dh-search {
font-family: var(--font-body); font-size: .82rem;
color: var(--dark); background: var(--white);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 6px 10px;
min-width: 200px;
}
#datahubsPage .dh-search:focus {
outline: 2px solid var(--primary-light); outline-offset: 1px;
border-color: var(--primary);
}
#datahubsPage .dh-pager {
display: flex; align-items: center; justify-content: center;
gap: 6px; flex-wrap: wrap;
margin-top: 22px;
}
#datahubsPage .dh-pager[hidden] { display: none; }
#datahubsPage .dh-page-btn {
min-width: 34px; height: 34px; padding: 0 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--white); color: var(--gray);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background var(--tr), border-color var(--tr), color var(--tr);
}
#datahubsPage .dh-page-btn:hover:not(:disabled) { border-color: var(--primary-light); color: var(--primary); }
#datahubsPage .dh-page-btn[aria-current="page"] {
background: var(--primary); border-color: var(--primary); color: var(--white);
}
#datahubsPage .dh-page-btn:disabled { opacity: 0.6; cursor: default; }
#datahubsPage .dh-pager-status {
margin-left: 8px; font-size: .78rem; color: var(--gray);
}
#datahubsPage .dh-empty {
padding: 28px 20px; text-align: center;
background: var(--white); border: 1px dashed var(--gray-light);
border-radius: var(--radius); color: var(--gray);
font-size: .88rem;
}
#datahubsPage .dh-empty button {
margin-left: 6px; background: none; border: none; padding: 0;
color: var(--primary); font: inherit; font-weight: 600;
cursor: pointer; text-decoration: underline;
}
@media (max-width: 700px) {
#datahubsPage .dh-section--boxed { padding: 18px 20px 20px; margin-bottom: 32px; }
#datahubsPage .dh-filters { flex-direction: column; align-items: stretch; }
#datahubsPage .dh-filter-spacer { display: none; }
#datahubsPage .dh-search { min-width: 0; width: 100%; }
.dh-card-foot { flex-direction: column; gap: 4px; }
.dh-card-id { max-width: 100%; }
}
/* ── css/datahub-detail.css ── */
#datahubDetailPage .dhd-intro { grid-column: 1 / -1; min-width: 0; }
#datahubDetailPage .sidebar[hidden],
#datahubDetailPage .content-area[hidden] { display: none; }
#datahubDetailPage .sidebar[hidden] + .content-area { grid-column: 1 / -1; }
#datahubDetailPage .dhd-notice--empty {
margin-top: 18px;
}
#datahubDetailPage .dhd-back {
display: inline-block; margin: 0 0 14px;
font-size: .85rem; font-weight: 600; color: var(--primary);
text-decoration: none;
}
#datahubDetailPage .dhd-back:hover { text-decoration: underline; }
#datahubDetailPage .dhd-panel {
--dhd-bg: var(--fastlane-3, #DAEBFB);
--dhd-fg: var(--fastlane-3-fg, #0B3760);
--dhd-border: var(--fastlane-3-border, #BCD8F3);
--dhd-muted: color-mix(in srgb, var(--dhd-fg) 72%, transparent);
background: var(--dhd-bg); color: var(--dhd-fg);
border: 1px solid var(--dhd-border); border-radius: var(--radius);
padding: 22px;
margin-bottom: 0;
}
#datahubDetailPage .dhd-panel-cols {
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 26px; align-items: start;
}
#datahubDetailPage .dhd-side { min-width: 0; }
@media (max-width: 900px) {
#datahubDetailPage .dhd-panel-cols { grid-template-columns: 1fr; gap: 20px; }
}
#datahubDetailPage .dhd-about-head {
display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px;
}
#datahubDetailPage .dhd-mark {
flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--white) 70%, transparent);
color: var(--dhd-fg);
overflow: hidden;
}
#datahubDetailPage .dhd-mark--logo { background: var(--white); padding: 5px; }
#datahubDetailPage .dhd-logo {
width: 100%; height: 100%; object-fit: contain; display: block;
}
#datahubDetailPage .dhd-photo {
margin: 0 0 16px; border-radius: var(--radius); overflow: hidden;
background: color-mix(in srgb, var(--white) 45%, transparent);
}
#datahubDetailPage .dhd-photo img {
display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
#datahubDetailPage .dhd-join { margin: 18px 0 0; }
#datahubDetailPage .dhd-join-btn {
display: inline-block; padding: 10px 18px; border: 0;
border-radius: var(--radius); cursor: pointer;
background: var(--fastlane-3-btn, #115492); color: var(--white);
font-family: var(--font-head); font-size: .92rem; font-weight: 700;
}
#datahubDetailPage .dhd-join-btn:hover { filter: brightness(1.08); }
#datahubDetailPage .dhd-join-btn:focus-visible {
outline: 2px solid var(--dhd-fg); outline-offset: 2px;
}
#datahubDetailPage .dhd-join-note {
margin: 7px 0 0; font-size: .76rem; line-height: 1.45; color: var(--dhd-muted);
}
#datahubDetailPage .dhd-about-head-text { min-width: 0; }
#datahubDetailPage .dhd-type {
display: inline-block; margin-bottom: 6px; padding: 3px 10px;
border-radius: var(--radius-pill, 20px);
background: color-mix(in srgb, var(--white) 70%, transparent);
font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
#datahubDetailPage .dhd-title {
font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
line-height: 1.25; margin: 0; color: inherit;
}
#datahubDetailPage .dhd-desc {
margin: 0 0 16px; font-size: .92rem; line-height: 1.55;
color: var(--dhd-muted);
}
#datahubDetailPage .dhd-desc--none { font-style: italic; opacity: .8; }
#datahubDetailPage .dhd-facts {
margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: 4px 14px; font-size: .84rem;
}
#datahubDetailPage .dhd-facts dt { font-weight: 700; }
#datahubDetailPage .dhd-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#datahubDetailPage .dhd-id { font-family: var(--font-mono, monospace); font-size: .8rem; }
#datahubDetailPage .dhd-none { font-style: italic; opacity: .75; }
#datahubDetailPage .rb-search {
display: inline-flex; align-items: center; gap: 7px;
box-sizing: border-box;
flex: 0 1 340px; min-width: 200px;
height: 42px; padding: 0 16px 0 12px;
margin-right: auto;
background: var(--dx-surface-card, var(--white));
border: 1px solid var(--dx-line-control, var(--gray-light));
border-radius: 999px;
transition: border-color var(--tr), box-shadow var(--tr);
}
#datahubDetailPage .rb-search:hover { border-color: var(--dx-brand-light, var(--primary)); }
#datahubDetailPage .rb-search:focus-within {
border-color: var(--dx-brand, var(--primary));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-brand, var(--primary)) 18%, transparent);
}
#datahubDetailPage .rb-search-icon {
flex: 0 0 17px; color: var(--dx-brand, var(--primary));
}
#datahubDetailPage .rb-search-input {
flex: 1; min-width: 0;
padding: 0; border: 0; outline: none; background: none;
font-family: var(--font-body); font-size: .88rem; color: var(--dark);
}
#datahubDetailPage .rb-search-input::placeholder { color: var(--dx-text-muted, var(--gray)); }
#datahubDetailPage .rb-search-input::-webkit-search-cancel-button,
#datahubDetailPage .rb-search-input::-webkit-search-decoration {
-webkit-appearance: none; appearance: none;
}
@media (max-width: 640px) {
#datahubDetailPage .rb-search { flex: 1 1 100%; margin-right: 0; }
}
#datahubDetailPage .dhd-notice {
padding: 18px; border: 1px dashed var(--gray-light);
border-radius: var(--radius); color: var(--gray);
font-size: .88rem; line-height: 1.5; background: var(--white);
}
#datahubDetailPage .dhd-notice--error { border-style: solid; color: var(--dark); }
#datahubDetailPage .dhd-themes[hidden] { display: none; }
#datahubDetailPage { --dhd-rail: 124px; }
@media (min-width: 821px) {
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) {
grid-template-columns: var(--dhd-rail) minmax(0, 1fr);
}
#datahubDetailPage > .main-wrap { transition: grid-template-columns .18s ease; }
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) > .dhd-intro {
grid-row: 1;
}
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) > .sidebar {
grid-row: 2;
grid-column: 1;
}
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) > .content-area {
grid-row: 2;
grid-column: 1 / -1;
}
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) > .content-area
> .results-bar {
padding-left: calc(var(--dhd-rail) + 24px);
}
#datahubDetailPage > .main-wrap:has(> .sidebar:not(.is-open)) > .sidebar {
position: relative;
z-index: 2;
}
#datahubDetailPage > .main-wrap > .sidebar:not(.is-open) > .filter-toggle-mobile {
width: 100%;
white-space: nowrap;
}
#datahubDetailPage > .main-wrap > .sidebar:not(.is-open) > .filter-toggle-mobile
.filter-toggle-chevron { margin-left: 2px; }
#datahubDetailPage > .main-wrap > .sidebar:not(.is-open) > .lf-filter-count {
display: none;
}
}
/* ── css/ontdek.css ── */
#ontdekPage > .main-wrap { padding-top: 10px; }
.ontdek-section { margin-bottom: 40px; }
.ontdek-section:last-child { margin-bottom: 0; }
.ontdek-section[hidden] { display: none; }
.ontdek-notice {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 22px 24px;
color: var(--gray);
font-size: .92rem;
line-height: 1.5;
}
#ontdekLatestList .dataset-card:last-child { margin-bottom: 0; }
.ontdek-panel {
--ontdek-bg: var(--fastlane-3, #DAEBFB);
--ontdek-fg: var(--fastlane-3-fg, #0B3760);
--ontdek-accent: var(--fastlane-3-btn, #115492);
--ontdek-border: var(--fastlane-3-border, #BCD8F3);
--ontdek-rule: color-mix(in srgb, var(--ontdek-fg) 20%, transparent);
--ontdek-muted: color-mix(in srgb, var(--ontdek-fg) 72%, transparent);
background: var(--ontdek-bg);
color: var(--ontdek-fg);
border: 1px solid var(--ontdek-border);
border-radius: var(--radius);
box-shadow: 0 12px 32px color-mix(in srgb, var(--ontdek-fg) 14%, transparent);
overflow: visible;
margin-bottom: 40px;
}
.ontdek-panel-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 26px 28px 0;
}
.ontdek-badge {
display: inline-flex; align-items: center; gap: 6px;
max-width: 100%;
padding: 5px 11px;
background: transparent;
border: 1px solid color-mix(in srgb, var(--ontdek-fg) 45%, transparent);
border-radius: 999px;
font-family: var(--font-head);
font-size: .7rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--ontdek-fg);
}
.ontdek-badge svg { flex-shrink: 0; }
.ontdek-badge > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ontdek-switch-link {
display: inline-flex; align-items: center; gap: 6px;
margin-left: auto;
padding: 4px 2px;
background: none; border: 0;
font-family: var(--font-head);
font-size: .82rem; font-weight: 600;
color: var(--ontdek-accent);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
white-space: nowrap;
transition: color var(--tr);
}
.ontdek-switch-link:hover { color: var(--ontdek-fg); }
.ontdek-switch-link:focus-visible { outline: 2px solid var(--ontdek-fg); outline-offset: 2px; }
.ontdek-switch-link svg { flex-shrink: 0; }
.ontdek-panel.is-pane-assist [data-badge="search"],
.ontdek-panel.is-pane-assist [data-ontdek-pane="assist"],
.ontdek-panel.is-pane-assist .ontdek-panel-pane[data-pane="search"],
.ontdek-panel.is-pane-search [data-badge="assist"],
.ontdek-panel.is-pane-search [data-ontdek-pane="search"],
.ontdek-panel.is-pane-search .ontdek-panel-pane[data-pane="assist"] {
display: none;
}
.ontdek-panel-inner {
max-width: 660px;
margin: 0;
min-width: 0;
}
@media (max-width: 900px) {
.ontdek-panel-inner { max-width: none; }
}
.ontdek-panel-cols {
display: grid;
grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
}
@media (max-width: 1150px) {
.ontdek-panel-cols { grid-template-columns: minmax(0, 1fr); }
}
.ontdek-promo {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 26px 28px 28px;
border-left: 1px solid var(--ontdek-rule);
min-width: 0;
}
.ontdek-promo-copy { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1150px) {
.ontdek-promo {
border-left: 0;
border-top: 1px solid var(--ontdek-rule);
margin: 4px 28px 0;
padding: 24px 0 28px;
}
}
.ontdek-promo-flag {
display: inline-block;
padding: 4px 10px;
background: var(--ontdek-accent);
border-radius: 999px;
font-family: var(--font-head);
font-size: .7rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--white, #fff);
}
.ontdek-promo-title {
margin: 12px 0 6px;
font-family: var(--font-head);
font-size: 1.75rem;
line-height: 1.05;
letter-spacing: -.02em;
color: var(--ontdek-fg);
}
.ontdek-promo-ask { font-weight: 400; }
.ontdek-promo-name { font-weight: 700; color: var(--ontdek-accent); }
.ontdek-promo-figure {
flex: 0 0 auto;
align-self: stretch;
width: 200px;
max-width: 32%;
position: relative;
min-height: 0;
display: flex;
pointer-events: none;
user-select: none;
}
.ontdek-promo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
display: block;
}
@media (max-width: 1150px) {
.ontdek-promo-copy { max-width: 640px; }
.ontdek-promo-figure { width: 168px; }
}
@media (max-width: 560px) {
.ontdek-promo { gap: 12px; }
.ontdek-promo-figure { width: 96px; max-width: 28%; }
}
.ontdek-promo p {
margin: 0 0 9px;
font-size: .855rem;
line-height: 1.55;
color: var(--ontdek-muted);
}
.ontdek-promo-skills-lead { margin-top: 12px; }
.ontdek-promo-skills {
list-style: none;
display: flex; flex-wrap: wrap; gap: 6px;
margin: 10px 0 0; padding: 0;
}
.ontdek-promo-skills li {
padding: 4px 10px;
background: color-mix(in srgb, var(--ontdek-fg) 8%, transparent);
border: 1px solid var(--ontdek-border);
border-radius: 999px;
font-size: .74rem; font-weight: 600;
color: var(--ontdek-fg);
white-space: nowrap;
}
.ontdek-panel-pane { padding: 20px 28px 28px; min-width: 0; }
#ontdekSearchHost .home-search-box {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.ontdek-assist h2 {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
color: var(--ontdek-fg); margin: 0 0 6px;
}
.ontdek-assist > p:not(.ontdek-assist-soon) {
font-size: .85rem; color: var(--ontdek-muted);
line-height: 1.5; margin: 0 0 18px;
}
.ontdek-assist-field { margin-bottom: 12px; }
.ontdek-assist-input {
display: block; box-sizing: border-box; width: 100%;
padding: 13px 14px;
background: #fff;
border: 1px solid var(--ontdek-border); border-radius: var(--radius-sm);
box-shadow: 0 2px 8px color-mix(in srgb, var(--ontdek-fg) 10%, transparent);
font-family: var(--font-body); font-size: .93rem; line-height: 1.5;
color: var(--dark);
resize: vertical;
}
.ontdek-assist-input::placeholder { color: var(--gray-mid); }
.ontdek-assist-input:disabled { background: #fff; opacity: 1; cursor: not-allowed; }
.ontdek-assist-btn {
width: 100%; padding: 13px;
background: var(--primary-dark); color: var(--white);
border: none; border-radius: var(--radius-sm);
font-family: var(--font-head); font-size: .92rem; font-weight: 700;
cursor: pointer; transition: background var(--tr);
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ontdek-assist-btn:hover { background: var(--ontdek-fg); }
.ontdek-assist-btn:focus-visible { outline: 2px solid var(--ontdek-fg); outline-offset: 2px; }
.ontdek-assist > .ontdek-assist-soon {
margin: 18px 0 0;
font-size: .76rem; line-height: 1.45;
color: var(--ontdek-muted);
}
@media (max-width: 520px) {
.ontdek-panel-bar { padding: 18px 20px 0; }
.ontdek-panel-pane { padding: 18px 20px 22px; }
.ontdek-switch-link { margin-left: 0; }
}
/* ── css/write-error.css ── */
.wrerr {
border: 1px solid var(--dx-border, #d6dde4);
border-radius: var(--radius, 16px);
padding: 0;
max-width: min(560px, calc(100vw - 32px));
width: 100%;
background: var(--dx-surface-card, #fff);
color: var(--dx-text, #0b2238);
box-shadow: var(--dx-shadow-menu, 0 16px 38px rgba(7,31,51,.16));
}
.wrerr::backdrop { background: rgba(7, 31, 51, .45); }
.wrerr__box { padding: 24px 24px 20px; }
.wrerr__title {
margin: 0 0 8px; font-size: 1.2rem;
color: var(--dx-state-closed-fg, #b42318);
}
.wrerr__lead, .wrerr__hint, .wrerr__sub { margin: 0 0 12px; line-height: 1.5; }
.wrerr__sub { font-weight: 600; margin-bottom: 6px; }
.wrerr__hint {
padding: 10px 12px; border-radius: var(--radius-sm, 8px);
background: var(--dx-interactive-soft, #eef5fc);
}
.wrerr__list { margin: 0 0 12px; padding-left: 20px; }
.wrerr__list li { margin: 4px 0; }
.wrerr__code {
margin-left: 8px; font-size: .8em;
color: var(--dx-text-muted, #52667a);
}
.wrerr__details { margin: 4px 0 16px; }
.wrerr__details summary { cursor: pointer; color: var(--dx-text-muted, #52667a); }
.wrerr__pre {
margin: 8px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
white-space: pre-wrap; word-break: break-word; font-size: .8rem;
user-select: text;
background: var(--dx-surface-band-soft, #f3f6f9);
border-radius: var(--radius-sm, 8px);
}
.wrerr__bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.wrerr__btn {
appearance: none; cursor: pointer; text-decoration: none;
padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 600;
border: 1px solid var(--dx-border-strong, #b8c4cf);
background: var(--dx-surface-card, #fff); color: var(--dx-text, #0b2238);
}
.wrerr__btn--primary {
background: var(--dx-brand, #0d3b66); border-color: var(--dx-brand, #0d3b66);
color: var(--dx-text-on-dark, #fff);
}
.wrerr__btn:focus-visible { outline: 2px solid var(--dx-focus-ring, #1f6fd1); outline-offset: 2px; }
/* ── css/instructie.css ── */
#instructiePage {
--instr-bg: var(--fastlane-3, #DAEBFB);
--instr-fg: var(--fastlane-3-fg, #0B3760);
--instr-accent: var(--fastlane-3-btn, #115492);
--instr-fg-on-accent: var(--fastlane-3-btn-fg, var(--white));
--instr-border: var(--fastlane-3-border, #BCD8F3);
--instr-muted: color-mix(in srgb, var(--instr-fg) 72%, transparent);
}
.instr-panel {
background: var(--instr-bg);
color: var(--instr-fg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px 24px 22px;
margin-bottom: 28px;
}
.instr-panel-title {
margin: 0 0 14px;
font-size: 1.5rem;
line-height: 1.2;
color: var(--instr-fg);
}
.instr-panel-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
gap: 20px;
align-items: stretch;
}
@media (max-width: 900px) {
.instr-panel-cols { grid-template-columns: minmax(0, 1fr); }
}
.instr-search-lead {
margin: 0 0 10px;
font-size: .95rem;
line-height: 1.45;
color: var(--instr-fg);
}
.instr-search-form { display: flex; gap: 8px; }
.instr-search-input {
flex: 1 1 auto;
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--instr-border);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--dark);
font: inherit;
font-size: .95rem;
}
.instr-search-input::placeholder { color: var(--gray); }
.instr-search-btn {
flex: 0 0 auto;
padding: 11px 20px;
border: 0;
border-radius: var(--radius-sm);
background: var(--instr-accent);
color: var(--instr-fg-on-accent);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.instr-search-btn:hover { filter: brightness(1.08); }
.instr-dexter {
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: inherit;
padding: 14px 16px;
border: 1px dashed var(--instr-border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--white) 55%, transparent);
}
.instr-dexter-badge {
align-self: flex-start;
padding: 2px 9px;
border-radius: 999px;
background: var(--instr-accent);
color: var(--instr-fg-on-accent);
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
.instr-dexter-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--instr-fg);
}
.instr-dexter:hover { border-style: solid; background: color-mix(in srgb, var(--white) 75%, transparent); }
.instr-dexter-body {
margin: 0;
font-size: .9rem;
line-height: 1.45;
color: var(--instr-fg);
}
.instr-list-bar {
display: flex;
align-items: baseline;
gap: 12px;
margin: 18px 0 10px;
padding-top: 16px;
border-top: 1px solid var(--instr-border);
}
.instr-list-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--instr-fg); }
.instr-list-count { font-weight: 500; color: var(--instr-muted); }
.instr-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.instr-list[hidden] { display: none; }
.instr-card {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 14px;
border: 1px solid transparent;
border-left: 4px solid transparent;
border-radius: var(--radius-sm);
background: var(--white);
text-decoration: none;
color: inherit;
}
.instr-card:hover { border-color: var(--instr-border); }
.instr-card.is-active { border-left-color: var(--instr-accent); }
.instr-card-main { flex: 1 1 auto; min-width: 0; }
.instr-card-title {
display: block;
color: var(--dark);
font-size: .98rem;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.instr-card-desc {
display: block;
color: var(--gray);
font-size: .86rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.instr-card-steps {
flex: 0 0 auto;
color: var(--gray);
font-size: .74rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.instr-list-empty { margin: 0; color: var(--instr-muted); font-size: .92rem; }
.instr-plan-card {
padding: 26px 28px;
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
}
.instr-plan-head { margin-bottom: 14px; }
.instr-plan-eyebrow {
margin: 0 0 4px;
color: var(--gray);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.instr-plan-title { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.25; color: var(--dark); }
.instr-plan-desc { margin: 0; color: var(--gray); font-size: .95rem; line-height: 1.5; }
.instr-plan-intro { margin-bottom: 18px; line-height: 1.6; }
.instr-plan-intro p:last-child { margin-bottom: 0; }
.instr-aside {
margin: 0 0 18px;
padding: 14px 16px;
border-left: 3px solid var(--instr-border);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--gray-pale);
}
.instr-aside h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 700; color: var(--dark); }
.instr-aside p:last-child { margin-bottom: 0; }
.instr-aside--done { border-left-color: var(--instr-accent); }
.instr-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.instr-step {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--gray-light);
}
.instr-step:first-child { border-top: 0; padding-top: 0; }
.instr-step-n {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--instr-accent);
color: var(--instr-fg-on-accent);
font-size: .95rem;
font-weight: 700;
}
.instr-step-body { min-width: 0; }
.instr-step-title { margin: 4px 0 6px; font-size: 1rem; font-weight: 700; color: var(--dark); }
.instr-step-body p { margin: 0 0 8px; line-height: 1.6; }
.instr-step-body p:last-child { margin-bottom: 0; }
.instr-step-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--instr-bg);
color: var(--instr-accent);
font-size: .88rem;
font-weight: 600;
text-decoration: none;
}
.instr-step-link:hover { background: var(--instr-border); }
.instr-plan-foot {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
padding-top: 14px;
border-top: 1px solid var(--gray-light);
color: var(--gray);
font-size: .84rem;
}
.instr-plan-docs { color: var(--primary-dark); }
.instr-notice {
margin-bottom: 18px;
padding: 14px 18px;
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
color: var(--gray);
font-size: .92rem;
line-height: 1.5;
}
@media (max-width: 560px) {
.instr-panel { padding: 16px 16px; }
.instr-plan-card { padding: 20px 18px; }
.instr-search-form { flex-wrap: wrap; }
.instr-search-btn { width: 100%; }
}
/* ── css/support.css ── */
#supportPage {
--instr-bg: var(--fastlane-3, #DAEBFB);
--instr-fg: var(--fastlane-3-fg, #0B3760);
--instr-accent: var(--fastlane-3-btn, #115492);
--instr-fg-on-accent: var(--fastlane-3-btn-fg, var(--white));
--instr-border: var(--fastlane-3-border, #BCD8F3);
--instr-muted: color-mix(in srgb, var(--instr-fg) 72%, transparent);
}
.sup-lead {
margin: 0 0 16px;
max-width: 70ch;
color: var(--instr-fg);
font-size: .95rem;
line-height: 1.55;
}
.sup-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.sup-link {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--white);
text-decoration: none;
color: inherit;
}
.sup-link:hover { border-color: var(--instr-border); }
.sup-link-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
background: var(--instr-bg);
color: var(--instr-accent);
}
.sup-link-main { min-width: 0; }
.sup-link-title {
display: block;
margin-bottom: 2px;
color: var(--dark);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.sup-link-desc {
display: block;
color: var(--gray);
font-size: .87rem;
line-height: 1.45;
}
.sup-form-card {
padding: 26px 28px;
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
}
.sup-form-title { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; color: var(--dark); }
.sup-form-intro {
margin: 0 0 18px;
max-width: 70ch;
color: var(--gray);
font-size: .95rem;
line-height: 1.55;
}
.sup-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) {
.sup-row { grid-template-columns: 1fr; }
}
.sup-field { margin-bottom: 14px; min-width: 0; }
.sup-field label {
display: block;
margin-bottom: 5px;
color: var(--dark);
font-size: .88rem;
font-weight: 600;
}
.sup-field input,
.sup-field textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--dark);
font: inherit;
font-size: .95rem;
}
.sup-field textarea { resize: vertical; line-height: 1.5; }
.sup-field input:focus-visible,
.sup-field textarea:focus-visible { border-color: var(--instr-accent); }
.sup-note {
margin: 0 0 14px;
max-width: 70ch;
color: var(--gray);
font-size: .82rem;
line-height: 1.5;
}
.sup-error {
margin: 0 0 14px;
padding: 10px 13px;
border-left: 3px solid var(--red);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--red-pale);
color: var(--dark);
font-size: .9rem;
line-height: 1.45;
}
.sup-error[hidden] { display: none; }
.sup-submit {
padding: 11px 22px;
border: 0;
border-radius: var(--radius-sm);
background: var(--instr-accent);
color: var(--instr-fg-on-accent);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.sup-submit:hover { filter: brightness(1.08); }
.sup-submit:disabled { opacity: .65; cursor: default; }
.sup-done {
padding: 16px 18px;
border-left: 3px solid var(--green);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--green-pale);
}
.sup-done[hidden] { display: none; }
.sup-done p { margin: 0; line-height: 1.55; }
.sup-done-title { font-weight: 700; margin-bottom: 4px !important; }
@media (max-width: 560px) {
.sup-form-card { padding: 20px 18px; }
}
/* ── css/docs.css ── */
html[data-docs] body > div[id$="Page"] { display: none !important; }
html[data-docs] #docsShell[hidden] { display: block !important; }
html[data-docs][data-docs-brand] #logoLink,
html[data-docs][data-docs-brand] #tenantSwitcher { display: none !important; }
.docs-brand { display: inline-flex; align-items: center; text-decoration: none; }
.docs-brand-logo {
height: 30px;
width: auto;
max-width: 150px;
display: block;
object-fit: contain;
}
.docs-brand-mark {
height: 20px;
width: auto;
max-width: 90px;
display: block;
object-fit: contain;
}
.docs-brand-slash {
margin: 0 8px;
color: var(--gray-mid);
font-family: var(--font-head);
font-size: 1.15rem;
font-weight: 400;
line-height: 1;
user-select: none;
}
.docs-brand--home:hover .docs-brand-logo,
.docs-brand--home:hover .docs-brand-mark { opacity: .75; }
.docs-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 560px) {
.docs-brand-slash, .docs-brand-mark { display: none; }
}
.docs-layout {
display: grid;
grid-template-columns: 264px minmax(0, 1fr) 232px;
gap: 40px;
max-width: 1360px;
margin: 0 auto;
padding: 32px 24px 72px;
align-items: start;
}
.docs-nav {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
display: flex;
flex-direction: column;
overflow: visible;
font-family: var(--font-body);
padding-right: 8px;
}
.docs-nav-scroll {
overflow-y: auto;
min-height: 0;
padding-right: 4px;
}
.docs-nav-title {
font-family: var(--font-head);
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gray);
margin: 0 0 12px;
}
.docs-group { margin-bottom: 22px; }
.docs-group-label {
font-family: var(--font-head);
font-size: .82rem;
font-weight: 700;
color: var(--dark);
margin: 0 0 8px;
}
.docs-group ul { list-style: none; margin: 0; padding: 0; }
.docs-group li { margin: 0; }
.docs-group a {
display: block;
padding: 6px 12px;
margin-left: -12px;
border-left: 2px solid transparent;
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
color: var(--gray);
text-decoration: none;
font-size: .92rem;
line-height: 1.4;
}
.docs-group a:hover { color: var(--dark); background: var(--gray-pale); }
.docs-group a[aria-current="page"] {
color: var(--primary);
border-left-color: var(--primary);
background: var(--primary-pale2);
font-weight: 600;
}
.docs-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: .64rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--gray-light);
color: var(--gray);
vertical-align: 1px;
}
.docs-badge--member { background: var(--primary-pale); color: var(--primary-dark); }
.docs-badge--role { background: var(--amber-pale); color: var(--amber); }
.docs-search { position: relative; margin-bottom: 24px; flex: 0 0 auto; }
.docs-search input {
width: 100%;
padding: 9px 12px 9px 34px;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
background: var(--white) no-repeat 10px center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
font: inherit;
font-size: .92rem;
color: var(--dark);
}
.docs-search input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-pale);
}
.docs-results {
position: absolute;
z-index: 60;
left: 0; right: 0; top: calc(100% + 6px);
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
box-shadow: 0 12px 32px rgba(20, 15, 42, .12);
max-height: 60vh;
overflow-y: auto;
padding: 6px;
}
.docs-results[hidden] { display: none; }
.docs-result {
display: block;
padding: 8px 10px;
border-radius: var(--radius-xs);
color: var(--dark);
text-decoration: none;
}
.docs-result:hover, .docs-result[data-active="1"] { background: var(--primary-pale2); }
.docs-result-path {
display: block;
font-size: .72rem;
color: var(--primary);
font-weight: 600;
line-height: 1.35;
margin-bottom: 3px;
}
.docs-result-snippet {
font-size: .8rem;
color: var(--gray);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.docs-results-empty { padding: 10px; font-size: .85rem; color: var(--gray); }
.docs-main {
min-width: 0;
background: var(--white);
border: 1px solid var(--gray-light);
border-radius: var(--radius);
padding: 28px 36px 36px;
}
.docs-page-head { margin-bottom: 28px; }
.docs-page-head h1 {
font-family: var(--font-head);
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--dark);
margin: 0 0 8px;
line-height: 1.2;
}
.docs-page-head p {
font-family: var(--font-body);
font-size: 1.02rem;
color: var(--gray);
margin: 0;
max-width: 62ch;
line-height: 1.6;
}
.docs-page-flags { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.docs-article {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.72;
color: var(--dark2);
max-width: 74ch;
}
.docs-article > *:first-child { margin-top: 0; }
.docs-article h2 {
font-family: var(--font-head);
font-size: 1.34rem;
font-weight: 700;
color: var(--dark);
letter-spacing: -.01em;
margin: 44px 0 12px;
padding-top: 8px;
scroll-margin-top: 96px;
}
.docs-article h3 {
font-family: var(--font-head);
font-size: 1.06rem;
font-weight: 700;
color: var(--dark);
margin: 30px 0 10px;
scroll-margin-top: 96px;
}
.docs-article p { margin: 0 0 16px; }
.docs-article ul, .docs-article ol { margin: 0 0 18px; padding-left: 22px; }
.docs-article li { margin-bottom: 6px; }
.docs-article li > ul, .docs-article li > ol { margin-top: 6px; margin-bottom: 4px; }
.docs-article a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.docs-article a:hover { color: var(--primary-dark); }
.docs-article strong { color: var(--dark); font-weight: 600; }
.docs-article code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .86em;
background: var(--gray-pale);
border: 1px solid var(--gray-light);
border-radius: var(--radius-xs);
padding: .08em .34em;
color: var(--dark);
overflow-wrap: break-word;
}
.docs-article pre {
background: var(--dark);
color: #E9E6F5;
border-radius: var(--radius-sm);
padding: 16px 18px;
overflow-x: auto;
margin: 0 0 20px;
font-size: .86rem;
line-height: 1.6;
}
.docs-article pre code {
background: none; border: 0; padding: 0; color: inherit; font-size: 1em;
}
.docs-article blockquote {
margin: 0 0 20px;
padding: 14px 18px;
border-left: 3px solid var(--primary);
background: var(--primary-pale2);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--dark2);
}
.docs-article blockquote > *:last-child { margin-bottom: 0; }
.docs-article img {
max-width: 100%;
height: auto;
border: 1px solid var(--gray-light);
border-radius: var(--radius-sm);
display: block;
margin: 8px 0 24px;
}
.docs-article hr { border: 0; border-top: 1px solid var(--gray-light); margin: 36px 0; }
.docs-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.docs-article table {
border-collapse: collapse;
width: 100%;
font-size: .9rem;
min-width: 480px;
}
.docs-article th, .docs-article td {
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--gray-light);
vertical-align: top;
}
.docs-article th {
font-family: var(--font-head);
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gray);
background: var(--gray-pale);
white-space: nowrap;
}
.docs-article tbody tr:last-child td { border-bottom: 0; }
.docs-anchor {
margin-left: 8px;
font-size: .8em;
font-weight: 400;
color: var(--gray-mid);
text-decoration: none;
opacity: 0;
transition: opacity .12s;
}
.docs-h:hover .docs-anchor, .docs-anchor:focus { opacity: 1; }
.docs-anchor:focus { outline: 2px solid var(--primary); border-radius: 3px; }
.docs-meta {
margin-top: 48px;
padding-top: 18px;
border-top: 1px solid var(--gray-light);
font-family: var(--font-body);
font-size: .82rem;
color: var(--gray);
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
align-items: baseline;
}
.docs-meta a { color: var(--primary); }
.docs-toc {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow-y: auto;
font-family: var(--font-body);
font-size: .84rem;
border-left: 1px solid var(--gray-light);
padding-left: 16px;
}
.docs-toc-title {
font-family: var(--font-head);
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gray);
margin: 0 0 10px;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc a {
display: block;
padding: 4px 0;
color: var(--gray);
text-decoration: none;
line-height: 1.4;
}
.docs-toc a:hover { color: var(--dark); }
.docs-toc a[data-level="3"] { padding-left: 12px; font-size: .8rem; }
.docs-toc a[aria-current="true"] { color: var(--primary); font-weight: 600; }
@media (max-width: 1100px) {
.docs-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
.docs-toc { display: none; }
}
@media (max-width: 820px) {
.docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 16px 56px; }
.docs-main { padding: 20px 18px 26px; }
.docs-nav { max-height: none; overflow: visible; }
.docs-nav-scroll { overflow: visible; max-height: none; }
.docs-nav {
position: static;
max-height: none;
overflow: visible;
border-bottom: 1px solid var(--gray-light);
padding-bottom: 20px;
margin-bottom: 24px;
}
.docs-article { max-width: none; }
.docs-article table { font-size: .84rem; }
}
/* ── css/issue-report.css ── */
.hero-crumb-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.hero-issue-link,
.hero-support-link {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.2;
padding: 2px 0;
border: 0;
border-radius: 0;
white-space: nowrap;
cursor: pointer;
background: transparent;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.15s ease;
}
.hero-issue-link:hover,
.hero-issue-link:focus-visible,
.hero-support-link:hover,
.hero-support-link:focus-visible {
background: transparent;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.hero-issue-link svg,
.hero-support-link svg { flex: 0 0 auto; display: block; }
.hero-search-inner .hero-crumb-actions {
position: absolute;
top: 0;
right: 24px;
margin-left: 0;
z-index: 2;
}
@media (max-width: 640px) {
.hero-search-inner .hero-crumb-actions { position: static; margin-left: auto; }
}
@media (max-width: 640px) {
.hero-issue-link,
.hero-support-link { padding: 4px 7px; }
.hero-issue-link .hero-issue-link-label,
.hero-support-link span { display: none; }
}
.issue-report-window { max-width: 640px; }
.irf-intro {
margin: 0 0 16px;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ds-text-muted, #6b7280);
}
.irf-who {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 16px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
background: var(--ds-table-head, #f9fafb);
}
.irf-who-icon {
flex: 0 0 auto;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--primary-pale, #eaf2fd);
color: var(--primary, #3b82e6);
}
.irf-who-main { min-width: 0; }
.irf-who-name { font-weight: 600; font-size: 0.9rem; color: var(--ds-text, #111827); }
.irf-who-org {
font-size: 0.78rem;
color: var(--ds-text-muted, #6b7280);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.irf-field { margin-bottom: 14px; }
.irf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 560px) { .irf-row { grid-template-columns: 1fr; } }
.irf-field label {
display: block;
margin-bottom: 5px;
font-size: 0.8rem;
font-weight: 600;
color: var(--ds-text, #111827);
}
.irf-req { color: #dc2626; }
.irf-field input[type="text"],
.irf-field input[type="email"],
.irf-field select,
.irf-field textarea {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font: inherit;
font-size: 0.88rem;
color: var(--ds-text, #111827);
background: #fff;
border: 1px solid var(--ds-border, #d1d5db);
border-radius: 8px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.irf-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.irf-field input:focus,
.irf-field select:focus,
.irf-field textarea:focus {
outline: none;
border-color: var(--primary, #3b82e6);
box-shadow: 0 0 0 3px rgba(59, 130, 230, 0.15);
}
.irf-field input:disabled,
.irf-field select:disabled,
.irf-field textarea:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.irf-hint {
margin: 4px 0 0;
font-size: 0.74rem;
color: var(--ds-text-muted, #6b7280);
}
.irf-context {
margin: 4px 0 16px;
border: 1px solid var(--ds-border, #e5e7eb);
border-radius: 10px;
background: var(--ds-table-head, #f9fafb);
font-size: 0.8rem;
}
.irf-context > summary {
cursor: pointer;
padding: 9px 12px;
font-weight: 600;
color: var(--ds-text-muted, #6b7280);
list-style: none;
display: flex; align-items: center; gap: 7px;
}
.irf-context > summary::-webkit-details-marker { display: none; }
.irf-context > summary::after {
content: '▾';
margin-left: auto;
transition: transform 0.15s ease;
}
.irf-context[open] > summary::after { transform: rotate(180deg); }
.irf-context-list {
margin: 0;
padding: 0 12px 10px;
display: grid;
grid-template-columns: minmax(90px, auto) 1fr;
gap: 3px 12px;
}
.irf-context-list dt { font-weight: 600; color: var(--ds-text-muted, #6b7280); }
.irf-context-list dd {
margin: 0;
color: var(--ds-text, #111827);
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.74rem;
}
.irf-footer {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 10px;
margin: 0 -20px;
padding: 14px 20px;
border-top: 1px solid var(--ds-border, #e5e7eb);
background: #fff;
}
.irf-submit {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px;
font: inherit; font-size: 0.88rem; font-weight: 600;
color: #fff;
background: var(--primary, #3b82e6);
border: 0; border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.irf-submit:hover:not(:disabled) { background: var(--primary-dark, #2563c9); }
.irf-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.irf-cancel {
padding: 9px 14px;
font: inherit; font-size: 0.88rem; font-weight: 600;
color: var(--ds-text-muted, #6b7280);
background: transparent; border: 0; border-radius: 8px;
cursor: pointer;
}
.irf-cancel:hover { background: var(--gray-light, #f1f1f5); color: var(--ds-text, #111827); }
.irf-error {
display: flex; align-items: flex-start; gap: 8px;
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid #fecaca;
border-radius: 8px;
background: #fef2f2;
color: #b91c1c;
font-size: 0.83rem;
line-height: 1.45;
}
.irf-error svg { flex: 0 0 auto; margin-top: 1px; }
.irf-done {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
padding: 34px 20px 40px;
text-align: center;
}
.irf-done-icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #dcfce7;
color: #15803d;
}
.irf-done h3 { margin: 0; font-size: 1.05rem; color: var(--ds-text, #111827); }
.irf-done p { margin: 0; max-width: 40ch; font-size: 0.88rem; line-height: 1.55; color: var(--ds-text-muted, #6b7280); }
.irf-done .irf-submit { margin-top: 6px; }
/* ── css/login-choice.css ── */
#loginChoicePage .content-area--full {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.lgn-panel {
background: var(--hero-bg, linear-gradient(145deg, #061525 0%, #0B3760 45%, #12507F 75%, #061525 100%));
color: var(--dx-text-on-dark);
border-radius: var(--radius, 8px);
padding: 34px 32px 30px;
margin-bottom: 22px;
}
.lgn-title {
margin: 0 0 10px;
font-family: var(--font-head);
font-size: 2rem;
line-height: 1.18;
font-weight: 600;
color: var(--dx-text-on-dark);
}
.lgn-lead {
margin: 0;
max-width: 54ch;
font-size: .95rem;
line-height: 1.55;
color: var(--dx-text-on-dark-muted);
}
.lgn-options {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.lgn-option {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16px;
min-height: 88px;
padding: 18px 20px;
text-align: left;
border-radius: var(--radius, 8px);
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
}
.lgn-option-icon {
flex-shrink: 0;
width: 72px;
display: flex; align-items: center; justify-content: center;
}
.lgn-option-icon img {
display: block;
width: 64px; height: auto;
}
.lgn-option-main {
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.lgn-option-head {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
.lgn-option-name {
font-family: var(--font-head);
font-size: 1.1rem;
font-weight: 600;
}
.lgn-option-desc {
font-size: .9rem;
line-height: 1.45;
color: var(--dx-text-muted);
}
.lgn-option--live {
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-interactive);
box-shadow: var(--dx-shadow-card);
cursor: pointer;
transition: background var(--tr, .18s ease), box-shadow var(--tr, .18s ease);
}
.lgn-option--live:hover {
background: var(--dx-interactive-soft);
box-shadow: var(--dx-shadow-menu);
}
.lgn-option--live .lgn-option-name { color: var(--dx-brand-deep); }
.lgn-option-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: var(--radius-pill, 999px);
background: var(--dx-interactive);
color: var(--dx-text-on-dark);
font-size: .88rem;
font-weight: 600;
white-space: nowrap;
}
.lgn-option--live:hover .lgn-option-cta { background: var(--dx-brand-deep); }
.lgn-option-spinner { display: none; }
.lgn-option--live[data-busy="1"] {
cursor: default;
pointer-events: none;
}
.lgn-option--live[data-busy="1"] .lgn-option-chevron { display: none; }
.lgn-option--live[data-busy="1"] .lgn-option-spinner {
display: block;
transform-origin: 50% 50%;
animation: dexes-login-spin .8s linear infinite;
}
.lgn-option--soon {
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
}
.lgn-option--soon .lgn-option-icon {
width: 48px; height: 48px;
margin: 0 12px;
border-radius: var(--radius-sm, 6px);
background: var(--dx-surface-band);
color: var(--dx-text-faint);
}
.lgn-option--soon .lgn-option-name { color: var(--dx-text-muted); }
.lgn-options--committed .lgn-option--soon { opacity: .45; }
.lgn-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
border-radius: var(--radius-pill, 999px);
font-size: .68rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 10px;
white-space: nowrap;
}
.lgn-badge--ishare {
background: var(--dx-accent);
color: var(--dx-accent-ink);
}
.lgn-badge--soon {
background: var(--dx-surface-work);
border: 1px solid var(--dx-surface-work-border);
color: var(--dx-text-on-work);
letter-spacing: .03em;
font-size: .72rem;
padding: 5px 12px;
}
.lgn-status {
margin-top: 16px;
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
padding: 13px 16px;
border-radius: var(--radius-sm, 6px);
font-size: .9rem;
line-height: 1.45;
}
.lgn-status[hidden] { display: none; }
.lgn-status--busy {
background: var(--dx-interactive-soft);
border: 1px solid var(--dx-interactive-border);
color: var(--dx-interactive);
}
.lgn-status--info {
background: var(--dx-interactive-soft);
border: 1px solid var(--dx-interactive-border);
color: var(--dx-brand-deep);
}
.lgn-status--warn {
background: var(--dx-state-request-bg);
border: 1px solid var(--dx-state-request-fg);
color: var(--dx-state-request-fg);
}
.lgn-status--error {
background: var(--dx-state-closed-bg);
border: 1px solid var(--dx-state-closed-fg);
color: var(--dx-state-closed-fg);
}
.lgn-status-spinner {
flex-shrink: 0;
transform-origin: 50% 50%;
animation: dexes-login-spin .8s linear infinite;
}
.lgn-status-action {
margin-left: auto;
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: 600;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
.lgn-foot {
margin-top: 18px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: .88rem;
color: var(--dx-text-muted);
}
.lgn-foot-join[hidden] { display: none; }
.lgn-foot-join a { font-weight: 600; }
.lgn-foot-secure {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .78rem;
}
.lgn-page--signed-in .lgn-foot-join { display: none; }
@media (max-width: 640px) {
.lgn-panel { padding: 26px 20px 24px; }
.lgn-title { font-size: 1.6rem; }
.lgn-option {
flex-wrap: wrap;
gap: 12px;
padding: 16px;
}
.lgn-option-icon { width: 58px; }
.lgn-option-icon img { width: 52px; }
.lgn-option--soon .lgn-option-icon { width: 40px; height: 40px; margin: 0 9px; }
.lgn-option-main { flex-basis: 0; }
.lgn-option-cta {
flex-basis: 100%;
height: 47px;
justify-content: center;
}
.lgn-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.lgn-foot-secure { margin-left: 0; }
.lgn-status-action { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.lgn-option-spinner,
.lgn-status-spinner { animation: none; }
}
/* ── css/breadcrumb-light.css ── */
html[data-crumb="light"],
html[data-crumb="plain"] {
--crumb-bar-bg: var(--white);
--crumb-bar-border: var(--gray-light);
--crumb-bar-shadow: 0 2px 12px rgba(92, 63, 165, .05);
--crumb-trail: var(--gray);
--crumb-current: var(--primary);
--crumb-hover: var(--primary);
--crumb-chip-text: var(--gray);
--crumb-chip-hover-bg: var(--primary-pale2);
--crumb-accent: var(--primary);
}
html[data-crumb="plain"] {
--crumb-bar-bg: transparent;
--crumb-bar-border: transparent;
--crumb-bar-shadow: none;
--crumb-trail: var(--dark);
--crumb-current: var(--primary-dark, var(--primary));
--crumb-hover: var(--primary-dark, var(--primary));
--crumb-chip-text: var(--dark);
--crumb-chip-hover-bg: rgba(255, 255, 255, .72);
--crumb-accent: var(--primary-dark, var(--primary));
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--compact,
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search {
background: var(--crumb-bar-bg);
border-bottom: 1px solid var(--crumb-bar-border);
box-shadow: var(--crumb-bar-shadow);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search > .home-hero-orb {
display: none;
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-breadcrumb {
color: var(--crumb-trail);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-breadcrumb a:hover {
color: var(--crumb-hover);
text-decoration: underline;
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-breadcrumb-home {
opacity: 1;
color: var(--crumb-trail);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-breadcrumb-home:hover {
color: var(--crumb-hover);
}
html[data-crumb="light"] .hero-breadcrumb-sep { opacity: .5; }
html[data-crumb="plain"] .hero-breadcrumb-sep { opacity: .65; }
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-breadcrumb-current {
color: var(--crumb-current);
font-weight: 600;
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-issue-link,
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-support-link {
color: var(--crumb-trail);
background: transparent;
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-issue-link:hover,
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-issue-link:focus-visible,
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-support-link:hover,
html:is([data-crumb="light"], [data-crumb="plain"]) .hero-support-link:focus-visible {
background: transparent;
color: var(--crumb-accent);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .hero-search-head h1 {
color: var(--dark);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .home-hero-eyebrow {
background: var(--primary-pale2);
border-color: var(--gray-light);
color: var(--crumb-accent);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .hero-expand-btn {
background: transparent;
border-color: var(--border-control);
color: var(--crumb-accent);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .hero-expand-btn:hover {
background: var(--crumb-chip-hover-bg);
border-color: var(--crumb-accent);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .search-wrap {
border: 2px solid var(--border-control);
box-shadow: 0 1px 3px rgba(11, 55, 96, .07);
transition: box-shadow var(--tr), border-color var(--tr);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .search-wrap:hover {
border-color: var(--crumb-accent);
box-shadow: 0 2px 8px rgba(11, 55, 96, .10);
}
html:is([data-crumb="light"], [data-crumb="plain"]) .hero--search .search-wrap:focus-within {
border-color: var(--primary-dark, var(--primary));
box-shadow: 0 0 0 1px var(--primary-dark, var(--primary)),
0 2px 10px rgba(11, 55, 96, .12);
}
/* ── css/site-notice.css ── */
.site-notice-slot[hidden] { display: none !important; }
.site-notice-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.site-notice--info {
--sn-fg: var(--fastlane-3-fg, #0B3760);
--sn-bg: var(--fastlane-3, #DAEBFB);
--sn-border: var(--fastlane-3-border, #BCD8F3);
--sn-weight: 600;
}
.site-notice--warning {
--sn-fg: var(--dx-state-request-fg, #AD5500);
--sn-bg: var(--dx-state-request-bg, #FCF0DE);
--sn-border: #EFD3A6;
}
.site-notice--critical {
--sn-fg: #FFFFFF;
--sn-bg: var(--dx-state-closed-fg, #B3352C);
--sn-border: var(--dx-state-closed-fg, #B3352C);
}
.site-notice-strip {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
box-sizing: border-box;
padding: 0 max(12px, calc((100% - 1280px) / 2 + 16px));
background: var(--sn-bg);
border-bottom: 1px solid var(--sn-border);
color: var(--sn-fg);
font-size: 14px;
font-weight: var(--sn-weight, 400);
line-height: 1.35;
}
.site-notice-inner {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 0;
padding: 8px 0 8px 32px;
}
.site-notice--fixed .site-notice-inner { padding-left: 0; }
.site-notice-icon,
.site-notice-close-icon { display: inline-flex; flex-shrink: 0; }
.site-notice-icon svg,
.site-notice-close-icon svg { display: block; }
.site-notice-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-notice-strip a.site-notice-link {
color: inherit;
font-weight: 600;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
flex-shrink: 0;
}
.site-notice-strip a.site-notice-link:hover {
color: inherit;
text-decoration-thickness: 2px;
}
.site-notice-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: 8px;
}
.site-notice-close:hover { background: rgba(7, 31, 51, .08); }
.site-notice--critical .site-notice-close:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 768px) {
.site-notice-strip { padding: 6px 0 6px 16px; align-items: flex-start; }
.site-notice-inner {
align-items: flex-start;
justify-content: flex-start;
padding: 4px 0;
}
.site-notice-text {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.site-notice-icon { margin-top: 2px; }
.site-notice--fixed { padding-right: 16px; }
.site-notice-close {
width: 44px;
height: 44px;
margin: -4px 0;
border-radius: 12px;
}
}
@media print {
.site-notice-slot { display: none !important; }
}
/* ── css/header-warm.css ── */
@media (max-width: 768px) {
.header-inner .lang-pill { display: none; }
.mobile-nav-settings .lang-pill {
display: flex; justify-content: center;
height: 44px; margin: 4px 16px 8px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border); border-radius: 22px;
}
.mobile-nav-settings .lang-pill .lang-btn {
background: none; border: 0; padding: 0 4px; cursor: pointer;
font-family: var(--font-body); font-size: .95rem; font-weight: 600;
color: var(--dx-text-muted);
}
.mobile-nav-settings .lang-pill .lang-btn.active { color: var(--dx-brand); font-weight: 700; }
.mobile-nav-settings .lang-pill .lang-sep { margin: 0 10px; color: #C8CFD4; }
}
@media (min-width: 769px) {
.nav-dropdown-panel {
top: calc(100% + 14px);
left: 0;
right: auto;
width: 286px;
min-width: 0;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 11px;
box-shadow: var(--dx-shadow-menu);
padding: 7px 0;
overflow: visible;
}
.nav-dropdown-panel.is-flipped { left: auto; right: 0; }
.nav-dropdown-panel::before,
.login-dropdown-panel::before {
content: "";
position: absolute;
top: -7px; left: var(--dd-arrow-left, 22px);
width: 12px; height: 12px;
background: var(--dx-surface-card);
border-left: 1px solid var(--dx-border);
border-top: 1px solid var(--dx-border);
transform: rotate(45deg);
}
.nav-dropdown-panel.is-flipped::before,
.login-dropdown-panel::before { left: auto; right: 46px; }
.nav-dropdown-item,
.login-menu-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 16px;
font-size: .84rem; font-weight: 500;
color: var(--dx-text);
text-decoration: none;
border-radius: 0;
}
.nav-dropdown-item:hover,
.login-menu-item:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
text-decoration: none;
}
.nav-dropdown-item > svg,
.login-menu-item > svg {
width: 17px; height: 17px; flex: 0 0 17px;
color: var(--dx-brand); opacity: .85;
}
.nav-dropdown-section-label,
.login-menu-heading {
font-size: .625rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
color: var(--dx-text-muted);
padding: 11px 16px 6px;
}
.nav-dropdown-divider,
.login-menu-sep {
height: 1px; background: var(--dx-border);
margin: 7px 0; border: 0;
}
.login-menu-count {
margin-left: auto;
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
border-radius: 10px;
padding: 1px 8px;
font-size: .69rem; font-weight: 700;
color: var(--dx-text-muted);
}
.login-menu-badge {
margin-left: auto;
background: var(--dx-state-request-bg);
color: var(--dx-state-request-fg);
border-radius: 9px;
padding: 2px 7px;
font-size: .66rem; font-weight: 700;
}
.lang-pill {
display: flex; align-items: center;
height: 36px;
padding: 0 13px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 18px;
flex-shrink: 0;
}
.lang-pill .lang-btn {
background: none; border: 0; padding: 0;
cursor: pointer;
font-family: var(--font-body);
font-size: .8rem; font-weight: 600; letter-spacing: .03em;
color: var(--dx-text-muted);
transition: color var(--tr);
}
.lang-pill .lang-btn:hover { color: var(--dx-brand-light); }
.lang-pill .lang-btn.active { color: var(--dx-brand); font-weight: 700; }
.lang-pill .lang-sep {
margin: 0 6px;
color: #C8CFD4;
font-weight: 400;
}
.login-box { display: flex; align-items: center; gap: 0; }
.login-join-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 36px;
margin-left: -20px;
padding: 0 16px 0 36px;
border: 1.5px solid var(--dx-brand);
border-radius: 18px;
background: var(--dx-surface-card);
color: var(--dx-brand);
font-family: var(--font-body);
font-size: .8rem; font-weight: 700;
text-decoration: none; white-space: nowrap;
position: relative; z-index: 0;
transition: background var(--tr), color var(--tr);
}
.login-join-btn:hover {
background: var(--dx-brand); color: var(--dx-text-on-dark);
text-decoration: none;
}
.login-box[data-state="logged-out"] .login-box-btn { position: relative; z-index: 1; }
.login-box[data-state="logged-out"] .login-box-btn {
height: 36px; padding: 0 18px; gap: 8px;
background: var(--dx-brand);
border: 1.5px solid var(--dx-brand);
border-radius: 18px;
color: var(--dx-text-on-dark);
}
.login-box[data-state="logged-out"] .login-box-btn:hover {
background: var(--dx-brand-deep); border-color: var(--dx-brand-deep);
}
.login-box[data-state="logged-out"] .login-box-icon-wrap {
width: auto; height: auto; background: none; color: currentColor;
}
.login-box[data-state="logged-out"] .login-box-label {
position: static; left: auto;
font-size: .8rem; font-weight: 700; text-transform: none;
letter-spacing: 0; color: currentColor;
}
.login-box-avatar {
display: none;
width: 25px; height: 25px; flex: 0 0 25px;
border-radius: 50%;
background: var(--dx-brand);
color: var(--dx-text-on-dark);
font-size: .64rem; font-weight: 700;
align-items: center; justify-content: center;
line-height: 1;
}
.login-box[data-state="logged-in"] .login-box-avatar { display: flex; }
.login-box[data-state="logged-in"] .login-box-icon-wrap { display: none; }
.login-box[data-state="logged-in"] .login-box-btn {
height: 36px; padding: 0 13px 0 5px; gap: 8px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 18px;
color: var(--dx-brand);
}
.login-box[data-state="logged-in"] .login-box-label {
font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.login-box[data-state="logged-in"] .login-box-btn:hover {
background: var(--dx-surface-band-soft);
}
.login-box[data-state="logged-in"] .login-box-btn[aria-expanded="true"] {
background: var(--dx-brand);
border-color: var(--dx-brand);
color: var(--dx-text-on-dark);
}
.login-box[data-state="logged-in"] .login-box-btn[aria-expanded="true"] .login-box-avatar {
background: var(--dx-surface-card); color: var(--dx-brand);
}
.login-dropdown-panel,
.login-box[data-state="logged-in"] .login-dropdown-panel {
top: calc(100% + 14px);
right: 0; left: auto;
width: 306px; min-width: 0;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 11px;
box-shadow: var(--dx-shadow-menu);
padding: 7px 0;
overflow: visible;
}
.login-identity {
display: flex; align-items: center; gap: 11px;
margin: -7px 0 4px;
padding: 14px 16px;
background: var(--dx-surface-work);
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 10px 10px 0 0;
}
.login-identity[hidden] { display: none; }
.login-identity-avatar {
width: 36px; height: 36px; flex: 0 0 36px;
border-radius: 18px;
background: var(--dx-brand);
color: var(--dx-text-on-dark);
font-size: .85rem; font-weight: 700; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.login-identity-body { flex: 1; min-width: 0; }
.login-identity-name {
display: block;
font-family: var(--font-head);
font-size: .95rem; font-weight: 600;
color: var(--dx-brand);
text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.login-identity-name:hover { text-decoration: underline; }
.login-identity-org {
display: block;
margin-top: 2px;
font-size: .78rem;
color: var(--dx-text-on-work);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.login-identity-org-link { text-decoration: none; }
.login-identity-org-link:hover { text-decoration: underline; }
.login-identity-org b { color: var(--dx-brand); font-weight: 700; }
.login-menu-foot {
display: flex; align-items: center; gap: 9px;
margin: 7px 0 -7px;
padding: 10px 16px;
background: var(--dx-surface-band-soft);
border-top: 1px solid var(--dx-border);
border-radius: 0 0 10px 10px;
font-size: .8rem; font-weight: 600;
color: var(--dx-state-closed-fg);
text-decoration: none;
}
.login-menu-foot:hover { text-decoration: underline; }
.login-menu-foot > svg { width: 14px; height: 14px; flex: 0 0 14px; }
.login-menu-foot .login-menu-foot-right {
margin-left: auto;
font-size: .72rem; font-weight: 600;
color: var(--dx-text-muted);
}
.header-search-form,
.basket-header-btn,
.header-hubs {
border-radius: 18px;
}
.basket-header-btn,
.header-hubs {
box-sizing: border-box;
width: 36px; height: 36px;
border: 1px solid var(--dx-border);
background: var(--dx-surface-card);
color: var(--dx-text-muted);
}
.basket-header-btn:hover,
.header-hubs:hover {
border-color: var(--dx-brand-light);
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
}
.basket-header-btn .basket-count-badge { top: -3px; right: -3px; }
.header-hubs + .basket-header-btn { margin-left: -4px; }
}
.login-dropdown-cols {
display: block;
grid-template-columns: none;
padding: 0;
}
.login-menu-section[hidden] { display: none; }
.login-menu-item.login-nav-coming {
color: var(--dx-text-muted);
cursor: default;
}
.login-menu-item.login-nav-coming:hover { background: none; color: var(--dx-text-muted); }
button.login-menu-item {
width: 100%;
background: none;
border: 0;
font-family: var(--font-body);
text-align: left;
cursor: pointer;
}
@media (max-width: 768px) {
.login-identity {
display: flex; align-items: center; gap: 12px;
padding: 16px;
background: var(--dx-surface-work);
border-bottom: 1px solid var(--dx-surface-work-border);
}
.login-identity[hidden] { display: none; }
.login-identity-avatar {
width: 38px; height: 38px; flex: 0 0 38px;
border-radius: 19px;
background: var(--dx-brand); color: var(--dx-text-on-dark);
font-size: .88rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.login-identity-body { flex: 1; min-width: 0; }
.login-identity-name {
display: block;
font-family: var(--font-head);
font-size: .95rem; font-weight: 600; color: var(--dx-brand);
}
.login-identity-org {
display: block; margin-top: 3px;
font-size: .78rem; color: var(--dx-text-on-work); text-decoration: none;
}
.login-identity-org b { color: var(--dx-brand); font-weight: 700; }
.login-menu-heading {
font-size: .66rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
color: var(--dx-text-muted);
padding: 14px 16px 6px;
}
.login-menu-item {
display: flex; align-items: center; gap: 12px;
min-height: 44px;
padding: 10px 16px;
font-size: .92rem; font-weight: 500;
color: var(--dx-text); text-decoration: none;
}
.login-menu-item > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--dx-brand); }
.login-menu-sep { height: 1px; background: var(--dx-border); margin: 8px 0; border: 0; }
.login-menu-foot {
display: flex; align-items: center; gap: 10px;
min-height: 44px;
padding: 12px 16px;
background: var(--dx-surface-band-soft);
border-top: 1px solid var(--dx-border);
font-size: .92rem; font-weight: 600;
color: var(--dx-state-closed-fg); text-decoration: none;
}
.login-menu-foot > svg { width: 16px; height: 16px; flex: 0 0 16px; }
}
.login-box[data-state="logged-in"] .login-join-btn,
.login-box[data-state="checking"] .login-join-btn,
.login-box[data-busy="1"] .login-join-btn { display: none; }
.login-box[data-busy="1"] .login-box-btn,
#mobileNavLoginSection[data-busy="1"] .mobile-nav-login-btn {
pointer-events: none;
cursor: default;
}
.login-box[data-busy="1"] .login-box-avatar,
.login-box[data-busy="1"] .login-box-icon--outline,
.login-box[data-busy="1"] .login-box-icon--filled,
.login-box[data-busy="1"] .login-box-chevron {
display: none;
}
.login-box[data-busy="1"] .login-box-icon-wrap {
display: inline-flex;
width: auto; height: auto;
background: none;
color: currentColor;
}
.login-box[data-busy="1"] .login-box-icon--spinner {
display: block;
color: currentColor;
transform-origin: 50% 50%;
animation: dexes-login-spin .8s linear infinite;
}
.login-box[data-busy="1"] .login-box-label {
position: static; left: auto;
font-size: .8rem; font-weight: 700;
text-transform: none; letter-spacing: 0;
color: currentColor;
}
#mobileNavLoginSection[data-busy="1"] .mobile-nav-login-icon--person {
display: none;
}
#mobileNavLoginSection[data-busy="1"] .mobile-nav-login-icon--spinner {
display: inline-block;
color: currentColor;
transform-origin: 50% 50%;
animation: dexes-login-spin .8s linear infinite;
}
#mobileNavLoginSection[data-busy="1"] #mobileNavLoginLabel {
position: static; left: auto;
}
@media (prefers-reduced-motion: reduce) {
.login-box[data-busy="1"] .login-box-icon--spinner,
#mobileNavLoginSection[data-busy="1"] .mobile-nav-login-icon--spinner {
animation: none;
}
}
@media (max-width: 768px) {
.login-join-btn { display: none; }
}
@media (min-width: 769px) {
.basket-header-btn .basket-count-badge {
top: -1px; right: -1px;
width: 15px; height: 15px;
min-width: 15px;
border-radius: 8px;
font-size: .58rem;
box-shadow: 0 0 0 1.5px var(--dx-surface-card);
}
.basket-header-btn svg,
.header-hubs svg { width: 17px; height: 17px; }
.header-search-form { border-color: var(--dx-border); }
.header-search-form:hover,
.header-search[data-expanded="true"] .header-search-form {
border-color: var(--dx-brand-light);
}
}
@media (min-width: 769px) {
.login-join-btn {
margin-left: -26px;
padding: 0 16px 0 40px;
background: var(--dx-surface-band);
border: 0;
color: var(--dx-brand);
}
.login-join-btn:hover {
background: var(--dx-surface-work);
color: var(--dx-brand-deep);
}
}
@media (min-width: 769px) {
.header-spacer { display: none; }
.header-search { margin-left: auto; }
.header-nav { margin-left: 4px; }
}
@media (min-width: 769px) {
.tenant-switcher-panel {
top: calc(100% + 14px);
left: 0;
border: 1px solid var(--dx-border);
border-radius: 11px;
box-shadow: var(--dx-shadow-menu);
overflow: visible;
}
.tenant-switcher-panel::before {
content: "";
position: absolute;
top: -7px; left: 22px;
width: 12px; height: 12px;
background: var(--dx-surface-card);
border-left: 1px solid var(--dx-border);
border-top: 1px solid var(--dx-border);
transform: rotate(45deg);
}
}
@media (min-width: 769px) {
.lang-pill .lang-btn { font-size: .74rem; }
.lang-pill .lang-btn.active {
font-size: .8rem;
font-weight: 800;
color: var(--dx-brand);
pointer-events: none;
cursor: default;
}
.lang-pill .lang-btn:not(.active):hover { color: var(--dx-brand-light); }
}
@media (min-width: 769px) {
.basket-header-btn .basket-count-badge {
top: 1px; right: 1px;
width: 14px; height: 14px;
min-width: 14px;
border-radius: 7px;
font-size: .55rem;
box-shadow: none;
}
}
@media (max-width: 768px) {
.login-box-avatar { display: none !important; }
}
@media (min-width: 769px) {
.login-box[data-state="logged-out"] .login-box-btn:hover {
background: var(--dx-brand-deep);
border-color: var(--dx-brand-deep);
color: var(--dx-text-on-dark);
}
.login-box[data-state="logged-in"] .login-box-btn:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-border-strong);
color: var(--dx-brand);
}
}
@media (min-width: 769px) {
.nav-link:hover,
.nav-link[aria-expanded="true"] {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
text-decoration: none;
}
.tenant-switcher-btn:hover,
.tenant-switcher-btn[aria-expanded="true"] {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
text-decoration: none;
}
}
.tenant-switcher-panel {
padding: 7px 0;
background: var(--dx-surface-card);
}
.tenant-switcher-item {
padding: 9px 16px;
border-radius: 0;
font-size: .84rem; font-weight: 500;
color: var(--dx-text);
gap: 11px;
}
.tenant-switcher-item:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
text-decoration: none;
}
.tenant-switcher-item.is-active {
background: var(--dx-surface-band);
color: var(--dx-brand);
font-weight: 700;
}
.tenant-switcher-item-icon {
width: 17px; height: 17px; flex: 0 0 17px;
color: var(--dx-brand);
opacity: .9;
}
.tenant-switcher-item.is-active .tenant-switcher-item-icon { color: inherit; }
.tenant-switcher-item--parent,
.tenant-switcher-item--parent:hover {
padding: 11px 16px 6px;
font-size: .625rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
color: var(--dx-text-muted);
background: none;
}
.header-search .header-search-input:focus,
.header-search .header-search-input:focus-visible {
outline: none;
box-shadow: none;
}
.header-search .header-search-form:focus-within {
border-color: var(--dx-brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-brand) 22%, transparent);
}
@media (min-width: 769px) {
.header-search-form { border-color: var(--dx-border-strong); }
.header-search-form:hover { border-color: var(--dx-brand); }
.header-search[data-expanded="true"] .header-search-form {
border-color: var(--dx-brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-brand) 22%, transparent),
0 6px 22px rgba(11, 53, 87, .14);
}
}
@media (min-width: 769px) {
.lang-pill {
padding: 0;
overflow: hidden;
}
.lang-pill .lang-btn {
align-self: stretch;
display: inline-flex; align-items: center; justify-content: center;
min-width: 37px;
padding: 0 6px;
transition: background var(--tr), color var(--tr), font-size var(--tr);
}
.lang-pill .lang-btn:not(.active):hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
font-size: calc(.74rem + 2px);
font-weight: 800;
}
.lang-pill .lang-sep {
align-self: stretch;
display: inline-flex; align-items: center;
margin: 0;
padding: 0 1px;
transition: background var(--tr);
}
.lang-pill:has(.lang-btn:not(.active):hover) .lang-sep {
background: var(--dx-surface-band-soft);
}
.lang-pill .lang-btn.active { background: none; }
}
@media (min-width: 769px) {
.header-nav { margin-right: auto; }
.header-search { margin-left: 0; }
}
.login-identity {
padding-right: 14px;
}
.login-identity > .login-menu-foot {
flex-shrink: 0;
margin: 0;
display: inline-flex; align-items: center; gap: 6px;
min-height: 34px;
padding: 0 11px;
border: 1px solid var(--dx-border);
border-radius: 17px;
background: var(--dx-surface-card);
color: var(--dx-state-closed-fg);
font-size: .78rem; font-weight: 600;
text-decoration: none;
}
.login-identity > .login-menu-foot:hover {
background: var(--dx-state-closed-bg);
border-color: var(--dx-state-closed-fg);
color: var(--dx-state-closed-fg);
text-decoration: none;
}
.login-identity > .login-menu-foot svg { width: 14px; height: 14px; flex: 0 0 14px; }
.basket-header-btn.has-items {
border-color: var(--dx-border);
color: var(--dx-brand);
}
.basket-header-btn.has-items:hover {
border-color: var(--dx-brand-light);
color: var(--dx-brand);
}
.basket-count-badge {
background: var(--dx-accent);
color: var(--dx-accent-ink);
font-weight: 700;
}
.login-box-burger { display: none; flex-shrink: 0; }
.login-box[data-state="logged-in"] .login-box-burger {
display: block;
margin-left: 7px;
color: currentColor;
opacity: .8;
}
.login-box[data-state="logged-in"] .login-box-btn:hover .login-box-burger,
.login-box[data-state="logged-in"] .login-box-btn[aria-expanded="true"] .login-box-burger {
opacity: 1;
}
.login-box[data-state="logged-in"] .login-box-chevron { display: none; }
.login-box[data-busy="1"] .login-box-burger { display: none; }
@media (max-width: 768px) {
.login-box[data-state="logged-in"] .login-box-burger {
margin-left: 0;
opacity: 1;
}
}
.login-dropdown-quick--stacked {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.site-header::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 100vh;
background: var(--white);
pointer-events: none;
}
.login-menu-item.login-menu-item--home { font-weight: 600; }
.login-menu-item > .nav-badge { font-size: .64rem; }
#loginDropdownPanel .login-dropdown-cols > .login-menu-item:not(.login-menu-item--home),
#loginDropdownPanel .login-dropdown-admin-section > .login-menu-item:not(.login-menu-item--home) {
padding-left: 30px;
}
/* ── css/lang-menu.css ── */
.lang-btn .lang-btn-flag,
.lang-btn .lang-btn-name { display: none; }
#langMenu { position: relative; flex-shrink: 0; }
#langMenu .lang-menu-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 36px; box-sizing: border-box;
padding: 0 11px 0 10px;
background: var(--dx-surface-card, #FFFFFF);
border: 1px solid var(--dx-border, #E5DFD5);
border-radius: 18px;
font-family: var(--font-body);
font-size: .8rem; font-weight: 700; letter-spacing: .03em;
color: var(--dx-brand, #0B3557);
cursor: pointer;
transition: border-color var(--tr), background var(--tr);
}
#langMenu .lang-menu-btn:hover {
border-color: var(--dx-brand-light, #12507F);
background: var(--dx-surface-band-soft, #F5F1EA);
}
#langMenu .lang-menu-btn[aria-expanded="true"] { border-color: var(--dx-brand, #0B3557); }
#langMenu .lang-menu-btn:focus-visible {
outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 2px;
}
#langMenu .lang-menu-flag { display: inline-flex; line-height: 0; }
#langMenu .lang-menu-flag svg { border-radius: 3px; }
#langMenu .lang-menu-chevron { color: var(--dx-text-muted, #5E6C75); transition: transform var(--tr); }
#langMenu .lang-menu-btn[aria-expanded="true"] .lang-menu-chevron { transform: rotate(180deg); }
#langMenu .lang-menu-panel {
position: absolute; top: calc(100% + 8px); right: 0;
z-index: 1200;
width: 240px; box-sizing: border-box;
padding: 14px 14px 12px;
background: var(--dx-surface-card, #FFFFFF);
border: 1px solid var(--dx-border, #E5DFD5);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(11, 53, 87, .16);
}
#langMenu .lang-menu-panel[hidden] { display: none; }
#langMenu .lang-menu-heading {
margin: 0 0 6px;
font-family: var(--font-head);
font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--dx-text-muted, #5E6C75);
}
#langMenu #langSwitcher {
display: flex; flex-direction: column; align-items: stretch;
height: auto; padding: 0; margin: 0 0 12px;
background: none; border: 0; border-radius: 0; overflow: visible;
}
#langMenu #langSwitcher .lang-sep { display: none; }
#langMenu #langSwitcher .lang-btn {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
width: 100%; min-width: 0; height: auto;
padding: 7px 8px; margin: 0;
background: none; border: 0; border-radius: 8px;
font-family: var(--font-body); font-size: .88rem; font-weight: 500; letter-spacing: 0;
color: var(--dx-text, #1D2B36);
text-align: left; cursor: pointer;
pointer-events: auto;
}
#langMenu #langSwitcher .lang-btn:not(.active):hover {
background: var(--dx-surface-band-soft, #F5F1EA);
color: var(--dx-brand, #0B3557);
font-size: .88rem; font-weight: 500;
}
#langMenu #langSwitcher .lang-btn.active {
font-size: .88rem; font-weight: 700;
color: var(--dx-brand, #0B3557);
background: none;
pointer-events: none; cursor: default;
}
#langMenu #langSwitcher .lang-btn:focus-visible {
outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: -2px;
}
#langMenu #langSwitcher .lang-btn .lang-btn-flag { display: inline-flex; line-height: 0; }
#langMenu #langSwitcher .lang-btn .lang-btn-name { display: inline; }
#langMenu #langSwitcher .lang-btn .lang-btn-code { display: none; }
#langMenu .lang-menu-currency {
padding-top: 10px;
border-top: 1px solid var(--dx-border, #E5DFD5);
}
#langMenu .lang-menu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#langMenu .lang-menu-chip {
display: inline-flex; align-items: center;
height: 30px; padding: 0 13px; box-sizing: border-box;
border-radius: 999px;
border: 1.5px solid var(--dx-interactive, #15568F);
background: #FFFFFF;
color: var(--dx-interactive, #15568F);
font-family: var(--font-body); font-size: .78rem; font-weight: 700;
cursor: pointer;
}
#langMenu .lang-menu-chip.is-active {
background: var(--dx-brand, #0B3557);
border-color: var(--dx-brand, #0B3557);
color: #FFFFFF;
cursor: default;
}
#langMenu .lang-menu-chip:focus-visible { outline: 2px solid var(--dx-focus-ring, #15568F); outline-offset: 2px; }
#langMenu .lang-menu-note {
margin: 0;
font-size: .72rem; line-height: 1.45;
color: var(--dx-text-muted, #5E6C75);
}
@media (max-width: 768px) {
.header-inner #langMenu { display: none; }
}
/* ── css/publish-warm.css ── */
.publish-wrap { max-width: 1200px; }
#publishDatasetPage .publish-hero,
#publishDatasetPage .request-hero {
background: none;
border-radius: 0;
padding: 0 0 4px;
margin-bottom: 18px;
color: var(--dx-text);
box-shadow: none;
}
#publishDatasetPage .publish-hero h1 {
color: var(--dx-brand);
margin-bottom: 6px;
}
#publishDatasetPage .publish-hero p {
color: var(--dx-text-muted);
max-width: 70ch;
}
#publishDatasetPage .pub-hero-actions {
position: absolute;
right: 0; bottom: auto; top: 0;
}
#publishDatasetPage .pub-hero-actions .pub-btn-icon {
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
color: var(--dx-brand);
}
#publishDatasetPage .pub-hero-actions .pub-btn-icon:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand-light);
}
#publishDatasetPage .pub-parts-intro-text { display: none; }
#publishDatasetPage .pub-parts-intro {
justify-content: flex-end;
margin-bottom: 12px;
}
@media (min-width: 1040px) {
.pub-parts-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 24px;
align-items: start;
}
#pubPartsNav { grid-column: 1 / -1; }
.pw-main { grid-column: 1; min-width: 0; }
.pw-rail { grid-column: 2; }
}
@media (max-width: 1039px) {
.pw-rail { margin-top: 20px; }
}
#publishDatasetPage .pub-parts {
counter-reset: pw-step;
display: flex;
gap: 0;
margin-bottom: 20px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 9px;
overflow: hidden;
}
#publishDatasetPage .pub-parts-shell .pub-part-card {
counter-increment: pw-step;
flex: 1;
min-width: 0;
padding: 12px 16px;
gap: 10px;
background: transparent;
border: 0;
border-right: 1px solid var(--dx-border);
border-radius: 0;
box-shadow: none;
}
#publishDatasetPage .pub-parts-shell .pub-part-card:last-child { border-right: 0; }
#publishDatasetPage .pub-parts-shell .pub-part-card:hover {
background: var(--dx-surface-band-soft);
border-right-color: var(--dx-border);
box-shadow: none;
}
#publishDatasetPage .pub-parts-shell .pub-part-card.pub-part-active {
background: var(--dx-surface-work);
border: 0;
border-right: 1px solid var(--dx-border);
border-radius: 0;
box-shadow: none;
}
#publishDatasetPage .pub-parts-shell .pub-part-card.pub-part-active:last-child { border-right: 0; }
#publishDatasetPage .pub-parts-shell .pub-part-card.pub-part-active::after { display: none; }
#publishDatasetPage .pub-parts-shell .pub-part-status {
width: 23px; height: 23px; flex: 0 0 23px;
border-radius: 12px;
border: 0;
background: var(--dx-surface-band-soft);
color: var(--dx-text-muted);
font-size: .72rem; font-weight: 700;
font-family: var(--font-body);
}
#publishDatasetPage .pub-parts-shell .pub-part-status svg { display: none !important; }
#publishDatasetPage .pub-parts-shell .pub-part-status::before { content: counter(pw-step); }
#publishDatasetPage .pub-parts-shell .pub-part-card.pub-part-active .pub-part-status {
background: var(--dx-brand);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-parts-shell .pub-part-card[data-status="ok"] .pub-part-status {
background: var(--dx-state-open-bg);
color: var(--dx-state-open-fg);
}
#publishDatasetPage .pub-parts-shell .pub-part-card[data-status="ok"] .pub-part-status::before {
content: "\2713";
font-size: .85rem;
}
#publishDatasetPage .pub-part-title { color: var(--dx-text-muted); font-weight: 600; }
#publishDatasetPage .pub-part-card[data-status="ok"] .pub-part-title { color: var(--dx-text); }
#publishDatasetPage .pub-part-card.pub-part-active .pub-part-title { color: var(--dx-brand); }
#publishDatasetPage .pub-part-sub { color: var(--dx-text-muted); }
#publishDatasetPage .pub-part-card.pub-part-active .pub-part-sub { color: var(--dx-text-on-work); }
@media (max-width: 800px) {
#publishDatasetPage .pub-parts { flex-wrap: wrap; }
#publishDatasetPage .pub-parts-shell .pub-part-card { flex: 1 1 50%; }
}
#publishDatasetPage {
--pub-group-bg: var(--dx-surface-work);
}
#publishDatasetPage .pub-part-panel {
border: 1px solid var(--dx-surface-work-border);
border-radius: 12px 12px 0 0;
border-bottom: 0;
}
#publishDatasetPage .pub-panel-header h2 { color: var(--dx-brand); }
#publishDatasetPage .pub-panel-header p,
#publishDatasetPage .pub-field-hint,
#publishDatasetPage .pub-dist-sublabel { color: var(--dx-text-on-work); }
#publishDatasetPage .pub-subsection-title,
#publishDatasetPage .pub-section-label { color: var(--dx-brand); }
#publishDatasetPage .pub-part-panel input[type="text"],
#publishDatasetPage .pub-part-panel input[type="url"],
#publishDatasetPage .pub-part-panel input[type="email"],
#publishDatasetPage .pub-part-panel input[type="number"],
#publishDatasetPage .pub-part-panel input[type="date"],
#publishDatasetPage .pub-part-panel input[type="search"],
#publishDatasetPage .pub-part-panel textarea,
#publishDatasetPage .pub-part-panel select {
background: var(--dx-surface-card);
border-color: var(--dx-line-control);
}
#publishDatasetPage .pub-panel,
#publishDatasetPage .request-form-section {
background: transparent;
border: 0;
box-shadow: none;
}
#publishDatasetPage .request-form-section + .request-form-section {
border-top: 1px solid var(--dx-surface-work-border);
border-radius: 0;
}
#publishDatasetPage .pub-bron-emptystate {
background: transparent;
border: 1px dashed var(--dx-surface-work-border);
box-shadow: none;
}
#publishDatasetPage .pub-action-bar {
margin-top: 0;
padding: 14px 18px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-surface-work-border);
border-top: 1px solid var(--dx-border);
border-radius: 0 0 12px 12px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
box-shadow: none;
}
.pw-step-meta {
display: flex; flex-direction: column; gap: 2px;
min-width: 0; margin-right: auto;
}
.pw-step-meta strong {
font-size: .78rem; font-weight: 700; color: var(--dx-brand);
font-family: var(--font-body);
}
.pw-step-meta span { font-size: .72rem; color: var(--dx-text-muted); }
#publishDatasetPage .pub-action-bar .pub-btn-cancel { margin-right: 0; }
#publishDatasetPage .pub-action-bar-right { margin-left: 0; }
.pw-rail { display: flex; flex-direction: column; gap: 14px; }
.pw-card {
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 12px;
padding: 16px 18px;
box-shadow: var(--dx-shadow-card);
}
.pw-card h3 {
font-family: var(--font-head);
font-size: .88rem; font-weight: 600;
color: var(--dx-brand);
margin: 0 0 4px;
}
.pw-card p {
font-size: .78rem; line-height: 1.55;
color: var(--dx-text-muted);
margin: 0 0 10px;
}
.pw-card p:last-child { margin-bottom: 0; }
.pw-progress {
height: 6px; border-radius: 3px;
background: var(--dx-surface-band);
overflow: hidden;
margin: 10px 0 12px;
}
.pw-progress-fill {
height: 100%;
background: var(--dx-state-open-fg);
border-radius: 3px;
transition: width .3s ease;
}
.pw-check { list-style: none; margin: 0; padding: 0; }
.pw-check li {
display: flex; align-items: flex-start; gap: 9px;
padding: 6px 0;
font-size: .8rem;
color: var(--dx-text);
border-top: 1px solid var(--dx-border);
}
.pw-check li:first-child { border-top: 0; }
.pw-check-mark {
flex: 0 0 18px; width: 18px; height: 18px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: .64rem; font-weight: 700;
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
color: var(--dx-text-muted);
}
.pw-check li[data-state="ok"] .pw-check-mark {
background: var(--dx-state-open-bg);
border-color: var(--dx-state-open-fg);
color: var(--dx-state-open-fg);
}
.pw-check li[data-state="ok"] .pw-check-label { color: var(--dx-text-muted); }
.pw-check-label { min-width: 0; }
.pw-check-label em {
display: block; font-style: normal;
font-size: .72rem; color: var(--dx-text-muted);
}
.pw-card-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: .78rem; font-weight: 700;
color: var(--dx-interactive);
text-decoration: none;
}
.pw-card-link:hover { text-decoration: underline; }
#publishDatasetPage .pub-part-card[data-pw-extra] .pub-part-status::before {
content: "5";
}
#publishDatasetPage .pub-part-card[data-pw-extra][data-status="ok"] .pub-part-status {
background: var(--dx-surface-band-soft);
color: var(--dx-text-muted);
}
#pub-part-panel-overzicht .pub-summary-row {
border-bottom-color: var(--dx-surface-work-border);
}
#pub-part-panel-overzicht .pub-summary-key { color: var(--dx-brand); }
#pub-part-panel-overzicht .pub-summary-val { color: var(--dx-text-on-work); }
#pub-part-panel-overzicht .pub-summary-edit {
background: var(--dx-surface-card);
border-color: var(--dx-surface-work-border);
}
.pw-overview-lead {
font-size: .82rem;
color: var(--dx-text-on-work);
margin: 0 0 16px;
max-width: 70ch;
}
#publishDatasetPage .pub-parts-shell .pub-part-card[data-status="ok"]:not([data-pw-extra]) .pub-part-status {
background: var(--dx-state-open-fg);
color: #FFFFFF;
}
.pw-check li[data-state="ok"] .pw-check-mark {
background: var(--dx-state-open-fg);
border-color: var(--dx-state-open-fg);
color: #FFFFFF;
}
#publishDatasetPage .publish-hero { padding-bottom: 0; margin-bottom: 10px; }
#publishDatasetPage .pub-parts-intro { margin-bottom: 8px; }
#publishDatasetPage .pub-parts { margin-bottom: 14px; }
#publishDatasetPage .pub-typeswitch-btn {
padding: 8px 16px;
font-size: .84rem;
border-width: 1.5px;
}
#pub-part-panel-overzicht .pub-summary-section {
background: transparent;
border: 0;
box-shadow: none;
}
#pub-part-panel-overzicht .pub-summary-section + .pub-summary-section {
border-top: 1px solid var(--dx-surface-work-border);
}
#pub-part-panel-overzicht .pub-summary-section-title {
background: transparent;
border-bottom: 1px solid var(--dx-surface-work-border);
color: var(--dx-brand);
}
#publishDatasetPage .publish-hero { margin-bottom: 6px; }
#publishDatasetPage .pub-parts-intro { margin-bottom: 6px; }
#publishDatasetPage .pub-hero-actions { display: none; }
@media (min-width: 1040px) {
#publishDatasetPage .pub-parts-intro {
margin-top: -46px;
position: relative;
z-index: 2;
}
}
#publishDatasetPage .pub-parts-intro {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-bottom: 10px;
}
#publishDatasetPage .pub-typeswitch-btn {
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-brand);
color: var(--dx-brand);
}
#publishDatasetPage .pub-typeswitch-btn:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand);
color: var(--dx-brand-deep);
}
#publishDatasetPage .pub-typeswitch-btn:focus-visible {
outline: 2px solid var(--dx-brand); outline-offset: 2px;
}
#pub-part-panel-overzicht .pub-summary-section {
border: 1px solid var(--dx-surface-work-border);
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
}
#pub-part-panel-overzicht .pub-summary-section + .pub-summary-section {
border-top: 1px solid var(--dx-surface-work-border);
}
#pub-part-panel-overzicht .pub-summary-section[data-status="ok"] {
background: var(--dx-surface-band-soft);
}
#pub-part-panel-overzicht .pub-summary-section[data-status="todo"] {
background: var(--dx-surface-page);
}
#pub-part-panel-overzicht .pub-summary-section-title {
background: transparent;
border-bottom: 0;
color: var(--dx-brand);
}
#pub-part-panel-overzicht .pub-summary-section-body:not(:empty) {
border-top: 1px solid var(--dx-surface-work-border);
}
#pub-part-panel-overzicht .pub-summary-section-label { color: var(--dx-brand); }
#pub-part-panel-overzicht .pub-summary-section-state { color: var(--dx-text-muted); }
#pub-part-panel-overzicht .pub-summary-status-icon { color: var(--dx-text-muted); }
#pub-part-panel-overzicht .pub-summary-section[data-status="ok"] .pub-summary-status-icon {
color: var(--dx-state-open-fg);
}
#pub-part-panel-overzicht .pub-summary-subgroup,
#pub-part-panel-overzicht .pub-summary-row {
background: transparent;
}
#pub-part-panel-overzicht .pub-summary-subgroup-title {
color: var(--dx-brand);
}
#publishDatasetPage .pub-parts-intro { margin-bottom: 21px; }
#publishDatasetPage .pub-parts { margin-bottom: 3px; }
.publish-wrap { position: relative; }
@media (min-width: 1040px) {
#publishDatasetPage .pub-parts-intro {
position: absolute;
top: 34px; right: 24px;
margin: 0;
}
.pub-parts-shell {
column-gap: 24px;
row-gap: 0;
}
}
#publishDatasetPage .publish-hero { margin-bottom: 27px; }
#publishDatasetPage .pub-parts { margin-bottom: 3px; }
#publishDatasetPage .publish-hero { margin-bottom: 17px; }
#publishDatasetPage .pub-parts { margin-bottom: 13px; }
.pw-rail #pubPrefillBar {
display: block;
margin: 0;
padding: 16px 18px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 12px;
box-shadow: var(--dx-shadow-card);
font-size: .78rem;
color: var(--dx-text-muted);
}
.pw-rail #pubPrefillBar[hidden] { display: none; }
.pw-rail #pubPrefillBar .share-prefill-kick {
display: block;
margin-bottom: 6px;
color: var(--dx-text-muted);
}
.pw-rail #pubPrefillBar .share-prefill-name,
.pw-rail #pubPrefillBar .share-prefill-body strong {
color: var(--dx-brand);
}
.pw-rail #pubPrefillBar .share-prefill-body {
display: block;
line-height: 1.6;
}
.pw-rail #pubPrefillBar .share-prefill-route {
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
color: var(--dx-text-muted);
border-radius: 5px;
}
.pw-rail #pubPrefillBar .share-prefill-edit {
display: block;
width: 100%;
margin: 12px 0 0;
padding: 7px 12px;
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-brand);
border-radius: 999px;
color: var(--dx-brand);
font-size: .78rem; font-weight: 700;
}
.pw-rail #pubPrefillBar .share-prefill-edit:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand);
color: var(--dx-brand-deep);
}
:root {
--pub-group-bg: var(--dx-surface-work);
}
#publishDatasetPage .pub-panel,
#publishDatasetPage .request-form-section {
background: var(--dx-surface-page);
border: 1px solid var(--dx-surface-work-border);
border-radius: 10px;
}
#publishDatasetPage .request-form-section + .request-form-section {
border-top: 1px solid var(--dx-surface-work-border);
margin-top: 12px;
}
#publishDatasetPage .pub-bron-add-pill {
border-radius: 999px;
border: 1.5px solid var(--dx-brand);
background: var(--dx-surface-card);
color: var(--dx-brand);
padding: 8px 16px;
}
#publishDatasetPage .pub-bron-add-pill:hover:not([disabled]) {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand-deep);
color: var(--dx-brand-deep);
}
#publishDatasetPage .pub-bron-add-pill[disabled] {
border-radius: 999px;
border: 1.5px solid var(--dx-border-strong);
background: var(--dx-surface-band-soft);
color: var(--dx-text-faint);
}
#publishDatasetPage .pub-bron-add-pill--primary {
background: var(--dx-brand);
border-color: var(--dx-brand);
color: #fff;
padding: 9px 18px;
}
#publishDatasetPage .pub-bron-add-pill--primary:hover:not([disabled]) {
background: var(--dx-brand-deep);
border-color: var(--dx-brand-deep);
color: #fff;
}
#publishDatasetPage .pub-related-sources-toggle {
background: var(--dx-surface-band-soft);
border-bottom: 1px solid var(--dx-border);
color: var(--dx-text);
}
#publishDatasetPage .pub-related-sources.is-collapsed .pub-related-sources-toggle {
border-bottom: 0;
}
#publishDatasetPage .pub-source-block .pub-related-sources-toggle-count,
#publishDatasetPage .pub-source-block:not(.is-collapsed) .pub-related-sources-toggle-count {
background: var(--dx-brand);
border: 1px solid var(--dx-brand);
color: var(--dx-text-on-dark);
font-weight: 700;
}
#publishDatasetPage .pub-source-block-icon,
#publishDatasetPage .pub-source-block-files .pub-source-block-icon,
#publishDatasetPage .pub-source-block-relations .pub-source-block-icon {
background: var(--dx-surface-work);
color: var(--dx-brand);
}
#publishDatasetPage .pub-ds-card-meta {
color: var(--dx-brand);
}
#publishDatasetPage .pub-ds-card-icon {
background: var(--dx-surface-work);
color: var(--dx-brand);
}
.pub-bron-modal {
border-color: var(--dx-surface-work-border);
}
.pub-bron-modal-head {
background: var(--dx-surface-band-soft);
border-bottom-color: var(--dx-surface-work-border);
}
.pub-bron-modal-head h2,
.pub-bron-modal-head h3 {
color: var(--dx-brand);
}
.pub-bron-modal-foot {
border-top-color: var(--dx-surface-work-border);
}
.pub-dexpod-list,
.pub-bron-modal .pub-dexpod-list {
background: var(--dx-surface-card);
border-color: var(--dx-border);
}
#publishDatasetPage .pub-panel {
background: transparent;
border: 0;
border-radius: 0;
}
#publishDatasetPage .pub-panel > .pub-panel-header {
padding-left: 0;
padding-right: 0;
}
#publishDatasetPage .pub-bron-emptystate {
background: var(--dx-surface-page);
border: 1px dashed var(--dx-surface-work-border);
}
#publishDatasetPage .pub-bron-actions-card {
background: transparent;
border: 0;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
#publishDatasetPage .pub-bron-next-btn,
#publishDatasetPage .pub-btn-continue,
#publishDatasetPage .pub-part-next,
#publishDatasetPage .pub-substep-next,
#publishDatasetPage .pub-info-next-btn {
border-radius: 999px;
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-brand);
color: var(--dx-brand);
padding: 8px 16px;
font-weight: 600;
}
#publishDatasetPage .pub-bron-next-btn:hover:not(:disabled),
#publishDatasetPage .pub-btn-continue:hover:not(:disabled),
#publishDatasetPage .pub-part-next:hover:not(:disabled),
#publishDatasetPage .pub-substep-next:hover:not(:disabled),
#publishDatasetPage .pub-info-next-btn:hover:not(:disabled) {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand-deep);
color: var(--dx-brand-deep);
}
#publishDatasetPage .pub-bron-next-btn:focus-visible,
#publishDatasetPage .pub-btn-continue:focus-visible,
#publishDatasetPage .pub-part-next:focus-visible,
#publishDatasetPage .pub-substep-next:focus-visible,
#publishDatasetPage .pub-info-next-btn:focus-visible {
outline: 2px solid var(--dx-brand); outline-offset: 2px;
}
#publishDatasetPage .pub-btn-continue:disabled,
#publishDatasetPage .pub-part-next:disabled,
#publishDatasetPage .pub-substep-next:disabled {
background: var(--dx-surface-band-soft);
border-color: var(--dx-border-strong);
color: var(--dx-text-faint);
}
#publishDatasetPage #pubBtnContinue,
#publishDatasetPage #pubBtnPublishTop {
background: var(--dx-brand);
border: 1.5px solid var(--dx-brand);
color: var(--dx-text-on-dark);
}
#publishDatasetPage #pubBtnContinue:hover:not(:disabled),
#publishDatasetPage #pubBtnPublishTop:hover:not(:disabled) {
background: var(--dx-brand-deep); border-color: var(--dx-brand-deep);
}
#publishDatasetPage #pubBtnContinue:disabled,
#publishDatasetPage #pubBtnPublishTop:disabled {
background: var(--dx-surface-band-soft);
border-color: var(--dx-border-strong);
color: var(--dx-text-faint);
}
#publishDatasetPage .pub-related-sources-add {
border-radius: 999px;
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-brand);
color: var(--dx-brand);
padding: 8px 16px;
}
#publishDatasetPage .pub-related-sources-add:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand-deep);
color: var(--dx-brand-deep);
}
#publishDatasetPage .pub-delen-mode-cancel {
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-border-strong);
color: var(--dx-text-muted);
}
#publishDatasetPage .pub-delen-mode-cancel:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand);
color: var(--dx-brand);
}
#publishDatasetPage #pubDelenAccept.is-ready {
background: var(--dx-state-open-fg);
border-color: var(--dx-state-open-fg);
color: var(--dx-text-on-dark);
}
#publishDatasetPage #pubDelenAccept.is-ready:hover:not(:disabled) {
background: #18642F; border-color: #18642F; color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-offers-section .pub-btn-pill,
#publishDatasetPage .pub-bron-modal-btn-primary,
.pub-bron-modal .pub-bron-modal-btn-primary {
background: var(--dx-brand);
border-color: var(--dx-brand);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-offers-section .pub-btn-pill:hover,
#publishDatasetPage .pub-bron-modal-btn-primary:hover,
.pub-bron-modal .pub-bron-modal-btn-primary:hover {
background: var(--dx-brand-deep);
border-color: var(--dx-brand-deep);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-offers-section .pub-btn-pill:focus-visible {
outline: 2px solid var(--dx-brand); outline-offset: 2px;
}
#publishDatasetPage .pub-offers-section .pub-btn-pill.pub-delen-mode-cancel {
background: var(--dx-surface-card);
border-color: var(--dx-border-strong);
color: var(--dx-text-muted);
}
#publishDatasetPage .pub-offers-section .pub-btn-pill.pub-delen-mode-cancel:hover {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand);
color: var(--dx-brand);
}
#publishDatasetPage .pub-delen-mode-adjust,
#publishDatasetPage .pub-btn-check-offer {
border-radius: 999px;
background: var(--dx-surface-card);
border: 1.5px solid var(--dx-brand);
color: var(--dx-brand);
}
#publishDatasetPage .pub-delen-mode-adjust:hover,
#publishDatasetPage .pub-btn-check-offer:hover:not(:disabled) {
background: var(--dx-surface-band-soft);
border-color: var(--dx-brand-deep);
color: var(--dx-brand-deep);
}
#publishDatasetPage .pub-bron-next-btn.is-ready,
#publishDatasetPage .pub-substep-nav-right .pub-btn-continue.is-ready,
#publishDatasetPage #pubInfoPartNext.is-ready,
#publishDatasetPage #pubDelenPartNext.is-ready,
#publishDatasetPage .pub-btn-check-offer.is-ready {
background: var(--dx-state-open-bg);
border-color: var(--dx-state-open-fg);
color: var(--dx-state-open-fg);
}
#publishDatasetPage .pub-bron-next-btn.is-ready:hover,
#publishDatasetPage .pub-substep-nav-right .pub-btn-continue.is-ready:hover,
#publishDatasetPage #pubInfoPartNext.is-ready:hover:not(:disabled),
#publishDatasetPage #pubDelenPartNext.is-ready:hover:not(:disabled),
#publishDatasetPage .pub-btn-check-offer.is-ready:hover:not(:disabled) {
background: #D7EDDC;
border-color: #18642F;
color: #18642F;
}
#publishDatasetPage .pub-btn-check-offer.is-busy.is-ready {
background: var(--dx-state-request-bg);
border-color: var(--dx-state-request-fg);
color: var(--dx-state-request-fg);
}
#publishDatasetPage .pub-bron-next-btn.is-ready::before,
#publishDatasetPage #pubInfoPartNext.is-ready::before,
#publishDatasetPage #pubDelenPartNext.is-ready::before,
#publishDatasetPage .pub-btn-check-offer.is-ready::before {
background: var(--dx-state-open-fg);
}
#publishDatasetPage .pub-dexpod-offers,
#publishDatasetPage .pub-existing-offers {
background: transparent;
border: 2px dotted var(--dx-line-control);
}
#publishDatasetPage .pub-dexpod-offers-title,
#publishDatasetPage .pub-existing-offers-title { color: var(--dx-brand); }
#publishDatasetPage .pub-dexpod-offers-count,
#publishDatasetPage .pub-existing-offers-count {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
}
#publishDatasetPage .pub-dexpod-offer-badge,
#publishDatasetPage .pub-existing-offer-badge { background: var(--dx-brand); }
#publishDatasetPage .pub-offer-card--dexpod,
#publishDatasetPage .pub-offer-card--dexpod:hover,
#publishDatasetPage .pub-offer-card--existing,
#publishDatasetPage .pub-offer-card--existing:hover { border-color: var(--dx-brand); }
#publishDatasetPage .pub-dexpod-offer-view,
#publishDatasetPage .pub-existing-offer-view {
border-radius: 999px;
border: 1.5px solid var(--dx-brand);
background: var(--dx-surface-card);
color: var(--dx-brand);
}
#publishDatasetPage .pub-existing-offer-unlink {
border-radius: 999px;
background: var(--dx-surface-card);
}
#publishDatasetPage .pub-dexpod-offer-view:hover,
#publishDatasetPage .pub-existing-offer-view:hover {
background: var(--dx-brand);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-pubchoice-card:hover:not(.is-disabled) {
border-color: var(--dx-brand-light);
background: var(--dx-surface-band-soft);
}
#publishDatasetPage .pub-pubchoice-card.is-selected {
border-color: var(--dx-brand);
background: var(--dx-surface-band-soft);
}
#publishDatasetPage .pub-pubchoice-icon {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
}
#publishDatasetPage .pub-pubchoice-card.is-selected .pub-pubchoice-icon {
background: var(--dx-surface-card);
}
#publishDatasetPage .pub-tenant-group-label { color: var(--dx-brand); }
#publishDatasetPage .pub-tenant-item:hover { border-color: var(--dx-brand-light); }
#publishDatasetPage .pub-tenant-item.is-checked {
border-color: var(--dx-brand);
background: var(--dx-surface-band-soft);
box-shadow: var(--dx-shadow-card);
}
#publishDatasetPage .pub-tenant-item input[type="checkbox"] { accent-color: var(--dx-brand); }
.pw-rail #pubPrefillBar {
background: transparent;
border: none;
box-shadow: none;
padding: 2px 0 0;
color: var(--dx-text-on-work);
}
.pw-rail #pubPrefillBar .share-prefill-kick { color: var(--dx-text-on-work); }
.pw-rail #pubPrefillBar .share-prefill-route {
background: var(--dx-surface-band-soft);
border-color: var(--dx-surface-work-border);
color: var(--dx-text-on-work);
}
.pw-rail #pubPrefillBar .share-prefill-edit {
background: var(--dx-brand);
border-color: var(--dx-brand);
color: var(--dx-text-on-dark);
}
.pw-rail #pubPrefillBar .share-prefill-edit:hover {
background: var(--dx-brand-deep);
border-color: var(--dx-brand-deep);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-typeswitch-btn {
background: var(--dx-brand);
border: 1.5px solid var(--dx-brand);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-typeswitch-btn:hover {
background: var(--dx-brand-deep);
border-color: var(--dx-brand-deep);
color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-typeswitch-menu {
border: 2px solid var(--dx-brand);
box-shadow: var(--dx-shadow-menu);
}
#publishDatasetPage .pub-typeswitch-menu button { color: var(--dx-brand); }
#publishDatasetPage .pub-typeswitch-menu button::before { background: var(--dx-brand); }
#publishDatasetPage .pub-typeswitch-menu button:hover,
#publishDatasetPage .pub-typeswitch-menu button:focus-visible {
background: var(--dx-surface-band-soft);
}
#publishDatasetPage .pub-typeswitch-menu button.is-soon {
color: var(--dx-text-muted);
cursor: not-allowed;
}
#publishDatasetPage .pub-typeswitch-menu button.is-soon::before {
background: var(--dx-text-faint);
}
#publishDatasetPage .pub-typeswitch-menu button.is-soon:hover { background: transparent; }
.pub-typeswitch-soon {
margin-left: 8px;
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: var(--dx-text-faint);
}
.pub-bundle-picker-modal {
border-color: var(--dx-surface-work-border);
}
.pub-bundle-picker-head {
background-color: var(--dx-surface-band-soft);
background-image: none;
border-bottom-color: var(--dx-surface-work-border);
}
.pub-bundle-picker-title { color: var(--dx-brand); }
.pub-bundle-picker-intro { margin-top: 16px; }
.pub-bundle-picker-input {
background: var(--dx-surface-card);
border-color: var(--dx-border);
}
.pub-bundle-picker-input:focus {
border-color: var(--dx-brand);
box-shadow: 0 0 0 3px rgba(11, 53, 87, .14);
}
.pub-bundle-picker-row {
background: var(--dx-surface-card);
border-color: var(--dx-border);
}
.pub-bundle-picker-empty {
background: var(--dx-surface-card);
border-color: var(--dx-line-control);
color: var(--dx-text-on-work);
}
.pub-bundle-picker-foot {
background: var(--pub-group-bg);
border-top-color: var(--dx-surface-work-border);
}
.pub-bundle-picker-done {
background: var(--dx-brand);
border-color: var(--dx-brand);
color: var(--dx-text-on-dark);
}
.pub-bundle-picker-done:hover {
background: var(--dx-brand-deep, var(--dx-brand));
border-color: var(--dx-brand-deep, var(--dx-brand));
}
.pub-bundle-picker-done:focus-visible {
outline: 2px solid var(--dx-brand); outline-offset: 2px;
}
/* ── css/publish-flow.css ── */
#publishDatasetPage .pub-parts-shell .pub-part-card[data-pw-extra] { counter-increment: none; }
#publishDatasetPage .pub-parts-shell .pub-part-card[data-pw-extra] .pub-part-status::before { content: none; }
#publishDatasetPage .pub-parts-shell .pub-part-status.pw-ov-dot svg.pw-ov-icon { display: block !important; }
#publishDatasetPage .pub-parts-shell .pub-part-status.pw-ov-dot {
display: grid; place-items: center;
background: var(--dx-surface-card);
color: var(--dx-brand);
box-shadow: inset 0 0 0 1.5px var(--dx-brand);
}
#publishDatasetPage .pub-parts-shell .pub-part-card.pub-part-active .pub-part-status.pw-ov-dot {
background: var(--dx-brand); color: var(--dx-text-on-dark); box-shadow: none;
}
#publishDatasetContent.pf-on #pubTypeSwitch, /* type kiezen: nu in Bron */
#publishDatasetContent.pf-on #pubBtnCancel, /* "Annuleren": de hoofdknop is de uitgang */
#publishDatasetContent.pf-on #pubBtnSave, /* diskette: er is geen conceptopslag */
#publishDatasetContent.pf-on #pubBtnSaveHero,
#publishDatasetContent.pf-on #pubDelenAccept, /* "Akkoord": vroeg ook om Informatie, die nu NA Voorstel komt */
#publishDatasetContent.pf-on #pubPrefillBar,
#pubWarmRail #pubPrefillBar { display: none !important; }
#publishDatasetContent.pf-on [hidden].pub-btn-continue { display: none !important; }
#publishDatasetContent.pf-on #pubDelenSubNav:not([hidden]) #pubDelenPartNext[hidden] { display: inline-flex !important; }
.pf-pub3-mark {
display: inline-block; vertical-align: middle;
margin-left: 14px; padding: 3px 8px;
font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em;
color: #fff; background: #B8860B; border-radius: 6px;
position: relative; top: -6px;
}
#publishDatasetPage .publish-hero { position: relative; }
.pf-hero-tools { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
.pf-restart {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 999px;
border: 1px solid var(--dx-border-strong); background: var(--dx-surface-card);
color: var(--dx-brand); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pf-restart:hover { border-color: var(--dx-brand); }
@media (max-width: 800px) {
.pf-hero-tools { position: static; margin-top: 10px; }
}
.pf-typestep { margin: 0 0 22px; }
.pf-step-title {
display: flex; align-items: center; gap: 10px;
margin: 0 0 4px; font-size: 1.05rem; color: var(--dx-brand);
}
.pf-step-dot {
display: inline-grid; place-items: center; flex: 0 0 22px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--dx-brand); color: var(--dx-text-on-dark);
font-size: .72rem; font-weight: 700;
}
.pf-step-dot.is-ok { background: var(--dx-state-open-fg); color: #fff; }
.pf-step-lead { margin: 0 0 14px; font-size: .85rem; color: var(--dx-text-on-work); max-width: 70ch; }
.pf-step-note { margin: 10px 0 0; font-size: .75rem; color: var(--dx-text-muted); }
.pf-type-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pf-type-card {
position: relative; display: flex; flex-direction: column; gap: 4px;
text-align: left; padding: 12px 14px; min-height: 96px;
background: var(--dx-surface-card); color: var(--dx-text);
border: 1px solid var(--dx-surface-work-border); border-radius: 10px;
font: inherit; cursor: pointer;
transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.pf-type-card:hover:not(.is-dimmed):not(.is-static) { border-color: var(--dx-brand); }
.pf-type-card:focus-visible { outline: 2px solid var(--dx-brand); outline-offset: 2px; }
.pf-type-card.is-selected { border-color: var(--dx-brand); box-shadow: inset 0 0 0 1px var(--dx-brand); }
.pf-type-card.is-dimmed { opacity: .5; cursor: not-allowed; }
.pf-type-card.is-static { cursor: default; opacity: 1; min-height: 0; }
.pf-type-kick { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-text-muted); }
.pf-type-top { display: flex; align-items: center; gap: 8px; }
.pf-type-icon { display: inline-flex; color: var(--dx-brand); }
.pf-type-label { font-weight: 700; color: var(--dx-brand); font-size: .92rem; }
.pf-type-sub { font-size: .78rem; color: var(--dx-text-muted); line-height: 1.35; }
.pf-type-why { font-size: .72rem; color: var(--dx-state-request-fg); font-weight: 600; }
.pf-type-flag {
position: absolute; top: 10px; right: 10px;
display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
background: var(--dx-brand); color: #fff;
}
.pf-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-brand);
border: 1px solid var(--dx-surface-work-border);
font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.pf-pill:hover { border-color: var(--dx-brand); }
#publishDatasetPage .pub-ds-card-btn.pf-has-label {
width: auto; padding: 5px 10px; gap: 6px;
display: inline-flex; align-items: center;
border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.pf-btn-label { white-space: nowrap; }
@media (max-width: 640px) { .pf-btn-label { display: none; } }
#pfMainBtn.pf-main--exit {
background: var(--dx-surface-card); color: var(--dx-brand);
border: 1px solid var(--dx-border-strong);
}
#pfMainBtn.pf-main--exit:hover { border-color: var(--dx-brand); }
#pfMainBtn.pf-main--save:disabled { opacity: .55; cursor: not-allowed; }
#pfMainBtn { display: inline-flex; align-items: center; gap: 6px; }
#pub-part-panel-overzicht > .pub-panel-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.pf-ov-continue { white-space: nowrap; }
.pf-pod-card p { margin: 0 0 10px; }
.pf-src {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border: 1px solid var(--dx-border); border-radius: 8px;
background: var(--dx-surface-card);
}
.pf-src-ic { display: inline-flex; color: var(--dx-brand); }
.pf-src-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .85rem; }
.pf-tag {
font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px;
background: var(--dx-surface-band-soft); color: var(--dx-brand);
}
.pf-demand-note {
margin: 0 0 16px; padding: 10px 14px;
border-left: 3px solid var(--dx-brand); border-radius: 6px;
background: var(--dx-surface-card); font-size: .82rem; color: var(--dx-text);
}
.pf-modal-bg {
position: fixed; inset: 0; z-index: 2000;
display: grid; place-items: center; padding: 16px;
background: rgba(16, 24, 40, .45);
}
.pf-modal {
width: min(480px, 100%);
background: var(--dx-surface-card); color: var(--dx-text);
border-radius: 12px; box-shadow: var(--dx-shadow-menu, 0 12px 40px rgba(0,0,0,.25));
}
.pf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.pf-modal-head h3 { margin: 0; font-size: 1.1rem; color: var(--dx-brand); }
.pf-modal-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--dx-text-muted); }
.pf-modal-body { padding: 6px 20px 8px; font-size: .9rem; }
.pf-keep { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; cursor: pointer; }
.pf-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; }
.pf-warn { background: #B42318 !important; border-color: #B42318 !important; color: #fff !important; }
#pub-part-panel-bron.pf-bron-step1 > :not(.pf-typestep) { display: none !important; }
#pub-part-panel-bron.pf-bron-step2 > .pf-typestep { display: none !important; }
.pf-typestep .pf-step-head { margin-bottom: 14px; }
.pf-type-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; }
#pubTemplatePicker .pub-tpl-card-top {
flex-direction: column; align-items: flex-start; gap: 6px;
}
#pubTemplatePicker .pub-tpl-card-badge { order: -1; margin: 0; }
#pub-part-panel-overzicht.pf-ov-on #pubSummaryContent { display: none; }
#pub-part-panel-overzicht.pf-ov-on > .pub-panel-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px;
}
.pf-ov-headtext h2 { margin: 0 0 4px; }
#pub-part-panel-overzicht.pf-ov-on .pw-overview-lead { margin: 0; font-size: .9rem; max-width: 60ch; }
.pf-ovgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pf-blk {
display: grid; grid-template-columns: 262px minmax(0, 1fr) auto;
align-items: start; gap: 8px 20px;
padding: 16px 20px; border-radius: 12px;
border: 1px solid var(--dx-surface-work-border);
background: rgba(255, 255, 255, .35);
}
.pf-blk.is-ok { background: var(--dx-surface-card); border-color: var(--dx-border-strong, var(--dx-border)); }
.pf-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pf-bhead h3 { flex: 0 0 calc(100% - 42px); margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--dx-brand); }
.pf-bdot {
display: inline-grid; place-items: center; flex: 0 0 30px;
width: 30px; height: 30px; border-radius: 50%;
background: var(--dx-surface-card); color: var(--dx-text-muted);
box-shadow: inset 0 0 0 1.5px var(--dx-surface-work-border);
font-size: .8rem; font-weight: 700;
}
.pf-blk.is-ok .pf-bdot { background: var(--dx-state-open-fg); color: #fff; box-shadow: none; }
.pf-bstate {
margin-left: 42px;
font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 10px;
background: var(--dx-state-request-bg, #FFF4E5); color: var(--dx-state-request-fg, #8A5A00);
}
.pf-blk.is-ok .pf-bstate { background: var(--dx-state-open-bg); color: var(--dx-state-open-fg); }
.pf-sum {
min-width: 0; padding: 12px 14px;
border: 1px solid var(--dx-border); border-radius: 10px;
background: var(--dx-surface-page, #FAF8F5); font-size: .9rem;
}
.pf-sum dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.pf-sum dt { color: var(--dx-text-muted); }
.pf-sum dd { margin: 0; color: var(--dx-text); font-weight: 500; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-miss { min-width: 0; padding-top: 3px; font-size: .92rem; color: var(--dx-text-on-work); }
.pf-miss strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--dx-text); }
.pf-miss ul { margin: 0; padding-left: 18px; }
.pf-miss li { margin: 2px 0; }
.pf-miss .pf-src { margin-bottom: 10px; }
.pf-bfoot { display: flex; justify-content: flex-end; padding-top: 2px; }
.pf-edit-pill { border: 1.5px solid var(--dx-brand); padding: 5px 16px; font-size: .85rem; }
.pf-blk.is-todo .pf-edit-pill { background: var(--dx-brand); color: var(--dx-text-on-dark); }
@media (max-width: 900px) {
.pf-blk { grid-template-columns: 1fr; }
.pf-bstate { margin-left: auto; }
}
.pf-src-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pf-src-b b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-src-b small { font-size: .75rem; color: var(--dx-text-muted); }
#pubWarmRail .pf-next-card { display: none; }
#pubWarmRail.pf-rail-ov .pf-next-card { display: block; }
#pubWarmRail.pf-rail-ov > [data-pw-card] { display: none; }
#publishDatasetPage .pub-parts-shell .pub-part-card.pf-type-open[data-status="ok"]:not([data-pw-extra]) .pub-part-status {
background: var(--dx-surface-band-soft); color: var(--dx-text-muted);
}
#publishDatasetPage .pub-parts-shell .pub-part-card.pf-type-open.pub-part-active[data-status="ok"] .pub-part-status {
background: var(--dx-brand); color: var(--dx-text-on-dark);
}
#publishDatasetPage .pub-parts-shell .pub-part-card.pf-type-open[data-status="ok"] .pub-part-status::before {
content: counter(pw-step); font-size: .72rem;
}
#pfMainBtn.pf-main--save:not(:disabled) {
background: var(--dx-brand); border-color: var(--dx-brand); color: var(--dx-text-on-dark);
}
#pfAltBtn.pf-alt {
border: 0; background: none; padding: 8px 6px;
color: var(--dx-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
#pubActionBar .pub-action-bar-right { flex-wrap: nowrap; }
#publishDatasetContent.pf-on #pubActionBar { flex-wrap: nowrap; align-items: center; gap: 16px; }
#publishDatasetContent.pf-on #pubActionBar .pw-step-meta { flex: 1 1 auto; min-width: 0; }
#publishDatasetContent.pf-on #pubActionBar .pub-action-bar-right { flex: 0 0 auto; }
@media (max-width: 640px) {
#publishDatasetContent.pf-on #pubActionBar { flex-wrap: wrap; }
}
@media (max-width: 640px) {
#pub-part-panel-overzicht.pf-ov-on > .pub-panel-header { flex-wrap: wrap; }
}
#publishDatasetContent.pf-on #pubOfferAddBtn.pf-add-hidden { display: none !important; }
.pub-offers-empty .pf-offer-add-first { display: inline-flex; margin: 0 auto 10px; }
.pub-offers-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
#pub-panel-delen-2 .pub-panel-toprow #pubDelenPartNext,
#pub-panel-delen-2 .pub-panel-toprow #pubDelenPartNext[hidden] { display: inline-flex !important; flex: 0 0 auto; }
.pub-offer-modal-overlay .pub-offer-flow { background: var(--dx-surface-work); border: 1px solid var(--dx-surface-work-border); }
.pub-offer-modal-overlay .pub-offer-flow-header { background: var(--dx-surface-band-soft); border-bottom-color: var(--dx-surface-work-border); }
.pub-offer-modal-overlay .pub-offer-flow-actions { border-top-color: var(--dx-surface-work-border); }
.pub-offer-modal-overlay .pub-offer-flow-actions,
.pub-offer-modal-overlay .pub-offer-flow-footer { background: var(--dx-surface-work); }
#pub-part-panel-bron.pf-src-on:not(.pf-bundle) #pubFilesBlockHost,
#pub-part-panel-bron.pf-src-on:not(.pf-bundle) #pubDataservicesBlockHost { display: none !important; }
.pf-src-view { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.pf-src-group {
margin: 10px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--dx-text-on-work);
}
.pf-src-cards { display: flex; flex-direction: column; gap: 10px; }
.pf-src-count {
display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px;
margin-left: 10px; border-radius: 999px; background: var(--dx-brand); color: var(--dx-text-on-dark);
font-size: .78rem; font-weight: 700;
}
#pub-part-panel-bron .pub-type-heading-row { display: flex; align-items: center; }
#pub-part-panel-bron.pf-src-on #pubBronAddRow { margin: 4px 0 8px; }
.pf-podctx { margin: 0 0 18px; }
.pf-podctx-kick { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-text-on-work); margin-bottom: 6px; }
.pf-podoffer-note {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
background: var(--dx-surface-card); border: 1px solid var(--dx-border); font-size: .88rem;
}
#pubDexpodOffers:has(> .pub-dexpod-offers-gone:only-child) { border: 0; padding: 0; background: none; }
.pub-dexpod-offers-gone { margin: 6px 0 0; font-style: italic; }
.pf-save-busy { display: flex; gap: 14px; align-items: flex-start; }
.pf-save-busy .spinner { flex: 0 0 auto; margin-top: 2px; }
.pf-save-busy p { margin: 0; }
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-toggle,
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-intro,
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-add,
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-empty { display: none !important; }
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost,
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources {
border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0;
}
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-body {
display: block !important; padding: 0 !important; border: 0 !important; background: none !important;
}
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-sources-list { display: flex; flex-direction: column; gap: 10px; }
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-source-card,
#pub-part-panel-bron.pf-bundle #pubRelatedSourcesHost .pub-related-source-item {
background: var(--dx-surface-card); border: 1px solid var(--dx-border); border-radius: 12px;
box-shadow: var(--dx-shadow-card, 0 1px 2px rgba(0,0,0,.04)); margin: 0;
}
#pub-part-panel-bron.pf-bundle .pub-bron-file-note { display: none; }
#publishDatasetContent .request-form-row:has(input[type="date"]) {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
#publishDatasetContent .request-form-row:has(input[type="date"]) > .request-field { min-width: 0; }
#publishDatasetPage #publishDatasetContent input[type="date"] {
width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231A3A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
-webkit-appearance: none; appearance: none;
}
#publishDatasetPage #publishDatasetContent input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0; cursor: pointer; width: 28px; height: 28px; margin-right: -32px;
}
#pub-part-panel-bron.pf-src-on #pubBronAddRow { margin-top: 12px; }
#publishDatasetContent #pubOfferCheckBtn.pf-check-later { display: none !important; }
.pf-check-later-note {
align-self: center; font-size: 13px; line-height: 1.45; color: var(--dx-text-muted, #5b5670);
max-width: 46ch;
}
#pub-part-panel-publicatie .pub-panel-toprow { flex-wrap: wrap; gap: 10px; }
#pub-part-panel-publicatie .pub-panel-toprow .pf-check-offer { margin-left: auto; align-self: flex-start; }
#pub-part-panel-publicatie .pub-panel-toprow .pf-check-offer + #pubBtnPublishTop { margin-left: 0; }
.pf-check-offer.pf-check-done, .pf-check-offer.pf-check-done:disabled {
color: var(--dx-green, #1f7a3d); border-color: currentColor; opacity: 1; cursor: default; background: transparent;
}
.pf-btn-spinner {
display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
animation: spin .7s linear infinite; opacity: .85;
}
#pubBtnContinue.is-busy:disabled, #pubBtnPublishTop.is-busy:disabled, #pubBtnPublishHero.is-busy:disabled { opacity: 1; cursor: progress; }
#pub-part-panel-delen.pf-offer-none .pub-offers-section #pubOffersList,
#pub-part-panel-delen.pf-offer-none .pub-offers-section .pub-offers-empty,
#pub-part-panel-delen.pf-offer-none .pub-offers-section > p.pub-field-hint,
#pub-part-panel-delen.pf-offer-none .pub-offers-section .req-required,
#pub-part-panel-delen.pf-offer-none #pubOfferAddBtn,
#pub-part-panel-delen.pf-offer-none .pf-offer-add-first,
#pub-part-panel-delen.pf-offer-none #pubOfferCheckBtn,
#pub-part-panel-delen.pf-offer-none .pf-check-later-note { display: none !important; }
.pf-od-note {
margin: 6px 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5;
background: var(--dx-surface-soft, #f4f1ea); border: 1px solid var(--dx-border, #e5dfd5);
}
.pf-od-note.pf-od-warn { background: #fdf3e7; border-color: #e8b57a; color: #6b3b06; }
#pubTemplatePicker .pub-tpl-card.pf-tpl-off { opacity: .5; cursor: not-allowed; }
#pubTemplatePicker .pub-tpl-card.pf-tpl-off:hover { transform: none; box-shadow: none; }
.pf-tpl-why { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #8a4b08; }
.pf-typestep .pf-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-typestep .pf-step-headtext { flex: 1 1 320px; min-width: 0; }
.pf-typestep .pf-to-ov { flex: 0 0 auto; }
#publishDatasetContent.pf-readonly #pubAlert.pf-ro-dup,
#publishDatasetContent.pf-readonly #pubBronAddRow,
#publishDatasetContent.pf-readonly #pubOfferAddBtn,
#publishDatasetContent.pf-readonly .pf-offer-add-first,
#publishDatasetContent.pf-readonly #pubOfferCheckBtn,
#publishDatasetContent.pf-readonly .pf-check-later-note,
#publishDatasetContent.pf-readonly #pubDelenAdjust,
#publishDatasetContent.pf-readonly #pubDelenSave,
#publishDatasetContent.pf-readonly #pubDelenCancel,
#publishDatasetContent.pf-readonly .pub-offer-card-edit,
#publishDatasetContent.pf-readonly .pub-offer-card-remove,
#publishDatasetContent.pf-readonly #pfCheckOfferBtn,
#publishDatasetContent.pf-readonly #pubBtnPublishTop,
#publishDatasetContent.pf-readonly #pubBtnPublishHero,
#publishDatasetContent.pf-readonly #pubPubTenantsBlock,
#publishDatasetContent.pf-readonly #pub-part-panel-info > .pub-panel,
#publishDatasetContent.pf-readonly #pubInfoSubNav,
#publishDatasetContent.pf-readonly [data-pf-src-act] { display: none !important; }
#publishDatasetContent:not(.pf-readonly) .pf-ro-card,
#publishDatasetContent:not(.pf-readonly) .pf-ro-banner { display: none !important; }
.pf-ro-banner {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin: 0 0 16px; padding: 14px 18px; border-radius: 12px;
background: #fdf3e7; border: 1px solid #e8b57a; color: #6b3b06; font-size: 14px; line-height: 1.5;
}
.pf-ro-banner-text { flex: 1 1 360px; min-width: 0; }
.pf-ro-banner-text strong { font-weight: 700; }
.pf-ro-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-ro-actions .pub-btn-continue, .pf-ro-actions .pub-btn-cancel { white-space: nowrap; }
.pf-ro-card {
margin: 14px 0; padding: 16px 18px; border-radius: 12px;
background: var(--dx-surface-card, #fff); border: 1px dashed var(--dx-border, #d9d2c3);
}
.pf-ro-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.pf-ro-need .pf-ro-join { display: inline-block; margin-top: 4px; }
.pub-parts-shell > .pf-ro-banner { grid-column: 1 / -1; }
#publishDatasetContent.pf-readonly #pubWarmRail > [data-pw-card] { display: none !important; }
.pf-src-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.pf-src-btn {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
background: #fff; transition: background .15s, color .15s;
}
.pf-src-btn--edit { border: 1.5px solid #1A4FA0; color: #1A4FA0; background: #F2F7FE; }
.pf-src-btn--edit:hover { background: #DAE9FC; }
.pf-src-btn--remove { width: 32px; padding: 0; justify-content: center; font-size: 18px; line-height: 1;
border: 1.5px solid #C0392B; color: #C0392B; background: #fff; }
.pf-src-btn--remove:hover { background: #FDECEA; }
.pf-src-btn:focus-visible { outline: 2px solid #1A4FA0; outline-offset: 2px; }
.pf-to-ov { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#publishDatasetContent .pub-step-flag-required.pf-flag-todo { animation: pf-flag-pulse 1.6s ease-in-out infinite; color: #fff; }
#publishDatasetContent .pub-step-flag-required.pf-flag-done { background: #1f7a3d !important; border-color: #1f7a3d !important; color: #fff !important; animation: none; }
#publishDatasetContent .pub-step-flag-recommended { background: #DAE9FC !important; border-color: #A9C9EE !important; color: #1A4FA0 !important; }
@keyframes pf-flag-pulse {
0%, 100% { background: #1A4FA0; border-color: #1A4FA0; }
50% { background: #C0392B; border-color: #C0392B; }
}
@media (prefers-reduced-motion: reduce) {
#publishDatasetContent .pub-step-flag-required.pf-flag-todo { animation: none; background: #C0392B; border-color: #C0392B; }
}
#backBtn, .header-back-btn { display: none !important; }
.pf-typestep .pf-step-headtext .pf-podctx { margin: 12px 0 14px; }
#pub-part-panel-delen.pf-offer-none #pubDelenLead { display: none; }
#pub-part-panel-delen.pf-offer-none .pub-offers-section {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 12px 0 4px !important;
}
#pub-part-panel-delen.pf-offer-none .pub-offers-section > :not(.pub-offers-foot) { display: none !important; }
#pub-part-panel-delen.pf-offer-none .pub-offers-section > .pub-offers-foot { margin: 0; padding: 0; border: 0; }
.pf-od-lead { margin: 6px 0 0; }
.pf-podoffer-note { flex-direction: column; align-items: flex-start; }
.pf-podoffer-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-pill.pf-pill--primary { background: var(--dx-brand); border-color: var(--dx-brand); color: #fff; }
.pf-pill.pf-pill--primary:hover { background: var(--dx-brand-deep); border-color: var(--dx-brand-deep); }
.pf-theme-default { margin: 2px 0 12px; }
.pf-theme-default-tag {
background: transparent;
border: 1px dashed currentColor;
opacity: .85;
}
.pf-theme-default-mark {
font-style: normal;
font-size: .72em;
text-transform: uppercase;
letter-spacing: .04em;
margin-left: 6px;
opacity: .75;
}
.pf-theme-default-text { margin: 6px 0 0; font-size: .82rem; color: var(--gray, #5c6470); }
/* ── css/pagina-warm.css ── */
#basketPage {
background: transparent;
}
#basketPage .basket-wrap {
max-width: 1280px;
}
#basketPage .page-intro.basket-intro {
background: transparent;
box-shadow: none;
padding: 0;
margin-bottom: 18px;
}
#basketPage .page-intro.basket-intro h1 {
font-size: clamp(1.4rem, 3.6vw, 1.9rem);
display: flex; align-items: center; gap: 10px;
color: var(--dx-text);
}
#basketPage .page-intro.basket-intro h1 svg {
width: 24px; height: 24px;
color: var(--dx-brand);
}
#basketPage .page-intro.basket-intro p {
color: var(--dx-text-muted);
}
#basketPage .basket-count-pill {
background: var(--dx-surface-band);
color: var(--dx-brand);
border: 1px solid var(--dx-border);
font-size: .72rem;
}
:root {
--off-white: var(--dx-surface-page);
}
body {
background-image: url('images/DexesWaveWarm.svg');
}
html[data-crumb="light"] {
--crumb-bar-bg: var(--dx-surface-band);
--crumb-bar-border: var(--dx-surface-work-border);
--crumb-bar-shadow: none;
--crumb-trail: var(--dx-text-on-work);
--crumb-current: var(--dx-brand);
--crumb-hover: var(--dx-brand);
--crumb-chip-text: var(--dx-text-on-work);
--crumb-chip-hover-bg: var(--dx-surface-card);
--crumb-accent: var(--dx-brand);
}
html[data-crumb="light"] .hero-breadcrumb-sep { opacity: .7; }
html[data-crumb="light"] .hero--search .home-hero-eyebrow {
background: var(--dx-surface-card);
border-color: var(--dx-border);
color: var(--dx-brand);
}
#ontdekPage > .main-wrap { padding-top: 26px; }
html[data-crumb="light"] .hero--search .search-wrap {
border: 1.5px solid var(--dx-line-control);
}
html[data-crumb="light"] .hero--search .search-wrap input {
padding-top: 12px;
padding-bottom: 12px;
}
.fastlane-card--1 {
--fl-btn: var(--dx-accent-ink);
--fl-btn-fg: var(--dx-text-on-dark);
}
.page-intro--with-action {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: 20px;
}
.page-intro--with-action > h1 { grid-column: 1; grid-row: 1; }
.page-intro--with-action > p { grid-column: 1; grid-row: 2; }
.page-intro--with-action > [data-page-action] {
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-top: 2px;
}
@media (max-width: 640px) {
.page-intro--with-action { grid-template-columns: minmax(0, 1fr); }
.page-intro--with-action > [data-page-action] {
grid-column: 1; grid-row: 3; justify-self: start; margin-top: 12px;
}
}
.dx-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 0;
border-radius: 999px;
background: var(--dx-brand);
color: var(--dx-text-on-dark);
font-family: var(--font-body);
font-size: .84rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background var(--tr);
}
.dx-btn-primary:hover {
background: var(--dx-brand-deep);
color: var(--dx-text-on-dark);
text-decoration: none;
}
/* ── css/l-frame.css ── */
:root {
--lf-save-search: none;
}
@media (min-width: 1024px) {
:is(#listPage, #datahubDetailPage) > .main-wrap,
#membersPage > .main-wrap {
grid-template-columns: 308px minmax(0, 1fr);
gap: 0;
padding-top: 0;
align-items: start;
}
:is(#listPage, #datahubDetailPage) .sidebar,
#membersPage .sidebar,
.main-wrap--with-marketplace-nav > .sidebar {
position: relative;
top: auto;
max-height: none;
overflow: visible;
width: auto;
margin-left: -24px;
margin-top: -1px;
padding: 6px 22px 22px 24px;
background: var(--dx-surface-band);
border-right: 1px solid var(--dx-border);
border-bottom: 1px solid var(--dx-border);
border-radius: 0 0 16px 0;
}
:is(#listPage, #datahubDetailPage) .sidebar::before,
#membersPage .sidebar::before,
.main-wrap--with-marketplace-nav > .sidebar::before {
content: "";
position: absolute;
top: -1px;
right: 100%;
width: 100vw;
height: 1px;
background: var(--dx-surface-page);
pointer-events: none;
}
:is(#listPage, #datahubDetailPage) .content-area,
#membersPage .content-area {
padding: 22px 0 0 30px;
}
:is(#listPage, #datahubDetailPage) .hero-search-inner,
#membersPage .hero-search-inner { gap: 0; }
:is(#listPage, #datahubDetailPage) .hero-search-head,
#membersPage .hero-search-head { flex: 0 0 calc(308px + 30px); }
}
:is(#listPage, #datahubDetailPage) .filter-panel,
#membersPage .filter-panel,
.main-wrap--with-marketplace-nav .filter-panel {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
:is(#listPage, #datahubDetailPage) .filter-panel > .filter-panel-title,
#membersPage .filter-panel > .filter-panel-title,
.main-wrap--with-marketplace-nav .filter-panel > .filter-panel-title {
display: none;
}
@media (min-width: 1024px) {
:is(#listPage, #datahubDetailPage) .sidebar:not([data-lf-collapsible]) > .filter-panel,
#membersPage .sidebar:not([data-lf-collapsible]) > .filter-panel { display: block; }
.main-wrap--with-marketplace-nav > .sidebar > .filter-panel {
display: flex;
flex-direction: column;
}
:is(#listPage, #datahubDetailPage) .sidebar:not([data-lf-collapsible]) .filter-toggle-mobile,
#membersPage .sidebar:not([data-lf-collapsible]) .filter-toggle-mobile,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile { pointer-events: none; cursor: default; }
:is(#listPage, #datahubDetailPage) .sidebar:not([data-lf-collapsible]) .filter-toggle-chevron,
#membersPage .sidebar:not([data-lf-collapsible]) .filter-toggle-chevron,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile .nav-chevron { display: none; }
}
:is(#listPage, #datahubDetailPage) .filter-toggle-mobile,
#membersPage .filter-toggle-mobile,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile {
background: transparent;
border: 0;
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 0;
box-shadow: none;
padding: 4px 0 11px;
gap: 9px;
font-size: .95rem;
font-weight: 600;
color: var(--dx-brand);
}
:is(#listPage, #datahubDetailPage) .filter-toggle-mobile:hover,
#membersPage .filter-toggle-mobile:hover,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile:hover {
background: transparent;
color: var(--dx-brand-deep);
}
:is(#listPage, #datahubDetailPage) .filter-toggle-mobile > svg:first-child,
#membersPage .filter-toggle-mobile > svg:first-child,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile > svg:first-child { color: var(--dx-brand); }
:is(#listPage, #datahubDetailPage) .filter-toggle-badge,
#membersPage .filter-toggle-badge { display: none !important; }
:is(#listPage, #datahubDetailPage) .filter-toggle-chevron,
#membersPage .filter-toggle-chevron { margin-left: 0; color: var(--dx-text-faint); }
:is(#listPage, #datahubDetailPage) .fg,
#membersPage .fg {
border-bottom: 0;
border-top: 1px solid var(--dx-surface-work-border);
background: transparent;
}
:is(#listPage, #datahubDetailPage) .fg:first-of-type,
#membersPage .fg:first-of-type { border-top: 0; }
#membersPage .filter-panel > .fg { border-top-style: none; }
#membersPage .filter-panel > .fg:not([hidden]) ~ .fg { border-top-style: solid; }
:is(#listPage, #datahubDetailPage) .fg-header,
#membersPage .fg-header {
padding: 11px 0;
color: var(--dx-text);
}
:is(#listPage, #datahubDetailPage) .fg-header:hover,
#membersPage .fg-header:hover {
background: transparent;
color: var(--dx-brand);
}
:is(#listPage, #datahubDetailPage) .fg-body,
#membersPage .fg-body { padding: 2px 0 12px; }
:is(#listPage, #datahubDetailPage) .fc-row,
#membersPage .fc-row { color: var(--dx-text-on-work); }
:is(#listPage, #datahubDetailPage) .fc-row:hover,
#membersPage .fc-row:hover { color: var(--dx-brand); }
:is(#listPage, #datahubDetailPage) .filter-panel input[type="checkbox"],
#membersPage .filter-panel input[type="checkbox"],
:is(#listPage, #datahubDetailPage) .filter-panel input[type="radio"],
#membersPage .filter-panel input[type="radio"] {
border-color: var(--dx-line-control);
background-color: var(--dx-surface-card);
accent-color: var(--dx-brand);
}
:is(#listPage, #datahubDetailPage) .fg-count,
#membersPage .fg-count,
:is(#listPage, #datahubDetailPage) .fc-n,
#membersPage .fc-n {
color: var(--dx-text-faint);
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
}
:is(#listPage, #datahubDetailPage) .fc-n,
#membersPage .fc-n { background: none; border: 0; }
:is(#listPage, #datahubDetailPage) .fc-row.lf-empty,
#membersPage .fc-row.lf-empty {
opacity: .55;
pointer-events: none;
}
:is(#listPage, #datahubDetailPage) .advanced-toggle,
#membersPage .advanced-toggle {
border-top: 1px solid var(--dx-surface-work-border);
padding: 11px 0;
color: var(--dx-interactive);
font-weight: 700;
}
.lf-filter-count {
position: absolute;
top: 5px;
right: 22px;
display: inline-flex;
align-items: center;
gap: 6px;
height: 21px;
padding: 0 8px;
border: 0;
border-radius: 11px;
background: var(--dx-brand);
color: var(--dx-text-on-dark);
font-family: var(--font-body);
font-size: .66rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.lf-filter-count:hover { background: var(--dx-brand-deep); }
.lf-filter-count .lf-x {
font-size: .62rem;
opacity: .8;
line-height: 1;
}
.lf-filter-count:hover .lf-x { opacity: 1; }
.lf-filter-count[hidden] { display: none; }
@media (max-width: 1023px) {
.lf-filter-count { top: 11px; right: 46px; }
}
@media (max-width: 820px) {
:is(#listPage, #datahubDetailPage) .sidebar,
#membersPage .sidebar {
position: relative !important;
top: auto;
}
}
:is(#listPage, #datahubDetailPage) .active-filters-block,
#membersPage .active-filters-block {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
padding: 0 0 13px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--dx-border);
border-radius: 0;
box-shadow: none;
transition: none;
}
:is(#listPage, #datahubDetailPage) .active-filters-block[hidden],
#membersPage .active-filters-block[hidden] { display: none; }
:is(#listPage, #datahubDetailPage) .afb-heading,
#membersPage .afb-heading {
flex: 0 0 auto;
margin: 0 2px 0 0;
font-size: .625rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--dx-text-faint);
}
:is(#listPage, #datahubDetailPage) .active-filter-badges,
#membersPage .active-filter-badges {
display: contents;
}
:is(#listPage, #datahubDetailPage) .afb-chip,
#membersPage .afb-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
border-radius: 14px;
padding: 5px 7px 5px 11px;
font-size: .78rem;
color: var(--dx-text);
white-space: nowrap;
max-width: none;
}
:is(#listPage, #datahubDetailPage) .afb-chip-facet,
#membersPage .afb-chip-facet {
font-style: normal;
color: var(--dx-text-muted);
}
:is(#listPage, #datahubDetailPage) .afb-chip-value,
#membersPage .afb-chip-value {
font-weight: 600;
color: var(--dx-brand);
}
:is(#listPage, #datahubDetailPage) .afb-chip--query,
#membersPage .afb-chip--query {
background: var(--dx-surface-card);
border-color: var(--dx-surface-work-border);
}
:is(#listPage, #datahubDetailPage) .afb-chip--query > svg,
#membersPage .afb-chip--query > svg {
color: var(--dx-text-muted);
flex: 0 0 12px;
}
:is(#listPage, #datahubDetailPage) .afb-remove,
#membersPage .afb-remove {
width: 24px; height: 24px;
margin: -6px -5px -6px -4px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0;
color: #A6AFB5;
font-size: .69rem;
line-height: 1;
cursor: pointer;
}
:is(#listPage, #datahubDetailPage) .afb-remove:hover,
#membersPage .afb-remove:hover { color: var(--dx-brand); }
:is(#listPage, #datahubDetailPage) .afb-reset,
#membersPage .afb-reset {
margin-left: auto;
flex: 0 0 auto;
background: none;
border: 0;
padding: 0;
color: var(--dx-interactive);
font-size: .78rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
:is(#listPage, #datahubDetailPage) .results-bar,
#membersPage .results-bar {
margin-bottom: 12px;
}
.lf-save {
display: var(--lf-save-search);
margin-top: 18px;
padding: 14px 15px 15px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-surface-work-border);
border-radius: 11px;
box-shadow: 0 2px 10px rgba(7, 31, 51, .07);
}
.lf-save-head { display: flex; align-items: flex-start; gap: 9px; }
.lf-save-icon {
width: 26px; height: 26px; flex: 0 0 26px;
border-radius: 8px;
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
display: flex; align-items: center; justify-content: center;
color: var(--dx-brand);
}
.lf-save h3 {
font-family: var(--font-head);
font-size: .88rem; font-weight: 600; line-height: 1.3;
color: var(--dx-brand);
margin: 0;
}
.lf-save p {
font-size: .72rem; line-height: 1.5;
color: var(--dx-text-muted);
margin: 7px 0 0;
}
.lf-save-sum { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.lf-save-sum span {
background: var(--dx-surface-band-soft);
border: 1px solid var(--dx-border);
border-radius: 11px;
padding: 3px 9px;
font-size: .69rem; font-weight: 600;
color: var(--dx-text-muted);
}
.lf-save-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
margin-top: 13px;
padding: 10px 14px;
background: var(--dx-brand);
border: 1.5px solid var(--dx-brand);
border-radius: 20px;
color: var(--dx-text-on-dark);
font-family: var(--font-body);
font-size: .8rem; font-weight: 700;
cursor: pointer;
}
.lf-save.is-signedout .lf-save-btn {
background: var(--dx-surface-card);
color: var(--dx-brand);
}
.lf-save-alt {
display: block; width: 100%;
margin-top: 9px;
background: none; border: 0;
color: var(--dx-interactive);
font-size: .72rem;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
@media (min-width: 1680px) {
:is(#listPage, #datahubDetailPage) > .main-wrap,
#membersPage > .main-wrap,
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav,
.main-wrap--with-marketplace-nav { max-width: 1680px; }
:is(#listPage, #datahubDetailPage) .hero-search-inner,
#membersPage .hero-search-inner { max-width: 1680px; }
html[data-lf-wide] .header-inner,
html[data-lf-wide] .hero--compact .hero-breadcrumb { max-width: 1680px; }
:is(#listPage, #datahubDetailPage) :is(#datasetList, .dataset-list),
#membersPage #membersList > .dataset-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
align-items: start;
}
#membersPage #membersList > .dataset-list { align-items: stretch; }
#membersPage #membersList > .dataset-list > .dataset-card--member > .card-body {
display: flex;
flex-direction: column;
}
#membersPage #membersList > .dataset-list > .dataset-card--member .card-footer { margin-top: auto; }
}
@media (min-width: 2100px) {
:is(#listPage, #datahubDetailPage) > .main-wrap,
#membersPage > .main-wrap,
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav,
.main-wrap--with-marketplace-nav { max-width: 1828px; }
:is(#listPage, #datahubDetailPage) .hero-search-inner,
#membersPage .hero-search-inner { max-width: 1828px; }
html[data-lf-wide] .header-inner,
html[data-lf-wide] .hero--compact .hero-breadcrumb { max-width: 1828px; }
:is(#listPage, #datahubDetailPage) :is(#datasetList, .dataset-list),
#membersPage #membersList { max-width: 1480px; }
}
@media (max-width: 1023px) {
:is(#listPage, #datahubDetailPage) .sidebar,
#membersPage .sidebar {
background: transparent;
border: 0;
border-radius: 0;
margin-left: 0;
}
}
@media (min-width: 1024px) {
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav,
.main-wrap--with-marketplace-nav {
grid-template-columns: 308px minmax(0, 1fr);
gap: 0;
padding-top: 0;
align-items: start;
}
.main-wrap--with-marketplace-nav > :not(.sidebar):not(.login-nav-toggle-mobile) {
padding: 22px 0 0 30px;
}
}
.main-wrap--with-marketplace-nav .login-nav-switch {
order: 99;
display: flex;
align-items: center;
gap: 7px;
width: 100%;
margin: 4px 0 0;
padding: 11px 0;
border: 0;
border-top: 1px solid var(--dx-surface-work-border);
background: none;
color: var(--dx-interactive);
font-family: var(--font-body);
font-size: .78rem;
font-weight: 700;
text-align: left;
text-decoration: none;
}
.main-wrap--with-marketplace-nav .login-nav-switch:hover {
background: none;
color: var(--dx-brand-deep);
text-decoration: underline;
}
.main-wrap--with-marketplace-nav .login-nav-switch svg {
width: 14px; height: 14px;
flex-shrink: 0;
}
.main-wrap--with-marketplace-nav .login-nav-group {
border: 0;
background: none;
margin: 0;
padding: 0;
}
.main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group {
border-top: 1px solid var(--dx-surface-work-border);
margin-top: 0;
}
.main-wrap--with-marketplace-nav .login-nav-group-header {
padding: 12px 0 7px;
background: none;
border: 0;
color: var(--dx-text);
font-family: var(--font-body);
font-size: .88rem;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
}
.main-wrap--with-marketplace-nav .login-nav-group-header:hover {
background: none;
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-group-icon {
width: 15px; height: 15px;
color: var(--dx-text);
opacity: 1;
}
.main-wrap--with-marketplace-nav .login-nav-group-header:hover .login-nav-group-icon {
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-group-header .nav-chevron {
color: var(--dx-text-faint);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item {
margin: 0 -12px 1px;
padding: 9px 12px;
border-top: 1px solid var(--dx-surface-work-border);
border-bottom: 1px solid var(--dx-surface-work-border);
color: var(--dx-text);
font-weight: 600;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item:hover {
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item svg {
color: var(--dx-text);
opacity: 1;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item:hover svg {
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link {
margin: 0 -12px 6px;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 0;
background: none;
color: var(--dx-text);
font-weight: 600;
font-size: .92rem;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link svg {
color: var(--dx-text);
opacity: 1;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link:hover {
background: none;
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link:hover svg {
color: var(--dx-brand);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link.is-active,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link[aria-current="page"] {
background: var(--dx-surface-work);
box-shadow: inset 0 0 0 1px var(--dx-surface-work-border);
border-radius: 7px;
color: var(--dx-brand-deep);
font-weight: 700;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link.is-active svg,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link[aria-current="page"] svg {
color: var(--dx-brand-deep);
}
.main-wrap--with-marketplace-nav .login-nav-group[data-expanded="true"] {
background: none;
border: 0;
box-shadow: none;
}
.main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group[data-expanded="true"] {
border-top: 1px solid var(--dx-surface-work-border);
}
.main-wrap--with-marketplace-nav .login-nav-group[data-expanded="true"] .login-nav-group-header {
color: var(--dx-text);
}
.main-wrap--with-marketplace-nav .login-nav-group[data-expanded="true"] .login-nav-group-icon {
color: var(--dx-text);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link {
display: flex;
align-items: center;
gap: 11px;
margin: 0 -12px 1px 4px;
padding: 9px 12px;
border: 0;
border-radius: 7px;
color: var(--dx-brand);
font-size: .88rem;
font-weight: 400;
line-height: 1.3;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link svg {
width: 17px; height: 17px; flex: 0 0 17px;
color: var(--dx-brand);
opacity: .7;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand-deep);
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.is-active,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link[aria-current="page"] {
background: var(--dx-surface-work);
box-shadow: inset 0 0 0 1px var(--dx-surface-work-border);
color: var(--dx-brand-deep);
font-weight: 700;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.is-active svg,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link[aria-current="page"] svg {
opacity: 1;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.is-active::before,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link[aria-current="page"]::before {
content: none;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .login-nav-coming {
color: var(--dx-text-faint);
}
.main-wrap--with-marketplace-nav .login-nav-group-list { padding: 0 0 4px; }
.main-wrap--with-marketplace-nav .sidebar.is-open > .login-nav-toggle-mobile {
background: transparent;
border: 0;
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 0;
box-shadow: none;
}
.main-wrap--with-marketplace-nav .sidebar.is-open > .login-nav-toggle-mobile:hover {
background: transparent;
}
.main-wrap--with-marketplace-nav .sidebar.is-open > .filter-panel {
border: 0;
border-radius: 0;
padding: 0;
}
@media (max-width: 1023px) {
:is(#listPage, #datahubDetailPage) .sidebar > .filter-toggle-mobile,
#membersPage .sidebar > .filter-toggle-mobile,
.main-wrap--with-marketplace-nav .sidebar > .login-nav-toggle-mobile {
padding: 10px 18px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-radius: 999px;
box-shadow: none;
}
:is(#listPage, #datahubDetailPage) .sidebar > .filter-toggle-mobile:hover,
#membersPage .sidebar > .filter-toggle-mobile:hover,
.main-wrap--with-marketplace-nav .sidebar > .login-nav-toggle-mobile:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand-deep);
}
:is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-toggle-mobile,
#membersPage .sidebar.is-open > .filter-toggle-mobile,
.main-wrap--with-marketplace-nav .sidebar.is-open > .login-nav-toggle-mobile {
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 16px 16px 0 0;
}
:is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-panel,
#membersPage .sidebar.is-open > .filter-panel,
.main-wrap--with-marketplace-nav .sidebar.is-open > .filter-panel {
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-top: 0;
border-radius: 0 0 16px 16px;
padding: 4px 16px 14px;
}
:is(#listPage, #datahubDetailPage) .sidebar > .filter-toggle-mobile .filter-toggle-chevron,
#membersPage .sidebar > .filter-toggle-mobile .filter-toggle-chevron,
.main-wrap--with-marketplace-nav .login-nav-toggle-mobile .nav-chevron {
margin-left: auto;
color: var(--dx-text-muted);
}
}
.main-wrap--with-marketplace-nav .page-intro {
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
margin-bottom: 18px;
}
.main-wrap--with-marketplace-nav .page-intro h1 {
font-size: clamp(1.4rem, 3.6vw, 1.9rem);
color: var(--dx-text);
}
.main-wrap--with-marketplace-nav .page-intro p {
color: var(--dx-text-muted);
}
.nav-badge {
flex: none;
margin-left: auto;
padding: 1px 8px;
border-radius: 999px;
font-size: .66rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
}
.nav-badge--role {
background: var(--dx-interactive-soft);
color: var(--dx-interactive);
}
.nav-badge--soon {
background: rgba(7, 31, 51, .06);
color: var(--dx-text-faint);
}
.has-nav-badge > .nav-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.login-nav-group-header > .nav-badge { margin-left: 6px; }
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link.login-nav-home-link--admin {
margin: 6px -12px 0;
border-top: 1px solid var(--dx-surface-work-border);
border-bottom: 0;
}
.main-wrap--with-marketplace-nav .login-nav-accordion > .login-nav-group > .login-nav-group-header {
padding-left: 14px;
}
.main-wrap--with-marketplace-nav .login-nav-accordion > .login-nav-group > .login-nav-group-list {
padding-left: 14px;
}
.main-wrap--with-marketplace-nav .login-nav-accordion > .my-marketplace-nav-link.login-nav-flat-item {
padding-left: 26px;
}
.login-nav-accordion[data-open-section="member"] > [data-nav-section="admin"]:not([data-nav-section-head]),
.login-nav-accordion[data-open-section="admin"] > [data-nav-section="member"] {
display: none;
}
/* ── css/l-frame-b.css ── */
@media (min-width: 1024px) {
:is(#listPage, #datahubDetailPage) .sidebar,
#membersPage .sidebar,
.main-wrap--with-marketplace-nav > .sidebar {
padding-bottom: 0;
border-bottom: 0;
border-right-color: var(--dx-border-strong);
border-radius: 0 0 16px 16px;
}
:is(#listPage, #datahubDetailPage) .sidebar > .filter-panel,
#membersPage .sidebar > .filter-panel,
.main-wrap--with-marketplace-nav > .sidebar > .filter-panel,
.main-wrap--with-marketplace-nav .sidebar.is-open > .filter-panel {
background: var(--dx-surface-card);
margin: 0 -23px 0 -24px;
padding: 10px 23px 22px 24px;
border-right: 1px solid var(--dx-border-strong);
border-bottom: 1px solid var(--dx-border-strong);
border-radius: 0 0 16px 16px;
}
:is(#listPage, #datahubDetailPage) .fg,
#membersPage .fg,
:is(#listPage, #datahubDetailPage) .advanced-toggle,
#membersPage .advanced-toggle,
.main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group,
.main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group[data-expanded="true"],
.main-wrap--with-marketplace-nav .login-nav-switch {
border-color: var(--dx-border-strong);
}
.main-wrap--with-marketplace-nav .login-nav-group-header {
padding: 12px 0 6px;
font-size: .82rem;
font-weight: 600;
}
.main-wrap--with-marketplace-nav .login-nav-group-icon {
width: 15px; height: 15px;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link {
gap: 10px;
margin: 0 0 1px;
padding: 7px 10px 7px 16px;
border-radius: 6px;
font-size: .82rem;
line-height: 1.35;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link svg {
width: 15px; height: 15px; flex: 0 0 15px;
opacity: .7;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link:hover {
background: none;
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.is-active,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link[aria-current="page"] {
font-weight: 600;
}
.main-wrap--with-marketplace-nav .login-nav-group-list { padding: 1px 0 5px; }
.main-wrap--with-marketplace-nav .login-nav-switch {
padding: 11px 0 2px;
font-size: .78rem;
font-weight: 700;
}
}
@media (min-width: 1024px) {
:is(#listPage, #datahubDetailPage) .sidebar::after,
#membersPage .sidebar::after,
.main-wrap--with-marketplace-nav > .sidebar::after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 16px;
height: 16px;
background: radial-gradient(
circle at 100% 100%,
transparent 0 15px,
var(--dx-surface-work-border) 15px 16px,
var(--dx-surface-band) 16px);
pointer-events: none;
}
}
/* ── css/l-card.css ── */
@media (min-width: 1024px) {
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) > .main-wrap,
html[data-lf-shape="card"] #membersPage > .main-wrap {
grid-template-columns: 273px minmax(0, 1fr);
gap: 24px;
padding-top: 28px;
}
html[data-lf-shape="card"] #agreementsPage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] #myOffersPage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] #myRequestsPage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] #delegationsPage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] #membershipsPage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] #profilePage .main-wrap--with-marketplace-nav,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav {
grid-template-columns: 273px minmax(0, 1fr);
gap: 24px;
padding-top: 28px;
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .content-area,
html[data-lf-shape="card"] #membersPage .content-area {
padding: 0;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > :not(.sidebar):not(.login-nav-toggle-mobile) {
padding: 0;
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .hero-search-head,
html[data-lf-shape="card"] #membersPage .hero-search-head {
flex: 0 0 calc(273px + 24px);
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar,
html[data-lf-shape="card"] #membersPage .sidebar,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar {
margin-left: 0;
margin-top: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar::before,
html[data-lf-shape="card"] #membersPage .sidebar::before,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar::before,
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar::after,
html[data-lf-shape="card"] #membersPage .sidebar::after,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar::after {
display: none;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-toggle-mobile {
pointer-events: auto;
cursor: pointer;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-toggle-mobile .nav-chevron {
display: inline-flex;
margin-left: auto;
color: var(--dx-text-muted);
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar > .filter-toggle-mobile,
html[data-lf-shape="card"] #membersPage .sidebar > .filter-toggle-mobile,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .sidebar > .login-nav-toggle-mobile {
padding: 10px 18px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-radius: 999px;
box-shadow: none;
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar > .filter-toggle-mobile:hover,
html[data-lf-shape="card"] #membersPage .sidebar > .filter-toggle-mobile:hover,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .sidebar > .login-nav-toggle-mobile:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand-deep);
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-toggle-mobile,
html[data-lf-shape="card"] #membersPage .sidebar.is-open > .filter-toggle-mobile,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .sidebar.is-open > .login-nav-toggle-mobile {
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-bottom: 1px solid var(--dx-surface-work-border);
border-radius: 16px 16px 0 0;
}
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-panel,
html[data-lf-shape="card"] #membersPage .sidebar.is-open > .filter-panel,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .sidebar.is-open > .filter-panel {
display: block;
margin: 0;
padding: 4px 16px 14px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-line-control);
border-top: 0;
border-radius: 0 0 16px 16px;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar.is-open > .filter-panel {
display: flex;
flex-direction: column;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .filter-panel {
display: none;
}
html[data-lf-shape="card"] .lf-filter-count {
top: 11px;
right: 46px;
}
html[data-lf-shape="card"] #agreementsPage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] #myOffersPage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] #myRequestsPage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] #delegationsPage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] #membershipsPage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] #profilePage .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)),
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav:has(> .sidebar:not(.is-open)) {
grid-template-columns: 56px minmax(0, 1fr);
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav {
transition: grid-template-columns .18s ease;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile {
width: 56px;
min-width: 0;
height: 42px;
padding: 0;
gap: 4px;
justify-content: center;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile > span {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile .nav-chevron,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile:hover .nav-chevron {
margin-left: 2px;
transform: rotate(-90deg);
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile > svg:first-child {
width: 17px; height: 17px; flex: 0 0 17px;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar:not(.is-open) > .login-nav-toggle-mobile .nav-chevron {
width: 14px; height: 14px; flex: 0 0 14px;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar.is-open > .login-nav-toggle-mobile:hover .nav-chevron {
transform: rotate(90deg);
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar.is-open > .login-nav-toggle-mobile .nav-chevron {
width: 14px; height: 14px; flex: 0 0 14px;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav > .sidebar.is-open > .login-nav-toggle-mobile > svg:first-child {
width: 17px; height: 17px; flex: 0 0 17px;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group[data-expanded="true"],
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-switch,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link {
border-top: 0;
border-bottom: 0;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-group + .login-nav-group[data-expanded="true"],
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-group[data-expanded="true"] {
margin: 4px -17px;
padding: 0 17px 4px;
border: 1px solid var(--dx-border);
border-left: 0;
border-right: 0;
border-radius: 10px;
background: none;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link:hover {
background: var(--dx-surface-band-soft);
color: var(--dx-brand);
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.is-active,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link[aria-current="page"] {
background: var(--dx-surface-band-soft);
box-shadow: none;
color: var(--dx-brand-deep);
font-weight: 600;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .sidebar > .login-nav-toggle-mobile {
font-size: .84rem;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link,
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-flat-item {
font-size: .84rem;
font-weight: 600;
}
html[data-lf-shape="card"] .main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-home-link.login-nav-home-link--admin {
margin: 8px -17px 0;
padding-left: 17px;
padding-right: 17px;
border-top: 1px solid var(--dx-border);
}
}
/* ── css/block-registry.css ── */
.dash-layout {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
gap: 24px;
align-items: start;
width: 100%;
}
.dash-layout--single { grid-template-columns: minmax(0, 1fr); }
.dash-col {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
@media (max-width: 1100px) {
.dash-layout { grid-template-columns: minmax(0, 1fr); }
}
.dash-block {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 24px;
background: var(--dx-surface-raised, #FBF9F5);
border: 1px solid var(--dx-border, #E5DFD5);
border-radius: 14px;
min-width: 0;
}
.dash-block-head { display: block; }
.dash-block-head--row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.dash-block-headtext { flex: 1 1 220px; min-width: 0; }
.dash-block-title {
margin: 0;
font-family: var(--font-head, 'Sora', sans-serif);
font-size: 1.0625rem;
font-weight: 700;
color: var(--dx-text, #1D2B36);
overflow-wrap: anywhere;
}
.dash-block-sub {
margin: 4px 0 0;
font-size: .875rem;
color: var(--dx-text-muted, #5E6C75);
}
.dash-block-empty {
margin: 0;
font-size: .875rem;
color: var(--dx-text-muted, #5E6C75);
}
.dash-overlay {
position: absolute;
inset: 0;
border-radius: 14px;
z-index: 0;
}
.dash-block--linked > :not(.dash-overlay) { position: relative; z-index: 1; pointer-events: none; }
.dash-block--linked a:not(.dash-overlay),
.dash-block--linked button { pointer-events: auto; }
.dash-block--linked:hover { border-color: var(--dx-border-strong, #D8D0C2); }
.dash-overlay:focus-visible {
outline: 2px solid var(--dx-focus-ring, #15568F);
outline-offset: 2px;
}
.dash-link {
align-self: flex-start;
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .875rem;
font-weight: 600;
color: var(--dx-interactive, #15568F);
text-decoration: none;
}
.dash-link:hover { color: var(--dx-brand, #0B3557); text-decoration: underline; }
.dash-link:focus-visible,
.dash-tile:focus-visible,
.dash-pub:focus-visible,
.dash-cta:focus-visible {
outline: 2px solid var(--dx-focus-ring, #15568F);
outline-offset: 2px;
}
.dash-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 0 26px;
border-radius: 999px;
background: var(--dx-brand, #0B3557);
color: var(--dx-text-on-dark, #FFFFFF);
font-size: .97rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background-color .16s ease-out, transform .12s ease-out;
}
.dash-cta:hover { background: var(--dx-brand-deep, #071F33); color: var(--dx-text-on-dark, #FFFFFF); text-decoration: none; }
.dash-cta:active { transform: scale(.97); }
.dash-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dash-tile {
display: flex;
flex-direction: column;
padding: 16px;
border-radius: 8px;
border: 1.5px solid transparent;
text-decoration: none;
color: var(--dx-text, #1D2B36);
transition: border-color .16s ease-out;
}
.dash-tile:hover { text-decoration: none; }
.dash-tile-kick { font-size: .75rem; font-weight: 600; margin-bottom: 6px; }
.dash-tile-num {
font-family: var(--font-head, 'Sora', sans-serif);
font-size: 1.875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.dash-tile-label { margin-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--dx-text, #1D2B36); }
.dash-tile-sub { font-size: .75rem; color: var(--dx-text-muted, #5E6C75); }
.dash-tile--in { background: var(--dx-interactive-soft, #E8F1FA); }
.dash-tile--in .dash-tile-kick { color: var(--dx-brand-light, #12507F); }
.dash-tile--in .dash-tile-num { color: var(--dx-interactive, #15568F); }
.dash-tile--in:hover { border-color: var(--dx-interactive, #15568F); }
.dash-tile--out { background: var(--dx-state-request-bg, #FCF0DE); }
.dash-tile--out .dash-tile-kick { color: var(--dx-state-request-fg, #AD5500); }
.dash-tile--out .dash-tile-num { color: var(--dx-state-request-fg, #AD5500); }
.dash-tile--out:hover { border-color: var(--dx-state-request-fg, #AD5500); }
.dash-pubs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dash-pub {
display: block;
padding: 12px 16px;
background: var(--dx-surface-card, #FFFFFF);
border: 1px solid var(--dx-border, #E5DFD5);
border-left: 3px solid var(--dx-border, #E5DFD5);
border-radius: 8px;
color: var(--dx-text, #1D2B36);
text-decoration: none;
min-height: 44px;
}
.dash-pub:hover { border-color: var(--dx-border-strong, #D8D0C2); text-decoration: none; }
.dash-pub--wait,
.dash-pub--wait:hover { border-left-color: var(--dx-state-request-mark, #E05210); }
.dash-pub-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.dash-pub-type {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .03em;
color: var(--dx-text-muted, #5E6C75);
}
.dash-pub-state {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .75rem;
font-weight: 600;
white-space: nowrap;
}
.dash-pub-state--wait { color: var(--dx-state-request-fg, #AD5500); }
.dash-pub-state--ok { color: var(--dx-state-open-fg, #1F7A3C); }
.dash-pub-title {
display: block;
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.dash-pub-meta { display: block; font-size: .78rem; color: var(--dx-text-muted, #5E6C75); }
.dash-orgpill { align-self: flex-start; }
.dash-dl {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 7px 14px;
margin: 0;
font-size: .8125rem;
}
.dash-dl dt { color: var(--dx-text-muted, #5E6C75); }
.dash-dl dd { margin: 0; color: var(--dx-text, #1D2B36); }
.dash-dd-wrap { overflow-wrap: anywhere; }
.dash-count { margin: 0; font-size: .875rem; color: var(--dx-text, #1D2B36); }
.dash-count strong {
font-family: var(--font-head, 'Sora', sans-serif);
font-size: 1.25rem;
font-variant-numeric: tabular-nums;
margin-right: 6px;
}
.dash-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.dash-list li {
font-size: .875rem;
color: var(--dx-text, #1D2B36);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 560px) {
.dash-block { padding: 18px 16px; }
.dash-tiles { grid-template-columns: minmax(0, 1fr); }
.dash-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.dash-cta, .dash-tile { transition: none; }
.dash-cta:active { transform: none; }
}
/* ── css/dmi-accents.css ── */
:is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-toggle-mobile,
#membersPage .sidebar.is-open > .filter-toggle-mobile,
html[data-lf-shape="card"] :is(#listPage, #datahubDetailPage) .sidebar.is-open > .filter-toggle-mobile,
html[data-lf-shape="card"] #membersPage .sidebar.is-open > .filter-toggle-mobile {
box-shadow: inset 0 -3px 0 var(--dx-accent, #FFB907);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query),
#membersPage .afb-chip:not(.afb-chip--query) {
background: var(--dx-brand, #0B3557);
border-color: var(--dx-brand, #0B3557);
color: var(--dx-text-on-dark, #FFFFFF);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query) .afb-chip-facet,
#membersPage .afb-chip:not(.afb-chip--query) .afb-chip-facet {
color: var(--dx-text-on-dark-muted, #BDD1E0);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query) .afb-chip-value,
#membersPage .afb-chip:not(.afb-chip--query) .afb-chip-value {
color: var(--dx-text-on-dark, #FFFFFF);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query) .afb-remove,
#membersPage .afb-chip:not(.afb-chip--query) .afb-remove {
color: var(--dx-text-on-dark-muted, #BDD1E0);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query) .afb-remove:hover,
#membersPage .afb-chip:not(.afb-chip--query) .afb-remove:hover {
color: var(--dx-accent, #FFB907);
}
:is(#listPage, #datahubDetailPage) .afb-chip:not(.afb-chip--query) .afb-remove:focus-visible,
#membersPage .afb-chip:not(.afb-chip--query) .afb-remove:focus-visible {
outline: 2px solid var(--dx-accent, #FFB907);
outline-offset: 1px;
}
.page-kicker {
display: flex; align-items: center;
margin: 0 0 6px;
font-family: var(--font-head);
font-size: .68rem; font-weight: 700; line-height: 1.2;
letter-spacing: .08em; text-transform: uppercase;
color: var(--dx-brand-light, #12507F);
}
.page-kicker::before {
content: "";
flex: 0 0 22px; height: 4px; border-radius: 2px; margin-right: 8px;
background: var(--dx-accent, #FFB907);
}
.page-kicker-org:not(:empty)::before { content: "\00a0·\00a0"; }
.page-kicker-org:empty { display: none; }
.page-intro--with-action:has(> .page-kicker) > .page-kicker { grid-column: 1 / -1; grid-row: 1; }
.page-intro--with-action:has(> .page-kicker) > h1 { grid-row: 2; }
.page-intro--with-action:has(> .page-kicker) > p { grid-row: 3; }
.page-intro--with-action:has(> .page-kicker) > [data-page-action] { grid-row: 2; }
@media (max-width: 640px) {
.page-intro--with-action:has(> .page-kicker) > [data-page-action] { grid-row: 4; }
}
.pl-seg.is-active .pl-seg-n {
background: var(--dx-accent, #FFB907);
color: var(--dx-accent-ink, #061525);
}
@media (min-width: 801px) {
#publishDatasetPage .publish-hero:has(> .page-kicker) .pf-hero-tools,
#publishDatasetPage .publish-hero:has(> .page-kicker) .pub-hero-actions { top: 22px; }
}
/* ── css/pill-switch.css ── */
:root {
--ps-active: var(--dx-brand, #0B3557);
--ps-line: var(--dx-interactive, #15568F);
--ps-hover: var(--dx-interactive-soft, #E8F1FA);
--ps-disabled: #C9CFD8;
}
.gs-switch {
gap: 6px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.gs-seg {
padding: 5px 13px;
border: 1.5px solid var(--ps-line);
border-radius: 999px;
background: #FFFFFF;
color: var(--ps-line);
line-height: 1.3;
}
.gs-seg:hover { background: var(--ps-hover); color: var(--ps-line); }
.gs-seg:focus-visible { outline: 2px solid var(--ps-line); outline-offset: 2px; }
.gs-seg.is-active,
.gs-seg.is-active:hover {
background: var(--ps-active);
border-color: var(--ps-active);
color: #FFFFFF;
}
.gs-seg.is-disabled,
.gs-seg:disabled,
.gs-seg.is-disabled:hover,
.gs-seg:disabled:hover {
background: #FFFFFF;
border-color: var(--ps-disabled);
color: var(--gray-mid, #9AA3AF);
opacity: 1;
}
.pl-seg {
min-height: 40px;
padding: 0 7px 0 15px;
border: 1.5px solid var(--ps-line);
border-radius: 999px;
background: #FFFFFF;
color: var(--ps-line);
}
.pl-seg:hover { background: var(--ps-hover); }
.pl-seg:focus-visible { outline: 2px solid var(--ps-line); outline-offset: 2px; }
.pl-seg.is-active,
.pl-seg.is-active:hover {
background: var(--ps-active);
border-color: var(--ps-active);
color: #FFFFFF;
}
.pl-seg[disabled],
.pl-seg[disabled]:hover {
background: #FFFFFF;
border-color: var(--ps-disabled);
color: var(--dx-text-muted, #5E6C75);
}
.pl-search input,
.st-filter {
border-radius: 999px;
}
.pl-search input { padding-left: 36px; padding-right: 14px; }
.pl-search .pl-search-icon { left: 13px; }
.st-filter { padding: 0 16px; }
.pl-sort > select,
.agreements-control > select,
.ag-sort select {
-webkit-appearance: none;
appearance: none;
border-radius: 999px;
padding-left: 14px;
padding-right: 34px;
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6C75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 12px 12px;
}
.main-wrap--with-marketplace-nav .gs-switch { gap: 4px; }
.main-wrap--with-marketplace-nav .gs-seg {
padding: 4px 12px;
border: 1px solid transparent;
background: transparent;
color: var(--dx-text-on-work, #4B5860);
}
.main-wrap--with-marketplace-nav .gs-seg:hover {
background: var(--dx-surface-band-soft, #F5F1EA);
color: var(--dx-brand, #0B3557);
}
.main-wrap--with-marketplace-nav .gs-seg:focus-visible {
outline: 2px solid var(--ps-line); outline-offset: 1px;
}
.main-wrap--with-marketplace-nav .gs-seg.is-active,
.main-wrap--with-marketplace-nav .gs-seg.is-active:hover {
background: var(--dx-surface-band, #EFEBE4);
border-color: var(--dx-border, #E5DFD5);
color: var(--dx-brand, #0B3557);
font-weight: 700;
}
.main-wrap--with-marketplace-nav .gs-seg.is-disabled,
.main-wrap--with-marketplace-nav .gs-seg:disabled,
.main-wrap--with-marketplace-nav .gs-seg.is-disabled:hover,
.main-wrap--with-marketplace-nav .gs-seg:disabled:hover {
background: transparent;
border-color: transparent;
color: var(--gray-mid, #9AA3AF);
}
/* ── css/data-flow.css ── */
.df {
container: df / inline-size;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
color: var(--dx-text);
}
.df-sr {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.df-fnote {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 -8px; font-size: 13.5px; color: var(--dx-text-muted);
}
.df-fnote[hidden] { display: none; }
.df-fnote b { color: var(--dx-brand); font-weight: 600; }
.df-fnote button {
border: 0; background: transparent; color: var(--dx-interactive); font: inherit;
font-weight: 600; cursor: pointer; min-height: 32px; padding: 0 4px;
}
.df-fnote button:hover { text-decoration: underline; }
.df-flowcard {
position: relative;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 16px;
container-type: inline-size;
}
.df-flow {
position: relative;
display: grid;
grid-template-columns: repeat(var(--df-cols, 5), minmax(0, 1fr));
gap: 0 12px;
padding: 10px;
}
.df-step {
position: relative;
display: flex; flex-direction: column; gap: 6px;
min-width: 0; min-height: 96px;
padding: 13px 12px 13px 14px;
border: 0; border-radius: 12px;
background: transparent;
color: var(--dx-text);
font: inherit; text-align: left;
cursor: pointer;
}
.df-step:hover { background: var(--dx-surface-band-soft); }
.df-step:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: -2px; }
.df-step-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.df-step:not(.df-step--aside) .df-step-top::before {
content: ""; flex: none; width: 9px; height: 9px; border-radius: 999px;
border: 1.5px solid var(--dx-border-strong); background: var(--dx-surface-card);
}
.df-step[aria-selected="true"]:not(.df-step--aside) .df-step-top::before {
border-color: var(--dx-brand); background: var(--dx-brand);
}
.df-step + .df-step:not(.df-step--aside)::before {
content: ""; position: absolute; left: -12px; top: 22px;
width: 26px; height: 1.5px; margin-top: -.75px;
background: var(--dx-border-strong); pointer-events: none;
}
.df-step-lbl { min-width: 0; font-weight: 700; font-size: 14.5px; line-height: 1.2; overflow-wrap: anywhere; }
.df-step-n {
font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1;
color: var(--dx-brand); font-variant-numeric: tabular-nums;
}
.df-step-hint { font-size: 12px; line-height: 1.35; color: var(--dx-text-faint); }
.df-step-alert {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--dx-state-request-fg);
}
.df-step-alert::before {
content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--dx-state-request-mark);
}
.df-step[aria-selected="true"] {
background: var(--dx-surface-band);
box-shadow: inset 0 0 0 1.5px var(--dx-brand);
}
.df-step--aside { margin-left: 14px; border-radius: 0 12px 12px 0; }
.df-step--aside::after {
content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px;
border-left: 1px solid var(--dx-border);
}
.df-step--aside .df-step-lbl,
.df-step--aside .df-step-n { color: var(--dx-text-muted); }
.df-step--aside[aria-selected="true"] { border-radius: 12px; }
.df-flow-desc {
position: relative;
margin: 0;
padding: 12px 18px;
border-top: 1px solid var(--dx-border);
border-radius: 0 0 16px 16px;
background: var(--dx-surface-page);
font-size: 14px; color: var(--dx-text-muted);
}
.df-flow-desc:empty { display: none; }
.df-flow-desc::before {
content: ""; position: absolute; top: -7px; left: calc(var(--df-x, 50%) - 6px);
width: 12px; height: 12px;
background: var(--dx-surface-page);
border-left: 1px solid var(--dx-border); border-top: 1px solid var(--dx-border);
transform: rotate(45deg);
transition: left .25s ease;
}
.df-rail {
min-width: 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 32px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
--df-fl: 0px; --df-fr: 0px;
}
.df-rail::-webkit-scrollbar { display: none; }
.df-rail > * { scroll-snap-align: start; }
.df-rail.can-l { --df-fl: 28px; }
.df-rail.can-r { --df-fr: 40px; }
.df-rail.can-l, .df-rail.can-r {
-webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--df-fl), black calc(100% - var(--df-fr)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black var(--df-fl), black calc(100% - var(--df-fr)), transparent 100%);
}
.df-seg-rail { display: flex; }
.df-seg-rail > .df-seg { flex: none; flex-wrap: nowrap; scroll-snap-align: none; }
.df-seg-rail .df-seg button { scroll-snap-align: start; }
.df-tools { display: flex; flex-direction: column; gap: 12px; }
.df-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.df-search { position: relative; flex: 1 1 240px; display: block; margin: 0; }
.df-search svg { position: absolute; left: 16px; top: 50%; margin-top: -8px; color: var(--dx-text-muted); pointer-events: none; }
.df-search input {
width: 100%; height: 44px;
padding: 0 18px 0 42px;
border: 1px solid var(--dx-line-control); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-text);
font: inherit; font-size: 15px;
}
.df-select {
-webkit-appearance: none; appearance: none;
height: 44px; max-width: 100%;
padding: 0 42px 0 18px;
border: 1px solid var(--dx-line-control); border-radius: 999px;
background: var(--dx-surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6C75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 17px center / 12px 12px;
color: var(--dx-text);
font: inherit; font-size: 15px;
cursor: pointer;
}
.df-select:hover { background-color: var(--dx-surface-band-soft); }
.df-select.is-on { border-color: var(--dx-brand); background-color: var(--dx-surface-band); color: var(--dx-brand); font-weight: 600; }
.df-fbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }
.df-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0; }
.df-fgroup legend {
float: left; margin-right: 4px; padding: 0;
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--dx-text-muted);
}
.df-fgroup--nowrap, .df-fgroup--nowrap .df-seg { flex-wrap: nowrap; white-space: nowrap; }
.df-seg {
display: inline-flex; flex-wrap: nowrap;
padding: 2px;
border: 1px solid var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-card);
}
.df-seg button {
min-height: 34px; padding: 0 13px;
border: 0; border-radius: 999px;
background: transparent; color: var(--dx-text-muted);
font: inherit; font-size: 13.5px; font-weight: 600;
white-space: nowrap; cursor: pointer;
}
.df-seg button:hover { color: var(--dx-brand); }
.df-seg button:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: -3px; }
.df-seg button[aria-pressed="true"] {
background: var(--dx-surface-band); color: var(--dx-brand);
box-shadow: inset 0 0 0 1px var(--dx-border-strong);
}
.df-fgroup[hidden] { display: none; }
.df-fbar > .df-fgroup--arch { padding-left: 22px; }
.df-freq { display: grid; grid-template-columns: 0fr; min-width: 0; transition: grid-template-columns .34s cubic-bezier(.4, 0, .2, 1) .08s; }
.df-freq.is-shown { grid-template-columns: 1fr; transition: grid-template-columns .34s cubic-bezier(.4, 0, .2, 1); }
.df-freq-in { min-width: 0; min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .42s; }
.df-freq.is-shown .df-freq-in { visibility: visible; transition: none; }
.df-freq .df-fgroup { padding-left: 22px; opacity: 0; transform: translateX(-6px); transition: opacity .14s ease, transform .2s ease; }
.df-freq.is-shown .df-fgroup { opacity: 1; transform: none; transition: opacity .22s ease .16s, transform .3s cubic-bezier(.2, .7, .2, 1) .12s; }
.df-list { display: flex; flex-direction: column; gap: 10px; }
.df-list.is-swapping { animation: df-swap .22s ease-out; }
@keyframes df-swap { from { opacity: 0; transform: translateY(5px); } }
.df-card {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; align-items: center;
padding: 15px 18px 15px 20px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border); border-radius: 10px;
box-shadow: var(--dx-shadow-card);
transition: transform .35s ease, opacity .35s ease, border-color .15s ease, box-shadow .15s ease;
}
.df-card.is-clickable { cursor: pointer; }
.df-card.is-clickable:hover { border-color: var(--dx-interactive); box-shadow: 0 4px 16px rgba(16, 37, 66, .10); }
.df-card.is-clickable:hover .df-name { color: var(--dx-interactive); text-decoration: underline; }
.df-card.is-clickable .df-panels { cursor: auto; }
button.df-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
button.df-name:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; border-radius: 4px; }
.df-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
border-radius: 10px 0 0 10px; background: transparent;
}
.df-card.is-warn::before { background: var(--dx-state-request-mark); }
.df-card.is-moving { transform: translateX(40px); opacity: 0; }
.df-r1 { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.df-name {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--dx-text);
text-decoration: none;
}
a.df-name:hover { color: var(--dx-interactive); text-decoration: underline; }
.df-ext {
padding: 1px 8px; border: 1px solid var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-band-soft); color: var(--dx-text-muted);
font-family: var(--font-head); font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.df-meta { margin-top: 4px; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--dx-text-faint); }
.df-facts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--dx-text-faint); }
.df-facts i { width: 3px; height: 3px; border-radius: 50%; background: var(--dx-border-strong); }
.df-facts b { color: var(--dx-text-muted); font-weight: 600; }
.df-side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.df-split {
position: relative; display: inline-flex; align-items: stretch;
border: 1.5px solid var(--dx-interactive); border-radius: 8px;
background: var(--dx-surface-card);
}
.df-split > button, .df-split > a {
display: inline-flex; align-items: center;
min-height: 38px; border: 0; background: transparent;
color: var(--dx-interactive); font: inherit; font-size: 13.5px; font-weight: 600;
text-decoration: none; cursor: pointer;
}
.df-split > button:hover, .df-split > a:hover { background: var(--dx-interactive-soft); }
.df-split-main { gap: 7px; padding: 0 13px 0 11px; border-radius: 6px 0 0 6px; }
.df-split-caret {
justify-content: center; width: 38px;
border-left: 1.5px solid var(--dx-interactive-border) !important;
border-radius: 0 6px 6px 0;
}
.df-split-caret svg { transition: transform .18s ease; }
.df-split-caret[aria-expanded="true"] { background: var(--dx-interactive-soft); }
.df-split-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.df-split-main:focus-visible, .df-split-caret:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-btn-danger {
display: inline-flex; align-items: center; gap: 7px;
min-height: 41px; padding: 0 13px 0 11px;
border: 1.5px solid var(--dx-state-closed-bg); border-radius: 8px;
background: var(--dx-surface-card); color: var(--dx-state-closed-fg);
font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.df-btn-danger { border-color: color-mix(in srgb, var(--dx-state-closed-fg) 32%, transparent); }
.df-btn-danger:hover { background: var(--dx-state-closed-bg); border-color: var(--dx-state-closed-fg); }
.df-menu {
position: fixed; left: 0; top: 0; z-index: 1100;
min-width: 264px; max-width: calc(100vw - 24px); padding: 6px;
overflow-y: auto; overscroll-behavior: contain;
background: var(--dx-surface-card); border: 1px solid var(--dx-border); border-radius: 12px;
box-shadow: var(--dx-shadow-menu);
animation: df-pop .14s ease-out; transform-origin: top right;
}
@keyframes df-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.df-menu.is-up { transform-origin: bottom right; animation-name: df-pop-up; }
@keyframes df-pop-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.df-menu-h {
padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--dx-text-faint);
}
.df-menu button, .df-menu a {
display: flex; align-items: center; gap: 10px; width: 100%;
min-height: 40px; padding: 0 10px;
border: 0; border-radius: 8px; background: transparent;
color: var(--dx-text); font: inherit; font-size: 14px; font-weight: 500;
text-align: left; text-decoration: none; cursor: pointer;
}
.df-menu svg { color: var(--dx-text-muted); flex-shrink: 0; }
.df-menu button:hover, .df-menu a:hover { background: var(--dx-surface-band-soft); }
.df-menu button:focus-visible, .df-menu a:focus-visible {
background: var(--dx-surface-band-soft); outline: 2px solid var(--dx-focus-ring); outline-offset: -2px;
}
.df-menu .is-next, .df-menu .is-next svg { color: var(--dx-interactive); font-weight: 700; }
.df-menu .is-danger, .df-menu .is-danger svg { color: var(--dx-state-closed-fg); }
.df-menu .is-danger:hover, .df-menu .is-danger:focus-visible { background: var(--dx-state-closed-bg); }
.df-menu-n {
margin-left: auto; display: grid; place-items: center;
min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
background: var(--dx-surface-band-soft); color: var(--dx-text-muted);
font-size: 11.5px; font-weight: 700;
}
.df-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--dx-border); }
.df-cbar {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap;
min-height: 38px;
margin: 12px -18px -15px -20px; padding: 7px 18px 7px 20px;
border-top: 1px solid var(--dx-divider); border-radius: 0 0 10px 10px;
font-size: 12.5px; color: var(--dx-text-faint);
}
.df-card:has(.df-panel:not([hidden])) .df-cbar { border-radius: 0; }
.df-counts { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 200px; min-width: 0; }
.df-cnt {
display: inline-flex; align-items: center; gap: 5px;
min-height: 24px; padding: 0 8px;
border: 1px solid var(--dx-border); border-radius: 999px;
background: transparent; color: var(--dx-text-muted);
font-family: var(--font-head); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.df-cnt b { color: var(--dx-text); font-weight: 700; }
.df-cnt:hover { border-color: var(--dx-text-faint); color: var(--dx-text); }
.df-cnt svg { transition: transform .18s ease; }
.df-cnt[aria-expanded="true"] { background: var(--dx-surface-band-soft); border-color: var(--dx-text-faint); color: var(--dx-text); }
.df-cnt[aria-expanded="true"] svg { transform: rotate(180deg); }
.df-cnt:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; color: var(--dx-text-faint); }
.df-state.is-warn { color: var(--dx-state-request-fg); font-weight: 700; }
.df-state.is-warn::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--dx-state-request-mark); }
.df-panels { grid-column: 1 / -1; margin: 15px -18px -15px -20px; border-radius: 0 0 10px 10px; overflow: hidden; }
.df-panels:not(:has(.df-panel:not([hidden]))) { display: none; }
.df-panel { border-top: 1px solid var(--dx-border); background: var(--dx-surface-page); }
.df-panel[hidden] { display: none; }
.df-prow {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 20px; border-top: 1px solid var(--dx-border); font-size: 14px;
}
.df-prow:first-child { border-top: 0; }
.df-kind {
padding: 2px 7px; border: 1px solid var(--dx-border-strong); border-radius: 5px;
background: var(--dx-surface-card); color: var(--dx-text-muted);
font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.df-pname { flex: 1; min-width: 160px; font-weight: 600; color: var(--dx-text); overflow-wrap: anywhere; }
.df-pst { font-size: 12.5px; font-weight: 600; color: var(--dx-text-muted); }
.df-pst.is-warn { color: var(--dx-state-request-fg); font-weight: 700; }
.df-plink {
min-height: 32px; padding: 0 4px; border: 0; background: transparent;
color: var(--dx-interactive); font: inherit; font-size: 13.5px; font-weight: 600;
text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
}
.df-plink:hover { text-decoration: underline; }
.df-mini {
min-height: 32px; padding: 0 11px; border: 1.5px solid var(--dx-interactive); border-radius: 6px;
background: var(--dx-surface-card); color: var(--dx-interactive);
font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
display: inline-flex; align-items: center;
}
.df-mini:hover { background: var(--dx-interactive-soft); }
.df-mini.is-danger { color: var(--dx-state-closed-fg); border-color: color-mix(in srgb, var(--dx-state-closed-fg) 32%, transparent); }
.df-mini.is-danger:hover { background: var(--dx-state-closed-bg); border-color: var(--dx-state-closed-fg); }
.df-empty {
padding: 44px 24px; border: 1px dashed var(--dx-border-strong); border-radius: 14px;
text-align: center; color: var(--dx-text-muted);
}
.df-empty b { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: 17px; color: var(--dx-text); }
.df-notice {
padding: 12px 16px; border: 1px solid var(--dx-border); border-radius: 10px;
background: var(--dx-surface-card); font-size: 13.5px; color: var(--dx-text-muted);
}
.df-drop-btn {
min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
background: var(--dx-brand); color: var(--dx-text-on-dark);
font: inherit; font-size: 15.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center;
}
.df-drop-btn:hover { background: var(--dx-brand-deep); color: var(--dx-text-on-dark); }
.df-drop-btn:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 3px; }
.df-dz { display: flex; flex-direction: column; gap: 10px; container: dfdz / inline-size; min-width: 0; }
.df-dz-status {
display: flex; align-items: center; gap: 8px; margin: 0;
font-size: 14px; font-weight: 700; color: var(--dx-state-open-fg);
}
.df-dz-status[hidden] { display: none; }
.df-dz-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.df-dz-file {
display: flex; align-items: center; gap: 8px;
padding: 10px 8px 10px 12px;
border: 1px solid var(--dx-border); border-radius: 14px; background: var(--dx-surface-card);
animation: df-dz-in .25s ease;
}
@keyframes df-dz-in { from { opacity: 0; transform: translateY(-4px); } }
.df-dz-file.is-error { border-color: color-mix(in srgb, var(--dx-state-closed-fg) 30%, transparent); background: var(--dx-state-closed-bg); }
.df-dz-file.is-pickable { cursor: pointer; }
.df-dz-file.is-pickable:hover { background: var(--dx-surface-band-soft); }
.df-dz-file.is-picked { border-color: var(--dx-brand); box-shadow: inset 0 0 0 1px var(--dx-brand); background: var(--dx-surface-band); }
.df-dz-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: inherit; }
.df-dz-main input[type=radio] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--dx-brand); }
.df-dz-ext {
flex: none; width: 40px; height: 40px; display: grid; place-items: center;
border-radius: 10px; background: var(--dx-interactive-soft); color: var(--dx-interactive);
font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.df-dz-file.is-error .df-dz-ext { background: var(--dx-surface-card); color: var(--dx-state-closed-fg); }
.df-dz-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.df-dz-name { font-weight: 600; font-size: 15px; color: var(--dx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-dz-info { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--dx-text-muted); font-variant-numeric: tabular-nums; }
.df-dz-info svg { flex: none; }
.df-dz-info.is-ok { color: var(--dx-state-open-fg); font-weight: 600; }
.df-dz-info.is-err { color: var(--dx-state-closed-fg); font-weight: 500; }
.df-dz-bar { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: var(--dx-border); }
.df-dz-bar > i { display: block; height: 100%; width: 0; background: var(--dx-interactive); transition: width .15s linear; }
.df-dz-bar.is-indet > i { width: 35% !important; animation: df-dz-indet 1.1s ease-in-out infinite; }
@keyframes df-dz-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.df-dz-act { flex: none; display: flex; align-items: center; gap: 2px; }
.df-dz-retry {
min-height: 44px; padding: 0 8px; border: 0; background: none;
color: var(--dx-state-closed-fg); font: inherit; font-size: 13px; font-weight: 600;
text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.df-dz-x {
width: 44px; height: 44px; display: grid; place-items: center;
border: 0; border-radius: 999px; background: transparent; color: var(--dx-text-muted); cursor: pointer;
}
.df-dz-x:hover { background: var(--dx-surface-card); color: var(--dx-text); }
.df-dz-retry:focus-visible, .df-dz-x:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; border-radius: 8px; }
.df-dz-pill {
position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
padding: 8px; margin: 0;
border: 2px dashed var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-text);
cursor: pointer; text-align: left;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.df-dz-pill:hover { border-color: var(--dx-interactive); }
.df-dz-pill:focus-visible { outline: 3px solid var(--dx-focus-ring); outline-offset: 3px; }
.df-dz-pill input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.df-dz-ic {
flex: none; position: relative; width: 52px; height: 52px; display: grid; place-items: center;
border-radius: 999px; background: var(--dx-interactive-soft); color: var(--dx-interactive);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.df-dz-ic > svg { width: 24px; height: 24px; }
.df-dz-ok { position: absolute; inset: 0; display: none; place-items: center; }
.df-dz-ok svg { width: 24px; height: 24px; stroke-width: 2.6; }
.df-dz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.df-dz-text b { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dx-text); }
.df-dz-text span { font-size: 13px; color: var(--dx-text-muted); }
.df-dz-btn {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 24px; border-radius: 999px;
background: var(--dx-brand); color: var(--dx-text-on-dark);
font-size: 15.5px; font-weight: 600; white-space: nowrap;
transition: background .15s ease;
}
.df-dz-btn svg { width: 18px; height: 18px; stroke-width: 2.5; }
.df-dz-pill:hover .df-dz-btn { background: var(--dx-brand-deep); }
.df-dz.is-drag .df-dz-pill { border-style: solid; border-color: var(--dx-interactive); background: var(--dx-interactive-soft); box-shadow: 0 0 0 6px color-mix(in srgb, var(--dx-interactive) 12%, transparent); }
.df-dz.is-drag .df-dz-ic { background: var(--dx-interactive); color: var(--dx-text-on-dark); transform: scale(1.06); }
.df-dz.is-drag .df-dz-btn { opacity: .35; }
.df-dz.has-files .df-dz-pill { padding: 6px; }
.df-dz.has-files .df-dz-ic { width: 44px; height: 44px; }
.df-dz.has-files .df-dz-btn { min-height: 44px; padding: 0 20px; background: var(--dx-surface-card); color: var(--dx-brand); box-shadow: inset 0 0 0 2px var(--dx-brand); font-size: 15px; }
.df-dz.has-files .df-dz-pill:hover .df-dz-btn { background: var(--dx-interactive-soft); }
.df-dz.is-success .df-dz-ic { background: var(--dx-state-open-fg); color: var(--dx-text-on-dark); animation: df-dz-pop .45s ease; }
.df-dz.is-success .df-dz-ic > svg { visibility: hidden; }
.df-dz.is-success .df-dz-ok { display: grid; }
.df-dz.is-success .df-dz-pill { border-color: color-mix(in srgb, var(--dx-state-open-fg) 45%, transparent); }
@keyframes df-dz-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.df-dz-pill[aria-disabled="true"] { cursor: not-allowed; border-color: var(--dx-border); }
.df-dz-pill[aria-disabled="true"] .df-dz-btn { opacity: .5; }
.df-dz-pill[aria-disabled="true"]:hover .df-dz-btn { background: var(--dx-brand); }
.df-dz--hero { width: 520px; max-width: 100%; }
.df-dz--big { margin-bottom: 18px; }
.df-dz--big .df-dz-pill { padding: 14px; }
.df-dz--big .df-dz-ic { width: 64px; height: 64px; }
.df-dz--big .df-dz-text b { font-size: 18px; }
@container dfdz (max-width: 400px) {
.df-dz-pill { gap: 10px; }
.df-dz-text { display: none; }
.df-dz-btn { flex: 1; padding: 0 18px; }
.df-dz-file.is-error { flex-wrap: wrap; row-gap: 0; }
.df-dz-file.is-error .df-dz-act { margin-left: 52px; }
}
@media (pointer: coarse) {
.df-dz-text { display: none; }
.df-dz-btn { flex: 1; }
}
@media (max-width: 640px) {
.df-dz--hero { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.df-dz-file, .df-dz.is-success .df-dz-ic { animation: none; }
.df-dz-bar > i { transition: none; }
.df-dz-bar.is-indet > i { animation: none; width: 100% !important; opacity: .45; }
.df-dz-pill, .df-dz-ic, .df-dz-btn { transition: none; }
}
.df-upbd { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(7, 31, 51, .40); }
.df-upwin {
display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100dvh - 32px);
overflow: hidden; background: var(--dx-surface-card); border-radius: 16px; box-shadow: 0 24px 60px rgba(7, 31, 51, .25);
animation: df-uppop .18s ease-out;
}
@keyframes df-uppop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.df-uphead { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px 26px; background: var(--dx-surface-page); border-bottom: 1px solid var(--dx-border); }
.df-uphead > div { flex: 1; min-width: 0; }
.df-uphead h3 { margin: 0; font-family: var(--font-head); font-size: 19px; color: var(--dx-text); }
.df-uphead p { margin: 4px 0 0; font-size: 13.5px; color: var(--dx-text-muted); }
.df-upbody { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; overflow: auto; }
.df-upbody-in { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 640px) { .df-upbody { padding: 18px 16px; } .df-uphead { padding: 16px 14px 14px 18px; } .df-upfoot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); } }
.df-upnote { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--dx-interactive-soft); font-size: 13.5px; color: var(--dx-brand); }
.df-upfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--dx-border); background: var(--dx-surface-card); }
.df-upfoot-hint { flex: 1; min-width: 180px; font-size: 12.5px; color: var(--dx-text-muted); }
.df-upfoot .df-pill.is-go { gap: 8px; }
@media (prefers-reduced-motion: reduce) { .df-upwin { animation: none; } }
.df-dbd { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; background: rgba(7, 31, 51, .32); }
.df-drawer {
display: flex; flex-direction: column;
width: 580px; max-width: 100%; height: 100%; height: 100dvh;
background: var(--dx-surface-page); box-shadow: -18px 0 40px rgba(7, 31, 51, .16);
animation: df-slidein .22s ease-out;
}
@keyframes df-slidein { from { transform: translateX(28px); opacity: .5; } }
.df-dr-head {
display: flex; gap: 14px; align-items: flex-start;
padding: 22px 24px 18px 28px;
background: var(--dx-surface-card); border-bottom: 1px solid var(--dx-border);
}
.df-dr-head > div { flex: 1; min-width: 0; }
.df-dr-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dx-text-muted); }
.df-dr-head h3 { margin: 6px 0 0; font-family: var(--font-head); font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; color: var(--dx-text); }
.df-dr-title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
width: 100%; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none;
font: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.df-dr-title.is-fit { cursor: text; }
.df-dr-title.is-full { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.df-dr-title:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-x {
width: 40px; height: 40px; flex-shrink: 0;
border: 1px solid var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-text); font-size: 20px; line-height: 1; cursor: pointer;
}
.df-x:hover { background: var(--dx-surface-band-soft); }
.df-dr-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 28px 28px; }
.df-track {
display: grid; grid-template-columns: repeat(var(--df-cols, 5), minmax(0, 1fr));
padding: 16px 10px 14px;
background: var(--dx-surface-card); border: 1px solid var(--dx-border); border-radius: 12px;
}
.df-track span {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 0 2px; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--dx-text-faint);
}
.df-track span::before {
content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--dx-border-strong);
}
.df-track span:first-child::before { display: none; }
.df-track i {
position: relative; z-index: 1;
display: grid; place-items: center; width: 22px; height: 22px;
border: 2px solid var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-text-on-dark);
font-style: normal; font-size: 11px; font-weight: 700;
}
.df-track .is-done { color: var(--dx-text-muted); }
.df-track .is-done i { background: var(--dx-brand); border-color: var(--dx-brand); }
.df-track .is-link::before { background: var(--dx-brand); }
.df-track b { font-weight: inherit; }
.df-track .df-tl-s { display: none; }
.df-dr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.df-dr-act {
display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px;
border: 1.5px solid var(--dx-interactive); border-radius: 8px; background: var(--dx-surface-card);
font: inherit; font-size: 14px; font-weight: 600; color: var(--dx-interactive); text-decoration: none; cursor: pointer;
}
.df-dr-act:hover { background: var(--dx-interactive-soft); }
.df-dr-act:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-dr-act svg { flex: none; }
.df-dr-act.is-next { border-color: var(--dx-state-request-mark); color: var(--dx-text); }
.df-dr-act.is-danger { border-color: color-mix(in srgb, var(--dx-state-closed-fg) 32%, transparent); color: var(--dx-state-closed-fg); }
.df-dr-act.is-danger:hover { background: var(--dx-state-closed-bg); border-color: var(--dx-state-closed-fg); }
.df-track .is-now { color: var(--dx-brand); font-weight: 700; }
.df-track .is-now i { border-color: var(--dx-brand); box-shadow: 0 0 0 4px var(--dx-interactive-soft); }
.df-sec { background: var(--dx-surface-card); border: 1px solid var(--dx-border); border-radius: 12px; scroll-margin-top: 16px; }
.df-sec h4 {
display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 16px 10px;
font-family: var(--font-head); font-size: 15px; color: var(--dx-brand);
}
.df-sec h4 svg { color: var(--dx-text-muted); }
.df-sec-c { margin-left: auto; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--dx-text-faint); }
.df-sec-hd { display: flex; align-items: center; gap: 2px; }
.df-sec-hd h4 { flex: 1; min-width: 0; }
.df-sec-hd:has(.df-sec-add) h4 { padding-right: 8px; }
.df-sec-add {
flex: none; width: 32px; height: 32px; margin: 4px 12px 0 0; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--dx-interactive); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-interactive); cursor: pointer;
}
.df-sec-add:hover { background: var(--dx-interactive-soft); }
.df-sec-add:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-sec-add svg { width: 16px; height: 16px; }
.df-sec .df-prow { padding: 10px 16px; }
.df-sec .df-prow { flex-wrap: nowrap; }
.df-sec .df-prow > .df-pname { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.df-sec .df-prow > :not(.df-pname) { flex-shrink: 0; }
.df-pacts { display: inline-flex; align-items: center; gap: 6px; }
.df-icon-btn { width: 34px; min-height: 32px; padding: 0; justify-content: center; }
.df-icon-btn svg { flex: none; width: 16px; height: 16px; }
.df-icon-btn:focus-visible { outline: 2px solid var(--dx-focus-ring); outline-offset: 2px; }
.df-sec .df-prow:first-of-type { border-top: 1px solid var(--dx-border); }
.df-sec dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 12px; margin: 0; padding: 2px 16px 14px; font-size: 14px; }
.df-sec dt { color: var(--dx-text-muted); }
.df-sec .df-kv { display: contents; }
.df-sec-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--dx-border); }
.df-sec-acts .df-dr-act { min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.df-sec dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.df-none { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 16px 14px; font-size: 14px; color: var(--dx-text-muted); }
.df-idline { padding: 0 16px 14px; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--dx-text-faint); overflow-wrap: anywhere; }
.df-sec.is-flash { animation: df-flash 1.3s ease-out; }
@keyframes df-flash { 0% { box-shadow: 0 0 0 3px var(--dx-interactive-border); } 100% { box-shadow: 0 0 0 0 transparent; } }
.df-dr-foot {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
padding: 14px 28px calc(14px + env(safe-area-inset-bottom)); background: var(--dx-surface-card); border-top: 1px solid var(--dx-border);
}
.df-backdrop { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(7, 31, 51, .36); }
.df-win { width: 520px; max-width: 100%; overflow: hidden; background: var(--dx-surface-card); border-radius: 14px; box-shadow: 0 18px 40px rgba(7, 31, 51, .2); }
.df-win header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 18px 28px; background: var(--dx-surface-page); border-bottom: 1px solid var(--dx-border); }
.df-win h3 { flex: 1; margin: 0; font-family: var(--font-head); font-size: 19px; color: var(--dx-text); }
.df-win-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 28px 28px; }
.df-win-body p { margin: 0; color: var(--dx-text-muted); }
.df-win dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.df-win dt { color: var(--dx-text-muted); }
.df-win dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.df-win-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.df-pill {
min-height: 44px; padding: 0 20px;
border: 1px solid var(--dx-border-strong); border-radius: 999px;
background: var(--dx-surface-card); color: var(--dx-brand);
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; text-decoration: none;
}
.df-pill:hover { background: var(--dx-surface-band-soft); }
.df-pill.is-go { background: var(--dx-brand); border-color: var(--dx-brand); color: var(--dx-text-on-dark); }
.df-pill.is-go:hover { background: var(--dx-brand-deep); }
.df-pill.is-danger { background: var(--dx-state-closed-fg); border-color: var(--dx-state-closed-fg); color: var(--dx-text-on-dark); }
.df-pill:disabled { opacity: .42; cursor: not-allowed; }
.df-pick { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.df-pick legend { margin-bottom: 8px; padding: 0; font-weight: 700; color: var(--dx-text); }
.df-pick label {
display: flex; align-items: center; gap: 10px;
min-height: 46px; padding: 0 14px;
border: 1px solid var(--dx-border-strong); border-radius: 10px;
font-weight: 600; cursor: pointer;
}
.df-pick label:hover { background: var(--dx-surface-band-soft); }
.df-pick label:has(input:checked) { border-color: var(--dx-state-closed-fg); background: var(--dx-state-closed-bg); }
.df-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--dx-state-closed-fg); }
.df-toast {
position: fixed; left: 50%; bottom: 24px; z-index: 1400;
max-width: calc(100% - 32px); padding: 12px 18px;
transform: translateX(-50%);
background: var(--dx-brand-deep); color: var(--dx-text-on-dark);
border-radius: 12px; box-shadow: 0 10px 24px rgba(7, 31, 51, .25);
font-size: 14px;
}
.df-toast[hidden] { display: none; }
.nav-badge--alert {
display: inline-grid; place-items: center;
min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px;
border-radius: 999px;
background: var(--dx-state-request-mark); color: var(--dx-text-on-dark);
font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
}
.nav-badge--alert[hidden] { display: none; }
@container df (max-width: 820px) {
.df-flow { display: flex; gap: 12px; }
.df-step { flex: 0 0 clamp(150px, 56cqw, 220px); }
}
@container df (max-width: 600px) {
.df-bar > .df-search, .df-bar > label { flex: 1 1 100%; }
.df-bar .df-select { width: 100%; }
.df-fbar { flex-direction: column; align-items: stretch; gap: 0; }
.df-fbar .df-fgroup { flex-wrap: nowrap; width: 100%; min-inline-size: 0; }
.df-fbar .df-fgroup > .df-rail { flex: 1 1 auto; }
.df-fbar > .df-fgroup + .df-fgroup { margin-top: 10px; }
.df-fbar > .df-fgroup--arch { padding-left: 0; margin-top: 10px; }
.df-freq .df-fgroup { padding-left: 0; padding-top: 10px; transform: translateY(-4px); }
.df-freq { grid-template-columns: auto; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1) .08s; }
.df-freq.is-shown { grid-template-columns: auto; grid-template-rows: 1fr; transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1); }
.df-card { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.df-side { justify-content: flex-start; }
.df-facts { white-space: normal; }
.df-panels { margin-top: 3px; }
}
@media (max-width: 620px) {
.df-dr-body { padding: 14px 14px 20px; gap: 12px; }
.df-dr-head { padding: 16px 14px 12px 16px; }
.df-dr-head h3 { font-size: 19px; }
.df-dr-title:not(.is-full) { -webkit-line-clamp: 2; line-clamp: 2; }
.df-dr-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.df-track { padding: 14px 6px 12px; }
.df-track span { font-size: 11px; white-space: nowrap; }
.df-track .df-tl-l { display: none; }
.df-track .df-tl-s { display: block; }
.df-win dl { grid-template-columns: minmax(0, 1fr); }
.df-sec h4 { padding: 12px 14px 8px; }
.df-sec dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 2px 14px 12px; }
.df-sec .df-kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.df-sec .df-kv dt { font-size: 12.5px; }
.df-sec .df-prow {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense;
column-gap: 12px; row-gap: 3px; align-items: center; padding: 10px 14px;
}
.df-sec .df-prow > .df-kind { grid-column: 1; justify-self: start; }
.df-sec .df-prow > .df-pname, .df-sec .df-prow > .df-pst { grid-column: 1; min-width: 0; }
.df-sec .df-prow > :is(a, button, .df-pacts) { grid-column: 2; grid-row: span 3; justify-self: end; }
.df-sec-add { width: 44px; height: 44px; margin: 6px 8px 6px 0; }
.df-sec-add svg { width: 18px; height: 18px; }
.df-icon-btn { width: 44px; min-height: 44px; }
.df-icon-btn svg { width: 18px; height: 18px; }
.df-sec .df-pacts .df-plink { min-height: 44px; }
.df-sec-acts { padding: 10px 14px 12px; }
.df-none { padding: 0 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
.df-card, .df-cnt svg, .df-split-caret svg, .df-freq, .df-freq.is-shown, .df-freq-in,
.df-freq .df-fgroup, .df-freq.is-shown .df-fgroup, .df-flow-desc::before { transition: none; }
.df-rail { scroll-behavior: auto; }
.df-menu, .df-drawer, .df-sec.is-flash, .df-list.is-swapping { animation: none; }
}
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-shortcut,
.main-wrap--with-marketplace-nav .login-nav-accordion .my-marketplace-nav-link.login-nav-shortcut svg { color: var(--dx-interactive); }
.mk-count { margin: 0 0 10px; font-size: 13.5px; color: var(--dx-text-muted); }
.df-archwrap { display: grid; grid-template-rows: 1fr; }
.df-archgrp { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.df-archgrp .df-card { background: var(--dx-surface-band-soft); }
.df-archwrap.is-in { animation: df-arch-in .42s cubic-bezier(.2, .7, .2, 1) both; }
.df-archwrap.is-out { animation: df-arch-out .3s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes df-arch-in { from { grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); } to { grid-template-rows: 1fr; opacity: 1; transform: none; } }
@keyframes df-arch-out { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); } }
.df-divider {
display: flex; align-items: center; gap: 12px; margin: 6px 2px 4px;
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dx-text-faint);
}
.df-divider::before, .df-divider::after { content: ""; flex: 1; height: 1px; background: var(--dx-border); }
.df-divider::before { flex: 0 0 18px; }
@media (prefers-reduced-motion: reduce) {
.df-archwrap.is-in, .df-archwrap.is-out { animation: none; }
}
/* ── css/mobile-menu.css ── */
.login-box-close { display: none; }
.home-themes-more { display: none; }
@media (max-width: 768px) {
body.mnav-on .header-hubs,
body.mnav-on .basket-header-btn { display: none !important; }
body.mnav-pill .hamburger-btn { display: none !important; }
body.mnav-pill .login-box[data-state="logged-in"] .login-box-btn {
width: auto !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 12px 0 5px !important;
gap: 8px;
background: var(--dx-surface-card) !important;
border: 1px solid var(--dx-border) !important;
border-radius: 18px !important;
color: var(--dx-brand) !important;
max-width: 46vw;
}
body.mnav-pill .login-box[data-state="logged-in"] .login-box-icon-wrap {
display: none !important;
}
body.mnav-pill .login-box[data-state="logged-in"] .login-box-avatar {
display: flex !important;
width: 26px; height: 26px; flex: 0 0 26px;
align-items: center; justify-content: center;
border-radius: 50%;
background: var(--dx-brand);
color: var(--dx-text-on-dark);
font-size: .68rem; font-weight: 700; line-height: 1;
}
body.mnav-pill .login-box[data-state="logged-in"] .login-box-label {
position: static !important;
left: auto !important;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .8rem; font-weight: 600;
text-transform: none; letter-spacing: 0;
}
body.mnav-pill .login-box[data-mnav="open"] .login-box-btn {
background: var(--dx-brand) !important;
border-color: var(--dx-brand) !important;
color: var(--dx-text-on-dark) !important;
}
body.mnav-pill .login-box[data-mnav="open"] .login-box-avatar {
background: var(--dx-surface-card); color: var(--dx-brand);
}
body.mnav-pill .login-box[data-mnav="open"] .login-box-burger { display: none; }
body.mnav-pill .login-box[data-mnav="open"] .login-box-close {
display: block; flex-shrink: 0;
}
.mnav-identity {
display: flex; align-items: center; gap: 11px;
padding: 12px 20px;
background: var(--dx-surface-work);
border-bottom: 1px solid var(--dx-surface-work-border);
}
.mnav-identity[hidden] { display: none; }
.mnav-identity-avatar {
width: 36px; height: 36px; flex: 0 0 36px;
border-radius: 18px;
background: var(--dx-brand); color: var(--dx-text-on-dark);
display: flex; align-items: center; justify-content: center;
font-size: .85rem; font-weight: 700; line-height: 1;
}
.mnav-identity-body { flex: 1; min-width: 0; }
.mnav-identity-name {
display: block;
font-family: var(--font-head);
font-size: .95rem; font-weight: 600; color: var(--dx-brand);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mnav-identity-org {
display: block; margin-top: 2px;
font-size: .78rem; color: var(--dx-text-on-work);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mnav-identity-org b { color: var(--dx-brand); font-weight: 700; }
.mnav-identity-name,
.mnav-identity-org-link { text-decoration: none; color: inherit; }
.mnav-identity-name { color: var(--dx-brand); }
.mnav-identity-name:hover,
.mnav-identity-org-link:hover { text-decoration: underline; }
.mnav-logout {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
min-height: 34px;
padding: 0 11px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border);
border-radius: 17px;
font-size: .78rem; font-weight: 600;
color: var(--dx-state-closed-fg); text-decoration: none;
}
.mnav-logout > svg { width: 14px; height: 14px; flex: 0 0 14px; }
.mnav-logo {
height: 15px; width: auto; flex-shrink: 0;
margin-right: 8px;
vertical-align: -2px;
}
[data-nav-group="ecosysteem"] > .mobile-nav-acc-header > span:first-child {
display: inline-flex; align-items: center;
}
.mnav-group .mobile-nav-link { font-weight: 500; }
.mnav-group .mobile-nav-link > svg {
width: 17px; height: 17px; flex: 0 0 17px;
color: var(--dx-brand); opacity: .85;
}
.mnav-group .mobile-nav-link.is-soon {
color: var(--dx-text-muted); opacity: .7; cursor: default;
}
.mnav-group .mobile-nav-link.mnav-home-link { font-weight: 600; }
.mnav-group .mobile-nav-link.mnav-subhead { cursor: default; color: var(--dx-text); }
.mnav-group .mobile-nav-acc-body > .mobile-nav-link:not(.mnav-home-link) { padding-left: 30px; }
.mnav-group .mobile-nav-acc-body > .mobile-nav-link.mnav-subitem {
padding-left: 46px;
font-size: .88rem;
font-weight: 400;
}
.mnav-group .mnav-sub-head {
width: 100%; background: none; border: none; border-bottom: 1px solid var(--gray-light);
padding-left: 30px; text-align: left; cursor: pointer;
font: inherit; font-weight: 500; color: inherit;
}
.mnav-group .mnav-sub-head .mnav-sub-label { flex: 1 1 auto; min-width: 0; }
.mnav-group .mnav-sub-head .nav-chevron { margin-left: auto; flex-shrink: 0; transition: transform .18s ease; opacity: .7; }
.mnav-group .mnav-sub-head[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.mnav-group .mnav-sub-body[hidden] { display: none; }
.mnav-group .mnav-sub-body > .mobile-nav-link.mnav-subitem {
padding-left: 46px; font-size: .88rem; font-weight: 400;
}
.mnav-group .mnav-sub-body > .mobile-nav-link.is-active { color: var(--dx-brand); font-weight: 600; }
.mnav-quick { border-bottom: 1px solid var(--gray-light); }
.mnav-quick .mobile-nav-link { border-bottom: none; }
.mnav-quick .mobile-nav-link > svg {
width: 17px; height: 17px; flex: 0 0 17px; color: var(--dx-brand);
}
.mnav-tools {
display: flex; align-items: center; gap: 10px;
}
body.mnav-on .mnav-tools .basket-header-btn,
body.mnav-on .mnav-tools .header-hubs {
display: flex !important;
position: relative;
}
#mobileNavSettingsSection {
display: flex; align-items: center; gap: 10px;
padding: 12px 20px 14px;
border-top: 1px solid var(--gray-light);
}
#mobileNavSettingsSection > .mobile-nav-section-label { display: none; }
#mobileNavSettingsSection > .lang-pill { margin-left: auto; }
.mobile-search-input:focus-visible,
.mobile-search-go:focus-visible { outline: none; }
.mobile-search-form:has(:focus-visible) {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@supports not (selector(:has(*))) {
.mobile-search-form:focus-within {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
}
body.mnav-on .login-box[data-state="logged-out"] .login-box-btn {
width: auto !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 16px !important;
gap: 8px;
background: var(--dx-brand) !important;
border: 1.5px solid var(--dx-brand) !important;
border-radius: 18px !important;
color: var(--dx-text-on-dark) !important;
}
body.mnav-on .login-box[data-state="logged-out"] .login-box-icon-wrap {
width: auto !important; height: auto !important;
background: none; color: currentColor;
}
body.mnav-on .login-box[data-state="logged-out"] .login-box-label {
position: static !important; left: auto !important;
font-size: .8rem; font-weight: 700;
text-transform: none; letter-spacing: 0; color: currentColor;
}
body.mnav-on .login-box[data-state="logged-out"] .login-box-chevron { display: none !important; }
.mobile-nav-acc-body > .mobile-nav-coming,
.mnav-group .mobile-nav-link.is-soon { display: none; }
.mobile-nav-acc-header--soon { display: none; }
.mobile-nav-section:has(> .mobile-nav-acc-header--soon) { display: none; }
.mobile-nav-acc-body > .mobile-nav-link,
.mobile-nav-acc-body > .mobile-nav-acc-header--link,
.mobile-nav-acc-body > a { padding-left: 16px; }
.mobile-nav-acc-body > .mobile-nav-sublabel { padding-left: 16px; }
.mobile-nav-settings .lang-pill,
#mobileNavSettingsSection .lang-pill {
align-items: center;
padding: 0 6px;
}
#mobileNavSettingsSection .lang-pill .lang-btn {
min-width: 34px;
padding: 0 6px;
text-align: center;
}
#mobileNavSettingsSection .lang-pill .lang-sep {
display: inline-flex; align-items: center;
margin: 0 2px;
line-height: 1;
}
.home-themes[data-themes-collapsed="true"] .home-themes-grid > *:nth-child(n+7) {
display: none;
}
.home-themes[data-themes-collapsed="true"] .home-themes-more {
display: block; width: 100%;
margin: 12px 0 0;
padding: 12px 16px;
background: var(--dx-surface-card);
border: 1px solid var(--dx-border-strong);
border-radius: 22px;
font-family: var(--font-body);
font-size: .85rem; font-weight: 600;
color: var(--dx-brand);
cursor: pointer;
}
.home-themes-more:hover { background: var(--dx-surface-band-soft); }
}
/* ── css/a11y.css ── */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-xs, 3px);
}
[data-a11y-routefocus]:focus:not(:focus-visible) { outline: none; }
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }
.skip-link {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -120%);
z-index: 1000;
padding: 12px 20px;
background: var(--primary);
color: var(--white);
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
text-decoration: none;
border-bottom-left-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
transition: transform .15s ease;
}
.skip-link:focus {
transform: translate(-50%, 0);
outline: 3px solid var(--white);
outline-offset: -6px;
}
.skip-link:hover { text-decoration: underline; }
html {
scroll-padding-top: 84px;
scroll-padding-bottom: 76px;
}
.a11y-live {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.page-main { display: block; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
border-color: var(--border-control);
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--primary);
}
.footer-col-title,
.trust-item-title,
.settings-section-title,
.cookie-banner-title { margin: 0; }
.am-toggle,
.bpol-info,
.ovc-info,
.amdex-copy,
.home-search-info-btn,
.pub-alert-close {
min-width: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── css/a11y-prefs.css ── */
:root[data-a11y-textsize="112"] { font-size: 112.5%; }
:root[data-a11y-textsize="125"] { font-size: 125%; }
:root[data-a11y-textsize="150"] { font-size: 150%; }
:root[data-a11y-spacing="ruim"] body {
line-height: 1.9;
letter-spacing: 0.02em;
word-spacing: 0.08em;
}
:root[data-a11y-spacing="ruim"] p,
:root[data-a11y-spacing="ruim"] li,
:root[data-a11y-spacing="ruim"] .card-description,
:root[data-a11y-spacing="ruim"] .detail-description {
line-height: 1.9;
margin-bottom: 0.7em;
}
:root[data-a11y-focus="sterk"] :focus-visible {
outline: 4px solid var(--primary);
outline-offset: 3px;
box-shadow: 0 0 0 7px var(--white);
}
:root[data-a11y-links="onderstreept"] a:not([class*="btn"]):not([class*="card"]):not([class*="nav"]):not([class*="pill"]):not([class*="chip"]):not(.skip-link) {
text-decoration: underline;
text-underline-offset: 0.18em;
}
:root[data-a11y-motion="minder"] *,
:root[data-a11y-motion="minder"] *::before,
:root[data-a11y-motion="minder"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
:root[data-a11y-calm="1"] body {
background-image: none;
background-color: var(--off-white);
}
:root[data-a11y-calm="1"] .home-hero-orb,
:root[data-a11y-calm="1"] .hero-orb,
:root[data-a11y-calm="1"] .home-hero::before,
:root[data-a11y-calm="1"] .hero::before { display: none !important; }
:root[data-a11y-calm="1"] .home-hero,
:root[data-a11y-calm="1"] .hero {
background-image: none;
background-color: var(--primary-dark);
}
:root[data-a11y-targets="groot"] button,
:root[data-a11y-targets="groot"] .btn,
:root[data-a11y-targets="groot"] a[class*="btn"],
:root[data-a11y-targets="groot"] input[type="checkbox"],
:root[data-a11y-targets="groot"] input[type="radio"] {
min-width: 44px;
min-height: 44px;
}
:root[data-a11y-targets="groot"] input[type="checkbox"],
:root[data-a11y-targets="groot"] input[type="radio"] {
width: 20px;
height: 20px;
}
.a11y-prefs-backdrop {
position: fixed; inset: 0; z-index: 900;
background: rgba(20, 15, 42, .45);
display: flex; align-items: flex-start; justify-content: flex-end;
padding: 18px;
}
.a11y-prefs-panel {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-hov);
width: min(26rem, 100%);
max-height: calc(100vh - 36px);
overflow-y: auto;
padding: 20px 22px 22px;
}
.a11y-prefs-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 2px;
}
.a11y-prefs-head h2 {
font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin: 0;
}
.a11y-prefs-intro { font-size: .87rem; color: var(--gray); margin: 0 0 14px; }
.a11y-prefs-group { border-top: 1px solid var(--gray-light); padding: 12px 0 0; }
.a11y-prefs-label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.a11y-prefs-label small {
display: block; font-weight: 400; color: var(--gray);
font-size: .8rem; margin-top: 1px;
}
.a11y-prefs-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-prefs-opt {
font-family: var(--font-body); font-size: .82rem;
background: var(--gray-pale); color: var(--dark);
border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
padding: 6px 11px; cursor: pointer; min-height: 32px;
}
.a11y-prefs-opt:hover { border-color: var(--border-control); }
.a11y-prefs-opt[aria-pressed="true"] {
background: var(--primary); border-color: var(--primary); color: var(--white);
}
.a11y-prefs-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--gray-light);
}
.a11y-prefs-reset {
font-family: var(--font-body); font-size: .8rem;
background: none; border: 1px solid var(--gray-light);
border-radius: var(--radius-sm); padding: 6px 11px;
color: var(--gray); cursor: pointer; min-height: 32px;
}
.a11y-prefs-close {
font-family: var(--font-body); font-size: .85rem; font-weight: 600;
background: var(--primary); color: var(--white);
border: 0; border-radius: var(--radius-sm); padding: 8px 16px;
cursor: pointer; min-height: 36px;
}
.a11y-prefs-note { font-size: .78rem; color: var(--gray); margin: 12px 0 0; }
@media (max-width: 560px) {
.a11y-prefs-backdrop { align-items: flex-end; justify-content: center; padding: 0; }
.a11y-prefs-panel {
width: 100%; max-height: 88vh;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
}