/* Scoped source styles from the supplied Compass assessment. */
.compass-tool {
    /* Section 06 · the dial, not a palette */
    --ivory:     #F7F4EF;
    --graphite:  #333136;
    --plum:      #4C2A73;
    --aubergine: #32154D;
    --gold:      #B7923A;
    --stone:     #D8D2C9;
    --mist:      #ECE8E2;
    --lavender:  #C9BFE6;

    --ink-soft:  #6B666E;

    --display: "Cormorant Garamond", Garamond, Georgia, serif;
    --op: "Jost", "Helvetica Neue", Arial, sans-serif;

    /* Section 09 · 8 / 24 / 40 / 120 */
    --u: 8px;
    --component: 24px;
    --gutter: 40px;
    --section: 120px;

    --settle: 2200ms cubic-bezier(0.16, 0.84, 0.28, 1);
  }

  .compass-tool, .compass-tool * { box-sizing: border-box; }

  .compass-tool {
    margin: 0;
    background: var(--ivory);
    color: var(--graphite);
    font-family: var(--op);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  .compass-tool.sheet {
    max-width: 640px;          /* Section 09 · reading surfaces on screen */
    margin: 0 auto;
    padding-inline: var(--component);
    padding-block: var(--component) 72px;
  }

  /* ---------- the four fragments ---------- */

  .compass-tool .north {                      /* gold north marker · top right, always */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 12px;
  }

  .compass-tool .north i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
  .compass-tool .north u { width: 14px; height: 1px; background: var(--gold); text-decoration: none; }

  .compass-tool .rule { height: 1px; background: var(--stone); border: 0; margin: 0; }
  .compass-tool .rule.gold { background: var(--gold); }

  /* ---------- masthead ---------- */

  .compass-tool .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--component);
    padding-block: var(--u) var(--component);
  }

  .compass-tool .label {
    font-family: var(--op);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
  }

  .compass-tool .label.plum { color: var(--plum); }

  .compass-tool .lang { display: flex; align-items: center; gap: 4px; }

  .compass-tool .lang button {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--op);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
    padding: 5px 10px;
    cursor: pointer;
    transition: color 400ms ease, background 400ms ease;
  }

  .compass-tool .lang button[aria-pressed="true"] { background: var(--aubergine); color: var(--ivory); }
  .compass-tool .lang button:hover:not([aria-pressed="true"]) { color: var(--plum); }
  .compass-tool .lang span { color: var(--stone); font-size: 10px; }

  /* ---------- type ---------- */

  .compass-tool h1, .compass-tool h2 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.04;
    text-wrap: balance;
    margin: 0;
    color: var(--graphite);
  }

  .compass-tool .lead {
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--graphite);
    margin: var(--component) 0 0;
  }

  .compass-tool p { margin: 0; }

  /* ---------- intro ---------- */

  .compass-tool .intro { padding-top: 64px; }

  .compass-tool .intro h1 { font-size: clamp(3rem, 11vw, 4.6rem); }
  .compass-tool .intro h1 sup {
    font-family: var(--op);
    font-size: 0.16em;
    font-weight: 300;
    letter-spacing: 0.06em;
    vertical-align: super;
    color: var(--ink-soft);
  }

  .compass-tool .intro .underline { width: 72px; height: 1px; background: var(--gold); margin-top: var(--component); }

  .compass-tool .directions {
    margin-top: var(--gutter);
    border-top: 1px solid var(--stone);
  }

  .compass-tool .directions div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--component);
    padding-block: 14px;
    border-bottom: 1px solid var(--stone);
  }

  .compass-tool .directions b {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--plum);
    letter-spacing: -0.01em;
  }

  .compass-tool .directions em {
    font-style: normal;
    font-family: var(--op);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .compass-tool .meta {
    margin-top: var(--gutter);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ---------- controls ---------- */

  .compass-tool .act {
    appearance: none;
    display: inline-block;
    font-family: var(--op);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    border-radius: 12px;            /* the only curve in the system */
    padding: 16px 30px;
    cursor: pointer;
    transition: background 400ms ease, color 400ms ease, border-color 400ms ease;
  }

  .compass-tool .act.primary { background: var(--aubergine); border: 1px solid var(--aubergine); color: var(--ivory); }
  .compass-tool .act.primary:hover:not(:disabled) { background: var(--plum); border-color: var(--plum); }
  .compass-tool .act.primary:disabled { background: var(--stone); border-color: var(--stone); color: #8C8880; cursor: default; }

  .compass-tool .quiet {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--op);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 1px solid var(--stone);
    padding-bottom: 3px;
    transition: color 400ms ease, border-color 400ms ease;
  }

  .compass-tool .quiet:hover:not(:disabled) { color: var(--plum); border-color: var(--plum); }
  .compass-tool .quiet:disabled { opacity: 0.35; cursor: default; }

  .compass-tool .act:focus-visible, .compass-tool .quiet:focus-visible, .compass-tool .lang button:focus-visible, .compass-tool .scale button:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: 3px;
  }

  .compass-tool .intro .act.primary { margin-top: var(--gutter); }

  /* ---------- statement ---------- */

  .compass-tool .quiz { padding-top: var(--gutter); }

  .compass-tool .counter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--component);
  }

  .compass-tool .counter .n { font-variant-numeric: tabular-nums; color: var(--graphite); }

  .compass-tool .progress { position: relative; height: 1px; background: var(--stone); margin-top: 10px; }
  .compass-tool .progress i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--gold); transition: width var(--settle); }

  .compass-tool .statement {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.16;
    letter-spacing: -0.014em;
    max-width: 22ch;
    margin: var(--gutter) 0 0;
    min-height: 3.5em;
  }

  .compass-tool .scale { display: grid; gap: 1px; margin-top: var(--gutter); border-block: 1px solid var(--stone); background: var(--stone); }

  .compass-tool .scale button {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    text-align: left;
    background: var(--ivory);
    border: 0;
    font-family: var(--op);
    font-size: 15px;
    font-weight: 300;
    color: var(--graphite);
    padding: 16px 14px;
    cursor: pointer;
    transition: background 400ms ease, color 400ms ease;
  }

  .compass-tool .scale button .k {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    min-width: 1.4em;
  }

  .compass-tool .scale button:hover { background: var(--mist); color: var(--plum); }
  .compass-tool .scale button:hover .k { color: var(--plum); }

  .compass-tool .scale button[aria-pressed="true"] { background: var(--aubergine); color: var(--ivory); }
  .compass-tool .scale button[aria-pressed="true"] .k { color: var(--gold); }

  .compass-tool .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--component); margin-top: var(--gutter); }
  .compass-tool .hint { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }

  /* ---------- results ---------- */

  .compass-tool .results { padding-top: var(--gutter); }
  .compass-tool .results h2 { font-size: clamp(2.6rem, 10vw, 4rem); color: var(--plum); }
  .compass-tool .results .underline { width: 72px; height: 1px; background: var(--gold); margin-top: 18px; }

  .compass-tool .tagline { margin-top: 18px; font-size: 17px; line-height: 1.55; max-width: 34ch; color: var(--graphite); }

  .compass-tool .note {
    margin-top: var(--component);
    padding: 14px 18px;
    background: var(--mist);
    border-left: 1px solid var(--gold);
    font-size: 14px;
    line-height: 1.6;
    color: var(--graphite);
  }

  .compass-tool figure { margin: var(--gutter) 0 0; }
  .compass-tool figure svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }

  .compass-tool .axes { margin-top: var(--component); display: grid; gap: 14px; }
  .compass-tool .axis-row { display: grid; gap: 7px; }
  .compass-tool .axis-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
  .compass-tool .axis-head b { color: var(--graphite); font-weight: 400; font-variant-numeric: tabular-nums; }
  .compass-tool .scaleline { position: relative; height: 1px; background: var(--stone); }
  .compass-tool .scaleline u { position: absolute; left: 50%; top: -2px; width: 1px; height: 5px; background: var(--stone); text-decoration: none; }
  .compass-tool .scaleline i { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--plum); transition: left var(--settle); }

  .compass-tool .readings { margin-top: var(--section); display: grid; gap: var(--gutter); border-top: 1px solid var(--stone); padding-top: var(--gutter); }
  .compass-tool .reading h3 { margin: 0 0 10px; font-family: var(--op); font-size: 10px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }
  .compass-tool .reading p { font-size: 16px; line-height: 1.68; max-width: 42ch; }

  .compass-tool .reading.sit { background: var(--mist); padding: var(--component); }
  .compass-tool .reading.sit h3 { color: var(--plum); }
  .compass-tool .reading.sit p { font-size: 19px; line-height: 1.5; color: var(--plum); font-weight: 300; }

  .compass-tool .results .nav { margin-top: var(--gutter); }

  /* ---------- colophon ---------- */

  .compass-tool footer { margin-top: var(--section); border-top: 1px solid var(--stone); padding-top: 18px; display: grid; gap: 10px; }
  .compass-tool footer p { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.9; }

  .compass-tool [hidden] { display: none !important; }

  @media (max-width: 420px) {
    .compass-tool .statement { min-height: 0; }
    .compass-tool .hint { display: none; }
    .compass-tool .directions div { flex-direction: column; gap: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .compass-tool * { transition: none !important; }   /* Section 12 · arrive already settled */
  }