/* Hack Yourself: two progress toys for the reader.
   hy-gitlog  = git log --graph --me
   hy-modloader = ME.exe mod manager
   Shared file; every class is prefixed hyg- or hym-. */

/* ---------- shared ---------- */

.hyg,
.hym {
  --hyg-add: var(--accent3);
  --hyg-del: var(--accent);
}

@supports (color: oklch(from red l c h)) {
  .hyg,
  .hym {
    --hyg-add: oklch(from var(--accent3) l max(c, .09) 150);
    --hyg-del: oklch(from var(--accent) l c 25);
  }
}

.hyg b,
.hym b {
  font-variant-numeric: tabular-nums;
}

.hyg-sub,
.hym-sub {
  margin: 0 0 .9rem;
  color: var(--muted);
  font: .82rem/1.6 var(--mono);
}

.hyg [hidden],
.hym [hidden] {
  display: none !important;
}

/* =========================================================
   hy-gitlog
   ========================================================= */

.hyg-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: 0 0 .6rem;
}

.hyg-stat {
  min-width: 0;
  padding: .5rem .6rem .45rem;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
  line-height: 1.35;
}

.hyg-stat-k {
  display: block;
  color: var(--muted);
  font: .6rem/1.35 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hyg-stat b {
  display: block;
  color: var(--accent3);
  font: 600 1.3rem/1.2 var(--mono);
}

.hyg-stat small {
  display: block;
  color: var(--muted);
  font: .62rem/1.35 var(--mono);
}

.hyg-week {
  display: flex;
  width: max-content;
  gap: 3px;
  margin: 0 0 1px;
}

.hyg-week i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}

.hyg-week i.on {
  background: var(--accent);
}

.hyg-progress {
  margin: 0 0 1rem;
  padding: .5rem .7rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  color: var(--fg);
  font: .78rem/1.55 var(--mono);
}

.hyg-form {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .8rem;
  padding: .6rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface2);
}

.hyg-form-label {
  flex: 1 1 100%;
  margin: 0 0 .1rem;
  color: var(--muted);
  font: .62rem/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hyg-input,
.hyg-select,
.hym-input,
.hym-select {
  min-width: 0;
  min-height: 2.2rem;
  padding: .35rem .5rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: .78rem var(--mono);
}

.hyg-input,
.hym-input {
  flex: 1 1 12rem;
}

.hyg-select,
.hym-select {
  flex: 0 1 auto;
  max-width: 10.5rem;
}

.hyg-input::placeholder,
.hym-input::placeholder {
  color: var(--muted);
  opacity: .7;
}

.hyg-select:focus-visible,
.hyg-input:focus-visible,
.hym-select:focus-visible,
.hym-input:focus-visible {
  outline: 2px dashed var(--accent2);
  outline-offset: 1px;
}

.hyg-form .toy-btn,
.hym-form .toy-btn {
  min-height: 2.2rem;
}

.hyg-error,
.hym-error {
  flex: 1 1 100%;
  margin: 0;
  color: var(--accent);
  font: .7rem/1.4 var(--mono);
}

/* the site's .prose styles are opinionated; keep the toy's own lists and terminals clean */

.toy .hyg-list,
.toy .hym-list,
.toy .hyg-static-list,
.toy .hym-static-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toy .hyg-list > li,
.toy .hym-list > li,
.toy .hyg-static-list > li,
.toy .hym-static-list > li {
  margin: 0;
}

.toy .hyg-changelog pre,
.toy .hym-log {
  position: static;
  max-height: none;
  box-shadow: none;
  border: 0;
  background: transparent;
}

.toy .hyg-changelog pre::before,
.toy .hym-log::before {
  content: none;
  display: none;
}

.toy .hyg-changelog pre {
  margin: 0;
  padding: .65rem;
  overflow: auto;
  max-height: 36rem;
  color: var(--fg);
  font: .7rem/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the `git show` panel */

.hyg-diff {
  margin: 0 0 .8rem;
  overflow: hidden;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
  scroll-margin-top: 5rem;
}

.hyg-diff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  padding: .45rem .65rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
  font: .7rem/1.4 var(--mono);
}

.hyg-diff-hash {
  color: var(--accent3);
}

.hyg-diff-subject {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.hyg-diff-refs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .15rem;
}

.hyg-diff-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .65rem;
  padding: .35rem .65rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: .64rem/1.5 var(--mono);
}

.hyg-diff-body {
  padding: .45rem 0;
  font: .73rem/1.65 var(--mono);
}

.hyg-diff-line {
  display: block;
  padding: 0 .65rem;
  overflow-wrap: anywhere;
}

.hyg-diff-line.add {
  color: var(--hyg-add);
  background: color-mix(in oklab, var(--hyg-add) 9%, transparent);
}

.hyg-diff-line.del {
  color: var(--hyg-del);
  background: color-mix(in oklab, var(--hyg-del) 9%, transparent);
}

.hyg-diff-line .sig {
  display: inline-block;
  width: 1.1em;
}

.hyg-diff-note {
  margin: 0;
  padding: .4rem .65rem .5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: .68rem/1.5 var(--mono);
}

.hyg-diff-note b {
  color: var(--accent3);
}

/* graph + rows */

.hyg-stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  overflow: hidden;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hyg-graph {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in oklab, var(--surface2) 55%, transparent), transparent);
}

/* Absolutely positioned so the drawing can never resize the row it is drawn from. */
.hyg-graph svg {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
}

.hyg-list {
  list-style: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.hyg-item {
  position: relative;
}

.hyg-item + .hyg-item {
  border-top: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
}

.hyg-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  width: 100%;
  height: 3.7rem;
  margin: 0;
  padding: .25rem .55rem .25rem .45rem;
  background: none;
  border: 0;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.hyg-row:hover {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

.hyg-row[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.hyg-row:focus-visible {
  outline: 2px dashed var(--accent2);
  outline-offset: -2px;
}

.hyg-line {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  width: 100%;
}

.hyg-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--fg);
  font: .78rem/1.35 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hyg-refs {
  display: flex;
  flex: 0 1 auto;
  gap: .15rem;
  min-width: 0;
  overflow: hidden;
}

.hyg-ref {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  padding: 0 .35em;
  border: 1px solid var(--accent2);
  border-radius: 99px;
  color: var(--accent2);
  font: .58rem/1.55 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hyg-ref + .hyg-ref {
  margin-left: .15rem;
}

.hyg-ref[data-kind="tag"] {
  border-color: var(--accent3);
  color: var(--accent3);
}

.hyg-ref[data-kind="yours"] {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
}

.hyg-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  color: var(--muted);
  font: .6rem/1.3 var(--mono);
}

.hyg-hash {
  color: var(--accent3);
}

.hyg-dept,
.hym-dept {
  color: var(--muted);
}

.hyg-dept[data-dept="Inner critic"],
.hym-dept[data-dept="Inner critic"] {
  color: var(--accent2);
}

.hyg-dept[data-dept="Learning"],
.hym-dept[data-dept="Learning"] {
  color: var(--accent);
}

.hyg-dept[data-dept="Health"],
.hym-dept[data-dept="Health"] {
  color: var(--accent3);
}

.hyg-dept[data-dept="Tinkering"],
.hym-dept[data-dept="Tinkering"] {
  color: var(--accent2);
}

.hyg-dept[data-dept="Friends"],
.hym-dept[data-dept="Friends"] {
  color: var(--accent3);
}

.hyg-dept[data-dept="Fun"],
.hym-dept[data-dept="Fun"] {
  color: color-mix(in oklab, var(--accent) 45%, var(--accent2));
}

.hyg-type {
  padding: 0 .4em;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: .92em;
  line-height: 1.45;
}

.hyg-type[data-type="feat"] {
  color: var(--accent);
}

.hyg-type[data-type="fix"] {
  color: var(--accent2);
}

.hyg-type[data-type="chore"] {
  color: var(--muted);
}

.hyg-type[data-type="docs"] {
  color: var(--accent3);
}

.hyg-type[data-type="merge"] {
  color: var(--accent2);
  border-style: double;
  border-width: 3px;
}

.hyg-type[data-type="revert"] {
  border-style: dashed;
  color: var(--accent3);
}

/* SVG graph */

.hyg-edge {
  fill: none;
  stroke-width: 1.6;
  opacity: .8;
}

.hyg-edge-l0 {
  stroke: var(--accent);
}

.hyg-edge-l1 {
  stroke: var(--accent2);
}

.hyg-edge-l2 {
  stroke: var(--accent3);
}

.hyg-dot {
  fill: var(--code);
  stroke-width: 2;
}

.hyg-t-feat {
  stroke: var(--accent);
}

.hyg-t-fix {
  stroke: var(--accent2);
}

.hyg-t-chore {
  stroke: var(--muted);
}

.hyg-t-docs {
  stroke: var(--accent3);
}

.hyg-t-merge {
  stroke: var(--accent2);
  stroke-width: 3;
}

.hyg-t-revert {
  stroke: var(--accent3);
  stroke-dasharray: 2.4 1.6;
}

.hyg-dot.is-sel {
  fill: var(--accent);
  stroke: var(--fg);
}

.hyg-ring {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
  opacity: .9;
}

.hyg-dot.is-new {
  animation: hyg-pulse .9s ease-out 2;
}

@keyframes hyg-pulse {
  0%, 100% { stroke-width: 2; }
  45% { stroke-width: 5; }
}

/* no-JS fallback */

.hyg-fallback {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  margin-top: .4rem;
}

.hyg-fallback-svg {
  display: block;
  width: 64px;
  height: auto;
}

.hyg-static-list {
  display: grid;
  gap: .18rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font: .68rem/1.45 var(--mono);
}

.hyg-static-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .45rem;
  margin: 0;
  padding: .25rem 0;
  min-width: 0;
  border-top: 1px solid color-mix(in oklab, var(--line) 40%, transparent);
  overflow-wrap: anywhere;
}

.hyg-static-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.hyg-static-list .hyg-hash {
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
}

.hyg-static-list b {
  grid-column: 2;
  color: var(--fg);
  font-weight: 400;
}

.hyg-static-list .hyg-dept {
  grid-column: 2;
  margin-top: .05rem;
  font-size: .92em;
}

.hyg-howto {
  margin: 0 0 .9rem;
  padding: .55rem .7rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font: .72rem/1.6 var(--mono);
}

.hyg-howto b {
  color: var(--fg);
}

/* actions, changelog, notes */

.hyg-actions {
  margin-top: .9rem;
}

.hyg-actions .toy-btn {
  min-height: 2.2rem;
}

.hyg-remember,
.hym-remember {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--muted);
  font: .68rem/1.4 var(--mono);
  cursor: pointer;
}

