/* Vala AI-Readiness Ruler — worker-served.
   Palette: Valkyree brand guidelines (p.14). Type: Lora / Montserrat (p.16-17).
   Ported from lwc/aiReadinessRuler/aiReadinessRuler.css. */

:root {
  /* Brand guidelines palette */
  --vk-slate:      #2C2C3E;  /* Midnight Slate */
  --vk-black:      #000000;  /* Jet Black */
  --vk-cloud:      #EEEFF0;  /* Soft Cloud */
  --vk-mint:       #A1D3C0;  /* Mint Mist */
  --vk-blue:       #8FBBE5;  /* Skywash Blue */
  --vk-lilac:      #BF99C7;  /* Lilac Haze */
  --vk-peach:      #F5BFB6;  /* Peach Tint */

  /* Semantic roles. Pastels are backgrounds only — per the guidelines,
     any tint used as a background requires dark text. */
  --vala-ink:      var(--vk-slate);
  --vala-muted:    #6E6E7A;
  --vala-divider:  var(--vk-cloud);
  --vala-accent:   var(--vk-slate);
  --vala-good-bg:  var(--vk-mint);
  --vala-bad-bg:   var(--vk-peach);
  --vala-good-fg:  #1F4A3C;
  --vala-bad-fg:   #7A3A30;
  --vala-na-bg:    var(--vk-cloud);
  --vala-na-fg:    var(--vala-muted);

  /* Aurora Fade, left (legacy) to right (ready) */
  --vala-track-a:  var(--vk-cloud);
  --vala-track-b:  var(--vk-blue);
  --vala-track-c:  var(--vk-lilac);
  --vala-track-d:  var(--vk-mint);
}

.ruler {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 1.25rem;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: var(--vala-ink);
}

/* Header */
.ruler__title {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--vala-ink);
  line-height: 1.1;
}
.ruler__eyebrow { margin: .35rem 0 0; font-size: .9rem; color: var(--vala-muted); }

/* Track */
.track { position: relative; height: 108px; margin: 4.25rem 0 .5rem; }
.track__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg,
    var(--vala-track-a)  0%,
    var(--vala-track-b) 36%,
    var(--vala-track-c) 70%,
    var(--vala-track-d) 100%);
}

/* Stops */
.stop { position: absolute; top: -4px; transform: translateX(-50%); text-align: center; width: 150px; }
.stop__tick  { display: block; width: 2px; height: 30px; margin: 0 auto; background: var(--vala-ink); }
.stop__label { display: block; margin-top: .4rem; font-size: .95rem; font-weight: 700; color: var(--vala-ink); }
.stop__sub   { display: block; font-size: .7rem; color: var(--vala-muted); }

/* Marker */
.marker {
  position: absolute; top: -46px; transform: translateX(-50%); z-index: 2;
  transition: left 600ms cubic-bezier(.22,1,.36,1);
}
.marker__badge {
  background: var(--vala-accent); color: #fff;
  font-size: .8rem; font-weight: 700;
  padding: .35rem .85rem; border-radius: 8px; white-space: nowrap;
}
.marker__pointer {
  width: 0; height: 0; margin: 0 auto;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 16px solid var(--vala-accent);
}
.marker__dot {
  width: 22px; height: 22px; margin: 1px auto 0;
  background: #fff; border: 4px solid var(--vala-accent); border-radius: 50%;
}
/* Provisional state — TDL-044 stage one / TDL-052 partial inputs */
.marker--provisional .marker__dot { border-style: dashed; }
.marker--provisional .marker__badge::after { content: ' \00b7 provisional'; font-weight: 400; opacity: .85; }

/* One-liner */
.summary { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
.rule { border: none; border-top: 1px solid var(--vala-divider); margin: 1.1rem 0; }

/* Scoring dimensions */
.dimensions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 0 auto 1.25rem;
  max-width: 100%;
  padding: 0 2rem;
}

.dimension {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .75rem 0;
  font-size: .9rem;
  text-align: center;
}

