/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
/* /public/css/routes/surfaces/tools-spw-parser.css */
@layer routes {
/* ==========================================================================
   tools-spw-parser.css
   --------------------------------------------------------------------------
   Purpose
   - Route-scoped surface for body[data-spw-surface="tools-spw-parser"].
   - Present literal parser source, tokens, AST, diagnostics, and provenance.
   - Keep parser behavior in the route module and evidence hierarchy here.

   Debugging notes
   - Use route scope first; do not promote proof-layout rules into shared cards.
   - Horizontal containment belongs to token and AST scrollers, not page width.
   ========================================================================== */

:where(body[data-spw-surface="tools-spw-parser"]) {
    --literal-parser-line: #aebeb8;
    --literal-parser-code: #10211f;
    --literal-parser-control: #15302d;
    --literal-parser-control-ink: #e7f5ef;
    --literal-parser-surface: #f7f3ec;
    --literal-parser-ink: #122420;
    --literal-parser-soft: #4b5c57;
    --literal-parser-ok: #1d6f52;
    --literal-parser-error: #8a4e08;

    & .literal-parser {
      display: grid;
      gap: clamp(1rem, 2vw, 1.5rem);
    }

    & .literal-parser-samples,
    & .literal-parser-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem;
    }

    & .literal-parser-samples > span {
      color: currentColor;
      font: 0.76rem/1.4 var(--font-mono, monospace);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    & .literal-parser-samples button,
    & .literal-parser-file-action {
      appearance: none;
      min-height: 2.5rem;
      padding: 0.55rem 0.8rem;
      border: 1px solid var(--literal-parser-line);
      border-radius: 999px;
      background: var(--literal-parser-control);
      color: var(--literal-parser-control-ink);
      cursor: pointer;
      font: 0.78rem/1.3 var(--font-mono, monospace);
    }

    & .site-hero .spec-pill {
      color: #122420;
    }

    & .literal-parser-samples button:is(:hover, :focus-visible),
    & .literal-parser-file-action:is(:hover, :focus-within) {
      border-color: var(--op-frame-color, #1a9999);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-frame-color, #1a9999) 12%, transparent);
    }

    & .literal-parser-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.3fr);
      gap: 1rem;
      align-items: stretch;
    }

    & .literal-parser-editor,
    & .literal-parser-metrics,
    & .literal-parser-output details {
      min-width: 0;
      border: 1px solid var(--literal-parser-line);
      border-radius: 0.9rem;
      background: var(--literal-parser-surface);
      color: var(--literal-parser-ink);
      overflow: clip;
    }

    & .literal-parser-editor > header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--literal-parser-line);
    }

    & .literal-parser-editor h3 {
      margin: 0;
    }

    & .literal-parser-source-name {
      display: block;
      margin-top: 0.2rem;
      color: var(--literal-parser-soft);
      font: 0.7rem/1.3 var(--font-mono, monospace);
    }

    & .literal-parser-file-action {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    & .literal-parser-file-action input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      opacity: 0;
      pointer-events: none;
    }

    & .literal-parser-editor textarea {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-height: clamp(15rem, 34vw, 25rem);
      resize: vertical;
      padding: 1rem;
      border: 0;
      border-radius: 0;
      outline: 0;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--op-frame-color, #1a9999) 8%, transparent) 1px, transparent 1px) 0 0 / 2rem 100%,
        var(--literal-parser-code);
      color: var(--literal-parser-control-ink);
      caret-color: var(--op-object-color, #d69a3a);
      font: 0.88rem/1.65 var(--font-mono, "JetBrains Mono", monospace);
      tab-size: 2;
    }

    & .literal-parser-editor textarea:focus-visible {
      box-shadow: inset 0 0 0 2px var(--op-frame-color, #1a9999);
    }

    & .literal-parser-editor > .frame-note {
      min-height: 1.3em;
      margin: 0;
      padding: 0.7rem 1rem;
      border-top: 1px solid var(--literal-parser-line);
    }

    & .literal-parser-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: start;
    }

    & .literal-parser-metrics > div {
      display: grid;
      gap: 0.35rem;
      min-width: 0;
      padding: 0.85rem;
      border-bottom: 1px solid var(--literal-parser-line);
    }

    & .literal-parser-metrics > div:nth-child(odd) {
      border-right: 1px solid var(--literal-parser-line);
    }

    & .literal-parser-metrics span {
      color: var(--literal-parser-soft);
      font: 0.68rem/1.3 var(--font-mono, monospace);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    & .literal-parser-metrics output {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--literal-parser-ink);
      font: 700 0.88rem/1.35 var(--font-mono, monospace);
    }

    & :where(output, li)[data-tone="ok"] {
      color: var(--literal-parser-ok);
    }

    & :where(output, li)[data-tone="error"] {
      color: var(--literal-parser-error);
    }

    & .literal-parser-actions {
      padding: 0.9rem;
      border: 1px solid #47645e;
      border-radius: 0.9rem;
      background: var(--literal-parser-control);
      color: var(--literal-parser-control-ink);
    }

    & .literal-parser-actions > p {
      flex: 1 1 24rem;
      margin: 0;
      color: #c8dcd5;
      font-size: 0.88rem;
    }

    & .literal-parser-actions .operator-chip {
      appearance: none;
      cursor: pointer;
      font: inherit;
    }

    & .literal-parser-actions [aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.5;
    }

    & .literal-parser-output {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 1rem;
      align-items: start;
    }

    & .literal-parser-output details:last-child {
      grid-column: 1 / -1;
    }

    & .literal-parser-output summary {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--literal-parser-line);
      cursor: pointer;
      color: var(--literal-parser-ink);
      font-family: var(--font-mono, monospace);
    }

    & .literal-parser-output summary small {
      color: var(--literal-parser-soft);
      font-size: 0.68rem;
      text-align: right;
    }

    & .literal-parser-token-list,
    & .literal-parser-diagnostics {
      max-height: 32rem;
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: auto;
      overscroll-behavior: contain;
    }

    & .literal-parser-token {
      display: grid;
      grid-template-columns: 2.2rem minmax(7rem, 0.85fr) minmax(5rem, 1fr) 3.5rem;
      gap: 0.5rem;
      align-items: baseline;
      padding: 0.55rem 0.75rem;
      border-bottom: 1px solid color-mix(in srgb, var(--literal-parser-line) 58%, transparent);
      font: 0.72rem/1.45 var(--font-mono, monospace);
    }

    & .literal-parser-token__ordinal,
    & .literal-parser-token__span {
      color: var(--literal-parser-soft);
      font-variant-numeric: tabular-nums;
    }

    & .literal-parser-token code {
      min-width: 0;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    & .literal-parser-ast {
      box-sizing: border-box;
      width: 100%;
      max-height: 32rem;
      margin: 0;
      padding: 1rem;
      overflow: auto;
      overscroll-behavior: contain;
      background: var(--literal-parser-code);
      color: var(--literal-parser-control-ink);
      font: 0.72rem/1.55 var(--font-mono, monospace);
      white-space: pre;
    }

    & .literal-parser-diagnostics li {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid color-mix(in srgb, var(--literal-parser-line) 58%, transparent);
      font: 0.78rem/1.5 var(--font-mono, monospace);
    }
}

@media (max-width: 58rem) {
  :where(body[data-spw-surface="tools-spw-parser"]) {
      & .literal-parser-workspace,
      & .literal-parser-output {
        grid-template-columns: minmax(0, 1fr);
      }

      & .literal-parser-output details:last-child {
        grid-column: auto;
      }
  }
}

@media (max-width: 34rem) {
  :where(body[data-spw-surface="tools-spw-parser"]) {
      & .literal-parser-metrics {
        grid-template-columns: minmax(0, 1fr);
      }

      & .literal-parser-metrics > div:nth-child(odd) {
        border-right: 0;
      }

      & .literal-parser-token {
        grid-template-columns: 2rem minmax(0, 1fr) 3rem;
      }

      & .literal-parser-token code {
        grid-column: 2 / -1;
      }

      & .literal-parser-output summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
      }

      & .literal-parser-output summary small {
        text-align: left;
      }
  }
}
}