/*
 * Versioned design-token fork (Slice 0 authorized deliverable).
 * Placeholder values only — the real slate-teal/ochre parent-site tokens
 * (PRD H24) must be forked from the actual academic-site theme by the owner
 * or a design reviewer; Claude has not inspected AcademicWebsite-v1.1.zip in
 * this session and does not invent exact hex values here.
 *
 * token-version: 0.1.0-placeholder
 */
:root {
  --she-color-primary: #26454a;      /* placeholder slate-teal direction */
  --she-color-accent: #b8792f;       /* placeholder warm-ochre direction */
  /* Mobile/accessibility pass (product-realization phase, 2026-09-12):
     --she-color-accent measures ~3.61:1 against --she-color-bg — clears
     the 3:1 non-text threshold (its only prior uses were borders/pill
     backgrounds) but fails WCAG 2.2 AA 1.4.3 (4.5:1) for normal-size
     text. It had crept into two text-color rules below. This darker
     variant (~7.0:1, computed the same way) is for text only; the
     lighter --she-color-accent above is unchanged for borders/pills. */
  --she-color-accent-text: #7a5020;
  --she-color-bg: #ffffff;
  --she-color-text: #1a1a1a;
  --she-focus-ring: 3px solid #0a58ff;

  --she-font-system: system-ui, -apple-system, "Segoe UI", "Noto Nastaliq Urdu", sans-serif;
  --she-measure: 66ch;
}

/* Logical properties throughout — required for whole-journey RTL (PRD §38.2),
   not just text alignment. */
body {
  margin: 0;
  font-family: var(--she-font-system);
  background: var(--she-color-bg);
  color: var(--she-color-text);
  padding-inline: 1.5rem;
  padding-block: 2rem;
}

.foundation-status {
  max-inline-size: var(--she-measure);
  margin-inline: auto;
}

a:focus-visible, button:focus-visible {
  outline: var(--she-focus-ring);
  outline-offset: 2px;
}

.language-switch {
  display: flex;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

/* Reduced motion respected platform-wide (PRD §40.1) — no animation is
   defined here to override in the first place. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------
   Slice 1 additions below. Logical properties only, same rule as above —
   RtlLayoutTest::test_design_tokens_css_uses_logical_properties_not_physical_left_right()
   fails the build on any physical left/right creeping back in.
   -------------------------------------------------------------------- */

/* Accessibility foundation (S1-08): skip link, visible only on focus. */
.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: 1rem;
  background: var(--she-color-bg);
  color: var(--she-color-text);
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: inset-block-start 0.15s ease-in-out;
}
.skip-link:focus {
  inset-block-start: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid #e0e0e0;
  margin-block-end: 1.5rem;
  max-inline-size: var(--she-measure);
  margin-inline: auto;
}

.primary-nav, .header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Mobile pass (product-realization phase, 2026-09-12): at phone width the
   full nav (7 links) plus header-controls (language switch, neutral
   toggle, account/login, rapid exit) previously relied on flex-wrap alone,
   which works (nothing overflows — this codebase has no fixed-width
   elements to force horizontal scroll) but `justify-content: space-between`
   left an odd gap in a half-full wrapped row, and 1rem row-to-row gap read
   as cramped once each link also gained the touch-target padding above.
   Untested in a real browser (see this session's standing sandbox
   limitation) — reasoned from the CSS box model and WCAG 2.2 2.5.8, not
   visually confirmed. */
@media (max-width: 480px) {
  body {
    padding-inline: 1rem;
  }
  .site-header {
    justify-content: flex-start;
    row-gap: 0.75rem;
  }
}

/* Touch-target sizing (mobile/accessibility pass, 2026-09-12; WCAG 2.2 AA
   2.5.8, 24x24 CSS px minimum): these were plain inline text with no
   padding — fine with a mouse, too small and too close together to tap
   reliably. Padding + the existing flex gap on .primary-nav/.header-controls
   together give each link its own comfortable hit area without changing
   the visual density much on a wide screen. */
.primary-nav a, .header-controls a, .header-controls .logout-button {
  display: inline-block;
  padding-inline: 0.3rem;
  padding-block: 0.4rem;
}
.primary-nav a {
  color: inherit;
  text-decoration: none;
}
.primary-nav a:hover, .primary-nav a:focus-visible {
  text-decoration: underline;
}

