/**
 * Recovering Site Kit — density, control surfaces, shape tokens (all sites).
 * Shapes/surfaces applied at runtime from site-theme.json → presentation.
 */

:root {
  --pf-density-scale: 1;

  /* Vertical rhythm */
  --pf-space-stack-2xs: calc(0.25rem * var(--pf-density-scale));
  --pf-space-stack-xs: calc(0.375rem * var(--pf-density-scale));
  --pf-space-stack-sm: calc(0.5rem * var(--pf-density-scale));
  --pf-space-stack-md: calc(0.75rem * var(--pf-density-scale));
  --pf-space-stack-lg: calc(1rem * var(--pf-density-scale));
  --pf-space-stack-xl: calc(1.25rem * var(--pf-density-scale));

  /* Horizontal rhythm */
  --pf-space-inline-2xs: calc(0.2rem * var(--pf-density-scale));
  --pf-space-inline-xs: calc(0.3rem * var(--pf-density-scale));
  --pf-space-inline-sm: calc(0.4rem * var(--pf-density-scale));
  --pf-space-inline-md: calc(0.5rem * var(--pf-density-scale));
  --pf-space-inline-lg: calc(0.75rem * var(--pf-density-scale));

  /* Shape (defaults — overridden by presentation apply) */
  --pf-shape-radius-segment: 2px;
  --pf-shape-radius-tag: 2px;
  --pf-shape-radius-lens: 6px;

  /* Control chrome (idle / active / lens — set by presentation apply) */
  --pf-control-idle-fg: var(--color-text-secondary);
  --pf-control-idle-bg: var(--color-surface);
  --pf-control-idle-border: var(--color-border);
  --pf-control-idle-fg-hover: var(--color-text-primary);
  --pf-control-idle-border-hover: var(--color-border-hover);
  --pf-control-idle-bg-hover: var(--color-surface-2);

  --pf-control-active-type-fg: var(--color-text-primary);
  --pf-control-active-type-bg: var(--color-accent-muted);
  --pf-control-active-type-border: var(--color-accent);

  --pf-control-active-view-fg: var(--color-text-primary);
  --pf-control-active-view-bg: var(--color-surface-2);
  --pf-control-active-view-border: var(--color-border-hover);

  --pf-translator-idle-fg: var(--pf-control-idle-fg);
  --pf-translator-idle-bg: var(--pf-control-idle-bg);
  --pf-translator-idle-border: var(--pf-control-idle-border);
  --pf-translator-idle-fg-hover: var(--pf-control-idle-fg-hover);
  --pf-translator-idle-border-hover: var(--pf-control-idle-border-hover);
  --pf-translator-idle-bg-hover: var(--pf-control-idle-bg-hover);

  --pf-translator-active-fg: var(--color-translator-highlight);
  --pf-translator-active-bg: var(--color-translator-highlight-muted);
  --pf-translator-active-border: var(--color-translator-highlight);
  --pf-translator-active-badge-fg: var(--color-translator-highlight);
  --pf-translator-active-badge-bg: var(--color-translator-highlight-muted);
  --pf-translator-active-badge-border: var(--color-translator-highlight-border);

  /* Legacy aliases (refactor window) */
  --pf-lens-idle-fg: var(--pf-translator-idle-fg);
  --pf-lens-idle-bg: var(--pf-translator-idle-bg);
  --pf-lens-idle-border: var(--pf-translator-idle-border);
  --pf-lens-idle-fg-hover: var(--pf-translator-idle-fg-hover);
  --pf-lens-idle-border-hover: var(--pf-translator-idle-border-hover);
  --pf-lens-idle-bg-hover: var(--pf-translator-idle-bg-hover);
  --pf-lens-active-fg: var(--pf-translator-active-fg);
  --pf-lens-active-bg: var(--pf-translator-active-bg);
  --pf-lens-active-border: var(--pf-translator-active-border);
  --pf-lens-active-badge-fg: var(--pf-translator-active-badge-fg);
  --pf-lens-active-badge-bg: var(--pf-translator-active-badge-bg);
  --pf-lens-active-badge-border: var(--pf-translator-active-badge-border);
  --pf-shape-radius-lens: var(--pf-shape-radius-translator, 6px);
  --pf-shape-radius-translator: 6px;

  --pf-tag-idle-fg: color-mix(in srgb, var(--color-text-primary) 78%, var(--color-text-secondary) 22%);
  --pf-tag-idle-bg: var(--color-subtle-fill);
  --pf-tag-idle-border: var(--color-border);

  --pf-tag-on-fg: var(--color-on-accent);
  --pf-tag-on-bg: var(--color-accent);
  --pf-tag-on-border: var(--color-accent);

  /* Control sizing */
  --pf-control-font-size: 0.78rem;
  --pf-control-font-weight: 500;
  --pf-control-padding-y: 0.34rem;
  --pf-control-padding-x: 0.62rem;
  --pf-control-min-height: 1.72rem;
  --pf-control-gap: var(--pf-space-inline-sm);

  /* Tags / filter chips */
  --pf-tag-font-size: 0.625rem;
  --pf-tag-padding-y: 0.28rem;
  --pf-tag-padding-x: 0.38rem;
  --pf-tag-min-height: 1.38rem;
  --pf-tag-gap: var(--pf-space-inline-2xs);

  /* Section gaps */
  --pf-section-gap-controls: var(--pf-space-stack-sm);
  --pf-section-gap-toolbar: var(--pf-space-stack-sm);
  --pf-section-gap-before-card: var(--pf-space-stack-md);

  /* Form fields */
  --pf-field-font-size: 0.8125rem;
  --pf-field-padding-y: 0.35rem;
  --pf-field-padding-x: 0.55rem;
  --pf-field-radius: var(--pf-shape-radius-segment);

  /* Lists & bullets */
  --pf-list-marker-glyph: '•';
  --pf-list-marker-color: var(--color-accent, #5b8dee);
  --pf-list-indent: 0.85rem;
  --pf-list-item-gap: 0.22rem;

  /* Dates */
  --pf-date-font-size: 0.7rem;
  --pf-date-font-family: var(--font-mono, monospace);
}

.pf-segment-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-control-gap);
  align-items: center;
}

/* Segment control — resume type, view mode, harness targets */
.pf-control.pf-control--segment,
.pf-control--segment {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--pf-control-font-size);
  font-weight: var(--pf-control-font-weight);
  min-height: var(--pf-control-min-height);
  padding: var(--pf-control-padding-y) var(--pf-control-padding-x);
  border-radius: var(--pf-shape-radius-segment);
  border: 1px solid var(--pf-control-idle-border);
  background: var(--pf-control-idle-bg);
  color: var(--pf-control-idle-fg);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--transition, 0.2s ease),
    border-color var(--transition, 0.2s ease),
    background var(--transition, 0.2s ease);
}

.pf-control.pf-control--segment:hover,
.pf-control--segment:hover {
  color: var(--pf-control-idle-fg-hover);
  border-color: var(--pf-control-idle-border-hover);
  background: var(--pf-control-idle-bg-hover);
}

.pf-control.pf-control--segment.is-active-type,
.pf-control--segment.rs-ctrl-btn--active-type {
  color: var(--pf-control-active-type-fg);
  border-color: var(--pf-control-active-type-border);
  background: var(--pf-control-active-type-bg);
}

.pf-control.pf-control--segment.is-active-view,
.pf-control--segment.rs-ctrl-btn--active-view {
  color: var(--pf-control-active-view-fg);
  border-color: var(--pf-control-active-view-border);
  background: var(--pf-control-active-view-bg);
}

/* Translator-highlight toggle (generic; Recruiter Glasses = id recruiter) */
.pf-control.pf-control--translator,
.pf-control--translator,
.pf-control.pf-control--lens,
.pf-control--lens {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--pf-control-font-size);
  font-weight: var(--pf-control-font-weight);
  min-height: var(--pf-control-min-height);
  padding: var(--pf-control-padding-y) var(--pf-control-padding-x);
  border-radius: var(--pf-shape-radius-translator, var(--pf-shape-radius-lens));
  border: 1px solid var(--pf-translator-idle-border);
  background: var(--pf-translator-idle-bg);
  color: var(--pf-translator-idle-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-inline-xs);
  white-space: nowrap;
  line-height: 1.2;
  transition:
    color var(--transition, 0.2s ease),
    border-color var(--transition, 0.2s ease),
    background var(--transition, 0.2s ease);
}

.pf-control.pf-control--translator:hover:not(:disabled),
.pf-control--translator:hover:not(:disabled),
.pf-control.pf-control--lens:hover:not(:disabled),
.pf-control--lens:hover:not(:disabled) {
  color: var(--pf-translator-idle-fg-hover);
  border-color: var(--pf-translator-idle-border-hover);
  background: var(--pf-translator-idle-bg-hover);
}

.pf-control.pf-control--translator.is-on,
.pf-control--translator.is-on,
.pf-control.pf-control--lens.is-on,
.pf-control--lens.is-on,
.pf-control--translator.rs-translator-btn--on,
.pf-control--lens.rs-recruiter-btn--on {
  color: var(--pf-translator-active-fg);
  border-color: var(--pf-translator-active-border);
  background: var(--pf-translator-active-bg);
}

.pf-translator-badge,
.pf-lens-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 0.06rem 0.35rem;
  border-radius: var(--pf-shape-radius-tag);
  border: 1px solid var(--pf-translator-idle-border);
  color: var(--pf-translator-idle-fg);
  background: var(--pf-translator-idle-bg-hover);
  line-height: 1.2;
}

.pf-control.pf-control--translator.is-on .pf-translator-badge,
.pf-control--translator.is-on .pf-translator-badge,
.pf-control.pf-control--lens.is-on .pf-lens-badge,
.pf-control--lens.is-on .pf-lens-badge,
.pf-control--translator.rs-translator-btn--on .pf-translator-badge,
.pf-control--lens.rs-recruiter-btn--on .pf-lens-badge {
  color: var(--pf-translator-active-badge-fg);
  border-color: var(--pf-translator-active-badge-border);
  background: var(--pf-translator-active-badge-bg);
}

.pf-control.pf-control--translator:disabled,
.pf-control--translator:disabled,
.pf-control.pf-control--lens:disabled,
.pf-control--lens:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pf-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-inline-lg);
  align-items: center;
}

.pf-contact,
.rs-contact-item.pf-contact {
  font-family: var(--font-mono, monospace);
  font-size: 0.73rem;
  color: var(--pf-tag-idle-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--transition, 0.2s ease);
}

a.pf-contact:hover,
a.rs-contact-item.pf-contact:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Tags / chips */
.pf-tag.pf-tag--chip,
.pf-tag:not(.pf-tag--chip) {
  font-family: var(--font-mono, monospace);
  font-size: var(--pf-tag-font-size);
  line-height: 1.2;
  min-height: var(--pf-tag-min-height);
  padding: var(--pf-tag-padding-y) var(--pf-tag-padding-x);
  border-radius: var(--pf-shape-radius-tag);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pf-tag-idle-border);
  background: var(--pf-tag-idle-bg);
  color: var(--pf-tag-idle-fg);
  transition:
    color var(--transition, 0.2s ease),
    border-color var(--transition, 0.2s ease),
    background var(--transition, 0.2s ease);
}

.pf-tag.pf-tag--chip.is-on,
.pf-tag.pf-tag--chip.rs-tag--on {
  color: var(--pf-tag-on-fg);
  background: var(--pf-tag-on-bg);
  border-color: var(--pf-tag-on-border);
}

.pf-date {
  font-family: var(--pf-date-font-family);
  font-size: var(--pf-date-font-size);
}

.pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-list-item-gap);
}

.pf-list > li {
  position: relative;
  padding-left: calc(var(--pf-list-indent) + 0.35em);
}

.pf-list > li::before {
  content: var(--pf-list-marker-glyph);
  position: absolute;
  left: 0;
  color: var(--pf-list-marker-color);
}