/* REPORT A PROBLEM (report/report.js): the window's own layout only; its header, buttons, chips, rows, and fields are
   the shared ones (nav/ui.css) */
.rp { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.45); opacity: 0; transition: opacity 0.2s ease; color: var(--ink); font-family: var(--sans); }
.rp.open { opacity: 1; }
.rp[hidden] { display: none; }
html.rp-open, html.rp-open body { overflow: hidden; }
.rp svg { width: 18px; height: 18px; flex: none; }
.rp-box { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(760px, 100%); overflow: hidden; border-radius: 24px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 30px 80px -24px rgba(20, 16, 12, 0.5); transform: translateY(10px); transition: transform 0.22s ease; }
.rp.open .rp-box { transform: none; }
.rp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 700px), (max-height: 500px) { .rp { padding: 0; } .rp-box { width: 100%; height: 100%; max-height: none; border-radius: 0; border: none; } }
@media (max-height: 500px) { .rp-body { padding-left: max(18px, calc((100% - 620px) / 2)); padding-right: max(18px, calc((100% - 620px) / 2)); } .rp-body .ui-label { margin-top: 12px; } }
.rp-lead { margin: 2px 0 14px; font: 15px/1.55 var(--sans); color: var(--ink); }
.rp-body .ui-label { margin: 16px 0 8px; }
.rp-body .ui-label:first-child { margin-top: 2px; }
.rp-body .ui-label small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.rp-body .ui-row { cursor: pointer; text-align: left; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chips .ui-filter { max-width: 100%; min-height: 38px; text-align: left; }
.rp-in { display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; margin: 0; font: 16px/1.45 var(--sans); }
.rp-chips + .rp-in { margin-top: 10px; }
textarea.rp-in { resize: vertical; min-height: 84px; }
.rp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rp-sent { margin-top: 18px; padding: 10px 14px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, var(--bg)); }
.rp-sent .ui-label { margin: 2px 0 4px; }
.rp-sent p:not(.ui-label) { margin: 2px 0 0; font: 13px/1.45 var(--sans); color: var(--muted); }
.rp-err { margin: 12px 0 0; font: 600 14px/1.45 var(--sans); color: #B3402F; }
.rp-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.rp-done { padding: 18px 4px 4px; text-align: center; }
.rp-done-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 18%, var(--bg-raised)); color: var(--gold); }
.rp-done-ic svg { width: 26px; height: 26px; }
.rp-ref { margin: 4px 0; font: 14px var(--sans); color: var(--muted); }
.rp-ref b { color: var(--ink); letter-spacing: 0.06em; }
.rp-note { margin: 4px 0 0; font: 13.5px/1.5 var(--sans); color: var(--muted); }
.rp-done .rp-foot { justify-content: center; }

/* ---- Your reports (report.js): each one sent, and where it is: a little tracker, Sent · Read · Being fixed · Fixed, the
   steps done in gold, the one it's at ringed; Fixed in green; Closed and Saved for later quiet */
