/* Hide one field from everyone (John, 2026-09-30): the eye beside each field on Me (static/field-visibility.js). */
.fv-row {
  display:flex;
  align-items:center;
  gap:6px
}

legend.fv-row {
  width:100%
}

.fv-eye {
  position:relative;
  flex:none;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:30px;
  height:30px;
  padding:0 6px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  line-height:1;
  cursor:pointer
}

/* A thumb-sized target without making the row taller. */
.fv-eye::after {
  content:'';
  position:absolute;
  inset:-7px -4px
}

.fv-eye svg,.own-hidden svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.fv-eye span:empty {
  display:none
}

.fv-eye:hover {
  color:var(--ink)
}

.fv-eye:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px
}

.fv-eye.is-hidden {
  color:var(--copper);
  border-color:rgba(214,167,124,.45);
  background:rgba(214,167,124,.1)
}

.fv-eye:disabled {
  opacity:.6
}

/* The field's own words fade a little while it is hidden; its value stays editable. */
.fv-row:has(.fv-eye.is-hidden) {
  color:var(--muted)
}

.fv-age {
  display:flex
}

.fv-age input {
  display:none
}

.fv-hobbies {
  margin:0 0 10px;
  font-size:13px;
  color:var(--muted)
}

.fv-hint {
  margin-top:6px
}

.own-hidden {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:13px;
  text-align:left
}

.own-hidden svg {
  flex:none;
  color:var(--copper)
}

/* On a wide form the age row spans both columns; keep its eye where the other eyes are, at the end of the
   label column (180px there, 08-map-polish.css). */
@media (min-width:561px) {
  .stats-field .fv-age {
    max-width:180px
  }
}