/* Super Dashboard — the design's values, lifted out of the prototype's inline
   styles. Light theme only, dense, 2px radius at most, no shadows: rules and
   whitespace do the separating. Mono means the system recorded it (ids, dates,
   statuses, counts); sans means language a human wrote. */

:root {
  --bg: #fbfbfa;
  --panel: #fff;
  --ink: #1a1a18;
  --ink-2: #2b2b27;
  --ink-3: #3d3d38;
  --ink-4: #4f4f48;
  --muted: #6f6f68;
  --muted-2: #8a8a82;
  --faint: #a3a39b;
  --faintest: #c3c3ba;
  --rule: #e6e6e1;
  --rule-light: #eeeee9;
  --rule-lighter: #efefeb;
  --field: #d3d3cc;
  --hover: #f1f1ec;
  --hover-2: #f4f4f0;
  --selected: #ebebe5;
  --ok: oklch(0.55 0.10 150);
  --bad: oklch(0.54 0.13 25);
  --warn: oklch(0.60 0.09 75);
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--ink);
  height: 100vh;
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #e8e8e2; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--field); }
a:hover { color: #000; border-bottom-color: var(--ink); }
a.plain, a.plain:hover { border-bottom: 0; }

input, select, textarea, button { font-family: var(--sans); font-size: 13px; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--ink); outline-offset: -1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

input, select, textarea {
  padding: 9px 10px;
  border: 1px solid var(--field);
  background: #fff;
  border-radius: 2px;
}
select { padding: 8px 10px; }

/* ---------- type ---------- */
.eyebrow {
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow-wide { letter-spacing: .14em; }
.mono { font: 500 10.5px var(--mono); color: var(--muted-2); }
.mono-sm { font: 500 10px var(--mono); color: var(--faint); }
h1 { margin: 12px 0 0; font-size: 26px; font-weight: 500; letter-spacing: -.015em; }
h1.sm { font-size: 21px; letter-spacing: -.01em; }
p { text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--field);
  background: #fff;
  border-radius: 2px;
  padding: 8px 13px;
  font-size: 12.5px;
  cursor: pointer;
}
.btn:hover { background: var(--hover-2); }
.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-primary {
  border: 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: 2px;
  padding: 9px 15px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary:hover { background: #000; }
.btn-primary.wide { width: 100%; padding: 11px; letter-spacing: .01em; }
.btn-dash {
  border: 1px dashed var(--field);
  background: none;
  border-radius: 2px;
  padding: 6px 11px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}
.btn-dash:hover { background: var(--hover-2); color: var(--ink); }
.btn-quiet {
  border: 0; background: none; padding: 1px 0; cursor: pointer;
  font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
}
.btn-quiet:hover { color: var(--ink); }
.btn-status {
  border: 1px solid var(--field); background: #fff; border-radius: 2px;
  padding: 4px 9px; font: 500 10px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.btn-status:hover { background: var(--hover); }

/* ---------- login ---------- */
.login-wrap { flex: 1; display: flex; justify-content: center; padding: 24px; overflow: auto; }
.login { width: 100%; max-width: 352px; margin: auto; }
.login .lede { margin: 8px 0 26px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.field-group { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.error { font-size: 12px; line-height: 1.5; color: var(--bad); }
.notice { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 12px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ---------- client shell ---------- */
.rail {
  width: 272px; flex: 0 0 272px;
  border-right: 1px solid var(--rule);
  background: var(--bg);
  display: flex; flex-direction: column; height: 100vh;
}
.rail-head { padding: 22px 20px 16px; border-bottom: 1px solid var(--rule); }
.rail-project { margin-top: 7px; font-size: 16px; font-weight: 500; letter-spacing: -.005em; }
.rail-meta { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); }
.rail-nav { padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 1px; }
.rail-section { padding: 14px 20px 6px; border-top: 1px solid var(--rule); margin-top: 6px; }
.rail-list { flex: 1; overflow: auto; padding: 2px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.rail-foot {
  border-top: 1px solid var(--rule); padding: 12px 20px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nav-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: 0; border-radius: 2px;
  padding: 7px 10px; cursor: pointer; font-size: 13px;
  background: transparent; color: var(--ink); text-decoration: none;
}
.nav-item:hover { background: var(--hover); border-bottom: 0; }
.nav-item.on { background: var(--selected); font-weight: 500; }
.nav-item .meta { font: 500 10px var(--mono); color: var(--faint); }
.week-item { padding: 8px 10px; align-items: baseline; }
.week-item .label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week-item .range { font: 500 10px var(--mono); color: var(--faint); }
.week-item .status {
  font: 500 9.5px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who .name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .role { font: 500 10px var(--mono); color: var(--muted-2); }

.main { flex: 1; overflow: auto; background: var(--panel); }
.page { max-width: 760px; padding: 44px 48px 120px; }

/* ---------- overview ---------- */
.thesis { margin: 14px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: -.005em; }
.block { margin-top: 38px; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 8px;
}
.row { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule-light); }
.row.top { align-items: flex-start; }
.row .n { font: 500 11px var(--mono); color: var(--faint); padding-top: 2px; }
.row .body { font-size: 14px; line-height: 1.55; }
.row .grow { flex: 1; font-size: 14px; line-height: 1.5; }
.dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  margin-top: 5px; border: 1px solid transparent;
}
.dot.complete { background: var(--ink); }
.dot.active { background: var(--ok); }
.dot.planned, .dot.proposed { background: transparent; border-color: var(--faintest); }
.phase-window { font: 500 10.5px var(--mono); color: var(--muted-2); white-space: nowrap; }
.phase-status {
  font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); width: 66px; text-align: right;
}
.direction { margin-top: 38px; border-top: 1px solid var(--ink); padding-top: 14px; }
.direction p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.actions { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- report ---------- */
.report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.report-range { margin-top: 6px; font: 500 11.5px var(--mono); color: var(--muted-2); }
.report-tools { display: flex; gap: 8px; padding-top: 4px; }
.report-tools .btn { padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.lead { margin: 24px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.stats {
  margin-top: 26px; display: flex; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
}
.stat {
  flex: 1 1 148px; min-width: 148px; padding: 14px 16px;
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  margin-left: -1px; margin-top: -1px;
}
.stat .v { font-size: 23px; letter-spacing: -.02em; line-height: 1.1; }
.stat .l {
  margin-top: 5px; font: 500 10px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.5;
}
.expand-bar {
  margin-top: 26px; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; border-top: 1px solid var(--rule); padding-top: 12px;
}
.expand-bar .hint {
  font: 500 10px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.sections { margin-top: 26px; display: flex; flex-direction: column; gap: 34px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 6px;
}
.section-count { font: 500 10px var(--mono); color: var(--faintest); }
.item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 0; border-top: 1px solid var(--rule-light);
}
.item .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.item .headline {
  font-size: 14.5px; line-height: 1.5; font-weight: 500; letter-spacing: -.005em;
}
.item a.headline { align-self: flex-start; font-weight: 400; }
.item .detail { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.item .meta {
  font: 500 10px var(--mono); letter-spacing: .04em; color: var(--faint);
  white-space: nowrap; padding-top: 3px;
}
details.more { margin: 0; }
details.more > summary {
  list-style: none; align-self: flex-start; display: inline-block;
  cursor: pointer; padding: 1px 0;
  font: 500 10px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--ink); }
details.more > summary::after { content: 'More detail'; }
details.more[open] > summary::after { content: 'Less'; }
details.more .more-body {
  margin: 8px 0 0; padding: 2px 0 2px 15px; border-left: 1px solid var(--field);
  font-size: 13px; line-height: 1.75; color: var(--ink-4);
}
.report-foot {
  margin-top: 44px; border-top: 1px solid var(--rule); padding-top: 12px;
  font: 500 10.5px var(--mono); letter-spacing: .04em; color: var(--muted-2); line-height: 1.7;
}

/* ---------- roadmap ---------- */
.sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.phases { margin-top: 34px; display: flex; flex-direction: column; gap: 30px; }
.phase-head {
  display: flex; gap: 12px; align-items: baseline;
  border-bottom: 1px solid var(--ink); padding-bottom: 8px;
}
.phase-head .dot { margin-top: 0; }
.phase-head .name { flex: 1; font-size: 15px; font-weight: 500; }
.milestone {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule-light);
}
.milestone .mark { font: 500 11px var(--mono); color: var(--faint); width: 14px; }
.milestone .name { flex: 1; font-size: 14px; line-height: 1.5; }
.milestone.done .name { color: var(--muted-2); }
.date { font: 500 10.5px var(--mono); color: var(--muted-2); white-space: nowrap; }
.date.none { color: var(--faintest); }
.proposals { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.proposal { border: 1px solid var(--rule); border-radius: 2px; padding: 16px 18px; background: #fff; }
.proposal.decided { background: var(--bg); }
.proposal-head { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.proposal-head .title { font-size: 15px; font-weight: 500; }
.proposal .scope { margin: 9px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.proposal .note { margin: 7px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.proposal .foot { margin-top: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-tag {
  font: 500 9.5px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- billing ---------- */
.terms {
  margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 2px;
}
.term { background: #fff; padding: 16px 18px; }
.term .value { margin-top: 8px; font-size: 16px; letter-spacing: -.005em; }
.term .note { margin-top: 4px; font-size: 12px; color: var(--muted-2); }
.invoice { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule-light); }
.invoice .id { font: 500 11.5px var(--mono); width: 110px; }
.invoice .dated { flex: 1; font-size: 13px; color: var(--muted); }
.invoice .amount { font-size: 13.5px; width: 84px; text-align: right; }
.invoice .status { width: 74px; text-align: right; }

/* ---------- admin ---------- */
.admin { flex: 1; display: flex; flex-direction: column; height: 100vh; background: #fff; overflow: hidden; }
.admin-head { border-bottom: 1px solid var(--rule); padding: 16px 32px 0; background: var(--bg); }
.admin-head .bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.admin-tabs { display: flex; gap: 2px; margin-top: 16px; }
.admin-tab {
  border: 0; border-bottom: 2px solid transparent; background: none;
  padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--muted-2);
  text-decoration: none; display: inline-block;
}
.admin-tab:hover { color: var(--ink); border-bottom-color: transparent; }
.admin-tab.on { border-bottom-color: var(--ink); color: var(--ink); font-weight: 500; }
.admin-body { flex: 1; overflow: auto; padding: 32px 32px 120px; }
.admin-inner { max-width: 900px; }
.card {
  margin-top: 28px; border: 1px solid var(--rule); border-radius: 2px;
  padding: 18px; background: var(--bg);
}
.card-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid-row { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule-light); }
.paste {
  margin-top: 14px; width: 100%; height: 280px; padding: 14px;
  font: 400 12px/1.65 var(--mono); resize: vertical;
}
.spec {
  margin: 0; padding: 16px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--bg); font: 400 11.5px/1.7 var(--mono);
  overflow: auto; white-space: pre-wrap;
}
.format-tab {
  border: 1px solid var(--field); background: #fff; color: var(--muted);
  border-radius: 2px; padding: 6px 11px;
  font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.format-tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.msg { font-size: 12.5px; color: var(--ink-3); }
.edit-line { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-light); }
.edit-line input[type=text] { padding: 6px 8px; font-size: 13.5px; }
.check {
  width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--field);
  background: #fff; border-radius: 2px; cursor: pointer;
  font: 500 11px var(--mono); color: var(--ink); padding: 0;
}
.check:hover { background: var(--hover); }
.billing-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 8px;
}
.stack { display: flex; flex-direction: column; gap: 38px; }
.inline-field { display: flex; flex-direction: column; gap: 5px; }
.inline-field .field-label { letter-spacing: .1em; }

/* ---------- status colours ---------- */
.s-live, .s-active, .s-paid, .s-complete, .s-approved { color: var(--ok); }
.s-overdue, .s-declined { color: var(--bad); }
.s-open, .s-pending { color: var(--warn); }
.s-none, .s-published, .s-planned, .s-proposed, .s-paused { color: var(--faint); }

.flash {
  margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--rule);
  border-left: 2px solid var(--ink); border-radius: 2px;
  background: var(--bg); font-size: 13px; line-height: 1.55;
}

@media (max-width: 860px) {
  body { overflow: auto; }
  .rail { width: 100%; flex: none; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  body.client { flex-direction: column; }
  .rail-list { max-height: 260px; }
  .page { padding: 28px 20px 90px; }
  .admin-body { padding: 24px 20px 90px; }
  .admin-head { padding: 14px 20px 0; }
  .terms { grid-template-columns: 1fr; }
}