/* assessment.css — Level 2 Self-Assessment determination panel + workspace
 * (Phase 1, 2026-07-17). Companion to docs/js/assessment-panel.js.
 * Palette: coral = the "do/assess" zone (matches Implementation tab),
 * teal reserved for met/value states. */

/* ---- objective-page determination panel ---------------------------- */

.assessment-panel {
  border: 2px solid #D85A30;
  border-radius: 10px;
  background: var(--md-default-bg-color);
  padding: 0.9rem 1rem;
  margin: 0.8rem 0 1.1rem;
}

.assessment-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.assessment-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #993C1D;
  letter-spacing: 0.02em;
}

.assessment-panel-saved {
  font-size: 0.72rem;
  color: #0F6E56;
  font-weight: 600;
}

.assessment-panel-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.assessment-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.assessment-choice input { accent-color: #993C1D; margin: 0; }
.assessment-choice--met { color: #0F6E56; }
.assessment-choice--met:has(input:checked) { background: #E1F5EE; border-color: #008080; }
.assessment-choice--not_met { color: #993C1D; }
.assessment-choice--not_met:has(input:checked) { background: #FAECE7; border-color: #D85A30; }
.assessment-choice--not_applicable { color: #854F0B; }
.assessment-choice--not_applicable:has(input:checked) { background: #FBF3E4; border-color: #BA7517; }

.assessment-clear {
  border: none;
  background: none;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  text-decoration: underline;
  cursor: pointer;
}

.assessment-field { display: block; margin-bottom: 0.6rem; }
.assessment-field > span {
  display: block;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.25rem;
}
.assessment-field textarea {
  width: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.76rem;
  font-family: inherit;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  resize: vertical;
}

/* NA justification hidden until NOT APPLICABLE selected */
.assessment-naj { display: none; }
.assessment-naj.is-visible { display: block; }
.assessment-naj > span { color: #854F0B; font-weight: 600; }
.assessment-naj textarea { border-color: #BA7517; }

.assessment-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.assessment-save,
.assessment-start {
  background: #993C1D;
  color: #FAECE7;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.assessment-save:hover,
.assessment-start:hover { background: #712B13; }

.assessment-error { font-size: 0.72rem; color: #993C1D; font-weight: 600; }
.assessment-start-copy { font-size: 0.78rem; margin: 0 0 0.6rem; }

/* ---- workspace (dashboard/assessment/) ----------------------------- */

.assessment-ws { margin: 1rem 0 1.4rem; }

.assessment-ws-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.assessment-ws-stat { font-size: 0.84rem; }
.assessment-ws-pill {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.assessment-ws-pill--met { background: #E1F5EE; color: #0F6E56; }
.assessment-ws-pill--not_met { background: #FAECE7; color: #993C1D; }
.assessment-ws-pill--na { background: #FBF3E4; color: #854F0B; }

.assessment-ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}
.assessment-ws-family {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  text-decoration: none !important;
}
.assessment-ws-family:hover { border-color: #D85A30; }
.assessment-ws-family-code {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--md-default-fg-color);
}
.assessment-ws-family-counts { display: flex; gap: 0.3rem; }
.assessment-ws-family-counts em,
.assessment-ws-hint em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.assessment-ws-family-counts em.m,  .assessment-ws-hint em.m  { background: #E1F5EE; color: #0F6E56; }
.assessment-ws-family-counts em.nm, .assessment-ws-hint em.nm { background: #FAECE7; color: #993C1D; }
.assessment-ws-family-counts em.ip, .assessment-ws-hint em.ip { background: #FBF3E4; color: #854F0B; }
.assessment-ws-family-counts em.ns, .assessment-ws-hint em.ns { background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); }

.assessment-ws-hint {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.7rem;
}

/* ---- dashboard per-product tile gating ------------------------------ */

.cw-zone--locked .cw-steps {
  opacity: 0.45;
  filter: grayscale(0.8);
  pointer-events: none;
  user-select: none;
}
.cw-zone--locked .cw-note { display: none; }

.cw-zone-upsell {
  display: block;
  border: 1px dashed #BA7517;
  background: #FBF3E4;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin: 0 0 0.8rem;
  text-decoration: none !important;
}
.cw-zone-upsell strong {
  display: block;
  font-size: 0.78rem;
  color: #854F0B;
}
.cw-zone-upsell span {
  display: block;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin: 0.15rem 0 0.25rem;
}
.cw-zone-upsell em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: #993C1D;
}
.cw-zone-upsell:hover { border-style: solid; }