/* ===========================================================================
   Gwala Canal Bank - Launch Board
   Brand-bible themed (warm Punjabi dairy): cream canvas, rose-leading header,
   gold/rose primary, teal/green/orange secondary as semantic status.
   Fonts: Nunito (display) + Inter (data/body). Product register: the tool
   disappears into the task. No side-stripes, no ghost-cards, dense rows.
   =========================================================================== */

:root{
  /* brand tokens (verbatim from the Gwala brand bible) */
  --gold:#FBAA19; --rose:#ED1D61; --rose-deep:#b51043;
  --teal:#02B8A1; --green:#8EC746; --orange:#F15622;
  --peach:#F9D79F; --cream:#fdf6ea; --white:#ffffff;
  --ink:#2a1a10; --ink-soft:#5a4636; --ink-mut:#8a7860;

  /* surfaces */
  --canvas:#fbf3e6;
  --surface:#ffffff;
  --surface-2:#fffaf1;
  --line:#efe2cd;
  --line-2:#e7d6bb;

  /* status: dot color (--c), badge tint (--bg), badge text (--fg) */
  --done-c:#6fae2e;   --done-bg:#eef7e2;   --done-fg:#41711a;
  --prog-c:#02B8A1;   --prog-bg:#dff6f3;   --prog-fg:#06756a;
  --block-c:#F15622;  --block-bg:#fde7df;  --block-fg:#b13c18;
  --over-c:#ED1D61;   --over-bg:#fde2ec;   --over-fg:#bf1453;
  --due-c:#FBAA19;    --due-bg:#fcefd2;    --due-fg:#946403;
  --idle-c:#c2b29a;   --idle-bg:#f4ecdf;   --idle-fg:#6f5e48;

  --radius:15px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(74,54,30,.06);
  --shadow:0 8px 30px -12px rgba(74,40,12,.22);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --z-sticky:50; --z-pop:100;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.display{font-family:'Nunito','Inter',sans-serif;}
::selection{background:var(--rose); color:#fff;}

/* ---------- Header (rose leads - primary, not a timid tint) ---------- */
.app-header{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#ED1D61 0%,#d4154f 52%,#b51043 100%);
}
.app-header::after{ /* subtle gold warmth, brand pairing of the two primaries */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 92% -20%, rgba(251,170,25,.42), transparent 55%);
}
.hd{position:relative; max-width:1320px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:14px; min-width:0;}
.logo-chip{background:#fff; border-radius:11px; padding:7px 13px; display:inline-flex; align-items:center;
  box-shadow:0 3px 12px rgba(74,16,40,.22); flex:none;}
.logo-chip img{height:28px; width:auto; display:block;}
.brand .t{min-width:0;}
.brand h1{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.1;}
.brand .sub{font-size:12.5px; color:rgba(255,255,255,.82); margin-top:2px; font-weight:500;}
.count{display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:14px; padding:9px 16px; backdrop-filter:blur(4px);}
.count .big{font-family:'Nunito'; font-size:30px; font-weight:900; line-height:.95; color:#fff;}
.count .cl{font-size:11px; line-height:1.25; color:rgba(255,255,255,.9); font-weight:600;}
.donut{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:6px 13px 6px 8px; backdrop-filter:blur(4px);}
.donut svg{flex:none;} .donut-l{font-size:11px; line-height:1.25; color:rgba(255,255,255,.92); font-weight:700;}

/* ---------- Stat strip ---------- */
.wrap{max-width:1320px; margin:0 auto; padding:0 28px;}
.stats{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:18px auto 6px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; box-shadow:var(--shadow-sm);}
.stat .n{font-family:'Nunito'; font-size:23px; font-weight:800; line-height:1; color:var(--ink);}
.stat .l{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mut);
  margin-top:4px; font-weight:600;}
.stat.over .n{color:var(--over-c);} .stat.due .n{color:var(--due-fg);}
.stat.done .n{color:var(--done-fg);} .stat.prog .n{color:var(--prog-fg);}
.stat.block .n{color:var(--block-c);}

/* progress meter */
.meter{display:flex; height:8px; border-radius:6px; overflow:hidden; background:#efe2cd;
  border:1px solid var(--line); margin:10px 0 2px;}
.meter i{display:block; height:100%;}
.legend{display:flex; flex-wrap:wrap; gap:16px; color:var(--ink-soft); font-size:11.5px; margin:8px 0 0;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.dot{width:9px; height:9px; border-radius:50%; flex:none;}

/* ---------- Controls ---------- */
.bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  position:sticky; top:0; z-index:var(--z-sticky); padding:14px 28px 12px;
  background:linear-gradient(180deg,var(--canvas) 72%, rgba(251,243,230,0));
  margin-top:8px;}
.bar .wrap-inner{max-width:1320px; margin:0 auto; width:100%; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.tabs{display:flex; gap:5px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:4px; box-shadow:var(--shadow-sm);}
.tab{border:0; background:transparent; color:var(--ink-soft); font-weight:700; font-size:13px;
  font-family:'Nunito'; padding:7px 14px; border-radius:9px; cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--rose); color:#fff;}
.grow{flex:1;}
.field{display:flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:0 11px; box-shadow:var(--shadow-sm);}
.field svg{flex:none; color:var(--ink-mut);}
input[type=search], select{border:0; background:transparent; color:var(--ink); font-size:13px;
  font-family:inherit; padding:9px 2px; outline:none; min-width:0;}
input[type=search]{min-width:170px;}
select{cursor:pointer; padding-right:6px;}
.field:focus-within{border-color:var(--rose); box-shadow:0 0 0 3px rgba(237,29,97,.12);}

/* ---------- Groups + rows ---------- */
main{max-width:1320px; margin:0 auto; padding:6px 28px 64px;}
.group{margin-top:22px;}
.group-h{display:flex; align-items:center; gap:12px; margin:0 0 9px; padding:0 2px;}
.group-h .who{display:flex; align-items:center; gap:9px;}
.avatar{width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-family:'Nunito'; font-weight:800; font-size:12px; color:#fff;}
.group-h h2{margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.01em;}
.group-h .cnt{font-size:11.5px; font-weight:700; color:var(--ink-mut);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1px 9px;}
.group-h .mini{flex:1; max-width:200px; height:6px; border-radius:4px; overflow:hidden;
  display:flex; background:#efe2cd; border:1px solid var(--line);}
.group-h .mini i{height:100%;}

.rows{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);}
.row{display:grid; grid-template-columns:128px 1fr auto; align-items:start; gap:14px;
  padding:12px 16px; border-top:1px solid var(--line);
  transition:background .14s var(--ease);}
.row:first-child{border-top:0;}
.row:hover{background:var(--surface-2);}
.row.is-done{background:#fcfaf5;}
.row.is-done .r-title{color:var(--ink-mut); text-decoration:line-through; text-decoration-color:var(--line-2);}

.r-status{display:flex; align-items:center; gap:8px; padding-top:1px;}
.r-status .id{font-size:11px; font-weight:700; color:var(--ink-mut); font-variant-numeric:tabular-nums;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  padding:3px 9px 3px 7px; border-radius:20px; white-space:nowrap; font-family:'Nunito';}
.badge .dot{width:7px; height:7px;}
.badge.not_started{background:var(--idle-bg); color:var(--idle-fg);}
.badge.in_progress{background:var(--prog-bg); color:var(--prog-fg);}
.badge.blocked{background:var(--block-bg); color:var(--block-fg);}
.badge.done{background:var(--done-bg); color:var(--done-fg);}

.r-main{min-width:0;}
.r-title{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.r-meta{display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px; align-items:center;}
.tag{font-size:11px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px;}
.tag.coord{color:var(--ink-mut);}
.r-blocked{margin-top:6px; font-size:12px; color:var(--block-fg); display:flex; gap:6px; align-items:baseline;}
.r-blocked b{font-weight:700;}
.r-note{margin-top:5px; font-size:12px; color:var(--ink-mut); line-height:1.45;}

.r-side{display:flex; flex-direction:column; align-items:flex-end; gap:7px; padding-top:1px;}
.chip{font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--ink-soft); background:var(--surface-2);}
.chip.over{background:var(--over-c); color:#fff; border-color:transparent;}
.chip.due{background:var(--due-c); color:#5a3d00; border-color:transparent; font-weight:700;}
.chip.hi{background:var(--over-bg); color:var(--over-fg); border-color:transparent; font-weight:700;
  letter-spacing:.03em;}

/* ---------- Syncup view + delay tracking ---------- */
.chip.pushed{background:var(--due-bg); color:var(--due-fg); border-color:transparent; font-weight:700;}
.chip.finalize{background:var(--ink); color:#fff; border-color:transparent; font-weight:700; letter-spacing:.02em;}
.syncup-intro{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; margin-top:18px; color:var(--ink-soft); font-size:13px; line-height:1.55; box-shadow:var(--shadow-sm);}
.syncup-intro .si-h{font-family:'Nunito'; font-weight:800; font-size:16px; color:var(--ink); margin-bottom:4px;}
.delays{margin-top:8px; padding:9px 11px; background:var(--over-bg); border-radius:9px;}
.delays .dl-h{font-size:11px; font-weight:800; color:var(--over-fg); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px;}
.dl-row{font-size:12px; color:var(--ink-soft); line-height:1.5; padding:1px 0;}
.dl-row .dl-date{display:inline-block; min-width:78px; color:var(--over-fg); font-weight:700; font-variant-numeric:tabular-nums;}
.resp{margin-top:8px; font-size:12.5px; color:var(--ink); background:var(--surface-2);
  border:1px dashed var(--line-2); border-radius:9px; padding:7px 11px;}
.resp b{font-weight:700; color:var(--ink-soft);}
.resp .resp-empty{color:var(--ink-mut); font-style:italic;}

/* ---------- Meetings ---------- */
.mtgs{display:grid; gap:12px;}
.mtg{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);}
.mtg .mh{display:flex; align-items:center; gap:10px; justify-content:space-between;}
.mtg h3{margin:0; font-size:15px; font-weight:800;}
.mtg .when{color:var(--prog-fg); font-weight:700; font-size:13px; margin-top:6px; font-family:'Nunito';}
.mtg.needed .when{color:var(--due-fg);}
.mtg .pp{color:var(--ink-soft); margin-top:7px; font-size:13px; line-height:1.5;}
.mtg .att{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
.att-chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:2px 9px;}
.att-chip .avatar{width:18px; height:18px; border-radius:5px; font-size:9px;}

/* ---------- empty / footer ---------- */
.empty{text-align:center; color:var(--ink-mut); padding:48px 20px; font-size:14px;}
.empty .big{font-family:'Nunito'; font-size:17px; font-weight:800; color:var(--ink-soft); margin-bottom:4px;}
footer{max-width:1320px; margin:0 auto; padding:6px 28px 36px; color:var(--ink-mut); font-size:11.5px;}

/* ---------- motion (state-conveying, subtle; product register) ---------- */
@media (prefers-reduced-motion:no-preference){
  .group{animation:rise .42s var(--ease) both;}
  .group:nth-child(2){animation-delay:.04s} .group:nth-child(3){animation-delay:.08s}
  .group:nth-child(4){animation-delay:.12s} .group:nth-child(5){animation-delay:.16s}
  .group:nth-child(6){animation-delay:.20s} .group:nth-child(7){animation-delay:.24s}
}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- login overlay ---------- */
.login{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(150deg,#ED1D61 0%,#d4154f 52%,#b51043 100%);}
.login-card{background:var(--surface); border-radius:18px; padding:30px 28px; width:100%; max-width:360px;
  box-shadow:0 24px 60px -20px rgba(74,16,40,.5); text-align:center; display:flex; flex-direction:column; gap:12px;}
.login-card .logo-chip{align-self:center; box-shadow:none; padding:0;}
.login-card .logo-chip img{height:34px;}
.login-card h1{margin:4px 0 0; font-size:19px; font-weight:800;}
.login-card p{margin:0 0 4px; color:var(--ink-mut); font-size:12.5px; line-height:1.5;}
.login-card input{border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none;}
.login-card input:focus{border-color:var(--rose); box-shadow:0 0 0 3px rgba(237,29,97,.14);}
.login-card button{background:var(--rose); color:#fff; border:0; border-radius:10px; padding:11px; font-weight:800;
  font-family:'Nunito'; font-size:14px; cursor:pointer; transition:transform .14s var(--ease), background .14s var(--ease);}
.login-card button:hover{background:var(--rose-deep);}
.login-card button:active{transform:scale(.98);}
.login-err{color:var(--over-fg); font-size:12.5px; min-height:16px; font-weight:600;}

/* ---------- role badge + toast ---------- */
.hd-right{display:flex; align-items:center; gap:12px;}
.rolebadge{display:flex; align-items:center; gap:8px; color:#fff; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); border-radius:11px; padding:6px 11px;}
.rolebadge:empty{display:none;}
.rolebadge.editor{background:rgba(251,170,25,.92); color:#5a3d00; border-color:transparent;}
.rolebadge button{background:rgba(0,0,0,.14); color:inherit; border:0; border-radius:7px; padding:3px 9px;
  font-size:11px; font-weight:700; cursor:pointer; font-family:inherit;}
.rolebadge.editor button{background:rgba(90,61,0,.18);}
.toast{position:fixed; bottom:22px; right:22px; z-index:300; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:11px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease);}
.toast.show{opacity:1; transform:none;}
.toast.bad{background:var(--over-c);}

/* ---------- editor inline edit ---------- */
.comments{margin-top:8px; display:flex; flex-direction:column; gap:4px;}
.cm-row{font-size:12.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; line-height:1.45;}
.cm-row .cm-date{display:inline-block; min-width:78px; color:var(--ink-mut); font-weight:700; font-variant-numeric:tabular-nums;}
.edit-wrap{margin-top:9px;}
.edit-toggle{background:var(--surface-2); border:1px solid var(--line-2); color:var(--rose); font-weight:700;
  font-size:12px; border-radius:8px; padding:5px 11px; cursor:pointer; font-family:'Nunito';}
.edit-toggle:hover{background:var(--over-bg);}
.edit-wrap.open .edit-toggle{margin-bottom:9px;}
.edit-panel{display:grid; gap:10px; background:var(--surface-2); border:1px dashed var(--line-2);
  border-radius:11px; padding:12px;}
.ef{display:flex; flex-direction:column; gap:5px;}
.ef>span{font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.ef select, .ef textarea, .ef input{border:1px solid var(--line-2); border-radius:8px; padding:8px 10px;
  font-size:13px; font-family:inherit; color:var(--ink); background:var(--surface); outline:none; resize:vertical;}
.ef select:focus, .ef textarea:focus, .ef input:focus{border-color:var(--rose); box-shadow:0 0 0 3px rgba(237,29,97,.12);}
.ef-save{align-self:flex-start; background:var(--rose); color:#fff; border:0; border-radius:8px; padding:6px 13px;
  font-weight:700; font-size:12px; cursor:pointer; font-family:'Nunito'; margin-top:2px;}
.ef-save:hover{background:var(--rose-deep);}
.ef-save.warn{background:var(--orange);}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .stats{grid-template-columns:repeat(4,1fr);}
  .row{grid-template-columns:1fr; gap:9px;}
  .r-side{flex-direction:row; align-items:center; flex-wrap:wrap;}
  .r-status{order:-1;}
}
@media (max-width:600px){
  .hd,.wrap,.bar,main,footer{padding-left:16px; padding-right:16px;}
  .bar .wrap-inner{padding:0;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .brand h1{font-size:17px;} .count .big{font-size:24px;}
  input[type=search]{min-width:120px;}
}