wdl-doc 0.16.0

@import "tailwindcss";
@import "../../../../web-common/css/main.css";

/* Scan Rust source code */
@source "../../src/";

@layer components {
  .body--base {
    @apply size-full table-auto border-collapse text-base;
  }
  /**
   * Layout
   */
  .layout__header {
    @apply fixed flex flex-row top-0 right-0 left-0 w-screen h-16 z-50 border-b border-slate-800 bg-slate-950 transition-all;
  }
  .header__content {
    @apply grid h-16 w-full grid-cols-[auto_minmax(0,1fr)_2.5rem] items-center gap-3 px-3 md:grid-cols-[1fr_minmax(0,23rem)_1fr] md:gap-6 md:px-6;
  }
  .header__logo {
    @apply flex h-16 w-40 items-center justify-start;
  }
  .header__search {
    @apply relative col-start-2 h-11 w-full max-w-56 justify-self-center md:max-w-[23rem];
  }
  .header__actions {
    @apply col-start-3 flex flex-row-reverse items-start justify-between justify-self-end;
  }
  /**
   * Layout - Target desktop proportions
   *
   * These override the shared web-common defaults for the `wdl-doc` theme to
   * match the target layout: a wider left rail, a bounded and padded content
   * column, and a separated sticky right rail.
   */
  .layout__container {
    @apply md:pl-[23.5rem];
  }
  .layout__sidebar-left {
    @apply w-[23.5rem] h-screen pt-16 bg-slate-950 transition-transform duration-200 ease-out max-md:w-80;
  }
  .layout__main-shell {
    @apply mx-auto xl:grid xl:grid-cols-[minmax(0,70rem)_14rem] xl:gap-10;
  }
  .layout__main-center-content {
    @apply w-full max-w-[70rem] px-4 py-8 md:px-8 md:py-10;
  }
  .layout__main-rail {
    @apply max-xl:hidden pt-10;
  }
  .layout__main-center {
    @apply scroll-pt-20;
  }
  /**
   * Scrollbar auto-hide
   *
   * The shared `dark-scrollbar` utility (see `web-common`) keeps scrollbars
   * permanently visible. For `wdl-doc`, the main pane and left navigation
   * instead use transparent thumbs and tracks at rest. Hover, keyboard focus,
   * or active scrolling reveals the thumb. The theme's scroll handler toggles
   * each transient `--scrolling` class and clears it shortly after scrolling
   * stops. Only colors change, so scrolling remains fully functional.
   */
  .layout__main-center,
  .left-sidebar__content-container {
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 200ms ease;
  }
  .layout__main-center:hover,
  .layout__main-center:focus-within,
  .layout__main-center--scrolling,
  .left-sidebar__content-container:hover,
  .left-sidebar__content-container:focus-within,
  .left-sidebar__content-container--scrolling {
    scrollbar-color: var(--color-slate-600) transparent;
  }
  @media (prefers-reduced-motion: reduce) {
    .layout__main-center,
    .left-sidebar__content-container {
      transition: none;
    }
  }
  .markdown-body {
    @apply text-lg leading-8;
  }
  .main__section {
    @apply mt-12;
  }
  .main__section-header {
    @apply text-3xl leading-10;
  }
  .main__expression-toggle {
    @apply ml-1 mt-2 inline-block;
  }
  /**
   * Layout - Alternative Layouts
   * Ex: The following layout states are supported. Requires the .layout__container--alt-layout class
   * .layout__container--left-hidden // left sidebar is hidden for larger center column (similar to mobile view)
   * .layout__container--left-lg // left sidebar is 50% larger than normal
   * .layout__container--left-xl // left sidebar is 100% larger than normal
   * .layout__container--right-hidden // right sidebar is hidden for larger center column (similar to mobile view)
   */
  .layout__container--alt-layout.layout__container--left-hidden .layout__sidebar-left {
    @apply -translate-x-full;
  }
  .layout__container--alt-layout.layout__container--left-hidden {
    @apply pl-0;
  }
  /*
   * Pre-hydration sidebar position. The head bootstrap sets
   * `document.documentElement.dataset.sidebar` from the persisted state (or the
   * viewport width on first load) before Alpine runs, so the sidebar starts in
   * the remembered position instead of flashing open and then snapping closed.
   * Once Alpine hydrates, `containerClasses` takes over and matches this.
   */
  :root[data-sidebar="hidden"] .layout__sidebar-left {
    @apply -translate-x-full;
  }
  :root[data-sidebar="hidden"] .layout__container--alt-layout {
    @apply pl-0;
  }
  
  .layout__container--alt-layout.layout__container--left-lg .layout__sidebar-left {
    @apply w-[35.25rem];
  }
  .layout__container--alt-layout.layout__container--left-lg {
    @apply pl-0 md:pl-[35.25rem];
  }
  
  .layout__container--alt-layout.layout__container--left-xl .layout__sidebar-left {
    @apply w-full md:w-[47rem];
  }
  .layout__container--alt-layout.layout__container--left-xl {
    @apply pl-0 md:pl-[47rem];
  }

  .layout__container--alt-layout.layout__container--right-hidden .layout__main-rail {
    @apply hidden;
  }
  .layout__container--alt-layout.layout__container--right-hidden .layout__main-center {
    @apply max-w-full;
  }
  /**
   * Layout - Breadcrumbs
   */
  .layout__breadcrumb-container {
    @apply mb-8 font-mono text-xs;
  }
  .layout__breadcrumb-clickable {
    @apply text-slate-50 underline hover:text-slate-300;
  }
  .layout__breadcrumb-inactive {
    @apply text-slate-400;
  }
  /* RUN WITH component */
  .main__run-with-container {
    @apply flex flex-col gap-1.5 text-sm rounded-md bg-slate-900 border border-slate-800 mt-4 p-3;
  }
  .main__run-with-label {
    @apply flex flex-row items-center shrink gap-2 text-slate-50 text-xs;
  }
  .main__run-with-label-text {
    @apply text-slate-400 text-xs;
  }
  .main__run-with-toggle {
    @apply flex items-center justify-center rounded-full border border-slate-700 p-[2px];
  }
  .main__run-with-toggle-label {
    @apply rounded-full px-1.5 py-0.5 cursor-pointer;
  }
  :root[data-run-with="unix"] .main__run-with-toggle-label--unix,
  :root[data-run-with="windows"] .main__run-with-toggle-label--windows {
    @apply bg-slate-50 text-slate-900;
  }
  :root[data-run-with="unix"] .main__run-with-toggle-label--windows,
  :root[data-run-with="windows"] .main__run-with-toggle-label--unix {
    @apply bg-slate-900 text-slate-50;
  }
  :root[data-run-with="unix"] .main__run-with-path--windows,
  :root[data-run-with="windows"] .main__run-with-path--unix {
    @apply hidden;
  }
  .main__run-with-content {
    @apply flex flex-row gap-2;
  }
  .main__run-with-content-text {
    @apply text-sm border-slate-700 bg-slate-950 text-slate-300 rounded-md font-mono py-[0.2em] px-[0.4em];
  }
  /**
   * Main Grids
   */
  .main__grid-container {
    @apply rounded py-8;
  }
  .main__grid-header-separator {
    @apply col-span-full border-b border-slate-700;
  }
  .main__grid-row-separator {
    @apply col-span-full border-b border-slate-800;
  }
  .main__grid-row {
    @apply contents;
  }
  .main__grid-header-cell {
    @apply text-sm font-bold;
  }
  .main__grid-cell {
    @apply text-sm;
  }
  .main__grid-full-width-cell {
    @apply col-span-full text-sm gap-2;
  }
  .main__grid-toc-container {
    @apply grid grid-cols-[1fr_1fr_3fr] gap-4;
  }
  .main__grid-runtime-container {
    @apply grid grid-cols-[20%_1fr] gap-4;
  }
  .main__grid-req-inputs-container {
    @apply grid grid-cols-[1fr_1fr_3fr] gap-4;
  }
  .main__grid-non-req-param-container {
    @apply grid grid-cols-[1fr_1fr_2fr_3fr] gap-4;
  }
  .main__grid-struct-member-container {
    @apply grid grid-cols-[1fr_1fr_3fr] gap-4;
  }
  .main__grid-enum-choice-container {
    @apply grid grid-cols-[1fr_3fr] gap-4;
  }
  /**
   * Metadata
   */
  .main__grid-nested-container {
    @apply grid grid-cols-[20%_1fr] gap-4;
  }
  .main__addl-meta-outer-container {
    @apply flex flex-col gap-2 mb-4;
  }
  .main__addl-meta-inner-container {
    @apply flex flex-col gap-4 text-slate-300 bg-slate-900 rounded-md p-4;
  }
  .main__grid-meta-object-container {
    @apply grid grid-cols-[20%_1fr] gap-4;
  }
  .main__grid-nested-row {
    @apply contents;
  }
  .main__grid-nested-cell {
    @apply text-sm;
  }
  .main__grid-meta-array-container {
    @apply flex flex-row gap-2 flex-wrap;
  }
  .main__grid-meta-array-item {
    @apply flex;
  }
  .main__summary-container {
    @apply inline;
  }
  .main__grid-full-width-cell p,
  .main__grid-cell p {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .main__grid-full-width-cell p:first-of-type,
  .main__grid-cell p:first-of-type {
    margin-top: 0;
  }
  .main__grid-full-width-cell p:last-of-type,
  .main__grid-cell p:last-of-type {
    margin-bottom: 0;
  }
  /**
   * Left sidebar
   */
  .left-sidebar__indent {
    @apply w-px h-full border rounded-none border-gray-800 ml-1.5 mr-1;
  }
  .left-sidebar__container {
    @apply flex flex-col size-full text-nowrap pt-4 text-slate-400 border-r border-slate-800;
  }
  .left-sidebar__tabs-container {
    @apply flex items-center;
  }
  .left-sidebar__tabs {
    @apply flex grow items-center gap-x-1 border-b hover:cursor-pointer border-b-slate-700 py-3 px-1.5;
  }
  .left-sidebar__icon {
    @apply size-4;
  }
  .left-sidebar__chevron {
    @apply size-4 shrink-0 cursor-pointer;
  }
  .left-sidebar__content-container {
    @apply size-full rounded-md overflow-x-clip overflow-y-auto pl-4 pr-2;
  }
  .left-sidebar__content {
    @apply w-full;
  }
  .left-sidebar__row {
    @apply flex flex-row items-center gap-x-1 h-8 w-full rounded-md hover:bg-slate-700/40 hover:text-slate-50 cursor-pointer;
  }
  .left-sidebar__row.left-sidebar__row--unclickable {
    @apply hover:bg-transparent cursor-default;
  }
  .left-sidebar__row--active {
    /* currently viewed page */
    @apply bg-slate-600/50 text-slate-50;
  }
  .left-sidebar__row-folder {
    @apply text-slate-400;
  }
  .left-sidebar__content-item-container {
    @apply flex flex-row items-center gap-x-1;
  }
  .left-sidebar__content-item-container--ancestor {
    @apply text-slate-50;
  }
  .left-sidebar__search-result-item {
    @apply flex flex-col border-b border-gray-700 text-slate-50 pl-2 pt-2;
  }
  .left-sidebar__search-result-item-container {
    @apply flex flex-row items-center gap-x-1 mb-2;
  }
  .left-sidebar__category {
    @apply flex items-center gap-x-1 h-6 text-slate-50 mt-2;
  }
  .left-sidebar__workflow {
    @apply flex flex-row items-center gap-x-1 h-8;
  }
  .left-sidebar__workflow-container {
    @apply flex flex-row items-center gap-x-1;
  }
  .left-sidebar__size-button {
    @apply w-6 h-6 rounded flex items-center justify-center opacity-40 text-lg hover:bg-slate-700 text-slate-500 hover:text-slate-100 focus:ring-2 focus:outline-0 focus:ring-slate-500 hover:opacity-100 cursor-pointer;
  }
  .left-sidebar__controls {
    @apply absolute right-3 top-[4.5rem] z-10 flex gap-1;
  }
  .left-sidebar__size-button.left-sidebar__size-button--active {
    @apply text-slate-100 bg-slate-700 opacity-100;
  }
  .left-sidebar__module-version {
    @apply ml-1 shrink-0 rounded-full bg-slate-800 px-1.5 py-0.5 text-[0.65rem] leading-none text-slate-300;
  }

  /**
   * Module overview
   */
  .module-overview {
    @apply flex flex-col gap-4 pb-8;
  }
  .module-overview__eyebrow {
    @apply text-xs font-semibold uppercase tracking-wide text-slate-400;
  }
  .module-overview__title {
    @apply text-2xl font-bold text-slate-50;
  }
  .module-overview__description {
    @apply text-slate-300;
  }
  .module-overview__metadata {
    @apply flex flex-row flex-wrap items-center gap-3;
  }
  .module-overview__metadata-item {
    @apply flex flex-row items-center gap-2 rounded-md border border-slate-800 bg-slate-900 px-3 py-1.5 text-sm;
  }
  .module-overview__metadata-label {
    @apply text-slate-400;
  }
  .module-overview__metadata-value {
    @apply font-mono text-sm text-slate-200;
  }
  .module-overview__dependencies {
    @apply flex flex-col gap-2;
  }
  .module-overview__dependencies-header {
    @apply text-sm font-semibold text-slate-400;
  }
  .module-overview__dependencies-list {
    @apply flex flex-row flex-wrap gap-3;
  }
  .module-overview__dependency-card {
    @apply flex min-w-40 flex-col gap-1 rounded-md border border-slate-800 bg-slate-900 p-3;
  }
  .module-overview__dependency-name {
    @apply text-sm font-semibold text-slate-50;
  }
  .module-overview__dependency-version {
    @apply text-xs text-slate-400;
  }
  .module-overview__dependency-description {
    @apply text-sm text-slate-300;
  }

  /**
   * Declaration hero
   *
   * The rich header shown at the top of struct, enum, task, and workflow
   * pages: a small accent kind label, a large sans-serif title, an authored
   * summary, badges, and a source card.
   */
  .declaration-hero {
    @apply flex flex-col gap-4 border-b border-slate-800 pb-6;
  }
  .declaration-hero__kind {
    @apply text-xs font-semibold uppercase tracking-wide text-slate-500;
  }
  .declaration-hero__title {
    @apply text-4xl leading-normal font-sans font-medium text-slate-50;
  }
  .declaration-hero__summary {
    @apply text-slate-300;
  }

  /**
   * Heading code literal
   *
   * Wraps a WDL identifier used as a page title (declaration names such as
   * `Sample`/`align_reads` and document names such as `main`) in inline
   * `<code>` styling while keeping the surrounding heading's font size.
   *
   * The `code` qualifier matches the specificity of the generic
   * `.main__container code` rule (see `web-common`) and, being defined later
   * in the cascade, wins: `font-size: inherit` restores the full h1/h2 size
   * instead of the generic 0.8em, so the treatment also works if a future WDL
   * identifier appears in an h2.
   */
  .main__container code.heading-code-literal {
    @apply rounded-lg border border-slate-700 bg-slate-800/60 px-[0.4em] py-[0.1em] font-mono;
    font-size: inherit;
  }

  /**
   * Source card
   *
   * A full-width card showing the workspace-relative path to the generating
   * WDL document, with a keyboard-accessible copy action.
   */
  .source-card {
    @apply flex flex-row items-center gap-3 rounded-lg border border-slate-800 bg-slate-900 px-4 py-3;
  }
  .source-card__icon {
    @apply flex size-4 shrink-0;
  }
  .source-card__icon img {
    @apply size-full;
  }
  code.source-card__path {
    @apply flex-1 min-w-0 border-0 bg-transparent p-0 font-mono text-sm text-slate-300 overflow-x-hidden text-ellipsis whitespace-nowrap;
  }
  .source-card__copy {
    @apply flex shrink-0 items-center justify-center gap-1 rounded-md border border-slate-700 px-2.5 py-1 text-xs text-slate-300 hover:bg-slate-800 hover:text-slate-50 cursor-pointer;
  }

  /**
   * Right Sidebar
   */
  .right-sidebar__container {
    @apply h-full text-white isolate;
  }
  .right-sidebar__sticky {
    @apply sticky top-4 flex flex-col;
  }
  .right-sidebar__header {
    @apply mb-2 text-xs text-slate-400;
  }
  .right-sidebar__section-header {
    @apply max-w-xs min-h-8 px-2 py-1.5 flex items-center rounded-sm text-sm text-slate-400 hover:text-slate-300 hover:bg-slate-700/40 cursor-pointer;
  }
  .right-sidebar__section-header--active {
    @apply bg-slate-600/50 text-white;
  }
  .right-sidebar__section-items {
    @apply flex flex-col gap-1.5 ml-4 border-l border-slate-600;
  }
  .right-sidebar__section-item {
    @apply max-w-xs px-4 py-1 flex items-center rounded-sm text-sm text-slate-400 -ml-2 hover:text-slate-300 hover:bg-slate-700/40 cursor-pointer;
  }
  .right-sidebar__section-item--active {
    @apply bg-slate-600/50 text-white;
  }
  .right-sidebar__project-links {
    @apply mt-6 border-t border-slate-800 pt-4 flex flex-col gap-1;
  }
  .right-sidebar__project-link {
    @apply flex items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-400 hover:text-slate-200 hover:bg-slate-700/40;
  }
  .right-sidebar__project-link-icon {
    @apply size-4 shrink-0;
  }
  .right-sidebar__back-to-top-container {
    @apply mt-6;
  }
  .right-sidebar__back-to-top {
    @apply flex items-center text-slate-300 hover:text-slate-100 cursor-pointer;
  }
  .right-sidebar__back-to-top-icon {
    @apply mr-2 flex items-center justify-center w-6 h-6 rounded-full border border-slate-500;
  }
  .right-sidebar__back-to-top-text {
    @apply text-sm;
  }
  /**
   * Search
   */
  #searchbox {
    @apply flex text-slate-400 w-full h-full px-8 outline-none bg-transparent items-center rounded-md border border-slate-700 transition-colors focus:border-slate-400 placeholder:text-slate-400;
  }
  #search-shortcut-hint {
    @apply absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center gap-1 max-md:hidden;
  }
  .search-shortcut {
    @apply flex items-center gap-1;
  }
  .search-shortcut__key {
    @apply flex items-center justify-center min-w-6 h-6 px-1 rounded-sm border border-slate-700 text-slate-300 text-xs font-sans font-medium leading-none;

    background: rgb(255 255 255 / 0.05);
  }
  .search-shortcut__key--wide {
    @apply px-1.5;
  }
  .search-result {
    @apply py-4 flex flex-col gap-2 border-b border-b-slate-800;
  }
  .search-result-excerpt {
    @apply text-sm leading-[1.375rem] font-normal;
  }
  .search-result-excerpt mark {
    @apply text-slate-950 bg-cyan-400 rounded;
  }

  /**
   * Focus-visible states
   *
   * Keyboard focus indicators for links, sidebar rows, the header/search
   * controls, and the source card copy action. The generated code controls
   * carry their own focus ring inside the `<sprocket-code>` shadow root.
   */
  .main__container a:focus-visible,
  .markdown-body a:focus-visible,
  .header__button:focus-visible,
  .source-card__copy:focus-visible,
  #searchbox:focus-visible {
    outline: 2px solid var(--color-slate-400);
    outline-offset: 2px;
    border-radius: 0.375rem;
  }
  .left-sidebar__row:focus-visible,
  .left-sidebar__size-button:focus-visible,
  .right-sidebar__section-header:focus-visible,
  .right-sidebar__section-item:focus-visible,
  .right-sidebar__project-link:focus-visible,
  .right-sidebar__back-to-top:focus-visible {
    outline: 2px solid var(--color-slate-400);
    outline-offset: -2px;
  }
}

@layer utilities {
  .crop-ellipsis {
    @apply overflow-x-hidden text-ellipsis whitespace-nowrap;
  }
}