/* Prompts & Skills (prompts_pages.py, prompts.js). Loaded only on the
   de/en prompts pages and the de/en homepage search slot. */
.pr-crumbs { font-size: 0.86rem; color: var(--muted); margin: 1rem 0 0.4rem; }
.pr-crumbs a { color: var(--muted); }
.pr-crumbs [aria-current] { color: var(--ink); }
.pr-cat-card em { font-style: normal; font-size: 0.85rem; color: var(--blue); margin-top: 0.3rem; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1.2rem; }
.pr-chip { font: inherit; cursor: pointer; border: 1px solid var(--line); }
.pr-chip[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.pr-chip-n { opacity: 0.75; font-size: 0.85em; }
.pr-group[hidden] { display: none; }
.pr-cards { list-style: none; padding: 0; margin: 0.4rem 0 1.4rem; display: grid; gap: 0.8rem; }
@media (min-width: 760px) { .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-card { background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; padding: 0.9rem 1rem; }
.pr-card h2, .pr-card h3 { font-size: 1.02rem; margin: 0 0 0.35rem; line-height: 1.3; }
.pr-card p { margin: 0.2rem 0; font-size: 0.94rem; line-height: 1.45; }
.pr-meta { color: var(--muted); font-size: 0.84rem !important; }
.pr-status { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--warn); background: var(--warn-bg); border-radius: 980px; padding: 0.1rem 0.55rem; }
.pr-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0.6rem 0; }
.pr-facts div { display: flex; gap: 0.35rem; font-size: 0.92rem; }
.pr-facts dt { color: var(--muted); }
.pr-facts dd { margin: 0; font-weight: 600; }
.pr-status-line { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.pr-small { font-size: 0.88rem; color: var(--muted); }
.pr-fill { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; margin: 1rem 0 1.4rem; }
.pr-fill h2 { margin-top: 0.4rem; }
.pr-fields { display: grid; gap: 0.8rem; }
@media (min-width: 760px) { .pr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-field { display: flex; flex-direction: column; gap: 0.2rem; }
.pr-field label { font-weight: 600; font-size: 0.95rem; }
.pr-field small { color: var(--muted); font-size: 0.84rem; }
.pr-field input, .pr-field textarea { font: inherit; font-size: 1rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(0,0,0,0.25); border-radius: 10px; background: #fff; color: #1d1d1f; min-height: 44px; }
.pr-field input:focus-visible, .pr-field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.pr-prompt { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; line-height: 1.55; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem; margin: 0.4rem 0 0.8rem; }
.pr-var { background: #ffe7a3; color: #1d1d1f; border-radius: 4px; padding: 0 2px; }
.pr-var.is-filled { background: #d7ecff; }
.pr-copy { font: inherit; font-weight: 600; color: #fff; background: var(--blue); border: 0; border-radius: 980px; padding: 0.7rem 1.3rem; min-height: 44px; cursor: pointer; }
.pr-copy:hover { background: var(--blue-deep); }
.pr-copy:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Newsletter CTA link in the same primary style (white on brand blue: 6.0:1, hover 8.7:1). */
a.pr-nl-cta { display: inline-flex; align-items: center; text-decoration: none; }
a.pr-nl-cta:hover, a.pr-nl-cta:focus-visible, a.pr-nl-cta:visited { color: #fff; text-decoration: none; }
.pr-copy-status { margin-inline-start: 0.6rem; font-size: 0.9rem; color: var(--ok); }
.pr-steps li, .pr-entry ul li { margin: 0.3rem 0; line-height: 1.5; }
.pr-tools { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.pr-tools li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.8rem; }
.pr-tools a { font-weight: 600; margin-inline-end: 0.3rem; }
.pr-badge { font-size: 0.8rem; color: var(--ok); background: var(--ok-bg); border-radius: 980px; padding: 0.1rem 0.55rem; }
.pr-box { border-radius: 16px; padding: 0.8rem 1rem; margin: 1.2rem 0; border: 1px solid var(--line); background: var(--sheet); }
.pr-box h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.pr-box p, .pr-box ul { margin: 0.2rem 0; font-size: 0.94rem; line-height: 1.5; }
.pr-hint { background: var(--warn-bg); border-color: rgba(138,90,0,0.25); color: #3b2a00; }
.pr-hint h2 { color: var(--warn); }
.pr-license { font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.pr-tool-block ul { padding-inline-start: 1.2rem; }
.prompt-results[hidden] { display: none; }
.prompt-group { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1rem; margin: 0.6rem 0 1rem; }
.prompt-group h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.prompt-group-n { color: var(--muted); font-weight: 400; }
.prompt-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.prompt-group-list li { display: flex; flex-direction: column; gap: 0.15rem; }
.prompt-group-list a { font-weight: 600; }
.prompt-group-list span { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.prompt-group-list .pr-status { align-self: flex-start; }
.prompt-group-more { margin: 0.6rem 0 0; font-size: 0.92rem; }
.pr-entry, .pr-fill, .pr-fields, .pr-field { min-width: 0; }
.pr-fields { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-field input, .pr-field textarea { width: 100%; box-sizing: border-box; }
.pr-chip-n { margin-inline-start: 0.3rem; }
.prompt-group { text-align: start; }
/* Visuals (owner update 2026-10-17): category icons, card thumbnails,
   labelled AI example images and editor-written result previews. */
.pr-icon { display: block; }
.pr-cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--paper); color: var(--blue); flex: none; }
h1 .pr-cat-icon { vertical-align: middle; margin-inline-end: 0.35rem; }
.pr-cat-card .pr-cat-icon { margin-bottom: 0.4rem; }
.pr-card { display: flex; gap: 0.8rem; align-items: flex-start; }
.pr-card-body { min-width: 0; flex: 1; }
.pr-thumb { position: relative; flex: none; width: 88px; height: 66px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--blue); }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-thumb .pr-ai-tag { position: absolute; inset-inline-start: 4px; bottom: 4px; font-size: 0.62rem; padding: 0 0.3rem; }
.pr-ai-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; color: #fff; background: rgba(29,29,31,0.82); border-radius: 6px; padding: 0.05rem 0.4rem; }
.pr-example { margin: 1rem 0 1.2rem; }
.pr-media img { width: 100%; height: auto; border-radius: 14px; display: block; border: 1px solid var(--line); }
.pr-media figcaption { font-size: 0.85rem; color: var(--muted); line-height: 1.45; margin-top: 0.4rem; }
.pr-preview-card { background: var(--sheet); border: 1px solid var(--line); border-inline-start: 4px solid var(--blue); border-radius: 14px; padding: 0.8rem 1rem; }
.pr-preview-card h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1.05rem; margin: 0 0 0.2rem; color: var(--ink); }
.pr-preview-card h2 .pr-icon { color: var(--blue); }
.pr-preview-card h3 { font-size: 0.9rem; margin: 0.4rem 0 0.2rem; color: var(--muted); }
.pr-out { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.5; background: var(--paper); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0.3rem 0 0; }
.pr-ba { display: grid; gap: 0.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pr-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-tested { color: var(--ok); background: var(--ok-bg); }
.pr-pending-box { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; border: 2px dashed var(--line); border-radius: 14px; background: var(--paper); color: var(--blue); }
/* RTL (ar): each line of a prompt or example picks its own direction, so
   mixed Arabic/Latin lines (commands, code) stay readable. */
[dir="rtl"] .pr-prompt, [dir="rtl"] .pr-out { unicode-bidi: plaintext; text-align: start; font-family: inherit; }
/* Field suggestions (owner request 2026-10-18): grey chips under a field,
   shown on focus/tap; a chosen value is ordinary black field text. */
.pr-field input::placeholder, .pr-field textarea::placeholder { color: #8a8a8e; }
.pr-sugg { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pr-sugg[hidden], .pr-sugg-opt[hidden] { display: none; }
.pr-sugg-opt { cursor: pointer; font-size: 0.9rem; line-height: 1.3; color: #48484a; background: #f0f0f2; border: 1px solid #dcdce0; border-radius: 980px; padding: 0.45rem 0.8rem; min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; user-select: none; }
.pr-sugg-opt:hover { background: #e6e6ea; color: #1d1d1f; }
.pr-sugg-opt.is-active { background: #e3eefc; border-color: var(--blue); color: #1d1d1f; outline: 2px solid var(--blue); outline-offset: 1px; }
[dir="rtl"] .pr-sugg-opt { unicode-bidi: plaintext; }
/* Scaling (owner request 2026-10-18): filter rows, featured cards, compact
   rows, "Neu" badge, matching-tool block. */
.pr-filters { display: grid; gap: 0.15rem; margin: 0.4rem 0 1rem; }
.pr-filters .pr-chips { margin: 0.2rem 0; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.pr-filters .pr-chips::-webkit-scrollbar { display: none; }
.pr-filters .pr-chip { white-space: nowrap; flex: none; }
.pr-chips-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); min-width: 4.2rem; flex: none; }
.pr-card[hidden], .pr-row[hidden], .pr-rest[hidden], .pr-empty[hidden] { display: none; }
.pr-new { display: inline-block; vertical-align: middle; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--blue); border-radius: 980px; padding: 0.05rem 0.45rem; margin-inline-start: 0.2rem; }
.pr-rest h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.pr-rows { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.7rem; padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); align-items: start; }
.pr-row:first-child { border-top: 0; }
.pr-row-icon { grid-row: span 2; display: inline-flex; width: 2rem; height: 2rem; border-radius: 9px; align-items: center; justify-content: center; background: var(--paper); color: var(--blue); }
.pr-row-body a { font-weight: 600; }
.pr-row-body small { display: block; color: var(--muted); font-size: 0.86rem; line-height: 1.4; margin-top: 0.1rem; }
.pr-row-meta { grid-column: 2; font-size: 0.8rem; color: var(--muted); }
.pr-empty { background: var(--paper); border-radius: 12px; padding: 0.8rem 1rem; }
.pr-reset { font: inherit; color: var(--blue); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0.2rem; min-height: 36px; }
.pr-match { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.5rem; }
.pr-match li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem; }
.pr-match strong { font-size: 1rem; }
.pr-match .ad-cta-note { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); margin: 0; }
/* Prompt verbessern (rule-based check, prompt-improve.js) */
.pi-box textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.5; border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem; margin: 0.4rem 0 0.6rem; background: #fff; color: var(--ink); }
.pi-box textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.pi-checks { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; display: grid; gap: 0.35rem; }
.pi-checks li { display: flex; gap: 0.5rem; align-items: baseline; }
.pi-checks em { font-style: normal; font-size: 0.85rem; color: var(--muted, #666); margin-inline-start: auto; }
.pi-mark { display: inline-block; min-width: 1.2em; font-weight: 700; text-align: center; }
.pi-ok .pi-mark { color: var(--ok); }
.pi-miss .pi-mark { color: var(--blue); }
.pi-warnings { margin: 0.3rem 0 0.8rem; }
.pi-allok { font-weight: 600; color: var(--ok); }
.pr-improve-cta { white-space: nowrap; }
/* Design accents (owner request 2026-10-18), same rules as styles.css:
   blue = action, current place, focus. */
/* Selected filter chip: light blue instead of a heavy black pill. */
.pr-chip[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue-line); font-weight: 600; }
.pr-chip[aria-pressed="true"] .pr-chip-n { opacity: 1; }
/* Category icons were meant to be blue but `.category-card span` (muted)
   won on specificity; give them the brand blue on the light blue tint. */
.pr-cat-card .pr-cat-icon { color: var(--blue); background: var(--blue-tint); }
/* "Neu" badge: tinted, so it supports the blue title instead of competing. */
.pr-new { color: var(--blue-deep); background: var(--blue-tint); border: 1px solid var(--blue-line); }
/* "Eigenen Prompt verbessern" is the hub's tool CTA: blue outline button. */
a.pr-improve-cta { color: var(--blue); border-color: var(--blue); font-weight: 600; background: var(--sheet); }
a.pr-improve-cta:hover { color: var(--blue-deep); background: var(--blue-tint); text-decoration: none; }