@font-face{font-family:Work Sans;src:url('/artifacts/team-inbox--v1--s4--gpt-6-luna-codex--best-web-design--2026-10-09T23-40-30-497Z/assets/work-sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:Space Grotesk;src:url('/artifacts/team-inbox--v1--s4--gpt-6-luna-codex--best-web-design--2026-10-09T23-40-30-497Z/assets/space-grotesk.ttf') format('truetype');font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('/artifacts/team-inbox--v1--s4--gpt-6-luna-codex--best-web-design--2026-10-09T23-40-30-497Z/assets/ibm-plex-mono.ttf') format('truetype');font-display:swap}
:root{--bg:#f2f3ed;--paper:#fbfcf7;--ink:#202621;--muted:#647067;--line:#c8cec3;--green:#146b4b;--green-dark:#104c39;--orange:#e47743;--todo:#687680;--progress:#146b4b;--blocked:#ad4e36;--done:#586f56;--sans:'Work Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);min-height:100vh}button,input,select{font:inherit;color:inherit}.topbar{height:62px;border-bottom:1px solid var(--line);padding:0 max(28px,calc((100vw - 1320px)/2));display:flex;align-items:center;gap:24px;background:var(--paper)}.brand{height:44px;display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font:700 19px var(--display);letter-spacing:-.06em}.brand-light{font-weight:400;color:var(--muted)}.brand-mark{display:flex;align-items:flex-end;gap:2px;height:17px;padding:2px}.brand-mark i{width:4px;background:var(--green);display:block;border-radius:2px;height:8px}.brand-mark i:nth-child(2){height:13px;background:var(--orange)}.brand-mark i:nth-child(3){height:10px}.team-label{margin:auto;font:500 10px var(--mono);letter-spacing:.08em;color:var(--muted)}.team-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:7px}.slash{color:#a7afa4;padding:0 8px}.avatar{width:32px;height:32px;border:1px solid #c8d1c5;border-radius:50%;background:#e1e9df;color:var(--green-dark);font-size:11px;font-weight:700;cursor:pointer;transition:background .18s,transform .18s}.app-shell{max-width:1320px;margin:auto;padding:30px 30px 50px;display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;transition:grid-template-columns .2s cubic-bezier(.22,1,.36,1)}.app-shell.has-detail{grid-template-columns:minmax(0,1fr) 380px;gap:24px}.queue{min-width:0}.queue-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:21px}.eyebrow,.filter-wrap>span,.list-heading,.queue-foot{font:500 10px var(--mono);letter-spacing:.09em;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow-mark{color:var(--orange);font:700 16px var(--sans)}.eyebrow-date{border-left:1px solid var(--line);padding-left:10px;margin-left:2px;color:#818b81}h1{font:500 clamp(28px,3vw,38px)/1.08 var(--display);letter-spacing:-.055em;margin:8px 0 0}.queue-head h1 span{color:var(--green)}.open-count{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;line-height:1.3}.open-count strong{font:500 39px/.9 var(--display);letter-spacing:-.08em;color:var(--green);font-variant-numeric:tabular-nums}.relay-strip{display:flex;align-items:center;background:var(--green-dark);color:#f5f6ed;padding:12px 18px;margin-bottom:21px;min-height:52px}.relay-step{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px}.relay-step b{font:500 12px var(--mono);color:#fff}.step-dot{height:8px;width:8px;border-radius:50%;display:inline-block;background:#aab5ac}.progress-dot{background:#7cce9f}.blocked-dot{background:#f19271}.done-dot{background:#cedd89}.relay-line{height:1px;background:#60776a;flex:1;margin:0 13px;min-width:10px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:13px}.search-wrap{height:42px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--line);background:var(--paper);width:min(340px,55%);transition:border-color .18s,box-shadow .18s}.search-wrap:focus-within{border-color:var(--green);box-shadow:0 0 0 2px #146b4b26}.search-wrap svg{width:16px;height:16px;fill:none;stroke:#67736a;stroke-width:1.6;flex:none}.search-wrap input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:14px}.search-wrap input::placeholder{color:#818a82}.filter-wrap{display:flex;align-items:center;gap:9px}.filter-wrap>span{font-size:9px}.filter-wrap select,.status-control select{height:40px;border:1px solid var(--line);border-radius:0;background:var(--paper);padding:0 32px 0 11px;font-size:13px;cursor:pointer}.list-heading{display:grid;grid-template-columns:minmax(0,1fr) 140px 90px;gap:12px;border-bottom:1px solid var(--ink);padding:0 12px 8px;font-size:9px}.heading-count{color:var(--green);margin-left:5px}.task-list{border-bottom:1px solid var(--line)}.task-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 90px;gap:12px;align-items:center;position:relative;min-height:61px;padding:8px 12px;border-bottom:1px solid var(--line);background:transparent;transition:background .16s,transform .16s}.task-row:last-child{border-bottom:0}.task-row:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;background:var(--row-color)}.task-title{display:block;text-align:left;border:0;padding:0;background:none;cursor:pointer;font:600 14px/1.3 var(--sans);text-decoration:none}.task-main{min-width:0}.task-meta{display:flex;gap:7px;align-items:center;margin-top:4px;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta-sep{color:#aab1a8}.project-label{color:#4c5e51}.status-pill{justify-self:start;padding:5px 8px;min-height:26px;display:inline-flex;align-items:center;gap:6px;background:var(--status-bg);color:var(--status-ink);font-size:11px;white-space:nowrap}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--status-dot)}.due{justify-self:end;text-align:right;color:#667168;font:11px var(--mono);font-variant-numeric:tabular-nums}.due.overdue{color:#a74732}.priority{font:500 9px var(--mono);letter-spacing:.04em;color:#9a623e;text-transform:uppercase}.priority.high{color:#a74732}.priority.low{color:#6e7a6c}.empty-state{text-align:center;padding:52px 20px;border-bottom:1px solid var(--line)}.empty-state[hidden]{display:none}.empty-symbol{display:grid;place-items:center;margin:0 auto 12px;width:38px;height:38px;border-radius:50%;background:#e3eae1;color:var(--green);font-size:21px}.empty-state h2{font:500 20px var(--display);margin:0 0 5px}.empty-state p{color:var(--muted);font-size:13px;margin:0 0 10px}.text-button{border:0;background:none;color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:38px;padding:4px 8px;font-size:13px}.queue-foot{display:flex;justify-content:space-between;gap:12px;padding:13px 3px;font-size:9px}.queue-foot b{color:var(--orange)}.detail-host:empty{display:none}.detail-panel{position:sticky;top:16px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green);padding:20px 20px 23px;max-height:calc(100vh - 92px);overflow:auto;animation:panel-in .18s cubic-bezier(.22,1,.36,1)}@keyframes panel-in{from{opacity:.6;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}.detail-top{display:flex;justify-content:space-between;align-items:center}.detail-index{font:10px var(--mono);letter-spacing:.09em;color:var(--muted)}.close-detail{border:1px solid var(--line);background:transparent;width:36px;height:36px;cursor:pointer;font-size:19px;line-height:1}.detail-panel h2{font:500 25px/1.15 var(--display);letter-spacing:-.045em;margin:18px 0 12px}.detail-summary{font-size:14px;line-height:1.6;color:#47544a;margin:0 0 18px}.detail-rule{height:1px;background:var(--line);margin:18px 0}.detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}.field-label{font:9px var(--mono);letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:5px}.field-value{font-size:12px;font-weight:600}.field-value.due{justify-self:start;text-align:left;font-size:11px}.tag-list{display:flex;gap:5px;flex-wrap:wrap}.tag{background:#e8ece4;padding:4px 7px;font-size:10px;color:#405447}.detail-body{font-size:13px;line-height:1.65;color:#47544a}.detail-body p{margin:0 0 12px}.detail-body p:last-child{margin-bottom:0}.detail-body strong{color:var(--ink)}.status-control label{font:9px var(--mono);letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}.status-control select{width:100%;font-size:13px}.feedback{min-height:19px;margin-top:8px;color:var(--green);font-size:11px}.toast{position:fixed;right:24px;bottom:22px;background:var(--green-dark);color:#fff;padding:11px 15px;font-size:12px;opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,a:focus-visible,.task-row:focus-within{outline:2px solid var(--green);outline-offset:2px}.filter-wrap select:focus-visible,.status-control select:focus-visible{outline:2px solid var(--green);outline-offset:2px}.task-title:active,.text-button:active,.close-detail:active,.avatar:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.task-row:hover{background:#e8ece4}.task-title:hover{color:var(--green)}.close-detail:hover{background:#e8ece4}.text-button:hover{color:#0d4935}.avatar:hover{background:#d6e2d5}.filter-wrap select:hover,.status-control select:hover{border-color:#7d9180}.relay-step:hover b{color:#cce3ac}}
@media(max-width:900px){.app-shell.has-detail{grid-template-columns:minmax(0,1fr) 330px;gap:16px}.list-heading,.task-row{grid-template-columns:minmax(0,1fr) 125px 74px}.relay-strip{padding-inline:12px}.relay-step{font-size:11px;gap:6px}.relay-line{margin-inline:8px}}
@media(max-width:680px){.topbar{height:56px;padding:0 18px}.team-label{font-size:9px}.app-shell,.app-shell.has-detail{display:block;padding:20px 16px 35px}.app-shell.has-detail .queue{display:none}.detail-panel{position:relative;top:auto;max-height:none;padding:18px}.detail-panel h2{font-size:27px}.queue-head{margin-bottom:16px}h1{font-size:30px}.open-count strong{font-size:32px}.relay-strip{margin-inline:-16px;padding:12px 16px;gap:5px;overflow:hidden}.relay-step{gap:5px;font-size:10px}.relay-step b{font-size:10px}.relay-line{margin-inline:4px;min-width:7px}.toolbar{gap:8px}.search-wrap{width:auto;flex:1;height:42px}.filter-wrap{gap:5px}.filter-wrap>span{display:none}.filter-wrap select{max-width:130px;height:42px;padding-left:8px;padding-right:24px;font-size:12px}.list-heading,.task-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.list-heading span:nth-child(3){display:none}.task-row{min-height:66px;padding:8px 9px 8px 12px}.status-pill{grid-column:2;grid-row:1;justify-self:end;font-size:10px;padding:4px 6px}.task-main{padding-right:0}.task-title{font-size:13px}.task-meta{font-size:10px}.due{grid-column:1;grid-row:2;justify-self:start;margin-top:-8px;font-size:9px}.task-row{grid-template-rows:1fr 14px}.queue-foot{font-size:8px}.queue-foot span:first-child{max-width:48%}.detail-host{position:relative}.detail-fields{grid-template-columns:1fr 1fr}}
@media(max-width:370px){.team-label{letter-spacing:0}.relay-step{font-size:9px}.relay-step b{font-size:9px}.relay-line{margin-inline:2px;min-width:4px}.eyebrow{gap:6px;font-size:9px}.task-title{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.account-mark{width:32px;height:32px;border:1px solid #c8d1c5;border-radius:50%;background:#e1e9df;color:var(--green-dark);font-size:11px;font-weight:700;display:grid;place-items:center}
.task-title{display:flex;min-height:44px;align-items:center}
.close-detail{width:44px;height:44px}
.text-button{min-height:44px}
.filter-wrap select,.status-control select{min-height:44px}
.brand:active,.task-title:active,.text-button:active,.close-detail:active{transform:scale(.98)}
.brand:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.search-wrap input:focus-visible{outline:0}
.filter-wrap select:active,.status-control select:active{background:#e8ece4}
.eyebrow-date{color:#687168}
.priority{color:#79512f}
.priority.high{color:#903b2b}
.priority.low{color:#4f604f}
@media(hover:hover) and (pointer:fine){.brand:hover{text-decoration:underline;text-underline-offset:4px}}
