/* Was max-width:900px, which overrode the shared page width and left the
   dashboard sitting in a third of the screen. page.css handles width now. */
h1{margin:0 0 2px}
p{color:var(--muted);line-height:1.55;font-size:var(--t-body)}

/* header */
.hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sub{margin:0}
.live{display:flex;align-items:center;gap:8px;background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.35);
      color:#3ddc97;border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:650;flex:none}
.pulse{width:8px;height:8px;border-radius:50%;background:#3ddc97;animation:lcpPulse 1.6s ease-in-out infinite}
@keyframes lcpPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,151,.5)}50%{opacity:.65;box-shadow:0 0 0 6px rgba(61,220,151,0)}}

/* the one next action */
.next{background:#161a22;border:1px solid #262c38;border-left:3px solid #ff4d6d;
      border-radius:14px;padding:22px 24px;margin:18px 0}
.next-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.step-badge{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#ff7a90;flex:none}
.bar{flex:1;height:4px;background:#0d0f14;border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,#ff4d6d,#ff7a90);border-radius:3px;
          width:0;transition:width .35s ease}
.next h2{font-size:19px;margin:0 0 6px;color:#e6e9ef;text-transform:none;letter-spacing:0}
.next p{margin:0 0 16px;max-width:56ch}
.cta{display:inline-block;background:#ff4d6d;color:#14060a;font-weight:650;font-size:14.5px;
     padding:11px 20px;border-radius:10px;text-decoration:none}
.cta:hover{filter:brightness(1.08)}

/* the four ticks */
.ticks{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid #20262f;
       display:flex;flex-wrap:wrap;gap:10px 22px}
.ticks li{display:flex;align-items:center;gap:8px;font-size:13px;color:#5c6474}
.ticks .mark{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
             font-size:10.5px;font-weight:700;background:#20262f;color:#8b93a7;flex:none}
.ticks li.done{color:#8b93a7}
.ticks li.done .mark{background:rgba(61,220,151,.16);color:#3ddc97}
.ticks li.now{color:#e6e9ef;font-weight:600}
.ticks li.now .mark{background:#ff4d6d;color:#14060a}

/* all-done card */
.ready{background:#161a22;border:1px solid #262c38;border-left:3px solid #3ddc97;
       border-radius:14px;padding:20px 24px;margin:18px 0}
.ready-row{display:flex;align-items:center;gap:16px}
.tick-big{width:38px;height:38px;border-radius:50%;background:rgba(61,220,151,.14);color:#3ddc97;
          display:grid;place-items:center;font-size:19px;font-weight:700;flex:none}
.ready h2{font-size:17px;margin:0 0 3px;color:#e6e9ef;text-transform:none;letter-spacing:0}
.ready p{margin:0}

/* status */
.statusbar{display:flex;align-items:center;gap:11px;background:#161a22;border:1px solid #262c38;
           border-radius:14px;padding:16px 22px;margin:0 0 18px;font-size:14px;color:#c7cdda}
.dot{width:12px;height:12px;border-radius:50%;background:#8b93a7;flex:none}
.dot.on{background:#3ddc97;box-shadow:0 0 8px #3ddc97}
.dot.off{background:#ff5d6c}
.dot.idle{background:#8b93a7}

/* stats */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:var(--s-4);margin-bottom:var(--s-5)}
.stat{background:#161a22;border:1px solid #262c38;border-radius:14px;padding:18px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{font-size:12px;color:#8b93a7;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* jump to */
.sect{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#5c6474;font-weight:700;
      margin:26px 0 10px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.qcard{display:block;text-decoration:none;background:#161a22;border:1px solid #262c38;
       border-radius:14px;padding:18px;color:#e6e9ef}
.qcard:hover{border-color:#ff4d6d}
.qcard .t{font-weight:650;font-size:15px}
.qcard .d{font-size:12.5px;color:#8b93a7;margin-top:3px;line-height:1.45}

@media(max-width:600px){
  .page{padding:24px 18px 48px}
  .ticks{flex-direction:column;gap:11px}
}

/* The hidden attribute must beat any display rule above.
   Without this, .alldone{display:flex} etc. override [hidden]{display:none}
   from the browser default stylesheet, and hidden elements stay visible. */
[hidden]{display:none !important}


/* ── the middle band ─────────────────────────────────────────────────────
   The dashboard was a narrow column of links with nothing to look at. These
   two panels give it something to say: who is contributing, and what is
   happening right now. */
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
      gap:var(--s-4);margin-bottom:var(--s-5)}
@media(max-width:1100px){.cols{grid-template-columns:1fr}}

.cols .card{margin-bottom:0;display:flex;flex-direction:column}
.cols h2{font-size:var(--t-small);letter-spacing:.07em;text-transform:uppercase;
         color:var(--muted);font-weight:700;margin:0 0 var(--s-4)}

.lead{display:flex;flex-direction:column;gap:2px;flex:1}
.lead-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;
          border-top:1px solid var(--line-soft)}
.lead-row:first-child{border-top:0}
.lead-rank{width:22px;font-size:12px;font-weight:800;color:var(--faint);flex:none;text-align:center}
.lead-rank.top{color:var(--amber)}
.lead-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;
         background:var(--panel-3);display:grid;place-items:center;
         font-size:12px;font-weight:700;color:var(--muted)}
.lead-name{flex:1;font-size:var(--t-small);font-weight:560;color:var(--text);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-val{font-size:var(--t-small);font-weight:700;color:var(--amber);flex:none}

.feed{display:flex;flex-direction:column;gap:0;flex:1;max-height:280px;overflow-y:auto}
.feed-row{display:flex;align-items:baseline;gap:var(--s-2);padding:7px 0;
          border-top:1px solid var(--line-soft);font-size:var(--t-small)}
.feed-row:first-child{border-top:0}
.feed-who{font-weight:640;color:var(--rose-2)}
.feed-what{color:var(--muted);flex:1}
.feed-time{color:var(--faint);font-size:11px;flex:none}

.empty{color:var(--faint);font-size:var(--t-small);padding:var(--s-4) 0}
.more{display:inline-block;margin-top:var(--s-3);font-size:var(--t-small);
      color:var(--rose-2);text-decoration:none;font-weight:560}
.more:hover{text-decoration:underline}