/* Keystone Data Pond UI kit.
   Link this one file, put class="kdp" on the root element, then build with the kdp- classes.
   Every value comes from a token in tokens/keystone-data-pond.css.
   A page that needs a value the tokens do not have is a change to the bible, not a local override.
   The rules for each component are in DESIGN.md. */

@import url("tokens/keystone-data-pond.css");

/* ---------- Base ---------- */

.kdp { font-family: var(--kdp-font-display); font-size: var(--kdp-text-body); line-height: 1.5; color: var(--kdp-ink); background: var(--kdp-bg); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
/* The browser's 8 px body margin framed the app bar and made a page 16 px wider than a phone (DUCK-1622). */
body.kdp { margin: 0; }
.kdp *, .kdp *::before, .kdp *::after { box-sizing: border-box; }
/* The link rules wrap a in :where() to keep them as weak as one class.
   Stronger, they would beat every component that is also a link: an <a class="kdp-btn"> lost its text colour. */
.kdp :where(a) { color: var(--kdp-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kdp :where(a):hover { color: var(--kdp-pond-hover); }
.kdp :focus-visible { outline: var(--kdp-focus-ring); outline-offset: 2px; }
.kdp-on-deep { --kdp-focus: var(--kdp-shallows); background: var(--kdp-deep-water); color: var(--kdp-eggshell); }
.kdp-on-deep :where(a), .kdp-on-deep :where(a):hover { color: var(--kdp-shallows); }

/* ---------- Type ---------- */

.kdp-display { font-size: var(--kdp-text-display); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.kdp-h1 { font-size: var(--kdp-text-h1); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.kdp-h2 { font-size: var(--kdp-text-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.kdp-h3 { font-size: var(--kdp-text-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.kdp-h4 { font-size: var(--kdp-text-h4); font-weight: 700; line-height: 1.3; margin: 0; }
.kdp-body { font-size: var(--kdp-text-body); line-height: 1.5; margin: 0; }
.kdp-small { font-size: var(--kdp-text-small); line-height: 1.45; margin: 0; }
.kdp-caption { font-size: var(--kdp-text-caption); line-height: 1.35; margin: 0; }
.kdp-lead { max-width: 52ch; font-size: var(--kdp-text-h4); line-height: 1.5; margin: 0; }
.kdp-eyebrow { font-family: var(--kdp-font-mono); font-size: var(--kdp-text-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kdp-pond); margin: 0; }
/* Pond on Deep Water is below the text minimum, so the eyebrow turns Shallows there.
   The allowed pairs: DESIGN.md section 3.4. */
.kdp-on-deep .kdp-eyebrow { color: var(--kdp-shallows); }
.kdp-muted { color: var(--kdp-ink-2); }
.kdp-mono { font-family: var(--kdp-font-mono); }
.kdp-num { font-family: var(--kdp-font-mono); font-variant-numeric: tabular-nums; }
.kdp-code-inline { font-family: var(--kdp-font-mono); font-size: .875em; background: var(--kdp-eggshell-2); border-radius: var(--kdp-radius-sm); padding: 1px 6px; }
.kdp-kbd { font-family: var(--kdp-font-mono); font-size: 12px; font-weight: 600; border: 1px solid var(--kdp-line-strong); border-bottom-width: 2px; border-radius: var(--kdp-radius-sm); padding: 1px 6px; background: var(--kdp-card); }

/* ---------- Layout ---------- */

.kdp-shell { min-height: 100vh; display: grid; grid-template-rows: var(--kdp-appbar-height) 1fr; }
.kdp-page { width: 100%; max-width: var(--kdp-content-max); margin: 0 auto; padding: 0 var(--kdp-gutter) var(--kdp-space-8); }
.kdp-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kdp-space-4) var(--kdp-space-5); padding: var(--kdp-space-6) 0 var(--kdp-space-5); }
.kdp-pagehead__text { display: grid; gap: var(--kdp-space-2); max-width: 64ch; }
.kdp-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--kdp-space-3); }
/* A stack and a field have one column of minmax(0, 1fr), never the implicit auto column.
   An auto column is as wide as its widest item, so a long kdp-id or kdp-code ran past the card on a phone, and the ID's ellipsis and the code's scroll never started. */
.kdp-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kdp-space-4); }
/* A tight stack holds the parts of one value, such as a provider over its ID in a table cell. */
.kdp-stack--tight { gap: var(--kdp-space-2); }
.kdp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kdp-space-3); }
.kdp-row--between { justify-content: space-between; }
.kdp-row--end { justify-content: flex-end; }

/* ---------- App bar ---------- */

.kdp-appbar { --kdp-focus: var(--kdp-shallows); position: sticky; top: 0; z-index: var(--kdp-z-sticky); display: flex; align-items: center; gap: var(--kdp-space-6); height: var(--kdp-appbar-height); padding: 0 var(--kdp-gutter); background: var(--kdp-deep-water); color: var(--kdp-eggshell); }
.kdp-appbar__logo { display: block; flex: none; }
.kdp-appbar__logo img { display: block; height: 36px; width: auto; }
.kdp-appbar__nav { display: flex; align-items: stretch; gap: var(--kdp-space-5); height: 100%; }
.kdp-appbar__nav a { display: flex; align-items: center; color: var(--kdp-eggshell); text-decoration: none; font-size: var(--kdp-text-small); font-weight: 600; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.kdp-appbar__nav a:hover { color: var(--kdp-rubber-duck); }
.kdp-appbar__nav a[aria-current="page"] { color: var(--kdp-rubber-duck); border-bottom-color: var(--kdp-rubber-duck); }
.kdp-appbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--kdp-space-4); }
.kdp-appbar__context { font-family: var(--kdp-font-mono); font-size: var(--kdp-text-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kdp-shallows); white-space: nowrap; }
.kdp-appbar__user { font-size: var(--kdp-text-small); font-weight: 600; color: var(--kdp-eggshell); white-space: nowrap; }
/* The hover rule repeats Shallows because the base link hover is Pond Hover, which fails on Deep Water. */
.kdp-appbar__link, .kdp-appbar__link:hover { font-size: var(--kdp-text-small); font-weight: 600; color: var(--kdp-shallows); white-space: nowrap; }
/* "Sign out" is a form's button, because it is a POST, so this rule gives the button the look of the link. */
button.kdp-appbar__link { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
/* The account button is the one control of a signed-in page's user area, and opens the kdp-menu after it.
   A row of links there made the bar wider than a phone (DESIGN.md section 5, "App bar and page head"). */
.kdp-appbar__account { display: inline-flex; align-items: center; gap: var(--kdp-space-2); min-height: 40px; padding: 0 var(--kdp-space-3); border: 0; border-radius: var(--kdp-radius-pill); background: none; color: var(--kdp-eggshell); font: 600 var(--kdp-text-small)/1 var(--kdp-font-display); white-space: nowrap; cursor: pointer; }
.kdp-appbar__account:hover, .kdp-appbar__account:has(+ .kdp-menu:popover-open) { background: rgba(156, 203, 255, .14); }

/* ---------- Menu: a list of actions in a popover ---------- */

/* The menu is a native popover, so it needs no script; it is fixed below the app bar, at its right end.
   It sets Pond as its focus colour, because inside the app bar it would take the bar's Shallows ring, which fails on Card. */
.kdp-menu { --kdp-focus: var(--kdp-pond); position: fixed; inset: var(--kdp-appbar-height) var(--kdp-gutter) auto auto; min-width: var(--kdp-menu-min); margin: 0; padding: var(--kdp-space-2); border: 1px solid var(--kdp-line); border-radius: var(--kdp-radius-md); background: var(--kdp-raised); color: var(--kdp-ink); box-shadow: var(--kdp-shadow-1); }
.kdp-menu:popover-open { animation: kdp-rise var(--kdp-dur-2) var(--kdp-ease); }
.kdp-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kdp-menu form { margin: 0; }
.kdp-menu__item { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 var(--kdp-space-3); border: 0; border-radius: var(--kdp-radius-sm); background: none; color: var(--kdp-ink); font: 600 var(--kdp-text-small)/1.2 var(--kdp-font-display); text-align: left; text-decoration: none; cursor: pointer; }
.kdp-menu__item:hover { background: var(--kdp-eggshell-2); color: var(--kdp-ink); }
.kdp-menu__item[aria-current="page"] { background: var(--kdp-pond-tint); }
/* A split starts a group of its own after a line, as "Sign out" is. */
.kdp-menu__split { margin-top: var(--kdp-space-1); padding-top: var(--kdp-space-1); border-top: 1px solid var(--kdp-line); }

/* ---------- Hero: the top of a landing page ---------- */

.kdp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--kdp-space-7); align-items: center; padding: var(--kdp-space-8) 0 var(--kdp-space-7); }
.kdp-hero__text { display: grid; gap: var(--kdp-space-4); justify-items: start; }
.kdp-hero__art { display: flex; justify-content: center; }
.kdp-hero__art img { width: 100%; max-width: 420px; height: auto; }