.rp-minefold { margin-top: 16px; }
.rp-mine { list-style: none; margin: 0; padding: 0; }
.rp-r { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.rp-r-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rp-r-top b { font: 700 14.5px/1.35 var(--sans); }
.rp-r > small { font: 12px/1.4 var(--sans); color: var(--muted); }
.rp-st { flex: none; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule); font: 800 11px/1.5 var(--sans); color: var(--muted); white-space: nowrap; }
.rp-r.is-read .rp-st, .rp-r.is-planned .rp-st, .rp-r.is-progress .rp-st { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); color: var(--ink); }
.rp-r.is-fixed .rp-st { border-color: #3DAA5C; background: color-mix(in srgb, #3DAA5C 14%, var(--bg-raised)); color: var(--ink); }
.rp-track { display: flex; margin: 8px 0 2px; padding: 0; list-style: none; counter-reset: none; }
.rp-track li { position: relative; flex: 1; padding-top: 16px; font: 700 10.5px/1.3 var(--sans); color: var(--muted); text-align: center; }
.rp-track li::before { content: ''; position: absolute; top: 2px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg-raised); border: 2px solid color-mix(in srgb, var(--muted) 45%, var(--rule)); box-sizing: border-box; z-index: 1; }
.rp-track li + li::after { content: ''; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: color-mix(in srgb, var(--muted) 30%, var(--rule)); }
.rp-track li.is-done::before, .rp-track li.is-now::before { background: var(--gold); border-color: var(--gold); }
.rp-track li.is-done + li::after, .rp-track li.is-done + li.is-now::after { background: var(--gold); }
.rp-track li.is-now { color: var(--ink); }
.rp-track li.is-now::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.rp-r.is-fixed .rp-track li::before, .rp-r.is-fixed .rp-track li + li::after { background: #3DAA5C; border-color: #3DAA5C; }
.rp-note { color: var(--ink) !important; }
.rp-note span { color: var(--muted); }
/* (what we told them about it, in our own words: set on the board) */
.rp-reply { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--gold) 8%, var(--bg)); font: 13.5px/1.45 var(--sans); color: var(--ink); white-space: pre-line; }
.rp-reply b { display: block; margin-bottom: 2px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
/* (a screenshot asked for: what we'd like, and the way to send it) */
.rp-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; padding: 10px 12px; border: 1.5px dashed color-mix(in srgb, var(--gold) 60%, var(--rule)); border-radius: 12px; background: color-mix(in srgb, var(--gold) 6%, var(--bg-raised)); }
.rp-ask b { font: 800 13.5px var(--sans); }
.rp-ask small { font: 12.5px/1.45 var(--sans); color: var(--muted); }
.rp-ask .ui-btn { margin-top: 4px; min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.rp-ask-msg { margin: 2px 0 0; font: 600 13px var(--sans); color: #3DAA5C; }
.rp-ask-msg.is-bad { color: #B3402F; }
.rp-ask-msg[hidden] { display: none; }
/* (limited diagnostic info: a switch, and what it sends, shown while it's on) */
.rp-diag { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.rp-diag span { display: flex; flex-direction: column; gap: 2px; }
.rp-diag b { font: 700 14.5px var(--sans); }
.rp-diag small { font: 12.5px var(--sans); color: var(--muted); }
.rp-diag + .rp-sent { margin-top: 8px; }
.rp-sent dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 4px 0 0; }
.rp-sent dl > div { display: contents; }
.rp-sent dt { font: 700 12px/1.45 var(--sans); color: var(--muted); }
.rp-sent dd { margin: 0; font: 13px/1.45 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.rp-diag-off { margin: 8px 2px 0; font: 13px/1.45 var(--sans); color: var(--muted); }

/* ---- the flag beside each app's Close (report.js): small, quiet, round like the headers' other buttons; not gold, since
   reporting a problem isn't the thing to do there */
.rp-flag { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 6px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--muted); cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.rp-flag svg { width: 16px; height: 16px; }
.rp-flag:hover, .rp-flag:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--rule)); }
.rp-flag:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rp-flag[hidden] { display: none; }
.rp-flag.is-site { margin: 0; } /* (the header's: its gap spaces it) */
.rp-reply b span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* (their own words back to us, and the box to write them) */
.rp-reply.is-you { margin-left: 24px; border-left-color: #3B82C4; background: color-mix(in srgb, #3B82C4 7%, var(--bg)); }
.rp-reply.is-you b { color: #3B82C4; }
.rp-write { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.rp-write textarea { flex: 1 1 200px; min-height: 44px; padding: 9px 12px; font: 14px/1.4 var(--sans); resize: vertical; }
.rp-write .ui-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.rp-write .rp-ask-msg { flex-basis: 100%; }
.rp-foot .rp-new { min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 700; } /* (Your reports' way to a new one: small, the reports are what's there) */
/* (new from us: a count on the flags, and "New" on the note) */
.rp-flag { position: relative; }
.rp-flag-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--gold); color: var(--on-gold, #fff); font: 800 10.5px/17px var(--sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.rp-new { margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--on-gold, #fff); font: 800 9.5px/1.6 var(--sans); font-style: normal; letter-spacing: 0.06em; }
/* (writing back, with screenshots: the button to add them, and those chosen, small, each with an ×) */
.rp-write-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-basis: 100%; }
.rp-addshot { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--gold) 60%, var(--rule)); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.rp-addshot small { font-weight: 600; color: var(--muted); }
.rp-addshot:disabled { opacity: 0.45; cursor: default; }
.rp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.rp-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-raised); }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: rgba(20, 16, 12, 0.7); color: #fff; font: 700 14px/22px var(--sans); cursor: pointer; }
.rp-shots { display: block; margin-top: 4px; font: 600 12px var(--sans); color: var(--muted); }
.rp-write textarea { flex-basis: 100%; }

