:root { --ink:#142832; --navy:#0b202b; --canvas:#f4f6f5; --paper:#fff; --line:#d8dfdc; --muted:#607078; --teal:#006b68; --teal-light:#e2f1ef; --amber:#9b5b00; --amber-light:#fff3de; --red:#9e3429; --red-light:#fceae8; --green:#176447; --green-light:#e5f3eb; }
* { box-sizing:border-box; } body { margin:0; font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--canvas); } button { font:inherit; cursor:pointer; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:2; padding:.6rem; background:#fff; }
.shell { min-height:100vh; display:grid; grid-template-columns:248px 1fr; grid-template-rows:64px 1fr; } .topbar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:var(--navy); color:#e9f0f0; border-bottom:1px solid #29404a; } .brand { display:flex; gap:10px; align-items:center; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.02em; } .brand span { display:grid; place-items:center; width:30px; height:30px; background:#21a39b; color:#082028; font-size:11px; border-radius:3px; } .workspace { color:#b7c7ca; } .dot { display:inline-block; width:5px; height:5px; margin:0 8px 2px; background:#47b78d; border-radius:50%; } .profile { display:flex; align-items:center; gap:8px; } .avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#3c5860; font-size:10px; }
.sidebar { grid-column:1; padding:26px 14px; background:#102832; color:#c5d0d1; } .section-label,.eyebrow { margin:0 0 8px; color:#6d858c; font-size:10px; font-weight:700; letter-spacing:.11em; } .sidebar .section-label { padding:0 10px; margin-top:14px; } .nav-item { width:100%; display:flex; justify-content:space-between; margin:3px 0; padding:10px; color:inherit; background:transparent; border:0; border-radius:4px; text-align:left; } .nav-item:hover,.nav-item.active { background:#1c404b; color:#fff; } .nav-item span { color:#a8bbbd; font-size:11px; } .support-note { margin:28px 8px; padding:14px 0; color:#aebfc2; border-top:1px solid #38505a; font-size:12px; }
main { padding:36px clamp(24px,5vw,76px); max-width:1440px; width:100%; } .screen { display:none; } .screen.active { display:block; } .title-row { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:26px; } h1,h2 { margin:0; letter-spacing:-.025em; } h1 { font-size:29px; } h2 { font-size:19px; } .muted,.card p { color:var(--muted); } .button { padding:10px 15px; border:1px solid var(--teal); border-radius:3px; color:#fff; background:var(--teal); font-weight:700; } .button:hover { background:#005653; } .button.secondary { color:#21515a; background:#fff; border-color:#a9bbbc; } .button.disabled,.button:disabled { background:#b2bdbd; border-color:#b2bdbd; cursor:not-allowed; } .stepper { display:flex; gap:0; margin:0 0 24px; overflow:auto; border-bottom:1px solid var(--line); } .stepper span { padding:10px 13px; white-space:nowrap; color:var(--muted); border-bottom:3px solid transparent; } .stepper .complete { color:var(--green); } .stepper .current { color:var(--ink); font-weight:700; border-color:var(--teal); }
.workspace-grid,.gate-grid,.inbox-layout { display:grid; gap:22px; } .workspace-grid { grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); } .gate-grid { grid-template-columns:minmax(0,2fr) minmax(240px,.7fr); } .inbox-layout { grid-template-columns:300px minmax(0,1fr); } .card { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:5px; box-shadow:0 1px 1px rgba(12,37,45,.03); } .card-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; } .status { display:inline-block; padding:3px 7px; border-radius:2px; font-size:11px; font-weight:700; white-space:nowrap; } .clear,.release { color:var(--green); background:var(--green-light); } .pending { color:var(--amber); background:var(--amber-light); } .muted-status { color:#56676c; background:#edf0ef; } .line-item { display:flex; align-items:flex-start; gap:14px; padding:15px 0; border-top:1px solid var(--line); } .line-number { display:grid; place-items:center; flex:none; width:28px; height:28px; color:var(--teal); background:var(--teal-light); font-weight:700; font-size:11px; } .line-item p { margin:3px 0 8px; } .quiet-button { margin-left:auto; padding:5px 0; color:var(--teal); background:transparent; border:0; font-weight:700; } .tag { display:inline-block; margin:0 4px 3px 0; padding:3px 5px; color:#426066; background:#eff3f2; font-size:11px; } .add-line { width:100%; margin-top:12px; padding:10px; color:var(--teal); background:#f6fbfa; border:1px dashed #91b6b4; font-weight:700; } .decision-card { border-top:3px solid #c08319; } .classification { display:grid; gap:7px; margin:16px 0; } .class-option { display:grid; grid-template-columns:16px 1fr; column-gap:9px; padding:10px; text-align:left; background:#fff; border:1px solid var(--line); } .class-option.selected { border-color:var(--teal); background:#f5fbfa; } .class-option span { width:13px; height:13px; margin-top:3px; border:1px solid #86989a; border-radius:50%; } .class-option.selected span { border:4px solid var(--teal); } .class-option small { grid-column:2; color:var(--muted); } .notice { margin:17px 0; padding:12px; border-left:3px solid; font-size:13px; } .notice.hold { color:#664005; background:var(--amber-light); border-color:#d4901d; } .notice.neutral { color:#315158; background:#edf5f4; border-color:#6da7a3; } .notice.wide { margin-top:-6px; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { padding:8px 10px; color:#627379; background:#f3f6f5; text-align:left; font-size:10px; letter-spacing:.07em; text-transform:uppercase; } td { padding:13px 10px; border-bottom:1px solid var(--line); vertical-align:top; } td small { color:var(--muted); } .checklist { padding:0; margin:14px 0 24px; list-style:none; } .checklist li { padding:9px 0 9px 24px; border-bottom:1px solid var(--line); color:var(--muted); } .checklist li::before { position:absolute; margin-left:-24px; content:'○'; color:#829193; } .checklist .done { color:var(--green); } .checklist .done::before { content:'✓'; } .checklist .blocked { color:var(--red); } .checklist .blocked::before { content:'!'; font-weight:900; } .help-text { color:var(--muted); font-size:12px; }
.inbox-list { padding:8px; } .invite { width:100%; display:grid; gap:3px; padding:14px; color:var(--ink); text-align:left; background:#fff; border:0; border-bottom:1px solid var(--line); } .invite:hover,.invite.selected { background:#eef7f6; box-shadow:inset 3px 0 var(--teal); } .invite span,.invite small { color:var(--muted); } .invitation-detail dl { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; } .invitation-detail dl div { border-top:1px solid var(--line); padding-top:8px; } dt { color:var(--muted); font-size:11px; } dd { margin:3px 0 0; font-weight:700; } .action-row { display:flex; gap:10px; }
@media (max-width:850px) { .shell { grid-template-columns:1fr; grid-template-rows:58px auto 1fr; } .topbar { padding:0 16px; } .workspace,.profile span:last-child { display:none; } .sidebar { display:flex; gap:5px; overflow:auto; padding:8px 12px; } .sidebar .section-label,.support-note { display:none; } .nav-item { width:auto; white-space:nowrap; } main { padding:25px 18px; } .workspace-grid,.gate-grid,.inbox-layout { grid-template-columns:1fr; } .title-row { flex-direction:column; gap:12px; } .invitation-detail dl { grid-template-columns:1fr; gap:10px; } }
.form-stack { display:grid; gap:14px; } .form-stack label { display:grid; gap:6px; color:#28434a; font-weight:700; } .form-stack input,.form-stack textarea,.form-stack select { width:100%; padding:10px; color:var(--ink); background:#fff; border:1px solid #b7c5c5; border-radius:3px; font:inherit; font-weight:400; } .form-stack textarea { resize:vertical; } .label-note { color:var(--muted); font-size:11px; font-weight:400; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .form-feedback { min-height:20px; margin:0; color:var(--muted); } .form-feedback.success { color:var(--green); } .form-feedback.error { color:var(--red); } .onboarding-card { margin-top:22px; } .result-list { display:grid; gap:8px; } .directory-result { border:1px solid var(--line); padding:12px; background:#fbfdfd; } .directory-result strong { display:block; color:var(--ink); } .directory-result small { display:block; color:var(--muted); margin-top:4px; } @media (max-width:850px) { .form-grid { grid-template-columns:1fr; } }