/* The Reece Review skin for ChatREECE. Loaded after style.css; it only swaps
   ChatREECE's variables, type and corners for the site's, so ChatREECE's
   layout code stays untouched. Light only, like the rest of the site. */
:root {
  --bg: #ffffff;
  --bg2: #f0f0f0;
  --text: #222222;
  --muted: #777777;
  --line: #e0e0e0;
  --accent: #222222;          /* buttons, selected tab, unread count */
  --link: #ed713a;            /* links, as on the site */
  --mine: #eaf4fa;            /* your messages: light chart blue */
  --theirs: #f0f0f0;          /* Reece's replies: chart-panel gray */
  --bad: #c0392b;
  --ok: #6d904f;
  --font: 'Libre Franklin', 'Franklin Gothic Book', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #ffffff; --bg2: #f0f0f0; --text: #222222; --muted: #777777; --line: #e0e0e0;
    --accent: #222222; --mine: #eaf4fa; --theirs: #f0f0f0; --bad: #c0392b; --ok: #6d904f;
  }
}

body { font-weight: 400; }
a, .btn-plain { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* square corners everywhere, like the site */
.btn, .field, .composer textarea, .composer button, .msg .body, .count, .banner, .banner .btn { border-radius: 0 !important; }

.btn-main, .composer button { background: #222; border-color: #222; font-weight: 600; }
.btn-main:hover, .composer button:hover:not([disabled]) { background: #000; }
.field:focus, .composer textarea:focus { outline: 1px solid #222; }
.tab[aria-selected="true"] { border-bottom-color: #222; }

/* message text reads like the site's body copy */
.msg .body { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.5; }
.msg .from { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }

/* headings */
.page h1, .bar h1 { font-weight: 400; }
.page h1 { font-size: 28px; }
.page .sub { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; }

/* site masthead on the sign-in page */
.site-mast { border-bottom: 1px solid var(--line); }
.site-mast .in { max-width: 1000px; margin: 0 auto; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-mast .logo { font-size: 24px; color: #222; text-decoration: none; }
.site-mast nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-mast nav a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.site-mast nav a:hover { color: #222; text-decoration: none; }

/* small "back to the site" link in the chat/desk header bar */
.bar .home { font-size: 13px; white-space: nowrap; padding: 0 6px; }