/* ProofBounty styles. The component rules come from the frontend prototype; the MVP layer follows them. */
#app { --pb-bg:light-dark(#f5f7fa,#141b24); --pb-surface:light-dark(#ffffff,#1b2531); --pb-text:light-dark(#162735,#e4edf5); --pb-muted:light-dark(#506477,#a8bbc9); --pb-border:light-dark(#d8e1e9,#354657); --pb-soft:light-dark(#eaf0f5,#243341); --pb-blue:light-dark(#1b536f,#9bcbe2); --pb-button:light-dark(#1d4155,#b5d4e4); --pb-button-text:light-dark(#ffffff,#14222d); --pb-danger:light-dark(#ad3030,#ffb6b6); color:var(--pb-text); font:14px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme:light dark; width:100%; }
/* Field edges and other graphics that must be seen: at least 3:1 against the field, the panel and the page. */
#app { --pb-field-border:light-dark(#788a9b,#6c8196); }
#app * { box-sizing:border-box; }
#app [hidden] { display:none!important; }
#app .pb-header { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:16px 24px; background:var(--pb-surface); border-bottom:1px solid var(--pb-border); }
#app button { font:inherit; }
#app .pb-brand { display:flex; align-items:center; gap:9px; background:none; border:0; padding:0; color:var(--pb-text); font-size:19px; font-weight:500; }
#app .pb-symbol { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:var(--pb-button); color:var(--pb-button-text); font-size:24px; }
#app .pb-header nav { display:flex; align-items:center; gap:3px; flex-wrap:wrap; flex:1; }
#app .pb-nav { color:var(--pb-muted); border:0; background:none; padding:8px 10px; border-radius:6px; }
#app .pb-nav[aria-current="page"] { color:var(--pb-text); background:var(--pb-soft); }
#app .pb-main { padding:30px; }
#app h1, #app h2, #app h3 { color:var(--pb-text); font-weight:500; margin:0; }
#app h1 { font-size:27px; line-height:1.35; margin:9px 0 17px; }
#app h2 { font-size:18px; margin:16px 0 10px; }
#app h3 { font-size:16px; margin:5px 0 7px; }
#app p { margin:8px 0 13px; overflow-wrap:anywhere; }
#app h1, #app h2, #app h3, #app li { overflow-wrap:anywhere; }
#app .pb-eyebrow, #app .pb-kicker { color:var(--pb-muted); font-size:12px; }
#app .pb-eyebrow { letter-spacing:.045em; }
#app .pb-muted { color:var(--pb-muted); font-size:13px; }
#app .pb-intro { color:var(--pb-muted); font-size:16px; max-width:32em; }
#app .pb-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:17px 0 4px; }
#app .pb-button { background:var(--pb-surface); color:var(--pb-text); border:1px solid var(--pb-border); border-radius:7px; padding:9px 13px; font-weight:500; line-height:1.35; }
#app .pb-primary { color:var(--pb-button-text); background:var(--pb-button); border-color:var(--pb-button); }
#app .pb-small { font-size:13px; padding:7px 11px; }
#app .pb-panel { background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:9px; padding:20px; }
#app .pb-section-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; margin:24px 0 10px; }
#app .pb-section-heading h2 { margin:0; }
#app .pb-rules { margin-top:17px; color:var(--pb-muted); font-size:13px; }
#app .pb-rules summary { color:var(--pb-blue); padding:7px 0; }
#app .pb-badge { display:inline-block; background:var(--pb-soft); color:var(--pb-text); padding:3px 8px; border-radius:4px; font-size:12px; }
#app input:not([type="checkbox"]):not([type="radio"]), #app select, #app textarea { width:100%; color:var(--pb-text); background:var(--pb-surface); border:1px solid var(--pb-field-border); border-radius:6px; font:inherit; font-size:16px; padding:10px 12px; min-width:0; }
#app textarea { resize:vertical; }
#app input::placeholder, #app textarea::placeholder { color:var(--pb-muted); opacity:1; }
#app input[type="checkbox"], #app input[type="radio"] { margin-top:5px; accent-color:var(--pb-button); flex-shrink:0; }
#app .pb-inline-note { background:var(--pb-soft); color:var(--pb-text); padding:14px 16px; border-radius:6px; margin:18px 0; }
#app strong { font-weight:500; }
#app hr { border:0; border-top:1px solid var(--pb-border); margin:19px 0; }
#app .pb-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--pb-border); padding:13px 24px; color:var(--pb-muted); font-size:12px; }
#app .pb-footer-copy { max-width:72em; }
#app .pb-footer .pb-launch { margin:0 0 8px; }
#app .pb-launch time { white-space:nowrap; }
#app .pb-launch a { color:var(--pb-blue); text-underline-offset:.18em; }
#app .pb-launch-history { list-style:none; max-width:44em; margin:28px 0; padding:0 0 0 22px; border-left:1px solid var(--pb-border); }
#app .pb-launch-history > li { position:relative; padding:0 0 24px; }
#app .pb-launch-history > li:last-child { padding-bottom:0; }
#app .pb-launch-history > li::before { content:""; position:absolute; left:-27px; top:.45em; width:9px; height:9px; border-radius:50%; background:var(--pb-blue); box-shadow:0 0 0 4px var(--pb-bg); }
#app .pb-launch-history > li > time { color:var(--pb-muted); font-size:13px; }
#app .pb-launch-history h2 { margin:4px 0 8px; }
@media(max-width:720px) {
  #app .pb-header { padding:15px 18px; gap:10px; }
  #app .pb-header nav { flex-basis:100%; }
  #app .pb-main { padding:20px; }
  #app h1 { font-size:23px; }
}
@media(max-width:390px) {
  #app .pb-main { padding:16px; }
  #app .pb-header { padding:12px 14px; }
  #app .pb-brand { font-size:17px; }
  #app .pb-nav { padding:8px; }
  #app .pb-panel { padding:16px; }
  #app .pbx-search-row input::placeholder { font-size:15px; }
}
@media(pointer:coarse) {
  #app button, #app summary { min-height:44px; }
}
#app .pbs-badges { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }
#app [data-pb-country] { max-width:100%;overflow-wrap:anywhere; }
#app button:disabled { opacity:.55;cursor:not-allowed; }
#app .pbx-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:28px; align-items:start; padding:28px; border:1px solid var(--pb-border); border-radius:14px; background:radial-gradient(900px 340px at 0% 0%, light-dark(rgb(64 140 220 / 14%), rgb(90 160 240 / 16%)), transparent 70%), radial-gradient(700px 300px at 100% 0%, light-dark(rgb(200 80 160 / 10%), rgb(220 110 190 / 14%)), transparent 70%), var(--pb-surface); }
#app .pbx-title { font-size:clamp(28px, 4.2vw, 44px); line-height:1.12; font-weight:650; letter-spacing:-0.02em; margin:12px 0 14px; }
#app .pbx-accent { color:var(--pb-blue); }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  #app .pbx-accent { background:linear-gradient(90deg, light-dark(#1f6fb2,#7cc4ff), light-dark(#7b3fbf,#c9a2ff), light-dark(#c2366f,#ff8fb8)); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
#app .pbx-hero .pb-intro { max-width:38em; }
#app .pbx-stats { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:20px 0 0; }
#app .pbx-stats li { flex:1 1 120px; padding:10px 12px; border:1px solid var(--pb-border); border-radius:10px; background:var(--pb-bg); }
#app .pbx-stats strong { display:block; font-size:22px; font-weight:650; letter-spacing:-0.01em; }
#app .pbx-stats span { color:var(--pb-muted); font-size:12px; line-height:1.35; display:block; }
#app .pbx-mosaic-wrap { display:flex; flex-direction:column; gap:10px; min-width:0; }
#app .pbx-mosaic { display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px; width:100%; padding:14px; border:1px solid var(--pb-border); border-radius:12px; background:var(--pb-bg); cursor:pointer; }
#app .pbx-mosaic span { aspect-ratio:1; border-radius:2px; background:light-dark(hsl(var(--h) 60% 52%), hsl(var(--h) 62% 60%)); }
#app .pbx-mosaic:focus-visible { outline:2px solid var(--pb-text); outline-offset:3px; }
#app .pbx-mosaic-caption { margin:0; color:var(--pb-muted); font-size:13px; }
#app .pbx-mosaic-caption strong { color:var(--pb-text); }
@media (prefers-reduced-motion:no-preference) {
  #app .pbx-mosaic span { animation:pbx-twinkle 6s ease-in-out infinite; animation-delay:var(--d); transition:transform .12s ease; }
  #app .pbx-mosaic:hover span { animation-play-state:paused; }
  #app .pbx-mosaic span:hover { transform:scale(1.7); }
  @keyframes pbx-twinkle { 0%, 88%, 100% { opacity:1; transform:none; } 94% { opacity:.35; transform:scale(.7); } }
}
/* Visitors can pause the motion; the mosaic also rests while it is off screen. Nothing moves for reduced motion. */
#app .pbx-motion { align-self:flex-start; }
#app .pbx-mosaic.is-offscreen span { animation-play-state:paused; }
#app .pbx.is-still .pbx-mosaic span, #app .pbx.is-still .pbx-caret { animation:none; }
@media (prefers-reduced-motion:reduce) { #app .pbx-motion { display:none; } }
#app .pbx-snapshot { margin:12px 2px 0; }
#app .pbx-snapshot a, #app .pbx-detail a, #app .pbx-verdict a { color:var(--pb-blue); }
#app .pbx-section { margin-top:38px; position:relative; }
#app .pbx-chips { display:flex; flex-wrap:wrap; gap:8px; }
#app .pbx-chip { border:1px solid var(--pb-border); background:var(--pb-surface); color:var(--pb-text); border-radius:999px; padding:6px 13px; font-size:13px; }
#app .pbx-chip[aria-pressed="true"] { background:var(--pb-button); border-color:var(--pb-button); color:var(--pb-button-text); }
#app .pbx-quests { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-top:16px; }
#app .pbx-quest { position:relative; display:flex; flex-direction:column; background:var(--pb-surface); border:1px solid var(--pb-border); border-top:4px solid hsl(var(--q) 60% 52%); border-radius:12px; padding:16px; min-width:0; }
#app .pbx-quest.is-match { box-shadow:0 0 0 2px hsl(var(--q) 60% 52%); }
/* Other hunts recede without opacity, so their text keeps its contrast. */
#app .pbx-quest.is-dim { border-top-color:var(--pb-border); background:var(--pb-bg); }
#app .pbx-quest.is-dim .pbx-quest-icon, #app .pbx-quest.is-dim .pbx-dots i.on { filter:grayscale(1); }
#app .pbx-quest h3 { font-weight:600; line-height:1.35; margin-top:10px; }
#app .pbx-quest code { align-self:flex-start; font-size:11px; color:var(--pb-muted); background:var(--pb-soft); padding:1px 6px; border-radius:4px; }
#app .pbx-quest .pb-actions { margin-top:auto; padding-top:8px; }
#app .pbx-quest-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-size:20px; color:#fff; background:hsl(var(--q) 60% 48%); }
#app .pbx-match { position:absolute; top:14px; right:14px; font-size:11px; font-weight:600; color:light-dark(hsl(var(--q) 70% 32%), hsl(var(--q) 70% 72%)); }
#app .pbx-ground { font-weight:500; margin:10px 0 4px; }
#app .pbx-effort { display:flex; align-items:center; gap:8px; color:var(--pb-muted); font-size:12px; margin:4px 0; }
#app .pbx-dots { display:inline-flex; gap:3px; }
#app .pbx-dots i { width:7px; height:7px; border-radius:50%; background:var(--pb-soft); border:1px solid var(--pb-border); }
#app .pbx-dots i.on { background:hsl(var(--q) 60% 52%); border-color:transparent; }
#app .pbx-reward { font-size:12px; color:var(--pb-muted); margin:2px 0 6px; }
#app .pbx-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; margin:6px 0 16px; }
#app .pbx-search-row { display:flex; gap:8px; align-items:center; flex:1 1 300px; max-width:480px; }
#app .pbx-search-row input { padding:8px 12px; }
#app .pbx-search-row .pb-button { flex-shrink:0; }
#app .pbx-map-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
#app .pbx-map { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px 18px; min-width:0; }
#app .pbx-field-name { font-size:12px; color:var(--pb-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
#app .pbx-field-name::before { content:""; width:10px; height:10px; border-radius:3px; background:hsl(var(--h) 60% 52%); flex-shrink:0; }
#app .pbx-field-name span { margin-left:auto; font-variant-numeric:tabular-nums; }
#app .pbx-tiles { display:flex; flex-wrap:wrap; gap:3px; }
#app .pbx-tile { width:15px; height:15px; padding:0; border:0; border-radius:3px; background:light-dark(hsl(var(--h) 60% 52%), hsl(var(--h) 62% 60%)); cursor:pointer; }
#app .pbx-tile.is-dim { opacity:.16; }
#app .pbx-tile.is-on { box-shadow:0 0 0 1px var(--pb-surface), 0 0 0 2px light-dark(hsl(var(--h) 70% 35%), hsl(var(--h) 80% 78%)); }
/* The selected tile gets a tight ring and a centre dot, so it never looks like the focus ring, which stands 2 px off. */
#app .pbx-tile.is-selected { box-shadow:0 0 0 2px var(--pb-text); background-image:radial-gradient(circle, var(--pb-text) 0 28%, transparent 32%); opacity:1; }
#app .pbx-tile.is-flash { filter:brightness(1.4) saturate(1.3); transform:scale(1.5); }
#app .pbx-tile:focus-visible { outline:2px solid var(--pb-text); outline-offset:2px; }
@media (forced-colors:active) {
  #app .pbx-tile, #app .pbx-mosaic span { forced-color-adjust:none; background-color:CanvasText; }
  #app .pbx-tile.is-on { box-shadow:0 0 0 1px Canvas, 0 0 0 3px Highlight; }
  #app .pbx-tile.is-selected { box-shadow:0 0 0 2px Highlight; background-image:radial-gradient(circle, Canvas 0 28%, transparent 32%); }
  #app .pbx-tile:focus-visible { outline-color:CanvasText; }
  #app .pbx-tip { border:1px solid CanvasText; }
  #app .pbx-chip[aria-pressed="true"] { forced-color-adjust:none; background:Highlight; border-color:Highlight; color:HighlightText; }
}
#app .pbx-detail { position:sticky; top:12px; min-width:0; }
#app .pbx-detail h3 { font-size:19px; font-weight:600; line-height:1.3; margin-top:8px; }
#app .pbx-detail h4 { font-size:13px; margin:14px 0 6px; font-weight:600; }
#app .pbx-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; background:hsl(var(--h) 60% 52%); vertical-align:baseline; }
#app .pbx-mans { list-style:none; padding:0; margin:0; }
#app .pbx-mans li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--pb-border); font-size:13px; }
#app .pbx-mans li span { color:var(--pb-muted); white-space:nowrap; font-size:12px; }
#app .pbx-picks { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
#app .pbx-pick { text-align:left; border:1px solid var(--pb-border); border-radius:8px; background:var(--pb-bg); color:var(--pb-text); padding:8px 10px; font-size:13px; }
#app .pbx-tip { position:absolute; z-index:5; max-width:260px; padding:6px 9px; border-radius:6px; background:var(--pb-text); color:var(--pb-surface); font-size:12px; line-height:1.35; pointer-events:none; transform:translate(-50%, calc(-100% - 8px)); }
#app .pbx-quiz { padding:22px; }
#app .pbx-quiz-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; }
/* Rounds to come are outlined, played rounds filled, and the current round is filled and longer. */
#app .pbx-progress { display:inline-flex; align-items:center; gap:5px; }
#app .pbx-progress i { width:22px; height:6px; border-radius:3px; border:1px solid var(--pb-field-border); }
#app .pbx-progress i.done { background:var(--pb-muted); border-color:var(--pb-muted); }
#app .pbx-progress i.now { width:36px; background:var(--pb-blue); border-color:var(--pb-blue); }
#app .pbx-quiz h3 { font-size:20px; font-weight:600; margin:12px 0 10px; }
#app .pbx-panes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
#app .pbx-panes figure { margin:0; padding:12px 14px; border:1px solid var(--pb-border); border-radius:8px; background:var(--pb-bg); min-width:0; }
#app .pbx-panes figcaption { font-size:12px; color:var(--pb-muted); margin-bottom:6px; }
#app .pbx-panes blockquote { margin:0; font-family:Georgia,serif; font-size:15px; line-height:1.6; }
#app .pbx-panes pre { margin:0; font:12px/1.6 ui-monospace,SFMono-Regular,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
#app .pbx-question { font-size:16px; font-weight:500; margin:16px 0 4px; }
#app .pbx-verdict { margin-top:14px; padding:14px 16px; border-radius:8px; border-left:4px solid var(--pb-border); background:var(--pb-bg); }
#app .pbx-verdict.is-right { border-left-color:light-dark(#2f8a4b,#7fd69b); }
#app .pbx-verdict.is-wrong { border-left-color:light-dark(#b8622a,#ffb27a); }
#app .pbx-verdict strong { font-weight:600; }
#app .pbx-rules-list li { margin:6px 0; }
#app .pbx-case { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:start; }
#app .pbx-chain { list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--pb-border); }
#app .pbx-node { position:relative; margin:0 0 14px; padding:12px 14px; border:1px solid var(--pb-border); border-radius:10px; background:var(--pb-surface); }
#app .pbx-node::before { content:""; position:absolute; left:-26px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--pb-muted); border:2px solid var(--pb-bg); }
#app .pbx-node-root { border-color:var(--pb-danger); }
#app .pbx-node-root::before { background:var(--pb-danger); }
#app .pbx-node strong { display:block; font-weight:600; margin:2px 0 4px; }
#app .pbx-node span { display:block; font-size:13px; color:var(--pb-muted); }
#app .pbx-date { font-size:11px !important; letter-spacing:.04em; text-transform:uppercase; }
@media (prefers-reduced-motion:no-preference) {
  #app .pbx-tile { transition:transform .12s ease, opacity .2s ease, filter .12s ease; }
  #app .pbx-tile:hover { transform:scale(1.35); }
  #app .pbx-quest { transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
  #app .pbx-quest:hover { transform:translateY(-2px); }
  #app .pbx-verdict { animation:pbx-in .25s ease; }
  @keyframes pbx-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
}
@media(max-width:1150px) {
  #app .pbx-quests { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media(max-width:760px) {
  #app .pbx-quests { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(250px, 84%); overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; }
  #app .pbx-quest { scroll-snap-align:start; }
}
@media(max-width:980px) {
  #app .pbx-map-layout { grid-template-columns:minmax(0,1fr); }
  #app .pbx-detail { position:static; }
}
@media(max-width:720px) {
  #app .pbx-hero { grid-template-columns:minmax(0,1fr); padding:20px; gap:18px; }
  #app .pbx-case { grid-template-columns:minmax(0,1fr); }
  #app .pbx-search-row { max-width:none; }
}
@media(pointer:coarse) {
  /* 22 px squares on a 25 px pitch meet the 24 px target spacing; the 44 px button minimum would stretch them. */
  #app .pbx-tile { width:22px; height:22px; min-height:0; }
  #app .pbx-chip { min-height:40px; }
}
#app .pbx { --pbx-mark:light-dark(#ffe08a, #6b5512); --pbx-grad:linear-gradient(90deg, light-dark(#1f6fb2,#7cc4ff), light-dark(#7b3fbf,#c9a2ff), light-dark(#c2366f,#ff8fb8)); }
#app .pbx-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#app .pbx-rot { display:inline-grid; }
#app .pbx-rot > span { grid-area:1 / 1; justify-self:start; color:var(--pb-text); background:linear-gradient(transparent 62%, var(--pbx-mark) 62%, var(--pbx-mark) 92%, transparent 92%); opacity:0; transform:translateY(.3em); }
#app .pbx-rot > span.is-on { opacity:1; transform:none; }
#app .pbx-needs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; font-size:14px; }
#app .pbx-needs-label { margin-right:2px; color:var(--pb-muted); font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
#app .pbx-needs s { position:relative; padding:4px 11px; border:1px dashed var(--pb-border); border-radius:999px; color:var(--pb-muted); text-decoration:none; }
#app .pbx-needs s::after { content:""; position:absolute; left:7px; right:7px; top:calc(50% - 1px); height:2px; border-radius:2px; background:light-dark(#c2366f, #ff8fb8); transform-origin:left center; }
#app .pbx-needs mark { padding:5px 13px; border-radius:999px; background:var(--pbx-grad); color:light-dark(#ffffff, #10161d); font-weight:650; }
#app .pbx-byo { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
#app .pbx-byo-label { width:100%; color:var(--pb-muted); font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
#app .pbx-byo button { padding:5px 11px; border:1px solid var(--pb-border); border-radius:999px; background:var(--pb-surface); color:var(--pb-text); font-size:13px; font-weight:600; }
#app .pbx-byo button:hover { border-color:var(--pb-blue); color:var(--pb-blue); }
@media(pointer:coarse) {
  #app .pbx-byo button { min-height:40px; }
}
#app .pbx-hero .pb-intro strong { color:var(--pb-text); font-weight:600; }
#app .pbx-agent { padding:22px; border:1px solid var(--pb-border); border-radius:14px; background:radial-gradient(760px 280px at 100% 0%, light-dark(rgba(123,63,191,.09), rgba(201,162,255,.10)), transparent 70%), radial-gradient(640px 260px at 0% 100%, light-dark(rgba(31,111,178,.07), rgba(124,196,255,.08)), transparent 70%), var(--pb-surface); }
#app .pbx-agent > .pb-section-heading { margin-top:0; }
#app .pbx-agent h2 { font-size:clamp(22px, 2.6vw, 28px); letter-spacing:-0.01em; }
#app .pbx-loop { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:6px 0 16px; padding:0; }
#app .pbx-loop li { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--pb-border); border-radius:12px; background:var(--pb-bg); font-size:13px; line-height:1.45; }
#app .pbx-loop li.is-agent { border:1.5px solid transparent; background:linear-gradient(var(--pb-bg), var(--pb-bg)) padding-box, var(--pbx-grad) border-box; }
#app .pbx-loop li:not(:last-child)::after { content:"→"; content:"→" / ""; position:absolute; top:50%; right:-17px; z-index:1; display:grid; place-items:center; width:20px; height:20px; margin-top:-10px; border:1px solid var(--pb-border); border-radius:50%; background:var(--pb-surface); color:var(--pb-muted); font-size:11px; }
#app .pbx-loop-icon { flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--pb-soft); font-size:20px; }
#app .pbx-loop strong { display:block; margin-bottom:2px; font-size:14px; }
#app .pbx-loop li div > span { color:var(--pb-muted); }
#app .pbx-who { display:block; color:var(--pb-blue); font-size:11px; font-style:normal; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
#app .pbx-agent-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:14px; }
#app .pbx-agent-grid > .pb-panel { display:flex; flex-direction:column; gap:14px; min-width:0; background:var(--pb-bg); }
#app .pbx-row { display:flex; flex-direction:column; gap:6px; min-width:0; }
#app .pbx-row > label, #app .pbx-label { color:var(--pb-muted); font-size:12px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
#app .pbx-row select { width:100%; min-width:0; }
#app .pbx-inline { display:flex; gap:8px; min-width:0; }
#app .pbx-inline select { flex:1; }
#app .pbx-term { overflow:hidden; border:1px solid light-dark(#0f1720, #354657); border-radius:10px; background:#0f1720; color:#d6e2ee; }
#app .pbx-term-bar { display:flex; align-items:center; gap:6px; padding:7px 12px; background:#1b2632; color:#8fa3b5; font-size:11px; }
#app .pbx-term-bar i { width:9px; height:9px; border-radius:50%; background:#ff5f57; }
#app .pbx-term-bar i:nth-child(2) { background:#febc2e; }
#app .pbx-term-bar i:nth-child(3) { background:#28c840; }
#app .pbx-term-bar span { margin-left:6px; }
#app .pbx-term pre { margin:0; padding:12px 14px; overflow-x:auto; border:0; border-radius:0; background:none; color:inherit; font:12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre; }
#app .pbx-term .c { color:#7f93a6; }
#app .pbx-term .p { color:#7ee2a8; user-select:none; }
#app .pbx-term .pbx-cmd { color:#ffd27a; font-weight:600; }
#app .pbx-caret { display:inline-block; width:.55em; height:1.05em; margin-left:2px; vertical-align:-.18em; background:#d6e2ee; }
#app .pbx-pack-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
#app .pbx-pack-head strong { display:block; font-size:15px; }
#app .pbx-pack-head .pb-muted { font-size:12px; }
#app #pbx-pack-text { flex:1; width:100%; min-height:300px; padding:12px; resize:vertical; border:1px solid var(--pb-field-border); border-radius:10px; background:var(--pb-surface); color:var(--pb-text); font:12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#app .pbx-pack-status { min-height:1.4em; margin:0; color:var(--pb-muted); font-size:13px; }
#app .pbx-pack-status.is-ok { color:light-dark(#1e7a4f, #7fdcaa); font-weight:600; }
#app .pbx-agent-note { margin:14px 2px 0; font-size:12px; }
#app .pbx-agent-does { margin:0 0 8px; padding:7px 9px; border-radius:8px; background:var(--pb-soft); font-size:12.5px; line-height:1.4; }
#app .pbx-agent-does span { display:block; color:var(--pb-blue); font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
@media (prefers-reduced-motion:no-preference) {
  #app .pbx-rot > span { transition:opacity .35s ease, transform .35s ease; }
  #app .pbx-needs s::after { transform:scaleX(0); animation:pbx-strike .4s ease-out forwards; }
  #app .pbx-needs s:nth-of-type(1)::after { animation-delay:.5s; }
  #app .pbx-needs s:nth-of-type(2)::after { animation-delay:.8s; }
  #app .pbx-needs s:nth-of-type(3)::after { animation-delay:1.1s; }
  #app .pbx-needs mark { animation:pbx-pop .5s cubic-bezier(.2, 1.5, .4, 1) 1.5s both; }
  #app .pbx-caret { animation:pbx-blink 1.1s steps(1) 4; }
  #app .pbx-pack.is-flash { animation:pbx-glow 1.1s ease-out; }
  @keyframes pbx-strike { to { transform:scaleX(1); } }
  @keyframes pbx-pop { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:none; } }
  @keyframes pbx-blink { 50% { opacity:0; } }
  @keyframes pbx-glow { from { box-shadow:0 0 0 5px light-dark(rgba(123,63,191,.35), rgba(201,162,255,.45)); } to { box-shadow:0 0 0 0 transparent; } }
}
@media(max-width:1100px) {
  #app .pbx-loop { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #app .pbx-loop li:nth-child(2)::after { display:none; }
}
@media(max-width:860px) {
  #app .pbx-agent-grid { grid-template-columns:minmax(0, 1fr); }
  #app #pbx-pack-text { min-height:240px; }
}
@media(max-width:560px) {
  #app .pbx-agent { padding:14px; }
  #app .pbx-loop { grid-template-columns:minmax(0, 1fr); gap:10px; }
  #app .pbx-loop li:not(:last-child)::after { display:none; }
  #app .pbx-loop li { gap:10px; padding:11px 12px; }
  #app .pbx-loop-icon { width:32px; height:32px; font-size:17px; }
  #app .pbx-hero .pb-intro { font-size:15px; }
  #app .pbx-hero-copy { display:flex; flex-direction:column; }
  #app .pbx-hero-copy > .pb-actions { order:1; margin:0 0 14px; }
  #app .pbx-hero-copy > .pb-intro, #app .pbx-hero-copy > .pbx-stats { order:2; }
  #app .pbx-agent-grid > .pb-panel { padding:14px; }
  #app .pbx-term pre { padding:10px 12px; font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
  /* The search gets a line of its own, so its example titles show. */
  #app .pbx-search-row { flex-wrap:wrap; }
}

