/* /projects-graph/ only. Loaded by _layouts/wide.html when page.wide_assets is true. */

.measure-wide {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

/* The list keeps the blog's reading measure. */
.pg-list,
.measure-wide .post-content > p {
  max-width: 44rem;
}

.pg-list:focus { outline: none; }

.pg-items li { margin-bottom: .35em; }

.pg-rel {
  display: block;
  font-size: .8em;
  color: #666;
}
.pg-rel > span + span::before { content: " \00b7  "; }

.pg-item.pg-active {
  background: rgba(255, 220, 120, .25);
  box-shadow: -.5em 0 0 rgba(255, 220, 120, .25);
}

.pg-controls {
  display: flex;
  align-items: center;
  gap: .75em;
  margin: 1em 0;
}
.pg-controls[hidden], .pg-graph-panel[hidden], .pg-card[hidden] { display: none; }

.pg-button {
  font: inherit;
  font-size: .85em;
  padding: .25em .9em;
  border: 1px solid #999;
  border-radius: 3px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.pg-button[aria-pressed="true"] { background: #333; color: #fff; border-color: #333; }
.pg-button:focus-visible { outline: 2px solid #0076df; outline-offset: 2px; }

.pg-status { font-size: .8em; color: #666; }

.pg-graph-panel {
  position: relative;
  margin: 0 0 2em;
  --pg-bg: #fdfcf8;
  --pg-fg: #333;
  --pg-muted: #666;
  --pg-border: #ddd;
  --pg-link: #0076df;
}

.pg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3;
  background: var(--pg-bg);
  padding: .2em .5em;
}
.pg-skip:focus { left: .5em; top: .5em; }

.pg-graph-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  margin-bottom: .5em;
  font-size: .8em;
  color: #666;
}
.pg-legend-solid, .pg-legend-dashed {
  display: inline-block;
  width: 2em;
  vertical-align: middle;
  border-top: 2px solid #888;
  margin-left: .75em;
}
.pg-legend-dashed { border-top-style: dashed; border-top-color: #7d97b3; }
.pg-legend-private {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .75em;
  vertical-align: middle;
  border-radius: 50%;
  background: #cfccc6;
  border: 1px solid #aeaaa2;
}

.pg-graph {
  height: 70vh;
  min-height: 24rem;
  border: 1px solid var(--pg-border);
  border-radius: 3px;
  background: var(--pg-bg);
}

.pg-card {
  position: absolute;
  z-index: 2;
  max-width: 20rem;
  padding: .7em .9em;
  font-size: .8em;
  line-height: 1.45;
  background: var(--pg-bg);
  color: var(--pg-fg);
  border: 1px solid var(--pg-border);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.pg-card a { color: var(--pg-link); }
.pg-card-title { font-weight: bold; display: block; margin-bottom: .2em; }
.pg-card-meta, .pg-card-rel { color: var(--pg-muted); margin-top: .3em; }
.pg-card p { margin: 0; font-size: inherit; line-height: inherit; }
.pg-card-nested { z-index: 3; box-shadow: 0 3px 14px rgba(0, 0, 0, .2); }
.pg-card-private { font-weight: normal; font-style: italic; color: var(--pg-muted); margin: 0; }

/* Wide screens: list beside the graph so hovering the list lights up the graph. */
@media (min-width: 1100px) {
  .pg.pg-open {
    display: grid;
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    grid-template-areas: "controls controls" "list graph";
    column-gap: 2rem;
  }
  .pg.pg-open .pg-controls { grid-area: controls; }
  .pg.pg-open .pg-list { grid-area: list; }
  .pg.pg-open .pg-graph-panel { grid-area: graph; }
  .pg.pg-open .pg-graph-panel {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
  .pg.pg-open .pg-graph { height: calc(100vh - 6rem); }
}

@media (max-width: 699px) {
  .pg-graph { height: 60vh; min-height: 18rem; }
}

@media (prefers-color-scheme: dark) {
  .pg-graph-panel {
    --pg-bg: #1d1f21;
    --pg-fg: #e6e3dc;
    --pg-muted: #a9a59c;
    --pg-border: #3a3d40;
    --pg-link: #8ab8ff;
  }
  .pg-card { box-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
  .pg-legend-private { background: #55534f; border-color: #77746d; }
}