/* Pico components (Werkbank direction, PICO-141).
   Ported from the step 2 prototype (werkbank/components.css). Every value comes from pico-tokens.css.
   Flat CSS, no nesting, no build step. Every class is prefixed pico- so it never clashes with
   Bootstrap (legacy screens) or the Preside admin. Views do not use these classes directly:
   they render views/ui/*.cfm partials (see docs/ui-conventions.md).
   Sticker id: css-pico-components (depends on css-pico-tokens). */

/* ---------- Reset ---------- */
@layer pico.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ---------- Base ---------- */
@layer pico.base {
  html { color-scheme: light; background: var(--pico-color-bg); scroll-padding-top: 12rem; }
  html[data-theme="dark"] { color-scheme: dark; }
  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] { color-scheme: dark; }
  }
  body {
    font-family: var(--pico-font-ui);
    font-size: var(--pico-text-base);
    line-height: var(--pico-leading-base);
    color: var(--pico-color-text);
    background: var(--pico-color-bg);
    font-feature-settings: var(--pico-font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    font-family: var(--pico-font-heading);
    font-weight: var(--pico-weight-heading);
    line-height: var(--pico-leading-tight);
    letter-spacing: var(--pico-tracking-tight);
  }
  a { color: var(--pico-color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: var(--pico-focus-ring); outline-offset: 2px; }
  code, kbd, samp, pre { font-family: var(--pico-font-mono); font-size: 0.92em; }
  strong { font-weight: var(--pico-weight-semibold); }
  ::selection { background: var(--pico-color-accent-subtle); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  }
}

@layer pico.components {

  /* ---------- Icon ---------- */
  .pico-icon {
    display: inline-block;
    flex: none;
    width: var(--pico-icon-size);
    height: var(--pico-icon-size);
    vertical-align: -0.15em;
    stroke-width: 1.9;
  }
  .pico-icon--sm { --pico-icon-size: 0.875rem; }
  .pico-icon--lg { --pico-icon-size: 1.25rem; }
  .pico-spin { animation: pico-spin 0.9s linear infinite; }

  /* ---------- Mark ---------- */
  .pico-mark { display: inline-flex; align-items: center; gap: var(--pico-space-2); color: var(--pico-color-text); text-decoration: none; font-weight: var(--pico-weight-semibold); }
  .pico-mark__logo { width: 1.5rem; height: 1.5rem; flex: none; color: var(--pico-color-accent); }
  .pico-mark__tile { fill: currentColor; }
  .pico-mark__glyph { fill: none; stroke: var(--pico-color-accent-contrast); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
  .pico-mark__word { font-size: var(--pico-text-lg); letter-spacing: -0.02em; }
  .pico-mark__sub { color: var(--pico-color-text-subtle); font-weight: var(--pico-weight-medium); }

  /* ---------- Button ---------- */
  .pico-btn {
    --_bg: var(--pico-color-surface);
    --_bg-hover: var(--pico-color-bg-subtle);
    --_fg: var(--pico-color-text);
    --_border: var(--pico-color-border-strong);
    --_shadow: var(--pico-shadow-xs);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pico-space-2);
    height: var(--pico-control-height);
    padding: 0 var(--pico-space-3);
    border: 1px solid var(--_border);
    border-radius: var(--pico-radius-md);
    background: var(--_bg);
    color: var(--_fg);
    box-shadow: var(--_shadow);
    font-size: var(--pico-text-base);
    font-weight: var(--pico-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    transition: background-color var(--pico-duration-fast), border-color var(--pico-duration-fast), color var(--pico-duration-fast), box-shadow var(--pico-duration-fast);
  }
  .pico-btn:hover { background: var(--_bg-hover); text-decoration: none; }
  .pico-btn:active { transform: translateY(0.5px); }
  .pico-btn .pico-icon { color: inherit; opacity: 0.85; }
  .pico-btn--primary {
    --_bg: var(--pico-color-accent);
    --_bg-hover: var(--pico-color-accent-hover);
    --_fg: var(--pico-color-accent-contrast);
    --_border: var(--pico-color-accent-active);
    --_shadow: var(--pico-shadow-inset-highlight), var(--pico-shadow-xs);
  }
  .pico-btn--secondary { --_bg: var(--pico-color-surface); }
  .pico-btn--quiet {
    --_bg: transparent;
    --_bg-hover: var(--pico-color-bg-muted);
    --_fg: var(--pico-color-text-muted);
    --_border: transparent;
    --_shadow: none;
  }
  .pico-btn--quiet:hover { color: var(--pico-color-text); }
  .pico-btn--danger {
    --_bg: var(--pico-color-danger-solid);
    --_bg-hover: var(--pico-color-danger-solid-hover);
    --_fg: var(--pico-color-on-solid);
    --_border: var(--pico-color-danger-solid-hover);
    --_shadow: var(--pico-shadow-inset-highlight), var(--pico-shadow-xs);
  }
  .pico-btn--danger-outline {
    --_bg: var(--pico-color-surface);
    --_bg-hover: var(--pico-color-danger-bg);
    --_fg: var(--pico-color-danger);
    --_border: var(--pico-color-danger-border);
  }
  .pico-btn--sm { height: var(--pico-control-height-sm); padding: 0 var(--pico-space-2); font-size: var(--pico-text-sm); gap: var(--pico-space-1); }
  .pico-btn--icon { width: var(--pico-control-height); padding: 0; }
  .pico-btn--icon.pico-btn--sm { width: var(--pico-control-height-sm); }
  .pico-btn--block { width: 100%; }
  .pico-btn[disabled], .pico-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .pico-btn[aria-busy="true"] { opacity: 0.85; cursor: progress; pointer-events: none; }
  .pico-btn.is-copied { --_fg: var(--pico-color-success); }
  .pico-btn--primary.is-copied { --_fg: var(--pico-color-accent-contrast); }
  .pico-btn .pico-kbd { margin-left: var(--pico-space-1); margin-right: calc(-1 * var(--pico-space-1)); }
  .pico-btn--primary .pico-kbd { background: var(--pico-color-on-solid-subtle); border-color: var(--pico-color-on-solid-subtle); color: inherit; box-shadow: none; }

  .pico-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); }

  /* ---------- Keyboard hint ---------- */
  .pico-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border: 1px solid var(--pico-color-border);
    border-radius: var(--pico-radius-sm);
    background: var(--pico-color-surface);
    box-shadow: inset 0 -1px 0 var(--pico-color-border);
    color: var(--pico-color-text-muted);
    font-family: var(--pico-font-ui);
    font-size: var(--pico-text-xs);
    font-weight: var(--pico-weight-medium);
    line-height: 1;
  }

  /* ---------- State pill ---------- */
  .pico-pill {
    --_dot: var(--pico-color-state-archived);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.375rem;
    padding: 0 var(--pico-space-2) 0 0.45rem;
    border: 1px solid var(--pico-color-border);
    border-radius: var(--pico-radius-pill);
    background: var(--pico-color-surface);
    color: var(--pico-color-text);
    font-size: var(--pico-text-sm);
    font-weight: var(--pico-weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  .pico-pill__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--_dot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_dot) 20%, transparent);
    flex: none;
  }
  .pico-pill--live { --_dot: var(--pico-color-state-live); }
  .pico-pill--starting { --_dot: var(--pico-color-state-starting); }
  .pico-pill--starting .pico-pill__dot { animation: pico-pulse 1.4s ease-in-out infinite; }
  .pico-pill--reload { --_dot: var(--pico-color-state-reload); }
  .pico-pill--archived { --_dot: var(--pico-color-state-archived); }
  .pico-pill--failed { --_dot: var(--pico-color-state-failed); }
  .pico-pill--down { --_dot: var(--pico-color-state-down); }

  .pico-dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pico-color-state-archived); }
  .pico-dot--live { background: var(--pico-color-state-live); }
  .pico-dot--starting { background: var(--pico-color-state-starting); }
  .pico-dot--reload { background: var(--pico-color-state-reload); }
  .pico-dot--archived { background: var(--pico-color-state-archived); }
  .pico-dot--failed { background: var(--pico-color-state-failed); }
  .pico-dot--down { background: var(--pico-color-state-down); }

  /* ---------- Tag chip ---------- */
  .pico-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-1); }
  .pico-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border: 1px solid var(--pico-color-border);
    border-radius: var(--pico-radius-sm);
    background: var(--pico-color-bg-subtle);
    color: var(--pico-color-text-muted);
    font-size: var(--pico-text-xs);
    font-weight: var(--pico-weight-medium);
    line-height: 1;
    white-space: nowrap;
  }
  .pico-tag::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 2px; background: var(--pico-color-text-subtle); opacity: 0.55; }

  /* ---------- Badge (pending chips, types, counts) ---------- */
  .pico-badge {
    --_fg: var(--pico-color-text-muted);
    --_bg: var(--pico-color-bg-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: var(--pico-radius-sm);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--pico-text-xs);
    font-weight: var(--pico-weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  .pico-badge--new { --_fg: var(--pico-color-change-new); --_bg: var(--pico-color-change-new-bg); }
  .pico-badge--changed { --_fg: var(--pico-color-change-changed); --_bg: var(--pico-color-change-changed-bg); }
  .pico-badge--removed { --_fg: var(--pico-color-change-removed); --_bg: var(--pico-color-change-removed-bg); }
  .pico-badge--warning { --_fg: var(--pico-color-warning); --_bg: var(--pico-color-warning-bg); }
  .pico-badge--info { --_fg: var(--pico-color-info); --_bg: var(--pico-color-info-bg); }
  .pico-badge--success { --_fg: var(--pico-color-success); --_bg: var(--pico-color-success-bg); }
  .pico-badge--danger { --_fg: var(--pico-color-danger); --_bg: var(--pico-color-danger-bg); }
  .pico-badge--new::before, .pico-badge--changed::before, .pico-badge--removed::before { font-weight: var(--pico-weight-semibold); }
  .pico-badge--new::before { content: "+"; }
  .pico-badge--changed::before { content: "~"; }
  .pico-badge--removed::before { content: "\2212"; }
  .pico-badge--type { --_bg: transparent; border: 1px solid var(--pico-color-border); }
  .pico-badge--removed + .pico-table__link, .is-removed .pico-table__link { text-decoration: line-through; }

  /* ---------- Slug (mono, click to copy) ---------- */
  .pico-slug {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: auto;
    min-height: 1.25rem;
    max-width: 100%;
    padding: 0.125rem 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--pico-radius-sm);
    background: var(--pico-color-bg-muted);
    color: var(--pico-color-text-muted);
    font-family: var(--pico-font-mono);
    font-size: var(--pico-text-xs);
    line-height: 1;
    cursor: copy;
  }
  .pico-slug > span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .pico-slug .pico-icon { --pico-icon-size: 0.75rem; opacity: 0; transition: opacity var(--pico-duration-fast); flex: none; }
  .pico-slug:hover { border-color: var(--pico-color-border-strong); color: var(--pico-color-text); }
  .pico-slug:hover .pico-icon, .pico-slug:focus-visible .pico-icon, .pico-slug.is-copied .pico-icon { opacity: 1; }
  .pico-slug.is-copied { color: var(--pico-color-success); }
  .pico-mono { font-family: var(--pico-font-mono); font-size: 0.92em; }

  /* ---------- Relative time ---------- */
  /* Relative times never break inside ("vor 2 / Std."); the full date and time is in the title. */
  .pico-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pico-time[title] { cursor: help; }
  .pico-time[title]:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

  /* ---------- Metadata line ---------- */
  .pico-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pico-space-1) 0;
    color: var(--pico-color-text-muted);
    font-size: var(--pico-text-sm);
    line-height: var(--pico-leading-snug);
  }
  .pico-meta > li { display: inline-flex; align-items: center; gap: var(--pico-space-1); min-width: 0; max-width: 100%; }
  .pico-meta > li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    margin: 0 var(--pico-space-2);
    border-radius: 50%;
    background: var(--pico-color-border-strong);
  }
  .pico-meta .pico-icon { --pico-icon-size: 0.8125rem; color: var(--pico-color-text-subtle); }
  .pico-meta__label { color: var(--pico-color-text-subtle); }
  .pico-meta strong { color: var(--pico-color-text); font-weight: var(--pico-weight-medium); }

  /* ---------- Breadcrumb ---------- */
  /* One line; long items (project names) shrink and end in an ellipsis, the full text is in their title. */
  .pico-breadcrumb ol { display: flex; align-items: center; gap: var(--pico-space-1); min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--pico-color-text-muted); font-size: var(--pico-text-base); }
  .pico-breadcrumb li { flex: 0 1 auto; min-width: 0; margin: -2px; padding: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pico-breadcrumb li + li::before { content: "/"; color: var(--pico-color-border-strong); margin-right: var(--pico-space-1); }
  .pico-breadcrumb a { color: inherit; text-decoration: none; border-radius: var(--pico-radius-sm); }
  .pico-breadcrumb a:hover { color: var(--pico-color-text); text-decoration: underline; }
  .pico-breadcrumb [aria-current="page"] { color: var(--pico-color-text); font-weight: var(--pico-weight-medium); }

  /* ---------- Tabs (navigation) ---------- */
  .pico-tabs { display: flex; align-items: stretch; gap: var(--pico-space-1); overflow-x: auto; scrollbar-width: none; }
  .pico-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.375rem;
    padding: 0 var(--pico-space-3);
    color: var(--pico-color-text-muted);
    font-weight: var(--pico-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--pico-radius-md) var(--pico-radius-md) 0 0;
  }
  .pico-tabs__tab .pico-icon { color: var(--pico-color-text-subtle); }
  .pico-tabs__tab:hover { color: var(--pico-color-text); text-decoration: none; }
  .pico-tabs__tab:hover::after { content: ""; position: absolute; left: var(--pico-space-3); right: var(--pico-space-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--pico-color-border-strong); }
  .pico-tabs__tab[aria-current="page"] { color: var(--pico-color-text); }
  .pico-tabs__tab[aria-current="page"] .pico-icon { color: var(--pico-color-accent-text); }
  .pico-tabs__tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--pico-space-3); right: var(--pico-space-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--pico-color-accent); }
  .pico-tabs__tab[aria-disabled="true"] { color: var(--pico-color-text-subtle); cursor: not-allowed; }
  .pico-tabs__tab[aria-disabled="true"]:hover::after { content: none; }
  .pico-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: var(--pico-radius-pill);
    background: var(--pico-color-warning-bg);
    color: var(--pico-color-warning);
    box-shadow: inset 0 0 0 1px var(--pico-color-warning-border);
    font-size: var(--pico-text-xs);
    font-weight: var(--pico-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .pico-tabs__key { display: none; }

  /* ---------- Page header ---------- */
  .pico-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pico-space-4); margin-bottom: var(--pico-space-5); }
  .pico-page-header__title { font-size: var(--pico-text-xl); }
  .pico-page-header__lead { margin-top: var(--pico-space-1); color: var(--pico-color-text-muted); }
  .pico-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--pico-space-2); }

  /* ---------- Section ---------- */
  .pico-section + .pico-section { margin-top: var(--pico-space-6); }
  .pico-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pico-space-3); margin-bottom: var(--pico-space-3); }
  .pico-section__title { font-size: var(--pico-text-lg); }
  .pico-section__title--sm { font-size: var(--pico-text-base); }
  .pico-section__desc { margin-top: 2px; color: var(--pico-color-text-muted); max-width: 70ch; }
  .pico-section__actions { display: flex; flex-wrap: wrap; gap: var(--pico-space-2); }
  .pico-section--boxed { padding: var(--pico-space-4); border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }

  /* ---------- Flash ---------- */
  .pico-flash-region { display: grid; gap: var(--pico-space-2); }
  .pico-flash-region:empty { display: none; }
  .pico-flash {
    --_fg: var(--pico-color-info);
    --_bg: var(--pico-color-info-bg);
    --_border: var(--pico-color-info-border);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--pico-space-2) var(--pico-space-3);
    padding: var(--pico-space-2) var(--pico-space-2) var(--pico-space-2) var(--pico-space-3);
    border: 1px solid var(--_border);
    border-radius: var(--pico-radius-md);
    background: var(--_bg);
    color: var(--pico-color-text);
    animation: pico-flash-in var(--pico-duration-base) var(--pico-ease);
  }
  .pico-flash--success { --_fg: var(--pico-color-success); --_bg: var(--pico-color-success-bg); --_border: var(--pico-color-success-border); }
  .pico-flash--warning { --_fg: var(--pico-color-warning); --_bg: var(--pico-color-warning-bg); --_border: var(--pico-color-warning-border); }
  .pico-flash--error { --_fg: var(--pico-color-danger); --_bg: var(--pico-color-danger-bg); --_border: var(--pico-color-danger-border); }
  .pico-flash__icon { margin-top: 0.42rem; color: var(--_fg); }
  .pico-flash__text { min-width: 0; padding: 0.32rem 0; overflow-wrap: anywhere; }
  .pico-flash__text strong { font-weight: var(--pico-weight-semibold); }
  .pico-flash__close { --_fg: var(--pico-color-text-muted); }
  .pico-flash.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--pico-duration-base), transform var(--pico-duration-base); }

  /* ---------- Banner (persistent state, one action) ---------- */
  .pico-banner {
    --_fg: var(--pico-color-warning);
    --_bg: var(--pico-color-warning-bg);
    --_border: var(--pico-color-warning-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pico-space-2) var(--pico-space-3);
    padding: var(--pico-space-2) var(--pico-gutter);
    border-bottom: 1px solid var(--_border);
    background: var(--_bg);
    color: var(--pico-color-text);
    min-height: 2.75rem;
  }
  .pico-banner--warning { --_fg: var(--pico-color-warning); --_bg: var(--pico-color-warning-bg); --_border: var(--pico-color-warning-border); }
  .pico-banner--neutral { --_fg: var(--pico-color-text-muted); --_bg: var(--pico-color-bg-subtle); --_border: var(--pico-color-border); }
  .pico-banner--danger { --_fg: var(--pico-color-danger); --_bg: var(--pico-color-danger-bg); --_border: var(--pico-color-danger-border); }
  .pico-banner--info { --_fg: var(--pico-color-info); --_bg: var(--pico-color-info-bg); --_border: var(--pico-color-info-border); }
  .pico-banner--success { --_fg: var(--pico-color-success); --_bg: var(--pico-color-success-bg); --_border: var(--pico-color-success-border); }
  .pico-banner--inline { padding: var(--pico-space-3) var(--pico-space-4); border: 1px solid var(--_border); border-radius: var(--pico-radius-lg); }
  .pico-banner__icon { color: var(--_fg); }
  .pico-banner__body { flex: 1 1 22rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--pico-space-2); }
  .pico-banner--inline .pico-banner__body { display: block; }
  .pico-banner__title { font-weight: var(--pico-weight-semibold); }
  .pico-banner__text { color: var(--pico-color-text-muted); }
  .pico-banner__actions { display: flex; gap: var(--pico-space-2); margin-left: auto; }
  .pico-banner.is-waiting .pico-banner__body, .pico-banner.is-waiting .pico-banner__actions, .pico-banner.is-waiting > .pico-banner__icon { display: none; }
  .pico-banner.is-leaving { animation: pico-collapse var(--pico-duration-base) var(--pico-ease) forwards; overflow: hidden; }

  /* ---------- Wait status ---------- */
  .pico-wait { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2) var(--pico-space-3); color: var(--pico-color-text); }
  .pico-wait__text { font-weight: var(--pico-weight-medium); }
  .pico-wait__step { color: var(--pico-color-text-muted); }
  .pico-wait .pico-bar { flex: 0 1 12rem; }
  .pico-wait.is-done { color: var(--pico-color-success); }

  /* ---------- Progress bar ---------- */
  .pico-bar {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: var(--pico-radius-pill);
    background: var(--pico-color-bg-muted);
    color: var(--pico-color-accent);
    overflow: hidden;
  }
  .pico-bar::-webkit-progress-bar { background: var(--pico-color-bg-muted); border-radius: var(--pico-radius-pill); }
  .pico-bar::-webkit-progress-value { background: var(--pico-color-accent); border-radius: var(--pico-radius-pill); transition: width 0.3s linear; }
  .pico-bar::-moz-progress-bar { background: var(--pico-color-accent); border-radius: var(--pico-radius-pill); }
  .pico-bar--muted::-webkit-progress-value { background: var(--pico-color-text-subtle); }
  .pico-bar--muted::-moz-progress-bar { background: var(--pico-color-text-subtle); }
  .pico-banner .pico-bar { background: color-mix(in srgb, var(--_fg) 16%, transparent); }
  .pico-banner .pico-bar::-webkit-progress-bar { background: color-mix(in srgb, var(--_fg) 16%, transparent); }
  .pico-banner .pico-bar::-webkit-progress-value { background: var(--_fg); }
  .pico-banner .pico-bar::-moz-progress-bar { background: var(--_fg); }

  /* ---------- Overflow menu (details) ---------- */
  .pico-menu { position: relative; display: inline-block; }
  .pico-menu > summary { list-style: none; }
  .pico-menu > summary::-webkit-details-marker { display: none; }
  .pico-menu[open] > summary { background: var(--pico-color-bg-muted); color: var(--pico-color-text); }
  .pico-menu__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--pico-z-menu);
    min-width: 14rem;
    padding: var(--pico-space-1);
    border: 1px solid var(--pico-color-border);
    border-radius: var(--pico-radius-lg);
    background: var(--pico-color-surface-raised);
    box-shadow: var(--pico-shadow-md);
    animation: pico-pop-in var(--pico-duration-fast) var(--pico-ease);
  }
  .pico-menu--start .pico-menu__panel { left: 0; right: auto; }
  .pico-menu--up .pico-menu__panel { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; }
  .pico-menu__item {
    display: flex;
    align-items: center;
    gap: var(--pico-space-2);
    width: 100%;
    min-height: 2rem;
    padding: 0 var(--pico-space-2);
    border: 0;
    border-radius: var(--pico-radius-md);
    background: transparent;
    color: var(--pico-color-text);
    font-size: var(--pico-text-base);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
  }
  .pico-menu__item:hover, .pico-menu__item:focus-visible { background: var(--pico-color-bg-muted); text-decoration: none; }
  .pico-menu__item:focus-visible { outline-offset: -2px; }
  .pico-menu__item .pico-icon { color: var(--pico-color-text-subtle); }
  .pico-menu__item[aria-current="true"], .pico-menu__item[aria-pressed="true"] { font-weight: var(--pico-weight-medium); }
  .pico-menu__item--danger, .pico-menu__item--danger .pico-icon { color: var(--pico-color-danger); }
  .pico-menu__hint { margin-left: auto; padding-left: var(--pico-space-4); color: var(--pico-color-text-subtle); font-size: var(--pico-text-xs); }
  .pico-menu__sep { height: 1px; margin: var(--pico-space-1) calc(-1 * var(--pico-space-1)); background: var(--pico-color-border-subtle); }
  .pico-menu__label { padding: var(--pico-space-2) var(--pico-space-2) var(--pico-space-1); color: var(--pico-color-text-subtle); font-size: var(--pico-text-xs); font-weight: var(--pico-weight-medium); }
  .pico-menu__check { display: flex; align-items: center; gap: var(--pico-space-2); min-height: 2rem; padding: 0 var(--pico-space-2); border-radius: var(--pico-radius-md); cursor: pointer; }
  .pico-menu__check:hover { background: var(--pico-color-bg-muted); }
  .pico-menu__check input { accent-color: var(--pico-color-accent); margin: 0; }
  .pico-menu__head { padding: var(--pico-space-2); }
  .pico-menu__head strong { display: block; font-weight: var(--pico-weight-semibold); }
  .pico-menu__head span { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }

  /* ---------- Segmented control ---------- */
  .pico-segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--pico-radius-md); background: var(--pico-color-bg-muted); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pico-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: calc(var(--pico-control-height) - 4px);
    padding: 0 var(--pico-space-3);
    border: 0;
    border-radius: calc(var(--pico-radius-md) - 2px);
    background: transparent;
    color: var(--pico-color-text-muted);
    font-size: var(--pico-text-base);
    font-weight: var(--pico-weight-medium);
    white-space: nowrap;
    text-decoration: none;
  }
  .pico-segmented__item:hover { color: var(--pico-color-text); text-decoration: none; }
  .pico-segmented__item[aria-pressed="true"], .pico-segmented__item[aria-current="true"] { background: var(--pico-color-surface); color: var(--pico-color-text); box-shadow: var(--pico-shadow-sm); }
  .pico-segmented__count { color: var(--pico-color-text-subtle); font-variant-numeric: tabular-nums; font-size: var(--pico-text-xs); }
  .pico-segmented--sm .pico-segmented__item { height: 1.5rem; padding: 0 var(--pico-space-2); font-size: var(--pico-text-sm); }

  /* ---------- Toolbar ---------- */
  .pico-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); margin-bottom: var(--pico-space-3); }
  .pico-toolbar__spacer { flex: 1; }
  .pico-toolbar__result { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }

  /* ---------- Search ---------- */
  .pico-search { position: relative; flex: 0 1 18rem; min-width: 12rem; }
  .pico-search > .pico-icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--pico-color-text-subtle); pointer-events: none; }
  .pico-search .pico-input { padding-left: 2rem; padding-right: 2rem; }
  .pico-search .pico-kbd { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .pico-search .pico-input:focus ~ .pico-kbd, .pico-search .pico-input:not(:placeholder-shown) ~ .pico-kbd { display: none; }

  /* ---------- Card ---------- */
  .pico-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); min-height: 2.75rem; padding: var(--pico-space-2) var(--pico-space-4); border-bottom: 1px solid var(--pico-color-border-subtle); }
  .pico-card__title { min-width: 0; font-size: var(--pico-text-base); font-weight: var(--pico-weight-semibold); }
  .pico-card__title .pico-icon { color: var(--pico-color-text-subtle); margin-right: var(--pico-space-1); }
  .pico-card__head > :last-child:not(:first-child) { margin-left: auto; }
  .pico-card__end { margin-left: auto; }
  .pico-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-1); color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-card__body { flex: 1; padding: var(--pico-space-4); }
  .pico-card__body > * + * { margin-top: var(--pico-space-3); }
  .pico-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); padding: var(--pico-space-3) var(--pico-space-4); border-top: 1px solid var(--pico-color-border-subtle); color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-card__value { font-size: var(--pico-text-2xl); font-weight: var(--pico-weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .pico-card__value small { font-size: var(--pico-text-base); font-weight: var(--pico-weight-medium); color: var(--pico-color-text-muted); letter-spacing: 0; }
  .pico-card__text { color: var(--pico-color-text-muted); }
  .pico-card--link { transition: border-color var(--pico-duration-fast), box-shadow var(--pico-duration-fast); }
  .pico-card--link:hover { border-color: var(--pico-color-border-strong); box-shadow: var(--pico-shadow-sm); }
  .pico-card__link { color: inherit; text-decoration: none; }
  .pico-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .pico-card__link:focus-visible { outline: none; }
  .pico-card__link:focus-visible::after { outline: var(--pico-focus-ring); outline-offset: 2px; }
  .pico-card .pico-menu, .pico-card .pico-btn, .pico-card .pico-slug { position: relative; z-index: 1; }

  /* ---------- Key-value list ---------- */
  .pico-kv { display: grid; }
  /* Label and value side by side; in narrow cards the value moves below its label instead of breaking per letter. */
  .pico-kv__row { display: flex; flex-wrap: wrap; gap: 0 var(--pico-space-4); padding: var(--pico-space-2) 0; border-bottom: 1px solid var(--pico-color-border-subtle); }
  .pico-kv__row:last-child { border-bottom: 0; }
  .pico-kv dt { flex: 0 0 9rem; max-width: 100%; color: var(--pico-color-text-muted); }
  .pico-kv dd { flex: 1 1 11rem; min-width: 0; overflow-wrap: anywhere; }

  /* ---------- Mini list (top objects etc.) ---------- */
  .pico-minilist { display: grid; gap: var(--pico-space-2); }
  .pico-minilist__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--pico-space-3); align-items: center; }
  .pico-minilist__item .pico-bar { grid-column: 1 / -1; height: 4px; }
  .pico-minilist__value { font-variant-numeric: tabular-nums; color: var(--pico-color-text-muted); }

  /* ---------- Data table ---------- */
  .pico-table-wrap { container-type: inline-size; border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--pico-radius-lg); }
  .pico-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--pico-radius-lg); }
  @media (max-width: 960px) { .pico-table-wrap { overflow-x: auto; } }
  .pico-table { width: 100%; font-size: var(--pico-text-base); }
  .pico-table th {
    height: 2rem;
    padding: 0 var(--pico-space-3);
    border-bottom: 1px solid var(--pico-color-border);
    background: var(--pico-color-bg-subtle);
    color: var(--pico-color-text-muted);
    font-size: var(--pico-text-sm);
    font-weight: var(--pico-weight-medium);
    text-align: left;
    white-space: nowrap;
  }
  .pico-table thead th:first-child { border-top-left-radius: var(--pico-radius-lg); }
  .pico-table thead th:last-child { border-top-right-radius: var(--pico-radius-lg); }
  .pico-table td { height: var(--pico-row-height); padding: var(--pico-space-1) var(--pico-space-3); border-bottom: 1px solid var(--pico-color-border-subtle); vertical-align: middle; }
  .pico-table tbody tr:last-child td { border-bottom: 0; }
  .pico-table tbody tr { position: relative; transition: background-color var(--pico-duration-fast); }
  .pico-table--hover tbody tr:hover { background: var(--pico-color-bg-subtle); }
  .pico-table--relaxed td { padding-top: var(--pico-space-2); padding-bottom: var(--pico-space-2); }
  .pico-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
  .pico-table__muted { color: var(--pico-color-text-muted); }
  .pico-table__link { color: var(--pico-color-text); font-weight: var(--pico-weight-medium); text-decoration: none; }
  .pico-table__link:hover { text-decoration: underline; }
  .pico-table__link--row::after { content: ""; position: absolute; inset: 0; }
  .pico-table__link--row:focus-visible { outline: none; }
  .pico-table__link--row:focus-visible::after { outline: var(--pico-focus-ring); outline-offset: -2px; border-radius: var(--pico-radius-md); }
  .pico-table__sub { display: block; margin-top: 1px; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-table__stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-1) var(--pico-space-2); min-width: 0; }
  /* Project names in tables: one line with an ellipsis, full name in the title attribute.
     A one-line clamp instead of nowrap keeps the column shrinkable (the table never outgrows its box);
     the cap relative to the table (cqi) stops one long name from taking all the space. */
  .pico-table__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    flex: 0 1 auto;
    min-width: 0;
    max-width: max(12rem, 40cqi);
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .pico-table__actions { width: 1%; text-align: right; white-space: nowrap; }
  /* The name column gets at least a third of the table before other columns take the rest. */
  .pico-table__col-name { width: 34%; }
  .pico-table__actions > * { position: relative; z-index: 1; vertical-align: middle; }
  .pico-table__actions > * + * { margin-left: var(--pico-space-1); }
  .pico-table--reveal-actions tbody tr:not(:hover):not(:focus-within) .pico-table__actions > :not(.pico-menu[open]) { opacity: 0; }
  @media (hover: none) { .pico-table--reveal-actions tbody tr .pico-table__actions > * { opacity: 1 !important; } }
  .pico-table__sort { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
  .pico-table__sort .pico-icon { --pico-icon-size: 0.75rem; opacity: 0.4; }
  .pico-table th[aria-sort] .pico-table__sort { color: var(--pico-color-text); }
  .pico-table th[aria-sort] .pico-icon { opacity: 1; }
  .pico-table tr.is-highlight { animation: pico-highlight 3s var(--pico-ease); }
  .pico-table tr.is-removed td { color: var(--pico-color-text-subtle); }
  .is-removed .pico-table__name,
  .is-removed .pico-badge--type { text-decoration: line-through; }
  .pico-table__check { color: var(--pico-color-text); }
  .pico-table__none { color: var(--pico-color-text-subtle); }
  .pico-table__empty td { height: auto; padding: var(--pico-space-6) var(--pico-space-4); text-align: center; color: var(--pico-color-text-muted); }
  .pico-table-foot { margin-top: var(--pico-space-3); }
  .pico-table__show-sm { display: none; }
  @media (max-width: 1279px) { .pico-table__hide-lg { display: none; } }
  /* Secondary columns give way when the table itself gets narrow (the wrap is a size container),
     e.g. the objects table in the schema split view next to the rail. */
  @container (max-width: 600px) { .pico-table__hide-narrow { display: none; } }
  @container (max-width: 440px) { .pico-table__hide-narrower { display: none; } }
  /* Row-menu items that stand in for hidden row buttons on narrow tables (menu items are flex rows). */
  .pico-table__show-md { display: none; }
  @media (max-width: 960px) {
    .pico-table__hide-md { display: none; }
    .pico-table__show-md { display: flex; }
  }
  @media (max-width: 640px) {
    .pico-table__hide-sm { display: none; }
    .pico-table__show-sm { display: block; }
  }

  /* ---------- Empty state ---------- */
  .pico-empty { display: flex; flex-direction: column; align-items: center; gap: var(--pico-space-2); padding: var(--pico-space-8) var(--pico-space-5); text-align: center; }
  .pico-empty__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--pico-space-2); border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-bg-subtle); color: var(--pico-color-text-muted); box-shadow: var(--pico-shadow-xs); }
  .pico-empty__icon .pico-icon { --pico-icon-size: 1.25rem; }
  .pico-empty__title { font-size: var(--pico-text-lg); }
  .pico-empty__text { max-width: 44ch; color: var(--pico-color-text-muted); }
  .pico-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pico-space-2); margin-top: var(--pico-space-3); }
  .pico-empty--compact { padding: var(--pico-space-5); }

  /* ---------- Danger zone ---------- */
  .pico-danger-zone { border: 1px solid var(--pico-color-danger-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-danger-zone__title { padding: var(--pico-space-2) var(--pico-space-4); border-bottom: 1px solid var(--pico-color-danger-border); color: var(--pico-color-danger); font-size: var(--pico-text-base); font-weight: var(--pico-weight-semibold); }
  .pico-danger-zone__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pico-space-3) var(--pico-space-5); padding: var(--pico-space-4); }
  .pico-danger-zone__item + .pico-danger-zone__item { border-top: 1px solid var(--pico-color-border-subtle); }
  .pico-danger-zone__text { flex: 1 1 20rem; }
  .pico-danger-zone__text strong { display: block; }
  .pico-danger-zone__text p { color: var(--pico-color-text-muted); }

  /* ---------- Setting row (one sentence, one action) ---------- */
  .pico-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pico-space-3) var(--pico-space-5); padding: var(--pico-space-4); border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-setting__text { flex: 1 1 18rem; }
  .pico-setting__text strong { display: block; }
  .pico-setting__text p { color: var(--pico-color-text-muted); }

  /* ---------- Pipeline indicator ---------- */
  /* Steps keep their labels readable and wrap to a second row when the pane is narrow. */
  .pico-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-3) 0; }
  .pico-pipeline__step { display: flex; align-items: center; gap: var(--pico-space-2); flex: 1 0 auto; min-width: 0; }
  .pico-pipeline__step:last-child { flex: 0 0 auto; }
  .pico-pipeline__step:not(:last-child)::after { content: ""; flex: 1; min-width: var(--pico-space-4); height: 1px; margin: 0 var(--pico-space-3); background: var(--pico-color-border-strong); }
  .pico-pipeline__step.is-done:not(:last-child)::after { background: var(--pico-color-state-live); }
  .pico-pipeline__marker {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.5px solid var(--pico-color-border-strong);
    border-radius: 50%;
    background: var(--pico-color-surface);
    color: var(--pico-color-text-muted);
    font-size: var(--pico-text-xs);
    font-weight: var(--pico-weight-semibold);
  }
  .pico-pipeline__marker .pico-icon { --pico-icon-size: 0.8rem; stroke-width: 2.6; }
  .pico-pipeline__text { display: flex; flex-direction: column; min-width: 0; line-height: var(--pico-leading-snug); }
  .pico-pipeline__label { font-weight: var(--pico-weight-medium); white-space: nowrap; }
  .pico-pipeline__status { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); white-space: nowrap; }
  .pico-pipeline__desc { display: none; }
  .pico-pipeline__step.is-done .pico-pipeline__marker { border-color: var(--pico-color-state-live); background: var(--pico-color-state-live); color: var(--pico-color-on-solid); }
  .pico-pipeline__step.is-current .pico-pipeline__marker { border-color: var(--pico-color-accent); background: var(--pico-color-accent); color: var(--pico-color-accent-contrast); box-shadow: 0 0 0 3px var(--pico-color-accent-subtle); }
  .pico-pipeline__step.is-attention .pico-pipeline__marker { border-color: var(--pico-color-state-reload); background: var(--pico-color-warning-bg); color: var(--pico-color-warning); }
  .pico-pipeline__step.is-attention .pico-pipeline__status { color: var(--pico-color-warning); font-weight: var(--pico-weight-medium); }

  /* ---------- Activity timeline ---------- */
  .pico-timeline { display: grid; }
  .pico-timeline__item { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--pico-space-3); padding: var(--pico-space-2) 0; }
  .pico-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: calc(0.875rem - 0.5px); top: 2.25rem; bottom: -0.5rem; width: 1px; background: var(--pico-color-border); }
  .pico-timeline__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--pico-color-border); border-radius: 50%; background: var(--pico-color-surface); color: var(--pico-color-text-muted); }
  .pico-timeline__icon .pico-icon { --pico-icon-size: 0.875rem; }
  .pico-timeline__icon--success { color: var(--pico-color-success); border-color: var(--pico-color-success-border); background: var(--pico-color-success-bg); }
  .pico-timeline__icon--accent { color: var(--pico-color-accent-text); border-color: var(--pico-color-info-border); background: var(--pico-color-accent-subtle); }
  .pico-timeline__icon--warning { color: var(--pico-color-warning); border-color: var(--pico-color-warning-border); background: var(--pico-color-warning-bg); }
  .pico-timeline__body { min-width: 0; padding-top: 0.2rem; }
  .pico-timeline__title { font-weight: var(--pico-weight-medium); }
  .pico-timeline__detail { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-timeline__time { padding-top: 0.25rem; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); white-space: nowrap; }
  .pico-timeline__group { padding: var(--pico-space-3) 0 var(--pico-space-1); color: var(--pico-color-text-subtle); font-size: var(--pico-text-xs); font-weight: var(--pico-weight-medium); }

  /* ---------- Change list (Apply plan) ---------- */
  .pico-changes { display: grid; }
  .pico-changes__item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: start; gap: var(--pico-space-2) var(--pico-space-3); padding: var(--pico-space-2) 0; border-bottom: 1px solid var(--pico-color-border-subtle); }
  .pico-changes__item:last-child { border-bottom: 0; }
  .pico-changes__item > .pico-badge { justify-self: start; margin-top: 1px; }
  .pico-changes__note { display: flex; align-items: center; gap: var(--pico-space-1); margin-top: 2px; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-changes__item--safe .pico-changes__note { color: var(--pico-color-text-muted); }
  .pico-changes__item--destructive .pico-changes__note { color: var(--pico-color-danger); font-weight: var(--pico-weight-medium); }
  .pico-changes__path { color: var(--pico-color-text-muted); }

  /* ---------- Code block ---------- */
  .pico-code { border: 1px solid var(--pico-color-code-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-code-bg); color: var(--pico-color-code-text); overflow: hidden; }
  .pico-code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pico-space-2); padding: var(--pico-space-1) var(--pico-space-1) var(--pico-space-1) var(--pico-space-3); border-bottom: 1px solid var(--pico-color-code-rule); color: var(--pico-color-code-muted); font-size: var(--pico-text-sm); }
  .pico-code__label { display: inline-flex; align-items: center; gap: var(--pico-space-2); font-family: var(--pico-font-mono); }
  .pico-code__pre { margin: 0; padding: var(--pico-space-3) var(--pico-space-4); overflow-x: auto; font-family: var(--pico-font-mono); font-size: 0.8125rem; line-height: 1.65; white-space: pre; tab-size: 2; }
  .pico-code__pre code { font-size: inherit; }
  .pico-code__secret { color: var(--pico-color-code-secret); }
  .pico-code .pico-btn { --_bg: transparent; --_bg-hover: var(--pico-color-code-rule); --_fg: var(--pico-color-code-muted); --_border: transparent; --_shadow: none; }
  .pico-code .pico-btn:hover { color: var(--pico-color-code-text); }
  .pico-code .pico-btn.is-copied { --_fg: var(--pico-color-code-success); }
  .pico-code__hint { margin-top: var(--pico-space-2); color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-code__hint code { padding: 0 0.25rem; border-radius: var(--pico-radius-sm); background: var(--pico-color-bg-muted); }

  /* ---------- Code tabs ---------- */
  .pico-codetabs__list { display: flex; flex-wrap: wrap; gap: var(--pico-space-1); margin-bottom: var(--pico-space-3); border-bottom: 1px solid var(--pico-color-border); }
  .pico-codetabs__tab { position: relative; height: 2.125rem; padding: 0 var(--pico-space-3); border: 0; background: none; color: var(--pico-color-text-muted); font-weight: var(--pico-weight-medium); }
  .pico-codetabs__tab:hover { color: var(--pico-color-text); }
  .pico-codetabs__tab[aria-selected="true"] { color: var(--pico-color-text); }
  .pico-codetabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--pico-space-3); right: var(--pico-space-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--pico-color-accent); }
  .pico-codetabs__panel + .pico-codetabs__panel { margin-top: var(--pico-space-4); }
  .pico-codetabs.is-ready .pico-codetabs__panel + .pico-codetabs__panel { margin-top: 0; }
  .pico-codetabs__panel > * + * { margin-top: var(--pico-space-3); }

  /* ---------- Secret field ---------- */
  .pico-secret { display: grid; gap: var(--pico-space-2); }
  .pico-secret__row { display: flex; flex-wrap: wrap; gap: var(--pico-space-2); }
  .pico-secret__row .pico-input { flex: 1 1 18rem; font-family: var(--pico-font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; background: var(--pico-color-bg-subtle); }
  .pico-secret.is-revealed .pico-input { background: var(--pico-color-surface); }

  /* ---------- Forms ---------- */
  .pico-form { display: grid; gap: var(--pico-space-5); max-width: var(--pico-form-max); }
  .pico-form--wide { max-width: none; }
  .pico-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pico-space-4); }
  .pico-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); }
  .pico-form__note { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-form__actions .pico-form__note { margin-left: auto; }
  /* Conditional fields (object menu, field type). :not(:has()) so a browser without :has()
     still shows every field. The control id is the field name from ui/field. */
  .pico-form:not(:has(#show_in_main_menu:checked)) .pico-field[data-show-when="show_in_main_menu=1"],
  .pico-drawer__form:not(:has(#show_in_main_menu:checked)) .pico-field[data-show-when="show_in_main_menu=1"] { display: none; }
  .pico-form:not(:has(#field_type option[value="string"]:checked)) .pico-field[data-show-when="type=string"],
  .pico-drawer__form:not(:has(#field_type option[value="string"]:checked)) .pico-field[data-show-when="type=string"] { display: none; }
  .pico-form:not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)) .pico-form__row[data-show-when="type=integer,numeric"],
  .pico-drawer__form:not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)) .pico-form__row[data-show-when="type=integer,numeric"] { display: none; }
  .pico-form:not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=enum"],
  .pico-drawer__form:not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=enum"] { display: none; }
  .pico-form:not(:has(#field_type option[value="many_to_one"]:checked)):not(:has(#field_type option[value="many_to_many"]:checked)) .pico-field[data-show-when="type=many_to_one,many_to_many"],
  .pico-drawer__form:not(:has(#field_type option[value="many_to_one"]:checked)):not(:has(#field_type option[value="many_to_many"]:checked)) .pico-field[data-show-when="type=many_to_one,many_to_many"] { display: none; }
  .pico-form:not(:has(#field_type option[value="boolean"]:checked)) .pico-field[data-show-when="type=boolean"],
  .pico-drawer__form:not(:has(#field_type option[value="boolean"]:checked)) .pico-field[data-show-when="type=boolean"] { display: none; }
  .pico-form:not(:has(#field_type option[value="text"]:checked)) .pico-field[data-show-when="type=text"],
  .pico-drawer__form:not(:has(#field_type option[value="text"]:checked)) .pico-field[data-show-when="type=text"] { display: none; }
  .pico-form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="text"]:checked)):not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=string,text,enum"],
  .pico-drawer__form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="text"]:checked)):not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=string,text,enum"] { display: none; }
  .pico-form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)):not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=string,integer,numeric,enum"],
  .pico-drawer__form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)):not(:has(#field_type option[value="enum"]:checked)) .pico-field[data-show-when="type=string,integer,numeric,enum"] { display: none; }
  .pico-form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)):not(:has(#field_type option[value="date"]:checked)):not(:has(#field_type option[value="datetime"]:checked)):not(:has(#field_type option[value="enum"]:checked)):not(:has(#field_type option[value="many_to_one"]:checked)):not(:has(#field_type option[value="boolean"]:checked)) .pico-field[data-show-when="type=string,integer,numeric,date,datetime,enum,many_to_one,boolean"],
  .pico-drawer__form:not(:has(#field_type option[value="string"]:checked)):not(:has(#field_type option[value="integer"]:checked)):not(:has(#field_type option[value="numeric"]:checked)):not(:has(#field_type option[value="date"]:checked)):not(:has(#field_type option[value="datetime"]:checked)):not(:has(#field_type option[value="enum"]:checked)):not(:has(#field_type option[value="many_to_one"]:checked)):not(:has(#field_type option[value="boolean"]:checked)) .pico-field[data-show-when="type=string,integer,numeric,date,datetime,enum,many_to_one,boolean"] { display: none; }
  .pico-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
  .pico-field__label { order: 0; font-weight: var(--pico-weight-medium); color: var(--pico-color-text); }
  .pico-field__optional { margin-left: var(--pico-space-1); color: var(--pico-color-text-subtle); font-size: var(--pico-text-sm); font-weight: var(--pico-weight-regular); }
  .pico-field > .pico-input, .pico-field > .pico-select, .pico-field > .pico-textarea, .pico-field > .pico-input-group, .pico-field > .pico-filedrop, .pico-field > .pico-choices { order: 1; }
  .pico-field__error { order: 2; display: flex; align-items: flex-start; gap: var(--pico-space-1); color: var(--pico-color-danger); font-size: var(--pico-text-sm); font-weight: var(--pico-weight-medium); }
  .pico-field__error .pico-icon { margin-top: 0.1rem; --pico-icon-size: 0.875rem; }
  .pico-field__hint { order: 3; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  /* Hint and live character counter ("12 / 60") share one row under the input. */
  .pico-field__foot { order: 3; display: flex; align-items: baseline; justify-content: space-between; gap: var(--pico-space-1) var(--pico-space-3); min-width: 0; }
  .pico-field__foot > .pico-field__hint { order: 0; flex: 1 1 auto; min-width: 0; }
  .pico-field__counter { flex: none; margin-left: auto; color: var(--pico-color-text-subtle); font-size: var(--pico-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pico-field__counter.is-near { color: var(--pico-color-text-muted); }
  .pico-field__counter.is-limit { color: var(--pico-color-warning); font-weight: var(--pico-weight-medium); }
  .pico-field__counter.is-over { color: var(--pico-color-danger); font-weight: var(--pico-weight-semibold); }
  .pico-field__limit { order: 2; display: flex; align-items: flex-start; gap: var(--pico-space-1); color: var(--pico-color-warning); font-size: var(--pico-text-sm); font-weight: var(--pico-weight-medium); }
  .pico-field__limit .pico-icon { margin-top: 0.1rem; --pico-icon-size: 0.875rem; }
  .pico-field__hint code, .pico-check__hint code { font-size: 0.95em; }

  .pico-input, .pico-select, .pico-textarea {
    width: 100%;
    height: var(--pico-control-height);
    padding: 0 0.625rem;
    border: 1px solid var(--pico-color-border-strong);
    border-radius: var(--pico-radius-md);
    background: var(--pico-color-surface);
    color: var(--pico-color-text);
    box-shadow: var(--pico-shadow-xs);
    font-size: var(--pico-text-base);
    transition: border-color var(--pico-duration-fast), box-shadow var(--pico-duration-fast);
  }
  .pico-input::placeholder, .pico-textarea::placeholder { color: var(--pico-color-text-subtle); }
  .pico-input:hover, .pico-select:hover, .pico-textarea:hover { border-color: var(--pico-color-text-subtle); }
  .pico-input:focus, .pico-select:focus, .pico-textarea:focus { outline: none; border-color: var(--pico-color-focus); box-shadow: var(--pico-focus-shadow); }
  .pico-input[readonly] { background: var(--pico-color-bg-subtle); color: var(--pico-color-text-muted); }
  .pico-input--mono { font-family: var(--pico-font-mono); font-size: 0.8125rem; }
  .pico-input--sm { max-width: 10rem; }
  .pico-textarea { height: auto; min-height: 5.5rem; padding: 0.45rem 0.625rem; line-height: var(--pico-leading-base); resize: vertical; }
  .pico-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--pico-color-text-muted) 50%), linear-gradient(135deg, var(--pico-color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .pico-select--inline { width: auto; }
  .pico-field.is-invalid .pico-input, .pico-field.is-invalid .pico-select, .pico-field.is-invalid .pico-textarea { border-color: var(--pico-color-danger); }
  .pico-field.is-invalid .pico-input:focus, .pico-field.is-invalid .pico-select:focus { box-shadow: 0 0 0 3px var(--pico-color-danger-bg); }

  .pico-input-group { display: flex; align-items: stretch; min-width: 0; max-width: 100%; }
  .pico-input-group__prefix { display: inline-flex; align-items: center; min-width: 0; max-width: 45%; padding: 0 0.625rem; border: 1px solid var(--pico-color-border-strong); border-right: 0; border-radius: var(--pico-radius-md) 0 0 var(--pico-radius-md); background: var(--pico-color-bg-subtle); color: var(--pico-color-text-muted); font-family: var(--pico-font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
  .pico-input-group .pico-input { min-width: 0; flex: 1 1 auto; border-radius: 0 var(--pico-radius-md) var(--pico-radius-md) 0; }

  .pico-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--pico-space-2); align-items: start; cursor: pointer; }
  .pico-check input { width: 1rem; height: 1rem; margin: 0.15rem 0 0; accent-color: var(--pico-color-accent); }
  .pico-check__text { font-weight: var(--pico-weight-medium); }
  .pico-check__hint { grid-column: 2; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-checks { display: grid; gap: var(--pico-space-3); }

  .pico-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--pico-space-3); align-items: start; cursor: pointer; }
  .pico-toggle input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 2rem;
    height: 1.125rem;
    margin: 0.1rem 0 0;
    border-radius: var(--pico-radius-pill);
    background: var(--pico-color-border-strong);
    transition: background-color var(--pico-duration-fast);
    cursor: pointer;
  }
  .pico-toggle input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--pico-color-on-solid); box-shadow: var(--pico-shadow-sm); transition: transform var(--pico-duration-fast) var(--pico-ease); }
  .pico-toggle input:checked { background: var(--pico-color-accent); }
  .pico-toggle input:checked::before { transform: translateX(0.875rem); }
  .pico-toggle__text { font-weight: var(--pico-weight-medium); }
  .pico-toggle__hint { grid-column: 2; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }

  .pico-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--pico-space-2); }
  .pico-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--pico-space-2); padding: var(--pico-space-3); border: 1px solid var(--pico-color-border-strong); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); cursor: pointer; transition: border-color var(--pico-duration-fast), background-color var(--pico-duration-fast); }
  .pico-choice:hover { border-color: var(--pico-color-text-subtle); }
  .pico-choice input { margin: 0.15rem 0 0; accent-color: var(--pico-color-accent); }
  .pico-choice:has(input:checked) { border-color: var(--pico-color-accent); background: var(--pico-color-accent-subtle); box-shadow: inset 0 0 0 1px var(--pico-color-accent); }
  .pico-choice:has(input:focus-visible) { outline: var(--pico-focus-ring); outline-offset: 2px; }
  .pico-choice__title { font-weight: var(--pico-weight-medium); }
  .pico-choice__text { grid-column: 2; color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }

  .pico-fieldset { display: grid; gap: var(--pico-space-4); }
  .pico-fieldset__legend { margin-bottom: var(--pico-space-3); font-weight: var(--pico-weight-semibold); }

  .pico-disclosure { border-top: 1px solid var(--pico-color-border); }
  .pico-disclosure > summary { display: flex; align-items: center; gap: var(--pico-space-2); padding: var(--pico-space-3) 0; list-style: none; font-weight: var(--pico-weight-medium); }
  .pico-disclosure > summary::-webkit-details-marker { display: none; }
  .pico-disclosure > summary .pico-icon { color: var(--pico-color-text-subtle); transition: transform var(--pico-duration-fast); }
  .pico-disclosure[open] > summary .pico-icon:first-child { transform: rotate(90deg); }
  .pico-disclosure__hint { color: var(--pico-color-text-muted); font-weight: var(--pico-weight-regular); font-size: var(--pico-text-sm); }
  .pico-disclosure__body { display: grid; gap: var(--pico-space-4); padding: var(--pico-space-1) 0 var(--pico-space-4); }
  .pico-disclosure--card { border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-disclosure--card > summary { padding: var(--pico-space-3) var(--pico-space-4); }
  .pico-disclosure--card > .pico-disclosure__body { padding: 0 var(--pico-space-4) var(--pico-space-4); }

  .pico-error-summary { padding: var(--pico-space-3) var(--pico-space-4); border: 1px solid var(--pico-color-danger-border); border-left: 3px solid var(--pico-color-danger); border-radius: var(--pico-radius-md); background: var(--pico-color-danger-bg); }
  .pico-error-summary:focus { outline: none; }
  .pico-error-summary:focus-visible { outline: var(--pico-focus-ring); }
  .pico-error-summary__title { display: flex; align-items: center; gap: var(--pico-space-2); color: var(--pico-color-danger); font-size: var(--pico-text-base); }
  .pico-error-summary__text { flex: 1; }
  .pico-error-summary__list { margin-top: var(--pico-space-1); padding-left: 1.5rem; list-style: none; }
  .pico-error-summary__list a { color: var(--pico-color-danger); font-weight: var(--pico-weight-medium); }

  .pico-filedrop { position: relative; display: grid; justify-items: center; gap: var(--pico-space-1); padding: var(--pico-space-5); border: 1.5px dashed var(--pico-color-border-strong); border-radius: var(--pico-radius-lg); background: var(--pico-color-bg-subtle); text-align: center; cursor: pointer; transition: border-color var(--pico-duration-fast), background-color var(--pico-duration-fast); }
  .pico-filedrop:hover, .pico-filedrop.is-dragover { border-color: var(--pico-color-accent); background: var(--pico-color-accent-subtle); }
  .pico-filedrop:focus-within { outline: var(--pico-focus-ring); outline-offset: 2px; }
  .pico-filedrop > .pico-icon { --pico-icon-size: 1.5rem; color: var(--pico-color-text-subtle); margin-bottom: var(--pico-space-1); }
  .pico-filedrop__title { font-weight: var(--pico-weight-medium); }
  .pico-filedrop__title u { color: var(--pico-color-accent-text); text-underline-offset: 0.2em; }
  .pico-filedrop__hint { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-filedrop__name { margin-top: var(--pico-space-1); color: var(--pico-color-text); font-family: var(--pico-font-mono); font-size: var(--pico-text-sm); }
  .pico-filedrop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

  /* ---------- Dialog ---------- */
  .pico-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 4rem);
    padding: 0;
    border: 1px solid var(--pico-color-border);
    border-radius: var(--pico-radius-lg);
    background: var(--pico-color-surface-raised);
    color: var(--pico-color-text);
    box-shadow: var(--pico-shadow-lg);
  }
  .pico-dialog[open] { animation: pico-dialog-in var(--pico-duration-base) var(--pico-ease); }
  .pico-dialog::backdrop { background: var(--pico-color-overlay); }
  .pico-dialog__form { display: flex; flex-direction: column; max-height: inherit; }
  .pico-dialog__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pico-space-1) var(--pico-space-3); padding: var(--pico-space-5) var(--pico-space-5) var(--pico-space-4); overflow-y: auto; }
  .pico-dialog__icon { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--pico-radius-md); background: var(--pico-color-accent-subtle); color: var(--pico-color-accent-text); }
  .pico-dialog--danger .pico-dialog__icon { background: var(--pico-color-danger-bg); color: var(--pico-color-danger); }
  .pico-dialog__title { align-self: center; font-size: var(--pico-text-lg); }
  .pico-dialog__body { color: var(--pico-color-text-muted); }
  .pico-dialog__body > * + * { margin-top: var(--pico-space-3); }
  .pico-dialog__body strong { color: var(--pico-color-text); }
  .pico-dialog__body .pico-field__label { color: var(--pico-color-text); }
  .pico-dialog__body .pico-changes { color: var(--pico-color-text); }
  .pico-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pico-space-2); padding: var(--pico-space-3) var(--pico-space-5); border-top: 1px solid var(--pico-color-border-subtle); background: var(--pico-color-bg-subtle); border-radius: 0 0 var(--pico-radius-lg) var(--pico-radius-lg); }
  .pico-dialog__actions .pico-check { margin-right: auto; align-self: center; }
  .pico-dialog--wide { width: min(44rem, calc(100vw - 2rem)); }

  /* ---------- Drawer (Werkbank signature) ---------- */
  .pico-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--pico-z-drawer);
    width: min(var(--pico-drawer-width), 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--pico-color-border);
    background: var(--pico-color-surface-raised);
    color: var(--pico-color-text);
    box-shadow: var(--pico-shadow-lg);
  }
  .pico-drawer[open], .pico-drawer:target { display: flex; flex-direction: column; }
  .pico-drawer[open] { animation: pico-drawer-in 220ms var(--pico-ease); }
  .pico-drawer::backdrop { background: var(--pico-color-overlay-light); }
  .pico-drawer__form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .pico-drawer__head { display: flex; align-items: flex-start; gap: var(--pico-space-3); padding: var(--pico-space-4) var(--pico-space-5); border-bottom: 1px solid var(--pico-color-border); }
  .pico-drawer__heading { flex: 1; min-width: 0; }
  .pico-drawer__eyebrow { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-drawer__title { font-size: var(--pico-text-lg); }
  .pico-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pico-space-5); display: grid; align-content: start; gap: var(--pico-space-5); }
  .pico-drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); padding: var(--pico-space-3) var(--pico-space-5); border-top: 1px solid var(--pico-color-border); background: var(--pico-color-bg-subtle); }
  .pico-drawer__foot .pico-form__note { margin-left: auto; }

  /* ---------- Stats (import report) ---------- */
  .pico-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--pico-space-3); }
  .pico-stat { padding: var(--pico-space-3) var(--pico-space-4); border: 1px solid var(--pico-color-border); border-radius: var(--pico-radius-lg); background: var(--pico-color-surface); }
  .pico-stat__value { display: block; font-size: var(--pico-text-xl); font-weight: var(--pico-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .pico-stat__label { color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-stat--success .pico-stat__value { color: var(--pico-color-success); }
  .pico-stat--warning .pico-stat__value { color: var(--pico-color-warning); }

  /* ---------- Avatar ---------- */
  .pico-avatar { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pico-color-accent); color: var(--pico-color-accent-contrast); font-size: 0.625rem; font-weight: var(--pico-weight-semibold); letter-spacing: 0.02em; }

  /* ---------- Notice text ---------- */
  .pico-note { display: flex; align-items: flex-start; gap: var(--pico-space-2); color: var(--pico-color-text-muted); font-size: var(--pico-text-sm); }
  .pico-note .pico-icon { margin-top: 0.15rem; color: var(--pico-color-text-subtle); }
  .pico-prose { max-width: 70ch; }
  .pico-prose > * + * { margin-top: var(--pico-space-3); }
  .pico-prose h2 { margin-top: var(--pico-space-6); font-size: var(--pico-text-lg); }
  .pico-prose p, .pico-prose li { color: var(--pico-color-text-muted); }
  .pico-prose ul, .pico-prose ol { padding-left: 1.25rem; }

  /* ---------- Portal additions (not in the prototype) ---------- */
  /* Neutral state: provisioned, but the app health was not checked (no URL yet, or no probe). */
  .pico-pill--unknown { --_dot: var(--pico-color-state-unknown); }
  .pico-dot--unknown { background: var(--pico-color-state-unknown); }
  .pico-pill + .pico-table__sub { margin-top: var(--pico-space-1); }
  /* Slugs and other unbreakable sub lines may wrap, so they never set the column's minimum width. */
  .pico-table__sub { overflow-wrap: anywhere; }

  /* Long user-entered names (project, object, field names) outside the places that already clamp them
     (table name, chrome title, breadcrumb, rail). One line by default, two with --2; the full text is in title. */
  .pico-longname {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .pico-longname--2 { -webkit-line-clamp: 2; line-clamp: 2; }
  /* Dialog and drawer titles: stay in the sentence. -webkit-box is a block, so quotes landed on their own lines. */
  .pico-longname--inline {
    display: inline;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .pico-card__title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pico-page-header > div:first-child { min-width: 0; max-width: 100%; }
  .pico-page-header__title { overflow-wrap: anywhere; }

  /* One-button POST forms (ui/actionForm) sit inline next to links and buttons. */
  .pico-action-form { display: inline-flex; margin: 0; vertical-align: middle; }
  .pico-menu__panel .pico-action-form { display: flex; }
  .pico-table__actions > .pico-action-form { vertical-align: middle; }
  .pico-menu__panel .pico-action-form.pico-table__show-md { display: none; }
  @media (max-width: 960px) {
    .pico-menu__panel .pico-action-form.pico-table__show-md { display: flex; }
    .pico-action-form.pico-table__hide-md { display: none; }
  }
  /* Items above the row link overlay (pico-table__link--row) stay clickable. */
  .pico-table .pico-slug, .pico-table .pico-menu, .pico-table .pico-action-form { position: relative; z-index: 1; }
  /* An open row menu must paint above the next rows' buttons (each sits in its own z-index: 1 context). */
  .pico-table .pico-menu[open], .pico-table__actions > .pico-menu[open] { z-index: var(--pico-z-menu); }

  /* Server-rendered flash: the dismiss button only appears once pico.js runs. */
  .pico-flash__close[hidden] { display: none; }

  /* Choice list editor. Long values widen their input; the wrap scrolls instead of the page.
     Author display rules would otherwise beat the hidden attribute. */
  .pico-choicelist { min-width: 0; }
  .pico-choicelist [hidden] { display: none !important; }
  .pico-choicelist .pico-table-wrap { overflow-x: auto; max-width: 100%; }
  .pico-choicelist__table .pico-input { width: auto; min-width: 8rem; max-width: 36rem; field-sizing: content; }
  .pico-choicelist__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pico-space-2); margin-top: var(--pico-space-3); }
  .pico-choicelist tr.is-dragging { opacity: 0.45; }
  .pico-choicelist [data-pico-choicelist-row-error] { margin-top: var(--pico-space-1); white-space: normal; text-align: left; }
}

@layer pico.utilities {
  .pico-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pico-skip { position: absolute; left: var(--pico-space-3); top: -4rem; z-index: 100; padding: var(--pico-space-2) var(--pico-space-3); border-radius: var(--pico-radius-md); background: var(--pico-color-accent); color: var(--pico-color-accent-contrast); }
  .pico-skip:focus { top: var(--pico-space-3); }
}

/* ---------- Motion ---------- */
@keyframes pico-spin { to { transform: rotate(360deg); } }
@keyframes pico-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pico-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pico-pop-in { from { opacity: 0; transform: translateY(-2px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pico-dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pico-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pico-highlight { 0%, 40% { background: var(--pico-color-highlight); } 100% { background: transparent; } }
@keyframes pico-collapse { from { opacity: 1; max-height: 6rem; } to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }