/* =================================================================
 * www/styles/base.css
 *
 * Primitives built on top of tokens.css. Load AFTER tokens.css.
 *
 * Scope rules:
 *   - Body, headings, links, and controls only.
 *   - No page layout (grids, sidebars, panels) — those stay inline.
 *   - Classnames match what our pages already use: `.primary`,
 *     `.danger`, `.ghost`, `.secondary`, `.preview-input`,
 *     `.preview-textarea`, `.preview-select`, `.preview-label`.
 *     Also exposes `.button` / `.input` / `.textarea` / `.select`
 *     as the preferred names going forward.
 *
 * Control visuals mirror the JDS reference components (see
 * vendor/judiciary-design-system/components-reference/) — 40px input
 * height, 1px border, soft focus ring, [aria-invalid="true"] = red.
 * ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--font-paragraph);
  color: var(--color-black);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--font-h1); color: var(--color-heading); margin: 0 0 var(--space-md) 0; }
h2 { font: var(--font-h3); color: var(--color-heading); margin: 0 0 var(--space-sm) 0; }
h3 { font: var(--font-h4); color: var(--color-heading); margin: 0 0 var(--space-sm) 0; }
h4 { font: var(--font-h5); color: var(--color-heading); margin: 0 0 var(--space-xs) 0; }
p  { margin: 0 0 var(--space-sm) 0; }

a {
  color: var(--color-primary-light);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre {
  font-family: var(--font-family-mono);
}

/* =================================================================
 * Buttons
 * ================================================================= */

.button, button.primary, button.danger, button.ghost, button.secondary,
button.fit-button {
  font-family: var(--font-family-primary);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
  background: var(--color-primary-light);
  color: var(--color-white);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.button:hover, button.primary:hover { opacity: 0.9; }
.button:focus-visible,
button.primary:focus-visible,
button.danger:focus-visible,
button.ghost:focus-visible,
button.secondary:focus-visible {
  outline: 2px solid var(--color-primary-base);
  outline-offset: 2px;
}
.button:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Variants (match existing class usage) */
button.primary, .button.primary { background: var(--color-primary-light); color: var(--color-white); border-color: var(--color-primary-light); }
button.danger,  .button.danger  { background: var(--color-danger-bg);     color: var(--color-danger);    border-color: var(--color-danger-bg); }
button.ghost,   .button.ghost   { background: var(--color-bg-surface);    color: var(--color-black);     border-color: var(--color-border-light); }
button.secondary, .button.secondary {
  background: var(--color-primary-superlight);
  color: var(--color-primary-base);
  border-color: transparent;
}

/* fit-button variants (data-fit-variant) — mirrors jds-button spec */
.fit-button[data-fit-variant="fill"]    { background: var(--color-primary-light); color: var(--color-white); border-color: var(--color-primary-light); }
.fit-button[data-fit-variant="outline"] { background: var(--color-bg-surface); color: var(--color-primary-base); border-color: var(--color-primary-light); }
.fit-button[data-fit-variant="ghost"]   { background: var(--color-bg-surface); color: var(--color-black); border-color: var(--color-border-light); }
.fit-button[data-fit-variant="text"]    { background: transparent; color: var(--color-primary-light); border-color: transparent; padding-left: 0; padding-right: 0; }
.fit-button[data-fit-variant="danger"]  { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-bg); }

.fit-button[data-fit-variant="outline"]:hover { background: var(--color-primary-superlight); }
.fit-button[data-fit-variant="ghost"]:hover   { background: var(--color-grey-lighter); border-color: var(--color-grey-dark); }
.fit-button[data-fit-variant="text"]:hover    { opacity: 0.9; }
.fit-button[data-fit-variant="danger"]:hover  { opacity: 0.9; }

/* fit-button: dashed variant — used for "+ Add" / "+ Upload" controls */
.fit-button[data-fit-variant="dashed"] {
  background: transparent;
  color: var(--color-grey-darkest);
  border: 1px dashed var(--color-grey);
  width: 100%;
}
.fit-button[data-fit-variant="dashed"]:hover { color: var(--color-primary-base); border-color: var(--color-primary-light); }

/* fit-button: danger-outline variant — used for "Remove" controls */
.fit-button[data-fit-variant="danger-outline"] {
  background: transparent;
  color: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
}
.fit-button[data-fit-variant="danger-outline"]:hover { background: var(--color-danger-bg); color: var(--color-white); }

/* fit-button sizes (data-fit-size) — mirrors jds-button S/M/L */
.fit-button[data-fit-size="sm"] { padding: 4px 12px; font-size: 13px; line-height: 20px; }
.fit-button[data-fit-size="md"] { padding: 8px 16px; font-size: 15px; line-height: 22px; }
.fit-button[data-fit-size="lg"] { padding: 12px 24px; font-size: 16px; line-height: 24px; }

/* Segmented toggle — pill-shaped button group for choose-one */
.fit-segmented {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fit-segmented > button {
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-right: 1px solid var(--color-border-light);
  background: var(--color-bg-surface);
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fit-segmented > button:last-child { border-right: none; }
.fit-segmented > button:hover:not([disabled]):not([aria-pressed="true"]) {
  background: var(--color-grey-lighter);
}
.fit-segmented > button[aria-pressed="true"] {
  background: var(--color-primary-light);
  color: var(--color-white);
}
.fit-segmented > button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fit-segmented > button:focus-visible {
  outline: 2px solid var(--color-primary-base);
  outline-offset: -2px;
  z-index: 1;
}

/* =================================================================
 * Text inputs / textareas / selects
 * ================================================================= */

.input, input[type="text"], input[type="number"], input[type="email"],
input[type="search"], input[type="url"], input[type="date"],
.preview-input,
.textarea, textarea, .preview-textarea,
.select, select, .preview-select {
  font: var(--font-small);
  color: var(--color-black);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  height: var(--control-height, 40px);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Native <select> reset: Safari paints its own platform chrome on
 * selects (thinner border, different focus ring). Disable the native
 * appearance so borders/rings match text inputs across browsers, then
 * re-add a caret via background-image. */
.select, select, .preview-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2351565F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: calc(var(--space-sm) * 2 + 12px);
}
.textarea, textarea, .preview-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--space-xs) var(--space-sm);
  line-height: 1.45;
  resize: vertical;
}
.input:focus, input:focus, .preview-input:focus,
.textarea:focus, textarea:focus, .preview-textarea:focus,
.select:focus, select:focus, .preview-select:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}
.input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--color-grey-darkest);
  opacity: 0.6;
}
.input:disabled, input:disabled, textarea:disabled, select:disabled {
  background: var(--color-grey-lighter);
  cursor: not-allowed;
}

/* Custom widget control boxes — baseline matches .input so focus and
 * invalid rings share target, radius, and thickness with native inputs.
 * .combo-input-area also owns its own layout (flex), padding, and a
 * `min-height: 40px` floor so the wrapper aligns with the global input
 * height. The bare <input> inside it must not inherit `input { height:
 * 40px }` — see the override below. */
.combo-input-area,
[data-fit-widget="ref-picker"] > input {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combo-input-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 3px 6px;
  min-height: var(--control-height, 40px);
  cursor: text;
}
[data-fit-widget="combo-box"][data-fit-mode="readOnly"] .combo-input-area {
  background: var(--color-grey-lighter);
  cursor: default;
}
.combo-input-area:focus-within,
[data-fit-widget="ref-picker"] > input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}
/* The bare <input> *inside* a combo-box is a transparent text field,
 * not a control box — it must not paint its own focus ring, or the
 * combo renders two rings (inner on <input>, outer on .combo-input-area).
 * The outer .combo-input-area:focus-within rule above owns the ring.
 * It also must not inherit `input[type="text"] { height: 40px }` — the
 * wrapper owns the height (40px floor); the inner input shrinks to its
 * natural line-height and centers via the wrapper's align-items. */
.combo-input-area > input[type="text"] {
  flex: 1;
  min-width: 60px;
  height: auto;
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: var(--color-black);
  background: transparent;
}
.combo-input-area > input:focus {
  border-color: transparent;
  box-shadow: none;
}

