/**
 * @fileoverview MathPix Context Form Styles — Stage 7 (alt-text), Parcel 4
 * @module mathpix-context.css
 *
 * @description
 * Layout-only styling for the two Document Context forms added in Parcel 3:
 *   - #resume-context-form  (inside #resume-panel-context)
 *   - #context-form         (inside #panel-context)
 * Both share the .mathpix-context-form class, so EVERY selector here is
 * scoped under that class and nothing in this file affects any other
 * component.
 *
 * Theming approach: this project keeps component stylesheets colour-free —
 * structural files use `currentColor` and neutral values while the actual
 * light/dark colours live per-selector in light.css / dark.css. This file
 * follows that convention so it inherits BOTH themes for free: text colour
 * is inherited from the active theme and borders/focus use `currentColor`.
 * It deliberately introduces no colour literals.
 *
 * Form controls inherit their look and their focus indicator from the app's
 * existing stylesheets: light.css / dark.css give input[type="text"] and
 * textarea a themed border AND a themed :focus-visible outline (both
 * !important); selects fall back to the browser's own border and focus ring.
 * This file therefore adds NO focus styling (doing so would override the
 * app's themed focus outline) — it only gives the selects a matching border
 * so the three control types sit comfortably together, and handles layout.
 *
 * WCAG 2.2 AA: stacked-then-two-column reflow with no horizontal scroll at
 * 320px / 200% zoom (1.4.10). The keyboard focus indicator (2.4.7) is
 * supplied by the app's global rules, not here.
 */

/* ============================================================================
   FORM — fill the available width
   ============================================================================ */

/* The app applies a global `form { max-width: 750px }` (an inline <style> in
   tools.html) that caps EVERY form. That cap leaves the Context form floating
   in the left ~65% of the (much wider) tab panel with a large empty gutter on
   the right. Lift the cap for this form only so it fills its panel; the class
   selector out-specifies the bare `form` element selector, so no !important is
   needed. The two-column grid below then spreads across the full width. */
.mathpix-context-form {
  width: 100%;
  max-width: none;
}

/* ============================================================================
   FIELDSET — base (narrow viewports): stacked, label above control
   ============================================================================ */

/* Card treatment: padding + radius give the themed background (light.css /
   dark.css) room to read as a panel, matching the app's other titled cards
   (e.g. .ally-config-section, .session-manager-group). The themed legend bar
   sits at the top-left as the card's header chip.
   Also reset the fieldset's intrinsic min-width (browsers default fieldsets to
   min-width: min-content, which would prevent shrinking and cause horizontal
   overflow at 320px). */
.mathpix-context-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid currentColor; /* background + any tint live in the theme files */
  border-radius: 4px;
  margin: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  min-width: 0;
}

.mathpix-context-form legend {
  /* legend keeps the app's global legend typography; just give it room
     above the stacked fields. */
  width: 100%;
  margin-bottom: 0.25rem;
}

/* Each field stacks its label above its single control. */
.mathpix-context-form .mathpix-context-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0; /* allow the control to shrink rather than overflow */
}

.mathpix-context-form label {
  font-weight: 600;
}

/* Context-field hints — mirror the Edit-Alt callout treatment so help
   reads consistently across the Edit and Context forms (Stage 10).
   No colour set: contrast is inherited from body text, unchanged from
   the P4 baseline. */
.mathpix-context-form .field-hint {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  /* border-left split into longhands (width + style only) so the theme files
     can set ONLY the accent colour (border-left-color) without a shorthand
     here — which loads after the theme files — resetting it. border-left-color
     is deliberately left unset so it defaults to currentColor until a theme
     overrides it. */
  border-left-width: 3px;
  border-left-style: solid;
  background: transparent;
}

/* ============================================================================
   CONTROLS — fill their column and bring the selects into line
   ============================================================================ */

/* Borders are deliberately NOT set here: light.css / dark.css already theme
   the border of input[type="text"], textarea AND select (0.2rem solid), so
   all three control types pick up a consistent, themed border for free.
   This rule only handles sizing/alignment and normalises the selects, whose
   global rule otherwise forces a monospace 1.2rem font and stray margins
   that would break column alignment. */
