body { background: var(--paper); }

/* App shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 22px 14px; background: var(--paper-deep); border-right: 1px solid var(--rule); }
.sidebar .logo { padding: 0 10px; }
.side-nav { display: grid; gap: 1px; }
.side-group { margin: 16px 10px 6px; color: var(--faint); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.side-group:first-child { margin-top: 0; }
.role-button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: 0.92rem; text-align: left; }
.role-button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--faint); }
.role-button:hover { background: rgba(22, 24, 29, 0.05); color: var(--ink); }
.role-button.active { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--blue), 0 0 0 1px var(--rule); }
.role-button.active svg { color: var(--blue); }
.side-foot { margin-top: auto; display: grid; gap: 10px; padding: 0 10px; font-size: 0.8rem; }
.side-foot a { color: var(--muted); text-decoration: none; }
.side-foot a:hover { color: var(--ink); }
.connection { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.connection .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.connection.ok .dot { background: var(--green); }
.connection.down .dot { background: var(--red); }

.main { padding: 34px 40px 60px; max-width: 1220px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.page-kicker { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.page-head h1 { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; }
.page-sub { margin-top: 10px; max-width: 620px; color: var(--ink-soft); }
#refreshButton { height: 36px; font-size: 0.85rem; }

/* Progress: a ruled line, not pills */
.steps { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: step; }
.steps li { counter-increment: step; padding-top: 10px; border-top: 3px solid var(--rule); color: var(--faint); font-size: 0.82rem; transition: border-color 0.3s ease, color 0.3s ease; }
.steps li + li { margin-left: 4px; }
.steps li::before { content: counter(step) "  "; font-family: var(--mono); }
.steps li.complete { border-top-color: var(--ink); color: var(--ink-soft); }
.steps li.current { border-top-color: var(--blue); color: var(--blue); font-weight: 600; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.col { display: grid; gap: 24px; }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 24px; }
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin-bottom: 16px; }
.empty { color: var(--faint); font-size: 0.9rem; }

/* Forms */
.action-form + .action-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.form-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { height: 42px; padding: 0 12px; background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
#faceValue, #offerAdvance, #repaymentDate, #issuedDate, #dueDate, #externalInvoiceNumber, #proposalRate { font-family: var(--mono); font-size: 0.9rem; }
.hint { font-size: 0.8rem; color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; font-size: 0.9rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.checks input { accent-color: var(--blue); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.button { height: 40px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--ink); font-weight: 600; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.button-secondary { background: transparent; color: var(--ink); }
.button-secondary:hover { background: var(--ink); color: var(--paper); }
.button:disabled { opacity: 0.4; cursor: default; }
.link-button { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 0.86rem; padding: 4px 0; }
.notice { padding: 14px 16px; border-left: 3px solid var(--rule); background: var(--paper); color: var(--ink-soft); font-size: 0.92rem; }
.notice strong { display: block; color: var(--ink); margin-bottom: 2px; }
.notice + .action-form, .action-form + .notice { margin-top: 18px; }

/* Activity: ledger rows */
.activity { display: grid; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.item:first-child { border-top: 1px solid var(--ink); }
.item-text { display: grid; gap: 1px; min-width: 0; }
.item-title { font-weight: 600; font-size: 0.93rem; }
.item-detail { color: var(--muted); font-size: 0.84rem; }
.badge { flex: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.badge.good { color: var(--green); }
.badge.wait { color: var(--gold); }
.badge.closed { color: var(--faint); }
#toggleActivity { justify-self: start; margin-top: 10px; }
.proposal { padding: 16px 0; border-top: 1px solid var(--rule); }
.proposal:first-of-type { border-top-color: var(--ink); }
.proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.votes { display: flex; gap: 4px; margin: 8px 0 4px; }
.votes span { width: 28px; height: 4px; background: var(--rule); }
.votes span.on { background: var(--blue); }

/* Side column */
.result-box { padding: 14px 16px; border-left: 3px solid; animation: settle 0.3s ease both; }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } }
.result-box.ok { border-color: var(--green); background: var(--green-wash); }
.result-box.fail { border-color: var(--red); background: var(--red-wash); }
.result-title { font-weight: 700; }
.result-box.ok .result-title { color: var(--green); }
.result-box.fail .result-title { color: var(--red); }
.result-message { margin-top: 4px; font-size: 0.9rem; }
.result-box details { margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.result-box summary { cursor: pointer; }
.result-box code { display: block; margin-top: 4px; word-break: break-all; font-family: var(--mono); font-size: 0.72rem; }
.visibility { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.9rem; }
.visibility li { display: flex; gap: 10px; }
.visibility li::before { content: "✓"; color: var(--green); font-weight: 700; }
.visibility li.hidden { color: var(--muted); }
.visibility li.hidden::before { content: "×"; color: var(--red); }
.network dl { margin: 0; display: grid; }
.network dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.88rem; }
.network dl div:first-child { border-top: 1px solid var(--ink); }
.network dt { color: var(--muted); }
.network dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 1060px) { .layout { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; gap: 12px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .side-nav { display: flex; gap: 4px; overflow-x: auto; }
  .side-group, .side-foot { display: none; }
  .role-button { width: auto; white-space: nowrap; }
  .main { padding: 24px 16px 40px; }
  .page-head h1 { font-size: 2rem; }
  .steps li { font-size: 0.7rem; }
  .form-grid { grid-template-columns: 1fr; }
}