/* ---------- Side nav ---------- */

.kdp-shell__body { display: grid; grid-template-columns: var(--kdp-sidenav-width) minmax(0, 1fr); }
.kdp-shell__body > .kdp-page { margin: 0; }
/* The side nav carries the popover attribute for the small-screen menu.
   The browser gives a popover its own position, inset, size, margin, border and colour, so this rule sets every one of them;
   leave one out and the side nav moves or vanishes on wide screens. */
.kdp-sidenav { position: sticky; inset: var(--kdp-appbar-height) auto auto; align-self: start; display: flex; flex-direction: column; gap: var(--kdp-space-3); width: auto; height: calc(100vh - var(--kdp-appbar-height)); margin: 0; overflow-y: auto; padding: var(--kdp-space-5) var(--kdp-space-3); border: 0; border-right: 1px solid var(--kdp-line); background: var(--kdp-bg); color: var(--kdp-ink); }
.kdp-sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kdp-sidenav a { display: flex; align-items: center; gap: var(--kdp-space-2); min-height: 40px; padding: 0 var(--kdp-space-3); border-radius: var(--kdp-radius-md); color: var(--kdp-ink); font-size: var(--kdp-text-small); font-weight: 600; text-decoration: none; transition: background-color var(--kdp-dur-1) var(--kdp-ease); }
.kdp-sidenav a:hover { background: var(--kdp-eggshell-2); color: var(--kdp-ink); }
.kdp-sidenav a[aria-current="page"] { background: var(--kdp-pond-tint); font-weight: 600; }
.kdp-sidenav__chevron { margin-left: auto; }
.kdp-sidenav .kdp-count { margin-left: auto; font-family: var(--kdp-font-mono); font-size: var(--kdp-text-caption); font-weight: 400; color: var(--kdp-ink-2); }
.kdp-sidenav__label { padding: 0 var(--kdp-space-3); }
.kdp-sidenav__sub { margin: 2px 0 var(--kdp-space-2) var(--kdp-space-4); padding-left: var(--kdp-space-2); border-left: 2px solid var(--kdp-line); }
.kdp-sidenav__sub a { font-weight: 400; }
.kdp-sidenav__foot { margin: auto 0 0; padding: 0 var(--kdp-space-3); font-size: var(--kdp-text-caption); color: var(--kdp-ink-2); }

