@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /**
 * ReviewEditor global styles.
 *
 * These styles are global (not Svelte-scoped) and are included in the main
 * styles/components.css aggregator. We use the `.review-editor-container`
 * prefix consistently to prevent style leakage.
 */

  /* =========================================================================
 * Layout Container
 * ========================================================================= */

  .review-editor-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    position: relative;
    /* Card root carries the SINGLE background. Per the surface nesting rule
     (see tokens-base.css), every region inside (controls, main, front-matter,
     editor wrapper) inherits — they must not redeclare `background:`,
     otherwise visible color bands appear between siblings. */
    background: var(--cinder-surface-raised);
  }

  /* When sidebar is open, main layout becomes a 2-column grid on wide containers. */
  .review-editor-container:has(.comment-sidebar) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
  }

  /* =========================================================================
 * Controls Bar Connection
 * Connect the controls bar visually to the content below
 * ========================================================================= */

  .review-editor-container > .review-editor-controls {
    /* Controls bar spans the full width when sidebar is open */
    grid-column: 1 / -1;
  }

  /* Connect controls bar to MarkdownEditor's toolbar when in editor view */
  .review-editor-container[data-view='editor'] > .review-editor-controls {
    border-bottom: none;
    border-radius: var(--cinder-radius-md) var(--cinder-radius-md) 0 0;
  }

  /* For diff/summary views, controls bar has bottom border but no radius on bottom */
  .review-editor-container:not([data-view='editor']) > .review-editor-controls {
    border-bottom: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md) var(--cinder-radius-md) 0 0;
  }

  /*
 * Connect EditorToolbar to controls bar when present.
 * MarkdownEditor removes the toolbar's bottom border via its [data-has-toolbar] styles
 * to visually connect toolbar and editor. Here we restore it because the controls bar
 * above already provides visual connection. This rule only applies when the toolbar
 * exists (i.e., when MarkdownEditor is in non-readonly mode with showToolbar=true).
 */
  .review-editor-container[data-view='editor']
    .markdown-editor-wrapper[data-has-toolbar]
    .editor-toolbar {
    border-radius: 0;
    border-top: none;
    border-inline-start: none;
    border-inline-end: none;
    border-bottom: 1px solid var(--cinder-border);
  }

  /* =========================================================================
 * Main Content Area
 * ========================================================================= */

  .review-editor-main {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
    min-height: 300px; /* Consistent height across views to prevent layout shift */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Unified border for main content area - connects to controls above */
    border: 1px solid var(--cinder-border);
    border-top: none;
    border-radius: 0 0 var(--cinder-radius-md) var(--cinder-radius-md);
    /* Background inherited from .review-editor-container per surface nesting rule. */
  }

  /*
 * Make the markdown-editor-wrapper fill the main content area.
 * Border/radius/overflow are reset in review-editor.svelte via a :global() rule
 * at (0,3,0) specificity, which wins over the Svelte-scoped rule on the wrapper.
 */
  .review-editor-main .markdown-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .review-editor-main .markdown-editor-wrapper .markdown-editor.surface {
    border: none;
    border-radius: 0;
    flex: 1;
  }

  .review-editor-front-matter {
    border-bottom: 1px solid var(--cinder-border-muted);
    /* Background inherited from .review-editor-container per surface nesting rule. */
  }

  .review-editor-front-matter__header {
    padding: var(--cinder-space-3) var(--cinder-space-4) 0;
  }

  .review-editor-front-matter__title {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-2xs);
    font-weight: var(--cinder-font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .review-editor-front-matter__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--cinder-space-3);
    padding: var(--cinder-space-3) var(--cinder-space-4) var(--cinder-space-4);
  }

  .review-editor-front-matter__field {
    min-width: 0;
  }

  .review-editor-front-matter__field .cinder-textarea {
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-sm);
  }

  .review-editor-front-matter__empty {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
  }

  .review-editor-main > .diff-viewer {
    border: none;
    border-radius: 0;
  }

  /* Summary view inherits the main container's background */
  .review-editor-main > .summary-view {
    border: none;
    border-radius: 0;
  }

  /* When sidebar is open, main loses its inline-end border-radius */
  .review-editor-container:has(.comment-sidebar) .review-editor-main {
    border-inline-end: none;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--cinder-radius-md);
    border-end-end-radius: 0;
  }

  /* Sidebar adjusts height and connects visually to main content */
  .review-editor-container > .comment-sidebar {
    height: auto;
    max-height: 100%;
    border-top: 1px solid var(--cinder-border);
    border-bottom: 1px solid var(--cinder-border);
    border-inline-end: 1px solid var(--cinder-border);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: var(--cinder-radius-md);
  }

  /* In diff/summary views, sidebar top connects to controls bar bottom border */
  .review-editor-container:not([data-view='editor']) > .comment-sidebar {
    border-top: none;
  }

  /*
   * Narrow-container responsive strategy for the comment sidebar.
   * At container widths ≤ 640px the 280px sidebar would take more than 40% of
   * the available width and crush the editor. Switch to a stacked layout:
   * sidebar moves below the main content area, spanning the full width.
   * Uses @container (platform policy: prefer container queries over viewport
   * @media(width) for component-level breakpoints).
   *
   * IMPORTANT: this block must come AFTER the unconditional sidebar-open rules
   * above (which set border-inline-end: none on .review-editor-main) so the
   * container query's same-specificity overrides win in source order.
   */
  @container (max-width: 640px) {
    .review-editor-container:has(.comment-sidebar) {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr auto;
    }

    .review-editor-container:has(.comment-sidebar) > .review-editor-main {
      border-inline-end: 1px solid var(--cinder-border);
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    .review-editor-container:has(.comment-sidebar) > .comment-sidebar {
      width: 100%;
      min-width: 0;
      max-width: none;
      height: auto;
      max-height: 280px;
      border-inline-start: none;
      border-top: 1px solid var(--cinder-border);
      border-bottom: 1px solid var(--cinder-border);
      border-inline-end: 1px solid var(--cinder-border);
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      border-end-start-radius: var(--cinder-radius-md);
      border-end-end-radius: var(--cinder-radius-md);
    }
  }

  /* =========================================================================
 * Summary View (DEP-47)
 * ========================================================================= */

  /* Summary view empty state container */
  .review-editor-container .summary-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cinder-space-4);
  }

  .review-editor-container .summary-empty {
    text-align: center;
    padding: var(--cinder-space-8);
    color: var(--cinder-text-muted);
  }

  .review-editor-container .summary-hint {
    font-size: var(--cinder-text-xs);
    margin-top: var(--cinder-space-2);
  }

  /* =========================================================================
 * Comment Anchor Decorations (DEP-39)
 * ========================================================================= */

  /* Standard anchored comment highlight */
  .review-editor-container .comment-anchor {
    background: color-mix(in oklch, var(--cinder-accent), transparent 85%);
    border-bottom: 2px solid var(--cinder-accent);
    cursor: pointer;
    transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  @media (hover: hover) {
    .review-editor-container .comment-anchor:hover {
      background: color-mix(in oklch, var(--cinder-accent), transparent 75%);
    }
  }
}