/*
 * The business centre.
 *
 * Loaded on top of troy.css, which already defines the palette, the gate and
 * the brand variables. This file adds only what the centre needs - the panels,
 * the checklist and the two card grids.
 */

.centre {
  min-height: 100vh;
  background: var(--bg, #0b0d12);
  color: var(--ink, #e9ecf3);
  font-family: Inter, ui-sans-serif, -apple-system, sans-serif;
}

/* ── The top strip ─────────────────────────────────────────────────────── */
.centre-top {
  display: flex; align-items: center; gap: 1rem;
  height: 3.75rem; padding: 0 1.5rem;
  border-bottom: 1px solid var(--line, #1e2230);
  position: sticky; top: 0; z-index: 5;
  background: var(--bg, #0b0d12);
}
.centre-mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.centre-mark-icon {
  width: 1.9rem; height: 1.9rem; border-radius: 7px;
  display: grid; place-items: center; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, var(--brand, #6366f1), var(--brand-2, #8b5cf6));
}
.centre-mark-name { font-family: Outfit, sans-serif; font-weight: 800; letter-spacing: .02em; }
.centre-mark-name [data-brand-tail] { color: var(--brand-soft, #a5b4fc); }

.centre-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; font-size: .9rem; }
.centre-nav a { color: var(--dim, #8b93a7); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.centre-nav a:hover { color: var(--ink, #e9ecf3); }
.centre-out {
  background: none; border: 1px solid var(--line, #1e2230); color: var(--dim, #8b93a7);
  padding: .35rem .8rem; border-radius: 6px; font: inherit; font-size: .85rem; cursor: pointer;
}
.centre-out:hover { color: var(--ink, #e9ecf3); border-color: var(--dim, #8b93a7); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.centre-body { max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.centre-head { margin-bottom: 2rem; }
.centre-head h1 {
  font-family: Outfit, sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem;
}
.centre-sub { color: var(--dim, #8b93a7); margin: 0; font-size: 1.02rem; }

.panel {
  border: 1px solid var(--line, #1e2230); border-radius: 12px;
  padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
  background: var(--panel, #10131b);
}
.panel-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.panel-head h2 { font-family: Outfit, sans-serif; font-size: 1.1rem; font-weight: 650; margin: 0; }
.panel-note { margin-left: auto; color: var(--dim, #8b93a7); font-size: .85rem; text-align: right; }

/* ── The checklist ─────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 1.6rem 1fr auto;
  gap: .9rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--line, #1e2230);
}
.step:first-child { border-top: 0; padding-top: 0; }

.step-mark { font-size: 1.05rem; line-height: 1.4; }
.step[data-state="done"]    .step-mark { color: #43c98b; }
.step[data-state="todo"]    .step-mark { color: var(--brand-soft, #a5b4fc); }
/* Amber, not red: unchecked is not a failure, it is an unanswered question. */
.step[data-state="unknown"] .step-mark { color: #d9a63c; }

.step-title { font-weight: 600; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.step-state {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .12rem .42rem; border-radius: 4px;
  border: 1px solid var(--line, #1e2230); color: var(--dim, #8b93a7);
}
.step[data-state="done"]    .step-state { color: #43c98b; border-color: #1e4735; }
.step[data-state="unknown"] .step-state { color: #d9a63c; border-color: #4a3a15; }

.step-why    { color: var(--dim, #8b93a7); font-size: .9rem; margin-top: .2rem; }
.step-detail { font-size: .92rem; margin-top: .35rem; }
.step-silence {
  margin-top: .5rem; font-size: .86rem; color: #d9a63c;
  display: flex; gap: .45rem; align-items: flex-start;
}

.step-go {
  align-self: center; white-space: nowrap;
  border: 1px solid var(--line, #1e2230); border-radius: 7px;
  padding: .45rem .85rem; font-size: .87rem; font-weight: 550;
  text-decoration: none; color: var(--ink, #e9ecf3);
}
.step-go:hover { border-color: var(--brand, #6366f1); }

@media (max-width: 640px) {
  .step { grid-template-columns: 1.6rem 1fr; }
  .step-go { grid-column: 2; justify-self: start; margin-top: .6rem; }
}

/* ── Departments ───────────────────────────────────────────────────────── */
.departments { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.dept {
  border: 1px solid var(--line, #1e2230); border-radius: 10px;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.dept[data-state="live"] { border-color: #24543c; }
.dept h3 { font-family: Outfit, sans-serif; font-size: 1rem; font-weight: 620; margin: 0; }
.dept p { margin: 0; color: var(--dim, #8b93a7); font-size: .9rem; flex: 1; }
.dept-tag {
  align-self: flex-start; font-size: .68rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .15rem .45rem; border-radius: 4px;
  background: #1a2430; color: var(--dim, #8b93a7);
}
.dept[data-state="live"] .dept-tag { background: #14301f; color: #43c98b; }
.dept-go {
  align-self: flex-start; font-size: .87rem; font-weight: 550;
  text-decoration: none; color: var(--brand-soft, #a5b4fc);
}
/* Absent rather than disabled would be better, but a department with no screen
   still has to say why - so this is text, not a button that does nothing. */
.dept-go.is-flat { color: var(--dim, #8b93a7); font-weight: 400; }

/* ── Where to look ─────────────────────────────────────────────────────── */
.places { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .7rem; }
.place {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--line, #1e2230); border-radius: 10px;
  padding: .9rem 1rem; text-decoration: none; color: inherit;
}
.place:hover { border-color: var(--brand, #6366f1); }
.place-icon {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 7px;
  display: grid; place-items: center; font-size: .82rem;
  background: #171c26; color: var(--brand-soft, #a5b4fc);
}
.place-body { display: flex; flex-direction: column; gap: .15rem; }
.place-name { font-weight: 570; font-size: .95rem; }
.place-what { color: var(--dim, #8b93a7); font-size: .84rem; }