:root {
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-typed: "Special Elite", "Courier New", monospace;
  --font-body: "Roboto Slab", Georgia, serif;
  --ink: #2c2418;
  --ink-soft: #5c4e3a;
  --paper: #f7f1e3;
  --paper-deep: #efe6d2;
  --stamp: #9b2c2c;
  --chip-hover: #c4d1a1;
}

html {
  color-scheme: light;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html.chrome-wait,
html.chrome-wait body {
  background-color: #1a1c1e;
}

html.chrome-wait .wall {
  opacity: 0;
}

body {
  color: var(--ink);
  background-color: #1a1c1e;
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

html.gate-on {
  overflow: hidden;
}

html.gate-on body > :not(.gate) {
  visibility: hidden;
  pointer-events: none;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.55), rgba(8, 8, 10, 0.7)),
    #1a1c1e;
}

.gate-card {
  width: min(360px, 100%);
  background: #f6f1e4;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.18);
}

.gate-card h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-hand);
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
}

.gate-lede {
  margin: 0 0 1rem;
  font-family: var(--font-typed);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}

.gate-card label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-family: var(--font-typed);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate-card input {
  width: 100%;
}

.gate-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  width: 100%;
  transform: none;
  border: 0;
  padding: 0.55rem 0.65rem;
  background: #e8e0d0;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px var(--stamp);
}

.gate-error {
  margin: 0.5rem 0 0;
  color: var(--stamp);
  font-family: var(--font-typed);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.account-name-row input,
.saved-folder-edit input,
.saved-sort select,
.board-filters input,
.board-filters select,
.browse-place input,
.browse-find .search,
.search,
.gate-card input,
.tip-form input,
.tip-form textarea,
.admin-form input:not([type="checkbox"]),
.admin-form textarea,
.admin-form select,
.tip-compose textarea,
.admin-toolbar input:not([type="checkbox"]),
.admin-case-id input,
.facts input:not([type="checkbox"]),
.facts textarea,
.facts select,
.callout textarea {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
  box-sizing: border-box;
  min-height: 2.6rem;
  border: 1px solid #d4c4a8;
  background: var(--paper-deep);
  padding: 0.4rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(40, 24, 8, 0.06);
}

.search,
.browse-find .search,
.browse-place input,
.board-filters input,
.board-filters select,
.account-name-row input,
.saved-folder-edit input,
.saved-sort select {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--stamp);
}

.gate-card input,
.tip-form input,
.tip-form textarea,
.admin-form input:not([type="checkbox"]),
.admin-form textarea,
.admin-form select,
.tip-compose textarea,
.admin-toolbar input:not([type="checkbox"]),
.facts input:not([type="checkbox"]),
.facts textarea,
.facts select,
.callout textarea {
  width: 100%;
}

.board-filters select,
.saved-sort select {
  appearance: auto;
  -webkit-appearance: auto;
}

.search-more:hover,
.search-more:focus-visible,
.filter-actions button:hover,
.filter-actions button:focus-visible,
.pager-btn:hover,
.pager-btn:focus-visible,
.account-who:hover,
.account-who:focus-visible,
.cookie-btn:hover,
.cookie-btn:focus-visible,
.gate-card button:hover,
.gate-card button:focus-visible,
.back:hover,
.back:focus-visible,
.star-btn:hover,
.star-btn:focus-visible,
.tip-btn:hover,
.tip-btn:focus-visible,
.tip-form button:hover,
.tip-form button:focus-visible {
  background: var(--chip-hover);
}

.cookie-btn-ghost:hover,
.cookie-btn-ghost:focus-visible {
  background: transparent;
  color: var(--stamp);
}

.cookie-btn-ok:hover,
.cookie-btn-ok:focus-visible {
  background: rgba(47, 111, 78, 0.42);
}

.cookie-btn-danger:hover,
.cookie-btn-danger:focus-visible {
  background: rgba(155, 44, 44, 0.42);
}

.cookie-btn-danger:disabled:hover,
.cookie-btn-danger:disabled:focus-visible {
  background: rgba(155, 44, 44, 0.22);
}

html.night-board {
  color-scheme: light;
  --paper: #d9c49a;
  --paper-deep: #c9b07e;
  --chip-hover: #c4d1a1;
}

html.night-board,
html.night-board body,
html.night-board.chrome-wait,
html.night-board.chrome-wait body {
  background-color: #2a1c12;
}

html.night-board .gate {
  background:
    linear-gradient(180deg, rgba(42, 24, 10, 0.55), rgba(32, 16, 6, 0.72)),
    #2a1c12;
}

html.night-board .cookie-btn,
html.night-board .back,
html.night-board .search-more,
html.night-board .account-who,
html.night-board .pager-btn,
html.night-board .pager-status,
html.night-board .saved-folder,
html.night-board .filter-actions button,
html.night-board .star-btn,
html.night-board .tip-btn,
html.night-board .tip-form button,
html.night-board .gate-card button,
html.night-board span.account-who:hover,
html.night-board span.account-who:focus-visible {
  background: #cbb48a;
}

html.night-board .saved-folder.is-on {
  background: var(--chip-hover);
}

html.night-board .search-more:hover,
html.night-board .search-more:focus-visible,
html.night-board .filter-actions button:hover,
html.night-board .filter-actions button:focus-visible,
html.night-board .pager-btn:hover,
html.night-board .pager-btn:focus-visible,
html.night-board .account-who:hover,
html.night-board .account-who:focus-visible,
html.night-board .cookie-btn:hover,
html.night-board .cookie-btn:focus-visible,
html.night-board .gate-card button:hover,
html.night-board .gate-card button:focus-visible,
html.night-board .back:hover,
html.night-board .back:focus-visible,
html.night-board .star-btn:hover,
html.night-board .star-btn:focus-visible,
html.night-board .tip-btn:hover,
html.night-board .tip-btn:focus-visible,
html.night-board .tip-form button:hover,
html.night-board .tip-form button:focus-visible,
html.night-board .saved-folder:hover,
html.night-board .saved-folder:focus-visible,
html.night-board .saved-folder.is-over {
  background: var(--chip-hover);
}

html.night-board span.account-who:hover,
html.night-board span.account-who:focus-visible {
  background: #cbb48a;
}

html.night-board .cookie-btn-ghost,
html.night-board .cookie-btn-ghost:hover,
html.night-board .cookie-btn-ghost:focus-visible {
  background: transparent;
}

html.night-board .cookie-btn-ok {
  background: rgba(47, 111, 78, 0.22);
}

html.night-board .cookie-btn-ok:hover,
html.night-board .cookie-btn-ok:focus-visible {
  background: rgba(47, 111, 78, 0.42);
}

html.night-board .cookie-btn-danger {
  background: rgba(155, 44, 44, 0.22);
}

html.night-board .cookie-btn-danger:hover,
html.night-board .cookie-btn-danger:focus-visible {
  background: rgba(155, 44, 44, 0.42);
}

html.night-board .gate-card,
html.night-board .cookie-note,
html.night-board .tip-card,
html.night-board .legal-card {
  background: var(--paper);
}

html.night-board .gate-card input {
  background: var(--paper-deep);
}