/* Interview tools. Sits on the interview-questions surfaces. */

html[data-theme="light"] .iq-body .iq-kicker,
html[data-theme="light"] .iq-body .breadcrumb a,
html[data-theme="light"] .iq-body .content-prose a,
html[data-theme="light"] .iq-body .iq-muted a,
html[data-theme="light"] .iq-body .iq-guides a {
  color: #0058b0;
}

.iq-body .breadcrumb a,
.iq-body .content-prose a,
.iq-body .iq-muted a,
.iq-body .iq-guides a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tool-guide {
  margin-top: 36px;
}

.tool-guide h2 {
  font-size: clamp(24px, 3vw, 32px);
}

.gen-panel {
  margin-top: 8px;
}

.gen-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gen-field {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}

.gen-field select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 450;
}

.gen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 44px;
}

.gen-status {
  min-height: 3em;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.gen-affil-line {
  margin: 4px 0 0;
}

.iq-q h2 a.gen-prompt {
  color: inherit;
  text-decoration: none;
}

.iq-q h2 a.gen-prompt:hover,
.iq-q h2 a.gen-prompt:focus-visible {
  text-decoration: underline;
}

.gen-cta p {
  color: var(--muted);
  line-height: 1.6;
}

.gen-directory {
  margin-top: 12px;
}

.tool-hub-link {
  margin-top: 22px;
}

.iq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 640px) {
  .gen-fields {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gen-actions .btn,
  .iq-actions .btn {
    transition: none;
  }
}

/* Interview tools. Sizes are reserved up front so the builder does not shift the page. */

.tool-page {
  width: min(100% - 48px, 840px);
  margin-inline: auto;
}

.tmay {
  margin: 0 0 28px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.tmay h2 {
  margin-top: 0;
}

.tmay-grid,
.tmay-outputs {
  display: grid;
  gap: 14px;
}

.tmay-grid > label,
.tmay-wins label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tmay-hint {
  font-weight: 400;
  color: var(--muted);
}

.tmay input,
.tmay textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.tmay input {
  min-height: 44px;
}

.tmay input:focus-visible,
.tmay textarea:focus-visible,
.tmay button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tmay-wins {
  display: grid;
  gap: 12px;
}

.tmay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tmay-privacy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.tmay-card {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.tmay-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 1.6em;
}

.tmay-card-head h3 {
  margin: 0;
  font-size: 18px;
}

.tmay-time {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.tmay-structure {
  margin: 0;
  color: var(--muted-2);
  font-size: 13px;
}

.tmay-tips {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tmay textarea[data-answer] {
  min-height: 11rem;
  resize: vertical;
}

.tmay-card[data-length="standard"] textarea[data-answer] {
  min-height: 16rem;
}

.tmay-card[data-length="long"] textarea[data-answer] {
  min-height: 22rem;
}

.tmay-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tmay-copy,
.tmay-reset {
  min-width: 7.5rem;
}

.tmay-refresh-note {
  min-height: 1.45em;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.tmay-soft {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 800px) {
  .tmay-wins {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Salary script builder. Sizes are fixed so the first paint matches the server HTML. */

.neg-page {
  width: min(100% - 48px, 1080px);
  margin-inline: auto;
}

.neg-page .breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.neg-page h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.neg-page .lead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 68ch;
}

.neg-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  line-height: 1.5;
}

.neg-layout {
  display: grid;
  gap: 28px;
  align-items: start;
}

.neg-form,
.neg-output {
  min-width: 0;
}

.neg-grid {
  display: grid;
  gap: 12px;
}

.neg-field {
  display: grid;
  gap: 6px;
}

.neg-field span,
.neg-leverage legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.neg-field small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.neg-field .neg-format {
  color: #f0b429;
}

.neg-format[hidden] {
  display: none;
}

.neg-field input,
.neg-field select,
.neg-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.neg-field textarea {
  min-height: 88px;
  resize: vertical;
}

.neg-field input:focus-visible,
.neg-field select:focus-visible,
.neg-field textarea:focus-visible,
.neg-copy:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
}

.neg-leverage {
  margin: 16px 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
}

.neg-leverage legend {
  padding: 0 6px;
}

.neg-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  line-height: 1.45;
}

.neg-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
}

.neg-privacy {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.neg-output-head,
.neg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}

.neg-output-head h2,
.neg-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.neg-copy {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.neg-status {
  min-height: 1.4em;
  margin: 8px 0;
  font-size: 14px;
  color: var(--brand-1);
}

.neg-notes,
.neg-math,
.neg-card {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.neg-notes[hidden],
.neg-aside[hidden] {
  display: none;
}

.neg-notes p,
.neg-math p,
.neg-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.neg-notes p:last-child,
.neg-math p:last-child,
.neg-card [data-body] p:last-child,
.neg-card [data-email-body] p:last-child {
  margin-bottom: 0;
}

.neg-aside {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted-2, var(--muted));
}

.neg-card [data-body] p,
.neg-card [data-email-body] p,
.neg-subject {
  color: var(--text);
}

.neg-subject {
  font-weight: 600;
}

.neg-guide {
  margin-top: 48px;
}

.tool-index {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.tool-card {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.tool-card p {
  margin: 8px 0 0;
}

.tool-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.tool-card-links {
  margin: 12px 0 0;
  padding-left: 1.2em;
}

@media (max-width: 639px) {
  .neg-page {
    width: min(100% - 32px, 1080px);
  }
}

@media (min-width: 960px) {
  .neg-layout {
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  }
}