/* Techshin Streams — shared design system (matches techshin-map/pipeline look) */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#F6F4F0;--card-bg:#fff;--ink:#041729;--border:#E0DCD6;--border-l:#EDE9E4;
  --text:#041729;--mid:#3D3935;--muted:#6B6560;--faint:rgba(4,23,41,0.22);
  --amber:#C89B2C;--amber-bg:rgba(200,155,44,0.08);--amber-t:#92400E;
  --green:#16A34A;--green-bg:#EDFAF3;--green-t:#166534;
  --red:#EF4444;--red-bg:#FEF0F0;--red-t:#991B1B;
  --blue:#1E40AF;--blue-bg:#EBF4FF;
  --r:6px;--r-sm:4px;--r-pill:100px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10);
  --shadow-lg:0 4px 24px rgba(0,0,0,.14);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'DM Mono',monospace;
}

html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:.85rem;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);border:none;background:none}
::selection{background:rgba(200,155,44,.25)}

/* ---- Chrome (topbar) ---- */
.chrome{position:sticky;top:0;z-index:500;height:56px;background:var(--ink);display:flex;align-items:center;gap:14px;padding:0 20px;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.chrome-logo{display:inline-flex;align-items:center;gap:0;cursor:pointer;user-select:none;white-space:nowrap;flex-shrink:0;line-height:1}
.wm-tech,.wm-shin{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;line-height:1}
.wm-tech{color:#FAF7F2}.wm-shin{color:#C9A84C}
.wm-sep{width:1px;height:14px;background:rgba(201,168,76,.4);margin:0 9px;align-self:center}
.wm-streams{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.25rem;color:#C9A84C;line-height:1}
.chrome-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.chrome-user-wrap{position:relative}
.chrome-user{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);cursor:pointer;transition:background .15s}
.chrome-user:hover{background:rgba(255,255,255,.12)}
.chrome-user-av{width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.62rem;font-weight:700;flex-shrink:0}
.chrome-user-label{font-size:.68rem;font-weight:600;color:rgba(250,247,242,.85);white-space:nowrap}

/* ---- User menu (chrome dropdown) ---- */
.user-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:600;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);min-width:220px;max-height:320px;overflow-y:auto;padding:6px}
.user-menu.open{display:block}
.um-section{padding:8px 10px 4px;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.um-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:var(--r-sm);font-size:.74rem;font-weight:600;color:var(--mid);cursor:pointer}
.um-item:hover{background:var(--border-l)}
.um-item.current{color:var(--amber-t);font-weight:800;pointer-events:none}

/* ---- Page layout ---- */
.page{max-width:760px;margin:0 auto;padding:32px 20px 60px}
.page-narrow{max-width:460px}
.page-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-title{font-size:1.2rem;font-weight:800;letter-spacing:0}
.page-sub{font-size:.76rem;color:var(--muted);margin-top:3px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--amber-t);margin:24px 0 10px}
.section-title:first-child{margin-top:0}
.section-title .count{color:var(--amber-t);margin-left:4px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-size:.78rem;font-weight:700;transition:background .15s,transform .1s;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#FAF7F2}.btn-primary:hover{background:#0B2740}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--mid)}.btn-ghost:hover{background:var(--border-l)}
.btn-danger{background:var(--red-bg);color:var(--red-t)}.btn-danger:hover{background:#fecaca}
.btn-amber{background:var(--amber);color:var(--ink)}.btn-amber:hover{background:#D9AC3E}
.btn-sm{padding:5px 10px;font-size:.7rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---- Cards ---- */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}

/* ---- Forms ---- */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:5px}
.fi,.fsel,.fta{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.82rem;color:var(--text);background:var(--card-bg);outline:none;transition:border-color .15s}
.fi:focus,.fsel:focus,.fta:focus{border-color:var(--amber)}
.fta{resize:vertical;min-height:90px}
.fhint{font-size:.66rem;color:var(--muted);margin-top:4px}

/* ---- Pull link box ---- */
.pull-box{display:flex;align-items:center;gap:8px;background:var(--border-l);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin:10px 0}
.pull-box code{flex:1;font-family:var(--mono);font-size:.72rem;color:var(--ink);word-break:break-all}
.pull-box.locked code{color:var(--muted)}

/* ---- Entry feed ---- */
.entry{padding:12px 20px;margin:0 -20px;border-bottom:1px solid var(--border-l);border-left:2px solid transparent;transition:background .15s,border-color .15s}
.entry:hover{background:#FAFAF8;border-left-color:var(--amber)}
.entry:last-child{border-bottom:none}
.entry-meta{display:flex;gap:8px;align-items:center;font-size:.68rem;color:var(--muted);margin-bottom:5px;flex-wrap:wrap}
.entry-icon{font-size:.86rem;line-height:1}
.entry-content{font-size:.82rem;white-space:pre-wrap;line-height:1.6}
.entry-label{font-weight:700;color:var(--mid)}

/* ---- Pills / tags ---- */
.pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:.62rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.pill-amber{background:var(--amber-bg);color:var(--amber-t);border:1px solid #fde68a}
.pill-green{background:var(--green-bg);color:var(--green-t);border:1px solid #86EFAC}
.pill-blue{background:var(--blue-bg);color:var(--blue);border:1px solid #BFDBFE}
.pill-grey{background:#F3F4F6;color:var(--muted);border:1px solid var(--border)}

/* ---- Stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px}
.stat .st-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.stat .st-value{font-size:1.4rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}

/* ---- Tables ---- */
.tbl-wrap{background:var(--card-bg);border-radius:var(--r);border:1px solid var(--border);overflow-x:auto;box-shadow:var(--shadow);margin-bottom:16px}
.tbl{width:100%;border-collapse:collapse;font-size:.76rem}
.tbl th{text-align:left;padding:9px 14px;background:var(--ink);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(250,237,215,.6);white-space:nowrap}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--border-l);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .td-mono{font-family:var(--mono);font-size:.7rem}
.tbl .td-sub{font-size:.66rem;color:var(--muted)}

/* ---- Tabs ---- */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tab{padding:9px 14px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--ink);border-bottom-color:var(--amber)}

/* ---- Members table ---- */
.member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-l)}
.member-row:last-child{border-bottom:none}
.member-email{font-family:var(--mono);font-size:.74rem}
.member-meta{font-size:.66rem;color:var(--muted)}

/* ---- Modals ---- */
.overlay{display:none;position:fixed;inset:0;z-index:900;background:rgba(4,23,41,.45);align-items:flex-start;justify-content:center;padding:60px 16px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--card-bg);border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:24px}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.modal-title{font-size:.98rem;font-weight:800}
.modal-sub{font-size:.76rem;color:var(--muted);margin-bottom:16px;line-height:1.6}
.modal-x{font-size:1.1rem;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:var(--r-sm)}
.modal-x:hover{background:var(--border-l)}
.modal-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.modal-ft .left{margin-right:auto}
.modal.modal-lg{max-width:640px}

/* ---- Toast ---- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);z-index:1000;background:var(--ink);color:#FAF7F2;padding:10px 18px;border-radius:var(--r-pill);font-size:.75rem;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-left:3px solid var(--red);animation:shake .3s}
@keyframes shake{25%{margin-left:-6px}75%{margin-left:6px}}

/* ---- Empty state ---- */
.empty-state{text-align:center;padding:40px 16px;color:var(--muted)}
.empty-icon{font-size:2.2rem;margin-bottom:8px;opacity:.4}
.empty-title{font-size:.86rem;font-weight:800;color:var(--mid);margin-bottom:3px}
.empty-desc{font-size:.72rem}

/* ---- Loading ---- */
#loading{position:fixed;inset:0;z-index:800;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:opacity .25s}
#loading.hide{opacity:0;pointer-events:none}
.loader{display:flex;gap:6px}
.loader-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:ld 1s ease-in-out infinite}
.loader-dot:nth-child(2){animation-delay:.15s}
.loader-dot:nth-child(3){animation-delay:.3s}
@keyframes ld{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-7px);opacity:1}}

@media(max-width:640px){
  .page{padding:20px 14px 50px}
  .chrome{padding:0 12px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .fi,.fsel,.fta{font-size:16px}
  .overlay{padding:16px 8px}
}