.dimension__name {
  font-weight: 700;
  color: var(--vala-ink);
  min-height: 2.6em;
  display: flex;
  align-items: center;
}

.dimension__badge {
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.dimension__badge--green {
  background: var(--vala-good-bg);
  color: var(--vala-good-fg);
}

.dimension__badge--yellow {
  background: #FFD54F;
  color: #7A3A30;
}

.dimension__badge--red {
  background: var(--vala-bad-bg);
  color: var(--vala-bad-fg);
}

@media (max-width: 720px) {
  .dimensions { grid-template-columns: repeat(2, 1fr); padding: 0 1rem; }
  .dimension__name { min-height: 0; }
}
/* Why panel */
.why__title {
  margin: 0 0 .75rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1rem; font-weight: 700; color: var(--vala-ink);
}
.why__strap {
  margin: -.4rem 0 .9rem;
  font-size: .72rem; font-style: italic; color: var(--vala-muted);
  line-height: 1.6;
}
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.why__head { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.why__head--good { color: var(--vala-good-fg); }
.why__head--bad  { color: var(--vala-bad-fg); }
.why__head--na   { color: var(--vala-na-fg); }

.signals { list-style: none; margin: 0; padding: 0; }
.signal {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: .55rem; font-size: .85rem; line-height: 1.35;
}
.signal--empty { color: var(--vala-muted); font-style: italic; }
.signal__badge {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.signal__badge--good { background: var(--vala-good-bg); color: var(--vala-good-fg); }
.signal__badge--bad  { background: var(--vala-bad-bg);  color: var(--vala-bad-fg); }
.signal__badge--na   { background: var(--vala-na-bg);   color: var(--vala-na-fg); }

/* Not-assessed block — TDL-052: rich on top, honest underneath */
.notassessed { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--vala-divider); }
.notassessed__title { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; color: var(--vala-na-fg); }

/* CTA */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2rem; }

.cta__btn {
  display: inline-block; 
  background: linear-gradient(90deg,
    #EEEFF0  0%,
    #8FBBE5 36%,
    #BF99C7 70%,
    #A1D3C0 100%);
  color: #2C2C3E;
  text-decoration: none; 
  font-size: 1.1rem; 
  font-weight: 700;
  padding: 1.1rem 2.5rem; 
  border-radius: 999px; 
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: opacity 150ms ease, transform 150ms ease;
}

.cta__btn:hover { 
  opacity: 0.9;
}

.cta__btn:active { 
  transform: translateY(1px); 
}

.cta__strapline { 
  margin: 0; 
  font-size: .9rem; 
  color: var(--vala-muted); 
  line-height: 1.4;
  max-width: 400px;
}

.foot { margin: .9rem 0 0; font-size: .72rem; font-style: italic; color: var(--vala-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .ruler { padding: 1rem; }
  .ruler__title { font-size: 1.4rem; }
  .why { grid-template-columns: 1fr; gap: 1rem; }
  .stop { width: 84px; }
  .stop__label { font-size: .8rem; }
  .track { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .marker { transition: none; } }

/* TDL-058 — deep-scan note and caveats */
.deep { margin: .75rem 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--vk-lilac);
  background: var(--vk-cloud); border-radius: 6px; font-size: .95rem; }
.deep__note { margin: 0 0 .5rem; font-weight: 600; }
.deep__title { margin: .25rem 0; font-weight: 600; }
.deep__caveats { margin: 0; padding-left: 1.1rem; }
.deep__caveats li { margin: .25rem 0; }

/* Dimensions are filled from the deep scan; hidden until then. */
.dimensions[hidden] { display: none; }
.dimensions__pending { color: var(--vala-muted); font-style: italic; margin: .5rem 0 1rem; }
.dimension__badge--red { background: var(--vala-bad-bg); color: var(--vala-bad-fg); }
.dimension__badge--na  { background: var(--vala-na-bg);  color: var(--vala-na-fg); }

.scan-status { margin: .5rem 0 1rem; padding: .6rem .9rem; background: var(--vk-cloud);
  border-left: 3px solid var(--vk-blue); border-radius: 6px; font-size: .95rem; }