.mathpix-context-form input[type="text"],
.mathpix-context-form select,
.mathpix-context-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0; /* clears the global select margins so columns align */
  font-family: inherit; /* the global `select` rule forces monospace */
  font-size: 1rem;
  padding: 0.5rem 0.625rem;
}

/* ============================================================================
   TWO-COLUMN GRID — wide viewports (>=768px)
   ============================================================================ */

@media (min-width: 768px) {
  .mathpix-context-form fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }

  /* Legend and the Extra Information textarea each span both columns. */
  .mathpix-context-form legend {
    grid-column: 1 / -1;
  }

  .mathpix-context-form .mathpix-context-field:has(textarea) {
    grid-column: 1 / -1;
  }
}

/* ============================================================================
   AI AUTO-FILL CONTROL (P5) — layout only
   The `.mathpix-context-ai` block follows the fieldset card and holds the
   Analyse button, its hint, the cost preview, the progress host, the
   before/after summary and the Undo button. Colour is theme-owned (light.css /
   dark.css); the before/after emphasis is carried HERE by weight + style — not
   colour alone — so the distinction survives in greyscale and for colour-blind
   users. Borders and focus rings for the two buttons are also theme-owned and
   deliberately absent here: the theme files load first, so a border shorthand
   in this file would reset their colour.
   ============================================================================ */

.mathpix-context-ai {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Analyse + Undo buttons: icon + label aligned, comfortable target size, sized
   to their content at the start of the row (the surrounding callouts stretch). */
.mathpix-context-ai #resume-context-ai-analyse,
.mathpix-context-ai #resume-context-ai-undo {
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

/* Set `display` only where the button is visible: the Undo button keeps the
   `hidden` attribute until a fill completes, and an unconditional `display`
   would override `[hidden]`. */
.mathpix-context-ai #resume-context-ai-analyse,
.mathpix-context-ai #resume-context-ai-undo:not([hidden]) {
  display: inline-flex;
}

.mathpix-context-ai #resume-context-ai-analyse:disabled {
  cursor: not-allowed;
}

/* Cost preview — a compact left-accent callout (mirrors the convert size
   readout); collapses entirely until it carries text. */
#resume-context-ai-cost {
  padding: 0.4rem 0.6rem;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 4px;
  font-size: 0.9rem;
}

#resume-context-ai-cost:empty {
  display: none;
}

/* Progress — a house-style status row (icon-library icon + label) rendered by
   the module as a left-accent callout, congruent with the cost/summary panels.
   Collapses entirely between runs; colour (per data-state) is theme-owned. */
#resume-context-ai-progress:empty {
  display: none;
}

#resume-context-ai-progress:not(:empty) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 4px;
  font-size: 0.9rem;
}

.context-ai-progress-icon {
  display: inline-flex;
  flex: none;
}

.context-ai-progress-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Summary — a heading plus one left-accent callout row per field. */
#resume-context-ai-summary:empty {
  display: none;
}

.context-ai-summary-heading {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.context-ai-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.context-ai-summary-row {
  padding: 0.4rem 0.6rem;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.context-ai-summary-label {
  font-weight: 600;
}

.context-ai-summary-arrow {
  padding: 0 0.25rem;
}

#resume-context-ai-summary {
  border: 1px solid currentcolor;

  padding: 1rem;
  border-radius: 4px;
}

/* Non-colour emphasis for the before/after pair: the prior value is italic and
   the new value is bold, so the change reads without relying on colour. Theme
   files layer colour on top of these cues. */
.context-ai-summary-before {
  font-style: italic;
}

.context-ai-summary-after {
  font-weight: 700;
}

/* Spinner — only animates when the user has NOT asked for reduced motion, so
   reduced motion is the safe default (no animation outside this block). */
@media (prefers-reduced-motion: no-preference) {
  .context-ai-progress-spin .icon {
    animation: context-ai-progress-spin 0.9s linear infinite;
  }
}

@keyframes context-ai-progress-spin {
  to {
    transform: rotate(360deg);
  }
}