/* MVP layer: page frame, views and themes. */
html { color-scheme:light dark; background:light-dark(#f5f7fa, #141b24); }
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
:root[data-theme="light"] #app { color-scheme:light; }
:root[data-theme="dark"] #app { color-scheme:dark; }
body { margin:0; }
#app { display:flex; flex-direction:column; min-height:100vh; }
#app a { color:var(--pb-blue); text-underline-offset:2px; }
#app a.pb-button, #app a.pb-nav, #app a.pb-brand { text-decoration:none; }
#app a.pb-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#app a.pb-button.pb-primary { color:var(--pb-button-text); }
#app button:not(:disabled), #app summary, #app select, #app a { cursor:pointer; }
#app :focus-visible { outline:2px solid var(--pb-text); outline-offset:2px; }
#app .pb-skip { position:absolute; left:-9999px; top:8px; z-index:20; padding:8px 12px; border-radius:8px; background:var(--pb-surface); color:var(--pb-text); }
#app .pb-skip:focus { left:16px; }
/* The header sticks only where it fits on one row; taller, it would cover too much of the page and hide focused controls. */
@media (min-width:1000px) and (min-height:501px) {
  html { scroll-padding-top:88px; }
  #app .pb-top { position:sticky; top:0; z-index:10; }
  #app .pbx-detail { top:83px; }
}
#app .pb-theme select { width:auto; padding:6px 8px; font-size:13px; }
#app .pb-main { flex:1; width:100%; max-width:1240px; margin:0 auto; padding:24px; }
#app .pb-main:focus { outline:none; }
#app .pb-view > h1 { margin:8px 0 10px; font-size:clamp(26px, 3.4vw, 36px); letter-spacing:-0.01em; }
#app .pb-view > h1:focus, #app #pb-report > h1:focus, #app .pbx-title:focus, #app .pbx-section h2:focus { outline:none; }
#app .pb-view > h2 { margin-top:32px; }
#app .pb-empty h2 { margin-top:0; font-size:18px; }
#app .pb-findings, #app .pb-credits { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:16px 0; padding:0; list-style:none; }
#app .pb-finding-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#app .pb-finding h2, #app .pb-credits h3 { margin:8px 0 4px; font-size:17px; }
#app .pb-credits ul { margin:0; padding-left:20px; }
#app .pb-status { font-weight:600; }
#app .pb-status-confirmed { background:light-dark(#e2f4e9, #1d3a2b); color:light-dark(#1e6b43, #8fe0b4); }
#app .pb-status-screened, #app .pb-status-review, #app .pb-status-needs-evidence { background:light-dark(#e6f0f8, #1f3346); color:light-dark(#1b536f, #9bcbe2); }
#app .pb-status-not-established, #app .pb-status-duplicate, #app .pb-status-inconclusive, #app .pb-status-submitted, #app .pb-status-hidden { color:var(--pb-muted); }
#app .pb-status-recorded { background:light-dark(#eef0fb, #272c47); color:light-dark(#38458a, #bcc6f4); }
#app .pb-check-credits { margin:12px 0; padding-left:20px; }
#app .pb-check-credits li { margin:4px 0; }
#app .pb-legend { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:12px 0 0; }
#app .pb-legend dt { font-weight:600; }
#app .pb-legend dd { margin:0; color:var(--pb-muted); }
#app .pb-rules-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; margin-top:18px; }
#app .pb-rules-grid h2 { margin:0 0 8px; font-size:18px; }
#app .pb-rules-grid p { margin:0; }
#app .pb-rules-grid ul, #app .pb-rules-grid ol { margin:0; padding-left:20px; }
#app .pb-rules-grid li { margin:6px 0; }
#app .pb-account { display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
#app[data-reporting="paused"] a[href^="#submit"] { display:none; }
#app button.pb-nav { font:inherit; }
#app .pb-signin { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:16px; align-items:start; }
#app .pb-signin h2, #app .pb-decision h2 { margin-top:0; }
#app .pb-signin .pb-panel { display:grid; gap:10px; }
#app .pb-signin p { margin:0; }
#app .pb-alert { color:var(--pb-danger); }
#app .pb-form { display:grid; gap:14px; margin-top:16px; }
#app .pb-form-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.3fr); gap:14px; }
#app .pb-field { display:grid; gap:6px; min-width:0; align-content:start; }
#app .pb-fields { display:grid; gap:18px; }
#app .pb-field > label, #app .pb-consents legend { font-weight:600; }
#app .pb-hint { margin:0; color:var(--pb-muted); font-size:13px; }
#app .pb-error { margin:0; color:var(--pb-danger); font-size:13px; }
#app .pb-error:empty { display:none; }
#app .pb-consents { display:grid; gap:10px; margin:0; }
#app .pb-consents legend { padding:0 4px; }
#app .pb-consents label { display:flex; align-items:flex-start; gap:10px; }
#app .pb-inline-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 16px; }
#app .pb-inline-form input { flex:1 1 200px; width:auto; max-width:320px; }
#app .pb-meta { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 16px; margin:14px 0; }
#app .pb-meta dt { color:var(--pb-muted); }
#app .pb-meta dd { margin:0; overflow-wrap:anywhere; }
#app .pb-text { max-width:72ch; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Each paragraph of contributed text takes the direction of its first letter, so right-to-left text reads in order. */
#app .pb-text, #app .pb-bidi { unicode-bidi:plaintext; }
/* The 72ch measure is anchored on the left, so right-to-left text takes the full width and each line meets its own edge. */
#app .pb-text:dir(rtl) { max-width:none; }
#app .pb-pre { margin:0; padding:12px 14px; overflow-x:auto; border:1px solid var(--pb-border); border-radius:8px; background:var(--pb-surface); white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#app .pb-copy-source { width:100%; min-height:160px; margin:12px 0; font:13px/1.55 ui-monospace, monospace; }
#app #pb-report > h1 { margin-top:10px; }
#app .pb-history { padding-left:20px; }
#app .pb-history li { margin:8px 0; }
#app .pb-history p { margin:4px 0 0; }
#app .pb-decision { display:grid; gap:14px; margin-top:28px; }
#app .pb-status-rejected { color:var(--pb-danger); }
#app .pb-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 18px; padding:18px 24px; border-top:1px solid var(--pb-border); color:var(--pb-muted); font-size:13px; text-align:center; }
#app .pb-header [data-report-link] { margin-left:auto; }
#app .pbx-pack-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
#app .pb-footer p { margin:0; }
@media (max-width:720px) {
  #app .pb-main { padding:16px; }
  #app .pb-header { gap:10px 12px; padding:12px 16px; }
  #app .pb-header nav { width:100%; flex:none; }
  #app .pb-legend { grid-template-columns:minmax(0, 1fr); }
  #app .pb-form-grid { grid-template-columns:minmax(0, 1fr); }
  #app .pb-legend dd { margin-bottom:6px; }
  #app .pb-rules-grid { grid-template-columns:minmax(0, 1fr); }
}