/* components.css - the JobbyJob component contract.
 *
 * Each block below is a component: what it is, which semantic tokens it consumes,
 * and which states it must express. Colour, space, type, radius and motion come from
 * tokens.css only. Border weights stay literal because tokens.css already owns the
 * stroke scale via --stroke-hairline / --stroke-strong; nothing here invents a value.
 */

/* ------------------------------------------------------------------ shell --- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--size-topnav);
  background: var(--surface-veil);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.topnav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-gutter);
  height: var(--size-topnav);
  padding: 0 var(--space-gutter);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  font-family: var(--font-display);
  font-size: var(--type-size-subtitle);
  font-weight: var(--type-weight-title);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  cursor: pointer;
}

.logo:hover { text-decoration: none; }

.logo-mark {
  width: var(--space-gutter);
  height: var(--space-gutter);
  border-radius: var(--radius-control);
  background: var(--action-default);
  position: relative;
  flex-shrink: 0;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: var(--space-tight);
  border-radius: var(--radius-control);
  background: var(--surface-base);
}

.nav-links {
  display: flex;
  gap: var(--space-tight);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar { height: 0; }

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-target-min);
  padding: var(--space-control-y) var(--space-control-x);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font-size: var(--type-size-body-sm);
  font-weight: var(--type-weight-label);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}

.nav-links a:hover { color: var(--text-primary); background: var(--surface-hover); }
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--surface-sunken);
  font-weight: var(--type-weight-strong);
}

.nav-right { display: flex; align-items: center; gap: var(--space-block); margin-left: auto; }

/* Contrast judgement (card t_c6846a6c): the decision record lives at the rule
 * that wins in the dashboard — the embedded .avatar in app.html, which overrides
 * this one there (the link for this file at app.html:10 precedes the embedded
 * <style> at :11, and at equal specificity the later rule wins). This library
 * rule's own authored pair, --text-primary #1F2428 on --surface-raised #FFFFFF,
 * measures 15.66:1 and passes WCAG 2.2 SC 1.4.3 for normal text, so the
 * record's conclusion covers both rules. Keep the declared size: the design
 * gate's target_size check reads this rule's floor (design/rules.json).
 */
.avatar {
  width: var(--size-control-height);
  height: var(--size-control-height);
  padding: 0;
  border-radius: var(--radius-chip);
  border: var(--stroke-hairline) solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-title);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.avatar:hover { border-color: var(--action-default); }

/* ------------------------------------------------------------- app frame --- */

.app { display: flex; min-height: calc(100vh - var(--size-topnav)); }

.sidebar {
  width: var(--size-sidebar);
  flex-shrink: 0;
  position: sticky;
  top: var(--size-topnav);
  height: calc(100vh - var(--size-topnav));
  overflow-y: auto;
  padding: var(--space-gutter) var(--space-control-x);
  background: var(--surface-sunken);
  border-right: var(--stroke-hairline) solid var(--border-hairline);
}

.sidebar::-webkit-scrollbar { width: var(--space-tight); }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-chip);
}

.sidebar-label {
  padding: 0 var(--space-control-x);
  margin: var(--space-block) 0 var(--space-inline);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.side-link {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  width: 100%;
  min-height: var(--size-target-min);
  margin-bottom: var(--space-tight);
  padding: var(--space-control-y) var(--space-control-x);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-text);
  font-size: var(--type-size-body-sm);
  font-weight: var(--type-weight-label);
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}

.side-link:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.side-link.active,
.side-link[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: var(--type-weight-strong);
  box-shadow: inset var(--stroke-strong) 0 0 0 var(--action-default);
}

.side-link .side-count {
  margin-left: auto;
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-label);
  color: var(--text-secondary);
}

.icon { width: var(--space-block); height: var(--space-block); flex-shrink: 0; opacity: 0.75; }

.main { flex: 1; min-width: 0; padding: var(--space-section) var(--space-page) var(--space-page); }

.page-title {
  margin-bottom: var(--space-tight);
  font-family: var(--font-display);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-title);
  letter-spacing: -0.02em;
}

.page-sub { margin-bottom: var(--space-gutter); color: var(--text-secondary); font-size: var(--type-size-body-sm); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-gutter); }

/* ----------------------------------------------------------------- cards --- */

.card {
  background: var(--surface-raised);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-gutter);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--elevation-raised); }
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--elevation-raised);
}

/* ----------------------------------------------------------- stat cards --- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-block);
  margin-bottom: var(--space-gutter);
}

.stat-card {
  background: var(--surface-raised);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-block) var(--space-gutter);
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.stat-card:hover { border-color: var(--border-strong); }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-title);
  line-height: var(--type-leading-title);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: var(--space-tight); color: var(--text-secondary); font-size: var(--type-size-body-sm); }
.stat-sub { margin-top: var(--space-inline); color: var(--text-secondary); font-size: var(--type-size-caption); }

/* ---------------------------------------------------------- focus card --- */

.focus-card {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-gutter);
  padding: var(--space-section) var(--space-gutter);
  border: var(--stroke-hairline) solid var(--state-info-border);
  border-radius: var(--radius-panel);
  background: var(--state-info-surface);
}

.focus-label {
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--state-info);
}

.focus-title { margin: var(--space-inline) 0 var(--space-tight); font-size: var(--type-size-title); }
.focus-desc { color: var(--text-secondary); max-width: var(--size-prose); }
.focus-actions { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-block); }

/* -------------------------------------------------------------- badges --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-tight);
  padding: var(--space-tight) var(--space-inline);
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-chip);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-strong);
  line-height: var(--type-leading-ui);
  white-space: nowrap;
}

.badge .dot { width: var(--space-tight); height: var(--space-tight); border-radius: var(--radius-chip); background: currentColor; flex-shrink: 0; }

/* Pipeline status map. One hue per meaning, never colour alone: every badge in the
 * markup carries its own label text, and the four families are reused across the
 * twelve statuses rather than each status inventing a colour. */
