/* Shared base styles of the research server.
 *
 * Needs tokens.css loaded first. Rules of this file
 *   - colors only through the variables of tokens.css
 *   - logical properties only (inline-start, inline-end), so that
 *     right-to-left languages work without a second stylesheet
 *
 * Part 1 holds general elements. Part 2 holds the pages drawn by the portal.
 * The hex grid has its own files in components/.
 */

/* ------------------------------------------------------------------ *
 * Part 1. General elements
 * ------------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}

main { max-width: 820px; margin: 0 auto; padding: 1rem 2rem 4rem; }

h1 { font-size: 2rem; margin: .3rem 0 .6rem; }

.lead { color: var(--muted); line-height: 1.5; }

button, .button {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 6px;
  padding: .5rem .9rem;
  cursor: pointer;
  text-decoration: none;
}

.badge {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .55rem;
  color: var(--muted);
  margin-inline-end: .3rem;
}

.error { color: var(--bad); font-size: .9rem; }

/* ------------------------------------------------------------------ *
 * Part 2. Pages drawn by the portal
 * ------------------------------------------------------------------ */

/* Page header with navigation and account box. */
.site-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
}
/* Name of the site, link to the home page. */
.site-header .brand {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-header .brand:hover { color: var(--accent); }
.site-header nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-inline-end: 1.2rem;
}
.site-header nav a:hover { color: var(--accent); }

/* Pushed to the far end of the header. */
.account { margin-inline-start: auto; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: .6rem; }
.account form { margin: 0; }

/* Path from the root down to the current node. */
.crumbs { font-size: .8rem; color: var(--muted); }
.crumbs a { color: var(--accent); text-decoration: none; }

/* Box for a node without content. */
.placeholder {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  color: var(--muted);
}

/* Login form. */
form.login {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  max-width: 360px;
}
form.login label { display: block; font-size: .85rem; margin: .8rem 0 .3rem; }
form.login input, form.login select {
  width: 100%;
  font: inherit;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
form.login button { margin-top: 1.2rem; }
form.login .hint { margin: .3rem 0 0; }

/* Account pages (own account, registration, invitations). */
.hint { color: var(--muted); font-size: .85rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
ul.links { padding-inline-start: 1.2rem; line-height: 1.8; }
ul.links a { color: var(--accent); }

/* A link shown once (invitation, reset). Selectable in full for copying. */
.link-box {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
}
.link-box input {
  inline-size: 100%;
  font: inherit;
  font-family: ui-monospace, monospace;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

section.invite {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
}
section.invite h3 { font-size: 1rem; margin-block: 1rem .4rem; }
table.facts-table { border-collapse: collapse; margin-block-end: .6rem; }
table.facts-table th { color: var(--muted); font-weight: 400; text-align: start; padding-inline-end: 1.2rem; }
ul.roster { list-style: none; padding: 0; margin: 0; }
ul.roster li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-block: .3rem; border-block-end: 1px solid var(--line); }
ul.roster form { margin: 0; }