/* ============================================================
   Pipezoom - activity.css
   The Dashboard's tracker on the 4 plain themes: the ring and run pills,
   the run panel, the metric rows, the targets editor, the week and month
   bars, the toast, the day bar, the links row, the shortcut cards, the
   day's list line and the day-off notes; it also styles the admin
   accounts table and toggles.
   Globals: none; the css/activity.css set loads activitysplash.css after it.
   Notes: docs/notes/app.pipezoom.com/css/activity.css.md
   ============================================================ */

/* Header strip: the ring, the count line and the run pills */
.act-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;
}
.act-ring{flex-shrink:0;}
.act-ring svg{display:block;transform:rotate(-90deg);}
.act-ring-track{stroke:var(--surface-high);}
.act-ring-fill{
  stroke:var(--accent);
  transition:stroke-dashoffset .5s ease;
}
.act-ring-wrap{position:relative;width:96px;height:96px;}
.act-ring-mid{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
}
.act-ring-n{font-size:1.35rem;font-weight:700;line-height:1;letter-spacing:-.5px;}
.act-ring-l{font-size:.62rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);}

.act-head-main{flex:1;min-width:200px;}
.act-head-title{font-size:.95rem;font-weight:600;line-height:1.4;}
.act-streaks{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
/* A pill is a button that opens the days behind it, with a pointer on hover. */
.act-streak{cursor:pointer;border:none;}
.act-streak:hover{background:var(--accent-hover);}
.act-streak[data-zero="true"]:hover{background:var(--accent-strong);}
.act-streak:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* The run behind a pill */
.strk-scrim{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:var(--scrim);
  opacity:0;
  transition:opacity .18s ease;
}
.strk-scrim.strk-open{opacity:1;}
.strk-panel{
  position:relative;
  width:100%;max-width:420px;
  max-height:80vh;
  display:flex;flex-direction:column;
  padding:22px 22px 18px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
}
.strk-x{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
}
.strk-x:hover{background:var(--surface-high);color:var(--ink);}
.strk-head{font-size:1.05rem;font-weight:700;}
.strk-nums{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.strk-num{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:5px 11px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.78rem;font-weight:600;
}
.strk-num b{font-size:1rem;font-weight:700;}
.strk-num-alt{background:var(--surface-high);color:var(--ink);}
.strk-rows{
  margin-top:14px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:1px;
}
.strk-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 2px;
  font-size:.84rem;
}
.strk-row + .strk-row{border-top:1px solid var(--line);}
.strk-mark{
  width:10px;height:10px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  border:1px solid var(--line-strong);
}
.strk-row[data-state="met"] .strk-mark{background:var(--good);border-color:var(--good);}
.strk-row[data-state="off"] .strk-mark{background:transparent;}
.strk-when{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.strk-said{color:var(--ink-faint);font-size:.78rem;white-space:nowrap;}
.strk-row[data-state="met"] .strk-said{color:var(--good-ink);}
.strk-foot{
  margin-top:14px;
  color:var(--ink-faint);
  font-size:.78rem;line-height:1.5;
}
.act-streak{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  font-size:.76rem;font-weight:700;
}
.act-streak i{font-size:.78rem;}

/* Metric rows
   2 across, with the day's number top right beside the name. */
.act-rows{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.act-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:start;
  gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 13px;
}
.act-tick{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-size:1.15rem;line-height:1.25;color:var(--ink-faint);
}
.act-row[data-done="true"] .act-tick{color:var(--accent);}
.act-main{min-width:0;}
.act-name{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;line-height:1.35;}
.act-row[data-done="true"] .act-name{color:var(--ink-faint);}
/* On a done row the glyph stays in the accent and the name steps back. */
.act-ic{color:var(--accent);font-size:.82rem;flex-shrink:0;}
.act-why{color:var(--ink-soft);font-size:.8rem;line-height:1.45;margin-top:2px;}

/* The week-to-date bar: a thin measure. */
.act-bar{
  height:4px;
  background:var(--surface-high);
  border-radius:var(--radius-pill);
  margin-top:9px;
  overflow:hidden;
}
.act-bar-fill{
  height:4px;
  background:var(--accent);
  border-radius:var(--radius-pill);
  width:0;
  transition:width .4s ease;
}

.act-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  flex-shrink:0;
}
.act-meta{font-size:.76rem;color:var(--ink-faint);white-space:nowrap;}
.act-meta b{color:var(--ink);font-weight:700;}

/* The editable number. Because a day is typed in once, it has no steppers. */
.act-count{display:flex;align-items:center;gap:7px;}
.act-num{
  width:64px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:5px 7px;
  font-size:.95rem;font-weight:700;
  text-align:center;
  outline:none;
  -moz-appearance:textfield;
}
.act-num::-webkit-outer-spin-button,
.act-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* The goal behind an empty box is a hint in faint ink at a normal weight. */
.act-num::placeholder{color:var(--ink-faint);font-weight:400;opacity:1;}
.act-num:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.act-goal{font-size:.76rem;color:var(--ink-faint);white-space:nowrap;}

@media (max-width:820px){
  .act-rows{grid-template-columns:1fr;}
}

/* Targets editor, collapsed by default */
.act-targets{margin-top:16px;}
.act-targets summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
}
.act-targets summary::-webkit-details-marker{display:none;}
.act-targets summary:hover{color:var(--ink);}
.act-targets[open] summary{margin-bottom:12px;}
.act-tgt-grid{display:grid;gap:8px;}
.act-tgt-row{
  display:grid;
  grid-template-columns:1fr 84px 84px;
  gap:8px;align-items:center;
}
.act-tgt-name{font-size:.86rem;}
.act-tgt-head{
  font-size:.66rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
}
.act-tgt-note{color:var(--ink-soft);font-size:.8rem;line-height:1.5;margin-top:10px;}

