/* ==========================================================================
   Gael Talent Bridge, Candidate Workspace additions
   --------------------------------------------------------------------------
   Styles for the parts of the workspace added after the first release:
   the Interview Studio availability states, the profile photo control, live
   Opportunities, the inbox review queue, the learning library and payments.

   Only tokens already declared in site.css are used, so the workspace and
   these additions can never drift apart on colour, spacing or type.
   ========================================================================== */

/* ---------- shared small pieces ---------- */

.w-note-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

.w-state {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cloud);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.w-state h2 { font-size: var(--text-sub); margin: 0 0 var(--sp-3); }
.w-state p { color: var(--stone); margin: 0 0 var(--sp-4); max-width: 44rem; }
.w-state.is-waiting { border-color: var(--line-strong); background: var(--linen); }
.w-state.is-down { border-color: #e8cfcb; background: var(--danger-bg); }
.w-state.is-down h2 { color: var(--danger); }

.w-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 0 0 var(--sp-4);
  max-width: 24rem;
}
.w-progress span {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width 0.5s linear;
}

.w-inline-hint { font-size: var(--text-micro); color: var(--stone-light); margin: var(--sp-2) 0 0; }

.w-sub-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  margin: var(--sp-6) 0 var(--sp-4);
}
.w-sub-head h2 { font-size: var(--text-card); margin: 0; }
.w-sub-head p { margin: 0; font-size: var(--text-small); color: var(--stone); }

/* ---------- Interview Studio practice scaffold ---------- */

.w-practice { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.w-practice ol { margin: 0; padding-left: 1.3rem; color: var(--slate); }
.w-practice ol li { margin-bottom: var(--sp-3); }
.w-practice ol li strong { color: var(--ink); }
.w-question {
  border-left: 3px solid var(--teal);
  background: var(--teal-quiet);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink);
  font-size: var(--text-body);
}
.w-question small { display: block; color: var(--stone); font-size: var(--text-micro); margin-bottom: var(--sp-2); }

/* ---------- profile photo ---------- */

.w-photo { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.w-photo-frame {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--teal-quiet);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.w-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-photo-frame span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--teal);
  letter-spacing: 0.02em;
}
.w-photo-body { flex: 1 1 18rem; min-width: 0; }
.w-photo-body p { margin: 0 0 var(--sp-3); font-size: var(--text-small); color: var(--stone); }
.w-photo-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.w-photo-actions input[type="file"] { font-size: var(--text-small); max-width: 16rem; }

.portal-avatar.has-photo { padding: 0; overflow: hidden; background: transparent; }
.portal-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ---------- Opportunities ---------- */

.w-opp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-5);
}
.w-opp-toolbar .w-count { font-size: var(--text-small); color: var(--stone); margin-right: auto; }

.w-opps { display: grid; gap: var(--sp-4); }
.w-opp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cloud);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.w-opp.is-dismissed { opacity: 0.55; }
.w-opp-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: flex-start; }
.w-opp-head h3 { margin: 0 0 var(--sp-1); font-size: 1.0625rem; line-height: 1.35; }
.w-opp-org { font-size: var(--text-small); color: var(--slate); }
.w-opp-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--text-micro); color: var(--stone); }
.w-opp-why {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--teal-quiet);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--ink);
}
.w-opp-summary { margin: var(--sp-4) 0 0; font-size: var(--text-small); color: var(--stone); }
.w-opp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- inbox review queue ---------- */

.w-queue { display: grid; gap: var(--sp-4); }
.w-proposal {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--cloud);
  padding: var(--sp-5);
}
.w-proposal.is-approved { border-left-color: var(--ok); }
.w-proposal.is-rejected { border-left-color: var(--line-strong); opacity: 0.6; }
.w-proposal h3 { margin: 0 0 var(--sp-2); font-size: 1.0625rem; }
.w-proposal dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--text-small); }
.w-proposal dt { color: var(--stone); font-weight: 600; }
.w-proposal dd { margin: 0; color: var(--slate); }
.w-excerpt {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--line-strong);
  background: var(--linen);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-micro);
  color: var(--stone);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- learning library ---------- */

.w-library { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.w-resource {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cloud);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.w-resource h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.w-resource p { margin: 0; font-size: var(--text-small); color: var(--stone); }
.w-resource .w-resource-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---------- payments ---------- */

.w-stages { display: grid; gap: var(--sp-3); }
.w-stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cloud);
}
.w-stage strong { display: block; font-size: var(--text-body); }
.w-stage small { display: block; color: var(--stone); font-size: var(--text-micro); margin-top: var(--sp-1); }
.w-stage-amount { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* ---------- sign in with a linked account ---------- */

.w-oauth { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.w-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 0.8rem var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-small);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.w-oauth-btn:hover { border-color: var(--ink); background: var(--linen); text-decoration: none; }
.w-oauth-btn svg { width: 18px; height: 18px; flex: none; }
.w-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--stone-light);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--sp-5) 0;
}
.w-divider::before,
.w-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 640px) {
  .w-photo-frame { width: 84px; height: 84px; }
  .w-proposal dl { grid-template-columns: 1fr; gap: var(--sp-1); }
  .w-proposal dt { margin-top: var(--sp-2); }
}