/* Prompt Bank — three approved themes (PB-100). Tokens from docs/08_UX_Design_System.md.
   Contrast rules (docs/ARCHITECTURE_REVIEW.md §5): white text on #1F4D3A (9.63); black text on dark primary #D9BE86 (11.66);
   gold #B8975A is decorative only on light backgrounds (2.58–2.76) — never used for text or functional borders there. */
:root, [data-theme="bwj"] {
  --bg: #FBF7EC; --surface: #FFFFFF; --primary: #1F4D3A; --on-primary: #FFFFFF; --primary-dark: #183A30;
  --accent: #B8975A; --accent-light: #D9BE86; --muted: #E6DCC3; --tint: #D9E6DE; --text: #26352E;
  --border: #5b6b62; --danger: #8a1f1f; --on-danger: #FFFFFF; --focus: #1F4D3A;
}
[data-theme="light"] {
  --bg: #FFFFFF; --surface: #F5F5F5; --primary: #1F4D3A; --on-primary: #FFFFFF; --primary-dark: #183A30;
  --accent: #B8975A; --accent-light: #D9BE86; --muted: #ECECEC; --tint: #EAF0EC; --text: #171717;
  --border: #595959; --danger: #8a1f1f; --on-danger: #FFFFFF; --focus: #1F4D3A;
}
[data-theme="dark"] {
  --bg: #000000; --surface: #151515; --primary: #D9BE86; --on-primary: #000000; --primary-dark: #243E34;
  --accent: #D9BE86; --accent-light: #B8975A; --muted: #292929; --tint: #243E34; --text: #FFFFFF;
  --border: #8a8a8a; --danger: #ff9b9b; --on-danger: #000000; --focus: #D9BE86;
}
/* Independent Arabic / English typography (PB-ARCH §15). Each choice is a local() font restricted by unicode-range, so the Arabic
   font only ever draws Arabic glyphs and the Latin font only Latin glyphs, even in mixed text. Choices are a fixed whitelist (CSP-safe). */
@font-face { font-family: "PB-AR-plex"; src: local("IBM Plex Sans Arabic"), local("IBMPlexSansArabic"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "PB-AR-segoe"; src: local("Segoe UI"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "PB-AR-tahoma"; src: local("Tahoma"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "PB-AR-naskh"; src: local("Noto Naskh Arabic"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "PB-AR-arial"; src: local("Arial"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: "PB-LA-segoe"; src: local("Segoe UI"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "PB-LA-inter"; src: local("Inter"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "PB-LA-arial"; src: local("Arial"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "PB-LA-georgia"; src: local("Georgia"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "PB-LA-mono"; src: local("Cascadia Mono"), local("Consolas"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
:root { --face-ar: "PB-AR-plex"; --face-la: "PB-LA-segoe"; --fs: 16px; }
[data-far="plex"] { --face-ar: "PB-AR-plex"; }
[data-far="segoe"] { --face-ar: "PB-AR-segoe"; }
[data-far="tahoma"] { --face-ar: "PB-AR-tahoma"; }
[data-far="naskh"] { --face-ar: "PB-AR-naskh"; }
[data-far="arial"] { --face-ar: "PB-AR-arial"; }
[data-fla="segoe"] { --face-la: "PB-LA-segoe"; }
[data-fla="inter"] { --face-la: "PB-LA-inter"; }
[data-fla="arial"] { --face-la: "PB-LA-arial"; }
[data-fla="georgia"] { --face-la: "PB-LA-georgia"; }
[data-fla="mono"] { --face-la: "PB-LA-mono"; }
[data-fs="14"] { --fs: 14px; }
[data-fs="16"] { --fs: 16px; }
[data-fs="18"] { --fs: 18px; }
[data-fs="20"] { --fs: 20px; }
[data-fs="22"] { --fs: 22px; }
[data-fs="24"] { --fs: 24px; }
* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.7;
  font-family: var(--face-la), var(--face-ar), "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }
a { color: inherit; text-decoration-color: var(--primary); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .6rem 1.2rem; background: var(--surface);
  border-bottom: 4px solid var(--accent); }
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-inline-start: auto; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 1.2rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1rem; }
.narrow { max-width: 420px; margin: 3rem auto; }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; } h2 { font-size: 1.1rem; margin: .2rem 0 .6rem; } h3 { font-size: 1rem; margin: 0; }
label { display: block; margin: 0 0 .8rem; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
input[type=checkbox] { display: inline-block; width: auto; margin: 0 .3rem; }
input.sm, select.sm { display: inline-block; width: auto; min-width: 8rem; padding: .25rem .4rem; }
textarea.mono, pre, code { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 .8rem; }
.req { color: var(--danger); }
.btn { display: inline-block; padding: .45rem .9rem; font: inherit; cursor: pointer; text-decoration: none; color: var(--text);
  background: var(--muted); border: 1px solid var(--border); border-radius: 6px; }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; text-decoration: underline; }
.btn-sm { padding: .2rem .6rem; font-size: .9rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.inline { display: inline; } .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.row > label { margin: 0; }
.bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.search { flex: 1; } .search input[type=search] { min-width: 14rem; }
.layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } }
.side h2 { font-size: .95rem; border-bottom: 2px solid var(--accent); padding-bottom: .2rem; }
.plain { list-style: none; padding: 0; margin: 0 0 1rem; } .plain .plain { padding-inline-start: 1rem; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-content: start; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.pcard header { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pcard h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desc { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.body-preview, .body-full { margin: 0; padding: .6rem; background: var(--bg); border: 1px solid var(--muted); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.body-preview { max-height: 7.5rem; overflow: hidden; } .body-full { max-height: 60vh; overflow: auto; }
.badge { font-size: .8rem; padding: .05rem .5rem; border-radius: 99px; background: var(--tint); border: 1px solid var(--border); }
.fav { font-size: 1.1rem; } .chip { display: inline-block; padding: .05rem .6rem; border-radius: 99px; background: var(--tint); border: 1px solid var(--border); text-decoration: none; }
.muted { opacity: .85; } .empty { padding: 2rem; text-align: center; }
.alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--border); background: var(--tint); }
.alert.err { background: var(--surface); border-color: var(--danger); }
.tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: .4rem; border-bottom: 1px solid var(--muted); text-align: start; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
.diff { font-family: "Cascadia Mono", Consolas, monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .5rem; }
.diff .d { white-space: pre-wrap; padding: 0 .4rem; } .diff .add { background: var(--tint); } .diff .del { text-decoration: line-through; opacity: .8; }
.diff .op { display: inline-block; width: 1.2rem; font-weight: 700; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }