/* Relay — Team Inbox Styles */
@font-face {
  font-family: "Work Sans";
  src: url("assets/work-sans.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root{
  --bg:#F7F4EE;
  --surface:#FFFFFF;
  --surface-2:#EDE9E1;
  --surface-3:#F1EFE8;
  --ink:#161A1C;
  --muted:#6B7478;
  --muted-2:#8A9196;
  --border:#DDD8CE;
  --border-strong:#C8C2B6;
  --accent:#0F766E;
  --accent-hover:#115E59;
  --accent-ink:#FFFFFF;
  --focus:#0F766E;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;

  --todo-bg:#EFF1F4;
  --todo-fg:#374151;
  --todo-dot:#6B7280;
  --ip-bg:#EFF6FF;
  --ip-fg:#1E40AF;
  --ip-dot:#2563EB;
  --blocked-bg:#FEF2F2;
  --blocked-fg:#991B1B;
  --blocked-dot:#DC2626;
  --done-bg:#ECFDF5;
  --done-fg:#065F46;
  --done-dot:#059669;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
button,select,input{font:inherit}

.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--ink); color:white; padding:8px 12px; border-radius:6px; text-decoration:none;
}
.skip-link:focus{left:12px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(247,244,238,0.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700; font-size:22px; letter-spacing:0.08em;
}
.brand-sub{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:500;
}
.brand-sep{width:1px; height:32px; background:var(--border); margin-inline:4px}
.brand-meta{display:flex; flex-direction:column; line-height:1.1}
.brand-meta-label{font-size:12px; font-weight:600; letter-spacing:0.04em}
.brand-meta-sub{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono", monospace}
.topbar-right{display:flex; align-items:center; gap:14px}
.live-indicator{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
.live-dot{width:7px; height:7px; border-radius:50%; background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,0.15)}
.live-count{font-weight:500; color:var(--muted); font-family:"IBM Plex Mono", monospace; font-size:11px}
.avatar-stack{display:flex; align-items:center}
.avatar{
  width:28px; height:28px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--c); color:#1A1A1A; font-size:11px; font-weight:700;
  border:2px solid var(--surface); margin-left:-6px;
  font-family:"Space Grotesk", sans-serif;
}
.avatar:first-child{margin-left:0}
.avatar.more{background:var(--ink); color:white; font-size:10px}

/* Toolbar */
.toolbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.toolbar-inner{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:16px 20px 14px;
  gap:20px; flex-wrap:wrap;
}
.toolbar-left{min-width:200px}
.toolbar-title{
  margin:0; font-size:28px; line-height:1; font-weight:700; letter-spacing:-0.02em;
  font-family:"Space Grotesk", sans-serif;
}
.toolbar-count{margin:4px 0 0; font-size:12px; color:var(--muted); font-family:"IBM Plex Mono", monospace}
.toolbar-right{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.control{display:flex; flex-direction:column; gap:6px}
.control-label{
  font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  font-family:"IBM Plex Mono", monospace;
}
.search-control{width:280px}
.search-field{
  display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; min-height:44px;
  transition:border-color 150ms cubic-bezier(0.22,1,0.36,1), background 150ms;
}
.search-field:focus-within{border-color:var(--accent); background:white; box-shadow:0 0 0 3px rgba(15,118,110,0.12)}
.search-field input{
  border:0; background:transparent; outline:0; width:100%; font-size:14px; min-height:20px;
}
.select-wrap{
  position:relative; background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.select-wrap select{
  appearance:none; border:0; background:transparent; padding:12px 32px 12px 12px; font-size:14px; font-weight:500; min-width:172px; cursor:pointer; min-height:44px;
}
.select-wrap::after{
  content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:12px;
}

/* Tray bar */
.tray-bar{
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.tray-bar::-webkit-scrollbar{display:none}
.tray-bar-inner{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; gap:8px;
  padding:10px 20px;
  min-width:max-content;
}
.tray{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  min-height:44px;
  transition:transform 150ms cubic-bezier(0.22,1,0.36,1), border-color 150ms, background 150ms, color 150ms;
}
.tray-count{
  background:var(--bg); border:1px solid var(--border); padding:1px 7px; border-radius:999px; font-size:11px; font-family:"IBM Plex Mono", monospace; font-weight:600;
}
.tray.is-active{background:var(--ink); color:white; border-color:var(--ink)}
.tray.is-active .tray-count{background:white; color:var(--ink); border-color:white}
.tray-dot{width:8px; height:8px; border-radius:50%; background:var(--dot); flex-shrink:0}
.tray-legend{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted-2); font-family:"IBM Plex Mono", monospace; white-space:nowrap}

/* Workspace */
.workspace{
  max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:1.55fr 0.92fr;
  gap:18px; padding:18px 20px 24px;
  align-items:start;
}
.list-pane,.detail-pane{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.pane-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #FFFFFF 0%, #FBF9F6 100%);
}
.pane-heading{
  margin:0; font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-family:"IBM Plex Mono", monospace;
}
.pane-meta{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono", monospace}
.pane-actions{font-size:11px; color:var(--muted-2); font-family:"IBM Plex Mono", monospace}
.sort-hint{border:1px solid var(--border); padding:3px 8px; border-radius:999px; background:var(--surface)}

.task-list{list-style:none; margin:0; padding:0}
.task-row{
  display:grid; grid-template-columns:1fr auto;
  gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:white;
  position:relative;
}
.task-row:last-child{border-bottom:0}
.task-row.is-selected{background:#FFFBEB; border-left:3px solid #F59E0B; padding-left:13px}
.task-main{min-width:0}
.task-topline{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; border:1px solid transparent;
  font-family:"IBM Plex Mono", monospace;
  line-height:1;
}
.status-pill[data-status="todo"]{background:var(--todo-bg); color:var(--todo-fg); border-color:#D1D5DB}
.status-pill[data-status="in-progress"]{background:var(--ip-bg); color:var(--ip-fg); border-color:#BFDBFE}
.status-pill[data-status="blocked"]{background:var(--blocked-bg); color:var(--blocked-fg); border-color:#FECACA}
.status-pill[data-status="done"]{background:var(--done-bg); color:var(--done-fg); border-color:#A7F3D0}
.status-pill i{width:7px; height:7px; border-radius:50%; display:inline-block}
.status-pill[data-status="todo"] i{background:var(--todo-dot)}
.status-pill[data-status="in-progress"] i{background:var(--ip-dot)}
.status-pill[data-status="blocked"] i{background:var(--blocked-dot)}
.status-pill[data-status="done"] i{background:var(--done-dot)}
.priority-flag{
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 6px; border-radius:6px; border:1px solid var(--border);
  font-family:"IBM Plex Mono", monospace;
}
.priority-flag.high{background:#FEF2F2; color:#991B1B; border-color:#FECACA}
.priority-flag.medium{background:#FFFBEB; color:#92400E; border-color:#FDE68A}
.priority-flag.low{background:#F3F4F6; color:#374151; border-color:#E5E7EB}
.task-title{
  margin:0; font-size:15px; font-weight:650; line-height:1.25; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.task-summary{
  margin:6px 0 0; font-size:13px; color:#4B5563; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.task-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; font-size:12px; color:var(--muted);
}
.assignee{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink); font-size:12px;
}
.avatar-sm{
  width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border); font-size:9px; font-weight:700; font-family:"Space Grotesk", sans-serif;
}
.project-pill{
  background:var(--surface-2); border:1px solid var(--border); padding:3px 8px; border-radius:999px;
  font-size:11px; font-weight:600; font-family:"IBM Plex Mono", monospace;
}
.due{
  display:inline-flex; align-items:center; gap:4px; font-family:"IBM Plex Mono", monospace; font-size:11px;
}
.due.overdue{color:#B91C1C; font-weight:700}
.comments{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); padding:3px 7px; border-radius:999px;
}
.task-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; justify-content:center;
}
.open-btn{
  appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--ink);
  padding:10px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  min-height:44px; min-width:64px;
  transition:transform 150ms cubic-bezier(0.22,1,0.36,1), background 150ms, border-color 150ms, color 150ms;
}
.open-btn:hover{border-color:var(--accent)}
.task-row:focus-within{outline:0}
.task-row:has(.open-btn:focus-visible){box-shadow:inset 0 0 0 2px var(--accent)}

/* Detail pane */
.detail-shell{min-height:520px; position:relative}
.detail-placeholder{
  padding:28px 20px 20px; position:relative; overflow:hidden;
}
.placeholder-card{
  background:var(--surface); border:1px dashed var(--border-strong); border-radius:12px; padding:18px; max-width:420px;
}
.placeholder-card h3{margin:6px 0 6px; font-size:16px; font-weight:700}
.placeholder-card p{margin:0 0 14px; font-size:13px; color:var(--muted); line-height:1.5}
.placeholder-icon{width:36px; height:36px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--border); border-radius:8px}
.placeholder-hints{display:flex; gap:8px; flex-wrap:wrap; font-size:11px; font-family:"IBM Plex Mono", monospace; color:var(--muted)}
.placeholder-hints span{background:var(--bg); border:1px solid var(--border); padding:4px 7px; border-radius:6px}
.placeholder-hints kbd{font-family:inherit; font-weight:700}
.desk-stamp{
  position:absolute; right:12px; bottom:12px; transform:rotate(-2deg);
  border:2px solid #C8C2B6; color:#8A7F6D; padding:8px 10px; border-radius:8px;
  display:flex; flex-direction:column; gap:2px; font-family:"IBM Plex Mono", monospace; font-size:10px; line-height:1; opacity:0.7; background:rgba(255,255,255,0.6)
}
.desk-stamp span:first-child{font-weight:800; font-size:14px; letter-spacing:0.12em}

/* Detail article */
.detail-article{padding:0}
.detail-head{
  padding:16px 16px 12px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:2;
}
.detail-head-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.detail-kicker{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.detail-id{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:0.06em}
.close-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:background 150ms, transform 150ms;
}
.detail-title{
  margin:0; font-size:20px; line-height:1.2; font-weight:750; letter-spacing:-0.02em; font-family:"Space Grotesk", sans-serif;
}
.detail-meta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}
.meta-item{display:flex; flex-direction:column; gap:2px}
.meta-label{font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:700; font-family:"IBM Plex Mono", monospace}
.meta-value{font-size:13px; font-weight:600}
.meta-value.mono{font-family:"IBM Plex Mono", monospace; font-size:12px}
.detail-body{padding:16px 16px 14px}
.detail-body p{margin:0 0 12px; font-size:14px; line-height:1.6; color:#1F2937}
.detail-body p:last-child{margin-bottom:0}
.detail-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.tag{font-size:11px; font-weight:600; padding:4px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-family:"IBM Plex Mono", monospace}
.detail-actions{
  padding:14px 16px 16px; border-top:1px solid var(--border); background:#FBF9F6;
}
.status-control-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.status-label{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-family:"IBM Plex Mono", monospace; color:var(--muted)}
.status-select{
  min-width:180px; padding:9px 32px 9px 12px; border-radius:10px; border:1px solid var(--border); background:white; font-weight:600; cursor:pointer;
}
.status-feedback{
  margin-top:10px; font-size:12px; font-weight:600; color:var(--accent); min-height:16px; font-family:"IBM Plex Mono", monospace;
}
.detail-foot{
  padding:10px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface);
}
.detail-foot small{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono", monospace}
.btn{
  appearance:none; border-radius:999px; padding:12px 16px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent; min-height:44px;
  transition:transform 150ms cubic-bezier(0.22,1,0.36,1), background 150ms, border-color 150ms, color 150ms;
}
.btn-primary{background:var(--accent); color:white; border-color:var(--accent)}
.btn-ghost{background:white; border-color:var(--border); color:var(--ink)}
.btn:active{transform:scale(0.97)}

/* Empty */
.empty-state{padding:28px 20px; text-align:center; border-top:1px solid var(--border); background:var(--surface)}
.empty-title{margin:14px 0 6px; font-size:16px; font-weight:700}
.empty-text{margin:0 auto 14px; max-width:34ch; font-size:13px; color:var(--muted); line-height:1.5}
.empty-state .btn + .btn{margin-left:8px}

/* Toast */
.toast-region{position:fixed; right:16px; bottom:16px; z-index:50; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{
  background:var(--ink); color:white; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.18); display:flex; align-items:center; gap:8px;
  animation:toastIn 220ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes toastIn{from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1}}

/* Footer */
.footer{border-top:1px solid var(--border); background:var(--surface-2); margin-top:8px}
.footer-inner{max-width:1440px; margin:0 auto; padding:14px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.footer-mark{font-weight:800; letter-spacing:0.12em; color:var(--ink); font-family:"Space Grotesk", sans-serif}
.footer-left{display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:60ch}
.footer-right{display:flex; flex-direction:column; gap:2px; text-align:right}
.footer-meta{font-family:"IBM Plex Mono", monospace}

/* Overlay for mobile */
.detail-overlay{
  position:fixed; inset:0; z-index:40;
  background:rgba(22,26,28,0.42); backdrop-filter:blur(4px);
  padding:12px; overflow:auto;
}
.detail-overlay-inner{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; max-width:560px; margin:40px auto; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
}

/* Utilities */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Focus - per context */
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
:focus{outline:2px solid var(--focus); outline-offset:2px}
button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
select:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
input:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
a:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.tray:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.open-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 4px rgba(15,118,110,0.12)}
.close-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.status-select:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
button:focus:not(:focus-visible), select:focus:not(:focus-visible), input:focus:not(:focus-visible){outline:none}

/* Hover media query - all hovers inside */
@media (hover:hover) and (pointer:fine){
  .tray:hover{transform:translateY(-1px); border-color:var(--border-strong)}
  .tray.is-active:hover{background:#1F2426}
  .task-row:hover{background:#FFFBEB}
  .open-btn:hover{background:var(--ink); color:white; border-color:var(--ink)}
  .close-btn:hover{background:var(--bg)}
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-ghost:hover{border-color:var(--border-strong); background:#F9F7F3}
  .search-field:hover{border-color:var(--border-strong)}
}

/* Responsive */
@media (max-width:960px){
  .workspace{grid-template-columns:1fr}
  .detail-pane{display:none}
  .detail-pane.has-detail{display:block}
  .detail-overlay[hidden]{display:none !important}
  .detail-overlay{display:block}
  .search-control{width:200px}
}
@media (max-width:640px){
  .topbar-inner{padding:10px 12px}
  .brand-meta{display:none}
  .brand-sep{display:none}
  .toolbar-inner{padding:14px 14px 12px}
  .search-control{width:100%}
  .toolbar-right{width:100%}
  .tray-bar-inner{padding-inline:14px}
  .workspace{padding:12px 12px 16px; gap:12px}
  .list-pane,.detail-pane{border-radius:12px}
  .task-row{grid-template-columns:1fr; padding:14px 14px}
  .task-actions{flex-direction:row; justify-content:space-between; align-items:center}
  .open-btn{width:100%}
  .detail-meta-grid{grid-template-columns:1fr}
  .footer-right{text-align:left}
}
@media (max-width:390px){
  body{overflow-x:clip}
  .toolbar-title{font-size:24px}
  .topbar-right .avatar-stack{display:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Press states */
.tray:active{transform:scale(0.97)}
.open-btn:active{transform:scale(0.97)}
.close-btn:active{transform:scale(0.97)}
.btn:active{transform:scale(0.97)}

/* Additional hover for coverage */
@media (hover:hover) and (pointer:fine){
  .status-pill:hover{filter:brightness(0.97)}
  .project-pill:hover{background:white}
  .tag:hover{background:white}
  .avatar:hover{transform:translateY(-1px)}
  .pane-header:hover{background:#FBF9F6}
  .detail-head:hover{background:#FFFDF8}
  .placeholder-card:hover{border-color:var(--accent)}
}