/* Hjälpsidan — samma kort och band som appen, bara brukstext. */

.help-band { padding: 18px 20px 20px; }
.help-band .eyebrow { display: block; margin-bottom: 10px; }
.help p { margin: 0; max-width: 62ch; }
.help p + p { margin-top: 8px; }
.help-lead { font-size: 14px; font-weight: 500; line-height: 1.4; }
.help b { font-weight: 600; }
.help code { font: inherit; color: var(--text-muted); background: var(--surface-alt); border-radius: 3px; padding: 0 4px; }

/* Tre lägen: ett mini-dagkort per läge, sida vid sida som i veckovyn. */
.help-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.help-state { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.help-example {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 6px 2px;
  background: var(--surface);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .07);
}
.help-example .row { border-top: 0; }
.help-example.is-sent { background: #eef8f1; border-color: var(--success-border); }
.help-state p { font-size: 12px; color: var(--text-muted); }
.help-state p b { color: var(--text); }

/* Term + förklaring, som listraderna i appen. */
.help-list { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 0 16px; }
.help-list dt, .help-list dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--rule-faint); }
.help-list dt { font-weight: 500; display: flex; align-items: baseline; gap: 6px; }
.help-list dd { color: var(--text); max-width: 62ch; }
.help-faq dt { display: block; color: var(--text-muted); font-weight: 400; }
.help-faq dt::before { content: '”'; }
.help-faq dt::after { content: '”'; }

.help-legend { list-style: none; margin: 0; padding: 0; }
.help-legend li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule-faint); }
.help-legend .pill { width: 96px; flex: none; text-align: center; }

@media (max-width: 600px) {
  .help-band { padding: 18px 16px 20px; }
  .help-states { grid-template-columns: 1fr; }
  .help-list { grid-template-columns: 1fr; }
  .help-list dt { padding-bottom: 2px; }
  .help-list dd { border-top: 0; padding-top: 0; }
}