/* General */

:root {
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-display: "Public Sans", "Inter", "Segoe UI", sans-serif;
  --text-color: #18212b;
  --muted-text: #66717d;
  --rule-color: #a9b3bd;
}

body {
  max-width: 100%;
  color: var(--text-color);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p, li, dt, dd, th, td, label, input, select, textarea, button {
  text-wrap: pretty;
}

a {
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

h1, h2, h3, h4, h5, h6,
nav,
th,
.h2-with-controls,
a.btn {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

h1, h2, h3, h4, h5, h6 {
  color: #0f1720;
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  margin-top: 10px;
  margin-bottom: 0.75rem;
  font-size: clamp(2.25rem, 5vw, 3.6rem);
}

.home-title {
  font-size: 2.5rem;
}

h2 {
  margin-top: 2.75rem;
  padding-bottom: 0.35rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  border-bottom: 3px double var(--rule-color);
}

h3 {
  font-size: 1.3rem;
}

.timestamps { float: right; font-size: smaller; font-style: italic; }

.right { float: right; }

nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.nav-right { text-align: right; padding-left: 25px; }
nav a { white-space: nowrap; }

.single-login-user { color: #888; }

.index-map-explanation { color: #999; font-size: smaller; font-style: italic; }

.app-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-left: 0.45rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid #c7d2dd;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fbfd, #eef4f8);
  color: #45657f;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: baseline;
  box-shadow: 0 8px 20px rgba(24, 33, 43, 0.06);
}

.app-home-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-home-link-icon svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
}

.app-home-link-icon rect:first-child {
  fill: currentColor;
}

.app-home-link-icon rect:last-child,
.app-home-link-icon circle {
  fill: #f8fbfd;
}

.disclaimer { margin-top: 50px; font-size: smaller; color: #999; }
.disclaimer a, .disclaimer a:visited { color: #999; }

/* Layout */

.site-banner { background-color: #f90; color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; margin: -16px -16px 16px; }
.site-banner a { color: black; }
.site-banner a:visited { color: black; }

header { clear: both; margin: 25px 0; }
header.flex { display: flex; justify-content: space-between; }
header.flex .header-col-grow { flex-grow: 1; }
header.flex .header-col-grow * { margin: 0; }

.h2-with-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 24px;
  border-bottom: 3px double var(--rule-color);
  margin: 2.5rem 0 1rem;
}
.h2-with-controls h2 {
  border-bottom: none;
  margin: 0;
  justify-self: start;
}
.h2-with-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

tr { border-bottom: none; }

footer { margin-top: 50px; }
footer p { font-size: smaller; color: #999; }
footer a, footer a:visited { color: #999; }

.columns { display: flex; justify-content: space-between; gap: 20px; }
.columns.vertically-centered { align-items: center; }
.columns .column { flex: 1; flex-grow: 1; }
.columns .column-right { text-align: right; }

table { width: auto; }
table.full-width-table { width: 100%; }
th {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
td {
  font-weight: 500;
}

/* Net */

.net-breadcrumbs { margin-top: 25px; }
.club-logo { margin-top: 25px; max-height: 125px; }
.small-club-logo { max-height: 50px; }

span.Offline { color: #ccc; }

tr.currently-operating td { background-color: #fcf; }
tr.checked-out td, tr.checked-out td a { color: #999; }
td { white-space: nowrap; }
td.can-wrap { white-space: normal; min-width: 150px; }
tr.odd { background-color: #eee; }
tr.remarks { color: #777 }
td.avatar-cell { height: 64px; }

.blue-screen { background-color: #e8f4f8; }
.chat-message { padding: 5px; margin: 5px 0; }
.chat-odd { background-color: #d4e5ea; }
.chat-sender { }
.chat-timestamp { color: #888; }

.favorite-star { width: 15px; height: 15px; max-width: none; cursor: pointer; }
.favorite-star-big { width: 30px; height: 30px; cursor: pointer; }

#net-map { height: 500px; }

.logger-control, .logger-control .material-symbols-outlined { font-size: 1.0em; }

@media only screen and (max-height: 800px) {
  #net-map { height: 300px; }
}

/* Forms */

form.inline { display: inline; }
label.inline { display: inline; }

form.wide input[type="text"] { width: 800px; max-width: 100%; }
form.wide textarea { width: 800px; max-width: 100%; }
form.wide input[type="text"].inline { width: auto; max-width: auto; }

form label { display: block; margin-bottom: 20px; }
form label.sub { margin-top: -20px; }

form.log-form input { width: 100%; }
div.log-form-info { margin-top: 10px; }

input, select, textarea, button {
  font: inherit;
}

input, select, textarea {
  padding: 8px 10px;
  font-size: 1rem;
  margin: 0 3px 3px 0;
  border-radius: 8px;
}

/* Misc */

.clear { clear: both; }

.highlight { background-color: #ffc; }
em.highlight { font-style: normal; }

.discreet { color: #999; }

.error, .danger { color: red; }
.warning, .warning a { color: orange !important; }
.info-callout { background-color: #9cf; padding: 15px; border: 1px solid #39f; }
.error-callout { background-color: #fcc; padding: 15px; border: 1px solid red; }
.warning-callout { background-color: #fc9; padding: 15px; border: 1px solid orange; }

.notice { color: #39f; }

ul.no-bullets { list-style-type: none; padding: 0; margin: 0; }

.admin-only { background-color: #dedede; padding: 15px; margin: 25px 0; }

.linkish { text-decoration: underline; cursor: pointer; }
.linkish:hover { color: dodgerblue; }

a.btn { padding: 4px 8px; background-color: #eee; border: 1px solid #ccc; border-radius: 8px; text-decoration: none; color: #333; }

.dark-only { display: none; }

.active-ragchew-net { font-weight: bold; }
.closed-ragchew-net {}

/* Mobile */

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  .table-wrapper { overflow-x: auto; }
  #net-map { height: 300px; }
  .columns { display: block; }
  .columns.vertically-centered { align-items: normal; }
  .columns .column { flex: 0; flex-grow: 0; }
  .columns .column-right { text-align: left; }
  header.flex { flex-direction: column-reverse; }
  header.flex img { margin: 20px 0; }
  .h2-with-controls {
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
  }
  .no-wrap-on-mobile { white-space: nowrap; }
}
/* Message reactions */
.reaction-bar {
  position: absolute;
  top: -10px;
  right: 10px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 2px 5px;
  display: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}

.reaction-emoji {
  cursor: pointer;
  margin: 0 2px;
  font-size: 16px;
  user-select: none;
  padding: 2px;
  border-radius: 3px;
}

.reaction-emoji:hover {
  background-color: #f0f0f0;
}

.reaction-emoji.user-reacted {
  background-color: #333;
}

.reaction-emoji.user-reacted:hover {
  background-color: #555;
}

.reaction-display {
  margin-top: 5px;
}

.reaction-bubble {
  display: inline-block;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 2px 6px;
  margin: 0 2px 2px 0;
  font-size: 12px;
  cursor: help;
}
.autocomplete-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
}

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.autocomplete-item:hover {
  background-color: #f5f5f5;
}

.autocomplete-item:last-child {
  border-bottom: none;
}
label:has(.autocomplete-dropdown) {
  position: relative;
}