/* Metric progress list, used by the week block */
.mprog{display:grid;gap:12px;margin-top:14px;min-width:0;}
.mprog-row{display:grid;gap:5px;min-width:0;}
/* On a phone a long name shortens and the figure holds its width. */
.mprog-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.85rem;
  min-width:0;
}
.mprog-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mprog-n{color:var(--ink-faint);font-size:.8rem;flex-shrink:0;white-space:nowrap;}
.mprog-n b{color:var(--ink);font-weight:700;}
.mprog-track{
  height:7px;
  background:var(--surface-high);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.mprog-fill{
  height:7px;
  background:var(--accent);
  border-radius:var(--radius-pill);
  width:0;
  transition:width .4s ease;
}
.mprog-row[data-hit="true"] .mprog-n b{color:var(--ink);}
.mprog-row[data-hit="true"] .mprog-name::after{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.72rem;color:var(--accent);
  margin-left:7px;
}

/* The toast js/splash.js shows */
.splash-wrap{
  position:fixed;
  left:50%;bottom:26px;transform:translateX(-50%);
  z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;
  width:calc(100% - 32px);max-width:400px;
}
/* Because a target reached is good news, the toast is green with white text. */
.splash{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:12px;
  row-gap:2px;
  background:var(--good);
  border:1px solid var(--good);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:13px 16px;
  animation:splash-in .34s ease both;
}
.splash-ic{
  grid-row:1 / span 2;
  align-self:center;
  font-size:1.15rem;line-height:1;
  color:var(--ink-inverse);
}
.splash-text{display:contents;}
.splash-title{
  font-weight:700;font-size:.94rem;line-height:1.35;
  color:var(--ink-inverse);
}
.splash-note{
  font-size:.82rem;line-height:1.4;
  color:var(--ink-inverse);
  opacity:.88;
}
.splash-out{animation:splash-out .3s ease both;}

@keyframes splash-in{
  from{opacity:0;transform:translateY(14px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes splash-out{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(8px);}
}

@media (prefers-reduced-motion:reduce){
  .splash,.splash-out{animation:none;}
  .act-bar-fill,.mprog-fill,.act-ring-fill{transition:none;}
}

/* Signed-out and error states */
.act-gate{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin-top:14px;
}
.act-gate i{color:var(--ink-faint);font-size:1rem;line-height:1.45;flex-shrink:0;}
.act-gate-t{font-weight:600;font-size:.92rem;}
.act-gate-n{color:var(--ink-soft);font-size:.84rem;line-height:1.5;margin-top:3px;}
.act-err{
  font-size:.8rem;color:var(--ink);
  background:var(--danger-wash);
  border-radius:var(--radius-sm);
  padding:8px 11px;margin-top:10px;
}

@media (max-width:640px){
  .act-tgt-row{grid-template-columns:1fr 70px 70px;}
  .act-ring-wrap{width:78px;height:78px;}
  .act-ring-n{font-size:1.15rem;}
}

/* Accounts table on Admin */
.acct{margin-top:14px;}
.acct-err{
  font-size:.82rem;color:var(--ink);
  background:var(--danger-wash);
  border-radius:var(--radius-sm);
  padding:9px 12px;margin-bottom:11px;
  line-height:1.5;
}
.acct-err[hidden]{display:none;}
.acct-you{
  font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--surface-high);
  border-radius:var(--radius-pill);
  padding:1px 7px;
  color:var(--ink-faint);
  margin-left:5px;
}
.acct-dn{display:block;font-size:.78rem;color:var(--ink-faint);}
/* A switched-off account is a state of the account and stays legible. */
.acct-off{opacity:.55;}
.acct-note{
  font-size:.8rem;color:var(--ink-soft);line-height:1.55;
  margin-top:11px;max-width:96ch;
}

/* Toggle used across the accounts table. */
.tog{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  color:var(--ink-soft);
  font-size:.8rem;font-weight:600;
  white-space:nowrap;
}
.tog:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.tog i{font-size:.9rem;}
.tog-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.tog-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-inverse);}
.tog:disabled{opacity:.45;cursor:default;}
.tog:disabled:hover{background:var(--surface-raised);border-color:var(--line);color:var(--ink-soft);}

/* The links row on the shell's color. Because a rep presses the cards, they take the accent. */
.calls-top .qcard{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.calls-top .qcard:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.calls-top .qcard-ic{color:var(--ink-inverse);}
/* As the band's only row, the links row starts at the band's own padding. */
.calls-top .qrow{margin-top:0;}

/* The shortcut cards under the band: .card in 1 row at every width, the
   glyph in the accent beside the name and its line. */
.grid.today-go{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:18px;}
.today-go-card{display:flex;align-items:center;gap:12px;color:var(--ink);}
.today-go-card:hover{text-decoration:none;}
.today-go-ic{flex-shrink:0;font-size:1.35rem;color:var(--accent);}
.today-go-txt{display:flex;flex-direction:column;min-width:0;}
.today-go-t{font-weight:700;font-size:.95rem;line-height:1.35;}
/* On a phone the 3 cards hold 1 row: the glyph over the name, with the
   line under the name left off. */
@media (max-width:619px){
  .today-go-card{flex-direction:column;gap:6px;padding:12px 8px;text-align:center;}
  .today-go .meta{display:none;}
}

/* Weekday bar */
.daybar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  margin-top:14px;
}
.dayb{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 7px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  color:var(--ink-soft);
  min-width:0;
}
.dayb:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.dayb-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.dayb-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-inverse);}
/* A day still to come is dimmed and inert, with the ordinary cursor. */
.dayb-off{opacity:.4;cursor:default;}
.dayb-off:hover{background:var(--surface-raised);border-color:var(--line);color:var(--ink-soft);}
.dayb-d{font-size:.66rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;}
.dayb-n{font-size:1.02rem;font-weight:700;line-height:1.1;}
.dayb-dot{
  width:5px;height:5px;border-radius:50%;
  background:transparent;
  margin-top:2px;
}
.dayb[data-filled="true"] .dayb-dot{background:var(--accent);}
.dayb-on[data-filled="true"] .dayb-dot{background:var(--ink-inverse);}
.daybar-note{
  font-size:.8rem;color:var(--ink-soft);
  margin-top:9px;min-height:1.2em;
}
.daybar-note b{color:var(--ink);}

/* The signed-out gate is an offer with a button beside it. */
.act-gate-btn{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
}
.act-gate{align-items:center;}


/* 1 field's before and after inside the call change log. */
.callhist-line{
  font-size:.8rem;line-height:1.5;
  overflow-wrap:anywhere;
}
.callhist-line b{font-weight:700;}

/* The row of link cards: icon and name, sized to the name */
.qrow{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
/* 2 groups hold the ends of 1 line, and both start at the left once the row wraps. */
.qgroup{display:flex;flex-wrap:wrap;gap:8px;}
.qcard{
  display:inline-flex;align-items:center;gap:9px;
  max-width:100%;min-width:0;
  padding:9px 14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font-size:.88rem;font-weight:600;
  transition:background .12s,border-color .12s;
}
.qcard:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.qcard-ic{
  color:var(--accent);
  font-size:.95rem;
  width:1.1em;text-align:center;
  flex-shrink:0;
}
.qcard-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The edit card at the end of the links is the width of its glyph. */
.qcard-ico{padding:9px 12px;}
.qcard-ico .qcard-ic{width:auto;}

/* Overflow dropdown for links past the available width. */
.qover-hidden{display:none !important;}
.qgroup{position:relative;}
.qover-btn .qcard-ic{font-size:.72rem;}
.qover-drop{
  position:absolute;
  top:100%;left:0;
  z-index:20;
  margin-top:6px;
  min-width:180px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:4px 0;
}
.qover-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  font-size:.87rem;font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.qover-item:hover{background:var(--surface-hover);text-decoration:none;}
.qover-item i{color:var(--accent);font-size:.85rem;width:16px;text-align:center;}
.calls-top .qover-item{color:var(--ink);}
.calls-top .qover-item i{color:var(--accent);}

/* The day's list: each line is the tick row and its press, ruled apart */
.task-line{display:flex;align-items:center;gap:7px;}
.task-line + .task-line{border-top:1px solid var(--line);}
.task-line > .btn{flex-shrink:0;white-space:nowrap;}

/* The day-off control on the admin rep page
   Because a blank day reads the same whether a rep was ill or did not log, a manager marks the day off here. */
.act-off{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:8px;
  padding:9px 12px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.act-off .act-tick{font-size:1.05rem;line-height:1;}
.act-off[data-on="true"] .act-tick{color:var(--accent);}
.act-off-txt{
  flex:1;min-width:0;
  font-size:.82rem;line-height:1.4;
  color:var(--ink-soft);
}
.act-off-why{flex-shrink:0;}
.act-off[data-on="false"] .act-off-why{display:none;}
.act-off-said{
  flex-basis:100%;
  font-size:.78rem;color:var(--ink-faint);
}

/* A day the manager marked off, as the rep reads it: a plain statement with no control. */
.act-out{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:12px;
  padding:11px 13px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  font-size:.85rem;line-height:1.5;
}
.act-out i{color:var(--ink-faint);line-height:1.5;flex-shrink:0;}