/* ---------- Buttons ---------- */

.kdp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kdp-space-2); min-height: 40px; padding: 0 18px; border-radius: var(--kdp-radius-pill); border: 2px solid transparent; font: 600 15px/1 var(--kdp-font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--kdp-dur-1) var(--kdp-ease), border-color var(--kdp-dur-1) var(--kdp-ease), color var(--kdp-dur-1) var(--kdp-ease), transform var(--kdp-dur-1) var(--kdp-ease); }
.kdp-btn:active { transform: translateY(1px); }
.kdp-btn--primary { background: var(--kdp-pond); color: var(--kdp-eggshell); }
.kdp-btn--primary:hover { background: var(--kdp-pond-hover); color: var(--kdp-eggshell); }
.kdp-btn--primary:active { background: var(--kdp-pond-press); }
.kdp-btn--secondary { background: transparent; color: var(--kdp-ink); border-color: var(--kdp-line-strong); }
.kdp-btn--secondary:hover { background: var(--kdp-eggshell-2); color: var(--kdp-ink); border-color: var(--kdp-ink); }
.kdp-btn--ghost { background: transparent; color: var(--kdp-pond); }
.kdp-btn--ghost:hover { background: var(--kdp-pond-tint); color: var(--kdp-pond-hover); }
.kdp-btn--danger { background: var(--kdp-fox); color: var(--kdp-deep-water); }
.kdp-btn--danger:hover { background: var(--kdp-fox-hover); color: var(--kdp-deep-water); }
.kdp-btn--duck { background: var(--kdp-rubber-duck); color: var(--kdp-deep-water); }
.kdp-btn--duck:hover { background: var(--kdp-duck-tint); color: var(--kdp-deep-water); border-color: var(--kdp-rubber-duck); }
.kdp-btn--sm { min-height: 32px; padding: 0 14px; font-size: 14px; }
.kdp-btn--icon { width: 40px; padding: 0; }
.kdp-btn--icon.kdp-btn--sm { width: 32px; }
.kdp-btn[disabled], .kdp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.kdp-btn[aria-busy="true"] { cursor: progress; }
.kdp-btn[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kdp-spin .8s linear infinite; }
.kdp-on-deep .kdp-btn--secondary { color: var(--kdp-eggshell); border-color: var(--kdp-shallows); }
.kdp-on-deep .kdp-btn--secondary:hover { background: rgba(156, 203, 255, .14); color: var(--kdp-eggshell); }

/* ---------- Form fields ---------- */

.kdp-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* A form is one column, no wider than --kdp-form-max, so a line of input stays readable (DESIGN.md section 6.4). */
.kdp-form { max-width: var(--kdp-form-max); }
/* A fieldset groups the choices of one question; the browser's own border, margin and padding would draw a box the bible does not have. */
.kdp-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.kdp-field--inline { min-width: var(--kdp-control-min); }
.kdp-label { font-size: var(--kdp-text-small); font-weight: 600; }
.kdp-label .kdp-optional { font-weight: 400; color: var(--kdp-ink-2); }
.kdp-hint { font-size: var(--kdp-text-small); color: var(--kdp-ink-2); margin: 0; }
.kdp-input, .kdp-select, .kdp-textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--kdp-line-strong); border-radius: var(--kdp-radius-md); background: var(--kdp-card); color: var(--kdp-ink); font: 400 16px/1.4 var(--kdp-font-display); transition: border-color var(--kdp-dur-1) var(--kdp-ease); }
.kdp-input::placeholder, .kdp-textarea::placeholder { color: var(--kdp-ink-3); }
.kdp-input:hover, .kdp-select:hover, .kdp-textarea:hover { border-color: var(--kdp-ink-2); }
.kdp-input:focus-visible, .kdp-select:focus-visible, .kdp-textarea:focus-visible { border-color: var(--kdp-pond); }
.kdp-input[disabled], .kdp-select[disabled], .kdp-textarea[disabled] { background: var(--kdp-eggshell-2); color: var(--kdp-ink-2); cursor: not-allowed; }
.kdp-input--mono { font-family: var(--kdp-font-mono); font-size: 14px; }
.kdp-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230C1C3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.kdp-textarea { min-height: 96px; resize: vertical; }
.kdp-field--error .kdp-input, .kdp-field--error .kdp-select, .kdp-field--error .kdp-textarea { border-color: var(--kdp-fox-ink); }
.kdp-error { display: flex; align-items: baseline; gap: var(--kdp-space-2); margin: 0; font-size: var(--kdp-text-small); font-weight: 600; color: var(--kdp-fox-ink); }
.kdp-error::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kdp-fox); transform: translateY(-1px); }
.kdp-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--kdp-text-body); cursor: pointer; }
.kdp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--kdp-pond); }
.kdp-switch { appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: var(--kdp-radius-pill); background: var(--kdp-line-strong); position: relative; cursor: pointer; transition: background-color var(--kdp-dur-2) var(--kdp-ease); }
.kdp-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--kdp-card); transition: transform var(--kdp-dur-2) var(--kdp-ease); }
.kdp-switch:checked { background: var(--kdp-pond); }
.kdp-switch:checked::before { transform: translateX(16px); }