/* (their reports, in two: Open, each a card of its own; Closed, folded with how many) */
.rp-groups { display: flex; flex-direction: column; gap: 14px; }
.rp-minefold .rp-groups { padding: 4px 12px 12px; }
.rp-grp > .ui-label { margin: 0 2px 8px; }
.rp-grp .ui-label small { margin-left: 4px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.rp-cards { display: flex; flex-direction: column; gap: 10px; }
.rp-cards > .rp-r { border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.rp-minefold .rp-cards > .rp-r { background: var(--bg); }
/* (each report a card that folds: its name, where it is, and when, as its summary) */
.rp-card > .rp-sum { display: flex; flex-direction: column; gap: 4px; list-style: none; cursor: pointer; padding-right: 22px; position: relative; -webkit-tap-highlight-color: transparent; }
.rp-card > .rp-sum::-webkit-details-marker { display: none; }
.rp-card > .rp-sum::after { content: ''; position: absolute; right: 2px; top: 6px; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rp-card[open] > .rp-sum::after { top: 9px; transform: rotate(-135deg); }
.rp-card > .rp-sum > small { font: 12px/1.4 var(--sans); color: var(--muted); }
.rp-card > .rp-sum > small.rp-where { display: block; margin-top: 2px; } /* (where it was on the site, on a line of its own) */
.rp-card > .rp-sum > small.rp-where b { color: var(--ink); font-weight: 700; }
.rp-card-in { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.rp-closed-grp .rp-card:not([open]) { opacity: 0.8; }
/* (the Closed section: folded to start, its name the way to open it) */
.rp-closed-grp > summary { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; list-style: none; cursor: pointer; }
.rp-closed-grp > summary::-webkit-details-marker { display: none; }
.rp-closed-grp > summary::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.rp-closed-grp[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.rp-closed-grp:not([open]) > summary { margin-bottom: 0; }

/* (held, for those who may critique: a bar fills under it, and critique mode turns on or off (report.js, report:critique);
   while it's on, a red dot on each flag, critique mode's own color) */
.rp-flag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* (the bar of a hold, the flag's and the owner's on Me (account.js): a word on what it'll do, and a gold bar filling, two
   seconds (--hold-ms, the hold's own); two-fifths down the screen, in the middle, clear of the finger and the hand, where a ring round it was hidden) */
.rp-holdbar { position: fixed; z-index: 2147483560; left: 50%; width: min(280px, 72vw); box-sizing: border-box; padding: 9px 12px 11px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); transform: translateX(-50%); pointer-events: none; }
.rp-holdbar[hidden] { display: none; }
.rp-holdbar small { display: block; margin-bottom: 7px; font: 700 13px/1.25 var(--sans); color: var(--ink); text-align: center; }
.rp-holdbar i { position: relative; display: block; height: 7px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--gold) 22%, transparent); }
.rp-holdbar i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px; background: var(--gold); }
.rp-holdbar.is-going i::after { animation: rp-barfill var(--hold-ms, 2s) linear forwards; }
@keyframes rp-barfill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .rp-holdbar.is-going i::after { animation-timing-function: steps(4); } }
.rp-flag.is-crit::before { content: ''; position: absolute; top: -2px; left: -2px; width: 10px; height: 10px; border: 2px solid var(--bg-raised); border-radius: 50%; background: #E4574E; pointer-events: none; }
.rp-holdsay { position: fixed; left: 50%; bottom: calc(var(--bnav-h, 0px) + 24px + env(safe-area-inset-bottom)); z-index: 2147483530; transform: translateX(-50%); }
.rp-holdsay[hidden] { display: none; }