/* Low-bandwidth / performance foundation (S1-09): no web fonts, no
   background images, no icon fonts — system fonts and text-only controls
   throughout this file, so the CSS+shell payload stays small on a slow
   connection. */

.rapid-exit, .rapid-exit-inline {
  background: #b3261e;
  color: #ffffff;
  padding-inline: 0.75rem;
  padding-block: 0.4rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
}

.neutral-toggle {
  color: inherit;
  text-decoration: underline;
}

/* Neutral mode (S1-10): presentation swap only, applied via a body class —
   deliberately subtle (no red/alert styling that would itself be
   conspicuous on a shared device). */
body.neutral-mode {
  --she-color-primary: #4a4a4a;
  --she-color-accent: #4a4a4a;
}

/* Baseline layout (product-build phase, 2026-09-12): every other
   top-level page section in this file (.explore, .personal-map,
   .skills-lab, .governance-console, .error-page...) gets a
   max-inline-size + basic vertical rhythm; the Safety Centre's two
   views (arguably the most important pages in the product) had neither
   — a genuine gap, not a deliberate choice, since nothing here touches
   the actual urgency-differentiation design (.safety-choice-urgent's
   subtle border/weight treatment, deliberately the only per-urgency
   styling that exists, is left exactly as it was). */
.safety-centre, .safety-result {
  max-inline-size: var(--she-measure);
}
.safety-centre p, .safety-result p {
  margin-block-end: 1rem;
}
.rapid-exit-inline {
  margin-block-start: 1rem;
  display: inline-block;
}

.safety-choices fieldset {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-inline-size: 40ch;
}

.safety-choice {
  text-align: start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--she-color-primary);
  background: var(--she-color-bg);
  color: var(--she-color-text);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}
.safety-choice:hover, .safety-choice:focus-visible {
  background: var(--she-color-primary);
  color: #ffffff;
}
.safety-choice-urgent {
  border-color: #b3261e;
  font-weight: 600;
}

.safety-no-live-contacts-note {
  font-size: 0.9rem;
  color: #4a4a4a;
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 1rem;
}
.primary-action, .secondary-action {
  padding-inline: 1rem;
  padding-block: 0.6rem;
  border-radius: 4px;
  text-decoration: none;
}
.primary-action {
  background: var(--she-color-primary);
  color: #ffffff;
}
.secondary-action {
  border: 1px solid var(--she-color-primary);
  color: var(--she-color-text);
}

.site-footer {
  max-inline-size: var(--she-measure);
  margin-inline: auto;
  margin-block-start: 2rem;
  font-size: 0.85rem;
  color: #4a4a4a;
}

/* --------------------------------------------------------------------
   S2-01 additions (account system, authorized 2026-09-11). Logical
   properties only, same rule as every section above. No new font, no
   icon, no image — same low-bandwidth discipline (S1-09).
   -------------------------------------------------------------------- */

/* .primary-action already exists above for <a>; extended here so the same
   class looks consistent applied to a real <button> (register/login
   submit), resetting the browser's default button chrome rather than
   layering on top of it. */
button.primary-action {
  border: none;
  font: inherit;
  cursor: pointer;
}

/* Same reset for .secondary-action applied to a real <button> — used by
   the Skills Lab Transfer/Adapt "prefer not to answer" skip action
   (owner's SHE Skills & Release Critical Audit, 2026-09-12): it must
   read as an equally legitimate choice, never a lesser or disabled-looking
   one, so it gets the same button reset as primary-action, just the
   existing outline (not filled) treatment already defined above. */
button.secondary-action {
  border: 1px solid var(--she-color-primary);
  font: inherit;
  cursor: pointer;
  background: none;
}

.auth-form {
  max-inline-size: 40ch;
}

.auth-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-field label {
  font-weight: 600;
}
.form-field .field-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #4a4a4a;
}
.form-field input, .form-field select, .form-field textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--she-color-primary);
  border-radius: 4px;
  background: var(--she-color-bg);
  color: var(--she-color-text);
}
.form-field textarea {
  resize: vertical;
}

/* Adult-only boundary correction (2026-09-12): a checkbox attestation
   reads badly under the label-above-input layout `.form-field` assumes
   for text inputs (bold label floating above an empty line, checkbox and
   its sentence not visually joined). This variant keeps `.form-field`'s
   spacing but lays the checkbox and its own label text out inline,
   matching how every other checkbox in this project's forms should look
   if one is added later. */
.form-field-checkbox label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  /* Touch-target sizing (product-build phase, 2026-09-12): without this
     the row's height was just the taller of the 1.1rem checkbox or the
     text line-height (~19px) — under the WCAG 2.2 2.5.8 minimum on the
     registration attestation, the only checkbox using this class. */
  padding-block: 0.3rem;
}
.form-field-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  padding: 0;
  border-radius: 3px;
}

.form-errors {
  border-inline-start: 3px solid #b3261e;
  padding-inline-start: 0.75rem;
  color: #b3261e;
}
.form-errors ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.auth-switch, .auth-note {
  font-size: 0.9rem;
  color: #4a4a4a;
}

/* Header account controls (S2-01): sit inline with the other
   header-controls entries (language switch, neutral-mode toggle, rapid
   exit) — no distinct visual weight that would draw more attention to
   "logged in" state than the neutral-mode toggle already governs. */
.logout-form {
  display: inline;
}
.logout-button, .login-link {
  font: inherit;
  color: inherit;
  text-decoration: underline;
}
.logout-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.auth-greeting {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------
   S2-02 additions (Personal Psychological Map, authorized 2026-09-11).
   Deliberately calm/neutral, not clinical — no red/alert color anywhere
   in this section except the same delete-warning tone already used above
   for form-errors, reused rather than inventing a new one.
   -------------------------------------------------------------------- */

.personal-map {
  max-inline-size: 60ch;
}

.consent-gate {
  border: 1px solid var(--she-color-primary);
  border-radius: 6px;
  padding: 1.25rem;
  margin-block-start: 1rem;
}
.consent-points {
  padding-inline-start: 1.25rem;
}
.consent-points li {
  margin-block-end: 0.4rem;
}

.new-entry-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.5rem;
  max-inline-size: 50ch;
}

