/* Diamond Alliance management portal.
 *
 * Two themes from one set of tokens. Light is the default; dark is opt-in and
 * remembered per browser.
 *
 * The brand kit is charcoal, champagne, taupe and bone. Those four do not
 * simply invert, because champagne is an INK on charcoal (10.1:1) and would be
 * an unreadable ink on bone (about 1.3:1). So each theme uses them for what
 * they can actually do:
 *
 *   dark   bone ink on a charcoal ground, champagne as the accent ink
 *   light  charcoal ink on a bone ground, champagne as a FILL — a highlight,
 *          a tinted panel — with a darkened bronze standing in wherever the
 *          accent has to be readable as text
 *
 * The top bar stays charcoal in both. It carries the identity, the canvas
 * below it carries the work, and keeping the bar fixed means the champagne
 * wordmark reads correctly whichever theme is on.
 *
 * Two faces do the work. Jost carries the interface. JetBrains Mono carries
 * anything that is literally a machine value — a mail address, a hostname, a
 * timestamp, an audit action. That split is the one structural device here and
 * it encodes something true: monospace means "this is the exact string", which
 * matters on a page whose whole job is handing you the right mailbox.
 */

:root {
  /* ── Light: the default. No data-theme attribute means this applies, so the
     page is still correct before any script runs and with JS off. ─────────── */
  --ground:      #F2EEE6;   /* bone, straight from the kit */
  --surface:     #FCFAF5;   /* cards lift by warmth as much as by their border */
  --surface-hi:  #F6F1E6;
  --line:        #DED7C8;
  --heading:     #26262B;   /* charcoal */
  --ink:         #33302A;
  --muted:       #776E5E;   /* taupe, darkened until it can hold text (5.2:1) */
  --accent:      #7A6B4F;   /* champagne, darkened until it reads as ink */
  --accent-soft: #EFE7D6;   /* champagne as a fill: tints and highlights */

  --btn-bg:      #26262B;   /* on light the primary button is charcoal… */
  --btn-ink:     #F2EEE6;
  --btn-bg-hi:   #3A3A42;
  --btn-ink-hi:  #F2EEE6;

  --ok:       #5B7A4E;
  --warn:     #8A6D24;
  --bad:      #9E4B3C;
  --ok-line:  #B7C6AE;
  --bad-line: #E0B6AE;
  --danger-ink: #FFFFFF;

  --shadow: 0 1px 2px rgba(38, 38, 43, .07), 0 1px 1px rgba(38, 38, 43, .04);

  /* The bar is charcoal in both themes. */
  --bar-bg:     #1D1D21;
  --bar-line:   #34343B;
  --bar-ink:    #E4DED2;
  --bar-muted:  #A89C84;
  --bar-accent: #D8CDB8;

  --ui:      "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Cormorant Garamond", Georgia, serif;

  --shell: 1180px;
  --radius: 3px;                 /* the mark is square; corners stay nearly so */
}

:root[data-theme="dark"] {
  --ground:      #26262B;   /* charcoal */
  --surface:     #2E2E35;
  --surface-hi:  #35353D;
  --line:        #3A3A41;
  --heading:     #F2EEE6;   /* bone */
  --ink:         #D5CFC4;
  --muted:       #A89C84;   /* taupe, exactly as the kit has it */
  --accent:      #D8CDB8;   /* champagne, the accent ink on charcoal */
  --accent-soft: #3A3730;

  --btn-bg:      #D8CDB8;   /* …and champagne on dark */
  --btn-ink:     #1F1F23;
  --btn-bg-hi:   #F2EEE6;
  --btn-ink-hi:  #1F1F23;

  --ok:       #9DB394;
  --warn:     #D9B87A;
  --bad:      #D08C7F;
  --ok-line:  #47543F;
  --bad-line: #5A3A37;
  --danger-ink: #241816;

  --shadow: none;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--heading); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  height: 62px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand .mark { width: 24px; height: 24px; color: var(--bar-accent); flex: none; }
.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.wordmark b { font-weight: 400; color: #F2EEE6; }
.wordmark i { font-style: normal; font-weight: 300; color: var(--bar-accent); }

.topnav { display: flex; gap: clamp(.75rem, 2.5vw, 1.75rem); margin-left: auto; flex-wrap: wrap; }
.topnav a {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bar-muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: #F2EEE6; }
.topnav a.on { color: var(--bar-accent); border-bottom-color: var(--bar-accent); }

.whoami { display: flex; align-items: center; gap: 1rem; flex: none; }
.whoami .me { font-size: 13px; color: var(--bar-ink); }
.whoami .me:hover { color: var(--bar-accent); }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bar-muted);
}
.linkish:hover { color: #F2EEE6; }

/* ── Theme switch ─────────────────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 1px solid var(--bar-line);
  border-radius: var(--radius);
  color: var(--bar-muted);
  cursor: pointer;
  flex: none;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--bar-accent); border-color: var(--bar-accent); }
.theme-toggle svg { width: 14px; height: 14px; display: block; }

/* One button, two glyphs: it shows the theme you would switch TO, which is the
   only thing the person is deciding. */
.theme-toggle .to-dark  { display: block; }
.theme-toggle .to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .to-dark  { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: block; }

/* On the sign-in screen there is no bar for it to sit in. */
.bare .theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  border-color: var(--line);
  color: var(--muted);
}
.bare .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ── Shell ────────────────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}

.page-head { margin: 0 0 2rem; }
.page-head h1 {
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: .01em;
  color: var(--heading);
  margin: 0;
}
.page-head p { margin: .35rem 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
}

/* ── Flash ────────────────────────────────────────────────────────────────── */

.flashes { margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.flash {
  margin: 0;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted);
  font-size: 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.flash-ok    { border-left-color: var(--ok);  color: var(--heading); }
.flash-error { border-left-color: var(--bad); color: var(--heading); }

/* ── Domain sections ──────────────────────────────────────────────────────── */

.domain-section { margin: 0 0 clamp(2.25rem, 5vw, 3.25rem); }

.domain-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
/* The lockups range from 5.5:1 (TRISON) to nearly square (Arbor, Kavo), so a
   fixed height would shrink the square ones to nothing. A bounded box instead:
   each fills what it can, and they share a centre line so the row still reads
   as a row. */
.domain-logo {
  /* The lockup stands in for the section heading rather than sitting beside
     it, so it carries the identity on its own and can take the extra few
     pixels. */
  max-height: 34px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex: none;
}

/* Artwork made for the other ground is hidden, not merely dimmed. */
.domain-logo.for-dark { display: none; }
:root[data-theme="dark"] .domain-logo.for-light { display: none; }
:root[data-theme="dark"] .domain-logo.for-dark  { display: block; }

.row-logo { max-height: 22px; max-width: 72px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.domain-glyph { width: 11px; height: 11px; color: var(--accent); flex: none; margin: 0 9px 0 10px; }
.domain-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--heading);
}
.domain-head .host {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  letter-spacing: .02em;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.card:hover { border-color: var(--accent); }

.card-face {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .95rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
a.card-face { text-decoration: none; }

.card-logo { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 2px; }
.card-glyph { width: 10px; height: 10px; color: var(--accent); flex: none; margin: 10px; }

.card-text { min-width: 0; flex: 1; }
.card-label {
  display: block;
  color: var(--heading);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.card-cue { flex: none; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.card:hover .card-cue { color: var(--accent); }
a.card-face:hover .card-cue { transform: translateX(2px); }

/* The one interactive moment on the page: a webmail card unfolds in place into
   the domain's mailboxes instead of navigating away. */
.card.open { background: var(--surface-hi); border-color: var(--accent); }
.card.open .card-cue { transform: rotate(180deg); color: var(--accent); }

.drawer { border-top: 1px solid var(--line); display: none; }
.card.open .drawer { display: block; }

.drawer-note {
  padding: .7rem 1rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.drawer-note.bad { color: var(--bad); }

.mailbox-form { margin: 0; }
.mailbox {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: 0;
  border-top: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  transition: background .12s ease, color .12s ease;
}
.mailbox:hover, .mailbox:focus-visible { background: var(--accent-soft); color: var(--heading); }
.mailbox .local { color: var(--heading); }
.mailbox:hover .local { color: var(--accent); }
.mailbox .at { color: var(--muted); }
.mailbox .enter {
  margin-left: auto;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: transparent;
  transition: color .12s ease;
}
.mailbox:hover .enter, .mailbox:focus-visible .enter { color: var(--accent); }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.empty strong { display: block; color: var(--heading); font-weight: 400; margin-bottom: .35rem; }

/* ── Sign in ──────────────────────────────────────────────────────────────── */

body.bare {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background:
    radial-gradient(1200px 700px at 50% -15%, var(--surface) 0%, transparent 70%),
    var(--ground);
}
.bare-main { width: min(390px, calc(100vw - 2rem)); padding: 2rem 0; }

.login-brand { text-align: center; margin-bottom: 2.25rem; }
.login-brand .mark { width: 40px; height: 40px; color: var(--accent); }
.login-brand .name {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--heading);
  line-height: 1.15;
}
.login-brand .name span { display: block; color: var(--accent); }
.login-brand .sub {
  margin: .85rem 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.field { margin: 0 0 1.1rem; }
.field:last-of-type { margin-bottom: 1.4rem; }

label, .label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}

input[type=text], input[type=email], input[type=password],
input[type=url], input[type=number], select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--heading);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 14.5px;
  transition: border-color .15s ease;
}
input[type=email], input[type=url], input.mono { font-family: var(--mono); font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input[type=file] { color: var(--muted); font-size: 13px; width: 100%; }
select { appearance: none; background-image: none; }

.hint { margin: .35rem 0 0; font-size: 12.5px; color: var(--muted); }

.check { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.check label, .check .label {
  margin: 0;
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem 1.15rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--btn-bg-hi); border-color: var(--btn-bg-hi); color: var(--btn-ink-hi); }
.btn-wide { width: 100%; }
.btn-quiet {
  background: none;
  color: var(--ink);
  border-color: var(--line);
}
.btn-quiet:hover { background: var(--surface-hi); color: var(--heading); border-color: var(--muted); }
.btn-danger { background: none; color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad); color: var(--danger-ink); border-color: var(--bad); }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.actions .spacer { margin-left: auto; }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left;
  padding: .6rem .85rem;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
tbody td { padding: .62rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hi); }
td.mono, .mono { font-family: var(--mono); font-size: 12.5px; }
td.num { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
td .row-actions { display: flex; gap: .5rem; justify-content: flex-end; }
td form { display: inline; margin: 0; }

/* The activity table scrolls sideways rather than wrapping. A detail string
   that wraps to three lines makes one row tower over its neighbours, and a log
   you scan for anomalies has to have an even rhythm or every long entry looks
   like an event. */
.audit-table td, .audit-table th { white-space: nowrap; }
.audit-table td.detail { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; }

.tag {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag-admin { color: var(--accent); border-color: var(--accent); }
.tag-off   { color: var(--bad); border-color: var(--bad-line); }
.tag-on    { color: var(--ok);  border-color: var(--ok-line); }

/* ── One-time secret ──────────────────────────────────────────────────────── */

.secret {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.secret .label { margin-bottom: .5rem; }
.secret code {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--heading);
  word-break: break-all;
  user-select: all;
}
.secret .hint { margin-top: .6rem; }

/* ── Filters and paging ───────────────────────────────────────────────────── */

.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin: 0 0 1.25rem; }
.filters .field { margin: 0; min-width: 150px; }
.pager { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 1.25rem;
         font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }

/* ── Motion and small screens ─────────────────────────────────────────────── */

@media (max-width: 720px) {
  .topbar { height: auto; flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; gap: .75rem 1.25rem; }
  .topnav { margin-left: 0; order: 3; width: 100%; }
  .whoami { margin-left: auto; }
  .domain-head .host { display: none; }
  .cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}