/* ---------------------------------------------------------------------------
   The consultant portal.
   Its own shell on top of app.css, which supplies the buttons, the flashes and
   the colour variables. Nothing here restyles a staff screen: every rule is
   under a cand* class, so the two can never collide.
   --------------------------------------------------------------------------- */

:root {
  --cand-ink:   #1f2937;
  --cand-line:  rgba(37, 53, 89, .12);
  --cand-soft:  #f6f7fb;
  --cand-navy:  #253559;
  --cand-gold:  #f6b129;
  --cand-good:  #0f9d58;
  --cand-bad:   #d93025;
}

.candbody { background: var(--cand-soft); min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ chrome */
.candtop {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem clamp(1rem, 4vw, 2.25rem);
  background: var(--cand-navy); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.candbrand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: #fff; }
.candbrand-mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--cand-gold); color: var(--cand-navy); font-weight: 800;
}
.candbrand-name { font-size: 1rem; letter-spacing: .01em; }
.candbrand-name strong { color: var(--cand-gold); font-weight: 700; }

.candnav { display: flex; gap: .3rem; margin-left: 1rem; }
.candnav-a {
  color: rgba(255,255,255,.82); text-decoration: none; font-size: .9rem;
  padding: .4rem .75rem; border-radius: 7px;
}
.candnav-a:hover { background: rgba(255,255,255,.1); color: #fff; }
.candnav-a.is-on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

/* Only ever shown on a phone, on a page whose nav has been hidden. */
.candhome { display: none; text-decoration: none; border-radius: 9px; }
.candhome:hover { background: rgba(255,255,255,.1); }

.candwho { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .88rem; }
.candwho-name { color: rgba(255,255,255,.9); }
.candwho-out  { color: var(--cand-gold); text-decoration: none; }
.candwho-out:hover { text-decoration: underline; }

.candmain { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.25rem) 3rem; }
.candfoot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 2.25rem); border-top: 1px solid var(--cand-line);
  font-size: .82rem; color: #6b7280; background: #fff;
}

/* -------------------------------------------------------------- page header */
.candhead { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.candhead h1 { margin: .1rem 0 .2rem; font-size: 1.55rem; }
.candhead > div:first-child { flex: 1 1 22rem; }
.candhead > .btn, .candhead > a.btn { margin-left: auto; }
.candback { font-size: .84rem; color: var(--cand-navy); text-decoration: none; }
.candback:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the cards */
.candcard {
  background: #fff; border: 1px solid var(--cand-line); border-radius: 12px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.candcard.flush { padding: 0; overflow: hidden; }
.candcard h2 { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .01em; }
.candgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.1rem; }
.candtwo  { display: grid; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); gap: 1.1rem; }

