/* DataLink Survey: the shell and the design system components, shared by every style sheet.
   Copied from mockups/_shared/dl-shell.css (the DataLink Survey Design System bundle plus the shell).
   Brand values (colors, font, gradient) come from wwwroot/styles/{name}/style.css, never from here.
   Classes marked NEW are not in the design system yet (mockups/README.md). */
/* Shared tokens: the same for every style sheet */
:root {
  --space-4xs: 6px; --space-3xs: 8px; --space-2xs: 12px; --space-xs: 16px; --space-s: 20px; --space-m: 24px; --space-l: 32px; --space-xl: 48px;
  --radius-pill: 999px; --radius-card: 12px; --radius-sm: 4px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.14);
  --border-control: 2px; --border-rule: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.6); --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.7); color-scheme: dark; }
}
:root[data-theme="dark"] { --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.6); --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.7); color-scheme: dark; }

/* Raleway's default numbers are old-style, so a 0 looks like an o beside capitals ("AUTHo"). Use lining numbers everywhere */
body, button, input, select, textarea { font-variant-numeric: lining-nums; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* NEW: skip link */
.dl-skip { position: absolute; left: var(--space-xs); top: -60px; z-index: 20; background: var(--surface-raised); color: var(--nema-blue); font-weight: 600; padding: var(--space-3xs) var(--space-s); border-radius: var(--radius-pill); box-shadow: var(--shadow-menu); text-decoration: none; }
.dl-skip:focus { top: var(--space-xs); }

/* Button (bundle.css) */
.dl-btn { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4xs); min-height: 40px; padding: var(--space-3xs) var(--space-s); border-radius: var(--radius-pill); border: var(--border-control) solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.dl-btn-primary { color: var(--ink); background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--gradient-brand-45) border-box; }
.dl-btn-primary:hover, .dl-btn-primary:focus-visible { color: var(--on-blue); background: linear-gradient(var(--nema-blue), var(--nema-blue)) padding-box, linear-gradient(var(--nema-blue), var(--nema-blue)) border-box; }
.dl-btn-filled { color: var(--on-blue); background: var(--nema-blue); border-color: var(--nema-blue); }
.dl-btn-filled:hover, .dl-btn-filled:focus-visible { background: var(--nema-blue-deep); border-color: var(--nema-blue-deep); }
.dl-btn-secondary { color: var(--nema-blue); background: var(--surface-raised); border-color: var(--nema-blue); }
.dl-btn-secondary:hover, .dl-btn-secondary:focus-visible { color: var(--on-blue); background: var(--nema-blue); }
.dl-btn-quiet { color: var(--nema-blue); background: transparent; border-color: transparent; }
.dl-btn-quiet:hover, .dl-btn-quiet:focus-visible { background: var(--nema-blue-soft); }
.dl-btn-sm { min-height: 32px; padding: 4px var(--space-xs); font-size: 12px; }
/* A disabled button looks unavailable, with the disabled inputs' tokens (2026-11-10). A button busy with its own run keeps its look. */
.dl-btn:disabled:not([aria-busy="true"]), .dl-btn[aria-disabled="true"]:not([aria-busy="true"]),
.dl-btn:disabled:not([aria-busy="true"]):hover, .dl-btn[aria-disabled="true"]:not([aria-busy="true"]):hover {
  color: var(--ink-muted, #616163); background: var(--surface-sunken, #e6e6e6); border-color: var(--surface-sunken, #e6e6e6); cursor: not-allowed; }

/* NavBar (bundle.css) */
.dl-nav { background: var(--surface-raised); box-shadow: var(--shadow-card); position: relative; z-index: 10; }
.dl-nav::after { content: ""; display: block; height: var(--border-rule); background: var(--gradient-brand-90); }
.dl-nav-inner { display: flex; align-items: center; gap: var(--space-l); min-height: 72px; padding: 0 var(--space-l); max-width: 1440px; margin: 0 auto; }
.dl-brand { display: flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--ink); flex: none; }
.dl-brand-logo { height: 36px; width: auto; display: block; }
.dl-brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.dl-brand-name b { font-weight: 600; font-size: 17px; }
.dl-brand-name small { font-size: 12px; color: var(--ink-muted); }
.dl-nav-links { display: flex; gap: var(--space-4xs); list-style: none; margin: 0; padding: 0; flex: 1; }
.dl-nav-item { position: relative; }
.dl-nav-link { display: inline-flex; align-items: center; gap: var(--space-4xs); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: var(--radius-pill); border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.dl-nav-link:hover { background: var(--nema-blue-soft); }
.dl-nav-link[aria-current="page"], .dl-nav-link.is-current { color: var(--nema-blue); background: var(--nema-blue-soft); }
.dl-chev { width: 14px; height: 14px; transition: transform .15s; }
[aria-expanded="true"] > .dl-chev { transform: rotate(180deg); }
.dl-nav-user { display: flex; align-items: center; gap: var(--space-2xs); font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.dl-nav-user b { color: var(--ink); font-weight: 600; display: block; font-size: 14px; }
.dl-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-menu); padding: var(--space-3xs); list-style: none; margin: 0; z-index: 15; }
.dl-menu[hidden] { display: none; }
.dl-menu a { display: block; padding: 10px var(--space-2xs); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.dl-menu a:hover, .dl-menu a[aria-current="page"] { background: var(--nema-blue-soft); color: var(--nema-blue); }
/* NEW: grouped menu (Manage), right-aligned menu (account) */
.dl-menu.is-grouped { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: var(--space-3xs) var(--space-xs); padding: var(--space-xs); }
.dl-menu.is-grouped[hidden] { display: none; }
.dl-menu-group { list-style: none; margin: 0; padding: 0; }
.dl-menu-head { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3xs) var(--space-2xs) var(--space-4xs); }
.dl-menu.is-right { left: auto; right: 0; }
.dl-menu-sep { height: 1px; background: var(--line); margin: var(--space-3xs) 0; }

/* NEW: account button (page B shows name and company as the account entry point) */
.dl-account { display: flex; align-items: center; gap: var(--space-3xs); text-align: left; border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 13px; line-height: 19px; }
.dl-account:hover, .dl-account[aria-expanded="true"], .dl-account.is-current { background: var(--nema-blue-soft); }
.dl-account b { color: var(--ink); font-weight: 600; display: block; font-size: 14px; }
.dl-account span { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .dl-nav-inner { gap: var(--space-xs); padding: 0 var(--space-xs); }
  .dl-nav-links { gap: var(--space-4xs); }
  .dl-nav-link { padding: 10px; }
  .dl-brand-name small { display: none; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .dl-nav-link { padding: 10px 8px; }
  .dl-account { padding: 6px 8px; }
}

/* NEW: right-hand nav tools: the System gear (admins only) and the account menu */
.dl-nav-tools { display: flex; align-items: center; gap: var(--space-4xs); flex: none; }
.dl-icon-btn { width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); display: grid; place-content: center; cursor: pointer; }
.dl-icon-btn:hover, .dl-icon-btn[aria-expanded="true"] { background: var(--nema-blue-soft); }
.dl-icon-btn.is-current { background: var(--nema-blue-soft); color: var(--nema-blue); }
.dl-icon-btn[hidden], #system-item[hidden] { display: none; }

/* NEW: page tabs, for screens with several sections or views (a survey, Participation). Each tab is a link with its own address */
.dl-tabs { display: flex; flex-wrap: wrap; gap: var(--space-4xs); margin: 0 0 var(--space-m); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.dl-tabs a { display: block; padding: 10px var(--space-xs); margin-bottom: -1px; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.dl-tabs a:hover { color: var(--ink); }
.dl-tabs a[aria-current="page"] { color: var(--nema-blue); border-bottom-color: var(--nema-blue); }
@media (max-width: 899px) { .dl-tabs { flex-wrap: nowrap; overflow-x: auto; } .dl-tabs a { white-space: nowrap; } }


/* NEW: phone navigation (NavBar README: below 900px collapse the links behind a Menu button) */
.dl-nav-toggle { display: none; margin-left: auto; }
.dl-nav-panel { display: none; }
@media (max-width: 899px) {
  .dl-nav-inner { gap: var(--space-xs); padding: 0 var(--space-xs); min-height: 64px; }
  .dl-nav-inner .dl-nav-links, .dl-nav-inner .dl-nav-tools { display: none; }
  .dl-nav-toggle { display: inline-flex; }
  .dl-brand-logo { height: 28px; }
  .dl-nav-panel.is-open { display: block; border-top: 1px solid var(--line); padding: var(--space-3xs) var(--space-xs) var(--space-xs); max-height: calc(100vh - 68px); overflow-y: auto; }
  .dl-nav-panel h2 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-xs) 0 var(--space-4xs); }
  .dl-nav-panel ul { list-style: none; margin: 0; padding: 0; }
  .dl-nav-panel a { display: block; padding: 10px var(--space-2xs); border-radius: 8px; color: var(--ink); text-decoration: none; }
  .dl-nav-panel a[aria-current="page"] { background: var(--nema-blue-soft); color: var(--nema-blue); }
}

/* Page header band (bundle.css) */
.dl-page-head { background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.dl-page-head-inner { max-width: 1440px; margin: 0 auto; padding: var(--space-m) var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
.dl-page-head-text { flex: 1 1 420px; min-width: 0; }
.dl-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.dl-page-title { margin: 0; font-size: 32px; line-height: 38px; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.dl-lead { margin: 4px 0 0; color: var(--ink-muted); max-width: 64ch; }
.dl-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.dl-page-head .dl-actions { margin-left: auto; }
.dl-help-wrap { position: relative; }
.dl-help-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 12; width: min(360px, calc(100vw - 32px)); background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-menu); padding: var(--space-xs) var(--space-s); font-size: 14px; line-height: 21px; }
.dl-help-pop[hidden] { display: none; }
.dl-help-pop h2 { margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
.dl-help-pop ol { margin: 0; padding-left: 18px; }
@media (max-width: 899px) {
  .dl-page-head-inner { padding: var(--space-s) var(--space-xs); }
  .dl-page-title { font-size: 26px; line-height: 32px; }
  .dl-page-head .dl-actions { margin-left: 0; }
  .dl-help-pop { right: auto; left: 0; }
}

/* Status word, used by toasts and the working-as band. Status colors always paired with a word, as tokens require */
.dl-notice-word { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); flex: none; margin-top: 2px; }
.dl-notice-text { flex: 1; min-width: 0; }
.is-success > .dl-notice-word { background: var(--success-soft); color: var(--success); }
.is-warning > .dl-notice-word { background: var(--warning-soft); color: var(--warning); }
.is-danger > .dl-notice-word { background: var(--danger-soft); color: var(--danger); }
.dl-notice-close { flex: none; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-content: center; }
.dl-notice-close:hover { background: var(--surface-sunken); color: var(--ink); }

/* NEW: toast, for every success, warning and error message. Successes fade after 6 seconds; warnings and errors stay until dismissed */
.dl-toast-region { position: fixed; right: var(--space-xs); bottom: var(--space-xs); z-index: 40; display: grid; gap: var(--space-3xs); width: min(380px, calc(100vw - 32px)); }
.dl-toast { display: flex; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-menu); }

/* NEW: "working as" band, shown while an admin acts for a member */
.dl-acting { background: var(--warning-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.dl-acting[hidden] { display: none; }
.dl-acting-inner { max-width: 1440px; margin: 0 auto; padding: var(--space-3xs) var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-xs); font-size: 14px; line-height: 20px; }
.dl-acting-inner .dl-notice-word { background: var(--surface-raised); color: var(--warning); }
@media (max-width: 899px) { .dl-acting-inner { padding: var(--space-3xs) var(--space-xs); } }

/* NEW: dialog, for confirming actions that can't easily be undone and for the time-out warning */
.dl-dialog { border: 0; padding: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-menu); background: var(--surface-raised); color: var(--ink); width: min(480px, calc(100vw - 32px)); }
.dl-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dl-dialog-body { padding: var(--space-m); }
.dl-dialog h2 { margin: 0 0 var(--space-3xs); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.005em; }
.dl-dialog p { margin: 0; color: var(--ink-muted); }
.dl-dialog .dl-actions { justify-content: flex-end; margin-top: var(--space-m); }

/* NEW: info tooltip beside a field label. The text also reaches screen readers through aria-describedby */
.dl-label-row { display: inline-flex; align-items: center; gap: var(--space-4xs); }
.dl-tip { position: relative; display: inline-flex; }
.dl-tip-btn { width: 24px; height: 24px; border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--nema-blue); display: grid; place-content: center; cursor: help; }
.dl-tip-btn:hover, .dl-tip-btn[aria-expanded="true"] { background: var(--nema-blue-soft); }
.dl-tip-text { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; z-index: 20; background: var(--surface-dark); color: var(--on-dark); font-size: 13px; line-height: 19px; padding: var(--space-3xs) var(--space-2xs); border-radius: 8px; box-shadow: var(--shadow-menu); text-transform: none; letter-spacing: 0; font-weight: 400; }
.dl-tip-text[hidden] { display: none; }

