/* Styles for the whole frontend. Served as a file rather than inlined in
   the Leptos view, because the view macro escapes text content and a
   stylesheet is full of characters that must not be escaped. */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --panel: #ffffff;
  --ink: #1a1a19;
  --muted: #6b6b66;
  --line: #e3e3df;
  --accent: #2f5d50;
  --accent-ink: #ffffff;
  --bad: #8c2f26;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --panel: #1d1f23;
    --ink: #ecebe7;
    --muted: #9a9a94;
    --line: #2d3036;
    --accent: #7fb3a1;
    --accent-ink: #10201b;
    --bad: #e0837a;
  }
}

/* The same palette again, for a page that asks for dark outright rather
   than following the browser. CSS has no way to apply one block from both
   a media query and a class, so the values are written twice and a new
   token belongs in all three places. The landing page is the only thing
   wearing this class. */
:root.dark {
  color-scheme: dark;
  --bg: #16171a;
  --panel: #1d1f23;
  --ink: #ecebe7;
  --muted: #9a9a94;
  --line: #2d3036;
  --accent: #7fb3a1;
  --accent-ink: #10201b;
  --bad: #e0837a;
}

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 62rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.subtitle {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

code, .mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size: 0.88em;
}

/* A column down the left rather than a row: stretched across the page the
   two buttons sat at opposite ends of it, which is a long way for the eye to
   travel between the two things there are to do here. The width is the
   widest control's, so both buttons line up under one another. */
.controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 24rem;
  max-width: 100%;
  margin-bottom: 2rem;
}

.controls button {
  width: 100%;
}

button {
  font: inherit;
  font-weight: 550;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.55;
  cursor: progress;
}

button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  padding: 0.3rem 0.75rem;
  font-weight: 500;
}

button.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

section {
  margin-bottom: 2rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.hint {
  color: var(--muted);
  font-style: italic;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 550;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: none;
}

td.num {
  text-align: right;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}

th.num {
  text-align: right;
}

.failure {
  border-color: var(--bad);
}

.failure h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--bad);
}

.failure p {
  margin: 0 0 0.4rem;
}

.htmx-request button {
  opacity: 0.55;
}

/* The box and the button it submits are one control, so they carry the
   column's gap between them and nothing more. */
.name-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.name-form input,
.login-form input {
  font: inherit;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
}

.name-form input:focus,
.login-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* The login page. Narrow and centred: there is one thing to do on it, and
   the full 62rem of `main` around two fields reads as a page that failed to
   load the rest of itself. */
main.login {
  max-width: 22rem;
  margin-top: 12vh;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.5rem;
}

.login-form label {
  font-size: 0.85rem;
  color: var(--muted);
}

.login-form label + input {
  margin-bottom: 0.7rem;
}

.login-form button {
  margin-top: 0.4rem;
}

.error {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--bad);
  border-radius: 7px;
  color: var(--bad);
  font-size: 0.9rem;
}

/* Out of the way on purpose: signing out is not what anybody came to the
   page to do, and it sits next to buttons that spend a request. */
.signout {
  float: right;
  margin-top: -2.5rem;
}

.signout button {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  padding: 0.3rem 0.75rem;
  font-weight: 500;
}

.signout button:hover {
  border-color: var(--accent);
  color: var(--accent);
  filter: none;
}

/* The landing page. Read rather than operated, so it is narrower than the
   62rem the tool pages use, set looser, and set in whichever of these faces
   the machine already has. No webfont: a font file here would mean either a
   request to somebody else's server -- the thing vendoring htmx was for --
   or a binary in the repository, and the sans-serifs a browser ships with
   are good enough to not be worth either. */
main.landing {
  max-width: 40rem;
  margin-top: 6vh;
  font-family: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.masthead {
  margin-bottom: 3rem;
}

.landing h1 {
  margin: 0 0 0.4rem;
  font-size: 2.25rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* The section labels keep the uppercase muted treatment the rest of the
   site gives an `h2`, with a hairline under them: on a page that is two
   blocks of prose, the label is the only thing separating them. */
.landing h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.landing section {
  margin-bottom: 3rem;
}

.landing section:last-child {
  margin-bottom: 0;
}

.landing p {
  margin: 0 0 1rem;
}

.landing p:last-child {
  margin-bottom: 0;
}

/* Entries, not bullets: a marker down the left buys nothing that the rule
   between two rows does not, and the lead-in on its own line is what makes
   the list scannable. */
.cv-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.cv-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cv-list strong {
  display: block;
  font-weight: 600;
}

.cv-list span {
  color: var(--muted);
}