/* ---------- Status chips ---------- */

.kdp-chip { display: inline-flex; align-items: center; gap: var(--kdp-space-2); min-height: 28px; padding: 0 12px; border-radius: var(--kdp-radius-pill); background: var(--kdp-eggshell-2); color: var(--kdp-deep-water); font: 600 13px/1 var(--kdp-font-display); white-space: nowrap; }
.kdp-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kdp-ink-2); }
.kdp-chip--success { background: var(--kdp-lily-tint); }
.kdp-chip--success::before { background: var(--kdp-lily-ink); }
.kdp-chip--warning { background: var(--kdp-bill-tint); }
.kdp-chip--warning::before { background: var(--kdp-bill); }
.kdp-chip--danger { background: var(--kdp-fox-tint); }
.kdp-chip--danger::before { background: var(--kdp-fox); }
.kdp-chip--info { background: var(--kdp-pond-tint); }
.kdp-chip--info::before { background: var(--kdp-pond); }
.kdp-chip--running { background: var(--kdp-pond-tint); }
.kdp-chip--running::before { background: var(--kdp-pond); animation: kdp-pulse 1.8s var(--kdp-ease-bob) infinite; }
.kdp-chip--solid.kdp-chip--success { background: var(--kdp-lily-pad); }
.kdp-chip--solid.kdp-chip--warning { background: var(--kdp-bill); }
.kdp-chip--solid.kdp-chip--danger { background: var(--kdp-fox); }
.kdp-chip--solid.kdp-chip--info { background: var(--kdp-shallows); }
.kdp-chip--solid::before { background: var(--kdp-deep-water); }

/* ---------- Banners and toasts ---------- */

.kdp-banner { display: flex; align-items: flex-start; gap: var(--kdp-space-3); padding: 14px 16px; border-radius: var(--kdp-radius-md); background: var(--kdp-pond-tint); color: var(--kdp-ink); }
.kdp-banner::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--kdp-pond); }
.kdp-banner__body { flex: 1; display: grid; gap: 2px; }
.kdp-banner__title { font-weight: 700; margin: 0; }
/* The list of a form's errors in its danger banner, each a link to its field (DESIGN.md section 6.4). */
.kdp-banner__list { margin: 0; padding-left: var(--kdp-space-5); font-size: var(--kdp-text-small); }
.kdp-banner--success { background: var(--kdp-lily-tint); }
.kdp-banner--success::before { background: var(--kdp-lily-ink); }
.kdp-banner--warning { background: var(--kdp-bill-tint); }
.kdp-banner--warning::before { background: var(--kdp-bill); }
.kdp-banner--danger { background: var(--kdp-fox-tint); }
.kdp-banner--danger::before { background: var(--kdp-fox); }
.kdp-toast-region { position: fixed; right: var(--kdp-space-5); bottom: var(--kdp-space-5); z-index: var(--kdp-z-toast); display: grid; gap: var(--kdp-space-3); }
.kdp-toast { --kdp-focus: var(--kdp-shallows); display: flex; align-items: center; gap: var(--kdp-space-4); min-width: 320px; max-width: 480px; padding: 14px 16px 14px 20px; border-radius: var(--kdp-radius-md); background: var(--kdp-deep-water); color: var(--kdp-eggshell); box-shadow: var(--kdp-shadow-2); font-size: var(--kdp-text-small); animation: kdp-rise var(--kdp-dur-3) var(--kdp-ease); }
.kdp-toast__text { flex: 1; }
.kdp-toast__action { background: none; border: 0; padding: 4px 8px; border-radius: var(--kdp-radius-sm); color: var(--kdp-shallows); font: 700 14px/1 var(--kdp-font-display); cursor: pointer; }
.kdp-toast__action:hover { background: rgba(156, 203, 255, .14); }

