@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

/* The portal, dressed like the essays.
 *
 * The essays and the library are one site, and until now they did not look like it: a reader
 * went from serif text on cream to a dark Bootstrap application the moment they signed in.
 * Everything here is the essay stylesheet's vocabulary — Cinzel headings, Lora prose,
 * Montserrat for the small uppercase labels, gold on deep blue-grey — applied to the widgets
 * the file server renders.
 *
 * Loaded last, after bootstrap and fileserver.css. Most of it is Bootstrap's own custom
 * properties rather than rules competing with its selectors: set the variable and every
 * component that reads it follows, which is both shorter and far less likely to drift when a
 * widget starts emitting different markup. Explicit rules below are only for the places
 * Bootstrap gives no variable for.
 *
 * Palette shared with essays/css/essay.css. Change it in both or in neither. */
:root {
  --gestalt-ink: #2b2b2b;
  --gestalt-heading: #1a2a3a;
  --gestalt-gold: #c5a059;
  --gestalt-gold-dark: #a8853f;
  --gestalt-muted: #888888;
  --gestalt-paper: #ffffff;
  --gestalt-page: #f4f4f6;
  --gestalt-rule: #e4e4e8;

  --gestalt-serif: 'Lora', Georgia, serif;
  --gestalt-display: 'Cinzel', serif;
  --gestalt-label: 'Montserrat', sans-serif;
}

/* ─── Bootstrap's own variables ──────────────────────────────────────────── */

[data-bs-theme='light'],
:root {
  --bs-body-bg: var(--gestalt-page);
  --bs-body-color: var(--gestalt-ink);
  --bs-body-font-family: var(--gestalt-serif);
  --bs-body-font-size: 0.9167rem;
  --bs-body-line-height: 1.7;
  --bs-heading-color: var(--gestalt-heading);
  --bs-emphasis-color: var(--gestalt-heading);
  --bs-secondary-color: var(--gestalt-muted);
  --bs-border-color: var(--gestalt-rule);
  --bs-border-color-translucent: var(--gestalt-rule);

  --bs-link-color: var(--gestalt-heading);
  --bs-link-color-rgb: 26, 42, 58;
  --bs-link-hover-color: var(--gestalt-gold-dark);
  --bs-link-hover-color-rgb: 168, 133, 63;

  /* Gold is the accent for anything the reader acts on. */
  --bs-primary: var(--gestalt-gold);
  --bs-primary-rgb: 197, 160, 89;

  --bs-font-sans-serif: var(--gestalt-serif);
}

/* ─── The page as a sheet of paper ───────────────────────────────────────── */

body {
  background-color: var(--gestalt-page);
  color: var(--gestalt-ink);
  font-family: var(--gestalt-serif);
}

/* The same card the essays sit on. Only a direct child of body, so the nested
 * containers inside a preview or a notes pane do not each grow their own shadow. */
body > .container,
body > .container-fluid {
  background: var(--gestalt-paper);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  padding: 32px 40px;
  margin-top: 25px;
  margin-bottom: 25px;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--gestalt-display);
  color: var(--gestalt-heading);
  letter-spacing: 0.01em;
}

h1,
.h1 {
  font-size: 1.8333rem;
  font-weight: 700;
}

h2,
.h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.75rem;
}

/* ─── Labels, tabs, buttons ──────────────────────────────────────────────── */

/* Montserrat small caps is how the essays mark anything that is not prose: the
 * back-link, the subtitle, the site header. Tabs and buttons are that same voice. */
.nav-tabs .nav-link,
.btn,
.form-label,
label,
th,
.badge {
  font-family: var(--gestalt-label);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav-tabs {
  border-bottom: 1px solid var(--gestalt-rule);
}

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--gestalt-muted);
  padding: 10px 16px;
}

.nav-tabs .nav-link:hover {
  color: var(--gestalt-heading);
  border-bottom-color: var(--gestalt-rule);
}

.nav-tabs .nav-link.active {
  color: var(--gestalt-heading);
  background: transparent;
  border-bottom-color: var(--gestalt-gold);
}

.btn {
  border-radius: 2px;
  padding: 8px 18px;
}

.btn-primary,
.btn-success {
  background-color: var(--gestalt-gold);
  border-color: var(--gestalt-gold);
  color: #ffffff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
  background-color: var(--gestalt-gold-dark);
  border-color: var(--gestalt-gold-dark);
  color: #ffffff;
}

.btn-outline-secondary {
  border-color: var(--gestalt-rule);
  color: var(--gestalt-heading);
}

.btn-outline-secondary:hover {
  background-color: var(--gestalt-page);
  border-color: var(--gestalt-gold);
  color: var(--gestalt-heading);
}

/* ─── Tables and forms ───────────────────────────────────────────────────── */

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #fafafb;
  --bs-table-hover-bg: #f4f0e6;
  --bs-table-border-color: var(--gestalt-rule);
}

