/* CMS data toolkit shell, on top of design system v0.4.3 (/ds/css/components.css).
   Shared by every tool. Values come only from design system tokens: no raw colors here.
   This file is not in a cascade layer, so it wins over the design system layers on purpose. */

/* Page heading block shared by the landing page and each tool. */
.kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2);
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); }
.page-title { margin: 0 0 var(--space-2); }
.lede { margin: 0 0 var(--space-4); max-width: var(--size-measure); color: var(--muted-foreground); }
.block-title { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--font-weight-semibold); }
.muted { color: var(--muted-foreground); }

/* "Runs in your browser" line: plain text with a lock icon, no tinted block. */
.privacy { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.privacy svg, .privacy .icon { flex: none; width: var(--size-icon-sm); height: var(--size-icon-sm); margin-top: calc((var(--leading-sm) - var(--size-icon-sm)) / 2);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--success); }

/* Header: the brand keeps its text on small screens; the long tool names live in the menu there. */
.app-mark .brand-name { overflow: hidden; text-overflow: ellipsis; }
main:focus { outline: none; }
/* The design system caps p, li and dd at a reading measure. Lists with a class are layout (rows,
   grids), so their items take the full width; plain prose lists keep the measure. */
:where(ul, ol)[class] > li { max-width: none; }

.noscript { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.footer-inner p { margin: 0; max-width: var(--size-measure); }
.app-footer__inner { flex-direction: column; gap: var(--space-1); }
.linkish { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-target-min); padding: 0; border: 0; background: none;
  font: inherit; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.linkish:hover { color: var(--foreground); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Site 404 page (site/404.html): the design system empty state, with room around it. */
/* 404: a state in a dashed frame, top left like every v0.4.2 EmptyState, so nothing lands on a half pixel. */
/* PR 8 review MF2: the 404 box is as wide as its content (one sentence and the actions), centered on the page. */
.not-found { max-width: min(100%, 36rem); margin-inline: auto; margin-block: var(--space-12); padding: var(--space-10) var(--space-6); border: var(--border-hairline) dashed var(--border); border-radius: var(--radius-lg); }
.not-found .state__title { font-size: var(--text-xl); line-height: var(--leading-xl); }
.not-found .state__text { max-width: 52ch; }

/* Whole pixels (Testingralph MF3). A button is as wide as its text, which is rarely a whole number of pixels, so
   buttons in a row round their width up to the next pixel and every edge after them stays sharp. */
.state__actions > .btn, .btn-row > .btn, .more-wrap > .btn { width: calc-size(fit-content, round(up, size, 1px)); }

/* Testingralph PR 9 review (dicom, same shell here): the small screen nav menu is placed by place() in shell.js like
   the other menus, right edge on its trigger's right edge and var(--space-1) below it. */
.nav-popover[popover] { margin: 0; }

/* v0.4.3 long text self-review: a state or count that quotes the search (No datasets match "...") wraps a long unbroken
   query inside its box instead of running off the page. */
.state__title, .state__text, q { overflow-wrap: anywhere; }