/* Error state — mirrors JDS jds-text-input :host([error]).
 * attachFieldErrorText() sets aria-invalid on the .block-wrap (not the
 * control itself, since custom widgets are wrapper <div>s). The rules
 * below cascade the invalid ring from the wrap to whichever control it
 * holds — native inputs as direct children, or custom widgets via their
 * own classes — so focus and invalid paint the same shape on the same
 * target. The generic [aria-invalid="true"] selector is deliberately
 * avoided: applied to the wrap it would outline label+control with a
 * different shape than the control's focus ring. */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.preview-input[aria-invalid="true"],
.preview-textarea[aria-invalid="true"],
.preview-select[aria-invalid="true"],
.block-wrap[aria-invalid="true"] > input,
.block-wrap[aria-invalid="true"] > textarea,
.block-wrap[aria-invalid="true"] > select,
.block-wrap[aria-invalid="true"] > .preview-input,
.block-wrap[aria-invalid="true"] > .preview-textarea,
.block-wrap[aria-invalid="true"] > .preview-select,
.block-wrap[aria-invalid="true"] .combo-input-area,
.block-wrap[aria-invalid="true"] [data-fit-widget="ref-picker"] > input {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}

/* =================================================================
 * List item — row wrapper for hasMany (repeatable) items
 * ================================================================= */

.fit-list-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  padding: 0.6rem;
  margin-bottom: var(--space-xs);
}
.fit-list-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.fit-list-item__title {
  font: var(--font-small-bold);
  color: var(--color-heading);
  flex: 1 1 0;
  min-width: 0;
}
/* Canonical 12-col child-block grid — the SINGLE source of truth for
   "child fields laid out across 12 columns". It owns BOTH halves of the
   contract: the grid container AND the per-child span default. Every
   container holding renderChild() output (checklist reveal, hasMany
   rows, file-row child grids, …) just adds `class="fit-grid"` plus a
   context class for chrome, and never re-declares the template — so a
   child grid cannot exist without the span rule. Child-field width
   regressed repeatedly when those two halves drifted apart; keeping
   them in one rule, in base.css (loaded on every page), is the fix.
   See tasks/done/2026-05-24-checklist-reveal-child-width.md. */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-sm);
}
.fit-grid > * { grid-column: span var(--span, 12); }
.fit-file-child > * { --span: 6; }

/* =================================================================
 * Labels, help text, error text
 * ================================================================= */

.label, .preview-label {
  display: block;
  font: var(--font-small);
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 4px;
}
.help-text {
  font: var(--font-xs);
  color: var(--color-grey-darkest);
  margin-top: 4px;
}
.error-text {
  font: var(--font-small);
  font-size: 13px;
  color: var(--color-primary-light);
  margin-top: 4px;
}

/* Fieldset / legend */
.fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0 0 var(--space-md) 0;
  background: var(--color-bg-surface);
}
.legend {
  font: var(--font-h5);
  color: var(--color-heading);
  padding: 0 var(--space-xs);
}

/* =================================================================
 * Utilities
 * ================================================================= */

.muted { color: var(--color-grey-darkest); }
.small { font: var(--font-small); }
.mono  { font-family: var(--font-family-mono); }

/* Status pill — used on cases/analytics/inbox cards */
.status-pill {
  display: inline-block;
  padding: 2px var(--space-xs);
  border-radius: 999px;
  font: var(--font-xs);
  font-weight: 600;
}
.status-pill.completed { background: var(--color-status-completed-bg); color: var(--color-status-completed); }
.status-pill.pending   { background: var(--color-status-pending-bg);   color: var(--color-status-pending); }
.status-pill.neutral   { background: var(--color-status-not-started-bg); color: var(--color-status-not-started); }

/* =================================================================
 * Accordion — mirrors vendor/.../jds-accordion visually but uses
 * native <details>/<summary> for a11y + keyboard support for free.
 * ================================================================= */

details.accordion {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
details.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--color-grey-lighter);
  cursor: pointer;
  font: var(--font-h5);
  color: var(--color-black);
  list-style: none;
  user-select: none;
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::after {
  content: "▼";
  font-size: 12px;
  color: var(--color-grey-darkest);
  transition: transform 0.2s;
}
details.accordion[open] > summary::after {
  transform: rotate(180deg);
}
details.accordion > summary:focus-visible {
  outline: 2px solid var(--color-primary-base);
  outline-offset: -2px;
}
details.accordion > .accordion-body {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}