/* ── components/code-example/code-example.css ── */
/* -- HTML Preview Editor (code-example) ---------------------------------------
   A live preview stage (sandboxed iframe in a device frame with resize
   handles), a device toolbar, and the source editor: a <textarea> over a
   Shiki-coloured paint layer with the same box metrics - once a paint is in
   place (data-painted) the textarea's glyphs turn transparent and only its
   caret and selection show. Shipped in the wysiwyg bundle (wysiwyg.css). */

@layer components {
  .code-example {
    --code-example-pad: 0.75rem;
    --code-example-font-size: 0.75rem;
    --code-example-line-height: 1.5;

    display: block;
    margin: 0.75rem 0 1.5rem;
    color: var(--foreground);
  }

  /* -- the stage ------------------------------------------------ */
  .code-example-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--background);
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  .code-example-frame {
    display: block;
    width: 100%;
    min-height: 8rem;
    border: 0;
    background: var(--background);
  }

  .code-example-error {
    display: block;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--destructive);
    background: color-mix(in oklch, var(--destructive) 12%, var(--background));
    color: var(--destructive);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    &[hidden] {
      display: none;
    }
  }

  /* -- device emulation ------------------------------------------ */
  /* the stage is a flex row - the screen grows into it, or Full mode
     would shrink-wrap the iframe to a sliver */
  .code-example-screen {
    display: block;
    flex: 1;
    min-width: 0;
  }
  /* measured modes (full / desktop): a dashed outline keeps the canvas visible at any width */
  .code-example-screen:is([data-mode="full"], [data-mode="desktop"]) .code-example-device {
    border: 1px dashed var(--border);
  }
  .code-example-device {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
  }
  /* a dark fixed-colour shell reads as hardware in both themes */
  .code-example-screen:is([data-mode="phone"], [data-mode="tablet"]) .code-example-device {
    overflow: hidden;
    border-style: solid;
    border-color: #18181b;
    box-shadow: var(--shadow-lg);
  }
  .code-example-screen[data-mode="phone"] .code-example-device {
    --code-example-bezel: 0.6875rem;
    border-width: var(--code-example-bezel);
    border-radius: 2.5rem;
  }
  .code-example-screen[data-mode="tablet"] .code-example-device {
    --code-example-bezel: 0.5rem;
    border-width: var(--code-example-bezel);
    border-radius: 1.5rem;
  }
  /* the resizer (handles on every side) is the canvas box: the toolbar
     writes its size, the device fills it */
  .code-example-screen .code-example-resizer {
    display: block;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
  }
  .code-example-resizer > .code-example-device {
    width: 100%;
    height: 100%;
  }
  .code-example-resizer[data-resizing] {
    outline-offset: 0;
  }
  .code-example-device-island,
  .code-example-device-home {
    position: absolute;
    z-index: 1;
    display: none;
    border-radius: 999px;
    background: #18181b;
    pointer-events: none;
  }
  .code-example-screen[data-mode="phone"] {
    & .code-example-device-island {
      display: block;
      top: 0.375rem;
      left: 50%;
      translate: -50% 0;
      width: 6rem;
      height: 1.375rem;
    }
    & .code-example-device-home {
      display: block;
      bottom: 0.375rem;
      left: 50%;
      translate: -50% 0;
      width: 7.5rem;
      height: 0.4375rem;
    }
    /* landscape: the island slides to the left edge, the home bar to the right */
    &[data-landscape] .code-example-device-island {
      top: 50%;
      left: 0.375rem;
      translate: 0 -50%;
      width: 1.375rem;
      height: 6rem;
    }
    &[data-landscape] .code-example-device-home {
      top: 50%;
      right: 0.375rem;
      bottom: auto;
      left: auto;
      translate: 0 -50%;
      width: 0.4375rem;
      height: 7.5rem;
    }
  }

  /* -- the toolbar ------------------------------------------------ */
  .code-example-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--muted);

    & button {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.625rem;
      border: 0;
      border-radius: var(--radius-sm);
      appearance: none;
      background: transparent;
      color: var(--muted-foreground);
      font: inherit;
      font-size: 0.75rem;
      cursor: pointer;

      &:hover {
        background: color-mix(in oklch, var(--foreground) 8%, transparent);
        color: var(--foreground);
      }
      &[aria-pressed="true"] {
        background: var(--background);
        color: var(--foreground);
        box-shadow: var(--shadow-2xs);
      }
      &:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      &:disabled:hover {
        background: transparent;
        color: var(--muted-foreground);
      }
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 1px;
      }
    }
  }
  :is(.code-example-toolbar, .code-example-copy, .code-example-full-exit) svg {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
  }
  .code-example-viewport,
  .code-example-size {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .code-example-sep {
    align-self: stretch;
    width: 1px;
    min-height: 1.25rem;
    margin: 0 0.375rem;
    background: var(--border);
  }
  .code-example-vp-x {
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }
  .code-example-size input[type="number"] {
    width: 4.25rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.75rem;

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  /* zoom carries a 2-3 digit % */
  .code-example-size input.code-example-vp-z {
    width: 3.5rem;
    margin-left: 0.5rem;
  }
  .code-example-spacer {
    flex: 1;
  }

  /* -- the panels --------------------------------------------------- */
  .code-example-panel {
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--background);

    &[hidden] {
      display: none;
    }
    &[data-panel="code"] {
      position: relative;
    }
  }
  /* the toolbar's corners square off while a panel hangs below it */
  .code-example:has(> .code-example-panel:not([hidden])) .code-example-toolbar {
    border-radius: 0;
  }
  /* Copy floats over the editor - it exists exactly while the source shows */
  .code-example-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    appearance: none;
    background: var(--background);
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.75rem;
    box-shadow: var(--shadow-2xs);
    cursor: pointer;

    &:hover {
      background: var(--muted);
      color: var(--foreground);
    }
  }

  /* -- the editor: a textarea over the paint layer, same metrics ------- */
  .code-example-editor {
    position: relative;
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--code-example-font-size);
    line-height: var(--code-example-line-height);
  }
  .code-example-src,
  .code-example-paint {
    box-sizing: border-box;
    margin: 0;
    padding: var(--code-example-pad);
    border: 0;
    font: inherit;
    letter-spacing: normal;
    tab-size: 2;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    scrollbar-gutter: stable;
  }
  .code-example-src {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 100%;
    min-block-size: 6rem;
    resize: vertical;
    outline: none;
    background: transparent;
    color: var(--foreground);
    caret-color: var(--foreground);

    &:focus-visible {
      box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ring) 45%, transparent);
    }
  }
  .code-example-editor[data-painted] .code-example-src {
    color: transparent;

    &::selection {
      color: transparent;
      background: color-mix(in oklch, var(--ring) 30%, transparent);
    }
  }
  .code-example-paint {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--foreground);
    pointer-events: none;
    visibility: hidden;
  }
  .code-example-editor[data-painted] .code-example-paint {
    visibility: visible;
  }
  /* Shiki writes each token's colours as --code-example-light / -dark */
  .code-example-paint span {
    color: var(--code-example-light, inherit);
  }
  .dark .code-example-paint span {
    color: var(--code-example-dark, inherit);
  }

  /* -- schema-generated state controls ------------------------------ */
  .code-example-states {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  .code-example-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;

    & > label {
      color: var(--muted-foreground);
      font-family: var(--font-mono);
      font-size: 0.75rem;
    }
    & :is(input[type="text"], input[type="number"], select) {
      box-sizing: border-box;
      width: 100%;
      height: 1.75rem;
      padding: 0 0.5rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--background);
      color: var(--foreground);
      font: inherit;
      font-size: 0.8125rem;
    }
    & input[type="checkbox"] {
      justify-self: start;
      width: 1rem;
      height: 1rem;
      accent-color: var(--primary);
    }
  }
  .code-example-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: 0.8125rem;

    & label {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--foreground);
      cursor: pointer;
    }
    & input[type="radio"] {
      width: 0.875rem;
      height: 0.875rem;
      margin: 0;
      accent-color: var(--primary);
    }
  }
  .code-example-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 0.75rem 0.75rem;

    & button {
      padding: 0.25rem 0.625rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      appearance: none;
      background: var(--secondary);
      color: var(--secondary-foreground);
      font: inherit;
      font-size: 0.75rem;
      cursor: pointer;
    }
  }
  .code-example-note {
    margin: 0;
    padding: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* -- fullscreen ---------------------------------------------------- */
  /* the whole card fills the screen (native fullscreen when granted, a
     fixed overlay otherwise): stage on top, open panel below it, the
     toolbar docked at the bottom, the exit button top-right */
  .code-example-full-exit {
    display: none;
  }
  .code-example[data-fullscreen] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--background);

    & > :not(.code-example-stage, .code-example-toolbar, .code-example-panel) {
      display: none;
    }
    & .code-example-stage {
      order: 1;
      flex: 1 1 0;
      min-height: 0;
      overflow: auto !important;
      border-inline: 0;
      border-top: 0;
      border-radius: 0;
    }
    & .code-example-panel {
      order: 2;
      flex: 0 1 auto;
      max-height: 40vh;
      overflow: auto;
      border-inline: 0;
      border-radius: 0;
    }
    & .code-example-toolbar {
      order: 3;
      flex: none;
      padding: 0.375rem 0.75rem;
      border: 0;
      border-top: 1px solid var(--border);
      border-radius: 0;
    }
    /* measured modes fill the stage instead of shrink-wrapping short content */
    & .code-example-screen:not([data-mode="phone"], [data-mode="tablet"]) .code-example-frame {
      min-height: calc(100dvh - 6.5rem) !important;
    }
    & .code-example-full-exit {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: color-mix(in oklch, var(--background) 85%, transparent);
      color: var(--foreground);
      cursor: pointer;

      &:hover {
        background: var(--muted);
      }
    }
  }

  /* phones: the labelled toolbar cannot fit - icon-only buttons (title and aria-label name them) */
  @media (max-width: 30rem) {
    :is(.code-example-vp, .code-example-tab, .code-example-copy, .code-example-reset, .code-example-full) span {
      display: none;
    }
    .code-example-size input[type="number"] {
      width: 3.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .code-example * {
      transition: none !important;
      animation: none !important;
    }
  }
  @media (prefers-contrast: more) {
    :is(.code-example-stage, .code-example-toolbar, .code-example-panel, .code-example-copy) {
      border-color: var(--foreground);
    }
    .code-example-toolbar button,
    .code-example-vp-x {
      color: var(--foreground);
    }
  }
  @media (forced-colors: active) {
    /* system colours own the editor: no paint layer, plain text */
    .code-example-editor[data-painted] .code-example-paint {
      visibility: hidden;
    }
    .code-example-editor[data-painted] .code-example-src {
      color: CanvasText;
    }
    .code-example-toolbar button[aria-pressed="true"] {
      outline: 2px solid Highlight;
    }
    :is(.code-example-stage, .code-example-toolbar, .code-example-panel) {
      border-color: CanvasText;
    }
  }
}

