/* AI 用法 /#ai-howto（app/ai_howto.py，老板 10-21） */
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
.ah-app { max-width: 980px; margin: 0 auto; padding: 16px 20px 60px; display: flex; flex-direction: column; gap: 16px; }
.ah-head h1 { margin: 0; font-size: 22px; }
.ah-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 70ch; }
.ah-hint { color: var(--muted); font-size: 14px; padding: 20px 0; }

.ah-rules { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-md); padding: 12px 16px; }
.ah-rules h2 { margin: 0 0 6px; font-size: 14px; color: var(--warning-fg); }
.ah-rules ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.6; }

.ah-index { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-index a { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 13px; text-decoration: none; }
.ah-index a:hover { background: var(--surface-hover); border-color: var(--accent-soft-border); }

.ah-list { display: flex; flex-direction: column; gap: 14px; }
.ah-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; min-width: 0; }
.ah-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.ah-card h2 { margin: 0; font-size: 17px; }
.ah-card h3 { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.ah-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ah-who, .ah-level { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.ah-level { background: var(--surface-sunken); color: var(--ink-2); }
.ah-why { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.ah-proof { margin: 0; font-size: 14px; line-height: 1.6; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.ah-proof b { margin-right: 8px; color: var(--accent); }
.ah-from { color: var(--muted); font-size: 12.5px; margin-left: 6px; white-space: nowrap; }
.ah-steps, .ah-check { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.6; }

.ah-prompt { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ah-prompt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-sunken); font-size: 13px; }
.ah-prompt p { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.ah-prompt mark { background: var(--warning-bg); color: var(--warning-fg); padding: 0 1px; }
.ah-copy { border: 1px solid var(--accent); background: var(--surface); color: var(--accent); border-radius: var(--radius-sm); padding: 3px 12px; font-size: 13px; cursor: pointer; }
.ah-copy:hover { background: var(--accent-soft-bg); }
.ah-copy:focus-visible, .ah-index a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ah-auto h2 { margin: 0 0 8px; font-size: 15px; }
.ah-auto-item { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; line-height: 1.6; }
.ah-auto-item p { margin: 4px 0 0; color: var(--ink-2); }
.ah-foot { color: var(--muted); font-size: 12.5px; margin: 0; }

@media (max-width: 560px) {
  .ah-app { padding: 12px 12px 48px; }
  .ah-card { padding: 14px; }
}