.hyg-remember input,
.hym-remember input {
  accent-color: var(--accent);
  margin: 0;
}

.hyg-changelog {
  margin-top: .8rem;
  overflow: hidden;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hyg-changelog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .65rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: .66rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hyg-changelog-head .toy-btn {
  min-height: 1.8rem;
  padding: .1rem .5rem;
  font-size: .66rem;
}

.hyg-changelog pre {
  max-height: 36rem;
  margin: 0;
  padding: .65rem;
  overflow: auto;
  color: var(--fg);
  font: .7rem/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hyg-cap code {
  color: var(--accent2);
}

/* =========================================================
   hy-modloader
   ========================================================= */

.hym-stats {
  margin: 0 0 .75rem;
  padding: .6rem .7rem .55rem;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hym-stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  margin-bottom: .45rem;
  color: var(--muted);
  font: .62rem/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hym-stats-head .hym-active {
  margin-left: auto;
  color: var(--accent3);
  letter-spacing: 0;
  text-transform: none;
}

.hym-led {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
}

.hym-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem .7rem;
}

.hym-stat {
  min-width: 0;
}

.hym-stat-k {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  color: var(--muted);
  font: .64rem/1.4 var(--mono);
}

.hym-stat-k b {
  color: var(--fg);
  font-weight: 500;
}

.hym-bar {
  display: block;
  height: .42rem;
  margin-top: .22rem;
  overflow: hidden;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 99px;
}

.hym-bar i {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width .3s;
}

.hym-stat[data-stat="rest"] .hym-bar i {
  background: linear-gradient(90deg, var(--accent), var(--accent3));
}

.hym-status {
  margin: .5rem 0 0;
  color: var(--muted);
  font: .66rem/1.45 var(--mono);
}

.hym-conflict {
  margin: 0 0 .75rem;
  padding: .6rem .7rem;
  background: color-mix(in oklab, var(--accent3) 8%, transparent);
  border: 1px dashed var(--accent3);
  border-radius: 10px;
}

.hym-conflict p {
  margin: 0;
  color: var(--fg);
  font: .74rem/1.55 var(--mono);
}

.hym-conflict b {
  color: var(--accent3);
}

.hym-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}

.hym-conflict-actions .toy-btn {
  min-height: 2rem;
  padding: .2rem .55rem;
  font-size: .68rem;
}

.hym-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.hym-main {
  min-width: 0;
}

.hym-side {
  display: flex;
  min-width: 0;
}

.hym-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hym-mod {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: start;
  margin: 0;
  padding: .5rem .55rem;
}

.hym-mod + .hym-mod {
  border-top: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
}

.hym-mod.is-off {
  opacity: .64;
}

.hym-order {
  padding-top: .1rem;
  color: var(--accent3);
  font: .66rem/1.4 var(--mono);
  text-align: right;
}

.hym-mod.is-off .hym-order {
  color: var(--muted);
}

.hym-info {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.hym-name {
  color: var(--fg);
  font: .76rem/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.hym-ver {
  color: var(--muted);
  font-size: .9em;
}

.hym-desc {
  margin: 0;
  color: var(--muted);
  font: .68rem/1.45 var(--mono);
}

.hym-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font: .58rem/1.5 var(--mono);
}

.hym-dept {
  padding: 0 .4em;
  border: 1px solid currentColor;
  border-radius: 99px;
  line-height: 1.5;
}

.hym-src {
  color: var(--muted);
  opacity: .85;
}

.hym-toggle {
  min-width: 2.9rem;
  min-height: 1.9rem;
  padding: .1rem .4rem;
  font-size: .66rem;
  line-height: 1.4;
}

.hym-remove {
  padding: 0 .15rem;
  background: none;
  border: 0;
  color: var(--muted);
  font: .62rem/1.4 var(--mono);
  cursor: pointer;
}

.hym-remove:hover {
  color: var(--accent);
}

/* console */

.hym-console {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hym-console-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .55rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: .62rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hym-console-bar span:last-child {
  margin-left: auto;
  color: var(--accent3);
  letter-spacing: 0;
  text-transform: none;
}

.toy .hym-log {
  flex: 1 1 auto;
  height: auto;
  min-height: 10rem;
  margin: 0;
  padding: .55rem .6rem;
  overflow: auto;
  background: transparent;
  color: var(--fg);
  font: .62rem/1.65 var(--mono);
  white-space: pre;
  tab-size: 2;
}

.hym-console-foot {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem .5rem;
  color: var(--accent);
  font: .62rem/1.4 var(--mono);
}

.hym-cursor {
  display: inline-block;
  width: .45rem;
  height: .8rem;
  background: var(--accent);
  animation: hym-blink 1.2s steps(1) infinite;
}

@keyframes hym-blink {
  50% { opacity: 0; }
}

.hym-console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem .55rem;
  background: var(--surface2);
  border-top: 1px solid var(--line);
}

.hym-console-actions .toy-btn {
  min-height: 2rem;
  padding: .15rem .5rem;
  font-size: .68rem;
}

/* add a mod */

.hym-form {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
  padding: .6rem;
  background: var(--surface2);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.hym-form-label {
  flex: 1 1 100%;
  margin: 0 0 .1rem;
  color: var(--muted);
  font: .62rem/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hym-form .hym-name-input {
  flex: 1 1 10rem;
}

.hym-form .hym-select {
  max-width: 9.5rem;
}

/* no-JS build */

.hym-static-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.hym-static-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: start;
  margin: 0;
  padding: .45rem .55rem;
  font: .68rem/1.45 var(--mono);
}

.hym-static-list li + li {
  border-top: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
}

.hym-static-list .hym-order {
  padding-top: 0;
}

.hym-static-list .hym-name {
  font-size: .72rem;
}

.hym-static-list .hym-desc {
  margin-top: .1rem;
}

.hym-state {
  align-self: start;
  padding: 0 .4em;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font: .58rem/1.6 var(--mono);
}

.hym-state.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.toy .hym-log-static {
  height: auto;
  max-height: 16rem;
  margin-top: .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--code);
}

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  .hym-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .toy .hym-log {
    min-height: 12rem;
  }
}

@media (max-width: 560px) {
  .hyg-stats {
    grid-template-columns: 1fr 1fr;
  }

  .hyg-stat:last-child {
    grid-column: 1 / -1;
  }

  .hyg-stat:last-child b {
    display: inline-block;
    margin-right: .4rem;
  }

  .hyg-stat:last-child small {
    display: inline;
  }

  .hyg-stage {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .hyg-fallback {
    grid-template-columns: 1fr;
  }

  .hyg-fallback-svg {
    width: 52px;
  }

  .hyg-row {
    height: 3.8rem;
  }

  .hyg-row .hyg-ref {
    display: none;
  }

  .hyg-meta .hyg-hash {
    display: none;
  }

  .hyg-form .hyg-select {
    flex: 1 1 8rem;
    max-width: none;
  }

  .hyg-form .toy-btn {
    flex: 1 1 100%;
  }

  .hym-bars {
    grid-template-columns: 1fr 1fr;
  }

  .hym-mod {
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    gap: .35rem;
  }

  .hym-desc {
    font-size: .66rem;
  }

  .hym-form .hym-select {
    flex: 1 1 8rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hyg-row,
  .hym-bar i {
    transition: none;
  }

  .hyg-dot.is-new {
    animation: none;
  }

  .hym-cursor {
    animation: none;
  }
}

/* The diff opens inline, under the selected commit. */
.hyg-item > .hyg-diff {
  margin: .1rem .55rem .7rem .45rem;
}

.hyg-diff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  padding: .5rem .65rem;
  border-top: 1px solid var(--line);
  font: .72rem/1.4 var(--mono);
  color: var(--muted);
}

.hyg-diff-actions .toy-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.hyg-row {
  height: auto;
  min-height: 3.7rem;
}

@media (max-width: 620px) {
  .hyg-row {
    height: auto;
    min-height: 3.8rem;
  }

  .hyg-msg {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hyg-meta .hyg-hash {
    display: inline;
  }
}