/* =========================================================================
   GFI Heroes — Tasks (2026-10-14, ported from the Pledge tracker)
   A task is one line: tick, what it is, when it is due, who it is for.
   Overdue is the only state that costs the agent anything, so it is the only
   one that gets colour. Every dark fill carries bold white text.
   ========================================================================= */

.tk-wrap{ max-width:900px }

.tk-head{ margin-bottom:16px }
.tk-h{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--text); text-wrap:balance }
.tk-sub{ margin-top:4px; font-size:13px; color:var(--muted); line-height:1.55; max-width:62ch; text-wrap:balance }

/* ---------------------------------------------------------------- composer */
.tk-add{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px;
  align-items:center; margin:0 0 18px;
  padding:10px; border-radius:13px;
  background:var(--panel2); border:1px solid var(--line);
}
.tk-add input{
  height:42px; padding:0 12px; border-radius:9px; min-width:0;
  border:1.5px solid var(--line); background:var(--panel); color:var(--text);
  font:inherit; font-size:14px;
}
.tk-add input:focus{ outline:none; border-color:#2E6FD6; box-shadow:0 0 0 3px rgba(46,111,214,.14) }
.tk-in-date{ width:150px }
.tk-in-time{ width:132px }
.tk-go{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:800;
  height:42px; padding:0 16px; border-radius:9px;
  background:#00205A; border:1px solid #00205A; color:#fff;
}
.tk-go:hover{ background:#103B7E; border-color:#103B7E }
.tk-go:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px }
.tk-go svg{ width:16px; height:16px; flex:none }

/* ------------------------------------------------------------------ groups */
.tk-group{ margin-bottom:20px }
.tk-g-h{
  display:flex; align-items:center; gap:9px; margin:0 0 8px 2px;
  font-size:10.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--muted2);
}
.tk-g-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:0;
  background:var(--panel3); color:var(--muted); border:1px solid var(--line);
}
.tk-g-overdue .tk-g-h{ color:#A8341F }
.tk-g-overdue .tk-g-n{ background:rgba(181,64,43,.13); color:#A8341F; border-color:rgba(181,64,43,.4) }

/* -------------------------------------------------------------------- rows */
.tk-row{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 13px; margin-bottom:7px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--line2);
}
.tk-row.is-late{ border-left-color:#B5402B }
.tk-row.is-done{ opacity:.62 }
.tk-row.is-done .tk-title{ text-decoration:line-through }

.tk-tick{
  flex:none; appearance:none; cursor:pointer; margin-top:1px;
  width:22px; height:22px; border-radius:7px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line2); background:var(--panel); color:transparent;
  transition:background .14s, border-color .14s, color .14s;
}
.tk-tick svg{ width:14px; height:14px }
.tk-tick:hover{ border-color:#2E6FD6; color:rgba(46,111,214,.45) }
.tk-tick:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px }
.tk-row.is-done .tk-tick{ background:#00205A; border-color:#00205A; color:#fff }

.tk-main{ flex:1 1 auto; min-width:0 }
.tk-title{
  font-size:14.5px; font-weight:650; color:var(--text); line-height:1.4;
  overflow-wrap:anywhere; text-wrap:pretty;
}
.tk-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:5px }
.tk-when{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); font-weight:600 }
.tk-when svg{ width:13px; height:13px; flex:none; opacity:.8 }
.tk-when.late{ color:#A8341F }
.tk-late-chip{
  display:inline-flex; align-items:center; height:19px; padding:0 8px; border-radius:999px;
  font-size:10.5px; font-weight:800; white-space:nowrap;
  background:rgba(181,64,43,.13); color:#A8341F; border:1px solid rgba(181,64,43,.4);
}
.tk-lead{
  display:inline-flex; align-items:center; gap:5px;
  appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:650;
  height:22px; padding:0 9px 0 7px; border-radius:999px;
  background:var(--panel3); border:1px solid var(--line); color:var(--muted);
  max-width:100%; min-width:0;
}
.tk-lead span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tk-lead svg{ width:12px; height:12px; flex:none; opacity:.75 }
.tk-lead:hover{ color:var(--text); border-color:#2E6FD6; background:rgba(46,111,214,.07) }
.tk-lead:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px }

.tk-acts{ flex:none; display:flex; gap:5px }
.tk-x{
  appearance:none; cursor:pointer; width:28px; height:28px; border-radius:8px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; color:var(--muted2);
}
.tk-x svg{ width:14px; height:14px }
.tk-x:hover{ color:#A8341F; border-color:rgba(181,64,43,.4); background:rgba(181,64,43,.07) }
.tk-x:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px }

/* ------------------------------------------------------------------- empty */
.tk-empty,
.tk-setup{
  padding:26px 20px; border-radius:13px; text-align:center;
  background:var(--panel2); border:1px dashed var(--line2);
}
.tk-empty-t{ font-size:15px; font-weight:800; color:var(--text) }
.tk-empty-s{
  margin:6px auto 0; max-width:52ch; font-size:12.5px; color:var(--muted);
  line-height:1.6; text-wrap:balance;
}
.tk-setup code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px;
  padding:1px 5px; border-radius:5px;
  background:var(--panel3); border:1px solid var(--line); color:var(--text);
  overflow-wrap:anywhere;
}

