/* My tasks and Team tasks (js/task-views.js), for both shells.
   Colours read each shell's tokens first (the admin panel's and the desk's
   share names), so the views sit in either without a second copy. On a phone
   the team table folds into one card per person; nothing scrolls sideways. */

/* The views measure the room they are given (not the window), so the same
   markup is one column inside a narrow desk and two beside the admin's
   sidebar. */
.tv-shell{container-type:inline-size;min-width:0}
.tv-mine,.tv-team{
  --tv-line:var(--line,#e2e8f0);
  --tv-ink:var(--ink,#221f20);
  --tv-muted:var(--muted,#64748b);
  --tv-card:var(--card,#fff);
  --tv-bg:var(--bg,#fafbfc);
  --tv-radius:var(--radius,6px);
  --tv-alert:var(--red,var(--bad,#b91c1c));
  --tv-alert-soft:var(--red-soft,#fdecea);
  --tv-good:var(--green,var(--ok,#15803d));
  --tv-good-soft:var(--green-soft,#e3f4e8);
  --tv-today:#c45c26;
  --tv-week:#5b7bb0;
  --tv-later:#c7cdd6;
  display:flex;flex-direction:column;gap:18px;min-width:0;color:var(--tv-ink);
}
.tv-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.tv-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start;min-width:0}
@container (min-width:940px){
  .tv-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start;gap:22px}
  .tv-rail{display:flex;flex-direction:column;align-items:stretch;gap:14px}
}
@container (min-width:1500px){
  .tv-layout{grid-template-columns:minmax(0,1fr) 380px}
}

/* ------------------------------------------------------------------ figures */
.tv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tv-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;
  padding:12px 14px;border:1px solid var(--tv-line);border-radius:var(--tv-radius);
  background:var(--tv-card);font:inherit;color:inherit;text-align:left;
}
button.tv-stat{cursor:pointer}
button.tv-stat:hover:not(:disabled){border-color:var(--tv-ink)}
button.tv-stat:disabled{cursor:default}
.tv-stat b{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tv-stat span{font-size:12px;color:var(--tv-muted);line-height:1.3}
.tv-stat.is-alert{border-color:var(--tv-alert);background:var(--tv-alert-soft)}
.tv-stat.is-alert b{color:var(--tv-alert)}
.tv-stat.is-good b{color:var(--tv-good)}

.tv-empty{
  display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;
  padding:28px 16px;border:1px dashed var(--tv-line);border-radius:var(--tv-radius);
  background:var(--tv-bg);color:var(--tv-muted);
}
.tv-empty b{color:var(--tv-ink);font-size:15px}

/* ------------------------------------------------------------------- agenda */
.tv-group{min-width:0;scroll-margin-top:80px}
.tv-group-head{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tv-muted);
}
.tv-group.is-overdue .tv-group-head{color:var(--tv-alert)}
.tv-group.is-today .tv-group-head{color:var(--tv-today)}
.tv-count{
  min-width:20px;padding:1px 7px;border-radius:999px;background:var(--tv-bg);border:1px solid var(--tv-line);
  font-size:11px;font-weight:600;letter-spacing:0;text-align:center;color:var(--tv-muted);
}
.tv-list{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--tv-line);border-radius:var(--tv-radius);background:var(--tv-card);overflow:hidden;
}
.tv-task{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:4px 12px 4px 10px;border-top:1px solid var(--tv-line);
}
.tv-task:first-child{border-top:0}
.tv-task.is-late{box-shadow:inset 3px 0 0 var(--tv-alert)}
.tv-check{
  position:relative;width:20px;height:20px;margin:0;padding:0;flex:0 0 auto;
  border:1.5px solid var(--tv-muted);border-radius:999px;background:var(--tv-card);cursor:pointer;
}
/* A larger target than the ring itself, for a finger. */
.tv-check::before{content:'';position:absolute;inset:-10px}
.tv-check:hover{border-color:var(--tv-good)}
.tv-check:hover::after,.tv-task.is-done .tv-check::after{
  content:'';position:absolute;left:5.5px;top:2.5px;width:5px;height:9px;
  border:solid var(--tv-good);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.tv-task.is-done .tv-check{border-color:var(--tv-good);background:var(--tv-good)}
.tv-task.is-done .tv-check::after{border-color:#fff}
.tv-main{
  display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 0;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.tv-main:hover .tv-title{text-decoration:underline}
.tv-title{font-weight:600;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.tv-task.is-done .tv-title{color:var(--tv-muted);text-decoration:line-through}
.tv-meta{font-size:12px;color:var(--tv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-due{font-size:12px;color:var(--tv-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tv-due.is-late{color:var(--tv-alert);font-weight:600}
.tv-prio{
  padding:2px 7px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;
  background:var(--tv-bg);border:1px solid var(--tv-line);color:var(--tv-muted);
}
.tv-prio.is-urgent{background:var(--tv-alert);border-color:var(--tv-alert);color:#fff}
.tv-prio.is-high{background:var(--tv-alert-soft);border-color:transparent;color:var(--tv-alert)}
.tv-more{padding:8px 12px 8px 40px;border-top:1px solid var(--tv-line);font-size:12px;color:var(--tv-muted)}

/* -------------------------------------------------------------- the rail */
.tv-card{min-width:0;padding:14px 16px;border:1px solid var(--tv-line);border-radius:var(--tv-radius);background:var(--tv-card)}
.tv-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.tv-card-alert{padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--tv-alert);cursor:pointer;white-space:nowrap}
.tv-card-alert:hover{text-decoration:underline}
.tv-card-alert:focus-visible{outline:2px solid var(--tv-ink);outline-offset:2px;border-radius:4px}
.tv-card-head{display:flex;align-items:center;gap:8px;margin:0;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tv-muted)}
.tv-card-none{margin:0;font-size:13px;color:var(--tv-muted);line-height:1.45}
.tv-card.tv-group{scroll-margin-top:80px;overflow:hidden}
.tv-card .tv-list{border:0;border-radius:0;margin:0 -16px -14px;border-top:1px solid var(--tv-line)}
.tv-card .tv-task{padding-left:14px}

.tv-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tv-day{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:10px;padding:8px 0;border-top:1px solid var(--tv-line)}
.tv-day:first-child{border-top:0;padding-top:2px}
.tv-day-date{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding-top:1px}
.tv-day-date span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tv-muted)}
.tv-day-date b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;min-width:28px;text-align:center;border-radius:999px}
.tv-day.is-today .tv-day-date span{color:var(--tv-today)}
.tv-day.is-today .tv-day-date b{background:var(--tv-today);color:#fff;padding:2px 0}
.tv-day-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px}
.tv-day-task{display:block;max-width:100%;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:550;color:inherit;
  text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-day-task:hover{text-decoration:underline}
.tv-day-none,.tv-day-more{font-size:12px;color:var(--tv-muted)}
.tv-day.is-free:not(.is-today) .tv-day-date b{color:var(--tv-muted);font-weight:600}
.tv-day-n{min-width:18px;font-size:12px;font-weight:700;color:var(--tv-muted);text-align:right;font-variant-numeric:tabular-nums;padding-top:3px}
.tv-day-bar{display:block;height:8px;margin-top:6px;border-radius:999px;background:var(--tv-bg);overflow:hidden}
.tv-day-bar i{display:block;height:100%;border-radius:999px;background:var(--tv-week)}
.tv-day.is-today .tv-day-bar i{background:var(--tv-today)}

.tv-mix{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--tv-bg);margin:0 0 10px}
.tv-mix i{display:block;min-width:4px}
.tv-mix-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.tv-mix-list li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.tv-mix-list li span{flex:1;min-width:0;color:var(--tv-ink)}
.tv-mix-list li b{font-variant-numeric:tabular-nums}
.tv-mix-list i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.tv-mix .is-urgent,.tv-mix-list .is-urgent i{background:var(--tv-alert)}
.tv-mix .is-high,.tv-mix-list .is-high i{background:var(--tv-today)}
.tv-mix .is-normal,.tv-mix-list .is-normal i{background:var(--tv-week)}
.tv-mix .is-low,.tv-mix-list .is-low i{background:var(--tv-later)}

.tv-late{list-style:none;margin:0;padding:0}
.tv-late li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--tv-line)}
.tv-late li:first-child{border-top:0;padding-top:0}
.tv-late-task{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tv-late-task:hover .tv-late-title{text-decoration:underline}
.tv-late-title{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.tv-late-meta{font-size:12px;color:var(--tv-muted);overflow-wrap:anywhere}
.tv-late .tv-due{padding-top:1px}

.tv-doneby{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tv-doneby li{display:grid;grid-template-columns:minmax(0,1fr) 70px 22px;align-items:center;gap:10px}
.tv-doneby-who{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:inherit;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-doneby-who:hover{text-decoration:underline}
.tv-doneby-bar{display:block;height:8px;border-radius:999px;background:var(--tv-bg);overflow:hidden}
.tv-doneby-bar i{display:block;height:100%;border-radius:999px;background:var(--tv-good)}
.tv-doneby b{text-align:right;font-variant-numeric:tabular-nums;color:var(--tv-good)}

.tv-day-task:focus-visible,.tv-late-task:focus-visible,.tv-doneby-who:focus-visible{outline:2px solid var(--tv-ink);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------------- team */
.tv-table{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--tv-line);border-radius:var(--tv-radius);background:var(--tv-card);overflow:hidden;
}
.tv-row{
  display:grid;grid-template-columns:minmax(170px,1.7fr) minmax(70px,1.3fr) repeat(5,minmax(46px,.4fr));
  align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--tv-line);
}
.tv-row:first-child{border-top:0}
.tv-head{
  padding-top:9px;padding-bottom:9px;background:var(--tv-bg);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;line-height:1.25;text-transform:uppercase;color:var(--tv-muted);
}
.tv-head > div:nth-child(n+3){text-align:right}
.tv-who{min-width:0}
.tv-person{
  display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:4px 0;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.tv-person:hover .tv-name{text-decoration:underline}
.tv-ava{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;
  border-radius:999px;background:var(--tv-bg);border:1px solid var(--tv-line);
  font-size:11px;font-weight:700;color:var(--tv-muted);
}
.tv-row.has-overdue .tv-ava{border-color:var(--tv-alert);color:var(--tv-alert)}
/* A name wraps to a second line rather than losing its end (and "(you)"). */
.tv-name{font-weight:600;font-size:14px;line-height:1.3;min-width:0;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tv-name small{font-weight:400;color:var(--tv-muted)}
.tv-load{min-width:0;height:10px;border-radius:999px;background:var(--tv-bg);overflow:hidden}
.tv-bar{display:flex;height:100%;gap:1px;border-radius:999px;overflow:hidden}
.tv-seg{display:block;min-width:3px;height:100%}
.tv-seg.is-overdue,.tv-legend i.is-overdue{background:var(--tv-alert)}
.tv-seg.is-today,.tv-legend i.is-today{background:var(--tv-today)}
.tv-seg.is-week,.tv-legend i.is-week{background:var(--tv-week)}
.tv-seg.is-later,.tv-legend i.is-later{background:var(--tv-later)}
.tv-num{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.tv-num.is-alert{color:var(--tv-alert);font-weight:700}
.tv-num.is-done{color:var(--tv-good)}
.tv-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--tv-muted)}
.tv-legend span{display:inline-flex;align-items:center;gap:6px}
.tv-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}

.tv-check:focus-visible,.tv-main:focus-visible,.tv-person:focus-visible,button.tv-stat:focus-visible{
  outline:2px solid var(--tv-ink);outline-offset:2px;border-radius:var(--tv-radius);
}
.tv-check:focus-visible{border-radius:999px}

@media (max-width:720px){
  .tv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-task{grid-template-columns:auto minmax(0,1fr) auto;row-gap:0}
  .tv-task .tv-prio{grid-column:2;grid-row:2;justify-self:start;margin-bottom:8px}
  .tv-task .tv-due{grid-column:3;grid-row:1}
  .tv-head{display:none}
  .tv-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 6px;padding:12px}
  .tv-who{grid-column:1 / -1}
  .tv-load{grid-column:1 / -1}
  .tv-num{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;font-weight:600}
  .tv-num::before{content:attr(data-label);font-size:10.5px;font-weight:500;color:var(--tv-muted);line-height:1.2}
}