:root {
  color-scheme: light;
  --fg: #1a1a1a;
  --bg: #fafafa;
  --card-bg: #ffffff;
  --border: #ddd;
  --accent: #0f62fe;
  --ok: #1a7f37;
  --warn: #9a6700;
  --error: #c0392b;
}

/* Sizing below is in rem (relative to the root 16px default) rather than hardcoded px, so
   everything scales together with a user's browser font-size/zoom preferences instead of
   staying visually fixed — the same reasoning as the mobile breakpoints further down: the
   site should adapt to the reader's device and settings, not assume one fixed viewport. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

.topbar {
  position: relative; /* anchors .site-nav.is-open, which floats below this as a dropdown */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.625rem 1.25rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; text-decoration: none; padding-left: 0.225rem; }
.brand-logo { height: 3.75rem; width: auto; max-width: 100%; display: block; }

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

/* Hidden on desktop — only shown (via the phone-width media query below) to reveal/hide
   .site-nav, which stays a normal always-visible row above that width. The three bars are
   drawn with plain CSS (not a text/emoji character) so there's no font-glyph-availability
   risk at all — the exact class of bug the password-toggle icon hit earlier. */
.nav-toggle {
  display: none;
  position: relative;
  width: 1.75rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger-bar,
.hamburger-bar::before,
.hamburger-bar::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.1875rem;
  background: var(--fg);
  border-radius: 999px;
}
.hamburger-bar { top: 50%; transform: translateY(-50%); }
.hamburger-bar::before { content: ""; top: -0.5rem; }
.hamburger-bar::after { content: ""; top: 0.5rem; }

nav a, .link-button {
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.container {
  max-width: 53.75rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3.75rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* .auth-box wraps the whole login/signup page content (heading, form, and the "already have
   an account?" link) in one narrower, centered column, so all of it lines up together instead
   of just the form/inputs being centered while the heading and link stay at the page's edge.
   .form-inline (Settings' alias/allowed-senders rows) is a different shape — a form sitting
   inline within a wider card alongside other content — so it's deliberately left out of this. */
.auth-box {
  max-width: 17.25rem;
  margin: 0 auto;
}

.form label, .form-inline {
  display: block;
  margin-bottom: 0.875rem;
}

.form-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.form-inline input { flex: 1 1 12rem; }

input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 1rem;
}

/* Wraps a password <input> plus its show/hide toggle button. The input keeps its normal
   block/width:100% sizing from the rule above; this just gives the button something to
   position itself against. */
.password-field { position: relative; }
.password-field input[type="password"], .password-field input[type="text"] { padding-right: 2.25rem; }
.password-toggle {
  /* No opacity here, on purpose: some Chrome/Windows versions render color-emoji glyphs (like
     the eye below) as fully invisible when opacity < 1 is applied directly to them — a
     known color-font compositing quirk, not something specific to this button. Hover/active
     state is shown with a background tint instead, which doesn't touch the glyph itself.
     font-family is also set explicitly, on purpose: <button> elements often default to the
     browser/OS's native UI font rather than the page's font stack, and that native button
     font frequently has no emoji glyphs at all — so the same character that renders fine as
     plain body text can render blank specifically inside a <button>. */
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
}
.password-toggle:hover, .password-toggle.is-showing { background: var(--border); }

button, .button, .button-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}

.button-secondary { background: #666; }

/* Tables stay full-size and scroll horizontally within this wrapper on narrow screens,
   rather than squeezing columns unreadably small or overflowing the whole page. */
.table-wrap { overflow-x: auto; margin-top: 0.625rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; white-space: nowrap; }

.list { list-style: none; padding: 0; }
.list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border);
}

.flash { padding: 0.625rem 0.875rem; border-radius: 0.375rem; margin-bottom: 1rem; }
.flash-success { background: #e6f4ea; color: var(--ok); }
.flash-error { background: #fdecea; color: var(--error); }

.status-ok { color: var(--ok); }
.status-warn { color: var(--warn); }

.pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }

code {
  background: #f0f0f0;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  word-break: break-word;
}

/* Hamburger-menu breakpoint — separate from the phone-tightening one below, since it has its
   own threshold (650px, wider than a "phone" cutoff, to also cover narrower tablet/split-screen
   widths where the nav row no longer comfortably fits next to the logo). */
@media (max-width: 40.625rem) {
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav {
    display: none;
  }
  /* Floats as a dropdown panel below the header instead of pushing it open — anchored via
     .topbar's `position: relative` above. */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    right: 1rem;
    width: 70%;
    z-index: 20;
    background: #555;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
  .site-nav.is-open a, .site-nav.is-open .link-button {
    padding: 0.625rem 0.75rem;
    width: 100%;
    text-align: right;
    color: #fff;
  }
  .site-nav.is-open a:hover, .site-nav.is-open .link-button:hover {
    font-weight: 700;
  }
  .site-nav.is-open form.inline { width: 100%; }
  .site-nav.is-open > a:not(:last-child),
  .site-nav.is-open > form.inline:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
}

/* Phone-width tightening: the layout above already reflows on its own (flex-wrap, 100%-width
   inputs, scrollable tables), so this mainly trims spacing/logo size that's comfortable on a
   laptop but a bit much on a ~24rem-wide phone screen. */
@media (max-width: 30rem) {
  .topbar { padding: 0.5rem 1rem; }
  .brand-logo { height: 2.5rem; }
  .container { padding: 1.25rem 1rem 3rem; }
  .card { padding: 0.875rem 1rem; }
}