.candempty { background: #fff; border: 1px solid var(--cand-line); border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; }
.candempty h2 { margin: 0 0 .4rem; }
.candempty p  { margin: 0; color: #6b7280; }

/* --------------------------------------------------------------- the tiles */
.candtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.candtile {
  background: #fff; border: 1px solid var(--cand-line); border-radius: 12px;
  padding: .9rem 1rem; display: flex; flex-direction: column; gap: .1rem;
  border-top: 3px solid var(--cand-navy);
}
.candtile.is-good { border-top-color: var(--cand-good); }
.candtile.is-warm { border-top-color: var(--cand-gold); }
.candtile-n { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.candtile-l { font-size: .9rem; font-weight: 600; }
.candtile-s { font-size: .78rem; color: #6b7280; }

/* -------------------------------------------------------------- the funnel */
.candfunnel { display: flex; flex-direction: column; gap: .45rem; }
.candfunnel-row { display: grid; grid-template-columns: 9.5rem 1fr 2.2rem; align-items: center; gap: .6rem; font-size: .86rem; }
.candfunnel-row.is-zero { opacity: .45; }
.candfunnel-l { color: #374151; }
.candfunnel-track { height: 9px; background: rgba(37,53,89,.08); border-radius: 99px; overflow: hidden; }
.candfunnel-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cand-navy), #4a6198); }
.candfunnel-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the sparkline */
.candspark { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: .3rem; }
.candspark-bar { flex: 1; background: var(--cand-navy); border-radius: 2px 2px 0 0; min-height: 3px; }
.candspark-bar.is-zero { background: rgba(37,53,89,.12); }
.candspark-axis { display: flex; justify-content: space-between; font-size: .74rem; color: #6b7280; margin-top: .35rem; }

/* ---------------------------------------------------------------- bar lists */
.candbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.candbars li { display: grid; grid-template-columns: 8.5rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .85rem; }
.candbars-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candbars-track { height: 8px; background: rgba(37,53,89,.08); border-radius: 99px; overflow: hidden; }
.candbars-fill { display: block; height: 100%; background: var(--cand-navy); border-radius: 99px; }
.candbars-fill.is-alt { background: var(--cand-gold); }
.candbars-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ tables */
.candtbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.candtbl th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7280; padding: .6rem .75rem; border-bottom: 1px solid var(--cand-line);
}
.candtbl td { padding: .65rem .75rem; border-bottom: 1px solid rgba(37,53,89,.07); vertical-align: top; }
.candtbl tr:last-child td { border-bottom: 0; }
/* :not(.btn) is doing real work here.
   A bare `.candtbl a` scores one class and one type, which outranks the single
   class on `.btn-ai` -- so every Ask AI button in a table was painted navy text
   on its own navy background and read as a blank slab. Links are styled as
   links; anything already dressed as a button keeps its own colours. */
.candtbl a:not(.btn) { color: var(--cand-navy); text-decoration: none; }
.candtbl a:not(.btn):hover { text-decoration: underline; }
.candtbl .right { text-align: right; }
.candtbl .nowrap { white-space: nowrap; }
.candtbl-wide { min-width: 52rem; }
.candcard.flush .candtbl { display: block; overflow-x: auto; }

.candbadge { display: inline-block; padding: .16rem .5rem; border-radius: 99px; font-size: .76rem; font-weight: 600; }
.candbadge.is-good { background: rgba(15,157,88,.12); color: #0b7a44; }
.candbadge.is-bad  { background: rgba(217,48,37,.1);  color: #b3261e; }
.candbadge.is-open { background: rgba(37,53,89,.09);  color: var(--cand-navy); }

/* --------------------------------------------------------------- the facts */
.candfacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem;
  background: #fff; border: 1px solid var(--cand-line); border-radius: 12px;
  padding: .9rem 1.1rem; margin-bottom: 1.1rem;
}
.candfacts > div { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.candfacts-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.candfacts .ok { color: var(--cand-good); }

/* ---------------------------------------------------------- read-only docs */
.candskills { margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.candchip {
  display: inline-block; padding: .16rem .55rem; border-radius: 99px;
  background: rgba(37,53,89,.07); color: var(--cand-navy); font-size: .78rem; font-weight: 500;
}
.candchip.is-warm { background: rgba(246,177,41,.18); color: #8a5a00; }

/* The document itself. Scrolls in place so the two panels stay side by side,
   and carries no download because nothing ever sent the file. */
.canddoc {
  max-height: 32rem; overflow-y: auto; padding: .9rem 1rem;
  background: #fbfbfd; border: 1px solid var(--cand-line); border-radius: 9px;
  font-size: .86rem; line-height: 1.6; white-space: normal;
}
.candread h2 { display: flex; align-items: center; gap: .5rem; }

/* ------------------------------------------------------------------ ask ai */
.btn-ai { background: var(--cand-navy); color: #fff; border-color: var(--cand-navy); }
.btn-ai:hover { background: #1b2942; color: #fff; }

.candask { display: flex; flex-direction: column; }

/* The live box sits above the sheet and stays put while it scrolls: on a call
   the consultant needs it under their thumb, not below fourteen answers.
   Capped, because a six-point answer made it as tall as the screen and the
   prepared questions it is pinned above disappeared behind it. It keeps its
   place; the answer scrolls inside it. */
.candlive {
  position: sticky; top: 3.6rem; z-index: 10;
  display: flex; flex-direction: column;
  max-height: min(46vh, 30rem);
  background: linear-gradient(180deg, #fff, #fbfcff);
  border: 1px solid var(--cand-line); border-left: 4px solid var(--cand-gold);
  border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.1rem;
  box-shadow: 0 6px 20px rgba(37,53,89,.07);
}
/* The head and the field keep their size; only the answer gives way. */
.candlive-head, .candlive-form { flex: 0 0 auto; }
.candlive-head { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.candlive-head > div { flex: 1 1 16rem; }
.candlive-head h2 { margin: 0 0 .15rem; font-size: 1rem; }
/* Puts the questions back without reloading, once an answer has been read. */
.candlive-clear {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: .1rem .4rem;
  color: var(--cand-navy); font-size: .8rem; text-decoration: underline; border-radius: 6px;
}
.candlive-clear:hover { background: rgba(37,53,89,.07); }
.candlive-head p  { margin: 0 0 .7rem; }
.candlive-form { display: flex; gap: .5rem; }
.candlive-form input[type="text"] {
  flex: 1; padding: .6rem .8rem; font-size: 1rem;
  border: 1px solid var(--cand-line); border-radius: 9px; background: #fff;
}
.candlive-form input[type="text"]:focus { outline: 2px solid var(--cand-navy); outline-offset: 1px; }

/* min-height:0 is what actually lets this scroll: without it a flex child
   refuses to shrink below its content and the cap above does nothing. */
.candlive-out {
  margin-top: .8rem; border-top: 1px dashed var(--cand-line); padding-top: .75rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.candlive-out.is-busy { opacity: .7; }
.candlive-topic { display: flex; align-items: baseline; gap: .5rem; font-weight: 700; margin-bottom: .45rem; }
.candlive-ms { font-size: .72rem; font-weight: 500; color: #6b7280; }
.candlive-caution {
  margin: 0 0 .5rem; font-size: .84rem; color: #8a5a00;
  background: rgba(246,177,41,.12); padding: .4rem .6rem; border-radius: 7px;
}
.candlive-points { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.candlive-points li { font-size: .92rem; line-height: 1.55; }

.candsheet-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.candsheet-head h2 { margin: 0; }
.candsheet-act { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.candstatus { padding: 1.4rem .2rem; text-align: center; }
.candstatus p { margin: .5rem 0 0; }
.candfail { color: var(--cand-bad); margin: 0 0 .6rem; }

.candspin { display: inline-flex; align-items: center; gap: .55rem; font-size: .93rem; color: #374151; }
.candspin-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--cand-navy);
  animation: candpulse 1s ease-in-out infinite;
}
@keyframes candpulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .candspin-dot { animation: none; opacity: .7; } }

.candemph { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .9rem; }
.candemph-l { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-right: .2rem; }

.candpair { border: 1px solid var(--cand-line); border-radius: 10px; margin-bottom: .5rem; background: #fff; }
.candpair[open] { border-color: rgba(37,53,89,.28); }
.candpair summary {
  display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem;
  cursor: pointer; list-style: none; font-weight: 600; font-size: .95rem;
}
.candpair summary::-webkit-details-marker { display: none; }
.candpair-n {
  flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: rgba(37,53,89,.08); color: var(--cand-navy);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.candpair-q { flex: 1; }
.candpair-s { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: #8a5a00; background: rgba(246,177,41,.16); padding: .1rem .45rem; border-radius: 99px; }
.candpair-a { margin: 0; padding: 0 .95rem .9rem 2.95rem; font-size: .92rem; line-height: 1.65; color: #374151; }

.candwarn { margin: .4rem 0 0; }

/* ------------------------------------------------------------- sign-in page */
.candauth { display: grid; place-items: center; min-height: 58vh; padding: 1rem 0; }
.candauth-card {
  width: min(26rem, 100%); background: #fff; border: 1px solid var(--cand-line);
  border-radius: 14px; padding: 1.8rem 1.7rem; box-shadow: 0 10px 34px rgba(37,53,89,.08);
}
.candauth-card h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.candauth-card > p.muted { margin: 0 0 1.1rem; font-size: .9rem; }
.candauth-help { margin: 1rem 0 0; }
.candform { display: flex; flex-direction: column; gap: .3rem; }
.candform label { font-size: .8rem; font-weight: 600; margin-top: .55rem; }
.candform input {
  padding: .6rem .75rem; font-size: 1rem; border: 1px solid var(--cand-line);
  border-radius: 9px; background: #fff;
}
.candform input:focus { outline: 2px solid var(--cand-navy); outline-offset: 1px; }
.candform .btn { margin-top: 1rem; }

.candsearch { display: flex; gap: .4rem; margin-left: auto; }
.candsearch input[type="search"] {
  padding: .45rem .7rem; border: 1px solid var(--cand-line); border-radius: 9px;
  background: #fff; min-width: 15rem;
}

/* The filter bar: a search that says what it searches, and a status list built
   from the rows the consultant actually has. */
.candfilters {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--cand-line); border-radius: 12px;
  padding: .6rem .7rem; margin-bottom: 1.1rem;
}
.candfilters-search { flex: 1 1 20rem; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--cand-line); border-radius: 9px; padding: 0 .7rem; background: #fff; }
.candfilters-search svg { width: 16px; height: 16px; color: #6b7280; flex: 0 0 auto; }
.candfilters-search input {
  flex: 1; border: 0; outline: none; background: none; padding: .5rem 0; font-size: .92rem; min-width: 0;
}
.candfilters-search:focus-within { border-color: var(--cand-navy); box-shadow: 0 0 0 3px rgba(37,53,89,.1); }
.candfilters select {
  padding: .5rem .7rem; border: 1px solid var(--cand-line); border-radius: 9px;
  background: #fff; font-size: .9rem; max-width: 16rem;
}

@media (max-width: 720px) {
  .candnav { margin-left: 0; }
  .candtop { flex-wrap: wrap; gap: .6rem; }
  .candwho { width: 100%; margin-left: 0; justify-content: space-between; }
  .candfunnel-row { grid-template-columns: 7.5rem 1fr 2rem; }
  .candbars li { grid-template-columns: 6.5rem 1fr 1.8rem; }
  .candlive { position: static; }
  .candpair-a { padding-left: .95rem; }
}

/* Printing a prepared sheet is fine; printing the vendor's document is not the
   point of this portal, so the two read-only panels are left out of print. */
@media print { [data-noprint] { display: none !important; } }

/* ===========================================================================
   The submission page.

   The portal's white surface, kept. What carries the colour is the small set of
   things worth finding fast: the skills the requirement names, the section
   headings inside two long documents, and the state of the submission.

   Google's palette, at full strength. The pills are solid rather than tinted
   for one reason: bright blue on a pale blue wash measures under 4:1, and the
   pale washes are exactly what made the first attempt look washed out. Filled,
   the same colour is vivid AND legible -- white on blue, red, green and purple;
   near-black on yellow and cyan, which are too light to carry white.
   =========================================================================== */
.candsub {
  --g-blue:   #1a73e8;
  --g-red:    #d93025;
  --g-yellow: #f9ab00;
  --g-green:  #1e8e3e;
  --g-purple: #9334e6;
  --g-cyan:   #12b5cb;
  --g-ink:    #202124;   /* Google grey 900, for text on yellow and cyan */

  --line:   rgba(32,33,36,.12);
  --line-2: rgba(32,33,36,.07);
  --ink:    #202124;
  --ink-2:  #5f6368;     /* Google grey 700 */
  --ink-3:  #80868b;     /* Google grey 600 */
  --ease:   cubic-bezier(.23, 1, .32, 1);
}
/* Full width: two documents in two narrow columns helps nobody. */
.candbody:has(.candsub) .candmain { width: min(1600px, 100%); }

/* ---------------------------------------------------------------- the header */
.candsub-top { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.candsub-back {
  order: -1; flex-basis: 100%;
  display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
  color: var(--ink-2); text-decoration: none; font-size: .84rem;
  padding: .25rem .5rem .25rem 0; border-radius: 7px;
  transition: color 160ms var(--ease);
}
.candsub-back svg { width: 15px; height: 15px; }
.candsub-back:hover { color: var(--g-blue); }
.candsub-back:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 3px; }

.candsub-title { flex: 1 1 24rem; min-width: 0; }
.candsub-title h1 {
  margin: 0 0 .3rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
  letter-spacing: -.022em; line-height: 1.14; text-wrap: balance; color: var(--ink);
}
.candsub-meta { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.candsub-meta strong { color: var(--g-blue); font-weight: 650; }

/* The one action on the page. */
.candsub-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 11px; text-decoration: none;
  font-weight: 600; font-size: .92rem; color: #fff;
  background: var(--g-blue); border: 1px solid transparent;
  box-shadow: 0 8px 18px -10px rgba(26,115,232,.85), 0 1px 2px rgba(32,33,36,.2);
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease);
}
.candsub-cta svg { width: 17px; height: 17px; }
.candsub-cta:hover { background: #1765cc; color: #fff; box-shadow: 0 12px 24px -10px rgba(26,115,232,.95), 0 1px 3px rgba(32,33,36,.24); }
.candsub-cta:active { transform: scale(.97); }
.candsub-cta:focus-visible { outline: 2px solid var(--g-yellow); outline-offset: 3px; }

/* ----------------------------------------------------------------- the facts */
.candsub-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px; margin-bottom: 1.3rem;
  background: var(--line-2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.candfact { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1rem; background: #fff; }
.candfact-l { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.candfact-v { font-size: 1.02rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
.candfact-s { font-size: .74rem; color: var(--ink-3); }
.candfact-none { color: var(--ink-3); font-weight: 400; font-size: .92rem; }
.candfact-pct { font-size: .72em; color: var(--ink-2); margin-left: .05em; }
.candfact-ref { font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* The state of the submission, in Google's own semantics. */
.candsub .candbadge { font-size: .8rem; padding: .22rem .65rem; font-weight: 600; }
.candsub .candbadge.is-good { background: var(--g-green);  color: #fff; }
.candsub .candbadge.is-bad  { background: var(--g-red);    color: #fff; }
.candsub .candbadge.is-open { background: var(--g-blue);   color: #fff; }

/* ------------------------------------------------------------- the documents */
/* The two panels end level.
   Sized to their own content they did not: the requirement ran longer than the
   resume, so the right-hand column stopped short and left a band of empty page
   under it. Stretched to the taller of the two, with each document scrolling
   inside its own panel. */
.candsub-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 1.1rem; align-items: stretch; }

.canddoc-panel {
  display: flex; flex-direction: column; min-height: min(70vh, 48rem);
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(32,33,36,.06), 0 12px 28px -22px rgba(32,33,36,.5);
}
.canddoc-head, .canddoc-skills { flex: 0 0 auto; }
.canddoc-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem .85rem; border-bottom: 1px solid var(--line-2); }
.canddoc-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.012em; color: var(--ink); }
.canddoc-head p  { margin: .1rem 0 0; font-size: .8rem; color: var(--ink-3); }
.canddoc-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
}
.canddoc-icon svg { width: 19px; height: 19px; }
.canddoc-icon.is-jd { background: var(--g-blue); box-shadow: 0 6px 14px -8px rgba(26,115,232,.9); }
.canddoc-icon.is-cv { background: var(--g-red);  box-shadow: 0 6px 14px -8px rgba(217,48,37,.9); }

/* ------------------------------------------------------------ the skill pills */
.canddoc-skills { display: flex; flex-wrap: wrap; gap: .35rem; padding: .95rem 1.15rem 0; }
/* One colour, quietly.
   Six solid fills turned a skills list into a paint chart: fourteen pills all
   shouting meant none of them led, and the eye went to the loudest hue rather
   than the first skill. They are a list, not a ranking -- so they take a single
   tint, and the page keeps its blue for the things that actually differ. */
.candsub .candchip,
.candsub .candchip.c1, .candsub .candchip.c2, .candsub .candchip.c3,
.candsub .candchip.c4, .candsub .candchip.c5, .candsub .candchip.c6 {
  font-size: .78rem; font-weight: 550; padding: .22rem .62rem; border-radius: 99px;
  letter-spacing: .005em;
  color: #1967d2; background: #e8f0fe; border: 1px solid rgba(26,115,232,.18);
}

/* ------------------------------------------------------- the reading surface */
.canddoc-body {
  flex: 1 1 auto; min-height: 0;          /* min-height:0 is what lets it scroll */
  margin: .9rem; padding: 1.15rem 1.35rem;
  overflow-y: auto; overscroll-behavior: contain;
  background: #f8f9fa; border: 1px solid var(--line-2); border-radius: 11px;
  font-size: .89rem; line-height: 1.7; color: #3c4043;
}
.canddoc-body:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 2px; }
.canddoc-body { scrollbar-width: thin; scrollbar-color: rgba(26,115,232,.35) transparent; }
.canddoc-body::-webkit-scrollbar { width: 10px; }
.canddoc-body::-webkit-scrollbar-track { background: transparent; }
.canddoc-body::-webkit-scrollbar-thumb { background: rgba(26,115,232,.3); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.canddoc-body::-webkit-scrollbar-thumb:hover { background: rgba(26,115,232,.55); background-clip: content-box; }
.candsub ::selection { background: rgba(26,115,232,.2); }

/* -------------------------------------------------- the document's own parts */
.cdoc-name { margin: 0 0 .1rem; font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.cdoc-role { margin: 0 0 1.1rem; font-size: .93rem; color: var(--g-blue); font-weight: 600; }

/* The headings are what make a wall of text navigable, so they carry colour and
   a rule rather than merely being bold. */
.cdoc-h {
  margin: 1.6rem 0 .6rem; font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--g-blue);
  display: flex; align-items: center; gap: .55rem;
}
.cdoc-h::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--g-blue), var(--g-red) 32%, var(--g-yellow) 62%, var(--g-green) 88%, transparent); opacity: .45; }
.cdoc-h:first-child { margin-top: 0; }

.cdoc-p { margin: 0 0 .7rem; max-width: 74ch; }
.cdoc-lab { color: var(--g-green); font-weight: 650; }
.cdoc-list { margin: 0 0 .9rem; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.cdoc-list li { position: relative; padding-left: 1.15rem; max-width: 74ch; }
.cdoc-list li::before {
  content: ""; position: absolute; left: .15rem; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--g-yellow);
}
.cdoc-empty { color: var(--ink-3); font-style: italic; }

@media (max-width: 900px) {
  .candsub-docs { grid-template-columns: 1fr; }
  .candsub-cta { width: 100%; justify-content: center; }
  .canddoc-panel { min-height: 32rem; }
}

/* ------------------------------------------------------------- the document */
/* A rendered file needs the panel, not the padded reading box: docx-preview
   draws its own page with its own margins, and a PDF brings the whole viewer. */
.canddoc-body.is-file { padding: 0; background: #f1f3f4; overflow: hidden; }
.candcv-frame { display: block; width: 100%; height: 100%; min-height: 28rem; border: 0; background: #f1f3f4; }
.candcv-img   { display: block; width: 100%; height: auto; }

/* overflow on both axes is the safety net: if the fit script never runs, the
   document can still be scrolled to rather than silently cut off. */
.canddoc-body.docxhost { overflow: auto; padding: 0; }
.canddoc-body .docx-status { padding: .6rem .9rem; font-size: .84rem; color: var(--ink-2); }
.canddoc-body .docx-status:empty { display: none; }
.canddoc-body .docx-fallback { padding: 1.15rem 1.35rem; }
/* docx-preview paints a white page; centre it on the grey and give it a shadow
   so it reads as a document sitting on a desk rather than a pasted fragment. */
.canddoc-body .docxview-wrapper { background: #f1f3f4 !important; padding: 1rem !important; }
.canddoc-body .docxview-wrapper > section.docxview {
  box-shadow: 0 1px 2px rgba(32,33,36,.12), 0 8px 22px -14px rgba(32,33,36,.5) !important;
  margin: 0 auto 1rem !important; border-radius: 4px;
}
.canddoc-fmt {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1967d2; background: #e8f0fe; border: 1px solid rgba(26,115,232,.2);
  padding: .2rem .5rem; border-radius: 6px;
}

/* The vendor's own markup, given the same rhythm as everything else on the page
   without overriding the structure they chose. */
.canddoc-body.is-vendorhtml { line-height: 1.7; }
.canddoc-body.is-vendorhtml p { margin: 0 0 .7rem; max-width: 74ch; }
.canddoc-body.is-vendorhtml ul,
.canddoc-body.is-vendorhtml ol { margin: 0 0 .9rem; padding-left: 1.25rem; }
.canddoc-body.is-vendorhtml li { margin-bottom: .35rem; max-width: 72ch; }
.canddoc-body.is-vendorhtml li::marker { color: var(--g-blue); }
.canddoc-body.is-vendorhtml h1, .canddoc-body.is-vendorhtml h2,
.canddoc-body.is-vendorhtml h3, .canddoc-body.is-vendorhtml h4,
.canddoc-body.is-vendorhtml h5, .canddoc-body.is-vendorhtml h6 {
  margin: 1.4rem 0 .5rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--g-blue);
}
.canddoc-body.is-vendorhtml h1:first-child, .canddoc-body.is-vendorhtml h2:first-child { margin-top: 0; }
.canddoc-body.is-vendorhtml strong, .canddoc-body.is-vendorhtml b { color: var(--ink); font-weight: 650; }
.canddoc-body.is-vendorhtml a { color: var(--g-blue); }
.canddoc-body.is-vendorhtml table { width: 100%; border-collapse: collapse; margin: 0 0 .9rem; font-size: .86rem; }
.canddoc-body.is-vendorhtml th, .canddoc-body.is-vendorhtml td {
  border: 1px solid rgba(32,33,36,.12); padding: .4rem .55rem; text-align: left; vertical-align: top;
}
.canddoc-body.is-vendorhtml th { background: #f1f3f4; font-weight: 650; color: var(--ink); }
.canddoc-body.is-vendorhtml img { max-width: 100%; height: auto; }

/* =========================================================== the dashboard
   The same Google palette, on the panels a consultant reads first. The funnel
   is the one place a gradient earns its keep: it is a single measure falling
   from left to right, so the colour falls with it. */
.canddash { --g-blue:#1a73e8; --g-red:#d93025; --g-yellow:#f9ab00; --g-green:#1e8e3e;
            --g-purple:#9334e6; --g-cyan:#12b5cb; }

.canddash .candtile { border-top: 3px solid var(--g-blue); }
.canddash .candtile:nth-child(2) { border-top-color: var(--g-green); }
.canddash .candtile:nth-child(3) { border-top-color: var(--g-yellow); }
.canddash .candtile:nth-child(4) { border-top-color: var(--g-purple); }
.canddash .candtile-n { color: var(--g-blue); }
.canddash .candtile:nth-child(2) .candtile-n { color: var(--g-green); }
.canddash .candtile:nth-child(3) .candtile-n { color: #ea8600; }
.canddash .candtile:nth-child(4) .candtile-n { color: var(--g-purple); }

.canddash .candfunnel-fill { background: linear-gradient(90deg, var(--g-blue), #4285f4); }
.canddash .candfunnel-row:nth-child(2) .candfunnel-fill { background: linear-gradient(90deg, var(--g-green), #34a853); }
.canddash .candfunnel-row:nth-child(3) .candfunnel-fill { background: linear-gradient(90deg, #ea8600, var(--g-yellow)); }
.canddash .candfunnel-row:nth-child(4) .candfunnel-fill { background: linear-gradient(90deg, var(--g-purple), #a142f4); }
.canddash .candfunnel-row:nth-child(5) .candfunnel-fill { background: linear-gradient(90deg, var(--g-cyan), #4ecde6); }
.canddash .candfunnel-row:nth-child(6) .candfunnel-fill { background: linear-gradient(90deg, var(--g-red), #ea4335); }
.canddash .candfunnel-n { color: var(--ink, #202124); }

.canddash .candspark-bar { background: var(--g-blue); }
.canddash .candspark-bar.is-zero { background: rgba(26,115,232,.14); }
.canddash .candbars-fill { background: var(--g-green); }
.canddash .candbars-fill.is-alt { background: var(--g-purple); }

/* The status badges, the same semantics the submission page uses. */
.canddash .candbadge { font-weight: 600; }
.canddash .candbadge.is-good { background: var(--g-green); color: #fff; }
.canddash .candbadge.is-bad  { background: var(--g-red);   color: #fff; }
.canddash .candbadge.is-open { background: var(--g-blue);  color: #fff; }

.canddash .candcard h2 { display: flex; align-items: center; gap: .5rem; }
.canddash .candcard h2::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 99px; background: var(--g-blue);
}
.canddash .candcard:nth-of-type(2n) h2::before { background: var(--g-green); }
.canddash .candcard:nth-of-type(3n) h2::before { background: var(--g-yellow); }

.canddash .btn-ai { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.canddash .btn-ai:hover { background: #1765cc; border-color: #1765cc; color: #fff; }

/* ===========================================================================
   Ask AI.

   The same Google palette as the rest of the portal. The one place it does real
   work rather than decorating: the question numbers cycle blue, red, yellow,
   green, so a consultant scrolling a sheet of fourteen has something to count
   by and can find question nine again after a phone call interrupts them.
   =========================================================================== */
.candask {
  --g-blue:#1a73e8; --g-red:#d93025; --g-yellow:#f9ab00; --g-green:#1e8e3e;
  --g-amber-ink:#ea8600; --g-ink:#202124; --g-ink-2:#5f6368; --g-ink-3:#80868b;
  --g-line:rgba(32,33,36,.12);
  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* ------------------------------------------------------------- the live box */
.candask .candlive {
  border: 1px solid var(--g-line); border-left: 4px solid var(--g-blue);
  box-shadow: 0 1px 2px rgba(32,33,36,.06), 0 10px 26px -20px rgba(32,33,36,.55);
  background: #fff;
}
.candask .candlive-head h2 { color: var(--g-ink); }
.candask .candlive-form input[type="text"] { border-color: var(--g-line); }
.candask .candlive-form input[type="text"]:focus {
  outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}
.candask .candlive-form .btn-ai { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.candask .candlive-form .btn-ai:hover { background: #1765cc; border-color: #1765cc; color: #fff; }
.candask .candlive-form .btn-ai:active { transform: scale(.97); }
.candask .candlive-clear { color: var(--g-blue); }
.candask .candlive-clear:hover { background: rgba(26,115,232,.08); }
.candask .candlive-topic { color: var(--g-ink); }
.candask .candlive-ms { color: var(--g-green); font-weight: 600; }
.candask .candlive-caution {
  color: #8a5100; background: #fef7e0; border-left: 3px solid var(--g-yellow);
  border-radius: 0 7px 7px 0;
}
/* The points are what gets read aloud, so they get room and a marker that is
   not the browser's grey disc. */
.candask .candlive-points { padding-left: 0; list-style: none; }
.candask .candlive-points li { position: relative; padding-left: 1.3rem; }
.candask .candlive-points li::before {
  content: ""; position: absolute; left: .15rem; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--g-blue);
}
.candask .candlive-points li:nth-child(4n+2)::before { background: var(--g-red); }
.candask .candlive-points li:nth-child(4n+3)::before { background: var(--g-yellow); }
.candask .candlive-points li:nth-child(4n+4)::before { background: var(--g-green); }
.candask .candspin-dot { background: var(--g-blue); }

/* ---------------------------------------------------------- the prepared sheet */
.candask .candsheet-head h2 { display: flex; align-items: center; gap: .5rem; }
.candask .candsheet-head h2::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 99px; background: var(--g-blue);
}
.candask #cand-qa-go { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.candask #cand-qa-go:hover { background: #1765cc; border-color: #1765cc; color: #fff; }
.candask #cand-qa-go:active { transform: scale(.97); }
.candask .candfail { color: var(--g-red); }

/* The skills the vendor will press on: one tint, like the pills next door. */
.candask .candemph-l { color: var(--g-ink-3); }
.candask .candemph .candchip,
.candask .candemph .candchip.is-warm {
  color: #1967d2; background: #e8f0fe; border: 1px solid rgba(26,115,232,.18);
  font-weight: 550;
}

.candask .candpair { border-color: var(--g-line); transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease); }
.candask .candpair:hover { border-color: rgba(26,115,232,.35); }
.candask .candpair[open] {
  border-color: rgba(26,115,232,.4);
  box-shadow: 0 1px 2px rgba(32,33,36,.06), 0 10px 24px -20px rgba(26,115,232,.8);
}
.candask .candpair summary { color: var(--g-ink); }
.candask .candpair-q { color: var(--g-ink); }
.candask .candpair-a { color: #3c4043; }

/* Counting colour: four hues on a loop, so question nine is findable again. */
.candask .candpair-n { background: var(--g-blue); color: #fff; }
.candask .candpair:nth-of-type(4n+2) .candpair-n { background: var(--g-red); }
.candask .candpair:nth-of-type(4n+3) .candpair-n { background: var(--g-yellow); color: var(--g-ink); }
.candask .candpair:nth-of-type(4n+4) .candpair-n { background: var(--g-green); }

/* Which skill a question covers, tinted to match its number. */
.candask .candpair-s { background: #e8f0fe; color: #1967d2; font-weight: 600; }
.candask .candpair:nth-of-type(4n+2) .candpair-s { background: #fce8e6; color: #c5221f; }
.candask .candpair:nth-of-type(4n+3) .candpair-s { background: #fef7e0; color: #8a5100; }
.candask .candpair:nth-of-type(4n+4) .candpair-s { background: #e6f4ea; color: #137333; }

.candask .candwarn { color: var(--g-ink-3); }

/* ---------------------------------------------------------- the match figure */
/* Given a tinted cell and a band colour, because it is the one number on the
   page a consultant actually hunts for and it was sitting in the same grey as
   the reference code next to it. */
.candfact.is-match { position: relative; }
.candfact.is-match::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: currentColor;
}
.candfact.is-match.is-strong { background: #f2fbf5; color: #1e8e3e; }
.candfact.is-match.is-fair   { background: #fffbf0; color: #ea8600; }
.candfact.is-match.is-low    { background: #fdf3f2; color: #d93025; }

.candmatch {
  display: inline-flex; align-items: baseline; gap: .02em;
  font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.candfact.is-match.is-strong .candmatch { color: #137333; }
.candfact.is-match.is-fair   .candmatch { color: #b06000; }
.candfact.is-match.is-low    .candmatch { color: #c5221f; }
.candmatch-pct { font-size: .55em; font-weight: 600; opacity: .75; margin-left: .04em; }
.candfact.is-match .candfact-l,
.candfact.is-match .candfact-s { color: inherit; opacity: .72; }

/* ==========================================================================
   On a phone
   ==========================================================================
   Measured at 390px before writing any of this: the dashboard scrolled 247px
   sideways, column headings sat at 11.5px, and one link was six pixels tall.
   A consultant opens this on a train to see whether anything moved, so the
   answer has to be legible held in one hand.

   The tables are the whole problem. Six columns do not fit a phone, and the
   usual fix -- let it scroll sideways -- means dragging the page about to read
   a single row. Each row becomes a card instead, with the column name printed
   beside its value.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* --- rows as cards ----------------------------------------------------- */
  /* The wide variant sets a 52rem floor so its seven columns keep their shape
     on a desktop. As cards there are no columns, and the floor is the one
     thing still forcing the page sideways. */
  .candtbl-wide { min-width: 0; }

  .candtbl thead { display: none; }
  .candtbl, .candtbl tbody, .candtbl tr, .candtbl td { display: block; width: 100%; }

  .candtbl tr {
    background: var(--cand-surface, #fff);
    border: 1px solid var(--cand-line, #e6e9f0);
    border-radius: 12px;
    padding: .7rem .85rem;
    margin-bottom: .6rem;
  }

  .candtbl td {
    border: 0;
    padding: .3rem 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
  }

  /* The column name, printed where the heading used to be. */
  .candtbl td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 600;
    color: var(--cand-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  /* The position is the card's heading, so it keeps the full width. */
  .candtbl td[data-label="Position"] {
    display: block;
    padding-bottom: .45rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--cand-line, #eef1f6);
  }
  .candtbl td[data-label="Position"]::before { display: none; }
  .candtbl td[data-label="Position"] strong { font-size: 1rem; }

  /* The position title is what a consultant taps to open the submission -- the
     card's whole purpose -- and it was a 17px-tall line of text. Given the full
     width of the card and a fingertip's height. */
  .candtbl td[data-label="Position"] a {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
  }

  /* Links inside the vendor's own job description.
     One measured six pixels tall, because it carries whatever styling the
     vendor's mail client wrote. Forcing 44px here would pull their paragraphs
     apart, so this is a floor rather than a target: enough to hit, not enough
     to reflow their text. */
  .candjd a, .canddoc a { display: inline-block; min-height: 24px; padding: .15rem 0; }

  /* Buttons sit together at the foot of the card, full width and thumb-sized. */
  .candtbl td.candtbl-act {
    display: flex;
    gap: .5rem;
    padding-top: .6rem;
    margin-top: .35rem;
    border-top: 1px solid var(--cand-line, #eef1f6);
  }
  .candtbl td.candtbl-act .btn { flex: 1; justify-content: center; }

  /* A cell with nothing in it is noise on a card. */
  .candtbl td:empty { display: none; }

  /* Nothing needs to hold one line when the value has a line to itself. */
  .candtbl .nowrap { white-space: normal; }

  /* --- nothing smaller than a phone can render ---------------------------- */
  /* 11.5px headings and 10.9px labels were measured; below about 12px people
     zoom, and a zoomed page is a page that then scrolls sideways. */
  .candtbl, .candtbl td, .cand-small, .small { font-size: .82rem; }
  .candfact-l, .candfact-s, .canddoc-fmt { font-size: .76rem !important; }

  /* --- anything you tap ---------------------------------------------------- */
  /* 44px is the size of a fingertip. Measured targets ran from 6px to 36px. */
  .candnav-a, .candwho-out, .candbrand, .candsub-back, .candback,
  .candtbl .btn, .candform .btn, .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .candnav-a, .candwho-out, .candback, .candsub-back { padding: .55rem .7rem; }

  /* The back links were 18-29px tall and easy to miss entirely. */
  .candback, .candsub-back { margin-left: -.7rem; }

  /* --- the header stops eating the screen --------------------------------- */
  /* It was taking 410px of an 844px screen: brand, nav and name each claiming
     a row of their own before a consultant saw a single submission. The name
     and Sign out go up beside the brand -- there is room, and the name is not
     news to the person reading it -- leaving the nav as the only other row. */
  .candtop { padding: .5rem .9rem; row-gap: .35rem; }
  .candbrand { min-height: 44px; }   /* 40 here undid the 44 set above it */
  .candbrand-mark { width: 30px; height: 30px; font-size: .9rem; }
  .candbrand-name { font-size: .95rem; }

  .candwho {
    margin-left: auto;
    order: 2;                 /* up beside the brand, not on a row of its own */
    gap: .6rem;
    font-size: .82rem;
  }
  .candwho-name {
    max-width: 8rem;          /* a long name must not push Sign out off-screen */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .candnav { order: 3; width: 100%; margin-left: 0; gap: .25rem; }
  .candnav-a { flex: 1; justify-content: center; }

  /* On a page with its own back link, the nav row goes and the dashboard
     becomes an icon beside the name. That is a whole row of a 844px screen
     returned to the thing the consultant opened the page to read. */
  /* One row, and it stays one row.
     The header wraps by default so the nav can drop below the brand; with the
     nav gone there is nothing left to wrap, and letting it wrap anyway put
     Sign out on a line of its own -- spending the row the icon just saved. */
  .candtop.is-focused { flex-wrap: nowrap; align-items: center; }
  /* The mark alone, not a truncated wordmark.
     Squeezing "Xcelo Bench" into what is left after an icon and Sign out gave
     "Xcelo…", which reads as something broken rather than as a logo. */
  /* The brand claims the space, so everything after it lands on the right.
     Pushing from this side rather than pulling with margin-left on the icon:
     something later in the sheet resets that to zero, and a rule that wins by
     being a different property is steadier than one that wins on specificity. */
  .candtop.is-focused .candbrand { flex: 0 0 auto; margin-right: auto; }
  .candtop.is-focused .candbrand-name { display: none; }

  /* The icon and Sign out sit together at the right edge, where a thumb is.
     Ordered explicitly: .candwho carries order 2 from the rule above, so
     leaving the icon at its default 0 put it between the brand and the name
     and left the auto margin nothing to push. */
  /* .candwho is width:100% from the 720px block, where it gets a row of its
     own and spreads the name and Sign out across it. On a focused header it
     shares one row, so it takes only the width it needs -- otherwise it eats
     every spare pixel and the auto margin below has nothing left to push. */
  .candtop.is-focused .candhome { order: 2; margin-left: auto; }
  .candtop.is-focused .candwho  { order: 3; width: auto; margin-left: 0;
                                  justify-content: flex-end; }

  .candtop.is-focused .candnav { display: none; }
  .candtop.is-focused .candhome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: rgba(255,255,255,.92);
  }
  .candtop.is-focused .candhome svg { width: 20px; height: 20px; }
  /* The name has already given up its row; on these pages it gives up its
     place too, so the icon and Sign out are not fighting it for width. */
  .candtop.is-focused .candwho-name { display: none; }

  .candhead { padding: 0; gap: .6rem; margin-bottom: .9rem; }

  /* Search and filter controls on the submissions list were 39px. */
  .candfilters input, .candfilters select, .candfilters button { min-height: 44px; }
  /* Stacked, because two controls side by side on a 390px screen leaves
     neither of them wide enough to read what is in it. */
  .candfilters { flex-direction: column; align-items: stretch; gap: .5rem; }
  /* flex: 1 1 20rem means "grow along the main axis", and the main axis is now
     vertical -- so the search box grew to seven hundred pixels tall filling the
     form. Growth belongs to the row layout it was written for. */
  .candfilters-search { flex: 0 0 auto; width: 100%; }
  .candfilters select { max-width: none; }

  /* The sparkline's own axis. Eleven-point-eight is the convention for chart
     furniture, but this is the one screen a consultant reads at arm's length on
     a train, and a date is not decoration. */
  .candspark-axis { font-size: .75rem; }

  /* The rendered resume is left alone, deliberately.
     Everything inside .docxview-wrapper is the consultant's actual Word
     document drawn to scale -- its own fonts, its own spacing, a six-pixel
     link in its footer. Imposing our tap sizes on it would stop it being a
     faithful rendering of the file the vendor received, which is the entire
     point of showing it. */

  /* --- Ask AI ------------------------------------------------------------- */
  /* The skill each question comes from sits beside it and can be long --
     "Generative AI Data Engineering & LangChain" is 262px on its own, which is
     two thirds of the screen. It drops under the question rather than pushing
     the page sideways. */
  .candpair summary { flex-wrap: wrap; }
  .candpair-s { max-width: 100%; white-space: normal; margin-left: 2.1rem;
                font-size: .75rem; }   /* 11.5px on its own line is too small to read */
  /* The live box is the point of the page on a phone; it gets the room. */
  .candask-live input, .candask-live textarea { font-size: 16px; }
  #cand-qa-go { width: 100%; justify-content: center; }
}

/* A font under 16px in a text field makes iOS zoom the whole page on focus,
   and it never zooms back out. Every input on the portal, at every width. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

/* ------------------------------------------------- ringing the vendor
   The dashed outline app.css gives this button suits a recruiter's list,
   where it is one control among many and the rows are worked top to bottom.
   Here it is the one thing on the page a consultant can act on, so it is
   filled in the portal's gold and carries its weight. Navy ink, because
   #f6b129 is far too light to hold white. */
.candtbl .conbtn {
  background: var(--cand-gold); border: 1px solid #e0a021; border-radius: 999px;
  padding: .2rem .7rem; font-size: .74rem; font-weight: 600; color: var(--cand-navy);
  cursor: pointer; transition: background 160ms var(--ease, ease-out),
                               transform 160ms var(--ease, ease-out);
}
.candtbl .conbtn:hover { background: #ffc451; border-style: solid; color: var(--cand-navy); }
.candtbl .conbtn:active { transform: scale(.97); }
.candtbl .conbtn:focus-visible { outline: 2px solid var(--cand-navy); outline-offset: 2px; }

/* ------------------------------------------------------------ interviews */
.candivs { border-top: 3px solid var(--cand-gold); }
.candiv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.candiv {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem .8rem; border: 1px solid var(--cand-line); border-radius: 10px; background: #fff;
}
.candiv.is-live { border-color: var(--cand-good); box-shadow: 0 0 0 3px rgba(15,157,88,.12); }
.candiv.is-past { background: var(--cand-soft); }
.candiv.is-past .candiv-day { background: #e5e8f0; color: #4b5563; }
.candiv-day {
  flex: 0 0 auto; width: 3.1rem; padding: .35rem 0; border-radius: 9px; text-align: center;
  background: var(--cand-navy); color: #fff; line-height: 1.05;
}
.candiv-d { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.candiv-m { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cand-gold); }
.candiv.is-past .candiv-m { color: #6b7280; }
.candiv-main { flex: 1 1 0; min-width: 0; }
.candiv-when { font-weight: 650; font-size: .95rem; color: var(--cand-ink); }
.candiv-now {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px; margin-right: .2rem;
  background: var(--cand-good); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; vertical-align: 1px;
}
.candiv-job { display: block; color: var(--cand-navy); text-decoration: none; font-size: .9rem; margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candiv-job:hover { text-decoration: underline; }
.candiv-meta { font-size: .8rem; color: #6b7280; margin-top: .15rem; }
.candiv-sub { margin: 1rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.candiv-none { margin: 0; }
.candiv .btn { flex: 0 0 auto; }
.candiv-job:focus-visible, .candiv .btn:focus-visible { outline: 2px solid var(--cand-gold); outline-offset: 2px; }
@media (max-width: 520px) {
  /* The date and the details stay side by side; only the Join button drops below. */
  .candiv { flex-wrap: wrap; }
  .candiv-job { white-space: normal; }
  .candiv .btn { flex: 1 1 100%; text-align: center; }
}

/* ------------------------------------------------------------ the homepage */
.candwel { max-width: 920px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem) 0 1rem; }
.candwel-hero { padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 16px; background: var(--cand-navy); color: #fff; }
.candwel-kicker { margin: 0 0 .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cand-gold); }
.candwel .candwel-hero h1 { color: #fff; margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.35rem); line-height: 1.15; text-wrap: balance; max-width: 22ch; }
.candwel-lede { margin: .9rem 0 0; max-width: 58ch; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.86); }
.candwel-cta { margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.candwel-cta .btn-primary { background: var(--cand-gold); border-color: var(--cand-gold); color: var(--cand-navy); font-weight: 650; }
.candwel-cta .btn-primary:hover { filter: brightness(1.05); }
.candwel-cta .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.candwel-points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.candwel-points li { background: #fff; border: 1px solid var(--cand-line); border-radius: 12px; padding: 1rem 1.1rem; }
.candwel-points h2 { margin: 0 0 .35rem; font-size: 1rem; color: var(--cand-navy); }
.candwel-points p { margin: 0; font-size: .9rem; line-height: 1.5; color: #4b5563; }
.candwel-note { margin: 1.1rem 0 0; font-size: .85rem; color: #6b7280; max-width: 70ch; }


/* ---- Feedback on a recruiter (candidate/feedback) ---- */
.rfb{max-width:38rem;margin:1.5rem auto 3rem;padding:0 1rem}
.rfb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1.1rem}
.rfb-kicker{margin:0;font-size:.75rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rfb-h{margin:0;font-size:1.45rem;line-height:1.25;color:var(--ink);text-wrap:balance}
.rfb-p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.rfb-lock{background:var(--gold-wash);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:var(--radius-sm);padding:.75rem .9rem;color:var(--gold-ink);font-size:.88rem}
.rfb-err{background:var(--danger-wash);color:var(--danger);border-radius:var(--radius-sm);padding:.65rem .85rem;font-size:.9rem;font-weight:600}
.rfb-note{background:var(--info-wash);color:var(--info);border-radius:var(--radius-sm);padding:.6rem .85rem;font-size:.86rem}
.rfb-q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.rfb-q[hidden],[data-rfb-other][hidden]{display:none}
.rfb-q legend,.rfb-lbl{font-weight:650;font-size:.95rem;color:var(--ink);padding:0;margin-bottom:.45rem}
.rfb-hint{font-weight:400;font-size:.8rem;color:var(--muted);margin-left:.3rem}
.rfb-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem}
.rfb-stars input{position:absolute;opacity:0;pointer-events:none}
.rfb-stars label{font-size:2.4rem;line-height:1;color:var(--line);cursor:pointer;padding:0 .1rem;transition:color .12s ease,transform .14s var(--ease-out)}
.rfb-stars label:hover,.rfb-stars label:hover ~ label,.rfb-stars input:checked ~ label{color:var(--gold)}
.rfb-stars label:active{transform:scale(.92)}
.rfb-stars input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.rfb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rfb-scale{display:flex;justify-content:space-between;max-width:14rem;font-size:.75rem;color:var(--muted)}
.rfb-choice{display:flex;gap:.6rem;flex-wrap:wrap}
.rfb-choice label{display:flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.92rem}
.rfb-choice label:has(input:checked){border-color:var(--brand);background:var(--brand-wash);color:var(--brand-ink);font-weight:600}
.rfb-reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.45rem}
.rfb-reason{display:flex;align-items:flex-start;gap:.55rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;line-height:1.35}
.rfb-reason:has(input:checked){border-color:var(--danger);background:var(--danger-wash);color:var(--ink)}
.rfb-reason input{margin-top:.15rem}
.rfb-card input[type=text],.rfb-card textarea{font:inherit;width:100%;box-sizing:border-box;padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.rfb-btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.4rem;border-radius:999px;border:0;background:#253559;color:#fff;font:inherit;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .14s var(--ease-out),opacity .15s ease}
.rfb-btn:hover{opacity:.92}
.rfb-btn:active{transform:scale(.97)}
.rfb-submit{align-self:flex-start}
.rfb-done{align-items:flex-start}
.rfb-tick{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ok-wash);color:var(--ok);font-size:1.4rem;font-weight:700}
.rfb-next{display:flex;flex-direction:column;gap:.5rem;align-self:stretch}
@media (max-width:520px){.rfb-card{padding:1.2rem 1rem}.rfb-stars label{font-size:2.1rem}.rfb-submit{align-self:stretch}}
/* The app's input styling stretches every input; radios and checkboxes here keep their own size. */
.rfb-choice input,.rfb-reason input{width:auto;min-width:0;flex:none;margin:0;padding:0;height:auto;box-shadow:none;accent-color:var(--brand)}
.rfb-choice label{white-space:nowrap;justify-content:flex-start}
.rfb-reason{justify-content:flex-start;text-align:left;align-items:center}
.rfb-reason input{accent-color:var(--danger)}


/* ---- The feedback page's own Xcelo Group frame ---- */
.rfbbody{background:#eef2f9;min-height:100vh;display:flex;flex-direction:column}
.rfbbody main{flex:1}
.rfbtop{background:#253559;border-top:6px solid #f6b129}
.rfbtop-in{max-width:38rem;margin:0 auto;padding:1rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.rfbtop-brand{font-weight:700;letter-spacing:.22em;font-size:.86rem;color:#f6b129}
.rfbtop-week{background:#f6b129;color:#253559;font-weight:700;font-size:.78rem;padding:.3rem .75rem;border-radius:999px}
.rfbfoot{text-align:center;font-size:.8rem;color:#6b7590;padding:1.4rem 1rem 2rem}
.rfbfoot strong{color:#253559}
.rfbbody .rfb-card{border-top:4px solid #f6b129}
.rfbbody .rfb-btn{background:#f6b129;color:#253559;border-bottom:3px solid #d8931a}
.rfbbody .rfb-lock{background:#eef4ff;border-color:#c9d8f5;color:#1f3260}
/* The star radios are hidden; the app's input width must not make them push the page sideways on a phone. */
.rfb-stars{position:relative}
.rfb-stars input{width:1px;height:1px;min-width:0;left:0;top:0;margin:0;padding:0;border:0}