/* The enth look (docs/design/web-brand.md): the design tokens from Alex's
   mockups (assets/UI Mockups.png, GH #39), the self-hosted fonts, and the
   reusable pieces (top bar, buttons, inputs, badges, cards, tables, tabs).
   One file for the whole site: the web app (hosted/web) and enth-users'
   server-rendered pages (hosted/users/server/pages.go) both link
   /brand/enth.css, so it is fetched once and cached. Page layouts stay
   with their pages (hosted/web/src/style.css, pages.go).
   src/brand.test.ts checks the text and accent pairs below for WCAG AA. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-5.3.0-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-5.3.0-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-5.3.0-latin-600.woff2") format("woff2");
}
:root {
  /* Surfaces */
  --bg: #191817;
  --card: #1c1b19;
  --raised: #292724;
  --border: #37342f;
  --border-soft: #2d2b27;
  /* Text. --text-muted is the mockup's #817C73 lightened to pass AA
     (4.28:1 on --bg); see web-brand.md. */
  --text: #f2efe9;
  --text-muted: #928d84;
  /* Secondary text that is not muted: the welcome page's lead and the
     feature descriptions, the signed-out header's "Sign in" (the Figma
     design's #B4AEA4). */
  --text-soft: #b4aea4;
  /* Accent */
  --accent: #ef9157;
  --accent-text: #241b15;
  --link: #f39b63;
  /* States */
  --success: #a6bc94;
  --danger: #d99a8e;
  --danger-border: #64443b;
  --add-bg: #222c23;
  --del-bg: #352522;
  --mark-bg: #4a3423;
  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-size: 14px;
  --title-size: 26px;
  /* Shape */
  --radius: 6px;
  --radius-card: 8px;
  --control-h: 36px;
  --gutter: 48px;
  --row-h: 41px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-size) / 1.5 var(--font);
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
code,
pre,
kbd {
  font-family: var(--mono);
}
h1 {
  font-size: var(--title-size);
  font-weight: 400;
  margin: 0 0 1rem;
}
h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.muted {
  color: var(--text-muted);
}

/* The top bar: the logo and wordmark (home), the nav, the account menu.
   60 px tall with its rule, 32 px from the edge (24 px on a tablet, 16 px
   on a phone), as every frame of the Figma design draws it. */
header.top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 60px;
  padding: 0.5rem 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 64rem) {
  header.top {
    padding: 0.5rem 24px;
  }
}
@media (max-width: 40rem) {
  header.top {
    padding: 0.5rem 16px;
    gap: 1rem;
  }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
}
.logo:hover {
  text-decoration: none;
}
.logo img {
  width: 32px;
  height: 32px;
  display: block;
}
/* The wordmark beside the logo is the logo's own lettering
   (assets/logo/wordmark-dark.svg, served as /brand/wordmark.svg), 18 px tall:
   about the x-height of 20 px bold text. */
.logo img.wordmark {
  width: auto;
  height: 18px;
}
/* The name in running text: lowercase, the n in the brand colour, as the
   wordmark has it. */
.brand-name {
  color: var(--text);
  font-weight: 600;
}
.brand-name .n {
  color: var(--accent);
}
header.top nav.main {
  display: flex;
  gap: 1rem;
}
header.top nav.main a {
  color: var(--text);
}
header.top .account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
header.top .account > a {
  color: var(--text);
}
/* Signed out: "Sign in" as a quiet link, "Sign up" as the accent button. */
header.top .account > a.signin {
  color: var(--text-soft);
}
header.top .account > a.button {
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--accent-text);
}
/* The account menu: a <details>, so it works without script too. */
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
}
.menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 12rem;
  padding: 0.35rem 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
}
.menu-items > * {
  display: block;
  width: 100%;
  padding: 0.4rem 0.9rem;
  margin: 0;
  text-align: left;
}
.menu-items > a {
  color: var(--text);
}
.menu-items > a:hover {
  background: var(--raised);
  text-decoration: none;
}
.menu-items > .who {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 0.25rem;
}
.menu-items button {
  border: 0;
  background: none;
  height: auto;
  padding: 0;
  color: var(--text);
}
.menu-items form {
  display: block;
}

/* Buttons: secondary is the default; .primary and .danger mark the rest.
   .button is a link that looks like one (primary). */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  padding: 0 1rem;
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
button:hover {
  border-color: var(--text-muted);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
button.primary,
.button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.button:hover {
  text-decoration: none;
}
button.danger {
  background: var(--raised);
  border-color: var(--danger-border);
  color: var(--danger);
}
button.small {
  height: 28px;
  padding: 0 0.6rem;
}

/* Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
input:not([type]),
select,
textarea {
  height: var(--control-h);
  padding: 0 0.7rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
}
textarea {
  height: auto;
  padding: 0.5rem 0.7rem;
}
input::placeholder {
  color: var(--text-muted);
}
input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Badges: outlined pills (Public, Private). */
.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Cards, notes */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.card > .row,
.card > li {
  padding: 0.6rem 1rem;
  min-height: var(--row-h);
  border-top: 1px solid var(--border-soft);
}
.card > .row:first-child,
.card > li:first-child {
  border-top: 0;
}
.msg,
.note {
  padding: 0.6rem 0.9rem;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Tables (table.data): a card with 1px dividers and ~41px rows. */
table.data {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  overflow: hidden;
}
table.data th,
table.data td {
  text-align: left;
  padding: 0.5rem 0.9rem;
  height: var(--row-h);
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
}
table.data thead th,
table.data tr:first-child > * {
  border-top: 0;
}
table.data th {
  font-weight: 600;
  color: var(--text-muted);
}

/* Tabs: the selected one is underlined in the accent. */
.tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1rem;
}
.tabs > * {
  padding: 0.5rem 0;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs > [aria-current] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}