/* ReverseRef look: creamy baby green, sand, sage, warm ink. Change colours here only. */
:root {
  --rr-bg: #DDE6CF;      /* creamy baby green background */
  --rr-card: #FFFEF8;    /* creamy white cards */
  --rr-ink: #16201A;     /* text and dark buttons */
  --rr-soft: #3E4A42;    /* secondary text */
  --rr-muted: #56645B;   /* small print */
  --rr-line: #C7D3B6;    /* borders */
  --rr-track: #D3DCC4;   /* graph tracks */
  --rr-sand: #D9B98C;    /* main accent: buttons */
  --rr-bar: #C9A06A;     /* graph bars */
  --rr-link: #8A5A2B;    /* links and labels */
  --rr-green: #2F6B4A;   /* verified / positive */
}

body.rr-site { margin: 0; background: var(--rr-bg); color: var(--rr-ink); font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
body.rr-site a { color: var(--rr-link); }
body.rr-site a:hover { color: var(--rr-ink); }
.rr-shell { min-height: 100vh; display: flex; flex-direction: column; }
.rr-shell main { flex: 1; }
.rr-shell header { z-index: 50; }

/* Inner pages */
.rr-page { max-width: 880px; margin: 0 auto; padding: 56px 24px 96px; }
.rr-cartoon { display: block; margin-bottom: 8px; }
.rr-title { margin: 0 0 24px; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--rr-ink); }
.rr-card { background: var(--rr-card); border: 1px solid var(--rr-line); border-radius: 24px; padding: clamp(20px, 4vw, 40px); }
.rr-card > :first-child { margin-top: 0; }

/* Buttons and inputs */
.rr-search button, .rr-form button {
  background: var(--rr-ink); color: #FFFEF8; border: 0; border-radius: 999px; padding: 12px 22px;
  font: 600 15px Inter, sans-serif; cursor: pointer; min-height: 44px;
}
.rr-search button:hover, .rr-form button:hover { background: var(--rr-green); }
.rr-form input:not([type=checkbox]):not([type=radio]), .rr-form select, .rr-form textarea, .rr-search input {
  width: 100%; max-width: 520px; box-sizing: border-box; padding: 12px 16px; background: #FFFFFF;
  border: 1px solid var(--rr-line); border-radius: 14px; font: 16px Inter, sans-serif; color: var(--rr-ink);
}
.rr-form textarea { max-width: 100%; }
.rr-form input:focus, .rr-form select:focus, .rr-form textarea:focus, .rr-search input:focus { outline: 2px solid var(--rr-bar); outline-offset: 1px; }
.rr-form label { font-weight: 500; }
.rr-share h3 { margin-top: 36px; font-family: 'Inter Tight', sans-serif; font-size: 22px; color: var(--rr-ink); }

/* Directory */
.rr-search { display: flex; gap: 8px; margin: 0 0 24px; padding: 6px; background: #FFFFFF; border: 1px solid var(--rr-line); border-radius: 999px; }
.rr-search input { border: 0; border-radius: 999px; max-width: none; flex: 1; }
.rr-list { list-style: none; margin: 0; padding: 0; }
.rr-list li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 4px; border-bottom: 1px solid var(--rr-line); }
.rr-list li:last-child { border-bottom: 0; }
.rr-list a { color: var(--rr-ink); font-weight: 600; text-decoration: none; }
.rr-list a:hover { color: var(--rr-link); }
.rr-list span { color: var(--rr-muted); font-size: .92em; }
.rr-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.rr-pages a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rr-line); border-radius: 999px; text-decoration: none; color: var(--rr-ink); }
.rr-pages a[aria-current] { background: var(--rr-ink); color: #FFFEF8; }

/* Profile */
.rr-meta { color: var(--rr-muted); margin-top: 0; }
.rr-empty { background: var(--rr-bg); border-radius: 18px; padding: 20px 24px; }
.rr-empty strong { color: var(--rr-green); }

/* Notices */
.rr-note { background: #F6EBD9; border-radius: 16px; padding: 16px 20px; }
.rr-notice { padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; background: #E3EEDD; color: var(--rr-ink); }
.rr-notice.rr-error { background: #F6E3CF; }
.rr-hp { position: absolute; left: -9999px; }
.rr-small { font-size: .9em; color: var(--rr-muted); }
.rr-row { display: flex; gap: 12px; flex-wrap: wrap; }
.rr-row label { flex: 1 1 140px; }

/* Experience questions */
.rr-questions { width: 100%; border-collapse: collapse; }
.rr-questions th, .rr-questions td { padding: 12px 8px; border-bottom: 1px solid var(--rr-line); text-align: center; }
.rr-questions th { font-size: .85em; color: var(--rr-muted); font-weight: 500; }
.rr-questions th:first-child, .rr-questions td:first-child { text-align: left; }
.rr-questions tr[hidden] { display: none; }
.rr-questions input[type=radio] { width: 20px; height: 20px; accent-color: var(--rr-green); }
@media (max-width: 600px) { .rr-questions td:first-child { font-size: .92em; } .rr-questions th, .rr-questions td { padding: 10px 4px; } }

/* Profile: background + public record */
.rr-h2 { margin: 32px 0 12px; font-family: 'Inter Tight', sans-serif; font-size: 22px; color: var(--rr-ink); }
.rr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 0; }
.rr-facts div { background: var(--rr-bg); border-radius: 14px; padding: 12px 16px; }
.rr-facts dt { font-size: .82em; color: var(--rr-muted); }
.rr-facts dd { margin: 2px 0 0; font-weight: 500; }
.rr-record { margin: 0; padding: 0; list-style: none; }
.rr-record li { padding: 14px 0; border-top: 1px solid var(--rr-line); }
.rr-date { display: inline-block; margin-right: 6px; font-family: 'JetBrains Mono', monospace; font-size: .85em; color: var(--rr-link); }

/* Phones: compact menu that scrolls away, bigger footer tap targets */
.rr-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.rr-card h2 { font-family: 'Inter Tight', sans-serif; font-size: 22px; margin: 28px 0 8px; }
.rr-card h2:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .rr-shell > header { position: static !important; padding: 12px 16px 0 !important; }
  .rr-shell > header nav { gap: 10px !important; }
  .rr-shell > header nav > div { order: 3; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .rr-shell > header nav > div a { white-space: nowrap; padding: 10px 14px !important; }
  .rr-shell > header nav > a:last-child { padding: 10px 16px !important; font-size: 13px !important; }
  .rr-page { padding-top: 32px; }
}

/* Verified graphs */
.rr-bars { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
.rr-bar { display: grid; grid-template-columns: minmax(160px, 260px) 1fr 64px; align-items: center; gap: 12px; font-size: .95em; }
.rr-track { height: 10px; background: var(--rr-track); border-radius: 999px; overflow: hidden; }
.rr-track span { display: block; height: 100%; background: var(--rr-bar); border-radius: 999px; }
.rr-n { font-family: 'JetBrains Mono', monospace; text-align: right; font-size: .9em; }
.rr-gtabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--rr-bg); border-radius: 999px; width: fit-content; max-width: 100%; margin-bottom: 8px; }
.rr-gtabs button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--rr-muted); font: 500 14px Inter, sans-serif; cursor: pointer; }
.rr-gtabs button[aria-pressed=true] { background: var(--rr-card); color: var(--rr-ink); }
.rr-gtabs button span { font-family: 'JetBrains Mono', monospace; font-size: .85em; opacity: .7; }
.rr-pay { margin: 4px 0 0; padding: 12px 16px; background: var(--rr-bg); border-radius: 14px; }
@media (max-width: 560px) { .rr-bar { grid-template-columns: 1fr 64px; } .rr-bar .rr-track { grid-column: 1 / -1; grid-row: 2; } }

