/* Shared look for readysetnew.com pages. Colours come from theme/rsn-theme.css ("Midnight"). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 var(--rsn-font); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rsn-accent); outline-offset: 2px; }
.btn { background: transparent; border: 1px solid var(--rsn-border); border-radius: var(--rsn-radius); color: var(--rsn-text); padding: 8px 14px; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--rsn-muted); }
.btn.go { background: var(--rsn-green); border-color: var(--rsn-green); color: #031; font-weight: 600; }
.btn.go:hover { background: var(--rsn-green-edge); border-color: var(--rsn-green-edge); }
.muted { color: var(--rsn-muted); }

/* Feedback panel */
dialog.fb { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--rsn-surface); color: var(--rsn-text); border: 1px solid var(--rsn-border); border-radius: 12px; padding: 20px; }
dialog.fb::backdrop { background: rgba(0, 0, 0, .66); }
.fb form { display: grid; gap: 12px; }
.fb h2 { margin: 0; font-size: 1.15rem; }
.fb-kind { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-kind label { flex: 1 1 140px; }
.fb-kind input { position: absolute; opacity: 0; }
.fb-kind span { display: block; text-align: center; padding: 10px; border: 1px solid var(--rsn-border); border-radius: var(--rsn-radius); cursor: pointer; }
.fb-kind input:checked + span { background: var(--rsn-selected); color: var(--rsn-accent); border-color: var(--rsn-accent); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--rsn-accent); }
.fb-row { display: flex; gap: 10px; align-items: center; }
.fb select, .fb textarea { background: var(--rsn-bg); border: 1px solid var(--rsn-border); border-radius: var(--rsn-radius); padding: 10px; width: 100%; }
.fb select { width: auto; flex: 1; min-height: 44px; }
.fb textarea { resize: vertical; min-height: 120px; }
.fb-pics { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-pics:empty { display: none; }
.fb-pic { position: relative; width: 72px; height: 72px; padding: 0; border: 1px solid var(--rsn-border); border-radius: 6px; overflow: hidden; background: var(--rsn-bg); cursor: pointer; }
.fb-pic img { width: 100%; height: 100%; object-fit: cover; }
.fb-pic span { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.75); line-height: 22px; }
.fb-add { justify-self: start; background: none; border: 1px dashed var(--rsn-border); border-radius: var(--rsn-radius); padding: 8px 12px; min-height: 44px; color: var(--rsn-muted); cursor: pointer; }
.fb-consent { margin: 0; font-size: .85rem; color: var(--rsn-muted); }
.fb-say { margin: 0; min-height: 1.5em; color: var(--rsn-green); }
.fb-say:empty { display: none; }
.fb-say.bad { color: #ff8a80; }
.fb-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.fb-buttons button { min-height: 44px; padding: 8px 18px; border-radius: var(--rsn-radius); border: 1px solid var(--rsn-border); background: none; cursor: pointer; }
.fb-send { background: var(--rsn-green) !important; border-color: var(--rsn-green) !important; color: #031 !important; font-weight: 600; }
.fb-send:disabled { opacity: .5; cursor: default; }
/* the blue "Updated" banner (rsn-site.js RSN.updates): one line, top right, leaves by itself, click to put it away */
#rsn-update { position: fixed; z-index: 70; top: calc(16px + env(safe-area-inset-top, 0px)); right: 20px; max-width: min(340px, calc(100vw - 40px)); background: #0066cc; color: #fff; padding: 9px 13px; border-radius: 6px; cursor: pointer; font: 13px/1.4 var(--rsn-mono); box-shadow: 0 4px 16px rgba(0,0,0,.4);
               transform: translateX(calc(100% + 28px)); opacity: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
#rsn-update.in { transform: none; opacity: 1; }   /* slides in from the right, and back out when it leaves */
.rsn-swapped { animation: rsn-swapped .5s ease; }   /* a part that just changed under you settles in softly */
@keyframes rsn-swapped { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #rsn-update { transform: none; } .rsn-swapped { animation: none; } }
#rsn-update[hidden] { display: none; }
#rsn-update .uf-title { font-weight: 700; margin-bottom: 2px; }
.link { background: none; border: 0; padding: 0; color: var(--rsn-muted); font: inherit; text-decoration: underline; cursor: pointer; }
.link:hover { color: var(--rsn-text); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }