/* ==========================================================================
   User Guides — the index of modules, one module's page, and the sign-off quiz
   at the foot of it.

   The index is a card grid grouped the way the rail is grouped. A module page
   is the firm and EOS records' arrangement — a nav down the left, the page
   beside it — at the same measurements, with its own classes so a change to a
   record's tabs does not restyle a page about how to use them. The prose is
   set larger and on a narrower measure than the rest of the application,
   because these are pages somebody has to actually read (see legal.css, which
   makes the same call for the same reason).
   ========================================================================== */

/* --- Index header: title on the left, the reader's progress on the right --- */
.guides-header {
  align-items: flex-start;
}

.guides-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 260px;
}

.guides-progress__role {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.guides-progress__role-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

/* The same shape as the EOS goal bar: a track, a fill, and the number spelled
   out beside it so nobody has to estimate a length. */
.guides-progress__meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.guides-progress__track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--tint-navy-10);
  overflow: hidden;
}

.guides-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary-green);
  transition: width var(--transition-slow);
}

.guides-progress__value {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Index body: groups of cards --------------------------------------- */
.guides {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 1200px;
}

.guides__group-title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* --- One module's card ---------------------------------------------------- */
.guide-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
    transform var(--transition-fast);
}

.guide-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.guide-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* A signed-off module wears a green rule down its edge, the way a firm card
   wears its status. */
.guide-card--complete {
  box-shadow: inset 4px 0 0 var(--color-primary-green), var(--shadow-xs);
}

.guide-card--complete:hover {
  box-shadow: inset 4px 0 0 var(--color-primary-green), var(--shadow-md);
}

.guide-card__icon,
.guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
}

.guide-card__icon svg,
.guide__icon svg {
  width: 24px;
  height: 24px;
}

.guide-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

.guide-card__title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-large);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide-card__summary {
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  line-height: 1.5;
}

.guide-card__meta {
  margin-top: var(--space-1);
  color: var(--color-text-faint);
  font-size: var(--font-size-small);
}

.guide-card__status {
  flex-shrink: 0;
}

/* --- A module's page: nav down the left, the guide beside it -------------- */
.guide-show {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.guide-show__nav {
  position: sticky;
  top: 0;
  min-width: 0;
}

.guide-subnav {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.guide-subnav__heading {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-faint);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.guide-subnav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Fifteen modules is taller than a short window; the list scrolls itself so
     the way back out stays in view. */
  max-height: calc(100vh - var(--topbar-height) - var(--app-tabs-height) - 220px);
  overflow-y: auto;
}

.guide-subnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-subnav__link:hover {
  background: var(--tint-navy-04);
  color: var(--color-primary-dark);
}

.guide-subnav__link:hover .guide-subnav__icon {
  color: var(--color-primary-dark);
}

.guide-subnav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--tint-navy-06);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-subnav__icon svg {
  width: 16px;
  height: 16px;
}

/* Wraps rather than truncates, as the firm subnav's labels do: a module's
   title is the one thing the row has to say. */
.guide-subnav__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.guide-subnav__link--active {
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.guide-subnav__link--active .guide-subnav__icon {
  background: var(--color-primary-green);
  color: var(--color-white);
}

.guide-subnav__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--tint-green-28);
  color: var(--color-success-dark);
}

.guide-subnav__footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* --- The guide itself ----------------------------------------------------- */
.guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  max-width: 820px;
  padding-bottom: var(--space-8);
}

.guide__intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.guide__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.guide__eyebrow {
  margin: 0;
  color: var(--color-text-faint);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.guide__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-xxlarge);
  font-weight: 600;
  line-height: 1.2;
}

.guide__lede {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-large);
  line-height: 1.6;
}

.guide__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.guide__meta-complete {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success-dark);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide__meta-icon {
  color: var(--color-success-dark);
}

/* "In this guide": the section titles as jump links. */
.guide__contents {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.guide__contents-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.guide__contents-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  line-height: 1.7;
}

.guide__contents-link {
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
}

.guide__contents-link:hover {
  text-decoration: underline;
}

/* --- One section: numbered heading, then its steps ----------------------- */
.guide-section {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  /* Room under the pinned header when a contents link lands here. */
  scroll-margin-top: var(--space-4);
}

.guide-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.guide-section__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.guide-section__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  line-height: 1.3;
}

.guide-section__intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  line-height: 1.6;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* A callout sits in the step column, indented to the steps' text, so it reads
   as a remark on the step above it rather than a step of its own. */
.guide-steps__aside {
  padding-left: calc(28px + var(--space-4));
}

.guide-step__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  background: var(--tint-green-16);
  border: 1.5px solid var(--tint-green-28);
  color: var(--color-primary-dark);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.guide-step__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-large);
  font-weight: 600;
  line-height: 1.4;
}

/* The prose. Larger and looser than a table, because it is read rather than
   scanned. */
.guide-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guide-text__paragraph {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-medium);
  line-height: 1.7;
}

/* A label as it appears on screen — a button, a tab, a heading — set apart
   from the sentence around it so the reader knows what to look for. */
.guide-ui {
  display: inline;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--tint-navy-06);
  border: 1px solid var(--tint-navy-10);
  color: var(--color-primary-dark);
  font-family: var(--font-family-bold);
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
}

.guide-step__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.guide-step__where-icon {
  flex-shrink: 0;
  color: var(--color-primary-green);
}

.guide-step__where-label {
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide-step__where-crumb {
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.guide-step__where-separator {
  color: var(--color-text-faint);
}

/* --- Callouts -------------------------------------------------------------- */
.guide-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  background: var(--color-surface-sunken);
}

.guide-callout__icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-text-muted);
}

.guide-callout__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.guide-callout__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.guide-callout .guide-text__paragraph {
  font-size: var(--font-size-medium);
  line-height: 1.6;
}

.guide-callout--tip {
  border-left-color: var(--color-primary-green);
  background: var(--tint-green-10);
}

.guide-callout--tip .guide-callout__icon,
.guide-callout--tip .guide-callout__label {
  color: #1e8e63;
}

.guide-callout--note {
  border-left-color: #2980b9;
  background: rgba(52, 152, 219, 0.08);
}

.guide-callout--note .guide-callout__icon,
.guide-callout--note .guide-callout__label {
  color: #2980b9;
}

.guide-callout--warning {
  border-left-color: var(--color-warning);
  background: rgba(245, 158, 11, 0.09);
}

.guide-callout--warning .guide-callout__icon,
.guide-callout--warning .guide-callout__label {
  color: #b45309;
}

.guide-callout--role {
  border-left-color: var(--color-primary-dark);
  background: var(--tint-navy-04);
}

.guide-callout--role .guide-callout__icon,
.guide-callout--role .guide-callout__label {
  color: var(--color-primary-dark);
}

/* --- The sign-off quiz ----------------------------------------------------- */
.guide-quiz-frame {
  display: block;
}

.guide-quiz {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: var(--space-4);
}

.guide-quiz__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.guide-quiz__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary-green);
  color: var(--color-white);
}

.guide-quiz__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.guide-quiz__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-xlarge);
  font-weight: 600;
}

.guide-quiz__blurb {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  line-height: 1.6;
}

/* What came of the last attempt, or the standing sign-off. */
.guide-quiz__outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.guide-quiz__outcome-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.guide-quiz__outcome-title {
  margin: 0 0 2px;
  font-size: var(--font-size-large);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.guide-quiz__outcome-text {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.6;
}

.guide-quiz__outcome--pass {
  background: var(--tint-green-16);
  border-color: var(--tint-green-28);
  color: var(--color-success-dark);
}

.guide-quiz__outcome--pass .guide-quiz__outcome-text {
  color: var(--color-text);
}

.guide-quiz__outcome--fail {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #b45309;
}

.guide-quiz__outcome--fail .guide-quiz__outcome-text {
  color: var(--color-text);
}

.guide-quiz__questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-question {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.guide-question--wrong {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
}

.guide-question--right {
  border-color: var(--tint-green-28);
  background: var(--tint-green-10);
}

.guide-question__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.guide-question__prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
  font-weight: 600;
  line-height: 1.5;
}

.guide-question__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-small);
}

.guide-question__prompt-text {
  flex: 1 1 auto;
  min-width: 0;
}

.guide-question__verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.guide-question__verdict--wrong {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.guide-question__verdict--right {
  background: var(--tint-green-28);
  color: var(--color-success-dark);
}

.guide-question__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: calc(24px + var(--space-3));
}

/* An option is one big target: the radio is hidden and drawn again as a ring,
   so the whole row answers the click and the chosen one is plain to see. */
.guide-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-medium);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.guide-option:hover {
  border-color: var(--color-border-strong);
  background: var(--tint-navy-04);
}

.guide-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.guide-option__control {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.guide-option__input:checked + .guide-option__control {
  border-color: var(--color-primary-green);
  box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 10px var(--color-primary-green);
}

.guide-option:has(.guide-option__input:checked) {
  border-color: var(--color-primary-green);
  background: var(--tint-green-10);
}

.guide-option__input:focus-visible + .guide-option__control {
  box-shadow: var(--focus-ring);
}

.guide-option__text {
  min-width: 0;
}

.guide-question__explanation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  padding-left: calc(24px + var(--space-3));
  color: var(--color-text);
  font-size: var(--font-size-medium);
  line-height: 1.6;
}

.guide-question__explanation-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: #b45309;
}

.guide-quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.guide-quiz__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- Narrow screens -------------------------------------------------------- */
@media (max-width: 900px) {
  .guides-header {
    flex-direction: column;
    align-items: stretch;
  }

  .guides-progress {
    align-items: flex-start;
    min-width: 0;
  }

  .guide-show {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .guide-show__nav {
    position: static;
  }

  .guide-subnav__list {
    max-height: none;
  }

  .guide__intro {
    flex-direction: column;
  }

  .guide-steps__aside {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card,
  .guides-progress__fill {
    transition: none;
  }

  .guide-card:hover {
    transform: none;
  }
}