/* vem-design components without the cascade layer, for Tailwind 3 products; generated */


  /* ---- base ---------------------------------------------------------- */
  /* Instrument Sans has a narrow space (0.2em): small text needs a little more. */
  .vem-app { background: var(--vem-ground); color: var(--vem-text); font-family: var(--vem-font-sans);
    word-spacing: var(--vem-word-spacing); }
  .vem-app :focus-visible { outline: 2px solid var(--vem-focus); outline-offset: 2px; }
  .vem-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px;
    background: var(--vem-surface); color: var(--vem-text); border: 1px solid var(--vem-line-strong);
    border-radius: var(--vem-radius-md); }
  .vem-skip:focus { left: 8px; }
  .vem-h1 { font-family: var(--vem-font-display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5rem; }
  .vem-h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
  .vem-muted { color: var(--vem-muted); }
  .vem-mono { font-family: var(--vem-font-mono); font-size: .92em; }

  /* ---- icons: <svg class="vem-icon" aria-hidden="true"><use href="…/sprite.svg#vem-i-NAME"/></svg> */
  /* inline-block: Tailwind 3's reset makes every svg display:block. */
  .vem-icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
  .vem-icon--lg { width: 1.5em; height: 1.5em; }

  /* ---- buttons --------------------------------------------------------- */
  .vem-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 14px;
    border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line-strong);
    background: var(--vem-surface); color: var(--vem-text); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none; }
  .vem-btn:hover { background: var(--vem-subtle); }
  .vem-btn--primary { background: var(--vem-primary); border-color: var(--vem-primary); color: var(--vem-on-primary); }
  .vem-btn--primary:hover { background: var(--vem-primary-hover); }
  .vem-btn--danger { color: var(--vem-danger); border-color: currentColor; background: transparent; }
  .vem-btn--quiet { border-color: transparent; background: transparent; }
  .vem-btn--sm { min-height: 32px; padding: 0 10px; font-size: .875rem; }
  .vem-btn[disabled], .vem-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

  /* ---- surfaces -------------------------------------------------------- */
  .vem-card { background: var(--vem-surface); border: 1px solid var(--vem-line);
    border-radius: var(--vem-radius-lg); box-shadow: var(--vem-shadow-sm); padding: 20px; }
  .vem-card + .vem-card { margin-top: 16px; }

  /* ---- forms ----------------------------------------------------------- */
  .vem-field { display: grid; gap: 6px; margin-bottom: 14px; }
  .vem-field > label { font-weight: 600; font-size: .9rem; }
  .vem-input, .vem-select, .vem-textarea { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px;
    border: 1px solid var(--vem-line-strong); border-radius: var(--vem-radius-md);
    background: var(--vem-surface); color: var(--vem-text); font: inherit; }
  .vem-help { color: var(--vem-muted); font-size: .85rem; }
  .vem-error { color: var(--vem-danger); font-size: .85rem; }

  /* ---- tables: always scroll inside their own box on a phone ----------- */
  .vem-table-wrap { overflow-x: auto; border: 1px solid var(--vem-line); border-radius: var(--vem-radius-lg); }
  .vem-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .vem-table caption { text-align: left; padding: 12px 14px; font-weight: 600; }
  .vem-table th { text-align: left; font-weight: 600; color: var(--vem-muted); background: var(--vem-subtle); }
  .vem-table th, .vem-table td { padding: 10px 14px; border-top: 1px solid var(--vem-line); }

  /* ---- tabs: links with aria-current, so each tab is a real URL -------- */
  .vem-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vem-line); overflow-x: auto; }
  .vem-tabs a { padding: 10px 12px; color: var(--vem-muted); text-decoration: none; font-weight: 600;
    border-bottom: 2px solid transparent; white-space: nowrap; }
  .vem-tabs a[aria-current="page"] { color: var(--vem-text); border-bottom-color: var(--vem-primary); }

  /* ---- badges and status ----------------------------------------------- */
  .vem-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: var(--vem-radius-pill); font-size: .75rem; font-weight: 600;
    background: var(--vem-subtle); color: var(--vem-text-2); }
  .vem-badge--primary { background: var(--vem-primary-soft); color: var(--vem-on-primary-soft); }
  .vem-badge--success { background: var(--vem-success-soft); color: var(--vem-success); }
  .vem-badge--warning { background: var(--vem-warning-soft); color: var(--vem-warning); }
  .vem-badge--danger { background: var(--vem-danger-soft); color: var(--vem-danger); }

  /* ---- flash / notice: give it role="status" (or "alert" for errors) ---- */
  .vem-flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
    border-radius: var(--vem-radius-md); border: 1px solid var(--vem-line);
    background: var(--vem-info-soft); color: var(--vem-text); }
  .vem-flash--success { background: var(--vem-success-soft); }
  .vem-flash--warning { background: var(--vem-warning-soft); }
  .vem-flash--danger { background: var(--vem-danger-soft); }

  /* ---- empty state: one sentence, one action --------------------------- */
  .vem-empty { text-align: center; padding: 32px 16px; color: var(--vem-muted); }
  .vem-empty .vem-btn { margin-top: 12px; }

  /* ---- action menu: <details class="vem-menu"><summary>…</summary><div>…</div> */
  .vem-menu { position: relative; display: inline-block; }
  .vem-menu > summary { list-style: none; cursor: pointer; }
  .vem-menu > summary::-webkit-details-marker { display: none; }
  .vem-menu > div { position: absolute; right: 0; z-index: 20; min-width: 200px; margin-top: 4px; padding: 6px;
    background: var(--vem-surface); border: 1px solid var(--vem-line); border-radius: var(--vem-radius-md);
    box-shadow: var(--vem-shadow-md); }
  .vem-menu > div > a, .vem-menu > div > button, .vem-menu > div form > button {
    display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none;
    color: var(--vem-text); font: inherit; border-radius: var(--vem-radius-sm); cursor: pointer; text-decoration: none; }
  .vem-menu > div > a:hover, .vem-menu > div button:hover { background: var(--vem-subtle); }

  /* ---- drawer (side) and sheet (bottom, phones): use <dialog> ----------- */
  dialog.vem-drawer, dialog.vem-sheet { border: 0; padding: 20px; background: var(--vem-surface);
    color: var(--vem-text); box-shadow: var(--vem-shadow-md); }
  dialog.vem-drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); }
  dialog.vem-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw;
    border-radius: var(--vem-radius-lg) var(--vem-radius-lg) 0 0; }
  dialog.vem-drawer::backdrop, dialog.vem-sheet::backdrop { background: rgba(20, 17, 15, .45); }

  /* ---- first-run checklist --------------------------------------------- */
  .vem-checklist { list-style: none; margin: 0; padding: 0; }
  .vem-checklist li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--vem-line); }
  .vem-checklist li:first-child { border-top: 0; }

  /* ---- print: content only ---------------------------------------------- */
  @media print {
    .vem-skip, .vem-btn, .vem-menu, .vem-tabs { display: none !important; }
    .vem-card { box-shadow: none; border-color: #999; }
  }