/* ---------- Cards ---------- */

.kdp-card { background: var(--kdp-card); border: 1px solid var(--kdp-line); border-radius: var(--kdp-radius-lg); padding: var(--kdp-space-5); }
.kdp-card--surface { background: var(--kdp-eggshell-2); border-color: transparent; }
.kdp-card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--kdp-dur-1) var(--kdp-ease); }
.kdp-card--link:hover { border-color: var(--kdp-pond); color: inherit; }
.kdp-stat { display: grid; gap: var(--kdp-space-1); }
.kdp-stat__value { font-family: var(--kdp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--kdp-text-h2); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kdp-stat__label { font-size: var(--kdp-text-small); color: var(--kdp-ink-2); }

/* ---------- Tabs ---------- */

.kdp-tabs { display: flex; gap: var(--kdp-space-1); border-bottom: 1px solid var(--kdp-line); overflow-x: auto; }
/* A tab can be a link, because a tab is a view and every view has a URL (DESIGN.md section 6.7), so it has no underline. */
.kdp-tab { flex: none; padding: 12px 16px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--kdp-ink-2); font: 600 15px/1 var(--kdp-font-display); text-decoration: none; cursor: pointer; }
.kdp-tab:hover { color: var(--kdp-ink); }
.kdp-tab[aria-selected="true"] { color: var(--kdp-ink); border-bottom-color: var(--kdp-pond); }
.kdp-tab .kdp-count { margin-left: 6px; font-family: var(--kdp-font-mono); font-size: 12px; color: var(--kdp-ink-2); }

/* ---------- Tables ---------- */

.kdp-table-wrap { overflow-x: auto; background: var(--kdp-card); border: 1px solid var(--kdp-line); border-radius: var(--kdp-radius-lg); }
.kdp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--kdp-text-small); }
.kdp-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 12px 16px; background: var(--kdp-card); border-bottom: 2px solid var(--kdp-deep-water); font: 600 12px/1.2 var(--kdp-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kdp-ink-2); white-space: nowrap; }
.kdp-table td { padding: 12px 16px; border-bottom: 1px solid var(--kdp-line); vertical-align: middle; }
.kdp-table tbody tr:last-child td { border-bottom: 0; }
.kdp-table tbody tr:hover td { background: var(--kdp-eggshell); }
.kdp-table tbody tr[aria-selected="true"] td { background: var(--kdp-pond-tint); }
.kdp-table .kdp-num, .kdp-table th.kdp-num { text-align: right; }
.kdp-table--dense th, .kdp-table--dense td { padding: 8px 12px; }
.kdp-sort { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.kdp-sort[aria-sort="ascending"]::after { content: "\2191"; color: var(--kdp-pond); }
.kdp-sort[aria-sort="descending"]::after { content: "\2193"; color: var(--kdp-pond); }
.kdp-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kdp-space-4); padding: 12px 16px; border-top: 1px solid var(--kdp-line); font-size: var(--kdp-text-small); color: var(--kdp-ink-2); }

/* ---------- IDs and code ---------- */

.kdp-id { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: var(--kdp-radius-sm); background: var(--kdp-eggshell-2); font: 400 13px/1.6 var(--kdp-font-mono); }
.kdp-id__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdp-id__copy { flex: none; border: 0; background: none; padding: 2px 6px; border-radius: 4px; color: var(--kdp-pond); font: 600 12px/1.4 var(--kdp-font-display); cursor: pointer; }
.kdp-id__copy:hover { background: var(--kdp-pond-tint); }
.kdp-code { margin: 0; padding: 16px 20px; border-radius: var(--kdp-radius-md); background: var(--kdp-deep-water); color: var(--kdp-eggshell); font: 400 14px/1.6 var(--kdp-font-mono); overflow-x: auto; white-space: pre; }
.kdp-code .k { color: var(--kdp-shallows); }
.kdp-code .s { color: var(--kdp-rubber-duck); }
.kdp-code .c { color: #9AA5B8; }

/* ---------- Dialog ---------- */

.kdp-dialog { width: min(520px, calc(100vw - 32px)); padding: var(--kdp-space-6); border: 0; border-radius: var(--kdp-radius-lg); background: var(--kdp-card); color: var(--kdp-ink); box-shadow: var(--kdp-shadow-2); }
.kdp-dialog::backdrop { background: rgba(12, 28, 61, .55); }
.kdp-dialog__title { margin: 0 0 var(--kdp-space-3); font-size: var(--kdp-text-h3); font-weight: 700; line-height: 1.25; }
.kdp-dialog__body { display: grid; gap: var(--kdp-space-4); }
.kdp-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kdp-space-3); margin-top: var(--kdp-space-6); }

/* ---------- Empty and loading ---------- */

.kdp-empty { display: grid; justify-items: center; gap: var(--kdp-space-3); padding: var(--kdp-space-8) var(--kdp-space-5); text-align: center; }
.kdp-empty__art { width: 160px; height: auto; margin-bottom: var(--kdp-space-3); }
.kdp-empty .kdp-hint { max-width: 44ch; }
.kdp-paddling { display: inline-flex; align-items: center; gap: var(--kdp-space-3); color: var(--kdp-ink-2); font-weight: 600; }
.kdp-paddling img { width: 56px; height: auto; display: block; }
.kdp-skeleton { display: block; height: 14px; border-radius: var(--kdp-radius-sm); background: linear-gradient(90deg, var(--kdp-eggshell-2) 0%, var(--kdp-line) 50%, var(--kdp-eggshell-2) 100%); background-size: 200% 100%; animation: kdp-shimmer 1.4s linear infinite; }

/* ---------- Icons: Lucide 1.55.0, inline SVG, coloured by currentColor ---------- */

.kdp-icon { flex: none; width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -4px; }
.kdp-icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
.kdp-btn--sm .kdp-icon { width: 16px; height: 16px; }

/* ---------- Visually hidden, for screen-reader-only text ---------- */

.kdp-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; }

/* ---------- Small screens ---------- */

/* The menu button for the side nav shows on small screens only.
   These rules come after the buttons so that they beat kdp-btn--ghost, whose Pond text fails on Deep Water. */
.kdp-appbar__menu { display: none; }
.kdp-appbar__menu, .kdp-appbar__menu:hover { color: var(--kdp-eggshell); }
.kdp-appbar__menu:hover { background: rgba(156, 203, 255, .14); }

/* 640px is --kdp-bp-sm: a custom property cannot be used in a media query.
   Change both together. */
@media (width < 640px) {
  /* An 8 px gap and an icon-only account button fit the bar to a 360 px screen; a wider gap or the label overflows it. */
  .kdp-appbar { gap: var(--kdp-space-2); }
  .kdp-appbar__menu { display: inline-flex; }
  .kdp-appbar__context, .kdp-appbar__user { display: none; }
  .kdp-appbar__account { width: 40px; padding: 0; justify-content: center; }
  .kdp-appbar__account-label, .kdp-appbar__account .kdp-icon--sm { display: none; }
  .kdp-hero { grid-template-columns: 1fr; padding-top: var(--kdp-space-6); }
  .kdp-hero__art { display: none; }
  .kdp-shell__body { grid-template-columns: minmax(0, 1fr); }
  .kdp-sidenav { position: fixed; inset: var(--kdp-appbar-height) auto 0 0; align-self: stretch; width: var(--kdp-sidenav-width); max-width: 100%; height: auto; box-shadow: var(--kdp-shadow-1); }
  .kdp-sidenav:not(:popover-open) { display: none; }
  .kdp-sidenav:popover-open { animation: kdp-slide-in var(--kdp-dur-2) var(--kdp-ease); }
}

/* ---------- Motion ---------- */

@keyframes kdp-spin { to { transform: rotate(360deg); } }
@keyframes kdp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .55; } }
@keyframes kdp-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes kdp-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kdp-slide-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

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