/* focus.css — visual polish layer for the Focus / CEO Command Center (#t-focus).
   Everything is scoped under #t-focus so it can never leak into other tabs, and it is
   token-only (builds on core.css :root vars — no hardcoded palette). It adds what inline
   styles can't: surface elevation, interaction states (hover / active / focus-visible),
   a refined client leaderboard, hero stat pills, and tidy responsive task rows. Honest
   loading / empty / unavailable states are untouched. */

/* ─────────────────────────── Hero stat pills ─────────────────────────── */
#t-focus #fcSummary{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
#t-focus #fcSummary.fc-plain{display:block}            /* honest text states: loading / inbox-zero / not-connected */
#t-focus .fc-stat{
  font-size:11px;font-weight:600;color:var(--t2);
  background:var(--c3);border:1px solid var(--b1);
  border-radius:8px;padding:3px 9px;line-height:1.45;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#t-focus .fc-stat b{color:var(--t1);font-weight:800;margin-right:1px}
#t-focus .fc-stat.is-today{color:var(--bl);background:color-mix(in srgb,var(--bl) 12%,transparent);border-color:color-mix(in srgb,var(--bl) 26%,transparent)}
#t-focus .fc-stat.is-today b{color:var(--bl)}
#t-focus .fc-stat.is-overdue{color:var(--rd);background:color-mix(in srgb,var(--rd) 12%,transparent);border-color:color-mix(in srgb,var(--rd) 26%,transparent)}
#t-focus .fc-stat.is-overdue b{color:var(--rd)}

/* ──────────────────── Card surfaces — lift off the page ──────────────────── */
/* The card token (--c2) sits only a hair above --bg; a real border + soft shadow makes
   each section read as its own surface without changing the palette. */
#t-focus #fcRoot .card.dk-card{
  background:var(--c2);
  border:1px solid var(--b2);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ───────────────────────── Client leaderboard ───────────────────────── */
#t-focus .fc-client{
  border-radius:10px;margin:0 -8px;padding:7px 8px !important;
  transition:background .12s ease,transform .1s ease;
}
#t-focus .fc-client:hover{background:var(--c3)}
#t-focus .fc-client:active{background:var(--c3);transform:scale(.992)}
/* sleek emoji avatar tiles (client + entity rows) */
#t-focus .fc-emoji{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:var(--c3);border:1px solid var(--b1);
  font-size:16px;line-height:1;
}
#t-focus .fc-emoji-lg{width:40px;height:40px;border-radius:12px;font-size:22px}
#t-focus .fc-client:focus-visible{outline:2px solid var(--bl);outline-offset:-2px;background:var(--c3)}
#t-focus .fc-client .fc-chev{
  flex-shrink:0;width:9px;text-align:center;color:var(--t4);font-size:16px;font-weight:700;line-height:1;
  opacity:0;transform:translateX(-2px);transition:opacity .12s ease,transform .12s ease;
}
#t-focus .fc-client:hover .fc-chev,#t-focus .fc-client:focus-visible .fc-chev{opacity:1;transform:translateX(0)}
/* bar: recessed track + gradient fill */
#t-focus .fc-bar{background:var(--c4) !important;box-shadow:inset 0 0 0 1px var(--b1)}
#t-focus .fc-bar > span{background:linear-gradient(90deg,color-mix(in srgb,var(--bl) 70%,transparent),var(--bl)) !important}

/* ───────────────────────── Task rows — iOS list feel ───────────────────────── */
/* The row markup is class-only now, so all sizing lives here. Calm, tappable, mobile-first. */
#t-focus .fc-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 8px;margin:0 -8px;border-radius:10px;
  transition:background .12s ease;-webkit-tap-highlight-color:transparent;
}
#t-focus .fc-row:hover{background:var(--c3)}
/* complete circle — guaranteed-round (no more flex-stretched ovals), calm, tappable;
   green check preview on hover/press, keyboard-focusable */
#t-focus .fc-check{
  -webkit-appearance:none;appearance:none;   /* Safari/iOS drew the native button shape over border-radius → oval. This forces a true circle. */
  flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px;aspect-ratio:1/1;box-sizing:border-box;padding:0;margin-top:1px;
  border-radius:50%;border:1.5px solid var(--b2);background:transparent;cursor:pointer;position:relative;
  transition:border-color .12s ease,background .12s ease,transform .1s ease;
}
#t-focus .fc-check:active{transform:scale(.9)}
#t-focus .fc-check:hover{border-color:var(--gn)}
#t-focus .fc-check:active{background:color-mix(in srgb,var(--gn) 20%,transparent)}
#t-focus .fc-check:hover::after,#t-focus .fc-check:active::after{
  content:'';position:absolute;left:3px;top:4px;width:7px;height:3.5px;
  border-left:1.5px solid var(--gn);border-bottom:1.5px solid var(--gn);transform:rotate(-45deg);
}
#t-focus .fc-check:focus-visible{outline:2px solid var(--gn);outline-offset:2px}
/* priority — a small calm dot instead of a heavy HIGH/MED pill */
#t-focus .fc-pri{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px}
#t-focus .fc-pri-high{background:var(--rd)}
#t-focus .fc-pri-med{background:var(--gd)}
/* task name */
#t-focus .fc-name{flex:1;min-width:0;font-size:14px;line-height:1.3;color:var(--t1);white-space:normal;overflow-wrap:anywhere}
#t-focus .fc-name-link{cursor:pointer}
#t-focus .fc-name-link:hover{color:var(--bl)}
/* due — light text (no heavy chip), red when overdue */
#t-focus .fc-due{flex:0 0 auto;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums}
#t-focus .fc-due-over{color:var(--rd)}
/* project/area — quiet; hidden on phones */
#t-focus .fc-areachip{flex:0 0 auto;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--t4);white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}

/* ───────────────────────────── Capture bar ───────────────────────────── */
#t-focus #fcCapture{transition:border-color .12s ease,box-shadow .12s ease}
#t-focus #fcCapture:focus{border-color:var(--bl);box-shadow:0 0 0 3px color-mix(in srgb,var(--bl) 16%,transparent);outline:none}

/* ───────────────────────── Responsive (mobile-first) ───────────────────────── */
@media (max-width:520px){
  #t-focus .fc-row{gap:11px;padding:11px 6px}
  #t-focus .fc-areachip{display:none}        /* phone: the project chip is noise — name + due is enough */
}
@media (prefers-reduced-motion:reduce){
  #t-focus #fcRoot *,#t-focus #fcCapture{transition:none !important}
}