/* MOHAP edition — additions on top of components.css */

/* Edition tag in top-nav brand */
.top-nav-edition {
  display: inline-block;
  margin-left: var(--sp-3);
  padding: 3px 9px;
  background: var(--brand-blue-l);
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid rgba(28,117,188,.2);
}
.top-nav-brand { display: flex; align-items: center; }
.top-nav-center { display: flex; justify-content: center; align-items: center; gap: var(--sp-3); }
.top-nav-link-home {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--brand-blue);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-blue-l);
  border: 1px solid rgba(28,117,188,.18);
}
.top-nav-link-home:hover { background: rgba(28,117,188,.14); text-decoration: none; }

/* Home — single tile (no Mode A/B split) */
.home-tiles-single { grid-template-columns: 1fr; max-width: 720px; }

/* Step 1 — profession grid */
.profession-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.profession-tile {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.profession-tile:hover { border-color: var(--brand-blue); transform: translateY(-1px); box-shadow: var(--sh-2); }
.profession-tile-active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-l);
  box-shadow: 0 0 0 4px rgba(28,117,188,.10), var(--sh-2);
}
.profession-tile-icon {
  width: 40px; height: 40px; border-radius: var(--r);
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
}
.profession-tile-name { font-size: var(--t-h3); margin: 0; color: var(--ink); }
.profession-tile-desc { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* Step 3 — title grid */
.title-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.title-card {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.title-card:hover { border-color: var(--brand-blue); transform: translateY(-1px); }
.title-card-active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-l);
  box-shadow: 0 0 0 4px rgba(28,117,188,.10);
}
.title-card-name { font-size: var(--t-h3); margin: 0 0 var(--sp-2); color: var(--ink); }
.title-card-desc { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--sp-3); line-height: 1.5; }
.title-card-qual { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; line-height: 1.5; }
.title-card-qual .micro-cap { display: block; margin-bottom: 2px; color: var(--brand-blue); }

/* Step 4 — experience input */
.exp-input-wrap {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
}
.exp-input {
  width: 140px;
  font-size: 36px;
  font-weight: 600;
  color: var(--brand-blue);
  border: none;
  outline: none;
  background: transparent;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.exp-input:focus { color: var(--brand-blue-d); }
.exp-input-suffix { font-size: var(--t-body); color: var(--ink-soft); font-weight: 500; }

/* Step 5 — nationality cards */
.nationality-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  max-width: 560px;
}
.nationality-card {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.nationality-card:hover { border-color: var(--brand-blue); transform: translateY(-1px); }
.nationality-card-active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-l);
  box-shadow: 0 0 0 4px rgba(28,117,188,.10);
}
.nationality-card-name { font-size: var(--t-h3); margin: 0 0 var(--sp-2); color: var(--ink); }
.nationality-card-active .nationality-card-name { color: var(--brand-blue); }
.nationality-card-desc { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* Result page — verdict */
.result-page { padding: var(--sp-7) 0; }
.result-summary { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.result-summary-chip {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  flex: 1;
  flex-wrap: wrap;
}
.result-summary-actions { display: flex; gap: var(--sp-2); }

.verdict {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.verdict-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
}
.verdict-title { font-size: 28px; margin: 0; letter-spacing: -0.02em; font-weight: 600; }
.verdict-explainer { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.6; margin: 0; }
.verdict-explainer strong { color: var(--ink); }
.verdict-rule {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  border-radius: var(--r);
  border-left: 3px solid var(--brand-blue);
  line-height: 1.55;
}
.verdict-rule strong { color: var(--ink); }
.verdict-experience {
  display: flex; gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-alt);
  border-radius: var(--r);
  flex-wrap: wrap;
}
.verdict-exp-row { display: flex; flex-direction: column; gap: 2px; }
.verdict-exp-row strong { font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.verdict-exp-row-short strong { color: var(--status-unlikely); }
.verdict-cert { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }
.verdict-cert .micro-cap { display: block; margin-bottom: 2px; color: var(--brand-blue); }

/* Verdict status variants */
.verdict-eligible { border-color: var(--brand-green); }
.verdict-eligible .verdict-icon { background: var(--status-likely-l); color: var(--brand-green); }
.verdict-eligible .verdict-title { color: var(--brand-green-d); }
.verdict-eligible .verdict-rule { border-left-color: var(--brand-green); }

.verdict-close { border-color: var(--status-possibly); }
.verdict-close .verdict-icon { background: var(--status-possibly-l); color: var(--status-possibly); }
.verdict-close .verdict-title { color: #7a5d1a; }
.verdict-close .verdict-rule { border-left-color: var(--status-possibly); }

.verdict-cannot { border-color: var(--status-unlikely); }
.verdict-cannot .verdict-icon { background: var(--status-unlikely-l); color: var(--status-unlikely); }
.verdict-cannot .verdict-title { color: var(--status-unlikely); }
.verdict-cannot .verdict-rule { border-left-color: var(--status-unlikely); }

.verdict-incomplete { border-color: var(--line); }
.verdict-incomplete .verdict-icon { background: var(--surface-alt); color: var(--mute); }

.verdict-extras {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.verdict-extras > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--brand-blue);
  font-weight: 500;
  list-style: none;
}
.verdict-extras > summary::-webkit-details-marker { display: none; }
.verdict-extras > summary:hover { background: var(--brand-blue-l); }
.verdict-extras[open] > summary { background: var(--brand-blue-l); border-bottom: 1px solid var(--line); }
.verdict-extras-body { padding: var(--sp-4) var(--sp-5); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.65; }

.verdict-notes {
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.verdict-notes h3 { margin: 0 0 var(--sp-2); }
.verdict-notes ul { margin: 0; padding-left: var(--sp-5); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }
.verdict-notes li { margin-bottom: var(--sp-2); }