/* ==========================================================
   DefaultObjectRenderer
   Expandable, comma-free rich-text object presentation

   Compact:
     object { a: 0 b: object { … } }

   Expanded:
     object {
       a: 0
       b: object {
         c: 0
         d: "1"
       }
     }

   Requires the existing renderer's HTML structure:
     .default-object-view
       details.default-object-view__node
         summary.default-object-view__summary
         .default-object-view__properties
           .default-object-view__property
             .default-object-view__key
             value
   ========================================================== */

   .default-object-view {
    --obj-text: #d7deea;
    --obj-muted: #8491a5;
    --obj-key: #82aaff;
    --obj-string: #a5d6a7;
    --obj-number: #f2c879;
    --obj-boolean: #f2a7c3;
    --obj-punctuation: #8491a5;
    --obj-focus: #6ea8fe;
  
    --obj-indent: 1.5em;
    --obj-property-gap: 0.85em;
  
    color: var(--obj-text);
    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      monospace;
    font-size: 0.9rem;
    line-height: 1.9;
    overflow-wrap: anywhere;
    white-space: normal;
    overflow-y: auto;
    overflow-x: auto;
  }
  
  /* ----------------------------------------------------------
     Expandable object nodes
     ---------------------------------------------------------- */
  
  .default-object-view__node {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  .default-object-view__summary {
    display: inline;
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style: none;
    color: var(--obj-muted);
    border-radius: 3px;
    outline: none;
  }
  
  .default-object-view__summary::-webkit-details-marker {
    display: none;
  }
  
  .default-object-view__summary::marker {
    content: "";
  }
  
  .default-object-view__summary::before {
    content: "▸";
    display: inline-block;
    width: 1.1em;
    color: var(--obj-muted);
    transition: color 140ms ease;
  }
  
  .default-object-view__node[open] >
  .default-object-view__summary::before {
    content: "▾";
  }
  
  .default-object-view__summary:hover {
    color: var(--obj-focus);
  }
  
  .default-object-view__summary:focus-visible {
    outline: 2px solid var(--obj-focus);
    outline-offset: 3px;
  }
  
  .default-object-view__label {
    color: var(--obj-muted);
    font-size: 0.88em;
  }
  
  .default-object-view__summary:hover .default-object-view__label {
    color: var(--obj-focus);
  }
  
  /* ----------------------------------------------------------
     Object punctuation
  
     Put the opening brace on the summary line so nested
     objects render correctly without requiring a parent
     property to generate their punctuation.
     ---------------------------------------------------------- */
  
  .default-object-view__node[open] >
  .default-object-view__summary::after {
    content: " { ";
    color: var(--obj-punctuation);
    white-space: pre;
  }
  
  .default-object-view__node:not([open]) >
  .default-object-view__summary::after {
    content: " { … }";
    color: var(--obj-punctuation);
    white-space: pre;
  }
  
  /* ----------------------------------------------------------
     Property container: compact inline mode
     ---------------------------------------------------------- */
  
  .default-object-view__properties {
    display: inline;
    margin: 0;
    padding: 0;
  }
  
  .default-object-view__properties::before {
    content: none;
  }
  
  .default-object-view__properties::after {
    content: " }";
    color: var(--obj-punctuation);
    white-space: pre;
  }
  
  /* ----------------------------------------------------------
     Properties and key/value pairs
     ---------------------------------------------------------- */
  
  .default-object-view__property {
    display: inline;
    margin: 0;
    padding: 0;
  }
  
  .default-object-view__property +
  .default-object-view__property {
    margin-inline-start: var(--obj-property-gap);
  }

  /* Commas between entries, but not after the last entry */
  .default-object-view__property:not(:last-child)::after {
    content: ",";
  }  

  .default-object-view__key {
    color: var(--obj-key);
    overflow-wrap: anywhere;
  }
  
  .default-object-view__key::after {
    content: ": ";
    color: var(--obj-punctuation);
    white-space: pre;
  }
  
  /* No commas: whitespace separates adjacent properties. */
  
  /* ----------------------------------------------------------
     Primitive values
     ---------------------------------------------------------- */
  
  .default-value-view {
    display: inline;
    white-space: pre-wrap;
  }
  
  .default-value-view--string {
    color: var(--obj-string);
  }
  
  .default-value-view--number,
  .default-value-view--bigint {
    color: var(--obj-number);
  }
  
  .default-value-view--boolean {
    color: var(--obj-boolean);
  }
  
  .default-value-view--null,
  .default-value-view--undefined {
    color: var(--obj-muted);
    font-style: italic;
  }
  
  .default-value-view--symbol {
    color: #c4a7e7;
  }
  
  /* ----------------------------------------------------------
     Automatic block mode
  
     If a direct property contains an expanded object,
     every property belonging to this object becomes a block.
  
     The direct-child constraint is important: expanding a
     deeply nested descendant should not change unrelated
     ancestor layouts.
     ---------------------------------------------------------- */
  
  .default-object-view__properties:has(
    > .default-object-view__property
      > .default-object-view__node[open]
  ) {
    display: block;
    padding-inline-start: var(--obj-indent);
  }
  
  /* Also support a direct property whose value is wrapped
     in another element before the nested object. */
  
  .default-object-view__properties:has(
    > .default-object-view__property
      .default-object-view__node[open]
  ) {
    display: block;
    padding-inline-start: var(--obj-indent);
  }
  
  .default-object-view__properties:has(
    > .default-object-view__property
      .default-object-view__node[open]
  ) > .default-object-view__property {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  .default-object-view__properties:has(
    > .default-object-view__property
      .default-object-view__node[open]
  ) > .default-object-view__property
    + .default-object-view__property {
    margin-inline-start: 0;
  }
  
  /* Align the closing brace with the opening brace. */
  
  .default-object-view__properties:has(
    > .default-object-view__property
      .default-object-view__node[open]
  )::after {
    display: block;
    margin-inline-start: calc(-1 * var(--obj-indent));
    content: "}";
    color: var(--obj-punctuation);
    white-space: pre;
  }
  
  /* ----------------------------------------------------------
     Arrays
     ---------------------------------------------------------- */
  
  .default-object-view__array[open] >
  .default-object-view__summary::after {
    content: " [";
  }

  .default-object-view__array:not([open]) >
  .default-object-view__summary::after {
    content: " [ … ]";
  }
  
  .default-object-view__array >
  .default-object-view__properties::after {
    content: " ]";
  }
  
  .default-object-view__array >
  .default-object-view__properties::before {
    content: none;
  }
  
  /* ----------------------------------------------------------
     Special values and errors
     ---------------------------------------------------------- */
  
  .default-object-view__leaf {
    display: inline;
  }
  
  .default-object-view__circular,
  .default-object-view__truncated,
  .default-object-view__accessor,
  .default-object-view__function {
    color: var(--obj-muted);
    font-style: italic;
  }
  
  .default-object-view__error {
    color: #f28b82;
  }
  
  /* ----------------------------------------------------------
     Accessibility and motion preferences
     ---------------------------------------------------------- */
  
  @media (prefers-reduced-motion: reduce) {
    .default-object-view__summary::before {
      transition: none;
    }
  }