/* ============================================================
   GP Team Hub - activitysplash.css

   Today's cards under Splash of Color: the two runs, the Gong block,
   the week and month bars, the day's own bar, the systems row and the
   run a pill opens. activity.css holds the same cards on the four
   plain themes.

   Loaded by the css/activity.css set in includes/manifest.php.

   Doc: docs/notes/new/css/activitysplash.css.md
   ============================================================ */

/* ---------------- Splash of Color ----------------
   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 layout 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 color 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. */
[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);}
[data-splash="on"] .act-row[data-hue="green"] .act-ic{color:var(--hue-green);}
[data-splash="on"] .act-row[data-hue="blue"] .act-ic{color:var(--hue-blue);}
[data-splash="on"] .act-row[data-hue="purple"] .act-ic{color:var(--hue-purple);}

/* ---- The systems row ----
   Each of the three wears the color 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 color: the figure at the top, and the dot on every day
   the run counted. A day out of the field takes the third hue,
   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);}