.bg-discovered,
.bg-screened,
.bg-applied { background: var(--state-info-surface); border-color: var(--state-info-border); color: var(--state-info); }

.bg-tailored,
.bg-followup_sent { background: var(--state-warning-surface); border-color: var(--state-warning-border); color: var(--state-warning); }

.bg-recruiter_contact,
.bg-interview,
.bg-offer,
.bg-sent { background: var(--state-success-surface); border-color: var(--state-success-border); color: var(--state-success); }

.bg-rejected,
.bg-ghosted { background: var(--state-danger-surface); border-color: var(--state-danger-border); color: var(--state-danger); }

/* -------------------------------------------------------------- buttons --- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline);
  min-height: var(--size-control-height);
  padding: var(--space-inline) var(--space-block);
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--type-size-body-sm);
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-sunken); }

.btn-primary {
  background: var(--action-default);
  border-color: var(--action-default);
  color: var(--action-label);
}

.btn-primary:hover { background: var(--action-default-hover); border-color: var(--action-default-hover); }
.btn-primary:active { background: var(--action-default-active); border-color: var(--action-default-active); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
  font-weight: var(--type-weight-label);
}

.btn-ghost:hover { background: var(--surface-hover); border-color: var(--action-default); }

.btn-danger {
  background: var(--state-danger-surface);
  border-color: var(--state-danger-border);
  color: var(--state-danger);
}

.btn-danger:hover { background: var(--action-danger); border-color: var(--action-danger); color: var(--text-inverse); }

.btn-sm {
  min-height: var(--size-target-min);
  padding: var(--space-tight) var(--space-control-x);
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-label);
}

.btn-xs {
  min-height: var(--size-target-min);
  padding: var(--space-tight) var(--space-inline);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-label);
}

.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--action-disabled);
  border-color: var(--action-disabled);
  color: var(--action-disabled-label);
  cursor: not-allowed;
}

.btn .ripple {
  position: absolute;
  border-radius: var(--radius-chip);
  background: var(--action-ripple);
  transform: scale(0);
  animation: ripple var(--motion-slow) var(--ease-standard);
}

@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

/* --------------------------------------------------------------- inputs --- */

.field { display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-block); }
.field label { color: var(--text-secondary); font-size: var(--type-size-label); font-weight: var(--type-weight-label); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--size-control-height);
  padding: var(--space-control-y) var(--space-control-x);
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--type-size-body-sm);
  line-height: var(--type-leading-ui);
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--action-default); }
/* The controls draw the ring themselves rather than inheriting it: a focus state
 * that only moves the border colour is not a visible focus indicator. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--border-focus);
  outline: var(--size-focus-ring) solid var(--border-focus);
  outline-offset: var(--size-focus-offset);
}
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--action-disabled);
  color: var(--action-disabled-label);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- table --- */

.table-wrap { overflow-x: auto; border: var(--stroke-hairline) solid var(--border-hairline); border-radius: var(--radius-card); }

table { width: 100%; border-collapse: collapse; }

thead th {
  padding: var(--space-inline) var(--space-control-x);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

tbody td {
  padding: var(--space-control-y) var(--space-control-x);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  font-size: var(--type-size-body-sm);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--overlay-wash); }

/* ------------------------------------------------------- modal and toast --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-gutter);
  background: var(--overlay-scrim);
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-gutter);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--elevation-overlay);
}

.toast {
  position: fixed;
  right: var(--space-gutter);
  bottom: var(--space-gutter);
  z-index: 110;
  padding: var(--space-inline) var(--space-block);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--type-size-body-sm);
  box-shadow: var(--elevation-overlay);
}

/* --------------------------------------------------------- empty states --- */

.empty-state {
  padding: var(--space-page) var(--space-gutter);
  border: var(--stroke-hairline) dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state .title { color: var(--text-primary); font-size: var(--type-size-subtitle); font-weight: var(--type-weight-strong); }

/* ------------------------------------------------------------- pipeline --- */

.pipeline-bar {
  display: flex;
  gap: var(--space-tight);
  height: var(--space-inline);
  margin-bottom: var(--space-block);
}

.pipeline-seg {
  flex: 1;
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
}

.pipeline-seg.is-done { background: var(--state-success); }
.pipeline-seg.is-active { background: var(--state-info); }

/* The brand mark is a pointer target, so it gets the same floor as any other control. */
.logo { min-height: var(--size-target-min); min-width: var(--size-target-min); }

/* Icon-only controls need the minimum on both axes: a 24px-tall, 12px-wide glyph is not
 * a 24px target. .btn-xs carries icon glyphs only. */
.btn-xs { min-width: var(--size-target-min); }

/* --- ink surface (top nav): a dark bar carries its own text roles --- */
.surface-ink, .topnav { background: var(--surface-ink); }
.surface-ink a, .surface-ink .logo, .surface-ink .btn-ghost,
.topnav a, .topnav .logo, .topnav .btn-ghost { color: var(--text-on-ink-muted); }
.surface-ink a:hover, .surface-ink a.active, .surface-ink .btn-ghost:hover,
.topnav a:hover, .topnav a.active, .topnav .btn-ghost:hover {
  color: var(--text-on-ink);
  background: var(--overlay-highlight);
}

/* the focus ring takes the ink surface's own ring colour (white on ink = 17.7:1) */
.surface-ink :focus-visible, .topnav :focus-visible {
  outline: var(--size-focus-ring) solid var(--border-focus-on-ink);
  outline-offset: var(--size-focus-offset);
}