/* Only what the shared design system doesn't already carry. */
  .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;
  }
  .dropzone { border: 2px dashed var(--rule); padding: 0.75rem; margin: 1rem 0; }
  .dropzone.dragover { border-color: var(--indigo); background: var(--paper-2); }
  .dropzone .empty { color: var(--ink-soft); font-family: var(--sans); font-size: 0.85rem; margin: 0.6rem 0.2rem; }
  .filelist li { flex-wrap: wrap; }
  .filelist .exlabel {
    font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-soft); min-width: 4.2rem; white-space: nowrap;
  }
  .filelist .fname { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 12rem; min-width: 0; }
  .filelist .fmeta { white-space: normal; overflow-wrap: anywhere; }
  .filelist .ftitle { font-size: 0.9rem; padding: 0.45rem 0.5rem; }
  .rowctl { display: flex; gap: 0.25rem; flex: 0 0 auto; }
  .rowctl button {
    min-width: 44px; min-height: 44px; font-size: 1rem; line-height: 1; padding: 0.35rem 0.5rem;
  }
  .rowctl button[data-act="remove"] { color: var(--redletter); }
  fieldset { border: 1px solid var(--rule); padding: 0.4rem 1rem 1rem; margin: 1.25rem 0 0; }
  legend { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .radios { display: flex; flex-direction: column; gap: 0.1rem; }
  .buildrow { margin-top: 1.5rem; }
  #build { min-height: 48px; font-size: 1rem; }
  #addfiles { min-height: 48px; font-size: 1rem; }
  .result { margin-top: 1rem; }
  .result a.btn { display: inline-block; margin-bottom: 0.5rem; }
  .err { color: var(--redletter); font-weight: 600; }
  .tool-links { margin-top: 2rem; font-family: var(--sans); font-size: 0.9rem; }

  .addrow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
  .addrow button { min-height: 48px; font-size: 1rem; }
  #openpackage { padding: 0.7rem 1.1rem; }
  #pagesize { min-height: 44px; font-size: 0.95rem; max-width: 100%; }

  /* A link that is really a button, so the dialog opener keeps button semantics. */
  .linkish {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--indigo);
    text-decoration: underline; cursor: pointer; text-align: left;
  }
  .linkish:hover { text-decoration: none; }

  /* Hidden until opened, whether the browser has <dialog> or takes the fallback path. */
  .guide:not([open]):not(.guide-open) { display: none; }
  .guide { border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
    padding: 0; max-width: 34rem; width: calc(100% - 2rem); max-height: calc(100vh - 3rem); }
  .guide::backdrop { background: rgba(0, 0, 0, 0.55); }
  .guide-inner { padding: 1.25rem; overflow-y: auto; max-height: calc(100vh - 3rem); }
  .guide h2 { margin-top: 0; }
  .guide h3 { font-family: var(--sans); font-size: 0.95rem; margin: 1.1rem 0 0.3rem; }
  .guide ol { margin: 0 0 0.5rem; padding-left: 1.3rem; }
  .guide li { margin: 0.2rem 0; }
  .guide-actions { margin-top: 1.25rem; }
  .guide-actions button { min-height: 44px; font-size: 1rem; }
  /* Fallback path for browsers without <dialog>: the script adds .guide-open. */
  .guide[data-fallback] { position: fixed; inset: 1.5rem auto auto 50%;
    transform: translateX(-50%); z-index: 100; }
  .guide-shade { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 99; }