/* ==========================================================================
   TheVisaTools — Tool Page Layout
   tool.css : tool layout grid, input/result/explain sections, sidebar,
              status states, disclaimer, progress bar
   ========================================================================== */

/* ---------- Tool Page Grid ---------- */
.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-8);
}
@media (min-width: 1024px) {
  .tool-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: var(--space-10);
  }
}

/* Breadcrumb */
.breadcrumb { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li::after { content: "/"; margin-left: var(--space-2); color: var(--color-text-faint); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-text-muted); }

/* ---------- Tool Section ---------- */
.tool {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.tool__title {
  text-align: left;
  max-width: none;
  margin: 0;
}
.tool__intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: var(--content-measure);
  margin-block: var(--space-3) var(--space-6);
}

/* ---------- Tool Input ---------- */
.tool-input { display: grid; gap: var(--space-4); }
@media (min-width: 560px) {
  .tool-input--cols { grid-template-columns: 1fr 1fr; }
  .tool-input--cols .tool-input__full { grid-column: 1 / -1; }
}
.tool-input__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Tool Result ---------- */
.tool-result {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  animation: result-in var(--transition);
}
.tool-result[hidden] { display: none; }
@keyframes result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tool-result__headline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.tool-result__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-faint);
}
.tool-result__detail { font-size: var(--text-sm); color: var(--color-text-muted); }
.tool-result__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.metric {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.metric__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric__value { font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); margin-top: var(--space-1); }

/* ---------- Status States ---------- */
.status-current .tool-result__dot { background: var(--color-status-current); }
.status-waiting .tool-result__dot { background: var(--color-status-waiting); }
.status-unavailable .tool-result__dot { background: var(--color-status-unavailable); }
.status-current .tool-result__headline { color: #166534; }
.status-waiting .tool-result__headline { color: #92400e; }
.status-unavailable .tool-result__headline { color: var(--color-text-muted); }
.status-current { border-left: none; background: var(--color-success-light); }
.status-waiting { background: var(--color-warning-light); }
.status-unavailable { background: var(--color-surface-2); }

/* ---------- Result eligibility levels (EB-1A) ---------- */
.level-strong .tool-result__dot { background: var(--color-success); }
.level-moderate .tool-result__dot { background: var(--color-warning); }
.level-weak .tool-result__dot { background: var(--color-text-faint); }
.level-strong { background: var(--color-success-light); }
.level-moderate { background: var(--color-warning-light); }
.level-weak { background: var(--color-surface-2); }

/* ---------- Tool Explain ---------- */
.tool-explain { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.tool-explain p { margin-bottom: var(--space-3); }

/* ---------- Next-step / CTA ---------- */
.next-step {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.next-step h3 { margin-top: 0; }
.next-step p { font-size: var(--text-sm); color: var(--color-primary-dark); }

/* ---------- Disclaimer ---------- */
.disclaimer {
  margin-top: var(--space-6);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-warning-light);
  border-radius: var(--radius-md);
}
.disclaimer--inline { background: transparent; padding: 0; margin-top: var(--space-3); font-size: var(--text-xs); }

/* ---------- Data freshness note ---------- */
.data-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.data-note a { color: var(--color-text-muted); text-decoration: underline; }

/* ---------- Data Maintenance Banner (neutral info, not an error) ---------- */
.data-maintenance {
  margin-block: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}
.data-maintenance[hidden] { display: none; }
.data-maintenance p { font-size: var(--text-sm); }
.data-maintenance p:last-child { margin-bottom: 0; }
.data-maintenance__source { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---------- Data Table (processing times) ---------- */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 32rem; }
.data-table th, .data-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.data-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); background: var(--color-surface-2); font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table__group th {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}
.data-table__group th .data-table__code { font-family: var(--font-mono); font-weight: 700; }
.data-table__group th .data-table__name { font-weight: 500; color: var(--color-text-muted); }
.data-table__months { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.data-table caption { caption-side: top; text-align: left; font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-3) var(--space-4); }

/* ---------- Fee calculator notes ---------- */
.fee-notes { margin-top: var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.fee-notes li { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Visa bulletin cell states ---------- */
.vb-current { color: #166534; font-weight: 600; }
.vb-unavailable { color: var(--color-text-muted); font-weight: 600; }

/* ---------- EB-1A criteria checklist ---------- */
.criteria-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.criterion {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.criterion:hover { border-color: var(--color-primary); background: var(--color-surface-2); }
.criterion:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.criterion__check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--color-primary); cursor: pointer; }
.criterion__body { display: grid; gap: var(--space-1); }
.criterion__title { font-weight: 600; color: var(--color-text); line-height: 1.4; }
.criterion__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.eb1a-counter { font-size: var(--text-lg); font-weight: 600; }
.eb1a-counter strong { font-family: var(--font-mono); color: var(--color-primary); }

/* ---------- Progress Bar (wait-time estimator) ---------- */
.progress {
  margin-top: var(--space-4);
}
.progress__track {
  position: relative;
  height: 12px;
  width: 100%;
  background: var(--color-surface-offset);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.progress--success .progress__fill { background: var(--color-success); }
.progress--warning .progress__fill { background: var(--color-warning); }

/* ---------- Sidebar ---------- */
.tool-sidebar { display: grid; gap: var(--space-6); }
@media (max-width: 1023px) {
  .tool-sidebar { order: 2; }
  .tool-sidebar .ad-slot--sidebar { display: none; }
}
.sidebar-card { padding: var(--space-6); }
.sidebar-card h3 { margin-top: 0; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); }
.sidebar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.sidebar-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.sidebar-list a:hover { background: var(--color-surface-2); text-decoration: none; color: var(--color-primary-dark); }

/* ---------- Content section (explanation, FAQ) ---------- */
.content { max-width: var(--content-measure); }
.content h2 { scroll-margin-top: 80px; }
.content p, .content li { font-size: var(--text-base); }

/* ---------- FAQ Accordion ---------- */
.faq-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
}
.faq-question:hover { background: var(--color-surface-2); }
.faq-question__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--transition); color: var(--color-text-muted); }
.faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(180deg); }
.faq-answer { padding: 0 var(--space-4); max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); }
.faq-answer[hidden] { display: block; } /* JS controls via max-height */
.faq-item.is-open .faq-answer { padding-block: 0 var(--space-4); max-height: 600px; }
.faq-answer p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Related sections ---------- */
.related { margin-top: var(--space-10); }