/* -------------------------------------------------------------------- done */
.tk-done-wrap{ margin-top:6px }
.tk-done-wrap > summary{
  cursor:pointer; list-style:none; padding:9px 2px;
  font-size:11px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted2);
}
.tk-done-wrap > summary::-webkit-details-marker{ display:none }
.tk-done-wrap > summary:hover{ color:var(--text) }
.tk-done-wrap > summary:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px; border-radius:6px }

/* ------------------------------------------------- the block on a lead record */
.tk-rec{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
.tk-rec-h{
  display:flex; align-items:center; gap:9px; margin:0 0 9px;
  font-size:10.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--muted2);
}
.tk-rec-none{ font-size:12.5px; color:var(--muted); margin-bottom:10px }
/* The record column is narrow, so the composer is three rows: the title, then
   date and time side by side, then the button. An `auto` second column here
   shrink-wrapped the time box and shoved it to the far edge with a hole in the
   middle — two equal columns keep the pair together. */
.tk-rec .tk-add{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; padding:8px; margin-bottom:0 }
.tk-rec .tk-in-title,
.tk-rec .tk-go{ grid-column:1 / -1 }
.tk-rec .tk-in-date,
.tk-rec .tk-in-time{ width:auto; min-width:0 }
.tk-rec .tk-go{ justify-content:center }
.tk-rec .tk-row{ padding:10px 11px }

/* the count on the Tasks tab turns red while something is actually late */
.tab .badge.tk-badge-hot,.tab.active .badge.tk-badge-hot{ background:rgba(181,64,43,.14); color:#A8341F; }

/* ===================================================================== dark */

/* white on #00205A is under the contrast floor on a dark panel — dark ink on
   the bright accent reads instead, as it does on the policy type chips */

/* =================================================================== mobile */
@media (max-width:760px){
  /* Four full-height stat cards stacked put the actual list two screens down,
     on the one tab whose whole job is "what do I do now". Two across, and
     shorter, so the first task is visible without scrolling. */
  .tk-wrap .kpi-grid{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px }
  .tk-wrap .kpi{ padding:10px 11px 9px }
  .tk-wrap .kpi .k{ font-size:11px }
  .tk-wrap .kpi .v{ font-size:22px; line-height:1.15 }

  .tk-add{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:9px }
  .tk-in-title{ grid-column:1 / -1 }
  .tk-in-date,
  .tk-in-time{ width:auto }
  .tk-go{ grid-column:1 / -1; justify-content:center }
  .tk-add input,
  .tk-go{ height:44px; font-size:16px }   /* 16px stops iOS zooming on focus */
  .tk-go span{ font-size:14px }
  .tk-row{ padding:11px 11px }
  .tk-rec .tk-add{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}

/* ------------------------------------------------- header and the four counts */
.tk-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px }
.tk-head .pb-exit{ align-self:center }
.tk-h{ font-size:22px }
.tk-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px }
.tk-stat{ display:flex; flex-direction:column; gap:4px; padding:13px 16px; border-radius:13px; background:#FFFFFF; border:1px solid #DCE3EE; box-shadow:0 1px 2px rgba(0,32,90,.05) }
.tk-stat span{ font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#586A86 }
.tk-stat b{ font-family:var(--sans); font-size:26px; font-weight:800; line-height:1.05; color:#00205A; letter-spacing:-.02em }
.tk-stat.is-late{ border-color:rgba(214,69,47,.4); background:#FFF6F4 }
.tk-stat.is-late span, .tk-stat.is-late b{ color:#A8341F }
.tk-stat.is-today{ border-color:#E4B45A; background:#FFFBF0 }
.tk-stat.is-today span{ color:#6B4A00 }
@media (max-width:760px){
  .tk-head{ gap:10px }
  .tk-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
  .tk-stat b{ font-size:22px }
}