/* ============================================================
   Screen styles — dashboard, projects, detail, meetings,
   decisions, approvals. Mobile-first.
   ============================================================ */

/* ---------- Section header (reusable) ---------- */
.sh{ display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 12px; }
.sh .lnk{ font-size:13px; color:var(--accent); font-weight:600; }
.block{ margin-top:26px; }

/* ---------- Dashboard: attention rail ---------- */
.attn-rail{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.attn-rail::-webkit-scrollbar{ height:0; }
.attn-card{ scroll-snap-align:start; flex:0 0 270px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--neutral); border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow); }
.attn-card.danger{ border-left-color:var(--danger); }
.attn-card.warn{ border-left-color:var(--warn); }
.attn-card.info{ border-left-color:var(--info); }
.attn-card .ac-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.attn-card .ac-kind{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.attn-card .ac-title{ font-size:14.5px; font-weight:600; line-height:1.35; }
.attn-card .ac-meta{ font-size:12px; color:var(--muted); margin-top:6px; }
.attn-card .ac-act{ margin-top:11px; display:flex; gap:8px; }

/* ---------- KPI strip ---------- */
.kpi-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow); }
.kpi .lab{ font-size:12px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:7px; }
.kpi .lab i{ width:7px; height:7px; border-radius:50%; flex:none; }
.kpi .val{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1; margin-top:10px; }
.kpi .val small{ font-size:15px; color:var(--muted); font-weight:600; }
.kpi .sub{ font-size:11.5px; color:var(--faint); margin-top:6px; }

/* ---------- Dashboard columns ---------- */
.dash-cols{ margin-top:26px; }
.dash-rail{ display:flex; flex-direction:column; gap:18px; margin-top:26px; }

/* ---------- Project rows (responsive card → row) ---------- */
.proj-list{ display:flex; flex-direction:column; gap:11px; }
.proj-row{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.proj-row:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-lg); }
.pr-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pr-name{ font-size:15.5px; font-weight:600; line-height:1.3; }
.pr-code{ font-size:11px; color:var(--faint); margin-top:2px; }
.pr-prog{ margin-top:14px; }
.pr-prog .pt{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px; }
.pr-prog .pt b{ color:var(--ink2); font-weight:600; }
/* mobile footer: owner · risk · due wrap together */
.pr-foot{ display:flex; align-items:center; gap:8px 16px; margin-top:14px; flex-wrap:wrap; }
.pr-foot .it{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); }
.pr-foot .it .lb{ color:var(--faint); font-size:11px; }
.pr-foot .risk{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); }
.pr-foot .risk i{ width:7px; height:7px; border-radius:50%; flex:none; }
.pr-cell-d{ display:none; }   /* desktop-only cells */

@media (min-width:1000px){
  .dash-cols{ display:grid; grid-template-columns:1fr 348px; gap:26px; align-items:start; }
  .dash-rail{ margin-top:0; }
  .kpi-strip{ grid-template-columns:repeat(5,1fr); gap:13px; }
  /* project rows become dense table-like rows */
  .proj-row{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(130px,1fr) minmax(150px,1.3fr) 134px 92px;
    gap:18px; align-items:center; padding:14px 18px; }
  .pr-head{ min-width:0; }
  .pr-head .pr-top{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
  .pr-prog{ margin-top:0; }
  .pr-foot{ display:none; }                 /* hide mobile footer */
  .pr-cell-d{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; }
  .pr-cell-d .lb{ display:none; }
  .pr-cell-d .risk i{ width:7px; height:7px; border-radius:50%; flex:none; }
  .pr-cell-d .risk-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pr-cell-d.due{ justify-content:flex-start; }
}

/* dense table header (desktop only) */
.proj-thead{ display:none; }
@media (min-width:1000px){
  .proj-thead{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(130px,1fr) minmax(150px,1.3fr) 134px 92px;
    gap:18px; padding:0 18px 10px; font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--faint); }
}

/* ---------- Rail cards ---------- */
.rail-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.rail-card .rc-h{ display:flex; align-items:center; justify-content:space-between; padding:15px 16px 11px; }
.rail-card .rc-h h3{ font-family:var(--serif); font-size:16px; font-weight:600; }
.rail-card .rc-h .ct{ font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:99px; }
.ap-item{ padding:12px 16px; border-top:1px solid var(--line-soft); }
.ap-item .t{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between; gap:10px; }
.ap-item .amt{ color:var(--accent); font-weight:600; }
.ap-item .m{ font-size:12px; color:var(--muted); margin-top:4px; }
.ap-item .acts{ display:flex; gap:8px; margin-top:10px; }
.dec-item{ padding:12px 16px; border-top:1px solid var(--line-soft); display:flex; gap:12px; }
.dec-item .dt{ font-size:11px; color:var(--faint); font-weight:700; width:46px; flex:none; padding-top:2px; }
.dec-item .dc{ font-size:13.5px; font-weight:600; line-height:1.35; }
.dec-item .dr{ font-size:12px; color:var(--muted); margin-top:3px; }
.mt-item{ padding:12px 16px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:13px; }
.mt-item .cal{ width:46px; height:48px; border-radius:11px; background:var(--raised); border:1px solid var(--line); display:grid; place-items:center; text-align:center; flex:none; }
.mt-item .cal b{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:18px; font-weight:700; line-height:1; }
.mt-item .cal span{ font-size:10px; color:var(--muted); }
.mt-item .mn{ font-size:13.5px; font-weight:600; }
.mt-item .mm{ font-size:12px; color:var(--muted); margin-top:3px; }

/* ---------- Projects screen toolbar ---------- */
.toolbar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:18px 0; }
.toolbar .spacer{ flex:1; }
.seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; background:var(--surface); }
.seg button{ padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--muted); border:0; background:none; border-right:1px solid var(--line); display:flex; align-items:center; gap:6px; }
.seg button:last-child{ border-right:0; }
.seg button.on{ background:var(--accent); color:var(--accent-fg); }
.seg button svg{ width:14px; height:14px; }

/* ---------- Generic page back link ---------- */
.backlink{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:14px; }
.backlink svg{ width:16px; height:16px; }