.table > thead th {
  color: var(--gestalt-muted);
  border-bottom: 1px solid var(--gestalt-rule);
  font-weight: 600;
}

.table td {
  vertical-align: middle;
}

.form-control,
.form-select {
  border-color: var(--gestalt-rule);
  border-radius: 2px;
  font-family: var(--gestalt-serif);
  text-transform: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gestalt-gold);
  box-shadow: 0 0 0 0.15rem rgba(197, 160, 89, 0.2);
}

.card {
  border-color: var(--gestalt-rule);
  border-radius: 2px;
}

/* ─── Prose inside a preview ─────────────────────────────────────────────── */

/* A rendered document is the one place on these pages that is genuinely prose,
 * so it gets the essays' measure and indentation rather than Bootstrap's. */
.markdown-preview {
  font-family: var(--gestalt-serif);
  text-align: justify;
  hyphens: auto;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
  font-family: var(--gestalt-display);
}

.markdown-preview blockquote {
  border-left: 2px solid var(--gestalt-gold);
  padding-left: 1rem;
  color: #4a4a4a;
  font-style: italic;
}

@media (max-width: 820px) {
  body > .container,
  body > .container-fluid {
    padding: 20px 16px;
    margin-top: 0;
  }
}

/* ─── The account pages ──────────────────────────────────────────────────── */

/* Signing in, signing up, confirming an address, waiting to be let in. Core
 * renders all of them, identically for every app and with no hook for one —
 * so the portal's entire visual treatment of them is in this file, and
 * translating them and dressing them were two changes that never met.
 *
 * The markup core gives us, from AuthViewPagesService.coverContainer:
 *
 *   body.d-flex.h-100.text-center
 *     .cover-container.d-flex.w-100.h-100.p-3.mx-auto.flex-column
 *       .px-3.m-auto                    <- centred both ways by m-auto: the sheet
 *         div                           <- h1, then alerts, form, links
 *
 * Everything below hangs off .cover-container, which appears on no other page,
 * so none of it can reach the library. */

body > .cover-container > .m-auto {
  width: 100%;
  max-width: 30rem;
  background: var(--gestalt-paper);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  /* The one piece of colour: the same gold the essays rule their titles with. */
  border-top: 2px solid var(--gestalt-gold);
  padding: 40px 44px 44px;
  /* The body is centred for the heading's sake; a form read that way is awful. */
  text-align: left;
}

.cover-container h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* The short rule under an essay's title, which is what makes these pages read
 * as part of the same site rather than as a login box that borrowed its fonts. */
.cover-container h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--gestalt-gold);
}

.cover-container h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.cover-container p {
  color: #4a4a4a;
}

/* The signup form is a 4/8 Bootstrap row — two columns are too narrow on a
 * sheet this wide, so each label goes above its box. A stylesheet can do this
 * because the columns are the only thing that made it horizontal. */
.cover-container .row > [class*='col-'] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.cover-container .col-form-label,
.cover-container .form-label {
  color: var(--gestalt-muted);
  padding-bottom: 4px;
}

.cover-container .form-control {
  padding: 9px 12px;
}

/* The last row of a form is its buttons: one on most pages, two on sign-in,
 * where "create an account" sits beside it as the other thing a visitor came
 * to do. Equal halves rather than a primary with an afterthought next to it. */
.cover-container form > .mb-3:last-child,
.cover-container form > .mb-3:last-child > div {
  display: flex;
  gap: 10px;
}

.cover-container form > .mb-3:last-child {
  margin-top: 0.5rem;
}

/* The button is a direct child on some of these forms and wrapped in a div on
 * others, which is the kind of difference a stylesheet should absorb rather
 * than a view be changed for. */
.cover-container form > .mb-3:last-child > div {
  flex: 1 1 auto;
}

.cover-container form > .mb-3:last-child .btn {
  flex: 1 1 0;
  text-align: center;
}

/* Bootstrap's alerts are rounded tinted panels; the essays have no such thing.
 * A rule down the side in the alert's own colour says the same with less. */
.cover-container .alert {
  border: 0;
  border-left: 2px solid currentColor;
  border-radius: 0;
  font-family: var(--gestalt-serif);
  text-transform: none;
  text-align: left;
}

/* "Forgot your password?", "read the public essays", "back to sign in" — the
 * essays' back-link voice: small, spaced, muted until pointed at. */
.cover-container .link-secondary {
  font-family: var(--gestalt-label);
  font-size: 0.6875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gestalt-muted) !important;
}

.cover-container .link-secondary:hover {
  color: var(--gestalt-gold-dark) !important;
}

@media (max-width: 820px) {
  body > .cover-container > .m-auto {
    padding: 28px 20px 32px;
  }
}