/* ---------- N-400 step-by-step wizard ---------- */
.n400 { margin-bottom: var(--space-6); }
.n400 .progress { margin-bottom: var(--space-6); }
.n400-question__text {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.n400-options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.n400-options .btn { min-height: 48px; flex: 1 1 auto; min-width: 140px; justify-content: center; }
@media (max-width: 480px) {
  .n400-options { flex-direction: column; }
  .n400-options .btn { width: 100%; }
}

/* ---------- H-1B to Green Card roadmap ---------- */
.roadmap { margin-bottom: var(--space-6); }

.roadmap__track {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.roadmap__stage { position: relative; }

.roadmap__node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  font: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.roadmap__node:hover { border-color: var(--color-primary); background: var(--color-surface-2); }
.roadmap__node:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.roadmap__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--text-sm);
}
.roadmap__label { font-weight: 600; line-height: 1.35; }

.roadmap__stage.is-active .roadmap__node {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.roadmap__stage.is-active .roadmap__num { background: var(--color-primary); color: #fff; }

.roadmap__stage.is-skipped .roadmap__node { opacity: .55; }
.roadmap__stage.is-skipped .roadmap__label { text-decoration: line-through; }

.roadmap__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 .5em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.roadmap__tag.is-current { background: var(--color-success-light); color: #166534; }
.roadmap__tag.is-waiting { background: var(--color-warning-light); color: #92400e; }
.roadmap__tag.is-unavailable { background: var(--color-surface-2); color: var(--color-text-muted); }

.roadmap__detail { display: block; }
.roadmap__detail-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.roadmap__detail-num {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: var(--text-sm);
}
.roadmap__detail-title { margin: 0; font-size: var(--text-lg); }
.roadmap__status { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); }
.roadmap__status p { margin: 0 0 var(--space-2); }
.roadmap__status p:last-child { margin-bottom: 0; }
.roadmap__links { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Horizontal timeline on wider screens */
@media (min-width: 720px) {
  .roadmap__track {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .roadmap__stage { flex: 1 1 calc(25% - var(--space-3)); min-width: 150px; }
  .roadmap__node {
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    gap: var(--space-2);
  }
  .roadmap__stage.is-active .roadmap__node { box-shadow: inset 0 3px 0 var(--color-primary); }
}

/* ---------- Guide article meta (E-E-A-T reviewed-by line) ---------- */
.guide-meta {
  font-size: var(--text-sm);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- About: data source list (E-E-A-T) ---------- */
.source-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-2); }
.source-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.source-list li span { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.last-reviewed { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-6); }

/* ---------- Related tools block (guide → tool internal links) ---------- */
.related-tools {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.related-tools h2 { margin-top: 0; font-size: var(--text-lg); }
.related-tools ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.related-tools a { font-weight: 600; }

/* EB trend charts (eb-visa-bulletin-trends.html) */
.eb-country-grid { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.eb-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 400; cursor: pointer; }
.eb-check input { width: 18px; height: 18px; }
.eb-trend-svg { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-2); }
.eb-trend-svg svg { display: block; width: 100%; height: auto; }
.eb-trend-svg text { font-family: var(--font-sans, system-ui, sans-serif); }

/* Home trend preview: reserve aspect ratio (viewBox 720x420) to prevent CLS
   before the SVG is injected below the fold. */
#home-trend-svg { aspect-ratio: 720 / 420; }

/* Whole-chart click target on the homepage preview. */
.home-trend-link { display: block; text-decoration: none; border-radius: var(--radius-lg); }
.home-trend-link:focus-visible { outline: 2px solid var(--color-primary, #1f6f8b); outline-offset: 3px; }
.home-trend-link .eb-trend-svg { transition: border-color 120ms ease; }
.home-trend-link:hover .eb-trend-svg { border-color: var(--color-primary, #1f6f8b); }