/* ============================================
   INLINE FIELD EDITING (brief + company-intel)
   Shared affordance for the manual, in-place field editors driven by the shared
   inline-field-edit.js (via brief-content-edit.js + intel-content-edit.js). The edit control sits next to
   each field's label and fades in on hover (mirroring the position-identity
   strip); clicking it swaps the value for an in-place editor. The simulation
   story page keeps its own scoped copy of these styles — this file deliberately
   does NOT target it.
   ============================================ */

@layer components {
  .position-brief-page,
  .company-intel-page {
    .editable-field {
      position: relative;
    }

    /* Label row that carries the hover-revealed edit trigger. */
    .editable-head {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }

    .editable-trigger {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      inline-size: 22px;
      block-size: 22px;
      padding: 0;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      transition:
        opacity 0.12s ease-out,
        background 0.12s ease-out,
        color 0.12s ease-out;
    }

    /* Reveal the trigger while hovering anywhere on the field, or when it has
       keyboard focus. */
    .editable-field:hover .editable-trigger,
    .editable-trigger:focus-visible {
      opacity: 1;
    }

    /* While editing, the in-place editor replaces the display + trigger. */
    .editable-field.editing .editable-display,
    .editable-field.editing .editable-trigger {
      display: none;
    }

    .editable-editor {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      margin-block-start: var(--space-xs);
    }

    .editable-input {
      inline-size: 100%;
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md, 10px);
      font: inherit;
      font-size: var(--fs-small);
    }

    textarea.editable-input {
      min-block-size: 6lh;
      resize: vertical;
      line-height: 1.6;
    }

    .editable-actions {
      display: flex;
      gap: var(--space-xs);
    }

    .editable-save,
    .editable-cancel {
      padding: var(--space-2xs) var(--space-lg);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      cursor: pointer;
    }

    /* Inline save error, shown on its own line in the open editor (the editor is
       a column flex, so this stacks under the action buttons). */
    .editable-error {
      font-size: var(--fs-xsmall);
    }

    /* Honest note shown only while the company name is being renamed: a rename
       relabels the workspace everywhere, but text the AI already generated keeps
       the old name until it is regenerated. Hidden until the editor is open. */
    .editable-hint {
      display: none;
      margin-block-start: var(--space-2xs);
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .company-name-field.editing .editable-hint {
      display: block;
    }

    /* ── string-array (chip) editor ── */
    .chip-set {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
    }

    .chip-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 16px;
      block-size: 16px;
      padding: 0;
      border-radius: 50%;
      font-size: 1em;
      line-height: 1;
      cursor: pointer;
    }

    .chip-add {
      display: flex;
      gap: var(--space-xs);

      .chip-input {
        flex: 1;
      }
    }

    .chip-add-btn {
      padding: var(--space-2xs) var(--space-md);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      cursor: pointer;
    }
  }
}

@layer theme {
  .position-brief-page,
  .company-intel-page {
    /* Placeholder so an empty field is still discoverable as editable. A text
       field is :empty; an array field is a <ul> whose only content is
       whitespace (no <li>), which :empty misses — so match both. */
    .editable-display:empty::before,
    ul.editable-display:not(:has(li))::before {
      content: 'Click the pencil to add…';
      color: var(--text-secondary);
    }

    .editable-trigger {
      background: none;
      border: none;
      color: var(--text-secondary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.12);
        color: var(--accent-primary);
      }

      &:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 1px;
      }
    }

    .editable-input {
      background: oklch(from var(--glass-tint) l c h / 0.04);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.14);
      color: var(--text-primary);

      &:focus-visible {
        outline: none;
        border-color: var(--accent-primary);
      }
    }

    .editable-save {
      background: oklch(from var(--accent-primary) l c h / 0.14);
      border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
      color: var(--accent-primary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.22);
      }
    }

    .editable-cancel {
      background: oklch(from var(--glass-tint) l c h / 0.04);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.1);
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
      }
    }

    .editable-error {
      color: var(--color-error);
    }

    .editable-hint {
      color: var(--text-secondary);
    }

    .chip {
      background: oklch(from var(--accent-primary) l c h / 0.1);
      border: 1px solid oklch(from var(--accent-primary) l c h / 0.2);
      color: var(--text-primary);
    }

    .chip-remove {
      background: none;
      border: none;
      color: var(--text-secondary);

      &:hover {
        color: var(--color-error);
      }
    }

    .chip-add-btn {
      background: oklch(from var(--accent-primary) l c h / 0.14);
      border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
      color: var(--accent-primary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.22);
      }
    }
  }
}