/* ══════════════════════════════════════════════════════════════
   PATTERN — Dimension picker

   Accordion-style multi-dimension selection UI. Each dimension is
   a collapsible section with a numbered circle indicator, title,
   subtitle/theory hint, current-selection display, and a list of
   radio options inside.

   Markup sketch:
     <div class="dimension">
       <button class="dimension-header" type="button">
         <span class="dimension-number">1</span>
         <div class="dimension-info">
           <h2>Anledning</h2>
           <div class="theory-hint">Varför möts vi?</div>
         </div>
         <span class="dimension-selection">Etablera förtroende</span>
         <span class="dimension-chevron" aria-hidden="true"></span>
       </button>
       <div class="dimension-body">
         <p class="theory-body">...</p>
         <fieldset class="options">
           <label class="option-card">
             <input type="radio" name="anledning" value="trust">
             <div class="option-content">
               <div class="option-label">Etablera förtroende</div>
               <div class="option-desc">...</div>
             </div>
           </label>
           ...
         </fieldset>
       </div>
     </div>

   Result page uses .choices-summary with .choice-tag elements
   showing selected (dimension, value) pairs.

   Base: strategios.css (uses canonical tokens)
   Used by: DIALOG (APP/DIALOG)

   TODO (during DIALOG migration):
   - Replace .dimension/.dimension-body expansion with canonical
     .accordion__item + :has(input:checked) pattern
   - Replace .option-card with canonical .card-option (BEM)
   - Replace .choice-tag with canonical .chip (possibly with
     a data-variant for the "dim: label" format)
   - Replace .submit-btn with .btn .btn--full
   ══════════════════════════════════════════════════════════════ */

/* ── Dimension container ───────────────────────────────────── */
.dimension {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
    overflow: hidden;
    transition: border-color var(--transition);
}

.dimension:has(input:checked) {
    border-color: var(--border-strong);
}

/* ── Header (trigger) ──────────────────────────────────────── */
.dimension-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.dimension-header:hover {
    background: var(--bg-alt);
}

/* ── Numbered indicator ────────────────────────────────────── */
.dimension-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    flex-shrink: 0;
}

.dimension:has(input:checked) .dimension-number {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

/* ── Info (title + theory hint) ────────────────────────────── */
.dimension-info {
    flex: 1;
    min-width: 0;
}

.dimension-info h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.theory-hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ── Current selection display ─────────────────────────────── */
.dimension-selection {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

/* ── Chevron ───────────────────────────────────────────────── */
.dimension-chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--border-strong);
    border-bottom: 1.5px solid var(--border-strong);
    transform: rotate(45deg);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.dimension.expanded .dimension-chevron {
    transform: rotate(-135deg);
}

/* ── Body (options list) ───────────────────────────────────── */
.dimension-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 var(--s-4);
}

.dimension.expanded .dimension-body {
    max-height: 80rem;
    padding-bottom: var(--s-4);
    transition: max-height 0.3s ease-in;
}

/* ── Theory body (expanded context) ────────────────────────── */
.theory-body {
    font-size: 0.8125rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: var(--s-4);
    padding-left: var(--s-3);
    border-left: 2px solid var(--border);
}

/* ── Option list ───────────────────────────────────────────── */
.options {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.options fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.option-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.option-card:hover {
    border-color: var(--border-strong);
}

.option-card.selected,
.option-card:has(input:checked) {
    border-color: var(--fg);
    background: var(--bg-alt);
}

.option-card input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--fg);
    flex-shrink: 0;
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.option-desc {
    font-size: 0.8125rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ══════════════════════════════════════
   Result page – choices summary
   ══════════════════════════════════════ */

.choices-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.choice-tag {
    font-size: 0.8125rem;
    padding: var(--s-1) var(--s-2);
    background: var(--bg-alt);
    border-radius: var(--radius);
}

.choice-dim {
    color: var(--muted);
}

.choice-label {
    font-weight: 500;
}

/* ══════════════════════════════════════
   Submit button (temporary – see TODO in header)
   ══════════════════════════════════════ */

.submit-btn {
    display: block;
    width: 100%;
    padding: var(--s-3) var(--s-4);
    margin-top: var(--s-4);
    background: var(--fg);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition);
}
.submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.submit-btn:not(:disabled):hover { opacity: 0.85; }

/* ══════════════════════════════════════
   Result page – recommendation render
   (Generic .result-* primitives are in strategios.css.
   This module only adds DIALOG-specific result content.)
   ══════════════════════════════════════ */

.result-section p {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.former-name,
.forum-name {
    font-weight: 500;
    margin-bottom: var(--s-1);
}

.nyckelvillkor-list {
    padding-left: var(--s-4);
}

.nyckelvillkor-list li {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: var(--s-2);
}

.varning {
    padding: var(--s-3) var(--s-4);
    border-left: 3px solid var(--border-strong);
    background: var(--bg-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.varning h2 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.action-link {
    color: var(--fg);
    font-weight: 500;
    font-size: 0.875rem;
}