/* Collective Vibrations business suite — cream paper, gold rule, slab titles. */

:root {
  --paper: #f4f2ed;
  --surface: #fff;
  --ink: #17161a;
  --ink-2: #504e56;
  --ink-3: #706d75;
  --rule: #e2dfd8;
  --gold: #906400;
  --crit: #a82b22;
  --ok: #0e6e52;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --slab: Superclarendon, Rockwell, "Roboto Slab", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
[hidden] { display: none !important; }

body.suite {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.top a.mark {
  font-family: var(--slab);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.top .who { margin-left: auto; color: var(--ink-2); font-size: 13px; }
.top nav { display: flex; gap: 12px; font-size: 13px; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.top .top-out { margin-top: 0; padding: 6px 10px; font-size: 13px; }

.login-wrap {
  max-width: 28rem;
  margin: 12vh auto;
  padding: 0 20px;
}
.login-wrap h1 {
  font-family: var(--slab);
  font-size: 1.8rem;
  margin: 0 0 8px;
}
.login-wrap .kicker {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold);
}
.login-wrap p { color: var(--ink-2); margin: 0 0 20px; line-height: 1.5; }
.login-wrap label { display: block; font-size: 13px; margin-bottom: 6px; }
.login-wrap input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
}
.login-wrap button, .btn {
  margin-top: 12px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 4px;
}
.login-wrap .note { font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.err { color: var(--crit); font-size: 14px; margin-top: 10px; }
.ok { color: var(--ok); font-size: 14px; margin-top: 10px; }

.hub {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}
.hub header h1 {
  font-family: var(--slab);
  font-size: 1.7rem;
  margin: 0;
}
.hub header p { color: var(--ink-2); margin: 6px 0 24px; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  position: relative;
  overflow: hidden;
}
.tile:hover { border-color: var(--ink-3); }
.tile .kicker { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.tile h2 { font-size: 1.05rem; margin: 8px 0 6px; }
.tile p { font-size: 12px; color: var(--ink-2); margin: 0; line-height: 1.4; flex: 1; }
.tile .soon { color: var(--ink-3); font-size: 11px; margin-top: 10px; }
.tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.tile:hover::after { transform: scaleX(1); }
.tile[aria-disabled="true"] { cursor: default; }
.tile[aria-disabled="true"]:hover { border-color: var(--rule); }
.tile[aria-disabled="true"]:hover::after { transform: scaleX(0); }
.studio-row { min-height: auto; margin-bottom: 10px; }

/* Inbox */
body.inbox { overflow: hidden; }
.inbox-app {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.inbox-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--paper);
}
.inbox-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
}
.compose-btn {
  background: var(--gold);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px 300px minmax(0, 1fr) 260px;
}
.col {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--rule);
  background: var(--surface);
}
.col:last-child { border-right: 0; }
.rail { padding: 12px 8px; }
.rail h3 {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 8px 6px;
}
.rail button, .mbox {
  display: flex;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  justify-content: space-between;
  gap: 8px;
}
.rail button[aria-current="true"], .mbox[aria-current="true"] {
  background: var(--paper);
  font-weight: 600;
}
.badge {
  font-size: 11px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.list { display: flex; flex-direction: column; }
.row {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.row.unread .from { font-weight: 700; }
.row[aria-current="true"] { background: var(--paper); }
.row .from { font-size: 13px; }
.row .subj { font-size: 13px; margin-top: 2px; }
.row .snip { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; }
.pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--ink-2);
}
.thread { padding: 16px 20px 80px; }
.thread .empty { color: var(--ink-3); padding: 40px 8px; }
.msg { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.msg header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.msg .body { line-height: 1.5; font-size: 14px; }
.msg .body img { max-width: 100%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.actions button {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.side { padding: 16px; font-size: 13px; }
.side h3 { font-family: var(--slab); font-size: 1rem; margin: 0 0 8px; }
.side dt { color: var(--ink-3); font-size: 11px; margin-top: 10px; }
.side dd { margin: 2px 0 0; }
.composer {
  position: fixed;
  right: 24px;
  bottom: 0;
  width: min(520px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 30px rgba(23, 22, 26, 0.08);
  padding: 14px;
  z-index: 20;
}
.composer h2 { font-size: 14px; margin: 0 0 10px; }
.composer input, .composer textarea, .composer select {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 8px;
  margin-bottom: 8px;
  background: var(--paper);
}
.composer textarea { min-height: 140px; resize: vertical; }
.composer .row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.help {
  position: fixed;
  inset: 0;
  background: rgba(23, 22, 26, 0.35);
  display: grid;
  place-items: center;
  z-index: 30;
}
.help pre {
  background: var(--surface);
  padding: 20px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .col { display: none; }
  .shell[data-pane="rail"] .rail,
  .shell[data-pane="list"] .list-col,
  .shell[data-pane="thread"] .thread-col { display: block; height: 100%; }
}

/* ------------------------------------------------------------------ *
 * Hub — greeting, what needs a person, then the desks
 * ------------------------------------------------------------------ */

.attention {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 28px;
}
.attention h2 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.attention ul { margin: 0; padding-left: 18px; }
.attention li { margin: 4px 0; font-size: 14px; }
.attention a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.attention a:hover { text-decoration-color: var(--gold); }

.apps { margin-bottom: 30px; }
.section-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 4px;
  font-weight: 600;
}
.section-note { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.apps .section-label + .tiles { margin-top: 12px; }

.tile h3 { font-size: 1.05rem; margin: 8px 0 6px; font-family: var(--slab); }
.tile.is-app { min-height: 148px; }
.tile.is-quiet { min-height: 96px; background: transparent; }
.tile .tile-stat {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.tile[aria-disabled="true"] h3 { color: var(--ink-2); }
.tile[aria-disabled="true"] p { color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * Desks — orders and contacts
 * ------------------------------------------------------------------ */

.desk {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.desk-head h1 { font-family: var(--slab); font-size: 1.6rem; margin: 0; }
.desk-head p { color: var(--ink-2); margin: 6px 0 20px; max-width: 62ch; line-height: 1.5; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
}
.stat dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.stat dd {
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-family: var(--slab);
  font-variant-numeric: tabular-nums;
}
.stat.is-flag { border-color: var(--gold); }
.stat.is-flag dd { color: var(--gold); }

.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.callout.is-warn { border-left-color: var(--crit); }

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filters input[type="search"], .filters select {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  min-width: 200px;
}
.filters select { min-width: 0; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-2);
}
.chip[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow-x: auto;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.grid td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.grid tr:last-child td { border-bottom: 0; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid .mono { font-family: var(--mono); font-size: 12px; }
table.grid .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
table.grid .empty { color: var(--ink-3); text-align: center; padding: 36px 14px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--paper); }
tr.clickable[aria-current="true"] { background: var(--paper); }
tr.clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.pill.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); }
.pill.is-warn { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, var(--rule)); }
td .pill + .pill { margin-left: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.detail {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
  font-size: 13px;
  position: sticky;
  top: 16px;
}
.detail h2 { font-family: var(--slab); font-size: 1.15rem; margin: 0 0 2px; }
.detail .sub { color: var(--ink-3); margin: 2px 0; word-break: break-all; }
.detail .mono { font-family: var(--mono); font-size: 12px; }
.detail .empty { color: var(--ink-3); }
.detail .badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; }
.detail .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; }
.detail .facts dt { color: var(--ink-3); font-size: 12px; }
.detail .facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.detail .actions { margin-top: 16px; flex-direction: column; align-items: stretch; }
.btn-link {
  display: block;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 7px 10px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 12px;
}
.btn-link:hover { border-color: var(--ink-3); color: var(--ink); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .detail { position: static; }
}

/* On a phone the desk names do not fit beside the wordmark, and the last one
   was being clipped off the edge. Drop the nav to its own row and let it
   scroll rather than hiding a desk nobody can then reach. */
@media (max-width: 720px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top a.mark { font-size: 15px; }
  .top nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
  .top .who { margin-left: auto; }
}