/*
 * Copyright 2026 Asim Ihsan
 *
 * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
 * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
 *
 * SPDX-License-Identifier: MPL-2.0
 */

/*
 * Rendered SheepText diagrams (`.. sheeptext::` and the gallery directive) now
 * ship as a light/dark pair and the visible one is drawn for the reader's
 * resolved scheme, so the diagram no longer needs a surface imposed on it.
 *
 * The fixed white card this rule used to paint in BOTH themes was the workaround
 * for the opposite problem (browser-review finding H1: light-palette strokes
 * vanishing on the dark page). It is deleted with its cause: a card that stayed
 * light in dark mode was also the reason an edited diagram, re-rendered onto the
 * page by the tutorial island, looked nothing like the one beside it
 * (task-00000780). Borders and scrolling stay: wide diagrams must still scroll
 * rather than clip (M1).
 */
.sheeptext-diagram {
  border: 1px solid var(--color-background-border, #e2e8f0);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.sheeptext-diagram svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Examples gallery cards (task-00000271). Theme-aware chrome via furo's CSS
   variables, with plain fallbacks for non-furo builds. */
.sheeptext-example {
  border: 1px solid var(--color-background-border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 1.75rem 0;
}

.sheeptext-example-label {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}

.sheeptext-example-caption {
  margin: 0 0 0.75rem;
  color: var(--color-foreground-secondary, #475569);
}

.sheeptext-example-actions {
  margin: 0.75rem 0 0.25rem;
}

.sheeptext-example-open {
  font-weight: 600;
}

.sheeptext-example-source {
  margin: 0.75rem 0 0;
  max-height: 30rem;
  overflow: auto;
}

/* A mounted tutorial owns the source and editor link inside its live island.
   Keep the generated siblings for no-JS and bootstrap-failure paths, where
   they are the only usable source and link. `data-sheeptext-mounted` is set by
   the WASM mount only after the island has been admitted successfully. */
.sheeptext-example:has(> .sheeptext-embed[data-sheeptext-mounted])
  > .sheeptext-example-actions,
.sheeptext-example:has(> .sheeptext-embed[data-sheeptext-mounted])
  > .sheeptext-example-source {
  display: none;
}

/* Tutorial embeds keep the server-rendered SVG available while the optional
   WASM module initializes. A failed bootstrap exposes its pre-rendered status
   without hiding that static fallback. */
.sheeptext-embed {
  min-width: 0;
}

.sheeptext-embed[data-sheeptext-mounted] {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.35fr);
  grid-template-areas:
    "source preview"
    "actions preview"
    "status status"
    "diagnostics diagnostics"
    "error error";
  gap: 0.75rem 1rem;
  align-items: start;
  min-width: 0;
  margin: 0.75rem 0;
}

/* The build-time fallback and the live preview occupy the same page-owned
   preview slot. `display: contents` lets the island's typed states select that
   slot without moving or cloning the server-rendered fallback node. */
.sheeptext-tutorial-editor {
  display: contents;
}

.sheeptext-embed[data-sheeptext-mounted]
  > [data-sheeptext-static-fallback] {
  grid-area: preview;
  min-width: 0;
  overflow: auto;
}

/* The card's source widget is the editor's own CodeMirror, mounted by the
   island through the bridge sidecar (task-00000920). The editor paints its
   own text and gutter; the tokens carry stable `sheeptext-tok-*` classes and
   this stylesheet decides their colours, once per scheme, next to the rest of
   the card. Sizing lives on the CodeMirror host: a capped, scrolling editor
   rather than a resizable text box. */
.sheeptext-tutorial-source {
  --sheeptext-tok-keyword: #6d28d9;
  --sheeptext-tok-placename: #0f766e;
  --sheeptext-tok-string: #b45309;
  --sheeptext-tok-number: #1d4ed8;
  --sheeptext-tok-color: #be185d;
  --sheeptext-tok-comment: #64748b;
  --sheeptext-tok-arrow: #c2410c;
  --sheeptext-editor-gutter: #f8fafc;
  --sheeptext-editor-active-line: rgba(37, 99, 235, 0.08);
  --sheeptext-editor-selection: #dbeafe;
  display: flex;
  grid-area: source;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.sheeptext-tutorial-source-label {
  font-weight: 600;
}

.sheeptext-tutorial-source .source-editor-block {
  min-width: 0;
}

.sheeptext-tutorial-source .source-editor {
  border: 1px solid var(--color-background-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-background-primary, #ffffff);
}

.sheeptext-tutorial-source .source-editor:focus-within {
  border-color: var(--color-brand-primary, #2563eb);
}

.sheeptext-tutorial-source .cm-editor {
  max-height: 35rem;
  font: 0.9rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-foreground-primary, #1f2937);
}

.sheeptext-tutorial-source .cm-editor.cm-focused {
  outline: none;
}

.sheeptext-tutorial-source .cm-scroller {
  min-height: 14rem;
  overflow: auto;
  font-family: inherit;
}

.sheeptext-tutorial-source .cm-gutters {
  border-right: 1px solid var(--color-background-border, #e2e8f0);
  background: var(--sheeptext-editor-gutter);
  color: var(--color-foreground-muted, #64748b);
}

.sheeptext-tutorial-source .cm-activeLine,
.sheeptext-tutorial-source .cm-activeLineGutter {
  background: var(--sheeptext-editor-active-line);
}

.sheeptext-tutorial-source .cm-cursor,
.sheeptext-tutorial-source .cm-dropCursor {
  border-left-color: var(--color-foreground-primary, #1f2937);
}

.sheeptext-tutorial-source .cm-selectionBackground,
.sheeptext-tutorial-source .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
  background: var(--sheeptext-editor-selection);
}

.sheeptext-tutorial-source .cm-tooltip {
  border: 1px solid var(--color-background-border, #e2e8f0);
  background: var(--color-background-secondary, #f8fafc);
  color: var(--color-foreground-primary, #1f2937);
}

.sheeptext-tutorial-source .sheeptext-tok-keyword {
  color: var(--sheeptext-tok-keyword);
  font-weight: 600;
}

.sheeptext-tutorial-source .sheeptext-tok-placename {
  color: var(--sheeptext-tok-placename);
}

.sheeptext-tutorial-source .sheeptext-tok-string {
  color: var(--sheeptext-tok-string);
}

.sheeptext-tutorial-source .sheeptext-tok-number {
  color: var(--sheeptext-tok-number);
}

.sheeptext-tutorial-source .sheeptext-tok-color {
  color: var(--sheeptext-tok-color);
}

.sheeptext-tutorial-source .sheeptext-tok-comment {
  color: var(--sheeptext-tok-comment);
  font-style: italic;
}

.sheeptext-tutorial-source .sheeptext-tok-arrow {
  color: var(--sheeptext-tok-arrow);
}

/* Furo's dark scheme: the explicit toggle, and the OS preference while the
   toggle is on `auto`. The same two selectors furo's own dark variables use. */
body[data-theme="dark"] .sheeptext-tutorial-source {
  --sheeptext-tok-keyword: #c4b5fd;
  --sheeptext-tok-placename: #5eead4;
  --sheeptext-tok-string: #fcd34d;
  --sheeptext-tok-number: #93c5fd;
  --sheeptext-tok-color: #f9a8d4;
  --sheeptext-tok-comment: #94a3b8;
  --sheeptext-tok-arrow: #fdba74;
  --sheeptext-editor-gutter: #1c1e21;
  --sheeptext-editor-active-line: rgba(255, 255, 255, 0.05);
  --sheeptext-editor-selection: #334155;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .sheeptext-tutorial-source {
    --sheeptext-tok-keyword: #c4b5fd;
    --sheeptext-tok-placename: #5eead4;
    --sheeptext-tok-string: #fcd34d;
    --sheeptext-tok-number: #93c5fd;
    --sheeptext-tok-color: #f9a8d4;
    --sheeptext-tok-comment: #94a3b8;
    --sheeptext-tok-arrow: #fdba74;
    --sheeptext-editor-gutter: #1c1e21;
    --sheeptext-editor-active-line: rgba(255, 255, 255, 0.05);
    --sheeptext-editor-selection: #334155;
  }
}

.sheeptext-tutorial-actions {
  display: flex;
  grid-area: actions;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

/* The live preview is the same diagram as the build-time one, drawn by the same
   engine for the same scheme, so it gets the same box. Anything else here would
   be a second surface decision, which is the defect task-00000780 closed. */
.sheeptext-tutorial-live-preview {
  grid-area: preview;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--color-background-border, #e2e8f0);
  border-radius: 10px;
  padding: 1rem;
  overflow: auto;
}

.sheeptext-tutorial-live-preview svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.sheeptext-tutorial-editor > [role="status"] {
  grid-area: status;
  margin: 0;
}

.sheeptext-tutorial-diagnostics {
  grid-area: diagnostics;
  max-width: 100%;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sheeptext-tutorial-error {
  grid-area: error;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .sheeptext-embed[data-sheeptext-mounted] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "source"
      "preview"
      "actions"
      "status"
      "diagnostics"
      "error";
  }

  .sheeptext-tutorial-source .cm-scroller {
    min-height: 11rem;
  }
}

.sheeptext-embed [data-sheeptext-embed-status] {
  margin: 0.75rem 0 0;
  color: var(--color-foreground-secondary, #475569);
}

/* Revision stamp under the furo footer (task-00000714): the deployed sha and
   build time, so staleness is visible on the page itself. */
.sheeptext-build-stamp {
  margin-top: 0.75rem;
  font-size: var(--font-size--small, 0.85rem);
  color: var(--color-foreground-muted, #64748b);
}

/* The editing chapter mounts the same full editor that serves /editor/. Its
   separate frame keeps the lesson document out of the visitor's saved draft. */
.sheeptext-editor-lab {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  min-width: 0;
}

.sheeptext-editor-lab h2,
.sheeptext-editor-lab p {
  margin: 0;
}

.sheeptext-editor-lab-exercises,
.sheeptext-editor-lab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sheeptext-editor-lab button {
  border: 1px solid var(--color-background-border, #cbd5e1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-background-secondary, #f8fafc);
  color: var(--color-foreground-primary, #1f2937);
  cursor: pointer;
}

.sheeptext-editor-lab button:hover:not(:disabled) {
  border-color: var(--color-brand-primary, #2563eb);
}

.sheeptext-editor-lab button:focus-visible {
  outline: 3px solid var(--color-brand-primary, #2563eb);
  outline-offset: 2px;
}

.sheeptext-editor-lab button[aria-pressed="true"] {
  border-color: var(--color-brand-primary, #2563eb);
  background: var(--color-brand-primary, #2563eb);
  color: var(--color-brand-content, #fff);
}

.sheeptext-editor-lab button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.sheeptext-editor-lab-instruction {
  color: var(--color-foreground-secondary, #475569);
}

.sheeptext-editor-lab-actions [role="status"] {
  flex: 1 1 18rem;
  color: var(--color-foreground-secondary, #475569);
}

.sheeptext-editor-lab iframe {
  display: block;
  width: 100%;
  min-width: 0;
  height: clamp(40rem, 100vh, 72rem);
  border: 1px solid var(--color-background-border, #cbd5e1);
  border-radius: 0.75rem;
  background: var(--color-background-primary, #fff);
}

.sheeptext-editor-lab iframe[hidden] {
  display: none;
}

.sheeptext-editor-lab iframe:focus-visible {
  outline: 3px solid var(--color-brand-primary, #2563eb);
  outline-offset: 2px;
}

/* Furo's `.main` grows into the space freed by its left drawer. Its normal
   `.content` width is fixed, so widen that page column only while the reader
   explicitly focuses on the editor exercise. */
html.sheeptext-tutorial-focus .sidebar-drawer {
  display: none !important;
}

html.sheeptext-tutorial-focus .content {
  box-sizing: border-box;
  width: min(100%, 90rem);
  max-width: 100%;
  padding-right: clamp(1rem, 3vw, 3rem);
  padding-left: clamp(1rem, 3vw, 3rem);
}

@media (max-width: 40rem) {
  .sheeptext-editor-lab iframe {
    height: max(34rem, 82vh);
  }
}