.crackls-view .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: #a65322;
}
.crackls-view .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 24px;
}
.crackls-view h1 {
  font-size: 34px;
  letter-spacing: -1.1px;
  margin: 8px 0;
}
.crackls-view p {
  color: #657479;
  line-height: 1.6;
  margin: 6px 0;
}
.crackls-view label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 7px;
}
.crackls-view input,
.crackls-view button {
  font: inherit;
}
.crackls-view button {
  cursor: pointer;
}
.crackls-view input {
  width: 155px;
  padding: 10px;
  background: #fffefa;
  border: 1px solid #b7c2bd;
  border-radius: 4px;
  color: #21323a;
}
.crackls-view button {
  border: 1px solid #b7c2bd;
  background: #fffefa;
  padding: 10px 14px;
  border-radius: 4px;
  color: #21323a;
}
.crackls-view button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.crackls-view button:hover {
  border-color: #b15c2d;
}
.crackls-view a {
  color: #9c4c20;
}
.crackls-view a:focus-visible,
.crackls-view button:focus-visible,
.crackls-view input:focus-visible {
  outline: 3px solid #d5824b;
  outline-offset: 3px;
}
.crackls-view .snapshot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #68787c;
  margin: 18px 0;
}
.crackls-view #summary {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 14px 0 25px;
  font-size: 13px;
}
.crackls-view #summary strong {
  font-size: 19px;
  margin-right: 5px;
}
.crackls-view #chain {
  border: 1px solid #d4dcd6;
  border-radius: 7px;
  background: #fafbf7;
  overflow: hidden;
}
.crackls-view .graph-heading {
  padding: 20px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #e1e6df;
}
.crackls-view h2 {
  font-size: 16px;
  margin: 0 0 4px;
}
.crackls-view .legend {
  display: flex;
  gap: 17px;
  font-size: 11px;
}
.crackls-view .good {
  color: var(--good);
}
.crackls-view .bad {
  color: var(--bad);
}
.crackls-view .running {
  color: var(--running);
}
.crackls-view .neutral {
  color: #64777d;
}
.crackls-view .graph-scroll {
  overflow: auto;
  background-image: radial-gradient(#cbd4cc 1px, transparent 1px);
  background-size: 18px 18px;
}
.crackls-view #graph {
  width: 1565px;
  height: 1280px;
  position: relative;
}
.crackls-view .column-label {
  position: absolute;
  top: 23px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #6a7b7c;
  font-weight: 600;
}
.crackls-view .node {
  width: 240px;
  position: absolute;
  padding: 16px;
  background: #fffefa;
  border: 1px solid #c9d3cc;
  border-radius: 6px;
  text-align: left;
  box-shadow: 0 3px 7px #24382c05;
}
.crackls-view .node.selected {
  outline: 2px solid #b87542;
  outline-offset: 3px;
}
.crackls-view .node h3 {
  font-size: 17px;
  margin: 0;
}
.crackls-view .node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crackls-view .node .badge {
  font-size: 11px;
  font-weight: 600;
}
.crackls-view .node small {
  display: block;
  color: #64757a;
  font-size: 10px;
  margin: 5px 0 13px;
}
.crackls-view .track {
  height: 5px;
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  background: #e3e8e2;
}
.crackls-view .track i {
  display: block;
  height: 100%;
}
.crackls-view .track .good {
  background: #398058;
}
.crackls-view .track .bad {
  background: #c24b40;
}
.crackls-view .track .running {
  background: #d69a30;
}
.crackls-view .progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-top: 7px;
  color: #637277;
}
.crackls-view .node a {
  display: inline-block;
  font-size: 11px;
  margin-top: 10px;
}
.crackls-view .node code {
  font-size: 10px;
}
.crackls-view .caption {
  font-size: 11px;
  padding: 15px 23px;
  border-top: 1px solid #e0e6df;
  margin: 0;
}
.crackls-view .detail {
  margin-top: 22px;
  background: #fffefa;
  border: 1px solid #d4dcd6;
  border-radius: 6px;
  padding: 22px;
}
.crackls-view .detail-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}
.crackls-view .jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 24px;
  max-height: 300px;
  overflow: auto;
}
.crackls-view .job {
  font-size: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #e5e9e2;
  display: flex;
  gap: 9px;
}
.crackls-view .job a {
  color: inherit;
  overflow-wrap: anywhere;
}
.crackls-view .footnote {
  font-size: 11px;
  margin-top: 16px;
}
.crackls-view #edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.crackls-view .edge {
  fill: none;
  stroke: #aabbb1;
  stroke-width: 1.5;
}
.crackls-view .edge.support {
  stroke-dasharray: 5 6;
  stroke: #bdc9c0;
}
@media (max-width: 1000px) {
  .crackls-view .heading,
  .crackls-view .graph-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .crackls-view .legend {
    flex-wrap: wrap;
  }
  .crackls-view .jobs {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .crackls-view h1 {
    font-size: 28px;
  }
  .crackls-view .snapshot {
    flex-direction: column;
    gap: 6px;
  }
  .crackls-view #summary {
    flex-wrap: wrap;
    gap: 12px;
  }
  .crackls-view .jobs {
    grid-template-columns: 1fr;
  }
}
.crackls-view .node small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 205px;
}
.crackls-view .node {
  min-height: 325px;
  height: auto;
}
.crackls-view .graph-scroll {
  scrollbar-width: auto;
  scrollbar-color: #9caea2 #e7ece5;
}
.crackls-view .graph-scroll::after {
  content: "Scroll horizontally to follow the full pipeline →";
  display: block;
  position: sticky;
  left: 0;
  width: max-content;
  max-width: 100%;
  padding: 8px 23px;
  font-size: 10px;
  color: #687c70;
  background: #f0f4ed;
}
.crackls-view .edge.locked {
  stroke-dasharray: 5 5;
}
.crackls-view .manifest-link {
  font-size: 11px;
  margin: 0 0 14px;
}
.crackls-view .scope-note {
  display: flex;
  gap: 20px;
  padding: 13px 17px;
  margin-bottom: 20px;
  background: #edf1e9;
  border: 1px solid #d3ddce;
  font-size: 12px;
  line-height: 1.6;
}
.crackls-view .scope-note strong {
  white-space: nowrap;
}
.crackls-view .scope-note span {
  color: #566b60;
}
.crackls-view .graph-subtitle {
  font-size: 11px;
  color: #64746a;
}
.crackls-view .node-role {
  font-size: 11px;
  line-height: 1.4;
  height: 31px;
  color: #596c61;
  margin: 7px 0;
}
.crackls-view .track .neutral {
  background: #98a69a;
}
.crackls-view .edge.cohort {
  stroke: #526d5a;
  stroke-width: 3;
}
.crackls-view .edge-label {
  font-size: 9px;
  fill: #4f6656;
  paint-order: stroke;
  stroke: #fafbf7;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.crackls-view .chain-reading {
  margin-top: 22px;
  border-bottom: 1px solid #d4dcd6;
  padding-bottom: 20px;
}
.crackls-view .chain-reading > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 14px;
}
.crackls-view h3 {
  font-size: 13px;
  margin: 0 0 6px;
}
.crackls-view .chain-reading p {
  font-size: 12px;
}
.crackls-view .selection-note {
  margin-top: 15px !important;
}
.crackls-view .dependency-detail {
  background: #f3f5ef;
  padding: 16px;
  margin: 16px 0;
}
.crackls-view .dependency-detail p {
  font-size: 12px;
  margin-bottom: 10px;
}
.crackls-view .policy-note {
  border-top: 1px solid #d2dccd;
  padding-top: 10px;
}
.crackls-view .detail > div > h3 {
  margin-bottom: 12px;
}
.crackls-view #policy-warnings {
  font-size: 12px;
  color: #a65a13;
}
@media (max-width: 1000px) {
  .crackls-view .scope-note {
    flex-direction: column;
    gap: 4px;
  }
  .crackls-view .chain-reading > div {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.crackls-view {
  --good: var(--green);
  --bad: var(--red);
  --running: var(--amber);
  font-size: 14px;
}
.crackls-view .scope-note strong {
  white-space: normal;
}
.crackls-view #branch {
  max-width: 220px;
}
.crackls-view .heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.crackls-view .edge-label {
  font-family: var(--font);
}

.crackls-view .node .build-age { font-size: 11px; color: #52666a; margin: 10px 0 7px; font-variant-numeric: tabular-nums; }
.crackls-view .freshness { display:block; position:relative; font-size:11px; font-weight:600; line-height:1.4; border-top:1px solid #e1e6df; padding-top:8px; cursor:help; }
.crackls-view .freshness.fresh, .crackls-view .freshness-detail.fresh { color:#276343; }
.crackls-view .freshness.stale, .crackls-view .freshness-detail.stale { color:#8b540b; }
.crackls-view .freshness.unknown, .crackls-view .freshness.none { color:#64777d; }
.crackls-view .freshness-tooltip { display:none; position:absolute; z-index:5; top:100%; left:0; width:265px; padding:12px; border:1px solid #c9d3cc; border-radius:4px; background:#fffefa; color:#21323a; font-weight:400; box-shadow:0 4px 12px #24382c20; }
.crackls-view .freshness:hover .freshness-tooltip, .crackls-view .freshness:focus .freshness-tooltip { display:block; }
.crackls-view .freshness:focus-visible { outline:2px solid #b87542; outline-offset:3px; }

.crackls-view .platform-pins { margin-top:10px; }
.crackls-view .sysroot-pin { display:inline-flex; align-items:baseline; gap:6px; max-width:100%; padding:4px 7px; border:1px solid #cbd8d3; border-radius:4px; background:#edf3ef; color:#36574b; font-size:10px; line-height:1.4; }
.crackls-view .sysroot-pin > span { font-weight:600; flex-shrink:0; }
.crackls-view .sysroot-pin code { font-size:10px; overflow-wrap:anywhere; min-width:0; }

/* Reference toolbar and GitHub loading state. */
.crackls-view .eyebrow{font-size:10px}.crackls-view .heading{margin-bottom:24px;align-items:center}.crackls-view h1{font-size:32px;margin:8px 0 5px}.crackls-view .title-context{font-weight:400;font-size:22px;letter-spacing:-.5px;color:#657479;margin-left:10px}.crackls-view .heading p{font-size:13px}.crackls-view .ref-toolbar{min-width:280px;max-width:420px}.crackls-view .ref-toolbar label{font-size:11px;color:#526368;margin-bottom:6px}.crackls-view .ref-controls{display:flex;gap:8px}.crackls-view select{font:inherit;color:inherit;background:#fffefa;border:1px solid #b7c2bd;border-radius:5px;padding:10px 32px 10px 12px;width:100%;min-width:0;text-overflow:ellipsis;cursor:pointer}.crackls-view select:focus-visible,.crackls-view summary:focus-visible{outline:3px solid #d5824b;outline-offset:3px}.crackls-view .icon-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:9px}.crackls-view .icon-button svg{width:20px;height:20px}.crackls-view #refs-status{display:block;font-size:10px;color:#657479;margin-top:6px;max-width:340px}.crackls-view .status-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d8dedb;padding:16px 0}.crackls-view #summary{padding:0;gap:20px;font-size:12px;flex-wrap:wrap}.crackls-view #summary strong{font-size:17px}.crackls-view #stamp{font-size:11px;color:#657479;text-align:right}.crackls-view .scope-note{display:block;background:transparent;border:0;border-top:1px solid #d8dedb;padding:12px 0;margin:0 0 12px;font-size:11px}.crackls-view .scope-note summary{cursor:pointer;font-weight:600}.crackls-view .scope-note summary span{font-weight:400;color:#657479;margin-left:16px}.crackls-view .scope-note p{max-width:920px;margin-top:8px;font-size:12px}.crackls-view .load-status{position:relative;display:flex;align-items:center;gap:14px;background:#eef2ef;border:1px solid #cfdbd3;border-radius:6px;padding:20px;margin:0 0 16px;overflow:hidden}.crackls-view .load-status[hidden]{display:none}.crackls-view .load-status strong{font-size:14px;font-weight:600}.crackls-view .load-status p{font-size:12px;margin:3px 0 0}.crackls-view .loading-spinner{width:22px;height:22px;flex:0 0 22px;border:2px solid #c6d2ca;border-top-color:#577762;border-radius:50%;animation:crackls-spin 1s linear infinite}.crackls-view .loading-line{position:absolute;bottom:0;left:0;right:0;height:2px;overflow:hidden}.crackls-view .loading-line:after{content:'';display:block;height:100%;width:35%;background:#789580;animation:crackls-scan 2.2s ease-in-out infinite}.crackls-view .load-error{background:#fbefeb;border-color:#dfb8aa}.crackls-view .load-error .loading-spinner,.crackls-view .load-error .loading-line{display:none}.crackls-view .is-loading svg{animation:crackls-spin 1s linear infinite}.crackls-view #chain[aria-busy="true"] .graph-scroll{display:none}.crackls-view #chain[aria-busy="true"] .caption{display:none}.crackls-view .graph-heading{padding:16px 20px}.crackls-view .legend{gap:12px}
@keyframes crackls-spin{to{transform:rotate(360deg)}}@keyframes crackls-scan{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){.crackls-view .loading-spinner,.crackls-view .is-loading svg,.crackls-view .loading-line:after{animation:none}}
@media(max-width:1000px){.crackls-view .heading{align-items:stretch}.crackls-view .ref-toolbar{max-width:none;width:100%}.crackls-view .status-bar{align-items:flex-start;flex-direction:column;gap:12px}.crackls-view #stamp{text-align:left}.crackls-view .scope-note summary span{display:block;margin:4px 0 0 14px}}
@media(max-width:650px){.crackls-view .title-context{font-size:18px}.crackls-view .ref-toolbar{min-width:0}.crackls-view .topbar{gap:12px}.crackls-view #summary{gap:12px}}.crackls-view .load-error:not([hidden])~#chain .graph-scroll,.crackls-view .load-error:not([hidden])~#chain .caption{display:none}

/* Keep the reference control compact and its chevron clear of the edge. */.crackls-view .ref-toolbar{flex:0 1 320px;width:320px;min-width:0;max-width:100%}.crackls-view .ref-controls #branch{
  appearance:none;
  -webkit-appearance:none;
  height:40px;
  padding:0 38px 0 12px;
  font-size:13px;
  line-height:normal;
  border-color:#c4cdc7;
  background-color:#fffefa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' stroke='%23526368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  transition:border-color .15s ease,background-color .15s ease;
}.crackls-view .ref-controls #branch:hover{border-color:#8e9f94;background-color:#fafbf7}.crackls-view .ref-controls .icon-button{border-color:#c4cdc7}
@media(max-width:1000px){.crackls-view .ref-toolbar{flex-basis:auto}}
@media(forced-colors:active){.crackls-view .ref-controls #branch{appearance:auto;background-image:none;padding-right:12px}}
.crackls-view .heading{padding-bottom:0;border-bottom:0}
.crackls-view #chain[data-empty="true"] .graph-scroll,.crackls-view #chain[data-empty="true"] .caption{display:none}

.crackls-view .publication-state{display:flex;align-items:center;gap:7px;font-size:11px;margin:4px 0 8px;color:#52666a}.crackls-view .publication-state strong{font-weight:600}.crackls-view .publication-state a{margin:0;font-size:12px}

.crackls-view .data-notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin:0 0 14px;border:1px solid #e3d8ba;border-radius:6px;background:#fff7e8;color:#775a22}.crackls-view .data-notice>svg{width:19px;height:19px;flex:0 0 19px;margin-top:1px}.crackls-view .data-notice strong{display:block;font-size:12px;font-weight:600}.crackls-view .data-notice p{margin:4px 0 0;font-size:12px;line-height:1.6;color:#6c6048}