:root {
  --color-light-gray: hsl(0, 0%, 80%);
  --color-gray: hsl(0, 0%, 60%);
  --color-gray-dark: hsl(0, 0%, 40%);
  --color-red: hsl(0, 59%, 92%);
}

footer {
  margin-top: 3rem;
}

#toggle-docs {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.diagram {
  padding: 1rem;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 1rem minmax(80px, 0.5fr) minmax(80px, 0.5fr) 1rem minmax(160px, 1fr);
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "d b b b c c c"
    "d e f g g h i"
    "d q r s t u i"
    "d j k l l m i"
    "d o o o p p p";
  gap: 0.5rem;
  line-height: 1.2;

  & > * { z-index: 1 }

  .layout-assumptions-req1        { grid-area: b; }
  .layout-assumptions-obj1        { grid-area: c; }
  .layout-assumptions-conflict    { grid-area: d; }
  .layout-req1                    { grid-area: e; margin: 0.5rem 0 0 0.5rem; }
  .layout-objective-requirement-1 { grid-area: f; }
  .layout-obj1                    { grid-area: g; margin: 0.5rem 0 0 0; }
  .layout-goal-objective-1        { grid-area: h; }
  .layout-goal                    { grid-area: i; margin: 0.5rem 0.5rem 0.5rem 0; }
  .layout-conflict                { grid-area: q; }
  .layout-req2                    { grid-area: j; margin: 0 0 0.5rem 0.5rem; }
  .layout-objective-requirement-2 { grid-area: k; }
  .layout-obj2                    { grid-area: l; margin: 0 0 0.5rem 0; }
  .layout-goal-objective-2        { grid-area: m; }
  .layout-assumptions-req2        { grid-area: o; }
  .layout-assumptions-obj2        { grid-area: p; }

  .shade {
    background: var(--color-red);
    grid-area: e / e / i / i;
    z-index: 0;
    border-radius: 0.5rem;
  }

  .diagram__faded {
    opacity: 0.3;
    transition: opacity 0.3s ease;
  }
  &.diagram--core-complete .diagram__faded { opacity: 1 }

  .diagram__highlight { position: relative }
  .diagram__highlight::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    right: -0.25rem;
    bottom: -0.25rem;
    border: 2px solid var(--accent-primary);
    border-radius: 0.75rem;
    pointer-events: none;
  }
}

input {
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
  padding: 0.2rem 0.4rem;
}

[contenteditable] {
  outline: 0 solid transparent;
}

.row {
  display: flex;
}

.pointer { cursor: pointer }

.instructions {
  border: 2px solid var(--accent-primary);
  margin-top: 0.5rem;
  font-style: italic;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 12pt;
}

.example.diagram {
  background: var(--color-white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 1200px;
  margin: 1rem auto;
}

.labeled {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  .labeled__label {
    pointer-events: none;
    font-size: 10pt;
    text-align: left;
    color: var(--color-gray);
    margin-bottom: 0.1rem;
  }

  .labeled__content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.box {
  background: var(--color-white);
  display: flex;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  min-height: 2rem;
  border-radius: 0.5rem;

  .labeled__content {
    margin-top: -0.4rem;
  }
}

.new-assumption {
  margin-bottom: 0.5rem;
}

.ph-trash {
  display: inline-block;
  padding-top: 0.25rem;
  margin-left: 0.35rem;
}

.assumptions {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 12pt;
}

.assumption-container {
  .ph-egg-crack {
    display: inline-block;
    padding-top: 0.15rem;
    margin-right: 0.15rem;
  }
}

.assumption-container:has(.invalidation) {
  margin-bottom: 0.5rem;

  .assumption {
    border-radius: 0.5rem 0.5rem 0 0;
    padding-top: 0.25rem;

    background: var(--color-green);
  }

  .invalidations {
    padding: 0.25rem;
    border-radius: 0 0 0.5rem 0.5rem;

    background: hsl(from var(--color-green) h s calc(l + 4));
  }
}

.assumption {
  padding: 0 0.25rem 0.25rem;
}

.invalidation {
  margin-bottom: 0.25rem;

  &:last-child { margin-bottom: 0 }

  .ph-link-break {
    display: inline-block;
    margin-right: 0.25rem;
  }
}

.connector {
  display: flex;
  align-self: center;
  justify-content: center;
  text-align: center;
}