/* Community */
.rr-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.rr-area { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--rr-line); border-radius: 18px; background: var(--rr-bg); text-decoration: none; color: var(--rr-ink) !important; }
.rr-area:hover { border-color: var(--rr-bar); }
.rr-area span { color: var(--rr-soft); font-size: .95em; }
.rr-area em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .85em; color: var(--rr-link); }
.rr-chat { display: flex; flex-direction: column; border: 1px solid var(--rr-line); border-radius: 20px; overflow: hidden; background: #F4F1E6; }
.rr-msgs { height: min(60vh, 560px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rr-msg { max-width: 78%; align-self: flex-start; padding: 10px 14px 8px; background: var(--rr-card); border: 1px solid var(--rr-line); border-radius: 18px 18px 18px 4px; position: relative; }
.rr-msg.rr-mine { align-self: flex-end; background: #DCEBD3; border-color: #C3D9B5; border-radius: 18px 18px 4px 18px; }
.rr-msg-by { display: block; font: 500 12px 'JetBrains Mono', monospace; color: var(--rr-link); margin-bottom: 2px; }
.rr-mine .rr-msg-by { color: var(--rr-green); }
.rr-msg-text { white-space: normal; word-wrap: break-word; }
.rr-msg .rr-report { float: none; display: inline-block; margin-top: 4px; font-size: 12px; }
.rr-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rr-line); background: var(--rr-card); }
.rr-chat-form textarea { flex: 1; resize: none; padding: 10px 14px; border: 1px solid var(--rr-line); border-radius: 18px; font: 16px Inter, sans-serif; background: #FFFFFF; }
.rr-chat-form button { align-self: flex-end; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--rr-ink); color: #FFFEF8; font: 600 15px Inter, sans-serif; cursor: pointer; }
.rr-chat-form button:hover { background: var(--rr-green); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) { .rr-msg { max-width: 90%; } .rr-msgs { height: 62vh; } }
.rr-poll { padding: 20px; margin: 12px 0; border: 1px solid var(--rr-line); border-radius: 18px; }
.rr-poll h3 { margin: 0 0 8px; font-family: 'Inter Tight', sans-serif; }
.rr-rules { padding-left: 20px; }
.rr-rules li { margin-bottom: 8px; }
.rr-area.rr-soon { background: transparent; border-style: dashed; cursor: default; }
.rr-area.rr-soon em { color: var(--rr-green); }

/* EN | DE switch */
.rr-lang { display: inline-flex; gap: 2px; padding: 4px; margin-left: auto; background: rgba(255,254,248,0.8); border: 1px solid var(--rr-line); border-radius: 999px; }
.rr-lang a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font: 600 13px Inter, sans-serif; color: var(--rr-muted) !important; text-decoration: none; }
.rr-lang a[aria-current] { background: var(--rr-ink); color: #FFFEF8 !important; }