/* the Enneagram page: the figure, the result and the questions. "Read more" is shared, in life.css */
.en .en-fig { max-width: 420px }
.en .en-fig svg { overflow: visible }
.en-result { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px }
.en .en-result h2 { margin: 6px 0 8px; font-size: 22px }
.en-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 }
.en-code b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1 }
.en-code span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
.en-result > p:not([class]) { margin: 0 0 10px; font-size: 16px; line-height: 1.5; text-wrap: pretty }
.en-result .note { margin: 10px 0 0 }
.en-near { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0 }
.en-near span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-right: 4px }
.en-near button { min-height: 32px; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: border-color .15s, background .15s }
.en-near button:hover { border-color: var(--soft); background: var(--wash) }
.en-near button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

/* the questions: three answers side by side, one under another on a phone */
#quiz { display: flex; flex-direction: column; gap: 18px; margin: 18px 0 }
#quiz fieldset { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
#quiz legend { padding: 0 0 10px; float: left; grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 700; letter-spacing: -.005em }
#quiz .en-qn { min-width: 1.6em; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--soft); font-variant-numeric: tabular-nums }
#quiz label { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.35; cursor: pointer; transition: border-color .15s }
#quiz label:hover { border-color: var(--soft) }
#quiz label:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, currentColor 6%, transparent) }
#quiz input { margin: 2px 0 0; flex: none; accent-color: var(--ink) }
#quiz input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
#quiz .en-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font: 400 12px/1.3 var(--mono); color: var(--soft) }
.en-clear { padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.en-clear:hover { color: var(--ink) }

@media (max-width: 640px) {
  .en .en-fig { max-width: 300px }
  .en-result { padding: 14px 16px }
  #quiz fieldset { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) { #quiz label, .en-near button { transition: none } }