/* ==========================================================================
   iCorrect design contract: components.css
   Reference implementation of the core components. Uses ONLY tokens.css.
   No hex values, no border:, no gradients, no weights outside 400/500/600.
   Import after tokens.css. Prefix is ic- so it cannot collide with a theme.
   ========================================================================== */

/* ---- Type utilities ------------------------------------------------------ */
.t-app-title   { margin: 0; color: var(--text-heading); font-size: var(--app-title-size); font-weight: var(--weight-semibold); line-height: var(--app-title-leading); letter-spacing: var(--app-title-tracking); text-wrap: balance; }
.t-app-section { margin: 0; color: var(--text-heading); font-size: var(--app-section-size); font-weight: var(--weight-semibold); line-height: var(--app-section-leading); letter-spacing: var(--app-section-tracking); text-wrap: balance; }
.t-app-item    { margin: 0; color: var(--text-heading); font-size: var(--app-item-size); font-weight: var(--weight-semibold); line-height: var(--app-item-leading); letter-spacing: var(--app-item-tracking); }
.t-app-body    { margin: 0; color: var(--text-body); font-size: var(--app-body-size); font-weight: var(--weight-regular); line-height: var(--app-body-leading); text-wrap: pretty; }
.t-app-body-lg { margin: 0; color: var(--text-body); font-size: var(--app-body-lg-size); font-weight: var(--weight-regular); line-height: var(--app-body-lg-leading); text-wrap: pretty; }
.t-secondary   { margin: 0; color: var(--text-secondary); font-size: var(--app-secondary-size); font-weight: var(--weight-regular); line-height: var(--app-secondary-leading); text-wrap: pretty; }

.t-display-xl  { margin: 0; color: var(--text-heading); font-size: var(--display-xl-size); font-weight: var(--weight-semibold); line-height: var(--display-xl-leading); letter-spacing: var(--display-xl-tracking); text-wrap: balance; }
.t-display     { margin: 0; color: var(--text-heading); font-size: var(--display-size); font-weight: var(--weight-semibold); line-height: var(--display-leading); letter-spacing: var(--display-tracking); text-wrap: balance; }
.t-h1          { margin: 0; color: var(--text-heading); font-size: var(--h1-size); font-weight: var(--weight-semibold); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); text-wrap: balance; }
.t-h2          { margin: 0; color: var(--text-heading); font-size: var(--h2-size); font-weight: var(--weight-semibold); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); text-wrap: balance; }
.t-h3          { margin: 0; color: var(--text-heading); font-size: var(--h3-size); font-weight: var(--weight-semibold); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking); text-wrap: balance; }
.t-h4          { margin: 0; color: var(--text-heading); font-size: var(--h4-size); font-weight: var(--weight-semibold); line-height: var(--h4-leading); letter-spacing: var(--h4-tracking); text-wrap: balance; }
.t-body-lg     { margin: 0; color: var(--text-body); font-size: var(--body-lg-size); line-height: var(--body-lg-leading); text-wrap: pretty; }
.t-body        { margin: 0; color: var(--text-body); font-size: var(--body-size); line-height: var(--body-leading); text-wrap: pretty; }
.t-caption     { margin: 0; color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--weight-medium); line-height: var(--caption-leading); }

@media (max-width: 640px) {
  .t-display-xl { font-size: var(--display-xl-size-phone); }
  .t-display    { font-size: var(--display-size-phone); }
  .t-h1         { font-size: var(--h1-size-phone); }
  .t-h2         { font-size: var(--h2-size-phone); }
  .t-h3         { font-size: var(--h3-size-phone); }
  .t-app-title  { font-size: var(--app-title-size-phone); }
}

/* ---- Label: Geist Mono, uppercase, quiet. Section labels and metadata only ---- */
.ic-label {
  margin: 0;
  color: var(--label-color);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* ---- Layout helpers ------------------------------------------------------ */
.ic-page  { max-width: var(--page-max-app); margin: 0 auto; padding: var(--space-8) var(--pad-page-app); }
.ic-stack { display: flex; flex-direction: column; gap: var(--gap); }
.ic-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

/* ---- Card: white, 1px shadow edge. Quiet by default ------------------------ */
.ic-card {
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--edge);
}
.ic-card--lift {                 /* marketing only */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-lift);
}
.ic-card-head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }

/* ---- Button: flat. Blue is the one primary action per view ------------------ */
.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--action);
  color: var(--text-on-action);
  font-size: var(--app-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--app-button-leading);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ic-btn:hover  { background: var(--action-hover); }
.ic-btn:active { background: var(--action-pressed); }
.ic-btn:disabled, .ic-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.ic-btn--secondary { background: var(--surface-card); color: var(--text-heading); box-shadow: var(--edge-input); }
.ic-btn--secondary:hover  { background: var(--surface-quiet); box-shadow: var(--edge-input-hover); }
.ic-btn--secondary:active { background: var(--gray-100); box-shadow: var(--edge-input-hover); }

.ic-btn--ghost { background: transparent; color: var(--text-heading); }
.ic-btn--ghost:hover  { background: var(--black-alpha-4); }
.ic-btn--ghost:active { background: var(--black-alpha-8); }

.ic-btn--danger { background: var(--surface-card); color: var(--danger-text); box-shadow: 0 0 0 1px var(--danger-ink); }
.ic-btn--danger:hover { background: var(--danger-tint); }

.ic-btn--small { min-height: var(--target-min); padding: 0 var(--space-4); font-size: var(--app-secondary-size); }   /* still 44px tall */
.ic-btn--block { width: 100%; }

/* ---- Field: mono label above, 48px control, value in Geist ------------------ */
.ic-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ic-field > .ic-label { display: block; }
.ic-input, .ic-select, .ic-textarea {
  width: 100%;
  min-height: var(--field-height);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: var(--app-input-size);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  box-shadow: var(--edge-input);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.ic-textarea { min-height: 96px; padding: var(--space-3); resize: vertical; }
.ic-input::placeholder, .ic-textarea::placeholder { color: var(--text-placeholder); }
.ic-input:hover, .ic-select:hover, .ic-textarea:hover { box-shadow: var(--edge-input-hover); }
.ic-input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--danger-ink); }
.ic-help  { margin: 0; color: var(--text-secondary); font-size: var(--app-secondary-size); line-height: var(--app-secondary-leading); }
.ic-error { margin: 0; color: var(--danger-text); font-size: var(--app-secondary-size); font-weight: var(--weight-medium); line-height: var(--app-secondary-leading); }
@media (max-width: 640px) {
  .ic-input, .ic-select, .ic-textarea { font-size: var(--app-input-size-phone); }
}

/* ---- Status chip: a dot, a word, mono. Tint is status only ------------------ */
.ic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--chip-height);
  padding: 0 var(--space-3) 0 10px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--edge);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--chip-weight);
  line-height: 1;
  letter-spacing: var(--chip-tracking);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ic-chip::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.ic-chip--ok        { background: var(--success-tint);   color: var(--success-text);   box-shadow: none; }
.ic-chip--attention { background: var(--attention-tint); color: var(--attention-text); box-shadow: none; }
.ic-chip--danger    { background: var(--danger-tint);    color: var(--danger-text);    box-shadow: none; }
.ic-chip--info      { background: var(--action-tint);    color: var(--action-tint-text); box-shadow: none; }

/* ---- Row: name left, value right, hairline between rows ---------------------- */
.ic-rows { display: flex; flex-direction: column; }
.ic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target-min);
  padding: var(--space-2) 0;
}
.ic-row + .ic-row { box-shadow: var(--rule-top); }
.ic-row-name  { color: var(--text-heading); font-size: var(--app-item-size); font-weight: var(--weight-semibold); letter-spacing: var(--app-item-tracking); line-height: var(--app-item-leading); }
.ic-row-value { color: var(--text-body); font-size: var(--app-body-size); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Choice card: radio. Selected is a neutral ring, not blue ---------------- */
.ic-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-heading);
  text-align: left;
  box-shadow: var(--edge-input);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ic-choice:hover { box-shadow: var(--edge-input-hover); }
.ic-choice[aria-checked="true"] { background: var(--surface-quiet); box-shadow: var(--edge-selected); }
.ic-choice-mark { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--gray-300); }
.ic-choice[aria-checked="true"] .ic-choice-mark { box-shadow: inset 0 0 0 5px var(--selected-ring); }
.ic-choice-title { display: block; font-size: var(--app-item-size); font-weight: var(--weight-semibold); letter-spacing: var(--app-item-tracking); line-height: var(--app-item-leading); }
.ic-choice-sub   { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--app-secondary-size); line-height: var(--app-secondary-leading); }

/* ---- Segmented result: Pass / Fail / N/A. Tint plus icon plus the word -------- */
.ic-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ic-seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--target-min);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: var(--app-button-size);
  font-weight: var(--weight-medium);
  box-shadow: var(--edge-input);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ic-seg > button:hover { box-shadow: var(--edge-input-hover); }
.ic-seg > button[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.ic-seg > button.is-pass[aria-pressed="true"] { background: var(--success-tint); color: var(--success-text); box-shadow: 0 0 0 1px var(--success-ink); }
.ic-seg > button.is-fail[aria-pressed="true"] { background: var(--danger-tint);  color: var(--danger-text);  box-shadow: 0 0 0 1px var(--danger-ink); }
.ic-seg > button.is-fail[aria-pressed="true"]::before { -webkit-mask-image: var(--icon-x); mask-image: var(--icon-x); }
.ic-seg > button.is-na[aria-pressed="true"]   { background: var(--surface-quiet); color: var(--text-body); box-shadow: 0 0 0 1px var(--gray-400); }
.ic-seg > button.is-na[aria-pressed="true"]::before { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); }

:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

/* ---- Step list: one current step, done steps quiet, the rest secondary ------- */
.ic-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ic-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--app-body-size);
}
.ic-step + .ic-step { box-shadow: var(--rule-top); }
.ic-step-num { flex: 0 0 auto; width: 24px; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-tracking); }
.ic-step-name { flex: 1 1 auto; }
.ic-step[aria-current="step"] { color: var(--text-heading); font-weight: var(--weight-semibold); }
.ic-step[aria-current="step"] .ic-step-num { color: var(--text-heading); }
.ic-step[data-state="done"] { color: var(--text-body); }
.ic-step[data-state="done"] .ic-step-state { color: var(--success-text); }
.ic-step-state { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-secondary); }

/* ---- Page header (app): mono label, 32px title, one line of body -------------- */
.ic-head { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0 var(--space-4); }