.f-radar {
  grid-column:1/-1
}
.figs-sub {
  grid-column:1/-1;
  padding-top:18px;
  border-top:1px solid var(--ink)
}
.f-evenly {
  grid-column:1/-1;
  align-self:start
}
.f-radar .demo {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  padding:20px;
  gap:24px
}
.f-radar .demo p,.f-evenly .demo p {
  max-width:none
}
.radar-map {
  align-self:start;
  min-width:0
}
.radar-map label {
  display:block
}
.radar-map input {
  display:block;
  width:100%;
  height:44px;
  margin:0;
  accent-color:var(--signal-ink);
  cursor:pointer
}
.radar-plot {
  position:relative;
  aspect-ratio:1
}
.radar-svg {
  width:100%;
  height:100%;
  overflow:visible
}
.radar-ring,.radar-sector {
  fill:none;
  stroke:var(--grid-2);
  stroke-width:1
}
.radar-ring:last-of-type {
  stroke:var(--ink)
}
.radar-label {
  font:500 14px var(--mono);
  fill:var(--ink)
}
.radar-weight,.radar-day {
  font:400 12px var(--mono);
  fill:var(--ink-2)
}
.radar-sweep {
  stroke:var(--signal-ink);
  stroke-width:1;
  opacity:.6
}
.radar-blip {
  fill:var(--bone);
  stroke:var(--ink);
  stroke-width:1.5
}
.radar-blip.is-selected {
  fill:var(--signal);
  stroke:var(--signal-ink)
}
.radar-blip.is-swept {
  fill:var(--signal);
  stroke:var(--signal-ink);
  stroke-width:4
}
.radar-targets {
  position:absolute;
  inset:0;
  pointer-events:none
}
.radar-target {
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto
}
.radar-target:focus-visible {
  outline:2px solid var(--signal-ink);
  border-radius:50%;
  outline-offset:0
}
.radar-key {
  text-align:center
}
.radar-side {
  min-width:0;
  padding-left:24px;
  border-left:1px solid var(--grid-2)
}
.radar-leaders {
  list-style:none;
  margin:10px 0 16px;
  padding:0;
  height:308px;
  overflow-y:auto;
  border-top:1px solid var(--ink)
}
.radar-leaders button {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 48px;
  align-items:center;
  gap:8px;
  min-height:44px;
  width:100%;
  text-align:left;
  padding:4px 8px;
  border-bottom:1px solid var(--grid-2);
  font:400 13px/1.3 var(--mono)
}
.radar-leaders button b {
  font-weight:500;
  text-align:right
}
.radar-rank {
  color:var(--ink-2);
  font-size:10px
}
.radar-leaders button[aria-pressed=true] {
  background:var(--ink);
  color:var(--bone)
}
.radar-leaders button[aria-pressed=true] .radar-rank {
  color:var(--bone-2)
}
.radar-detail {
  height:300px;
  overflow-y:auto;
  border-top:1px solid var(--ink);
  padding-top:12px;
  font-size:14px;
  line-height:1.45
}
.radar-detail p {
  max-width:none;
  margin-bottom:10px
}
.radar-detail .radar-evidence {
  font:400 25px/1.1 var(--serif);
  color:var(--ink)
}
.radar-roles {
  font:400 10px/1.5 var(--mono)
}
.radar-opener {
  border-left:2px solid var(--signal);
  padding-left:12px
}
.f-evenly .demo {
  padding:18px;
  font-size:13px;
  line-height:1.4
}
.evenly-add label {
  display:block;
  margin-bottom:8px
}
.evenly-entry {
  display:flex;
  border:1px solid var(--ink)
}
.evenly-entry input {
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  padding:10px;
  color:var(--ink);
  font:400 13px/1.4 var(--sans)
}
.evenly-entry input::placeholder {
  color:var(--ink-2);
  opacity:1
}
.evenly-entry button {
  flex:0 0 44px;
  min-height:44px;
  border-left:1px solid var(--ink);
  font-size:20px
}
.evenly-entry button:hover {
  color:var(--bone);
  background:var(--ink)
}
.evenly-group {
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-2)
}
.evenly-error {
  min-height:38px;
  padding-top:5px;
  font-size:12px;
  line-height:1.4;
  color:var(--signal-ink)!important
}
.evenly-expenses {
  list-style:none;
  margin:0;
  padding:0;
  height:156px;
  overflow-y:auto;
  border-top:1px solid var(--ink)
}
.evenly-expenses li {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) 44px;
  align-items:center;
  gap:7px;
  border-bottom:1px solid var(--grid-2)
}
.evenly-number {
  font:400 10px var(--mono);
  color:var(--ink-2)
}
.evenly-expenses button {
  min-width:44px;
  min-height:48px
}
.evenly-expenses button:hover {
  color:var(--signal-ink)
}
.evenly-heading {
  margin-top:18px;
  padding-bottom:6px;
  border-bottom:1px solid var(--ink)
}
.evenly-person {
  padding-bottom:8px;
  border-bottom:1px solid var(--grid-2)
}
.evenly-summary {
  display:grid;
  grid-template-columns:1fr auto 44px;
  align-items:center;
  gap:8px
}
.evenly-summary button {
  min-height:44px;
  font:400 11px var(--mono);
  text-decoration:underline;
  text-underline-offset:3px
}
.evenly-value {
  font:400 12px var(--mono);
  font-variant-numeric:tabular-nums
}
.evenly-bar {
  height:5px;
  position:relative;
  background:var(--grid-2)
}
.evenly-bar::after {
  content:"";
  position:absolute;
  left:50%;
  top:-2px;
  height:9px;
  width:1px;
  background:var(--ink)
}
.evenly-bar i {
  display:block;
  position:absolute;
  height:100%;
  background:var(--ink)
}
.evenly-bar i.owed {
  background:var(--signal-ink)
}
.evenly-why {
  list-style:none;
  padding:8px 0 0;
  margin:0;
  font:400 11px/1.5 var(--mono)
}
.evenly-why li {
  margin-top:6px;
  overflow-wrap:anywhere
}
.evenly-settle {
  margin-top:18px
}
.evenly-settle ul {
  list-style:none;
  margin:8px 0 0;
  padding:0;
  font:400 12px/1.8 var(--mono);
  min-height:65px
}
@media(max-width:1199px) {
  .f-radar,.f-evenly {
    grid-column:1/-1
  }
}
@media(max-width:767px) {
  .figs-sub {
    display:none
  }
  .f-radar .demo {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    padding:12px;
    max-height:720px;
    overflow-y:auto
  }
  .radar-side {
    padding:0;
    border-left:0
  }
  .radar-leaders {
    height:132px;
    margin-bottom:12px
  }
  .radar-leaders button {
    font-size:11px;
    grid-template-columns:18px minmax(0,1fr) 40px;
    gap:4px
  }
  .radar-detail {
    height:auto;
    min-height:310px;
    overflow:visible;
    font-size:13px
  }
  .radar-detail .radar-evidence {
    font-size:23px
  }
  .radar-key {
    font-size:10px
  }
  .radar-label {
    font-size:18px
  }
  .radar-weight,.radar-day {
    font-size:14px
  }
  .f-evenly .demo {
    padding:12px
  }
  .evenly-entry input {
    font-size:16px
  }
  .evenly-expenses {
    height:180px
  }
  .evenly-expenses li {
    grid-template-columns:16px minmax(0,1fr) 44px;
    gap:4px
  }
}
@media(pointer:coarse) {
  .radar-target {
    width:44px;
    height:44px
  }
}

.rail-count {
  display:none
}
@media(max-width:767px) {
  .rail-count {
    display:block;
    margin:0 0 14px;
    padding-inline:var(--pad);
    color:var(--ink-2);
    font-size:var(--fs-label)
  }
}