/* ── components/editorjs/editorjs.css ── */
/* -- Editor.js integration ------------------------------------------------ */
/* The holder Editor.js mounts into, in the theme's tokens: a shimmer until */
/* the editor is ready, the tools' own classes (ce-*, cdx-*) themed, a      */
/* readonly look, the inline marks a comment column adds.                   */
@layer components {
  .editorjs {
    --editorjs-measure: 44rem;
    --editorjs-min-height: 12rem;

    position: relative;
    display: block;
    min-block-size: var(--editorjs-min-height);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;

    & > script {
      display: none;
    }
    & > .editorjs-holder {
      max-inline-size: var(--editorjs-measure);
      margin-inline: auto;
    }

    /* until the editor mounted: a quiet shimmer where the document will be */
    &:not([data-ready]) > .editorjs-holder,
    &:not([data-ready]):not(:has(> .editorjs-holder))::before {
      content: "";
      display: block;
      min-block-size: var(--editorjs-min-height);
      border-radius: var(--radius-lg);
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--foreground) 6%, transparent),
        transparent
      );
      background-size: 200% 100%;
    }
    &[data-error]::after {
      content: "The editor could not be loaded.";
      display: block;
      color: var(--destructive);
      font-size: 0.875rem;
    }

    /* Editor.js's own structure, in tokens: the block, its content, the tools */
    & .codex-editor__redactor {
      padding-block-end: 2rem !important;
    }
    & .ce-block__content,
    & .ce-toolbar__content {
      max-inline-size: none;
      margin: 0;
    }
    & .ce-paragraph {
      line-height: inherit;
    }
    & .ce-header {
      margin-block: 1.25em 0.4em;
      font-family: var(--font-serif);
      font-weight: 600;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    & h1.ce-header {
      font-size: 2rem;
    }
    & h2.ce-header {
      font-size: 1.5rem;
    }
    & h3.ce-header {
      font-size: 1.25rem;
    }
    & h4.ce-header {
      font-size: 1.0625rem;
    }
    & .cdx-block {
      padding-block: 0.3em;
    }
    & .cdx-quote {
      padding-inline-start: 1rem;
      border-inline-start: 3px solid var(--primary);
      color: var(--muted-foreground);
      font-style: italic;
    }
    & .cdx-quote__text,
    & .cdx-quote__caption {
      border: 0;
      box-shadow: none;
      background: none;
      padding: 0;
      min-block-size: 0;
    }
    & .cdx-quote__caption {
      font-size: 0.875rem;
      font-style: normal;
    }
    & .ce-code__textarea {
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--muted);
      color: var(--foreground);
      font-family: var(--font-mono);
      font-size: 0.875rem;
    }
    & .ce-delimiter::before {
      color: var(--muted-foreground);
    }
    & .cdx-list {
      padding-inline-start: 0;
    }
    & .cdx-list__item {
      padding-block: 0.2em;
    }
    & .cdx-marker,
    & mark.cdx-marker {
      padding: 0.05em 0.1em;
      border-radius: var(--radius-sm);
      background: color-mix(in oklab, var(--chart-4) 45%, transparent);
      color: inherit;
    }
    & code.inline-code {
      padding: 0.1em 0.35em;
      border-radius: var(--radius-sm);
      background: var(--muted);
      color: var(--foreground);
      font-family: var(--font-mono);
      font-size: 0.875em;
    }
    & .tc-table,
    & .tc-wrap {
      --color-border: var(--border);
      --color-background: var(--card);
    }
    & .tc-table .tc-cell {
      border-color: var(--border);
    }
    & .tc-row--heading .tc-cell {
      font-weight: 600;
      background: var(--muted);
    }

    /* Editor.js paints its popovers, toolbars and the table's popover from its own custom
       properties, declared on those elements - redeclare them from the theme tokens (two
       classes beat its one), so dark mode and every preset reach them.
       VERIFIED: (editorjs.e2e "dark mode") no light surface or light-on-light text inside
       the editor with the + popover open on a .dark page. */
    & .ce-popover,
    & .ce-toolbar,
    & .ce-inline-toolbar,
    & .ce-conversion-toolbar,
    & .ce-settings,
    & .tc-popover,
    & .tc-toolbox,
    & .tc-wrap {
      --color-background: var(--popover) !important;
      --color-background-hover: var(--accent) !important;
      --color-background-item-hover: var(--accent) !important;
      --color-background-item-focus: var(--accent) !important;
      --color-background-icon-active: var(--accent) !important;
      --color-background-item-confirm: var(--destructive) !important;
      --color-background-item-confirm-hover: color-mix(in oklab, var(--destructive) 85%, var(--foreground)) !important;
      --color-background-confirm: var(--destructive) !important;
      --color-background-confirm-hover: color-mix(in oklab, var(--destructive) 85%, var(--foreground)) !important;
      --color-text-primary: var(--popover-foreground) !important;
      --color-text-secondary: var(--muted-foreground) !important;
      --color-text-icon-active: var(--accent-foreground) !important;
      --color-text-confirm: var(--destructive-foreground) !important;
      --color-border: var(--border) !important;
      --color-border-icon: var(--border) !important;
      --color-shadow: color-mix(in oklab, var(--foreground) 12%, transparent) !important;
      --color-shadow-item-focus: color-mix(in oklab, var(--ring) 35%, transparent) !important;
      --color-dark: var(--foreground) !important;
      --color-active-icon: var(--primary) !important;
      color-scheme: inherit;
    }
    & .ce-popover__container,
    & .ce-popover__search,
    & .cdx-search-field {
      background: var(--popover) !important;
      color: var(--popover-foreground) !important;
      border-color: var(--border) !important;
    }
    & .cdx-search-field__input {
      color: var(--popover-foreground) !important;
    }
    & .cdx-search-field__input::placeholder {
      color: var(--muted-foreground) !important;
    }
    & .ce-popover-item__icon,
    & .ce-popover-item__icon svg,
    & .tc-toolbox__toggler svg {
      background: transparent !important;
      color: var(--popover-foreground) !important;
    }
    & .cdx-list__checkbox-check {
      --checkbox-background: var(--card) !important;
      --color-border: var(--border) !important;
      --color-bg-checked: var(--primary) !important;
    }
    & .cdx-list__checkbox--checked .cdx-list__checkbox-check svg {
      stroke: var(--primary-foreground) !important;
    }
    & .tc-add-column,
    & .tc-add-row {
      background: var(--card) !important;
      color: var(--muted-foreground) !important;
    }
    & .tc-add-column:hover,
    & .tc-add-row:hover {
      background: var(--accent) !important;
      color: var(--accent-foreground) !important;
    }
    & .tc-table {
      --color-background: var(--card) !important;
    }

    /* the toolbars Editor.js shows: the + and the settings handle, the inline toolbar */
    & .ce-toolbar__plus,
    & .ce-toolbar__settings-btn {
      color: var(--muted-foreground) !important;
      background: var(--card) !important;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    & .ce-toolbar__plus:hover,
    & .ce-toolbar__settings-btn:hover {
      background: var(--accent) !important;
      color: var(--accent-foreground) !important;
    }
    & .ce-popover__container,
    & .ce-inline-toolbar,
    & .ce-conversion-toolbar {
      background: var(--popover);
      color: var(--popover-foreground);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }
    & .ce-popover-item:hover,
    & .ce-inline-tool:hover,
    & .ce-conversion-tool:hover {
      background: var(--accent);
      color: var(--accent-foreground);
    }
    & .ce-popover-item--active,
    & .ce-inline-tool--active {
      background: var(--accent);
      color: var(--accent-foreground);
    }
    & .ce-popover-item__icon,
    & .ce-conversion-tool__icon {
      background: var(--muted);
      border: 0;
      box-shadow: none;
    }
    & .cdx-search-field {
      background: var(--muted);
      border-color: var(--border);
      color: var(--foreground);
    }
    & .ce-block--selected .ce-block__content {
      background: color-mix(in oklab, var(--primary) 10%, transparent);
      border-radius: var(--radius-md);
    }

    &[data-readonly] {
      & .ce-toolbar {
        display: none;
      }
      & .codex-editor__redactor {
        cursor: default;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .editorjs:not([data-ready]) > .editorjs-holder,
    .editorjs:not([data-ready]):not(:has(> .editorjs-holder))::before {
      animation: editorjs-shimmer 1.4s linear infinite;
    }
  }
  @keyframes editorjs-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Editor.js fades every block in (its own .ce-block animation) and transitions its toolbars */
    .editorjs .ce-block,
    .editorjs .ce-toolbar,
    .editorjs .ce-inline-toolbar,
    .editorjs .ce-popover {
      animation: none;
      transition: none;
    }
  }
  @media (prefers-contrast: more) {
    .editorjs .ce-code__textarea,
    .editorjs .ce-toolbar__plus,
    .editorjs .ce-toolbar__settings-btn {
      border-color: var(--foreground);
    }
  }
  @media (forced-colors: active) {
    .editorjs .cdx-marker {
      background: Mark;
      color: MarkText;
    }
    .editorjs .ce-block--selected .ce-block__content {
      outline: 2px solid Highlight;
      background: none;
    }
  }
}