/* Content */
.dl-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--space-l) var(--space-xl) 56px; }
@media (max-width: 899px) {
  .dl-main { padding: var(--space-m) var(--space-xs) var(--space-xl); }
}
.dl-panel { background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-m); min-width: 0; }
.dl-panel-title { margin: 0 0 var(--space-xs); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.005em; color: var(--nema-blue); }


/* Footer (bundle.css) */
.dl-footer { background: var(--surface-dark); color: var(--on-dark); position: relative; }
.dl-footer::after { content: ""; display: block; height: var(--border-rule); background: var(--gradient-brand-90); }
.dl-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-l); padding: var(--space-m) var(--space-l); max-width: 1440px; margin: 0 auto; font-size: 13px; line-height: 19px; }
.dl-footer-inner a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.dl-footer-inner a:hover { text-decoration: underline; }
.dl-spacer { flex: 1; }
.dl-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.dl-footer-powered { display: inline-flex; cursor: pointer; }
.dl-footer-powered img { display: block; width: 108px; height: 30px; }
@media (max-width: 899px) { .dl-footer-inner { padding: var(--space-m) var(--space-xs); } }


/* ===== Design system components (project/components/bundle.css) ===== */
/* Panel */
.dl-panel { background: var(--surface-raised, #fff); border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,.08)); padding: var(--space-m, 24px); min-width: 0; }
.dl-panel-title { margin: 0 0 var(--space-xs, 16px); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.005em; color: var(--nema-blue, #0e23c4); text-wrap: balance; }
.dl-panel-title.is-ink { color: var(--ink, #202020); }
.dl-page-title { margin: 0; font-size: 32px; line-height: 38px; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.dl-section-title { margin: 0 0 var(--space-3xs, 8px); font-size: 17px; line-height: 24px; font-weight: 600; }
.dl-muted { color: var(--ink-muted, #616163); }
.dl-small { font-size: 13px; line-height: 19px; }
.dl-panel p { margin: 0 0 var(--space-2xs, 12px); }
.dl-panel p:last-child { margin-bottom: 0; }
.dl-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs, 16px); }
.dl-actions.is-stack { flex-direction: column; }
.dl-actions.is-stack .dl-btn { width: 100%; }
.dl-link { color: var(--nema-blue, #0e23c4); font-weight: 600; text-decoration: none; }
.dl-link:hover { color: var(--nema-blue-deep, #0a1a96); text-decoration: underline; }

/* Field */
.dl-field { display: flex; flex-direction: column; gap: var(--space-4xs, 6px); min-width: 0; }
.dl-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink, #202020); }
.dl-input, .dl-select { font: inherit; font-size: 15px; line-height: 20px; color: var(--ink, #202020); background: var(--surface-raised, #fff); border: var(--border-control, 2px) solid var(--line, #d0d5d2); border-radius: var(--radius-pill, 999px); min-height: 44px; padding: 10px var(--space-s, 20px); width: 100%; box-sizing: border-box; }
.dl-input::placeholder { color: var(--ink-muted, #616163); }
.dl-input:hover, .dl-select:hover { border-color: var(--ink-muted, #616163); }
.dl-input:focus, .dl-select:focus { border-color: var(--nema-blue, #0e23c4); outline: none; }
.dl-input[disabled], .dl-select[disabled] { background: var(--surface-sunken, #e6e6e6); border-color: var(--surface-sunken, #e6e6e6); color: var(--ink-muted, #616163); }
.dl-input.is-invalid { border-color: var(--danger, #b3261e); background: var(--danger-soft, #fde8e6); }
.dl-help { font-size: 13px; line-height: 19px; color: var(--ink-muted, #616163); }
.dl-help.is-error { color: var(--danger, #b3261e); }
.dl-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-s, 20px) center; padding-right: 44px; }
.dl-check { display: inline-flex; align-items: center; gap: var(--space-3xs, 8px); font-size: 15px; cursor: pointer; }
.dl-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--line-strong, #202020); border-radius: var(--radius-sm, 4px); background: var(--surface-raised, #fff); display: grid; place-content: center; cursor: pointer; }
.dl-check input::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--nema-blue, #0e23c4); transform: scale(0); transition: transform .1s; }
.dl-check input:checked { border-color: var(--nema-blue, #0e23c4); }
.dl-check input:checked::before { transform: scale(1); }
.dl-search { position: relative; }
.dl-search .dl-input { padding-right: 52px; }
.dl-search-btn { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px; border: 0; border-radius: var(--radius-pill, 999px); background: var(--nema-blue, #0e23c4); color: var(--on-blue, #fff); display: grid; place-content: center; cursor: pointer; }
.dl-cell-input { font: inherit; font-size: 14px; line-height: 20px; font-variant-numeric: lining-nums tabular-nums; text-align: right; color: var(--ink, #202020); background: var(--warning-soft, #fff2cc); border: 1px solid var(--line, #d0d5d2); border-radius: var(--radius-sm, 4px); padding: 6px 10px; width: 100%; box-sizing: border-box; }
.dl-cell-input.is-filled { background: var(--surface-raised, #fff); }
.dl-cell-input:focus { outline: 2px solid var(--focus-ring, #0e23c4); outline-offset: -1px; background: var(--surface-raised, #fff); }

/* DataGrid */
.dl-grid-wrap { border: 1px solid var(--line, #d0d5d2); border-radius: var(--radius-card, 12px); overflow: hidden; background: var(--surface-raised, #fff); }
.dl-grid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, 16px); padding: var(--space-2xs, 12px) var(--space-xs, 16px); background: var(--surface-sunken, #e6e6e6); font-size: 13px; line-height: 19px; }
.dl-grid-bar .dl-spacer { flex: 1; }
.dl-pager { display: inline-flex; align-items: center; gap: 4px; }
.dl-pager-btn { width: 32px; height: 32px; border-radius: var(--radius-pill, 999px); border: 0; background: transparent; color: var(--ink, #202020); display: grid; place-content: center; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.dl-pager-btn:hover { background: var(--surface-raised, #fff); }
.dl-pager-btn[aria-current="page"] { background: var(--nema-blue, #0e23c4); color: var(--on-blue, #fff); }
.dl-pager-btn[disabled] { color: var(--ink-muted, #616163); cursor: default; }
.dl-grid-scroll { overflow-x: auto; }
.dl-grid { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: lining-nums tabular-nums; }
.dl-grid th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink, #202020); background: var(--surface-sunken, #e6e6e6); padding: 10px var(--space-2xs, 12px); border-bottom: 1px solid var(--line, #d0d5d2); white-space: nowrap; }
.dl-grid td { padding: var(--space-3xs, 8px) var(--space-2xs, 12px); border-bottom: 1px solid var(--line, #d0d5d2); vertical-align: middle; }
.dl-grid tbody tr:last-child td { border-bottom: 0; }
.dl-grid tbody tr:hover td { background: var(--surface-sunken, #e6e6e6); }
.dl-grid tbody tr[aria-selected="true"] td { background: var(--nema-blue-soft, #e7e9fa); }
.dl-grid .is-key { font-weight: 600; }
.dl-grid .is-num { text-align: right; }
.dl-grid .is-muted { color: var(--ink-muted, #616163); }
.dl-grid .dl-link { font-weight: 500; }
.dl-inline-select { font: inherit; font-size: 13px; padding: 4px 28px 4px 12px; min-height: 32px; border-radius: var(--radius-pill, 999px); border: 2px solid var(--line, #d0d5d2); background: var(--surface-raised, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right 10px center; appearance: none; -webkit-appearance: none; color: var(--ink, #202020); }

/* Survey form table */
.dl-form-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.dl-form-table th, .dl-form-table td { border: 1px solid var(--line, #d0d5d2); padding: var(--space-3xs, 8px) var(--space-2xs, 12px); vertical-align: middle; }
.dl-form-table th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-sunken, #e6e6e6); text-align: left; }
.dl-form-table .is-group { background: var(--surface-sunken, #e6e6e6); font-weight: 600; width: 160px; vertical-align: top; }
.dl-form-table .is-key { font-weight: 600; text-align: center; width: 72px; white-space: nowrap; }
.dl-form-table .is-cell { width: 150px; }

/* Badge */
.dl-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-pill, 999px); background: var(--surface-sunken, #e6e6e6); color: var(--ink, #202020); white-space: nowrap; }
.dl-badge-success { background: var(--success-soft, #e6fde6); color: var(--success, #2e8540); }
.dl-badge-warning { background: var(--warning-soft, #fff2cc); color: var(--warning, #8a5a00); }
.dl-badge-danger { background: var(--danger-soft, #fde8e6); color: var(--danger, #b3261e); }
.dl-badge-blue { background: var(--nema-blue-soft, #e7e9fa); color: var(--nema-blue, #0e23c4); }
.dl-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* LinkList */
.dl-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dl-linklist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4xs, 6px) var(--space-2xs, 12px); padding: 10px 0; border-bottom: 1px solid var(--line, #d0d5d2); }
.dl-linklist li:last-child { border-bottom: 0; }
.dl-linklist .dl-link { font-weight: 600; }
.dl-linklist .dl-meta { font-size: 13px; line-height: 19px; color: var(--ink-muted, #616163); margin-left: auto; }
.dl-linklist .dl-ico { width: 18px; height: 18px; color: var(--nema-blue, #0e23c4); align-self: center; }

/* Hexagon motif */
.dl-hex { width: 120px; height: 104px; }
.dl-brand-logo { height: 36px; width: auto; display: block; }

/* Hexagon, vertex at the top, as on makeitelectric.org */
.dl-hex-tile { position: relative; width: 128px; aspect-ratio: 0.866; display: grid; place-content: center; text-align: center; gap: 2px; isolation: isolate; }
.dl-hex-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--gradient-brand-45, linear-gradient(45deg, #0e23c4, #00d4db 33%, #99cd00 67%, #d9de00 100%)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dl-hex-tile::after { content: ""; position: absolute; inset: var(--border-rule, 4px); z-index: -1; background: var(--surface-raised, #fff); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dl-hex-tile .dl-hex-num { font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--nema-blue, #0e23c4); font-variant-numeric: lining-nums tabular-nums; }
.dl-hex-tile .dl-hex-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink, #202020); max-width: 88px; }
.dl-hex-tile.is-warning .dl-hex-num { color: var(--warning, #8a5a00); }
.dl-hex-tile.is-danger .dl-hex-num { color: var(--danger, #b3261e); }
.dl-hex-tile.is-success .dl-hex-num { color: var(--success, #2e8540); }
.dl-hex-badge { display: inline-grid; place-content: center; width: 44px; aspect-ratio: 0.866; background: var(--nema-blue, #0e23c4); color: var(--on-blue, #fff); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; flex: none; }
.dl-hex-badge.is-lg { width: 64px; font-size: 18px; }
.dl-hex-badge.is-dark { background: var(--surface-dark, #202020); color: var(--on-dark, #fff); }
.dl-hex-mark { position: absolute; width: 220px; aspect-ratio: 0.866; opacity: 1; pointer-events: none; }
.dl-hex-mark::before { content: ""; position: absolute; inset: 0; background: var(--gradient-brand-45, linear-gradient(45deg, #0e23c4, #00d4db 33%, #99cd00 67%, #d9de00 100%)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dl-hex-mark::after { content: ""; position: absolute; inset: 6px; background: var(--surface-raised, #fff); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dl-hex-row { display: flex; flex-wrap: wrap; gap: var(--space-xs, 16px); }
.dl-chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs, 8px); }
.dl-chip { font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill, 999px); border: 2px solid var(--line, #d0d5d2); background: var(--surface-raised, #fff); color: var(--ink, #202020); cursor: pointer; }
.dl-chip[aria-pressed="true"] { border-color: var(--nema-blue, #0e23c4); background: var(--nema-blue-soft, #e7e9fa); color: var(--nema-blue, #0e23c4); }
.dl-kv { display: flex; flex-wrap: wrap; gap: var(--space-3xs, 8px) var(--space-l, 32px); }
.dl-kv div { display: flex; flex-direction: column; gap: 2px; }
.dl-kv dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #616163); }
.dl-kv dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.dl-progress { height: 8px; border-radius: var(--radius-pill, 999px); background: var(--surface-sunken, #e6e6e6); overflow: hidden; }
.dl-progress > span { display: block; height: 100%; background: var(--nema-blue, #0e23c4); border-radius: var(--radius-pill, 999px); }
.dl-drawer { background: var(--surface-raised, #fff); border-left: 1px solid var(--line, #d0d5d2); padding: var(--space-m, 24px); display: flex; flex-direction: column; gap: var(--space-xs, 16px); min-width: 0; }

/* ===== Layout patterns for screen mockups (NEW unless noted) ===== */
.dl-stack { display: flex; flex-direction: column; gap: var(--space-m); }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.dl-spacer { flex: 1; }
/* Toolbar above a grid: search, filter chips, actions */
.dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.dl-toolbar .dl-search { flex: 1 1 280px; max-width: 460px; }
/* Grid plus drawer (design system README, Layout). The drawer is 360px; below 1100px it becomes a sheet */
.dl-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-m); align-items: start; }
.dl-split > .dl-drawer { border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); position: sticky; top: var(--space-m); }
.dl-drawer-head { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.dl-drawer-head h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.dl-drawer-section { border-top: 1px solid var(--line); padding-top: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-2xs); }
.dl-drawer-section h3 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
/* NEW: a 560px drawer for long records (MB-001), so dl-form-grid lays fields out in two columns.
   dl-drawer-row puts short sections side by side */
.dl-split.is-wide-drawer { grid-template-columns: minmax(0, 1fr) 560px; }
/* A split whose drawer opens on demand: the grid takes the whole width while the drawer is hidden (RP-006, 2026-11-10). */
.dl-split.is-drawer-on-demand:has(> .dl-drawer[hidden]) { grid-template-columns: minmax(0, 1fr); }
.dl-drawer-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-xs) var(--space-m); }
@media (max-width: 1099px) { .dl-split, .dl-split.is-wide-drawer { grid-template-columns: minmax(0, 1fr); } .dl-split > .dl-drawer { position: static; } }
/* Report layout: one row of controls, then the result */
.dl-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-xs); }
.dl-controls .dl-field { min-width: 180px; }
/* Forms */
.dl-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-xs) var(--space-m); }
.dl-form-grid .is-wide { grid-column: 1 / -1; }
/* Publish a file (FL-002): File and Survey summary beside Details; one column on narrow screens (2026-11-11). */
.fl-publish-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); align-items: start; }
@media (max-width: 999px) { .fl-publish-top { grid-template-columns: minmax(0, 1fr); } }
.fl-summary-fields { margin-top: var(--space-s); }
.dl-textarea { font: inherit; font-size: 15px; line-height: 22px; color: var(--ink); background: var(--surface-raised); border: var(--border-control) solid var(--line); border-radius: var(--radius-card); padding: 10px var(--space-s); width: 100%; min-height: 120px; box-sizing: border-box; resize: vertical; }
.dl-textarea:focus { border-color: var(--nema-blue); outline: none; }
.dl-field-error { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
/* Wizard steps */
.dl-steps { display: flex; flex-wrap: wrap; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.dl-steps li { counter-increment: step; display: flex; align-items: center; gap: var(--space-3xs); padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.dl-steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-content: center; background: var(--surface-raised); font-size: 12px; }
.dl-steps li[aria-current="step"] { background: var(--nema-blue-soft); color: var(--nema-blue); }
.dl-steps li[aria-current="step"]::before { background: var(--nema-blue); color: var(--on-blue); }
.dl-steps li.is-done { color: var(--success); }
/* Upload drop zone */
.dl-dropzone { border: 2px dashed var(--line); border-radius: var(--radius-card); padding: var(--space-l); text-align: center; color: var(--ink-muted); background: var(--surface-raised); }
.dl-dropzone b { color: var(--ink); display: block; font-size: 15px; margin-bottom: 4px; }
/* Empty state and loading placeholders (mockups/README.md rules) */
.dl-empty { padding: var(--space-xl) var(--space-m); text-align: center; color: var(--ink-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.dl-skeleton { display: block; height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken), var(--surface-raised), var(--surface-sunken)); background-size: 200% 100%; animation: dl-shimmer 1.4s infinite; }
@keyframes dl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dl-skeleton { animation: none; } }
.dl-grid td.is-changed { background: var(--warning-soft); box-shadow: inset 3px 0 0 var(--warning); }
.dl-grid td.is-readonly { color: var(--ink-muted); background: var(--surface-sunken); }
.dl-grid .is-check { width: 40px; }
.dl-hex-row.is-compact .dl-hex-tile { width: 100px; }
.dl-hex-row.is-compact .dl-hex-num { font-size: 24px; line-height: 28px; }
.dl-hex-row.is-compact .dl-hex-label { font-size: 10px; line-height: 13px; max-width: 70px; }
/* Smaller still, for counts above a report's grid (RP-004 tolerance tiles, 2026-11-10). */
.dl-hex-row.is-compact.is-small { gap: var(--space-3xs, 8px); }
.dl-hex-row.is-compact.is-small .dl-hex-tile { width: 76px; }
.dl-hex-row.is-compact.is-small .dl-hex-tile::after { inset: 3px; }
.dl-hex-row.is-compact.is-small .dl-hex-num { font-size: 18px; line-height: 22px; }
.dl-hex-row.is-compact.is-small .dl-hex-label { font-size: 9px; line-height: 11px; letter-spacing: 0.02em; max-width: 56px; }
.dl-inline-note { display: flex; gap: var(--space-2xs); align-items: flex-start; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); background: var(--surface-sunken); font-size: 14px; line-height: 21px; }


/* Keep every screen inside the viewport on phones: flex and grid children may shrink, wide grids and tab rows scroll in place */
.dl-main, .dl-stack > *, .dl-split > *, .dl-row > *, .dl-toolbar > *, .dl-controls > *, .dl-form-grid > *, .dl-panel, .dl-drawer, .dl-grid-wrap, nav { min-width: 0; }
.dl-grid-wrap { max-width: 100%; overflow-x: auto; }
.dl-grid-scroll, .dl-tabs { max-width: 100%; }

/* ===== App only: classes the mockups wrote as inline styles, so the Content-Security-Policy can refuse inline styles ===== */
/* a11y-dialog (D5) wraps each dialog in a container with an overlay */
.dl-dialog-container { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; }
.dl-dialog-container[aria-hidden="true"] { display: none; }
.dl-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); }
.dl-dialog-container .dl-dialog { position: relative; z-index: 1; }
.dl-dialog .dl-countdown { margin-top: var(--space-2xs); }
.dl-btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
/* The public pages: landing, refusal and signed-out (SA-001, SA-003) */
.dl-landing-row { align-items: stretch; gap: var(--space-xl); }
.dl-landing-intro { flex: 1 1 420px; padding-top: var(--space-l); }
.dl-landing-side { flex: 0 1 420px; }
.dl-measure { max-width: 600px; }
.dl-stack.is-tight { gap: var(--space-2xs); }
.dl-flush { margin: 0; }
.dl-bullets { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.dl-public-panel { max-width: 720px; }
.dl-public-panel .dl-empty { align-items: flex-start; text-align: left; padding: var(--space-m) 0; }
.dl-out-panel { max-width: 640px; position: relative; overflow: hidden; }
.dl-out-panel .dl-hex-mark { width: 160px; right: -30px; top: -30px; }
.dl-out-panel > .dl-stack { position: relative; gap: var(--space-xs); }
/* The nav bar's own wrappers and the account menu's Sign out button, drawn like the menu's links */
.dl-nav-main { display: contents; }
.dl-menu form { margin: 0; }
.dl-menu-button { display: block; width: 100%; text-align: left; padding: 10px var(--space-2xs); border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 15px; cursor: pointer; white-space: nowrap; }
.dl-menu-button:hover, .dl-menu-button:focus-visible { background: var(--nema-blue-soft); color: var(--nema-blue); }
.dl-menu-button[aria-busy="true"] { cursor: progress; color: var(--ink-muted); background: transparent; }
.dl-nav-panel .dl-menu-button { padding: 10px var(--space-2xs); }
.dl-help-actions { margin-top: 10px; }
.dl-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Home (HM-001): survey cards beside the files panel */
.dl-home { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-m); }
.dl-home-surveys { flex: 999 1 600px; min-width: 0; gap: var(--space-xs); }
.dl-home-files { flex: 1 1 340px; max-width: 460px; gap: var(--space-2xs); }
.dl-home-card { gap: var(--space-3xs); }
.dl-home-card .dl-section-title, .dl-home-card .dl-kv { margin: 0; }
.dl-row-between { justify-content: space-between; }
.dl-tile-link { text-decoration: none; }
.dl-tile-link:not([href]) { cursor: default; }
.dl-w-60 { width: 60%; }
.dl-w-70 { width: 70%; }
.dl-w-75 { width: 75%; }
.dl-w-80 { width: 80%; }
.dl-w-90 { width: 90%; }
.dl-w-80px { width: 80px; }
.dl-skeleton-button { width: 120px; height: 28px; }
/* Forms on one panel: Send feedback (SA-002) and Reset password (SA-001) */
.dl-panel.is-narrow { max-width: 760px; }
.dl-panel.is-narrower { max-width: 720px; }
.dl-kv.is-spaced { margin: 0 0 var(--space-xs); }
/* AG Grid (D4): the legacy Quartz theme driven by the style sheet's tokens, so grids look like the design system's DataGrid */
.ag-theme-quartz {
  --ag-font-family: inherit; --ag-font-size: 14px; --ag-row-height: 44px; --ag-header-height: 40px;
  --ag-foreground-color: var(--ink); --ag-background-color: var(--surface-raised); --ag-header-background-color: var(--surface-sunken);
  --ag-header-foreground-color: var(--ink); --ag-border-color: var(--line); --ag-row-border-color: var(--line);
  --ag-row-hover-color: var(--surface-sunken); --ag-selected-row-background-color: var(--nema-blue-soft);
  --ag-accent-color: var(--nema-blue); --ag-secondary-foreground-color: var(--ink-muted); --ag-border-radius: 8px; --ag-wrapper-border-radius: var(--radius-card);
  --ag-odd-row-background-color: var(--surface-raised); --ag-cell-horizontal-padding: var(--space-2xs);
}
.ag-theme-quartz .ag-header-cell-text { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ag-theme-quartz .ag-cell { font-variant-numeric: lining-nums tabular-nums; }
.ag-theme-quartz .ag-cell.is-num { text-align: right; }
.ag-theme-quartz .ag-cell.is-key { font-weight: 600; }
.ag-theme-quartz .ag-cell.is-muted { color: var(--ink-muted); }
.ag-theme-quartz .ag-row { cursor: default; }
/* Rows that open a drawer or page (DL.grid's onSelect) show a pointer, cells included, since cell text is selectable. */
.ag-theme-quartz.is-clickable .ag-row, .ag-theme-quartz.is-clickable .ag-row .ag-cell { cursor: pointer; }
.ag-theme-quartz .ag-overlay-no-rows-wrapper { pointer-events: auto; }
.ag-theme-quartz .ag-overlay-no-rows-center { padding: 0; }
.ag-theme-quartz .ag-paging-panel { font-size: 13px; color: var(--ink-muted); }
.dl-grid-host { min-height: 160px; }
/* A drawer that opens as a sheet below 1100px (design system, grid plus drawer) */
@media (max-width: 1099px) {
  .dl-split { grid-template-columns: minmax(0, 1fr); }
  .dl-split > .dl-drawer { position: fixed; inset: auto 0 0 0; max-height: 85vh; overflow: auto; z-index: 30; border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: var(--shadow-menu); }
}
.dl-drawer[hidden] { display: none; }
.dl-drawer-head > div { flex: 1; }
.dl-kv.dl-flush { margin: 0; }
.dl-field.is-wide { min-width: 260px; }
.dl-field.is-grow { flex: 3 1 420px; }
.dl-toolbar .dl-spacer { flex: 1; }
.dl-self-start { align-self: flex-start; }
/* Survey period entry (SV-002): the template sheet and the side panel. The sheet is a white page in both themes, as in Excel. */
.sv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-m); align-items: start; }
.sv-rail { position: sticky; top: var(--space-m); gap: var(--space-xs); }
@media (max-width: 1099px) { .sv-layout { grid-template-columns: minmax(0, 1fr); } .sv-rail { position: static; } }
.sv-rail .dl-panel { gap: 8px; }
.sv-rail .dl-section-title { margin: 0; }
.sv-rail .dl-section-title.is-danger { color: var(--danger); }
.sv-entry { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); border-left: 4px solid var(--danger); font-size: 14px; line-height: 20px; cursor: pointer; }
.sv-entry.is-flag { background: var(--warning-soft); border-left-color: #c77700; }
div.sv-entry { cursor: default; }
.sv-entry:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sv-note-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sv-toolbar-text { margin: 0; max-width: 72ch; }
.xl-page { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.3; padding: 24px; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow-x: auto; color-scheme: light; }
.xl { border-collapse: collapse; table-layout: fixed; }
.xl td { border: 0; padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 11pt; }
.xl .xl-blk { background: #000; }
.xl .xl-cell { padding: 1px 3px; position: relative; }
.xl-in { box-sizing: border-box; width: 100%; height: 22px; padding: 0 4px; font: inherit; color: #000; text-align: right; background: #fff; border: 1px solid #a6a6a6; border-radius: 0; font-variant-numeric: tabular-nums; }
.xl-in-text { text-align: left; }
.xl-in-select { appearance: auto; padding: 0 2px; }
.xl-in.is-empty { background: #fff2cc; }
.xl-in:focus { outline: 2px solid #0e23c4; outline-offset: 0; }
.xl-in.is-error { background: #fde8e6; outline: 2px solid #b3261e; outline-offset: 0; }
.xl-in.is-flag, .xl .xl-calc.is-flag, .xl .xl-val.is-flag { outline: 2px solid #c77700; outline-offset: -2px; }
.xl-calc, .xl-val { display: block; padding: 0 2px; }
.xl-bubble { position: absolute; left: 3px; top: calc(100% + 2px); z-index: 5; background: #b3261e; color: #fff; font: 12px/16px Raleway, system-ui, sans-serif; padding: 4px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.xl-bubble[hidden] { display: none; }
.sv-print-head { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); margin-bottom: var(--space-m); }
@media print { .dl-nav, .dl-footer, .dl-page-head .dl-actions, #toast-region, .sv-rail { display: none !important; } .xl-page { box-shadow: none; padding: 0; } body { background: #fff; } }
/* My surveys (SV-001) */
.dl-tabs-nav { margin: 0; }
.dl-grid-note { font-size: 13px; color: var(--ink-muted); }
.dl-drawer .dl-small.dl-flush { margin: 0; }
.dl-dialog .dl-field { margin-top: var(--space-xs); }
.dl-dialog .dl-select, .dl-dialog .dl-input, .dl-dialog .dl-textarea { width: 100%; box-sizing: border-box; }
.dl-dialog.is-wide { width: min(640px, calc(100vw - 32px)); }
.dl-dialog .dl-inline-note { margin-top: var(--space-xs); }
.dl-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; }
.dl-radio input { margin-top: 3px; }

/* SV-011 Data tab: the delete button in the drawer, the wide figures dialogs, and a figure that failed its check. */
.dl-btn.is-danger { color: var(--danger, #b3261e); align-self: flex-start; }
.dl-dialog.is-wide { max-width: 900px; width: calc(100vw - 32px); }
.dl-cell-input.is-invalid { border-color: var(--danger, #b3261e); background: var(--danger-soft, #fde8e6); }
.dl-form-table .dl-help.is-error { display: block; text-align: left; }

/* MB-003 Send email and MB-005 User groups: the picker result lists, the email preview frame, and the Jodit editor (D9) drawn with the design system's tokens. */
.dl-pick-results { max-height: 320px; overflow: auto; }
.dl-pick-results[hidden] { display: none; }
/* Search matches sit in their own sunken box so they don't run into the list below (2026-11-11). */
.dl-pick-results.is-found { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); margin-bottom: var(--space-s); }
.dl-preview-frame { width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color-scheme: light; }
.dl-self-end { align-self: flex-end; }
.dl-controls .dl-link.dl-self-end { padding-bottom: 10px; }
.dl-help.is-error[hidden] { display: none; }
.jodit-container:not(.jodit_inline) { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.jodit-container:not(.jodit_inline):focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.jodit-toolbar__box:not(:empty) { background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.jodit-toolbar-button__button:hover:not([disabled]), .jodit-toolbar-button__trigger:hover:not([disabled]) { background: var(--line); }
.jodit-toolbar-button_source .jodit-toolbar-button__button[aria-pressed="true"], .jodit-toolbar-button__button[aria-pressed="true"] { background: var(--nema-blue); color: #fff; }
.jodit-workplace { background: #fff; color-scheme: light; }
.jodit-wysiwyg { font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #202020; padding: 12px; }
.jodit-wysiwyg table td, .jodit-wysiwyg table th { border: 1px solid #c8c8c8; padding: 4px 8px; }
.jodit-source .ace_editor, .jodit-source__mirror { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* RP-004 to RP-007 check reports: control rows, the settings line, pickers and hidden flex blocks. */
/* .dl-panel p would otherwise zero the top margin. */
.dl-panel .rp-settings { margin: 12px 0 0; }
.rp-row-gap { margin-top: 16px; }
/* A row of option groups (RP-006 Options and Count by): labels line up at the top, and choices stack like checkboxes. */
.rp-controls-top { align-items: flex-start; }
.rp-choice-group { display: flex; flex-direction: column; gap: var(--space-4xs, 6px); }
/* A checkbox with a related link on the same line (RP-006 "Use disclosure groups" and its groups link). */
.rp-check-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-xs); }
.rp-check-link > a[hidden] { display: none; }
/* A range of periods grouped apart from the controls beside it (RP-005 "Compare with" From and To). */
.rp-range { display: flex; flex-direction: column; gap: var(--space-4xs, 6px); padding: var(--space-3xs, 8px) var(--space-xs, 12px) var(--space-xs, 12px); background: var(--nema-blue-soft, #e8ebfb); border-radius: var(--radius-card, 12px); }
.rp-range-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nema-blue, #0e23c4); }
.rp-range-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xs); }
.rp-range-fields .dl-field { flex: 1 1 160px; min-width: 160px; }
/* A range's message, under the whole group: a white strip with a red edge and an alert mark. */
.rp-range-error { display: flex; align-items: center; gap: var(--space-3xs, 8px); padding: 6px var(--space-2xs, 10px); background: var(--surface-raised, #fff); border-left: 3px solid var(--danger, #b3261e); border-radius: var(--radius-sm, 4px); font-size: 13px; line-height: 18px; color: var(--danger, #b3261e); }
.rp-range-error::before { content: "!"; flex: none; display: grid; place-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--danger, #b3261e); color: var(--surface-raised, #fff); font-size: 12px; font-weight: 700; line-height: 1; }
.rp-range-error[hidden] { display: none; }
.rp-pick { position: relative; }
.rp-pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px 0; list-style: none; background: var(--surface-raised, #fff); border: 1px solid var(--line, #d0d5d2); border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-menu, 0 8px 24px rgba(0,0,0,.12)); max-height: 320px; overflow: auto; }
.rp-pick-list[hidden] { display: none; }
.rp-pick-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; font: inherit; text-align: left; padding: 8px 14px; cursor: pointer; color: inherit; }
.rp-pick-item:hover, .rp-pick-item:focus-visible { background: var(--nema-blue-soft, #e7e9fa); }
.rp-pick-item .dl-meta { font-size: 13px; color: var(--ink-muted, #616163); }
.rp-member-row { cursor: pointer; }
.rp-member-row[aria-selected="true"] td { background: var(--nema-blue-soft, #e7e9fa); }
/* User access report (RP-007): Surveys gets twice the width of Roles and Blocked periods; one column on narrow screens. */
.rp-access-grid { grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(180px, 1fr); }
@media (max-width: 899px) { .rp-access-grid { grid-template-columns: 1fr; } }
.rp-note-text { margin: 0; white-space: pre-line; }
.dl-hex-row[hidden], .dl-split[hidden], .dl-panel[hidden], .dl-grid-wrap[hidden], .dl-inline-note[hidden], .dl-form-grid[hidden], .dl-field[hidden], .dl-row[hidden] { display: none; }

/* FL-001 Files and FL-002 Publish a file: the folder path, the user picker, the drop zone and progress bar. */
.dl-folder-path { font-size: 14px; }
.dl-folder-path b { font-weight: 600; }
.dl-folder-link { display: inline-flex; align-items: center; gap: 6px; }
.dl-picker { display: flex; flex-direction: column; gap: var(--space-xs); }
.dl-picker-controls .dl-field { min-width: 240px; flex: 1; }
.dl-picker-results { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); }
.dl-picker-results:empty { display: none; }
.dl-picker-list { max-height: 360px; overflow: auto; }
.dl-picker-list li > span:first-child, .dl-picker-results li > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dl-picker-bar { border-radius: var(--radius-sm); }
.dl-picker .dl-empty { padding: var(--space-m); }
.dl-dropzone.is-over { border-color: var(--nema-blue); background: var(--nema-blue-soft); }
.dl-dropzone-choose { margin-top: 8px; }
.dl-progress-bar { width: 0; }
.dl-dialog .dl-picker { margin: var(--space-xs) 0; }

/* Reports (RP-001 Participation, RP-002 Create extract, RP-003 Survey pivot table): the controls row, the summary row and result tables. */
.dl-field.is-narrow { flex: 0 1 140px; min-width: 120px; }
.dl-field.is-options { min-width: 0; }
.dl-report-text { flex: 1 1 420px; margin: 0; }
.dl-report-note { margin: 12px 0 0; }
.dl-report-summary { align-items: center; gap: var(--space-m); }
.dl-report-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-l); }
.dl-report-cols > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; }
.dl-grid th .dl-grid-sub { display: block; font-weight: 400; color: var(--ink-muted); }
.dl-grid td.is-negative { color: var(--danger, #b3261e); }
.dl-grid td .dl-factor { margin-left: 4px; font-size: 12px; color: var(--ink-muted); }
.dl-grid td.is-mark { font-weight: 600; text-align: center; }
.dl-grid td.is-dash { color: var(--ink-muted); text-align: center; }
.dl-grid td .dl-row { gap: 8px; }
.dl-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
/* A busy button shows a spinner before its label ("Exporting…", "Running…"), 2026-11-10. */
.dl-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dl-spin 0.8s linear infinite; flex: none; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dl-btn[aria-busy="true"]::before { animation-duration: 2.4s; } }

/* System screens (SY-001 to SY-005): the danger banner and editing strip, editable grid cells, change lists in dialogs,
   the two-panel System and license layout, the stack-trace box and the logo preview. */
.dl-danger-banner { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-xs) var(--space-s); border-radius: var(--radius-card); background: var(--danger-soft, #fde8e6); color: var(--ink); border-left: 6px solid var(--danger, #b3261e); }
.dl-danger-banner > svg { flex: none; margin-top: 2px; color: var(--danger, #b3261e); }
.dl-danger-banner-title { color: var(--danger, #b3261e); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
.dl-grid-bar.is-editing { background: var(--danger-soft, #fde8e6); color: var(--danger, #b3261e); }
.dl-inline-note.is-danger { background: var(--danger-soft, #fde8e6); }
.dl-inline-note .dl-bullets { margin: 0; padding-left: 18px; }
.dl-dialog.is-danger { border-top: 6px solid var(--danger, #b3261e); }
.dl-danger-text { color: var(--danger, #b3261e); font-weight: 600; }
.dl-change-list { max-height: 40vh; overflow: auto; }
.ag-theme-quartz .ag-cell.is-changed { background: var(--warning-soft, #fff2cc); box-shadow: inset 3px 0 0 var(--warning, #c77700); }
.ag-theme-quartz .ag-cell.is-readonly { color: var(--ink-muted); background: var(--surface-sunken); }
.ag-theme-quartz .ag-cell.is-invalid { outline: 2px solid var(--danger, #b3261e); outline-offset: -2px; background: var(--danger-soft, #fde8e6); }
.ag-theme-quartz .ag-cell.is-actions { padding: 2px 4px; }
.dl-input.is-invalid, .dl-select.is-invalid, .dl-textarea.is-invalid { border-color: var(--danger, #b3261e); background: var(--danger-soft, #fde8e6); }
.dl-break-all { word-break: break-all; }
.dl-break-word { overflow-wrap: anywhere; }
.dl-textarea.is-code { font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 18px; white-space: pre; overflow: auto; }
.dl-logo-preview { display: block; max-width: 175px; max-height: 60px; width: auto; height: auto; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 4px; }
.dl-dropzone.is-over { border-color: var(--nema-blue); background: var(--nema-blue-soft); }
.dl-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-m); align-items: start; }
.dl-kv.is-column { flex-direction: column; gap: 16px; }
.dl-progress.is-gap { margin: 8px 0 16px; }
.dl-hex-row.is-compact .dl-hex-num.is-date { font-size: 13px; line-height: 16px; }