/* help/app.css — the app's OWN stylesheet. It sits BENEATH the shell's
   shell.css and adds `hp-` layout rules only. It NEVER overrides a shell
   token and NEVER writes a colour: every colour, size and duration below is
   a shell token (var(--...)). The tabs, cards, pills, chips, inputs, the
   field error and the buttons are the shell's own classes. */

.hp-tabs { margin: 0 calc(-1 * var(--sp-3)) var(--sp-4); }
.hp-h1 { margin: 0 0 var(--sp-3); }
.hp-form { margin-bottom: var(--sp-5); }
.hp-hint { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.hp-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hp-kind input { margin: 0; }
.hp-form .btn { width: 100%; }
.hp-list h2, .hp-group h2 { margin: var(--sp-4) 0 var(--sp-3); }
.hp-items { list-style: none; margin: 0; padding: 0; }
.hp-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hp-app { font-weight: 700; }
.hp-meta { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.hp-words { margin: var(--sp-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-answer { margin: var(--sp-3) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.hp-sent { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--accent); }
.hp-empty { color: var(--muted); }
.hp-lines { margin: 0; padding-left: var(--sp-4); }
.hp-lines li { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }