/* ============================================================================
   arbetsmiljoplan.net — Nivå B: Layout-förbättring (enhance)
   ----------------------------------------------------------------------------
   Additivt lager OVANPÅ amp-theme.css. Ger den nya layouten:
   • Sticky stepper under toppnavet
   • Högerpanel med projektstatus (namn, steg, valda risker, saknade uppgifter,
     exportstatus)
   • A4-känsla på förhandsgranskningen i steg 5
   DOM byggs om additivt av amp-enhance.js (klassen .amp-enhanced sätts då).
   Laddas EFTER main.css och amp-theme.css.
   ============================================================================ */

/* ── Sticky stepper ─────────────────────────────────────────────────────── */
.amp-enhanced #stepper {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
  padding-top: 6px;
}

/* ── Tvåkolumnslayout: formulär + statuspanel ───────────────────────────── */
.amp-tool { max-width: 1240px; }

.amp-tool__inner.amp-enhanced {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
/* AFS-badge + stepper spänner över hela bredden */
.amp-tool__inner.amp-enhanced > div:first-child,
.amp-tool__inner.amp-enhanced > #stepper { grid-column: 1 / -1; }
.amp-tool__inner.amp-enhanced > #ampMain { grid-column: 1; min-width: 0; }
.amp-tool__inner.amp-enhanced > #ampStatus { grid-column: 2; }

/* Steg 5: full bredd, panelen döljs (innehållet ÄR sammanfattningen) */
.amp-tool__inner.amp-enhanced.is-export { grid-template-columns: 1fr; }
.amp-tool__inner.amp-enhanced.is-export > #ampStatus { display: none; }
.amp-tool__inner.amp-enhanced.is-export > #ampMain { grid-column: 1 / -1; }

/* ── Statuspanel ────────────────────────────────────────────────────────── */
#ampStatus {
  position: sticky;
  top: calc(var(--nav-h) + 92px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  font-size: .825rem;
}
.amp-status__eyebrow {
  font-family: var(--font-heading);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-dim);
  display: flex; align-items: center; gap: 6px;
}
.amp-status__title {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 600;
  color: var(--color-text); line-height: 1.25;
  margin-top: 2px;
}
.amp-status__title.is-empty { color: var(--color-text-dim); font-weight: 500; }
.amp-status__meta { color: var(--color-text-muted); margin-top: 4px; }

.amp-status__bar {
  height: 7px; border-radius: 999px;
  background: var(--color-surface-2); overflow: hidden; margin-top: 14px;
}
.amp-status__bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--color-accent); transition: width .3s ease;
}
.amp-status__bar-row {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--color-text-muted); margin-top: 6px;
}

.amp-status__sec { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 14px; }
.amp-status__sec h5 {
  font-family: var(--font-heading);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.amp-status__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.amp-status__chip {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  color: #9A3412; background: #FFF3EC;
  border: 1px solid rgba(234,88,12,.25); border-radius: 999px;
  padding: 3px 9px; font-variant-numeric: tabular-nums;
}
.amp-status__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.amp-status__list li { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text-muted); line-height: 1.35; }
.amp-status__list li i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.amp-status__list li.ok { color: var(--color-text); }
.amp-status__list li.ok i { color: var(--color-success); }
.amp-status__list li.warn i { color: var(--color-cta); }
.amp-status__list li.todo i { color: var(--color-text-dim); }

.amp-status__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--radius);
  font-weight: 600; white-space: nowrap;
}
.amp-status__pill.ready { background: #ECFDF3; color: var(--color-success); }
.amp-status__pill.wait  { background: var(--color-surface-2); color: var(--color-text-muted); }
.amp-status__pill.attn  { background: #FFF3EC; color: #9A3412; }

.amp-status__muted { color: var(--color-text-dim); font-size: .8rem; }

/* ── Mobil: panelen blir en fällbar sektion överst ──────────────────────── */
.amp-status__toggle { display: none; }
@media (max-width: 900px) {
  .amp-tool__inner.amp-enhanced { grid-template-columns: 1fr; }
  .amp-tool__inner.amp-enhanced > #ampStatus { grid-column: 1; order: -1; position: static; }
  #ampStatus.is-collapsed .amp-status__body { display: none; }
  .amp-status__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; cursor: pointer; padding: 0;
    font: inherit; color: inherit;
  }
  .amp-status__toggle .ti-chevron-down { transition: transform .2s; }
  #ampStatus:not(.is-collapsed) .amp-status__toggle .ti-chevron-down { transform: rotate(180deg); }
}
@media (min-width: 901px) { .amp-status__body { display: block !important; } }

/* ── A4-känsla på förhandsgranskningen (steg 5) ─────────────────────────── */
.amp-enhanced #step5 #summaryContent {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
  padding: 40px clamp(24px, 5vw, 56px);
  max-width: 760px;
  margin: 0 auto;
  border-top: 3px solid var(--color-navy);
  position: relative;
}
.amp-enhanced #step5 #summaryContent::before {
  content: "ARBETSMILJÖPLAN · AFS 2023:3";
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .08em;
  color: var(--color-text-dim);
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}