@import url("bars.css");

.filtering {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0.5em 1em;

  /* TODO Replace with calc(-1 * var(--main-padding-top)) and the like */
  margin-top: calc(-1% - .1%); /* HACK */
  margin-left: calc(-6% - .5%); /* HACK */
  margin-right: calc(-6% - .9%); /* HACK */

  background: var(--background-darker-color);
}
.filtering > summary {
  margin-top: 0.5em;
  margin-bottom: 0.5em;

  font-size: 1.33em;
  font-weight: bold;
  color: var(--vn-primary-color);
}
.filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1em;

  margin-top: 1em; /* HACK gap in details should already do this... */
  margin-bottom: 1em;
}
.filter {
  display: flex;
  flex-direction: column;
  flex-basis: 30ch;
  flex-grow: 2;
  gap: 1em;
  min-width: 0; /* HACK What?? */
}
.filtering > .controls {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 1em;
}

.notes {
  max-width: 80ch;
}

.matches {
  margin-top: 0;
  margin-bottom: 2em;
}

.noresults {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 2em;
}

/********** Readings **********/

.good {
  color: var(--good-color);
}
.ok {
  color: var(--ok-color);
}
.bad {
  color: var(--bad-color);
}
.good.faded {
  color: var(--good-lighter-color);
}
.ok.faded {
  color: var(--ok-lighter-color);
}
.bad.faded {
  color: var(--bad-lighter-color);
}
/* HACK Hardcoded with https://codepen.io/sosuke/pen/Pjoqqp */
img.good {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(1556%) hue-rotate(68deg) brightness(94%) contrast(86%);
}

img.ok {
  filter: brightness(0) saturate(100%) invert(67%) sepia(83%) saturate(778%) hue-rotate(340deg) brightness(95%) contrast(99%);
}

img.bad {
  filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(991%) hue-rotate(313deg) brightness(88%) contrast(103%);
}
.bar.bar-color-good {
  background-color: var(--good-color) !important; /* HACK For some reason bar.css takes precedence here... */
}
.bar.bar-color-ok {
  background-color: var(--ok-color) !important; /* HACK For some reason bar.css takes precedence here... */
}
.bar.bar-color-bad {
  background-color: var(--bad-color) !important; /* HACK For some reason bar.css takes precedence here... */
}
.bar.bar-color-good.faded {
  background-color: var(--good-lighter-color) !important; /* HACK For some reason bar.css takes precedence here... */
}
.bar.bar-color-ok.faded {
  background-color: var(--ok-lighter-color) !important; /* HACK For some reason bar.css takes precedence here... */
}
.bar.bar-color-bad.faded {
  background-color: var(--bad-lighter-color) !important; /* HACK For some reason bar.css takes precedence here... */
}

.readings {
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr));
  margin-bottom: 1em;
}
.reading {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1em;
  padding: 2em;
  text-align: center;
  max-width: 100%;

  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: -8px -8px var(--border-color);
}
.reading > .title {
  width: 100%;
  padding-bottom: 1em;
  border-bottom: solid 1px var(--line-color);
}
.reading > .title > .name {
  margin-top: 0;
  margin-bottom: 6px;

  font-size: x-large;
  font-weight: bold;
}
.reading > .title > .description:before {
  content: "\200D"; /* HACK This is kinda ugly but I gotta make desc. take up space even when empty */
}

.image-with-placeholder > img.real {
  position: relative;
  width: 100%;
}
.image-with-placeholder > img.placeholder {
  position: absolute;
}

/* Loyalty reading */

.reading.loyalty {
  align-items: center;
}
.reading.loyalty > .compared {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin-top: 2em;
  align-items: center;

  color: var(--text-lighter-color);
  font-size: smaller;
  font-style: italic;
}
.reading.loyalty > .compared > .name {
  font-size: larger;
  margin-bottom: 0.25em;
}
.reading.loyalty > .smilies,
.reading.loyalty > .compared > .smilies {
  width: 90%;
  height: auto;
}
.reading.loyalty > .compared > .smilies {
  opacity: 0.66;
}
.reading.loyalty > .score > .number,
.reading.loyalty > .compared > .score > .number {
  font-weight: bold;
  font-size: x-large;
}
.reading.loyalty > .compared > .score > .number {
  font-weight: normal;
  font-size: large;
}
.reading.loyalty > .employees,
.reading.loyalty > .compared > .employees {
  display: grid;
  width: 90%; /* To match smilies width */
  grid-template-columns: 3.15fr 1fr 1fr;
  gap: 1em;
}
.reading.loyalty > .employees > .employee,
.reading.loyalty > .compared > .employees > .employee {
  display: flex;
  flex-direction: column;
}
.reading.loyalty > .employees > .employee > .number {
  font-weight: bold;
}
.reading.loyalty > .employees > .employee > .subtitle,
.reading.loyalty > .compared > .employees > .employee > .subtitle {
  font-size: smaller;
}