.personal-map-entries {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.personal-map-entry {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1rem;
}
.entry-tag {
  display: inline-block;
  font-weight: 600;
  background: var(--she-color-bg);
  border: 1px solid var(--she-color-accent);
  border-radius: 999px;
  padding-inline: 0.6rem;
  padding-block: 0.15rem;
  font-size: 0.85rem;
  margin-block-end: 0.5rem;
}
.entry-body {
  white-space: pre-wrap;
  margin-block: 0.5rem;
}
.entry-date {
  font-size: 0.8rem;
  color: #4a4a4a;
}
.delete-entry-form {
  margin-block-start: 0.5rem;
}
/* Touch-target sizing (product-build phase, 2026-09-12): zero padding on
   a per-entry action button left a tap area of just the text's own line
   height (~16px), under the WCAG 2.2 2.5.8 minimum, right next to the
   entry's other content in a repeating list — the same issue already
   fixed on nav links and Transfer/Adapt options, found here on
   inspection of the Personal Map. inline-block + padding-block widens
   the row without adding a visible box (background/border stay none). */
.delete-entry-button {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: none;
  color: #b3261e;
  text-decoration: underline;
  cursor: pointer;
  padding-block: 0.35rem;
  padding-inline: 0;
}

.delete-all-details {
  margin-block-start: 2rem;
  border-block-start: 1px solid #e0e0e0;
  padding-block-start: 1rem;
}
.delete-all-details summary {
  cursor: pointer;
  color: #b3261e;
  padding-block: 0.35rem;
}
.delete-all-button {
  font: inherit;
  background: #b3261e;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Account page (2026-09-12, V1 coherence trace). Reuses the same
   .delete-all-details/.delete-all-button styling PersonalMap's deletion
   action already established above, rather than introducing a second
   destructive-action visual style.
   -------------------------------------------------------------------- */

.account-page {
  max-inline-size: 60ch;
}
.account-details dt {
  font-weight: 600;
  margin-block-start: 0.75rem;
}
.account-details dd {
  margin-inline-start: 0;
}
.account-enables-points {
  padding-inline-start: 1.25rem;
}

/* --------------------------------------------------------------------
   S2-03 additions (Skills Lab, Learn stage, authorized 2026-09-11).
   -------------------------------------------------------------------- */

.skills-lab {
  max-inline-size: var(--she-measure);
}

.skills-lab-empty {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
  color: #4a4a4a;
}

/* Orientation (2026-09-11): the PRD §15.1 skill-family taxonomy. */
.skills-lab-orientation {
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid #e0e0e0;
}
.skills-lab-families {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-block-start: 0.75rem;
}
.skills-lab-family {
  border-inline-start: 3px solid var(--she-color-primary);
  padding-inline-start: 0.6rem;
}
.skills-lab-family strong {
  display: block;
}
.skills-lab-family span {
  font-size: 0.85rem;
  color: #4a4a4a;
}
.skills-lab-orientation-note {
  font-size: 0.85rem;
  font-style: italic;
  color: #4a4a4a;
  margin-block-start: 0.75rem;
}

/* Core journey additions (owner authorization, 2026-09-11): a skill is
   now a grouped sequence of stages (App\Domain\SkillsLab\SkillModule::STAGES),
   replacing the earlier flat single-stage module list. */
.skills-lab-journeys {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.skill-journey {
  border: 1px solid var(--she-color-primary);
  border-radius: 6px;
  padding-inline: 1rem;
  padding-block: 0.75rem;
}
.skill-journey-stages {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}
.skill-journey-stage a {
  display: inline-block;
  padding-inline: 0.6rem;
  padding-block: 0.3rem;
  border: 1px solid var(--she-color-primary);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
}
.skill-journey-stage.is-completed a {
  background: var(--she-color-primary);
  color: #ffffff;
}

.skill-journey-nav ol {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: 1rem;
}
.skill-journey-nav a {
  display: inline-block;
  padding-inline: 0.5rem;
  padding-block: 0.25rem;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
}
.skill-journey-nav li.is-current a {
  border: 1px solid var(--she-color-primary);
  font-weight: 600;
}
.skill-journey-nav li.is-completed a {
  color: var(--she-color-accent-text);
}

.skill-stage-report-form fieldset {
  border: none;
  padding-inline-start: 0;
  margin-inline-start: 0;
  margin-block-end: 1rem;
}
.skill-stage-report-form legend {
  font-weight: 600;
  margin-block-end: 0.4rem;
  padding-inline: 0;
}
/* Touch-target sizing for the actual Transfer/Adapt fixed-choice options
   (product-build phase, 2026-09-12) — same WCAG 2.2 2.5.8 issue already
   fixed for header/nav links, found here on inspection: each option was
   bare text at line-height only (~19px), under the 24px minimum, with
   just a thin margin separating adjacent radio options. The full label
   row was already the click target (not just the tiny native circle),
   this just gives that row enough height and separation to hit reliably
   on a touch screen. */
.skill-stage-report-form label {
  display: block;
  padding-block: 0.3rem;
  margin-block-end: 0.15rem;
}
.skill-stage-report-reassurance {
  font-size: 0.85rem;
  color: #4a4a4a;
  margin-block: 0.3rem 0.6rem;
}

.skill-reflect-personal-map {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
  margin-block-start: 1rem;
}
.skill-reflect-personal-map-note {
  display: block;
  font-size: 0.8rem;
  color: #4a4a4a;
}

.skill-maintenance-history {
  list-style: none;
  padding-inline-start: 0;
  font-size: 0.9rem;
}
.skill-maintenance-history li {
  padding-block: 0.3rem;
  border-block-end: 1px solid #e0e0e0;
}

.skills-lab-guest-note {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
  color: #4a4a4a;
}

.skill-module-completed {
  font-size: 0.85rem;
  color: var(--she-color-accent-text);
  font-weight: 600;
}

.skill-module-content {
  white-space: pre-wrap;
  margin-block: 1.5rem;
  max-inline-size: var(--she-measure);
}

/* --------------------------------------------------------------------
   S2-04 additions (Governance/Admin Console, authorized 2026-09-11).
   Staff-facing, not part of the public psychological-agency experience —
   still the same low-bandwidth/logical-property/no-tracking discipline.
   -------------------------------------------------------------------- */

.governance-console {
  max-inline-size: 80ch;
}

.governance-engineering-test-notice {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
  color: #4a4a4a;
  font-size: 0.9rem;
}

.governance-claims-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: 1rem;
}
.governance-claims-table th, .governance-claims-table td {
  text-align: start;
  padding: 0.5rem;
  border-block-end: 1px solid #e0e0e0;
  vertical-align: top;
}

.governance-transition-form {
  display: inline;
}
.governance-transition-button {
  font: inherit;
  font-size: 0.85rem;
  background: var(--she-color-bg);
  border: 1px solid var(--she-color-primary);
  border-radius: 4px;
  padding-inline: 0.5rem;
  padding-block: 0.2rem;
  cursor: pointer;
  margin-inline-end: 0.35rem;
  margin-block-end: 0.35rem;
}
.governance-transition-button:hover, .governance-transition-button:focus-visible {
  background: var(--she-color-primary);
  color: #ffffff;
}

.governance-no-transitions {
  font-size: 0.85rem;
  color: #4a4a4a;
}

/* Service-directory verification, S2-04 second increment (2026-09-11).
   Reuses .governance-claims-table for the record list itself (generic
   table styling, not claim-specific) — additions below are the
   per-record action forms only. */
.governance-record-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.governance-record-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.governance-record-action-form input[type="date"],
.governance-record-action-form input[type="text"] {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  padding-inline: 0.4rem;
  padding-block: 0.2rem;
}
.governance-record-status {
  font-size: 0.85rem;
  font-weight: 600;
}
.governance-record-status[data-status="revoked"] {
  color: #8a1f1f;
}
.governance-record-status[data-status="verified_current"] {
  color: #1f6d3d;
}

/* -------------------------------------------------------------------
   Skill content template — PRD §15.2 authoring template (2026-09-11).
   Staff-only, same governance-console styling family as above.
   -------------------------------------------------------------------- */

.governance-skill-content-spec-notice {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
  color: #4a4a4a;
}
.governance-skill-content-spec-field {
  margin-block-end: 0.9rem;
}
.governance-skill-content-spec-field label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.3rem;
}
.governance-skill-content-spec-field textarea {
  inline-size: 100%;
  max-inline-size: 60ch;
}
.governance-skill-content-spec-link {
  margin-block-start: 0.4rem;
}

/* -------------------------------------------------------------------
   Error pages (2026-09-11, Safety integration) — see
   resources/views/errors/*.blade.php.
   -------------------------------------------------------------------- */

.error-page {
  max-inline-size: var(--she-measure);
}
.error-page h1 {
  margin-block-end: 0.5rem;
}

/* -------------------------------------------------------------------
   Explore — anonymous public governed-content layer (owner
   authorization, 2026-09-11). Public-facing, so this reuses the same
   low-bandwidth/logical-property/no-tracking discipline as the rest of
   this file, not the staff-only governance-console styling above.
   -------------------------------------------------------------------- */

.explore {
  max-inline-size: 70ch;
}

.explore-safety-link {
  margin-block-start: 0.5rem;
}

.explore-empty-state,
.explore-select-prompt {
  color: #4a4a4a;
  font-style: italic;
}

.explore-groups ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1rem;
}
.explore-groups a {
  display: inline-block;
  padding-inline: 0.6rem;
  padding-block: 0.3rem;
  border: 1px solid var(--she-color-primary);
  border-radius: 999px;
  text-decoration: none;
}
.explore-groups a[aria-current="page"] {
  background: var(--she-color-primary);
  color: #ffffff;
}

.explore-claims-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 1rem;
}
.explore-claims-list li {
  padding-block: 0.6rem;
  border-block-end: 1px solid #e0e0e0;
}
.explore-evidence-status {
  font-size: 0.8rem;
  color: #4a4a4a;
  margin-inline-start: 0.5rem;
}

.explore-claim-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #4a4a4a;
}

.explore-approved-wording {
  margin-block: 1.25rem;
  line-height: 1.6;
  white-space: pre-line;
}

.explore-limitations,
.explore-prohibited-overstatements {
  font-size: 0.9rem;
  border-inline-start: 3px solid #c7c7c7;
  padding-inline-start: 0.75rem;
  margin-block-end: 0.75rem;
}

.explore-related-skill {
  border-inline-start: 3px solid var(--she-color-accent);
  padding-inline-start: 0.75rem;
}
.explore-related-skill-note {
  font-size: 0.8rem;
  color: #4a4a4a;
  margin-inline-start: 0.35rem;
}