/* The bug report and suggestion board (GTA-201). Navy, white and the icon gold, like the rest of the site: lines and
   space instead of boxes, Satoshi throughout. */
.rp { padding-top: 40px; padding-bottom: 112px; }
.rp-flow, .rp-follow > * { max-width: 760px; }
.rp-h { font: 900 clamp(27px, 3.2vw, 36px)/1.1 var(--display); letter-spacing: -0.03em; color: #fff; margin: 0 0 18px; outline: none; text-wrap: balance; }
.rp-lead { color: var(--muted); margin: -6px 0 22px; max-width: 40em; text-wrap: pretty; }
.rp-note { color: var(--muted); }
.rp-hint { color: var(--faint); font-size: 14.5px; margin: 10px 0 0; }
.rp-label { display: block; font: 700 15px/1.3 var(--sans); color: #fff; margin: 22px 0 8px; }
.rp-label span, .rp-label em, .rp-grid em { font-weight: 500; color: var(--faint); font-style: normal; }

/* Steps: a line with the gold mark under the current step, like the home page's install steps */
.rp-steps { list-style: none; display: flex; gap: 0; margin: 0 0 34px; padding: 0; counter-reset: s; }
.rp-steps li { flex: 1; position: relative; padding-top: 12px; border-top: 1px solid var(--line-strong); color: var(--faint); font: 700 14px/1.3 var(--sans); counter-increment: s; }
.rp-steps li::before { content: counter(s) '  '; color: inherit; white-space: pre; }
.rp-steps li.on { color: #fff; }
.rp-steps li.on::after { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--gold); }

/* Inputs */
.rp textarea, .rp input:not([type="radio"]):not([type="file"]) { width: 100%; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(6, 19, 53, 0.9); color: #fff; font: 500 17px/1.5 var(--sans); padding: 14px 16px; transition: border-color 0.15s; }
.rp textarea { resize: vertical; min-height: 96px; }
.rp textarea:focus, .rp input:focus { outline: none; border-color: var(--gold); }
.rp textarea::placeholder, .rp input::placeholder { color: var(--faint); }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 14px; }
.rp-grid label span { display: block; font: 500 14px/1.3 var(--sans); color: var(--muted); margin-bottom: 6px; }
.rp-grid input { padding: 11px 14px !important; font-size: 16px !important; }
.rp-device { border: 0; padding: 0; margin: 0; min-width: 0; }
.rp-device legend { padding: 0; }
@media (max-width: 560px) { .rp-grid { grid-template-columns: 1fr; } }

/* Two-way choices (bug or idea, iPhone or Mac): outlined, gold when picked */
.rp-kind { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.rp-kind label { cursor: pointer; }
.rp-kind input { position: absolute; opacity: 0; pointer-events: none; }
.rp-kind span { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--line-strong); color: var(--muted); font: 700 16px/1 var(--sans); transition: border-color 0.15s, color 0.15s; }
.rp-kind span .ic { width: 18px; height: 18px; }
.rp-kind label:hover span { color: #fff; }
.rp-kind input:checked + span { border-color: var(--gold); color: #fff; }
.rp-kind input:checked + span .ic { color: var(--gold); }
.rp-kind input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.rp-platform { margin-top: 2px; }

.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.rp-status { color: var(--gold); font-weight: 500; }
.rp .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.rp-from { color: var(--gold); font-size: 15px; margin: 10px 0 0; }

/* Lists: rows on hairlines, no cards */
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.rp-row:last-child { border-bottom: 1px solid var(--line); }
.rp-match { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rp-row-title { font: 700 18px/1.35 var(--display); letter-spacing: -0.01em; color: #fff; margin: 0; text-wrap: pretty; }
.rp-row-summary { color: var(--muted); font-size: 16px; margin: 4px 0 0; text-wrap: pretty; }
.rp-likely { font: 700 13px/1 var(--sans); color: var(--gold); margin: 0 0 8px; }
.rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font: 500 14px/1.3 var(--sans); color: var(--faint); }
.rp-plat { display: inline-flex; align-items: center; gap: 5px; }
.rp-plat .ic { width: 15px; height: 15px; }
.rp-state { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--muted); }
.rp-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rp-state-planned, .rp-state-fixed_next, .rp-state-working { color: var(--gold); }
.rp-state-fixed, .rp-state-closed { color: #fff; }
.rp-state-x { color: var(--text); }
@media (max-width: 560px) { .rp-match { grid-template-columns: 1fr; } .rp-match .btn { justify-self: start; } }

/* Votes */
.rp-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rp-v { display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--faint); cursor: pointer; transition: color 0.15s, background 0.15s; }
.rp-v .ic { width: 26px; height: 26px; stroke-width: 1.75; }
.rp-v:hover { color: #fff; background: var(--surface-hi); }
.rp-v-up[aria-pressed="true"] { color: var(--gold); }
.rp-v-up[aria-pressed="true"] .ic { fill: currentColor; }
.rp-v-down[aria-pressed="true"] { color: #fff; }
.rp-v-down[aria-pressed="true"] .ic { fill: currentColor; }
.rp-v-n { font: 900 17px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.rp-vote-done::before { content: ''; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--line-strong); }

/* The board */
.rp-board { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line-strong); position: relative; }
.rp-board::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--gold); }
.rp-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 24px; }
.rp-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 11px; padding: 3px; }
.rp-seg button { border: 0; background: transparent; color: var(--muted); font: 500 14.5px/1 var(--sans); padding: 9px 12px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.rp-seg button:hover { color: #fff; }
.rp-seg button[aria-pressed="true"] { background: var(--surface-hi); color: #fff; font-weight: 700; }
.rp-group { margin-top: 44px; }
.rp-board-head + .rp-lead { margin-top: 16px; }
.rp-group-title { font: 900 24px/1.15 var(--display); letter-spacing: -0.02em; color: #fff; margin: 0; }
.rp-group-lead { color: var(--faint); font-size: 15px; margin: 6px 0 14px; }
.rp-kindtag { color: var(--faint); }
.rp-board .rp-row-body { max-width: 760px; }
.rp-list-compact .rp-row { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
.rp-list-compact .rp-row-title { font-size: 16.5px; }
.rp-list-compact .rp-row-summary { font-size: 15px; }
.rp-more { margin-top: 6px; }
.rp-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gold); font: 700 15.5px/1 var(--sans); }
.rp-more > summary::-webkit-details-marker { display: none; }
.rp-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.rp-more[open] > summary::after { transform: translateY(2px) rotate(225deg); }

/* Done, private link, my reports */
.rp-linkrow { display: flex; gap: 10px; }
.rp-linkrow input { font-family: var(--mono) !important; font-size: 14.5px !important; }
.rp-linkrow .btn { flex: none; }
.rp-uploads, .rp-chosen { list-style: none; padding: 0; margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.rp-chosen li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.rp-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; }
.rp-x:hover { color: #fff; background: var(--surface-hi); }
.rp-x .ic { width: 16px; height: 16px; }
.rp-files { margin-top: 26px; }
.rp-file-btn { position: relative; overflow: hidden; }
.rp-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.rp-file-btn:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.rp-mine { margin-top: 40px; }
.rp-mine ul { list-style: none; margin: 0; padding: 0; }
.rp-mine li { padding: 6px 0; }
.rp-mine a { color: var(--muted); }
.rp-mine a:hover { color: #fff; }

.rp-privacy { margin-top: 26px; color: var(--muted); font-size: 15px; }
.rp-privacy summary { cursor: pointer; color: var(--gold); font-weight: 500; }
.rp-privacy p { margin: 10px 0 0; max-width: 44em; }

.rp-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; max-width: calc(100vw - 32px); background: var(--navy); color: #fff; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px; font-size: 15px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7); }
.rp-ts { position: fixed; left: 0; bottom: 0; width: 0; height: 0; overflow: hidden; }

/* Follow page: four stops on a line */
.rp-track { list-style: none; display: flex; margin: 0 0 30px; padding: 0; }
.rp-track li { flex: 1; position: relative; padding-top: 22px; color: var(--faint); font: 700 14px/1.2 var(--sans); }
.rp-track li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.rp-track li span { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px var(--line-strong); z-index: 1; }
.rp-track li.done { color: #fff; }
.rp-track li.done:not(.now)::before { background: var(--gold); }
.rp-track li.done span { background: var(--gold); box-shadow: none; }
.rp-track li.now span { box-shadow: 0 0 0 5px rgba(255, 196, 58, 0.22); }
.rp-track li:last-child::before { right: auto; width: 14px; }
.rp-item { margin-top: 26px; }
.rp-item-title { font: 700 19px/1.35 var(--display); color: #fff; margin: 0; }
.rp-item-summary, .rp-yours { color: var(--muted); margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }