/* ============================================================
   GP Team Hub - activity.css
   The trackable daily list, the weekly and monthly charts, and the
   achievement splash.

   Charting rules held to throughout: one accent hue against a neutral
   track (every chart here is a single series, so no legend and no
   second color is needed), columns rounded only at the data end and
   anchored flat to the baseline, a 2px surface gap between adjacent
   marks, recessive axes, and values in ink tokens rather than in the
   series color.
   ============================================================ */

/* ---- Header strip: streak, percent, and the targets toggle ---- */
.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-head-note{color:var(--ink-soft);font-size:.84rem;line-height:1.5;margin-top:3px;}
.act-streaks{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
/* The pill opens the days behind it, so it is a button and says so on
   hover rather than sitting there as a label. */
.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;}

/* ---- Tracked rows ----
   Two across, because one full-width row per metric left most of the
   line empty and made the block twice as tall as it needed to be. The
   count sits top right where the input is rather than on its own line
   underneath, which is the other half of that height. */
.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{font-weight:600;font-size:.92rem;line-height:1.35;}
.act-row[data-done="true"] .act-name{color:var(--ink-faint);}
.act-why{color:var(--ink-soft);font-size:.8rem;line-height:1.45;margin-top:2px;}

/* Week-to-date bar. Thin, so it reads as a measure rather than as
   another block of furniture. Never rendered on a binary row. */
.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 ----
   No steppers. This gets filled in once at the end of a day, not tapped
   up one door at a time from the driver's seat. */
.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 target behind an empty box is a hint, so it wears the faint ink
   and a normal weight and cannot be read as a figure somebody logged. */
.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;}

/* ---- A block of its own under the day's checks ----
   Gong is recorded rather than knocked, so it reads as its own block
   with its own run of days rather than as another check in the list.
   The heading is a line of text and a pill, not a card, because the
   cards under it are the content. */
.act-block{margin-top:18px;}
.act-block-head{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:10px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.act-block-title{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:700;
}
.act-block-title i{color:var(--accent);font-size:1.2rem;}
.act-block .act-streak{margin-top:0;}
.act-rows-tight{margin-top:10px;}

/* A yes/no metric is a note under the counted rows rather than another
   task, since there is no quantity to enter and no bar to fill. */
.act-note{
  display:flex;align-items:center;gap:9px;
  margin-top:8px;
  padding:9px 12px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.act-note .act-tick{font-size:1.05rem;line-height:1;}
.act-note[data-done="true"] .act-tick{color:var(--accent);}
.act-note-txt{
  flex:1;min-width:0;
  font-size:.82rem;line-height:1.4;
  color:var(--ink-soft);
}
.act-note[data-done="true"] .act-note-txt{color:var(--ink-faint);}

@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 weekly and monthly blocks ---- */
.mprog{display:grid;gap:12px;margin-top:14px;min-width:0;}
.mprog-row{display:grid;gap:5px;min-width:0;}
/* The name gives way before the figure does, so a long metric name on a
   phone shortens instead of pushing the card wider than the screen. */
.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;
}

/* ---- Achievement splash ---- */
.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;
}
/* Green, because reaching a target is the one piece of feedback on the
   page that is purely good news. White on green rather than green on a
   tint, so it never reads as a warning. */
.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 stays legible: it is a state, not a deletion. */
.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);}

/* ---- Short call buttons on Today ----
   These numbers are dialled more than anything else on the site, so on
   the home page they lose the explanation and become buttons. The
   reasoning behind each one lives on Launchpad, where the full cards
   still are. */
/* Sized to the widest number rather than to a share of the row, so a
   phone number is never the thing that gets truncated. */
.calls{
  display:grid;
  /* The floor is in rem so it follows the number it has to hold. At
     212px flat, a reader whose browser font is 20px got a card ten
     pixels short of its own phone number. */
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
  gap:8px;
  margin-top:14px;
}
.call{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:9px 11px;
  color:var(--ink);
  min-width:0;
}
.call:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.call-ic{font-size:.85rem;flex-shrink:0;color:var(--ink-faint);}
.call-main{display:flex;flex-direction:column;min-width:0;gap:3px;line-height:1.2;}
.call-who{
  font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.call-num{
  font-size:.98rem;font-weight:700;letter-spacing:-.2px;
  color:var(--ink);
  white-space:nowrap;
}
.call-opt{
  margin-left:auto;flex-shrink:0;
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:2px 8px;
  font-size:.74rem;font-weight:700;
  color:var(--ink-soft);
}
.call-alt .call-num{font-weight:600;}

/* ---- The same cards, on the shell's colour ----
   A white card on the bar's slate reads as a hole cut in the band, so
   on the band the cards take the shell's own surfaces and its ink. The
   doors take the accent, because they are the thing here a rep presses
   rather than reads, and the option chip goes darker than its card so
   it reads as set into it. */
.calls-top .call{
  background:var(--shell-card);
  border-color:var(--shell-card-line);
  color:var(--shell-ink);
}
.calls-top .call:hover{background:var(--shell-card-hover);border-color:var(--shell-card-hover);}
.calls-top .call-ic{color:var(--shell-ink-soft);}
.calls-top .call-who{color:var(--shell-ink-soft);}
.calls-top .call-num{color:var(--shell-ink);}
.calls-top .call-opt{
  background:var(--shell-bg);
  border-color:var(--shell-line);
  color:var(--shell-ink);
}
.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);}

/* ---- The same band on Launchpad ----
   The four lines are bigger cards there and the calls sit in a header
   that opens them, but the rule is the one above: on the shell's colour
   everything takes the shell's surfaces, and what a rep presses takes
   the accent. */
.calls-top .four{margin-bottom:0;}
/* The four lines are the one thing on this band that sits half a step
   down: four large cards at the card's full brightness left the band
   with nothing of its own showing. Everything else here, the calls
   header included, stays where Today has it. */
.calls-top .four-card{
  background:var(--shell-card-mid);
  border-color:var(--shell-card-mid-line);
  color:var(--shell-ink);
}
.calls-top .four-card:hover{background:var(--shell-card-mid-hover);border-color:var(--shell-card-mid-hover);}
.calls-top .four-who{color:var(--shell-ink-soft);}
.calls-top .four-num{color:var(--shell-ink);}
.calls-top .four-num i{color:var(--shell-ink-soft);}
.calls-top .four-opt{background:var(--shell-bg);color:var(--shell-ink);}
.calls-top .four-for{color:var(--shell-ink-soft);}

/* The calls header is a card that opens, so it wears what the cards
   beneath it wear, which on this band is the half step down. */
.calls-top .mtg-fold{
  background:var(--shell-card-mid);
  border-color:var(--shell-card-mid-line);
  margin-bottom:10px;
}
.calls-top .mtg-fold-head:hover{background:var(--shell-card-mid-hover);}
.calls-top .mtg-fold-title{color:var(--shell-ink);}
.calls-top .mtg-fold-ic,
.calls-top .mtg-fold-sub,
.calls-top .mtg-fold-chev{color:var(--shell-ink-soft);}
/* What the header opens sits inside it, so it steps up rather than
   back to the page's own white. */
.calls-top .mtg-card{
  background:var(--shell-card-mid-hover);
  border-color:var(--shell-card-mid-line);
  color:var(--shell-ink);
}
/* A folded row is a row, not a card: given a card's fill they stacked
   into one lighter panel inside the header. The line between them is
   what separates them. */
.calls-top .mtg-row{
  background:transparent;
  border-top-color:var(--shell-card-mid-line);
  color:var(--shell-ink);
}
.calls-top .mtg-name,
.calls-top .mtg-row-name,
.calls-top .mtg-pinval{color:var(--shell-ink);}
.calls-top .mtg-when,
.calls-top .mtg-note,
.calls-top .mtg-row-when,
.calls-top .mtg-pinlabel,
.calls-top .mtg-when i{color:var(--shell-ink-soft);}
.calls-top .mtg-dial,
.calls-top .mtg-pinbox,
.calls-top .mtg-edit{border-color:var(--shell-card-line);color:var(--shell-ink);}
.calls-top .mtg-dial:hover,
.calls-top .mtg-pincopy:hover{background:var(--shell-card-mid);}
.calls-top .mtg-dial i,
.calls-top .mtg-pincopy{color:var(--shell-ink-soft);}

/* The doors on Launchpad are the same row Today carries, so they need
   nothing of their own beyond the space above them. */
.calls-top .qrow{margin-top:12px;}

/* ---- 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 that has not happened yet is dimmed and inert. It gets the
   ordinary cursor, because the crossed-out one reads as something
   broken rather than as a day that is simply not here yet. */
.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, not a paragraph of
   instructions: the reader knows what signing in is. */
.act-gate-btn{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
}
.act-gate{align-items:center;}


/* One field's before/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 rep's own links, as a second row under the four numbers. Same
   shape, so the two rows read as one block: the things you open first. */
/* ---- The row of doors under the four lines ----
   Icon and name, sized to the name: the reader's own links and the four
   systems the day runs on. No address on the card, because a rep opens
   these rather than reads them. */
.qrow{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
/* Two groups, so the reader's own links stay at the left end and the
   systems stay at the right one however many of either there are. The
   auto margin holds the second group at the right even when it wraps
   onto a line of its own, which space-between alone would not. */
.qgroup{display:flex;flex-wrap:wrap;gap:8px;}
.qgroup + .qgroup{margin-left:auto;}
.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 way to edit the links, at the end of the links rather than in a
   heading over them: a card the width of its own glyph. */
.qcard-ico{padding:9px 12px;}
.qcard-ico .qcard-ic{width:auto;}

/* Overflow dropdown for links that exceed 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 nobody was in the field ----
   A weekend and a holiday come off the calendar. A sick day does not,
   because a blank day reads the same whether somebody was ill or
   simply did not log, so it is said 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 their manager marked out ----
   A statement, not a control: whoever can set this can step their own
   streak over a broken day, which makes it the manager's to set and the
   rep's only to read. */
.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;}

/* ---------------- Splash of Colour ----------------
   Everything below fires only while the switch under the theme picker
   is on. Off, none of these selectors match and the page is the flat
   scheme it has always been.

   Two roles, and they take different steps of the same hue. A mark is
   a glyph or a figure sitting on the page, and it wears the hue itself.
   A button is a filled shape with white on top of it, and it wears the
   step that keeps the white readable on a dark page. */

/* ---- The two runs ----
   The field run and the Gong run answer the same question about two
   different things, and side by side in one colour they read as one
   run split in half. */
[data-splash="on"] .act-streak[data-hue="green"]{background:var(--hue-green-btn);}
[data-splash="on"] .act-streak[data-hue="green"]:hover,
[data-splash="on"] .act-streak[data-hue="green"][data-zero="true"]:hover{background:var(--hue-green);}
[data-splash="on"] .act-streak[data-hue="purple"]{background:var(--hue-purple-btn);}
[data-splash="on"] .act-streak[data-hue="purple"]:hover,
[data-splash="on"] .act-streak[data-hue="purple"][data-zero="true"]:hover{background:var(--hue-purple);}

/* ---- The Gong block ----
   The heading over the two recorded metrics, so the block is findable
   without reading it. */
[data-splash="on"] .act-block-title i{color:var(--hue-purple);}

/* ---- The week and month bars ----
   The same hue the metric wears in the cards above them, because these
   are the same numbers drawn a second way. */
[data-splash="on"] .mprog-row[data-hue="green"] .mprog-fill{background:var(--hue-green-btn);}
[data-splash="on"] .mprog-row[data-hue="blue"] .mprog-fill{background:var(--hue-blue-btn);}
[data-splash="on"] .mprog-row[data-hue="purple"] .mprog-fill{background:var(--hue-purple-btn);}

/* ---- The day's own bar ----
   A metric reads as one thing across the page, so the bar under the
   number on Today takes the hue its weekly bar already wears rather
   than leaving every row in the accent. */
[data-splash="on"] .act-row[data-hue="green"] .act-bar-fill{background:var(--hue-green-btn);}
[data-splash="on"] .act-row[data-hue="blue"] .act-bar-fill{background:var(--hue-blue-btn);}
[data-splash="on"] .act-row[data-hue="purple"] .act-bar-fill{background:var(--hue-purple-btn);}

/* ---- The systems row ----
   Each of the three wears the colour of its own sign-in screen, so a
   rep reaching for Gong reaches for the purple one. */
[data-splash="on"] .calls-top .qcard[data-hue="green"]{background:var(--hue-green-btn);border-color:var(--hue-green-btn);}
[data-splash="on"] .calls-top .qcard[data-hue="green"]:hover{background:var(--hue-green);border-color:var(--hue-green);}
[data-splash="on"] .calls-top .qcard[data-hue="blue"]{background:var(--hue-blue-btn);border-color:var(--hue-blue-btn);}
[data-splash="on"] .calls-top .qcard[data-hue="blue"]:hover{background:var(--hue-blue);border-color:var(--hue-blue);}
[data-splash="on"] .calls-top .qcard[data-hue="purple"]{background:var(--hue-purple-btn);border-color:var(--hue-purple-btn);}
[data-splash="on"] .calls-top .qcard[data-hue="purple"]:hover{background:var(--hue-purple);border-color:var(--hue-purple);}

/* ---- The run behind a pill ----
   Opened from a pill, so it carries that pill's colour: the figure at
   the top, and the dot on every day the run counted. A day out of the
   field takes the third hue rather than the empty ring a missed day
   wears, because stepped over and missed are not the same answer. */
[data-splash="on"] .strk-panel[data-hue="green"] .strk-num:not(.strk-num-alt){background:var(--hue-green-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-num:not(.strk-num-alt){background:var(--hue-purple-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-row[data-state="met"] .strk-mark{background:var(--hue-purple-btn);border-color:var(--hue-purple-btn);}
[data-splash="on"] .strk-panel[data-hue="purple"] .strk-row[data-state="met"] .strk-said{color:var(--hue-purple);}
[data-splash="on"] .strk-row[data-state="off"] .strk-mark{background:var(--hue-blue-btn);border-color:var(--hue-blue-btn);}