/* Bug hunter (bug-report.js). The survey reuses the welcome flow's layout (.ob-*, from welcome.css); this file adds the
   report-specific pieces: fields, the tap-to-mark layer, screenshot box, ticket list and the floating button. */
.br[hidden]{display:none}
body.br-open{overflow:hidden}
.br{z-index:2000}
.br .ob-card-mine .ob-body{padding-bottom:4px}
.br-fields{display:grid;gap:14px}
.br-field{display:grid;gap:4px}
.br-field>span{font-family:"Pixelify Sans",var(--sans);font-size:1.05rem}
.br-field small{color:var(--muted);line-height:1.4}
.br-field textarea{width:100%;min-height:84px;resize:vertical;padding:12px 14px;font:inherit;line-height:1.45;color:var(--ink);background:var(--bg);border:0;border-radius:14px;box-shadow:var(--inset-sm)}
.br-field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.br-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.br-center{justify-content:center}
.br-foot{margin:6px 0 0;padding-top:6px}
.br-row .button{min-height:48px}
.br-inline{margin:6px 0 0;text-align:left;min-height:1.2em}
.br-error{color:var(--coral);margin:0}

/* Mark step */
.br-mark{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.br-mark-card{padding:6px 14px 12px;border-radius:18px;box-shadow:var(--raise-sm);background:var(--bg);min-width:0}
.br-picked{display:grid;gap:2px;padding:10px 14px;border-radius:12px;box-shadow:var(--inset-sm);margin-bottom:6px;overflow-wrap:anywhere}
.br-picked small{color:var(--muted)}
.br-file{position:relative;overflow:hidden;cursor:pointer}
.br-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.br-file:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.br-shot-box{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:var(--inset-sm);cursor:crosshair;touch-action:none;line-height:0;max-height:min(260px,34vh)}
.br-shot-box img{display:block;width:100%;max-height:min(260px,34vh);object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;background:var(--track)}
.br-shot-rect{position:absolute;border:3px solid var(--coral);background:color-mix(in srgb,var(--coral) 18%,transparent);box-shadow:0 0 0 1px #fff;pointer-events:none}

/* Review */
.br-review b{display:block;margin:0}
.br-review li{padding:8px 14px;border-radius:12px;box-shadow:var(--inset-sm);overflow-wrap:anywhere;white-space:pre-wrap}
.br-diag{margin-top:14px;padding:12px 14px;border-radius:16px;box-shadow:var(--raise-sm)}
.br-toggle{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700}
.br-toggle input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.br-diag-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.88rem}
.br-diag-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;overflow-wrap:anywhere}
.br-diag-list b{color:var(--muted);font-weight:600}
.br-errs{margin-top:8px;font-size:.85rem}
.br-errs summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accent)}
.br-errs pre{margin:0;padding:10px;border-radius:10px;box-shadow:var(--inset-sm);white-space:pre-wrap;overflow-wrap:anywhere;max-height:140px;overflow:auto}

/* Thanks */
.br-thanks{display:grid;gap:8px;justify-items:center;text-align:center}
.br-ticket{font-size:1.15rem;margin:0}
.br-ticket strong{font-family:"Pixelify Sans",var(--sans);font-size:1.5rem;color:var(--accent)}

/* My bug reports */
.br-tickets{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.br-ticket-row{padding:14px 16px;border-radius:16px;box-shadow:var(--raise-sm);background:var(--bg);display:grid;gap:6px;min-width:0}
.br-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.br-ticket-top strong{font-family:"Pixelify Sans",var(--sans);font-size:1.1rem}
.br-t-kind{margin:0;font-weight:700}
.br-t-kind small{color:var(--muted);font-weight:400;margin-left:6px}
.br-t-text{margin:0;color:var(--ink);line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.br-note{margin:0;padding:8px 12px;border-radius:12px;box-shadow:var(--inset-sm);line-height:1.4;overflow-wrap:anywhere}
.br-note b,.br-talk b{margin-right:6px}
.br-talk{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.9rem;color:var(--muted)}
.br-reward{margin:0;color:var(--gold);font-weight:700}
.br-ticket-row .button{justify-self:start;min-height:46px}
.br-chip{flex:none;padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:700;box-shadow:var(--inset-sm);color:var(--ink);background:var(--bg);border:2px solid var(--line)}
.br-st-submitted{border-color:var(--blue)}
.br-st-progress{border-color:var(--violet)}
.br-st-solved{border-color:var(--accent);color:var(--accent)}
.br-st-needs{border-color:var(--gold)}
.br-st-reopened{border-color:var(--coral);color:var(--coral)}
.br-st-wontfix{border-color:var(--muted);color:var(--muted)}

/* Pick layer */
.br-pick{position:fixed;inset:0;z-index:2100;pointer-events:none}
.br-pick-cap{position:absolute;inset:0;pointer-events:auto;cursor:crosshair;background:color-mix(in srgb,var(--ink) 14%,transparent);touch-action:none;outline:0}
.br-hl{position:fixed;pointer-events:none;border:3px solid var(--coral);background:color-mix(in srgb,var(--coral) 16%,transparent);box-shadow:0 0 0 2px #fff,0 0 0 9999px color-mix(in srgb,var(--ink) 10%,transparent);border-radius:4px;transition:left .06s,top .06s,width .06s,height .06s}
.br-hl[hidden]{display:none}
.br-pick-bar{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:min(640px,calc(100vw - 24px));padding:10px 14px;background:var(--bg);color:var(--ink);border-radius:16px;box-shadow:var(--raise);pointer-events:auto}
.br-pick-bar[hidden]{display:none}
.br-pick-top{top:max(12px,env(safe-area-inset-top))}
.br-pick-bottom{bottom:max(14px,env(safe-area-inset-bottom))}
.br-pick-title{font-family:"Pixelify Sans",var(--sans);font-size:1.1rem}
.br-pick-hint{color:var(--muted);font-size:.88rem;flex:1 1 180px}
.br-pick-what{flex:1 1 140px;min-width:0;overflow-wrap:anywhere;font-weight:700}
.br-pick-bar .button{min-height:46px}
.br-pick :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.br-hl{transition:none}}
@media (max-width:600px){.br-diag-list li{grid-template-columns:90px minmax(0,1fr)}}
.br-pick-top{pointer-events:none}
.br-pick-top .button{pointer-events:auto}

/* Help items in the sidebar footer: always visible, same look as the other nav items. */
.sidebar-help{display:grid;gap:3px;width:100%;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.sidebar-help+.sidebar-bottom{margin-top:0}
html.sidebar-collapsed .sidebar-help{justify-items:center;width:64px}
@media(min-width:781px) and (max-width:1100px){.sidebar-help{margin-top:auto}}
@media(max-width:780px){.sidebar-help{display:none}}
html.sidebar-collapsed .sidebar .sidebar-help .nav-item{justify-content:center;width:44px;padding:10px}
html.sidebar-collapsed .sidebar .sidebar-help{display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
html.sidebar-collapsed .sidebar .sidebar-help{align-items:flex-start;padding:8px 0 0 10px;margin-left:0}
html.sidebar-collapsed .sidebar .sidebar-help .nav-item{margin:0}

/* On phones the help items live in the More sheet; the collapsed-sidebar rules above must not bring them back into the bottom bar. */
@media(max-width:780px){html .sidebar .sidebar-help,html.sidebar-collapsed .sidebar .sidebar-help{display:none}}