.reading.loyalty > * > .touchpoints {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.reading.loyalty > * > .touchpoints > .touchpoint {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0.33em;
}
.reading.loyalty > * > .touchpoints > .name {
  margin-bottom: 0.5em;

  font-size: large;
}
.reading.loyalty > * > .touchpoints > .legend {
  display: flex;
  justify-content: space-around;
  gap: 4em;
}
.reading.loyalty > * > .touchpoints > .touchpoint > .bar-wrapper.left {
  justify-self: end;
}
.reading.loyalty > * > .touchpoints > .touchpoint > .bar-wrapper {
  max-width: calc(100% - 3em); /* 3em to account for pct and thumb, which should be about right */
}
.reading.loyalty > * > .touchpoints > .touchpoint > .bar-wrapper > .thumb {
  height: 1em;
}
.reading.loyalty > * > .touchpoints > .touchpoint > .data > .question {
  font-size: smaller;
}
.reading.loyalty > * > .touchpoints > .touchpoint > .data > .total {
  font-weight: bold;
  font-size: x-large;
}

/* Agreement reading */

.reading.agreement > .questions,
.reading.agreement > details.overflow > .questions {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(2, 1fr);
}
.reading.agreement > details.overflow > summary {
}
.reading.agreement > details.overflow > .questions {
  margin-top: 1em;
}
.reading.agreement > .questions > .legend {
  width: 50%;
  justify-self: end;
  display: flex;
  justify-content: space-evenly;
  grid-column: 1/3;
  font-weight: bold;
}
.reading.agreement > .questions > .question,
.reading.agreement > details.overflow > .questions > .question {
  font-size: small;
}
.reading.agreement > .questions > .bars,
.reading.agreement > details.overflow > .questions > .bars {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.reading.agreement > .questions > .bars > .compared,
.reading.agreement > details.overflow > .questions > .bars > .compared {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.reading.agreement > .questions > .bars > .compared,
.reading.agreement > details.overflow > .questions > .bars > .compared {
  opacity: 0.66;
  font-style: italic;
}
.reading.agreement > .questions > .bars > .compared > .subtitle,
.reading.agreement > details.overflow > .questions > .bars > .compared > .subtitle {
  color: var(--text-lighter-color);
  font-size: xx-small;
  font-style: italic;
}
/*.reading.efficiency {
  align-items: center;
}*/
.reading.agreement > .scores {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: space-evenly;
  width: 100%;

  padding-bottom: 1em;
  border-bottom: solid 1px var(--line-color);
}
.reading.agreement > .scores > .satisfaction,
.reading.agreement > .scores > .average {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.reading.agreement > .scores > .satisfaction > .number,
.reading.agreement > .scores > .average > .number {
  font-size: large;
  font-weight: bold;
}

/* Satisfaction reading */

.reading.satisfaction > .legend {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: space-evenly;
  width: 100%;

  font-size: large;
  font-weight: bold;
}
.reading.satisfaction > .comapred {
  display: flex;
  flex-direction: column;
  gap: 0.66em;
}
.reading.satisfaction > .comapred > .name {
  color: var(--text-lighter-color);
  font-style: italic;
}
.reading.satisfaction > .comapred > .number {
  font-style: italic;
}

/**/

.reading.agreement > details > .generics {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 2em;
}

.reading.agreement > details > .generics > .dot {
  color: var(--line-color);
}

/* Adjustments for very small screens */

@media (max-width: 480px) {
  .readings {
    margin-left: -1em;
    margin-right: -1em;
    gap: 0.5em;
  }
  .reading {
    padding-left: 1em;
    padding-right: 1em;

    border: 1px solid var(--border-color);
    box-shadow: unset;
    font-size: smaller;
  }
  .reading > .title > .name,
  .reading.loyalty > .score > .number,
  .reading.loyalty > .touchpoints > .touchpoint > .data > .total  {
    font-size: large;
  }
}
/********** Print **********/

@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
  nav, form, .controls > a, .controls > input, footer {
    /*display: none;*/ /* HACK Triggers Chromium 1161709 no matter what */
    visibility: hidden;
  }
  .reading {
    page-break-inside: avoid;
  }
}